From 06811f311feae6c9f7f76e3aa9a814ed15018d4b Mon Sep 17 00:00:00 2001
From: jos <wjosdejong@gmail.com>
Date: Mon, 7 Sep 2015 17:22:26 +0200
Subject: [PATCH] Released version 4.8.1

---
 HISTORY.md       |    2 +-
 bower.json       |    2 +-
 dist/vis.js      | 7266 +++++++++++++++++++++++-----------------------
 dist/vis.map     |    2 +-
 dist/vis.min.css |    2 +-
 dist/vis.min.js  |   40 +-
 package.json     |    2 +-
 7 files changed, 3701 insertions(+), 3615 deletions(-)

diff --git a/HISTORY.md b/HISTORY.md
index 53f0fe68..2b83e5a4 100644
--- a/HISTORY.md
+++ b/HISTORY.md
@@ -2,7 +2,7 @@
 http://visjs.org
 
 
-## not yet released, version 4.8.1-SNAPSHOT
+## 2015-09-07, version 4.8.1
 
 ### Network
 
diff --git a/bower.json b/bower.json
index 6fe859f2..9f0e5c63 100644
--- a/bower.json
+++ b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "vis",
-  "version": "4.8.1-SNAPSHOT",
+  "version": "4.8.1",
   "main": ["dist/vis.min.js", "dist/vis.min.css"],
   "description": "A dynamic, browser-based visualization library.",
   "homepage": "http://visjs.org/",
diff --git a/dist/vis.js b/dist/vis.js
index 50d54588..e91f4756 100644
--- a/dist/vis.js
+++ b/dist/vis.js
@@ -4,8 +4,8 @@
  *
  * A dynamic, browser-based visualization library.
  *
- * @version 4.8.1-SNAPSHOT
- * @date    2015-09-06
+ * @version 4.8.1
+ * @date    2015-09-07
  *
  * @license
  * Copyright (C) 2011-2015 Almende B.V, http://almende.com
@@ -29,7 +29,7 @@
 	if(typeof exports === 'object' && typeof module === 'object')
 		module.exports = factory();
 	else if(typeof define === 'function' && define.amd)
-		define(factory);
+		define([], factory);
 	else if(typeof exports === 'object')
 		exports["vis"] = factory();
 	else
@@ -97,8 +97,8 @@ return /******/ (function(modules) { // webpackBootstrap
   exports.graph3d = {
     Camera: __webpack_require__(15),
     Filter: __webpack_require__(16),
-    Point2d: __webpack_require__(12),
-    Point3d: __webpack_require__(14),
+    Point2d: __webpack_require__(14),
+    Point3d: __webpack_require__(13),
     Slider: __webpack_require__(17),
     StepNumber: __webpack_require__(18)
   };
@@ -110,16 +110,16 @@ return /******/ (function(modules) { // webpackBootstrap
     DateUtil: __webpack_require__(27),
     DataStep: __webpack_require__(52),
     Range: __webpack_require__(24),
-    stack: __webpack_require__(31),
-    TimeStep: __webpack_require__(34),
+    stack: __webpack_require__(32),
+    TimeStep: __webpack_require__(30),
 
     components: {
       items: {
-        Item: __webpack_require__(33),
+        Item: __webpack_require__(34),
         BackgroundItem: __webpack_require__(38),
         BoxItem: __webpack_require__(36),
         PointItem: __webpack_require__(37),
-        RangeItem: __webpack_require__(32)
+        RangeItem: __webpack_require__(33)
       },
 
       Component: __webpack_require__(26),
@@ -127,7 +127,7 @@ return /******/ (function(modules) { // webpackBootstrap
       CustomTime: __webpack_require__(42),
       DataAxis: __webpack_require__(51),
       GraphGroup: __webpack_require__(53),
-      Group: __webpack_require__(30),
+      Group: __webpack_require__(31),
       BackgroundGroup: __webpack_require__(35),
       ItemSet: __webpack_require__(29),
       Legend: __webpack_require__(57),
@@ -551,11 +551,11 @@ return /******/ (function(modules) { // webpackBootstrap
             // object is an ASP date
             return new Date(Number(match[1])); // parse number
           } else {
-              return moment(object).toDate(); // parse string
-            }
-        } else {
-            throw new Error('Cannot convert object of type ' + exports.getType(object) + ' to type Date');
+            return moment(object).toDate(); // parse string
           }
+        } else {
+          throw new Error('Cannot convert object of type ' + exports.getType(object) + ' to type Date');
+        }
 
       case 'Moment':
         if (exports.isNumber(object)) {
@@ -572,11 +572,11 @@ return /******/ (function(modules) { // webpackBootstrap
             // object is an ASP date
             return moment(Number(match[1])); // parse number
           } else {
-              return moment(object); // parse string
-            }
-        } else {
-            throw new Error('Cannot convert object of type ' + exports.getType(object) + ' to type Date');
+            return moment(object); // parse string
           }
+        } else {
+          throw new Error('Cannot convert object of type ' + exports.getType(object) + ' to type Date');
+        }
 
       case 'ISODate':
         if (exports.isNumber(object)) {
@@ -591,11 +591,11 @@ return /******/ (function(modules) { // webpackBootstrap
             // object is an ASP date
             return new Date(Number(match[1])).toISOString(); // parse number
           } else {
-              return new Date(object).toISOString(); // parse string
-            }
-        } else {
-            throw new Error('Cannot convert object of type ' + exports.getType(object) + ' to type ISODate');
+            return new Date(object).toISOString(); // parse string
           }
+        } else {
+          throw new Error('Cannot convert object of type ' + exports.getType(object) + ' to type ISODate');
+        }
 
       case 'ASPDate':
         if (exports.isNumber(object)) {
@@ -609,8 +609,8 @@ return /******/ (function(modules) { // webpackBootstrap
             // object is an ASP date
             value = new Date(Number(match[1])).valueOf(); // parse number
           } else {
-              value = new Date(object).valueOf(); // parse string
-            }
+            value = new Date(object).valueOf(); // parse string
+          }
           return '/Date(' + value + ')/';
         } else {
           throw new Error('Cannot convert object of type ' + exports.getType(object) + ' to type ASPDate');
@@ -842,13 +842,13 @@ return /******/ (function(modules) { // webpackBootstrap
     if (element.addEventListener) {
       if (useCapture === undefined) useCapture = false;
 
-      if (action === "mousewheel" && navigator.userAgent.indexOf("Firefox") >= 0) {
-        action = "DOMMouseScroll"; // For Firefox
+      if (action === 'mousewheel' && navigator.userAgent.indexOf('Firefox') >= 0) {
+        action = 'DOMMouseScroll'; // For Firefox
       }
 
       element.addEventListener(action, listener, useCapture);
     } else {
-      element.attachEvent("on" + action, listener); // IE browsers
+      element.attachEvent('on' + action, listener); // IE browsers
     }
   };
 
@@ -864,14 +864,14 @@ return /******/ (function(modules) { // webpackBootstrap
       // non-IE browsers
       if (useCapture === undefined) useCapture = false;
 
-      if (action === "mousewheel" && navigator.userAgent.indexOf("Firefox") >= 0) {
-        action = "DOMMouseScroll"; // For Firefox
+      if (action === 'mousewheel' && navigator.userAgent.indexOf('Firefox') >= 0) {
+        action = 'DOMMouseScroll'; // For Firefox
       }
 
       element.removeEventListener(action, listener, useCapture);
     } else {
       // IE browsers
-      element.detachEvent("on" + action, listener);
+      element.detachEvent('on' + action, listener);
     }
   };
 
@@ -884,8 +884,8 @@ return /******/ (function(modules) { // webpackBootstrap
     if (event.preventDefault) {
       event.preventDefault(); // non-IE browsers
     } else {
-        event.returnValue = false; // IE browsers
-      }
+      event.returnValue = false; // IE browsers
+    }
   };
 
   /**
@@ -1050,17 +1050,17 @@ return /******/ (function(modules) { // webpackBootstrap
    * @returns {*}
    */
   exports.overrideOpacity = function (color, opacity) {
-    if (color.indexOf("rgba") != -1) {
+    if (color.indexOf('rgba') != -1) {
       return color;
-    } else if (color.indexOf("rgb") != -1) {
-      var rgb = color.substr(color.indexOf("(") + 1).replace(")", "").split(",");
-      return "rgba(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + "," + opacity + ")";
+    } else if (color.indexOf('rgb') != -1) {
+      var rgb = color.substr(color.indexOf('(') + 1).replace(')', '').split(',');
+      return 'rgba(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ',' + opacity + ')';
     } else {
       var rgb = exports.hexToRGB(color);
       if (rgb == null) {
         return color;
       } else {
-        return "rgba(" + rgb.r + "," + rgb.g + "," + rgb.b + "," + opacity + ")";
+        return 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' + opacity + ')';
       }
     }
   };
@@ -1074,7 +1074,7 @@ return /******/ (function(modules) { // webpackBootstrap
    * @constructor
    */
   exports.RGBToHex = function (red, green, blue) {
-    return "#" + ((1 << 24) + (red << 16) + (green << 8) + blue).toString(16).slice(1);
+    return '#' + ((1 << 24) + (red << 16) + (green << 8) + blue).toString(16).slice(1);
   };
 
   /**
@@ -1290,12 +1290,12 @@ return /******/ (function(modules) { // webpackBootstrap
   };
 
   exports.isValidRGB = function (rgb) {
-    rgb = rgb.replace(" ", "");
+    rgb = rgb.replace(' ', '');
     var isOk = /rgb\((\d{1,3}),(\d{1,3}),(\d{1,3})\)/i.test(rgb);
     return isOk;
   };
   exports.isValidRGBA = function (rgba) {
-    rgba = rgba.replace(" ", "");
+    rgba = rgba.replace(' ', '');
     var isOk = /rgba\((\d{1,3}),(\d{1,3}),(\d{1,3}),(.{1,3})\)/i.test(rgba);
     return isOk;
   };
@@ -1308,11 +1308,11 @@ return /******/ (function(modules) { // webpackBootstrap
    * @returns {*}
    */
   exports.selectiveBridgeObject = function (fields, referenceObject) {
-    if (typeof referenceObject == "object") {
+    if (typeof referenceObject == 'object') {
       var objectTo = Object.create(referenceObject);
       for (var i = 0; i < fields.length; i++) {
         if (referenceObject.hasOwnProperty(fields[i])) {
-          if (typeof referenceObject[fields[i]] == "object") {
+          if (typeof referenceObject[fields[i]] == 'object') {
             objectTo[fields[i]] = exports.bridgeObject(referenceObject[fields[i]]);
           }
         }
@@ -1331,11 +1331,11 @@ return /******/ (function(modules) { // webpackBootstrap
    * @returns {*}
    */
   exports.bridgeObject = function (referenceObject) {
-    if (typeof referenceObject == "object") {
+    if (typeof referenceObject == 'object') {
       var objectTo = Object.create(referenceObject);
       for (var i in referenceObject) {
         if (referenceObject.hasOwnProperty(i)) {
-          if (typeof referenceObject[i] == "object") {
+          if (typeof referenceObject[i] == 'object') {
             objectTo[i] = exports.bridgeObject(referenceObject[i]);
           }
         }
@@ -1547,13 +1547,13 @@ return /******/ (function(modules) { // webpackBootstrap
 /***/ function(module, exports, __webpack_require__) {
 
   /* WEBPACK VAR INJECTION */(function(module) {//! moment.js
-  //! version : 2.10.3
+  //! version : 2.10.6
   //! authors : Tim Wood, Iskren Chernev, Moment.js contributors
   //! license : MIT
   //! momentjs.com
 
   (function (global, factory) {
-      true ? module.exports = factory() :
+       true ? module.exports = factory() :
       typeof define === 'function' && define.amd ? define(factory) :
       global.moment = factory()
   }(this, function () { 'use strict';
@@ -1642,6 +1642,7 @@ return /******/ (function(modules) { // webpackBootstrap
                   flags.overflow < 0 &&
                   !flags.empty &&
                   !flags.invalidMonth &&
+                  !flags.invalidWeekday &&
                   !flags.nullInput &&
                   !flags.invalidFormat &&
                   !flags.userInvalidated;
@@ -1722,7 +1723,7 @@ return /******/ (function(modules) { // webpackBootstrap
       // Moment prototype object
       function Moment(config) {
           copyConfig(this, config);
-          this._d = new Date(+config._d);
+          this._d = new Date(config._d != null ? config._d.getTime() : NaN);
           // Prevent infinite loop in case updateOffset creates new moment
           // objects.
           if (updateInProgress === false) {
@@ -1736,16 +1737,20 @@ return /******/ (function(modules) { // webpackBootstrap
           return obj instanceof Moment || (obj != null && obj._isAMomentObject != null);
       }
 
+      function absFloor (number) {
+          if (number < 0) {
+              return Math.ceil(number);
+          } else {
+              return Math.floor(number);
+          }
+      }
+
       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);
-              }
+              value = absFloor(coercedNumber);
           }
 
           return value;
@@ -1843,9 +1848,7 @@ return /******/ (function(modules) { // webpackBootstrap
       function defineLocale (name, values) {
           if (values !== null) {
               values.abbr = name;
-              if (!locales[name]) {
-                  locales[name] = new Locale();
-              }
+              locales[name] = locales[name] || new Locale();
               locales[name].set(values);
 
               // backwards compat for now: also set the locale
@@ -1949,16 +1952,14 @@ return /******/ (function(modules) { // webpackBootstrap
       }
 
       function zeroFill(number, targetLength, forceSign) {
-          var output = '' + Math.abs(number),
+          var absNumber = '' + Math.abs(number),
+              zerosToFill = targetLength - absNumber.length,
               sign = number >= 0;
-
-          while (output.length < targetLength) {
-              output = '0' + output;
-          }
-          return (sign ? (forceSign ? '+' : '') : '-') + output;
+          return (sign ? (forceSign ? '+' : '') : '-') +
+              Math.pow(10, Math.max(0, zerosToFill)).toString().substr(1) + absNumber;
       }
 
-      var formattingTokens = /(\[[^\[]*\])|(\\)?(Mo|MM?M?M?|Do|DDDo|DD?D?D?|ddd?d?|do?|w[o|w]?|W[o|W]?|Q|YYYYYY|YYYYY|YYYY|YY|gg(ggg?)?|GG(GGG?)?|e|E|a|A|hh?|HH?|mm?|ss?|S{1,4}|x|X|zz?|ZZ?|.)/g;
+      var 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,9}|x|X|zz?|ZZ?|.)/g;
 
       var localFormattingTokens = /(\[[^\[]*\])|(\\)?(LTS|LT|LL?L?L?|l{1,4})/g;
 
@@ -2026,10 +2027,7 @@ return /******/ (function(modules) { // webpackBootstrap
           }
 
           format = expandFormat(format, m.localeData());
-
-          if (!formatFunctions[format]) {
-              formatFunctions[format] = makeFormatFunction(format);
-          }
+          formatFunctions[format] = formatFunctions[format] || makeFormatFunction(format);
 
           return formatFunctions[format](m);
       }
@@ -2073,8 +2071,15 @@ return /******/ (function(modules) { // webpackBootstrap
 
       var regexes = {};
 
+      function isFunction (sth) {
+          // https://github.com/moment/moment/issues/2325
+          return typeof sth === 'function' &&
+              Object.prototype.toString.call(sth) === '[object Function]';
+      }
+
+
       function addRegexToken (token, regex, strictRegex) {
-          regexes[token] = typeof regex === 'function' ? regex : function (isStrict) {
+          regexes[token] = isFunction(regex) ? regex : function (isStrict) {
               return (isStrict && strictRegex) ? strictRegex : regex;
           };
       }
@@ -2282,12 +2287,11 @@ return /******/ (function(modules) { // webpackBootstrap
       }
 
       function deprecate(msg, fn) {
-          var firstTime = true,
-              msgWithStack = msg + '\n' + (new Error()).stack;
+          var firstTime = true;
 
           return extend(function () {
               if (firstTime) {
-                  warn(msgWithStack);
+                  warn(msg + '\n' + (new Error()).stack);
                   firstTime = false;
               }
               return fn.apply(this, arguments);
@@ -2335,14 +2339,14 @@ return /******/ (function(modules) { // webpackBootstrap
               getParsingFlags(config).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] || ' ');
+                      config._f = isoDates[i][0];
                       break;
                   }
               }
               for (i = 0, l = isoTimes.length; i < l; i++) {
                   if (isoTimes[i][1].exec(string)) {
-                      config._f += isoTimes[i][0];
+                      // match[6] should be 'T' or space
+                      config._f += (match[6] || ' ') + isoTimes[i][0];
                       break;
                   }
               }
@@ -2421,7 +2425,10 @@ return /******/ (function(modules) { // webpackBootstrap
       addRegexToken('YYYYY',  match1to6, match6);
       addRegexToken('YYYYYY', match1to6, match6);
 
-      addParseToken(['YYYY', 'YYYYY', 'YYYYYY'], YEAR);
+      addParseToken(['YYYYY', 'YYYYYY'], YEAR);
+      addParseToken('YYYY', function (input, array) {
+          array[YEAR] = input.length === 2 ? utils_hooks__hooks.parseTwoDigitYear(input) : toInt(input);
+      });
       addParseToken('YY', function (input, array) {
           array[YEAR] = utils_hooks__hooks.parseTwoDigitYear(input);
       });
@@ -2548,18 +2555,18 @@ return /******/ (function(modules) { // webpackBootstrap
 
       //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 = createUTCDate(year, 0, 1).getUTCDay();
-          var daysToAdd;
-          var dayOfYear;
+          var week1Jan = 6 + firstDayOfWeek - firstDayOfWeekOfYear, janX = createUTCDate(year, 0, 1 + week1Jan), d = janX.getUTCDay(), dayOfYear;
+          if (d < firstDayOfWeek) {
+              d += 7;
+          }
 
-          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;
+          weekday = weekday != null ? 1 * weekday : firstDayOfWeek;
+
+          dayOfYear = 1 + week1Jan + 7 * (week - 1) - d + weekday;
 
           return {
-              year      : dayOfYear > 0 ? year      : year - 1,
-              dayOfYear : dayOfYear > 0 ? dayOfYear : daysInYear(year - 1) + dayOfYear
+              year: dayOfYear > 0 ? year : year - 1,
+              dayOfYear: dayOfYear > 0 ?  dayOfYear : daysInYear(year - 1) + dayOfYear
           };
       }
 
@@ -2845,9 +2852,19 @@ return /******/ (function(modules) { // webpackBootstrap
       }
 
       function createFromConfig (config) {
+          var res = new Moment(checkOverflow(prepareConfig(config)));
+          if (res._nextDay) {
+              // Adding is smart enough around DST
+              res.add(1, 'd');
+              res._nextDay = undefined;
+          }
+
+          return res;
+      }
+
+      function prepareConfig (config) {
           var input = config._i,
-              format = config._f,
-              res;
+              format = config._f;
 
           config._locale = config._locale || locale_locales__getLocale(config._l);
 
@@ -2871,14 +2888,7 @@ return /******/ (function(modules) { // webpackBootstrap
               configFromInput(config);
           }
 
-          res = new Moment(checkOverflow(config));
-          if (res._nextDay) {
-              // Adding is smart enough around DST
-              res.add(1, 'd');
-              res._nextDay = undefined;
-          }
-
-          return res;
+          return config;
       }
 
       function configFromInput(config) {
@@ -2958,7 +2968,7 @@ return /******/ (function(modules) { // webpackBootstrap
           }
           res = moments[0];
           for (i = 1; i < moments.length; ++i) {
-              if (moments[i][fn](res)) {
+              if (!moments[i].isValid() || moments[i][fn](res)) {
                   res = moments[i];
               }
           }
@@ -3070,7 +3080,6 @@ return /******/ (function(modules) { // webpackBootstrap
           } else {
               return local__createLocal(input).local();
           }
-          return model._isUTC ? local__createLocal(input).zone(model._offset || 0) : local__createLocal(input).local();
       }
 
       function getDateOffset (m) {
@@ -3170,12 +3179,7 @@ return /******/ (function(modules) { // webpackBootstrap
       }
 
       function hasAlignedHourOffset (input) {
-          if (!input) {
-              input = 0;
-          }
-          else {
-              input = local__createLocal(input).utcOffset();
-          }
+          input = input ? local__createLocal(input).utcOffset() : 0;
 
           return (this.utcOffset() - input) % 60 === 0;
       }
@@ -3188,12 +3192,24 @@ return /******/ (function(modules) { // webpackBootstrap
       }
 
       function isDaylightSavingTimeShifted () {
-          if (this._a) {
-              var other = this._isUTC ? create_utc__createUTC(this._a) : local__createLocal(this._a);
-              return this.isValid() && compareArrays(this._a, other.toArray()) > 0;
+          if (typeof this._isDSTShifted !== 'undefined') {
+              return this._isDSTShifted;
           }
 
-          return false;
+          var c = {};
+
+          copyConfig(c, this);
+          c = prepareConfig(c);
+
+          if (c._a) {
+              var other = c._isUTC ? create_utc__createUTC(c._a) : local__createLocal(c._a);
+              this._isDSTShifted = this.isValid() &&
+                  compareArrays(c._a, other.toArray()) > 0;
+          } else {
+              this._isDSTShifted = false;
+          }
+
+          return this._isDSTShifted;
       }
 
       function isLocal () {
@@ -3353,7 +3369,7 @@ return /******/ (function(modules) { // webpackBootstrap
       var add_subtract__add      = createAdder(1, 'add');
       var add_subtract__subtract = createAdder(-1, 'subtract');
 
-      function moment_calendar__calendar (time) {
+      function moment_calendar__calendar (time, formats) {
           // We want to compare the start of today, vs this.
           // Getting start-of-today depends on whether we're local/utc/offset or not.
           var now = time || local__createLocal(),
@@ -3365,7 +3381,7 @@ return /******/ (function(modules) { // webpackBootstrap
                   diff < 1 ? 'sameDay' :
                   diff < 2 ? 'nextDay' :
                   diff < 7 ? 'nextWeek' : 'sameElse';
-          return this.format(this.localeData().calendar(format, this, local__createLocal(now)));
+          return this.format(formats && formats[format] || this.localeData().calendar(format, this, local__createLocal(now)));
       }
 
       function clone () {
@@ -3412,14 +3428,6 @@ return /******/ (function(modules) { // webpackBootstrap
           }
       }
 
-      function absFloor (number) {
-          if (number < 0) {
-              return Math.ceil(number);
-          } else {
-              return Math.floor(number);
-          }
-      }
-
       function diff (input, units, asFloat) {
           var that = cloneWithOffset(input, this),
               zoneDelta = (that.utcOffset() - this.utcOffset()) * 6e4,
@@ -3610,6 +3618,19 @@ return /******/ (function(modules) { // webpackBootstrap
           return [m.year(), m.month(), m.date(), m.hour(), m.minute(), m.second(), m.millisecond()];
       }
 
+      function toObject () {
+          var m = this;
+          return {
+              years: m.year(),
+              months: m.month(),
+              date: m.date(),
+              hours: m.hours(),
+              minutes: m.minutes(),
+              seconds: m.seconds(),
+              milliseconds: m.milliseconds()
+          };
+      }
+
       function moment_valid__isValid () {
           return valid__isValid(this);
       }
@@ -3781,18 +3802,20 @@ return /******/ (function(modules) { // webpackBootstrap
       // HELPERS
 
       function parseWeekday(input, locale) {
-          if (typeof input === 'string') {
-              if (!isNaN(input)) {
-                  input = parseInt(input, 10);
-              }
-              else {
-                  input = locale.weekdaysParse(input);
-                  if (typeof input !== 'number') {
-                      return null;
-                  }
-              }
+          if (typeof input !== 'string') {
+              return input;
+          }
+
+          if (!isNaN(input)) {
+              return parseInt(input, 10);
+          }
+
+          input = locale.weekdaysParse(input);
+          if (typeof input === 'number') {
+              return input;
           }
-          return input;
+
+          return null;
       }
 
       // LOCALES
@@ -3815,9 +3838,7 @@ return /******/ (function(modules) { // webpackBootstrap
       function localeWeekdaysParse (weekdayName) {
           var i, mom, regex;
 
-          if (!this._weekdaysParse) {
-              this._weekdaysParse = [];
-          }
+          this._weekdaysParse = this._weekdaysParse || [];
 
           for (i = 0; i < 7; i++) {
               // make the regex if we don't have it already
@@ -3964,12 +3985,26 @@ return /******/ (function(modules) { // webpackBootstrap
           return ~~(this.millisecond() / 10);
       });
 
-      function millisecond__milliseconds (token) {
-          addFormatToken(0, [token, 3], 0, 'millisecond');
-      }
+      addFormatToken(0, ['SSS', 3], 0, 'millisecond');
+      addFormatToken(0, ['SSSS', 4], 0, function () {
+          return this.millisecond() * 10;
+      });
+      addFormatToken(0, ['SSSSS', 5], 0, function () {
+          return this.millisecond() * 100;
+      });
+      addFormatToken(0, ['SSSSSS', 6], 0, function () {
+          return this.millisecond() * 1000;
+      });
+      addFormatToken(0, ['SSSSSSS', 7], 0, function () {
+          return this.millisecond() * 10000;
+      });
+      addFormatToken(0, ['SSSSSSSS', 8], 0, function () {
+          return this.millisecond() * 100000;
+      });
+      addFormatToken(0, ['SSSSSSSSS', 9], 0, function () {
+          return this.millisecond() * 1000000;
+      });
 
-      millisecond__milliseconds('SSS');
-      millisecond__milliseconds('SSSS');
 
       // ALIASES
 
@@ -3980,11 +4015,19 @@ return /******/ (function(modules) { // webpackBootstrap
       addRegexToken('S',    match1to3, match1);
       addRegexToken('SS',   match1to3, match2);
       addRegexToken('SSS',  match1to3, match3);
-      addRegexToken('SSSS', matchUnsigned);
-      addParseToken(['S', 'SS', 'SSS', 'SSSS'], function (input, array) {
+
+      var token;
+      for (token = 'SSSS'; token.length <= 9; token += 'S') {
+          addRegexToken(token, matchUnsigned);
+      }
+
+      function parseMs(input, array) {
           array[MILLISECOND] = toInt(('0.' + input) * 1000);
-      });
+      }
 
+      for (token = 'S'; token.length <= 9; token += 'S') {
+          addParseToken(token, parseMs);
+      }
       // MOMENTS
 
       var getSetMillisecond = makeGetSet('Milliseconds', false);
@@ -4031,6 +4074,7 @@ return /******/ (function(modules) { // webpackBootstrap
       momentPrototype__proto.startOf      = startOf;
       momentPrototype__proto.subtract     = add_subtract__subtract;
       momentPrototype__proto.toArray      = toArray;
+      momentPrototype__proto.toObject     = toObject;
       momentPrototype__proto.toDate       = toDate;
       momentPrototype__proto.toISOString  = moment_format__toISOString;
       momentPrototype__proto.toJSON       = moment_format__toISOString;
@@ -4130,19 +4174,23 @@ return /******/ (function(modules) { // webpackBootstrap
           LT   : 'h:mm A',
           L    : 'MM/DD/YYYY',
           LL   : 'MMMM D, YYYY',
-          LLL  : 'MMMM D, YYYY LT',
-          LLLL : 'dddd, MMMM D, YYYY LT'
+          LLL  : 'MMMM D, YYYY h:mm A',
+          LLLL : 'dddd, MMMM D, YYYY h:mm A'
       };
 
       function longDateFormat (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;
+          var format = this._longDateFormat[key],
+              formatUpper = this._longDateFormat[key.toUpperCase()];
+
+          if (format || !formatUpper) {
+              return format;
           }
-          return output;
+
+          this._longDateFormat[key] = formatUpper.replace(/MMMM|MM|DD|dddd/g, function (val) {
+              return val.slice(1);
+          });
+
+          return this._longDateFormat[key];
       }
 
       var defaultInvalidDate = 'Invalid date';
@@ -4351,12 +4399,29 @@ return /******/ (function(modules) { // webpackBootstrap
           return duration_add_subtract__addSubtract(this, input, value, -1);
       }
 
+      function absCeil (number) {
+          if (number < 0) {
+              return Math.floor(number);
+          } else {
+              return Math.ceil(number);
+          }
+      }
+
       function bubble () {
           var milliseconds = this._milliseconds;
           var days         = this._days;
           var months       = this._months;
           var data         = this._data;
-          var seconds, minutes, hours, years = 0;
+          var seconds, minutes, hours, years, monthsFromDays;
+
+          // if we have a mix of positive and negative values, bubble down first
+          // check: https://github.com/moment/moment/issues/2166
+          if (!((milliseconds >= 0 && days >= 0 && months >= 0) ||
+                  (milliseconds <= 0 && days <= 0 && months <= 0))) {
+              milliseconds += absCeil(monthsToDays(months) + days) * 864e5;
+              days = 0;
+              months = 0;
+          }
 
           // The following code bubbles up values, see the tests for
           // examples of what that means.
@@ -4373,17 +4438,13 @@ return /******/ (function(modules) { // webpackBootstrap
 
           days += absFloor(hours / 24);
 
-          // Accurately convert days to years, assume start from year 0.
-          years = absFloor(daysToYears(days));
-          days -= absFloor(yearsToDays(years));
-
-          // 30 days to a month
-          // TODO (iskren): Use anchor date (like 1st Jan) to compute this.
-          months += absFloor(days / 30);
-          days   %= 30;
+          // convert days to months
+          monthsFromDays = absFloor(daysToMonths(days));
+          months += monthsFromDays;
+          days -= absCeil(monthsToDays(monthsFromDays));
 
           // 12 months -> 1 year
-          years  += absFloor(months / 12);
+          years = absFloor(months / 12);
           months %= 12;
 
           data.days   = days;
@@ -4393,15 +4454,15 @@ return /******/ (function(modules) { // webpackBootstrap
           return this;
       }
 
-      function daysToYears (days) {
+      function daysToMonths (days) {
           // 400 years have 146097 days (taking into account leap year rules)
-          return days * 400 / 146097;
+          // 400 years have 12 months === 4800
+          return days * 4800 / 146097;
       }
 
-      function yearsToDays (years) {
-          // years * 365 + absFloor(years / 4) -
-          //     absFloor(years / 100) + absFloor(years / 400);
-          return years * 146097 / 400;
+      function monthsToDays (months) {
+          // the reverse of daysToMonths
+          return months * 146097 / 4800;
       }
 
       function as (units) {
@@ -4413,11 +4474,11 @@ return /******/ (function(modules) { // webpackBootstrap
 
           if (units === 'month' || units === 'year') {
               days   = this._days   + milliseconds / 864e5;
-              months = this._months + daysToYears(days) * 12;
+              months = this._months + daysToMonths(days);
               return units === 'month' ? months : months / 12;
           } else {
               // handle milliseconds separately because of floating point math errors (issue #1867)
-              days = this._days + Math.round(yearsToDays(this._months / 12));
+              days = this._days + Math.round(monthsToDays(this._months));
               switch (units) {
                   case 'week'   : return days / 7     + milliseconds / 6048e5;
                   case 'day'    : return days         + milliseconds / 864e5;
@@ -4467,7 +4528,7 @@ return /******/ (function(modules) { // webpackBootstrap
           };
       }
 
-      var duration_get__milliseconds = makeGetter('milliseconds');
+      var milliseconds = makeGetter('milliseconds');
       var seconds      = makeGetter('seconds');
       var minutes      = makeGetter('minutes');
       var hours        = makeGetter('hours');
@@ -4545,13 +4606,36 @@ return /******/ (function(modules) { // webpackBootstrap
       var iso_string__abs = Math.abs;
 
       function iso_string__toISOString() {
+          // for ISO strings we do not use the normal bubbling rules:
+          //  * milliseconds bubble up until they become hours
+          //  * days do not bubble at all
+          //  * months bubble up until they become years
+          // This is because there is no context-free conversion between hours and days
+          // (think of clock changes)
+          // and also not between days and months (28-31 days per month)
+          var seconds = iso_string__abs(this._milliseconds) / 1000;
+          var days         = iso_string__abs(this._days);
+          var months       = iso_string__abs(this._months);
+          var minutes, hours, years;
+
+          // 3600 seconds -> 60 minutes -> 1 hour
+          minutes           = absFloor(seconds / 60);
+          hours             = absFloor(minutes / 60);
+          seconds %= 60;
+          minutes %= 60;
+
+          // 12 months -> 1 year
+          years  = absFloor(months / 12);
+          months %= 12;
+
+
           // inspired by https://github.com/dordille/moment-isoduration/blob/master/moment.isoduration.js
-          var Y = iso_string__abs(this.years());
-          var M = iso_string__abs(this.months());
-          var D = iso_string__abs(this.days());
-          var h = iso_string__abs(this.hours());
-          var m = iso_string__abs(this.minutes());
-          var s = iso_string__abs(this.seconds() + this.milliseconds() / 1000);
+          var Y = years;
+          var M = months;
+          var D = days;
+          var h = hours;
+          var m = minutes;
+          var s = seconds;
           var total = this.asSeconds();
 
           if (!total) {
@@ -4588,7 +4672,7 @@ return /******/ (function(modules) { // webpackBootstrap
       duration_prototype__proto.valueOf        = duration_as__valueOf;
       duration_prototype__proto._bubble        = bubble;
       duration_prototype__proto.get            = duration_get__get;
-      duration_prototype__proto.milliseconds   = duration_get__milliseconds;
+      duration_prototype__proto.milliseconds   = milliseconds;
       duration_prototype__proto.seconds        = seconds;
       duration_prototype__proto.minutes        = minutes;
       duration_prototype__proto.hours          = hours;
@@ -4626,7 +4710,7 @@ return /******/ (function(modules) { // webpackBootstrap
       // Side effect imports
 
 
-      utils_hooks__hooks.version = '2.10.3';
+      utils_hooks__hooks.version = '2.10.6';
 
       setHookCallback(local__createLocal);
 
@@ -5041,21 +5125,21 @@ return /******/ (function(modules) { // webpackBootstrap
     var point;
     if (groupTemplate.style == 'circle') {
       point = exports.getSVGElement('circle', JSONcontainer, svgContainer);
-      point.setAttributeNS(null, "cx", x);
-      point.setAttributeNS(null, "cy", y);
-      point.setAttributeNS(null, "r", 0.5 * groupTemplate.size);
+      point.setAttributeNS(null, 'cx', x);
+      point.setAttributeNS(null, 'cy', y);
+      point.setAttributeNS(null, 'r', 0.5 * groupTemplate.size);
     } else {
       point = exports.getSVGElement('rect', JSONcontainer, svgContainer);
-      point.setAttributeNS(null, "x", x - 0.5 * groupTemplate.size);
-      point.setAttributeNS(null, "y", y - 0.5 * groupTemplate.size);
-      point.setAttributeNS(null, "width", groupTemplate.size);
-      point.setAttributeNS(null, "height", groupTemplate.size);
+      point.setAttributeNS(null, 'x', x - 0.5 * groupTemplate.size);
+      point.setAttributeNS(null, 'y', y - 0.5 * groupTemplate.size);
+      point.setAttributeNS(null, 'width', groupTemplate.size);
+      point.setAttributeNS(null, 'height', groupTemplate.size);
     }
 
     if (groupTemplate.style !== undefined) {
-      point.setAttributeNS(null, "style", groupTemplate.style);
+      point.setAttributeNS(null, 'style', groupTemplate.style);
     }
-    point.setAttributeNS(null, "class", groupTemplate.className + " vis-point");
+    point.setAttributeNS(null, 'class', groupTemplate.className + ' vis-point');
     //handle label
 
     if (labelObj) {
@@ -5072,10 +5156,10 @@ return /******/ (function(modules) { // webpackBootstrap
       }
 
       if (labelObj.className) {
-        label.setAttributeNS(null, "class", labelObj.className + " vis-label");
+        label.setAttributeNS(null, 'class', labelObj.className + ' vis-label');
       }
-      label.setAttributeNS(null, "x", x);
-      label.setAttributeNS(null, "y", y);
+      label.setAttributeNS(null, 'x', x);
+      label.setAttributeNS(null, 'y', y);
     }
 
     return point;
@@ -5095,13 +5179,13 @@ return /******/ (function(modules) { // webpackBootstrap
         y -= height;
       }
       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);
+      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);
       if (style) {
-        rect.setAttributeNS(null, "style", style);
+        rect.setAttributeNS(null, 'style', style);
       }
     }
   };
@@ -5731,8 +5815,8 @@ return /******/ (function(modules) { // webpackBootstrap
     // 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');
-      }
+      throw new TypeError('Order must be a function or a string');
+    }
   };
 
   /**
@@ -6508,9 +6592,7 @@ return /******/ (function(modules) { // webpackBootstrap
               if (this._ids[id]) {
                 delete this._ids[id];
                 removed.push(id);
-              } else {
-                // nothing interesting for me :-(
-              }
+              } else {}
             }
           }
 
@@ -6554,18 +6636,20 @@ return /******/ (function(modules) { // webpackBootstrap
 
   module.exports = DataView;
 
+  // nothing interesting for me :-(
+
 /***/ },
 /* 11 */
 /***/ function(module, exports, __webpack_require__) {
 
   'use strict';
 
-  var Emitter = __webpack_require__(13);
+  var Emitter = __webpack_require__(12);
   var DataSet = __webpack_require__(8);
   var DataView = __webpack_require__(10);
   var util = __webpack_require__(1);
-  var Point3d = __webpack_require__(14);
-  var Point2d = __webpack_require__(12);
+  var Point3d = __webpack_require__(13);
+  var Point2d = __webpack_require__(14);
   var Camera = __webpack_require__(15);
   var Filter = __webpack_require__(16);
   var Slider = __webpack_require__(17);
@@ -6797,11 +6881,9 @@ return /******/ (function(modules) { // webpackBootstrap
       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';
-      }
+    } else if (backgroundColor === undefined) {} else {
+      throw 'Unsupported type of backgroundColor';
+    }
 
     this.frame.style.backgroundColor = fill;
     this.frame.style.borderColor = stroke;
@@ -7507,9 +7589,9 @@ return /******/ (function(modules) { // webpackBootstrap
         widthMin = dotSize / 2; // px
         widthMax = dotSize / 2 + dotSize * 2; // Todo: put this in one function
       } else {
-          widthMin = 20; // px
-          widthMax = 20; // px
-        }
+        widthMin = 20; // px
+        widthMax = 20; // px
+      }
 
       var height = Math.max(this.frame.clientHeight * 0.25, 100);
       var top = this.margin;
@@ -8045,9 +8127,9 @@ return /******/ (function(modules) { // webpackBootstrap
               strokeStyle = this.axisColor; // TODO: should be customizable
             }
           } else {
-              fillStyle = 'gray';
-              strokeStyle = this.axisColor;
-            }
+            fillStyle = 'gray';
+            strokeStyle = this.axisColor;
+          }
 
           ctx.lineWidth = this._getStrokeWidth(point);
           ctx.fillStyle = fillStyle;
@@ -8802,26 +8884,10 @@ return /******/ (function(modules) { // webpackBootstrap
 
   module.exports = Graph3d;
 
-/***/ },
-/* 12 */
-/***/ function(module, exports) {
-
-  /**
-   * @prototype Point2d
-   * @param {Number} [x]
-   * @param {Number} [y]
-   */
-  "use strict";
-
-  function Point2d(x, y) {
-    this.x = x !== undefined ? x : 0;
-    this.y = y !== undefined ? y : 0;
-  }
-
-  module.exports = Point2d;
+  // use use defaults
 
 /***/ },
-/* 13 */
+/* 12 */
 /***/ function(module, exports) {
 
   
@@ -8991,7 +9057,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 14 */
+/* 13 */
 /***/ function(module, exports) {
 
   /**
@@ -9073,13 +9139,31 @@ return /******/ (function(modules) { // webpackBootstrap
 
   module.exports = Point3d;
 
+/***/ },
+/* 14 */
+/***/ function(module, exports) {
+
+  /**
+   * @prototype Point2d
+   * @param {Number} [x]
+   * @param {Number} [y]
+   */
+  "use strict";
+
+  function Point2d(x, y) {
+    this.x = x !== undefined ? x : 0;
+    this.y = y !== undefined ? y : 0;
+  }
+
+  module.exports = Point2d;
+
 /***/ },
 /* 15 */
 /***/ function(module, exports, __webpack_require__) {
 
   'use strict';
 
-  var Point3d = __webpack_require__(14);
+  var Point3d = __webpack_require__(13);
 
   /**
    * @class Camera
@@ -9923,7 +10007,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   'use strict';
 
-  var Emitter = __webpack_require__(13);
+  var Emitter = __webpack_require__(12);
   var Hammer = __webpack_require__(20);
   var moment = __webpack_require__(2);
   var util = __webpack_require__(1);
@@ -10320,10 +10404,7 @@ return /******/ (function(modules) { // webpackBootstrap
         var getEnd = function getEnd(item) {
           var end = item.data.end != undefined ? item.data.end : item.data.start;
           return util.convert(end, 'Date').valueOf();
-        }
-
-        // calculate the date of the left side and right side of the items given
-        ;
+        };
 
         interval = max - min;
         // ms
@@ -10331,6 +10412,8 @@ return /******/ (function(modules) { // webpackBootstrap
           interval = 10;
         }
         factor = interval / _this.props.center.width;
+
+        // calculate the date of the left side and right side of the items given
         util.forEach(_this.itemSet.items, (function (item) {
           item.show();
 
@@ -13991,9 +14074,7 @@ return /******/ (function(modules) { // webpackBootstrap
   /**
    * Destroy the component. Cleanup DOM and event listeners
    */
-  Component.prototype.destroy = function () {
-    // should be implemented by the component
-  };
+  Component.prototype.destroy = function () {};
 
   /**
    * Test whether the component is resized since the last time _isResized() was
@@ -14012,6 +14093,8 @@ return /******/ (function(modules) { // webpackBootstrap
 
   module.exports = Component;
 
+  // should be implemented by the component
+
 /***/ },
 /* 27 */
 /***/ function(module, exports) {
@@ -14086,16 +14169,16 @@ return /******/ (function(modules) { // webpackBootstrap
                 }
                 startDate.dayOfYear(start.dayOfYear());
                 startDate.year(start.year());
-                startDate.subtract(7, 'days');
+                startDate.subtract(7, "days");
 
                 endDate.dayOfYear(start.dayOfYear());
                 endDate.year(start.year());
-                endDate.subtract(7 - offset, 'days');
+                endDate.subtract(7 - offset, "days");
 
-                runUntil.add(1, 'weeks');
+                runUntil.add(1, "weeks");
                 break;
               case "weekly":
-                var dayOffset = endDate.diff(startDate, 'days');
+                var dayOffset = endDate.diff(startDate, "days");
                 var day = startDate.day();
 
                 // set the start date to the range.start
@@ -14107,12 +14190,12 @@ return /******/ (function(modules) { // webpackBootstrap
                 // force
                 startDate.day(day);
                 endDate.day(day);
-                endDate.add(dayOffset, 'days');
+                endDate.add(dayOffset, "days");
 
-                startDate.subtract(1, 'weeks');
-                endDate.subtract(1, 'weeks');
+                startDate.subtract(1, "weeks");
+                endDate.subtract(1, "weeks");
 
-                runUntil.add(1, 'weeks');
+                runUntil.add(1, "weeks");
                 break;
               case "monthly":
                 if (startDate.month() != endDate.month()) {
@@ -14120,26 +14203,26 @@ return /******/ (function(modules) { // webpackBootstrap
                 }
                 startDate.month(start.month());
                 startDate.year(start.year());
-                startDate.subtract(1, 'months');
+                startDate.subtract(1, "months");
 
                 endDate.month(start.month());
                 endDate.year(start.year());
-                endDate.subtract(1, 'months');
-                endDate.add(offset, 'months');
+                endDate.subtract(1, "months");
+                endDate.add(offset, "months");
 
-                runUntil.add(1, 'months');
+                runUntil.add(1, "months");
                 break;
               case "yearly":
                 if (startDate.year() != endDate.year()) {
                   offset = 1;
                 }
                 startDate.year(start.year());
-                startDate.subtract(1, 'years');
+                startDate.subtract(1, "years");
                 endDate.year(start.year());
-                endDate.subtract(1, 'years');
-                endDate.add(offset, 'years');
+                endDate.subtract(1, "years");
+                endDate.add(offset, "years");
 
-                runUntil.add(1, 'years');
+                runUntil.add(1, "years");
                 break;
               default:
                 console.log("Wrong repeat format, allowed are: daily, weekly, monthly, yearly. Given:", hiddenDates[i].repeat);
@@ -14149,20 +14232,20 @@ return /******/ (function(modules) { // webpackBootstrap
               body.hiddenDates.push({ start: startDate.valueOf(), end: endDate.valueOf() });
               switch (hiddenDates[i].repeat) {
                 case "daily":
-                  startDate.add(1, 'days');
-                  endDate.add(1, 'days');
+                  startDate.add(1, "days");
+                  endDate.add(1, "days");
                   break;
                 case "weekly":
-                  startDate.add(1, 'weeks');
-                  endDate.add(1, 'weeks');
+                  startDate.add(1, "weeks");
+                  endDate.add(1, "weeks");
                   break;
                 case "monthly":
-                  startDate.add(1, 'months');
-                  endDate.add(1, 'months');
+                  startDate.add(1, "months");
+                  endDate.add(1, "months");
                   break;
                 case "yearly":
-                  startDate.add(1, 'y');
-                  endDate.add(1, 'y');
+                  startDate.add(1, "y");
+                  endDate.add(1, "y");
                   break;
                 default:
                   console.log("Wrong repeat format, allowed are: daily, weekly, monthly, yearly. Given:", hiddenDates[i].repeat);
@@ -14209,14 +14292,14 @@ return /******/ (function(modules) { // webpackBootstrap
           }
           // j start inside i
           else if (hiddenDates[j].start >= hiddenDates[i].start && hiddenDates[j].start <= hiddenDates[i].end) {
-              hiddenDates[i].end = hiddenDates[j].end;
-              hiddenDates[j].remove = true;
-            }
-            // j end inside i
-            else if (hiddenDates[j].end >= hiddenDates[i].start && hiddenDates[j].end <= hiddenDates[i].end) {
-                hiddenDates[i].start = hiddenDates[j].start;
-                hiddenDates[j].remove = true;
-              }
+            hiddenDates[i].end = hiddenDates[j].end;
+            hiddenDates[j].remove = true;
+          }
+          // j end inside i
+          else if (hiddenDates[j].end >= hiddenDates[i].start && hiddenDates[j].end <= hiddenDates[i].end) {
+            hiddenDates[i].start = hiddenDates[j].start;
+            hiddenDates[j].remove = true;
+          }
         }
       }
     }
@@ -14482,7 +14565,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   'use strict';
 
-  var Emitter = __webpack_require__(13);
+  var Emitter = __webpack_require__(12);
   var Hammer = __webpack_require__(20);
   var hammerUtil = __webpack_require__(25);
   var util = __webpack_require__(1);
@@ -15414,7 +15497,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
     if (newScrollTop != oldScrollTop) {
       this._redraw(); // TODO: this causes two redraws when dragging, the other is triggered by rangechange already
-      this.emit("verticalDrag");
+      this.emit('verticalDrag');
     }
   };
 
@@ -15484,13 +15567,13 @@ return /******/ (function(modules) { // webpackBootstrap
   var util = __webpack_require__(1);
   var DataSet = __webpack_require__(8);
   var DataView = __webpack_require__(10);
-  var TimeStep = __webpack_require__(34);
+  var TimeStep = __webpack_require__(30);
   var Component = __webpack_require__(26);
-  var Group = __webpack_require__(30);
+  var Group = __webpack_require__(31);
   var BackgroundGroup = __webpack_require__(35);
   var BoxItem = __webpack_require__(36);
   var PointItem = __webpack_require__(37);
-  var RangeItem = __webpack_require__(32);
+  var RangeItem = __webpack_require__(33);
   var BackgroundItem = __webpack_require__(38);
 
   var UNGROUPED = '__ungrouped__'; // reserved group id for ungrouped items
@@ -16832,11 +16915,11 @@ return /******/ (function(modules) { // webpackBootstrap
 
         // confirm moving the item
         itemData = this._cloneItemData(itemData); // convert start and end to the correct type
-        me.options.onMoving(itemData, function (itemData) {
+        me.options.onMoving(itemData, (function (itemData) {
           if (itemData) {
-            props.item.setData(itemData);
+            props.item.setData(this._cloneItemData(itemData, 'Date'));
           }
-        });
+        }).bind(this));
       }).bind(this));
 
       this.stackDirty = true; // force re-stacking of all items next redraw
@@ -17000,25 +17083,25 @@ return /******/ (function(modules) { // webpackBootstrap
             }
             // if dragged group was move downwards everything above should have an offset
             else if (origOrder[curPos + orgOffset] == draggedId) {
-                orgOffset = 1;
-                continue;
-              }
-              // found a group (apart from dragged group) that has the wrong position -> switch with the
-              // group at the position where other one should be, fix index arrays and continue
-              else {
-                  var slippedPosition = newOrder.indexOf(origOrder[curPos + orgOffset]);
-                  var switchGroup = groupsData.get(newOrder[curPos + newOffset]);
-                  var shouldBeGroup = groupsData.get(origOrder[curPos + orgOffset]);
-                  this.options.groupOrderSwap(switchGroup, shouldBeGroup, groupsData);
-                  groupsData.update(switchGroup);
-                  groupsData.update(shouldBeGroup);
-
-                  var switchGroupId = newOrder[curPos + newOffset];
-                  newOrder[curPos + newOffset] = origOrder[curPos + orgOffset];
-                  newOrder[slippedPosition] = switchGroupId;
-
-                  curPos++;
-                }
+              orgOffset = 1;
+              continue;
+            }
+            // found a group (apart from dragged group) that has the wrong position -> switch with the
+            // group at the position where other one should be, fix index arrays and continue
+            else {
+              var slippedPosition = newOrder.indexOf(origOrder[curPos + orgOffset]);
+              var switchGroup = groupsData.get(newOrder[curPos + newOffset]);
+              var shouldBeGroup = groupsData.get(origOrder[curPos + orgOffset]);
+              this.options.groupOrderSwap(switchGroup, shouldBeGroup, groupsData);
+              groupsData.update(switchGroup);
+              groupsData.update(shouldBeGroup);
+
+              var switchGroupId = newOrder[curPos + newOffset];
+              newOrder[curPos + newOffset] = origOrder[curPos + orgOffset];
+              newOrder[slippedPosition] = switchGroupId;
+
+              curPos++;
+            }
           }
         }
       }
@@ -17343,14 +17426,18 @@ return /******/ (function(modules) { // webpackBootstrap
    * to the type (Date, Moment, ...) configured in the DataSet. If not configured,
    * start and end are converted to Date.
    * @param {Object} itemData, typically `item.data`
+   * @param {string} [type]  Optional Date type. If not provided, the type from the DataSet is taken
    * @return {Object} The cloned object
    * @private
    */
-  ItemSet.prototype._cloneItemData = function (itemData) {
+  ItemSet.prototype._cloneItemData = function (itemData, type) {
     var clone = util.extend({}, itemData);
 
-    // convert start and end date to the type (Date, Moment, ...) configured in the DataSet
-    var type = this.itemsData.getDataSet()._options.type;
+    if (!type) {
+      // convert start and end date to the type (Date, Moment, ...) configured in the DataSet
+      type = this.itemsData.getDataSet()._options.type;
+    }
+
     if (clone.start != undefined) {
       clone.start = util.convert(clone.start, type && type.start || 'Date');
     }
@@ -17369,2038 +17456,2038 @@ return /******/ (function(modules) { // webpackBootstrap
 
   'use strict';
 
+  var moment = __webpack_require__(2);
+  var DateUtil = __webpack_require__(27);
   var util = __webpack_require__(1);
-  var stack = __webpack_require__(31);
-  var RangeItem = __webpack_require__(32);
 
   /**
-   * @constructor Group
-   * @param {Number | String} groupId
-   * @param {Object} data
-   * @param {ItemSet} itemSet
+   * @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 Group(groupId, data, itemSet) {
-    this.groupId = groupId;
-    this.subgroups = {};
-    this.subgroupIndex = 0;
-    this.subgroupOrderer = data && data.subgroupOrder;
-    this.itemSet = itemSet;
-
-    this.dom = {};
-    this.props = {
-      label: {
-        width: 0,
-        height: 0
-      }
-    };
-    this.className = null;
+  function TimeStep(start, end, minimumStep, hiddenDates) {
+    this.moment = moment;
 
-    this.items = {}; // items filtered by groupId of this group
-    this.visibleItems = []; // items currently visible in window
-    this.orderedItems = {
-      byStart: [],
-      byEnd: []
-    };
-    this.checkRangedItems = false; // needed to refresh the ranged items if the window is programatically changed with NO overlap.
-    var me = this;
-    this.itemSet.body.emitter.on("checkRangedItems", function () {
-      me.checkRangedItems = true;
-    });
+    // variables
+    this.current = this.moment();
+    this._start = this.moment();
+    this._end = this.moment();
 
-    this._create();
+    this.autoScale = true;
+    this.scale = 'day';
+    this.step = 1;
 
-    this.setData(data);
-  }
+    // initialize the range
+    this.setRange(start, end, minimumStep);
 
-  /**
-   * Create DOM elements for the group
-   * @private
-   */
-  Group.prototype._create = function () {
-    var label = document.createElement('div');
-    if (this.itemSet.options.groupEditable.order) {
-      label.className = 'vis-label draggable';
-    } else {
-      label.className = 'vis-label';
+    // hidden Dates options
+    this.switchedDay = false;
+    this.switchedMonth = false;
+    this.switchedYear = false;
+    this.hiddenDates = hiddenDates;
+    if (hiddenDates === undefined) {
+      this.hiddenDates = [];
     }
-    this.dom.label = label;
 
-    var inner = document.createElement('div');
-    inner.className = 'vis-inner';
-    label.appendChild(inner);
-    this.dom.inner = inner;
+    this.format = TimeStep.FORMAT; // default formatting
+  }
 
-    var foreground = document.createElement('div');
-    foreground.className = 'vis-group';
-    foreground['timeline-group'] = this;
-    this.dom.foreground = foreground;
+  // Time formatting
+  TimeStep.FORMAT = {
+    minorLabels: {
+      millisecond: 'SSS',
+      second: 's',
+      minute: 'HH:mm',
+      hour: 'HH:mm',
+      weekday: 'ddd D',
+      day: 'D',
+      month: 'MMM',
+      year: 'YYYY'
+    },
+    majorLabels: {
+      millisecond: 'HH:mm:ss',
+      second: 'D MMMM HH:mm',
+      minute: 'ddd D MMMM',
+      hour: 'ddd D MMMM',
+      weekday: 'MMMM YYYY',
+      day: 'MMMM YYYY',
+      month: 'YYYY',
+      year: ''
+    }
+  };
 
-    this.dom.background = document.createElement('div');
-    this.dom.background.className = 'vis-group';
+  /**
+   * Set custom constructor function for moment. Can be used to set dates
+   * to UTC or to set a utcOffset.
+   * @param {function} moment
+   */
+  TimeStep.prototype.setMoment = function (moment) {
+    this.moment = moment;
 
-    this.dom.axis = document.createElement('div');
-    this.dom.axis.className = 'vis-group';
+    // update the date properties, can have a new utcOffset
+    this.current = this.moment(this.current);
+    this._start = this.moment(this._start);
+    this._end = this.moment(this._end);
+  };
 
-    // 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);
+  /**
+   * Set custom formatting for the minor an major labels of the TimeStep.
+   * Both `minorLabels` and `majorLabels` are an Object with properties:
+   * 'millisecond', 'second', 'minute', 'hour', 'weekday', 'day', 'month', 'year'.
+   * @param {{minorLabels: Object, majorLabels: Object}} format
+   */
+  TimeStep.prototype.setFormat = function (format) {
+    var defaultFormat = util.deepExtend({}, TimeStep.FORMAT);
+    this.format = util.deepExtend(defaultFormat, format);
   };
 
   /**
-   * Set the group data for this group
-   * @param {Object} data   Group data, can contain properties content and className
+   * 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
    */
-  Group.prototype.setData = function (data) {
-    // update contents
-    var content;
-    if (this.itemSet.options && this.itemSet.options.groupTemplate) {
-      content = this.itemSet.options.groupTemplate(data);
-    } else {
-      content = data && data.content;
+  TimeStep.prototype.setRange = function (start, end, minimumStep) {
+    if (!(start instanceof Date) || !(end instanceof Date)) {
+      throw 'No legal start or end date in method setRange';
     }
 
-    if (content instanceof Element) {
-      this.dom.inner.appendChild(content);
-      while (this.dom.inner.firstChild) {
-        this.dom.inner.removeChild(this.dom.inner.firstChild);
-      }
-      this.dom.inner.appendChild(content);
-    } else if (content !== undefined && content !== null) {
-      this.dom.inner.innerHTML = content;
-    } else {
-      this.dom.inner.innerHTML = this.groupId || ''; // groupId can be null
+    this._start = start != undefined ? this.moment(start.valueOf()) : new Date();
+    this._end = end != undefined ? this.moment(end.valueOf()) : new Date();
+
+    if (this.autoScale) {
+      this.setMinimumStep(minimumStep);
     }
+  };
 
-    // update title
-    this.dom.label.title = data && data.title || '';
+  /**
+   * Set the range iterator to the start date.
+   */
+  TimeStep.prototype.start = function () {
+    this.current = this._start.clone();
+    this.roundToMinor();
+  };
 
-    if (!this.dom.inner.firstChild) {
-      util.addClassName(this.dom.inner, 'vis-hidden');
-    } else {
-      util.removeClassName(this.dom.inner, 'vis-hidden');
+  /**
+   * 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 'year':
+        this.current.year(this.step * Math.floor(this.current.year() / this.step));
+        this.current.month(0);
+      case 'month':
+        this.current.date(1);
+      case 'day': // intentional fall through
+      case 'weekday':
+        this.current.hours(0);
+      case 'hour':
+        this.current.minutes(0);
+      case 'minute':
+        this.current.seconds(0);
+      case 'second':
+        this.current.milliseconds(0);
+        //case 'millisecond': // nothing to do for milliseconds
     }
 
-    // update className
-    var className = data && data.className || null;
-    if (className != this.className) {
-      if (this.className) {
-        util.removeClassName(this.dom.label, this.className);
-        util.removeClassName(this.dom.foreground, this.className);
-        util.removeClassName(this.dom.background, this.className);
-        util.removeClassName(this.dom.axis, this.className);
+    if (this.step != 1) {
+      // round down to the first minor value that is a multiple of the current step size
+      switch (this.scale) {
+        case 'millisecond':
+          this.current.subtract(this.current.milliseconds() % this.step, 'milliseconds');break;
+        case 'second':
+          this.current.subtract(this.current.seconds() % this.step, 'seconds');break;
+        case 'minute':
+          this.current.subtract(this.current.minutes() % this.step, 'minutes');break;
+        case 'hour':
+          this.current.subtract(this.current.hours() % this.step, 'hours');break;
+        case 'weekday': // intentional fall through
+        case 'day':
+          this.current.subtract((this.current.date() - 1) % this.step, 'day');break;
+        case 'month':
+          this.current.subtract(this.current.month() % this.step, 'month');break;
+        case 'year':
+          this.current.subtract(this.current.year() % this.step, 'year');break;
+        default:
+          break;
       }
-      util.addClassName(this.dom.label, className);
-      util.addClassName(this.dom.foreground, className);
-      util.addClassName(this.dom.background, className);
-      util.addClassName(this.dom.axis, className);
-      this.className = className;
-    }
-
-    // update style
-    if (this.style) {
-      util.removeCssText(this.dom.label, this.style);
-      this.style = null;
-    }
-    if (data && data.style) {
-      util.addCssText(this.dom.label, data.style);
-      this.style = data.style;
     }
   };
 
   /**
-   * Get the width of the group label
-   * @return {number} width
+   * Check if the there is a next step
+   * @return {boolean}  true if the current date has not passed the end date
    */
-  Group.prototype.getLabelWidth = function () {
-    return this.props.label.width;
+  TimeStep.prototype.hasNext = function () {
+    return this.current.valueOf() <= this._end.valueOf();
   };
 
   /**
-   * Repaint this group
-   * @param {{start: number, end: number}} range
-   * @param {{item: {horizontal: number, vertical: number}, axis: number}} margin
-   * @param {boolean} [restack=false]  Force restacking of all items
-   * @return {boolean} Returns true if the group is resized
+   * Do the next step
    */
-  Group.prototype.redraw = function (range, margin, restack) {
-    var resized = false;
-
-    // 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;
-    }
-
-    // reposition visible items vertically
-    if (typeof this.itemSet.options.order === 'function') {
-      // a custom order function
+  TimeStep.prototype.next = function () {
+    var prev = this.current.valueOf();
 
-      if (restack) {
-        // brute force restack of all items
-
-        // show all items
-        var me = this;
-        var limitSize = false;
-        util.forEach(this.items, function (item) {
-          if (!item.displayed) {
-            item.redraw();
-            me.visibleItems.push(item);
-          }
-          item.repositionX(limitSize);
-        });
-
-        // order all items and force a restacking
-        var customOrderedItems = this.orderedItems.byStart.slice().sort(function (a, b) {
-          return me.itemSet.options.order(a.data, b.data);
-        });
-        stack.stack(customOrderedItems, margin, true /* restack=true */);
+    // Two cases, needed to prevent issues with switching daylight savings
+    // (end of March and end of October)
+    if (this.current.month() < 6) {
+      switch (this.scale) {
+        case 'millisecond':
+          this.current.add(this.step, 'millisecond');break;
+        case 'second':
+          this.current.add(this.step, 'second');break;
+        case 'minute':
+          this.current.add(this.step, 'minute');break;
+        case 'hour':
+          this.current.add(this.step, 'hour');
+          // in case of skipping an hour for daylight savings, adjust the hour again (else you get: 0h 5h 9h ... instead of 0h 4h 8h ...)
+          // TODO: is this still needed now we use the function of moment.js?
+          this.current.subtract(this.current.hours() % this.step, 'hour');
+          break;
+        case 'weekday': // intentional fall through
+        case 'day':
+          this.current.add(this.step, 'day');break;
+        case 'month':
+          this.current.add(this.step, 'month');break;
+        case 'year':
+          this.current.add(this.step, 'year');break;
+        default:
+          break;
       }
-
-      this.visibleItems = this._updateVisibleItems(this.orderedItems, this.visibleItems, range);
     } else {
-      // no custom order function, lazy stacking
-      this.visibleItems = this._updateVisibleItems(this.orderedItems, this.visibleItems, range);
-
-      if (this.itemSet.options.stack) {
-        // TODO: ugly way to access options...
-        stack.stack(this.visibleItems, margin, restack);
-      } else {
-        // no stacking
-        stack.nostack(this.visibleItems, margin, this.subgroups);
+      switch (this.scale) {
+        case 'millisecond':
+          this.current.add(this.step, 'millisecond');break;
+        case 'second':
+          this.current.add(this.step, 'second');break;
+        case 'minute':
+          this.current.add(this.step, 'minute');break;
+        case 'hour':
+          this.current.add(this.step, 'hour');break;
+        case 'weekday': // intentional fall through
+        case 'day':
+          this.current.add(this.step, 'day');break;
+        case 'month':
+          this.current.add(this.step, 'month');break;
+        case 'year':
+          this.current.add(this.step, 'year');break;
+        default:
+          break;
       }
     }
 
-    // recalculate the height of the group
-    var height = this._calculateHeight(margin);
-
-    // 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';
+    if (this.step != 1) {
+      // round down to the correct major value
+      switch (this.scale) {
+        case 'millisecond':
+          if (this.current.milliseconds() < this.step) this.current.milliseconds(0);break;
+        case 'second':
+          if (this.current.seconds() < this.step) this.current.seconds(0);break;
+        case 'minute':
+          if (this.current.minutes() < this.step) this.current.minutes(0);break;
+        case 'hour':
+          if (this.current.hours() < this.step) this.current.hours(0);break;
+        case 'weekday': // intentional fall through
+        case 'day':
+          if (this.current.date() < this.step + 1) this.current.date(1);break;
+        case 'month':
+          if (this.current.month() < this.step) this.current.month(0);break;
+        case 'year':
+          break; // nothing to do for year
+        default:
+          break;
+      }
+    }
 
-    // update vertical position of items after they are re-stacked and the height of the group is calculated
-    for (var i = 0, ii = this.visibleItems.length; i < ii; i++) {
-      var item = this.visibleItems[i];
-      item.repositionY(margin);
+    // safety mechanism: if current time is still unchanged, move to the end
+    if (this.current.valueOf() == prev) {
+      this.current = this._end.clone();
     }
 
-    return resized;
+    DateUtil.stepOverHiddenDates(this.moment, this, prev);
   };
 
   /**
-   * recalculate the height of the group
-   * @param {{item: {horizontal: number, vertical: number}, axis: number}} margin
-   * @returns {number} Returns the height
-   * @private
+   * Get the current datetime
+   * @return {Moment}  current The current date
    */
-  Group.prototype._calculateHeight = function (margin) {
-    // recalculate the height of the group
-    var height;
-    var visibleItems = this.visibleItems;
-    //var visibleSubgroups = [];
-    //this.visibleSubgroups = 0;
-    this.resetSubgroups();
-    var me = this;
-    if (visibleItems.length > 0) {
-      var min = visibleItems[0].top;
-      var max = visibleItems[0].top + visibleItems[0].height;
-      util.forEach(visibleItems, function (item) {
-        min = Math.min(min, item.top);
-        max = Math.max(max, item.top + item.height);
-        if (item.data.subgroup !== undefined) {
-          me.subgroups[item.data.subgroup].height = Math.max(me.subgroups[item.data.subgroup].height, item.height);
-          me.subgroups[item.data.subgroup].visible = true;
-        }
-      });
-      if (min > margin.axis) {
-        // there is an empty gap between the lowest item and the axis
-        var offset = min - margin.axis;
-        max -= offset;
-        util.forEach(visibleItems, function (item) {
-          item.top -= offset;
-        });
-      }
-      height = max + margin.item.vertical / 2;
-    } else {
-      height = 0;
-    }
-    height = Math.max(height, this.props.label.height);
-
-    return height;
+  TimeStep.prototype.getCurrent = function () {
+    return this.current;
   };
 
   /**
-   * Show this group: attach to the DOM
+   * Set a custom scale. Autoscaling will be disabled.
+   * For example setScale('minute', 5) will result
+   * in minor steps of 5 minutes, and major steps of an hour.
+   *
+   * @param {{scale: string, step: number}} params
+   *                               An object containing two properties:
+   *                               - A string 'scale'. Choose from 'millisecond', 'second',
+   *                                 'minute', 'hour', 'weekday', 'day', 'month', 'year'.
+   *                               - A number 'step'. A step size, by default 1.
+   *                                 Choose for example 1, 2, 5, or 10.
    */
-  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);
-    }
-
-    if (!this.dom.background.parentNode) {
-      this.itemSet.dom.background.appendChild(this.dom.background);
+  TimeStep.prototype.setScale = function (params) {
+    if (params && typeof params.scale == 'string') {
+      this.scale = params.scale;
+      this.step = params.step > 0 ? params.step : 1;
+      this.autoScale = false;
     }
+  };
 
-    if (!this.dom.axis.parentNode) {
-      this.itemSet.dom.axis.appendChild(this.dom.axis);
-    }
+  /**
+   * Enable or disable autoscaling
+   * @param {boolean} enable  If true, autoascaling is set true
+   */
+  TimeStep.prototype.setAutoScale = function (enable) {
+    this.autoScale = enable;
   };
 
   /**
-   * Hide this group: remove from the DOM
+   * Automatically determine the scale that bests fits the provided minimum step
+   * @param {Number} [minimumStep]  The minimum step size in milliseconds
    */
-  Group.prototype.hide = function () {
-    var label = this.dom.label;
-    if (label.parentNode) {
-      label.parentNode.removeChild(label);
+  TimeStep.prototype.setMinimumStep = function (minimumStep) {
+    if (minimumStep == undefined) {
+      return;
     }
 
-    var foreground = this.dom.foreground;
-    if (foreground.parentNode) {
-      foreground.parentNode.removeChild(foreground);
-    }
+    //var b = asc + ds;
 
-    var background = this.dom.background;
-    if (background.parentNode) {
-      background.parentNode.removeChild(background);
-    }
+    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;
 
-    var axis = this.dom.axis;
-    if (axis.parentNode) {
-      axis.parentNode.removeChild(axis);
+    // find the smallest step that is larger than the provided minimumStep
+    if (stepYear * 1000 > minimumStep) {
+      this.scale = 'year';this.step = 1000;
+    }
+    if (stepYear * 500 > minimumStep) {
+      this.scale = 'year';this.step = 500;
+    }
+    if (stepYear * 100 > minimumStep) {
+      this.scale = 'year';this.step = 100;
+    }
+    if (stepYear * 50 > minimumStep) {
+      this.scale = 'year';this.step = 50;
+    }
+    if (stepYear * 10 > minimumStep) {
+      this.scale = 'year';this.step = 10;
+    }
+    if (stepYear * 5 > minimumStep) {
+      this.scale = 'year';this.step = 5;
+    }
+    if (stepYear > minimumStep) {
+      this.scale = 'year';this.step = 1;
+    }
+    if (stepMonth * 3 > minimumStep) {
+      this.scale = 'month';this.step = 3;
+    }
+    if (stepMonth > minimumStep) {
+      this.scale = 'month';this.step = 1;
+    }
+    if (stepDay * 5 > minimumStep) {
+      this.scale = 'day';this.step = 5;
+    }
+    if (stepDay * 2 > minimumStep) {
+      this.scale = 'day';this.step = 2;
+    }
+    if (stepDay > minimumStep) {
+      this.scale = 'day';this.step = 1;
+    }
+    if (stepDay / 2 > minimumStep) {
+      this.scale = 'weekday';this.step = 1;
+    }
+    if (stepHour * 4 > minimumStep) {
+      this.scale = 'hour';this.step = 4;
+    }
+    if (stepHour > minimumStep) {
+      this.scale = 'hour';this.step = 1;
+    }
+    if (stepMinute * 15 > minimumStep) {
+      this.scale = 'minute';this.step = 15;
+    }
+    if (stepMinute * 10 > minimumStep) {
+      this.scale = 'minute';this.step = 10;
+    }
+    if (stepMinute * 5 > minimumStep) {
+      this.scale = 'minute';this.step = 5;
+    }
+    if (stepMinute > minimumStep) {
+      this.scale = 'minute';this.step = 1;
+    }
+    if (stepSecond * 15 > minimumStep) {
+      this.scale = 'second';this.step = 15;
+    }
+    if (stepSecond * 10 > minimumStep) {
+      this.scale = 'second';this.step = 10;
+    }
+    if (stepSecond * 5 > minimumStep) {
+      this.scale = 'second';this.step = 5;
+    }
+    if (stepSecond > minimumStep) {
+      this.scale = 'second';this.step = 1;
+    }
+    if (stepMillisecond * 200 > minimumStep) {
+      this.scale = 'millisecond';this.step = 200;
+    }
+    if (stepMillisecond * 100 > minimumStep) {
+      this.scale = 'millisecond';this.step = 100;
+    }
+    if (stepMillisecond * 50 > minimumStep) {
+      this.scale = 'millisecond';this.step = 50;
+    }
+    if (stepMillisecond * 10 > minimumStep) {
+      this.scale = 'millisecond';this.step = 10;
+    }
+    if (stepMillisecond * 5 > minimumStep) {
+      this.scale = 'millisecond';this.step = 5;
+    }
+    if (stepMillisecond > minimumStep) {
+      this.scale = 'millisecond';this.step = 1;
     }
   };
 
   /**
-   * Add an item to the group
-   * @param {Item} item
+   * Snap a date to a rounded value.
+   * The snap intervals are dependent on the current scale and step.
+   * Static function
+   * @param {Date} date    the date to be snapped.
+   * @param {string} scale Current scale, can be 'millisecond', 'second',
+   *                       'minute', 'hour', 'weekday, 'day', 'month', 'year'.
+   * @param {number} step  Current step (1, 2, 4, 5, ...
+   * @return {Date} snappedDate
    */
-  Group.prototype.add = function (item) {
-    this.items[item.id] = item;
-    item.setParent(this);
+  TimeStep.snap = function (date, scale, step) {
+    var clone = moment(date);
 
-    // add to
-    if (item.data.subgroup !== undefined) {
-      if (this.subgroups[item.data.subgroup] === undefined) {
-        this.subgroups[item.data.subgroup] = { height: 0, visible: false, index: this.subgroupIndex, items: [] };
-        this.subgroupIndex++;
+    if (scale == 'year') {
+      var year = clone.year() + Math.round(clone.month() / 12);
+      clone.year(Math.round(year / step) * step);
+      clone.month(0);
+      clone.date(0);
+      clone.hours(0);
+      clone.minutes(0);
+      clone.seconds(0);
+      clone.milliseconds(0);
+    } else if (scale == 'month') {
+      if (clone.date() > 15) {
+        clone.date(1);
+        clone.add(1, 'month');
+        // important: first set Date to 1, after that change the month.
+      } else {
+        clone.date(1);
       }
-      this.subgroups[item.data.subgroup].items.push(item);
-    }
-    this.orderSubgroups();
 
-    if (this.visibleItems.indexOf(item) == -1) {
-      var range = this.itemSet.body.range; // TODO: not nice accessing the range like this
-      this._checkIfVisible(item, this.visibleItems, range);
-    }
-  };
-
-  Group.prototype.orderSubgroups = function () {
-    if (this.subgroupOrderer !== undefined) {
-      var sortArray = [];
-      if (typeof this.subgroupOrderer == 'string') {
-        for (var subgroup in this.subgroups) {
-          sortArray.push({ subgroup: subgroup, sortField: this.subgroups[subgroup].items[0].data[this.subgroupOrderer] });
-        }
-        sortArray.sort(function (a, b) {
-          return a.sortField - b.sortField;
-        });
-      } else if (typeof this.subgroupOrderer == 'function') {
-        for (var subgroup in this.subgroups) {
-          sortArray.push(this.subgroups[subgroup].items[0].data);
-        }
-        sortArray.sort(this.subgroupOrderer);
+      clone.hours(0);
+      clone.minutes(0);
+      clone.seconds(0);
+      clone.milliseconds(0);
+    } else if (scale == 'day') {
+      //noinspection FallthroughInSwitchStatementJS
+      switch (step) {
+        case 5:
+        case 2:
+          clone.hours(Math.round(clone.hours() / 24) * 24);break;
+        default:
+          clone.hours(Math.round(clone.hours() / 12) * 12);break;
       }
-
-      if (sortArray.length > 0) {
-        for (var i = 0; i < sortArray.length; i++) {
-          this.subgroups[sortArray[i].subgroup].index = i;
-        }
+      clone.minutes(0);
+      clone.seconds(0);
+      clone.milliseconds(0);
+    } else if (scale == 'weekday') {
+      //noinspection FallthroughInSwitchStatementJS
+      switch (step) {
+        case 5:
+        case 2:
+          clone.hours(Math.round(clone.hours() / 12) * 12);break;
+        default:
+          clone.hours(Math.round(clone.hours() / 6) * 6);break;
       }
-    }
-  };
-
-  Group.prototype.resetSubgroups = function () {
-    for (var subgroup in this.subgroups) {
-      if (this.subgroups.hasOwnProperty(subgroup)) {
-        this.subgroups[subgroup].visible = false;
+      clone.minutes(0);
+      clone.seconds(0);
+      clone.milliseconds(0);
+    } else if (scale == 'hour') {
+      switch (step) {
+        case 4:
+          clone.minutes(Math.round(clone.minutes() / 60) * 60);break;
+        default:
+          clone.minutes(Math.round(clone.minutes() / 30) * 30);break;
       }
+      clone.seconds(0);
+      clone.milliseconds(0);
+    } else if (scale == 'minute') {
+      //noinspection FallthroughInSwitchStatementJS
+      switch (step) {
+        case 15:
+        case 10:
+          clone.minutes(Math.round(clone.minutes() / 5) * 5);
+          clone.seconds(0);
+          break;
+        case 5:
+          clone.seconds(Math.round(clone.seconds() / 60) * 60);break;
+        default:
+          clone.seconds(Math.round(clone.seconds() / 30) * 30);break;
+      }
+      clone.milliseconds(0);
+    } else if (scale == 'second') {
+      //noinspection FallthroughInSwitchStatementJS
+      switch (step) {
+        case 15:
+        case 10:
+          clone.seconds(Math.round(clone.seconds() / 5) * 5);
+          clone.milliseconds(0);
+          break;
+        case 5:
+          clone.milliseconds(Math.round(clone.milliseconds() / 1000) * 1000);break;
+        default:
+          clone.milliseconds(Math.round(clone.milliseconds() / 500) * 500);break;
+      }
+    } else if (scale == 'millisecond') {
+      var _step = step > 5 ? step / 2 : 1;
+      clone.milliseconds(Math.round(clone.milliseconds() / _step) * _step);
     }
+
+    return clone;
   };
 
   /**
-   * Remove an item from the group
-   * @param {Item} item
+   * 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.
    */
-  Group.prototype.remove = function (item) {
-    delete this.items[item.id];
-    item.setParent(null);
-
-    // remove from visible items
-    var index = this.visibleItems.indexOf(item);
-    if (index != -1) this.visibleItems.splice(index, 1);
-
-    if (item.data.subgroup !== undefined) {
-      var subgroup = this.subgroups[item.data.subgroup];
-      if (subgroup) {
-        var itemIndex = subgroup.items.indexOf(item);
-        subgroup.items.splice(itemIndex, 1);
-        if (!subgroup.items.length) {
-          delete this.subgroups[item.data.subgroup];
-          this.subgroupIndex--;
-        }
-        this.orderSubgroups();
+  TimeStep.prototype.isMajor = function () {
+    if (this.switchedYear == true) {
+      this.switchedYear = false;
+      switch (this.scale) {
+        case 'year':
+        case 'month':
+        case 'weekday':
+        case 'day':
+        case 'hour':
+        case 'minute':
+        case 'second':
+        case 'millisecond':
+          return true;
+        default:
+          return false;
+      }
+    } else if (this.switchedMonth == true) {
+      this.switchedMonth = false;
+      switch (this.scale) {
+        case 'weekday':
+        case 'day':
+        case 'hour':
+        case 'minute':
+        case 'second':
+        case 'millisecond':
+          return true;
+        default:
+          return false;
       }
+    } else if (this.switchedDay == true) {
+      this.switchedDay = false;
+      switch (this.scale) {
+        case 'millisecond':
+        case 'second':
+        case 'minute':
+        case 'hour':
+          return true;
+        default:
+          return false;
+      }
+    }
+
+    var date = this.moment(this.current);
+    switch (this.scale) {
+      case 'millisecond':
+        return date.milliseconds() == 0;
+      case 'second':
+        return date.seconds() == 0;
+      case 'minute':
+        return date.hours() == 0 && date.minutes() == 0;
+      case 'hour':
+        return date.hours() == 0;
+      case 'weekday': // intentional fall through
+      case 'day':
+        return date.date() == 1;
+      case 'month':
+        return date.month() == 0;
+      case 'year':
+        return false;
+      default:
+        return false;
     }
   };
 
   /**
-   * Remove an item from the corresponding DataSet
-   * @param {Item} item
+   * 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
    */
-  Group.prototype.removeFromDataSet = function (item) {
-    this.itemSet.removeItem(item.id);
+  TimeStep.prototype.getLabelMinor = function (date) {
+    if (date == undefined) {
+      date = this.current;
+    }
+
+    var format = this.format.minorLabels[this.scale];
+    return format && format.length > 0 ? this.moment(date).format(format) : '';
   };
 
   /**
-   * Reorder the items
+   * 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
    */
-  Group.prototype.order = function () {
-    var array = util.toArray(this.items);
-    var startArray = [];
-    var endArray = [];
-
-    for (var i = 0; i < array.length; i++) {
-      if (array[i].data.end !== undefined) {
-        endArray.push(array[i]);
-      }
-      startArray.push(array[i]);
+  TimeStep.prototype.getLabelMajor = function (date) {
+    if (date == undefined) {
+      date = this.current;
     }
-    this.orderedItems = {
-      byStart: startArray,
-      byEnd: endArray
-    };
 
-    stack.orderByStart(this.orderedItems.byStart);
-    stack.orderByEnd(this.orderedItems.byEnd);
+    var format = this.format.majorLabels[this.scale];
+    return format && format.length > 0 ? this.moment(date).format(format) : '';
   };
 
-  /**
-   * 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, oldVisibleItems, range) {
-    var visibleItems = [];
-    var visibleItemsLookup = {}; // we keep this to quickly look up if an item already exists in the list without using indexOf on visibleItems
-    var interval = (range.end - range.start) / 4;
-    var lowerBound = range.start - interval;
-    var upperBound = range.end + interval;
-    var item, i;
+  TimeStep.prototype.getClassName = function () {
+    var _moment = this.moment;
+    var m = this.moment(this.current);
+    var current = m.locale ? m.locale('en') : m.lang('en'); // old versions of moment have .lang() function
+    var step = this.step;
 
-    // this function is used to do the binary search.
-    var searchFunction = function searchFunction(value) {
-      if (value < lowerBound) {
-        return -1;
-      } else if (value <= upperBound) {
-        return 0;
-      } else {
-        return 1;
-      }
-    };
+    function even(value) {
+      return value / step % 2 == 0 ? ' vis-even' : ' vis-odd';
+    }
 
-    // first check if the items that were in view previously are still in view.
-    // IMPORTANT: this handles the case for the items with startdate before the window and enddate after the window!
-    // also cleans up invisible items.
-    if (oldVisibleItems.length > 0) {
-      for (i = 0; i < oldVisibleItems.length; i++) {
-        this._checkIfVisibleWithReference(oldVisibleItems[i], visibleItems, visibleItemsLookup, range);
+    function today(date) {
+      if (date.isSame(new Date(), 'day')) {
+        return ' vis-today';
+      }
+      if (date.isSame(_moment().add(1, 'day'), 'day')) {
+        return ' vis-tomorrow';
+      }
+      if (date.isSame(_moment().add(-1, 'day'), 'day')) {
+        return ' vis-yesterday';
       }
+      return '';
     }
 
-    // we do a binary search for the items that have only start values.
-    var initialPosByStart = util.binarySearchCustom(orderedItems.byStart, searchFunction, 'data', 'start');
-
-    // trace the visible items from the inital start pos both ways until an invisible item is found, we only look at the start values.
-    this._traceVisible(initialPosByStart, orderedItems.byStart, visibleItems, visibleItemsLookup, function (item) {
-      return item.data.start < lowerBound || item.data.start > upperBound;
-    });
-
-    // if the window has changed programmatically without overlapping the old window, the ranged items with start < lowerBound and end > upperbound are not shown.
-    // We therefore have to brute force check all items in the byEnd list
-    if (this.checkRangedItems == true) {
-      this.checkRangedItems = false;
-      for (i = 0; i < orderedItems.byEnd.length; i++) {
-        this._checkIfVisibleWithReference(orderedItems.byEnd[i], visibleItems, visibleItemsLookup, range);
-      }
-    } else {
-      // we do a binary search for the items that have defined end times.
-      var initialPosByEnd = util.binarySearchCustom(orderedItems.byEnd, searchFunction, 'data', 'end');
+    function currentWeek(date) {
+      return date.isSame(new Date(), 'week') ? ' vis-current-week' : '';
+    }
 
-      // trace the visible items from the inital start pos both ways until an invisible item is found, we only look at the end values.
-      this._traceVisible(initialPosByEnd, orderedItems.byEnd, visibleItems, visibleItemsLookup, function (item) {
-        return item.data.end < lowerBound || item.data.end > upperBound;
-      });
+    function currentMonth(date) {
+      return date.isSame(new Date(), 'month') ? ' vis-current-month' : '';
     }
 
-    // finally, we reposition all the visible items.
-    for (i = 0; i < visibleItems.length; i++) {
-      item = visibleItems[i];
-      if (!item.displayed) item.show();
-      // reposition item horizontally
-      item.repositionX();
+    function currentYear(date) {
+      return date.isSame(new Date(), 'year') ? ' vis-current-year' : '';
     }
 
-    // debug
-    //console.log("new line")
-    //if (this.groupId == null) {
-    //  for (i = 0; i < orderedItems.byStart.length; i++) {
-    //    item = orderedItems.byStart[i].data;
-    //    console.log('start',i,initialPosByStart, item.start.valueOf(), item.content, item.start >= lowerBound && item.start <= upperBound,i == initialPosByStart ? "<------------------- HEREEEE" : "")
-    //  }
-    //  for (i = 0; i < orderedItems.byEnd.length; i++) {
-    //    item = orderedItems.byEnd[i].data;
-    //    console.log('rangeEnd',i,initialPosByEnd, item.end.valueOf(), item.content, item.end >= range.start && item.end <= range.end,i == initialPosByEnd ? "<------------------- HEREEEE" : "")
-    //  }
-    //}
+    switch (this.scale) {
+      case 'millisecond':
+        return even(current.milliseconds()).trim();
 
-    return visibleItems;
-  };
+      case 'second':
+        return even(current.seconds()).trim();
 
-  Group.prototype._traceVisible = function (initialPos, items, visibleItems, visibleItemsLookup, breakCondition) {
-    var item;
-    var i;
+      case 'minute':
+        return even(current.minutes()).trim();
 
-    if (initialPos != -1) {
-      for (i = initialPos; i >= 0; i--) {
-        item = items[i];
-        if (breakCondition(item)) {
-          break;
-        } else {
-          if (visibleItemsLookup[item.id] === undefined) {
-            visibleItemsLookup[item.id] = true;
-            visibleItems.push(item);
-          }
+      case 'hour':
+        var hours = current.hours();
+        if (this.step == 4) {
+          hours = hours + '-h' + (hours + 4);
         }
-      }
+        return 'vis-h' + hours + today(current) + even(current.hours());
 
-      for (i = initialPos + 1; i < items.length; i++) {
-        item = items[i];
-        if (breakCondition(item)) {
-          break;
-        } else {
-          if (visibleItemsLookup[item.id] === undefined) {
-            visibleItemsLookup[item.id] = true;
-            visibleItems.push(item);
-          }
-        }
-      }
-    }
-  };
+      case 'weekday':
+        return 'vis-' + current.format('dddd').toLowerCase() + today(current) + currentWeek(current) + even(current.date());
 
-  /**
-   * 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();
-    }
-  };
+      case 'day':
+        var day = current.date();
+        var month = current.format('MMMM').toLowerCase();
+        return 'vis-day' + day + ' vis-' + month + currentMonth(current) + even(day - 1);
 
-  /**
-   * this function is very similar to the _checkIfInvisible() but it does not
-   * return booleans, hides the item if it should not be seen and always adds to
-   * the visibleItems.
-   * this one is for brute forcing and hiding.
-   *
-   * @param {Item} item
-   * @param {Array} visibleItems
-   * @param {{start:number, end:number}} range
-   * @private
-   */
-  Group.prototype._checkIfVisibleWithReference = function (item, visibleItems, visibleItemsLookup, range) {
-    if (item.isVisible(range)) {
-      if (visibleItemsLookup[item.id] === undefined) {
-        visibleItemsLookup[item.id] = true;
-        visibleItems.push(item);
-      }
-    } else {
-      if (item.displayed) item.hide();
+      case 'month':
+        return 'vis-' + current.format('MMMM').toLowerCase() + currentMonth(current) + even(current.month());
+
+      case 'year':
+        var year = current.year();
+        return 'vis-year' + year + currentYear(current) + even(year);
+
+      default:
+        return '';
     }
   };
 
-  module.exports = Group;
+  module.exports = TimeStep;
 
 /***/ },
 /* 31 */
-/***/ function(module, exports) {
+/***/ function(module, exports, __webpack_require__) {
 
-  // Utility functions for ordering and stacking of items
   'use strict';
 
-  var EPSILON = 0.001; // used when checking collisions, to prevent round-off errors
+  var util = __webpack_require__(1);
+  var stack = __webpack_require__(32);
+  var RangeItem = __webpack_require__(33);
 
   /**
-   * Order items by their start data
-   * @param {Item[]} items
+   * @constructor Group
+   * @param {Number | String} groupId
+   * @param {Object} data
+   * @param {ItemSet} itemSet
    */
-  exports.orderByStart = function (items) {
-    items.sort(function (a, b) {
-      return a.data.start - b.data.start;
-    });
-  };
+  function Group(groupId, data, itemSet) {
+    this.groupId = groupId;
+    this.subgroups = {};
+    this.subgroupIndex = 0;
+    this.subgroupOrderer = data && data.subgroupOrder;
+    this.itemSet = itemSet;
 
-  /**
-   * 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;
+    this.dom = {};
+    this.props = {
+      label: {
+        width: 0,
+        height: 0
+      }
+    };
+    this.className = null;
 
-      return aTime - bTime;
+    this.items = {}; // items filtered by groupId of this group
+    this.visibleItems = []; // items currently visible in window
+    this.orderedItems = {
+      byStart: [],
+      byEnd: []
+    };
+    this.checkRangedItems = false; // needed to refresh the ranged items if the window is programatically changed with NO overlap.
+    var me = this;
+    this.itemSet.body.emitter.on('checkRangedItems', function () {
+      me.checkRangedItems = true;
     });
-  };
+
+    this._create();
+
+    this.setData(data);
+  }
 
   /**
-   * Adjust vertical positions of the items such that they don't overlap each
-   * other.
-   * @param {Item[]} items
-   *            All visible items
-   * @param {{item: {horizontal: number, vertical: 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
+   * Create DOM elements for the group
+   * @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;
-      }
+  Group.prototype._create = function () {
+    var label = document.createElement('div');
+    if (this.itemSet.options.groupEditable.order) {
+      label.className = 'vis-label draggable';
+    } else {
+      label.className = 'vis-label';
     }
+    this.dom.label = label;
 
-    // calculate new, non-overlapping positions
-    for (i = 0, iMax = items.length; i < iMax; i++) {
-      var item = items[i];
-      if (item.stack && item.top === null) {
-        // initialize top position
-        item.top = margin.axis;
+    var inner = document.createElement('div');
+    inner.className = 'vis-inner';
+    label.appendChild(inner);
+    this.dom.inner = inner;
 
-        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 && other.stack && exports.collision(item, other, margin.item)) {
-              collidingItem = other;
-              break;
-            }
-          }
+    var foreground = document.createElement('div');
+    foreground.className = 'vis-group';
+    foreground['timeline-group'] = this;
+    this.dom.foreground = foreground;
 
-          if (collidingItem != null) {
-            // There is a collision. Reposition the items above the colliding element
-            item.top = collidingItem.top + collidingItem.height + margin.item.vertical;
-          }
-        } while (collidingItem);
-      }
-    }
-  };
+    this.dom.background = document.createElement('div');
+    this.dom.background.className = 'vis-group';
 
-  /**
-   * Adjust vertical positions of the items without stacking them
-   * @param {Item[]} items
-   *            All visible items
-   * @param {{item: {horizontal: number, vertical: number}, axis: number}} margin
-   *            Margins between items and between items and the axis.
-   */
-  exports.nostack = function (items, margin, subgroups) {
-    var i, iMax, newTop;
+    this.dom.axis = document.createElement('div');
+    this.dom.axis.className = 'vis-group';
 
-    // reset top position of all items
-    for (i = 0, iMax = items.length; i < iMax; i++) {
-      if (items[i].data.subgroup !== undefined) {
-        newTop = margin.axis;
-        for (var subgroup in subgroups) {
-          if (subgroups.hasOwnProperty(subgroup)) {
-            if (subgroups[subgroup].visible == true && subgroups[subgroup].index < subgroups[items[i].data.subgroup].index) {
-              newTop += subgroups[subgroup].height + margin.item.vertical;
-            }
-          }
-        }
-        items[i].top = newTop;
-      } else {
-        items[i].top = margin.axis;
-      }
-    }
+    // 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);
   };
 
   /**
-   * 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 {{horizontal: number, vertical: number}} margin
-   *                          An object containing a horizontal and vertical
-   *                          minimum required margin.
-   * @return {boolean}        true if a and b collide, else false
+   * Set the group data for this group
+   * @param {Object} data   Group data, can contain properties content and className
    */
-  exports.collision = function (a, b, margin) {
-    return a.left - margin.horizontal + EPSILON < b.left + b.width && a.left + a.width + margin.horizontal - EPSILON > b.left && a.top - margin.vertical + EPSILON < b.top + b.height && a.top + a.height + margin.vertical - EPSILON > b.top;
-  };
-
-/***/ },
-/* 32 */
-/***/ function(module, exports, __webpack_require__) {
+  Group.prototype.setData = function (data) {
+    // update contents
+    var content;
+    if (this.itemSet.options && this.itemSet.options.groupTemplate) {
+      content = this.itemSet.options.groupTemplate(data);
+    } else {
+      content = data && data.content;
+    }
 
-  'use strict';
+    if (content instanceof Element) {
+      this.dom.inner.appendChild(content);
+      while (this.dom.inner.firstChild) {
+        this.dom.inner.removeChild(this.dom.inner.firstChild);
+      }
+      this.dom.inner.appendChild(content);
+    } else if (content !== undefined && content !== null) {
+      this.dom.inner.innerHTML = content;
+    } else {
+      this.dom.inner.innerHTML = this.groupId || ''; // groupId can be null
+    }
 
-  var Hammer = __webpack_require__(20);
-  var Item = __webpack_require__(33);
+    // update title
+    this.dom.label.title = data && data.title || '';
 
-  /**
-   * @constructor RangeItem
-   * @extends Item
-   * @param {Object} data             Object containing parameters start, end
-   *                                  content, className.
-   * @param {{toScreen: function, toTime: function}} conversion
-   *                                  Conversion functions from time to screen and vice versa
-   * @param {Object} [options]        Configuration options
-   *                                  // TODO: describe options
-   */
-  function RangeItem(data, conversion, options) {
-    this.props = {
-      content: {
-        width: 0
-      }
-    };
-    this.overflow = false; // if contents can overflow (css styling), this flag is set to true
+    if (!this.dom.inner.firstChild) {
+      util.addClassName(this.dom.inner, 'vis-hidden');
+    } else {
+      util.removeClassName(this.dom.inner, 'vis-hidden');
+    }
 
-    // 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);
+    // update className
+    var className = data && data.className || null;
+    if (className != this.className) {
+      if (this.className) {
+        util.removeClassName(this.dom.label, this.className);
+        util.removeClassName(this.dom.foreground, this.className);
+        util.removeClassName(this.dom.background, this.className);
+        util.removeClassName(this.dom.axis, this.className);
       }
+      util.addClassName(this.dom.label, className);
+      util.addClassName(this.dom.foreground, className);
+      util.addClassName(this.dom.background, className);
+      util.addClassName(this.dom.axis, className);
+      this.className = className;
     }
 
-    Item.call(this, data, conversion, options);
-  }
-
-  RangeItem.prototype = new Item(null, null, null);
-
-  RangeItem.prototype.baseClassName = 'vis-item vis-range';
+    // update style
+    if (this.style) {
+      util.removeCssText(this.dom.label, this.style);
+      this.style = null;
+    }
+    if (data && data.style) {
+      util.addCssText(this.dom.label, data.style);
+      this.style = data.style;
+    }
+  };
 
   /**
-   * 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
+   * Get the width of the group label
+   * @return {number} width
    */
-  RangeItem.prototype.isVisible = function (range) {
-    // determine visibility
-    return this.data.start < range.end && this.data.end > range.start;
+  Group.prototype.getLabelWidth = function () {
+    return this.props.label.width;
   };
 
   /**
-   * Repaint the item
+   * Repaint this group
+   * @param {{start: number, end: number}} range
+   * @param {{item: {horizontal: number, vertical: number}, axis: number}} margin
+   * @param {boolean} [restack=false]  Force restacking of all items
+   * @return {boolean} Returns true if the group is resized
    */
-  RangeItem.prototype.redraw = function () {
-    var dom = this.dom;
-    if (!dom) {
-      // create DOM
-      this.dom = {};
-      dom = this.dom;
+  Group.prototype.redraw = function (range, margin, restack) {
+    var resized = false;
 
-      // background box
-      dom.box = document.createElement('div');
-      // className is updated in redraw()
+    // 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;
+    }
+
+    // reposition visible items vertically
+    if (typeof this.itemSet.options.order === 'function') {
+      // a custom order function
 
-      // frame box (to prevent the item contents from overflowing
-      dom.frame = document.createElement('div');
-      dom.frame.className = 'vis-item-overflow';
-      dom.box.appendChild(dom.frame);
+      if (restack) {
+        // brute force restack of all items
 
-      // contents box
-      dom.content = document.createElement('div');
-      dom.content.className = 'vis-item-content';
-      dom.frame.appendChild(dom.content);
+        // show all items
+        var me = this;
+        var limitSize = false;
+        util.forEach(this.items, function (item) {
+          if (!item.displayed) {
+            item.redraw();
+            me.visibleItems.push(item);
+          }
+          item.repositionX(limitSize);
+        });
 
-      // attach this item as attribute
-      dom.box['timeline-item'] = this;
+        // order all items and force a restacking
+        var customOrderedItems = this.orderedItems.byStart.slice().sort(function (a, b) {
+          return me.itemSet.options.order(a.data, b.data);
+        });
+        stack.stack(customOrderedItems, margin, true /* restack=true */);
+      }
 
-      this.dirty = true;
-    }
+      this.visibleItems = this._updateVisibleItems(this.orderedItems, this.visibleItems, range);
+    } else {
+      // no custom order function, lazy stacking
+      this.visibleItems = this._updateVisibleItems(this.orderedItems, this.visibleItems, range);
 
-    // append DOM to parent DOM
-    if (!this.parent) {
-      throw new Error('Cannot redraw item: no parent attached');
-    }
-    if (!dom.box.parentNode) {
-      var foreground = this.parent.dom.foreground;
-      if (!foreground) {
-        throw new Error('Cannot redraw item: parent has no foreground container element');
+      if (this.itemSet.options.stack) {
+        // TODO: ugly way to access options...
+        stack.stack(this.visibleItems, margin, restack);
+      } else {
+        // no stacking
+        stack.nostack(this.visibleItems, margin, this.subgroups);
       }
-      foreground.appendChild(dom.box);
     }
-    this.displayed = true;
-
-    // Update DOM when item is marked dirty. An item is marked dirty when:
-    // - the item is not yet rendered
-    // - the item's data is changed
-    // - the item is selected/deselected
-    if (this.dirty) {
-      this._updateContents(this.dom.content);
-      this._updateTitle(this.dom.box);
-      this._updateDataAttributes(this.dom.box);
-      this._updateStyle(this.dom.box);
 
-      var editable = (this.options.editable.updateTime || this.options.editable.updateGroup || this.editable === true) && this.editable !== false;
+    // recalculate the height of the group
+    var height = this._calculateHeight(margin);
 
-      // update class
-      var className = (this.data.className ? ' ' + this.data.className : '') + (this.selected ? ' vis-selected' : '') + (editable ? ' vis-editable' : ' vis-readonly');
-      dom.box.className = this.baseClassName + className;
+    // 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;
 
-      // determine from css whether this box has overflow
-      this.overflow = window.getComputedStyle(dom.frame).overflow !== 'hidden';
+    // 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;
 
-      // recalculate size
-      // turn off max-width to be able to calculate the real width
-      // this causes an extra browser repaint/reflow, but so be it
-      this.dom.content.style.maxWidth = 'none';
-      this.props.content.width = this.dom.content.offsetWidth;
-      this.height = this.dom.box.offsetHeight;
-      this.dom.content.style.maxWidth = '';
+    // apply new height
+    this.dom.background.style.height = height + 'px';
+    this.dom.foreground.style.height = height + 'px';
+    this.dom.label.style.height = height + 'px';
 
-      this.dirty = false;
+    // update vertical position of items after they are re-stacked and the height of the group is calculated
+    for (var i = 0, ii = this.visibleItems.length; i < ii; i++) {
+      var item = this.visibleItems[i];
+      item.repositionY(margin);
     }
 
-    this._repaintDeleteButton(dom.box);
-    this._repaintDragLeft();
-    this._repaintDragRight();
+    return resized;
   };
 
   /**
-   * Show the item in the DOM (when not already visible). The items DOM will
-   * be created when needed.
+   * recalculate the height of the group
+   * @param {{item: {horizontal: number, vertical: number}, axis: number}} margin
+   * @returns {number} Returns the height
+   * @private
    */
-  RangeItem.prototype.show = function () {
-    if (!this.displayed) {
-      this.redraw();
+  Group.prototype._calculateHeight = function (margin) {
+    // recalculate the height of the group
+    var height;
+    var visibleItems = this.visibleItems;
+    //var visibleSubgroups = [];
+    //this.visibleSubgroups = 0;
+    this.resetSubgroups();
+    var me = this;
+    if (visibleItems.length > 0) {
+      var min = visibleItems[0].top;
+      var max = visibleItems[0].top + visibleItems[0].height;
+      util.forEach(visibleItems, function (item) {
+        min = Math.min(min, item.top);
+        max = Math.max(max, item.top + item.height);
+        if (item.data.subgroup !== undefined) {
+          me.subgroups[item.data.subgroup].height = Math.max(me.subgroups[item.data.subgroup].height, item.height);
+          me.subgroups[item.data.subgroup].visible = true;
+        }
+      });
+      if (min > margin.axis) {
+        // there is an empty gap between the lowest item and the axis
+        var offset = min - margin.axis;
+        max -= offset;
+        util.forEach(visibleItems, function (item) {
+          item.top -= offset;
+        });
+      }
+      height = max + margin.item.vertical / 2;
+    } else {
+      height = 0;
     }
+    height = Math.max(height, this.props.label.height);
+
+    return height;
   };
 
   /**
-   * Hide the item from the DOM (when visible)
-   * @return {Boolean} changed
+   * Show this group: attach to the DOM
    */
-  RangeItem.prototype.hide = function () {
-    if (this.displayed) {
-      var box = this.dom.box;
+  Group.prototype.show = function () {
+    if (!this.dom.label.parentNode) {
+      this.itemSet.dom.labelSet.appendChild(this.dom.label);
+    }
 
-      if (box.parentNode) {
-        box.parentNode.removeChild(box);
-      }
+    if (!this.dom.foreground.parentNode) {
+      this.itemSet.dom.foreground.appendChild(this.dom.foreground);
+    }
 
-      this.displayed = false;
+    if (!this.dom.background.parentNode) {
+      this.itemSet.dom.background.appendChild(this.dom.background);
+    }
+
+    if (!this.dom.axis.parentNode) {
+      this.itemSet.dom.axis.appendChild(this.dom.axis);
     }
   };
 
   /**
-   * Reposition the item horizontally
-   * @param {boolean} [limitSize=true] If true (default), the width of the range
-   *                                   item will be limited, as the browser cannot
-   *                                   display very wide divs. This means though
-   *                                   that the applied left and width may
-   *                                   not correspond to the ranges start and end
-   * @Override
+   * Hide this group: remove from the DOM
    */
-  RangeItem.prototype.repositionX = function (limitSize) {
-    var parentWidth = this.parent.width;
-    var start = this.conversion.toScreen(this.data.start);
-    var end = this.conversion.toScreen(this.data.end);
-    var contentLeft;
-    var contentWidth;
+  Group.prototype.hide = function () {
+    var label = this.dom.label;
+    if (label.parentNode) {
+      label.parentNode.removeChild(label);
+    }
 
-    // limit the width of the range, as browsers cannot draw very wide divs
-    if (limitSize === undefined || limitSize === true) {
-      if (start < -parentWidth) {
-        start = -parentWidth;
-      }
-      if (end > 2 * parentWidth) {
-        end = 2 * parentWidth;
-      }
+    var foreground = this.dom.foreground;
+    if (foreground.parentNode) {
+      foreground.parentNode.removeChild(foreground);
     }
-    var boxWidth = Math.max(end - start, 1);
 
-    if (this.overflow) {
-      this.left = start;
-      this.width = boxWidth + this.props.content.width;
-      contentWidth = this.props.content.width;
+    var background = this.dom.background;
+    if (background.parentNode) {
+      background.parentNode.removeChild(background);
+    }
 
-      // Note: The calculation of width is an optimistic calculation, giving
-      //       a width which will not change when moving the Timeline
-      //       So no re-stacking needed, which is nicer for the eye;
-    } else {
-        this.left = start;
-        this.width = boxWidth;
-        contentWidth = Math.min(end - start, this.props.content.width);
-      }
+    var axis = this.dom.axis;
+    if (axis.parentNode) {
+      axis.parentNode.removeChild(axis);
+    }
+  };
 
-    this.dom.box.style.left = this.left + 'px';
-    this.dom.box.style.width = boxWidth + 'px';
+  /**
+   * Add an item to the group
+   * @param {Item} item
+   */
+  Group.prototype.add = function (item) {
+    this.items[item.id] = item;
+    item.setParent(this);
 
-    switch (this.options.align) {
-      case 'left':
-        this.dom.content.style.left = '0';
-        break;
+    // add to
+    if (item.data.subgroup !== undefined) {
+      if (this.subgroups[item.data.subgroup] === undefined) {
+        this.subgroups[item.data.subgroup] = { height: 0, visible: false, index: this.subgroupIndex, items: [] };
+        this.subgroupIndex++;
+      }
+      this.subgroups[item.data.subgroup].items.push(item);
+    }
+    this.orderSubgroups();
 
-      case 'right':
-        this.dom.content.style.left = Math.max(boxWidth - contentWidth, 0) + 'px';
-        break;
+    if (this.visibleItems.indexOf(item) == -1) {
+      var range = this.itemSet.body.range; // TODO: not nice accessing the range like this
+      this._checkIfVisible(item, this.visibleItems, range);
+    }
+  };
 
-      case 'center':
-        this.dom.content.style.left = Math.max((boxWidth - contentWidth) / 2, 0) + 'px';
-        break;
+  Group.prototype.orderSubgroups = function () {
+    if (this.subgroupOrderer !== undefined) {
+      var sortArray = [];
+      if (typeof this.subgroupOrderer == 'string') {
+        for (var subgroup in this.subgroups) {
+          sortArray.push({ subgroup: subgroup, sortField: this.subgroups[subgroup].items[0].data[this.subgroupOrderer] });
+        }
+        sortArray.sort(function (a, b) {
+          return a.sortField - b.sortField;
+        });
+      } else if (typeof this.subgroupOrderer == 'function') {
+        for (var subgroup in this.subgroups) {
+          sortArray.push(this.subgroups[subgroup].items[0].data);
+        }
+        sortArray.sort(this.subgroupOrderer);
+      }
 
-      default:
-        // 'auto'
-        // when range exceeds left of the window, position the contents at the left of the visible area
-        if (this.overflow) {
-          if (end > 0) {
-            contentLeft = Math.max(-start, 0);
-          } else {
-            contentLeft = -contentWidth; // ensure it's not visible anymore
-          }
-        } else {
-            if (start < 0) {
-              contentLeft = -start;
-            } else {
-              contentLeft = 0;
-            }
-          }
-        this.dom.content.style.left = contentLeft + 'px';
+      if (sortArray.length > 0) {
+        for (var i = 0; i < sortArray.length; i++) {
+          this.subgroups[sortArray[i].subgroup].index = i;
+        }
+      }
     }
   };
 
-  /**
-   * Reposition the item vertically
-   * @Override
-   */
-  RangeItem.prototype.repositionY = function () {
-    var orientation = this.options.orientation.item;
-    var box = this.dom.box;
-
-    if (orientation == 'top') {
-      box.style.top = this.top + 'px';
-    } else {
-      box.style.top = this.parent.height - this.top - this.height + 'px';
+  Group.prototype.resetSubgroups = function () {
+    for (var subgroup in this.subgroups) {
+      if (this.subgroups.hasOwnProperty(subgroup)) {
+        this.subgroups[subgroup].visible = false;
+      }
     }
   };
 
   /**
-   * Repaint a drag area on the left side of the range when the range is selected
-   * @protected
+   * Remove an item from the group
+   * @param {Item} item
    */
-  RangeItem.prototype._repaintDragLeft = function () {
-    if (this.selected && this.options.editable.updateTime && !this.dom.dragLeft) {
-      // create and show drag area
-      var dragLeft = document.createElement('div');
-      dragLeft.className = 'vis-drag-left';
-      dragLeft.dragLeftItem = this;
+  Group.prototype.remove = function (item) {
+    delete this.items[item.id];
+    item.setParent(null);
 
-      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);
+    // remove from visible items
+    var index = this.visibleItems.indexOf(item);
+    if (index != -1) this.visibleItems.splice(index, 1);
+
+    if (item.data.subgroup !== undefined) {
+      var subgroup = this.subgroups[item.data.subgroup];
+      if (subgroup) {
+        var itemIndex = subgroup.items.indexOf(item);
+        subgroup.items.splice(itemIndex, 1);
+        if (!subgroup.items.length) {
+          delete this.subgroups[item.data.subgroup];
+          this.subgroupIndex--;
+        }
+        this.orderSubgroups();
       }
-      this.dom.dragLeft = null;
     }
   };
 
   /**
-   * Repaint a drag area on the right side of the range when the range is selected
-   * @protected
+   * Remove an item from the corresponding DataSet
+   * @param {Item} item
    */
-  RangeItem.prototype._repaintDragRight = function () {
-    if (this.selected && this.options.editable.updateTime && !this.dom.dragRight) {
-      // create and show drag area
-      var dragRight = document.createElement('div');
-      dragRight.className = 'vis-drag-right';
-      dragRight.dragRightItem = this;
+  Group.prototype.removeFromDataSet = function (item) {
+    this.itemSet.removeItem(item.id);
+  };
 
-      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);
+  /**
+   * Reorder the items
+   */
+  Group.prototype.order = function () {
+    var array = util.toArray(this.items);
+    var startArray = [];
+    var endArray = [];
+
+    for (var i = 0; i < array.length; i++) {
+      if (array[i].data.end !== undefined) {
+        endArray.push(array[i]);
       }
-      this.dom.dragRight = null;
+      startArray.push(array[i]);
     }
+    this.orderedItems = {
+      byStart: startArray,
+      byEnd: endArray
+    };
+
+    stack.orderByStart(this.orderedItems.byStart);
+    stack.orderByEnd(this.orderedItems.byEnd);
   };
 
-  module.exports = RangeItem;
+  /**
+   * 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, oldVisibleItems, range) {
+    var visibleItems = [];
+    var visibleItemsLookup = {}; // we keep this to quickly look up if an item already exists in the list without using indexOf on visibleItems
+    var interval = (range.end - range.start) / 4;
+    var lowerBound = range.start - interval;
+    var upperBound = range.end + interval;
+    var item, i;
 
-/***/ },
-/* 33 */
-/***/ function(module, exports, __webpack_require__) {
+    // this function is used to do the binary search.
+    var searchFunction = function searchFunction(value) {
+      if (value < lowerBound) {
+        return -1;
+      } else if (value <= upperBound) {
+        return 0;
+      } else {
+        return 1;
+      }
+    };
 
-  'use strict';
+    // first check if the items that were in view previously are still in view.
+    // IMPORTANT: this handles the case for the items with startdate before the window and enddate after the window!
+    // also cleans up invisible items.
+    if (oldVisibleItems.length > 0) {
+      for (i = 0; i < oldVisibleItems.length; i++) {
+        this._checkIfVisibleWithReference(oldVisibleItems[i], visibleItems, visibleItemsLookup, range);
+      }
+    }
 
-  var Hammer = __webpack_require__(20);
-  var util = __webpack_require__(1);
+    // we do a binary search for the items that have only start values.
+    var initialPosByStart = util.binarySearchCustom(orderedItems.byStart, searchFunction, 'data', 'start');
 
-  /**
-   * @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 || {};
+    // trace the visible items from the inital start pos both ways until an invisible item is found, we only look at the start values.
+    this._traceVisible(initialPosByStart, orderedItems.byStart, visibleItems, visibleItemsLookup, function (item) {
+      return item.data.start < lowerBound || item.data.start > upperBound;
+    });
 
-    this.selected = false;
-    this.displayed = false;
-    this.dirty = true;
+    // if the window has changed programmatically without overlapping the old window, the ranged items with start < lowerBound and end > upperbound are not shown.
+    // We therefore have to brute force check all items in the byEnd list
+    if (this.checkRangedItems == true) {
+      this.checkRangedItems = false;
+      for (i = 0; i < orderedItems.byEnd.length; i++) {
+        this._checkIfVisibleWithReference(orderedItems.byEnd[i], visibleItems, visibleItemsLookup, range);
+      }
+    } else {
+      // we do a binary search for the items that have defined end times.
+      var initialPosByEnd = util.binarySearchCustom(orderedItems.byEnd, searchFunction, 'data', 'end');
 
-    this.top = null;
-    this.left = null;
-    this.width = null;
-    this.height = null;
+      // trace the visible items from the inital start pos both ways until an invisible item is found, we only look at the end values.
+      this._traceVisible(initialPosByEnd, orderedItems.byEnd, visibleItems, visibleItemsLookup, function (item) {
+        return item.data.end < lowerBound || item.data.end > upperBound;
+      });
+    }
 
-    this.editable = null;
-    if (this.data && this.data.hasOwnProperty('editable') && typeof this.data.editable === 'boolean') {
-      this.editable = data.editable;
+    // finally, we reposition all the visible items.
+    for (i = 0; i < visibleItems.length; i++) {
+      item = visibleItems[i];
+      if (!item.displayed) item.show();
+      // reposition item horizontally
+      item.repositionX();
     }
-  }
 
-  Item.prototype.stack = true;
+    // debug
+    //console.log("new line")
+    //if (this.groupId == null) {
+    //  for (i = 0; i < orderedItems.byStart.length; i++) {
+    //    item = orderedItems.byStart[i].data;
+    //    console.log('start',i,initialPosByStart, item.start.valueOf(), item.content, item.start >= lowerBound && item.start <= upperBound,i == initialPosByStart ? "<------------------- HEREEEE" : "")
+    //  }
+    //  for (i = 0; i < orderedItems.byEnd.length; i++) {
+    //    item = orderedItems.byEnd[i].data;
+    //    console.log('rangeEnd',i,initialPosByEnd, item.end.valueOf(), item.content, item.end >= range.start && item.end <= range.end,i == initialPosByEnd ? "<------------------- HEREEEE" : "")
+    //  }
+    //}
 
-  /**
-   * Select current item
-   */
-  Item.prototype.select = function () {
-    this.selected = true;
-    this.dirty = true;
-    if (this.displayed) this.redraw();
+    return visibleItems;
   };
 
-  /**
-   * Unselect current item
-   */
-  Item.prototype.unselect = function () {
-    this.selected = false;
-    this.dirty = true;
-    if (this.displayed) this.redraw();
+  Group.prototype._traceVisible = function (initialPos, items, visibleItems, visibleItemsLookup, breakCondition) {
+    var item;
+    var i;
+
+    if (initialPos != -1) {
+      for (i = initialPos; i >= 0; i--) {
+        item = items[i];
+        if (breakCondition(item)) {
+          break;
+        } else {
+          if (visibleItemsLookup[item.id] === undefined) {
+            visibleItemsLookup[item.id] = true;
+            visibleItems.push(item);
+          }
+        }
+      }
+
+      for (i = initialPos + 1; i < items.length; i++) {
+        item = items[i];
+        if (breakCondition(item)) {
+          break;
+        } else {
+          if (visibleItemsLookup[item.id] === undefined) {
+            visibleItemsLookup[item.id] = true;
+            visibleItems.push(item);
+          }
+        }
+      }
+    }
   };
 
   /**
-   * Set data for the item. Existing data will be updated. The id should not
-   * be changed. When the item is displayed, it will be redrawn immediately.
-   * @param {Object} data
+   * 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
    */
-  Item.prototype.setData = function (data) {
-    var groupChanged = data.group != undefined && this.data.group != data.group;
-    if (groupChanged) {
-      this.parent.itemSet._moveToGroup(this, data.group);
-    }
-
-    if (data.hasOwnProperty('editable') && typeof data.editable === 'boolean') {
-      this.editable = data.editable;
+  Group.prototype._checkIfVisible = function (item, visibleItems, range) {
+    if (item.isVisible(range)) {
+      if (!item.displayed) item.show();
+      // reposition item horizontally
+      item.repositionX();
+      visibleItems.push(item);
+    } else {
+      if (item.displayed) item.hide();
     }
-
-    this.data = data;
-    this.dirty = true;
-    if (this.displayed) this.redraw();
   };
 
   /**
-   * Set a parent for the item
-   * @param {ItemSet | Group} parent
+   * 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
    */
-  Item.prototype.setParent = function (parent) {
-    if (this.displayed) {
-      this.hide();
-      this.parent = parent;
-      if (this.parent) {
-        this.show();
+  Group.prototype._checkIfVisibleWithReference = function (item, visibleItems, visibleItemsLookup, range) {
+    if (item.isVisible(range)) {
+      if (visibleItemsLookup[item.id] === undefined) {
+        visibleItemsLookup[item.id] = true;
+        visibleItems.push(item);
       }
     } else {
-      this.parent = parent;
+      if (item.displayed) item.hide();
     }
   };
 
-  /**
-   * 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;
-  };
+  module.exports = Group;
 
-  /**
-   * Show the Item in the DOM (when not already visible)
-   * @return {Boolean} changed
-   */
-  Item.prototype.show = function () {
-    return false;
-  };
+/***/ },
+/* 32 */
+/***/ function(module, exports) {
 
-  /**
-   * Hide the Item from the DOM (when visible)
-   * @return {Boolean} changed
-   */
-  Item.prototype.hide = function () {
-    return false;
-  };
+  // Utility functions for ordering and stacking of items
+  'use strict';
 
-  /**
-   * Repaint the item
-   */
-  Item.prototype.redraw = function () {
-    // should be implemented by the item
-  };
+  var EPSILON = 0.001; // used when checking collisions, to prevent round-off errors
 
   /**
-   * Reposition the Item horizontally
+   * Order items by their start data
+   * @param {Item[]} items
    */
-  Item.prototype.repositionX = function () {
-    // should be implemented by the item
+  exports.orderByStart = function (items) {
+    items.sort(function (a, b) {
+      return a.data.start - b.data.start;
+    });
   };
 
   /**
-   * Reposition the Item vertically
+   * Order items by their end date. If they have no end date, their start date
+   * is used.
+   * @param {Item[]} items
    */
-  Item.prototype.repositionY = function () {
-    // should be implemented by the item
+  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;
+    });
   };
 
   /**
-   * Repaint a delete button on the top right of the item when the item is selected
-   * @param {HTMLElement} anchor
-   * @protected
+   * Adjust vertical positions of the items such that they don't overlap each
+   * other.
+   * @param {Item[]} items
+   *            All visible items
+   * @param {{item: {horizontal: number, vertical: 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
    */
-  Item.prototype._repaintDeleteButton = function (anchor) {
-    var editable = (this.options.editable.remove || this.data.editable === true) && this.data.editable !== false;
+  exports.stack = function (items, margin, force) {
+    var i, iMax;
 
-    if (this.selected && editable && !this.dom.deleteButton) {
-      // create and show button
-      var me = this;
+    if (force) {
+      // reset top position of all items
+      for (i = 0, iMax = items.length; i < iMax; i++) {
+        items[i].top = null;
+      }
+    }
 
-      var deleteButton = document.createElement('div');
-      deleteButton.className = 'vis-delete';
-      deleteButton.title = 'Delete this item';
+    // calculate new, non-overlapping positions
+    for (i = 0, iMax = items.length; i < iMax; i++) {
+      var item = items[i];
+      if (item.stack && item.top === null) {
+        // initialize top position
+        item.top = margin.axis;
 
-      // TODO: be able to destroy the delete button
-      new Hammer(deleteButton).on('tap', function (event) {
-        event.stopPropagation();
-        me.parent.removeFromDataSet(me);
-      });
+        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 && other.stack && exports.collision(item, other, margin.item)) {
+              collidingItem = other;
+              break;
+            }
+          }
 
-      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 (collidingItem != null) {
+            // There is a collision. Reposition the items above the colliding element
+            item.top = collidingItem.top + collidingItem.height + margin.item.vertical;
+          }
+        } while (collidingItem);
       }
-      this.dom.deleteButton = null;
     }
   };
 
   /**
-   * Set HTML contents for the item
-   * @param {Element} element   HTML element to fill with the contents
-   * @private
+   * Adjust vertical positions of the items without stacking them
+   * @param {Item[]} items
+   *            All visible items
+   * @param {{item: {horizontal: number, vertical: number}, axis: number}} margin
+   *            Margins between items and between items and the axis.
    */
-  Item.prototype._updateContents = function (element) {
-    var content;
-    if (this.options.template) {
-      var itemData = this.parent.itemSet.itemsData.get(this.id); // get a clone of the data from the dataset
-      content = this.options.template(itemData);
-    } else {
-      content = this.data.content;
-    }
+  exports.nostack = function (items, margin, subgroups) {
+    var i, iMax, newTop;
 
-    var changed = this._contentToString(this.content) !== this._contentToString(content);
-    if (changed) {
-      // only replace the content when changed
-      if (content instanceof Element) {
-        element.innerHTML = '';
-        element.appendChild(content);
-      } else if (content != undefined) {
-        element.innerHTML = content;
-      } else {
-        if (!(this.data.type == 'background' && this.data.content === undefined)) {
-          throw new Error('Property "content" missing in item ' + this.id);
+    // reset top position of all items
+    for (i = 0, iMax = items.length; i < iMax; i++) {
+      if (items[i].data.subgroup !== undefined) {
+        newTop = margin.axis;
+        for (var subgroup in subgroups) {
+          if (subgroups.hasOwnProperty(subgroup)) {
+            if (subgroups[subgroup].visible == true && subgroups[subgroup].index < subgroups[items[i].data.subgroup].index) {
+              newTop += subgroups[subgroup].height + margin.item.vertical;
+            }
+          }
         }
+        items[i].top = newTop;
+      } else {
+        items[i].top = margin.axis;
       }
-
-      this.content = content;
     }
   };
 
   /**
-   * Set HTML contents for the item
-   * @param {Element} element   HTML element to fill with the contents
-   * @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 {{horizontal: number, vertical: number}} margin
+   *                          An object containing a horizontal and vertical
+   *                          minimum required margin.
+   * @return {boolean}        true if a and b collide, else false
    */
-  Item.prototype._updateTitle = function (element) {
-    if (this.data.title != null) {
-      element.title = this.data.title || '';
-    } else {
-      element.removeAttribute('vis-title');
-    }
+  exports.collision = function (a, b, margin) {
+    return a.left - margin.horizontal + EPSILON < b.left + b.width && a.left + a.width + margin.horizontal - EPSILON > b.left && a.top - margin.vertical + EPSILON < b.top + b.height && a.top + a.height + margin.vertical - EPSILON > b.top;
   };
 
+/***/ },
+/* 33 */
+/***/ function(module, exports, __webpack_require__) {
+
+  'use strict';
+
+  var Hammer = __webpack_require__(20);
+  var Item = __webpack_require__(34);
+
   /**
-   * Process dataAttributes timeline option and set as data- attributes on dom.content
-   * @param {Element} element   HTML element to which the attributes will be attached
-   * @private
+   * @constructor RangeItem
+   * @extends Item
+   * @param {Object} data             Object containing parameters start, end
+   *                                  content, className.
+   * @param {{toScreen: function, toTime: function}} conversion
+   *                                  Conversion functions from time to screen and vice versa
+   * @param {Object} [options]        Configuration options
+   *                                  // TODO: describe options
    */
-  Item.prototype._updateDataAttributes = function (element) {
-    if (this.options.dataAttributes && this.options.dataAttributes.length > 0) {
-      var attributes = [];
-
-      if (Array.isArray(this.options.dataAttributes)) {
-        attributes = this.options.dataAttributes;
-      } else if (this.options.dataAttributes == 'all') {
-        attributes = Object.keys(this.data);
-      } else {
-        return;
+  function RangeItem(data, conversion, options) {
+    this.props = {
+      content: {
+        width: 0
       }
+    };
+    this.overflow = false; // if contents can overflow (css styling), this flag is set to true
 
-      for (var i = 0; i < attributes.length; i++) {
-        var name = attributes[i];
-        var value = this.data[name];
-
-        if (value != null) {
-          element.setAttribute('data-' + name, value);
-        } else {
-          element.removeAttribute('data-' + name);
-        }
+    // 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);
       }
     }
-  };
 
-  /**
-   * Update custom styles of the element
-   * @param element
-   * @private
-   */
-  Item.prototype._updateStyle = function (element) {
-    // remove old styles
-    if (this.style) {
-      util.removeCssText(element, this.style);
-      this.style = null;
-    }
+    Item.call(this, data, conversion, options);
+  }
 
-    // append new styles
-    if (this.data.style) {
-      util.addCssText(element, this.data.style);
-      this.style = this.data.style;
-    }
-  };
+  RangeItem.prototype = new Item(null, null, null);
 
-  /**
-   * Stringify the items contents
-   * @param {string | Element | undefined} content
-   * @returns {string | undefined}
-   * @private
-   */
-  Item.prototype._contentToString = function (content) {
-    if (typeof content === 'string') return content;
-    if (content && 'outerHTML' in content) return content.outerHTML;
-    return content;
-  };
+  RangeItem.prototype.baseClassName = 'vis-item vis-range';
 
   /**
-   * Return the width of the item left from its start date
-   * @return {number}
+   * 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.getWidthLeft = function () {
-    return 0;
+  RangeItem.prototype.isVisible = function (range) {
+    // determine visibility
+    return this.data.start < range.end && this.data.end > range.start;
   };
 
   /**
-   * Return the width of the item right from the max of its start and end date
-   * @return {number}
+   * Repaint the item
    */
-  Item.prototype.getWidthRight = function () {
-    return 0;
-  };
-
-  module.exports = Item;
-
-/***/ },
-/* 34 */
-/***/ function(module, exports, __webpack_require__) {
-
-  'use strict';
-
-  var moment = __webpack_require__(2);
-  var DateUtil = __webpack_require__(27);
-  var util = __webpack_require__(1);
+  RangeItem.prototype.redraw = function () {
+    var dom = this.dom;
+    if (!dom) {
+      // create DOM
+      this.dom = {};
+      dom = this.dom;
 
-  /**
-   * @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, hiddenDates) {
-    this.moment = moment;
+      // background box
+      dom.box = document.createElement('div');
+      // className is updated in redraw()
 
-    // variables
-    this.current = this.moment();
-    this._start = this.moment();
-    this._end = this.moment();
+      // frame box (to prevent the item contents from overflowing
+      dom.frame = document.createElement('div');
+      dom.frame.className = 'vis-item-overflow';
+      dom.box.appendChild(dom.frame);
 
-    this.autoScale = true;
-    this.scale = 'day';
-    this.step = 1;
+      // contents box
+      dom.content = document.createElement('div');
+      dom.content.className = 'vis-item-content';
+      dom.frame.appendChild(dom.content);
 
-    // initialize the range
-    this.setRange(start, end, minimumStep);
+      // attach this item as attribute
+      dom.box['timeline-item'] = this;
 
-    // hidden Dates options
-    this.switchedDay = false;
-    this.switchedMonth = false;
-    this.switchedYear = false;
-    this.hiddenDates = hiddenDates;
-    if (hiddenDates === undefined) {
-      this.hiddenDates = [];
+      this.dirty = true;
     }
 
-    this.format = TimeStep.FORMAT; // default formatting
-  }
-
-  // Time formatting
-  TimeStep.FORMAT = {
-    minorLabels: {
-      millisecond: 'SSS',
-      second: 's',
-      minute: 'HH:mm',
-      hour: 'HH:mm',
-      weekday: 'ddd D',
-      day: 'D',
-      month: 'MMM',
-      year: 'YYYY'
-    },
-    majorLabels: {
-      millisecond: 'HH:mm:ss',
-      second: 'D MMMM HH:mm',
-      minute: 'ddd D MMMM',
-      hour: 'ddd D MMMM',
-      weekday: 'MMMM YYYY',
-      day: 'MMMM YYYY',
-      month: 'YYYY',
-      year: ''
+    // append DOM to parent DOM
+    if (!this.parent) {
+      throw new Error('Cannot redraw item: no parent attached');
     }
-  };
+    if (!dom.box.parentNode) {
+      var foreground = this.parent.dom.foreground;
+      if (!foreground) {
+        throw new Error('Cannot redraw item: parent has no foreground container element');
+      }
+      foreground.appendChild(dom.box);
+    }
+    this.displayed = true;
 
-  /**
-   * Set custom constructor function for moment. Can be used to set dates
-   * to UTC or to set a utcOffset.
-   * @param {function} moment
-   */
-  TimeStep.prototype.setMoment = function (moment) {
-    this.moment = moment;
+    // Update DOM when item is marked dirty. An item is marked dirty when:
+    // - the item is not yet rendered
+    // - the item's data is changed
+    // - the item is selected/deselected
+    if (this.dirty) {
+      this._updateContents(this.dom.content);
+      this._updateTitle(this.dom.box);
+      this._updateDataAttributes(this.dom.box);
+      this._updateStyle(this.dom.box);
 
-    // update the date properties, can have a new utcOffset
-    this.current = this.moment(this.current);
-    this._start = this.moment(this._start);
-    this._end = this.moment(this._end);
-  };
+      var editable = (this.options.editable.updateTime || this.options.editable.updateGroup || this.editable === true) && this.editable !== false;
 
-  /**
-   * Set custom formatting for the minor an major labels of the TimeStep.
-   * Both `minorLabels` and `majorLabels` are an Object with properties:
-   * 'millisecond', 'second', 'minute', 'hour', 'weekday', 'day', 'month', 'year'.
-   * @param {{minorLabels: Object, majorLabels: Object}} format
-   */
-  TimeStep.prototype.setFormat = function (format) {
-    var defaultFormat = util.deepExtend({}, TimeStep.FORMAT);
-    this.format = util.deepExtend(defaultFormat, format);
-  };
+      // update class
+      var className = (this.data.className ? ' ' + this.data.className : '') + (this.selected ? ' vis-selected' : '') + (editable ? ' vis-editable' : ' vis-readonly');
+      dom.box.className = this.baseClassName + className;
 
-  /**
-   * 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";
-    }
+      // determine from css whether this box has overflow
+      this.overflow = window.getComputedStyle(dom.frame).overflow !== 'hidden';
 
-    this._start = start != undefined ? this.moment(start.valueOf()) : new Date();
-    this._end = end != undefined ? this.moment(end.valueOf()) : new Date();
+      // recalculate size
+      // turn off max-width to be able to calculate the real width
+      // this causes an extra browser repaint/reflow, but so be it
+      this.dom.content.style.maxWidth = 'none';
+      this.props.content.width = this.dom.content.offsetWidth;
+      this.height = this.dom.box.offsetHeight;
+      this.dom.content.style.maxWidth = '';
 
-    if (this.autoScale) {
-      this.setMinimumStep(minimumStep);
+      this.dirty = false;
     }
+
+    this._repaintDeleteButton(dom.box);
+    this._repaintDragLeft();
+    this._repaintDragRight();
   };
 
   /**
-   * Set the range iterator to the start date.
+   * Show the item in the DOM (when not already visible). The items DOM will
+   * be created when needed.
    */
-  TimeStep.prototype.start = function () {
-    this.current = this._start.clone();
-    this.roundToMinor();
+  RangeItem.prototype.show = function () {
+    if (!this.displayed) {
+      this.redraw();
+    }
   };
 
   /**
-   * Round the current date to the first minor date value
-   * This must be executed once when the current date is set to start Date
+   * Hide the item from the DOM (when visible)
+   * @return {Boolean} changed
    */
-  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 'year':
-        this.current.year(this.step * Math.floor(this.current.year() / this.step));
-        this.current.month(0);
-      case 'month':
-        this.current.date(1);
-      case 'day': // intentional fall through
-      case 'weekday':
-        this.current.hours(0);
-      case 'hour':
-        this.current.minutes(0);
-      case 'minute':
-        this.current.seconds(0);
-      case 'second':
-        this.current.milliseconds(0);
-      //case 'millisecond': // nothing to do for milliseconds
-    }
+  RangeItem.prototype.hide = function () {
+    if (this.displayed) {
+      var box = this.dom.box;
 
-    if (this.step != 1) {
-      // round down to the first minor value that is a multiple of the current step size
-      switch (this.scale) {
-        case 'millisecond':
-          this.current.subtract(this.current.milliseconds() % this.step, 'milliseconds');break;
-        case 'second':
-          this.current.subtract(this.current.seconds() % this.step, 'seconds');break;
-        case 'minute':
-          this.current.subtract(this.current.minutes() % this.step, 'minutes');break;
-        case 'hour':
-          this.current.subtract(this.current.hours() % this.step, 'hours');break;
-        case 'weekday': // intentional fall through
-        case 'day':
-          this.current.subtract((this.current.date() - 1) % this.step, 'day');break;
-        case 'month':
-          this.current.subtract(this.current.month() % this.step, 'month');break;
-        case 'year':
-          this.current.subtract(this.current.year() % this.step, 'year');break;
-        default:
-          break;
+      if (box.parentNode) {
+        box.parentNode.removeChild(box);
       }
-    }
-  };
 
-  /**
-   * 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();
+      this.displayed = false;
+    }
   };
 
   /**
-   * Do the next step
+   * Reposition the item horizontally
+   * @param {boolean} [limitSize=true] If true (default), the width of the range
+   *                                   item will be limited, as the browser cannot
+   *                                   display very wide divs. This means though
+   *                                   that the applied left and width may
+   *                                   not correspond to the ranges start and end
+   * @Override
    */
-  TimeStep.prototype.next = function () {
-    var prev = this.current.valueOf();
+  RangeItem.prototype.repositionX = function (limitSize) {
+    var parentWidth = this.parent.width;
+    var start = this.conversion.toScreen(this.data.start);
+    var end = this.conversion.toScreen(this.data.end);
+    var contentLeft;
+    var contentWidth;
 
-    // Two cases, needed to prevent issues with switching daylight savings
-    // (end of March and end of October)
-    if (this.current.month() < 6) {
-      switch (this.scale) {
-        case 'millisecond':
-          this.current.add(this.step, 'millisecond');break;
-        case 'second':
-          this.current.add(this.step, 'second');break;
-        case 'minute':
-          this.current.add(this.step, 'minute');break;
-        case 'hour':
-          this.current.add(this.step, 'hour');
-          // in case of skipping an hour for daylight savings, adjust the hour again (else you get: 0h 5h 9h ... instead of 0h 4h 8h ...)
-          // TODO: is this still needed now we use the function of moment.js?
-          this.current.subtract(this.current.hours() % this.step, 'hour');
-          break;
-        case 'weekday': // intentional fall through
-        case 'day':
-          this.current.add(this.step, 'day');break;
-        case 'month':
-          this.current.add(this.step, 'month');break;
-        case 'year':
-          this.current.add(this.step, 'year');break;
-        default:
-          break;
+    // limit the width of the range, as browsers cannot draw very wide divs
+    if (limitSize === undefined || limitSize === true) {
+      if (start < -parentWidth) {
+        start = -parentWidth;
       }
-    } else {
-      switch (this.scale) {
-        case 'millisecond':
-          this.current.add(this.step, 'millisecond');break;
-        case 'second':
-          this.current.add(this.step, 'second');break;
-        case 'minute':
-          this.current.add(this.step, 'minute');break;
-        case 'hour':
-          this.current.add(this.step, 'hour');break;
-        case 'weekday': // intentional fall through
-        case 'day':
-          this.current.add(this.step, 'day');break;
-        case 'month':
-          this.current.add(this.step, 'month');break;
-        case 'year':
-          this.current.add(this.step, 'year');break;
-        default:
-          break;
+      if (end > 2 * parentWidth) {
+        end = 2 * parentWidth;
       }
     }
+    var boxWidth = Math.max(end - start, 1);
 
-    if (this.step != 1) {
-      // round down to the correct major value
-      switch (this.scale) {
-        case 'millisecond':
-          if (this.current.milliseconds() < this.step) this.current.milliseconds(0);break;
-        case 'second':
-          if (this.current.seconds() < this.step) this.current.seconds(0);break;
-        case 'minute':
-          if (this.current.minutes() < this.step) this.current.minutes(0);break;
-        case 'hour':
-          if (this.current.hours() < this.step) this.current.hours(0);break;
-        case 'weekday': // intentional fall through
-        case 'day':
-          if (this.current.date() < this.step + 1) this.current.date(1);break;
-        case 'month':
-          if (this.current.month() < this.step) this.current.month(0);break;
-        case 'year':
-          break; // nothing to do for year
-        default:
-          break;
-      }
-    }
+    if (this.overflow) {
+      this.left = start;
+      this.width = boxWidth + this.props.content.width;
+      contentWidth = this.props.content.width;
 
-    // safety mechanism: if current time is still unchanged, move to the end
-    if (this.current.valueOf() == prev) {
-      this.current = this._end.clone();
+      // Note: The calculation of width is an optimistic calculation, giving
+      //       a width which will not change when moving the Timeline
+      //       So no re-stacking needed, which is nicer for the eye;
+    } else {
+      this.left = start;
+      this.width = boxWidth;
+      contentWidth = Math.min(end - start, this.props.content.width);
     }
 
-    DateUtil.stepOverHiddenDates(this.moment, this, prev);
-  };
+    this.dom.box.style.left = this.left + 'px';
+    this.dom.box.style.width = boxWidth + 'px';
 
-  /**
-   * Get the current datetime
-   * @return {Moment}  current The current date
-   */
-  TimeStep.prototype.getCurrent = function () {
-    return this.current;
+    switch (this.options.align) {
+      case 'left':
+        this.dom.content.style.left = '0';
+        break;
+
+      case 'right':
+        this.dom.content.style.left = Math.max(boxWidth - contentWidth, 0) + 'px';
+        break;
+
+      case 'center':
+        this.dom.content.style.left = Math.max((boxWidth - contentWidth) / 2, 0) + 'px';
+        break;
+
+      default:
+        // 'auto'
+        // when range exceeds left of the window, position the contents at the left of the visible area
+        if (this.overflow) {
+          if (end > 0) {
+            contentLeft = Math.max(-start, 0);
+          } else {
+            contentLeft = -contentWidth; // ensure it's not visible anymore
+          }
+        } else {
+          if (start < 0) {
+            contentLeft = -start;
+          } else {
+            contentLeft = 0;
+          }
+        }
+        this.dom.content.style.left = contentLeft + 'px';
+    }
   };
 
   /**
-   * Set a custom scale. Autoscaling will be disabled.
-   * For example setScale('minute', 5) will result
-   * in minor steps of 5 minutes, and major steps of an hour.
-   *
-   * @param {{scale: string, step: number}} params
-   *                               An object containing two properties:
-   *                               - A string 'scale'. Choose from 'millisecond', 'second',
-   *                                 'minute', 'hour', 'weekday', 'day', 'month', 'year'.
-   *                               - A number 'step'. A step size, by default 1.
-   *                                 Choose for example 1, 2, 5, or 10.
+   * Reposition the item vertically
+   * @Override
    */
-  TimeStep.prototype.setScale = function (params) {
-    if (params && typeof params.scale == 'string') {
-      this.scale = params.scale;
-      this.step = params.step > 0 ? params.step : 1;
-      this.autoScale = false;
+  RangeItem.prototype.repositionY = function () {
+    var orientation = this.options.orientation.item;
+    var box = this.dom.box;
+
+    if (orientation == 'top') {
+      box.style.top = this.top + 'px';
+    } else {
+      box.style.top = this.parent.height - this.top - this.height + 'px';
     }
   };
 
   /**
-   * Enable or disable autoscaling
-   * @param {boolean} enable  If true, autoascaling is set true
+   * Repaint a drag area on the left side of the range when the range is selected
+   * @protected
    */
-  TimeStep.prototype.setAutoScale = function (enable) {
-    this.autoScale = enable;
+  RangeItem.prototype._repaintDragLeft = function () {
+    if (this.selected && this.options.editable.updateTime && !this.dom.dragLeft) {
+      // create and show drag area
+      var dragLeft = document.createElement('div');
+      dragLeft.className = 'vis-drag-left';
+      dragLeft.dragLeftItem = this;
+
+      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;
+    }
   };
 
   /**
-   * Automatically determine the scale that bests fits the provided minimum step
-   * @param {Number} [minimumStep]  The minimum step size in milliseconds
+   * Repaint a drag area on the right side of the range when the range is selected
+   * @protected
    */
-  TimeStep.prototype.setMinimumStep = function (minimumStep) {
-    if (minimumStep == undefined) {
-      return;
+  RangeItem.prototype._repaintDragRight = function () {
+    if (this.selected && this.options.editable.updateTime && !this.dom.dragRight) {
+      // create and show drag area
+      var dragRight = document.createElement('div');
+      dragRight.className = 'vis-drag-right';
+      dragRight.dragRightItem = this;
+
+      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;
     }
+  };
 
-    //var b = asc + ds;
+  module.exports = RangeItem;
 
-    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;
+/***/ },
+/* 34 */
+/***/ function(module, exports, __webpack_require__) {
 
-    // find the smallest step that is larger than the provided minimumStep
-    if (stepYear * 1000 > minimumStep) {
-      this.scale = 'year';this.step = 1000;
-    }
-    if (stepYear * 500 > minimumStep) {
-      this.scale = 'year';this.step = 500;
-    }
-    if (stepYear * 100 > minimumStep) {
-      this.scale = 'year';this.step = 100;
-    }
-    if (stepYear * 50 > minimumStep) {
-      this.scale = 'year';this.step = 50;
-    }
-    if (stepYear * 10 > minimumStep) {
-      this.scale = 'year';this.step = 10;
-    }
-    if (stepYear * 5 > minimumStep) {
-      this.scale = 'year';this.step = 5;
-    }
-    if (stepYear > minimumStep) {
-      this.scale = 'year';this.step = 1;
-    }
-    if (stepMonth * 3 > minimumStep) {
-      this.scale = 'month';this.step = 3;
-    }
-    if (stepMonth > minimumStep) {
-      this.scale = 'month';this.step = 1;
-    }
-    if (stepDay * 5 > minimumStep) {
-      this.scale = 'day';this.step = 5;
-    }
-    if (stepDay * 2 > minimumStep) {
-      this.scale = 'day';this.step = 2;
-    }
-    if (stepDay > minimumStep) {
-      this.scale = 'day';this.step = 1;
-    }
-    if (stepDay / 2 > minimumStep) {
-      this.scale = 'weekday';this.step = 1;
-    }
-    if (stepHour * 4 > minimumStep) {
-      this.scale = 'hour';this.step = 4;
-    }
-    if (stepHour > minimumStep) {
-      this.scale = 'hour';this.step = 1;
-    }
-    if (stepMinute * 15 > minimumStep) {
-      this.scale = 'minute';this.step = 15;
-    }
-    if (stepMinute * 10 > minimumStep) {
-      this.scale = 'minute';this.step = 10;
-    }
-    if (stepMinute * 5 > minimumStep) {
-      this.scale = 'minute';this.step = 5;
-    }
-    if (stepMinute > minimumStep) {
-      this.scale = 'minute';this.step = 1;
-    }
-    if (stepSecond * 15 > minimumStep) {
-      this.scale = 'second';this.step = 15;
-    }
-    if (stepSecond * 10 > minimumStep) {
-      this.scale = 'second';this.step = 10;
-    }
-    if (stepSecond * 5 > minimumStep) {
-      this.scale = 'second';this.step = 5;
-    }
-    if (stepSecond > minimumStep) {
-      this.scale = 'second';this.step = 1;
-    }
-    if (stepMillisecond * 200 > minimumStep) {
-      this.scale = 'millisecond';this.step = 200;
-    }
-    if (stepMillisecond * 100 > minimumStep) {
-      this.scale = 'millisecond';this.step = 100;
-    }
-    if (stepMillisecond * 50 > minimumStep) {
-      this.scale = 'millisecond';this.step = 50;
-    }
-    if (stepMillisecond * 10 > minimumStep) {
-      this.scale = 'millisecond';this.step = 10;
-    }
-    if (stepMillisecond * 5 > minimumStep) {
-      this.scale = 'millisecond';this.step = 5;
-    }
-    if (stepMillisecond > minimumStep) {
-      this.scale = 'millisecond';this.step = 1;
-    }
-  };
+  'use strict';
+
+  var Hammer = __webpack_require__(20);
+  var util = __webpack_require__(1);
 
   /**
-   * Snap a date to a rounded value.
-   * The snap intervals are dependent on the current scale and step.
-   * Static function
-   * @param {Date} date    the date to be snapped.
-   * @param {string} scale Current scale, can be 'millisecond', 'second',
-   *                       'minute', 'hour', 'weekday, 'day', 'month', 'year'.
-   * @param {number} step  Current step (1, 2, 4, 5, ...
-   * @return {Date} snappedDate
+   * @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
    */
-  TimeStep.snap = function (date, scale, step) {
-    var clone = moment(date);
+  function Item(data, conversion, options) {
+    this.id = null;
+    this.parent = null;
+    this.data = data;
+    this.dom = null;
+    this.conversion = conversion || {};
+    this.options = options || {};
 
-    if (scale == 'year') {
-      var year = clone.year() + Math.round(clone.month() / 12);
-      clone.year(Math.round(year / step) * step);
-      clone.month(0);
-      clone.date(0);
-      clone.hours(0);
-      clone.minutes(0);
-      clone.seconds(0);
-      clone.milliseconds(0);
-    } else if (scale == 'month') {
-      if (clone.date() > 15) {
-        clone.date(1);
-        clone.add(1, 'month');
-        // important: first set Date to 1, after that change the month.
-      } else {
-          clone.date(1);
-        }
+    this.selected = false;
+    this.displayed = false;
+    this.dirty = true;
 
-      clone.hours(0);
-      clone.minutes(0);
-      clone.seconds(0);
-      clone.milliseconds(0);
-    } else if (scale == 'day') {
-      //noinspection FallthroughInSwitchStatementJS
-      switch (step) {
-        case 5:
-        case 2:
-          clone.hours(Math.round(clone.hours() / 24) * 24);break;
-        default:
-          clone.hours(Math.round(clone.hours() / 12) * 12);break;
-      }
-      clone.minutes(0);
-      clone.seconds(0);
-      clone.milliseconds(0);
-    } else if (scale == 'weekday') {
-      //noinspection FallthroughInSwitchStatementJS
-      switch (step) {
-        case 5:
-        case 2:
-          clone.hours(Math.round(clone.hours() / 12) * 12);break;
-        default:
-          clone.hours(Math.round(clone.hours() / 6) * 6);break;
-      }
-      clone.minutes(0);
-      clone.seconds(0);
-      clone.milliseconds(0);
-    } else if (scale == 'hour') {
-      switch (step) {
-        case 4:
-          clone.minutes(Math.round(clone.minutes() / 60) * 60);break;
-        default:
-          clone.minutes(Math.round(clone.minutes() / 30) * 30);break;
-      }
-      clone.seconds(0);
-      clone.milliseconds(0);
-    } else if (scale == 'minute') {
-      //noinspection FallthroughInSwitchStatementJS
-      switch (step) {
-        case 15:
-        case 10:
-          clone.minutes(Math.round(clone.minutes() / 5) * 5);
-          clone.seconds(0);
-          break;
-        case 5:
-          clone.seconds(Math.round(clone.seconds() / 60) * 60);break;
-        default:
-          clone.seconds(Math.round(clone.seconds() / 30) * 30);break;
-      }
-      clone.milliseconds(0);
-    } else if (scale == 'second') {
-      //noinspection FallthroughInSwitchStatementJS
-      switch (step) {
-        case 15:
-        case 10:
-          clone.seconds(Math.round(clone.seconds() / 5) * 5);
-          clone.milliseconds(0);
-          break;
-        case 5:
-          clone.milliseconds(Math.round(clone.milliseconds() / 1000) * 1000);break;
-        default:
-          clone.milliseconds(Math.round(clone.milliseconds() / 500) * 500);break;
-      }
-    } else if (scale == 'millisecond') {
-      var _step = step > 5 ? step / 2 : 1;
-      clone.milliseconds(Math.round(clone.milliseconds() / _step) * _step);
+    this.top = null;
+    this.left = null;
+    this.width = null;
+    this.height = null;
+
+    this.editable = null;
+    if (this.data && this.data.hasOwnProperty('editable') && typeof this.data.editable === 'boolean') {
+      this.editable = data.editable;
     }
+  }
+
+  Item.prototype.stack = true;
+
+  /**
+   * Select current item
+   */
+  Item.prototype.select = function () {
+    this.selected = true;
+    this.dirty = true;
+    if (this.displayed) this.redraw();
+  };
 
-    return clone;
+  /**
+   * Unselect current item
+   */
+  Item.prototype.unselect = function () {
+    this.selected = false;
+    this.dirty = true;
+    if (this.displayed) this.redraw();
   };
 
   /**
-   * 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.
+   * Set data for the item. Existing data will be updated. The id should not
+   * be changed. When the item is displayed, it will be redrawn immediately.
+   * @param {Object} data
    */
-  TimeStep.prototype.isMajor = function () {
-    if (this.switchedYear == true) {
-      this.switchedYear = false;
-      switch (this.scale) {
-        case 'year':
-        case 'month':
-        case 'weekday':
-        case 'day':
-        case 'hour':
-        case 'minute':
-        case 'second':
-        case 'millisecond':
-          return true;
-        default:
-          return false;
-      }
-    } else if (this.switchedMonth == true) {
-      this.switchedMonth = false;
-      switch (this.scale) {
-        case 'weekday':
-        case 'day':
-        case 'hour':
-        case 'minute':
-        case 'second':
-        case 'millisecond':
-          return true;
-        default:
-          return false;
-      }
-    } else if (this.switchedDay == true) {
-      this.switchedDay = false;
-      switch (this.scale) {
-        case 'millisecond':
-        case 'second':
-        case 'minute':
-        case 'hour':
-          return true;
-        default:
-          return false;
-      }
+  Item.prototype.setData = function (data) {
+    var groupChanged = data.group != undefined && this.data.group != data.group;
+    if (groupChanged) {
+      this.parent.itemSet._moveToGroup(this, data.group);
     }
 
-    var date = this.moment(this.current);
-    switch (this.scale) {
-      case 'millisecond':
-        return date.milliseconds() == 0;
-      case 'second':
-        return date.seconds() == 0;
-      case 'minute':
-        return date.hours() == 0 && date.minutes() == 0;
-      case 'hour':
-        return date.hours() == 0;
-      case 'weekday': // intentional fall through
-      case 'day':
-        return date.date() == 1;
-      case 'month':
-        return date.month() == 0;
-      case 'year':
-        return false;
-      default:
-        return false;
+    if (data.hasOwnProperty('editable') && typeof data.editable === 'boolean') {
+      this.editable = data.editable;
     }
+
+    this.data = data;
+    this.dirty = true;
+    if (this.displayed) this.redraw();
   };
 
   /**
-   * 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
+   * Set a parent for the item
+   * @param {ItemSet | Group} parent
    */
-  TimeStep.prototype.getLabelMinor = function (date) {
-    if (date == undefined) {
-      date = this.current;
+  Item.prototype.setParent = function (parent) {
+    if (this.displayed) {
+      this.hide();
+      this.parent = parent;
+      if (this.parent) {
+        this.show();
+      }
+    } else {
+      this.parent = parent;
     }
+  };
 
-    var format = this.format.minorLabels[this.scale];
-    return format && format.length > 0 ? this.moment(date).format(format) : '';
+  /**
+   * 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;
   };
 
   /**
-   * 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
+   * Show the Item in the DOM (when not already visible)
+   * @return {Boolean} changed
    */
-  TimeStep.prototype.getLabelMajor = function (date) {
-    if (date == undefined) {
-      date = this.current;
-    }
+  Item.prototype.show = function () {
+    return false;
+  };
 
-    var format = this.format.majorLabels[this.scale];
-    return format && format.length > 0 ? this.moment(date).format(format) : '';
+  /**
+   * Hide the Item from the DOM (when visible)
+   * @return {Boolean} changed
+   */
+  Item.prototype.hide = function () {
+    return false;
   };
 
-  TimeStep.prototype.getClassName = function () {
-    var _moment = this.moment;
-    var m = this.moment(this.current);
-    var current = m.locale ? m.locale('en') : m.lang('en'); // old versions of moment have .lang() function
-    var step = this.step;
+  /**
+   * Repaint the item
+   */
+  Item.prototype.redraw = function () {};
 
-    function even(value) {
-      return value / step % 2 == 0 ? ' vis-even' : ' vis-odd';
-    }
+  /**
+   * Reposition the Item horizontally
+   */
+  Item.prototype.repositionX = function () {};
 
-    function today(date) {
-      if (date.isSame(new Date(), 'day')) {
-        return ' vis-today';
-      }
-      if (date.isSame(_moment().add(1, 'day'), 'day')) {
-        return ' vis-tomorrow';
-      }
-      if (date.isSame(_moment().add(-1, 'day'), 'day')) {
-        return ' vis-yesterday';
+  /**
+   * Reposition the Item vertically
+   */
+  Item.prototype.repositionY = function () {};
+
+  /**
+   * 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) {
+    var editable = (this.options.editable.remove || this.data.editable === true) && this.data.editable !== false;
+
+    if (this.selected && editable && !this.dom.deleteButton) {
+      // create and show button
+      var me = this;
+
+      var deleteButton = document.createElement('div');
+      deleteButton.className = 'vis-delete';
+      deleteButton.title = 'Delete this item';
+
+      // TODO: be able to destroy the delete button
+      new Hammer(deleteButton).on('tap', function (event) {
+        event.stopPropagation();
+        me.parent.removeFromDataSet(me);
+      });
+
+      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);
       }
-      return '';
+      this.dom.deleteButton = null;
     }
+  };
 
-    function currentWeek(date) {
-      return date.isSame(new Date(), 'week') ? ' vis-current-week' : '';
+  /**
+   * Set HTML contents for the item
+   * @param {Element} element   HTML element to fill with the contents
+   * @private
+   */
+  Item.prototype._updateContents = function (element) {
+    var content;
+    if (this.options.template) {
+      var itemData = this.parent.itemSet.itemsData.get(this.id); // get a clone of the data from the dataset
+      content = this.options.template(itemData);
+    } else {
+      content = this.data.content;
     }
 
-    function currentMonth(date) {
-      return date.isSame(new Date(), 'month') ? ' vis-current-month' : '';
+    var changed = this._contentToString(this.content) !== this._contentToString(content);
+    if (changed) {
+      // only replace the content when changed
+      if (content instanceof Element) {
+        element.innerHTML = '';
+        element.appendChild(content);
+      } else if (content != undefined) {
+        element.innerHTML = content;
+      } else {
+        if (!(this.data.type == 'background' && this.data.content === undefined)) {
+          throw new Error('Property "content" missing in item ' + this.id);
+        }
+      }
+
+      this.content = content;
     }
+  };
 
-    function currentYear(date) {
-      return date.isSame(new Date(), 'year') ? ' vis-current-year' : '';
+  /**
+   * Set HTML contents for the item
+   * @param {Element} element   HTML element to fill with the contents
+   * @private
+   */
+  Item.prototype._updateTitle = function (element) {
+    if (this.data.title != null) {
+      element.title = this.data.title || '';
+    } else {
+      element.removeAttribute('vis-title');
     }
+  };
 
-    switch (this.scale) {
-      case 'millisecond':
-        return even(current.milliseconds()).trim();
+  /**
+   * Process dataAttributes timeline option and set as data- attributes on dom.content
+   * @param {Element} element   HTML element to which the attributes will be attached
+   * @private
+   */
+  Item.prototype._updateDataAttributes = function (element) {
+    if (this.options.dataAttributes && this.options.dataAttributes.length > 0) {
+      var attributes = [];
 
-      case 'second':
-        return even(current.seconds()).trim();
+      if (Array.isArray(this.options.dataAttributes)) {
+        attributes = this.options.dataAttributes;
+      } else if (this.options.dataAttributes == 'all') {
+        attributes = Object.keys(this.data);
+      } else {
+        return;
+      }
 
-      case 'minute':
-        return even(current.minutes()).trim();
+      for (var i = 0; i < attributes.length; i++) {
+        var name = attributes[i];
+        var value = this.data[name];
 
-      case 'hour':
-        var hours = current.hours();
-        if (this.step == 4) {
-          hours = hours + '-h' + (hours + 4);
+        if (value != null) {
+          element.setAttribute('data-' + name, value);
+        } else {
+          element.removeAttribute('data-' + name);
         }
-        return 'vis-h' + hours + today(current) + even(current.hours());
+      }
+    }
+  };
 
-      case 'weekday':
-        return 'vis-' + current.format('dddd').toLowerCase() + today(current) + currentWeek(current) + even(current.date());
+  /**
+   * Update custom styles of the element
+   * @param element
+   * @private
+   */
+  Item.prototype._updateStyle = function (element) {
+    // remove old styles
+    if (this.style) {
+      util.removeCssText(element, this.style);
+      this.style = null;
+    }
 
-      case 'day':
-        var day = current.date();
-        var month = current.format('MMMM').toLowerCase();
-        return 'vis-day' + day + ' vis-' + month + currentMonth(current) + even(day - 1);
+    // append new styles
+    if (this.data.style) {
+      util.addCssText(element, this.data.style);
+      this.style = this.data.style;
+    }
+  };
 
-      case 'month':
-        return 'vis-' + current.format('MMMM').toLowerCase() + currentMonth(current) + even(current.month());
+  /**
+   * Stringify the items contents
+   * @param {string | Element | undefined} content
+   * @returns {string | undefined}
+   * @private
+   */
+  Item.prototype._contentToString = function (content) {
+    if (typeof content === 'string') return content;
+    if (content && 'outerHTML' in content) return content.outerHTML;
+    return content;
+  };
 
-      case 'year':
-        var year = current.year();
-        return 'vis-year' + year + currentYear(current) + even(year);
+  /**
+   * Return the width of the item left from its start date
+   * @return {number}
+   */
+  Item.prototype.getWidthLeft = function () {
+    return 0;
+  };
 
-      default:
-        return '';
-    }
+  /**
+   * Return the width of the item right from the max of its start and end date
+   * @return {number}
+   */
+  Item.prototype.getWidthRight = function () {
+    return 0;
   };
 
-  module.exports = TimeStep;
+  module.exports = Item;
+
+  // should be implemented by the item
+
+  // should be implemented by the item
+
+  // should be implemented by the item
 
 /***/ },
 /* 35 */
@@ -19409,7 +19496,7 @@ return /******/ (function(modules) { // webpackBootstrap
   'use strict';
 
   var util = __webpack_require__(1);
-  var Group = __webpack_require__(30);
+  var Group = __webpack_require__(31);
 
   /**
    * @constructor BackgroundGroup
@@ -19472,7 +19559,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   'use strict';
 
-  var Item = __webpack_require__(33);
+  var Item = __webpack_require__(34);
   var util = __webpack_require__(1);
 
   /**
@@ -19712,7 +19799,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   'use strict';
 
-  var Item = __webpack_require__(33);
+  var Item = __webpack_require__(34);
 
   /**
    * @constructor PointItem
@@ -19918,9 +20005,9 @@ return /******/ (function(modules) { // webpackBootstrap
   'use strict';
 
   var Hammer = __webpack_require__(20);
-  var Item = __webpack_require__(33);
+  var Item = __webpack_require__(34);
   var BackgroundGroup = __webpack_require__(35);
-  var RangeItem = __webpack_require__(32);
+  var RangeItem = __webpack_require__(33);
 
   /**
    * @constructor BackgroundItem
@@ -20094,23 +20181,23 @@ return /******/ (function(modules) { // webpackBootstrap
       }
       // and when the orientation is bottom:
       else {
-          var newTop = this.parent.top;
-          var totalHeight = 0;
-          for (var subgroup in subgroups) {
-            if (subgroups.hasOwnProperty(subgroup)) {
-              if (subgroups[subgroup].visible == true) {
-                var newHeight = subgroups[subgroup].height + margin.item.vertical;
-                totalHeight += newHeight;
-                if (subgroups[subgroup].index > subgroupIndex) {
-                  newTop += newHeight;
-                }
+        var newTop = this.parent.top;
+        var totalHeight = 0;
+        for (var subgroup in subgroups) {
+          if (subgroups.hasOwnProperty(subgroup)) {
+            if (subgroups[subgroup].visible == true) {
+              var newHeight = subgroups[subgroup].height + margin.item.vertical;
+              totalHeight += newHeight;
+              if (subgroups[subgroup].index > subgroupIndex) {
+                newTop += newHeight;
               }
             }
           }
-          height = this.parent.subgroups[itemSubgroup].height + margin.item.vertical;
-          this.dom.box.style.top = this.parent.height - totalHeight + newTop + 'px';
-          this.dom.box.style.bottom = '';
         }
+        height = this.parent.subgroups[itemSubgroup].height + margin.item.vertical;
+        this.dom.box.style.top = this.parent.height - totalHeight + newTop + 'px';
+        this.dom.box.style.bottom = '';
+      }
     }
     // and in the case of no subgroups:
     else {
@@ -20140,7 +20227,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   var util = __webpack_require__(1);
   var Component = __webpack_require__(26);
-  var TimeStep = __webpack_require__(34);
+  var TimeStep = __webpack_require__(30);
   var DateUtil = __webpack_require__(27);
   var moment = __webpack_require__(2);
 
@@ -20601,7 +20688,7 @@ return /******/ (function(modules) { // webpackBootstrap
   'use strict';
 
   var keycharm = __webpack_require__(41);
-  var Emitter = __webpack_require__(13);
+  var Emitter = __webpack_require__(12);
   var Hammer = __webpack_require__(20);
   var util = __webpack_require__(1);
 
@@ -21407,6 +21494,10 @@ return /******/ (function(modules) { // webpackBootstrap
 
   var _ColorPicker = __webpack_require__(46);
 
+  var _ColorPicker2 = _interopRequireDefault(_ColorPicker);
+
+  var util = __webpack_require__(1);
+
   /**
    * The way this works is for all properties of this.possible options, you can supply the property name in any form to list the options.
    * Boolean options are recognised as Boolean
@@ -21422,10 +21513,6 @@ return /******/ (function(modules) { // webpackBootstrap
    * @param pixelRatio          | canvas pixel ratio
    */
 
-  var _ColorPicker2 = _interopRequireDefault(_ColorPicker);
-
-  var util = __webpack_require__(1);
-
   var Configurator = (function () {
     function Configurator(parentModule, defaultContainer, configureOptions) {
       var pixelRatio = arguments.length <= 3 || arguments[3] === undefined ? 1 : arguments[3];
@@ -21458,15 +21545,15 @@ return /******/ (function(modules) { // webpackBootstrap
       this.wrapper = undefined;
     }
 
-    /**
-     * refresh all options.
-     * Because all modules parse their options by themselves, we just use their options. We copy them here.
-     *
-     * @param options
-     */
-
     _createClass(Configurator, [{
       key: 'setOptions',
+
+      /**
+       * refresh all options.
+       * Because all modules parse their options by themselves, we just use their options. We copy them here.
+       *
+       * @param options
+       */
       value: function setOptions(options) {
         if (options !== undefined) {
           // reset the popup history because the indices may have been changed.
@@ -21518,13 +21605,13 @@ return /******/ (function(modules) { // webpackBootstrap
           this._create();
         }
       }
+    }, {
+      key: '_create',
 
       /**
        * Create all DOM elements
        * @private
        */
-    }, {
-      key: '_create',
       value: function _create() {
         var _this = this;
 
@@ -21588,13 +21675,13 @@ return /******/ (function(modules) { // webpackBootstrap
         this._push();
         this.colorPicker.insertTo(this.container);
       }
+    }, {
+      key: '_push',
 
       /**
        * draw all DOM elements on the screen
        * @private
        */
-    }, {
-      key: '_push',
       value: function _push() {
         this.wrapper = document.createElement('div');
         this.wrapper.className = 'vis-configuration-wrapper';
@@ -21605,13 +21692,13 @@ return /******/ (function(modules) { // webpackBootstrap
 
         this._showPopupIfNeeded();
       }
+    }, {
+      key: '_clean',
 
       /**
        * delete all DOM elements
        * @private
        */
-    }, {
-      key: '_clean',
       value: function _clean() {
         for (var i = 0; i < this.domElements.length; i++) {
           this.wrapper.removeChild(this.domElements[i]);
@@ -21625,6 +21712,8 @@ return /******/ (function(modules) { // webpackBootstrap
 
         this._removePopup();
       }
+    }, {
+      key: '_getValue',
 
       /**
        * get the value from the actualOptions if it exists
@@ -21632,8 +21721,6 @@ return /******/ (function(modules) { // webpackBootstrap
        * @returns {*}
        * @private
        */
-    }, {
-      key: '_getValue',
       value: function _getValue(path) {
         var base = this.moduleOptions;
         for (var i = 0; i < path.length; i++) {
@@ -21646,6 +21733,8 @@ return /******/ (function(modules) { // webpackBootstrap
         }
         return base;
       }
+    }, {
+      key: '_makeItem',
 
       /**
        * all option elements are wrapped in an item
@@ -21653,8 +21742,6 @@ return /******/ (function(modules) { // webpackBootstrap
        * @param domElements
        * @private
        */
-    }, {
-      key: '_makeItem',
       value: function _makeItem(path) {
         var _arguments = arguments,
             _this2 = this;
@@ -21683,20 +21770,22 @@ return /******/ (function(modules) { // webpackBootstrap
         }
         return 0;
       }
+    }, {
+      key: '_makeHeader',
 
       /**
        * header for major subjects
        * @param name
        * @private
        */
-    }, {
-      key: '_makeHeader',
       value: function _makeHeader(name) {
         var div = document.createElement('div');
         div.className = 'vis-configuration vis-config-header';
         div.innerHTML = name;
         this._makeItem([], div);
       }
+    }, {
+      key: '_makeLabel',
 
       /**
        * make a label, if it is an object label, it gets different styling.
@@ -21706,8 +21795,6 @@ return /******/ (function(modules) { // webpackBootstrap
        * @returns {HTMLElement}
        * @private
        */
-    }, {
-      key: '_makeLabel',
       value: function _makeLabel(name, path) {
         var objectLabel = arguments.length <= 2 || arguments[2] === undefined ? false : arguments[2];
 
@@ -21720,6 +21807,8 @@ return /******/ (function(modules) { // webpackBootstrap
         }
         return div;
       }
+    }, {
+      key: '_makeDropdown',
 
       /**
        * make a dropdown list for multiple possible string optoins
@@ -21728,8 +21817,6 @@ return /******/ (function(modules) { // webpackBootstrap
        * @param path
        * @private
        */
-    }, {
-      key: '_makeDropdown',
       value: function _makeDropdown(arr, value, path) {
         var select = document.createElement('select');
         select.className = 'vis-configuration vis-config-select';
@@ -21758,6 +21845,8 @@ return /******/ (function(modules) { // webpackBootstrap
         var label = this._makeLabel(path[path.length - 1], path);
         this._makeItem(path, label, select);
       }
+    }, {
+      key: '_makeRange',
 
       /**
        * make a range object for numeric options
@@ -21766,8 +21855,6 @@ return /******/ (function(modules) { // webpackBootstrap
        * @param path
        * @private
        */
-    }, {
-      key: '_makeRange',
       value: function _makeRange(arr, value, path) {
         var defaultValue = arr[0];
         var min = arr[1];
@@ -21828,6 +21915,8 @@ return /******/ (function(modules) { // webpackBootstrap
           this._setupPopup(popupString, itemIndex);
         }
       }
+    }, {
+      key: '_setupPopup',
 
       /**
        * prepare the popup
@@ -21835,15 +21924,13 @@ return /******/ (function(modules) { // webpackBootstrap
        * @param index
        * @private
        */
-    }, {
-      key: '_setupPopup',
       value: function _setupPopup(string, index) {
         var _this3 = this;
 
         if (this.initialized === true && this.allowCreation === true && this.popupCounter < this.popupLimit) {
-          var div = document.createElement("div");
-          div.id = "vis-configuration-popup";
-          div.className = "vis-configuration-popup";
+          var div = document.createElement('div');
+          div.id = 'vis-configuration-popup';
+          div.className = 'vis-configuration-popup';
           div.innerHTML = string;
           div.onclick = function () {
             _this3._removePopup();
@@ -21852,13 +21939,13 @@ return /******/ (function(modules) { // webpackBootstrap
           this.popupDiv = { html: div, index: index };
         }
       }
+    }, {
+      key: '_removePopup',
 
       /**
        * remove the popup from the dom
        * @private
        */
-    }, {
-      key: '_removePopup',
       value: function _removePopup() {
         if (this.popupDiv.html !== undefined) {
           this.popupDiv.html.parentNode.removeChild(this.popupDiv.html);
@@ -21867,21 +21954,21 @@ return /******/ (function(modules) { // webpackBootstrap
           this.popupDiv = {};
         }
       }
+    }, {
+      key: '_showPopupIfNeeded',
 
       /**
        * Show the popup if it is needed.
        * @private
        */
-    }, {
-      key: '_showPopupIfNeeded',
       value: function _showPopupIfNeeded() {
         var _this4 = this;
 
         if (this.popupDiv.html !== undefined) {
           var correspondingElement = this.domElements[this.popupDiv.index];
           var rect = correspondingElement.getBoundingClientRect();
-          this.popupDiv.html.style.left = rect.left + "px";
-          this.popupDiv.html.style.top = rect.top - 30 + "px"; // 30 is the height;
+          this.popupDiv.html.style.left = rect.left + 'px';
+          this.popupDiv.html.style.top = rect.top - 30 + 'px'; // 30 is the height;
           document.body.appendChild(this.popupDiv.html);
           this.popupDiv.hideTimeout = setTimeout(function () {
             _this4.popupDiv.html.style.opacity = 0;
@@ -21891,6 +21978,8 @@ return /******/ (function(modules) { // webpackBootstrap
           }, 1800);
         }
       }
+    }, {
+      key: '_makeCheckbox',
 
       /**
        * make a checkbox for boolean options.
@@ -21899,8 +21988,6 @@ return /******/ (function(modules) { // webpackBootstrap
        * @param path
        * @private
        */
-    }, {
-      key: '_makeCheckbox',
       value: function _makeCheckbox(defaultValue, value, path) {
         var checkbox = document.createElement('input');
         checkbox.type = 'checkbox';
@@ -21927,6 +22014,8 @@ return /******/ (function(modules) { // webpackBootstrap
         var label = this._makeLabel(path[path.length - 1], path);
         this._makeItem(path, label, checkbox);
       }
+    }, {
+      key: '_makeTextInput',
 
       /**
        * make a text input field for string options.
@@ -21935,8 +22024,6 @@ return /******/ (function(modules) { // webpackBootstrap
        * @param path
        * @private
        */
-    }, {
-      key: '_makeTextInput',
       value: function _makeTextInput(defaultValue, value, path) {
         var checkbox = document.createElement('input');
         checkbox.type = 'text';
@@ -21954,6 +22041,8 @@ return /******/ (function(modules) { // webpackBootstrap
         var label = this._makeLabel(path[path.length - 1], path);
         this._makeItem(path, label, checkbox);
       }
+    }, {
+      key: '_makeColorField',
 
       /**
        * make a color field with a color picker for color fields
@@ -21962,8 +22051,6 @@ return /******/ (function(modules) { // webpackBootstrap
        * @param path
        * @private
        */
-    }, {
-      key: '_makeColorField',
       value: function _makeColorField(arr, value, path) {
         var _this5 = this;
 
@@ -21986,6 +22073,8 @@ return /******/ (function(modules) { // webpackBootstrap
         var label = this._makeLabel(path[path.length - 1], path);
         this._makeItem(path, label, div);
       }
+    }, {
+      key: '_showColorPicker',
 
       /**
        * used by the color buttons to call the color picker.
@@ -21995,8 +22084,6 @@ return /******/ (function(modules) { // webpackBootstrap
        * @param path
        * @private
        */
-    }, {
-      key: '_showColorPicker',
       value: function _showColorPicker(value, div, path) {
         var _this6 = this;
 
@@ -22012,6 +22099,8 @@ return /******/ (function(modules) { // webpackBootstrap
           _this6._update(colorString, path);
         });
       }
+    }, {
+      key: '_handleObject',
 
       /**
        * parse an object and draw the correct items
@@ -22019,8 +22108,6 @@ return /******/ (function(modules) { // webpackBootstrap
        * @param path
        * @private
        */
-    }, {
-      key: '_handleObject',
       value: function _handleObject(obj) {
         var path = arguments.length <= 1 || arguments[1] === undefined ? [] : arguments[1];
         var checkOnly = arguments.length <= 2 || arguments[2] === undefined ? false : arguments[2];
@@ -22091,6 +22178,8 @@ return /******/ (function(modules) { // webpackBootstrap
         }
         return visibleInSet;
       }
+    }, {
+      key: '_handleArray',
 
       /**
        * handle the array type of option
@@ -22100,8 +22189,6 @@ return /******/ (function(modules) { // webpackBootstrap
        * @param path
        * @private
        */
-    }, {
-      key: '_handleArray',
       value: function _handleArray(arr, value, path) {
         if (typeof arr[0] === 'string' && arr[0] === 'color') {
           this._makeColorField(arr, value, path);
@@ -22120,6 +22207,8 @@ return /******/ (function(modules) { // webpackBootstrap
           }
         }
       }
+    }, {
+      key: '_update',
 
       /**
        * called to update the network with the new settings.
@@ -22127,13 +22216,11 @@ return /******/ (function(modules) { // webpackBootstrap
        * @param path
        * @private
        */
-    }, {
-      key: '_update',
       value: function _update(value, path) {
         var options = this._constructOptions(value, path);
 
         if (this.parent.body && this.parent.body.emitter && this.parent.body.emitter.emit) {
-          this.parent.body.emitter.emit("configChange", options);
+          this.parent.body.emitter.emit('configChange', options);
         }
         this.initialized = true;
         this.parent.setOptions(options);
@@ -22227,13 +22314,13 @@ return /******/ (function(modules) { // webpackBootstrap
       this._create();
     }
 
-    /**
-     * this inserts the colorPicker into a div from the DOM
-     * @param container
-     */
-
     _createClass(ColorPicker, [{
       key: 'insertTo',
+
+      /**
+       * this inserts the colorPicker into a div from the DOM
+       * @param container
+       */
       value: function insertTo(container) {
         if (this.hammer !== undefined) {
           this.hammer.destroy();
@@ -22245,18 +22332,18 @@ return /******/ (function(modules) { // webpackBootstrap
 
         this._setSize();
       }
+    }, {
+      key: 'setCallback',
 
       /**
        * the callback is executed on apply and save. Bind it to the application
        * @param callback
        */
-    }, {
-      key: 'setCallback',
       value: function setCallback(callback) {
         if (typeof callback === 'function') {
           this.updateCallback = callback;
         } else {
-          throw new Error("Function attempted to set as colorPicker callback is not a function.");
+          throw new Error('Function attempted to set as colorPicker callback is not a function.');
         }
       }
     }, {
@@ -22267,6 +22354,8 @@ return /******/ (function(modules) { // webpackBootstrap
           return htmlColors[color];
         }
       }
+    }, {
+      key: 'setColor',
 
       /**
        * Set the color of the colorPicker
@@ -22280,8 +22369,6 @@ return /******/ (function(modules) { // webpackBootstrap
        * @param color
        * @param setInitial
        */
-    }, {
-      key: 'setColor',
       value: function setColor(color) {
         var setInitial = arguments.length <= 1 || arguments[1] === undefined ? true : arguments[1];
 
@@ -22320,19 +22407,19 @@ return /******/ (function(modules) { // webpackBootstrap
 
         // set color
         if (rgba === undefined) {
-          throw new Error("Unknown color passed to the colorPicker. Supported are strings: rgb, hex, rgba. Object: rgb ({r:r,g:g,b:b,[a:a]}). Supplied: " + JSON.stringify(color));
+          throw new Error('Unknown color passed to the colorPicker. Supported are strings: rgb, hex, rgba. Object: rgb ({r:r,g:g,b:b,[a:a]}). Supplied: ' + JSON.stringify(color));
         } else {
           this._setColor(rgba, setInitial);
         }
       }
+    }, {
+      key: 'show',
 
       /**
        * this shows the color picker at a location. The hue circle is constructed once and stored.
        * @param x
        * @param y
        */
-    }, {
-      key: 'show',
       value: function show(x, y) {
         this.applied = false;
         this.frame.style.display = 'block';
@@ -22340,6 +22427,8 @@ return /******/ (function(modules) { // webpackBootstrap
         this.frame.style.left = x + 'px';
         this._generateHueCircle();
       }
+    }, {
+      key: '_hide',
 
       // ------------------------------------------ PRIVATE ----------------------------- //
 
@@ -22349,8 +22438,6 @@ return /******/ (function(modules) { // webpackBootstrap
        * @param storePrevious
        * @private
        */
-    }, {
-      key: '_hide',
       value: function _hide() {
         var storePrevious = arguments.length <= 0 || arguments[0] === undefined ? true : arguments[0];
 
@@ -22365,44 +22452,46 @@ return /******/ (function(modules) { // webpackBootstrap
 
         this.frame.style.display = 'none';
       }
+    }, {
+      key: '_save',
 
       /**
        * bound to the save button. Saves and hides.
        * @private
        */
-    }, {
-      key: '_save',
       value: function _save() {
         this.updateCallback(this.color);
         this.applied = false;
         this._hide();
       }
+    }, {
+      key: '_apply',
 
       /**
        * Bound to apply button. Saves but does not close. Is undone by the cancel button.
        * @private
        */
-    }, {
-      key: '_apply',
       value: function _apply() {
         this.applied = true;
         this.updateCallback(this.color);
         this._updatePicker(this.color);
       }
+    }, {
+      key: '_loadLast',
 
       /**
        * load the color from the previous session.
        * @private
        */
-    }, {
-      key: '_loadLast',
       value: function _loadLast() {
         if (this.previousColor !== undefined) {
           this.setColor(this.previousColor, false);
         } else {
-          alert("There is no last color to load...");
+          alert('There is no last color to load...');
         }
       }
+    }, {
+      key: '_setColor',
 
       /**
        * set the color, place the picker
@@ -22410,8 +22499,6 @@ return /******/ (function(modules) { // webpackBootstrap
        * @param setInitial
        * @private
        */
-    }, {
-      key: '_setColor',
       value: function _setColor(rgba) {
         var setInitial = arguments.length <= 1 || arguments[1] === undefined ? true : arguments[1];
 
@@ -22433,26 +22520,26 @@ return /******/ (function(modules) { // webpackBootstrap
 
         this._updatePicker(rgba);
       }
+    }, {
+      key: '_setOpacity',
 
       /**
        * bound to opacity control
        * @param value
        * @private
        */
-    }, {
-      key: '_setOpacity',
       value: function _setOpacity(value) {
         this.color.a = value / 100;
         this._updatePicker(this.color);
       }
+    }, {
+      key: '_setBrightness',
 
       /**
        * bound to brightness control
        * @param value
        * @private
        */
-    }, {
-      key: '_setBrightness',
       value: function _setBrightness(value) {
         var hsv = util.RGBToHSV(this.color.r, this.color.g, this.color.b);
         hsv.v = value / 100;
@@ -22461,14 +22548,14 @@ return /******/ (function(modules) { // webpackBootstrap
         this.color = rgba;
         this._updatePicker();
       }
+    }, {
+      key: '_updatePicker',
 
       /**
        * update the colorpicker. A black circle overlays the hue circle to mimic the brightness decreasing.
        * @param rgba
        * @private
        */
-    }, {
-      key: '_updatePicker',
       value: function _updatePicker() {
         var rgba = arguments.length <= 0 || arguments[0] === undefined ? this.color : arguments[0];
 
@@ -22495,13 +22582,13 @@ return /******/ (function(modules) { // webpackBootstrap
         this.initialColorDiv.style.backgroundColor = 'rgba(' + this.initialColor.r + ',' + this.initialColor.g + ',' + this.initialColor.b + ',' + this.initialColor.a + ')';
         this.newColorDiv.style.backgroundColor = 'rgba(' + this.color.r + ',' + this.color.g + ',' + this.color.b + ',' + this.color.a + ')';
       }
+    }, {
+      key: '_setSize',
 
       /**
        * used by create to set the size of the canvas.
        * @private
        */
-    }, {
-      key: '_setSize',
       value: function _setSize() {
         this.colorPickerCanvas.style.width = '100%';
         this.colorPickerCanvas.style.height = '100%';
@@ -22509,14 +22596,14 @@ return /******/ (function(modules) { // webpackBootstrap
         this.colorPickerCanvas.width = 289 * this.pixelRatio;
         this.colorPickerCanvas.height = 289 * this.pixelRatio;
       }
+    }, {
+      key: '_create',
 
       /**
        * create all dom elements
        * TODO: cleanup, lots of similar dom elements
        * @private
        */
-    }, {
-      key: '_create',
       value: function _create() {
         this.frame = document.createElement('div');
         this.frame.className = 'vis-color-picker';
@@ -22537,10 +22624,10 @@ return /******/ (function(modules) { // webpackBootstrap
           noCanvas.innerHTML = 'Error: your browser does not support HTML canvas';
           this.colorPickerCanvas.appendChild(noCanvas);
         } else {
-          var ctx = this.colorPickerCanvas.getContext("2d");
+          var ctx = this.colorPickerCanvas.getContext('2d');
           this.pixelRatio = (window.devicePixelRatio || 1) / (ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1);
 
-          this.colorPickerCanvas.getContext("2d").setTransform(this.pixelRatio, 0, 0, this.pixelRatio, 0, 0);
+          this.colorPickerCanvas.getContext('2d').setTransform(this.pixelRatio, 0, 0, this.pixelRatio, 0, 0);
         }
 
         this.colorPickerDiv.className = 'vis-color';
@@ -22589,39 +22676,39 @@ return /******/ (function(modules) { // webpackBootstrap
           me._setBrightness(this.value);
         };
 
-        this.brightnessLabel = document.createElement("div");
-        this.brightnessLabel.className = "vis-label vis-brightness";
+        this.brightnessLabel = document.createElement('div');
+        this.brightnessLabel.className = 'vis-label vis-brightness';
         this.brightnessLabel.innerHTML = 'brightness:';
 
-        this.opacityLabel = document.createElement("div");
-        this.opacityLabel.className = "vis-label vis-opacity";
+        this.opacityLabel = document.createElement('div');
+        this.opacityLabel.className = 'vis-label vis-opacity';
         this.opacityLabel.innerHTML = 'opacity:';
 
-        this.newColorDiv = document.createElement("div");
-        this.newColorDiv.className = "vis-new-color";
+        this.newColorDiv = document.createElement('div');
+        this.newColorDiv.className = 'vis-new-color';
         this.newColorDiv.innerHTML = 'new';
 
-        this.initialColorDiv = document.createElement("div");
-        this.initialColorDiv.className = "vis-initial-color";
+        this.initialColorDiv = document.createElement('div');
+        this.initialColorDiv.className = 'vis-initial-color';
         this.initialColorDiv.innerHTML = 'initial';
 
-        this.cancelButton = document.createElement("div");
-        this.cancelButton.className = "vis-button vis-cancel";
+        this.cancelButton = document.createElement('div');
+        this.cancelButton.className = 'vis-button vis-cancel';
         this.cancelButton.innerHTML = 'cancel';
         this.cancelButton.onclick = this._hide.bind(this, false);
 
-        this.applyButton = document.createElement("div");
-        this.applyButton.className = "vis-button vis-apply";
+        this.applyButton = document.createElement('div');
+        this.applyButton.className = 'vis-button vis-apply';
         this.applyButton.innerHTML = 'apply';
         this.applyButton.onclick = this._apply.bind(this);
 
-        this.saveButton = document.createElement("div");
-        this.saveButton.className = "vis-button vis-save";
+        this.saveButton = document.createElement('div');
+        this.saveButton.className = 'vis-button vis-save';
         this.saveButton.innerHTML = 'save';
         this.saveButton.onclick = this._save.bind(this);
 
-        this.loadButton = document.createElement("div");
-        this.loadButton.className = "vis-button vis-load";
+        this.loadButton = document.createElement('div');
+        this.loadButton.className = 'vis-button vis-load';
         this.loadButton.innerHTML = 'load last';
         this.loadButton.onclick = this._loadLast.bind(this);
 
@@ -22639,13 +22726,13 @@ return /******/ (function(modules) { // webpackBootstrap
         this.frame.appendChild(this.saveButton);
         this.frame.appendChild(this.loadButton);
       }
+    }, {
+      key: '_bindHammer',
 
       /**
        * bind hammer to the color picker
        * @private
        */
-    }, {
-      key: '_bindHammer',
       value: function _bindHammer() {
         var _this = this;
 
@@ -22670,13 +22757,13 @@ return /******/ (function(modules) { // webpackBootstrap
           _this._moveSelector(event);
         });
       }
+    }, {
+      key: '_generateHueCircle',
 
       /**
        * generate the hue circle. This is relatively heavy (200ms) and is done only once on the first time it is shown.
        * @private
        */
-    }, {
-      key: '_generateHueCircle',
       value: function _generateHueCircle() {
         if (this.generated === false) {
           var ctx = this.colorPickerCanvas.getContext('2d');
@@ -22718,6 +22805,8 @@ return /******/ (function(modules) { // webpackBootstrap
         }
         this.generated = true;
       }
+    }, {
+      key: '_moveSelector',
 
       /**
        * move the selector. This is called by hammer functions.
@@ -22725,8 +22814,6 @@ return /******/ (function(modules) { // webpackBootstrap
        * @param event
        * @private
        */
-    }, {
-      key: '_moveSelector',
       value: function _moveSelector(event) {
         var rect = this.colorPickerDiv.getBoundingClientRect();
         var left = event.center.x - rect.left;
@@ -22798,15 +22885,15 @@ return /******/ (function(modules) { // webpackBootstrap
       _classCallCheck(this, Validator);
     }
 
-    /**
-     * Main function to be called
-     * @param options
-     * @param subObject
-     * @returns {boolean}
-     */
-
     _createClass(Validator, null, [{
       key: 'validate',
+
+      /**
+       * Main function to be called
+       * @param options
+       * @param subObject
+       * @returns {boolean}
+       */
       value: function validate(options, referenceOptions, subObject) {
         errorFound = false;
         allOptions = referenceOptions;
@@ -22817,6 +22904,8 @@ return /******/ (function(modules) { // webpackBootstrap
         Validator.parse(options, usedOptions, []);
         return errorFound;
       }
+    }, {
+      key: 'parse',
 
       /**
        * Will traverse an object recursively and check every value
@@ -22824,8 +22913,6 @@ return /******/ (function(modules) { // webpackBootstrap
        * @param referenceOptions
        * @param path
        */
-    }, {
-      key: 'parse',
       value: function parse(options, referenceOptions, path) {
         for (var option in options) {
           if (options.hasOwnProperty(option)) {
@@ -22833,6 +22920,8 @@ return /******/ (function(modules) { // webpackBootstrap
           }
         }
       }
+    }, {
+      key: 'check',
 
       /**
        * Check every value. If the value is an object, call the parse function on that object.
@@ -22841,8 +22930,6 @@ return /******/ (function(modules) { // webpackBootstrap
        * @param referenceOptions
        * @param path
        */
-    }, {
-      key: 'check',
       value: function check(option, options, referenceOptions, path) {
         if (referenceOptions[option] === undefined && referenceOptions.__any__ === undefined) {
           Validator.getSuggestion(option, referenceOptions, path);
@@ -22864,6 +22951,8 @@ return /******/ (function(modules) { // webpackBootstrap
           }
         }
       }
+    }, {
+      key: 'checkFields',
 
       /**
        *
@@ -22874,8 +22963,6 @@ return /******/ (function(modules) { // webpackBootstrap
        * @param {String}  refOptionType       | This is the type object from the reference options
        * @param {Array}   path      | where in the object is the option
        */
-    }, {
-      key: 'checkFields',
       value: function checkFields(option, options, referenceOptions, referenceOption, refOptionObj, path) {
         var optionType = Validator.getType(options[option]);
         var refOptionType = refOptionObj[optionType];
@@ -22885,11 +22972,11 @@ return /******/ (function(modules) { // webpackBootstrap
             if (refOptionType.indexOf(options[option]) === -1) {
               console.log('%cInvalid option detected in "' + option + '".' + ' Allowed values are:' + Validator.print(refOptionType) + ' not "' + options[option] + '". ' + Validator.printLocation(path, option), printStyle);
               errorFound = true;
-            } else if (optionType === 'object' && referenceOption !== "__any__") {
+            } else if (optionType === 'object' && referenceOption !== '__any__') {
               path = util.copyAndExtendArray(path, option);
               Validator.parse(options[option], referenceOptions[referenceOption], path);
             }
-          } else if (optionType === 'object' && referenceOption !== "__any__") {
+          } else if (optionType === 'object' && referenceOption !== '__any__') {
             path = util.copyAndExtendArray(path, option);
             Validator.parse(options[option], referenceOptions[referenceOption], path);
           }
@@ -22962,6 +23049,8 @@ return /******/ (function(modules) { // webpackBootstrap
 
         errorFound = true;
       }
+    }, {
+      key: 'findInOptions',
 
       /**
        * traverse the options in search for a match.
@@ -22971,8 +23060,6 @@ return /******/ (function(modules) { // webpackBootstrap
        * @param recursive
        * @returns {{closestMatch: string, path: Array, distance: number}}
        */
-    }, {
-      key: 'findInOptions',
       value: function findInOptions(option, options, path) {
         var recursive = arguments.length <= 3 || arguments[3] === undefined ? false : arguments[3];
 
@@ -23032,8 +23119,10 @@ return /******/ (function(modules) { // webpackBootstrap
     }, {
       key: 'print',
       value: function print(options) {
-        return JSON.stringify(options).replace(/(\")|(\[)|(\])|(,"__type__")/g, "").replace(/(\,)/g, ', ');
+        return JSON.stringify(options).replace(/(\")|(\[)|(\])|(,"__type__")/g, '').replace(/(\,)/g, ', ');
       }
+    }, {
+      key: 'levenshteinDistance',
 
       // Compute the edit distance between the two given strings
       // http://en.wikibooks.org/wiki/Algorithm_Implementation/Strings/Levenshtein_distance#JavaScript
@@ -23043,8 +23132,6 @@ return /******/ (function(modules) { // webpackBootstrap
         The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
         THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
        */
-    }, {
-      key: 'levenshteinDistance',
       value: function levenshteinDistance(a, b) {
         if (a.length === 0) return b.length;
         if (b.length === 0) return a.length;
@@ -23323,7 +23410,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   'use strict';
 
-  var Emitter = __webpack_require__(13);
+  var Emitter = __webpack_require__(12);
   var Hammer = __webpack_require__(20);
   var moment = __webpack_require__(2);
   var util = __webpack_require__(1);
@@ -23539,7 +23626,7 @@ return /******/ (function(modules) { // webpackBootstrap
     if (this.linegraph.groups[groupId] !== undefined) {
       return this.linegraph.groups[groupId].getLegend(width, height);
     } else {
-      return "cannot find group:" + groupId;
+      return 'cannot find group:' + groupId;
     }
   };
 
@@ -23856,7 +23943,7 @@ return /******/ (function(modules) { // webpackBootstrap
         this.updateSVGheight = true;
         this.updateSVGheightOnResize = true;
       } else if (this.body.domProps.centerContainer.height !== undefined && options.graphHeight !== undefined) {
-        if (parseInt((options.graphHeight + '').replace("px", '')) < this.body.domProps.centerContainer.height) {
+        if (parseInt((options.graphHeight + '').replace('px', '')) < this.body.domProps.centerContainer.height) {
           this.updateSVGheight = true;
         }
       }
@@ -24210,7 +24297,7 @@ return /******/ (function(modules) { // webpackBootstrap
       this.svg.style.left = util.option.asSize(-this.props.width);
 
       // if the height of the graph is set as proportional, change the height of the svg
-      if ((this.options.height + '').indexOf("%") != -1 || this.updateSVGheightOnResize == true) {
+      if ((this.options.height + '').indexOf('%') != -1 || this.updateSVGheightOnResize == true) {
         this.updateSVGheight = true;
       }
     }
@@ -24302,7 +24389,7 @@ return /******/ (function(modules) { // webpackBootstrap
           return true;
         } else {
           if (this.COUNTER > MAX_CYCLES) {
-            console.log("WARNING: there may be an infinite loop in the _updateGraph emitter cycle.");
+            console.log('WARNING: there may be an infinite loop in the _updateGraph emitter cycle.');
           }
           this.COUNTER = 0;
           this.abortedGraphUpdate = false;
@@ -24701,7 +24788,7 @@ return /******/ (function(modules) { // webpackBootstrap
     this.conversionFactor = 1;
 
     this.setOptions(options);
-    this.width = Number(('' + this.options.width).replace("px", ""));
+    this.width = Number(('' + this.options.width).replace('px', ''));
     this.minWidth = this.width;
     this.height = this.linegraphSVG.offsetHeight;
     this.hidden = false;
@@ -24722,7 +24809,7 @@ return /******/ (function(modules) { // webpackBootstrap
     this._create();
 
     var me = this;
-    this.body.emitter.on("verticalDrag", function () {
+    this.body.emitter.on('verticalDrag', function () {
       me.dom.lineContainer.style.top = me.body.domProps.scrollTop + 'px';
     });
   }
@@ -24756,7 +24843,7 @@ return /******/ (function(modules) { // webpackBootstrap
       var fields = ['orientation', 'showMinorLabels', 'showMajorLabels', 'icons', 'majorLinesOffset', 'minorLinesOffset', 'labelOffsetX', 'labelOffsetY', 'iconWidth', 'width', 'visible', 'left', 'right', 'alignZeros'];
       util.selectiveExtend(fields, this.options, options);
 
-      this.minWidth = Number(('' + this.options.width).replace("px", ""));
+      this.minWidth = Number(('' + this.options.width).replace('px', ''));
 
       if (redraw === true && this.dom.frame) {
         this.hide();
@@ -24779,12 +24866,12 @@ return /******/ (function(modules) { // webpackBootstrap
     this.dom.lineContainer.style.position = 'relative';
 
     // create svg element for graph drawing.
-    this.svg = document.createElementNS('http://www.w3.org/2000/svg', "svg");
-    this.svg.style.position = "absolute";
+    this.svg = 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.svg.style.display = 'block';
     this.dom.frame.appendChild(this.svg);
   };
 
@@ -24898,11 +24985,11 @@ return /******/ (function(modules) { // webpackBootstrap
       this.hide();
     } else {
       this.show();
-      this.height = Number(this.linegraphSVG.style.height.replace("px", ""));
+      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;
+      this.width = this.options.visible === true ? Number(('' + this.options.width).replace('px', '')) : 0;
 
       var props = this.props;
       var frame = this.dom.frame;
@@ -24932,7 +25019,7 @@ return /******/ (function(modules) { // webpackBootstrap
         frame.style.left = '0';
         frame.style.bottom = '';
         frame.style.width = this.width + 'px';
-        frame.style.height = this.height + "px";
+        frame.style.height = this.height + 'px';
         this.props.width = this.body.domProps.left.width;
         this.props.height = this.body.domProps.left.height;
       } else {
@@ -24941,7 +25028,7 @@ return /******/ (function(modules) { // webpackBootstrap
         frame.style.bottom = '0';
         frame.style.left = '0';
         frame.style.width = this.width + 'px';
-        frame.style.height = this.height + "px";
+        frame.style.height = this.height + 'px';
         this.props.width = this.body.domProps.right.width;
         this.props.height = this.body.domProps.right.height;
       }
@@ -25065,7 +25152,7 @@ return /******/ (function(modules) { // webpackBootstrap
     // this will resize the yAxis to accommodate the labels.
     if (this.maxLabelSize > this.width - offset && this.options.visible === true) {
       this.width = this.maxLabelSize + offset;
-      this.options.width = this.width + "px";
+      this.options.width = this.width + 'px';
       DOMutil.cleanupElements(this.DOMelements.lines);
       DOMutil.cleanupElements(this.DOMelements.labels);
       this.redraw();
@@ -25073,17 +25160,17 @@ return /******/ (function(modules) { // webpackBootstrap
     }
     // this will resize the yAxis if it is too big for the labels.
     else if (this.maxLabelSize < this.width - offset && this.options.visible === true && this.width > this.minWidth) {
-        this.width = Math.max(this.minWidth, this.maxLabelSize + offset);
-        this.options.width = this.width + "px";
-        DOMutil.cleanupElements(this.DOMelements.lines);
-        DOMutil.cleanupElements(this.DOMelements.labels);
-        this.redraw();
-        resized = true;
-      } else {
-        DOMutil.cleanupElements(this.DOMelements.lines);
-        DOMutil.cleanupElements(this.DOMelements.labels);
-        resized = false;
-      }
+      this.width = Math.max(this.minWidth, this.maxLabelSize + offset);
+      this.options.width = this.width + 'px';
+      DOMutil.cleanupElements(this.DOMelements.lines);
+      DOMutil.cleanupElements(this.DOMelements.labels);
+      this.redraw();
+      resized = true;
+    } else {
+      DOMutil.cleanupElements(this.DOMelements.lines);
+      DOMutil.cleanupElements(this.DOMelements.labels);
+      resized = false;
+    }
 
     return resized;
   };
@@ -25114,10 +25201,10 @@ return /******/ (function(modules) { // webpackBootstrap
     label.innerHTML = text;
     if (orientation === 'left') {
       label.style.left = '-' + this.options.labelOffsetX + 'px';
-      label.style.textAlign = "right";
+      label.style.textAlign = 'right';
     } else {
       label.style.right = '-' + this.options.labelOffsetX + 'px';
-      label.style.textAlign = "left";
+      label.style.textAlign = 'left';
     }
 
     label.style.top = y - 0.5 * characterHeight + this.options.labelOffsetY + 'px';
@@ -25601,29 +25688,29 @@ return /******/ (function(modules) { // webpackBootstrap
     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", "vis-outline");
+    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', 'vis-outline');
 
     if (this.options.style == 'line') {
-      path = DOMutil.getSVGElement("path", JSONcontainer, SVGcontainer);
-      path.setAttributeNS(null, "class", this.className);
+      path = DOMutil.getSVGElement('path', JSONcontainer, SVGcontainer);
+      path.setAttributeNS(null, 'class', this.className);
       if (this.style !== undefined) {
-        path.setAttributeNS(null, "style", this.style);
+        path.setAttributeNS(null, 'style', this.style);
       }
 
-      path.setAttributeNS(null, "d", "M" + x + "," + y + " L" + (x + iconWidth) + "," + y + "");
+      path.setAttributeNS(null, 'd', 'M' + x + ',' + y + ' L' + (x + iconWidth) + ',' + y + '');
       if (this.options.shaded.enabled == true) {
-        fillPath = DOMutil.getSVGElement("path", JSONcontainer, SVGcontainer);
+        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));
+          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, 'd', 'M' + x + ',' + y + ' ' + 'L' + x + ',' + (y + fillHeight) + ' ' + 'L' + (x + iconWidth) + ',' + (y + fillHeight) + 'L' + (x + iconWidth) + ',' + y);
         }
-        fillPath.setAttributeNS(null, "class", this.className + " vis-icon-fill");
+        fillPath.setAttributeNS(null, 'class', this.className + ' vis-icon-fill');
       }
 
       if (this.options.drawPoints.enabled == true) {
@@ -25654,7 +25741,7 @@ return /******/ (function(modules) { // webpackBootstrap
    * @returns {{icon: HTMLElement, label: (group.content|*|string), orientation: (.options.yAxisOrientation|*)}}
    */
   GraphGroup.prototype.getLegend = function (iconWidth, iconHeight) {
-    var svg = document.createElementNS('http://www.w3.org/2000/svg', "svg");
+    var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
     this.drawIcon(0, 0.5 * iconHeight, [], svg, iconWidth, iconHeight);
     return { icon: svg, label: this.content, orientation: this.options.yAxisOrientation };
   };
@@ -25794,9 +25881,9 @@ return /******/ (function(modules) { // webpackBootstrap
         var path, d;
         var svgHeight = Number(framework.svg.style.height.replace('px', ''));
         path = DOMutil.getSVGElement('path', framework.svgElements, framework.svg);
-        path.setAttributeNS(null, "class", group.className);
+        path.setAttributeNS(null, 'class', group.className);
         if (group.style !== undefined) {
-          path.setAttributeNS(null, "style", group.style);
+          path.setAttributeNS(null, 'style', group.style);
         }
 
         // construct path from dataset
@@ -26375,16 +26462,16 @@ return /******/ (function(modules) { // webpackBootstrap
   Legend.prototype._create = function () {
     this.dom.frame = document.createElement('div');
     this.dom.frame.className = 'vis-legend';
-    this.dom.frame.style.position = "absolute";
-    this.dom.frame.style.top = "10px";
-    this.dom.frame.style.display = "block";
+    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 = 'vis-legend-text';
-    this.dom.textArea.style.position = "relative";
-    this.dom.textArea.style.top = "0px";
+    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 = 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';
@@ -26440,16 +26527,16 @@ return /******/ (function(modules) { // webpackBootstrap
       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.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.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';
@@ -26457,11 +26544,11 @@ return /******/ (function(modules) { // webpackBootstrap
       }
 
       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.top = 4 - Number(this.body.dom.center.style.top.replace('px', '')) + 'px';
         this.dom.frame.style.bottom = '';
       } else {
         var scrollableHeight = this.body.domProps.center.height - this.body.domProps.centerContainer.height;
-        this.dom.frame.style.bottom = 4 + scrollableHeight + Number(this.body.dom.center.style.top.replace("px", "")) + 'px';
+        this.dom.frame.style.bottom = 4 + scrollableHeight + Number(this.body.dom.center.style.top.replace('px', '')) + 'px';
         this.dom.frame.style.top = '';
       }
 
@@ -26861,23 +26948,11 @@ return /******/ (function(modules) { // webpackBootstrap
 
   var _modulesKamadaKawaiJs = __webpack_require__(112);
 
-  /**
-   * @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
-   */
-
   var _modulesKamadaKawaiJs2 = _interopRequireDefault(_modulesKamadaKawaiJs);
 
   __webpack_require__(114);
 
-  var Emitter = __webpack_require__(13);
+  var Emitter = __webpack_require__(12);
   var Hammer = __webpack_require__(20);
   var util = __webpack_require__(1);
   var DataSet = __webpack_require__(8);
@@ -26888,6 +26963,17 @@ return /******/ (function(modules) { // webpackBootstrap
   var Activator = __webpack_require__(40);
   var locales = __webpack_require__(118);
 
+  /**
+   * @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) {
     var _this = this;
 
@@ -26952,7 +27038,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
     // setting up all modules
     this.images = new Images(function () {
-      return _this.body.emitter.emit("_requestRedraw");
+      return _this.body.emitter.emit('_requestRedraw');
     }); // object with images
     this.groups = new _modulesGroups2['default'](); // object with groups
     this.canvas = new _modulesCanvas2['default'](this.body); // DOM handler
@@ -26968,8 +27054,8 @@ return /******/ (function(modules) { // webpackBootstrap
     this.nodesHandler = new _modulesNodesHandler2['default'](this.body, this.images, this.groups, this.layoutEngine); // Handle adding, deleting and updating of nodes as well as global options
     this.edgesHandler = new _modulesEdgesHandler2['default'](this.body, this.images, this.groups); // Handle adding, deleting and updating of edges as well as global options
 
-    this.body.modules["kamadaKawai"] = new _modulesKamadaKawaiJs2['default'](this.body, 150, 0.05); // Layouting algorithm.
-    this.body.modules["clustering"] = this.clustering;
+    this.body.modules['kamadaKawai'] = new _modulesKamadaKawaiJs2['default'](this.body, 150, 0.05); // Layouting algorithm.
+    this.body.modules['clustering'] = this.clustering;
 
     // create the DOM elements
     this.canvas._create();
@@ -27020,7 +27106,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
       // reload the settings of the nodes to apply changes in groups that are not referenced by pointer.
       if (options.groups !== undefined) {
-        this.body.emitter.emit("refreshNodes");
+        this.body.emitter.emit('refreshNodes');
       }
       // these two do not have options at the moment, here for completeness
       //this.view.setOptions(options.view);
@@ -27061,7 +27147,7 @@ return /******/ (function(modules) { // webpackBootstrap
           if (this.activator === undefined) {
             this.activator = new Activator(this.canvas.frame);
             this.activator.on('change', function () {
-              _this2.body.emitter.emit("activate");
+              _this2.body.emitter.emit('activate');
             });
           }
         } else {
@@ -27069,15 +27155,15 @@ return /******/ (function(modules) { // webpackBootstrap
             this.activator.destroy();
             delete this.activator;
           }
-          this.body.emitter.emit("activate");
+          this.body.emitter.emit('activate');
         }
       } else {
-        this.body.emitter.emit("activate");
+        this.body.emitter.emit('activate');
       }
 
       this.canvas.setSize();
       // start the physics simulation. Can be safely called multiple times.
-      this.body.emitter.emit("startSimulation");
+      this.body.emitter.emit('startSimulation');
     }
   };
 
@@ -27115,23 +27201,23 @@ return /******/ (function(modules) { // webpackBootstrap
     var _this3 = this;
 
     // this event will trigger a rebuilding of the cache everything. Used when nodes or edges have been added or removed.
-    this.body.emitter.on("_dataChanged", function () {
+    this.body.emitter.on('_dataChanged', function () {
       // update shortcut lists
       _this3._updateVisibleIndices();
       _this3.physics.updatePhysicsData();
-      _this3.body.emitter.emit("_requestRedraw");
+      _this3.body.emitter.emit('_requestRedraw');
       // call the dataUpdated event because the only difference between the two is the updating of the indices
-      _this3.body.emitter.emit("_dataUpdated");
+      _this3.body.emitter.emit('_dataUpdated');
     });
 
     // this is called when options of EXISTING nodes or edges have changed.
-    this.body.emitter.on("_dataUpdated", function () {
+    this.body.emitter.on('_dataUpdated', function () {
       // update values
       _this3._updateValueRange(_this3.body.nodes);
       _this3._updateValueRange(_this3.body.edges);
       // start simulation (can be called safely, even if already running)
-      _this3.body.emitter.emit("startSimulation");
-      _this3.body.emitter.emit("_requestRedraw");
+      _this3.body.emitter.emit('startSimulation');
+      _this3.body.emitter.emit('_requestRedraw');
     });
   };
 
@@ -27147,8 +27233,8 @@ return /******/ (function(modules) { // webpackBootstrap
    */
   Network.prototype.setData = function (data) {
     // reset the physics engine.
-    this.body.emitter.emit("resetPhysics");
-    this.body.emitter.emit("_resetData");
+    this.body.emitter.emit('resetPhysics');
+    this.body.emitter.emit('_resetData');
 
     // unselect all to ensure no selections from old data are carried over.
     this.selectionHandler.unselectAll();
@@ -27178,13 +27264,13 @@ return /******/ (function(modules) { // webpackBootstrap
     }
 
     // emit change in data
-    this.body.emitter.emit("_dataChanged");
+    this.body.emitter.emit('_dataChanged');
 
     // emit data loaded
-    this.body.emitter.emit("_dataLoaded");
+    this.body.emitter.emit('_dataLoaded');
 
     // find a stable position or start animating to a stable position
-    this.body.emitter.emit("initPhysics");
+    this.body.emitter.emit('initPhysics');
   };
 
   /**
@@ -27194,7 +27280,7 @@ return /******/ (function(modules) { // webpackBootstrap
    * network = null;
    */
   Network.prototype.destroy = function () {
-    this.body.emitter.emit("destroy");
+    this.body.emitter.emit('destroy');
     // clear events
     this.body.emitter.off();
     this.off();
@@ -27319,7 +27405,7 @@ return /******/ (function(modules) { // webpackBootstrap
     return this.manipulation.editNode.apply(this.manipulation, arguments);
   };
   Network.prototype.editNodeMode = function () {
-    console.log("Deprecated: Please use editNode instead of editNodeMode.");return this.manipulation.editNode.apply(this.manipulation, arguments);
+    console.log('Deprecated: Please use editNode instead of editNodeMode.');return this.manipulation.editNode.apply(this.manipulation, arguments);
   };
   Network.prototype.addEdgeMode = function () {
     return this.manipulation.addEdgeMode.apply(this.manipulation, arguments);
@@ -27490,7 +27576,7 @@ return /******/ (function(modules) { // webpackBootstrap
     _createClass(Groups, [{
       key: "setOptions",
       value: function setOptions(options) {
-        var optionFields = ['useDefaultGroups'];
+        var optionFields = ["useDefaultGroups"];
 
         if (options !== undefined) {
           for (var groupName in options) {
@@ -27503,16 +27589,18 @@ return /******/ (function(modules) { // webpackBootstrap
           }
         }
       }
+    }, {
+      key: "clear",
 
       /**
        * Clear all groups
        */
-    }, {
-      key: "clear",
       value: function clear() {
         this.groups = {};
         this.groupsArray = [];
       }
+    }, {
+      key: "get",
 
       /**
        * get group options of a groupname. If groupname is not found, a new group
@@ -27520,8 +27608,6 @@ return /******/ (function(modules) { // webpackBootstrap
        * @param {*} groupname        Can be a number, string, Date, etc.
        * @return {Object} group      The created group, containing all group options
        */
-    }, {
-      key: "get",
       value: function get(groupname) {
         var group = this.groups[groupname];
         if (group === undefined) {
@@ -27544,6 +27630,8 @@ return /******/ (function(modules) { // webpackBootstrap
 
         return group;
       }
+    }, {
+      key: "add",
 
       /**
        * Add a custom group style
@@ -27552,8 +27640,6 @@ return /******/ (function(modules) { // webpackBootstrap
        *                             backgroundColor, etc.
        * @return {Object} group      The created group object
        */
-    }, {
-      key: "add",
       value: function add(groupName, style) {
         this.groups[groupName] = style;
         this.groupsArray.push(groupName);
@@ -27764,14 +27850,14 @@ return /******/ (function(modules) { // webpackBootstrap
           }
         }
       }
+    }, {
+      key: 'setData',
 
       /**
        * Set a data set with nodes for the network
        * @param {Array | DataSet | DataView} nodes         The data containing the nodes.
        * @private
        */
-    }, {
-      key: 'setData',
       value: function setData(nodes) {
         var _this3 = this;
 
@@ -27815,17 +27901,17 @@ return /******/ (function(modules) { // webpackBootstrap
         }
 
         if (doNotEmit === false) {
-          this.body.emitter.emit("_dataChanged");
+          this.body.emitter.emit('_dataChanged');
         }
       }
+    }, {
+      key: 'add',
 
       /**
        * Add nodes
        * @param {Number[] | String[]} ids
        * @private
        */
-    }, {
-      key: 'add',
       value: function add(ids) {
         var doNotEmit = arguments.length <= 1 || arguments[1] === undefined ? false : arguments[1];
 
@@ -27842,17 +27928,17 @@ return /******/ (function(modules) { // webpackBootstrap
         this.layoutEngine.positionInitially(newNodes);
 
         if (doNotEmit === false) {
-          this.body.emitter.emit("_dataChanged");
+          this.body.emitter.emit('_dataChanged');
         }
       }
+    }, {
+      key: 'update',
 
       /**
        * Update existing nodes, or create them when not yet existing
        * @param {Number[] | String[]} ids
        * @private
        */
-    }, {
-      key: 'update',
       value: function update(ids, changedData) {
         var nodes = this.body.nodes;
         var dataChanged = false;
@@ -27871,19 +27957,19 @@ return /******/ (function(modules) { // webpackBootstrap
           }
         }
         if (dataChanged === true) {
-          this.body.emitter.emit("_dataChanged");
+          this.body.emitter.emit('_dataChanged');
         } else {
-          this.body.emitter.emit("_dataUpdated");
+          this.body.emitter.emit('_dataUpdated');
         }
       }
+    }, {
+      key: 'remove',
 
       /**
        * Remove existing nodes. If nodes do not exist, the method will just ignore it.
        * @param {Number[] | String[]} ids
        * @private
        */
-    }, {
-      key: 'remove',
       value: function remove(ids) {
         var nodes = this.body.nodes;
 
@@ -27892,16 +27978,16 @@ return /******/ (function(modules) { // webpackBootstrap
           delete nodes[id];
         }
 
-        this.body.emitter.emit("_dataChanged");
+        this.body.emitter.emit('_dataChanged');
       }
+    }, {
+      key: 'create',
 
       /**
        * create a node
        * @param properties
        * @param constructorClass
        */
-    }, {
-      key: 'create',
       value: function create(properties) {
         var constructorClass = arguments.length <= 1 || arguments[1] === undefined ? _componentsNode2['default'] : arguments[1];
 
@@ -27928,14 +28014,14 @@ return /******/ (function(modules) { // webpackBootstrap
           }
         }
       }
+    }, {
+      key: 'getPositions',
 
       /**
        * Returns the positions of the nodes.
        * @param ids  --> optional, can be array of nodeIds, can be string
        * @returns {{}}
        */
-    }, {
-      key: 'getPositions',
       value: function getPositions(ids) {
         var dataArray = {};
         if (ids !== undefined) {
@@ -27960,12 +28046,12 @@ return /******/ (function(modules) { // webpackBootstrap
         }
         return dataArray;
       }
+    }, {
+      key: 'storePositions',
 
       /**
        * Load the XY positions of the nodes into the dataset.
        */
-    }, {
-      key: 'storePositions',
       value: function storePositions() {
         // todo: add support for clusters and hierarchical.
         var dataArray = [];
@@ -27981,27 +28067,27 @@ return /******/ (function(modules) { // webpackBootstrap
         }
         dataset.update(dataArray);
       }
+    }, {
+      key: 'getBoundingBox',
 
       /**
        * get the bounding box of a node.
        * @param nodeId
        * @returns {j|*}
        */
-    }, {
-      key: 'getBoundingBox',
       value: function getBoundingBox(nodeId) {
         if (this.body.nodes[nodeId] !== undefined) {
           return this.body.nodes[nodeId].shape.boundingBox;
         }
       }
+    }, {
+      key: 'getConnectedNodes',
 
       /**
        * Get the Ids of nodes connected to this node.
        * @param nodeId
        * @returns {Array}
        */
-    }, {
-      key: 'getConnectedNodes',
       value: function getConnectedNodes(nodeId) {
         var nodeList = [];
         if (this.body.nodes[nodeId] !== undefined) {
@@ -28026,14 +28112,14 @@ return /******/ (function(modules) { // webpackBootstrap
         }
         return nodeList;
       }
+    }, {
+      key: 'getConnectedEdges',
 
       /**
        * Get the ids of the edges connected to this node.
        * @param nodeId
        * @returns {*}
        */
-    }, {
-      key: 'getConnectedEdges',
       value: function getConnectedEdges(nodeId) {
         var edgeList = [];
         if (this.body.nodes[nodeId] !== undefined) {
@@ -28042,10 +28128,12 @@ return /******/ (function(modules) { // webpackBootstrap
             edgeList.push(node.edges[i].id);
           }
         } else {
-          console.log("NodeId provided for getConnectedEdges does not exist. Provided: ", nodeId);
+          console.log('NodeId provided for getConnectedEdges does not exist. Provided: ', nodeId);
         }
         return edgeList;
       }
+    }, {
+      key: 'moveNode',
 
       /**
        * Move a node.
@@ -28053,8 +28141,6 @@ return /******/ (function(modules) { // webpackBootstrap
        * @param Number x
        * @param Number y
        */
-    }, {
-      key: 'moveNode',
       value: function moveNode(nodeId, x, y) {
         var _this4 = this;
 
@@ -28062,10 +28148,10 @@ return /******/ (function(modules) { // webpackBootstrap
           this.body.nodes[nodeId].x = Number(x);
           this.body.nodes[nodeId].y = Number(y);
           setTimeout(function () {
-            _this4.body.emitter.emit("startSimulation");
+            _this4.body.emitter.emit('startSimulation');
           }, 0);
         } else {
-          console.log("Node id supplied to moveNode does not exist. Provided: ", nodeId);
+          console.log('Node id supplied to moveNode does not exist. Provided: ', nodeId);
         }
       }
     }]);
@@ -28211,39 +28297,39 @@ return /******/ (function(modules) { // webpackBootstrap
       this.setOptions(options);
     }
 
-    /**
-     * Attach a edge to the node
-     * @param {Edge} edge
-     */
-
     _createClass(Node, [{
       key: 'attachEdge',
+
+      /**
+       * Attach a edge to the node
+       * @param {Edge} edge
+       */
       value: function attachEdge(edge) {
         if (this.edges.indexOf(edge) === -1) {
           this.edges.push(edge);
         }
       }
+    }, {
+      key: 'detachEdge',
 
       /**
        * Detach a edge from the node
        * @param {Edge} edge
        */
-    }, {
-      key: 'detachEdge',
       value: function detachEdge(edge) {
         var index = this.edges.indexOf(edge);
         if (index != -1) {
           this.edges.splice(index, 1);
         }
       }
+    }, {
+      key: 'setOptions',
 
       /**
        * Set or overwrite options for the node
        * @param {Object} options an object with options
        * @param {Object} constants  and object with default, global options
        */
-    }, {
-      key: 'setOptions',
       value: function setOptions(options) {
         var currentShape = this.options.shape;
         if (!options) {
@@ -28255,7 +28341,7 @@ return /******/ (function(modules) { // webpackBootstrap
         }
 
         if (this.id === undefined) {
-          throw "Node must have an id";
+          throw 'Node must have an id';
         }
 
         // set these options locally
@@ -28297,7 +28383,7 @@ return /******/ (function(modules) { // webpackBootstrap
           if (this.imagelist) {
             this.imageObj = this.imagelist.load(this.options.image, this.options.brokenImage, this.id);
           } else {
-            throw "No imagelist provided";
+            throw 'No imagelist provided';
           }
         }
 
@@ -28309,13 +28395,6 @@ return /******/ (function(modules) { // webpackBootstrap
         }
         return false;
       }
-
-      /**
-       * This process all possible shorthands in the new options and makes sure that the parentOptions are fully defined.
-       * Static so it can also be used by the handler.
-       * @param parentOptions
-       * @param newOptions
-       */
     }, {
       key: 'updateLabelModule',
       value: function updateLabelModule() {
@@ -28384,48 +28463,50 @@ return /******/ (function(modules) { // webpackBootstrap
         }
         this._reset();
       }
+    }, {
+      key: 'select',
 
       /**
        * select this node
        */
-    }, {
-      key: 'select',
       value: function select() {
         this.selected = true;
         this._reset();
       }
+    }, {
+      key: 'unselect',
 
       /**
        * unselect this node
        */
-    }, {
-      key: 'unselect',
       value: function unselect() {
         this.selected = false;
         this._reset();
       }
+    }, {
+      key: '_reset',
 
       /**
        * Reset the calculated size of the node, forces it to recalculate its size
        * @private
        */
-    }, {
-      key: '_reset',
       value: function _reset() {
         this.shape.width = undefined;
         this.shape.height = undefined;
       }
+    }, {
+      key: 'getTitle',
 
       /**
        * get the title of this node.
        * @return {string} title    The title of the node, or undefined when no title
        *                           has been set.
        */
-    }, {
-      key: 'getTitle',
       value: function getTitle() {
         return this.options.title;
       }
+    }, {
+      key: 'distanceToBorder',
 
       /**
        * Calculate the distance to the border of the Node
@@ -28433,41 +28514,41 @@ return /******/ (function(modules) { // webpackBootstrap
        * @param {Number} angle        Angle in radians
        * @returns {number} distance   Distance to the border in pixels
        */
-    }, {
-      key: 'distanceToBorder',
       value: function distanceToBorder(ctx, angle) {
         return this.shape.distanceToBorder(ctx, angle);
       }
+    }, {
+      key: 'isFixed',
 
       /**
        * Check if this node has a fixed x and y position
        * @return {boolean}      true if fixed, false if not
        */
-    }, {
-      key: 'isFixed',
       value: function isFixed() {
         return this.options.fixed.x && this.options.fixed.y;
       }
+    }, {
+      key: 'isSelected',
 
       /**
        * check if this node is selecte
        * @return {boolean} selected   True if node is selected, else false
        */
-    }, {
-      key: 'isSelected',
       value: function isSelected() {
         return this.selected;
       }
+    }, {
+      key: 'getValue',
 
       /**
        * Retrieve the value of the node. Can be undefined
        * @return {Number} value
        */
-    }, {
-      key: 'getValue',
       value: function getValue() {
         return this.options.value;
       }
+    }, {
+      key: 'setValueRange',
 
       /**
        * Adjust the value range of the node. The node will adjust it's size
@@ -28475,8 +28556,6 @@ return /******/ (function(modules) { // webpackBootstrap
        * @param {Number} min
        * @param {Number} max
        */
-    }, {
-      key: 'setValueRange',
       value: function setValueRange(min, max, total) {
         if (this.options.value !== undefined) {
           var scale = this.options.scaling.customScalingFunction(min, max, total, this.options.value);
@@ -28491,61 +28570,68 @@ return /******/ (function(modules) { // webpackBootstrap
           this.options.font.size = this.baseFontSize;
         }
       }
+    }, {
+      key: 'draw',
 
       /**
        * Draw this node in the given canvas
        * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
        * @param {CanvasRenderingContext2D}   ctx
        */
-    }, {
-      key: 'draw',
       value: function draw(ctx) {
         this.shape.draw(ctx, this.x, this.y, this.selected, this.hover);
       }
+    }, {
+      key: 'updateBoundingBox',
 
       /**
        * Update the bounding box of the shape
        */
-    }, {
-      key: 'updateBoundingBox',
       value: function updateBoundingBox(ctx) {
         this.shape.updateBoundingBox(this.x, this.y, ctx);
       }
+    }, {
+      key: 'resize',
 
       /**
        * 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
        */
-    }, {
-      key: 'resize',
       value: function resize(ctx) {
         this.shape.resize(ctx, this.selected);
       }
+    }, {
+      key: 'isOverlappingWith',
 
       /**
        * 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
        */
-    }, {
-      key: 'isOverlappingWith',
       value: function isOverlappingWith(obj) {
         return this.shape.left < obj.right && this.shape.left + this.shape.width > obj.left && this.shape.top < obj.bottom && this.shape.top + this.shape.height > obj.top;
       }
+    }, {
+      key: 'isBoundingBoxOverlappingWith',
 
       /**
        * 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
        */
-    }, {
-      key: 'isBoundingBoxOverlappingWith',
       value: function isBoundingBoxOverlappingWith(obj) {
         return this.shape.boundingBox.left < obj.right && this.shape.boundingBox.right > obj.left && this.shape.boundingBox.top < obj.bottom && this.shape.boundingBox.bottom > obj.top;
       }
     }], [{
       key: 'parseOptions',
+
+      /**
+       * This process all possible shorthands in the new options and makes sure that the parentOptions are fully defined.
+       * Static so it can also be used by the handler.
+       * @param parentOptions
+       * @param newOptions
+       */
       value: function parseOptions(parentOptions, newOptions) {
         var allowDeletion = arguments.length <= 2 || arguments[2] === undefined ? false : arguments[2];
 
@@ -28683,16 +28769,16 @@ return /******/ (function(modules) { // webpackBootstrap
         // draw text
         this._drawText(ctx, selected, x, y, baseline);
       }
+    }, {
+      key: '_drawBackground',
 
       /**
        * Draws the label background
        * @param {CanvasRenderingContext2D} ctx
        * @private
        */
-    }, {
-      key: '_drawBackground',
       value: function _drawBackground(ctx) {
-        if (this.fontOptions.background !== undefined && this.fontOptions.background !== "none") {
+        if (this.fontOptions.background !== undefined && this.fontOptions.background !== 'none') {
           ctx.fillStyle = this.fontOptions.background;
 
           var lineMargin = 2;
@@ -28713,6 +28799,8 @@ return /******/ (function(modules) { // webpackBootstrap
           }
         }
       }
+    }, {
+      key: '_drawText',
 
       /**
        *
@@ -28721,8 +28809,6 @@ return /******/ (function(modules) { // webpackBootstrap
        * @param baseline
        * @private
        */
-    }, {
-      key: '_drawText',
       value: function _drawText(ctx, selected, x, y) {
         var baseline = arguments.length <= 4 || arguments[4] === undefined ? 'middle' : arguments[4];
 
@@ -28742,15 +28828,15 @@ return /******/ (function(modules) { // webpackBootstrap
         var fontColor = _getColor22[0];
         var strokeColor = _getColor22[1];
 
-        // configure context for drawing the text
-
         var _setAlignment2 = this._setAlignment(ctx, x, yLine, baseline);
 
         var _setAlignment22 = _slicedToArray(_setAlignment2, 2);
 
         x = _setAlignment22[0];
         yLine = _setAlignment22[1];
-        ctx.font = (selected && this.nodeOptions.labelHighlightBold ? 'bold ' : '') + fontSize + "px " + this.fontOptions.face;
+
+        // configure context for drawing the text
+        ctx.font = (selected && this.nodeOptions.labelHighlightBold ? 'bold ' : '') + fontSize + 'px ' + this.fontOptions.face;
         ctx.fillStyle = fontColor;
         ctx.textAlign = 'center';
 
@@ -28784,17 +28870,19 @@ return /******/ (function(modules) { // webpackBootstrap
             ctx.textBaseline = 'alphabetic';
             yLine -= 2 * lineMargin; // distance from edge, required because we use alphabetic. Alphabetic has less difference between browsers
           } else if (this.fontOptions.align === 'bottom') {
-              ctx.textBaseline = 'hanging';
-              yLine += 2 * lineMargin; // distance from edge, required because we use hanging. Hanging has less difference between browsers
-            } else {
-                ctx.textBaseline = 'middle';
-              }
+            ctx.textBaseline = 'hanging';
+            yLine += 2 * lineMargin; // distance from edge, required because we use hanging. Hanging has less difference between browsers
+          } else {
+            ctx.textBaseline = 'middle';
+          }
         } else {
           ctx.textBaseline = baseline;
         }
 
         return [x, yLine];
       }
+    }, {
+      key: '_getColor',
 
       /**
        * fade in when relative scale is between threshold and threshold - 1.
@@ -28804,8 +28892,6 @@ return /******/ (function(modules) { // webpackBootstrap
        * @returns {*[]}
        * @private
        */
-    }, {
-      key: '_getColor',
       value: function _getColor(viewFontSize) {
         var fontColor = this.fontOptions.color || '#000000';
         var strokeColor = this.fontOptions.strokeColor || '#ffffff';
@@ -28816,6 +28902,8 @@ return /******/ (function(modules) { // webpackBootstrap
         }
         return [fontColor, strokeColor];
       }
+    }, {
+      key: 'getTextSize',
 
       /**
        *
@@ -28823,8 +28911,6 @@ return /******/ (function(modules) { // webpackBootstrap
        * @param selected
        * @returns {{width: number, height: number}}
        */
-    }, {
-      key: 'getTextSize',
       value: function getTextSize(ctx) {
         var selected = arguments.length <= 1 || arguments[1] === undefined ? false : arguments[1];
 
@@ -28835,6 +28921,8 @@ return /******/ (function(modules) { // webpackBootstrap
         };
         return size;
       }
+    }, {
+      key: 'calculateLabelSize',
 
       /**
        *
@@ -28844,8 +28932,6 @@ return /******/ (function(modules) { // webpackBootstrap
        * @param y
        * @param baseline
        */
-    }, {
-      key: 'calculateLabelSize',
       value: function calculateLabelSize(ctx, selected) {
         var x = arguments.length <= 2 || arguments[2] === undefined ? 0 : arguments[2];
         var y = arguments.length <= 3 || arguments[3] === undefined ? 0 : arguments[3];
@@ -28858,7 +28944,7 @@ return /******/ (function(modules) { // webpackBootstrap
         this.size.left = x - this.size.width * 0.5;
         this.size.top = y - this.size.height * 0.5;
         this.size.yLine = y + (1 - this.lineCount) * 0.5 * this.fontOptions.size;
-        if (baseline === "hanging") {
+        if (baseline === 'hanging') {
           this.size.top += 0.5 * this.fontOptions.size;
           this.size.top += 4; // distance from node, required because we use hanging. Hanging has less difference between browsers
           this.size.yLine += 4; // distance from node
@@ -28866,6 +28952,8 @@ return /******/ (function(modules) { // webpackBootstrap
 
         this.labelDirty = false;
       }
+    }, {
+      key: '_processLabel',
 
       /**
        * This calculates the width as well as explodes the label string and calculates the amount of lines.
@@ -28874,8 +28962,6 @@ return /******/ (function(modules) { // webpackBootstrap
        * @returns {number}
        * @private
        */
-    }, {
-      key: '_processLabel',
       value: function _processLabel(ctx, selected) {
         var width = 0;
         var lines = [''];
@@ -28883,7 +28969,7 @@ return /******/ (function(modules) { // webpackBootstrap
         if (this.nodeOptions.label !== undefined) {
           lines = String(this.nodeOptions.label).split('\n');
           lineCount = lines.length;
-          ctx.font = (selected && this.nodeOptions.labelHighlightBold ? 'bold ' : '') + this.fontOptions.size + "px " + this.fontOptions.face;
+          ctx.font = (selected && this.nodeOptions.labelHighlightBold ? 'bold ' : '') + this.fontOptions.size + 'px ' + this.fontOptions.face;
           width = ctx.measureText(lines[0]).width;
           for (var i = 1; i < lineCount; i++) {
             var lineWidth = ctx.measureText(lines[i]).width;
@@ -28901,8 +28987,8 @@ return /******/ (function(modules) { // webpackBootstrap
         var allowDeletion = arguments.length <= 2 || arguments[2] === undefined ? false : arguments[2];
 
         if (typeof newOptions.font === 'string') {
-          var newOptionsArray = newOptions.font.split(" ");
-          parentOptions.size = newOptionsArray[0].replace("px", '');
+          var newOptionsArray = newOptions.font.split(' ');
+          parentOptions.size = newOptionsArray[0].replace('px', '');
           parentOptions.face = newOptionsArray[1];
           parentOptions.color = newOptionsArray[2];
         } else if (typeof newOptions.font === 'object') {
@@ -29101,7 +29187,7 @@ return /******/ (function(modules) { // webpackBootstrap
             }
             ctx.setLineDash(dashes);
           } else {
-            console.warn("setLineDash is not supported in this browser. The dashed borders cannot be used.");
+            console.warn('setLineDash is not supported in this browser. The dashed borders cannot be used.');
             this.options.shapeProperties.borderDashes = false;
           }
         }
@@ -29113,7 +29199,7 @@ return /******/ (function(modules) { // webpackBootstrap
           if (ctx.setLineDash !== undefined) {
             ctx.setLineDash([0]);
           } else {
-            console.warn("setLineDash is not supported in this browser. The dashed borders cannot be used.");
+            console.warn('setLineDash is not supported in this browser. The dashed borders cannot be used.');
             this.options.shapeProperties.borderDashes = false;
           }
         }
@@ -29259,6 +29345,8 @@ return /******/ (function(modules) { // webpackBootstrap
           this.imageObj = imageObj;
         }
       }
+    }, {
+      key: '_resizeImage',
 
       /**
        * This function resizes the image by the options size when the image has not yet loaded. If the image has loaded, we
@@ -29266,8 +29354,6 @@ return /******/ (function(modules) { // webpackBootstrap
        *
        * @private
        */
-    }, {
-      key: '_resizeImage',
       value: function _resizeImage() {
         var force = false;
         if (!this.imageObj.width || !this.imageObj.height) {
@@ -30025,12 +30111,12 @@ return /******/ (function(modules) { // webpackBootstrap
         var iconSize = Number(this.options.icon.size);
 
         if (this.options.icon.code !== undefined) {
-          ctx.font = (selected ? "bold " : "") + iconSize + "px " + this.options.icon.face;
+          ctx.font = (selected ? 'bold ' : '') + iconSize + 'px ' + this.options.icon.face;
 
           // draw icon
-          ctx.fillStyle = this.options.icon.color || "black";
-          ctx.textAlign = "center";
-          ctx.textBaseline = "middle";
+          ctx.fillStyle = this.options.icon.color || 'black';
+          ctx.textAlign = 'center';
+          ctx.textBaseline = 'middle';
 
           // draw shadow if enabled
           this.enableShadow(ctx);
@@ -30568,7 +30654,7 @@ return /******/ (function(modules) { // webpackBootstrap
         },
         smooth: {
           enabled: true,
-          type: "dynamic",
+          type: 'dynamic',
           forceDirection: 'none',
           roundness: 0.5
         },
@@ -30588,7 +30674,7 @@ return /******/ (function(modules) { // webpackBootstrap
         var _this2 = this;
 
         // this allows external modules to force all dynamic curves to turn static.
-        this.body.emitter.on("_forceDisableDynamicCurves", function (type) {
+        this.body.emitter.on('_forceDisableDynamicCurves', function (type) {
           if (type === 'dynamic') {
             type = 'continuous';
           }
@@ -30616,20 +30702,20 @@ return /******/ (function(modules) { // webpackBootstrap
             }
           }
           if (emitChange === true) {
-            _this2.body.emitter.emit("_dataChanged");
+            _this2.body.emitter.emit('_dataChanged');
           }
         });
 
         // this is called when options of EXISTING nodes or edges have changed.
-        this.body.emitter.on("_dataUpdated", function () {
+        this.body.emitter.on('_dataUpdated', function () {
           _this2.reconnectEdges();
           _this2.markAllEdgesAsDirty();
         });
 
         // refresh the edges. Used when reverting from hierarchical layout
-        this.body.emitter.on("refreshEdges", this.refresh.bind(this));
-        this.body.emitter.on("refresh", this.refresh.bind(this));
-        this.body.emitter.on("destroy", function () {
+        this.body.emitter.on('refreshEdges', this.refresh.bind(this));
+        this.body.emitter.on('refresh', this.refresh.bind(this));
+        this.body.emitter.on('destroy', function () {
           delete _this2.body.functions.createEdge;
           delete _this2.edgesListeners.add;
           delete _this2.edgesListeners.update;
@@ -30676,6 +30762,8 @@ return /******/ (function(modules) { // webpackBootstrap
           }
         }
       }
+    }, {
+      key: 'setData',
 
       /**
        * Load edges by reading the data table
@@ -30683,8 +30771,6 @@ return /******/ (function(modules) { // webpackBootstrap
        * @private
        * @private
        */
-    }, {
-      key: 'setData',
       value: function setData(edges) {
         var _this3 = this;
 
@@ -30727,17 +30813,17 @@ return /******/ (function(modules) { // webpackBootstrap
         }
 
         if (doNotEmit === false) {
-          this.body.emitter.emit("_dataChanged");
+          this.body.emitter.emit('_dataChanged');
         }
       }
+    }, {
+      key: 'add',
 
       /**
        * Add edges
        * @param {Number[] | String[]} ids
        * @private
        */
-    }, {
-      key: 'add',
       value: function add(ids) {
         var doNotEmit = arguments.length <= 1 || arguments[1] === undefined ? false : arguments[1];
 
@@ -30752,22 +30838,22 @@ return /******/ (function(modules) { // webpackBootstrap
             oldEdge.disconnect();
           }
 
-          var data = edgesData.get(id, { "showInternalIds": true });
+          var data = edgesData.get(id, { 'showInternalIds': true });
           edges[id] = this.create(data);
         }
 
         if (doNotEmit === false) {
-          this.body.emitter.emit("_dataChanged");
+          this.body.emitter.emit('_dataChanged');
         }
       }
+    }, {
+      key: 'update',
 
       /**
        * Update existing edges, or create them when not yet existing
        * @param {Number[] | String[]} ids
        * @private
        */
-    }, {
-      key: 'update',
       value: function update(ids) {
         var edges = this.body.edges;
         var edgesData = this.body.data.edges;
@@ -30789,19 +30875,19 @@ return /******/ (function(modules) { // webpackBootstrap
         }
 
         if (dataChanged === true) {
-          this.body.emitter.emit("_dataChanged");
+          this.body.emitter.emit('_dataChanged');
         } else {
-          this.body.emitter.emit("_dataUpdated");
+          this.body.emitter.emit('_dataUpdated');
         }
       }
+    }, {
+      key: 'remove',
 
       /**
        * Remove existing edges. Non existing ids will be ignored
        * @param {Number[] | String[]} ids
        * @private
        */
-    }, {
-      key: 'remove',
       value: function remove(ids) {
         var edges = this.body.edges;
         for (var i = 0; i < ids.length; i++) {
@@ -30814,7 +30900,7 @@ return /******/ (function(modules) { // webpackBootstrap
           }
         }
 
-        this.body.emitter.emit("_dataChanged");
+        this.body.emitter.emit('_dataChanged');
       }
     }, {
       key: 'refresh',
@@ -30843,13 +30929,13 @@ return /******/ (function(modules) { // webpackBootstrap
           this.body.edges[edgeId].edgeType.colorDirty = true;
         }
       }
+    }, {
+      key: 'reconnectEdges',
 
       /**
        * Reconnect all edges
        * @private
        */
-    }, {
-      key: 'reconnectEdges',
       value: function reconnectEdges() {
         var id;
         var nodes = this.body.nodes;
@@ -30913,20 +30999,24 @@ return /******/ (function(modules) { // webpackBootstrap
 
   var _sharedLabel2 = _interopRequireDefault(_sharedLabel);
 
-  var _edgesCubicBezierEdge = __webpack_require__(86);
+  var _edgesCubicBezierEdge = __webpack_require__(83);
 
   var _edgesCubicBezierEdge2 = _interopRequireDefault(_edgesCubicBezierEdge);
 
-  var _edgesBezierEdgeDynamic = __webpack_require__(88);
+  var _edgesBezierEdgeDynamic = __webpack_require__(87);
 
   var _edgesBezierEdgeDynamic2 = _interopRequireDefault(_edgesBezierEdgeDynamic);
 
-  var _edgesBezierEdgeStatic = __webpack_require__(83);
+  var _edgesBezierEdgeStatic = __webpack_require__(88);
 
   var _edgesBezierEdgeStatic2 = _interopRequireDefault(_edgesBezierEdgeStatic);
 
   var _edgesStraightEdge = __webpack_require__(89);
 
+  var _edgesStraightEdge2 = _interopRequireDefault(_edgesStraightEdge);
+
+  var util = __webpack_require__(1);
+
   /**
    * @class Edge
    *
@@ -30943,16 +31033,12 @@ return /******/ (function(modules) { // webpackBootstrap
    *                                example for the color
    */
 
-  var _edgesStraightEdge2 = _interopRequireDefault(_edgesStraightEdge);
-
-  var util = __webpack_require__(1);
-
   var Edge = (function () {
     function Edge(options, body, globalOptions) {
       _classCallCheck(this, Edge);
 
       if (body === undefined) {
-        throw "No body provided";
+        throw 'No body provided';
       }
       this.options = util.bridgeObject(globalOptions);
       this.body = body;
@@ -30981,14 +31067,14 @@ return /******/ (function(modules) { // webpackBootstrap
       this.setOptions(options);
     }
 
-    /**
-     * Set or overwrite options for the edge
-     * @param {Object} options  an object with options
-     * @param doNotEmit
-     */
-
     _createClass(Edge, [{
       key: 'setOptions',
+
+      /**
+       * Set or overwrite options for the edge
+       * @param {Object} options  an object with options
+       * @param doNotEmit
+       */
       value: function setOptions(options) {
         if (!options) {
           return;
@@ -31042,13 +31128,13 @@ return /******/ (function(modules) { // webpackBootstrap
           this.baseFontSize = this.labelModule.baseSize;
         }
       }
+    }, {
+      key: 'updateEdgeType',
 
       /**
        * update the edge type, set the options
        * @returns {boolean}
        */
-    }, {
-      key: 'updateEdgeType',
       value: function updateEdgeType() {
         var dataChanged = false;
         var changeInType = true;
@@ -31092,12 +31178,12 @@ return /******/ (function(modules) { // webpackBootstrap
 
         return dataChanged;
       }
+    }, {
+      key: 'connect',
 
       /**
        * Connect an edge to its nodes
        */
-    }, {
-      key: 'connect',
       value: function connect() {
         this.disconnect();
 
@@ -31119,12 +31205,12 @@ return /******/ (function(modules) { // webpackBootstrap
 
         this.edgeType.connect();
       }
+    }, {
+      key: 'disconnect',
 
       /**
        * Disconnect an edge from its nodes
        */
-    }, {
-      key: 'disconnect',
       value: function disconnect() {
         if (this.from) {
           this.from.detachEdge(this);
@@ -31137,37 +31223,39 @@ return /******/ (function(modules) { // webpackBootstrap
 
         this.connected = false;
       }
+    }, {
+      key: 'getTitle',
 
       /**
        * get the title of this edge.
        * @return {string} title    The title of the edge, or undefined when no title
        *                           has been set.
        */
-    }, {
-      key: 'getTitle',
       value: function getTitle() {
         return this.title;
       }
+    }, {
+      key: 'isSelected',
 
       /**
        * check if this node is selecte
        * @return {boolean} selected   True if node is selected, else false
        */
-    }, {
-      key: 'isSelected',
       value: function isSelected() {
         return this.selected;
       }
+    }, {
+      key: 'getValue',
 
       /**
        * Retrieve the value of the edge. Can be undefined
        * @return {Number} value
        */
-    }, {
-      key: 'getValue',
       value: function getValue() {
         return this.options.value;
       }
+    }, {
+      key: 'setValueRange',
 
       /**
        * Adjust the value range of the edge. The edge will adjust it's width
@@ -31176,8 +31264,6 @@ return /******/ (function(modules) { // webpackBootstrap
        * @param {Number} max
        * @param total
        */
-    }, {
-      key: 'setValueRange',
       value: function setValueRange(min, max, total) {
         if (this.options.value !== undefined) {
           var scale = this.options.scaling.customScalingFunction(min, max, total, this.options.value);
@@ -31209,6 +31295,8 @@ return /******/ (function(modules) { // webpackBootstrap
           this.edgeType.selectionWidth = this.options.selectionWidth + this.options.width;
         }
       }
+    }, {
+      key: 'draw',
 
       /**
        * Redraw a edge
@@ -31216,8 +31304,6 @@ return /******/ (function(modules) { // webpackBootstrap
        * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
        * @param {CanvasRenderingContext2D}   ctx
        */
-    }, {
-      key: 'draw',
       value: function draw(ctx) {
         var via = this.edgeType.drawLine(ctx, this.selected, this.hover);
         this.drawArrows(ctx, via);
@@ -31250,7 +31336,7 @@ return /******/ (function(modules) { // webpackBootstrap
             ctx.save();
 
             // if the label has to be rotated:
-            if (this.options.font.align !== "horizontal") {
+            if (this.options.font.align !== 'horizontal') {
               this.labelModule.calculateLabelSize(ctx, selected, point.x, point.y);
               ctx.translate(point.x, this.labelModule.size.yLine);
               this._rotateForLabelAlignment(ctx);
@@ -31276,14 +31362,14 @@ return /******/ (function(modules) { // webpackBootstrap
           }
         }
       }
+    }, {
+      key: 'isOverlappingWith',
 
       /**
        * 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
        */
-    }, {
-      key: 'isOverlappingWith',
       value: function isOverlappingWith(obj) {
         if (this.connected) {
           var distMax = 10;
@@ -31301,14 +31387,14 @@ return /******/ (function(modules) { // webpackBootstrap
           return false;
         }
       }
+    }, {
+      key: '_rotateForLabelAlignment',
 
       /**
        * Rotates the canvas so the text is most readable
        * @param {CanvasRenderingContext2D} ctx
        * @private
        */
-    }, {
-      key: '_rotateForLabelAlignment',
       value: function _rotateForLabelAlignment(ctx) {
         var dy = this.from.y - this.to.y;
         var dx = this.from.x - this.to.x;
@@ -31321,6 +31407,8 @@ return /******/ (function(modules) { // webpackBootstrap
 
         ctx.rotate(angleInDegrees);
       }
+    }, {
+      key: '_pointOnCircle',
 
       /**
        * Get a point on a circle
@@ -31331,8 +31419,6 @@ return /******/ (function(modules) { // webpackBootstrap
        * @return {Object} point
        * @private
        */
-    }, {
-      key: '_pointOnCircle',
       value: function _pointOnCircle(x, y, radius, percentage) {
         var angle = percentage * 2 * Math.PI;
         return {
@@ -31350,13 +31436,13 @@ return /******/ (function(modules) { // webpackBootstrap
       value: function unselect() {
         this.selected = false;
       }
+    }, {
+      key: 'cleanup',
 
       /**
        * cleans all required things on delete
        * @returns {*}
        */
-    }, {
-      key: 'cleanup',
       value: function cleanup() {
         return this.edgeType.cleanup();
       }
@@ -31398,13 +31484,13 @@ return /******/ (function(modules) { // webpackBootstrap
         if (newOptions.arrows !== undefined && newOptions.arrows !== null) {
           if (typeof newOptions.arrows === 'string') {
             var arrows = newOptions.arrows.toLowerCase();
-            if (arrows.indexOf("to") != -1) {
+            if (arrows.indexOf('to') != -1) {
               parentOptions.arrows.to.enabled = true;
             }
-            if (arrows.indexOf("middle") != -1) {
+            if (arrows.indexOf('middle') != -1) {
               parentOptions.arrows.middle.enabled = true;
             }
-            if (arrows.indexOf("from") != -1) {
+            if (arrows.indexOf('from') != -1) {
               parentOptions.arrows.from.enabled = true;
             }
           } else if (typeof newOptions.arrows === 'object') {
@@ -31412,7 +31498,7 @@ return /******/ (function(modules) { // webpackBootstrap
             util.mergeOptions(parentOptions.arrows, newOptions.arrows, 'middle');
             util.mergeOptions(parentOptions.arrows, newOptions.arrows, 'from');
           } else {
-            throw new Error("The arrow newOptions can only be an object or a string. Refer to the documentation. You used:" + JSON.stringify(newOptions.arrows));
+            throw new Error('The arrow newOptions can only be an object or a string. Refer to the documentation. You used:' + JSON.stringify(newOptions.arrows));
           }
         } else if (allowDeletion === true && newOptions.arrows === null) {
           parentOptions.arrows = undefined;
@@ -31476,9 +31562,11 @@ return /******/ (function(modules) { // webpackBootstrap
     value: true
   });
 
+  var _slicedToArray = (function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i['return']) _i['return'](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError('Invalid attempt to destructure non-iterable instance'); } }; })();
+
   var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
 
-  var _get = function get(_x4, _x5, _x6) { var _again = true; _function: while (_again) { var object = _x4, property = _x5, receiver = _x6; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x4 = parent; _x5 = property; _x6 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
+  var _get = function get(_x3, _x4, _x5) { var _again = true; _function: while (_again) { var object = _x3, property = _x4, receiver = _x5; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x3 = parent; _x4 = property; _x5 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
 
   function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
@@ -31486,218 +31574,102 @@ return /******/ (function(modules) { // webpackBootstrap
 
   function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; }
 
-  var _utilBezierEdgeBase = __webpack_require__(84);
+  var _utilCubicBezierEdgeBase = __webpack_require__(84);
 
-  var _utilBezierEdgeBase2 = _interopRequireDefault(_utilBezierEdgeBase);
+  var _utilCubicBezierEdgeBase2 = _interopRequireDefault(_utilCubicBezierEdgeBase);
 
-  var BezierEdgeStatic = (function (_BezierEdgeBase) {
-    _inherits(BezierEdgeStatic, _BezierEdgeBase);
+  var CubicBezierEdge = (function (_CubicBezierEdgeBase) {
+    _inherits(CubicBezierEdge, _CubicBezierEdgeBase);
 
-    function BezierEdgeStatic(options, body, labelModule) {
-      _classCallCheck(this, BezierEdgeStatic);
+    function CubicBezierEdge(options, body, labelModule) {
+      _classCallCheck(this, CubicBezierEdge);
 
-      _get(Object.getPrototypeOf(BezierEdgeStatic.prototype), 'constructor', this).call(this, options, body, labelModule);
+      _get(Object.getPrototypeOf(CubicBezierEdge.prototype), 'constructor', this).call(this, options, body, labelModule);
     }
 
-    /**
-     * Draw a line between two nodes
-     * @param {CanvasRenderingContext2D} ctx
-     * @private
-     */
-
-    _createClass(BezierEdgeStatic, [{
+    _createClass(CubicBezierEdge, [{
       key: '_line',
+
+      /**
+       * Draw a line between two nodes
+       * @param {CanvasRenderingContext2D} ctx
+       * @private
+       */
       value: function _line(ctx) {
-        // draw a straight line
+        // get the coordinates of the support points.
+
+        var _getViaCoordinates2 = this._getViaCoordinates();
+
+        var _getViaCoordinates22 = _slicedToArray(_getViaCoordinates2, 2);
+
+        var via1 = _getViaCoordinates22[0];
+        var via2 = _getViaCoordinates22[1];
+
+        var returnValue = [via1, via2];
+
+        // start drawing the line.
         ctx.beginPath();
         ctx.moveTo(this.from.x, this.from.y);
-        var via = this._getViaCoordinates();
-        var returnValue = via;
 
         // fallback to normal straight edges
-        if (via.x === undefined) {
+        if (via1.x === undefined) {
           ctx.lineTo(this.to.x, this.to.y);
           returnValue = undefined;
         } else {
-          ctx.quadraticCurveTo(via.x, via.y, this.to.x, this.to.y);
+          ctx.bezierCurveTo(via1.x, via1.y, via2.x, via2.y, this.to.x, this.to.y);
         }
         // draw shadow if enabled
-        this.enableShadow(ctx);
-        ctx.stroke();
-        this.disableShadow(ctx);
-        return returnValue;
-      }
-    }, {
-      key: '_getViaCoordinates',
-      value: function _getViaCoordinates() {
-        var xVia = undefined;
-        var yVia = undefined;
-        var factor = this.options.smooth.roundness;
-        var type = this.options.smooth.type;
-        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)) {
-            // up - down
-            xVia = this.from.x;
-            if (this.from.y < this.to.y) {
-              yVia = this.to.y - (1 - factor) * dy;
-            } else {
-              yVia = this.to.y + (1 - factor) * dy;
-            }
-          } else if (Math.abs(this.from.x - this.to.x) > Math.abs(this.from.y - this.to.y)) {
-            // left - right
-            if (this.from.x < this.to.x) {
-              xVia = this.to.x - (1 - factor) * dx;
-            } else {
-              xVia = this.to.x + (1 - factor) * dx;
-            }
-            yVia = this.from.y;
-          }
-        } else if (type === 'horizontal') {
-          if (this.from.x < this.to.x) {
-            xVia = this.to.x - (1 - factor) * dx;
-          } else {
-            xVia = this.to.x + (1 - factor) * dx;
-          }
-          yVia = this.from.y;
-        } else if (type === 'vertical') {
-          xVia = this.from.x;
-          if (this.from.y < this.to.y) {
-            yVia = this.to.y - (1 - factor) * dy;
-          } else {
-            yVia = this.to.y + (1 - factor) * dy;
-          }
-        } else if (type === 'curvedCW') {
-          dx = this.to.x - this.from.x;
-          dy = this.from.y - this.to.y;
-          var radius = Math.sqrt(dx * dx + dy * dy);
-          var pi = Math.PI;
-
-          var originalAngle = Math.atan2(dy, dx);
-          var myAngle = (originalAngle + (factor * 0.5 + 0.5) * pi) % (2 * pi);
-
-          xVia = this.from.x + (factor * 0.5 + 0.5) * radius * Math.sin(myAngle);
-          yVia = this.from.y + (factor * 0.5 + 0.5) * radius * Math.cos(myAngle);
-        } else if (type === 'curvedCCW') {
-          dx = this.to.x - this.from.x;
-          dy = this.from.y - this.to.y;
-          var radius = Math.sqrt(dx * dx + dy * dy);
-          var pi = Math.PI;
-
-          var originalAngle = Math.atan2(dy, dx);
-          var myAngle = (originalAngle + (-factor * 0.5 + 0.5) * pi) % (2 * pi);
-
-          xVia = this.from.x + (factor * 0.5 + 0.5) * radius * Math.sin(myAngle);
-          yVia = this.from.y + (factor * 0.5 + 0.5) * radius * Math.cos(myAngle);
-        } 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) {
-                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) {
-                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) {
-                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) {
-                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) {
-                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) {
-                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) {
-                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) {
-                xVia = this.from.x - factor * dx;
-                yVia = this.from.y + factor * dx;
-                yVia = this.to.y < yVia ? this.to.y : yVia;
-              }
-            }
-          }
+        this.enableShadow(ctx);
+        ctx.stroke();
+        this.disableShadow(ctx);
+        return returnValue;
+      }
+    }, {
+      key: '_getViaCoordinates',
+      value: function _getViaCoordinates() {
+        var dx = this.from.x - this.to.x;
+        var dy = this.from.y - this.to.y;
+
+        var x1 = undefined,
+            y1 = undefined,
+            x2 = undefined,
+            y2 = undefined;
+        var roundness = this.options.smooth.roundness;;
+
+        // horizontal if x > y or if direction is forced or if direction is horizontal
+        if ((Math.abs(dx) > Math.abs(dy) || this.options.smooth.forceDirection === true || this.options.smooth.forceDirection === 'horizontal') && this.options.smooth.forceDirection !== 'vertical') {
+          y1 = this.from.y;
+          y2 = this.to.y;
+          x1 = this.from.x - roundness * dx;
+          x2 = this.to.x + roundness * dx;
+        } else {
+          y1 = this.from.y - roundness * dy;
+          y2 = this.to.y + roundness * dy;
+          x1 = this.from.x;
+          x2 = this.to.x;
         }
-        return { x: xVia, y: yVia };
+
+        return [{ x: x1, y: y1 }, { x: x2, y: y2 }];
       }
     }, {
       key: '_findBorderPosition',
       value: function _findBorderPosition(nearNode, ctx) {
-        var options = arguments.length <= 2 || arguments[2] === undefined ? {} : arguments[2];
-
-        return this._findBorderPositionBezier(nearNode, ctx, options.via);
+        return this._findBorderPositionBezier(nearNode, ctx);
       }
     }, {
       key: '_getDistanceToEdge',
       value: function _getDistanceToEdge(x1, y1, x2, y2, x3, y3) {
-        var via = arguments.length <= 6 || arguments[6] === undefined ? this._getViaCoordinates() : arguments[6];
+        var _ref = arguments.length <= 6 || arguments[6] === undefined ? this._getViaCoordinates() : arguments[6];
+
+        var _ref2 = _slicedToArray(_ref, 2);
+
+        var via1 = _ref2[0];
+        var via2 = _ref2[1];
         // x3,y3 is the point
-        return this._getDistanceToBezierEdge(x1, y1, x2, y2, x3, y3, via);
+        return this._getDistanceToBezierEdge(x1, y1, x2, y2, x3, y3, via1, via2);
       }
+    }, {
+      key: 'getPoint',
 
       /**
        * Combined function of pointOnLine and pointOnBezier. This gives the coordinates of a point on the line at a certain percentage of the way
@@ -31706,23 +31678,31 @@ return /******/ (function(modules) { // webpackBootstrap
        * @returns {{x: number, y: number}}
        * @private
        */
-    }, {
-      key: 'getPoint',
       value: function getPoint(percentage) {
-        var via = arguments.length <= 1 || arguments[1] === undefined ? this._getViaCoordinates() : arguments[1];
+        var _ref3 = arguments.length <= 1 || arguments[1] === undefined ? this._getViaCoordinates() : arguments[1];
+
+        var _ref32 = _slicedToArray(_ref3, 2);
+
+        var via1 = _ref32[0];
+        var via2 = _ref32[1];
 
         var t = percentage;
-        var x = Math.pow(1 - t, 2) * this.from.x + 2 * t * (1 - t) * via.x + Math.pow(t, 2) * this.to.x;
-        var y = Math.pow(1 - t, 2) * this.from.y + 2 * t * (1 - t) * via.y + Math.pow(t, 2) * this.to.y;
+        var vec = [];
+        vec[0] = Math.pow(1 - t, 3);
+        vec[1] = 3 * t * Math.pow(1 - t, 2);
+        vec[2] = 3 * Math.pow(t, 2) * (1 - t);
+        vec[3] = Math.pow(t, 3);
+        var x = vec[0] * this.from.x + vec[1] * via1.x + vec[2] * via2.x + vec[3] * this.to.x;
+        var y = vec[0] * this.from.y + vec[1] * via1.y + vec[2] * via2.y + vec[3] * this.to.y;
 
         return { x: x, y: y };
       }
     }]);
 
-    return BezierEdgeStatic;
-  })(_utilBezierEdgeBase2['default']);
+    return CubicBezierEdge;
+  })(_utilCubicBezierEdgeBase2['default']);
 
-  exports['default'] = BezierEdgeStatic;
+  exports['default'] = CubicBezierEdge;
   module.exports = exports['default'];
 
 /***/ },
@@ -31737,6 +31717,92 @@ return /******/ (function(modules) { // webpackBootstrap
 
   var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
 
+  var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
+
+  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+  function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
+
+  function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; }
+
+  var _BezierEdgeBase2 = __webpack_require__(85);
+
+  var _BezierEdgeBase3 = _interopRequireDefault(_BezierEdgeBase2);
+
+  var CubicBezierEdgeBase = (function (_BezierEdgeBase) {
+    _inherits(CubicBezierEdgeBase, _BezierEdgeBase);
+
+    function CubicBezierEdgeBase(options, body, labelModule) {
+      _classCallCheck(this, CubicBezierEdgeBase);
+
+      _get(Object.getPrototypeOf(CubicBezierEdgeBase.prototype), 'constructor', this).call(this, options, body, labelModule);
+    }
+
+    _createClass(CubicBezierEdgeBase, [{
+      key: '_getDistanceToBezierEdge',
+
+      /**
+       * 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
+       * https://en.wikipedia.org/wiki/B%C3%A9zier_curve
+       * @param {number} x1 from x
+       * @param {number} y1 from y
+       * @param {number} x2 to x
+       * @param {number} y2 to y
+       * @param {number} x3 point to check x
+       * @param {number} y3 point to check y
+       * @private
+       */
+      value: function _getDistanceToBezierEdge(x1, y1, x2, y2, x3, y3, via1, via2) {
+        // x3,y3 is the point
+        var minDistance = 1e9;
+        var distance = undefined;
+        var i = undefined,
+            t = undefined,
+            x = undefined,
+            y = undefined;
+        var lastX = x1;
+        var lastY = y1;
+        var vec = [0, 0, 0, 0];
+        for (i = 1; i < 10; i++) {
+          t = 0.1 * i;
+          vec[0] = Math.pow(1 - t, 3);
+          vec[1] = 3 * t * Math.pow(1 - t, 2);
+          vec[2] = 3 * Math.pow(t, 2) * (1 - t);
+          vec[3] = Math.pow(t, 3);
+          x = vec[0] * x1 + vec[1] * via1.x + vec[2] * via2.x + vec[3] * x2;
+          y = vec[0] * y1 + vec[1] * via1.y + vec[2] * via2.y + vec[3] * y2;
+          if (i > 0) {
+            distance = this._getDistanceToLine(lastX, lastY, x, y, x3, y3);
+            minDistance = distance < minDistance ? distance : minDistance;
+          }
+          lastX = x;
+          lastY = y;
+        }
+
+        return minDistance;
+      }
+    }]);
+
+    return CubicBezierEdgeBase;
+  })(_BezierEdgeBase3['default']);
+
+  exports['default'] = CubicBezierEdgeBase;
+  module.exports = exports['default'];
+
+/***/ },
+/* 85 */
+/***/ function(module, exports, __webpack_require__) {
+
+  'use strict';
+
+  Object.defineProperty(exports, '__esModule', {
+    value: true
+  });
+
+  var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
+
   var _get = function get(_x2, _x3, _x4) { var _again = true; _function: while (_again) { var object = _x2, property = _x3, receiver = _x4; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x2 = parent; _x3 = property; _x4 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
 
   function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
@@ -31745,7 +31811,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
   function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; }
 
-  var _EdgeBase2 = __webpack_require__(85);
+  var _EdgeBase2 = __webpack_require__(86);
 
   var _EdgeBase3 = _interopRequireDefault(_EdgeBase2);
 
@@ -31758,22 +31824,22 @@ return /******/ (function(modules) { // webpackBootstrap
       _get(Object.getPrototypeOf(BezierEdgeBase.prototype), 'constructor', this).call(this, options, body, labelModule);
     }
 
-    /**
-     * This function uses binary search to look for the point where the bezier curve crosses the border of the node.
-     *
-     * @param nearNode
-     * @param ctx
-     * @param viaNode
-     * @param nearNode
-     * @param ctx
-     * @param viaNode
-     * @param nearNode
-     * @param ctx
-     * @param viaNode
-     */
-
     _createClass(BezierEdgeBase, [{
       key: '_findBorderPositionBezier',
+
+      /**
+       * This function uses binary search to look for the point where the bezier curve crosses the border of the node.
+       *
+       * @param nearNode
+       * @param ctx
+       * @param viaNode
+       * @param nearNode
+       * @param ctx
+       * @param viaNode
+       * @param nearNode
+       * @param ctx
+       * @param viaNode
+       */
       value: function _findBorderPositionBezier(nearNode, ctx) {
         var viaNode = arguments.length <= 2 || arguments[2] === undefined ? this._getViaCoordinates() : arguments[2];
 
@@ -31801,19 +31867,19 @@ return /******/ (function(modules) { // webpackBootstrap
           if (Math.abs(difference) < threshold) {
             break; // found
           } else if (difference < 0) {
-              // distance to nodes is larger than distance to border --> t needs to be bigger if we're looking at the to node.
-              if (from === false) {
-                low = middle;
-              } else {
-                high = middle;
-              }
+            // distance to nodes is larger than distance to border --> t needs to be bigger if we're looking at the to node.
+            if (from === false) {
+              low = middle;
             } else {
-              if (from === false) {
-                high = middle;
-              } else {
-                low = middle;
-              }
+              high = middle;
             }
+          } else {
+            if (from === false) {
+              high = middle;
+            } else {
+              low = middle;
+            }
+          }
 
           iteration++;
         }
@@ -31821,6 +31887,8 @@ return /******/ (function(modules) { // webpackBootstrap
 
         return pos;
       }
+    }, {
+      key: '_getDistanceToBezierEdge',
 
       /**
        * Calculate the