diff --git a/Jakefile.js b/Jakefile.js
index d56a27a8..d047a970 100644
--- a/Jakefile.js
+++ b/Jakefile.js
@@ -66,6 +66,14 @@ task('build', {async: true}, function () {
             './src/component/GroupSet.js',
 
             './src/Timeline.js',
+
+            './src/graph/dotparser.js',
+            './src/graph/shapes.js',
+            './src/graph/Node.js',
+            './src/graph/Edge.js',
+            './src/graph/Popup.js',
+            './src/graph/Groups.js',
+            './src/graph/Images.js',
             './src/graph/Graph.js',
 
             './src/module/exports.js'
diff --git a/docs/graph.html b/docs/graph.html
index 76f43dff..5c420d6e 100644
--- a/docs/graph.html
+++ b/docs/graph.html
@@ -531,7 +531,7 @@ var edges= [
     <th>Description</th>
 </tr>
 <tr>
-    <td>vis.Graph.util.parseDOT(data)</td>
+    <td>vis.util.parseDOT(data)</td>
     <td>Object</td>
     <td>
         Parse a string containing data in DOT language into a JSON object.
@@ -540,7 +540,7 @@ var edges= [
     </td>
 </tr>
     <tr>
-        <td>vis.Graph.util.DOTToGraph(data)</td>
+        <td>vis.util.DOTToGraph(data)</td>
         <td>Object</td>
         <td>
             Convert a string containing a graph in DOT language into a map
@@ -559,7 +559,7 @@ Example usage:
 <pre class="prettyprint lang-js">
     // parse data in DOT-notation
     var dot = 'digraph {1 -> 1 -> 2; 2 -> 3; 2 -- 4; 2 -> 1 }';
-    var data = vis.Graph.util.DOTToGraph(dot);
+    var data = vis.util.DOTToGraph(dot);
 
     // create a graph
     var graph = new vis.Graph(container, data);
diff --git a/examples/graph/19_dot_language.html b/examples/graph/19_dot_language.html
index fb3de6c9..46f4119a 100644
--- a/examples/graph/19_dot_language.html
+++ b/examples/graph/19_dot_language.html
@@ -20,7 +20,7 @@
 <script type="text/javascript">
     // parse data in DOT-notation
     var dot = 'digraph {node[shape=circle]; 1 -> 1 -> 2; 2 -> 3; 2 -- 4; 2 -> 1 }';
-    var data = vis.Graph.util.DOTToGraph(dot);
+    var data = vis.util.DOTToGraph(dot);
 
     // create a graph
     var container = document.getElementById('mygraph');
diff --git a/examples/graph/20_dot_language_playground.html b/examples/graph/20_dot_language_playground.html
index be139751..e2efcb6f 100644
--- a/examples/graph/20_dot_language_playground.html
+++ b/examples/graph/20_dot_language_playground.html
@@ -93,7 +93,7 @@
             txtError.innerHTML = '';
 
             // parse the data from DOT-notation
-            data = vis.Graph.util.DOTToGraph(txtData.value);
+            data = vis.util.DOTToGraph(txtData.value);
 
             // create a graph
             var container = document.getElementById('mygraph');
diff --git a/src/graph/Edge.js b/src/graph/Edge.js
new file mode 100644
index 00000000..f5a0eaf0
--- /dev/null
+++ b/src/graph/Edge.js
@@ -0,0 +1,566 @@
+/**
+ * @class Edge
+ *
+ * A edge connects two nodes
+ * @param {Object} properties     Object with properties. Must contain
+ *                                At least properties from and to.
+ *                                Available properties: from (number),
+ *                                to (number), color (string),
+ *                                width (number), style (string),
+ *                                length (number), title (string)
+ * @param {Graph} graph A graph object, used to find and edge to
+ *                                nodes.
+ * @param {Object} constants      An object with default values for
+ *                                example for the color
+ */
+function Edge (properties, graph, constants) {
+    if (!graph) {
+        throw "No graph provided";
+    }
+    this.graph = graph;
+
+    // initialize constants
+    this.widthMin = constants.edges.widthMin;
+    this.widthMax = constants.edges.widthMax;
+
+    // initialize variables
+    this.id     = undefined;
+    this.style  = constants.edges.style;
+    this.title  = undefined;
+    this.width  = constants.edges.width;
+    this.value  = undefined;
+    this.length = constants.edges.length;
+
+    // Added to support dashed lines
+    // David Jordan
+    // 2012-08-08
+    this.dashlength = constants.edges.dashlength;
+    this.dashgap = constants.edges.dashgap;
+    this.altdashlength  = constants.edges.altdashlength;
+
+    this.stiffness = undefined; // depends on the length of the edge
+    this.color  = constants.edges.color;
+    this.widthFixed = false;
+    this.lengthFixed = false;
+
+    this.setProperties(properties, constants);
+};
+
+/**
+ * Set or overwrite properties for the edge
+ * @param {Object} properties  an object with properties
+ * @param {Object} constants   and object with default, global properties
+ */
+Edge.prototype.setProperties = function(properties, constants) {
+    if (!properties) {
+        return;
+    }
+
+    if (properties.from != undefined) {this.from = this.graph._getNode(properties.from);}
+    if (properties.to != undefined) {this.to = this.graph._getNode(properties.to);}
+
+    if (properties.id != undefined)         {this.id = properties.id;}
+    if (properties.style != undefined)      {this.style = properties.style;}
+    if (properties.text != undefined)       {this.text = properties.text;}
+    if (this.text) {
+        this.fontSize = constants.edges.fontSize;
+        this.fontFace = constants.edges.fontFace;
+        this.fontColor = constants.edges.fontColor;
+        if (properties.fontColor != undefined)  {this.fontColor = properties.fontColor;}
+        if (properties.fontSize != undefined)   {this.fontSize = properties.fontSize;}
+        if (properties.fontFace != undefined)   {this.fontFace = properties.fontFace;}
+    }
+    if (properties.title != undefined)      {this.title = properties.title;}
+    if (properties.width != undefined)      {this.width = properties.width;}
+    if (properties.value != undefined)      {this.value = properties.value;}
+    if (properties.length != undefined)     {this.length = properties.length;}
+
+    // Added to support dashed lines
+    // David Jordan
+    // 2012-08-08
+    if (properties.dashlength != undefined) {this.dashlength = properties.dashlength;}
+    if (properties.dashgap != undefined) {this.dashgap = properties.dashgap;}
+    if (properties.altdashlength != undefined) {this.altdashlength = properties.altdashlength;}
+
+    if (properties.color != undefined) {this.color = properties.color;}
+
+    if (!this.from) {
+        throw "Node with id " + properties.from + " not found";
+    }
+    if (!this.to) {
+        throw "Node with id " + properties.to + " not found";
+    }
+
+    this.widthFixed = this.widthFixed || (properties.width != undefined);
+    this.lengthFixed = this.lengthFixed || (properties.length != undefined);
+
+    this.stiffness = 1 / this.length;
+
+    // initialize animation
+    if (this.style === 'arrow') {
+        this.arrows = [0.5];
+    }
+
+    // set draw method based on style
+    switch (this.style) {
+        case 'line':          this.draw = this._drawLine; break;
+        case 'arrow':         this.draw = this._drawArrow; break;
+        case 'arrow-end':     this.draw = this._drawArrowEnd; break;
+        case 'dash-line':     this.draw = this._drawDashLine; break;
+        default:              this.draw = this._drawLine; break;
+    }
+};
+
+/**
+ * get the title of this edge.
+ * @return {string} title    The title of the edge, or undefined when no title
+ *                           has been set.
+ */
+Edge.prototype.getTitle = function() {
+    return this.title;
+};
+
+
+/**
+ * Retrieve the value of the edge. Can be undefined
+ * @return {Number} value
+ */
+Edge.prototype.getValue = function() {
+    return this.value;
+};
+
+/**
+ * Adjust the value range of the edge. The edge will adjust it's width
+ * based on its value.
+ * @param {Number} min
+ * @param {Number} max
+ */
+Edge.prototype.setValueRange = function(min, max) {
+    if (!this.widthFixed && this.value !== undefined) {
+        var factor = (this.widthMax - this.widthMin) / (max - min);
+        this.width = (this.value - min) * factor + this.widthMin;
+    }
+};
+
+/**
+ * Redraw a edge
+ * Draw this edge in the given canvas
+ * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+ * @param {CanvasRenderingContext2D}   ctx
+ */
+Edge.prototype.draw = function(ctx) {
+    throw "Method draw not initialized in edge";
+};
+
+/**
+ * Check if this object is overlapping with the provided object
+ * @param {Object} obj   an object with parameters left, top
+ * @return {boolean}     True if location is located on the edge
+ */
+Edge.prototype.isOverlappingWith = function(obj) {
+    var distMax = 10;
+
+    var xFrom = this.from.x;
+    var yFrom = this.from.y;
+    var xTo = this.to.x;
+    var yTo = this.to.y;
+    var xObj = obj.left;
+    var yObj = obj.top;
+
+
+    var dist = Edge._dist(xFrom, yFrom, xTo, yTo, xObj, yObj);
+
+    return (dist < distMax);
+};
+
+
+/**
+ * Redraw a edge as a line
+ * Draw this edge in the given canvas
+ * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+ * @param {CanvasRenderingContext2D}   ctx
+ */
+Edge.prototype._drawLine = function(ctx) {
+    // set style
+    ctx.strokeStyle = this.color;
+    ctx.lineWidth = this._getLineWidth();
+
+    var point;
+    if (this.from != this.to) {
+        // draw line
+        this._line(ctx);
+
+        // draw text
+        if (this.text) {
+            point = this._pointOnLine(0.5);
+            this._text(ctx, this.text, point.x, point.y);
+        }
+    }
+    else {
+        var radius = this.length / 2 / Math.PI;
+        var x, y;
+        var node = this.from;
+        if (!node.width) {
+            node.resize(ctx);
+        }
+        if (node.width > node.height) {
+            x = node.x + node.width / 2;
+            y = node.y - radius;
+        }
+        else {
+            x = node.x + radius;
+            y = node.y - node.height / 2;
+        }
+        this._circle(ctx, x, y, radius);
+        point = this._pointOnCircle(x, y, radius, 0.5);
+        this._text(ctx, this.text, point.x, point.y);
+    }
+};
+
+/**
+ * Get the line width of the edge. Depends on width and whether one of the
+ * connected nodes is selected.
+ * @return {Number} width
+ * @private
+ */
+Edge.prototype._getLineWidth = function() {
+    if (this.from.selected || this.to.selected) {
+        return Math.min(this.width * 2, this.widthMax);
+    }
+    else {
+        return this.width;
+    }
+};
+
+/**
+ * Draw a line between two nodes
+ * @param {CanvasRenderingContext2D} ctx
+ * @private
+ */
+Edge.prototype._line = function (ctx) {
+    // draw a straight line
+    ctx.beginPath();
+    ctx.moveTo(this.from.x, this.from.y);
+    ctx.lineTo(this.to.x, this.to.y);
+    ctx.stroke();
+};
+
+/**
+ * Draw a line from a node to itself, a circle
+ * @param {CanvasRenderingContext2D} ctx
+ * @param {Number} x
+ * @param {Number} y
+ * @param {Number} radius
+ * @private
+ */
+Edge.prototype._circle = function (ctx, x, y, radius) {
+    // draw a circle
+    ctx.beginPath();
+    ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
+    ctx.stroke();
+};
+
+/**
+ * Draw text with white background and with the middle at (x, y)
+ * @param {CanvasRenderingContext2D} ctx
+ * @param {String} text
+ * @param {Number} x
+ * @param {Number} y
+ */
+Edge.prototype._text = function (ctx, text, x, y) {
+    if (text) {
+        // TODO: cache the calculated size
+        ctx.font = ((this.from.selected || this.to.selected) ? "bold " : "") +
+            this.fontSize + "px " + this.fontFace;
+        ctx.fillStyle = 'white';
+        var width = ctx.measureText(this.text).width;
+        var height = this.fontSize;
+        var left = x - width / 2;
+        var top = y - height / 2;
+
+        ctx.fillRect(left, top, width, height);
+
+        // draw text
+        ctx.fillStyle = this.fontColor || "black";
+        ctx.textAlign = "left";
+        ctx.textBaseline = "top";
+        ctx.fillText(this.text, left, top);
+    }
+};
+
+/**
+ * Redraw a edge as a dashed line
+ * Draw this edge in the given canvas
+ * @author David Jordan
+ * @date 2012-08-08
+ * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+ * @param {CanvasRenderingContext2D}   ctx
+ */
+Edge.prototype._drawDashLine = function(ctx) {
+    // set style
+    ctx.strokeStyle = this.color;
+    ctx.lineWidth = this._getLineWidth();
+
+    // draw dashed line
+    ctx.beginPath();
+    ctx.lineCap = 'round';
+    if (this.altdashlength != undefined) //If an alt dash value has been set add to the array this value
+    {
+        ctx.dashedLine(this.from.x,this.from.y,this.to.x,this.to.y,[this.dashlength,this.dashgap,this.altdashlength,this.dashgap]);
+    }
+    else if (this.dashlength != undefined && this.dashgap != undefined) //If a dash and gap value has been set add to the array this value
+    {
+        ctx.dashedLine(this.from.x,this.from.y,this.to.x,this.to.y,[this.dashlength,this.dashgap]);
+    }
+    else //If all else fails draw a line
+    {
+        ctx.moveTo(this.from.x, this.from.y);
+        ctx.lineTo(this.to.x, this.to.y);
+    }
+    ctx.stroke();
+
+    // draw text
+    if (this.text) {
+        var point = this._pointOnLine(0.5);
+        this._text(ctx, this.text, point.x, point.y);
+    }
+};
+
+/**
+ * Get a point on a line
+ * @param {Number} percentage. Value between 0 (line start) and 1 (line end)
+ * @return {Object} point
+ * @private
+ */
+Edge.prototype._pointOnLine = function (percentage) {
+    return {
+        x: (1 - percentage) * this.from.x + percentage * this.to.x,
+        y: (1 - percentage) * this.from.y + percentage * this.to.y
+    }
+};
+
+/**
+ * Get a point on a circle
+ * @param {Number} x
+ * @param {Number} y
+ * @param {Number} radius
+ * @param {Number} percentage. Value between 0 (line start) and 1 (line end)
+ * @return {Object} point
+ * @private
+ */
+Edge.prototype._pointOnCircle = function (x, y, radius, percentage) {
+    var angle = (percentage - 3/8) * 2 * Math.PI;
+    return {
+        x: x + radius * Math.cos(angle),
+        y: y - radius * Math.sin(angle)
+    }
+};
+
+/**
+ * Redraw a edge as a line with an arrow
+ * Draw this edge in the given canvas
+ * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+ * @param {CanvasRenderingContext2D}   ctx
+ */
+Edge.prototype._drawArrow = function(ctx) {
+    var point;
+    // set style
+    ctx.strokeStyle = this.color;
+    ctx.fillStyle = this.color;
+    ctx.lineWidth = this._getLineWidth();
+
+    if (this.from != this.to) {
+        // draw line
+        this._line(ctx);
+
+        // draw all arrows
+        var angle = Math.atan2((this.to.y - this.from.y), (this.to.x - this.from.x));
+        var length = 10 + 5 * this.width; // TODO: make customizable?
+        for (var a in this.arrows) {
+            if (this.arrows.hasOwnProperty(a)) {
+                point = this._pointOnLine(this.arrows[a]);
+                ctx.arrow(point.x, point.y, angle, length);
+                ctx.fill();
+                ctx.stroke();
+            }
+        }
+
+        // draw text
+        if (this.text) {
+            point = this._pointOnLine(0.5);
+            this._text(ctx, this.text, point.x, point.y);
+        }
+    }
+    else {
+        // draw circle
+        var radius = this.length / 2 / Math.PI;
+        var x, y;
+        var node = this.from;
+        if (!node.width) {
+            node.resize(ctx);
+        }
+        if (node.width > node.height) {
+            x = node.x + node.width / 2;
+            y = node.y - radius;
+        }
+        else {
+            x = node.x + radius;
+            y = node.y - node.height / 2;
+        }
+        this._circle(ctx, x, y, radius);
+
+        // draw all arrows
+        var angle = 0.2 * Math.PI;
+        var length = 10 + 5 * this.width; // TODO: make customizable?
+        for (var a in this.arrows) {
+            if (this.arrows.hasOwnProperty(a)) {
+                point = this._pointOnCircle(x, y, radius, this.arrows[a]);
+                ctx.arrow(point.x, point.y, angle, length);
+                ctx.fill();
+                ctx.stroke();
+            }
+        }
+
+        // draw text
+        if (this.text) {
+            point = this._pointOnCircle(x, y, radius, 0.5);
+            this._text(ctx, this.text, point.x, point.y);
+        }
+    }
+};
+
+
+
+/**
+ * Redraw a edge as a line with an arrow
+ * Draw this edge in the given canvas
+ * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+ * @param {CanvasRenderingContext2D}   ctx
+ */
+Edge.prototype._drawArrowEnd = function(ctx) {
+    // set style
+    ctx.strokeStyle = this.color;
+    ctx.fillStyle = this.color;
+    ctx.lineWidth = this._getLineWidth();
+
+    // draw line
+    var angle, length;
+    if (this.from != this.to) {
+        // calculate length and angle of the line
+        angle = Math.atan2((this.to.y - this.from.y), (this.to.x - this.from.x));
+        var dx = (this.to.x - this.from.x);
+        var dy = (this.to.y - this.from.y);
+        var lEdge = Math.sqrt(dx * dx + dy * dy);
+
+        var lFrom = this.to.distanceToBorder(ctx, angle + Math.PI);
+        var pFrom = (lEdge - lFrom) / lEdge;
+        var xFrom = (pFrom) * this.from.x + (1 - pFrom) * this.to.x;
+        var yFrom = (pFrom) * this.from.y + (1 - pFrom) * this.to.y;
+
+        var lTo = this.to.distanceToBorder(ctx, angle);
+        var pTo = (lEdge - lTo) / lEdge;
+        var xTo = (1 - pTo) * this.from.x + pTo * this.to.x;
+        var yTo = (1 - pTo) * this.from.y + pTo * this.to.y;
+
+        ctx.beginPath();
+        ctx.moveTo(xFrom, yFrom);
+        ctx.lineTo(xTo, yTo);
+        ctx.stroke();
+
+        // draw arrow at the end of the line
+        length = 10 + 5 * this.width; // TODO: make customizable?
+        ctx.arrow(xTo, yTo, angle, length);
+        ctx.fill();
+        ctx.stroke();
+
+        // draw text
+        if (this.text) {
+            var point = this._pointOnLine(0.5);
+            this._text(ctx, this.text, point.x, point.y);
+        }
+    }
+    else {
+        // draw circle
+        var radius = this.length / 2 / Math.PI;
+        var x, y, arrow;
+        var node = this.from;
+        if (!node.width) {
+            node.resize(ctx);
+        }
+        if (node.width > node.height) {
+            x = node.x + node.width / 2;
+            y = node.y - radius;
+            arrow = {
+                x: x,
+                y: node.y,
+                angle: 0.9 * Math.PI
+            };
+        }
+        else {
+            x = node.x + radius;
+            y = node.y - node.height / 2;
+            arrow = {
+                x: node.x,
+                y: y,
+                angle: 0.6 * Math.PI
+            };
+        }
+        ctx.beginPath();
+        // TODO: do not draw a circle, but an arc
+        // TODO: similarly, for a line without arrows, draw to the border of the nodes instead of the center
+        ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
+        ctx.stroke();
+
+        // draw all arrows
+        length = 10 + 5 * this.width; // TODO: make customizable?
+        ctx.arrow(arrow.x, arrow.y, arrow.angle, length);
+        ctx.fill();
+        ctx.stroke();
+
+        // draw text
+        if (this.text) {
+            point = this._pointOnCircle(x, y, radius, 0.5);
+            this._text(ctx, this.text, point.x, point.y);
+        }
+    }
+};
+
+
+
+/**
+ * Calculate the distance between a point (x3,y3) and a line segment from
+ * (x1,y1) to (x2,y2).
+ * http://stackoverflow.com/questions/849211/shortest-distancae-between-a-point-and-a-line-segment
+ * @param {number} x1
+ * @param {number} y1
+ * @param {number} x2
+ * @param {number} y2
+ * @param {number} x3
+ * @param {number} y3
+ */
+Edge._dist = function (x1,y1, x2,y2, x3,y3) { // x3,y3 is the point
+    var px = x2-x1,
+        py = y2-y1,
+        something = px*px + py*py,
+        u =  ((x3 - x1) * px + (y3 - y1) * py) / something;
+
+    if (u > 1) {
+        u = 1;
+    }
+    else if (u < 0) {
+        u = 0;
+    }
+
+    var x = x1 + u * px,
+        y = y1 + u * py,
+        dx = x - x3,
+        dy = y - y3;
+
+    //# Note: If the actual distance does not matter,
+    //# if you only want to compare what this function
+    //# returns to other results of this function, you
+    //# can just return the squared distance instead
+    //# (i.e. remove the sqrt) to gain a little performance
+
+    return Math.sqrt(dx*dx + dy*dy);
+};
diff --git a/src/graph/Graph.js b/src/graph/Graph.js
index 82bb2b75..d0d1915b 100644
--- a/src/graph/Graph.js
+++ b/src/graph/Graph.js
@@ -57,10 +57,10 @@ function Graph (container, data, options) {
         "maxIterations": 1000  // maximum number of iteration to stabilize
     };
 
-    this.nodes = [];     // array with Node objects
-    this.edges = [];     // array with Edge objects
-    this.images = new Graph.Images();     // object with images
-    this.groups = new Graph.Groups();     // object with groups
+    this.nodes = [];            // array with Node objects
+    this.edges = [];            // array with Edge objects
+    this.images = new Images(); // object with images
+    this.groups = new Groups(); // object with groups
 
     // properties of the data
     this.moving = false;    // True if any of the nodes have an undefined position
@@ -646,7 +646,7 @@ Graph.prototype._checkShowPopup = function (x, y) {
         if (this.popupNode != lastPopupNode) {
             var me = this;
             if (!me.popup) {
-                me.popup = new Graph.Popup(me.frame);
+                me.popup = new Popup(me.frame);
             }
 
             // adjust a small offset such that the mouse cursor is located in the
@@ -1066,7 +1066,7 @@ Graph.prototype._createNode = function(properties) {
 
     if (action === "create") {
         // create the node
-        newNode = new Graph.Node(properties, this.images, this.groups, this.constants);
+        newNode = new Node(properties, this.images, this.groups, this.constants);
         id = properties.id;
         index = (id !== undefined) ? this._findNode(id) : undefined;
 
@@ -1119,7 +1119,7 @@ Graph.prototype._createNode = function(properties) {
         }
         else {
             // create node
-            newNode = new Graph.Node(properties, this.images, this.groups, this.constants);
+            newNode = new Node(properties, this.images, this.groups, this.constants);
             this.nodes.push(newNode);
 
             if (!newNode.isFixed()) {
@@ -1174,7 +1174,7 @@ Graph.prototype._findNode = function (id) {
 /**
  * Find a node by its rowNumber
  * @param {Number} row                   Row number of the node
- * @return {Graph.Node} node     The node with the given row number, or
+ * @return {Node} node     The node with the given row number, or
  *                                       undefined when not found.
  */
 Graph.prototype._findNodeByRow = function (row) {
@@ -1232,7 +1232,7 @@ Graph.prototype._createEdge = function(properties) {
         // create the edge, or replace it if already existing
         id = properties.id;
         index = (id !== undefined) ? this._findEdge(id) : undefined;
-        edge = new Graph.Edge(properties, this, this.constants);
+        edge = new Edge(properties, this, this.constants);
 
         if (index !== undefined) {
             // replace existing edge
@@ -1268,7 +1268,7 @@ Graph.prototype._createEdge = function(properties) {
         }
         else {
             // add new edge
-            edge = new Graph.Edge(properties, this, this.constants);
+            edge = new Edge(properties, this, this.constants);
             edge.from.attachEdge(edge);
             edge.to.attachEdge(edge);
             this.edges.push(edge);
@@ -1336,7 +1336,7 @@ Graph.prototype._findEdge = function (id) {
 /**
  * Find a edge by its row
  * @param {Number} row          Row of the edge
- * @return {Graph.Edge} the found edge, or undefined when not found
+ * @return {Edge} the found edge, or undefined when not found
  */
 Graph.prototype._findEdgeByRow = function (row) {
     return this.edges[row];
@@ -1804,2221 +1804,3 @@ Graph.prototype.stop = function () {
         this.timer = undefined;
     }
 };
-
-
-/**--------------------------------------------------------------------------**/
-
-
-/**
- * @class Node
- * A node. A node can be connected to other nodes via one or multiple edges.
- * @param {object} properties An object containing properties for the node. All
- *                            properties are optional, except for the id.
- *                              {number} id     Id of the node. Required
- *                              {string} text   Title for the node
- *                              {number} x      Horizontal position of the node
- *                              {number} y      Vertical position of the node
- *                              {string} style  Drawing style, available:
- *                                              "database", "circle", "rect",
- *                                              "image", "text", "dot", "star",
- *                                              "triangle", "triangleDown",
- *                                              "square"
- *                              {string} image  An image url
- *                              {string} title  An title text, can be HTML
- *                              {anytype} group A group name or number
- * @param {Graph.Images} imagelist    A list with images. Only needed
- *                                            when the node has an image
- * @param {Graph.Groups} grouplist    A list with groups. Needed for
- *                                            retrieving group properties
- * @param {Object}               constants    An object with default values for
- *                                            example for the color
- */
-Graph.Node = function (properties, imagelist, grouplist, constants) {
-    this.selected = false;
-
-    this.edges = []; // all edges connected to this node
-    this.group = constants.nodes.group;
-
-    this.fontSize = constants.nodes.fontSize;
-    this.fontFace = constants.nodes.fontFace;
-    this.fontColor = constants.nodes.fontColor;
-
-    this.borderColor = constants.nodes.borderColor;
-    this.backgroundColor = constants.nodes.backgroundColor;
-    this.highlightColor = constants.nodes.highlightColor;
-
-    // set defaults for the properties
-    this.id = undefined;
-    this.style = constants.nodes.style;
-    this.image = constants.nodes.image;
-    this.x = 0;
-    this.y = 0;
-    this.xFixed = false;
-    this.yFixed = false;
-    this.radius = constants.nodes.radius;
-    this.radiusFixed = false;
-    this.radiusMin = constants.nodes.radiusMin;
-    this.radiusMax = constants.nodes.radiusMax;
-
-    this.imagelist = imagelist;
-    this.grouplist = grouplist;
-
-    this.setProperties(properties, constants);
-
-    // mass, force, velocity
-    this.mass = 50;  // kg (mass is adjusted for the number of connected edges)
-    this.fx = 0.0;  // external force x
-    this.fy = 0.0;  // external force y
-    this.vx = 0.0;  // velocity x
-    this.vy = 0.0;  // velocity y
-    this.minForce = constants.minForce;
-    this.damping = 0.9; // damping factor
-};
-
-/**
- * Attach a edge to the node
- * @param {Graph.Edge} edge
- */
-Graph.Node.prototype.attachEdge = function(edge) {
-    this.edges.push(edge);
-    this._updateMass();
-};
-
-/**
- * Detach a edge from the node
- * @param {Graph.Edge} edge
- */
-Graph.Node.prototype.detachEdge = function(edge) {
-    var index = this.edges.indexOf(edge);
-    if (index != -1) {
-        this.edges.splice(index, 1);
-    }
-    this._updateMass();
-};
-
-/**
- * Update the nodes mass, which is determined by the number of edges connecting
- * to it (more edges -> heavier node).
- * @private
- */
-Graph.Node.prototype._updateMass = function() {
-    this.mass = 50 + 20 * this.edges.length; // kg
-};
-
-/**
- * Set or overwrite properties for the node
- * @param {Object} properties an object with properties
- * @param {Object} constants  and object with default, global properties
- */
-Graph.Node.prototype.setProperties = function(properties, constants) {
-    if (!properties) {
-        return;
-    }
-
-    // basic properties
-    if (properties.id != undefined)        {this.id = properties.id;}
-    if (properties.text != undefined)      {this.text = properties.text;}
-    if (properties.title != undefined)     {this.title = properties.title;}
-    if (properties.group != undefined)     {this.group = properties.group;}
-    if (properties.x != undefined)         {this.x = properties.x;}
-    if (properties.y != undefined)         {this.y = properties.y;}
-    if (properties.value != undefined)     {this.value = properties.value;}
-
-    if (this.id === undefined) {
-        throw "Node must have an id";
-    }
-
-    // copy group properties
-    if (this.group) {
-        var groupObj = this.grouplist.get(this.group);
-        for (var prop in groupObj) {
-            if (groupObj.hasOwnProperty(prop)) {
-                this[prop] = groupObj[prop];
-            }
-        }
-    }
-
-    // individual style properties
-    if (properties.style != undefined)          {this.style = properties.style;}
-    if (properties.image != undefined)          {this.image = properties.image;}
-    if (properties.radius != undefined)         {this.radius = properties.radius;}
-    if (properties.borderColor != undefined)    {this.borderColor = properties.borderColor;}
-    if (properties.backgroundColor != undefined){this.backgroundColor = properties.backgroundColor;}
-    if (properties.highlightColor != undefined) {this.highlightColor = properties.highlightColor;}
-    if (properties.fontColor != undefined)      {this.fontColor = properties.fontColor;}
-    if (properties.fontSize != undefined)       {this.fontSize = properties.fontSize;}
-    if (properties.fontFace != undefined)       {this.fontFace = properties.fontFace;}
-
-
-    if (this.image != undefined) {
-        if (this.imagelist) {
-            this.imageObj = this.imagelist.load(this.image);
-        }
-        else {
-            throw "No imagelist provided";
-        }
-    }
-
-    this.xFixed = this.xFixed || (properties.x != undefined);
-    this.yFixed = this.yFixed || (properties.y != undefined);
-    this.radiusFixed = this.radiusFixed || (properties.radius != undefined);
-
-    if (this.style == 'image') {
-        this.radiusMin = constants.nodes.widthMin;
-        this.radiusMax = constants.nodes.widthMax;
-    }
-
-    // choose draw method depending on the style
-    var style = this.style;
-    switch (style) {
-        case 'database':      this.draw = this._drawDatabase; this.resize = this._resizeDatabase; break;
-        case 'rect':          this.draw = this._drawRect; this.resize = this._resizeRect; break;
-        case 'circle':        this.draw = this._drawCircle; this.resize = this._resizeCircle; break;
-        // TODO: add ellipse shape
-        // TODO: add diamond shape
-        case 'image':         this.draw = this._drawImage; this.resize = this._resizeImage; break;
-        case 'text':          this.draw = this._drawText; this.resize = this._resizeText; break;
-        case 'dot':           this.draw = this._drawDot; this.resize = this._resizeShape; break;
-        case 'square':        this.draw = this._drawSquare; this.resize = this._resizeShape; break;
-        case 'triangle':      this.draw = this._drawTriangle; this.resize = this._resizeShape; break;
-        case 'triangleDown':  this.draw = this._drawTriangleDown; this.resize = this._resizeShape; break;
-        case 'star':          this.draw = this._drawStar; this.resize = this._resizeShape; break;
-        default:              this.draw = this._drawRect; this.resize = this._resizeRect; break;
-    }
-
-    // reset the size of the node, this can be changed
-    this._reset();
-};
-
-/**
- * select this node
- */
-Graph.Node.prototype.select = function() {
-    this.selected = true;
-    this._reset();
-};
-
-/**
- * unselect this node
- */
-Graph.Node.prototype.unselect = function() {
-    this.selected = false;
-    this._reset();
-};
-
-/**
- * Reset the calculated size of the node, forces it to recalculate its size
- */
-Graph.Node.prototype._reset = function() {
-    this.width = undefined;
-    this.height = undefined;
-};
-
-/**
- * get the title of this node.
- * @return {string} title    The title of the node, or undefined when no title
- *                           has been set.
- */
-Graph.Node.prototype.getTitle = function() {
-    return this.title;
-};
-
-/**
- * Calculate the distance to the border of the Node
- * @param {CanvasRenderingContext2D}   ctx
- * @param {Number} angle        Angle in radians
- * @returns {number} distance   Distance to the border in pixels
- */
-Graph.Node.prototype.distanceToBorder = function (ctx, angle) {
-    var borderWidth = 1;
-
-    if (!this.width) {
-        this.resize(ctx);
-    }
-
-    //noinspection FallthroughInSwitchStatementJS
-    switch (this.style) {
-        case 'circle':
-        case 'dot':
-            return this.radius + borderWidth;
-
-        // TODO: implement distanceToBorder for database
-        // TODO: implement distanceToBorder for triangle
-        // TODO: implement distanceToBorder for triangleDown
-
-        case 'rect':
-        case 'image':
-        case 'text':
-        default:
-            if (this.width) {
-                return Math.min(
-                    Math.abs(this.width / 2 / Math.cos(angle)),
-                    Math.abs(this.height / 2 / Math.sin(angle))) + borderWidth;
-                // TODO: reckon with border radius too in case of rect
-            }
-            else {
-                return 0;
-            }
-
-    }
-
-    // TODO: implement calculation of distance to border for all shapes
-};
-
-/**
- * Set forces acting on the node
- * @param {number} fx   Force in horizontal direction
- * @param {number} fy   Force in vertical direction
- */
-Graph.Node.prototype._setForce = function(fx, fy) {
-    this.fx = fx;
-    this.fy = fy;
-};
-
-/**
- * Add forces acting on the node
- * @param {number} fx   Force in horizontal direction
- * @param {number} fy   Force in vertical direction
- */
-Graph.Node.prototype._addForce = function(fx, fy) {
-    this.fx += fx;
-    this.fy += fy;
-};
-
-/**
- * Perform one discrete step for the node
- * @param {number} interval    Time interval in seconds
- */
-Graph.Node.prototype.discreteStep = function(interval) {
-    if (!this.xFixed) {
-        var dx   = -this.damping * this.vx;     // damping force
-        var ax   = (this.fx + dx) / this.mass;  // acceleration
-        this.vx += ax / interval;               // velocity
-        this.x  += this.vx / interval;          // position
-    }
-
-    if (!this.yFixed) {
-        var dy   = -this.damping * this.vy;     // damping force
-        var ay   = (this.fy + dy) / this.mass;  // acceleration
-        this.vy += ay / interval;               // velocity
-        this.y  += this.vy / interval;          // position
-    }
-};
-
-
-/**
- * Check if this node has a fixed x and y position
- * @return {boolean}      true if fixed, false if not
- */
-Graph.Node.prototype.isFixed = function() {
-    return (this.xFixed && this.yFixed);
-};
-
-/**
- * Check if this node is moving
- * @param {number} vmin   the minimum velocity considered as "moving"
- * @return {boolean}      true if moving, false if it has no velocity
- */
-// TODO: replace this method with calculating the kinetic energy
-Graph.Node.prototype.isMoving = function(vmin) {
-    return (Math.abs(this.vx) > vmin || Math.abs(this.vy) > vmin ||
-        (!this.xFixed && Math.abs(this.fx) > this.minForce) ||
-        (!this.yFixed && Math.abs(this.fy) > this.minForce));
-};
-
-/**
- * check if this node is selecte
- * @return {boolean} selected   True if node is selected, else false
- */
-Graph.Node.prototype.isSelected = function() {
-    return this.selected;
-};
-
-/**
- * Retrieve the value of the node. Can be undefined
- * @return {Number} value
- */
-Graph.Node.prototype.getValue = function() {
-    return this.value;
-};
-
-/**
- * Calculate the distance from the nodes location to the given location (x,y)
- * @param {Number} x
- * @param {Number} y
- * @return {Number} value
- */
-Graph.Node.prototype.getDistance = function(x, y) {
-    var dx = this.x - x,
-        dy = this.y - y;
-    return Math.sqrt(dx * dx + dy * dy);
-};
-
-
-/**
- * Adjust the value range of the node. The node will adjust it's radius
- * based on its value.
- * @param {Number} min
- * @param {Number} max
- */
-Graph.Node.prototype.setValueRange = function(min, max) {
-    if (!this.radiusFixed && this.value !== undefined) {
-        var scale = (this.radiusMax - this.radiusMin) / (max - min);
-        this.radius = (this.value - min) * scale + this.radiusMin;
-    }
-};
-
-/**
- * Draw this node in the given canvas
- * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
- * @param {CanvasRenderingContext2D}   ctx
- */
-Graph.Node.prototype.draw = function(ctx) {
-    throw "Draw method not initialized for node";
-};
-
-/**
- * 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
- */
-Graph.Node.prototype.resize = function(ctx) {
-    throw "Resize method not initialized for node";
-};
-
-/**
- * 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
- */
-Graph.Node.prototype.isOverlappingWith = function(obj) {
-    return (this.left          < obj.right &&
-        this.left + this.width > obj.left &&
-        this.top               < obj.bottom &&
-        this.top + this.height > obj.top);
-};
-
-Graph.Node.prototype._resizeImage = function (ctx) {
-    // TODO: pre calculate the image size
-    if (!this.width) {  // undefined or 0
-        var width, height;
-        if (this.value) {
-            var scale = this.imageObj.height / this.imageObj.width;
-            width = this.radius || this.imageObj.width;
-            height = this.radius * scale || this.imageObj.height;
-        }
-        else {
-            width = this.imageObj.width;
-            height = this.imageObj.height;
-        }
-        this.width  = width;
-        this.height = height;
-    }
-};
-
-Graph.Node.prototype._drawImage = function (ctx) {
-    this._resizeImage(ctx);
-
-    this.left   = this.x - this.width / 2;
-    this.top    = this.y - this.height / 2;
-
-    var yText;
-    if (this.imageObj) {
-        ctx.drawImage(this.imageObj, this.left, this.top, this.width, this.height);
-        yText = this.y + this.height / 2;
-    }
-    else {
-        // image still loading... just draw the text for now
-        yText = this.y;
-    }
-
-    this._text(ctx, this.text, this.x, yText, undefined, "top");
-};
-
-
-Graph.Node.prototype._resizeRect = function (ctx) {
-    if (!this.width) {
-        var margin = 5;
-        var textSize = this.getTextSize(ctx);
-        this.width = textSize.width + 2 * margin;
-        this.height = textSize.height + 2 * margin;
-    }
-};
-
-Graph.Node.prototype._drawRect = function (ctx) {
-    this._resizeRect(ctx);
-
-    this.left = this.x - this.width / 2;
-    this.top = this.y - this.height / 2;
-
-    ctx.strokeStyle = this.borderColor;
-    ctx.fillStyle = this.selected ? this.highlightColor : this.backgroundColor;
-    ctx.lineWidth = this.selected ? 2.0 : 1.0;
-    ctx.roundRect(this.left, this.top, this.width, this.height, this.radius);
-    ctx.fill();
-    ctx.stroke();
-
-    this._text(ctx, this.text, this.x, this.y);
-};
-
-
-Graph.Node.prototype._resizeDatabase = function (ctx) {
-    if (!this.width) {
-        var margin = 5;
-        var textSize = this.getTextSize(ctx);
-        var size = textSize.width + 2 * margin;
-        this.width = size;
-        this.height = size;
-    }
-};
-
-Graph.Node.prototype._drawDatabase = function (ctx) {
-    this._resizeDatabase(ctx);
-    this.left = this.x - this.width / 2;
-    this.top = this.y - this.height / 2;
-
-    ctx.strokeStyle = this.borderColor;
-    ctx.fillStyle = this.selected ? this.highlightColor : this.backgroundColor;
-    ctx.lineWidth = this.selected ? 2.0 : 1.0;
-    ctx.database(this.x - this.width/2, this.y - this.height*0.5, this.width, this.height);
-    ctx.fill();
-    ctx.stroke();
-
-    this._text(ctx, this.text, this.x, this.y);
-};
-
-
-Graph.Node.prototype._resizeCircle = function (ctx) {
-    if (!this.width) {
-        var margin = 5;
-        var textSize = this.getTextSize(ctx);
-        var diameter = Math.max(textSize.width, textSize.height) + 2 * margin;
-        this.radius = diameter / 2;
-
-        this.width = diameter;
-        this.height = diameter;
-    }
-};
-
-Graph.Node.prototype._drawCircle = function (ctx) {
-    this._resizeCircle(ctx);
-    this.left = this.x - this.width / 2;
-    this.top = this.y - this.height / 2;
-
-    ctx.strokeStyle = this.borderColor;
-    ctx.fillStyle = this.selected ? this.highlightColor : this.backgroundColor;
-    ctx.lineWidth = this.selected ? 2.0 : 1.0;
-    ctx.circle(this.x, this.y, this.radius);
-    ctx.fill();
-    ctx.stroke();
-
-    this._text(ctx, this.text, this.x, this.y);
-};
-
-Graph.Node.prototype._drawDot = function (ctx) {
-    this._drawShape(ctx, 'circle');
-};
-
-Graph.Node.prototype._drawTriangle = function (ctx) {
-    this._drawShape(ctx, 'triangle');
-};
-
-Graph.Node.prototype._drawTriangleDown = function (ctx) {
-    this._drawShape(ctx, 'triangleDown');
-};
-
-Graph.Node.prototype._drawSquare = function (ctx) {
-    this._drawShape(ctx, 'square');
-};
-
-Graph.Node.prototype._drawStar = function (ctx) {
-    this._drawShape(ctx, 'star');
-};
-
-Graph.Node.prototype._resizeShape = function (ctx) {
-    if (!this.width) {
-        var size = 2 * this.radius;
-        this.width = size;
-        this.height = size;
-    }
-};
-
-Graph.Node.prototype._drawShape = function (ctx, shape) {
-    this._resizeShape(ctx);
-
-    this.left = this.x - this.width / 2;
-    this.top = this.y - this.height / 2;
-
-    ctx.strokeStyle = this.borderColor;
-    ctx.fillStyle = this.selected ? this.highlightColor : this.backgroundColor;
-    ctx.lineWidth = this.selected ? 2.0 : 1.0;
-
-    ctx[shape](this.x, this.y, this.radius);
-    ctx.fill();
-    ctx.stroke();
-
-    if (this.text) {
-        this._text(ctx, this.text, this.x, this.y + this.height / 2, undefined, 'top');
-    }
-};
-
-Graph.Node.prototype._resizeText = function (ctx) {
-    if (!this.width) {
-        var margin = 5;
-        var textSize = this.getTextSize(ctx);
-        this.width = textSize.width + 2 * margin;
-        this.height = textSize.height + 2 * margin;
-    }
-};
-
-Graph.Node.prototype._drawText = function (ctx) {
-    this._resizeText(ctx);
-    this.left = this.x - this.width / 2;
-    this.top = this.y - this.height / 2;
-
-    this._text(ctx, this.text, this.x, this.y);
-};
-
-
-Graph.Node.prototype._text = function (ctx, text, x, y, align, baseline) {
-    if (text) {
-        ctx.font = (this.selected ? "bold " : "") + this.fontSize + "px " + this.fontFace;
-        ctx.fillStyle = this.fontColor || "black";
-        ctx.textAlign = align || "center";
-        ctx.textBaseline = baseline || "middle";
-
-        var lines = text.split('\n'),
-            lineCount = lines.length,
-            fontSize = (this.fontSize + 4),
-            yLine = y + (1 - lineCount) / 2 * fontSize;
-
-        for (var i = 0; i < lineCount; i++) {
-            ctx.fillText(lines[i], x, yLine);
-            yLine += fontSize;
-        }
-    }
-};
-
-
-Graph.Node.prototype.getTextSize = function(ctx) {
-    if (this.text != undefined) {
-        ctx.font = (this.selected ? "bold " : "") + this.fontSize + "px " + this.fontFace;
-
-        var lines = this.text.split('\n'),
-            height = (this.fontSize + 4) * lines.length,
-            width = 0;
-
-        for (var i = 0, iMax = lines.length; i < iMax; i++) {
-            width = Math.max(width, ctx.measureText(lines[i]).width);
-        }
-
-        return {"width": width, "height": height};
-    }
-    else {
-        return {"width": 0, "height": 0};
-    }
-};
-
-
-
-/**--------------------------------------------------------------------------**/
-
-
-/**
- * @class Edge
- *
- * A edge connects two nodes
- * @param {Object} properties     Object with properties. Must contain
- *                                At least properties from and to.
- *                                Available properties: from (number),
- *                                to (number), color (string),
- *                                width (number), style (string),
- *                                length (number), title (string)
- * @param {Graph} graph A graph object, used to find and edge to
- *                                nodes.
- * @param {Object} constants      An object with default values for
- *                                example for the color
- */
-Graph.Edge = function (properties, graph, constants) {
-    if (!graph) {
-        throw "No graph provided";
-    }
-    this.graph = graph;
-
-    // initialize constants
-    this.widthMin = constants.edges.widthMin;
-    this.widthMax = constants.edges.widthMax;
-
-    // initialize variables
-    this.id     = undefined;
-    this.style  = constants.edges.style;
-    this.title  = undefined;
-    this.width  = constants.edges.width;
-    this.value  = undefined;
-    this.length = constants.edges.length;
-
-    // Added to support dashed lines
-    // David Jordan
-    // 2012-08-08
-    this.dashlength = constants.edges.dashlength;
-    this.dashgap = constants.edges.dashgap;
-    this.altdashlength  = constants.edges.altdashlength;
-
-    this.stiffness = undefined; // depends on the length of the edge
-    this.color  = constants.edges.color;
-    this.widthFixed = false;
-    this.lengthFixed = false;
-
-    this.setProperties(properties, constants);
-};
-
-/**
- * Set or overwrite properties for the edge
- * @param {Object} properties  an object with properties
- * @param {Object} constants   and object with default, global properties
- */
-Graph.Edge.prototype.setProperties = function(properties, constants) {
-    if (!properties) {
-        return;
-    }
-
-    if (properties.from != undefined) {this.from = this.graph._getNode(properties.from);}
-    if (properties.to != undefined) {this.to = this.graph._getNode(properties.to);}
-
-    if (properties.id != undefined)         {this.id = properties.id;}
-    if (properties.style != undefined)      {this.style = properties.style;}
-    if (properties.text != undefined)       {this.text = properties.text;}
-    if (this.text) {
-        this.fontSize = constants.edges.fontSize;
-        this.fontFace = constants.edges.fontFace;
-        this.fontColor = constants.edges.fontColor;
-        if (properties.fontColor != undefined)  {this.fontColor = properties.fontColor;}
-        if (properties.fontSize != undefined)   {this.fontSize = properties.fontSize;}
-        if (properties.fontFace != undefined)   {this.fontFace = properties.fontFace;}
-    }
-    if (properties.title != undefined)      {this.title = properties.title;}
-    if (properties.width != undefined)      {this.width = properties.width;}
-    if (properties.value != undefined)      {this.value = properties.value;}
-    if (properties.length != undefined)     {this.length = properties.length;}
-
-    // Added to support dashed lines
-    // David Jordan
-    // 2012-08-08
-    if (properties.dashlength != undefined) {this.dashlength = properties.dashlength;}
-    if (properties.dashgap != undefined) {this.dashgap = properties.dashgap;}
-    if (properties.altdashlength != undefined) {this.altdashlength = properties.altdashlength;}
-
-    if (properties.color != undefined) {this.color = properties.color;}
-
-    if (!this.from) {
-        throw "Node with id " + properties.from + " not found";
-    }
-    if (!this.to) {
-        throw "Node with id " + properties.to + " not found";
-    }
-
-    this.widthFixed = this.widthFixed || (properties.width != undefined);
-    this.lengthFixed = this.lengthFixed || (properties.length != undefined);
-
-    this.stiffness = 1 / this.length;
-
-    // initialize animation
-    if (this.style === 'arrow') {
-        this.arrows = [0.5];
-    }
-
-    // set draw method based on style
-    switch (this.style) {
-        case 'line':          this.draw = this._drawLine; break;
-        case 'arrow':         this.draw = this._drawArrow; break;
-        case 'arrow-end':     this.draw = this._drawArrowEnd; break;
-        case 'dash-line':     this.draw = this._drawDashLine; break;
-        default:              this.draw = this._drawLine; break;
-    }
-};
-
-/**
- * get the title of this edge.
- * @return {string} title    The title of the edge, or undefined when no title
- *                           has been set.
- */
-Graph.Edge.prototype.getTitle = function() {
-    return this.title;
-};
-
-
-/**
- * Retrieve the value of the edge. Can be undefined
- * @return {Number} value
- */
-Graph.Edge.prototype.getValue = function() {
-    return this.value;
-}
-
-/**
- * Adjust the value range of the edge. The edge will adjust it's width
- * based on its value.
- * @param {Number} min
- * @param {Number} max
- */
-Graph.Edge.prototype.setValueRange = function(min, max) {
-    if (!this.widthFixed && this.value !== undefined) {
-        var factor = (this.widthMax - this.widthMin) / (max - min);
-        this.width = (this.value - min) * factor + this.widthMin;
-    }
-};
-
-
-/**
- * Check if the length is fixed.
- * @return {boolean} lengthFixed   True if the length is fixed, else false
- */
-Graph.Edge.prototype.isLengthFixed = function() {
-    return this.lengthFixed;
-};
-
-/**
- * Retrieve the length of the edge. Can be undefined
- * @return {Number} length
- */
-Graph.Edge.prototype.getLength = function() {
-    return this.length;
-};
-
-/**
- * Adjust the length of the edge. This can only be done when the length
- * is not fixed (which is the case when the edge is created with a length property)
- * @param {Number} length
- */
-Graph.Edge.prototype.setLength = function(length) {
-    if (!this.lengthFixed) {
-        this.length = length;
-    }
-};
-
-/**
- * Retrieve the length of the edges dashes. Can be undefined
- * @author David Jordan
- * @date 2012-08-08
- * @return {Number} dashlength
- */
-Graph.Edge.prototype.getDashLength = function() {
-    return this.dashlength;
-};
-
-/**
- * Adjust the length of the edges dashes.
- * @author David Jordan
- * @date 2012-08-08
- * @param {Number} dashlength
- */
-Graph.Edge.prototype.setDashLength = function(dashlength) {
-    this.dashlength = dashlength;
-};
-
-/**
- * Retrieve the length of the edges dashes gaps. Can be undefined
- * @author David Jordan
- * @date 2012-08-08
- * @return {Number} dashgap
- */
-Graph.Edge.prototype.getDashGap = function() {
-    return this.dashgap;
-};
-
-/**
- * Adjust the length of the edges dashes gaps.
- * @author David Jordan
- * @date 2012-08-08
- * @param {Number} dashgap
- */
-Graph.Edge.prototype.setDashGap = function(dashgap) {
-    this.dashgap = dashgap;
-};
-
-/**
- * Retrieve the length of the edges alternate dashes. Can be undefined
- * @author David Jordan
- * @date 2012-08-08
- * @return {Number} altdashlength
- */
-Graph.Edge.prototype.getAltDashLength = function() {
-    return this.altdashlength;
-};
-
-/**
- * Adjust the length of the edges alternate dashes.
- * @author David Jordan
- * @date 2012-08-08
- * @param {Number} altdashlength
- */
-Graph.Edge.prototype.setAltDashLength = function(altdashlength) {
-    this.altdashlength = altdashlength;
-};
-
-
-
-/**
- * Redraw a edge
- * Draw this edge in the given canvas
- * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
- * @param {CanvasRenderingContext2D}   ctx
- */
-Graph.Edge.prototype.draw = function(ctx) {
-    throw "Method draw not initialized in edge";
-};
-
-
-/**
- * Check if this object is overlapping with the provided object
- * @param {Object} obj   an object with parameters left, top
- * @return {boolean}     True if location is located on the edge
- */
-Graph.Edge.prototype.isOverlappingWith = function(obj) {
-    var distMax = 10;
-
-    var xFrom = this.from.x;
-    var yFrom = this.from.y;
-    var xTo = this.to.x;
-    var yTo = this.to.y;
-    var xObj = obj.left;
-    var yObj = obj.top;
-
-
-    var dist = Graph._dist(xFrom, yFrom, xTo, yTo, xObj, yObj);
-
-    return (dist < distMax);
-};
-
-/**
- * Calculate the distance between a point (x3,y3) and a line segment from
- * (x1,y1) to (x2,y2).
- * http://stackoverflow.com/questions/849211/shortest-distancae-between-a-point-and-a-line-segment
- * @param {number} x1
- * @param {number} y1
- * @param {number} x2
- * @param {number} y2
- * @param {number} x3
- * @param {number} y3
- */
-Graph._dist = function (x1,y1, x2,y2, x3,y3) { // x3,y3 is the point
-    var px = x2-x1,
-        py = y2-y1,
-        something = px*px + py*py,
-        u =  ((x3 - x1) * px + (y3 - y1) * py) / something;
-
-    if (u > 1) {
-        u = 1;
-    }
-    else if (u < 0) {
-        u = 0;
-    }
-
-    var x = x1 + u * px,
-        y = y1 + u * py,
-        dx = x - x3,
-        dy = y - y3;
-
-    //# Note: If the actual distance does not matter,
-    //# if you only want to compare what this function
-    //# returns to other results of this function, you
-    //# can just return the squared distance instead
-    //# (i.e. remove the sqrt) to gain a little performance
-
-    return Math.sqrt(dx*dx + dy*dy);
-};
-
-/**
- * Redraw a edge as a line
- * Draw this edge in the given canvas
- * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
- * @param {CanvasRenderingContext2D}   ctx
- */
-Graph.Edge.prototype._drawLine = function(ctx) {
-    // set style
-    ctx.strokeStyle = this.color;
-    ctx.lineWidth = this._getLineWidth();
-
-    var point;
-    if (this.from != this.to) {
-        // draw line
-        this._line(ctx);
-
-        // draw text
-        if (this.text) {
-            point = this._pointOnLine(0.5);
-            this._text(ctx, this.text, point.x, point.y);
-        }
-    }
-    else {
-        var radius = this.length / 2 / Math.PI;
-        var x, y;
-        var node = this.from;
-        if (!node.width) {
-            node.resize(ctx);
-        }
-        if (node.width > node.height) {
-            x = node.x + node.width / 2;
-            y = node.y - radius;
-        }
-        else {
-            x = node.x + radius;
-            y = node.y - node.height / 2;
-        }
-        this._circle(ctx, x, y, radius);
-        point = this._pointOnCircle(x, y, radius, 0.5);
-        this._text(ctx, this.text, point.x, point.y);
-    }
-};
-
-/**
- * Get the line width of the edge. Depends on width and whether one of the
- * connected nodes is selected.
- * @return {Number} width
- * @private
- */
-Graph.Edge.prototype._getLineWidth = function() {
-    if (this.from.selected || this.to.selected) {
-        return Math.min(this.width * 2, this.widthMax);
-    }
-    else {
-        return this.width;
-    }
-};
-
-/**
- * Draw a line between two nodes
- * @param {CanvasRenderingContext2D} ctx
- * @private
- */
-Graph.Edge.prototype._line = function (ctx) {
-    // draw a straight line
-    ctx.beginPath();
-    ctx.moveTo(this.from.x, this.from.y);
-    ctx.lineTo(this.to.x, this.to.y);
-    ctx.stroke();
-};
-
-/**
- * Draw a line from a node to itself, a circle
- * @param {CanvasRenderingContext2D} ctx
- * @param {Number} x
- * @param {Number} y
- * @param {Number} radius
- * @private
- */
-Graph.Edge.prototype._circle = function (ctx, x, y, radius) {
-    // draw a circle
-    ctx.beginPath();
-    ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
-    ctx.stroke();
-};
-
-/**
- * Draw text with white background and with the middle at (x, y)
- * @param {CanvasRenderingContext2D} ctx
- * @param {String} text
- * @param {Number} x
- * @param {Number} y
- */
-Graph.Edge.prototype._text = function (ctx, text, x, y) {
-    if (text) {
-        // TODO: cache the calculated size
-        ctx.font = ((this.from.selected || this.to.selected) ? "bold " : "") +
-            this.fontSize + "px " + this.fontFace;
-        ctx.fillStyle = 'white';
-        var width = ctx.measureText(this.text).width;
-        var height = this.fontSize;
-        var left = x - width / 2;
-        var top = y - height / 2;
-
-        ctx.fillRect(left, top, width, height);
-
-        // draw text
-        ctx.fillStyle = this.fontColor || "black";
-        ctx.textAlign = "left";
-        ctx.textBaseline = "top";
-        ctx.fillText(this.text, left, top);
-    }
-};
-
-/**
- * Sets up the dashedLine functionality for drawing
- * Original code came from http://stackoverflow.com/questions/4576724/dotted-stroke-in-canvas
- * @author David Jordan
- * @date 2012-08-08
- */
-var CP = (typeof window !== 'undefined') &&
-    window.CanvasRenderingContext2D &&
-    CanvasRenderingContext2D.prototype;
-if (CP && CP.lineTo){
-    CP.dashedLine = function(x,y,x2,y2,dashArray){
-        if (!dashArray) dashArray=[10,5];
-        if (dashLength==0) dashLength = 0.001; // Hack for Safari
-        var dashCount = dashArray.length;
-        this.moveTo(x, y);
-        var dx = (x2-x), dy = (y2-y);
-        var slope = dy/dx;
-        var distRemaining = Math.sqrt( dx*dx + dy*dy );
-        var dashIndex=0, draw=true;
-        while (distRemaining>=0.1){
-            var dashLength = dashArray[dashIndex++%dashCount];
-            if (dashLength > distRemaining) dashLength = distRemaining;
-            var xStep = Math.sqrt( dashLength*dashLength / (1 + slope*slope) );
-            if (dx<0) xStep = -xStep;
-            x += xStep
-            y += slope*xStep;
-            this[draw ? 'lineTo' : 'moveTo'](x,y);
-            distRemaining -= dashLength;
-            draw = !draw;
-        }
-    }
-}
-
-/**
- * Redraw a edge as a dashed line
- * Draw this edge in the given canvas
- * @author David Jordan
- * @date 2012-08-08
- * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
- * @param {CanvasRenderingContext2D}   ctx
- */
-Graph.Edge.prototype._drawDashLine = function(ctx) {
-    // set style
-    ctx.strokeStyle = this.color;
-    ctx.lineWidth = this._getLineWidth();
-
-    // draw dashed line
-    ctx.beginPath();
-    ctx.lineCap = 'round';
-    if (this.altdashlength != undefined) //If an alt dash value has been set add to the array this value
-    {
-        ctx.dashedLine(this.from.x,this.from.y,this.to.x,this.to.y,[this.dashlength,this.dashgap,this.altdashlength,this.dashgap]);
-    }
-    else if (this.dashlength != undefined && this.dashgap != undefined) //If a dash and gap value has been set add to the array this value
-    {
-        ctx.dashedLine(this.from.x,this.from.y,this.to.x,this.to.y,[this.dashlength,this.dashgap]);
-    }
-    else //If all else fails draw a line
-    {
-        ctx.moveTo(this.from.x, this.from.y);
-        ctx.lineTo(this.to.x, this.to.y);
-    }
-    ctx.stroke();
-
-    // draw text
-    if (this.text) {
-        var point = this._pointOnLine(0.5);
-        this._text(ctx, this.text, point.x, point.y);
-    }
-};
-
-/**
- * Get a point on a line
- * @param {Number} percentage. Value between 0 (line start) and 1 (line end)
- * @return {Object} point
- * @private
- */
-Graph.Edge.prototype._pointOnLine = function (percentage) {
-    return {
-        x: (1 - percentage) * this.from.x + percentage * this.to.x,
-        y: (1 - percentage) * this.from.y + percentage * this.to.y
-    }
-};
-
-/**
- * Get a point on a circle
- * @param {Number} x
- * @param {Number} y
- * @param {Number} radius
- * @param {Number} percentage. Value between 0 (line start) and 1 (line end)
- * @return {Object} point
- * @private
- */
-Graph.Edge.prototype._pointOnCircle = function (x, y, radius, percentage) {
-    var angle = (percentage - 3/8) * 2 * Math.PI;
-    return {
-        x: x + radius * Math.cos(angle),
-        y: y - radius * Math.sin(angle)
-    }
-};
-
-/**
- * Redraw a edge as a line with an arrow
- * Draw this edge in the given canvas
- * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
- * @param {CanvasRenderingContext2D}   ctx
- */
-Graph.Edge.prototype._drawArrow = function(ctx) {
-    var point;
-    // set style
-    ctx.strokeStyle = this.color;
-    ctx.fillStyle = this.color;
-    ctx.lineWidth = this._getLineWidth();
-
-    if (this.from != this.to) {
-        // draw line
-        this._line(ctx);
-
-        // draw all arrows
-        var angle = Math.atan2((this.to.y - this.from.y), (this.to.x - this.from.x));
-        var length = 10 + 5 * this.width; // TODO: make customizable?
-        for (var a in this.arrows) {
-            if (this.arrows.hasOwnProperty(a)) {
-                point = this._pointOnLine(this.arrows[a]);
-                ctx.arrow(point.x, point.y, angle, length);
-                ctx.fill();
-                ctx.stroke();
-            }
-        }
-
-        // draw text
-        if (this.text) {
-            point = this._pointOnLine(0.5);
-            this._text(ctx, this.text, point.x, point.y);
-        }
-    }
-    else {
-        // draw circle
-        var radius = this.length / 2 / Math.PI;
-        var x, y;
-        var node = this.from;
-        if (!node.width) {
-            node.resize(ctx);
-        }
-        if (node.width > node.height) {
-            x = node.x + node.width / 2;
-            y = node.y - radius;
-        }
-        else {
-            x = node.x + radius;
-            y = node.y - node.height / 2;
-        }
-        this._circle(ctx, x, y, radius);
-
-        // draw all arrows
-        var angle = 0.2 * Math.PI;
-        var length = 10 + 5 * this.width; // TODO: make customizable?
-        for (var a in this.arrows) {
-            if (this.arrows.hasOwnProperty(a)) {
-                point = this._pointOnCircle(x, y, radius, this.arrows[a]);
-                ctx.arrow(point.x, point.y, angle, length);
-                ctx.fill();
-                ctx.stroke();
-            }
-        }
-
-        // draw text
-        if (this.text) {
-            point = this._pointOnCircle(x, y, radius, 0.5);
-            this._text(ctx, this.text, point.x, point.y);
-        }
-    }
-};
-
-
-
-/**
- * Redraw a edge as a line with an arrow
- * Draw this edge in the given canvas
- * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
- * @param {CanvasRenderingContext2D}   ctx
- */
-Graph.Edge.prototype._drawArrowEnd = function(ctx) {
-    // set style
-    ctx.strokeStyle = this.color;
-    ctx.fillStyle = this.color;
-    ctx.lineWidth = this._getLineWidth();
-
-    // draw line
-    var angle, length;
-    if (this.from != this.to) {
-        // calculate length and angle of the line
-        angle = Math.atan2((this.to.y - this.from.y), (this.to.x - this.from.x));
-        var dx = (this.to.x - this.from.x);
-        var dy = (this.to.y - this.from.y);
-        var lEdge = Math.sqrt(dx * dx + dy * dy);
-
-        var lFrom = this.to.distanceToBorder(ctx, angle + Math.PI);
-        var pFrom = (lEdge - lFrom) / lEdge;
-        var xFrom = (pFrom) * this.from.x + (1 - pFrom) * this.to.x;
-        var yFrom = (pFrom) * this.from.y + (1 - pFrom) * this.to.y;
-
-        var lTo = this.to.distanceToBorder(ctx, angle);
-        var pTo = (lEdge - lTo) / lEdge;
-        var xTo = (1 - pTo) * this.from.x + pTo * this.to.x;
-        var yTo = (1 - pTo) * this.from.y + pTo * this.to.y;
-
-        ctx.beginPath();
-        ctx.moveTo(xFrom, yFrom);
-        ctx.lineTo(xTo, yTo);
-        ctx.stroke();
-
-        // draw arrow at the end of the line
-        length = 10 + 5 * this.width; // TODO: make customizable?
-        ctx.arrow(xTo, yTo, angle, length);
-        ctx.fill();
-        ctx.stroke();
-
-        // draw text
-        if (this.text) {
-            var point = this._pointOnLine(0.5);
-            this._text(ctx, this.text, point.x, point.y);
-        }
-    }
-    else {
-        // draw circle
-        var radius = this.length / 2 / Math.PI;
-        var x, y, arrow;
-        var node = this.from;
-        if (!node.width) {
-            node.resize(ctx);
-        }
-        if (node.width > node.height) {
-            x = node.x + node.width / 2;
-            y = node.y - radius;
-            arrow = {
-                x: x,
-                y: node.y,
-                angle: 0.9 * Math.PI
-            };
-        }
-        else {
-            x = node.x + radius;
-            y = node.y - node.height / 2;
-            arrow = {
-                x: node.x,
-                y: y,
-                angle: 0.6 * Math.PI
-            };
-        }
-        ctx.beginPath();
-        // TODO: do not draw a circle, but an arc
-        // TODO: similarly, for a line without arrows, draw to the border of the nodes instead of the center
-        ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
-        ctx.stroke();
-
-        // draw all arrows
-        length = 10 + 5 * this.width; // TODO: make customizable?
-        ctx.arrow(arrow.x, arrow.y, arrow.angle, length);
-        ctx.fill();
-        ctx.stroke();
-
-        // draw text
-        if (this.text) {
-            point = this._pointOnCircle(x, y, radius, 0.5);
-            this._text(ctx, this.text, point.x, point.y);
-        }
-    }
-
-};
-
-/**--------------------------------------------------------------------------**/
-
-
-/**
- * @class Images
- * This class loades images and keeps them stored.
- */
-Graph.Images = function () {
-    this.images = {};
-
-    this.callback = undefined;
-};
-
-/**
- * Set an onload callback function. This will be called each time an image
- * is loaded
- * @param {function} callback
- */
-Graph.Images.prototype.setOnloadCallback = function(callback) {
-    this.callback = callback;
-};
-
-
-/**
- *
- * @param {string} url          Url of the image
- * @return {Image} img          The image object
- */
-Graph.Images.prototype.load = function(url) {
-    var img = this.images[url];
-    if (img == undefined) {
-        // create the image
-        var images = this;
-        img = new Image();
-        this.images[url] = img;
-        img.onload = function() {
-            if (images.callback) {
-                images.callback(this);
-            }
-        };
-        img.src = url;
-    }
-
-    return img;
-};
-
-
-/**--------------------------------------------------------------------------**/
-
-
-/**
- * @class Groups
- * This class can store groups and properties specific for groups.
- */
-Graph.Groups = function () {
-    this.clear();
-    this.defaultIndex = 0;
-};
-
-
-/**
- * default constants for group colors
- */
-Graph.Groups.DEFAULT = [
-    {"borderColor": "#2B7CE9", "backgroundColor": "#97C2FC", "highlightColor": "#D2E5FF"}, // blue
-    {"borderColor": "#FFA500", "backgroundColor": "#FFFF00", "highlightColor": "#FFFFA3"}, // yellow
-    {"borderColor": "#FA0A10", "backgroundColor": "#FB7E81", "highlightColor": "#FFAFB1"}, // red
-    {"borderColor": "#41A906", "backgroundColor": "#7BE141", "highlightColor": "#A1EC76"}, // green
-    {"borderColor": "#E129F0", "backgroundColor": "#EB7DF4", "highlightColor": "#F0B3F5"}, // magenta
-    {"borderColor": "#7C29F0", "backgroundColor": "#AD85E4", "highlightColor": "#D3BDF0"}, // purple
-    {"borderColor": "#C37F00", "backgroundColor": "#FFA807", "highlightColor": "#FFCA66"}, // orange
-    {"borderColor": "#4220FB", "backgroundColor": "#6E6EFD", "highlightColor": "#9B9BFD"}, // darkblue
-    {"borderColor": "#FD5A77", "backgroundColor": "#FFC0CB", "highlightColor": "#FFD1D9"}, // pink
-    {"borderColor": "#4AD63A", "backgroundColor": "#C2FABC", "highlightColor": "#E6FFE3"}  // mint
-];
-
-
-/**
- * Clear all groups
- */
-Graph.Groups.prototype.clear = function () {
-    this.groups = {};
-    this.groups.length = function()
-    {
-        var i = 0;
-        for ( var p in this ) {
-            if (this.hasOwnProperty(p)) {
-                i++;
-            }
-        }
-        return i;
-    }
-};
-
-
-/**
- * get group properties of a groupname. If groupname is not found, a new group
- * is added.
- * @param {*} groupname        Can be a number, string, Date, etc.
- * @return {Object} group      The created group, containing all group properties
- */
-Graph.Groups.prototype.get = function (groupname) {
-    var group = this.groups[groupname];
-
-    if (group == undefined) {
-        // create new group
-        var index = this.defaultIndex % Graph.Groups.DEFAULT.length;
-        this.defaultIndex++;
-        group = {};
-        group.borderColor     = Graph.Groups.DEFAULT[index].borderColor;
-        group.backgroundColor = Graph.Groups.DEFAULT[index].backgroundColor;
-        group.highlightColor  = Graph.Groups.DEFAULT[index].highlightColor;
-        this.groups[groupname] = group;
-    }
-
-    return group;
-};
-
-/**
- * Add a custom group style
- * @param {String} groupname
- * @param {Object} style       An object containing borderColor,
- *                             backgroundColor, etc.
- * @return {Object} group      The created group object
- */
-Graph.Groups.prototype.add = function (groupname, style) {
-    this.groups[groupname] = style;
-    return style;
-};
-
-/**
- * Check if given object is a Javascript Array
- * @param {*} obj
- * @return {Boolean} isArray    true if the given object is an array
- */
-// See http://stackoverflow.com/questions/2943805/javascript-instanceof-typeof-in-gwt-jsni
-Graph.isArray = function (obj) {
-    if (obj instanceof Array) {
-        return true;
-    }
-    return (Object.prototype.toString.call(obj) === '[object Array]');
-};
-
-
-
-/**--------------------------------------------------------------------------**/
-
-
-/**
- * Popup is a class to create a popup window with some text
- * @param {Element}  container     The container object.
- * @param {Number} x
- * @param {Number} y
- * @param {String} text
- */
-Graph.Popup = function (container, x, y, text) {
-    if (container) {
-        this.container = container;
-    }
-    else {
-        this.container = document.body;
-    }
-    this.x = 0;
-    this.y = 0;
-    this.padding = 5;
-
-    if (x !== undefined && y !== undefined ) {
-        this.setPosition(x, y);
-    }
-    if (text !== undefined) {
-        this.setText(text);
-    }
-
-    // create the frame
-    this.frame = document.createElement("div");
-    var style = this.frame.style;
-    style.position = "absolute";
-    style.visibility = "hidden";
-    style.border = "1px solid #666";
-    style.color = "black";
-    style.padding = this.padding + "px";
-    style.backgroundColor = "#FFFFC6";
-    style.borderRadius = "3px";
-    style.MozBorderRadius = "3px";
-    style.WebkitBorderRadius = "3px";
-    style.boxShadow = "3px 3px 10px rgba(128, 128, 128, 0.5)";
-    style.whiteSpace = "nowrap";
-    this.container.appendChild(this.frame);
-};
-
-/**
- * @param {number} x   Horizontal position of the popup window
- * @param {number} y   Vertical position of the popup window
- */
-Graph.Popup.prototype.setPosition = function(x, y) {
-    this.x = parseInt(x);
-    this.y = parseInt(y);
-};
-
-/**
- * Set the text for the popup window. This can be HTML code
- * @param {string} text
- */
-Graph.Popup.prototype.setText = function(text) {
-    this.frame.innerHTML = text;
-};
-
-/**
- * Show the popup window
- * @param {boolean} show    Optional. Show or hide the window
- */
-Graph.Popup.prototype.show = function (show) {
-    if (show === undefined) {
-        show = true;
-    }
-
-    if (show) {
-        var height = this.frame.clientHeight;
-        var width =  this.frame.clientWidth;
-        var maxHeight = this.frame.parentNode.clientHeight;
-        var maxWidth = this.frame.parentNode.clientWidth;
-
-        var top = (this.y - height);
-        if (top + height + this.padding > maxHeight) {
-            top = maxHeight - height - this.padding;
-        }
-        if (top < this.padding) {
-            top = this.padding;
-        }
-
-        var left = this.x;
-        if (left + width + this.padding > maxWidth) {
-            left = maxWidth - width - this.padding;
-        }
-        if (left < this.padding) {
-            left = this.padding;
-        }
-
-        this.frame.style.left = left + "px";
-        this.frame.style.top = top + "px";
-        this.frame.style.visibility = "visible";
-    }
-    else {
-        this.hide();
-    }
-};
-
-/**
- * Hide the popup window
- */
-Graph.Popup.prototype.hide = function () {
-    this.frame.style.visibility = "hidden";
-};
-
-
-/**--------------------------------------------------------------------------**/
-
-if (typeof CanvasRenderingContext2D !== 'undefined') {
-    /**
-     * Draw a circle shape
-     */
-    CanvasRenderingContext2D.prototype.circle = function(x, y, r) {
-        this.beginPath();
-        this.arc(x, y, r, 0, 2*Math.PI, false);
-    };
-
-    /**
-     * Draw a square shape
-     * @param {Number} x horizontal center
-     * @param {Number} y vertical center
-     * @param {Number} r   size, width and height of the square
-     */
-    CanvasRenderingContext2D.prototype.square = function(x, y, r) {
-        this.beginPath();
-        this.rect(x - r, y - r, r * 2, r * 2);
-    };
-
-    /**
-     * Draw a triangle shape
-     * @param {Number} x horizontal center
-     * @param {Number} y vertical center
-     * @param {Number} r   radius, half the length of the sides of the triangle
-     */
-    CanvasRenderingContext2D.prototype.triangle = function(x, y, r) {
-        // http://en.wikipedia.org/wiki/Equilateral_triangle
-        this.beginPath();
-
-        var s = r * 2;
-        var s2 = s / 2;
-        var ir = Math.sqrt(3) / 6 * s;      // radius of inner circle
-        var h = Math.sqrt(s * s - s2 * s2); // height
-
-        this.moveTo(x, y - (h - ir));
-        this.lineTo(x + s2, y + ir);
-        this.lineTo(x - s2, y + ir);
-        this.lineTo(x, y - (h - ir));
-        this.closePath();
-    };
-
-    /**
-     * Draw a triangle shape in downward orientation
-     * @param {Number} x horizontal center
-     * @param {Number} y vertical center
-     * @param {Number} r radius
-     */
-    CanvasRenderingContext2D.prototype.triangleDown = function(x, y, r) {
-        // http://en.wikipedia.org/wiki/Equilateral_triangle
-        this.beginPath();
-
-        var s = r * 2;
-        var s2 = s / 2;
-        var ir = Math.sqrt(3) / 6 * s;      // radius of inner circle
-        var h = Math.sqrt(s * s - s2 * s2); // height
-
-        this.moveTo(x, y + (h - ir));
-        this.lineTo(x + s2, y - ir);
-        this.lineTo(x - s2, y - ir);
-        this.lineTo(x, y + (h - ir));
-        this.closePath();
-    };
-
-    /**
-     * Draw a star shape, a star with 5 points
-     * @param {Number} x horizontal center
-     * @param {Number} y vertical center
-     * @param {Number} r   radius, half the length of the sides of the triangle
-     */
-    CanvasRenderingContext2D.prototype.star = function(x, y, r) {
-        // http://www.html5canvastutorials.com/labs/html5-canvas-star-spinner/
-        this.beginPath();
-
-        for (var n = 0; n < 10; n++) {
-            var radius = (n % 2 === 0) ? r * 1.3 : r * 0.5;
-            this.lineTo(
-                x + radius * Math.sin(n * 2 * Math.PI / 10),
-                y - radius * Math.cos(n * 2 * Math.PI / 10)
-            );
-        }
-
-        this.closePath();
-    };
-
-    /**
-     * http://stackoverflow.com/questions/1255512/how-to-draw-a-rounded-rectangle-on-html-canvas
-     */
-    CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) {
-        var r2d = Math.PI/180;
-        if( w - ( 2 * r ) < 0 ) { r = ( w / 2 ); } //ensure that the radius isn't too large for x
-        if( h - ( 2 * r ) < 0 ) { r = ( h / 2 ); } //ensure that the radius isn't too large for y
-        this.beginPath();
-        this.moveTo(x+r,y);
-        this.lineTo(x+w-r,y);
-        this.arc(x+w-r,y+r,r,r2d*270,r2d*360,false);
-        this.lineTo(x+w,y+h-r);
-        this.arc(x+w-r,y+h-r,r,0,r2d*90,false);
-        this.lineTo(x+r,y+h);
-        this.arc(x+r,y+h-r,r,r2d*90,r2d*180,false);
-        this.lineTo(x,y+r);
-        this.arc(x+r,y+r,r,r2d*180,r2d*270,false);
-    };
-
-    /**
-     * http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
-     */
-    CanvasRenderingContext2D.prototype.ellipse = function(x, y, w, h) {
-        var kappa = .5522848,
-            ox = (w / 2) * kappa, // control point offset horizontal
-            oy = (h / 2) * kappa, // control point offset vertical
-            xe = x + w,           // x-end
-            ye = y + h,           // y-end
-            xm = x + w / 2,       // x-middle
-            ym = y + h / 2;       // y-middle
-
-        this.beginPath();
-        this.moveTo(x, ym);
-        this.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
-        this.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
-        this.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
-        this.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
-    };
-
-
-
-    /**
-     * http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
-     */
-    CanvasRenderingContext2D.prototype.database = function(x, y, w, h) {
-        var f = 1/3;
-        var wEllipse = w;
-        var hEllipse = h * f;
-
-        var kappa = .5522848,
-            ox = (wEllipse / 2) * kappa, // control point offset horizontal
-            oy = (hEllipse / 2) * kappa, // control point offset vertical
-            xe = x + wEllipse,           // x-end
-            ye = y + hEllipse,           // y-end
-            xm = x + wEllipse / 2,       // x-middle
-            ym = y + hEllipse / 2,       // y-middle
-            ymb = y + (h - hEllipse/2),  // y-midlle, bottom ellipse
-            yeb = y + h;                 // y-end, bottom ellipse
-
-        this.beginPath();
-        this.moveTo(xe, ym);
-
-        this.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
-        this.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
-
-        this.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
-        this.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
-
-        this.lineTo(xe, ymb);
-
-        this.bezierCurveTo(xe, ymb + oy, xm + ox, yeb, xm, yeb);
-        this.bezierCurveTo(xm - ox, yeb, x, ymb + oy, x, ymb);
-
-        this.lineTo(x, ym);
-    };
-
-
-    /**
-     * Draw an arrow point (no line)
-     */
-    CanvasRenderingContext2D.prototype.arrow = function(x, y, angle, length) {
-        // tail
-        var xt = x - length * Math.cos(angle);
-        var yt = y - length * Math.sin(angle);
-
-        // inner tail
-        // TODO: allow to customize different shapes
-        var xi = x - length * 0.9 * Math.cos(angle);
-        var yi = y - length * 0.9 * Math.sin(angle);
-
-        // left
-        var xl = xt + length / 3 * Math.cos(angle + 0.5 * Math.PI);
-        var yl = yt + length / 3 * Math.sin(angle + 0.5 * Math.PI);
-
-        // right
-        var xr = xt + length / 3 * Math.cos(angle - 0.5 * Math.PI);
-        var yr = yt + length / 3 * Math.sin(angle - 0.5 * Math.PI);
-
-        this.beginPath();
-        this.moveTo(x, y);
-        this.lineTo(xl, yl);
-        this.lineTo(xi, yi);
-        this.lineTo(xr, yr);
-        this.closePath();
-    };
-
-
-    // TODO: add diamond shape
-}
-
-
-/*----------------------------------------------------------------------------*/
-
-// utility methods
-Graph.util = {};
-
-/**
- * Parse a text source containing data in DOT language into a JSON object.
- * The object contains two lists: one with nodes and one with edges.
- * @param {String} data     Text containing a graph in DOT-notation
- * @return {Object} json    An object containing two parameters:
- *                          {Object[]} nodes
- *                          {Object[]} edges
- */
-Graph.util.parseDOT = function (data) {
-    /**
-     * Test whether given character is a whitespace character
-     * @param {String} c
-     * @return {Boolean} isWhitespace
-     */
-    function isWhitespace(c) {
-        return c == ' ' || c == '\t' || c == '\n' || c == '\r';
-    }
-
-    /**
-     * Test whether given character is a delimeter
-     * @param {String} c
-     * @return {Boolean} isDelimeter
-     */
-    function isDelimeter(c) {
-        return '[]{}();,=->'.indexOf(c) != -1;
-    }
-
-    var i = -1;  // current index in the data
-    var c = '';  // current character in the data
-
-    /**
-     * Read the next character from the data
-     */
-    function next() {
-        i++;
-        c = data[i];
-    }
-
-    /**
-     * Preview the next character in the data
-     * @returns {String} nextChar
-     */
-    function previewNext () {
-        return data[i + 1];
-    }
-
-    /**
-     * Preview the next character in the data
-     * @returns {String} nextChar
-     */
-    function previewPrevious () {
-        return data[i + 1];
-    }
-
-    /**
-     * Get a text description of the the current index in the data
-     * @return {String} desc
-     */
-    function pos() {
-        return '(char ' + i + ')';
-    }
-
-    /**
-     * Skip whitespace and comments
-     */
-    function parseWhitespace() {
-        // skip whitespace
-        while (c && isWhitespace(c)) {
-            next();
-        }
-
-        // test for comment
-        var cNext = data[i + 1];
-        var cPrev = data[i - 1];
-        var c2 = c + cNext;
-        if (c2 == '/*') {
-            // block comment. skip until the block is closed
-            while (c && !(c == '*' && data[i + 1] == '/')) {
-                next();
-            }
-            next();
-            next();
-
-            parseWhitespace();
-        }
-        else if (c2 == '//' || (c == '#' && cPrev == '\n')) {
-            // line comment. skip until the next return
-            while (c && c != '\n') {
-                next();
-            }
-            next();
-            parseWhitespace();
-        }
-    }
-
-    /**
-     * Parse a string
-     * The string may be enclosed by double quotes
-     * @return {String | undefined} value
-     */
-    function parseString() {
-        parseWhitespace();
-
-        var name = '';
-        if (c == '"') {
-            next();
-            while (c && c != '"') {
-                name += c;
-                next();
-            }
-            next(); // skip the closing quote
-        }
-        else {
-            while (c && !isWhitespace(c) && !isDelimeter(c)) {
-                name += c;
-                next();
-            }
-
-            // cast string to number or boolean
-            var number = Number(name);
-            if (!isNaN(number)) {
-                name = number;
-            }
-            else if (name == 'true') {
-                name = true;
-            }
-            else if (name == 'false') {
-                name = false;
-            }
-            else if (name == 'null') {
-                name = null;
-            }
-        }
-
-        return name;
-    }
-
-    /**
-     * Parse a value, can be a string, number, or boolean.
-     * The value may be enclosed by double quotes
-     * @return {String | Number | Boolean | undefined} value
-     */
-    function parseValue() {
-        parseWhitespace();
-
-        if (c == '"') {
-            return parseString();
-        }
-        else {
-            var value = parseString();
-            if (value != undefined) {
-                // cast string to number or boolean
-                var number = Number(value);
-                if (!isNaN(number)) {
-                    value = number;
-                }
-                else if (value == 'true') {
-                    value = true;
-                }
-                else if (value == 'false') {
-                    value = false;
-                }
-                else if (value == 'null') {
-                    value = null;
-                }
-            }
-            return value;
-        }
-    }
-
-    /**
-     * Parse a set with attributes,
-     * for example [label="1.000", style=solid]
-     * @return {Object | undefined} attr
-     */
-    function parseAttributes() {
-        parseWhitespace();
-
-        if (c == '[') {
-            next();
-            var attr = {};
-            while (c && c != ']') {
-                parseWhitespace();
-
-                var name = parseString();
-                if (!name) {
-                    throw new SyntaxError('Attribute name expected ' + pos());
-                }
-
-                parseWhitespace();
-                if (c != '=') {
-                    throw new SyntaxError('Equal sign = expected ' + pos());
-                }
-                next();
-
-                var value = parseValue();
-                if (!value) {
-                    throw new SyntaxError('Attribute value expected ' + pos());
-                }
-                attr[name] = value;
-
-                parseWhitespace();
-
-                if (c ==',') {
-                    next();
-                }
-            }
-            next();
-
-            return attr;
-        }
-        else {
-            return undefined;
-        }
-    }
-
-    /**
-     * Parse a directed or undirected arrow '->' or '--'
-     * @return {String | undefined} arrow
-     */
-    function parseArrow() {
-        parseWhitespace();
-
-        if (c == '-') {
-            next();
-            if (c == '>' || c == '-') {
-                var arrow = '-' + c;
-                next();
-                return arrow;
-            }
-            else {
-                throw new SyntaxError('Arrow "->" or "--" expected ' + pos());
-            }
-        }
-
-        return undefined;
-    }
-
-    /**
-     * Parse a line separator ';'
-     * @return {String | undefined} separator
-     */
-    function parseSeparator() {
-        parseWhitespace();
-
-        if (c == ';') {
-            next();
-            return ';';
-        }
-
-        return undefined;
-    }
-
-    /**
-     * Merge all properties of object b into object b
-     * @param {Object} a
-     * @param {Object} b
-     */
-    function merge (a, b) {
-        if (a && b) {
-            for (var name in b) {
-                if (b.hasOwnProperty(name)) {
-                    a[name] = b[name];
-                }
-            }
-        }
-    }
-
-    var nodeMap = {};
-    var edgeList = [];
-
-    /**
-     * Register a node with attributes
-     * @param {String} id
-     * @param {Object} [attr]
-     */
-    function addNode(id, attr) {
-        var node = {
-            id: String(id),
-            attr: attr || {}
-        };
-        if (!nodeMap[id]) {
-            nodeMap[id] = node;
-        }
-        else {
-            merge(nodeMap[id].attr, node.attr);
-        }
-    }
-
-    /**
-     * Register an edge
-     * @param {String} from
-     * @param {String} to
-     * @param {String} type    A string "->" or "--"
-     * @param {Object} [attr]
-     */
-    function addEdge(from, to, type, attr) {
-        edgeList.push({
-            from: String(from),
-            to: String(to),
-            type: type,
-            attr: attr || {}
-        });
-    }
-
-    // find the opening curly bracket
-    next();
-    while (c && c != '{') {
-        next();
-    }
-    if (c != '{') {
-        throw new SyntaxError('Invalid data. Curly bracket { expected ' + pos())
-    }
-    next();
-
-    // parse all data until a closing curly bracket is encountered
-    while (c && c != '}') {
-        // parse node id and optional node attributes
-        var id = parseString();
-        if (id == undefined) {
-            throw new SyntaxError('String with id expected ' + pos());
-        }
-        var attr = parseAttributes();
-        addNode(id, attr);
-
-        // TODO: parse global attributes "graph", "node", "edge"
-
-        // parse arrow
-        var type = parseArrow();
-        while (type) {
-            // parse node id
-            var prevId = id;
-            id = parseString();
-            if (id == undefined) {
-                throw new SyntaxError('String with id expected ' + pos());
-            }
-            addNode(id);
-
-            // parse edge attributes and register edge
-            attr = parseAttributes();
-            addEdge(prevId, id, type, attr);
-
-            // parse next arrow (optional)
-            type = parseArrow();
-        }
-
-        // parse separator (optional)
-        parseSeparator();
-
-        parseWhitespace();
-    }
-    if (c != '}') {
-        throw new SyntaxError('Invalid data. Curly bracket } expected');
-    }
-
-    // crop data between the curly brackets
-    var start = data.indexOf('{');
-    var end = data.indexOf('}', start);
-    var text = (start != -1 && end != -1) ? data.substring(start + 1, end) : undefined;
-
-    if (!text) {
-        throw new Error('Invalid data. no curly brackets containing data found');
-    }
-
-    // return the results
-    var nodeList = [];
-    for (id in nodeMap) {
-        if (nodeMap.hasOwnProperty(id)) {
-            nodeList.push(nodeMap[id]);
-        }
-    }
-    return {
-        nodes: nodeList,
-        edges: edgeList
-    }
-};
-
-/**
- * Convert a string containing a graph in DOT language into a map containing
- * with nodes and edges in the format of graph.
- * @param {String} data         Text containing a graph in DOT-notation
- * @return {Object} graphData
- */
-Graph.util.DOTToGraph = function (data) {
-    // parse the DOT file
-    var dotData = Graph.util.parseDOT(data);
-    var graphData = {
-        nodes: [],
-        edges: [],
-        options: {
-            nodes: {},
-            edges: {}
-        }
-    };
-
-    /**
-     * Merge the properties of object b into object a, and adjust properties
-     * not supported by Graph (for example replace "shape" with "style"
-     * @param {Object} a
-     * @param {Object} b
-     * @param {Array} [ignore]   Optional array with property names to be ignored
-     */
-    function merge (a, b, ignore) {
-        for (var prop in b) {
-            if (b.hasOwnProperty(prop) && (!ignore || ignore.indexOf(prop) == -1)) {
-                a[prop] = b[prop];
-            }
-        }
-
-        // Convert aliases to configuration settings supported by Graph
-        if (a.label) {
-            a.text = a.label;
-            delete a.label;
-        }
-        if (a.shape) {
-            a.style = a.shape;
-            delete a.shape;
-        }
-    }
-
-    dotData.nodes.forEach(function (node) {
-        if (node.id.toLowerCase() == 'graph') {
-            merge(graphData.options, node.attr);
-        }
-        else if (node.id.toLowerCase() == 'node') {
-            merge(graphData.options.nodes, node.attr);
-        }
-        else if (node.id.toLowerCase() == 'edge') {
-            merge(graphData.options.edges, node.attr);
-        }
-        else {
-            var graphNode = {};
-            graphNode.id = node.id;
-            graphNode.text = node.id;
-            merge(graphNode, node.attr);
-            graphData.nodes.push(graphNode);
-        }
-    });
-
-    dotData.edges.forEach(function (edge) {
-        var graphEdge = {};
-        graphEdge.from = edge.from;
-        graphEdge.to = edge.to;
-        graphEdge.text = edge.id;
-        graphEdge.style = (edge.type == '->') ? 'arrow-end' : 'line';
-        merge(graphEdge, edge.attr);
-        graphData.edges.push(graphEdge);
-    });
-
-    return graphData;
-};
diff --git a/src/graph/Groups.js b/src/graph/Groups.js
new file mode 100644
index 00000000..cdd67675
--- /dev/null
+++ b/src/graph/Groups.js
@@ -0,0 +1,79 @@
+/**
+ * @class Groups
+ * This class can store groups and properties specific for groups.
+ */
+Groups = function () {
+    this.clear();
+    this.defaultIndex = 0;
+};
+
+
+/**
+ * default constants for group colors
+ */
+Groups.DEFAULT = [
+    {"borderColor": "#2B7CE9", "backgroundColor": "#97C2FC", "highlightColor": "#D2E5FF"}, // blue
+    {"borderColor": "#FFA500", "backgroundColor": "#FFFF00", "highlightColor": "#FFFFA3"}, // yellow
+    {"borderColor": "#FA0A10", "backgroundColor": "#FB7E81", "highlightColor": "#FFAFB1"}, // red
+    {"borderColor": "#41A906", "backgroundColor": "#7BE141", "highlightColor": "#A1EC76"}, // green
+    {"borderColor": "#E129F0", "backgroundColor": "#EB7DF4", "highlightColor": "#F0B3F5"}, // magenta
+    {"borderColor": "#7C29F0", "backgroundColor": "#AD85E4", "highlightColor": "#D3BDF0"}, // purple
+    {"borderColor": "#C37F00", "backgroundColor": "#FFA807", "highlightColor": "#FFCA66"}, // orange
+    {"borderColor": "#4220FB", "backgroundColor": "#6E6EFD", "highlightColor": "#9B9BFD"}, // darkblue
+    {"borderColor": "#FD5A77", "backgroundColor": "#FFC0CB", "highlightColor": "#FFD1D9"}, // pink
+    {"borderColor": "#4AD63A", "backgroundColor": "#C2FABC", "highlightColor": "#E6FFE3"}  // mint
+];
+
+
+/**
+ * Clear all groups
+ */
+Groups.prototype.clear = function () {
+    this.groups = {};
+    this.groups.length = function()
+    {
+        var i = 0;
+        for ( var p in this ) {
+            if (this.hasOwnProperty(p)) {
+                i++;
+            }
+        }
+        return i;
+    }
+};
+
+
+/**
+ * get group properties of a groupname. If groupname is not found, a new group
+ * is added.
+ * @param {*} groupname        Can be a number, string, Date, etc.
+ * @return {Object} group      The created group, containing all group properties
+ */
+Groups.prototype.get = function (groupname) {
+    var group = this.groups[groupname];
+
+    if (group == undefined) {
+        // create new group
+        var index = this.defaultIndex % Groups.DEFAULT.length;
+        this.defaultIndex++;
+        group = {};
+        group.borderColor     = Groups.DEFAULT[index].borderColor;
+        group.backgroundColor = Groups.DEFAULT[index].backgroundColor;
+        group.highlightColor  = Groups.DEFAULT[index].highlightColor;
+        this.groups[groupname] = group;
+    }
+
+    return group;
+};
+
+/**
+ * Add a custom group style
+ * @param {String} groupname
+ * @param {Object} style       An object containing borderColor,
+ *                             backgroundColor, etc.
+ * @return {Object} group      The created group object
+ */
+Groups.prototype.add = function (groupname, style) {
+    this.groups[groupname] = style;
+    return style;
+};
diff --git a/src/graph/Images.js b/src/graph/Images.js
new file mode 100644
index 00000000..6dc20d22
--- /dev/null
+++ b/src/graph/Images.js
@@ -0,0 +1,41 @@
+/**
+ * @class Images
+ * This class loads images and keeps them stored.
+ */
+Images = function () {
+    this.images = {};
+
+    this.callback = undefined;
+};
+
+/**
+ * Set an onload callback function. This will be called each time an image
+ * is loaded
+ * @param {function} callback
+ */
+Images.prototype.setOnloadCallback = function(callback) {
+    this.callback = callback;
+};
+
+/**
+ *
+ * @param {string} url          Url of the image
+ * @return {Image} img          The image object
+ */
+Images.prototype.load = function(url) {
+    var img = this.images[url];
+    if (img == undefined) {
+        // create the image
+        var images = this;
+        img = new Image();
+        this.images[url] = img;
+        img.onload = function() {
+            if (images.callback) {
+                images.callback(this);
+            }
+        };
+        img.src = url;
+    }
+
+    return img;
+};
diff --git a/src/graph/Node.js b/src/graph/Node.js
new file mode 100644
index 00000000..515a1329
--- /dev/null
+++ b/src/graph/Node.js
@@ -0,0 +1,609 @@
+/**
+ * @class Node
+ * A node. A node can be connected to other nodes via one or multiple edges.
+ * @param {object} properties An object containing properties for the node. All
+ *                            properties are optional, except for the id.
+ *                              {number} id     Id of the node. Required
+ *                              {string} text   Title for the node
+ *                              {number} x      Horizontal position of the node
+ *                              {number} y      Vertical position of the node
+ *                              {string} style  Drawing style, available:
+ *                                              "database", "circle", "rect",
+ *                                              "image", "text", "dot", "star",
+ *                                              "triangle", "triangleDown",
+ *                                              "square"
+ *                              {string} image  An image url
+ *                              {string} title  An title text, can be HTML
+ *                              {anytype} group A group name or number
+ * @param {Graph.Images} imagelist    A list with images. Only needed
+ *                                            when the node has an image
+ * @param {Graph.Groups} grouplist    A list with groups. Needed for
+ *                                            retrieving group properties
+ * @param {Object}               constants    An object with default values for
+ *                                            example for the color
+ */
+function Node(properties, imagelist, grouplist, constants) {
+    this.selected = false;
+
+    this.edges = []; // all edges connected to this node
+    this.group = constants.nodes.group;
+
+    this.fontSize = constants.nodes.fontSize;
+    this.fontFace = constants.nodes.fontFace;
+    this.fontColor = constants.nodes.fontColor;
+
+    this.borderColor = constants.nodes.borderColor;
+    this.backgroundColor = constants.nodes.backgroundColor;
+    this.highlightColor = constants.nodes.highlightColor;
+
+    // set defaults for the properties
+    this.id = undefined;
+    this.style = constants.nodes.style;
+    this.image = constants.nodes.image;
+    this.x = 0;
+    this.y = 0;
+    this.xFixed = false;
+    this.yFixed = false;
+    this.radius = constants.nodes.radius;
+    this.radiusFixed = false;
+    this.radiusMin = constants.nodes.radiusMin;
+    this.radiusMax = constants.nodes.radiusMax;
+
+    this.imagelist = imagelist;
+    this.grouplist = grouplist;
+
+    this.setProperties(properties, constants);
+
+    // mass, force, velocity
+    this.mass = 50;  // kg (mass is adjusted for the number of connected edges)
+    this.fx = 0.0;  // external force x
+    this.fy = 0.0;  // external force y
+    this.vx = 0.0;  // velocity x
+    this.vy = 0.0;  // velocity y
+    this.minForce = constants.minForce;
+    this.damping = 0.9; // damping factor
+};
+
+/**
+ * Attach a edge to the node
+ * @param {Edge} edge
+ */
+Node.prototype.attachEdge = function(edge) {
+    this.edges.push(edge);
+    this._updateMass();
+};
+
+/**
+ * Detach a edge from the node
+ * @param {Edge} edge
+ */
+Node.prototype.detachEdge = function(edge) {
+    var index = this.edges.indexOf(edge);
+    if (index != -1) {
+        this.edges.splice(index, 1);
+    }
+    this._updateMass();
+};
+
+/**
+ * Update the nodes mass, which is determined by the number of edges connecting
+ * to it (more edges -> heavier node).
+ * @private
+ */
+Node.prototype._updateMass = function() {
+    this.mass = 50 + 20 * this.edges.length; // kg
+};
+
+/**
+ * Set or overwrite properties for the node
+ * @param {Object} properties an object with properties
+ * @param {Object} constants  and object with default, global properties
+ */
+Node.prototype.setProperties = function(properties, constants) {
+    if (!properties) {
+        return;
+    }
+
+    // basic properties
+    if (properties.id != undefined)        {this.id = properties.id;}
+    if (properties.text != undefined)      {this.text = properties.text;}
+    if (properties.title != undefined)     {this.title = properties.title;}
+    if (properties.group != undefined)     {this.group = properties.group;}
+    if (properties.x != undefined)         {this.x = properties.x;}
+    if (properties.y != undefined)         {this.y = properties.y;}
+    if (properties.value != undefined)     {this.value = properties.value;}
+
+    if (this.id === undefined) {
+        throw "Node must have an id";
+    }
+
+    // copy group properties
+    if (this.group) {
+        var groupObj = this.grouplist.get(this.group);
+        for (var prop in groupObj) {
+            if (groupObj.hasOwnProperty(prop)) {
+                this[prop] = groupObj[prop];
+            }
+        }
+    }
+
+    // individual style properties
+    if (properties.style != undefined)          {this.style = properties.style;}
+    if (properties.image != undefined)          {this.image = properties.image;}
+    if (properties.radius != undefined)         {this.radius = properties.radius;}
+    if (properties.borderColor != undefined)    {this.borderColor = properties.borderColor;}
+    if (properties.backgroundColor != undefined){this.backgroundColor = properties.backgroundColor;}
+    if (properties.highlightColor != undefined) {this.highlightColor = properties.highlightColor;}
+    if (properties.fontColor != undefined)      {this.fontColor = properties.fontColor;}
+    if (properties.fontSize != undefined)       {this.fontSize = properties.fontSize;}
+    if (properties.fontFace != undefined)       {this.fontFace = properties.fontFace;}
+
+
+    if (this.image != undefined) {
+        if (this.imagelist) {
+            this.imageObj = this.imagelist.load(this.image);
+        }
+        else {
+            throw "No imagelist provided";
+        }
+    }
+
+    this.xFixed = this.xFixed || (properties.x != undefined);
+    this.yFixed = this.yFixed || (properties.y != undefined);
+    this.radiusFixed = this.radiusFixed || (properties.radius != undefined);
+
+    if (this.style == 'image') {
+        this.radiusMin = constants.nodes.widthMin;
+        this.radiusMax = constants.nodes.widthMax;
+    }
+
+    // choose draw method depending on the style
+    var style = this.style;
+    switch (style) {
+        case 'database':      this.draw = this._drawDatabase; this.resize = this._resizeDatabase; break;
+        case 'rect':          this.draw = this._drawRect; this.resize = this._resizeRect; break;
+        case 'circle':        this.draw = this._drawCircle; this.resize = this._resizeCircle; break;
+        // TODO: add ellipse shape
+        // TODO: add diamond shape
+        case 'image':         this.draw = this._drawImage; this.resize = this._resizeImage; break;
+        case 'text':          this.draw = this._drawText; this.resize = this._resizeText; break;
+        case 'dot':           this.draw = this._drawDot; this.resize = this._resizeShape; break;
+        case 'square':        this.draw = this._drawSquare; this.resize = this._resizeShape; break;
+        case 'triangle':      this.draw = this._drawTriangle; this.resize = this._resizeShape; break;
+        case 'triangleDown':  this.draw = this._drawTriangleDown; this.resize = this._resizeShape; break;
+        case 'star':          this.draw = this._drawStar; this.resize = this._resizeShape; break;
+        default:              this.draw = this._drawRect; this.resize = this._resizeRect; break;
+    }
+
+    // reset the size of the node, this can be changed
+    this._reset();
+};
+
+/**
+ * select this node
+ */
+Node.prototype.select = function() {
+    this.selected = true;
+    this._reset();
+};
+
+/**
+ * unselect this node
+ */
+Node.prototype.unselect = function() {
+    this.selected = false;
+    this._reset();
+};
+
+/**
+ * Reset the calculated size of the node, forces it to recalculate its size
+ */
+Node.prototype._reset = function() {
+    this.width = undefined;
+    this.height = undefined;
+};
+
+/**
+ * get the title of this node.
+ * @return {string} title    The title of the node, or undefined when no title
+ *                           has been set.
+ */
+Node.prototype.getTitle = function() {
+    return this.title;
+};
+
+/**
+ * Calculate the distance to the border of the Node
+ * @param {CanvasRenderingContext2D}   ctx
+ * @param {Number} angle        Angle in radians
+ * @returns {number} distance   Distance to the border in pixels
+ */
+Node.prototype.distanceToBorder = function (ctx, angle) {
+    var borderWidth = 1;
+
+    if (!this.width) {
+        this.resize(ctx);
+    }
+
+    //noinspection FallthroughInSwitchStatementJS
+    switch (this.style) {
+        case 'circle':
+        case 'dot':
+            return this.radius + borderWidth;
+
+        // TODO: implement distanceToBorder for database
+        // TODO: implement distanceToBorder for triangle
+        // TODO: implement distanceToBorder for triangleDown
+
+        case 'rect':
+        case 'image':
+        case 'text':
+        default:
+            if (this.width) {
+                return Math.min(
+                    Math.abs(this.width / 2 / Math.cos(angle)),
+                    Math.abs(this.height / 2 / Math.sin(angle))) + borderWidth;
+                // TODO: reckon with border radius too in case of rect
+            }
+            else {
+                return 0;
+            }
+
+    }
+
+    // TODO: implement calculation of distance to border for all shapes
+};
+
+/**
+ * Set forces acting on the node
+ * @param {number} fx   Force in horizontal direction
+ * @param {number} fy   Force in vertical direction
+ */
+Node.prototype._setForce = function(fx, fy) {
+    this.fx = fx;
+    this.fy = fy;
+};
+
+/**
+ * Add forces acting on the node
+ * @param {number} fx   Force in horizontal direction
+ * @param {number} fy   Force in vertical direction
+ */
+Node.prototype._addForce = function(fx, fy) {
+    this.fx += fx;
+    this.fy += fy;
+};
+
+/**
+ * Perform one discrete step for the node
+ * @param {number} interval    Time interval in seconds
+ */
+Node.prototype.discreteStep = function(interval) {
+    if (!this.xFixed) {
+        var dx   = -this.damping * this.vx;     // damping force
+        var ax   = (this.fx + dx) / this.mass;  // acceleration
+        this.vx += ax / interval;               // velocity
+        this.x  += this.vx / interval;          // position
+    }
+
+    if (!this.yFixed) {
+        var dy   = -this.damping * this.vy;     // damping force
+        var ay   = (this.fy + dy) / this.mass;  // acceleration
+        this.vy += ay / interval;               // velocity
+        this.y  += this.vy / interval;          // position
+    }
+};
+
+
+/**
+ * Check if this node has a fixed x and y position
+ * @return {boolean}      true if fixed, false if not
+ */
+Node.prototype.isFixed = function() {
+    return (this.xFixed && this.yFixed);
+};
+
+/**
+ * Check if this node is moving
+ * @param {number} vmin   the minimum velocity considered as "moving"
+ * @return {boolean}      true if moving, false if it has no velocity
+ */
+// TODO: replace this method with calculating the kinetic energy
+Node.prototype.isMoving = function(vmin) {
+    return (Math.abs(this.vx) > vmin || Math.abs(this.vy) > vmin ||
+        (!this.xFixed && Math.abs(this.fx) > this.minForce) ||
+        (!this.yFixed && Math.abs(this.fy) > this.minForce));
+};
+
+/**
+ * check if this node is selecte
+ * @return {boolean} selected   True if node is selected, else false
+ */
+Node.prototype.isSelected = function() {
+    return this.selected;
+};
+
+/**
+ * Retrieve the value of the node. Can be undefined
+ * @return {Number} value
+ */
+Node.prototype.getValue = function() {
+    return this.value;
+};
+
+/**
+ * Calculate the distance from the nodes location to the given location (x,y)
+ * @param {Number} x
+ * @param {Number} y
+ * @return {Number} value
+ */
+Node.prototype.getDistance = function(x, y) {
+    var dx = this.x - x,
+        dy = this.y - y;
+    return Math.sqrt(dx * dx + dy * dy);
+};
+
+
+/**
+ * Adjust the value range of the node. The node will adjust it's radius
+ * based on its value.
+ * @param {Number} min
+ * @param {Number} max
+ */
+Node.prototype.setValueRange = function(min, max) {
+    if (!this.radiusFixed && this.value !== undefined) {
+        var scale = (this.radiusMax - this.radiusMin) / (max - min);
+        this.radius = (this.value - min) * scale + this.radiusMin;
+    }
+};
+
+/**
+ * Draw this node in the given canvas
+ * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+ * @param {CanvasRenderingContext2D}   ctx
+ */
+Node.prototype.draw = function(ctx) {
+    throw "Draw method not initialized for node";
+};
+
+/**
+ * Recalculate the size of this node in the given canvas
+ * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+ * @param {CanvasRenderingContext2D}   ctx
+ */
+Node.prototype.resize = function(ctx) {
+    throw "Resize method not initialized for node";
+};
+
+/**
+ * Check if this object is overlapping with the provided object
+ * @param {Object} obj   an object with parameters left, top, right, bottom
+ * @return {boolean}     True if location is located on node
+ */
+Node.prototype.isOverlappingWith = function(obj) {
+    return (this.left          < obj.right &&
+        this.left + this.width > obj.left &&
+        this.top               < obj.bottom &&
+        this.top + this.height > obj.top);
+};
+
+Node.prototype._resizeImage = function (ctx) {
+    // TODO: pre calculate the image size
+    if (!this.width) {  // undefined or 0
+        var width, height;
+        if (this.value) {
+            var scale = this.imageObj.height / this.imageObj.width;
+            width = this.radius || this.imageObj.width;
+            height = this.radius * scale || this.imageObj.height;
+        }
+        else {
+            width = this.imageObj.width;
+            height = this.imageObj.height;
+        }
+        this.width  = width;
+        this.height = height;
+    }
+};
+
+Node.prototype._drawImage = function (ctx) {
+    this._resizeImage(ctx);
+
+    this.left   = this.x - this.width / 2;
+    this.top    = this.y - this.height / 2;
+
+    var yText;
+    if (this.imageObj) {
+        ctx.drawImage(this.imageObj, this.left, this.top, this.width, this.height);
+        yText = this.y + this.height / 2;
+    }
+    else {
+        // image still loading... just draw the text for now
+        yText = this.y;
+    }
+
+    this._text(ctx, this.text, this.x, yText, undefined, "top");
+};
+
+
+Node.prototype._resizeRect = function (ctx) {
+    if (!this.width) {
+        var margin = 5;
+        var textSize = this.getTextSize(ctx);
+        this.width = textSize.width + 2 * margin;
+        this.height = textSize.height + 2 * margin;
+    }
+};
+
+Node.prototype._drawRect = function (ctx) {
+    this._resizeRect(ctx);
+
+    this.left = this.x - this.width / 2;
+    this.top = this.y - this.height / 2;
+
+    ctx.strokeStyle = this.borderColor;
+    ctx.fillStyle = this.selected ? this.highlightColor : this.backgroundColor;
+    ctx.lineWidth = this.selected ? 2.0 : 1.0;
+    ctx.roundRect(this.left, this.top, this.width, this.height, this.radius);
+    ctx.fill();
+    ctx.stroke();
+
+    this._text(ctx, this.text, this.x, this.y);
+};
+
+
+Node.prototype._resizeDatabase = function (ctx) {
+    if (!this.width) {
+        var margin = 5;
+        var textSize = this.getTextSize(ctx);
+        var size = textSize.width + 2 * margin;
+        this.width = size;
+        this.height = size;
+    }
+};
+
+Node.prototype._drawDatabase = function (ctx) {
+    this._resizeDatabase(ctx);
+    this.left = this.x - this.width / 2;
+    this.top = this.y - this.height / 2;
+
+    ctx.strokeStyle = this.borderColor;
+    ctx.fillStyle = this.selected ? this.highlightColor : this.backgroundColor;
+    ctx.lineWidth = this.selected ? 2.0 : 1.0;
+    ctx.database(this.x - this.width/2, this.y - this.height*0.5, this.width, this.height);
+    ctx.fill();
+    ctx.stroke();
+
+    this._text(ctx, this.text, this.x, this.y);
+};
+
+
+Node.prototype._resizeCircle = function (ctx) {
+    if (!this.width) {
+        var margin = 5;
+        var textSize = this.getTextSize(ctx);
+        var diameter = Math.max(textSize.width, textSize.height) + 2 * margin;
+        this.radius = diameter / 2;
+
+        this.width = diameter;
+        this.height = diameter;
+    }
+};
+
+Node.prototype._drawCircle = function (ctx) {
+    this._resizeCircle(ctx);
+    this.left = this.x - this.width / 2;
+    this.top = this.y - this.height / 2;
+
+    ctx.strokeStyle = this.borderColor;
+    ctx.fillStyle = this.selected ? this.highlightColor : this.backgroundColor;
+    ctx.lineWidth = this.selected ? 2.0 : 1.0;
+    ctx.circle(this.x, this.y, this.radius);
+    ctx.fill();
+    ctx.stroke();
+
+    this._text(ctx, this.text, this.x, this.y);
+};
+
+Node.prototype._drawDot = function (ctx) {
+    this._drawShape(ctx, 'circle');
+};
+
+Node.prototype._drawTriangle = function (ctx) {
+    this._drawShape(ctx, 'triangle');
+};
+
+Node.prototype._drawTriangleDown = function (ctx) {
+    this._drawShape(ctx, 'triangleDown');
+};
+
+Node.prototype._drawSquare = function (ctx) {
+    this._drawShape(ctx, 'square');
+};
+
+Node.prototype._drawStar = function (ctx) {
+    this._drawShape(ctx, 'star');
+};
+
+Node.prototype._resizeShape = function (ctx) {
+    if (!this.width) {
+        var size = 2 * this.radius;
+        this.width = size;
+        this.height = size;
+    }
+};
+
+Node.prototype._drawShape = function (ctx, shape) {
+    this._resizeShape(ctx);
+
+    this.left = this.x - this.width / 2;
+    this.top = this.y - this.height / 2;
+
+    ctx.strokeStyle = this.borderColor;
+    ctx.fillStyle = this.selected ? this.highlightColor : this.backgroundColor;
+    ctx.lineWidth = this.selected ? 2.0 : 1.0;
+
+    ctx[shape](this.x, this.y, this.radius);
+    ctx.fill();
+    ctx.stroke();
+
+    if (this.text) {
+        this._text(ctx, this.text, this.x, this.y + this.height / 2, undefined, 'top');
+    }
+};
+
+Node.prototype._resizeText = function (ctx) {
+    if (!this.width) {
+        var margin = 5;
+        var textSize = this.getTextSize(ctx);
+        this.width = textSize.width + 2 * margin;
+        this.height = textSize.height + 2 * margin;
+    }
+};
+
+Node.prototype._drawText = function (ctx) {
+    this._resizeText(ctx);
+    this.left = this.x - this.width / 2;
+    this.top = this.y - this.height / 2;
+
+    this._text(ctx, this.text, this.x, this.y);
+};
+
+
+Node.prototype._text = function (ctx, text, x, y, align, baseline) {
+    if (text) {
+        ctx.font = (this.selected ? "bold " : "") + this.fontSize + "px " + this.fontFace;
+        ctx.fillStyle = this.fontColor || "black";
+        ctx.textAlign = align || "center";
+        ctx.textBaseline = baseline || "middle";
+
+        var lines = text.split('\n'),
+            lineCount = lines.length,
+            fontSize = (this.fontSize + 4),
+            yLine = y + (1 - lineCount) / 2 * fontSize;
+
+        for (var i = 0; i < lineCount; i++) {
+            ctx.fillText(lines[i], x, yLine);
+            yLine += fontSize;
+        }
+    }
+};
+
+
+Node.prototype.getTextSize = function(ctx) {
+    if (this.text != undefined) {
+        ctx.font = (this.selected ? "bold " : "") + this.fontSize + "px " + this.fontFace;
+
+        var lines = this.text.split('\n'),
+            height = (this.fontSize + 4) * lines.length,
+            width = 0;
+
+        for (var i = 0, iMax = lines.length; i < iMax; i++) {
+            width = Math.max(width, ctx.measureText(lines[i]).width);
+        }
+
+        return {"width": width, "height": height};
+    }
+    else {
+        return {"width": 0, "height": 0};
+    }
+};
diff --git a/src/graph/Popup.js b/src/graph/Popup.js
new file mode 100644
index 00000000..2d0121a3
--- /dev/null
+++ b/src/graph/Popup.js
@@ -0,0 +1,105 @@
+/**
+ * Popup is a class to create a popup window with some text
+ * @param {Element}  container     The container object.
+ * @param {Number} [x]
+ * @param {Number} [y]
+ * @param {String} [text]
+ */
+function Popup(container, x, y, text) {
+    if (container) {
+        this.container = container;
+    }
+    else {
+        this.container = document.body;
+    }
+    this.x = 0;
+    this.y = 0;
+    this.padding = 5;
+
+    if (x !== undefined && y !== undefined ) {
+        this.setPosition(x, y);
+    }
+    if (text !== undefined) {
+        this.setText(text);
+    }
+
+    // create the frame
+    this.frame = document.createElement("div");
+    var style = this.frame.style;
+    style.position = "absolute";
+    style.visibility = "hidden";
+    style.border = "1px solid #666";
+    style.color = "black";
+    style.padding = this.padding + "px";
+    style.backgroundColor = "#FFFFC6";
+    style.borderRadius = "3px";
+    style.MozBorderRadius = "3px";
+    style.WebkitBorderRadius = "3px";
+    style.boxShadow = "3px 3px 10px rgba(128, 128, 128, 0.5)";
+    style.whiteSpace = "nowrap";
+    this.container.appendChild(this.frame);
+};
+
+/**
+ * @param {number} x   Horizontal position of the popup window
+ * @param {number} y   Vertical position of the popup window
+ */
+Popup.prototype.setPosition = function(x, y) {
+    this.x = parseInt(x);
+    this.y = parseInt(y);
+};
+
+/**
+ * Set the text for the popup window. This can be HTML code
+ * @param {string} text
+ */
+Popup.prototype.setText = function(text) {
+    this.frame.innerHTML = text;
+};
+
+/**
+ * Show the popup window
+ * @param {boolean} show    Optional. Show or hide the window
+ */
+Popup.prototype.show = function (show) {
+    if (show === undefined) {
+        show = true;
+    }
+
+    if (show) {
+        var height = this.frame.clientHeight;
+        var width =  this.frame.clientWidth;
+        var maxHeight = this.frame.parentNode.clientHeight;
+        var maxWidth = this.frame.parentNode.clientWidth;
+
+        var top = (this.y - height);
+        if (top + height + this.padding > maxHeight) {
+            top = maxHeight - height - this.padding;
+        }
+        if (top < this.padding) {
+            top = this.padding;
+        }
+
+        var left = this.x;
+        if (left + width + this.padding > maxWidth) {
+            left = maxWidth - width - this.padding;
+        }
+        if (left < this.padding) {
+            left = this.padding;
+        }
+
+        this.frame.style.left = left + "px";
+        this.frame.style.top = top + "px";
+        this.frame.style.visibility = "visible";
+    }
+    else {
+        this.hide();
+    }
+};
+
+/**
+ * Hide the popup window
+ */
+Popup.prototype.hide = function () {
+    this.frame.style.visibility = "hidden";
+};
diff --git a/src/graph/dotparser.js b/src/graph/dotparser.js
new file mode 100644
index 00000000..2d198c89
--- /dev/null
+++ b/src/graph/dotparser.js
@@ -0,0 +1,452 @@
+
+/**
+ * Parse a text source containing data in DOT language into a JSON object.
+ * The object contains two lists: one with nodes and one with edges.
+ * @param {String} data     Text containing a graph in DOT-notation
+ * @return {Object} json    An object containing two parameters:
+ *                          {Object[]} nodes
+ *                          {Object[]} edges
+ */
+util.parseDOT = function (data) {
+    /**
+     * Test whether given character is a whitespace character
+     * @param {String} c
+     * @return {Boolean} isWhitespace
+     */
+    function isWhitespace(c) {
+        return c == ' ' || c == '\t' || c == '\n' || c == '\r';
+    }
+
+    /**
+     * Test whether given character is a delimeter
+     * @param {String} c
+     * @return {Boolean} isDelimeter
+     */
+    function isDelimeter(c) {
+        return '[]{}();,=->'.indexOf(c) != -1;
+    }
+
+    var i = -1;  // current index in the data
+    var c = '';  // current character in the data
+
+    /**
+     * Read the next character from the data
+     */
+    function next() {
+        i++;
+        c = data[i];
+    }
+
+    /**
+     * Preview the next character in the data
+     * @returns {String} nextChar
+     */
+    function previewNext () {
+        return data[i + 1];
+    }
+
+    /**
+     * Preview the next character in the data
+     * @returns {String} nextChar
+     */
+    function previewPrevious () {
+        return data[i + 1];
+    }
+
+    /**
+     * Get a text description of the the current index in the data
+     * @return {String} desc
+     */
+    function pos() {
+        return '(char ' + i + ')';
+    }
+
+    /**
+     * Skip whitespace and comments
+     */
+    function parseWhitespace() {
+        // skip whitespace
+        while (c && isWhitespace(c)) {
+            next();
+        }
+
+        // test for comment
+        var cNext = data[i + 1];
+        var cPrev = data[i - 1];
+        var c2 = c + cNext;
+        if (c2 == '/*') {
+            // block comment. skip until the block is closed
+            while (c && !(c == '*' && data[i + 1] == '/')) {
+                next();
+            }
+            next();
+            next();
+
+            parseWhitespace();
+        }
+        else if (c2 == '//' || (c == '#' && cPrev == '\n')) {
+            // line comment. skip until the next return
+            while (c && c != '\n') {
+                next();
+            }
+            next();
+            parseWhitespace();
+        }
+    }
+
+    /**
+     * Parse a string
+     * The string may be enclosed by double quotes
+     * @return {String | undefined} value
+     */
+    function parseString() {
+        parseWhitespace();
+
+        var name = '';
+        if (c == '"') {
+            next();
+            while (c && c != '"') {
+                name += c;
+                next();
+            }
+            next(); // skip the closing quote
+        }
+        else {
+            while (c && !isWhitespace(c) && !isDelimeter(c)) {
+                name += c;
+                next();
+            }
+
+            // cast string to number or boolean
+            var number = Number(name);
+            if (!isNaN(number)) {
+                name = number;
+            }
+            else if (name == 'true') {
+                name = true;
+            }
+            else if (name == 'false') {
+                name = false;
+            }
+            else if (name == 'null') {
+                name = null;
+            }
+        }
+
+        return name;
+    }
+
+    /**
+     * Parse a value, can be a string, number, or boolean.
+     * The value may be enclosed by double quotes
+     * @return {String | Number | Boolean | undefined} value
+     */
+    function parseValue() {
+        parseWhitespace();
+
+        if (c == '"') {
+            return parseString();
+        }
+        else {
+            var value = parseString();
+            if (value != undefined) {
+                // cast string to number or boolean
+                var number = Number(value);
+                if (!isNaN(number)) {
+                    value = number;
+                }
+                else if (value == 'true') {
+                    value = true;
+                }
+                else if (value == 'false') {
+                    value = false;
+                }
+                else if (value == 'null') {
+                    value = null;
+                }
+            }
+            return value;
+        }
+    }
+
+    /**
+     * Parse a set with attributes,
+     * for example [label="1.000", style=solid]
+     * @return {Object | undefined} attr
+     */
+    function parseAttributes() {
+        parseWhitespace();
+
+        if (c == '[') {
+            next();
+            var attr = {};
+            while (c && c != ']') {
+                parseWhitespace();
+
+                var name = parseString();
+                if (!name) {
+                    throw new SyntaxError('Attribute name expected ' + pos());
+                }
+
+                parseWhitespace();
+                if (c != '=') {
+                    throw new SyntaxError('Equal sign = expected ' + pos());
+                }
+                next();
+
+                var value = parseValue();
+                if (!value) {
+                    throw new SyntaxError('Attribute value expected ' + pos());
+                }
+                attr[name] = value;
+
+                parseWhitespace();
+
+                if (c ==',') {
+                    next();
+                }
+            }
+            next();
+
+            return attr;
+        }
+        else {
+            return undefined;
+        }
+    }
+
+    /**
+     * Parse a directed or undirected arrow '->' or '--'
+     * @return {String | undefined} arrow
+     */
+    function parseArrow() {
+        parseWhitespace();
+
+        if (c == '-') {
+            next();
+            if (c == '>' || c == '-') {
+                var arrow = '-' + c;
+                next();
+                return arrow;
+            }
+            else {
+                throw new SyntaxError('Arrow "->" or "--" expected ' + pos());
+            }
+        }
+
+        return undefined;
+    }
+
+    /**
+     * Parse a line separator ';'
+     * @return {String | undefined} separator
+     */
+    function parseSeparator() {
+        parseWhitespace();
+
+        if (c == ';') {
+            next();
+            return ';';
+        }
+
+        return undefined;
+    }
+
+    /**
+     * Merge all properties of object b into object b
+     * @param {Object} a
+     * @param {Object} b
+     */
+    function merge (a, b) {
+        if (a && b) {
+            for (var name in b) {
+                if (b.hasOwnProperty(name)) {
+                    a[name] = b[name];
+                }
+            }
+        }
+    }
+
+    var nodeMap = {};
+    var edgeList = [];
+
+    /**
+     * Register a node with attributes
+     * @param {String} id
+     * @param {Object} [attr]
+     */
+    function addNode(id, attr) {
+        var node = {
+            id: String(id),
+            attr: attr || {}
+        };
+        if (!nodeMap[id]) {
+            nodeMap[id] = node;
+        }
+        else {
+            merge(nodeMap[id].attr, node.attr);
+        }
+    }
+
+    /**
+     * Register an edge
+     * @param {String} from
+     * @param {String} to
+     * @param {String} type    A string "->" or "--"
+     * @param {Object} [attr]
+     */
+    function addEdge(from, to, type, attr) {
+        edgeList.push({
+            from: String(from),
+            to: String(to),
+            type: type,
+            attr: attr || {}
+        });
+    }
+
+    // find the opening curly bracket
+    next();
+    while (c && c != '{') {
+        next();
+    }
+    if (c != '{') {
+        throw new SyntaxError('Invalid data. Curly bracket { expected ' + pos())
+    }
+    next();
+
+    // parse all data until a closing curly bracket is encountered
+    while (c && c != '}') {
+        // parse node id and optional node attributes
+        var id = parseString();
+        if (id == undefined) {
+            throw new SyntaxError('String with id expected ' + pos());
+        }
+        var attr = parseAttributes();
+        addNode(id, attr);
+
+        // TODO: parse global attributes "graph", "node", "edge"
+
+        // parse arrow
+        var type = parseArrow();
+        while (type) {
+            // parse node id
+            var prevId = id;
+            id = parseString();
+            if (id == undefined) {
+                throw new SyntaxError('String with id expected ' + pos());
+            }
+            addNode(id);
+
+            // parse edge attributes and register edge
+            attr = parseAttributes();
+            addEdge(prevId, id, type, attr);
+
+            // parse next arrow (optional)
+            type = parseArrow();
+        }
+
+        // parse separator (optional)
+        parseSeparator();
+
+        parseWhitespace();
+    }
+    if (c != '}') {
+        throw new SyntaxError('Invalid data. Curly bracket } expected');
+    }
+
+    // crop data between the curly brackets
+    var start = data.indexOf('{');
+    var end = data.indexOf('}', start);
+    var text = (start != -1 && end != -1) ? data.substring(start + 1, end) : undefined;
+
+    if (!text) {
+        throw new Error('Invalid data. no curly brackets containing data found');
+    }
+
+    // return the results
+    var nodeList = [];
+    for (id in nodeMap) {
+        if (nodeMap.hasOwnProperty(id)) {
+            nodeList.push(nodeMap[id]);
+        }
+    }
+    return {
+        nodes: nodeList,
+        edges: edgeList
+    }
+};
+
+/**
+ * Convert a string containing a graph in DOT language into a map containing
+ * with nodes and edges in the format of graph.
+ * @param {String} data         Text containing a graph in DOT-notation
+ * @return {Object} graphData
+ */
+util.DOTToGraph = function (data) {
+    // parse the DOT file
+    var dotData = util.parseDOT(data);
+    var graphData = {
+        nodes: [],
+        edges: [],
+        options: {
+            nodes: {},
+            edges: {}
+        }
+    };
+
+    /**
+     * Merge the properties of object b into object a, and adjust properties
+     * not supported by Graph (for example replace "shape" with "style"
+     * @param {Object} a
+     * @param {Object} b
+     * @param {Array} [ignore]   Optional array with property names to be ignored
+     */
+    function merge (a, b, ignore) {
+        for (var prop in b) {
+            if (b.hasOwnProperty(prop) && (!ignore || ignore.indexOf(prop) == -1)) {
+                a[prop] = b[prop];
+            }
+        }
+
+        // Convert aliases to configuration settings supported by Graph
+        if (a.label) {
+            a.text = a.label;
+            delete a.label;
+        }
+        if (a.shape) {
+            a.style = a.shape;
+            delete a.shape;
+        }
+    }
+
+    dotData.nodes.forEach(function (node) {
+        if (node.id.toLowerCase() == 'graph') {
+            merge(graphData.options, node.attr);
+        }
+        else if (node.id.toLowerCase() == 'node') {
+            merge(graphData.options.nodes, node.attr);
+        }
+        else if (node.id.toLowerCase() == 'edge') {
+            merge(graphData.options.edges, node.attr);
+        }
+        else {
+            var graphNode = {};
+            graphNode.id = node.id;
+            graphNode.text = node.id;
+            merge(graphNode, node.attr);
+            graphData.nodes.push(graphNode);
+        }
+    });
+
+    dotData.edges.forEach(function (edge) {
+        var graphEdge = {};
+        graphEdge.from = edge.from;
+        graphEdge.to = edge.to;
+        graphEdge.text = edge.id;
+        graphEdge.style = (edge.type == '->') ? 'arrow-end' : 'line';
+        merge(graphEdge, edge.attr);
+        graphData.edges.push(graphEdge);
+    });
+
+    return graphData;
+};
diff --git a/src/graph/shapes.js b/src/graph/shapes.js
new file mode 100644
index 00000000..93919306
--- /dev/null
+++ b/src/graph/shapes.js
@@ -0,0 +1,225 @@
+/**
+ * Canvas shapes used by the Graph
+ */
+if (typeof CanvasRenderingContext2D !== 'undefined') {
+
+    /**
+     * Draw a circle shape
+     */
+    CanvasRenderingContext2D.prototype.circle = function(x, y, r) {
+        this.beginPath();
+        this.arc(x, y, r, 0, 2*Math.PI, false);
+    };
+
+    /**
+     * Draw a square shape
+     * @param {Number} x horizontal center
+     * @param {Number} y vertical center
+     * @param {Number} r   size, width and height of the square
+     */
+    CanvasRenderingContext2D.prototype.square = function(x, y, r) {
+        this.beginPath();
+        this.rect(x - r, y - r, r * 2, r * 2);
+    };
+
+    /**
+     * Draw a triangle shape
+     * @param {Number} x horizontal center
+     * @param {Number} y vertical center
+     * @param {Number} r   radius, half the length of the sides of the triangle
+     */
+    CanvasRenderingContext2D.prototype.triangle = function(x, y, r) {
+        // http://en.wikipedia.org/wiki/Equilateral_triangle
+        this.beginPath();
+
+        var s = r * 2;
+        var s2 = s / 2;
+        var ir = Math.sqrt(3) / 6 * s;      // radius of inner circle
+        var h = Math.sqrt(s * s - s2 * s2); // height
+
+        this.moveTo(x, y - (h - ir));
+        this.lineTo(x + s2, y + ir);
+        this.lineTo(x - s2, y + ir);
+        this.lineTo(x, y - (h - ir));
+        this.closePath();
+    };
+
+    /**
+     * Draw a triangle shape in downward orientation
+     * @param {Number} x horizontal center
+     * @param {Number} y vertical center
+     * @param {Number} r radius
+     */
+    CanvasRenderingContext2D.prototype.triangleDown = function(x, y, r) {
+        // http://en.wikipedia.org/wiki/Equilateral_triangle
+        this.beginPath();
+
+        var s = r * 2;
+        var s2 = s / 2;
+        var ir = Math.sqrt(3) / 6 * s;      // radius of inner circle
+        var h = Math.sqrt(s * s - s2 * s2); // height
+
+        this.moveTo(x, y + (h - ir));
+        this.lineTo(x + s2, y - ir);
+        this.lineTo(x - s2, y - ir);
+        this.lineTo(x, y + (h - ir));
+        this.closePath();
+    };
+
+    /**
+     * Draw a star shape, a star with 5 points
+     * @param {Number} x horizontal center
+     * @param {Number} y vertical center
+     * @param {Number} r   radius, half the length of the sides of the triangle
+     */
+    CanvasRenderingContext2D.prototype.star = function(x, y, r) {
+        // http://www.html5canvastutorials.com/labs/html5-canvas-star-spinner/
+        this.beginPath();
+
+        for (var n = 0; n < 10; n++) {
+            var radius = (n % 2 === 0) ? r * 1.3 : r * 0.5;
+            this.lineTo(
+                x + radius * Math.sin(n * 2 * Math.PI / 10),
+                y - radius * Math.cos(n * 2 * Math.PI / 10)
+            );
+        }
+
+        this.closePath();
+    };
+
+    /**
+     * http://stackoverflow.com/questions/1255512/how-to-draw-a-rounded-rectangle-on-html-canvas
+     */
+    CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) {
+        var r2d = Math.PI/180;
+        if( w - ( 2 * r ) < 0 ) { r = ( w / 2 ); } //ensure that the radius isn't too large for x
+        if( h - ( 2 * r ) < 0 ) { r = ( h / 2 ); } //ensure that the radius isn't too large for y
+        this.beginPath();
+        this.moveTo(x+r,y);
+        this.lineTo(x+w-r,y);
+        this.arc(x+w-r,y+r,r,r2d*270,r2d*360,false);
+        this.lineTo(x+w,y+h-r);
+        this.arc(x+w-r,y+h-r,r,0,r2d*90,false);
+        this.lineTo(x+r,y+h);
+        this.arc(x+r,y+h-r,r,r2d*90,r2d*180,false);
+        this.lineTo(x,y+r);
+        this.arc(x+r,y+r,r,r2d*180,r2d*270,false);
+    };
+
+    /**
+     * http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
+     */
+    CanvasRenderingContext2D.prototype.ellipse = function(x, y, w, h) {
+        var kappa = .5522848,
+            ox = (w / 2) * kappa, // control point offset horizontal
+            oy = (h / 2) * kappa, // control point offset vertical
+            xe = x + w,           // x-end
+            ye = y + h,           // y-end
+            xm = x + w / 2,       // x-middle
+            ym = y + h / 2;       // y-middle
+
+        this.beginPath();
+        this.moveTo(x, ym);
+        this.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
+        this.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
+        this.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
+        this.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
+    };
+
+
+
+    /**
+     * http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
+     */
+    CanvasRenderingContext2D.prototype.database = function(x, y, w, h) {
+        var f = 1/3;
+        var wEllipse = w;
+        var hEllipse = h * f;
+
+        var kappa = .5522848,
+            ox = (wEllipse / 2) * kappa, // control point offset horizontal
+            oy = (hEllipse / 2) * kappa, // control point offset vertical
+            xe = x + wEllipse,           // x-end
+            ye = y + hEllipse,           // y-end
+            xm = x + wEllipse / 2,       // x-middle
+            ym = y + hEllipse / 2,       // y-middle
+            ymb = y + (h - hEllipse/2),  // y-midlle, bottom ellipse
+            yeb = y + h;                 // y-end, bottom ellipse
+
+        this.beginPath();
+        this.moveTo(xe, ym);
+
+        this.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
+        this.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
+
+        this.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
+        this.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
+
+        this.lineTo(xe, ymb);
+
+        this.bezierCurveTo(xe, ymb + oy, xm + ox, yeb, xm, yeb);
+        this.bezierCurveTo(xm - ox, yeb, x, ymb + oy, x, ymb);
+
+        this.lineTo(x, ym);
+    };
+
+
+    /**
+     * Draw an arrow point (no line)
+     */
+    CanvasRenderingContext2D.prototype.arrow = function(x, y, angle, length) {
+        // tail
+        var xt = x - length * Math.cos(angle);
+        var yt = y - length * Math.sin(angle);
+
+        // inner tail
+        // TODO: allow to customize different shapes
+        var xi = x - length * 0.9 * Math.cos(angle);
+        var yi = y - length * 0.9 * Math.sin(angle);
+
+        // left
+        var xl = xt + length / 3 * Math.cos(angle + 0.5 * Math.PI);
+        var yl = yt + length / 3 * Math.sin(angle + 0.5 * Math.PI);
+
+        // right
+        var xr = xt + length / 3 * Math.cos(angle - 0.5 * Math.PI);
+        var yr = yt + length / 3 * Math.sin(angle - 0.5 * Math.PI);
+
+        this.beginPath();
+        this.moveTo(x, y);
+        this.lineTo(xl, yl);
+        this.lineTo(xi, yi);
+        this.lineTo(xr, yr);
+        this.closePath();
+    };
+
+    /**
+     * Sets up the dashedLine functionality for drawing
+     * Original code came from http://stackoverflow.com/questions/4576724/dotted-stroke-in-canvas
+     * @author David Jordan
+     * @date 2012-08-08
+     */
+    CanvasRenderingContext2D.prototype.dashedLine = function(x,y,x2,y2,dashArray){
+        if (!dashArray) dashArray=[10,5];
+        if (dashLength==0) dashLength = 0.001; // Hack for Safari
+        var dashCount = dashArray.length;
+        this.moveTo(x, y);
+        var dx = (x2-x), dy = (y2-y);
+        var slope = dy/dx;
+        var distRemaining = Math.sqrt( dx*dx + dy*dy );
+        var dashIndex=0, draw=true;
+        while (distRemaining>=0.1){
+            var dashLength = dashArray[dashIndex++%dashCount];
+            if (dashLength > distRemaining) dashLength = distRemaining;
+            var xStep = Math.sqrt( dashLength*dashLength / (1 + slope*slope) );
+            if (dx<0) xStep = -xStep;
+            x += xStep;
+            y += slope*xStep;
+            this[draw ? 'lineTo' : 'moveTo'](x,y);
+            distRemaining -= dashLength;
+            draw = !draw;
+        }
+    };
+
+    // TODO: add diamond shape
+}
diff --git a/src/module/exports.js b/src/module/exports.js
index 91c9484a..da62569f 100644
--- a/src/module/exports.js
+++ b/src/module/exports.js
@@ -28,6 +28,14 @@ var vis = {
         TimeAxis: TimeAxis
     },
 
+    graph: {
+        Node: Node,
+        Edge: Edge,
+        Popup: Popup,
+        Groups: Groups,
+        Images: Images
+    },
+
     Timeline: Timeline,
     Graph: Graph
 };
diff --git a/vis.js b/vis.js
index 7139e1aa..6923a4d1 100644
--- a/vis.js
+++ b/vis.js
@@ -6805,4029 +6805,3895 @@ Timeline.prototype.getItemRange = function getItemRange() {
     };
 };
 
+
 /**
- * @constructor Graph
- * Create a graph visualization, displaying nodes and edges.
- * 
- * @param {Element} container   The DOM element in which the Graph will
- *                                  be created. Normally a div element.
- * @param {Object} data         An object containing parameters
- *                              {Array} nodes
- *                              {Array} edges
- * @param {Object} options      Options
+ * Parse a text source containing data in DOT language into a JSON object.
+ * The object contains two lists: one with nodes and one with edges.
+ * @param {String} data     Text containing a graph in DOT-notation
+ * @return {Object} json    An object containing two parameters:
+ *                          {Object[]} nodes
+ *                          {Object[]} edges
  */
-function Graph (container, data, options) {
-    // create variables and set default values
-    this.containerElement = container;
-    this.width = "100%";
-    this.height = "100%";
-    this.refreshRate = 50; // milliseconds
-    this.stabilize = true; // stabilize before displaying the graph
-    this.selectable = true;
-
-    // set constant values
-    this.constants = {
-        "nodes": {
-            "radiusMin": 5,
-            "radiusMax": 20,
-            "radius": 5,
-            "distance": 100, // px
-            "style": "rect",
-            "image": undefined,
-            "widthMin": 16, // px
-            "widthMax": 64, // px
-            "fontColor": "black",
-            "fontSize": 14, // px
-            //"fontFace": "verdana",
-            "fontFace": "arial",
-            "borderColor": "#2B7CE9",
-            "backgroundColor": "#97C2FC",
-            "highlightColor": "#D2E5FF",
-            "group": undefined
-        },
-        "edges": {
-            "widthMin": 1,
-            "widthMax": 15,
-            "width": 1,
-            "style": "line",
-            "color": "#343434",
-            "fontColor": "#343434",
-            "fontSize": 14, // px
-            "fontFace": "arial",
-            //"distance": 100, //px
-            "length": 100,   // px
-            "dashlength": 10,
-            "dashgap": 5
-        },
-        "minForce": 0.05,
-        "minVelocity": 0.02,   // px/s
-        "maxIterations": 1000  // maximum number of iteration to stabilize
-    };
-
-    this.nodes = [];     // array with Node objects
-    this.edges = [];     // array with Edge objects
-    this.images = new Graph.Images();     // object with images
-    this.groups = new Graph.Groups();     // object with groups
-
-    // properties of the data
-    this.moving = false;    // True if any of the nodes have an undefined position
-
-    this.selection = [];
-    this.timer = undefined;
-
-    // create a frame and canvas
-    this._create();
+util.parseDOT = function (data) {
+    /**
+     * Test whether given character is a whitespace character
+     * @param {String} c
+     * @return {Boolean} isWhitespace
+     */
+    function isWhitespace(c) {
+        return c == ' ' || c == '\t' || c == '\n' || c == '\r';
+    }
 
-    // apply options
-    this.setOptions(options);
+    /**
+     * Test whether given character is a delimeter
+     * @param {String} c
+     * @return {Boolean} isDelimeter
+     */
+    function isDelimeter(c) {
+        return '[]{}();,=->'.indexOf(c) != -1;
+    }
 
-    // draw data
-    this.setData(data);
-}
+    var i = -1;  // current index in the data
+    var c = '';  // current character in the data
 
-/**
- * Main drawing logic. This is the function that needs to be called
- * in the html page, to draw the Graph.
- *
- * A data table with the events must be provided, and an options table.
- * @param {Object} data    Object containing parameters:
- *                         {Array} nodes     Array with nodes
- *                         {Array} edges     Array with edges
- *                         {Options} [options] Object with options
- */
-Graph.prototype.setData = function(data) {
-    if (data.options) {
-        this.setOptions(data.options);
+    /**
+     * Read the next character from the data
+     */
+    function next() {
+        i++;
+        c = data[i];
     }
 
-    // set all data
-    this.setNodes(data.nodes);
-    this.setEdges(data.edges);
-
-    this._reposition(); // TODO: bad solution
-    if (this.stabilize) {
-        this._doStabilize();
+    /**
+     * Preview the next character in the data
+     * @returns {String} nextChar
+     */
+    function previewNext () {
+        return data[i + 1];
     }
-    this.start();
 
-    // create an onload callback method for the images
-    var graph = this;
-    var callback = function () {
-        graph._redraw();
-    };
-    this.images.setOnloadCallback(callback);
+    /**
+     * Preview the next character in the data
+     * @returns {String} nextChar
+     */
+    function previewPrevious () {
+        return data[i + 1];
+    }
 
-    // fire the ready event
-    this.trigger('ready');
-};
+    /**
+     * Get a text description of the the current index in the data
+     * @return {String} desc
+     */
+    function pos() {
+        return '(char ' + i + ')';
+    }
 
-/**
- * Set options
- * @param {Object} options
- */
-Graph.prototype.setOptions = function (options) {
-    if (options) {
-        // retrieve parameter values
-        if (options.width != undefined)           {this.width = options.width;}
-        if (options.height != undefined)          {this.height = options.height;}
-        if (options.stabilize != undefined)       {this.stabilize = options.stabilize;}
-        if (options.selectable != undefined)      {this.selectable = options.selectable;}
+    /**
+     * Skip whitespace and comments
+     */
+    function parseWhitespace() {
+        // skip whitespace
+        while (c && isWhitespace(c)) {
+            next();
+        }
 
-        // TODO: work out these options and document them
-        if (options.edges) {
-            for (var prop in options.edges) {
-                if (options.edges.hasOwnProperty(prop)) {
-                    this.constants.edges[prop] = options.edges[prop];
-                }
+        // test for comment
+        var cNext = data[i + 1];
+        var cPrev = data[i - 1];
+        var c2 = c + cNext;
+        if (c2 == '/*') {
+            // block comment. skip until the block is closed
+            while (c && !(c == '*' && data[i + 1] == '/')) {
+                next();
             }
+            next();
+            next();
 
-            if (options.edges.length != undefined &&
-                options.nodes && options.nodes.distance == undefined) {
-                this.constants.edges.length   = options.edges.length;
-                this.constants.nodes.distance = options.edges.length * 1.25;
+            parseWhitespace();
+        }
+        else if (c2 == '//' || (c == '#' && cPrev == '\n')) {
+            // line comment. skip until the next return
+            while (c && c != '\n') {
+                next();
             }
+            next();
+            parseWhitespace();
+        }
+    }
 
-            if (!options.edges.fontColor) {
-                this.constants.edges.fontColor = options.edges.color;
+    /**
+     * Parse a string
+     * The string may be enclosed by double quotes
+     * @return {String | undefined} value
+     */
+    function parseString() {
+        parseWhitespace();
+
+        var name = '';
+        if (c == '"') {
+            next();
+            while (c && c != '"') {
+                name += c;
+                next();
+            }
+            next(); // skip the closing quote
+        }
+        else {
+            while (c && !isWhitespace(c) && !isDelimeter(c)) {
+                name += c;
+                next();
             }
 
-            // Added to support dashed lines
-            // David Jordan
-            // 2012-08-08
-            if (options.edges.dashlength != undefined) {
-                this.constants.edges.dashlength   = options.edges.dashlength;
+            // cast string to number or boolean
+            var number = Number(name);
+            if (!isNaN(number)) {
+                name = number;
             }
-            if (options.edges.dashgap != undefined) {
-                this.constants.edges.dashgap   = options.edges.dashgap;
+            else if (name == 'true') {
+                name = true;
             }
-            if (options.edges.altdashlength != undefined) {
-                this.constants.edges.altdashlength   = options.edges.altdashlength;
+            else if (name == 'false') {
+                name = false;
             }
-        }
-
-        if (options.nodes) {
-            for (prop in options.nodes) {
-                if (options.nodes.hasOwnProperty(prop)) {
-                    this.constants.nodes[prop] = options.nodes[prop];
-                }
+            else if (name == 'null') {
+                name = null;
             }
-
-            /*
-             if (options.nodes.widthMin) this.constants.nodes.radiusMin = options.nodes.widthMin;
-             if (options.nodes.widthMax) this.constants.nodes.radiusMax = options.nodes.widthMax;
-             */
         }
 
-        if (options.groups) {
-            for (var groupname in options.groups) {
-                if (options.groups.hasOwnProperty(groupname)) {
-                    var group = options.groups[groupname];
-                    this.groups.add(groupname, group);
+        return name;
+    }
+
+    /**
+     * Parse a value, can be a string, number, or boolean.
+     * The value may be enclosed by double quotes
+     * @return {String | Number | Boolean | undefined} value
+     */
+    function parseValue() {
+        parseWhitespace();
+
+        if (c == '"') {
+            return parseString();
+        }
+        else {
+            var value = parseString();
+            if (value != undefined) {
+                // cast string to number or boolean
+                var number = Number(value);
+                if (!isNaN(number)) {
+                    value = number;
+                }
+                else if (value == 'true') {
+                    value = true;
+                }
+                else if (value == 'false') {
+                    value = false;
+                }
+                else if (value == 'null') {
+                    value = null;
                 }
             }
+            return value;
         }
-
-        this._setBackgroundColor(options.backgroundColor);
     }
 
-    this._setSize(this.width, this.height);
-    this._setTranslation(0, 0);
-    this._setScale(1.0);
-};
+    /**
+     * Parse a set with attributes,
+     * for example [label="1.000", style=solid]
+     * @return {Object | undefined} attr
+     */
+    function parseAttributes() {
+        parseWhitespace();
 
-/**
- * fire an event
- * @param {String} event   The name of an event, for example "select" or "ready"
- * @param {Object} params  Optional object with event parameters
- */
-Graph.prototype.trigger = function (event, params) {
-    // trigger the edges event bus
-    events.trigger(this, event, params);
+        if (c == '[') {
+            next();
+            var attr = {};
+            while (c && c != ']') {
+                parseWhitespace();
 
-    // trigger the google event bus
-    if (typeof google !== 'undefined' && google.visualization && google.visualization.events) {
-        google.visualization.events.trigger(this, event, params);
-    }
-};
+                var name = parseString();
+                if (!name) {
+                    throw new SyntaxError('Attribute name expected ' + pos());
+                }
 
+                parseWhitespace();
+                if (c != '=') {
+                    throw new SyntaxError('Equal sign = expected ' + pos());
+                }
+                next();
 
-/**
- * Create the main frame for the Graph.
- * This function is executed once when a Graph object is created. The frame
- * contains a canvas, and this canvas contains all objects like the axis and
- * nodes.
- */
-Graph.prototype._create = function () {
-    // remove all elements from the container element.
-    while (this.containerElement.hasChildNodes()) {
-        this.containerElement.removeChild(this.containerElement.firstChild);
-    }
+                var value = parseValue();
+                if (!value) {
+                    throw new SyntaxError('Attribute value expected ' + pos());
+                }
+                attr[name] = value;
 
-    this.frame = document.createElement("div");
-    this.frame.className = "graph-frame";
-    this.frame.style.position = "relative";
-    this.frame.style.overflow = "hidden";
+                parseWhitespace();
 
-    // create the graph canvas (HTML canvas element)
-    this.frame.canvas = document.createElement( "canvas" );
-    this.frame.canvas.style.position = "relative";
-    this.frame.appendChild(this.frame.canvas);
-    if (!this.frame.canvas.getContext) {
-        var noCanvas = document.createElement( "DIV" );
-        noCanvas.style.color = "red";
-        noCanvas.style.fontWeight =  "bold" ;
-        noCanvas.style.padding =  "10px";
-        noCanvas.innerHTML =  "Error: your browser does not support HTML canvas";
-        this.frame.canvas.appendChild(noCanvas);
-    }
+                if (c ==',') {
+                    next();
+                }
+            }
+            next();
 
-    // create event listeners
-    var me = this;
-    var onmousedown = function (event) {me._onMouseDown(event);};
-    var onmousemove = function (event) {me._onMouseMoveTitle(event);};
-    var onmousewheel = function (event) {me._onMouseWheel(event);};
-    var ontouchstart = function (event) {me._onTouchStart(event);};
-    vis.util.addEventListener(this.frame.canvas, "mousedown", onmousedown);
-    vis.util.addEventListener(this.frame.canvas, "mousemove", onmousemove);
-    vis.util.addEventListener(this.frame.canvas, "mousewheel", onmousewheel);
-    vis.util.addEventListener(this.frame.canvas, "touchstart", ontouchstart);
+            return attr;
+        }
+        else {
+            return undefined;
+        }
+    }
 
-    // add the frame to the container element
-    this.containerElement.appendChild(this.frame);
-};
+    /**
+     * Parse a directed or undirected arrow '->' or '--'
+     * @return {String | undefined} arrow
+     */
+    function parseArrow() {
+        parseWhitespace();
 
-/**
- * Set the background  and border styling for the graph
- * @param {String | Object} backgroundColor
- */
-Graph.prototype._setBackgroundColor = function(backgroundColor) {
-    var fill = "white";
-    var stroke = "lightgray";
-    var strokeWidth = 1;
+        if (c == '-') {
+            next();
+            if (c == '>' || c == '-') {
+                var arrow = '-' + c;
+                next();
+                return arrow;
+            }
+            else {
+                throw new SyntaxError('Arrow "->" or "--" expected ' + pos());
+            }
+        }
 
-    if (typeof(backgroundColor) == "string") {
-        fill = backgroundColor;
-        stroke = "none";
-        strokeWidth = 0;
-    }
-    else if (typeof(backgroundColor) == "object") {
-        if (backgroundColor.fill != undefined)        fill = backgroundColor.fill;
-        if (backgroundColor.stroke != undefined)      stroke = backgroundColor.stroke;
-        if (backgroundColor.strokeWidth != undefined) strokeWidth = backgroundColor.strokeWidth;
-    }
-    else if  (backgroundColor == undefined) {
-        // use use defaults
-    }
-    else {
-        throw "Unsupported type of backgroundColor";
+        return undefined;
     }
 
-    this.frame.style.boxSizing = 'border-box';
-    this.frame.style.backgroundColor = fill;
-    this.frame.style.borderColor = stroke;
-    this.frame.style.borderWidth = strokeWidth + "px";
-    this.frame.style.borderStyle = "solid";
-};
-
+    /**
+     * Parse a line separator ';'
+     * @return {String | undefined} separator
+     */
+    function parseSeparator() {
+        parseWhitespace();
 
-/**
- * handle on mouse down event
- */
-Graph.prototype._onMouseDown = function (event) {
-    event = event || window.event;
+        if (c == ';') {
+            next();
+            return ';';
+        }
 
-    if (!this.selectable) {
-        return;
+        return undefined;
     }
 
-    // check if mouse is still down (may be up when focus is lost for example
-    // in an iframe)
-    if (this.leftButtonDown) {
-        this._onMouseUp(event);
+    /**
+     * Merge all properties of object b into object b
+     * @param {Object} a
+     * @param {Object} b
+     */
+    function merge (a, b) {
+        if (a && b) {
+            for (var name in b) {
+                if (b.hasOwnProperty(name)) {
+                    a[name] = b[name];
+                }
+            }
+        }
     }
 
-    // only react on left mouse button down
-    this.leftButtonDown = event.which ? (event.which == 1) : (event.button == 1);
-    if (!this.leftButtonDown && !this.touchDown) {
-        return;
-    }
+    var nodeMap = {};
+    var edgeList = [];
 
-    // add event listeners to handle moving the contents
-    // we store the function onmousemove and onmouseup in the timeline, so we can
-    // remove the eventlisteners lateron in the function mouseUp()
-    var me = this;
-    if (!this.onmousemove) {
-        this.onmousemove = function (event) {me._onMouseMove(event);};
-        vis.util.addEventListener(document, "mousemove", me.onmousemove);
-    }
-    if (!this.onmouseup) {
-        this.onmouseup = function (event) {me._onMouseUp(event);};
-        vis.util.addEventListener(document, "mouseup", me.onmouseup);
+    /**
+     * Register a node with attributes
+     * @param {String} id
+     * @param {Object} [attr]
+     */
+    function addNode(id, attr) {
+        var node = {
+            id: String(id),
+            attr: attr || {}
+        };
+        if (!nodeMap[id]) {
+            nodeMap[id] = node;
+        }
+        else {
+            merge(nodeMap[id].attr, node.attr);
+        }
     }
-    vis.util.preventDefault(event);
 
-    // store the start x and y position of the mouse
-    this.startMouseX = event.clientX || event.targetTouches[0].clientX;
-    this.startMouseY = event.clientY || event.targetTouches[0].clientY;
-    this.startFrameLeft = vis.util.getAbsoluteLeft(this.frame.canvas);
-    this.startFrameTop = vis.util.getAbsoluteTop(this.frame.canvas);
-    this.startTranslation = this._getTranslation();
+    /**
+     * Register an edge
+     * @param {String} from
+     * @param {String} to
+     * @param {String} type    A string "->" or "--"
+     * @param {Object} [attr]
+     */
+    function addEdge(from, to, type, attr) {
+        edgeList.push({
+            from: String(from),
+            to: String(to),
+            type: type,
+            attr: attr || {}
+        });
+    }
 
-    this.ctrlKeyDown = event.ctrlKey;
-    this.shiftKeyDown = event.shiftKey;
+    // find the opening curly bracket
+    next();
+    while (c && c != '{') {
+        next();
+    }
+    if (c != '{') {
+        throw new SyntaxError('Invalid data. Curly bracket { expected ' + pos())
+    }
+    next();
 
-    var obj = {
-        "left" :   this._xToCanvas(this.startMouseX - this.startFrameLeft),
-        "top" :    this._yToCanvas(this.startMouseY - this.startFrameTop),
-        "right" :  this._xToCanvas(this.startMouseX - this.startFrameLeft),
-        "bottom" : this._yToCanvas(this.startMouseY - this.startFrameTop)
-    };
-    var overlappingNodes = this._getNodesOverlappingWith(obj);
-    // if there are overlapping nodes, select the last one, this is the
-    // one which is drawn on top of the others
-    this.startClickedObj = (overlappingNodes.length > 0) ?
-        overlappingNodes[overlappingNodes.length - 1] : undefined;
+    // parse all data until a closing curly bracket is encountered
+    while (c && c != '}') {
+        // parse node id and optional node attributes
+        var id = parseString();
+        if (id == undefined) {
+            throw new SyntaxError('String with id expected ' + pos());
+        }
+        var attr = parseAttributes();
+        addNode(id, attr);
 
-    if (this.startClickedObj) {
-        // move clicked node with the mouse
+        // TODO: parse global attributes "graph", "node", "edge"
 
-        // make the clicked node temporarily fixed, and store their original state
-        var node = this.nodes[this.startClickedObj.row];
-        this.startClickedObj.xFixed = node.xFixed;
-        this.startClickedObj.yFixed = node.yFixed;
-        node.xFixed = true;
-        node.yFixed = true;
+        // parse arrow
+        var type = parseArrow();
+        while (type) {
+            // parse node id
+            var prevId = id;
+            id = parseString();
+            if (id == undefined) {
+                throw new SyntaxError('String with id expected ' + pos());
+            }
+            addNode(id);
 
-        if (!this.ctrlKeyDown || !node.isSelected()) {
-            // select this node
-            this._selectNodes([this.startClickedObj], this.ctrlKeyDown);
-        }
-        else {
-            // unselect this node
-            this._unselectNodes([this.startClickedObj]);
-        }
+            // parse edge attributes and register edge
+            attr = parseAttributes();
+            addEdge(prevId, id, type, attr);
 
-        if (!this.moving) {
-            this._redraw();
+            // parse next arrow (optional)
+            type = parseArrow();
         }
-    }
-    else if (this.shiftKeyDown) {
-        // start selection of multiple nodes
-    }
-    else {
-        // start moving the graph
-        this.moved = false;
-    }
-};
 
-/**
- * handle on mouse move event
- */
-Graph.prototype._onMouseMove = function (event) {
-    event = event || window.event;
+        // parse separator (optional)
+        parseSeparator();
 
-    if (!this.selectable) {
-        return;
+        parseWhitespace();
+    }
+    if (c != '}') {
+        throw new SyntaxError('Invalid data. Curly bracket } expected');
     }
 
-    var mouseX = event.clientX || (event.targetTouches && event.targetTouches[0].clientX) || 0;
-    var mouseY = event.clientY || (event.targetTouches && event.targetTouches[0].clientY) || 0;
-    this.mouseX = mouseX;
-    this.mouseY = mouseY;
-
-    if (this.startClickedObj) {
-        var node = this.nodes[this.startClickedObj.row];
-
-        if (!this.startClickedObj.xFixed)
-            node.x = this._xToCanvas(mouseX - this.startFrameLeft);
+    // crop data between the curly brackets
+    var start = data.indexOf('{');
+    var end = data.indexOf('}', start);
+    var text = (start != -1 && end != -1) ? data.substring(start + 1, end) : undefined;
 
-        if (!this.startClickedObj.yFixed)
-            node.y = this._yToCanvas(mouseY - this.startFrameTop);
+    if (!text) {
+        throw new Error('Invalid data. no curly brackets containing data found');
+    }
 
-        // start animation if not yet running
-        if (!this.moving) {
-            this.moving = true;
-            this.start();
+    // return the results
+    var nodeList = [];
+    for (id in nodeMap) {
+        if (nodeMap.hasOwnProperty(id)) {
+            nodeList.push(nodeMap[id]);
         }
     }
-    else if (this.shiftKeyDown) {
-        // draw a rect from start mouse location to current mouse location
-        if (this.frame.selRect == undefined) {
-            this.frame.selRect = document.createElement("DIV");
-            this.frame.appendChild(this.frame.selRect);
+    return {
+        nodes: nodeList,
+        edges: edgeList
+    }
+};
 
-            this.frame.selRect.style.position = "absolute";
-            this.frame.selRect.style.border = "1px dashed red";
+/**
+ * Convert a string containing a graph in DOT language into a map containing
+ * with nodes and edges in the format of graph.
+ * @param {String} data         Text containing a graph in DOT-notation
+ * @return {Object} graphData
+ */
+util.DOTToGraph = function (data) {
+    // parse the DOT file
+    var dotData = util.parseDOT(data);
+    var graphData = {
+        nodes: [],
+        edges: [],
+        options: {
+            nodes: {},
+            edges: {}
         }
+    };
 
-        var left =   Math.min(this.startMouseX, mouseX) - this.startFrameLeft;
-        var top =    Math.min(this.startMouseY, mouseY) - this.startFrameTop;
-        var right =  Math.max(this.startMouseX, mouseX) - this.startFrameLeft;
-        var bottom = Math.max(this.startMouseY, mouseY) - this.startFrameTop;
+    /**
+     * Merge the properties of object b into object a, and adjust properties
+     * not supported by Graph (for example replace "shape" with "style"
+     * @param {Object} a
+     * @param {Object} b
+     * @param {Array} [ignore]   Optional array with property names to be ignored
+     */
+    function merge (a, b, ignore) {
+        for (var prop in b) {
+            if (b.hasOwnProperty(prop) && (!ignore || ignore.indexOf(prop) == -1)) {
+                a[prop] = b[prop];
+            }
+        }
 
-        this.frame.selRect.style.left = left + "px";
-        this.frame.selRect.style.top = top + "px";
-        this.frame.selRect.style.width = (right - left) + "px";
-        this.frame.selRect.style.height = (bottom - top) + "px";
+        // Convert aliases to configuration settings supported by Graph
+        if (a.label) {
+            a.text = a.label;
+            delete a.label;
+        }
+        if (a.shape) {
+            a.style = a.shape;
+            delete a.shape;
+        }
     }
-    else {
-        // move the graph
-        var diffX = mouseX - this.startMouseX;
-        var diffY = mouseY - this.startMouseY;
 
-        this._setTranslation(
-            this.startTranslation.x + diffX,
-            this.startTranslation.y + diffY);
-        this._redraw();
+    dotData.nodes.forEach(function (node) {
+        if (node.id.toLowerCase() == 'graph') {
+            merge(graphData.options, node.attr);
+        }
+        else if (node.id.toLowerCase() == 'node') {
+            merge(graphData.options.nodes, node.attr);
+        }
+        else if (node.id.toLowerCase() == 'edge') {
+            merge(graphData.options.edges, node.attr);
+        }
+        else {
+            var graphNode = {};
+            graphNode.id = node.id;
+            graphNode.text = node.id;
+            merge(graphNode, node.attr);
+            graphData.nodes.push(graphNode);
+        }
+    });
 
-        this.moved = true;
-    }
+    dotData.edges.forEach(function (edge) {
+        var graphEdge = {};
+        graphEdge.from = edge.from;
+        graphEdge.to = edge.to;
+        graphEdge.text = edge.id;
+        graphEdge.style = (edge.type == '->') ? 'arrow-end' : 'line';
+        merge(graphEdge, edge.attr);
+        graphData.edges.push(graphEdge);
+    });
 
-    vis.util.preventDefault(event);
+    return graphData;
 };
 
 /**
- * handle on mouse up event
+ * Canvas shapes used by the Graph
  */
-Graph.prototype._onMouseUp = function (event) {
-    event = event || window.event;
-
-    if (!this.selectable) {
-        return;
-    }
-
-    // remove event listeners here, important for Safari
-    if (this.onmousemove) {
-        vis.util.removeEventListener(document, "mousemove", this.onmousemove);
-        this.onmousemove = undefined;
-    }
-    if (this.onmouseup) {
-        vis.util.removeEventListener(document, "mouseup",   this.onmouseup);
-        this.onmouseup = undefined;
-    }
-    vis.util.preventDefault(event);
-
-    // check selected nodes
-    var endMouseX = event.clientX || this.mouseX || 0;
-    var endMouseY = event.clientY || this.mouseY || 0;
+if (typeof CanvasRenderingContext2D !== 'undefined') {
 
-    var ctrlKey = event ? event.ctrlKey : window.event.ctrlKey;
+    /**
+     * Draw a circle shape
+     */
+    CanvasRenderingContext2D.prototype.circle = function(x, y, r) {
+        this.beginPath();
+        this.arc(x, y, r, 0, 2*Math.PI, false);
+    };
 
-    if (this.startClickedObj) {
-        // restore the original fixed state
-        var node = this.nodes[this.startClickedObj.row];
-        node.xFixed = this.startClickedObj.xFixed;
-        node.yFixed = this.startClickedObj.yFixed;
-    }
-    else if (this.shiftKeyDown) {
-        // select nodes inside selection area
-        var obj = {
-            "left":   this._xToCanvas(Math.min(this.startMouseX, endMouseX) - this.startFrameLeft),
-            "top":    this._yToCanvas(Math.min(this.startMouseY, endMouseY) - this.startFrameTop),
-            "right":  this._xToCanvas(Math.max(this.startMouseX, endMouseX) - this.startFrameLeft),
-            "bottom": this._yToCanvas(Math.max(this.startMouseY, endMouseY) - this.startFrameTop)
-        };
-        var overlappingNodes = this._getNodesOverlappingWith(obj);
-        this._selectNodes(overlappingNodes, ctrlKey);
-        this.redraw();
+    /**
+     * Draw a square shape
+     * @param {Number} x horizontal center
+     * @param {Number} y vertical center
+     * @param {Number} r   size, width and height of the square
+     */
+    CanvasRenderingContext2D.prototype.square = function(x, y, r) {
+        this.beginPath();
+        this.rect(x - r, y - r, r * 2, r * 2);
+    };
 
-        // remove the selection rectangle
-        if (this.frame.selRect) {
-            this.frame.removeChild(this.frame.selRect);
-            this.frame.selRect = undefined;
-        }
-    }
-    else {
-        if (!this.ctrlKeyDown && !this.moved) {
-            // remove selection
-            this._unselectNodes();
-            this._redraw();
-        }
-    }
+    /**
+     * Draw a triangle shape
+     * @param {Number} x horizontal center
+     * @param {Number} y vertical center
+     * @param {Number} r   radius, half the length of the sides of the triangle
+     */
+    CanvasRenderingContext2D.prototype.triangle = function(x, y, r) {
+        // http://en.wikipedia.org/wiki/Equilateral_triangle
+        this.beginPath();
 
-    this.leftButtonDown = false;
-    this.ctrlKeyDown = false;
-};
+        var s = r * 2;
+        var s2 = s / 2;
+        var ir = Math.sqrt(3) / 6 * s;      // radius of inner circle
+        var h = Math.sqrt(s * s - s2 * s2); // height
 
+        this.moveTo(x, y - (h - ir));
+        this.lineTo(x + s2, y + ir);
+        this.lineTo(x - s2, y + ir);
+        this.lineTo(x, y - (h - ir));
+        this.closePath();
+    };
 
-/**
- * Event handler for mouse wheel event, used to zoom the timeline
- * Code from http://adomas.org/javascript-mouse-wheel/
- * @param {event}  event   The event
- */
-Graph.prototype._onMouseWheel = function(event) {
-    event = event || window.event;
-    var mouseX = event.clientX;
-    var mouseY = event.clientY;
+    /**
+     * Draw a triangle shape in downward orientation
+     * @param {Number} x horizontal center
+     * @param {Number} y vertical center
+     * @param {Number} r radius
+     */
+    CanvasRenderingContext2D.prototype.triangleDown = function(x, y, r) {
+        // http://en.wikipedia.org/wiki/Equilateral_triangle
+        this.beginPath();
 
-    // retrieve delta
-    var delta = 0;
-    if (event.wheelDelta) { /* IE/Opera. */
-        delta = event.wheelDelta/120;
-    } else if (event.detail) { /* Mozilla case. */
-        // In Mozilla, sign of delta is different than in IE.
-        // Also, delta is multiple of 3.
-        delta = -event.detail/3;
-    }
+        var s = r * 2;
+        var s2 = s / 2;
+        var ir = Math.sqrt(3) / 6 * s;      // radius of inner circle
+        var h = Math.sqrt(s * s - s2 * s2); // height
 
-    // If delta is nonzero, handle it.
-    // Basically, delta is now positive if wheel was scrolled up,
-    // and negative, if wheel was scrolled down.
-    if (delta) {
-        // determine zoom factor, and adjust the zoom factor such that zooming in
-        // and zooming out correspond wich each other
-        var zoom = delta / 10;
-        if (delta < 0) {
-            zoom = zoom / (1 - zoom);
-        }
+        this.moveTo(x, y + (h - ir));
+        this.lineTo(x + s2, y - ir);
+        this.lineTo(x - s2, y - ir);
+        this.lineTo(x, y + (h - ir));
+        this.closePath();
+    };
 
-        var scaleOld = this._getScale();
-        var scaleNew = scaleOld * (1 + zoom);
-        if (scaleNew < 0.01) {
-            scaleNew = 0.01;
-        }
-        if (scaleNew > 10) {
-            scaleNew = 10;
+    /**
+     * Draw a star shape, a star with 5 points
+     * @param {Number} x horizontal center
+     * @param {Number} y vertical center
+     * @param {Number} r   radius, half the length of the sides of the triangle
+     */
+    CanvasRenderingContext2D.prototype.star = function(x, y, r) {
+        // http://www.html5canvastutorials.com/labs/html5-canvas-star-spinner/
+        this.beginPath();
+
+        for (var n = 0; n < 10; n++) {
+            var radius = (n % 2 === 0) ? r * 1.3 : r * 0.5;
+            this.lineTo(
+                x + radius * Math.sin(n * 2 * Math.PI / 10),
+                y - radius * Math.cos(n * 2 * Math.PI / 10)
+            );
         }
 
-        var frameLeft = vis.util.getAbsoluteLeft(this.frame.canvas);
-        var frameTop = vis.util.getAbsoluteTop(this.frame.canvas);
-        var x = mouseX - frameLeft;
-        var y = mouseY - frameTop;
+        this.closePath();
+    };
 
-        var translation = this._getTranslation();
-        var scaleFrac = scaleNew / scaleOld;
-        var tx = (1 - scaleFrac) * x + translation.x * scaleFrac;
-        var ty = (1 - scaleFrac) * y + translation.y * scaleFrac;
+    /**
+     * http://stackoverflow.com/questions/1255512/how-to-draw-a-rounded-rectangle-on-html-canvas
+     */
+    CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) {
+        var r2d = Math.PI/180;
+        if( w - ( 2 * r ) < 0 ) { r = ( w / 2 ); } //ensure that the radius isn't too large for x
+        if( h - ( 2 * r ) < 0 ) { r = ( h / 2 ); } //ensure that the radius isn't too large for y
+        this.beginPath();
+        this.moveTo(x+r,y);
+        this.lineTo(x+w-r,y);
+        this.arc(x+w-r,y+r,r,r2d*270,r2d*360,false);
+        this.lineTo(x+w,y+h-r);
+        this.arc(x+w-r,y+h-r,r,0,r2d*90,false);
+        this.lineTo(x+r,y+h);
+        this.arc(x+r,y+h-r,r,r2d*90,r2d*180,false);
+        this.lineTo(x,y+r);
+        this.arc(x+r,y+r,r,r2d*180,r2d*270,false);
+    };
 
-        this._setScale(scaleNew);
-        this._setTranslation(tx, ty);
-        this._redraw();
-    }
+    /**
+     * http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
+     */
+    CanvasRenderingContext2D.prototype.ellipse = function(x, y, w, h) {
+        var kappa = .5522848,
+            ox = (w / 2) * kappa, // control point offset horizontal
+            oy = (h / 2) * kappa, // control point offset vertical
+            xe = x + w,           // x-end
+            ye = y + h,           // y-end
+            xm = x + w / 2,       // x-middle
+            ym = y + h / 2;       // y-middle
 
-    // Prevent default actions caused by mouse wheel.
-    // That might be ugly, but we handle scrolls somehow
-    // anyway, so don't bother here...
-    vis.util.preventDefault(event);
-};
+        this.beginPath();
+        this.moveTo(x, ym);
+        this.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
+        this.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
+        this.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
+        this.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
+    };
 
 
-/**
- * Mouse move handler for checking whether the title moves over a node with a title.
- */
-Graph.prototype._onMouseMoveTitle = function (event) {
-    event = event || window.event;
 
-    var startMouseX = event.clientX;
-    var startMouseY = event.clientY;
-    this.startFrameLeft = this.startFrameLeft || vis.util.getAbsoluteLeft(this.frame.canvas);
-    this.startFrameTop = this.startFrameTop || vis.util.getAbsoluteTop(this.frame.canvas);
+    /**
+     * http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
+     */
+    CanvasRenderingContext2D.prototype.database = function(x, y, w, h) {
+        var f = 1/3;
+        var wEllipse = w;
+        var hEllipse = h * f;
 
-    var x = startMouseX - this.startFrameLeft;
-    var y = startMouseY - this.startFrameTop;
+        var kappa = .5522848,
+            ox = (wEllipse / 2) * kappa, // control point offset horizontal
+            oy = (hEllipse / 2) * kappa, // control point offset vertical
+            xe = x + wEllipse,           // x-end
+            ye = y + hEllipse,           // y-end
+            xm = x + wEllipse / 2,       // x-middle
+            ym = y + hEllipse / 2,       // y-middle
+            ymb = y + (h - hEllipse/2),  // y-midlle, bottom ellipse
+            yeb = y + h;                 // y-end, bottom ellipse
 
-    // check if the previously selected node is still selected
-    if (this.popupNode) {
-        this._checkHidePopup(x, y);
-    }
+        this.beginPath();
+        this.moveTo(xe, ym);
 
-    // start a timeout that will check if the mouse is positioned above
-    // an element
-    var me = this;
-    var checkShow = function() {
-        me._checkShowPopup(x, y);
-    };
-    if (this.popupTimer) {
-        clearInterval(this.popupTimer); // stop any running timer
-    }
-    if (!this.leftButtonDown) {
-        this.popupTimer = setTimeout(checkShow, 300);
-    }
-};
+        this.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
+        this.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
 
-/**
- * Check if there is an element on the given position in the graph
- * (a node or edge). If so, and if this element has a title,
- * show a popup window with its title.
- *
- * @param {number} x
- * @param {number} y
- */
-Graph.prototype._checkShowPopup = function (x, y) {
-    var obj = {
-        "left" : this._xToCanvas(x),
-        "top" : this._yToCanvas(y),
-        "right" : this._xToCanvas(x),
-        "bottom" : this._yToCanvas(y)
-    };
+        this.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
+        this.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
 
-    var i, len;
-    var lastPopupNode = this.popupNode;
+        this.lineTo(xe, ymb);
 
-    if (this.popupNode == undefined) {
-        // search the nodes for overlap, select the top one in case of multiple nodes
-        var nodes = this.nodes;
-        for (i = nodes.length - 1; i >= 0; i--) {
-            var node = nodes[i];
-            if (node.getTitle() != undefined && node.isOverlappingWith(obj)) {
-                this.popupNode = node;
-                break;
-            }
-        }
-    }
+        this.bezierCurveTo(xe, ymb + oy, xm + ox, yeb, xm, yeb);
+        this.bezierCurveTo(xm - ox, yeb, x, ymb + oy, x, ymb);
 
-    if (this.popupNode == undefined) {
-        // search the edges for overlap
-        var allEdges = this.edges;
-        for (i = 0, len = allEdges.length; i < len; i++) {
-            var edge = allEdges[i];
-            if (edge.getTitle() != undefined && edge.isOverlappingWith(obj)) {
-                this.popupNode = edge;
-                break;
-            }
-        }
-    }
+        this.lineTo(x, ym);
+    };
 
-    if (this.popupNode) {
-        // show popup message window
-        if (this.popupNode != lastPopupNode) {
-            var me = this;
-            if (!me.popup) {
-                me.popup = new Graph.Popup(me.frame);
-            }
 
-            // adjust a small offset such that the mouse cursor is located in the
-            // bottom left location of the popup, and you can easily move over the
-            // popup area
-            me.popup.setPosition(x - 3, y - 3);
-            me.popup.setText(me.popupNode.getTitle());
-            me.popup.show();
-        }
-    }
-    else {
-        if (this.popup) {
-            this.popup.hide();
-        }
-    }
-};
+    /**
+     * Draw an arrow point (no line)
+     */
+    CanvasRenderingContext2D.prototype.arrow = function(x, y, angle, length) {
+        // tail
+        var xt = x - length * Math.cos(angle);
+        var yt = y - length * Math.sin(angle);
 
-/**
- * Check if the popup must be hided, which is the case when the mouse is no
- * longer hovering on the object
- * @param {number} x
- * @param {number} y
- */
-Graph.prototype._checkHidePopup = function (x, y) {
-    var obj = {
-        "left" : x,
-        "top" : y,
-        "right" : x,
-        "bottom" : y
+        // inner tail
+        // TODO: allow to customize different shapes
+        var xi = x - length * 0.9 * Math.cos(angle);
+        var yi = y - length * 0.9 * Math.sin(angle);
+
+        // left
+        var xl = xt + length / 3 * Math.cos(angle + 0.5 * Math.PI);
+        var yl = yt + length / 3 * Math.sin(angle + 0.5 * Math.PI);
+
+        // right
+        var xr = xt + length / 3 * Math.cos(angle - 0.5 * Math.PI);
+        var yr = yt + length / 3 * Math.sin(angle - 0.5 * Math.PI);
+
+        this.beginPath();
+        this.moveTo(x, y);
+        this.lineTo(xl, yl);
+        this.lineTo(xi, yi);
+        this.lineTo(xr, yr);
+        this.closePath();
     };
 
-    if (!this.popupNode || !this.popupNode.isOverlappingWith(obj) ) {
-        this.popupNode = undefined;
-        if (this.popup) {
-            this.popup.hide();
+    /**
+     * Sets up the dashedLine functionality for drawing
+     * Original code came from http://stackoverflow.com/questions/4576724/dotted-stroke-in-canvas
+     * @author David Jordan
+     * @date 2012-08-08
+     */
+    CanvasRenderingContext2D.prototype.dashedLine = function(x,y,x2,y2,dashArray){
+        if (!dashArray) dashArray=[10,5];
+        if (dashLength==0) dashLength = 0.001; // Hack for Safari
+        var dashCount = dashArray.length;
+        this.moveTo(x, y);
+        var dx = (x2-x), dy = (y2-y);
+        var slope = dy/dx;
+        var distRemaining = Math.sqrt( dx*dx + dy*dy );
+        var dashIndex=0, draw=true;
+        while (distRemaining>=0.1){
+            var dashLength = dashArray[dashIndex++%dashCount];
+            if (dashLength > distRemaining) dashLength = distRemaining;
+            var xStep = Math.sqrt( dashLength*dashLength / (1 + slope*slope) );
+            if (dx<0) xStep = -xStep;
+            x += xStep;
+            y += slope*xStep;
+            this[draw ? 'lineTo' : 'moveTo'](x,y);
+            distRemaining -= dashLength;
+            draw = !draw;
         }
-    }
-};
+    };
+
+    // TODO: add diamond shape
+}
 
 /**
- * Event handler for touchstart event on mobile devices
+ * @class Node
+ * A node. A node can be connected to other nodes via one or multiple edges.
+ * @param {object} properties An object containing properties for the node. All
+ *                            properties are optional, except for the id.
+ *                              {number} id     Id of the node. Required
+ *                              {string} text   Title for the node
+ *                              {number} x      Horizontal position of the node
+ *                              {number} y      Vertical position of the node
+ *                              {string} style  Drawing style, available:
+ *                                              "database", "circle", "rect",
+ *                                              "image", "text", "dot", "star",
+ *                                              "triangle", "triangleDown",
+ *                                              "square"
+ *                              {string} image  An image url
+ *                              {string} title  An title text, can be HTML
+ *                              {anytype} group A group name or number
+ * @param {Graph.Images} imagelist    A list with images. Only needed
+ *                                            when the node has an image
+ * @param {Graph.Groups} grouplist    A list with groups. Needed for
+ *                                            retrieving group properties
+ * @param {Object}               constants    An object with default values for
+ *                                            example for the color
  */
-Graph.prototype._onTouchStart = function(event) {
-    vis.util.preventDefault(event);
+function Node(properties, imagelist, grouplist, constants) {
+    this.selected = false;
 
-    if (this.touchDown) {
-        // if already moving, return
-        return;
-    }
-    this.touchDown = true;
+    this.edges = []; // all edges connected to this node
+    this.group = constants.nodes.group;
 
-    var me = this;
-    if (!this.ontouchmove) {
-        this.ontouchmove = function (event) {me._onTouchMove(event);};
-        vis.util.addEventListener(document, "touchmove", this.ontouchmove);
-    }
-    if (!this.ontouchend) {
-        this.ontouchend   = function (event) {me._onTouchEnd(event);};
-        vis.util.addEventListener(document, "touchend", this.ontouchend);
-    }
+    this.fontSize = constants.nodes.fontSize;
+    this.fontFace = constants.nodes.fontFace;
+    this.fontColor = constants.nodes.fontColor;
 
-    this._onMouseDown(event);
+    this.borderColor = constants.nodes.borderColor;
+    this.backgroundColor = constants.nodes.backgroundColor;
+    this.highlightColor = constants.nodes.highlightColor;
+
+    // set defaults for the properties
+    this.id = undefined;
+    this.style = constants.nodes.style;
+    this.image = constants.nodes.image;
+    this.x = 0;
+    this.y = 0;
+    this.xFixed = false;
+    this.yFixed = false;
+    this.radius = constants.nodes.radius;
+    this.radiusFixed = false;
+    this.radiusMin = constants.nodes.radiusMin;
+    this.radiusMax = constants.nodes.radiusMax;
+
+    this.imagelist = imagelist;
+    this.grouplist = grouplist;
+
+    this.setProperties(properties, constants);
+
+    // mass, force, velocity
+    this.mass = 50;  // kg (mass is adjusted for the number of connected edges)
+    this.fx = 0.0;  // external force x
+    this.fy = 0.0;  // external force y
+    this.vx = 0.0;  // velocity x
+    this.vy = 0.0;  // velocity y
+    this.minForce = constants.minForce;
+    this.damping = 0.9; // damping factor
 };
 
 /**
- * Event handler for touchmove event on mobile devices
+ * Attach a edge to the node
+ * @param {Edge} edge
  */
-Graph.prototype._onTouchMove = function(event) {
-    vis.util.preventDefault(event);
-    this._onMouseMove(event);
+Node.prototype.attachEdge = function(edge) {
+    this.edges.push(edge);
+    this._updateMass();
 };
 
 /**
- * Event handler for touchend event on mobile devices
+ * Detach a edge from the node
+ * @param {Edge} edge
  */
-Graph.prototype._onTouchEnd = function(event) {
-    vis.util.preventDefault(event);
-
-    this.touchDown = false;
-
-    if (this.ontouchmove) {
-        vis.util.removeEventListener(document, "touchmove", this.ontouchmove);
-        this.ontouchmove = undefined;
-    }
-    if (this.ontouchend) {
-        vis.util.removeEventListener(document, "touchend", this.ontouchend);
-        this.ontouchend = undefined;
+Node.prototype.detachEdge = function(edge) {
+    var index = this.edges.indexOf(edge);
+    if (index != -1) {
+        this.edges.splice(index, 1);
     }
-
-    this._onMouseUp(event);
+    this._updateMass();
 };
 
+/**
+ * Update the nodes mass, which is determined by the number of edges connecting
+ * to it (more edges -> heavier node).
+ * @private
+ */
+Node.prototype._updateMass = function() {
+    this.mass = 50 + 20 * this.edges.length; // kg
+};
 
 /**
- * Unselect selected nodes. If no selection array is provided, all nodes
- * are unselected
- * @param {Object[]} selection     Array with selection objects, each selection
- *                                 object has a parameter row. Optional
- * @param {Boolean} triggerSelect  If true (default), the select event
- *                                 is triggered when nodes are unselected
- * @return {Boolean} changed       True if the selection is changed
+ * Set or overwrite properties for the node
+ * @param {Object} properties an object with properties
+ * @param {Object} constants  and object with default, global properties
  */
-Graph.prototype._unselectNodes = function(selection, triggerSelect) {
-    var changed = false;
-    var i, iMax, row;
+Node.prototype.setProperties = function(properties, constants) {
+    if (!properties) {
+        return;
+    }
 
-    if (selection) {
-        // remove provided selections
-        for (i = 0, iMax = selection.length; i < iMax; i++) {
-            row = selection[i].row;
-            this.nodes[row].unselect();
+    // basic properties
+    if (properties.id != undefined)        {this.id = properties.id;}
+    if (properties.text != undefined)      {this.text = properties.text;}
+    if (properties.title != undefined)     {this.title = properties.title;}
+    if (properties.group != undefined)     {this.group = properties.group;}
+    if (properties.x != undefined)         {this.x = properties.x;}
+    if (properties.y != undefined)         {this.y = properties.y;}
+    if (properties.value != undefined)     {this.value = properties.value;}
 
-            var j = 0;
-            while (j < this.selection.length) {
-                if (this.selection[j].row == row) {
-                    this.selection.splice(j, 1);
-                    changed = true;
-                }
-                else {
-                    j++;
-                }
-            }
-        }
-    }
-    else if (this.selection && this.selection.length) {
-        // remove all selections
-        for (i = 0, iMax = this.selection.length; i < iMax; i++) {
-            row = this.selection[i].row;
-            this.nodes[row].unselect();
-            changed = true;
-        }
-        this.selection = [];
+    if (this.id === undefined) {
+        throw "Node must have an id";
     }
 
-    if (changed && (triggerSelect == true || triggerSelect == undefined)) {
-        // fire the select event
-        this.trigger('select');
+    // copy group properties
+    if (this.group) {
+        var groupObj = this.grouplist.get(this.group);
+        for (var prop in groupObj) {
+            if (groupObj.hasOwnProperty(prop)) {
+                this[prop] = groupObj[prop];
+            }
+        }
     }
 
-    return changed;
-};
-
-/**
- * select all nodes on given location x, y
- * @param {Array} selection   an array with selection objects. Each selection
- *                            object has a parameter row
- * @param {boolean} append    If true, the new selection will be appended to the
- *                            current selection (except for duplicate entries)
- * @return {Boolean} changed  True if the selection is changed
- */
-Graph.prototype._selectNodes = function(selection, append) {
-    var changed = false;
-    var i, iMax;
+    // individual style properties
+    if (properties.style != undefined)          {this.style = properties.style;}
+    if (properties.image != undefined)          {this.image = properties.image;}
+    if (properties.radius != undefined)         {this.radius = properties.radius;}
+    if (properties.borderColor != undefined)    {this.borderColor = properties.borderColor;}
+    if (properties.backgroundColor != undefined){this.backgroundColor = properties.backgroundColor;}
+    if (properties.highlightColor != undefined) {this.highlightColor = properties.highlightColor;}
+    if (properties.fontColor != undefined)      {this.fontColor = properties.fontColor;}
+    if (properties.fontSize != undefined)       {this.fontSize = properties.fontSize;}
+    if (properties.fontFace != undefined)       {this.fontFace = properties.fontFace;}
 
-    // TODO: the selectNodes method is a little messy, rework this
 
-    // check if the current selection equals the desired selection
-    var selectionAlreadyDone = true;
-    if (selection.length != this.selection.length) {
-        selectionAlreadyDone = false;
-    }
-    else {
-        for (i = 0, iMax = Math.min(selection.length, this.selection.length); i < iMax; i++) {
-            if (selection[i].row != this.selection[i].row) {
-                selectionAlreadyDone = false;
-                break;
-            }
+    if (this.image != undefined) {
+        if (this.imagelist) {
+            this.imageObj = this.imagelist.load(this.image);
+        }
+        else {
+            throw "No imagelist provided";
         }
-    }
-    if (selectionAlreadyDone) {
-        return changed;
-    }
-
-    if (append == undefined || append == false) {
-        // first deselect any selected node
-        var triggerSelect = false;
-        changed = this._unselectNodes(undefined, triggerSelect);
     }
 
-    for (i = 0, iMax = selection.length; i < iMax; i++) {
-        // add each of the new selections, but only when they are not duplicate
-        var row = selection[i].row;
-        var isDuplicate = false;
-        for (var j = 0, jMax = this.selection.length; j < jMax; j++) {
-            if (this.selection[j].row == row) {
-                isDuplicate = true;
-                break;
-            }
-        }
+    this.xFixed = this.xFixed || (properties.x != undefined);
+    this.yFixed = this.yFixed || (properties.y != undefined);
+    this.radiusFixed = this.radiusFixed || (properties.radius != undefined);
 
-        if (!isDuplicate) {
-            this.nodes[row].select();
-            this.selection.push(selection[i]);
-            changed = true;
-        }
+    if (this.style == 'image') {
+        this.radiusMin = constants.nodes.widthMin;
+        this.radiusMax = constants.nodes.widthMax;
     }
 
-    if (changed) {
-        // fire the select event
-        this.trigger('select');
+    // choose draw method depending on the style
+    var style = this.style;
+    switch (style) {
+        case 'database':      this.draw = this._drawDatabase; this.resize = this._resizeDatabase; break;
+        case 'rect':          this.draw = this._drawRect; this.resize = this._resizeRect; break;
+        case 'circle':        this.draw = this._drawCircle; this.resize = this._resizeCircle; break;
+        // TODO: add ellipse shape
+        // TODO: add diamond shape
+        case 'image':         this.draw = this._drawImage; this.resize = this._resizeImage; break;
+        case 'text':          this.draw = this._drawText; this.resize = this._resizeText; break;
+        case 'dot':           this.draw = this._drawDot; this.resize = this._resizeShape; break;
+        case 'square':        this.draw = this._drawSquare; this.resize = this._resizeShape; break;
+        case 'triangle':      this.draw = this._drawTriangle; this.resize = this._resizeShape; break;
+        case 'triangleDown':  this.draw = this._drawTriangleDown; this.resize = this._resizeShape; break;
+        case 'star':          this.draw = this._drawStar; this.resize = this._resizeShape; break;
+        default:              this.draw = this._drawRect; this.resize = this._resizeRect; break;
     }
 
-    return changed;
+    // reset the size of the node, this can be changed
+    this._reset();
 };
 
 /**
- * retrieve all nodes overlapping with given object
- * @param {Object} obj  An object with parameters left, top, right, bottom
- * @return {Object[]}   An array with selection objects containing
- *                      the parameter row.
+ * select this node
  */
-Graph.prototype._getNodesOverlappingWith = function (obj) {
-    var overlappingNodes = [];
-
-    for (var i = 0; i < this.nodes.length; i++) {
-        if (this.nodes[i].isOverlappingWith(obj)) {
-            var sel = {"row": i};
-            overlappingNodes.push(sel);
-        }
-    }
-
-    return overlappingNodes;
+Node.prototype.select = function() {
+    this.selected = true;
+    this._reset();
 };
 
 /**
- * retrieve the currently selected nodes
- * @return {Object[]} an array with zero or more objects. Each object
- *                              contains the parameter row
+ * unselect this node
  */
-Graph.prototype.getSelection = function() {
-    var selection = [];
-
-    for (var i = 0; i < this.selection.length; i++) {
-        var row = this.selection[i].row;
-        selection.push({"row": row});
-    }
+Node.prototype.unselect = function() {
+    this.selected = false;
+    this._reset();
+};
 
-    return selection;
+/**
+ * Reset the calculated size of the node, forces it to recalculate its size
+ */
+Node.prototype._reset = function() {
+    this.width = undefined;
+    this.height = undefined;
 };
 
 /**
- * select zero or more nodes
- * @param {object[]} selection  an array with zero or more objects. Each object
- *                              contains the parameter row
+ * get the title of this node.
+ * @return {string} title    The title of the node, or undefined when no title
+ *                           has been set.
  */
-Graph.prototype.setSelection = function(selection) {
-    var i, iMax, row;
+Node.prototype.getTitle = function() {
+    return this.title;
+};
 
-    if (selection.length == undefined)
-        throw "Selection must be an array with objects";
+/**
+ * Calculate the distance to the border of the Node
+ * @param {CanvasRenderingContext2D}   ctx
+ * @param {Number} angle        Angle in radians
+ * @returns {number} distance   Distance to the border in pixels
+ */
+Node.prototype.distanceToBorder = function (ctx, angle) {
+    var borderWidth = 1;
 
-    // first unselect any selected node
-    for (i = 0, iMax = this.selection.length; i < iMax; i++) {
-        row = this.selection[i].row;
-        this.nodes[row].unselect();
+    if (!this.width) {
+        this.resize(ctx);
     }
 
-    this.selection = [];
+    //noinspection FallthroughInSwitchStatementJS
+    switch (this.style) {
+        case 'circle':
+        case 'dot':
+            return this.radius + borderWidth;
 
-    for (i = 0, iMax = selection.length; i < iMax; i++) {
-        row = selection[i].row;
+        // TODO: implement distanceToBorder for database
+        // TODO: implement distanceToBorder for triangle
+        // TODO: implement distanceToBorder for triangleDown
 
-        if (row == undefined)
-            throw "Parameter row missing in selection object";
-        if (row > this.nodes.length-1)
-            throw "Parameter row out of range";
+        case 'rect':
+        case 'image':
+        case 'text':
+        default:
+            if (this.width) {
+                return Math.min(
+                    Math.abs(this.width / 2 / Math.cos(angle)),
+                    Math.abs(this.height / 2 / Math.sin(angle))) + borderWidth;
+                // TODO: reckon with border radius too in case of rect
+            }
+            else {
+                return 0;
+            }
 
-        var sel = {"row": row};
-        this.selection.push(sel);
-        this.nodes[row].select();
     }
 
-    this.redraw();
+    // TODO: implement calculation of distance to border for all shapes
+};
+
+/**
+ * Set forces acting on the node
+ * @param {number} fx   Force in horizontal direction
+ * @param {number} fy   Force in vertical direction
+ */
+Node.prototype._setForce = function(fx, fy) {
+    this.fx = fx;
+    this.fy = fy;
 };
 
+/**
+ * Add forces acting on the node
+ * @param {number} fx   Force in horizontal direction
+ * @param {number} fy   Force in vertical direction
+ */
+Node.prototype._addForce = function(fx, fy) {
+    this.fx += fx;
+    this.fy += fy;
+};
 
 /**
- * Temporary method to test calculating a hub value for the nodes
- * @param {number} level        Maximum number edges between two nodes in order
- *                              to call them connected. Optional, 1 by default
- * @return {Number[]} connectioncount array with the connection count
- *                                    for each node
+ * Perform one discrete step for the node
+ * @param {number} interval    Time interval in seconds
  */
-Graph.prototype._getConnectionCount = function(level) {
-    var conn = this.edges;
-    if (level == undefined) {
-        level = 1;
+Node.prototype.discreteStep = function(interval) {
+    if (!this.xFixed) {
+        var dx   = -this.damping * this.vx;     // damping force
+        var ax   = (this.fx + dx) / this.mass;  // acceleration
+        this.vx += ax / interval;               // velocity
+        this.x  += this.vx / interval;          // position
     }
 
-    // get the nodes connected to given nodes
-    function getConnectedNodes(nodes) {
-        var connectedNodes = [];
-
-        for (var j = 0, jMax = nodes.length; j < jMax; j++) {
-            var node = nodes[j];
-
-            // find all nodes connected to this node
-            for (var i = 0, iMax = conn.length; i < iMax; i++) {
-                var other = null;
-
-                // check if connected
-                if (conn[i].from == node)
-                    other = conn[i].to;
-                else if (conn[i].to == node)
-                    other = conn[i].from;
-
-                // check if the other node is not already in the list with nodes
-                var k, kMax;
-                if (other) {
-                    for (k = 0, kMax = nodes.length; k < kMax; k++) {
-                        if (nodes[k] == other) {
-                            other = null;
-                            break;
-                        }
-                    }
-                }
-                if (other) {
-                    for (k = 0, kMax = connectedNodes.length; k < kMax; k++) {
-                        if (connectedNodes[k] == other) {
-                            other = null;
-                            break;
-                        }
-                    }
-                }
-
-                if (other)
-                    connectedNodes.push(other);
-            }
-        }
-
-        return connectedNodes;
-    }
-
-    var connections = [];
-    var level0 = [];
-    var nodes = this.nodes;
-    var i, iMax;
-    for (i = 0, iMax = nodes.length; i < iMax; i++) {
-        var c = [nodes[i]];
-        for (var l = 0; l < level; l++) {
-            c = c.concat(getConnectedNodes(c));
-        }
-        connections.push(c);
-    }
-
-    var hubs = [];
-    for (i = 0, len = connections.length; i < len; i++) {
-        hubs.push(connections[i].length);
+    if (!this.yFixed) {
+        var dy   = -this.damping * this.vy;     // damping force
+        var ay   = (this.fy + dy) / this.mass;  // acceleration
+        this.vy += ay / interval;               // velocity
+        this.y  += this.vy / interval;          // position
     }
-
-    return hubs;
 };
 
 
 /**
- * Set a new size for the graph
- * @param {string} width   Width in pixels or percentage (for example "800px"
- *                         or "50%")
- * @param {string} height  Height in pixels or percentage  (for example "400px"
- *                         or "30%")
+ * Check if this node has a fixed x and y position
+ * @return {boolean}      true if fixed, false if not
  */
-Graph.prototype._setSize = function(width, height) {
-    this.frame.style.width = width;
-    this.frame.style.height = height;
+Node.prototype.isFixed = function() {
+    return (this.xFixed && this.yFixed);
+};
 
-    this.frame.canvas.style.width = "100%";
-    this.frame.canvas.style.height = "100%";
+/**
+ * Check if this node is moving
+ * @param {number} vmin   the minimum velocity considered as "moving"
+ * @return {boolean}      true if moving, false if it has no velocity
+ */
+// TODO: replace this method with calculating the kinetic energy
+Node.prototype.isMoving = function(vmin) {
+    return (Math.abs(this.vx) > vmin || Math.abs(this.vy) > vmin ||
+        (!this.xFixed && Math.abs(this.fx) > this.minForce) ||
+        (!this.yFixed && Math.abs(this.fy) > this.minForce));
+};
 
-    this.frame.canvas.width = this.frame.canvas.clientWidth;
-    this.frame.canvas.height = this.frame.canvas.clientHeight;
+/**
+ * check if this node is selecte
+ * @return {boolean} selected   True if node is selected, else false
+ */
+Node.prototype.isSelected = function() {
+    return this.selected;
 };
 
 /**
- * Load all nodes by reading the data table nodesTable
- * @param {Array} nodes    The data containing the nodes.
+ * Retrieve the value of the node. Can be undefined
+ * @return {Number} value
  */
-Graph.prototype.setNodes = function(nodes) {
-    this.selection = [];
-    this.nodes = [];
-    this.moving = false;
-    if (!nodes) {
-        return;
-    }
-    this.nodesTable = nodes;
+Node.prototype.getValue = function() {
+    return this.value;
+};
 
-    var hasValues = false;
-    var rowCount = nodes.length;
-    for (var i = 0; i < rowCount; i++) {
-        var properties = nodes[i];
+/**
+ * Calculate the distance from the nodes location to the given location (x,y)
+ * @param {Number} x
+ * @param {Number} y
+ * @return {Number} value
+ */
+Node.prototype.getDistance = function(x, y) {
+    var dx = this.x - x,
+        dy = this.y - y;
+    return Math.sqrt(dx * dx + dy * dy);
+};
 
-        if (properties.value != undefined) {
-            hasValues = true;
-        }
-        if (properties.id == undefined) {
-            throw "Column 'id' missing in table with nodes (row " + i + ")";
-        }
-        this._createNode(properties);
-    }
 
-    // calculate scaling function when value is provided
-    if (hasValues) {
-        this._updateValueRange(this.nodes);
+/**
+ * Adjust the value range of the node. The node will adjust it's radius
+ * based on its value.
+ * @param {Number} min
+ * @param {Number} max
+ */
+Node.prototype.setValueRange = function(min, max) {
+    if (!this.radiusFixed && this.value !== undefined) {
+        var scale = (this.radiusMax - this.radiusMin) / (max - min);
+        this.radius = (this.value - min) * scale + this.radiusMin;
     }
 };
 
 /**
- * Create a node with the given properties
- * If the new node has an id identical to an existing node, the existing
- * node will be overwritten.
- * The properties can contain a property "action", which can have values
- * "create", "update", or "delete"
- * @param {Object} properties  An object with properties
+ * Draw this node in the given canvas
+ * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+ * @param {CanvasRenderingContext2D}   ctx
  */
-Graph.prototype._createNode = function(properties) {
-    var action = properties.action ? properties.action : "update";
-    var id, index, newNode, oldNode;
-
-    if (action === "create") {
-        // create the node
-        newNode = new Graph.Node(properties, this.images, this.groups, this.constants);
-        id = properties.id;
-        index = (id !== undefined) ? this._findNode(id) : undefined;
+Node.prototype.draw = function(ctx) {
+    throw "Draw method not initialized for node";
+};
 
-        if (index !== undefined) {
-            // replace node
-            oldNode = this.nodes[index];
-            this.nodes[index] = newNode;
+/**
+ * Recalculate the size of this node in the given canvas
+ * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+ * @param {CanvasRenderingContext2D}   ctx
+ */
+Node.prototype.resize = function(ctx) {
+    throw "Resize method not initialized for node";
+};
 
-            // remove selection of old node
-            if (oldNode.selected) {
-                this._unselectNodes([{'row': index}], false);
-            }
+/**
+ * Check if this object is overlapping with the provided object
+ * @param {Object} obj   an object with parameters left, top, right, bottom
+ * @return {boolean}     True if location is located on node
+ */
+Node.prototype.isOverlappingWith = function(obj) {
+    return (this.left          < obj.right &&
+        this.left + this.width > obj.left &&
+        this.top               < obj.bottom &&
+        this.top + this.height > obj.top);
+};
 
-            /* TODO: implement this? -> will give performance issues, searching all edges and nodes...
-             // update edges linking to this node
-             var edgesTable = this.edges;
-             for (var i = 0, iMax = edgesTable.length; i < iMax; i++) {
-             var edge = edgesTable[i];
-             if (edge.from == oldNode) {
-             edge.from = newNode;
-             }
-             if (edge.to == oldNode) {
-             edge.to = newNode;
-             }
-             }
-             */
+Node.prototype._resizeImage = function (ctx) {
+    // TODO: pre calculate the image size
+    if (!this.width) {  // undefined or 0
+        var width, height;
+        if (this.value) {
+            var scale = this.imageObj.height / this.imageObj.width;
+            width = this.radius || this.imageObj.width;
+            height = this.radius * scale || this.imageObj.height;
         }
         else {
-            // add new node
-            this.nodes.push(newNode);
-        }
-
-        if (!newNode.isFixed()) {
-            // note: no not use node.isMoving() here, as that gives the current
-            // velocity of the node, which is zero after creation of the node.
-            this.moving = true;
+            width = this.imageObj.width;
+            height = this.imageObj.height;
         }
+        this.width  = width;
+        this.height = height;
     }
-    else if (action === "update") {
-        // update existing node, or create it when not yet existing
-        id = properties.id;
-        if (id === undefined) {
-            throw "Cannot update a node without id";
-        }
+};
 
-        index = this._findNode(id);
-        if (index !== undefined) {
-            // update node
-            this.nodes[index].setProperties(properties, this.constants);
-        }
-        else {
-            // create node
-            newNode = new Graph.Node(properties, this.images, this.groups, this.constants);
-            this.nodes.push(newNode);
+Node.prototype._drawImage = function (ctx) {
+    this._resizeImage(ctx);
 
-            if (!newNode.isFixed()) {
-                // note: no not use node.isMoving() here, as that gives the current
-                // velocity of the node, which is zero after creation of the node.
-                this.moving = true;
-            }
-        }
+    this.left   = this.x - this.width / 2;
+    this.top    = this.y - this.height / 2;
+
+    var yText;
+    if (this.imageObj) {
+        ctx.drawImage(this.imageObj, this.left, this.top, this.width, this.height);
+        yText = this.y + this.height / 2;
+    }
+    else {
+        // image still loading... just draw the text for now
+        yText = this.y;
     }
-    else if (action === "delete") {
-        // delete existing node
-        id = properties.id;
-        if (id === undefined) {
-            throw "Cannot delete node without its id";
-        }
 
-        index = this._findNode(id);
-        if (index !== undefined) {
-            oldNode = this.nodes[index];
-            // remove selection of old node
-            if (oldNode.selected) {
-                this._unselectNodes([{'row': index}], false);
-            }
-            this.nodes.splice(index, 1);
-        }
-        else {
-            throw "Node with id " + id + " not found";
-        }
-    }
-    else {
-        throw "Unknown action " + action + ". Choose 'create', 'update', or 'delete'.";
-    }
+    this._text(ctx, this.text, this.x, yText, undefined, "top");
 };
 
-/**
- * Find a node by its id
- * @param {Number} id       Id of the node
- * @return {Number} index   Index of the node in the array this.nodes, or
- *                          undefined when not found. *
- */
-Graph.prototype._findNode = function (id) {
-    var nodes = this.nodes;
-    for (var n = 0, len = nodes.length; n < len; n++) {
-        if (nodes[n].id === id) {
-            return n;
-        }
-    }
 
-    return undefined;
+Node.prototype._resizeRect = function (ctx) {
+    if (!this.width) {
+        var margin = 5;
+        var textSize = this.getTextSize(ctx);
+        this.width = textSize.width + 2 * margin;
+        this.height = textSize.height + 2 * margin;
+    }
 };
 
-/**
- * Find a node by its rowNumber
- * @param {Number} row                   Row number of the node
- * @return {Graph.Node} node     The node with the given row number, or
- *                                       undefined when not found.
- */
-Graph.prototype._findNodeByRow = function (row) {
-    return this.nodes[row];
-};
+Node.prototype._drawRect = function (ctx) {
+    this._resizeRect(ctx);
 
-/**
- * Load edges by reading the data table
- * @param {Array}      edges    The data containing the edges.
- */
-Graph.prototype.setEdges = function(edges) {
-    this.edges = [];
-    if (!edges) {
-        return;
-    }
-    this.edgesTable = edges;
+    this.left = this.x - this.width / 2;
+    this.top = this.y - this.height / 2;
 
-    var hasValues = false;
-    var rowCount = edges.length;
-    for (var i = 0; i < rowCount; i++) {
-        var properties = edges[i];
+    ctx.strokeStyle = this.borderColor;
+    ctx.fillStyle = this.selected ? this.highlightColor : this.backgroundColor;
+    ctx.lineWidth = this.selected ? 2.0 : 1.0;
+    ctx.roundRect(this.left, this.top, this.width, this.height, this.radius);
+    ctx.fill();
+    ctx.stroke();
 
-        if (properties.from === undefined) {
-            throw "Column 'from' missing in table with edges (row " + i + ")";
-        }
-        if (properties.to === undefined) {
-            throw "Column 'to' missing in table with edges (row " + i + ")";
-        }
-        if (properties.value != undefined) {
-            hasValues = true;
-        }
+    this._text(ctx, this.text, this.x, this.y);
+};
 
-        this._createEdge(properties);
-    }
 
-    // calculate scaling function when value is provided
-    if (hasValues) {
-        this._updateValueRange(this.edges);
+Node.prototype._resizeDatabase = function (ctx) {
+    if (!this.width) {
+        var margin = 5;
+        var textSize = this.getTextSize(ctx);
+        var size = textSize.width + 2 * margin;
+        this.width = size;
+        this.height = size;
     }
 };
 
-/**
- * Create a edge with the given properties
- * If the new edge has an id identical to an existing edge, the existing
- * edge will be overwritten or updated.
- * The properties can contain a property "action", which can have values
- * "create", "update", or "delete"
- * @param {Object} properties   An object with properties
- */
-Graph.prototype._createEdge = function(properties) {
-    var action = properties.action ? properties.action : "create";
-    var id, index, edge, oldEdge, newEdge;
+Node.prototype._drawDatabase = function (ctx) {
+    this._resizeDatabase(ctx);
+    this.left = this.x - this.width / 2;
+    this.top = this.y - this.height / 2;
 
-    if (action === "create") {
-        // create the edge, or replace it if already existing
-        id = properties.id;
-        index = (id !== undefined) ? this._findEdge(id) : undefined;
-        edge = new Graph.Edge(properties, this, this.constants);
+    ctx.strokeStyle = this.borderColor;
+    ctx.fillStyle = this.selected ? this.highlightColor : this.backgroundColor;
+    ctx.lineWidth = this.selected ? 2.0 : 1.0;
+    ctx.database(this.x - this.width/2, this.y - this.height*0.5, this.width, this.height);
+    ctx.fill();
+    ctx.stroke();
 
-        if (index !== undefined) {
-            // replace existing edge
-            oldEdge = this.edges[index];
-            oldEdge.from.detachEdge(oldEdge);
-            oldEdge.to.detachEdge(oldEdge);
-            this.edges[index] = edge;
-        }
-        else {
-            // add new edge
-            this.edges.push(edge);
-        }
-        edge.from.attachEdge(edge);
-        edge.to.attachEdge(edge);
-    }
-    else if (action === "update") {
-        // update existing edge, or create the edge if not existing
-        id = properties.id;
-        if (id === undefined) {
-            throw "Cannot update a edge without id";
-        }
+    this._text(ctx, this.text, this.x, this.y);
+};
 
-        index = this._findEdge(id);
-        if (index !== undefined) {
-            // update edge
-            edge = this.edges[index];
-            edge.from.detachEdge(edge);
-            edge.to.detachEdge(edge);
 
-            edge.setProperties(properties, this.constants);
-            edge.from.attachEdge(edge);
-            edge.to.attachEdge(edge);
-        }
-        else {
-            // add new edge
-            edge = new Graph.Edge(properties, this, this.constants);
-            edge.from.attachEdge(edge);
-            edge.to.attachEdge(edge);
-            this.edges.push(edge);
-        }
-    }
-    else if (action === "delete") {
-        // delete existing edge
-        id = properties.id;
-        if (id === undefined) {
-            throw "Cannot delete edge without its id";
-        }
+Node.prototype._resizeCircle = function (ctx) {
+    if (!this.width) {
+        var margin = 5;
+        var textSize = this.getTextSize(ctx);
+        var diameter = Math.max(textSize.width, textSize.height) + 2 * margin;
+        this.radius = diameter / 2;
 
-        index = this._findEdge(id);
-        if (index !== undefined) {
-            oldEdge = this.edges[id];
-            edge.from.detachEdge(oldEdge);
-            edge.to.detachEdge(oldEdge);
-            this.edges.splice(index, 1);
-        }
-        else {
-            throw "Edge with id " + id + " not found";
-        }
-    }
-    else {
-        throw "Unknown action " + action + ". Choose 'create', 'update', or 'delete'.";
+        this.width = diameter;
+        this.height = diameter;
     }
 };
 
-/**
- * Update the references to oldNode in all edges.
- * @param {Node} oldNode
- * @param {Node} newNode
- */
-// TODO: start utilizing this method _updateNodeReferences
-Graph.prototype._updateNodeReferences = function(oldNode, newNode) {
-    var edges = this.edges;
-    for (var i = 0, iMax = edges.length; i < iMax; i++) {
-        var edge = edges[i];
-        if (edge.from === oldNode) {
-            edge.from = newNode;
-        }
-        if (edge.to === oldNode) {
-            edge.to = newNode;
-        }
-    }
+Node.prototype._drawCircle = function (ctx) {
+    this._resizeCircle(ctx);
+    this.left = this.x - this.width / 2;
+    this.top = this.y - this.height / 2;
+
+    ctx.strokeStyle = this.borderColor;
+    ctx.fillStyle = this.selected ? this.highlightColor : this.backgroundColor;
+    ctx.lineWidth = this.selected ? 2.0 : 1.0;
+    ctx.circle(this.x, this.y, this.radius);
+    ctx.fill();
+    ctx.stroke();
+
+    this._text(ctx, this.text, this.x, this.y);
 };
 
-/**
- * Find a edge by its id
- * @param {Number} id       Id of the edge
- * @return {Number} index   Index of the edge in the array this.edges, or
- *                          undefined when not found. *
- */
-Graph.prototype._findEdge = function (id) {
-    var edges = this.edges;
-    for (var n = 0, len = edges.length; n < len; n++) {
-        if (edges[n].id === id) {
-            return n;
-        }
-    }
+Node.prototype._drawDot = function (ctx) {
+    this._drawShape(ctx, 'circle');
+};
 
-    return undefined;
+Node.prototype._drawTriangle = function (ctx) {
+    this._drawShape(ctx, 'triangle');
 };
 
-/**
- * Find a edge by its row
- * @param {Number} row          Row of the edge
- * @return {Graph.Edge} the found edge, or undefined when not found
- */
-Graph.prototype._findEdgeByRow = function (row) {
-    return this.edges[row];
+Node.prototype._drawTriangleDown = function (ctx) {
+    this._drawShape(ctx, 'triangleDown');
 };
 
-/**
- * Update the values of all object in the given array according to the current
- * value range of the objects in the array.
- * @param {Array} array.  An array with objects like Edges or Nodes
- *                        The objects must have a method getValue() and
- *                        setValueRange(min, max).
- */
-Graph.prototype._updateValueRange = function(array) {
-    var count = array.length;
-    var i;
+Node.prototype._drawSquare = function (ctx) {
+    this._drawShape(ctx, 'square');
+};
 
-    // determine the range of the node values
-    var valueMin = undefined;
-    var valueMax = undefined;
-    for (i = 0; i < count; i++) {
-        var value = array[i].getValue();
-        if (value !== undefined) {
-            valueMin = (valueMin === undefined) ? value : Math.min(value, valueMin);
-            valueMax = (valueMax === undefined) ? value : Math.max(value, valueMax);
-        }
-    }
+Node.prototype._drawStar = function (ctx) {
+    this._drawShape(ctx, 'star');
+};
 
-    // adjust the range of all nodes
-    if (valueMin !== undefined && valueMax !== undefined) {
-        for (i = 0; i < count; i++) {
-            array[i].setValueRange(valueMin, valueMax);
-        }
+Node.prototype._resizeShape = function (ctx) {
+    if (!this.width) {
+        var size = 2 * this.radius;
+        this.width = size;
+        this.height = size;
     }
 };
 
-/**
- * Redraw the graph with the current data
- * chart will be resized too.
- */
-Graph.prototype.redraw = function() {
-    this._setSize(this.width, this.height);
-
-    this._redraw();
-};
-
-/**
- * Redraw the graph with the current data
- */
-Graph.prototype._redraw = function() {
-    var ctx = this.frame.canvas.getContext("2d");
-
-    // clear the canvas
-    var w = this.frame.canvas.width;
-    var h = this.frame.canvas.height;
-    ctx.clearRect(0, 0, w, h);
+Node.prototype._drawShape = function (ctx, shape) {
+    this._resizeShape(ctx);
 
-    // set scaling and translation
-    ctx.save();
-    ctx.translate(this.translation.x, this.translation.y);
-    ctx.scale(this.scale, this.scale);
+    this.left = this.x - this.width / 2;
+    this.top = this.y - this.height / 2;
 
-    this._drawEdges(ctx);
-    this._drawNodes(ctx);
+    ctx.strokeStyle = this.borderColor;
+    ctx.fillStyle = this.selected ? this.highlightColor : this.backgroundColor;
+    ctx.lineWidth = this.selected ? 2.0 : 1.0;
 
-    // restore original scaling and translation
-    ctx.restore();
-};
+    ctx[shape](this.x, this.y, this.radius);
+    ctx.fill();
+    ctx.stroke();
 
-/**
- * Set the translation of the graph
- * @param {Number} offsetX    Horizontal offset
- * @param {Number} offsetY    Vertical offset
- */
-Graph.prototype._setTranslation = function(offsetX, offsetY) {
-    if (this.translation === undefined) {
-        this.translation = {
-            "x": 0,
-            "y": 0
-        };
+    if (this.text) {
+        this._text(ctx, this.text, this.x, this.y + this.height / 2, undefined, 'top');
     }
+};
 
-    if (offsetX !== undefined) {
-        this.translation.x = offsetX;
-    }
-    if (offsetY !== undefined) {
-        this.translation.y = offsetY;
+Node.prototype._resizeText = function (ctx) {
+    if (!this.width) {
+        var margin = 5;
+        var textSize = this.getTextSize(ctx);
+        this.width = textSize.width + 2 * margin;
+        this.height = textSize.height + 2 * margin;
     }
 };
 
-/**
- * Get the translation of the graph
- * @return {Object} translation    An object with parameters x and y, both a number
- */
-Graph.prototype._getTranslation = function() {
-    return {
-        "x": this.translation.x,
-        "y": this.translation.y
-    };
-};
+Node.prototype._drawText = function (ctx) {
+    this._resizeText(ctx);
+    this.left = this.x - this.width / 2;
+    this.top = this.y - this.height / 2;
 
-/**
- * Scale the graph
- * @param {Number} scale   Scaling factor 1.0 is unscaled
- */
-Graph.prototype._setScale = function(scale) {
-    this.scale = scale;
-};
-/**
- * Get the current scale of  the graph
- * @return {Number} scale   Scaling factor 1.0 is unscaled
- */
-Graph.prototype._getScale = function() {
-    return this.scale;
+    this._text(ctx, this.text, this.x, this.y);
 };
 
-Graph.prototype._xToCanvas = function(x) {
-    return (x - this.translation.x) / this.scale;
-};
 
-Graph.prototype._canvasToX = function(x) {
-    return x * this.scale + this.translation.x;
-};
+Node.prototype._text = function (ctx, text, x, y, align, baseline) {
+    if (text) {
+        ctx.font = (this.selected ? "bold " : "") + this.fontSize + "px " + this.fontFace;
+        ctx.fillStyle = this.fontColor || "black";
+        ctx.textAlign = align || "center";
+        ctx.textBaseline = baseline || "middle";
 
-Graph.prototype._yToCanvas = function(y) {
-    return (y - this.translation.y) / this.scale;
-};
+        var lines = text.split('\n'),
+            lineCount = lines.length,
+            fontSize = (this.fontSize + 4),
+            yLine = y + (1 - lineCount) / 2 * fontSize;
 
-Graph.prototype._canvasToY = function(y) {
-    return y * this.scale + this.translation.y ;
+        for (var i = 0; i < lineCount; i++) {
+            ctx.fillText(lines[i], x, yLine);
+            yLine += fontSize;
+        }
+    }
 };
 
 
+Node.prototype.getTextSize = function(ctx) {
+    if (this.text != undefined) {
+        ctx.font = (this.selected ? "bold " : "") + this.fontSize + "px " + this.fontFace;
 
-/**
- * Get a node by its id
- * @param {number} id
- * @return {Node}  node, or null if not found
- */
-Graph.prototype._getNode = function(id) {
-    for (var i = 0; i < this.nodes.length; i++) {
-        if (this.nodes[i].id == id)
-            return this.nodes[i];
-    }
-
-    return null;
-};
+        var lines = this.text.split('\n'),
+            height = (this.fontSize + 4) * lines.length,
+            width = 0;
 
-/**
- * Redraw all nodes
- * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
- * @param {CanvasRenderingContext2D}   ctx
- */
-Graph.prototype._drawNodes = function(ctx) {
-    // first draw the unselected nodes
-    var nodes = this.nodes;
-    var selected = [];
-    for (var i = 0, iMax = nodes.length; i < iMax; i++) {
-        if (nodes[i].isSelected()) {
-            selected.push(i);
-        }
-        else {
-            nodes[i].draw(ctx);
+        for (var i = 0, iMax = lines.length; i < iMax; i++) {
+            width = Math.max(width, ctx.measureText(lines[i]).width);
         }
-    }
 
-    // draw the selected nodes on top
-    for (var s = 0, sMax = selected.length; s < sMax; s++) {
-        nodes[selected[s]].draw(ctx);
+        return {"width": width, "height": height};
+    }
+    else {
+        return {"width": 0, "height": 0};
     }
 };
 
 /**
- * Redraw all edges
- * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
- * @param {CanvasRenderingContext2D}   ctx
+ * @class Edge
+ *
+ * A edge connects two nodes
+ * @param {Object} properties     Object with properties. Must contain
+ *                                At least properties from and to.
+ *                                Available properties: from (number),
+ *                                to (number), color (string),
+ *                                width (number), style (string),
+ *                                length (number), title (string)
+ * @param {Graph} graph A graph object, used to find and edge to
+ *                                nodes.
+ * @param {Object} constants      An object with default values for
+ *                                example for the color
  */
-Graph.prototype._drawEdges = function(ctx) {
-    var edges = this.edges;
-    for (var i = 0, iMax = edges.length; i < iMax; i++) {
-        edges[i].draw(ctx);
+function Edge (properties, graph, constants) {
+    if (!graph) {
+        throw "No graph provided";
     }
-};
+    this.graph = graph;
 
-/**
- * Recalculate the best positions for all nodes
- */
-Graph.prototype._reposition = function() {
-    // TODO: implement function reposition
+    // initialize constants
+    this.widthMin = constants.edges.widthMin;
+    this.widthMax = constants.edges.widthMax;
 
+    // initialize variables
+    this.id     = undefined;
+    this.style  = constants.edges.style;
+    this.title  = undefined;
+    this.width  = constants.edges.width;
+    this.value  = undefined;
+    this.length = constants.edges.length;
 
-    /*
-     var w = this.frame.canvas.clientWidth;
-     var h = this.frame.canvas.clientHeight;
-     for (var i = 0; i < this.nodes.length; i++) {
-     if (!this.nodes[i].xFixed) this.nodes[i].x = w * Math.random();
-     if (!this.nodes[i].yFixed) this.nodes[i].y = h * Math.random();
-     }
-     //*/
+    // Added to support dashed lines
+    // David Jordan
+    // 2012-08-08
+    this.dashlength = constants.edges.dashlength;
+    this.dashgap = constants.edges.dashgap;
+    this.altdashlength  = constants.edges.altdashlength;
 
-    //*
-    // TODO
-    var radius = this.constants.edges.length * 2;
-    var cx =  this.frame.canvas.clientWidth / 2;
-    var cy =  this.frame.canvas.clientHeight / 2;
-    for (var i = 0; i < this.nodes.length; i++) {
-        var angle = 2*Math.PI * (i / this.nodes.length);
+    this.stiffness = undefined; // depends on the length of the edge
+    this.color  = constants.edges.color;
+    this.widthFixed = false;
+    this.lengthFixed = false;
 
-        if (!this.nodes[i].xFixed) this.nodes[i].x = cx + radius * Math.cos(angle);
-        if (!this.nodes[i].yFixed) this.nodes[i].y = cy + radius * Math.sin(angle);
+    this.setProperties(properties, constants);
+};
 
+/**
+ * Set or overwrite properties for the edge
+ * @param {Object} properties  an object with properties
+ * @param {Object} constants   and object with default, global properties
+ */
+Edge.prototype.setProperties = function(properties, constants) {
+    if (!properties) {
+        return;
     }
-    //*/
 
-    /*
-     // TODO
-     var radius = this.constants.edges.length * 2;
-     var w = this.frame.canvas.clientWidth,
-     h = this.frame.canvas.clientHeight;
-     var cx =  this.frame.canvas.clientWidth / 2;
-     var cy =  this.frame.canvas.clientHeight / 2;
-     var s = Math.sqrt(this.nodes.length);
-     for (var i = 0; i < this.nodes.length; i++) {
-     //var angle = 2*Math.PI * (i / this.nodes.length);
+    if (properties.from != undefined) {this.from = this.graph._getNode(properties.from);}
+    if (properties.to != undefined) {this.to = this.graph._getNode(properties.to);}
 
-     if (!this.nodes[i].xFixed) this.nodes[i].x = w/s * (i % s);
-     if (!this.nodes[i].yFixed) this.nodes[i].y = h/s * (i / s);
-     }
-     //*/
-
-
-    /*
-     var cx =  this.frame.canvas.clientWidth / 2;
-     var cy =  this.frame.canvas.clientHeight / 2;
-     for (var i = 0; i < this.nodes.length; i++) {
-     this.nodes[i].x = cx;
-     this.nodes[i].y = cy;
-     }
-
-     //*/
-
-};
-
-
-/**
- * Find a stable position for all nodes
- */
-Graph.prototype._doStabilize = function() {
-    var start = new Date();
-
-    // find stable position
-    var count = 0;
-    var vmin = this.constants.minVelocity;
-    var stable = false;
-    while (!stable && count < this.constants.maxIterations) {
-        this._calculateForces();
-        this._discreteStepNodes();
-        stable = !this._isMoving(vmin);
-        count++;
+    if (properties.id != undefined)         {this.id = properties.id;}
+    if (properties.style != undefined)      {this.style = properties.style;}
+    if (properties.text != undefined)       {this.text = properties.text;}
+    if (this.text) {
+        this.fontSize = constants.edges.fontSize;
+        this.fontFace = constants.edges.fontFace;
+        this.fontColor = constants.edges.fontColor;
+        if (properties.fontColor != undefined)  {this.fontColor = properties.fontColor;}
+        if (properties.fontSize != undefined)   {this.fontSize = properties.fontSize;}
+        if (properties.fontFace != undefined)   {this.fontFace = properties.fontFace;}
     }
+    if (properties.title != undefined)      {this.title = properties.title;}
+    if (properties.width != undefined)      {this.width = properties.width;}
+    if (properties.value != undefined)      {this.value = properties.value;}
+    if (properties.length != undefined)     {this.length = properties.length;}
 
-    var end = new Date();
-
-    //console.log("Stabilized in " + (end-start) + " ms, " + count + " iterations" ); // TODO: cleanup
-};
-
-/**
- * Calculate the external forces acting on the nodes
- * Forces are caused by: edges, repulsing forces between nodes, gravity
- */
-Graph.prototype._calculateForces = function(nodeId) {
-    // create a local edge to the nodes and edges, that is faster
-    var nodes = this.nodes,
-        edges = this.edges;
+    // Added to support dashed lines
+    // David Jordan
+    // 2012-08-08
+    if (properties.dashlength != undefined) {this.dashlength = properties.dashlength;}
+    if (properties.dashgap != undefined) {this.dashgap = properties.dashgap;}
+    if (properties.altdashlength != undefined) {this.altdashlength = properties.altdashlength;}
 
-    // gravity, add a small constant force to pull the nodes towards the center of
-    // the graph
-    // Also, the forces are reset to zero in this loop by using _setForce instead
-    // of _addForce
-    var gravity = 0.01,
-        gx = this.frame.canvas.clientWidth / 2,
-        gy = this.frame.canvas.clientHeight / 2;
-    for (var n = 0; n < nodes.length; n++) {
-        var dx = gx - nodes[n].x,
-            dy = gy - nodes[n].y,
-            angle = Math.atan2(dy, dx),
-            fx = Math.cos(angle) * gravity,
-            fy = Math.sin(angle) * gravity;
+    if (properties.color != undefined) {this.color = properties.color;}
 
-        this.nodes[n]._setForce(fx, fy);
+    if (!this.from) {
+        throw "Node with id " + properties.from + " not found";
     }
-
-    // repulsing forces between nodes
-    var minimumDistance = this.constants.nodes.distance,
-        steepness = 10; // higher value gives steeper slope of the force around the given minimumDistance
-    for (var n = 0; n < nodes.length; n++) {
-        for (var n2 = n + 1; n2 < this.nodes.length; n2++) {
-            //var dmin = (nodes[n].width + nodes[n].height + nodes[n2].width + nodes[n2].height) / 1 || minimumDistance, // TODO: dmin
-            //var dmin = (nodes[n].width + nodes[n2].width)/2  || minimumDistance, // TODO: dmin
-            //dmin = 40 + ((nodes[n].width/2 + nodes[n2].width/2) || 0),
-
-            // calculate normally distributed force
-            var dx = nodes[n2].x - nodes[n].x,
-                dy = nodes[n2].y - nodes[n].y,
-                distance = Math.sqrt(dx * dx + dy * dy),
-                angle = Math.atan2(dy, dx),
-
-            // TODO: correct factor for repulsing force
-            //var repulsingforce = 2 * Math.exp(-5 * (distance * distance) / (dmin * dmin) ); // TODO: customize the repulsing force
-            //repulsingforce = Math.exp(-1 * (distance * distance) / (dmin * dmin) ), // TODO: customize the repulsing force
-                repulsingforce = 1 / (1 + Math.exp((distance / minimumDistance - 1) * steepness)), // TODO: customize the repulsing force
-                fx = Math.cos(angle) * repulsingforce,
-                fy = Math.sin(angle) * repulsingforce;
-
-            this.nodes[n]._addForce(-fx, -fy);
-            this.nodes[n2]._addForce(fx, fy);
-        }
-        /* TODO: re-implement repulsion of edges
-         for (var l = 0; l < edges.length; l++) {
-         var lx = edges[l].from.x+(edges[l].to.x - edges[l].from.x)/2,
-         ly = edges[l].from.y+(edges[l].to.y - edges[l].from.y)/2,
-
-         // calculate normally distributed force
-         dx = nodes[n].x - lx,
-         dy = nodes[n].y - ly,
-         distance = Math.sqrt(dx * dx + dy * dy),
-         angle = Math.atan2(dy, dx),
-
-
-         // TODO: correct factor for repulsing force
-         //var repulsingforce = 2 * Math.exp(-5 * (distance * distance) / (dmin * dmin) ); // TODO: customize the repulsing force
-         //repulsingforce = Math.exp(-1 * (distance * distance) / (dmin * dmin) ), // TODO: customize the repulsing force
-         repulsingforce = 1 / (1 + Math.exp((distance / (minimumDistance / 2) - 1) * steepness)), // TODO: customize the repulsing force
-         fx = Math.cos(angle) * repulsingforce,
-         fy = Math.sin(angle) * repulsingforce;
-         nodes[n]._addForce(fx, fy);
-         edges[l].from._addForce(-fx/2,-fy/2);
-         edges[l].to._addForce(-fx/2,-fy/2);
-         }
-         */
+    if (!this.to) {
+        throw "Node with id " + properties.to + " not found";
     }
 
-    // forces caused by the edges, modelled as springs
-    for (var l = 0, lMax = edges.length; l < lMax; l++) {
-        var edge = edges[l],
-
-            dx = (edge.to.x - edge.from.x),
-            dy = (edge.to.y - edge.from.y),
-        //edgeLength = (edge.from.width + edge.from.height + edge.to.width + edge.to.height)/2 || edge.length, // TODO: dmin
-        //edgeLength = (edge.from.width + edge.to.width)/2 || edge.length, // TODO: dmin
-        //edgeLength = 20 + ((edge.from.width + edge.to.width) || 0) / 2,
-            edgeLength = edge.length,
-            length =  Math.sqrt(dx * dx + dy * dy),
-            angle = Math.atan2(dy, dx),
-
-            springforce = edge.stiffness * (edgeLength - length),
+    this.widthFixed = this.widthFixed || (properties.width != undefined);
+    this.lengthFixed = this.lengthFixed || (properties.length != undefined);
 
-            fx = Math.cos(angle) * springforce,
-            fy = Math.sin(angle) * springforce;
+    this.stiffness = 1 / this.length;
 
-        edge.from._addForce(-fx, -fy);
-        edge.to._addForce(fx, fy);
+    // initialize animation
+    if (this.style === 'arrow') {
+        this.arrows = [0.5];
     }
 
-    /* TODO: re-implement repulsion of edges
-     // repulsing forces between edges
-     var minimumDistance = this.constants.edges.distance,
-     steepness = 10; // higher value gives steeper slope of the force around the given minimumDistance
-     for (var l = 0; l < edges.length; l++) {
-     //Keep distance from other edge centers
-     for (var l2 = l + 1; l2 < this.edges.length; l2++) {
-     //var dmin = (nodes[n].width + nodes[n].height + nodes[n2].width + nodes[n2].height) / 1 || minimumDistance, // TODO: dmin
-     //var dmin = (nodes[n].width + nodes[n2].width)/2  || minimumDistance, // TODO: dmin
-     //dmin = 40 + ((nodes[n].width/2 + nodes[n2].width/2) || 0),
-     var lx = edges[l].from.x+(edges[l].to.x - edges[l].from.x)/2,
-     ly = edges[l].from.y+(edges[l].to.y - edges[l].from.y)/2,
-     l2x = edges[l2].from.x+(edges[l2].to.x - edges[l2].from.x)/2,
-     l2y = edges[l2].from.y+(edges[l2].to.y - edges[l2].from.y)/2,
-
-     // calculate normally distributed force
-     dx = l2x - lx,
-     dy = l2y - ly,
-     distance = Math.sqrt(dx * dx + dy * dy),
-     angle = Math.atan2(dy, dx),
-
-
-     // TODO: correct factor for repulsing force
-     //var repulsingforce = 2 * Math.exp(-5 * (distance * distance) / (dmin * dmin) ); // TODO: customize the repulsing force
-     //repulsingforce = Math.exp(-1 * (distance * distance) / (dmin * dmin) ), // TODO: customize the repulsing force
-     repulsingforce = 1 / (1 + Math.exp((distance / minimumDistance - 1) * steepness)), // TODO: customize the repulsing force
-     fx = Math.cos(angle) * repulsingforce,
-     fy = Math.sin(angle) * repulsingforce;
+    // set draw method based on style
+    switch (this.style) {
+        case 'line':          this.draw = this._drawLine; break;
+        case 'arrow':         this.draw = this._drawArrow; break;
+        case 'arrow-end':     this.draw = this._drawArrowEnd; break;
+        case 'dash-line':     this.draw = this._drawDashLine; break;
+        default:              this.draw = this._drawLine; break;
+    }
+};
 
-     edges[l].from._addForce(-fx, -fy);
-     edges[l].to._addForce(-fx, -fy);
-     edges[l2].from._addForce(fx, fy);
-     edges[l2].to._addForce(fx, fy);
-     }
-     }
-     */
+/**
+ * get the title of this edge.
+ * @return {string} title    The title of the edge, or undefined when no title
+ *                           has been set.
+ */
+Edge.prototype.getTitle = function() {
+    return this.title;
 };
 
 
 /**
- * Check if any of the nodes is still moving
- * @param {number} vmin   the minimum velocity considered as "moving"
- * @return {boolean}      true if moving, false if non of the nodes is moving
+ * Retrieve the value of the edge. Can be undefined
+ * @return {Number} value
  */
-Graph.prototype._isMoving = function(vmin) {
-    // TODO: ismoving does not work well: should check the kinetic energy, not its velocity
-    var nodes = this.nodes;
-    for (var n = 0, nMax = nodes.length; n < nMax; n++) {
-        if (nodes[n].isMoving(vmin)) {
-            return true;
-        }
-    }
-    return false;
+Edge.prototype.getValue = function() {
+    return this.value;
 };
 
-
 /**
- * Perform one discrete step for all nodes
+ * Adjust the value range of the edge. The edge will adjust it's width
+ * based on its value.
+ * @param {Number} min
+ * @param {Number} max
  */
-Graph.prototype._discreteStepNodes = function() {
-    var interval = this.refreshRate / 1000.0; // in seconds
-    var nodes = this.nodes;
-    for (var n = 0, nMax = nodes.length; n < nMax; n++) {
-        nodes[n].discreteStep(interval);
+Edge.prototype.setValueRange = function(min, max) {
+    if (!this.widthFixed && this.value !== undefined) {
+        var factor = (this.widthMax - this.widthMin) / (max - min);
+        this.width = (this.value - min) * factor + this.widthMin;
     }
 };
 
 /**
- * Start animating nodes and edges
+ * Redraw a edge
+ * Draw this edge in the given canvas
+ * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+ * @param {CanvasRenderingContext2D}   ctx
  */
-Graph.prototype.start = function() {
-    if (this.moving) {
-        this._calculateForces();
-        this._discreteStepNodes();
+Edge.prototype.draw = function(ctx) {
+    throw "Method draw not initialized in edge";
+};
 
-        var vmin = this.constants.minVelocity;
-        this.moving = this._isMoving(vmin);
-    }
+/**
+ * Check if this object is overlapping with the provided object
+ * @param {Object} obj   an object with parameters left, top
+ * @return {boolean}     True if location is located on the edge
+ */
+Edge.prototype.isOverlappingWith = function(obj) {
+    var distMax = 10;
 
-    if (this.moving) {
-        // start animation. only start timer if it is not already running
-        if (!this.timer) {
-            var graph = this;
-            this.timer = window.setTimeout(function () {
-                graph.timer = undefined;
-                graph.start();
-                graph._redraw();
-            }, this.refreshRate);
+    var xFrom = this.from.x;
+    var yFrom = this.from.y;
+    var xTo = this.to.x;
+    var yTo = this.to.y;
+    var xObj = obj.left;
+    var yObj = obj.top;
+
+
+    var dist = Edge._dist(xFrom, yFrom, xTo, yTo, xObj, yObj);
+
+    return (dist < distMax);
+};
+
+
+/**
+ * Redraw a edge as a line
+ * Draw this edge in the given canvas
+ * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+ * @param {CanvasRenderingContext2D}   ctx
+ */
+Edge.prototype._drawLine = function(ctx) {
+    // set style
+    ctx.strokeStyle = this.color;
+    ctx.lineWidth = this._getLineWidth();
+
+    var point;
+    if (this.from != this.to) {
+        // draw line
+        this._line(ctx);
+
+        // draw text
+        if (this.text) {
+            point = this._pointOnLine(0.5);
+            this._text(ctx, this.text, point.x, point.y);
         }
     }
     else {
-        this._redraw();
+        var radius = this.length / 2 / Math.PI;
+        var x, y;
+        var node = this.from;
+        if (!node.width) {
+            node.resize(ctx);
+        }
+        if (node.width > node.height) {
+            x = node.x + node.width / 2;
+            y = node.y - radius;
+        }
+        else {
+            x = node.x + radius;
+            y = node.y - node.height / 2;
+        }
+        this._circle(ctx, x, y, radius);
+        point = this._pointOnCircle(x, y, radius, 0.5);
+        this._text(ctx, this.text, point.x, point.y);
     }
 };
 
 /**
- * Stop animating nodes and edges.
+ * Get the line width of the edge. Depends on width and whether one of the
+ * connected nodes is selected.
+ * @return {Number} width
+ * @private
  */
-Graph.prototype.stop = function () {
-    if (this.timer) {
-        window.clearInterval(this.timer);
-        this.timer = undefined;
+Edge.prototype._getLineWidth = function() {
+    if (this.from.selected || this.to.selected) {
+        return Math.min(this.width * 2, this.widthMax);
+    }
+    else {
+        return this.width;
     }
 };
 
-
-/**--------------------------------------------------------------------------**/
-
-
 /**
- * @class Node
- * A node. A node can be connected to other nodes via one or multiple edges.
- * @param {object} properties An object containing properties for the node. All
- *                            properties are optional, except for the id.
- *                              {number} id     Id of the node. Required
- *                              {string} text   Title for the node
- *                              {number} x      Horizontal position of the node
- *                              {number} y      Vertical position of the node
- *                              {string} style  Drawing style, available:
- *                                              "database", "circle", "rect",
- *                                              "image", "text", "dot", "star",
- *                                              "triangle", "triangleDown",
- *                                              "square"
- *                              {string} image  An image url
- *                              {string} title  An title text, can be HTML
- *                              {anytype} group A group name or number
- * @param {Graph.Images} imagelist    A list with images. Only needed
- *                                            when the node has an image
- * @param {Graph.Groups} grouplist    A list with groups. Needed for
- *                                            retrieving group properties
- * @param {Object}               constants    An object with default values for
- *                                            example for the color
+ * Draw a line between two nodes
+ * @param {CanvasRenderingContext2D} ctx
+ * @private
  */
-Graph.Node = function (properties, imagelist, grouplist, constants) {
-    this.selected = false;
-
-    this.edges = []; // all edges connected to this node
-    this.group = constants.nodes.group;
-
-    this.fontSize = constants.nodes.fontSize;
-    this.fontFace = constants.nodes.fontFace;
-    this.fontColor = constants.nodes.fontColor;
-
-    this.borderColor = constants.nodes.borderColor;
-    this.backgroundColor = constants.nodes.backgroundColor;
-    this.highlightColor = constants.nodes.highlightColor;
+Edge.prototype._line = function (ctx) {
+    // draw a straight line
+    ctx.beginPath();
+    ctx.moveTo(this.from.x, this.from.y);
+    ctx.lineTo(this.to.x, this.to.y);
+    ctx.stroke();
+};
 
-    // set defaults for the properties
-    this.id = undefined;
-    this.style = constants.nodes.style;
-    this.image = constants.nodes.image;
-    this.x = 0;
-    this.y = 0;
-    this.xFixed = false;
-    this.yFixed = false;
-    this.radius = constants.nodes.radius;
-    this.radiusFixed = false;
-    this.radiusMin = constants.nodes.radiusMin;
-    this.radiusMax = constants.nodes.radiusMax;
+/**
+ * Draw a line from a node to itself, a circle
+ * @param {CanvasRenderingContext2D} ctx
+ * @param {Number} x
+ * @param {Number} y
+ * @param {Number} radius
+ * @private
+ */
+Edge.prototype._circle = function (ctx, x, y, radius) {
+    // draw a circle
+    ctx.beginPath();
+    ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
+    ctx.stroke();
+};
 
-    this.imagelist = imagelist;
-    this.grouplist = grouplist;
+/**
+ * Draw text with white background and with the middle at (x, y)
+ * @param {CanvasRenderingContext2D} ctx
+ * @param {String} text
+ * @param {Number} x
+ * @param {Number} y
+ */
+Edge.prototype._text = function (ctx, text, x, y) {
+    if (text) {
+        // TODO: cache the calculated size
+        ctx.font = ((this.from.selected || this.to.selected) ? "bold " : "") +
+            this.fontSize + "px " + this.fontFace;
+        ctx.fillStyle = 'white';
+        var width = ctx.measureText(this.text).width;
+        var height = this.fontSize;
+        var left = x - width / 2;
+        var top = y - height / 2;
 
-    this.setProperties(properties, constants);
+        ctx.fillRect(left, top, width, height);
 
-    // mass, force, velocity
-    this.mass = 50;  // kg (mass is adjusted for the number of connected edges)
-    this.fx = 0.0;  // external force x
-    this.fy = 0.0;  // external force y
-    this.vx = 0.0;  // velocity x
-    this.vy = 0.0;  // velocity y
-    this.minForce = constants.minForce;
-    this.damping = 0.9; // damping factor
+        // draw text
+        ctx.fillStyle = this.fontColor || "black";
+        ctx.textAlign = "left";
+        ctx.textBaseline = "top";
+        ctx.fillText(this.text, left, top);
+    }
 };
 
 /**
- * Attach a edge to the node
- * @param {Graph.Edge} edge
+ * Redraw a edge as a dashed line
+ * Draw this edge in the given canvas
+ * @author David Jordan
+ * @date 2012-08-08
+ * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+ * @param {CanvasRenderingContext2D}   ctx
  */
-Graph.Node.prototype.attachEdge = function(edge) {
-    this.edges.push(edge);
-    this._updateMass();
+Edge.prototype._drawDashLine = function(ctx) {
+    // set style
+    ctx.strokeStyle = this.color;
+    ctx.lineWidth = this._getLineWidth();
+
+    // draw dashed line
+    ctx.beginPath();
+    ctx.lineCap = 'round';
+    if (this.altdashlength != undefined) //If an alt dash value has been set add to the array this value
+    {
+        ctx.dashedLine(this.from.x,this.from.y,this.to.x,this.to.y,[this.dashlength,this.dashgap,this.altdashlength,this.dashgap]);
+    }
+    else if (this.dashlength != undefined && this.dashgap != undefined) //If a dash and gap value has been set add to the array this value
+    {
+        ctx.dashedLine(this.from.x,this.from.y,this.to.x,this.to.y,[this.dashlength,this.dashgap]);
+    }
+    else //If all else fails draw a line
+    {
+        ctx.moveTo(this.from.x, this.from.y);
+        ctx.lineTo(this.to.x, this.to.y);
+    }
+    ctx.stroke();
+
+    // draw text
+    if (this.text) {
+        var point = this._pointOnLine(0.5);
+        this._text(ctx, this.text, point.x, point.y);
+    }
 };
 
 /**
- * Detach a edge from the node
- * @param {Graph.Edge} edge
+ * Get a point on a line
+ * @param {Number} percentage. Value between 0 (line start) and 1 (line end)
+ * @return {Object} point
+ * @private
  */
-Graph.Node.prototype.detachEdge = function(edge) {
-    var index = this.edges.indexOf(edge);
-    if (index != -1) {
-        this.edges.splice(index, 1);
+Edge.prototype._pointOnLine = function (percentage) {
+    return {
+        x: (1 - percentage) * this.from.x + percentage * this.to.x,
+        y: (1 - percentage) * this.from.y + percentage * this.to.y
     }
-    this._updateMass();
 };
 
 /**
- * Update the nodes mass, which is determined by the number of edges connecting
- * to it (more edges -> heavier node).
+ * Get a point on a circle
+ * @param {Number} x
+ * @param {Number} y
+ * @param {Number} radius
+ * @param {Number} percentage. Value between 0 (line start) and 1 (line end)
+ * @return {Object} point
  * @private
  */
-Graph.Node.prototype._updateMass = function() {
-    this.mass = 50 + 20 * this.edges.length; // kg
+Edge.prototype._pointOnCircle = function (x, y, radius, percentage) {
+    var angle = (percentage - 3/8) * 2 * Math.PI;
+    return {
+        x: x + radius * Math.cos(angle),
+        y: y - radius * Math.sin(angle)
+    }
 };
 
 /**
- * Set or overwrite properties for the node
- * @param {Object} properties an object with properties
- * @param {Object} constants  and object with default, global properties
+ * Redraw a edge as a line with an arrow
+ * Draw this edge in the given canvas
+ * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+ * @param {CanvasRenderingContext2D}   ctx
  */
-Graph.Node.prototype.setProperties = function(properties, constants) {
-    if (!properties) {
-        return;
-    }
+Edge.prototype._drawArrow = function(ctx) {
+    var point;
+    // set style
+    ctx.strokeStyle = this.color;
+    ctx.fillStyle = this.color;
+    ctx.lineWidth = this._getLineWidth();
 
-    // basic properties
-    if (properties.id != undefined)        {this.id = properties.id;}
-    if (properties.text != undefined)      {this.text = properties.text;}
-    if (properties.title != undefined)     {this.title = properties.title;}
-    if (properties.group != undefined)     {this.group = properties.group;}
-    if (properties.x != undefined)         {this.x = properties.x;}
-    if (properties.y != undefined)         {this.y = properties.y;}
-    if (properties.value != undefined)     {this.value = properties.value;}
-
-    if (this.id === undefined) {
-        throw "Node must have an id";
-    }
+    if (this.from != this.to) {
+        // draw line
+        this._line(ctx);
 
-    // copy group properties
-    if (this.group) {
-        var groupObj = this.grouplist.get(this.group);
-        for (var prop in groupObj) {
-            if (groupObj.hasOwnProperty(prop)) {
-                this[prop] = groupObj[prop];
+        // draw all arrows
+        var angle = Math.atan2((this.to.y - this.from.y), (this.to.x - this.from.x));
+        var length = 10 + 5 * this.width; // TODO: make customizable?
+        for (var a in this.arrows) {
+            if (this.arrows.hasOwnProperty(a)) {
+                point = this._pointOnLine(this.arrows[a]);
+                ctx.arrow(point.x, point.y, angle, length);
+                ctx.fill();
+                ctx.stroke();
             }
         }
-    }
-
-    // individual style properties
-    if (properties.style != undefined)          {this.style = properties.style;}
-    if (properties.image != undefined)          {this.image = properties.image;}
-    if (properties.radius != undefined)         {this.radius = properties.radius;}
-    if (properties.borderColor != undefined)    {this.borderColor = properties.borderColor;}
-    if (properties.backgroundColor != undefined){this.backgroundColor = properties.backgroundColor;}
-    if (properties.highlightColor != undefined) {this.highlightColor = properties.highlightColor;}
-    if (properties.fontColor != undefined)      {this.fontColor = properties.fontColor;}
-    if (properties.fontSize != undefined)       {this.fontSize = properties.fontSize;}
-    if (properties.fontFace != undefined)       {this.fontFace = properties.fontFace;}
 
-
-    if (this.image != undefined) {
-        if (this.imagelist) {
-            this.imageObj = this.imagelist.load(this.image);
+        // draw text
+        if (this.text) {
+            point = this._pointOnLine(0.5);
+            this._text(ctx, this.text, point.x, point.y);
+        }
+    }
+    else {
+        // draw circle
+        var radius = this.length / 2 / Math.PI;
+        var x, y;
+        var node = this.from;
+        if (!node.width) {
+            node.resize(ctx);
+        }
+        if (node.width > node.height) {
+            x = node.x + node.width / 2;
+            y = node.y - radius;
         }
         else {
-            throw "No imagelist provided";
+            x = node.x + radius;
+            y = node.y - node.height / 2;
         }
-    }
-
-    this.xFixed = this.xFixed || (properties.x != undefined);
-    this.yFixed = this.yFixed || (properties.y != undefined);
-    this.radiusFixed = this.radiusFixed || (properties.radius != undefined);
+        this._circle(ctx, x, y, radius);
 
-    if (this.style == 'image') {
-        this.radiusMin = constants.nodes.widthMin;
-        this.radiusMax = constants.nodes.widthMax;
-    }
+        // draw all arrows
+        var angle = 0.2 * Math.PI;
+        var length = 10 + 5 * this.width; // TODO: make customizable?
+        for (var a in this.arrows) {
+            if (this.arrows.hasOwnProperty(a)) {
+                point = this._pointOnCircle(x, y, radius, this.arrows[a]);
+                ctx.arrow(point.x, point.y, angle, length);
+                ctx.fill();
+                ctx.stroke();
+            }
+        }
 
-    // choose draw method depending on the style
-    var style = this.style;
-    switch (style) {
-        case 'database':      this.draw = this._drawDatabase; this.resize = this._resizeDatabase; break;
-        case 'rect':          this.draw = this._drawRect; this.resize = this._resizeRect; break;
-        case 'circle':        this.draw = this._drawCircle; this.resize = this._resizeCircle; break;
-        // TODO: add ellipse shape
-        // TODO: add diamond shape
-        case 'image':         this.draw = this._drawImage; this.resize = this._resizeImage; break;
-        case 'text':          this.draw = this._drawText; this.resize = this._resizeText; break;
-        case 'dot':           this.draw = this._drawDot; this.resize = this._resizeShape; break;
-        case 'square':        this.draw = this._drawSquare; this.resize = this._resizeShape; break;
-        case 'triangle':      this.draw = this._drawTriangle; this.resize = this._resizeShape; break;
-        case 'triangleDown':  this.draw = this._drawTriangleDown; this.resize = this._resizeShape; break;
-        case 'star':          this.draw = this._drawStar; this.resize = this._resizeShape; break;
-        default:              this.draw = this._drawRect; this.resize = this._resizeRect; break;
+        // draw text
+        if (this.text) {
+            point = this._pointOnCircle(x, y, radius, 0.5);
+            this._text(ctx, this.text, point.x, point.y);
+        }
     }
-
-    // reset the size of the node, this can be changed
-    this._reset();
-};
-
-/**
- * select this node
- */
-Graph.Node.prototype.select = function() {
-    this.selected = true;
-    this._reset();
-};
-
-/**
- * unselect this node
- */
-Graph.Node.prototype.unselect = function() {
-    this.selected = false;
-    this._reset();
 };
 
-/**
- * Reset the calculated size of the node, forces it to recalculate its size
- */
-Graph.Node.prototype._reset = function() {
-    this.width = undefined;
-    this.height = undefined;
-};
 
-/**
- * get the title of this node.
- * @return {string} title    The title of the node, or undefined when no title
- *                           has been set.
- */
-Graph.Node.prototype.getTitle = function() {
-    return this.title;
-};
 
 /**
- * Calculate the distance to the border of the Node
+ * Redraw a edge as a line with an arrow
+ * Draw this edge in the given canvas
+ * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
  * @param {CanvasRenderingContext2D}   ctx
- * @param {Number} angle        Angle in radians
- * @returns {number} distance   Distance to the border in pixels
  */
-Graph.Node.prototype.distanceToBorder = function (ctx, angle) {
-    var borderWidth = 1;
+Edge.prototype._drawArrowEnd = function(ctx) {
+    // set style
+    ctx.strokeStyle = this.color;
+    ctx.fillStyle = this.color;
+    ctx.lineWidth = this._getLineWidth();
 
-    if (!this.width) {
-        this.resize(ctx);
-    }
+    // draw line
+    var angle, length;
+    if (this.from != this.to) {
+        // calculate length and angle of the line
+        angle = Math.atan2((this.to.y - this.from.y), (this.to.x - this.from.x));
+        var dx = (this.to.x - this.from.x);
+        var dy = (this.to.y - this.from.y);
+        var lEdge = Math.sqrt(dx * dx + dy * dy);
 
-    //noinspection FallthroughInSwitchStatementJS
-    switch (this.style) {
-        case 'circle':
-        case 'dot':
-            return this.radius + borderWidth;
+        var lFrom = this.to.distanceToBorder(ctx, angle + Math.PI);
+        var pFrom = (lEdge - lFrom) / lEdge;
+        var xFrom = (pFrom) * this.from.x + (1 - pFrom) * this.to.x;
+        var yFrom = (pFrom) * this.from.y + (1 - pFrom) * this.to.y;
 
-        // TODO: implement distanceToBorder for database
-        // TODO: implement distanceToBorder for triangle
-        // TODO: implement distanceToBorder for triangleDown
+        var lTo = this.to.distanceToBorder(ctx, angle);
+        var pTo = (lEdge - lTo) / lEdge;
+        var xTo = (1 - pTo) * this.from.x + pTo * this.to.x;
+        var yTo = (1 - pTo) * this.from.y + pTo * this.to.y;
 
-        case 'rect':
-        case 'image':
-        case 'text':
-        default:
-            if (this.width) {
-                return Math.min(
-                    Math.abs(this.width / 2 / Math.cos(angle)),
-                    Math.abs(this.height / 2 / Math.sin(angle))) + borderWidth;
-                // TODO: reckon with border radius too in case of rect
-            }
-            else {
-                return 0;
-            }
+        ctx.beginPath();
+        ctx.moveTo(xFrom, yFrom);
+        ctx.lineTo(xTo, yTo);
+        ctx.stroke();
+
+        // draw arrow at the end of the line
+        length = 10 + 5 * this.width; // TODO: make customizable?
+        ctx.arrow(xTo, yTo, angle, length);
+        ctx.fill();
+        ctx.stroke();
 
+        // draw text
+        if (this.text) {
+            var point = this._pointOnLine(0.5);
+            this._text(ctx, this.text, point.x, point.y);
+        }
     }
+    else {
+        // draw circle
+        var radius = this.length / 2 / Math.PI;
+        var x, y, arrow;
+        var node = this.from;
+        if (!node.width) {
+            node.resize(ctx);
+        }
+        if (node.width > node.height) {
+            x = node.x + node.width / 2;
+            y = node.y - radius;
+            arrow = {
+                x: x,
+                y: node.y,
+                angle: 0.9 * Math.PI
+            };
+        }
+        else {
+            x = node.x + radius;
+            y = node.y - node.height / 2;
+            arrow = {
+                x: node.x,
+                y: y,
+                angle: 0.6 * Math.PI
+            };
+        }
+        ctx.beginPath();
+        // TODO: do not draw a circle, but an arc
+        // TODO: similarly, for a line without arrows, draw to the border of the nodes instead of the center
+        ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
+        ctx.stroke();
 
-    // TODO: implement calculation of distance to border for all shapes
-};
+        // draw all arrows
+        length = 10 + 5 * this.width; // TODO: make customizable?
+        ctx.arrow(arrow.x, arrow.y, arrow.angle, length);
+        ctx.fill();
+        ctx.stroke();
 
-/**
- * Set forces acting on the node
- * @param {number} fx   Force in horizontal direction
- * @param {number} fy   Force in vertical direction
- */
-Graph.Node.prototype._setForce = function(fx, fy) {
-    this.fx = fx;
-    this.fy = fy;
+        // draw text
+        if (this.text) {
+            point = this._pointOnCircle(x, y, radius, 0.5);
+            this._text(ctx, this.text, point.x, point.y);
+        }
+    }
 };
 
+
+
 /**
- * Add forces acting on the node
- * @param {number} fx   Force in horizontal direction
- * @param {number} fy   Force in vertical direction
+ * Calculate the distance between a point (x3,y3) and a line segment from
+ * (x1,y1) to (x2,y2).
+ * http://stackoverflow.com/questions/849211/shortest-distancae-between-a-point-and-a-line-segment
+ * @param {number} x1
+ * @param {number} y1
+ * @param {number} x2
+ * @param {number} y2
+ * @param {number} x3
+ * @param {number} y3
  */
-Graph.Node.prototype._addForce = function(fx, fy) {
-    this.fx += fx;
-    this.fy += fy;
+Edge._dist = function (x1,y1, x2,y2, x3,y3) { // x3,y3 is the point
+    var px = x2-x1,
+        py = y2-y1,
+        something = px*px + py*py,
+        u =  ((x3 - x1) * px + (y3 - y1) * py) / something;
+
+    if (u > 1) {
+        u = 1;
+    }
+    else if (u < 0) {
+        u = 0;
+    }
+
+    var x = x1 + u * px,
+        y = y1 + u * py,
+        dx = x - x3,
+        dy = y - y3;
+
+    //# Note: If the actual distance does not matter,
+    //# if you only want to compare what this function
+    //# returns to other results of this function, you
+    //# can just return the squared distance instead
+    //# (i.e. remove the sqrt) to gain a little performance
+
+    return Math.sqrt(dx*dx + dy*dy);
 };
 
 /**
- * Perform one discrete step for the node
- * @param {number} interval    Time interval in seconds
+ * Popup is a class to create a popup window with some text
+ * @param {Element}  container     The container object.
+ * @param {Number} [x]
+ * @param {Number} [y]
+ * @param {String} [text]
  */
-Graph.Node.prototype.discreteStep = function(interval) {
-    if (!this.xFixed) {
-        var dx   = -this.damping * this.vx;     // damping force
-        var ax   = (this.fx + dx) / this.mass;  // acceleration
-        this.vx += ax / interval;               // velocity
-        this.x  += this.vx / interval;          // position
+function Popup(container, x, y, text) {
+    if (container) {
+        this.container = container;
     }
+    else {
+        this.container = document.body;
+    }
+    this.x = 0;
+    this.y = 0;
+    this.padding = 5;
 
-    if (!this.yFixed) {
-        var dy   = -this.damping * this.vy;     // damping force
-        var ay   = (this.fy + dy) / this.mass;  // acceleration
-        this.vy += ay / interval;               // velocity
-        this.y  += this.vy / interval;          // position
+    if (x !== undefined && y !== undefined ) {
+        this.setPosition(x, y);
+    }
+    if (text !== undefined) {
+        this.setText(text);
     }
-};
 
+    // create the frame
+    this.frame = document.createElement("div");
+    var style = this.frame.style;
+    style.position = "absolute";
+    style.visibility = "hidden";
+    style.border = "1px solid #666";
+    style.color = "black";
+    style.padding = this.padding + "px";
+    style.backgroundColor = "#FFFFC6";
+    style.borderRadius = "3px";
+    style.MozBorderRadius = "3px";
+    style.WebkitBorderRadius = "3px";
+    style.boxShadow = "3px 3px 10px rgba(128, 128, 128, 0.5)";
+    style.whiteSpace = "nowrap";
+    this.container.appendChild(this.frame);
+};
 
 /**
- * Check if this node has a fixed x and y position
- * @return {boolean}      true if fixed, false if not
+ * @param {number} x   Horizontal position of the popup window
+ * @param {number} y   Vertical position of the popup window
  */
-Graph.Node.prototype.isFixed = function() {
-    return (this.xFixed && this.yFixed);
+Popup.prototype.setPosition = function(x, y) {
+    this.x = parseInt(x);
+    this.y = parseInt(y);
 };
 
 /**
- * Check if this node is moving
- * @param {number} vmin   the minimum velocity considered as "moving"
- * @return {boolean}      true if moving, false if it has no velocity
+ * Set the text for the popup window. This can be HTML code
+ * @param {string} text
  */
-// TODO: replace this method with calculating the kinetic energy
-Graph.Node.prototype.isMoving = function(vmin) {
-    return (Math.abs(this.vx) > vmin || Math.abs(this.vy) > vmin ||
-        (!this.xFixed && Math.abs(this.fx) > this.minForce) ||
-        (!this.yFixed && Math.abs(this.fy) > this.minForce));
+Popup.prototype.setText = function(text) {
+    this.frame.innerHTML = text;
 };
 
 /**
- * check if this node is selecte
- * @return {boolean} selected   True if node is selected, else false
+ * Show the popup window
+ * @param {boolean} show    Optional. Show or hide the window
  */
-Graph.Node.prototype.isSelected = function() {
-    return this.selected;
+Popup.prototype.show = function (show) {
+    if (show === undefined) {
+        show = true;
+    }
+
+    if (show) {
+        var height = this.frame.clientHeight;
+        var width =  this.frame.clientWidth;
+        var maxHeight = this.frame.parentNode.clientHeight;
+        var maxWidth = this.frame.parentNode.clientWidth;
+
+        var top = (this.y - height);
+        if (top + height + this.padding > maxHeight) {
+            top = maxHeight - height - this.padding;
+        }
+        if (top < this.padding) {
+            top = this.padding;
+        }
+
+        var left = this.x;
+        if (left + width + this.padding > maxWidth) {
+            left = maxWidth - width - this.padding;
+        }
+        if (left < this.padding) {
+            left = this.padding;
+        }
+
+        this.frame.style.left = left + "px";
+        this.frame.style.top = top + "px";
+        this.frame.style.visibility = "visible";
+    }
+    else {
+        this.hide();
+    }
 };
 
 /**
- * Retrieve the value of the node. Can be undefined
- * @return {Number} value
+ * Hide the popup window
  */
-Graph.Node.prototype.getValue = function() {
-    return this.value;
+Popup.prototype.hide = function () {
+    this.frame.style.visibility = "hidden";
 };
 
 /**
- * Calculate the distance from the nodes location to the given location (x,y)
- * @param {Number} x
- * @param {Number} y
- * @return {Number} value
+ * @class Groups
+ * This class can store groups and properties specific for groups.
  */
-Graph.Node.prototype.getDistance = function(x, y) {
-    var dx = this.x - x,
-        dy = this.y - y;
-    return Math.sqrt(dx * dx + dy * dy);
+Groups = function () {
+    this.clear();
+    this.defaultIndex = 0;
 };
 
 
 /**
- * Adjust the value range of the node. The node will adjust it's radius
- * based on its value.
- * @param {Number} min
- * @param {Number} max
+ * default constants for group colors
  */
-Graph.Node.prototype.setValueRange = function(min, max) {
-    if (!this.radiusFixed && this.value !== undefined) {
-        var scale = (this.radiusMax - this.radiusMin) / (max - min);
-        this.radius = (this.value - min) * scale + this.radiusMin;
+Groups.DEFAULT = [
+    {"borderColor": "#2B7CE9", "backgroundColor": "#97C2FC", "highlightColor": "#D2E5FF"}, // blue
+    {"borderColor": "#FFA500", "backgroundColor": "#FFFF00", "highlightColor": "#FFFFA3"}, // yellow
+    {"borderColor": "#FA0A10", "backgroundColor": "#FB7E81", "highlightColor": "#FFAFB1"}, // red
+    {"borderColor": "#41A906", "backgroundColor": "#7BE141", "highlightColor": "#A1EC76"}, // green
+    {"borderColor": "#E129F0", "backgroundColor": "#EB7DF4", "highlightColor": "#F0B3F5"}, // magenta
+    {"borderColor": "#7C29F0", "backgroundColor": "#AD85E4", "highlightColor": "#D3BDF0"}, // purple
+    {"borderColor": "#C37F00", "backgroundColor": "#FFA807", "highlightColor": "#FFCA66"}, // orange
+    {"borderColor": "#4220FB", "backgroundColor": "#6E6EFD", "highlightColor": "#9B9BFD"}, // darkblue
+    {"borderColor": "#FD5A77", "backgroundColor": "#FFC0CB", "highlightColor": "#FFD1D9"}, // pink
+    {"borderColor": "#4AD63A", "backgroundColor": "#C2FABC", "highlightColor": "#E6FFE3"}  // mint
+];
+
+
+/**
+ * Clear all groups
+ */
+Groups.prototype.clear = function () {
+    this.groups = {};
+    this.groups.length = function()
+    {
+        var i = 0;
+        for ( var p in this ) {
+            if (this.hasOwnProperty(p)) {
+                i++;
+            }
+        }
+        return i;
     }
 };
 
+
 /**
- * Draw this node in the given canvas
- * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
- * @param {CanvasRenderingContext2D}   ctx
+ * get group properties of a groupname. If groupname is not found, a new group
+ * is added.
+ * @param {*} groupname        Can be a number, string, Date, etc.
+ * @return {Object} group      The created group, containing all group properties
  */
-Graph.Node.prototype.draw = function(ctx) {
-    throw "Draw method not initialized for node";
+Groups.prototype.get = function (groupname) {
+    var group = this.groups[groupname];
+
+    if (group == undefined) {
+        // create new group
+        var index = this.defaultIndex % Groups.DEFAULT.length;
+        this.defaultIndex++;
+        group = {};
+        group.borderColor     = Groups.DEFAULT[index].borderColor;
+        group.backgroundColor = Groups.DEFAULT[index].backgroundColor;
+        group.highlightColor  = Groups.DEFAULT[index].highlightColor;
+        this.groups[groupname] = group;
+    }
+
+    return group;
 };
 
 /**
- * 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
+ * Add a custom group style
+ * @param {String} groupname
+ * @param {Object} style       An object containing borderColor,
+ *                             backgroundColor, etc.
+ * @return {Object} group      The created group object
  */
-Graph.Node.prototype.resize = function(ctx) {
-    throw "Resize method not initialized for node";
+Groups.prototype.add = function (groupname, style) {
+    this.groups[groupname] = style;
+    return style;
 };
 
 /**
- * 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
+ * @class Images
+ * This class loads images and keeps them stored.
  */
-Graph.Node.prototype.isOverlappingWith = function(obj) {
-    return (this.left          < obj.right &&
-        this.left + this.width > obj.left &&
-        this.top               < obj.bottom &&
-        this.top + this.height > obj.top);
-};
+Images = function () {
+    this.images = {};
 
-Graph.Node.prototype._resizeImage = function (ctx) {
-    // TODO: pre calculate the image size
-    if (!this.width) {  // undefined or 0
-        var width, height;
-        if (this.value) {
-            var scale = this.imageObj.height / this.imageObj.width;
-            width = this.radius || this.imageObj.width;
-            height = this.radius * scale || this.imageObj.height;
-        }
-        else {
-            width = this.imageObj.width;
-            height = this.imageObj.height;
-        }
-        this.width  = width;
-        this.height = height;
-    }
+    this.callback = undefined;
 };
 
-Graph.Node.prototype._drawImage = function (ctx) {
-    this._resizeImage(ctx);
-
-    this.left   = this.x - this.width / 2;
-    this.top    = this.y - this.height / 2;
+/**
+ * Set an onload callback function. This will be called each time an image
+ * is loaded
+ * @param {function} callback
+ */
+Images.prototype.setOnloadCallback = function(callback) {
+    this.callback = callback;
+};
 
-    var yText;
-    if (this.imageObj) {
-        ctx.drawImage(this.imageObj, this.left, this.top, this.width, this.height);
-        yText = this.y + this.height / 2;
-    }
-    else {
-        // image still loading... just draw the text for now
-        yText = this.y;
+/**
+ *
+ * @param {string} url          Url of the image
+ * @return {Image} img          The image object
+ */
+Images.prototype.load = function(url) {
+    var img = this.images[url];
+    if (img == undefined) {
+        // create the image
+        var images = this;
+        img = new Image();
+        this.images[url] = img;
+        img.onload = function() {
+            if (images.callback) {
+                images.callback(this);
+            }
+        };
+        img.src = url;
     }
 
-    this._text(ctx, this.text, this.x, yText, undefined, "top");
+    return img;
 };
 
+/**
+ * @constructor Graph
+ * Create a graph visualization, displaying nodes and edges.
+ * 
+ * @param {Element} container   The DOM element in which the Graph will
+ *                                  be created. Normally a div element.
+ * @param {Object} data         An object containing parameters
+ *                              {Array} nodes
+ *                              {Array} edges
+ * @param {Object} options      Options
+ */
+function Graph (container, data, options) {
+    // create variables and set default values
+    this.containerElement = container;
+    this.width = "100%";
+    this.height = "100%";
+    this.refreshRate = 50; // milliseconds
+    this.stabilize = true; // stabilize before displaying the graph
+    this.selectable = true;
 
-Graph.Node.prototype._resizeRect = function (ctx) {
-    if (!this.width) {
-        var margin = 5;
-        var textSize = this.getTextSize(ctx);
-        this.width = textSize.width + 2 * margin;
-        this.height = textSize.height + 2 * margin;
-    }
-};
-
-Graph.Node.prototype._drawRect = function (ctx) {
-    this._resizeRect(ctx);
+    // set constant values
+    this.constants = {
+        "nodes": {
+            "radiusMin": 5,
+            "radiusMax": 20,
+            "radius": 5,
+            "distance": 100, // px
+            "style": "rect",
+            "image": undefined,
+            "widthMin": 16, // px
+            "widthMax": 64, // px
+            "fontColor": "black",
+            "fontSize": 14, // px
+            //"fontFace": "verdana",
+            "fontFace": "arial",
+            "borderColor": "#2B7CE9",
+            "backgroundColor": "#97C2FC",
+            "highlightColor": "#D2E5FF",
+            "group": undefined
+        },
+        "edges": {
+            "widthMin": 1,
+            "widthMax": 15,
+            "width": 1,
+            "style": "line",
+            "color": "#343434",
+            "fontColor": "#343434",
+            "fontSize": 14, // px
+            "fontFace": "arial",
+            //"distance": 100, //px
+            "length": 100,   // px
+            "dashlength": 10,
+            "dashgap": 5
+        },
+        "minForce": 0.05,
+        "minVelocity": 0.02,   // px/s
+        "maxIterations": 1000  // maximum number of iteration to stabilize
+    };
 
-    this.left = this.x - this.width / 2;
-    this.top = this.y - this.height / 2;
+    this.nodes = [];            // array with Node objects
+    this.edges = [];            // array with Edge objects
+    this.images = new Images(); // object with images
+    this.groups = new Groups(); // object with groups
 
-    ctx.strokeStyle = this.borderColor;
-    ctx.fillStyle = this.selected ? this.highlightColor : this.backgroundColor;
-    ctx.lineWidth = this.selected ? 2.0 : 1.0;
-    ctx.roundRect(this.left, this.top, this.width, this.height, this.radius);
-    ctx.fill();
-    ctx.stroke();
+    // properties of the data
+    this.moving = false;    // True if any of the nodes have an undefined position
 
-    this._text(ctx, this.text, this.x, this.y);
-};
+    this.selection = [];
+    this.timer = undefined;
 
+    // create a frame and canvas
+    this._create();
 
-Graph.Node.prototype._resizeDatabase = function (ctx) {
-    if (!this.width) {
-        var margin = 5;
-        var textSize = this.getTextSize(ctx);
-        var size = textSize.width + 2 * margin;
-        this.width = size;
-        this.height = size;
-    }
-};
+    // apply options
+    this.setOptions(options);
 
-Graph.Node.prototype._drawDatabase = function (ctx) {
-    this._resizeDatabase(ctx);
-    this.left = this.x - this.width / 2;
-    this.top = this.y - this.height / 2;
+    // draw data
+    this.setData(data);
+}
 
-    ctx.strokeStyle = this.borderColor;
-    ctx.fillStyle = this.selected ? this.highlightColor : this.backgroundColor;
-    ctx.lineWidth = this.selected ? 2.0 : 1.0;
-    ctx.database(this.x - this.width/2, this.y - this.height*0.5, this.width, this.height);
-    ctx.fill();
-    ctx.stroke();
+/**
+ * Main drawing logic. This is the function that needs to be called
+ * in the html page, to draw the Graph.
+ *
+ * A data table with the events must be provided, and an options table.
+ * @param {Object} data    Object containing parameters:
+ *                         {Array} nodes     Array with nodes
+ *                         {Array} edges     Array with edges
+ *                         {Options} [options] Object with options
+ */
+Graph.prototype.setData = function(data) {
+    if (data.options) {
+        this.setOptions(data.options);
+    }
 
-    this._text(ctx, this.text, this.x, this.y);
-};
+    // set all data
+    this.setNodes(data.nodes);
+    this.setEdges(data.edges);
 
+    this._reposition(); // TODO: bad solution
+    if (this.stabilize) {
+        this._doStabilize();
+    }
+    this.start();
 
-Graph.Node.prototype._resizeCircle = function (ctx) {
-    if (!this.width) {
-        var margin = 5;
-        var textSize = this.getTextSize(ctx);
-        var diameter = Math.max(textSize.width, textSize.height) + 2 * margin;
-        this.radius = diameter / 2;
+    // create an onload callback method for the images
+    var graph = this;
+    var callback = function () {
+        graph._redraw();
+    };
+    this.images.setOnloadCallback(callback);
 
-        this.width = diameter;
-        this.height = diameter;
-    }
+    // fire the ready event
+    this.trigger('ready');
 };
 
-Graph.Node.prototype._drawCircle = function (ctx) {
-    this._resizeCircle(ctx);
-    this.left = this.x - this.width / 2;
-    this.top = this.y - this.height / 2;
+/**
+ * Set options
+ * @param {Object} options
+ */
+Graph.prototype.setOptions = function (options) {
+    if (options) {
+        // retrieve parameter values
+        if (options.width != undefined)           {this.width = options.width;}
+        if (options.height != undefined)          {this.height = options.height;}
+        if (options.stabilize != undefined)       {this.stabilize = options.stabilize;}
+        if (options.selectable != undefined)      {this.selectable = options.selectable;}
 
-    ctx.strokeStyle = this.borderColor;
-    ctx.fillStyle = this.selected ? this.highlightColor : this.backgroundColor;
-    ctx.lineWidth = this.selected ? 2.0 : 1.0;
-    ctx.circle(this.x, this.y, this.radius);
-    ctx.fill();
-    ctx.stroke();
+        // TODO: work out these options and document them
+        if (options.edges) {
+            for (var prop in options.edges) {
+                if (options.edges.hasOwnProperty(prop)) {
+                    this.constants.edges[prop] = options.edges[prop];
+                }
+            }
 
-    this._text(ctx, this.text, this.x, this.y);
-};
+            if (options.edges.length != undefined &&
+                options.nodes && options.nodes.distance == undefined) {
+                this.constants.edges.length   = options.edges.length;
+                this.constants.nodes.distance = options.edges.length * 1.25;
+            }
 
-Graph.Node.prototype._drawDot = function (ctx) {
-    this._drawShape(ctx, 'circle');
-};
+            if (!options.edges.fontColor) {
+                this.constants.edges.fontColor = options.edges.color;
+            }
 
-Graph.Node.prototype._drawTriangle = function (ctx) {
-    this._drawShape(ctx, 'triangle');
-};
+            // Added to support dashed lines
+            // David Jordan
+            // 2012-08-08
+            if (options.edges.dashlength != undefined) {
+                this.constants.edges.dashlength   = options.edges.dashlength;
+            }
+            if (options.edges.dashgap != undefined) {
+                this.constants.edges.dashgap   = options.edges.dashgap;
+            }
+            if (options.edges.altdashlength != undefined) {
+                this.constants.edges.altdashlength   = options.edges.altdashlength;
+            }
+        }
 
-Graph.Node.prototype._drawTriangleDown = function (ctx) {
-    this._drawShape(ctx, 'triangleDown');
-};
+        if (options.nodes) {
+            for (prop in options.nodes) {
+                if (options.nodes.hasOwnProperty(prop)) {
+                    this.constants.nodes[prop] = options.nodes[prop];
+                }
+            }
 
-Graph.Node.prototype._drawSquare = function (ctx) {
-    this._drawShape(ctx, 'square');
-};
+            /*
+             if (options.nodes.widthMin) this.constants.nodes.radiusMin = options.nodes.widthMin;
+             if (options.nodes.widthMax) this.constants.nodes.radiusMax = options.nodes.widthMax;
+             */
+        }
 
-Graph.Node.prototype._drawStar = function (ctx) {
-    this._drawShape(ctx, 'star');
-};
+        if (options.groups) {
+            for (var groupname in options.groups) {
+                if (options.groups.hasOwnProperty(groupname)) {
+                    var group = options.groups[groupname];
+                    this.groups.add(groupname, group);
+                }
+            }
+        }
 
-Graph.Node.prototype._resizeShape = function (ctx) {
-    if (!this.width) {
-        var size = 2 * this.radius;
-        this.width = size;
-        this.height = size;
+        this._setBackgroundColor(options.backgroundColor);
     }
+
+    this._setSize(this.width, this.height);
+    this._setTranslation(0, 0);
+    this._setScale(1.0);
 };
 
-Graph.Node.prototype._drawShape = function (ctx, shape) {
-    this._resizeShape(ctx);
+/**
+ * fire an event
+ * @param {String} event   The name of an event, for example "select" or "ready"
+ * @param {Object} params  Optional object with event parameters
+ */
+Graph.prototype.trigger = function (event, params) {
+    // trigger the edges event bus
+    events.trigger(this, event, params);
 
-    this.left = this.x - this.width / 2;
-    this.top = this.y - this.height / 2;
+    // trigger the google event bus
+    if (typeof google !== 'undefined' && google.visualization && google.visualization.events) {
+        google.visualization.events.trigger(this, event, params);
+    }
+};
 
-    ctx.strokeStyle = this.borderColor;
-    ctx.fillStyle = this.selected ? this.highlightColor : this.backgroundColor;
-    ctx.lineWidth = this.selected ? 2.0 : 1.0;
 
-    ctx[shape](this.x, this.y, this.radius);
-    ctx.fill();
-    ctx.stroke();
+/**
+ * Create the main frame for the Graph.
+ * This function is executed once when a Graph object is created. The frame
+ * contains a canvas, and this canvas contains all objects like the axis and
+ * nodes.
+ */
+Graph.prototype._create = function () {
+    // remove all elements from the container element.
+    while (this.containerElement.hasChildNodes()) {
+        this.containerElement.removeChild(this.containerElement.firstChild);
+    }
 
-    if (this.text) {
-        this._text(ctx, this.text, this.x, this.y + this.height / 2, undefined, 'top');
+    this.frame = document.createElement("div");
+    this.frame.className = "graph-frame";
+    this.frame.style.position = "relative";
+    this.frame.style.overflow = "hidden";
+
+    // create the graph canvas (HTML canvas element)
+    this.frame.canvas = document.createElement( "canvas" );
+    this.frame.canvas.style.position = "relative";
+    this.frame.appendChild(this.frame.canvas);
+    if (!this.frame.canvas.getContext) {
+        var noCanvas = document.createElement( "DIV" );
+        noCanvas.style.color = "red";
+        noCanvas.style.fontWeight =  "bold" ;
+        noCanvas.style.padding =  "10px";
+        noCanvas.innerHTML =  "Error: your browser does not support HTML canvas";
+        this.frame.canvas.appendChild(noCanvas);
     }
+
+    // create event listeners
+    var me = this;
+    var onmousedown = function (event) {me._onMouseDown(event);};
+    var onmousemove = function (event) {me._onMouseMoveTitle(event);};
+    var onmousewheel = function (event) {me._onMouseWheel(event);};
+    var ontouchstart = function (event) {me._onTouchStart(event);};
+    vis.util.addEventListener(this.frame.canvas, "mousedown", onmousedown);
+    vis.util.addEventListener(this.frame.canvas, "mousemove", onmousemove);
+    vis.util.addEventListener(this.frame.canvas, "mousewheel", onmousewheel);
+    vis.util.addEventListener(this.frame.canvas, "touchstart", ontouchstart);
+
+    // add the frame to the container element
+    this.containerElement.appendChild(this.frame);
 };
 
-Graph.Node.prototype._resizeText = function (ctx) {
-    if (!this.width) {
-        var margin = 5;
-        var textSize = this.getTextSize(ctx);
-        this.width = textSize.width + 2 * margin;
-        this.height = textSize.height + 2 * margin;
+/**
+ * Set the background  and border styling for the graph
+ * @param {String | Object} backgroundColor
+ */
+Graph.prototype._setBackgroundColor = function(backgroundColor) {
+    var fill = "white";
+    var stroke = "lightgray";
+    var strokeWidth = 1;
+
+    if (typeof(backgroundColor) == "string") {
+        fill = backgroundColor;
+        stroke = "none";
+        strokeWidth = 0;
+    }
+    else if (typeof(backgroundColor) == "object") {
+        if (backgroundColor.fill != undefined)        fill = backgroundColor.fill;
+        if (backgroundColor.stroke != undefined)      stroke = backgroundColor.stroke;
+        if (backgroundColor.strokeWidth != undefined) strokeWidth = backgroundColor.strokeWidth;
     }
+    else if  (backgroundColor == undefined) {
+        // use use defaults
+    }
+    else {
+        throw "Unsupported type of backgroundColor";
+    }
+
+    this.frame.style.boxSizing = 'border-box';
+    this.frame.style.backgroundColor = fill;
+    this.frame.style.borderColor = stroke;
+    this.frame.style.borderWidth = strokeWidth + "px";
+    this.frame.style.borderStyle = "solid";
 };
 
-Graph.Node.prototype._drawText = function (ctx) {
-    this._resizeText(ctx);
-    this.left = this.x - this.width / 2;
-    this.top = this.y - this.height / 2;
 
-    this._text(ctx, this.text, this.x, this.y);
-};
+/**
+ * handle on mouse down event
+ */
+Graph.prototype._onMouseDown = function (event) {
+    event = event || window.event;
 
+    if (!this.selectable) {
+        return;
+    }
 
-Graph.Node.prototype._text = function (ctx, text, x, y, align, baseline) {
-    if (text) {
-        ctx.font = (this.selected ? "bold " : "") + this.fontSize + "px " + this.fontFace;
-        ctx.fillStyle = this.fontColor || "black";
-        ctx.textAlign = align || "center";
-        ctx.textBaseline = baseline || "middle";
+    // check if mouse is still down (may be up when focus is lost for example
+    // in an iframe)
+    if (this.leftButtonDown) {
+        this._onMouseUp(event);
+    }
 
-        var lines = text.split('\n'),
-            lineCount = lines.length,
-            fontSize = (this.fontSize + 4),
-            yLine = y + (1 - lineCount) / 2 * fontSize;
+    // only react on left mouse button down
+    this.leftButtonDown = event.which ? (event.which == 1) : (event.button == 1);
+    if (!this.leftButtonDown && !this.touchDown) {
+        return;
+    }
 
-        for (var i = 0; i < lineCount; i++) {
-            ctx.fillText(lines[i], x, yLine);
-            yLine += fontSize;
-        }
+    // add event listeners to handle moving the contents
+    // we store the function onmousemove and onmouseup in the timeline, so we can
+    // remove the eventlisteners lateron in the function mouseUp()
+    var me = this;
+    if (!this.onmousemove) {
+        this.onmousemove = function (event) {me._onMouseMove(event);};
+        vis.util.addEventListener(document, "mousemove", me.onmousemove);
     }
-};
+    if (!this.onmouseup) {
+        this.onmouseup = function (event) {me._onMouseUp(event);};
+        vis.util.addEventListener(document, "mouseup", me.onmouseup);
+    }
+    vis.util.preventDefault(event);
 
+    // store the start x and y position of the mouse
+    this.startMouseX = event.clientX || event.targetTouches[0].clientX;
+    this.startMouseY = event.clientY || event.targetTouches[0].clientY;
+    this.startFrameLeft = vis.util.getAbsoluteLeft(this.frame.canvas);
+    this.startFrameTop = vis.util.getAbsoluteTop(this.frame.canvas);
+    this.startTranslation = this._getTranslation();
 
-Graph.Node.prototype.getTextSize = function(ctx) {
-    if (this.text != undefined) {
-        ctx.font = (this.selected ? "bold " : "") + this.fontSize + "px " + this.fontFace;
+    this.ctrlKeyDown = event.ctrlKey;
+    this.shiftKeyDown = event.shiftKey;
 
-        var lines = this.text.split('\n'),
-            height = (this.fontSize + 4) * lines.length,
-            width = 0;
+    var obj = {
+        "left" :   this._xToCanvas(this.startMouseX - this.startFrameLeft),
+        "top" :    this._yToCanvas(this.startMouseY - this.startFrameTop),
+        "right" :  this._xToCanvas(this.startMouseX - this.startFrameLeft),
+        "bottom" : this._yToCanvas(this.startMouseY - this.startFrameTop)
+    };
+    var overlappingNodes = this._getNodesOverlappingWith(obj);
+    // if there are overlapping nodes, select the last one, this is the
+    // one which is drawn on top of the others
+    this.startClickedObj = (overlappingNodes.length > 0) ?
+        overlappingNodes[overlappingNodes.length - 1] : undefined;
 
-        for (var i = 0, iMax = lines.length; i < iMax; i++) {
-            width = Math.max(width, ctx.measureText(lines[i]).width);
+    if (this.startClickedObj) {
+        // move clicked node with the mouse
+
+        // make the clicked node temporarily fixed, and store their original state
+        var node = this.nodes[this.startClickedObj.row];
+        this.startClickedObj.xFixed = node.xFixed;
+        this.startClickedObj.yFixed = node.yFixed;
+        node.xFixed = true;
+        node.yFixed = true;
+
+        if (!this.ctrlKeyDown || !node.isSelected()) {
+            // select this node
+            this._selectNodes([this.startClickedObj], this.ctrlKeyDown);
+        }
+        else {
+            // unselect this node
+            this._unselectNodes([this.startClickedObj]);
         }
 
-        return {"width": width, "height": height};
+        if (!this.moving) {
+            this._redraw();
+        }
+    }
+    else if (this.shiftKeyDown) {
+        // start selection of multiple nodes
     }
     else {
-        return {"width": 0, "height": 0};
+        // start moving the graph
+        this.moved = false;
     }
 };
 
-
-
-/**--------------------------------------------------------------------------**/
-
-
 /**
- * @class Edge
- *
- * A edge connects two nodes
- * @param {Object} properties     Object with properties. Must contain
- *                                At least properties from and to.
- *                                Available properties: from (number),
- *                                to (number), color (string),
- *                                width (number), style (string),
- *                                length (number), title (string)
- * @param {Graph} graph A graph object, used to find and edge to
- *                                nodes.
- * @param {Object} constants      An object with default values for
- *                                example for the color
+ * handle on mouse move event
  */
-Graph.Edge = function (properties, graph, constants) {
-    if (!graph) {
-        throw "No graph provided";
+Graph.prototype._onMouseMove = function (event) {
+    event = event || window.event;
+
+    if (!this.selectable) {
+        return;
     }
-    this.graph = graph;
 
-    // initialize constants
-    this.widthMin = constants.edges.widthMin;
-    this.widthMax = constants.edges.widthMax;
+    var mouseX = event.clientX || (event.targetTouches && event.targetTouches[0].clientX) || 0;
+    var mouseY = event.clientY || (event.targetTouches && event.targetTouches[0].clientY) || 0;
+    this.mouseX = mouseX;
+    this.mouseY = mouseY;
 
-    // initialize variables
-    this.id     = undefined;
-    this.style  = constants.edges.style;
-    this.title  = undefined;
-    this.width  = constants.edges.width;
-    this.value  = undefined;
-    this.length = constants.edges.length;
+    if (this.startClickedObj) {
+        var node = this.nodes[this.startClickedObj.row];
 
-    // Added to support dashed lines
-    // David Jordan
-    // 2012-08-08
-    this.dashlength = constants.edges.dashlength;
-    this.dashgap = constants.edges.dashgap;
-    this.altdashlength  = constants.edges.altdashlength;
+        if (!this.startClickedObj.xFixed)
+            node.x = this._xToCanvas(mouseX - this.startFrameLeft);
 
-    this.stiffness = undefined; // depends on the length of the edge
-    this.color  = constants.edges.color;
-    this.widthFixed = false;
-    this.lengthFixed = false;
+        if (!this.startClickedObj.yFixed)
+            node.y = this._yToCanvas(mouseY - this.startFrameTop);
 
-    this.setProperties(properties, constants);
-};
+        // start animation if not yet running
+        if (!this.moving) {
+            this.moving = true;
+            this.start();
+        }
+    }
+    else if (this.shiftKeyDown) {
+        // draw a rect from start mouse location to current mouse location
+        if (this.frame.selRect == undefined) {
+            this.frame.selRect = document.createElement("DIV");
+            this.frame.appendChild(this.frame.selRect);
 
-/**
- * Set or overwrite properties for the edge
- * @param {Object} properties  an object with properties
- * @param {Object} constants   and object with default, global properties
- */
-Graph.Edge.prototype.setProperties = function(properties, constants) {
-    if (!properties) {
-        return;
+            this.frame.selRect.style.position = "absolute";
+            this.frame.selRect.style.border = "1px dashed red";
+        }
+
+        var left =   Math.min(this.startMouseX, mouseX) - this.startFrameLeft;
+        var top =    Math.min(this.startMouseY, mouseY) - this.startFrameTop;
+        var right =  Math.max(this.startMouseX, mouseX) - this.startFrameLeft;
+        var bottom = Math.max(this.startMouseY, mouseY) - this.startFrameTop;
+
+        this.frame.selRect.style.left = left + "px";
+        this.frame.selRect.style.top = top + "px";
+        this.frame.selRect.style.width = (right - left) + "px";
+        this.frame.selRect.style.height = (bottom - top) + "px";
     }
+    else {
+        // move the graph
+        var diffX = mouseX - this.startMouseX;
+        var diffY = mouseY - this.startMouseY;
 
-    if (properties.from != undefined) {this.from = this.graph._getNode(properties.from);}
-    if (properties.to != undefined) {this.to = this.graph._getNode(properties.to);}
+        this._setTranslation(
+            this.startTranslation.x + diffX,
+            this.startTranslation.y + diffY);
+        this._redraw();
 
-    if (properties.id != undefined)         {this.id = properties.id;}
-    if (properties.style != undefined)      {this.style = properties.style;}
-    if (properties.text != undefined)       {this.text = properties.text;}
-    if (this.text) {
-        this.fontSize = constants.edges.fontSize;
-        this.fontFace = constants.edges.fontFace;
-        this.fontColor = constants.edges.fontColor;
-        if (properties.fontColor != undefined)  {this.fontColor = properties.fontColor;}
-        if (properties.fontSize != undefined)   {this.fontSize = properties.fontSize;}
-        if (properties.fontFace != undefined)   {this.fontFace = properties.fontFace;}
+        this.moved = true;
     }
-    if (properties.title != undefined)      {this.title = properties.title;}
-    if (properties.width != undefined)      {this.width = properties.width;}
-    if (properties.value != undefined)      {this.value = properties.value;}
-    if (properties.length != undefined)     {this.length = properties.length;}
 
-    // Added to support dashed lines
-    // David Jordan
-    // 2012-08-08
-    if (properties.dashlength != undefined) {this.dashlength = properties.dashlength;}
-    if (properties.dashgap != undefined) {this.dashgap = properties.dashgap;}
-    if (properties.altdashlength != undefined) {this.altdashlength = properties.altdashlength;}
+    vis.util.preventDefault(event);
+};
 
-    if (properties.color != undefined) {this.color = properties.color;}
+/**
+ * handle on mouse up event
+ */
+Graph.prototype._onMouseUp = function (event) {
+    event = event || window.event;
 
-    if (!this.from) {
-        throw "Node with id " + properties.from + " not found";
+    if (!this.selectable) {
+        return;
     }
-    if (!this.to) {
-        throw "Node with id " + properties.to + " not found";
+
+    // remove event listeners here, important for Safari
+    if (this.onmousemove) {
+        vis.util.removeEventListener(document, "mousemove", this.onmousemove);
+        this.onmousemove = undefined;
+    }
+    if (this.onmouseup) {
+        vis.util.removeEventListener(document, "mouseup",   this.onmouseup);
+        this.onmouseup = undefined;
     }
+    vis.util.preventDefault(event);
 
-    this.widthFixed = this.widthFixed || (properties.width != undefined);
-    this.lengthFixed = this.lengthFixed || (properties.length != undefined);
+    // check selected nodes
+    var endMouseX = event.clientX || this.mouseX || 0;
+    var endMouseY = event.clientY || this.mouseY || 0;
 
-    this.stiffness = 1 / this.length;
+    var ctrlKey = event ? event.ctrlKey : window.event.ctrlKey;
 
-    // initialize animation
-    if (this.style === 'arrow') {
-        this.arrows = [0.5];
+    if (this.startClickedObj) {
+        // restore the original fixed state
+        var node = this.nodes[this.startClickedObj.row];
+        node.xFixed = this.startClickedObj.xFixed;
+        node.yFixed = this.startClickedObj.yFixed;
     }
+    else if (this.shiftKeyDown) {
+        // select nodes inside selection area
+        var obj = {
+            "left":   this._xToCanvas(Math.min(this.startMouseX, endMouseX) - this.startFrameLeft),
+            "top":    this._yToCanvas(Math.min(this.startMouseY, endMouseY) - this.startFrameTop),
+            "right":  this._xToCanvas(Math.max(this.startMouseX, endMouseX) - this.startFrameLeft),
+            "bottom": this._yToCanvas(Math.max(this.startMouseY, endMouseY) - this.startFrameTop)
+        };
+        var overlappingNodes = this._getNodesOverlappingWith(obj);
+        this._selectNodes(overlappingNodes, ctrlKey);
+        this.redraw();
 
-    // set draw method based on style
-    switch (this.style) {
-        case 'line':          this.draw = this._drawLine; break;
-        case 'arrow':         this.draw = this._drawArrow; break;
-        case 'arrow-end':     this.draw = this._drawArrowEnd; break;
-        case 'dash-line':     this.draw = this._drawDashLine; break;
-        default:              this.draw = this._drawLine; break;
+        // remove the selection rectangle
+        if (this.frame.selRect) {
+            this.frame.removeChild(this.frame.selRect);
+            this.frame.selRect = undefined;
+        }
+    }
+    else {
+        if (!this.ctrlKeyDown && !this.moved) {
+            // remove selection
+            this._unselectNodes();
+            this._redraw();
+        }
     }
-};
 
-/**
- * get the title of this edge.
- * @return {string} title    The title of the edge, or undefined when no title
- *                           has been set.
- */
-Graph.Edge.prototype.getTitle = function() {
-    return this.title;
+    this.leftButtonDown = false;
+    this.ctrlKeyDown = false;
 };
 
 
 /**
- * Retrieve the value of the edge. Can be undefined
- * @return {Number} value
+ * Event handler for mouse wheel event, used to zoom the timeline
+ * Code from http://adomas.org/javascript-mouse-wheel/
+ * @param {event}  event   The event
  */
-Graph.Edge.prototype.getValue = function() {
-    return this.value;
-}
+Graph.prototype._onMouseWheel = function(event) {
+    event = event || window.event;
+    var mouseX = event.clientX;
+    var mouseY = event.clientY;
 
-/**
- * Adjust the value range of the edge. The edge will adjust it's width
- * based on its value.
- * @param {Number} min
- * @param {Number} max
- */
-Graph.Edge.prototype.setValueRange = function(min, max) {
-    if (!this.widthFixed && this.value !== undefined) {
-        var factor = (this.widthMax - this.widthMin) / (max - min);
-        this.width = (this.value - min) * factor + this.widthMin;
+    // retrieve delta
+    var delta = 0;
+    if (event.wheelDelta) { /* IE/Opera. */
+        delta = event.wheelDelta/120;
+    } else if (event.detail) { /* Mozilla case. */
+        // In Mozilla, sign of delta is different than in IE.
+        // Also, delta is multiple of 3.
+        delta = -event.detail/3;
     }
-};
 
+    // If delta is nonzero, handle it.
+    // Basically, delta is now positive if wheel was scrolled up,
+    // and negative, if wheel was scrolled down.
+    if (delta) {
+        // determine zoom factor, and adjust the zoom factor such that zooming in
+        // and zooming out correspond wich each other
+        var zoom = delta / 10;
+        if (delta < 0) {
+            zoom = zoom / (1 - zoom);
+        }
 
-/**
- * Check if the length is fixed.
- * @return {boolean} lengthFixed   True if the length is fixed, else false
- */
-Graph.Edge.prototype.isLengthFixed = function() {
-    return this.lengthFixed;
-};
+        var scaleOld = this._getScale();
+        var scaleNew = scaleOld * (1 + zoom);
+        if (scaleNew < 0.01) {
+            scaleNew = 0.01;
+        }
+        if (scaleNew > 10) {
+            scaleNew = 10;
+        }
 
-/**
- * Retrieve the length of the edge. Can be undefined
- * @return {Number} length
- */
-Graph.Edge.prototype.getLength = function() {
-    return this.length;
-};
+        var frameLeft = vis.util.getAbsoluteLeft(this.frame.canvas);
+        var frameTop = vis.util.getAbsoluteTop(this.frame.canvas);
+        var x = mouseX - frameLeft;
+        var y = mouseY - frameTop;
 
-/**
- * Adjust the length of the edge. This can only be done when the length
- * is not fixed (which is the case when the edge is created with a length property)
- * @param {Number} length
- */
-Graph.Edge.prototype.setLength = function(length) {
-    if (!this.lengthFixed) {
-        this.length = length;
+        var translation = this._getTranslation();
+        var scaleFrac = scaleNew / scaleOld;
+        var tx = (1 - scaleFrac) * x + translation.x * scaleFrac;
+        var ty = (1 - scaleFrac) * y + translation.y * scaleFrac;
+
+        this._setScale(scaleNew);
+        this._setTranslation(tx, ty);
+        this._redraw();
     }
-};
 
-/**
- * Retrieve the length of the edges dashes. Can be undefined
- * @author David Jordan
- * @date 2012-08-08
- * @return {Number} dashlength
- */
-Graph.Edge.prototype.getDashLength = function() {
-    return this.dashlength;
+    // Prevent default actions caused by mouse wheel.
+    // That might be ugly, but we handle scrolls somehow
+    // anyway, so don't bother here...
+    vis.util.preventDefault(event);
 };
 
-/**
- * Adjust the length of the edges dashes.
- * @author David Jordan
- * @date 2012-08-08
- * @param {Number} dashlength
- */
-Graph.Edge.prototype.setDashLength = function(dashlength) {
-    this.dashlength = dashlength;
-};
 
 /**
- * Retrieve the length of the edges dashes gaps. Can be undefined
- * @author David Jordan
- * @date 2012-08-08
- * @return {Number} dashgap
+ * Mouse move handler for checking whether the title moves over a node with a title.
  */
-Graph.Edge.prototype.getDashGap = function() {
-    return this.dashgap;
-};
+Graph.prototype._onMouseMoveTitle = function (event) {
+    event = event || window.event;
 
-/**
- * Adjust the length of the edges dashes gaps.
- * @author David Jordan
- * @date 2012-08-08
- * @param {Number} dashgap
- */
-Graph.Edge.prototype.setDashGap = function(dashgap) {
-    this.dashgap = dashgap;
-};
+    var startMouseX = event.clientX;
+    var startMouseY = event.clientY;
+    this.startFrameLeft = this.startFrameLeft || vis.util.getAbsoluteLeft(this.frame.canvas);
+    this.startFrameTop = this.startFrameTop || vis.util.getAbsoluteTop(this.frame.canvas);
 
-/**
- * Retrieve the length of the edges alternate dashes. Can be undefined
- * @author David Jordan
- * @date 2012-08-08
- * @return {Number} altdashlength
- */
-Graph.Edge.prototype.getAltDashLength = function() {
-    return this.altdashlength;
-};
+    var x = startMouseX - this.startFrameLeft;
+    var y = startMouseY - this.startFrameTop;
 
-/**
- * Adjust the length of the edges alternate dashes.
- * @author David Jordan
- * @date 2012-08-08
- * @param {Number} altdashlength
- */
-Graph.Edge.prototype.setAltDashLength = function(altdashlength) {
-    this.altdashlength = altdashlength;
-};
+    // check if the previously selected node is still selected
+    if (this.popupNode) {
+        this._checkHidePopup(x, y);
+    }
 
-
-
-/**
- * Redraw a edge
- * Draw this edge in the given canvas
- * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
- * @param {CanvasRenderingContext2D}   ctx
- */
-Graph.Edge.prototype.draw = function(ctx) {
-    throw "Method draw not initialized in edge";
+    // start a timeout that will check if the mouse is positioned above
+    // an element
+    var me = this;
+    var checkShow = function() {
+        me._checkShowPopup(x, y);
+    };
+    if (this.popupTimer) {
+        clearInterval(this.popupTimer); // stop any running timer
+    }
+    if (!this.leftButtonDown) {
+        this.popupTimer = setTimeout(checkShow, 300);
+    }
 };
 
-
 /**
- * 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
+ * Check if there is an element on the given position in the graph
+ * (a node or edge). If so, and if this element has a title,
+ * show a popup window with its title.
+ *
+ * @param {number} x
+ * @param {number} y
  */
-Graph.Edge.prototype.isOverlappingWith = function(obj) {
-    var distMax = 10;
-
-    var xFrom = this.from.x;
-    var yFrom = this.from.y;
-    var xTo = this.to.x;
-    var yTo = this.to.y;
-    var xObj = obj.left;
-    var yObj = obj.top;
+Graph.prototype._checkShowPopup = function (x, y) {
+    var obj = {
+        "left" : this._xToCanvas(x),
+        "top" : this._yToCanvas(y),
+        "right" : this._xToCanvas(x),
+        "bottom" : this._yToCanvas(y)
+    };
 
+    var i, len;
+    var lastPopupNode = this.popupNode;
 
-    var dist = Graph._dist(xFrom, yFrom, xTo, yTo, xObj, yObj);
+    if (this.popupNode == undefined) {
+        // search the nodes for overlap, select the top one in case of multiple nodes
+        var nodes = this.nodes;
+        for (i = nodes.length - 1; i >= 0; i--) {
+            var node = nodes[i];
+            if (node.getTitle() != undefined && node.isOverlappingWith(obj)) {
+                this.popupNode = node;
+                break;
+            }
+        }
+    }
 
-    return (dist < distMax);
-};
+    if (this.popupNode == undefined) {
+        // search the edges for overlap
+        var allEdges = this.edges;
+        for (i = 0, len = allEdges.length; i < len; i++) {
+            var edge = allEdges[i];
+            if (edge.getTitle() != undefined && edge.isOverlappingWith(obj)) {
+                this.popupNode = edge;
+                break;
+            }
+        }
+    }
 
-/**
- * Calculate the distance between a point (x3,y3) and a line segment from
- * (x1,y1) to (x2,y2).
- * http://stackoverflow.com/questions/849211/shortest-distancae-between-a-point-and-a-line-segment
- * @param {number} x1
- * @param {number} y1
- * @param {number} x2
- * @param {number} y2
- * @param {number} x3
- * @param {number} y3
- */
-Graph._dist = function (x1,y1, x2,y2, x3,y3) { // x3,y3 is the point
-    var px = x2-x1,
-        py = y2-y1,
-        something = px*px + py*py,
-        u =  ((x3 - x1) * px + (y3 - y1) * py) / something;
+    if (this.popupNode) {
+        // show popup message window
+        if (this.popupNode != lastPopupNode) {
+            var me = this;
+            if (!me.popup) {
+                me.popup = new Popup(me.frame);
+            }
 
-    if (u > 1) {
-        u = 1;
+            // adjust a small offset such that the mouse cursor is located in the
+            // bottom left location of the popup, and you can easily move over the
+            // popup area
+            me.popup.setPosition(x - 3, y - 3);
+            me.popup.setText(me.popupNode.getTitle());
+            me.popup.show();
+        }
     }
-    else if (u < 0) {
-        u = 0;
+    else {
+        if (this.popup) {
+            this.popup.hide();
+        }
     }
-
-    var x = x1 + u * px,
-        y = y1 + u * py,
-        dx = x - x3,
-        dy = y - y3;
-
-    //# Note: If the actual distance does not matter,
-    //# if you only want to compare what this function
-    //# returns to other results of this function, you
-    //# can just return the squared distance instead
-    //# (i.e. remove the sqrt) to gain a little performance
-
-    return Math.sqrt(dx*dx + dy*dy);
 };
 
 /**
- * Redraw a edge as a line
- * Draw this edge in the given canvas
- * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
- * @param {CanvasRenderingContext2D}   ctx
+ * Check if the popup must be hided, which is the case when the mouse is no
+ * longer hovering on the object
+ * @param {number} x
+ * @param {number} y
  */
-Graph.Edge.prototype._drawLine = function(ctx) {
-    // set style
-    ctx.strokeStyle = this.color;
-    ctx.lineWidth = this._getLineWidth();
-
-    var point;
-    if (this.from != this.to) {
-        // draw line
-        this._line(ctx);
+Graph.prototype._checkHidePopup = function (x, y) {
+    var obj = {
+        "left" : x,
+        "top" : y,
+        "right" : x,
+        "bottom" : y
+    };
 
-        // draw text
-        if (this.text) {
-            point = this._pointOnLine(0.5);
-            this._text(ctx, this.text, point.x, point.y);
-        }
-    }
-    else {
-        var radius = this.length / 2 / Math.PI;
-        var x, y;
-        var node = this.from;
-        if (!node.width) {
-            node.resize(ctx);
-        }
-        if (node.width > node.height) {
-            x = node.x + node.width / 2;
-            y = node.y - radius;
-        }
-        else {
-            x = node.x + radius;
-            y = node.y - node.height / 2;
+    if (!this.popupNode || !this.popupNode.isOverlappingWith(obj) ) {
+        this.popupNode = undefined;
+        if (this.popup) {
+            this.popup.hide();
         }
-        this._circle(ctx, x, y, radius);
-        point = this._pointOnCircle(x, y, radius, 0.5);
-        this._text(ctx, this.text, point.x, point.y);
     }
 };
 
 /**
- * Get the line width of the edge. Depends on width and whether one of the
- * connected nodes is selected.
- * @return {Number} width
- * @private
+ * Event handler for touchstart event on mobile devices
  */
-Graph.Edge.prototype._getLineWidth = function() {
-    if (this.from.selected || this.to.selected) {
-        return Math.min(this.width * 2, this.widthMax);
+Graph.prototype._onTouchStart = function(event) {
+    vis.util.preventDefault(event);
+
+    if (this.touchDown) {
+        // if already moving, return
+        return;
     }
-    else {
-        return this.width;
+    this.touchDown = true;
+
+    var me = this;
+    if (!this.ontouchmove) {
+        this.ontouchmove = function (event) {me._onTouchMove(event);};
+        vis.util.addEventListener(document, "touchmove", this.ontouchmove);
+    }
+    if (!this.ontouchend) {
+        this.ontouchend   = function (event) {me._onTouchEnd(event);};
+        vis.util.addEventListener(document, "touchend", this.ontouchend);
     }
-};
 
-/**
- * Draw a line between two nodes
- * @param {CanvasRenderingContext2D} ctx
- * @private
- */
-Graph.Edge.prototype._line = function (ctx) {
-    // draw a straight line
-    ctx.beginPath();
-    ctx.moveTo(this.from.x, this.from.y);
-    ctx.lineTo(this.to.x, this.to.y);
-    ctx.stroke();
+    this._onMouseDown(event);
 };
 
 /**
- * Draw a line from a node to itself, a circle
- * @param {CanvasRenderingContext2D} ctx
- * @param {Number} x
- * @param {Number} y
- * @param {Number} radius
- * @private
+ * Event handler for touchmove event on mobile devices
  */
-Graph.Edge.prototype._circle = function (ctx, x, y, radius) {
-    // draw a circle
-    ctx.beginPath();
-    ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
-    ctx.stroke();
+Graph.prototype._onTouchMove = function(event) {
+    vis.util.preventDefault(event);
+    this._onMouseMove(event);
 };
 
 /**
- * Draw text with white background and with the middle at (x, y)
- * @param {CanvasRenderingContext2D} ctx
- * @param {String} text
- * @param {Number} x
- * @param {Number} y
+ * Event handler for touchend event on mobile devices
  */
-Graph.Edge.prototype._text = function (ctx, text, x, y) {
-    if (text) {
-        // TODO: cache the calculated size
-        ctx.font = ((this.from.selected || this.to.selected) ? "bold " : "") +
-            this.fontSize + "px " + this.fontFace;
-        ctx.fillStyle = 'white';
-        var width = ctx.measureText(this.text).width;
-        var height = this.fontSize;
-        var left = x - width / 2;
-        var top = y - height / 2;
+Graph.prototype._onTouchEnd = function(event) {
+    vis.util.preventDefault(event);
 
-        ctx.fillRect(left, top, width, height);
+    this.touchDown = false;
 
-        // draw text
-        ctx.fillStyle = this.fontColor || "black";
-        ctx.textAlign = "left";
-        ctx.textBaseline = "top";
-        ctx.fillText(this.text, left, top);
+    if (this.ontouchmove) {
+        vis.util.removeEventListener(document, "touchmove", this.ontouchmove);
+        this.ontouchmove = undefined;
+    }
+    if (this.ontouchend) {
+        vis.util.removeEventListener(document, "touchend", this.ontouchend);
+        this.ontouchend = undefined;
     }
+
+    this._onMouseUp(event);
 };
 
+
 /**
- * Sets up the dashedLine functionality for drawing
- * Original code came from http://stackoverflow.com/questions/4576724/dotted-stroke-in-canvas
- * @author David Jordan
- * @date 2012-08-08
+ * Unselect selected nodes. If no selection array is provided, all nodes
+ * are unselected
+ * @param {Object[]} selection     Array with selection objects, each selection
+ *                                 object has a parameter row. Optional
+ * @param {Boolean} triggerSelect  If true (default), the select event
+ *                                 is triggered when nodes are unselected
+ * @return {Boolean} changed       True if the selection is changed
  */
-var CP = (typeof window !== 'undefined') &&
-    window.CanvasRenderingContext2D &&
-    CanvasRenderingContext2D.prototype;
-if (CP && CP.lineTo){
-    CP.dashedLine = function(x,y,x2,y2,dashArray){
-        if (!dashArray) dashArray=[10,5];
-        if (dashLength==0) dashLength = 0.001; // Hack for Safari
-        var dashCount = dashArray.length;
-        this.moveTo(x, y);
-        var dx = (x2-x), dy = (y2-y);
-        var slope = dy/dx;
-        var distRemaining = Math.sqrt( dx*dx + dy*dy );
-        var dashIndex=0, draw=true;
-        while (distRemaining>=0.1){
-            var dashLength = dashArray[dashIndex++%dashCount];
-            if (dashLength > distRemaining) dashLength = distRemaining;
-            var xStep = Math.sqrt( dashLength*dashLength / (1 + slope*slope) );
-            if (dx<0) xStep = -xStep;
-            x += xStep
-            y += slope*xStep;
-            this[draw ? 'lineTo' : 'moveTo'](x,y);
-            distRemaining -= dashLength;
-            draw = !draw;
-        }
-    }
-}
+Graph.prototype._unselectNodes = function(selection, triggerSelect) {
+    var changed = false;
+    var i, iMax, row;
 
-/**
- * Redraw a edge as a dashed line
- * Draw this edge in the given canvas
- * @author David Jordan
- * @date 2012-08-08
- * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
- * @param {CanvasRenderingContext2D}   ctx
- */
-Graph.Edge.prototype._drawDashLine = function(ctx) {
-    // set style
-    ctx.strokeStyle = this.color;
-    ctx.lineWidth = this._getLineWidth();
+    if (selection) {
+        // remove provided selections
+        for (i = 0, iMax = selection.length; i < iMax; i++) {
+            row = selection[i].row;
+            this.nodes[row].unselect();
 
-    // draw dashed line
-    ctx.beginPath();
-    ctx.lineCap = 'round';
-    if (this.altdashlength != undefined) //If an alt dash value has been set add to the array this value
-    {
-        ctx.dashedLine(this.from.x,this.from.y,this.to.x,this.to.y,[this.dashlength,this.dashgap,this.altdashlength,this.dashgap]);
-    }
-    else if (this.dashlength != undefined && this.dashgap != undefined) //If a dash and gap value has been set add to the array this value
-    {
-        ctx.dashedLine(this.from.x,this.from.y,this.to.x,this.to.y,[this.dashlength,this.dashgap]);
-    }
-    else //If all else fails draw a line
-    {
-        ctx.moveTo(this.from.x, this.from.y);
-        ctx.lineTo(this.to.x, this.to.y);
+            var j = 0;
+            while (j < this.selection.length) {
+                if (this.selection[j].row == row) {
+                    this.selection.splice(j, 1);
+                    changed = true;
+                }
+                else {
+                    j++;
+                }
+            }
+        }
     }
-    ctx.stroke();
-
-    // draw text
-    if (this.text) {
-        var point = this._pointOnLine(0.5);
-        this._text(ctx, this.text, point.x, point.y);
+    else if (this.selection && this.selection.length) {
+        // remove all selections
+        for (i = 0, iMax = this.selection.length; i < iMax; i++) {
+            row = this.selection[i].row;
+            this.nodes[row].unselect();
+            changed = true;
+        }
+        this.selection = [];
     }
-};
 
-/**
- * Get a point on a line
- * @param {Number} percentage. Value between 0 (line start) and 1 (line end)
- * @return {Object} point
- * @private
- */
-Graph.Edge.prototype._pointOnLine = function (percentage) {
-    return {
-        x: (1 - percentage) * this.from.x + percentage * this.to.x,
-        y: (1 - percentage) * this.from.y + percentage * this.to.y
+    if (changed && (triggerSelect == true || triggerSelect == undefined)) {
+        // fire the select event
+        this.trigger('select');
     }
-};
 
-/**
- * Get a point on a circle
- * @param {Number} x
- * @param {Number} y
- * @param {Number} radius
- * @param {Number} percentage. Value between 0 (line start) and 1 (line end)
- * @return {Object} point
- * @private
- */
-Graph.Edge.prototype._pointOnCircle = function (x, y, radius, percentage) {
-    var angle = (percentage - 3/8) * 2 * Math.PI;
-    return {
-        x: x + radius * Math.cos(angle),
-        y: y - radius * Math.sin(angle)
-    }
+    return changed;
 };
 
 /**
- * Redraw a edge as a line with an arrow
- * Draw this edge in the given canvas
- * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
- * @param {CanvasRenderingContext2D}   ctx
+ * select all nodes on given location x, y
+ * @param {Array} selection   an array with selection objects. Each selection
+ *                            object has a parameter row
+ * @param {boolean} append    If true, the new selection will be appended to the
+ *                            current selection (except for duplicate entries)
+ * @return {Boolean} changed  True if the selection is changed
  */
-Graph.Edge.prototype._drawArrow = function(ctx) {
-    var point;
-    // set style
-    ctx.strokeStyle = this.color;
-    ctx.fillStyle = this.color;
-    ctx.lineWidth = this._getLineWidth();
+Graph.prototype._selectNodes = function(selection, append) {
+    var changed = false;
+    var i, iMax;
 
-    if (this.from != this.to) {
-        // draw line
-        this._line(ctx);
+    // TODO: the selectNodes method is a little messy, rework this
 
-        // draw all arrows
-        var angle = Math.atan2((this.to.y - this.from.y), (this.to.x - this.from.x));
-        var length = 10 + 5 * this.width; // TODO: make customizable?
-        for (var a in this.arrows) {
-            if (this.arrows.hasOwnProperty(a)) {
-                point = this._pointOnLine(this.arrows[a]);
-                ctx.arrow(point.x, point.y, angle, length);
-                ctx.fill();
-                ctx.stroke();
+    // check if the current selection equals the desired selection
+    var selectionAlreadyDone = true;
+    if (selection.length != this.selection.length) {
+        selectionAlreadyDone = false;
+    }
+    else {
+        for (i = 0, iMax = Math.min(selection.length, this.selection.length); i < iMax; i++) {
+            if (selection[i].row != this.selection[i].row) {
+                selectionAlreadyDone = false;
+                break;
             }
         }
+    }
+    if (selectionAlreadyDone) {
+        return changed;
+    }
 
-        // draw text
-        if (this.text) {
-            point = this._pointOnLine(0.5);
-            this._text(ctx, this.text, point.x, point.y);
-        }
+    if (append == undefined || append == false) {
+        // first deselect any selected node
+        var triggerSelect = false;
+        changed = this._unselectNodes(undefined, triggerSelect);
     }
-    else {
-        // draw circle
-        var radius = this.length / 2 / Math.PI;
-        var x, y;
-        var node = this.from;
-        if (!node.width) {
-            node.resize(ctx);
-        }
-        if (node.width > node.height) {
-            x = node.x + node.width / 2;
-            y = node.y - radius;
-        }
-        else {
-            x = node.x + radius;
-            y = node.y - node.height / 2;
-        }
-        this._circle(ctx, x, y, radius);
 
-        // draw all arrows
-        var angle = 0.2 * Math.PI;
-        var length = 10 + 5 * this.width; // TODO: make customizable?
-        for (var a in this.arrows) {
-            if (this.arrows.hasOwnProperty(a)) {
-                point = this._pointOnCircle(x, y, radius, this.arrows[a]);
-                ctx.arrow(point.x, point.y, angle, length);
-                ctx.fill();
-                ctx.stroke();
+    for (i = 0, iMax = selection.length; i < iMax; i++) {
+        // add each of the new selections, but only when they are not duplicate
+        var row = selection[i].row;
+        var isDuplicate = false;
+        for (var j = 0, jMax = this.selection.length; j < jMax; j++) {
+            if (this.selection[j].row == row) {
+                isDuplicate = true;
+                break;
             }
         }
 
-        // draw text
-        if (this.text) {
-            point = this._pointOnCircle(x, y, radius, 0.5);
-            this._text(ctx, this.text, point.x, point.y);
+        if (!isDuplicate) {
+            this.nodes[row].select();
+            this.selection.push(selection[i]);
+            changed = true;
         }
     }
-};
 
+    if (changed) {
+        // fire the select event
+        this.trigger('select');
+    }
 
+    return changed;
+};
 
 /**
- * Redraw a edge as a line with an arrow
- * Draw this edge in the given canvas
- * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
- * @param {CanvasRenderingContext2D}   ctx
+ * retrieve all nodes overlapping with given object
+ * @param {Object} obj  An object with parameters left, top, right, bottom
+ * @return {Object[]}   An array with selection objects containing
+ *                      the parameter row.
  */
-Graph.Edge.prototype._drawArrowEnd = function(ctx) {
-    // set style
-    ctx.strokeStyle = this.color;
-    ctx.fillStyle = this.color;
-    ctx.lineWidth = this._getLineWidth();
+Graph.prototype._getNodesOverlappingWith = function (obj) {
+    var overlappingNodes = [];
 
-    // draw line
-    var angle, length;
-    if (this.from != this.to) {
-        // calculate length and angle of the line
-        angle = Math.atan2((this.to.y - this.from.y), (this.to.x - this.from.x));
-        var dx = (this.to.x - this.from.x);
-        var dy = (this.to.y - this.from.y);
-        var lEdge = Math.sqrt(dx * dx + dy * dy);
+    for (var i = 0; i < this.nodes.length; i++) {
+        if (this.nodes[i].isOverlappingWith(obj)) {
+            var sel = {"row": i};
+            overlappingNodes.push(sel);
+        }
+    }
 
-        var lFrom = this.to.distanceToBorder(ctx, angle + Math.PI);
-        var pFrom = (lEdge - lFrom) / lEdge;
-        var xFrom = (pFrom) * this.from.x + (1 - pFrom) * this.to.x;
-        var yFrom = (pFrom) * this.from.y + (1 - pFrom) * this.to.y;
+    return overlappingNodes;
+};
 
-        var lTo = this.to.distanceToBorder(ctx, angle);
-        var pTo = (lEdge - lTo) / lEdge;
-        var xTo = (1 - pTo) * this.from.x + pTo * this.to.x;
-        var yTo = (1 - pTo) * this.from.y + pTo * this.to.y;
+/**
+ * retrieve the currently selected nodes
+ * @return {Object[]} an array with zero or more objects. Each object
+ *                              contains the parameter row
+ */
+Graph.prototype.getSelection = function() {
+    var selection = [];
 
-        ctx.beginPath();
-        ctx.moveTo(xFrom, yFrom);
-        ctx.lineTo(xTo, yTo);
-        ctx.stroke();
+    for (var i = 0; i < this.selection.length; i++) {
+        var row = this.selection[i].row;
+        selection.push({"row": row});
+    }
 
-        // draw arrow at the end of the line
-        length = 10 + 5 * this.width; // TODO: make customizable?
-        ctx.arrow(xTo, yTo, angle, length);
-        ctx.fill();
-        ctx.stroke();
+    return selection;
+};
 
-        // draw text
-        if (this.text) {
-            var point = this._pointOnLine(0.5);
-            this._text(ctx, this.text, point.x, point.y);
-        }
-    }
-    else {
-        // draw circle
-        var radius = this.length / 2 / Math.PI;
-        var x, y, arrow;
-        var node = this.from;
-        if (!node.width) {
-            node.resize(ctx);
-        }
-        if (node.width > node.height) {
-            x = node.x + node.width / 2;
-            y = node.y - radius;
-            arrow = {
-                x: x,
-                y: node.y,
-                angle: 0.9 * Math.PI
-            };
-        }
-        else {
-            x = node.x + radius;
-            y = node.y - node.height / 2;
-            arrow = {
-                x: node.x,
-                y: y,
-                angle: 0.6 * Math.PI
-            };
-        }
-        ctx.beginPath();
-        // TODO: do not draw a circle, but an arc
-        // TODO: similarly, for a line without arrows, draw to the border of the nodes instead of the center
-        ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
-        ctx.stroke();
+/**
+ * select zero or more nodes
+ * @param {object[]} selection  an array with zero or more objects. Each object
+ *                              contains the parameter row
+ */
+Graph.prototype.setSelection = function(selection) {
+    var i, iMax, row;
 
-        // draw all arrows
-        length = 10 + 5 * this.width; // TODO: make customizable?
-        ctx.arrow(arrow.x, arrow.y, arrow.angle, length);
-        ctx.fill();
-        ctx.stroke();
+    if (selection.length == undefined)
+        throw "Selection must be an array with objects";
 
-        // draw text
-        if (this.text) {
-            point = this._pointOnCircle(x, y, radius, 0.5);
-            this._text(ctx, this.text, point.x, point.y);
-        }
+    // first unselect any selected node
+    for (i = 0, iMax = this.selection.length; i < iMax; i++) {
+        row = this.selection[i].row;
+        this.nodes[row].unselect();
     }
 
-};
-
-/**--------------------------------------------------------------------------**/
+    this.selection = [];
 
+    for (i = 0, iMax = selection.length; i < iMax; i++) {
+        row = selection[i].row;
 
-/**
- * @class Images
- * This class loades images and keeps them stored.
- */
-Graph.Images = function () {
-    this.images = {};
+        if (row == undefined)
+            throw "Parameter row missing in selection object";
+        if (row > this.nodes.length-1)
+            throw "Parameter row out of range";
 
-    this.callback = undefined;
-};
+        var sel = {"row": row};
+        this.selection.push(sel);
+        this.nodes[row].select();
+    }
 
-/**
- * Set an onload callback function. This will be called each time an image
- * is loaded
- * @param {function} callback
- */
-Graph.Images.prototype.setOnloadCallback = function(callback) {
-    this.callback = callback;
+    this.redraw();
 };
 
 
 /**
- *
- * @param {string} url          Url of the image
- * @return {Image} img          The image object
+ * Temporary method to test calculating a hub value for the nodes
+ * @param {number} level        Maximum number edges between two nodes in order
+ *                              to call them connected. Optional, 1 by default
+ * @return {Number[]} connectioncount array with the connection count
+ *                                    for each node
  */
-Graph.Images.prototype.load = function(url) {
-    var img = this.images[url];
-    if (img == undefined) {
-        // create the image
-        var images = this;
-        img = new Image();
-        this.images[url] = img;
-        img.onload = function() {
-            if (images.callback) {
-                images.callback(this);
-            }
-        };
-        img.src = url;
+Graph.prototype._getConnectionCount = function(level) {
+    var conn = this.edges;
+    if (level == undefined) {
+        level = 1;
     }
 
-    return img;
-};
-
+    // get the nodes connected to given nodes
+    function getConnectedNodes(nodes) {
+        var connectedNodes = [];
 
-/**--------------------------------------------------------------------------**/
+        for (var j = 0, jMax = nodes.length; j < jMax; j++) {
+            var node = nodes[j];
 
+            // find all nodes connected to this node
+            for (var i = 0, iMax = conn.length; i < iMax; i++) {
+                var other = null;
 
-/**
- * @class Groups
- * This class can store groups and properties specific for groups.
- */
-Graph.Groups = function () {
-    this.clear();
-    this.defaultIndex = 0;
-};
+                // check if connected
+                if (conn[i].from == node)
+                    other = conn[i].to;
+                else if (conn[i].to == node)
+                    other = conn[i].from;
 
+                // check if the other node is not already in the list with nodes
+                var k, kMax;
+                if (other) {
+                    for (k = 0, kMax = nodes.length; k < kMax; k++) {
+                        if (nodes[k] == other) {
+                            other = null;
+                            break;
+                        }
+                    }
+                }
+                if (other) {
+                    for (k = 0, kMax = connectedNodes.length; k < kMax; k++) {
+                        if (connectedNodes[k] == other) {
+                            other = null;
+                            break;
+                        }
+                    }
+                }
 
-/**
- * default constants for group colors
- */
-Graph.Groups.DEFAULT = [
-    {"borderColor": "#2B7CE9", "backgroundColor": "#97C2FC", "highlightColor": "#D2E5FF"}, // blue
-    {"borderColor": "#FFA500", "backgroundColor": "#FFFF00", "highlightColor": "#FFFFA3"}, // yellow
-    {"borderColor": "#FA0A10", "backgroundColor": "#FB7E81", "highlightColor": "#FFAFB1"}, // red
-    {"borderColor": "#41A906", "backgroundColor": "#7BE141", "highlightColor": "#A1EC76"}, // green
-    {"borderColor": "#E129F0", "backgroundColor": "#EB7DF4", "highlightColor": "#F0B3F5"}, // magenta
-    {"borderColor": "#7C29F0", "backgroundColor": "#AD85E4", "highlightColor": "#D3BDF0"}, // purple
-    {"borderColor": "#C37F00", "backgroundColor": "#FFA807", "highlightColor": "#FFCA66"}, // orange
-    {"borderColor": "#4220FB", "backgroundColor": "#6E6EFD", "highlightColor": "#9B9BFD"}, // darkblue
-    {"borderColor": "#FD5A77", "backgroundColor": "#FFC0CB", "highlightColor": "#FFD1D9"}, // pink
-    {"borderColor": "#4AD63A", "backgroundColor": "#C2FABC", "highlightColor": "#E6FFE3"}  // mint
-];
+                if (other)
+                    connectedNodes.push(other);
+            }
+        }
 
+        return connectedNodes;
+    }
 
-/**
- * Clear all groups
- */
-Graph.Groups.prototype.clear = function () {
-    this.groups = {};
-    this.groups.length = function()
-    {
-        var i = 0;
-        for ( var p in this ) {
-            if (this.hasOwnProperty(p)) {
-                i++;
-            }
+    var connections = [];
+    var level0 = [];
+    var nodes = this.nodes;
+    var i, iMax;
+    for (i = 0, iMax = nodes.length; i < iMax; i++) {
+        var c = [nodes[i]];
+        for (var l = 0; l < level; l++) {
+            c = c.concat(getConnectedNodes(c));
         }
-        return i;
+        connections.push(c);
     }
+
+    var hubs = [];
+    for (i = 0, len = connections.length; i < len; i++) {
+        hubs.push(connections[i].length);
+    }
+
+    return hubs;
 };
 
 
 /**
- * get group properties of a groupname. If groupname is not found, a new group
- * is added.
- * @param {*} groupname        Can be a number, string, Date, etc.
- * @return {Object} group      The created group, containing all group properties
+ * Set a new size for the graph
+ * @param {string} width   Width in pixels or percentage (for example "800px"
+ *                         or "50%")
+ * @param {string} height  Height in pixels or percentage  (for example "400px"
+ *                         or "30%")
  */
-Graph.Groups.prototype.get = function (groupname) {
-    var group = this.groups[groupname];
+Graph.prototype._setSize = function(width, height) {
+    this.frame.style.width = width;
+    this.frame.style.height = height;
 
-    if (group == undefined) {
-        // create new group
-        var index = this.defaultIndex % Graph.Groups.DEFAULT.length;
-        this.defaultIndex++;
-        group = {};
-        group.borderColor     = Graph.Groups.DEFAULT[index].borderColor;
-        group.backgroundColor = Graph.Groups.DEFAULT[index].backgroundColor;
-        group.highlightColor  = Graph.Groups.DEFAULT[index].highlightColor;
-        this.groups[groupname] = group;
-    }
+    this.frame.canvas.style.width = "100%";
+    this.frame.canvas.style.height = "100%";
 
-    return group;
+    this.frame.canvas.width = this.frame.canvas.clientWidth;
+    this.frame.canvas.height = this.frame.canvas.clientHeight;
 };
 
 /**
- * Add a custom group style
- * @param {String} groupname
- * @param {Object} style       An object containing borderColor,
- *                             backgroundColor, etc.
- * @return {Object} group      The created group object
+ * Load all nodes by reading the data table nodesTable
+ * @param {Array} nodes    The data containing the nodes.
  */
-Graph.Groups.prototype.add = function (groupname, style) {
-    this.groups[groupname] = style;
-    return style;
+Graph.prototype.setNodes = function(nodes) {
+    this.selection = [];
+    this.nodes = [];
+    this.moving = false;
+    if (!nodes) {
+        return;
+    }
+    this.nodesTable = nodes;
+
+    var hasValues = false;
+    var rowCount = nodes.length;
+    for (var i = 0; i < rowCount; i++) {
+        var properties = nodes[i];
+
+        if (properties.value != undefined) {
+            hasValues = true;
+        }
+        if (properties.id == undefined) {
+            throw "Column 'id' missing in table with nodes (row " + i + ")";
+        }
+        this._createNode(properties);
+    }
+
+    // calculate scaling function when value is provided
+    if (hasValues) {
+        this._updateValueRange(this.nodes);
+    }
 };
 
 /**
- * Check if given object is a Javascript Array
- * @param {*} obj
- * @return {Boolean} isArray    true if the given object is an array
+ * Create a node with the given properties
+ * If the new node has an id identical to an existing node, the existing
+ * node will be overwritten.
+ * The properties can contain a property "action", which can have values
+ * "create", "update", or "delete"
+ * @param {Object} properties  An object with properties
  */
-// See http://stackoverflow.com/questions/2943805/javascript-instanceof-typeof-in-gwt-jsni
-Graph.isArray = function (obj) {
-    if (obj instanceof Array) {
-        return true;
-    }
-    return (Object.prototype.toString.call(obj) === '[object Array]');
-};
+Graph.prototype._createNode = function(properties) {
+    var action = properties.action ? properties.action : "update";
+    var id, index, newNode, oldNode;
 
+    if (action === "create") {
+        // create the node
+        newNode = new Node(properties, this.images, this.groups, this.constants);
+        id = properties.id;
+        index = (id !== undefined) ? this._findNode(id) : undefined;
 
+        if (index !== undefined) {
+            // replace node
+            oldNode = this.nodes[index];
+            this.nodes[index] = newNode;
 
-/**--------------------------------------------------------------------------**/
+            // remove selection of old node
+            if (oldNode.selected) {
+                this._unselectNodes([{'row': index}], false);
+            }
 
+            /* TODO: implement this? -> will give performance issues, searching all edges and nodes...
+             // update edges linking to this node
+             var edgesTable = this.edges;
+             for (var i = 0, iMax = edgesTable.length; i < iMax; i++) {
+             var edge = edgesTable[i];
+             if (edge.from == oldNode) {
+             edge.from = newNode;
+             }
+             if (edge.to == oldNode) {
+             edge.to = newNode;
+             }
+             }
+             */
+        }
+        else {
+            // add new node
+            this.nodes.push(newNode);
+        }
 
-/**
- * Popup is a class to create a popup window with some text
- * @param {Element}  container     The container object.
- * @param {Number} x
- * @param {Number} y
- * @param {String} text
- */
-Graph.Popup = function (container, x, y, text) {
-    if (container) {
-        this.container = container;
+        if (!newNode.isFixed()) {
+            // note: no not use node.isMoving() here, as that gives the current
+            // velocity of the node, which is zero after creation of the node.
+            this.moving = true;
+        }
     }
-    else {
-        this.container = document.body;
+    else if (action === "update") {
+        // update existing node, or create it when not yet existing
+        id = properties.id;
+        if (id === undefined) {
+            throw "Cannot update a node without id";
+        }
+
+        index = this._findNode(id);
+        if (index !== undefined) {
+            // update node
+            this.nodes[index].setProperties(properties, this.constants);
+        }
+        else {
+            // create node
+            newNode = new Node(properties, this.images, this.groups, this.constants);
+            this.nodes.push(newNode);
+
+            if (!newNode.isFixed()) {
+                // note: no not use node.isMoving() here, as that gives the current
+                // velocity of the node, which is zero after creation of the node.
+                this.moving = true;
+            }
+        }
     }
-    this.x = 0;
-    this.y = 0;
-    this.padding = 5;
+    else if (action === "delete") {
+        // delete existing node
+        id = properties.id;
+        if (id === undefined) {
+            throw "Cannot delete node without its id";
+        }
 
-    if (x !== undefined && y !== undefined ) {
-        this.setPosition(x, y);
+        index = this._findNode(id);
+        if (index !== undefined) {
+            oldNode = this.nodes[index];
+            // remove selection of old node
+            if (oldNode.selected) {
+                this._unselectNodes([{'row': index}], false);
+            }
+            this.nodes.splice(index, 1);
+        }
+        else {
+            throw "Node with id " + id + " not found";
+        }
     }
-    if (text !== undefined) {
-        this.setText(text);
+    else {
+        throw "Unknown action " + action + ". Choose 'create', 'update', or 'delete'.";
     }
-
-    // create the frame
-    this.frame = document.createElement("div");
-    var style = this.frame.style;
-    style.position = "absolute";
-    style.visibility = "hidden";
-    style.border = "1px solid #666";
-    style.color = "black";
-    style.padding = this.padding + "px";
-    style.backgroundColor = "#FFFFC6";
-    style.borderRadius = "3px";
-    style.MozBorderRadius = "3px";
-    style.WebkitBorderRadius = "3px";
-    style.boxShadow = "3px 3px 10px rgba(128, 128, 128, 0.5)";
-    style.whiteSpace = "nowrap";
-    this.container.appendChild(this.frame);
 };
 
 /**
- * @param {number} x   Horizontal position of the popup window
- * @param {number} y   Vertical position of the popup window
+ * Find a node by its id
+ * @param {Number} id       Id of the node
+ * @return {Number} index   Index of the node in the array this.nodes, or
+ *                          undefined when not found. *
  */
-Graph.Popup.prototype.setPosition = function(x, y) {
-    this.x = parseInt(x);
-    this.y = parseInt(y);
+Graph.prototype._findNode = function (id) {
+    var nodes = this.nodes;
+    for (var n = 0, len = nodes.length; n < len; n++) {
+        if (nodes[n].id === id) {
+            return n;
+        }
+    }
+
+    return undefined;
 };
 
 /**
- * Set the text for the popup window. This can be HTML code
- * @param {string} text
+ * Find a node by its rowNumber
+ * @param {Number} row                   Row number of the node
+ * @return {Node} node     The node with the given row number, or
+ *                                       undefined when not found.
  */
-Graph.Popup.prototype.setText = function(text) {
-    this.frame.innerHTML = text;
+Graph.prototype._findNodeByRow = function (row) {
+    return this.nodes[row];
 };
 
 /**
- * Show the popup window
- * @param {boolean} show    Optional. Show or hide the window
+ * Load edges by reading the data table
+ * @param {Array}      edges    The data containing the edges.
  */
-Graph.Popup.prototype.show = function (show) {
-    if (show === undefined) {
-        show = true;
+Graph.prototype.setEdges = function(edges) {
+    this.edges = [];
+    if (!edges) {
+        return;
     }
+    this.edgesTable = edges;
 
-    if (show) {
-        var height = this.frame.clientHeight;
-        var width =  this.frame.clientWidth;
-        var maxHeight = this.frame.parentNode.clientHeight;
-        var maxWidth = this.frame.parentNode.clientWidth;
+    var hasValues = false;
+    var rowCount = edges.length;
+    for (var i = 0; i < rowCount; i++) {
+        var properties = edges[i];
 
-        var top = (this.y - height);
-        if (top + height + this.padding > maxHeight) {
-            top = maxHeight - height - this.padding;
-        }
-        if (top < this.padding) {
-            top = this.padding;
+        if (properties.from === undefined) {
+            throw "Column 'from' missing in table with edges (row " + i + ")";
         }
-
-        var left = this.x;
-        if (left + width + this.padding > maxWidth) {
-            left = maxWidth - width - this.padding;
+        if (properties.to === undefined) {
+            throw "Column 'to' missing in table with edges (row " + i + ")";
         }
-        if (left < this.padding) {
-            left = this.padding;
+        if (properties.value != undefined) {
+            hasValues = true;
         }
 
-        this.frame.style.left = left + "px";
-        this.frame.style.top = top + "px";
-        this.frame.style.visibility = "visible";
+        this._createEdge(properties);
     }
-    else {
-        this.hide();
+
+    // calculate scaling function when value is provided
+    if (hasValues) {
+        this._updateValueRange(this.edges);
     }
 };
 
 /**
- * Hide the popup window
+ * Create a edge with the given properties
+ * If the new edge has an id identical to an existing edge, the existing
+ * edge will be overwritten or updated.
+ * The properties can contain a property "action", which can have values
+ * "create", "update", or "delete"
+ * @param {Object} properties   An object with properties
  */
-Graph.Popup.prototype.hide = function () {
-    this.frame.style.visibility = "hidden";
-};
-
-
-/**--------------------------------------------------------------------------**/
-
-if (typeof CanvasRenderingContext2D !== 'undefined') {
-    /**
-     * Draw a circle shape
-     */
-    CanvasRenderingContext2D.prototype.circle = function(x, y, r) {
-        this.beginPath();
-        this.arc(x, y, r, 0, 2*Math.PI, false);
-    };
-
-    /**
-     * Draw a square shape
-     * @param {Number} x horizontal center
-     * @param {Number} y vertical center
-     * @param {Number} r   size, width and height of the square
-     */
-    CanvasRenderingContext2D.prototype.square = function(x, y, r) {
-        this.beginPath();
-        this.rect(x - r, y - r, r * 2, r * 2);
-    };
-
-    /**
-     * Draw a triangle shape
-     * @param {Number} x horizontal center
-     * @param {Number} y vertical center
-     * @param {Number} r   radius, half the length of the sides of the triangle
-     */
-    CanvasRenderingContext2D.prototype.triangle = function(x, y, r) {
-        // http://en.wikipedia.org/wiki/Equilateral_triangle
-        this.beginPath();
-
-        var s = r * 2;
-        var s2 = s / 2;
-        var ir = Math.sqrt(3) / 6 * s;      // radius of inner circle
-        var h = Math.sqrt(s * s - s2 * s2); // height
-
-        this.moveTo(x, y - (h - ir));
-        this.lineTo(x + s2, y + ir);
-        this.lineTo(x - s2, y + ir);
-        this.lineTo(x, y - (h - ir));
-        this.closePath();
-    };
-
-    /**
-     * Draw a triangle shape in downward orientation
-     * @param {Number} x horizontal center
-     * @param {Number} y vertical center
-     * @param {Number} r radius
-     */
-    CanvasRenderingContext2D.prototype.triangleDown = function(x, y, r) {
-        // http://en.wikipedia.org/wiki/Equilateral_triangle
-        this.beginPath();
-
-        var s = r * 2;
-        var s2 = s / 2;
-        var ir = Math.sqrt(3) / 6 * s;      // radius of inner circle
-        var h = Math.sqrt(s * s - s2 * s2); // height
-
-        this.moveTo(x, y + (h - ir));
-        this.lineTo(x + s2, y - ir);
-        this.lineTo(x - s2, y - ir);
-        this.lineTo(x, y + (h - ir));
-        this.closePath();
-    };
+Graph.prototype._createEdge = function(properties) {
+    var action = properties.action ? properties.action : "create";
+    var id, index, edge, oldEdge, newEdge;
 
-    /**
-     * Draw a star shape, a star with 5 points
-     * @param {Number} x horizontal center
-     * @param {Number} y vertical center
-     * @param {Number} r   radius, half the length of the sides of the triangle
-     */
-    CanvasRenderingContext2D.prototype.star = function(x, y, r) {
-        // http://www.html5canvastutorials.com/labs/html5-canvas-star-spinner/
-        this.beginPath();
+    if (action === "create") {
+        // create the edge, or replace it if already existing
+        id = properties.id;
+        index = (id !== undefined) ? this._findEdge(id) : undefined;
+        edge = new Edge(properties, this, this.constants);
 
-        for (var n = 0; n < 10; n++) {
-            var radius = (n % 2 === 0) ? r * 1.3 : r * 0.5;
-            this.lineTo(
-                x + radius * Math.sin(n * 2 * Math.PI / 10),
-                y - radius * Math.cos(n * 2 * Math.PI / 10)
-            );
+        if (index !== undefined) {
+            // replace existing edge
+            oldEdge = this.edges[index];
+            oldEdge.from.detachEdge(oldEdge);
+            oldEdge.to.detachEdge(oldEdge);
+            this.edges[index] = edge;
+        }
+        else {
+            // add new edge
+            this.edges.push(edge);
+        }
+        edge.from.attachEdge(edge);
+        edge.to.attachEdge(edge);
+    }
+    else if (action === "update") {
+        // update existing edge, or create the edge if not existing
+        id = properties.id;
+        if (id === undefined) {
+            throw "Cannot update a edge without id";
         }
 
-        this.closePath();
-    };
-
-    /**
-     * http://stackoverflow.com/questions/1255512/how-to-draw-a-rounded-rectangle-on-html-canvas
-     */
-    CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) {
-        var r2d = Math.PI/180;
-        if( w - ( 2 * r ) < 0 ) { r = ( w / 2 ); } //ensure that the radius isn't too large for x
-        if( h - ( 2 * r ) < 0 ) { r = ( h / 2 ); } //ensure that the radius isn't too large for y
-        this.beginPath();
-        this.moveTo(x+r,y);
-        this.lineTo(x+w-r,y);
-        this.arc(x+w-r,y+r,r,r2d*270,r2d*360,false);
-        this.lineTo(x+w,y+h-r);
-        this.arc(x+w-r,y+h-r,r,0,r2d*90,false);
-        this.lineTo(x+r,y+h);
-        this.arc(x+r,y+h-r,r,r2d*90,r2d*180,false);
-        this.lineTo(x,y+r);
-        this.arc(x+r,y+r,r,r2d*180,r2d*270,false);
-    };
-
-    /**
-     * http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
-     */
-    CanvasRenderingContext2D.prototype.ellipse = function(x, y, w, h) {
-        var kappa = .5522848,
-            ox = (w / 2) * kappa, // control point offset horizontal
-            oy = (h / 2) * kappa, // control point offset vertical
-            xe = x + w,           // x-end
-            ye = y + h,           // y-end
-            xm = x + w / 2,       // x-middle
-            ym = y + h / 2;       // y-middle
-
-        this.beginPath();
-        this.moveTo(x, ym);
-        this.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
-        this.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
-        this.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
-        this.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
-    };
-
-
-
-    /**
-     * http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
-     */
-    CanvasRenderingContext2D.prototype.database = function(x, y, w, h) {
-        var f = 1/3;
-        var wEllipse = w;
-        var hEllipse = h * f;
-
-        var kappa = .5522848,
-            ox = (wEllipse / 2) * kappa, // control point offset horizontal
-            oy = (hEllipse / 2) * kappa, // control point offset vertical
-            xe = x + wEllipse,           // x-end
-            ye = y + hEllipse,           // y-end
-            xm = x + wEllipse / 2,       // x-middle
-            ym = y + hEllipse / 2,       // y-middle
-            ymb = y + (h - hEllipse/2),  // y-midlle, bottom ellipse
-            yeb = y + h;                 // y-end, bottom ellipse
-
-        this.beginPath();
-        this.moveTo(xe, ym);
+        index = this._findEdge(id);
+        if (index !== undefined) {
+            // update edge
+            edge = this.edges[index];
+            edge.from.detachEdge(edge);
+            edge.to.detachEdge(edge);
 
-        this.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
-        this.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
+            edge.setProperties(properties, this.constants);
+            edge.from.attachEdge(edge);
+            edge.to.attachEdge(edge);
+        }
+        else {
+            // add new edge
+            edge = new Edge(properties, this, this.constants);
+            edge.from.attachEdge(edge);
+            edge.to.attachEdge(edge);
+            this.edges.push(edge);
+        }
+    }
+    else if (action === "delete") {
+        // delete existing edge
+        id = properties.id;
+        if (id === undefined) {
+            throw "Cannot delete edge without its id";
+        }
 
-        this.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
-        this.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
+        index = this._findEdge(id);
+        if (index !== undefined) {
+            oldEdge = this.edges[id];
+            edge.from.detachEdge(oldEdge);
+            edge.to.detachEdge(oldEdge);
+            this.edges.splice(index, 1);
+        }
+        else {
+            throw "Edge with id " + id + " not found";
+        }
+    }
+    else {
+        throw "Unknown action " + action + ". Choose 'create', 'update', or 'delete'.";
+    }
+};
 
-        this.lineTo(xe, ymb);
+/**
+ * Update the references to oldNode in all edges.
+ * @param {Node} oldNode
+ * @param {Node} newNode
+ */
+// TODO: start utilizing this method _updateNodeReferences
+Graph.prototype._updateNodeReferences = function(oldNode, newNode) {
+    var edges = this.edges;
+    for (var i = 0, iMax = edges.length; i < iMax; i++) {
+        var edge = edges[i];
+        if (edge.from === oldNode) {
+            edge.from = newNode;
+        }
+        if (edge.to === oldNode) {
+            edge.to = newNode;
+        }
+    }
+};
 
-        this.bezierCurveTo(xe, ymb + oy, xm + ox, yeb, xm, yeb);
-        this.bezierCurveTo(xm - ox, yeb, x, ymb + oy, x, ymb);
+/**
+ * Find a edge by its id
+ * @param {Number} id       Id of the edge
+ * @return {Number} index   Index of the edge in the array this.edges, or
+ *                          undefined when not found. *
+ */
+Graph.prototype._findEdge = function (id) {
+    var edges = this.edges;
+    for (var n = 0, len = edges.length; n < len; n++) {
+        if (edges[n].id === id) {
+            return n;
+        }
+    }
 
-        this.lineTo(x, ym);
-    };
+    return undefined;
+};
 
+/**
+ * Find a edge by its row
+ * @param {Number} row          Row of the edge
+ * @return {Edge} the found edge, or undefined when not found
+ */
+Graph.prototype._findEdgeByRow = function (row) {
+    return this.edges[row];
+};
 
-    /**
-     * Draw an arrow point (no line)
-     */
-    CanvasRenderingContext2D.prototype.arrow = function(x, y, angle, length) {
-        // tail
-        var xt = x - length * Math.cos(angle);
-        var yt = y - length * Math.sin(angle);
+/**
+ * Update the values of all object in the given array according to the current
+ * value range of the objects in the array.
+ * @param {Array} array.  An array with objects like Edges or Nodes
+ *                        The objects must have a method getValue() and
+ *                        setValueRange(min, max).
+ */
+Graph.prototype._updateValueRange = function(array) {
+    var count = array.length;
+    var i;
 
-        // inner tail
-        // TODO: allow to customize different shapes
-        var xi = x - length * 0.9 * Math.cos(angle);
-        var yi = y - length * 0.9 * Math.sin(angle);
+    // determine the range of the node values
+    var valueMin = undefined;
+    var valueMax = undefined;
+    for (i = 0; i < count; i++) {
+        var value = array[i].getValue();
+        if (value !== undefined) {
+            valueMin = (valueMin === undefined) ? value : Math.min(value, valueMin);
+            valueMax = (valueMax === undefined) ? value : Math.max(value, valueMax);
+        }
+    }
 
-        // left
-        var xl = xt + length / 3 * Math.cos(angle + 0.5 * Math.PI);
-        var yl = yt + length / 3 * Math.sin(angle + 0.5 * Math.PI);
+    // adjust the range of all nodes
+    if (valueMin !== undefined && valueMax !== undefined) {
+        for (i = 0; i < count; i++) {
+            array[i].setValueRange(valueMin, valueMax);
+        }
+    }
+};
 
-        // right
-        var xr = xt + length / 3 * Math.cos(angle - 0.5 * Math.PI);
-        var yr = yt + length / 3 * Math.sin(angle - 0.5 * Math.PI);
+/**
+ * Redraw the graph with the current data
+ * chart will be resized too.
+ */
+Graph.prototype.redraw = function() {
+    this._setSize(this.width, this.height);
 
-        this.beginPath();
-        this.moveTo(x, y);
-        this.lineTo(xl, yl);
-        this.lineTo(xi, yi);
-        this.lineTo(xr, yr);
-        this.closePath();
-    };
+    this._redraw();
+};
 
+/**
+ * Redraw the graph with the current data
+ */
+Graph.prototype._redraw = function() {
+    var ctx = this.frame.canvas.getContext("2d");
 
-    // TODO: add diamond shape
-}
+    // clear the canvas
+    var w = this.frame.canvas.width;
+    var h = this.frame.canvas.height;
+    ctx.clearRect(0, 0, w, h);
 
+    // set scaling and translation
+    ctx.save();
+    ctx.translate(this.translation.x, this.translation.y);
+    ctx.scale(this.scale, this.scale);
 
-/*----------------------------------------------------------------------------*/
+    this._drawEdges(ctx);
+    this._drawNodes(ctx);
 
-// utility methods
-Graph.util = {};
+    // restore original scaling and translation
+    ctx.restore();
+};
 
 /**
- * Parse a text source containing data in DOT language into a JSON object.
- * The object contains two lists: one with nodes and one with edges.
- * @param {String} data     Text containing a graph in DOT-notation
- * @return {Object} json    An object containing two parameters:
- *                          {Object[]} nodes
- *                          {Object[]} edges
+ * Set the translation of the graph
+ * @param {Number} offsetX    Horizontal offset
+ * @param {Number} offsetY    Vertical offset
  */
-Graph.util.parseDOT = function (data) {
-    /**
-     * Test whether given character is a whitespace character
-     * @param {String} c
-     * @return {Boolean} isWhitespace
-     */
-    function isWhitespace(c) {
-        return c == ' ' || c == '\t' || c == '\n' || c == '\r';
-    }
-
-    /**
-     * Test whether given character is a delimeter
-     * @param {String} c
-     * @return {Boolean} isDelimeter
-     */
-    function isDelimeter(c) {
-        return '[]{}();,=->'.indexOf(c) != -1;
+Graph.prototype._setTranslation = function(offsetX, offsetY) {
+    if (this.translation === undefined) {
+        this.translation = {
+            "x": 0,
+            "y": 0
+        };
     }
 
-    var i = -1;  // current index in the data
-    var c = '';  // current character in the data
-
-    /**
-     * Read the next character from the data
-     */
-    function next() {
-        i++;
-        c = data[i];
+    if (offsetX !== undefined) {
+        this.translation.x = offsetX;
     }
-
-    /**
-     * Preview the next character in the data
-     * @returns {String} nextChar
-     */
-    function previewNext () {
-        return data[i + 1];
+    if (offsetY !== undefined) {
+        this.translation.y = offsetY;
     }
+};
 
-    /**
-     * Preview the next character in the data
-     * @returns {String} nextChar
-     */
-    function previewPrevious () {
-        return data[i + 1];
-    }
+/**
+ * Get the translation of the graph
+ * @return {Object} translation    An object with parameters x and y, both a number
+ */
+Graph.prototype._getTranslation = function() {
+    return {
+        "x": this.translation.x,
+        "y": this.translation.y
+    };
+};
 
-    /**
-     * Get a text description of the the current index in the data
-     * @return {String} desc
-     */
-    function pos() {
-        return '(char ' + i + ')';
-    }
+/**
+ * Scale the graph
+ * @param {Number} scale   Scaling factor 1.0 is unscaled
+ */
+Graph.prototype._setScale = function(scale) {
+    this.scale = scale;
+};
+/**
+ * Get the current scale of  the graph
+ * @return {Number} scale   Scaling factor 1.0 is unscaled
+ */
+Graph.prototype._getScale = function() {
+    return this.scale;
+};
 
-    /**
-     * Skip whitespace and comments
-     */
-    function parseWhitespace() {
-        // skip whitespace
-        while (c && isWhitespace(c)) {
-            next();
-        }
+Graph.prototype._xToCanvas = function(x) {
+    return (x - this.translation.x) / this.scale;
+};
 
-        // test for comment
-        var cNext = data[i + 1];
-        var cPrev = data[i - 1];
-        var c2 = c + cNext;
-        if (c2 == '/*') {
-            // block comment. skip until the block is closed
-            while (c && !(c == '*' && data[i + 1] == '/')) {
-                next();
-            }
-            next();
-            next();
+Graph.prototype._canvasToX = function(x) {
+    return x * this.scale + this.translation.x;
+};
 
-            parseWhitespace();
-        }
-        else if (c2 == '//' || (c == '#' && cPrev == '\n')) {
-            // line comment. skip until the next return
-            while (c && c != '\n') {
-                next();
-            }
-            next();
-            parseWhitespace();
-        }
-    }
+Graph.prototype._yToCanvas = function(y) {
+    return (y - this.translation.y) / this.scale;
+};
 
-    /**
-     * Parse a string
-     * The string may be enclosed by double quotes
-     * @return {String | undefined} value
-     */
-    function parseString() {
-        parseWhitespace();
+Graph.prototype._canvasToY = function(y) {
+    return y * this.scale + this.translation.y ;
+};
 
-        var name = '';
-        if (c == '"') {
-            next();
-            while (c && c != '"') {
-                name += c;
-                next();
-            }
-            next(); // skip the closing quote
-        }
-        else {
-            while (c && !isWhitespace(c) && !isDelimeter(c)) {
-                name += c;
-                next();
-            }
 
-            // cast string to number or boolean
-            var number = Number(name);
-            if (!isNaN(number)) {
-                name = number;
-            }
-            else if (name == 'true') {
-                name = true;
-            }
-            else if (name == 'false') {
-                name = false;
-            }
-            else if (name == 'null') {
-                name = null;
-            }
-        }
 
-        return name;
+/**
+ * Get a node by its id
+ * @param {number} id
+ * @return {Node}  node, or null if not found
+ */
+Graph.prototype._getNode = function(id) {
+    for (var i = 0; i < this.nodes.length; i++) {
+        if (this.nodes[i].id == id)
+            return this.nodes[i];
     }
 
-    /**
-     * Parse a value, can be a string, number, or boolean.
-     * The value may be enclosed by double quotes
-     * @return {String | Number | Boolean | undefined} value
-     */
-    function parseValue() {
-        parseWhitespace();
+    return null;
+};
 
-        if (c == '"') {
-            return parseString();
+/**
+ * Redraw all nodes
+ * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+ * @param {CanvasRenderingContext2D}   ctx
+ */
+Graph.prototype._drawNodes = function(ctx) {
+    // first draw the unselected nodes
+    var nodes = this.nodes;
+    var selected = [];
+    for (var i = 0, iMax = nodes.length; i < iMax; i++) {
+        if (nodes[i].isSelected()) {
+            selected.push(i);
         }
         else {
-            var value = parseString();
-            if (value != undefined) {
-                // cast string to number or boolean
-                var number = Number(value);
-                if (!isNaN(number)) {
-                    value = number;
-                }
-                else if (value == 'true') {
-                    value = true;
-                }
-                else if (value == 'false') {
-                    value = false;
-                }
-                else if (value == 'null') {
-                    value = null;
-                }
-            }
-            return value;
+            nodes[i].draw(ctx);
         }
     }
 
-    /**
-     * Parse a set with attributes,
-     * for example [label="1.000", style=solid]
-     * @return {Object | undefined} attr
-     */
-    function parseAttributes() {
-        parseWhitespace();
+    // draw the selected nodes on top
+    for (var s = 0, sMax = selected.length; s < sMax; s++) {
+        nodes[selected[s]].draw(ctx);
+    }
+};
 
-        if (c == '[') {
-            next();
-            var attr = {};
-            while (c && c != ']') {
-                parseWhitespace();
+/**
+ * Redraw all edges
+ * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+ * @param {CanvasRenderingContext2D}   ctx
+ */
+Graph.prototype._drawEdges = function(ctx) {
+    var edges = this.edges;
+    for (var i = 0, iMax = edges.length; i < iMax; i++) {
+        edges[i].draw(ctx);
+    }
+};
 
-                var name = parseString();
-                if (!name) {
-                    throw new SyntaxError('Attribute name expected ' + pos());
-                }
+/**
+ * Recalculate the best positions for all nodes
+ */
+Graph.prototype._reposition = function() {
+    // TODO: implement function reposition
 
-                parseWhitespace();
-                if (c != '=') {
-                    throw new SyntaxError('Equal sign = expected ' + pos());
-                }
-                next();
 
-                var value = parseValue();
-                if (!value) {
-                    throw new SyntaxError('Attribute value expected ' + pos());
-                }
-                attr[name] = value;
+    /*
+     var w = this.frame.canvas.clientWidth;
+     var h = this.frame.canvas.clientHeight;
+     for (var i = 0; i < this.nodes.length; i++) {
+     if (!this.nodes[i].xFixed) this.nodes[i].x = w * Math.random();
+     if (!this.nodes[i].yFixed) this.nodes[i].y = h * Math.random();
+     }
+     //*/
 
-                parseWhitespace();
+    //*
+    // TODO
+    var radius = this.constants.edges.length * 2;
+    var cx =  this.frame.canvas.clientWidth / 2;
+    var cy =  this.frame.canvas.clientHeight / 2;
+    for (var i = 0; i < this.nodes.length; i++) {
+        var angle = 2*Math.PI * (i / this.nodes.length);
 
-                if (c ==',') {
-                    next();
-                }
-            }
-            next();
+        if (!this.nodes[i].xFixed) this.nodes[i].x = cx + radius * Math.cos(angle);
+        if (!this.nodes[i].yFixed) this.nodes[i].y = cy + radius * Math.sin(angle);
 
-            return attr;
-        }
-        else {
-            return undefined;
-        }
     }
+    //*/
 
-    /**
-     * Parse a directed or undirected arrow '->' or '--'
-     * @return {String | undefined} arrow
-     */
-    function parseArrow() {
-        parseWhitespace();
+    /*
+     // TODO
+     var radius = this.constants.edges.length * 2;
+     var w = this.frame.canvas.clientWidth,
+     h = this.frame.canvas.clientHeight;
+     var cx =  this.frame.canvas.clientWidth / 2;
+     var cy =  this.frame.canvas.clientHeight / 2;
+     var s = Math.sqrt(this.nodes.length);
+     for (var i = 0; i < this.nodes.length; i++) {
+     //var angle = 2*Math.PI * (i / this.nodes.length);
 
-        if (c == '-') {
-            next();
-            if (c == '>' || c == '-') {
-                var arrow = '-' + c;
-                next();
-                return arrow;
-            }
-            else {
-                throw new SyntaxError('Arrow "->" or "--" expected ' + pos());
-            }
-        }
+     if (!this.nodes[i].xFixed) this.nodes[i].x = w/s * (i % s);
+     if (!this.nodes[i].yFixed) this.nodes[i].y = h/s * (i / s);
+     }
+     //*/
 
-        return undefined;
+
+    /*
+     var cx =  this.frame.canvas.clientWidth / 2;
+     var cy =  this.frame.canvas.clientHeight / 2;
+     for (var i = 0; i < this.nodes.length; i++) {
+     this.nodes[i].x = cx;
+     this.nodes[i].y = cy;
+     }
+
+     //*/
+
+};
+
+
+/**
+ * Find a stable position for all nodes
+ */
+Graph.prototype._doStabilize = function() {
+    var start = new Date();
+
+    // find stable position
+    var count = 0;
+    var vmin = this.constants.minVelocity;
+    var stable = false;
+    while (!stable && count < this.constants.maxIterations) {
+        this._calculateForces();
+        this._discreteStepNodes();
+        stable = !this._isMoving(vmin);
+        count++;
     }
 
-    /**
-     * Parse a line separator ';'
-     * @return {String | undefined} separator
-     */
-    function parseSeparator() {
-        parseWhitespace();
+    var end = new Date();
 
-        if (c == ';') {
-            next();
-            return ';';
-        }
+    //console.log("Stabilized in " + (end-start) + " ms, " + count + " iterations" ); // TODO: cleanup
+};
 
-        return undefined;
+/**
+ * Calculate the external forces acting on the nodes
+ * Forces are caused by: edges, repulsing forces between nodes, gravity
+ */
+Graph.prototype._calculateForces = function(nodeId) {
+    // create a local edge to the nodes and edges, that is faster
+    var nodes = this.nodes,
+        edges = this.edges;
+
+    // gravity, add a small constant force to pull the nodes towards the center of
+    // the graph
+    // Also, the forces are reset to zero in this loop by using _setForce instead
+    // of _addForce
+    var gravity = 0.01,
+        gx = this.frame.canvas.clientWidth / 2,
+        gy = this.frame.canvas.clientHeight / 2;
+    for (var n = 0; n < nodes.length; n++) {
+        var dx = gx - nodes[n].x,
+            dy = gy - nodes[n].y,
+            angle = Math.atan2(dy, dx),
+            fx = Math.cos(angle) * gravity,
+            fy = Math.sin(angle) * gravity;
+
+        this.nodes[n]._setForce(fx, fy);
     }
 
-    /**
-     * Merge all properties of object b into object b
-     * @param {Object} a
-     * @param {Object} b
-     */
-    function merge (a, b) {
-        if (a && b) {
-            for (var name in b) {
-                if (b.hasOwnProperty(name)) {
-                    a[name] = b[name];
-                }
-            }
+    // repulsing forces between nodes
+    var minimumDistance = this.constants.nodes.distance,
+        steepness = 10; // higher value gives steeper slope of the force around the given minimumDistance
+    for (var n = 0; n < nodes.length; n++) {
+        for (var n2 = n + 1; n2 < this.nodes.length; n2++) {
+            //var dmin = (nodes[n].width + nodes[n].height + nodes[n2].width + nodes[n2].height) / 1 || minimumDistance, // TODO: dmin
+            //var dmin = (nodes[n].width + nodes[n2].width)/2  || minimumDistance, // TODO: dmin
+            //dmin = 40 + ((nodes[n].width/2 + nodes[n2].width/2) || 0),
+
+            // calculate normally distributed force
+            var dx = nodes[n2].x - nodes[n].x,
+                dy = nodes[n2].y - nodes[n].y,
+                distance = Math.sqrt(dx * dx + dy * dy),
+                angle = Math.atan2(dy, dx),
+
+            // TODO: correct factor for repulsing force
+            //var repulsingforce = 2 * Math.exp(-5 * (distance * distance) / (dmin * dmin) ); // TODO: customize the repulsing force
+            //repulsingforce = Math.exp(-1 * (distance * distance) / (dmin * dmin) ), // TODO: customize the repulsing force
+                repulsingforce = 1 / (1 + Math.exp((distance / minimumDistance - 1) * steepness)), // TODO: customize the repulsing force
+                fx = Math.cos(angle) * repulsingforce,
+                fy = Math.sin(angle) * repulsingforce;
+
+            this.nodes[n]._addForce(-fx, -fy);
+            this.nodes[n2]._addForce(fx, fy);
         }
+        /* TODO: re-implement repulsion of edges
+         for (var l = 0; l < edges.length; l++) {
+         var lx = edges[l].from.x+(edges[l].to.x - edges[l].from.x)/2,
+         ly = edges[l].from.y+(edges[l].to.y - edges[l].from.y)/2,
+
+         // calculate normally distributed force
+         dx = nodes[n].x - lx,
+         dy = nodes[n].y - ly,
+         distance = Math.sqrt(dx * dx + dy * dy),
+         angle = Math.atan2(dy, dx),
+
+
+         // TODO: correct factor for repulsing force
+         //var repulsingforce = 2 * Math.exp(-5 * (distance * distance) / (dmin * dmin) ); // TODO: customize the repulsing force
+         //repulsingforce = Math.exp(-1 * (distance * distance) / (dmin * dmin) ), // TODO: customize the repulsing force
+         repulsingforce = 1 / (1 + Math.exp((distance / (minimumDistance / 2) - 1) * steepness)), // TODO: customize the repulsing force
+         fx = Math.cos(angle) * repulsingforce,
+         fy = Math.sin(angle) * repulsingforce;
+         nodes[n]._addForce(fx, fy);
+         edges[l].from._addForce(-fx/2,-fy/2);
+         edges[l].to._addForce(-fx/2,-fy/2);
+         }
+         */
     }
 
-    var nodeMap = {};
-    var edgeList = [];
+    // forces caused by the edges, modelled as springs
+    for (var l = 0, lMax = edges.length; l < lMax; l++) {
+        var edge = edges[l],
+
+            dx = (edge.to.x - edge.from.x),
+            dy = (edge.to.y - edge.from.y),
+        //edgeLength = (edge.from.width + edge.from.height + edge.to.width + edge.to.height)/2 || edge.length, // TODO: dmin
+        //edgeLength = (edge.from.width + edge.to.width)/2 || edge.length, // TODO: dmin
+        //edgeLength = 20 + ((edge.from.width + edge.to.width) || 0) / 2,
+            edgeLength = edge.length,
+            length =  Math.sqrt(dx * dx + dy * dy),
+            angle = Math.atan2(dy, dx),
 
-    /**
-     * Register a node with attributes
-     * @param {String} id
-     * @param {Object} [attr]
-     */
-    function addNode(id, attr) {
-        var node = {
-            id: String(id),
-            attr: attr || {}
-        };
-        if (!nodeMap[id]) {
-            nodeMap[id] = node;
-        }
-        else {
-            merge(nodeMap[id].attr, node.attr);
-        }
-    }
+            springforce = edge.stiffness * (edgeLength - length),
 
-    /**
-     * Register an edge
-     * @param {String} from
-     * @param {String} to
-     * @param {String} type    A string "->" or "--"
-     * @param {Object} [attr]
-     */
-    function addEdge(from, to, type, attr) {
-        edgeList.push({
-            from: String(from),
-            to: String(to),
-            type: type,
-            attr: attr || {}
-        });
-    }
+            fx = Math.cos(angle) * springforce,
+            fy = Math.sin(angle) * springforce;
 
-    // find the opening curly bracket
-    next();
-    while (c && c != '{') {
-        next();
-    }
-    if (c != '{') {
-        throw new SyntaxError('Invalid data. Curly bracket { expected ' + pos())
+        edge.from._addForce(-fx, -fy);
+        edge.to._addForce(fx, fy);
     }
-    next();
 
-    // parse all data until a closing curly bracket is encountered
-    while (c && c != '}') {
-        // parse node id and optional node attributes
-        var id = parseString();
-        if (id == undefined) {
-            throw new SyntaxError('String with id expected ' + pos());
-        }
-        var attr = parseAttributes();
-        addNode(id, attr);
+    /* TODO: re-implement repulsion of edges
+     // repulsing forces between edges
+     var minimumDistance = this.constants.edges.distance,
+     steepness = 10; // higher value gives steeper slope of the force around the given minimumDistance
+     for (var l = 0; l < edges.length; l++) {
+     //Keep distance from other edge centers
+     for (var l2 = l + 1; l2 < this.edges.length; l2++) {
+     //var dmin = (nodes[n].width + nodes[n].height + nodes[n2].width + nodes[n2].height) / 1 || minimumDistance, // TODO: dmin
+     //var dmin = (nodes[n].width + nodes[n2].width)/2  || minimumDistance, // TODO: dmin
+     //dmin = 40 + ((nodes[n].width/2 + nodes[n2].width/2) || 0),
+     var lx = edges[l].from.x+(edges[l].to.x - edges[l].from.x)/2,
+     ly = edges[l].from.y+(edges[l].to.y - edges[l].from.y)/2,
+     l2x = edges[l2].from.x+(edges[l2].to.x - edges[l2].from.x)/2,
+     l2y = edges[l2].from.y+(edges[l2].to.y - edges[l2].from.y)/2,
 
-        // TODO: parse global attributes "graph", "node", "edge"
+     // calculate normally distributed force
+     dx = l2x - lx,
+     dy = l2y - ly,
+     distance = Math.sqrt(dx * dx + dy * dy),
+     angle = Math.atan2(dy, dx),
 
-        // parse arrow
-        var type = parseArrow();
-        while (type) {
-            // parse node id
-            var prevId = id;
-            id = parseString();
-            if (id == undefined) {
-                throw new SyntaxError('String with id expected ' + pos());
-            }
-            addNode(id);
 
-            // parse edge attributes and register edge
-            attr = parseAttributes();
-            addEdge(prevId, id, type, attr);
+     // TODO: correct factor for repulsing force
+     //var repulsingforce = 2 * Math.exp(-5 * (distance * distance) / (dmin * dmin) ); // TODO: customize the repulsing force
+     //repulsingforce = Math.exp(-1 * (distance * distance) / (dmin * dmin) ), // TODO: customize the repulsing force
+     repulsingforce = 1 / (1 + Math.exp((distance / minimumDistance - 1) * steepness)), // TODO: customize the repulsing force
+     fx = Math.cos(angle) * repulsingforce,
+     fy = Math.sin(angle) * repulsingforce;
 
-            // parse next arrow (optional)
-            type = parseArrow();
-        }
+     edges[l].from._addForce(-fx, -fy);
+     edges[l].to._addForce(-fx, -fy);
+     edges[l2].from._addForce(fx, fy);
+     edges[l2].to._addForce(fx, fy);
+     }
+     }
+     */
+};
 
-        // parse separator (optional)
-        parseSeparator();
 
-        parseWhitespace();
+/**
+ * Check if any of the nodes is still moving
+ * @param {number} vmin   the minimum velocity considered as "moving"
+ * @return {boolean}      true if moving, false if non of the nodes is moving
+ */
+Graph.prototype._isMoving = function(vmin) {
+    // TODO: ismoving does not work well: should check the kinetic energy, not its velocity
+    var nodes = this.nodes;
+    for (var n = 0, nMax = nodes.length; n < nMax; n++) {
+        if (nodes[n].isMoving(vmin)) {
+            return true;
+        }
     }
-    if (c != '}') {
-        throw new SyntaxError('Invalid data. Curly bracket } expected');
+    return false;
+};
+
+
+/**
+ * Perform one discrete step for all nodes
+ */
+Graph.prototype._discreteStepNodes = function() {
+    var interval = this.refreshRate / 1000.0; // in seconds
+    var nodes = this.nodes;
+    for (var n = 0, nMax = nodes.length; n < nMax; n++) {
+        nodes[n].discreteStep(interval);
     }
+};
 
-    // crop data between the curly brackets
-    var start = data.indexOf('{');
-    var end = data.indexOf('}', start);
-    var text = (start != -1 && end != -1) ? data.substring(start + 1, end) : undefined;
+/**
+ * Start animating nodes and edges
+ */
+Graph.prototype.start = function() {
+    if (this.moving) {
+        this._calculateForces();
+        this._discreteStepNodes();
 
-    if (!text) {
-        throw new Error('Invalid data. no curly brackets containing data found');
+        var vmin = this.constants.minVelocity;
+        this.moving = this._isMoving(vmin);
     }
 
-    // return the results
-    var nodeList = [];
-    for (id in nodeMap) {
-        if (nodeMap.hasOwnProperty(id)) {
-            nodeList.push(nodeMap[id]);
+    if (this.moving) {
+        // start animation. only start timer if it is not already running
+        if (!this.timer) {
+            var graph = this;
+            this.timer = window.setTimeout(function () {
+                graph.timer = undefined;
+                graph.start();
+                graph._redraw();
+            }, this.refreshRate);
         }
     }
-    return {
-        nodes: nodeList,
-        edges: edgeList
+    else {
+        this._redraw();
     }
 };
 
 /**
- * Convert a string containing a graph in DOT language into a map containing
- * with nodes and edges in the format of graph.
- * @param {String} data         Text containing a graph in DOT-notation
- * @return {Object} graphData
+ * Stop animating nodes and edges.
  */
-Graph.util.DOTToGraph = function (data) {
-    // parse the DOT file
-    var dotData = Graph.util.parseDOT(data);
-    var graphData = {
-        nodes: [],
-        edges: [],
-        options: {
-            nodes: {},
-            edges: {}
-        }
-    };
-
-    /**
-     * Merge the properties of object b into object a, and adjust properties
-     * not supported by Graph (for example replace "shape" with "style"
-     * @param {Object} a
-     * @param {Object} b
-     * @param {Array} [ignore]   Optional array with property names to be ignored
-     */
-    function merge (a, b, ignore) {
-        for (var prop in b) {
-            if (b.hasOwnProperty(prop) && (!ignore || ignore.indexOf(prop) == -1)) {
-                a[prop] = b[prop];
-            }
-        }
-
-        // Convert aliases to configuration settings supported by Graph
-        if (a.label) {
-            a.text = a.label;
-            delete a.label;
-        }
-        if (a.shape) {
-            a.style = a.shape;
-            delete a.shape;
-        }
+Graph.prototype.stop = function () {
+    if (this.timer) {
+        window.clearInterval(this.timer);
+        this.timer = undefined;
     }
-
-    dotData.nodes.forEach(function (node) {
-        if (node.id.toLowerCase() == 'graph') {
-            merge(graphData.options, node.attr);
-        }
-        else if (node.id.toLowerCase() == 'node') {
-            merge(graphData.options.nodes, node.attr);
-        }
-        else if (node.id.toLowerCase() == 'edge') {
-            merge(graphData.options.edges, node.attr);
-        }
-        else {
-            var graphNode = {};
-            graphNode.id = node.id;
-            graphNode.text = node.id;
-            merge(graphNode, node.attr);
-            graphData.nodes.push(graphNode);
-        }
-    });
-
-    dotData.edges.forEach(function (edge) {
-        var graphEdge = {};
-        graphEdge.from = edge.from;
-        graphEdge.to = edge.to;
-        graphEdge.text = edge.id;
-        graphEdge.style = (edge.type == '->') ? 'arrow-end' : 'line';
-        merge(graphEdge, edge.attr);
-        graphData.edges.push(graphEdge);
-    });
-
-    return graphData;
 };
 
 /**
@@ -10860,6 +10726,14 @@ var vis = {
         TimeAxis: TimeAxis
     },
 
+    graph: {
+        Node: Node,
+        Edge: Edge,
+        Popup: Popup,
+        Groups: Groups,
+        Images: Images
+    },
+
     Timeline: Timeline,
     Graph: Graph
 };
diff --git a/vis.min.js b/vis.min.js
index 360f68ea..70672288 100644
--- a/vis.min.js
+++ b/vis.min.js
@@ -22,8 +22,8 @@
  * License for the specific language governing permissions and limitations under
  * the License.
  */
-(function(t){if("function"==typeof bootstrap)bootstrap("vis",t);else if("object"==typeof exports)module.exports=t();else if("function"==typeof define&&define.amd)define(t);else if("undefined"!=typeof ses){if(!ses.ok())return;ses.makeVis=t}else"undefined"!=typeof window?window.vis=t():global.vis=t()})(function(){var t;return function(t,e,i){function s(i,n){if(!e[i]){if(!t[i]){var r="function"==typeof require&&require;if(!n&&r)return r(i,!0);if(o)return o(i,!0);throw Error("Cannot find module '"+i+"'")}var a=e[i]={exports:{}};t[i][0].call(a.exports,function(e){var o=t[i][1][e];return s(o?o:e)},a,a.exports)}return e[i].exports}for(var o="function"==typeof require&&require,n=0;i.length>n;n++)s(i[n]);return s}({1:[function(e,i,s){(function(){function o(t){if(this.id=C.randomUUID(),this.options=t||{},this.data={},this.fieldId=this.options.fieldId||"id",this.fieldTypes={},this.options.fieldTypes)for(var e in this.options.fieldTypes)if(this.options.fieldTypes.hasOwnProperty(e)){var i=this.options.fieldTypes[e];this.fieldTypes[e]="Date"==i||"ISODate"==i||"ASPDate"==i?"Date":i}this.subscribers={},this.internalIds={}}function n(t,e){this.id=C.randomUUID(),this.data=null,this.ids={},this.options=e||{},this.fieldId="id",this.subscribers={};var i=this;this.listener=function(){i._onEvent.apply(i,arguments)},this.setData(t)}function r(t,e){this.parent=t,this.options=e||{},this.defaultOptions={order:function(t,e){if(t instanceof y){if(e instanceof y){var i=t.data.end-t.data.start,s=e.data.end-e.data.start;return i-s||t.data.start-e.data.start}return-1}return e instanceof y?1:t.data.start-e.data.start},margin:{item:10}},this.ordered=[]}function a(t){this.id=C.randomUUID(),this.start=0,this.end=0,this.options={min:null,max:null,zoomMin:null,zoomMax:null},this.listeners=[],this.setOptions(t)}function h(){this.subscriptions=[]}function d(){this.id=C.randomUUID(),this.components={},this.repaintTimer=void 0,this.reflowTimer=void 0}function p(){this.id=null,this.parent=null,this.depends=null,this.controller=null,this.options=null,this.frame=null,this.top=0,this.left=0,this.width=0,this.height=0}function l(t,e,i){this.id=C.randomUUID(),this.parent=t,this.depends=e,this.options=i||{}}function u(t,e){this.id=C.randomUUID(),this.container=t,this.options=e||{},this.defaultOptions={autoResize:!0},this.listeners={}}function c(t,e,i){this.id=C.randomUUID(),this.parent=t,this.depends=e,this.dom={majorLines:[],majorTexts:[],minorLines:[],minorTexts:[],redundant:{majorLines:[],majorTexts:[],minorLines:[],minorTexts:[]}},this.props={range:{start:0,end:0,minimumStep:0},lineTop:0},this.options=i||{},this.defaultOptions={orientation:"bottom",showMinorLabels:!0,showMajorLabels:!0},this.conversion=null,this.range=null}function f(t,e,i){this.id=C.randomUUID(),this.parent=t,this.depends=e,this.options=i||{},this.defaultOptions={style:"box",align:"center",orientation:"bottom",margin:{axis:20,item:10},padding:5},this.dom={};var s=this;this.itemsData=null,this.range=null,this.listeners={add:function(t,e,i){i!=s.id&&s._onAdd(e.items)},update:function(t,e,i){i!=s.id&&s._onUpdate(e.items)},remove:function(t,e,i){i!=s.id&&s._onRemove(e.items)}},this.items={},this.queue={},this.stack=new r(this,Object.create(this.options)),this.conversion=null}function m(t,e,i,s){this.parent=t,this.data=e,this.dom=null,this.options=i||{},this.defaultOptions=s||{},this.selected=!1,this.visible=!1,this.top=0,this.left=0,this.width=0,this.height=0}function g(t,e,i,s){this.props={dot:{left:0,top:0,width:0,height:0},line:{top:0,left:0,width:0,height:0}},m.call(this,t,e,i,s)}function v(t,e,i,s){this.props={dot:{top:0,width:0,height:0},content:{height:0,marginLeft:0}},m.call(this,t,e,i,s)}function y(t,e,i,s){this.props={content:{left:0,width:0}},m.call(this,t,e,i,s)}function w(t,e,i){this.id=C.randomUUID(),this.parent=t,this.groupId=e,this.itemsData=null,this.itemset=null,this.options=i||{},this.options.top=0,this.top=0,this.left=0,this.width=0,this.height=0}function b(t,e,i){this.id=C.randomUUID(),this.parent=t,this.depends=e,this.options=i||{},this.range=null,this.itemsData=null,this.groupsData=null,this.groups={},this.queue={};var s=this;this.listeners={add:function(t,e){s._onAdd(e.items)},update:function(t,e){s._onUpdate(e.items)},remove:function(t,e){s._onRemove(e.items)}}}function x(t,e,i){var s=this;if(this.options=C.extend({orientation:"bottom",min:null,max:null,zoomMin:10,zoomMax:31536e10,moveable:!0,zoomable:!0,showMinorLabels:!0,showMajorLabels:!0,autoResize:!1},i),this.controller=new d,!t)throw Error("No container element provided");var o=Object.create(this.options);o.height=function(){return s.options.height?s.options.height:s.timeaxis.height+s.content.height},this.root=new u(t,o),this.controller.add(this.root);var n=T().hours(0).minutes(0).seconds(0).milliseconds(0);this.range=new a({start:n.clone().add("days",-3).valueOf(),end:n.clone().add("days",4).valueOf()}),this.range.subscribe(this.root,"move","horizontal"),this.range.subscribe(this.root,"zoom","horizontal"),this.range.on("rangechange",function(){var t=!0;s.controller.requestReflow(t)}),this.range.on("rangechanged",function(){var t=!0;s.controller.requestReflow(t)});var r=Object.create(o);r.range=this.range,this.timeaxis=new c(this.root,[],r),this.timeaxis.setRange(this.range),this.controller.add(this.timeaxis),this.setGroups(null),this.itemsData=null,this.groupsData=null,e&&this.setItems(e)}function _(t,e,i){this.containerElement=t,this.width="100%",this.height="100%",this.refreshRate=50,this.stabilize=!0,this.selectable=!0,this.constants={nodes:{radiusMin:5,radiusMax:20,radius:5,distance:100,style:"rect",image:void 0,widthMin:16,widthMax:64,fontColor:"black",fontSize:14,fontFace:"arial",borderColor:"#2B7CE9",backgroundColor:"#97C2FC",highlightColor:"#D2E5FF",group:void 0},edges:{widthMin:1,widthMax:15,width:1,style:"line",color:"#343434",fontColor:"#343434",fontSize:14,fontFace:"arial",length:100,dashlength:10,dashgap:5},minForce:.05,minVelocity:.02,maxIterations:1e3},this.nodes=[],this.edges=[],this.images=new _.Images,this.groups=new _.Groups,this.moving=!1,this.selection=[],this.timer=void 0,this._create(),this.setOptions(i),this.setData(e)}var T=e("moment"),C={};C.isNumber=function(t){return t instanceof Number||"number"==typeof t},C.isString=function(t){return t instanceof String||"string"==typeof t},C.isDate=function(t){if(t instanceof Date)return!0;if(C.isString(t)){var e=S.exec(t);if(e)return!0;if(!isNaN(Date.parse(t)))return!0}return!1},C.isDataTable=function(t){return"undefined"!=typeof google&&google.visualization&&google.visualization.DataTable&&t instanceof google.visualization.DataTable},C.randomUUID=function(){var t=function(){return Math.floor(65536*Math.random()).toString(16)};return t()+t()+"-"+t()+"-"+t()+"-"+t()+"-"+t()+t()+t()},C.extend=function(t){for(var e=1,i=arguments.length;i>e;e++){var s=arguments[e];for(var o in s)s.hasOwnProperty(o)&&void 0!==s[o]&&(t[o]=s[o])}return t},C.cast=function(t,e){var i;if(void 0===t)return void 0;if(null===t)return null;if(!e)return t;if("string"!=typeof e&&!(e instanceof String))throw Error("Type must be a string");switch(e){case"boolean":case"Boolean":return Boolean(t);case"number":case"Number":return Number(t);case"string":case"String":return t+"";case"Date":if(C.isNumber(t))return new Date(t);if(t instanceof Date)return new Date(t.valueOf());if(T.isMoment(t))return new Date(t.valueOf());if(C.isString(t))return i=S.exec(t),i?new Date(Number(i[1])):T(t).toDate();throw Error("Cannot cast object of type "+C.getType(t)+" to type Date");case"Moment":if(C.isNumber(t))return T(t);if(t instanceof Date)return T(t.valueOf());if(T.isMoment(t))return T.clone();if(C.isString(t))return i=S.exec(t),i?T(Number(i[1])):T(t);throw Error("Cannot cast object of type "+C.getType(t)+" to type Date");case"ISODate":if(t instanceof Date)return t.toISOString();if(T.isMoment(t))return t.toDate().toISOString();if(C.isNumber(t)||C.isString(t))return T(t).toDate().toISOString();throw Error("Cannot cast object of type "+C.getType(t)+" to type ISODate");case"ASPDate":if(t instanceof Date)return"/Date("+t.valueOf()+")/";if(C.isNumber(t)||C.isString(t))return"/Date("+T(t).valueOf()+")/";throw Error("Cannot cast object of type "+C.getType(t)+" to type ASPDate");default:throw Error("Cannot cast object of type "+C.getType(t)+' to type "'+e+'"')}};var S=/^\/?Date\((\-?\d+)/i;if(C.getType=function(t){var e=typeof t;return"object"==e?null==t?"null":t instanceof Boolean?"Boolean":t instanceof Number?"Number":t instanceof String?"String":t instanceof Array?"Array":t instanceof Date?"Date":"Object":"number"==e?"Number":"boolean"==e?"Boolean":"string"==e?"String":e},C.getAbsoluteLeft=function(t){for(var e=document.documentElement,i=document.body,s=t.offsetLeft,o=t.offsetParent;null!=o&&o!=i&&o!=e;)s+=o.offsetLeft,s-=o.scrollLeft,o=o.offsetParent;return s},C.getAbsoluteTop=function(t){for(var e=document.documentElement,i=document.body,s=t.offsetTop,o=t.offsetParent;null!=o&&o!=i&&o!=e;)s+=o.offsetTop,s-=o.scrollTop,o=o.offsetParent;return s},C.getPageY=function(t){if("pageY"in t)return t.pageY;var e;e="targetTouches"in t&&t.targetTouches.length?t.targetTouches[0].clientY:t.clientY;var i=document.documentElement,s=document.body;return e+(i&&i.scrollTop||s&&s.scrollTop||0)-(i&&i.clientTop||s&&s.clientTop||0)},C.getPageX=function(t){if("pageY"in t)return t.pageX;var e;e="targetTouches"in t&&t.targetTouches.length?t.targetTouches[0].clientX:t.clientX;var i=document.documentElement,s=document.body;return e+(i&&i.scrollLeft||s&&s.scrollLeft||0)-(i&&i.clientLeft||s&&s.clientLeft||0)},C.addClassName=function(t,e){var i=t.className.split(" ");-1==i.indexOf(e)&&(i.push(e),t.className=i.join(" "))},C.removeClassName=function(t,e){var i=t.className.split(" "),s=i.indexOf(e);-1!=s&&(i.splice(s,1),t.className=i.join(" "))},C.forEach=function(t,e){var i,s;if(t instanceof Array)for(i=0,s=t.length;s>i;i++)e(t[i],i,t);else for(i in t)t.hasOwnProperty(i)&&e(t[i],i,t)},C.updateProperty=function(t,e,i){return t[e]!==i?(t[e]=i,!0):!1},C.addEventListener=function(t,e,i,s){t.addEventListener?(void 0===s&&(s=!1),"mousewheel"===e&&navigator.userAgent.indexOf("Firefox")>=0&&(e="DOMMouseScroll"),t.addEventListener(e,i,s)):t.attachEvent("on"+e,i)},C.removeEventListener=function(t,e,i,s){t.removeEventListener?(void 0===s&&(s=!1),"mousewheel"===e&&navigator.userAgent.indexOf("Firefox")>=0&&(e="DOMMouseScroll"),t.removeEventListener(e,i,s)):t.detachEvent("on"+e,i)},C.getTarget=function(t){t||(t=window.event);var e;return t.target?e=t.target:t.srcElement&&(e=t.srcElement),void 0!=e.nodeType&&3==e.nodeType&&(e=e.parentNode),e},C.stopPropagation=function(t){t||(t=window.event),t.stopPropagation?t.stopPropagation():t.cancelBubble=!0},C.preventDefault=function(t){t||(t=window.event),t.preventDefault?t.preventDefault():t.returnValue=!1},C.option={},C.option.asBoolean=function(t,e){return"function"==typeof t&&(t=t()),null!=t?0!=t:e||null},C.option.asNumber=function(t,e){return"function"==typeof t&&(t=t()),null!=t?Number(t)||e||null:e||null},C.option.asString=function(t,e){return"function"==typeof t&&(t=t()),null!=t?t+"":e||null},C.option.asSize=function(t,e){return"function"==typeof t&&(t=t()),C.isString(t)?t:C.isNumber(t)?t+"px":e||null},C.option.asElement=function(t,e){return"function"==typeof t&&(t=t()),t||e||null},C.loadCss=function(t){if("undefined"!=typeof document){var e=document.createElement("style");e.type="text/css",e.styleSheet?e.styleSheet.cssText=t:e.appendChild(document.createTextNode(t)),document.getElementsByTagName("head")[0].appendChild(e)}},!Array.prototype.indexOf){Array.prototype.indexOf=function(t){for(var e=0;this.length>e;e++)if(this[e]==t)return e;return-1};try{console.log("Warning: Ancient browser detected. Please update your browser")}catch(M){}}Array.prototype.forEach||(Array.prototype.forEach=function(t,e){for(var i=0,s=this.length;s>i;++i)t.call(e||this,this[i],i,this)}),Array.prototype.map||(Array.prototype.map=function(t,e){var i,s,o;if(null==this)throw new TypeError(" this is null or not defined");var n=Object(this),r=n.length>>>0;if("function"!=typeof t)throw new TypeError(t+" is not a function");for(e&&(i=e),s=Array(r),o=0;r>o;){var a,h;o in n&&(a=n[o],h=t.call(i,a,o,n),s[o]=h),o++}return s}),Array.prototype.filter||(Array.prototype.filter=function(t){"use strict";if(null==this)throw new TypeError;var e=Object(this),i=e.length>>>0;if("function"!=typeof t)throw new TypeError;for(var s=[],o=arguments[1],n=0;i>n;n++)if(n in e){var r=e[n];t.call(o,r,n,e)&&s.push(r)}return s}),Object.keys||(Object.keys=function(){var t=Object.prototype.hasOwnProperty,e=!{toString:null}.propertyIsEnumerable("toString"),i=["toString","toLocaleString","valueOf","hasOwnProperty","isPrototypeOf","propertyIsEnumerable","constructor"],s=i.length;return function(o){if("object"!=typeof o&&"function"!=typeof o||null===o)throw new TypeError("Object.keys called on non-object");var n=[];for(var r in o)t.call(o,r)&&n.push(r);if(e)for(var a=0;s>a;a++)t.call(o,i[a])&&n.push(i[a]);return n}}()),Array.isArray||(Array.isArray=function(t){return"[object Array]"===Object.prototype.toString.call(t)}),Function.prototype.bind||(Function.prototype.bind=function(t){if("function"!=typeof this)throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");var e=Array.prototype.slice.call(arguments,1),i=this,s=function(){},o=function(){return i.apply(this instanceof s&&t?this:t,e.concat(Array.prototype.slice.call(arguments)))};return s.prototype=this.prototype,o.prototype=new s,o}),Object.create||(Object.create=function(t){function e(){}if(arguments.length>1)throw Error("Object.create implementation only accepts the first parameter.");return e.prototype=t,new e});var E={listeners:[],indexOf:function(t){for(var e=this.listeners,i=0,s=this.listeners.length;s>i;i++){var o=e[i];if(o&&o.object==t)return i}return-1},addListener:function(t,e,i){var s=this.indexOf(t),o=this.listeners[s];o||(o={object:t,events:{}},this.listeners.push(o));var n=o.events[e];n||(n=[],o.events[e]=n),-1==n.indexOf(i)&&n.push(i)},removeListener:function(t,e,i){var s=this.indexOf(t),o=this.listeners[s];if(o){var n=o.events[e];n&&(s=n.indexOf(i),-1!=s&&n.splice(s,1),0==n.length&&delete o.events[e]);var r=0,a=o.events;for(var h in a)a.hasOwnProperty(h)&&r++;0==r&&delete this.listeners[s]}},removeAllListeners:function(){this.listeners=[]},trigger:function(t,e,i){var s=this.indexOf(t),o=this.listeners[s];if(o){var n=o.events[e];if(n)for(var r=0,a=n.length;a>r;r++)n[r](i)}}};TimeStep=function(t,e,i){this.current=new Date,this._start=new Date,this._end=new Date,this.autoScale=!0,this.scale=TimeStep.SCALE.DAY,this.step=1,this.setRange(t,e,i)},TimeStep.SCALE={MILLISECOND:1,SECOND:2,MINUTE:3,HOUR:4,DAY:5,WEEKDAY:6,MONTH:7,YEAR:8},TimeStep.prototype.setRange=function(t,e,i){t instanceof Date&&e instanceof Date&&(this._start=void 0!=t?new Date(t.valueOf()):new Date,this._end=void 0!=e?new Date(e.valueOf()):new Date,this.autoScale&&this.setMinimumStep(i))},TimeStep.prototype.first=function(){this.current=new Date(this._start.valueOf()),this.roundToMinor()},TimeStep.prototype.roundToMinor=function(){switch(this.scale){case TimeStep.SCALE.YEAR:this.current.setFullYear(this.step*Math.floor(this.current.getFullYear()/this.step)),this.current.setMonth(0);case TimeStep.SCALE.MONTH:this.current.setDate(1);case TimeStep.SCALE.DAY:case TimeStep.SCALE.WEEKDAY:this.current.setHours(0);case TimeStep.SCALE.HOUR:this.current.setMinutes(0);case TimeStep.SCALE.MINUTE:this.current.setSeconds(0);case TimeStep.SCALE.SECOND:this.current.setMilliseconds(0)}if(1!=this.step)switch(this.scale){case TimeStep.SCALE.MILLISECOND:this.current.setMilliseconds(this.current.getMilliseconds()-this.current.getMilliseconds()%this.step);break;case TimeStep.SCALE.SECOND:this.current.setSeconds(this.current.getSeconds()-this.current.getSeconds()%this.step);break;case TimeStep.SCALE.MINUTE:this.current.setMinutes(this.current.getMinutes()-this.current.getMinutes()%this.step);break;case TimeStep.SCALE.HOUR:this.current.setHours(this.current.getHours()-this.current.getHours()%this.step);break;case TimeStep.SCALE.WEEKDAY:case TimeStep.SCALE.DAY:this.current.setDate(this.current.getDate()-1-(this.current.getDate()-1)%this.step+1);break;case TimeStep.SCALE.MONTH:this.current.setMonth(this.current.getMonth()-this.current.getMonth()%this.step);break;case TimeStep.SCALE.YEAR:this.current.setFullYear(this.current.getFullYear()-this.current.getFullYear()%this.step);break;default:}},TimeStep.prototype.hasNext=function(){return this.current.valueOf()<=this._end.valueOf()},TimeStep.prototype.next=function(){var t=this.current.valueOf();if(6>this.current.getMonth())switch(this.scale){case TimeStep.SCALE.MILLISECOND:this.current=new Date(this.current.valueOf()+this.step);break;case TimeStep.SCALE.SECOND:this.current=new Date(this.current.valueOf()+1e3*this.step);break;case TimeStep.SCALE.MINUTE:this.current=new Date(this.current.valueOf()+60*1e3*this.step);break;case TimeStep.SCALE.HOUR:this.current=new Date(this.current.valueOf()+60*60*1e3*this.step);var e=this.current.getHours();this.current.setHours(e-e%this.step);break;case TimeStep.SCALE.WEEKDAY:case TimeStep.SCALE.DAY:this.current.setDate(this.current.getDate()+this.step);break;case TimeStep.SCALE.MONTH:this.current.setMonth(this.current.getMonth()+this.step);break;case TimeStep.SCALE.YEAR:this.current.setFullYear(this.current.getFullYear()+this.step);break;default:}else switch(this.scale){case TimeStep.SCALE.MILLISECOND:this.current=new Date(this.current.valueOf()+this.step);break;case TimeStep.SCALE.SECOND:this.current.setSeconds(this.current.getSeconds()+this.step);break;case TimeStep.SCALE.MINUTE:this.current.setMinutes(this.current.getMinutes()+this.step);break;case TimeStep.SCALE.HOUR:this.current.setHours(this.current.getHours()+this.step);break;case TimeStep.SCALE.WEEKDAY:case TimeStep.SCALE.DAY:this.current.setDate(this.current.getDate()+this.step);break;case TimeStep.SCALE.MONTH:this.current.setMonth(this.current.getMonth()+this.step);break;case TimeStep.SCALE.YEAR:this.current.setFullYear(this.current.getFullYear()+this.step);break;default:}if(1!=this.step)switch(this.scale){case TimeStep.SCALE.MILLISECOND:this.current.getMilliseconds()<this.step&&this.current.setMilliseconds(0);break;case TimeStep.SCALE.SECOND:this.current.getSeconds()<this.step&&this.current.setSeconds(0);break;case TimeStep.SCALE.MINUTE:this.current.getMinutes()<this.step&&this.current.setMinutes(0);break;case TimeStep.SCALE.HOUR:this.current.getHours()<this.step&&this.current.setHours(0);break;case TimeStep.SCALE.WEEKDAY:case TimeStep.SCALE.DAY:this.current.getDate()<this.step+1&&this.current.setDate(1);break;case TimeStep.SCALE.MONTH:this.current.getMonth()<this.step&&this.current.setMonth(0);break;case TimeStep.SCALE.YEAR:break;default:}this.current.valueOf()==t&&(this.current=new Date(this._end.valueOf()))},TimeStep.prototype.getCurrent=function(){return this.current},TimeStep.prototype.setScale=function(t,e){this.scale=t,e>0&&(this.step=e),this.autoScale=!1},TimeStep.prototype.setAutoScale=function(t){this.autoScale=t},TimeStep.prototype.setMinimumStep=function(t){if(void 0!=t){var e=31104e6,i=2592e6,s=864e5,o=36e5,n=6e4,r=1e3,a=1;1e3*e>t&&(this.scale=TimeStep.SCALE.YEAR,this.step=1e3),500*e>t&&(this.scale=TimeStep.SCALE.YEAR,this.step=500),100*e>t&&(this.scale=TimeStep.SCALE.YEAR,this.step=100),50*e>t&&(this.scale=TimeStep.SCALE.YEAR,this.step=50),10*e>t&&(this.scale=TimeStep.SCALE.YEAR,this.step=10),5*e>t&&(this.scale=TimeStep.SCALE.YEAR,this.step=5),e>t&&(this.scale=TimeStep.SCALE.YEAR,this.step=1),3*i>t&&(this.scale=TimeStep.SCALE.MONTH,this.step=3),i>t&&(this.scale=TimeStep.SCALE.MONTH,this.step=1),5*s>t&&(this.scale=TimeStep.SCALE.DAY,this.step=5),2*s>t&&(this.scale=TimeStep.SCALE.DAY,this.step=2),s>t&&(this.scale=TimeStep.SCALE.DAY,this.step=1),s/2>t&&(this.scale=TimeStep.SCALE.WEEKDAY,this.step=1),4*o>t&&(this.scale=TimeStep.SCALE.HOUR,this.step=4),o>t&&(this.scale=TimeStep.SCALE.HOUR,this.step=1),15*n>t&&(this.scale=TimeStep.SCALE.MINUTE,this.step=15),10*n>t&&(this.scale=TimeStep.SCALE.MINUTE,this.step=10),5*n>t&&(this.scale=TimeStep.SCALE.MINUTE,this.step=5),n>t&&(this.scale=TimeStep.SCALE.MINUTE,this.step=1),15*r>t&&(this.scale=TimeStep.SCALE.SECOND,this.step=15),10*r>t&&(this.scale=TimeStep.SCALE.SECOND,this.step=10),5*r>t&&(this.scale=TimeStep.SCALE.SECOND,this.step=5),r>t&&(this.scale=TimeStep.SCALE.SECOND,this.step=1),200*a>t&&(this.scale=TimeStep.SCALE.MILLISECOND,this.step=200),100*a>t&&(this.scale=TimeStep.SCALE.MILLISECOND,this.step=100),50*a>t&&(this.scale=TimeStep.SCALE.MILLISECOND,this.step=50),10*a>t&&(this.scale=TimeStep.SCALE.MILLISECOND,this.step=10),5*a>t&&(this.scale=TimeStep.SCALE.MILLISECOND,this.step=5),a>t&&(this.scale=TimeStep.SCALE.MILLISECOND,this.step=1)}},TimeStep.prototype.snap=function(t){if(this.scale==TimeStep.SCALE.YEAR){var e=t.getFullYear()+Math.round(t.getMonth()/12);t.setFullYear(Math.round(e/this.step)*this.step),t.setMonth(0),t.setDate(0),t.setHours(0),t.setMinutes(0),t.setSeconds(0),t.setMilliseconds(0)}else if(this.scale==TimeStep.SCALE.MONTH)t.getDate()>15?(t.setDate(1),t.setMonth(t.getMonth()+1)):t.setDate(1),t.setHours(0),t.setMinutes(0),t.setSeconds(0),t.setMilliseconds(0);else if(this.scale==TimeStep.SCALE.DAY||this.scale==TimeStep.SCALE.WEEKDAY){switch(this.step){case 5:case 2:t.setHours(24*Math.round(t.getHours()/24));break;default:t.setHours(12*Math.round(t.getHours()/12))}t.setMinutes(0),t.setSeconds(0),t.setMilliseconds(0)}else if(this.scale==TimeStep.SCALE.HOUR){switch(this.step){case 4:t.setMinutes(60*Math.round(t.getMinutes()/60));break;default:t.setMinutes(30*Math.round(t.getMinutes()/30))}t.setSeconds(0),t.setMilliseconds(0)}else if(this.scale==TimeStep.SCALE.MINUTE){switch(this.step){case 15:case 10:t.setMinutes(5*Math.round(t.getMinutes()/5)),t.setSeconds(0);break;case 5:t.setSeconds(60*Math.round(t.getSeconds()/60));break;default:t.setSeconds(30*Math.round(t.getSeconds()/30))}t.setMilliseconds(0)}else if(this.scale==TimeStep.SCALE.SECOND)switch(this.step){case 15:case 10:t.setSeconds(5*Math.round(t.getSeconds()/5)),t.setMilliseconds(0);break;case 5:t.setMilliseconds(1e3*Math.round(t.getMilliseconds()/1e3));break;default:t.setMilliseconds(500*Math.round(t.getMilliseconds()/500))}else if(this.scale==TimeStep.SCALE.MILLISECOND){var i=this.step>5?this.step/2:1;t.setMilliseconds(Math.round(t.getMilliseconds()/i)*i)}},TimeStep.prototype.isMajor=function(){switch(this.scale){case TimeStep.SCALE.MILLISECOND:return 0==this.current.getMilliseconds();case TimeStep.SCALE.SECOND:return 0==this.current.getSeconds();case TimeStep.SCALE.MINUTE:return 0==this.current.getHours()&&0==this.current.getMinutes();case TimeStep.SCALE.HOUR:return 0==this.current.getHours();case TimeStep.SCALE.WEEKDAY:case TimeStep.SCALE.DAY:return 1==this.current.getDate();case TimeStep.SCALE.MONTH:return 0==this.current.getMonth();case TimeStep.SCALE.YEAR:return!1;default:return!1}},TimeStep.prototype.getLabelMinor=function(t){switch(void 0==t&&(t=this.current),this.scale){case TimeStep.SCALE.MILLISECOND:return T(t).format("SSS");case TimeStep.SCALE.SECOND:return T(t).format("s");case TimeStep.SCALE.MINUTE:return T(t).format("HH:mm");case TimeStep.SCALE.HOUR:return T(t).format("HH:mm");case TimeStep.SCALE.WEEKDAY:return T(t).format("ddd D");case TimeStep.SCALE.DAY:return T(t).format("D");case TimeStep.SCALE.MONTH:return T(t).format("MMM");case TimeStep.SCALE.YEAR:return T(t).format("YYYY");default:return""}},TimeStep.prototype.getLabelMajor=function(t){switch(void 0==t&&(t=this.current),this.scale){case TimeStep.SCALE.MILLISECOND:return T(t).format("HH:mm:ss");case TimeStep.SCALE.SECOND:return T(t).format("D MMMM HH:mm");case TimeStep.SCALE.MINUTE:case TimeStep.SCALE.HOUR:return T(t).format("ddd D MMMM");case TimeStep.SCALE.WEEKDAY:case TimeStep.SCALE.DAY:return T(t).format("MMMM YYYY");case TimeStep.SCALE.MONTH:return T(t).format("YYYY");case TimeStep.SCALE.YEAR:return"";default:return""}},o.prototype.subscribe=function(t,e,i){var s=this.subscribers[t];s||(s=[],this.subscribers[t]=s),s.push({id:i?i+"":null,callback:e})},o.prototype.unsubscribe=function(t,e){var i=this.subscribers[t];i&&(this.subscribers[t]=i.filter(function(t){return t.callback!=e}))},o.prototype._trigger=function(t,e,i){if("*"==t)throw Error("Cannot trigger event *");var s=[];t in this.subscribers&&(s=s.concat(this.subscribers[t])),"*"in this.subscribers&&(s=s.concat(this.subscribers["*"]));for(var o=0;s.length>o;o++){var n=s[o];n.callback&&n.callback(t,e,i||null)}},o.prototype.add=function(t,e){var i,s=[],o=this;if(t instanceof Array)for(var n=0,r=t.length;r>n;n++)i=o._addItem(t[n]),s.push(i);else if(C.isDataTable(t))for(var a=this._getColumnNames(t),h=0,d=t.getNumberOfRows();d>h;h++){for(var p={},l=0,u=a.length;u>l;l++){var c=a[l];p[c]=t.getValue(h,l)}i=o._addItem(p),s.push(i)}else{if(!(t instanceof Object))throw Error("Unknown dataType");i=o._addItem(t),s.push(i)}s.length&&this._trigger("add",{items:s},e)},o.prototype.update=function(t,e){var i=[],s=[],o=this,n=o.fieldId,r=function(t){var e=t[n];o.data[e]?(e=o._updateItem(t),s.push(e)):(e=o._addItem(t),i.push(e))};if(t instanceof Array)for(var a=0,h=t.length;h>a;a++)r(t[a]);else if(C.isDataTable(t))for(var d=this._getColumnNames(t),p=0,l=t.getNumberOfRows();l>p;p++){for(var u={},c=0,f=d.length;f>c;c++){var m=d[c];u[m]=t.getValue(p,c)}r(u)}else{if(!(t instanceof Object))throw Error("Unknown dataType");r(t)}i.length&&this._trigger("add",{items:i},e),s.length&&this._trigger("update",{items:s},e)},o.prototype.get=function(){var t,e,i,s,o=this,n=C.getType(arguments[0]);"String"==n||"Number"==n?(t=arguments[0],i=arguments[1],s=arguments[2]):"Array"==n?(e=arguments[0],i=arguments[1],s=arguments[2]):(i=arguments[0],s=arguments[1]);var r;if(i&&i.type){if(r="DataTable"==i.type?"DataTable":"Array",s&&r!=C.getType(s))throw Error('Type of parameter "data" ('+C.getType(s)+") "+"does not correspond with specified options.type ("+i.type+")");if("DataTable"==r&&!C.isDataTable(s))throw Error('Parameter "data" must be a DataTable when options.type is "DataTable"')}else r=s?"DataTable"==C.getType(s)?"DataTable":"Array":"Array";var a,h,d,p,l=i&&i.fieldTypes||this.options.fieldTypes,u=i&&i.filter,c=[];if(void 0!=t)a=o._getItem(t,l),u&&!u(a)&&(a=null);else if(void 0!=e)for(d=0,p=e.length;p>d;d++)a=o._getItem(e[d],l),(!u||u(a))&&c.push(a);else for(h in this.data)this.data.hasOwnProperty(h)&&(a=o._getItem(h,l),(!u||u(a))&&c.push(a));if(i&&i.order&&void 0==t&&this._sort(c,i.order),i&&i.fields){var f=i.fields;if(void 0!=t)a=this._filterFields(a,f);else for(d=0,p=c.length;p>d;d++)c[d]=this._filterFields(c[d],f)}if("DataTable"==r){var m=this._getColumnNames(s);if(void 0!=t)o._appendRow(s,m,a);else for(d=0,p=c.length;p>d;d++)o._appendRow(s,m,c[d]);return s}if(void 0!=t)return a;if(s){for(d=0,p=c.length;p>d;d++)s.push(c[d]);return s}return c},o.prototype.getIds=function(t){var e,i,s,o,n,r=this.data,a=t&&t.filter,h=t&&t.order,d=t&&t.fieldTypes||this.options.fieldTypes,p=[];if(a)if(h){n=[];for(s in r)r.hasOwnProperty(s)&&(o=this._getItem(s,d),a(o)&&n.push(o));for(this._sort(n,h),e=0,i=n.length;i>e;e++)p[e]=n[e][this.fieldId]}else for(s in r)r.hasOwnProperty(s)&&(o=this._getItem(s,d),a(o)&&p.push(o[this.fieldId]));else if(h){n=[];for(s in r)r.hasOwnProperty(s)&&n.push(r[s]);for(this._sort(n,h),e=0,i=n.length;i>e;e++)p[e]=n[e][this.fieldId]}else for(s in r)r.hasOwnProperty(s)&&(o=r[s],p.push(o[this.fieldId]));return p},o.prototype.forEach=function(t,e){var i,s,o=e&&e.filter,n=e&&e.fieldTypes||this.options.fieldTypes,r=this.data;if(e&&e.order)for(var a=this.get(e),h=0,d=a.length;d>h;h++)i=a[h],s=i[this.fieldId],t(i,s);else for(s in r)r.hasOwnProperty(s)&&(i=this._getItem(s,n),(!o||o(i))&&t(i,s))},o.prototype.map=function(t,e){var i,s=e&&e.filter,o=e&&e.fieldTypes||this.options.fieldTypes,n=[],r=this.data;for(var a in r)r.hasOwnProperty(a)&&(i=this._getItem(a,o),(!s||s(i))&&n.push(t(i,a)));return e&&e.order&&this._sort(n,e.order),n},o.prototype._filterFields=function(t,e){var i={};for(var s in t)t.hasOwnProperty(s)&&-1!=e.indexOf(s)&&(i[s]=t[s]);return i},o.prototype._sort=function(t,e){if(C.isString(e)){var i=e;t.sort(function(t,e){var s=t[i],o=e[i];return s>o?1:o>s?-1:0})}else{if("function"!=typeof e)throw new TypeError("Order must be a function or a string");t.sort(e)}},o.prototype.remove=function(t,e){var i,s,o=[];if(C.isNumber(t)||C.isString(t))delete this.data[t],delete this.internalIds[t],o.push(t);else if(t instanceof Array){for(i=0,s=t.length;s>i;i++)this.remove(t[i]);o=items.concat(t)}else if(t instanceof Object)for(i in this.data)this.data.hasOwnProperty(i)&&this.data[i]==t&&(delete this.data[i],delete this.internalIds[i],o.push(i));o.length&&this._trigger("remove",{items:o},e)},o.prototype.clear=function(t){var e=Object.keys(this.data);this.data={},this.internalIds={},this._trigger("remove",{items:e},t)},o.prototype.max=function(t){var e=this.data,i=null,s=null;for(var o in e)if(e.hasOwnProperty(o)){var n=e[o],r=n[t];null!=r&&(!i||r>s)&&(i=n,s=r)}return i},o.prototype.min=function(t){var e=this.data,i=null,s=null;for(var o in e)if(e.hasOwnProperty(o)){var n=e[o],r=n[t];null!=r&&(!i||s>r)&&(i=n,s=r)}return i},o.prototype.distinct=function(t){var e=this.data,i=[],s=this.options.fieldTypes[t],o=0;for(var n in e)if(e.hasOwnProperty(n)){for(var r=e[n],a=C.cast(r[t],s),h=!1,d=0;o>d;d++)if(i[d]==a){h=!0;break}h||(i[o]=a,o++)}return i},o.prototype._addItem=function(t){var e=t[this.fieldId];if(void 0!=e){if(this.data[e])throw Error("Cannot add item: item with id "+e+" already exists")}else e=C.randomUUID(),t[this.fieldId]=e,this.internalIds[e]=t;var i={};for(var s in t)if(t.hasOwnProperty(s)){var o=this.fieldTypes[s];i[s]=C.cast(t[s],o)}return this.data[e]=i,e},o.prototype._getItem=function(t,e){var i,s,o=this.data[t];if(!o)return null;var n={},r=this.fieldId,a=this.internalIds;if(e)for(i in o)o.hasOwnProperty(i)&&(s=o[i],i==r&&s in a||(n[i]=C.cast(s,e[i])));else for(i in o)o.hasOwnProperty(i)&&(s=o[i],i==r&&s in a||(n[i]=s));return n},o.prototype._updateItem=function(t){var e=t[this.fieldId];if(void 0==e)throw Error("Cannot update item: item has no id (item: "+JSON.stringify(t)+")");var i=this.data[e];if(!i)throw Error("Cannot update item: no item with id "+e+" found");for(var s in t)if(t.hasOwnProperty(s)){var o=this.fieldTypes[s];i[s]=C.cast(t[s],o)}return e},o.prototype._getColumnNames=function(t){for(var e=[],i=0,s=t.getNumberOfColumns();s>i;i++)e[i]=t.getColumnId(i)||t.getColumnLabel(i);return e},o.prototype._appendRow=function(t,e,i){for(var s=t.addRow(),o=0,n=e.length;n>o;o++){var r=e[o];t.setValue(s,o,i[r])}},n.prototype.setData=function(t){var e,i,s;if(this.data){this.data.unsubscribe&&this.data.unsubscribe("*",this.listener),e=[];for(var o in this.ids)this.ids.hasOwnProperty(o)&&e.push(o);this.ids={},this._trigger("remove",{items:e})}if(this.data=t,this.data){for(this.fieldId=this.options.fieldId||this.data&&this.data.options&&this.data.options.fieldId||"id",e=this.data.getIds({filter:this.options&&this.options.filter}),i=0,s=e.length;s>i;i++)o=e[i],this.ids[o]=!0;this._trigger("add",{items:e}),this.data.subscribe&&this.data.subscribe("*",this.listener)}},n.prototype.get=function(){var t,e,i,s=this,o=C.getType(arguments[0]);"String"==o||"Number"==o||"Array"==o?(t=arguments[0],e=arguments[1],i=arguments[2]):(e=arguments[0],i=arguments[1]);var n=C.extend({},this.options,e);this.options.filter&&e&&e.filter&&(n.filter=function(t){return s.options.filter(t)&&e.filter(t)});var r=[];return void 0!=t&&r.push(t),r.push(n),r.push(i),this.data&&this.data.get.apply(this.data,r)},n.prototype.getIds=function(t){var e;if(this.data){var i,s=this.options.filter;i=t&&t.filter?s?function(e){return s(e)&&t.filter(e)}:t.filter:s,e=this.data.getIds({filter:i,order:t&&t.order})}else e=[];return e},n.prototype._onEvent=function(t,e,i){var s,o,n,r,a=e&&e.items,h=this.data,d=[],p=[],l=[];if(a&&h){switch(t){case"add":for(s=0,o=a.length;o>s;s++)n=a[s],r=this.get(n),r&&(this.ids[n]=!0,d.push(n));
-break;case"update":for(s=0,o=a.length;o>s;s++)n=a[s],r=this.get(n),r?this.ids[n]?p.push(n):(this.ids[n]=!0,d.push(n)):this.ids[n]&&(delete this.ids[n],l.push(n));break;case"remove":for(s=0,o=a.length;o>s;s++)n=a[s],this.ids[n]&&(delete this.ids[n],l.push(n))}d.length&&this._trigger("add",{items:d},i),p.length&&this._trigger("update",{items:p},i),l.length&&this._trigger("remove",{items:l},i)}},n.prototype.subscribe=o.prototype.subscribe,n.prototype.unsubscribe=o.prototype.unsubscribe,n.prototype._trigger=o.prototype._trigger,r.prototype.setOptions=function(t){C.extend(this.options,t)},r.prototype.update=function(){this._order(),this._stack()},r.prototype._order=function(){var t=this.parent.items;if(!t)throw Error("Cannot stack items: parent does not contain items");var e=[],i=0;C.forEach(t,function(t){t.visible&&(e[i]=t,i++)});var s=this.options.order||this.defaultOptions.order;if("function"!=typeof s)throw Error("Option order must be a function");e.sort(s),this.ordered=e},r.prototype._stack=function(){var t,e,i,s=this.ordered,o=this.options,n=o.orientation||this.defaultOptions.orientation,r="top"==n;for(i=o.margin&&void 0!==o.margin.item?o.margin.item:this.defaultOptions.margin.item,t=0,e=s.length;e>t;t++){var a=s[t],h=null;do h=this.checkOverlap(s,t,0,t-1,i),null!=h&&(a.top=r?h.top+h.height+i:h.top-a.height-i);while(h)}},r.prototype.checkOverlap=function(t,e,i,s,o){for(var n=this.collision,r=t[e],a=s;a>=i;a--){var h=t[a];if(n(r,h,o)&&a!=e)return h}return null},r.prototype.collision=function(t,e,i){return t.left-i<e.left+e.width&&t.left+t.width+i>e.left&&t.top-i<e.top+e.height&&t.top+t.height+i>e.top},a.prototype.setOptions=function(t){C.extend(this.options,t),(null!=t.start||null!=t.end)&&this.setRange(t.start,t.end)},a.prototype.subscribe=function(t,e,i){var s,o=this;if("horizontal"!=i&&"vertical"!=i)throw new TypeError('Unknown direction "'+i+'". '+'Choose "horizontal" or "vertical".');if("move"==e)s={component:t,event:e,direction:i,callback:function(t){o._onMouseDown(t,s)},params:{}},t.on("mousedown",s.callback),o.listeners.push(s);else{if("zoom"!=e)throw new TypeError('Unknown event "'+e+'". '+'Choose "move" or "zoom".');s={component:t,event:e,direction:i,callback:function(t){o._onMouseWheel(t,s)},params:{}},t.on("mousewheel",s.callback),o.listeners.push(s)}},a.prototype.on=function(t,e){E.addListener(this,t,e)},a.prototype._trigger=function(t){E.trigger(this,t,{start:this.start,end:this.end})},a.prototype.setRange=function(t,e){var i=this._applyRange(t,e);i&&(this._trigger("rangechange"),this._trigger("rangechanged"))},a.prototype._applyRange=function(t,e){var i,s=null!=t?C.cast(t,"Number"):this.start,o=null!=e?C.cast(e,"Number"):this.end;if(isNaN(s))throw Error('Invalid start "'+t+'"');if(isNaN(o))throw Error('Invalid end "'+e+'"');if(s>o&&(o=s),null!=this.options.min){var n=this.options.min.valueOf();n>s&&(i=n-s,s+=i,o+=i)}if(null!=this.options.max){var r=this.options.max.valueOf();o>r&&(i=o-r,s-=i,o-=i)}if(null!=this.options.zoomMin){var a=this.options.zoomMin.valueOf();0>a&&(a=0),a>o-s&&(this.end-this.start>a?(i=a-(o-s),s-=i/2,o+=i/2):(s=this.start,o=this.end))}if(null!=this.options.zoomMax){var h=this.options.zoomMax.valueOf();0>h&&(h=0),o-s>h&&(h>this.end-this.start?(i=o-s-h,s+=i/2,o-=i/2):(s=this.start,o=this.end))}var d=this.start!=s||this.end!=o;return this.start=s,this.end=o,d},a.prototype.getRange=function(){return{start:this.start,end:this.end}},a.prototype.conversion=function(t){return this.start,this.end,a.conversion(this.start,this.end,t)},a.conversion=function(t,e,i){return 0!=i&&0!=e-t?{offset:t,factor:i/(e-t)}:{offset:0,factor:1}},a.prototype._onMouseDown=function(t,e){t=t||window.event;var i=e.params,s=t.which?1==t.which:1==t.button;if(s){i.mouseX=C.getPageX(t),i.mouseY=C.getPageY(t),i.previousLeft=0,i.previousOffset=0,i.moved=!1,i.start=this.start,i.end=this.end;var o=e.component.frame;o&&(o.style.cursor="move");var n=this;i.onMouseMove||(i.onMouseMove=function(t){n._onMouseMove(t,e)},C.addEventListener(document,"mousemove",i.onMouseMove)),i.onMouseUp||(i.onMouseUp=function(t){n._onMouseUp(t,e)},C.addEventListener(document,"mouseup",i.onMouseUp)),C.preventDefault(t)}},a.prototype._onMouseMove=function(t,e){t=t||window.event;var i=e.params,s=C.getPageX(t),o=C.getPageY(t);void 0==i.mouseX&&(i.mouseX=s),void 0==i.mouseY&&(i.mouseY=o);var n=s-i.mouseX,r=o-i.mouseY,a="horizontal"==e.direction?n:r;Math.abs(a)>=1&&(i.moved=!0);var h=i.end-i.start,d="horizontal"==e.direction?e.component.width:e.component.height,p=-a/d*h;this._applyRange(i.start+p,i.end+p),this._trigger("rangechange"),C.preventDefault(t)},a.prototype._onMouseUp=function(t,e){t=t||window.event;var i=e.params;e.component.frame&&(e.component.frame.style.cursor="auto"),i.onMouseMove&&(C.removeEventListener(document,"mousemove",i.onMouseMove),i.onMouseMove=null),i.onMouseUp&&(C.removeEventListener(document,"mouseup",i.onMouseUp),i.onMouseUp=null),i.moved&&this._trigger("rangechanged")},a.prototype._onMouseWheel=function(t,e){t=t||window.event;var i=0;if(t.wheelDelta?i=t.wheelDelta/120:t.detail&&(i=-t.detail/3),i){var s=this,o=function(){var o=i/5,n=null,r=e.component.frame;if(r){var a,h;if("horizontal"==e.direction){a=e.component.width,h=s.conversion(a);var d=C.getAbsoluteLeft(r),p=C.getPageX(t);n=(p-d)/h.factor+h.offset}else{a=e.component.height,h=s.conversion(a);var l=C.getAbsoluteTop(r),u=C.getPageY(t);n=(l+a-u-l)/h.factor+h.offset}}s.zoom(o,n)};o()}C.preventDefault(t)},a.prototype.zoom=function(t,e){null==e&&(e=(this.start+this.end)/2),t>=1&&(t=.9),-1>=t&&(t=-.9),0>t&&(t/=1+t);var i=this.start-e,s=this.end-e,o=this.start-i*t,n=this.end-s*t;this.setRange(o,n)},a.prototype.move=function(t){var e=this.end-this.start,i=this.start+e*t,s=this.end+e*t;this.start=i,this.end=s},h.prototype.on=function(t,e,i){var s=t instanceof RegExp?t:RegExp(t.replace("*","\\w+")),o={id:C.randomUUID(),event:t,regexp:s,callback:"function"==typeof e?e:null,target:i};return this.subscriptions.push(o),o.id},h.prototype.off=function(t){for(var e=0;this.subscriptions.length>e;){var i=this.subscriptions[e],s=!0;if(t instanceof Object)for(var o in t)t.hasOwnProperty(o)&&t[o]!==i[o]&&(s=!1);else s=i.id==t;s?this.subscriptions.splice(e,1):e++}},h.prototype.emit=function(t,e,i){for(var s=0;this.subscriptions.length>s;s++){var o=this.subscriptions[s];o.regexp.test(t)&&o.callback&&o.callback(t,e,i)}},d.prototype.add=function(t){if(void 0==t.id)throw Error("Component has no field id");if(!(t instanceof p||t instanceof d))throw new TypeError("Component must be an instance of prototype Component or Controller");t.controller=this,this.components[t.id]=t},d.prototype.remove=function(t){var e;for(e in this.components)if(this.components.hasOwnProperty(e)&&(e==t||this.components[e]==t))break;e&&delete this.components[e]},d.prototype.requestReflow=function(t){if(t)this.reflow();else if(!this.reflowTimer){var e=this;this.reflowTimer=setTimeout(function(){e.reflowTimer=void 0,e.reflow()},0)}},d.prototype.requestRepaint=function(t){if(t)this.repaint();else if(!this.repaintTimer){var e=this;this.repaintTimer=setTimeout(function(){e.repaintTimer=void 0,e.repaint()},0)}},d.prototype.repaint=function(){function t(s,o){o in i||(s.depends&&s.depends.forEach(function(e){t(e,e.id)}),s.parent&&t(s.parent,s.parent.id),e=s.repaint()||e,i[o]=!0)}var e=!1;this.repaintTimer&&(clearTimeout(this.repaintTimer),this.repaintTimer=void 0);var i={};C.forEach(this.components,t),e&&this.reflow()},d.prototype.reflow=function(){function t(s,o){o in i||(s.depends&&s.depends.forEach(function(e){t(e,e.id)}),s.parent&&t(s.parent,s.parent.id),e=s.reflow()||e,i[o]=!0)}var e=!1;this.reflowTimer&&(clearTimeout(this.reflowTimer),this.reflowTimer=void 0);var i={};C.forEach(this.components,t),e&&this.repaint()},p.prototype.setOptions=function(t){t&&(C.extend(this.options,t),this.controller&&(this.requestRepaint(),this.requestReflow()))},p.prototype.getOption=function(t){var e;return this.options&&(e=this.options[t]),void 0===e&&this.defaultOptions&&(e=this.defaultOptions[t]),e},p.prototype.getContainer=function(){return null},p.prototype.getFrame=function(){return this.frame},p.prototype.repaint=function(){return!1},p.prototype.reflow=function(){return!1},p.prototype.hide=function(){return this.frame&&this.frame.parentNode?(this.frame.parentNode.removeChild(this.frame),!0):!1},p.prototype.show=function(){return this.frame&&this.frame.parentNode?!1:this.repaint()},p.prototype.requestRepaint=function(){if(!this.controller)throw Error("Cannot request a repaint: no controller configured");this.controller.requestRepaint()},p.prototype.requestReflow=function(){if(!this.controller)throw Error("Cannot request a reflow: no controller configured");this.controller.requestReflow()},l.prototype=new p,l.prototype.setOptions=p.prototype.setOptions,l.prototype.getContainer=function(){return this.frame},l.prototype.repaint=function(){var t=0,e=C.updateProperty,i=C.option.asSize,s=this.options,o=this.frame;if(!o){o=document.createElement("div"),o.className="panel";var n=s.className;n&&("function"==typeof n?C.addClassName(o,n()+""):C.addClassName(o,n+"")),this.frame=o,t+=1}if(!o.parentNode){if(!this.parent)throw Error("Cannot repaint panel: no parent attached");var r=this.parent.getContainer();if(!r)throw Error("Cannot repaint panel: parent has no container element");r.appendChild(o),t+=1}return t+=e(o.style,"top",i(s.top,"0px")),t+=e(o.style,"left",i(s.left,"0px")),t+=e(o.style,"width",i(s.width,"100%")),t+=e(o.style,"height",i(s.height,"100%")),t>0},l.prototype.reflow=function(){var t=0,e=C.updateProperty,i=this.frame;return i?(t+=e(this,"top",i.offsetTop),t+=e(this,"left",i.offsetLeft),t+=e(this,"width",i.offsetWidth),t+=e(this,"height",i.offsetHeight)):t+=1,t>0},u.prototype=new l,u.prototype.setOptions=p.prototype.setOptions,u.prototype.repaint=function(){var t=0,e=C.updateProperty,i=C.option.asSize,s=this.options,o=this.frame;if(!o){o=document.createElement("div"),o.className="graph panel";var n=s.className;n&&C.addClassName(o,C.option.asString(n)),this.frame=o,t+=1}if(!o.parentNode){if(!this.container)throw Error("Cannot repaint root panel: no container attached");this.container.appendChild(o),t+=1}return t+=e(o.style,"top",i(s.top,"0px")),t+=e(o.style,"left",i(s.left,"0px")),t+=e(o.style,"width",i(s.width,"100%")),t+=e(o.style,"height",i(s.height,"100%")),this._updateEventEmitters(),this._updateWatch(),t>0},u.prototype.reflow=function(){var t=0,e=C.updateProperty,i=this.frame;return i?(t+=e(this,"top",i.offsetTop),t+=e(this,"left",i.offsetLeft),t+=e(this,"width",i.offsetWidth),t+=e(this,"height",i.offsetHeight)):t+=1,t>0},u.prototype._updateWatch=function(){var t=this.getOption("autoResize");t?this._watch():this._unwatch()},u.prototype._watch=function(){var t=this;this._unwatch();var e=function(){var e=t.getOption("autoResize");return e?(t.frame&&(t.frame.clientWidth!=t.width||t.frame.clientHeight!=t.height)&&t.requestReflow(),void 0):(t._unwatch(),void 0)};C.addEventListener(window,"resize",e),this.watchTimer=setInterval(e,1e3)},u.prototype._unwatch=function(){this.watchTimer&&(clearInterval(this.watchTimer),this.watchTimer=void 0)},u.prototype.on=function(t,e){var i=this.listeners[t];i||(i=[],this.listeners[t]=i),i.push(e),this._updateEventEmitters()},u.prototype._updateEventEmitters=function(){if(this.listeners){var t=this;C.forEach(this.listeners,function(e,i){if(t.emitters||(t.emitters={}),!(i in t.emitters)){var s=t.frame;if(s){var o=function(t){e.forEach(function(e){e(t)})};t.emitters[i]=o,C.addEventListener(s,i,o)}}})}},c.prototype=new p,c.prototype.setOptions=p.prototype.setOptions,c.prototype.setRange=function(t){if(!(t instanceof a||t&&t.start&&t.end))throw new TypeError("Range must be an instance of Range, or an object containing start and end.");this.range=t},c.prototype.toTime=function(t){var e=this.conversion;return new Date(t/e.factor+e.offset)},c.prototype.toScreen=function(t){var e=this.conversion;return(t.valueOf()-e.offset)*e.factor},c.prototype.repaint=function(){var t=0,e=C.updateProperty,i=C.option.asSize,s=this.options,o=this.getOption("orientation"),n=this.props,r=this.step,a=this.frame;if(a||(a=document.createElement("div"),this.frame=a,t+=1),a.className="axis "+o,!a.parentNode){if(!this.parent)throw Error("Cannot repaint time axis: no parent attached");var h=this.parent.getContainer();if(!h)throw Error("Cannot repaint time axis: parent has no container element");h.appendChild(a),t+=1}var d=a.parentNode;if(d){var p=a.nextSibling;d.removeChild(a);var l="bottom"==o&&this.props.parentHeight&&this.height?this.props.parentHeight-this.height+"px":"0px";if(t+=e(a.style,"top",i(s.top,l)),t+=e(a.style,"left",i(s.left,"0px")),t+=e(a.style,"width",i(s.width,"100%")),t+=e(a.style,"height",i(s.height,this.height+"px")),this._repaintMeasureChars(),this.step){this._repaintStart(),r.first();for(var u=void 0,c=0;r.hasNext()&&1e3>c;){c++;var f=r.getCurrent(),m=this.toScreen(f),g=r.isMajor();this.getOption("showMinorLabels")&&this._repaintMinorText(m,r.getLabelMinor()),g&&this.getOption("showMajorLabels")?(m>0&&(void 0==u&&(u=m),this._repaintMajorText(m,r.getLabelMajor())),this._repaintMajorLine(m)):this._repaintMinorLine(m),r.next()}if(this.getOption("showMajorLabels")){var v=this.toTime(0),y=r.getLabelMajor(v),w=y.length*(n.majorCharWidth||10)+10;(void 0==u||u>w)&&this._repaintMajorText(0,y)}this._repaintEnd()}this._repaintLine(),p?d.insertBefore(a,p):d.appendChild(a)}return t>0},c.prototype._repaintStart=function(){var t=this.dom,e=t.redundant;e.majorLines=t.majorLines,e.majorTexts=t.majorTexts,e.minorLines=t.minorLines,e.minorTexts=t.minorTexts,t.majorLines=[],t.majorTexts=[],t.minorLines=[],t.minorTexts=[]},c.prototype._repaintEnd=function(){C.forEach(this.dom.redundant,function(t){for(;t.length;){var e=t.pop();e&&e.parentNode&&e.parentNode.removeChild(e)}})},c.prototype._repaintMinorText=function(t,e){var i=this.dom.redundant.minorTexts.shift();if(!i){var s=document.createTextNode("");i=document.createElement("div"),i.appendChild(s),i.className="text minor",this.frame.appendChild(i)}this.dom.minorTexts.push(i),i.childNodes[0].nodeValue=e,i.style.left=t+"px",i.style.top=this.props.minorLabelTop+"px"},c.prototype._repaintMajorText=function(t,e){var i=this.dom.redundant.majorTexts.shift();if(!i){var s=document.createTextNode(e);i=document.createElement("div"),i.className="text major",i.appendChild(s),this.frame.appendChild(i)}this.dom.majorTexts.push(i),i.childNodes[0].nodeValue=e,i.style.top=this.props.majorLabelTop+"px",i.style.left=t+"px"},c.prototype._repaintMinorLine=function(t){var e=this.dom.redundant.minorLines.shift();e||(e=document.createElement("div"),e.className="grid vertical minor",this.frame.appendChild(e)),this.dom.minorLines.push(e);var i=this.props;e.style.top=i.minorLineTop+"px",e.style.height=i.minorLineHeight+"px",e.style.left=t-i.minorLineWidth/2+"px"},c.prototype._repaintMajorLine=function(t){var e=this.dom.redundant.majorLines.shift();e||(e=document.createElement("DIV"),e.className="grid vertical major",this.frame.appendChild(e)),this.dom.majorLines.push(e);var i=this.props;e.style.top=i.majorLineTop+"px",e.style.left=t-i.majorLineWidth/2+"px",e.style.height=i.majorLineHeight+"px"},c.prototype._repaintLine=function(){var t=this.dom.line,e=this.frame;this.options,this.getOption("showMinorLabels")||this.getOption("showMajorLabels")?(t?(e.removeChild(t),e.appendChild(t)):(t=document.createElement("div"),t.className="grid horizontal major",e.appendChild(t),this.dom.line=t),t.style.top=this.props.lineTop+"px"):t&&axis.parentElement&&(e.removeChild(axis.line),delete this.dom.line)},c.prototype._repaintMeasureChars=function(){var t,e=this.dom;if(!e.measureCharMinor){t=document.createTextNode("0");var i=document.createElement("DIV");i.className="text minor measure",i.appendChild(t),this.frame.appendChild(i),e.measureCharMinor=i}if(!e.measureCharMajor){t=document.createTextNode("0");var s=document.createElement("DIV");s.className="text major measure",s.appendChild(t),this.frame.appendChild(s),e.measureCharMajor=s}},c.prototype.reflow=function(){var t=0,e=C.updateProperty,i=this.frame,s=this.range;if(!s)throw Error("Cannot repaint time axis: no range configured");if(i){t+=e(this,"top",i.offsetTop),t+=e(this,"left",i.offsetLeft);var o=this.props,n=this.getOption("showMinorLabels"),r=this.getOption("showMajorLabels"),a=this.dom.measureCharMinor,h=this.dom.measureCharMajor;a&&(o.minorCharHeight=a.clientHeight,o.minorCharWidth=a.clientWidth),h&&(o.majorCharHeight=h.clientHeight,o.majorCharWidth=h.clientWidth);var d=i.parentNode?i.parentNode.offsetHeight:0;switch(d!=o.parentHeight&&(o.parentHeight=d,t+=1),this.getOption("orientation")){case"bottom":o.minorLabelHeight=n?o.minorCharHeight:0,o.majorLabelHeight=r?o.majorCharHeight:0,o.minorLabelTop=0,o.majorLabelTop=o.minorLabelTop+o.minorLabelHeight,o.minorLineTop=-this.top,o.minorLineHeight=Math.max(this.top+o.majorLabelHeight,0),o.minorLineWidth=1,o.majorLineTop=-this.top,o.majorLineHeight=Math.max(this.top+o.minorLabelHeight+o.majorLabelHeight,0),o.majorLineWidth=1,o.lineTop=0;break;case"top":o.minorLabelHeight=n?o.minorCharHeight:0,o.majorLabelHeight=r?o.majorCharHeight:0,o.majorLabelTop=0,o.minorLabelTop=o.majorLabelTop+o.majorLabelHeight,o.minorLineTop=o.minorLabelTop,o.minorLineHeight=Math.max(d-o.majorLabelHeight-this.top),o.minorLineWidth=1,o.majorLineTop=0,o.majorLineHeight=Math.max(d-this.top),o.majorLineWidth=1,o.lineTop=o.majorLabelHeight+o.minorLabelHeight;break;default:throw Error('Unkown orientation "'+this.getOption("orientation")+'"')}var p=o.minorLabelHeight+o.majorLabelHeight;t+=e(this,"width",i.offsetWidth),t+=e(this,"height",p),this._updateConversion();var l=C.cast(s.start,"Date"),u=C.cast(s.end,"Date"),c=this.toTime(5*(o.minorCharWidth||10))-this.toTime(0);this.step=new TimeStep(l,u,c),t+=e(o.range,"start",l.valueOf()),t+=e(o.range,"end",u.valueOf()),t+=e(o.range,"minimumStep",c.valueOf())}return t>0},c.prototype._updateConversion=function(){var t=this.range;if(!t)throw Error("No range configured");this.conversion=t.conversion?t.conversion(this.width):a.conversion(t.start,t.end,this.width)},f.prototype=new l,f.types={box:g,range:y,point:v},f.prototype.setOptions=p.prototype.setOptions,f.prototype.setRange=function(t){if(!(t instanceof a||t&&t.start&&t.end))throw new TypeError("Range must be an instance of Range, or an object containing start and end.");this.range=t},f.prototype.repaint=function(){var t=0,e=C.updateProperty,i=C.option.asSize,s=this.options,o=this.getOption("orientation"),n=this.defaultOptions,r=this.frame;if(!r){r=document.createElement("div"),r.className="itemset";var a=s.className;a&&C.addClassName(r,C.option.asString(a));var h=document.createElement("div");h.className="background",r.appendChild(h),this.dom.background=h;var d=document.createElement("div");d.className="foreground",r.appendChild(d),this.dom.foreground=d;var p=document.createElement("div");p.className="itemset-axis",this.dom.axis=p,this.frame=r,t+=1}if(!this.parent)throw Error("Cannot repaint itemset: no parent attached");var l=this.parent.getContainer();if(!l)throw Error("Cannot repaint itemset: parent has no container element");r.parentNode||(l.appendChild(r),t+=1),this.dom.axis.parentNode||(l.appendChild(this.dom.axis),t+=1),t+=e(r.style,"left",i(s.left,"0px")),t+=e(r.style,"top",i(s.top,"0px")),t+=e(r.style,"width",i(s.width,"100%")),t+=e(r.style,"height",i(s.height,this.height+"px")),t+=e(this.dom.axis.style,"left",i(s.left,"0px")),t+=e(this.dom.axis.style,"width",i(s.width,"100%")),t+="bottom"==o?e(this.dom.axis.style,"top",this.height+this.top+"px"):e(this.dom.axis.style,"top",this.top+"px"),this._updateConversion();var u=this,c=this.queue,m=this.itemsData,g=this.items,v={fields:[m&&m.fieldId||"id","start","end","content","type"]};return Object.keys(c).forEach(function(e){var i=c[e],o=g[e];switch(i){case"add":case"update":var r=m&&m.get(e,v);if(r){var a=r.type||r.start&&r.end&&"range"||"box",h=f.types[a];if(o&&(h&&o instanceof h?(o.data=r,t++):(t+=o.hide(),o=null)),!o){if(!h)throw new TypeError('Unknown item type "'+a+'"');o=new h(u,r,s,n),t++}o.repaint(),g[e]=o}delete c[e];break;case"remove":o&&(t+=o.hide()),delete g[e],delete c[e];break;default:console.log('Error: unknown action "'+i+'"')}}),C.forEach(this.items,function(e){e.visible?(t+=e.show(),e.reposition()):t+=e.hide()}),t>0},f.prototype.getForeground=function(){return this.dom.foreground},f.prototype.getBackground=function(){return this.dom.background},f.prototype.getAxis=function(){return this.dom.axis},f.prototype.reflow=function(){var t=0,e=this.options,i=e.margin&&e.margin.axis||this.defaultOptions.margin.axis,s=e.margin&&e.margin.item||this.defaultOptions.margin.item,o=C.updateProperty,n=C.option.asNumber,r=C.option.asSize,a=this.frame;if(a){this._updateConversion(),C.forEach(this.items,function(e){t+=e.reflow()}),this.stack.update();var h,d=n(e.maxHeight),p=null!=r(e.height);if(p)h=a.offsetHeight;else{var l=this.stack.ordered;if(l.length){var u=l[0].top,c=l[0].top+l[0].height;C.forEach(l,function(t){u=Math.min(u,t.top),c=Math.max(c,t.top+t.height)}),h=c-u+i+s}else h=i+s}null!=d&&(h=Math.min(h,d)),t+=o(this,"height",h),t+=o(this,"top",a.offsetTop),t+=o(this,"left",a.offsetLeft),t+=o(this,"width",a.offsetWidth)}else t+=1;return t>0},f.prototype.hide=function(){var t=!1;return this.frame&&this.frame.parentNode&&(this.frame.parentNode.removeChild(this.frame),t=!0),this.dom.axis&&this.dom.axis.parentNode&&(this.dom.axis.parentNode.removeChild(this.dom.axis),t=!0),t},f.prototype.setItems=function(t){var e,i=this,s=this.itemsData;if(s&&(C.forEach(this.listeners,function(t,e){s.unsubscribe(e,t)}),e=s.getIds(),this._onRemove(e)),t){if(!(t instanceof o||t instanceof n))throw new TypeError("Data must be an instance of DataSet");this.itemsData=t}else this.itemsData=null;if(this.itemsData){var r=this.id;C.forEach(this.listeners,function(t,e){i.itemsData.subscribe(e,t,r)}),e=this.itemsData.getIds(),this._onAdd(e)}},f.prototype.getItems=function(){return this.itemsData},f.prototype._onUpdate=function(t){this._toQueue("update",t)},f.prototype._onAdd=function(t){this._toQueue("add",t)},f.prototype._onRemove=function(t){this._toQueue("remove",t)},f.prototype._toQueue=function(t,e){var i=this.queue;e.forEach(function(e){i[e]=t}),this.controller&&this.requestRepaint()},f.prototype._updateConversion=function(){var t=this.range;if(!t)throw Error("No range configured");this.conversion=t.conversion?t.conversion(this.width):a.conversion(t.start,t.end,this.width)},f.prototype.toTime=function(t){var e=this.conversion;return new Date(t/e.factor+e.offset)},f.prototype.toScreen=function(t){var e=this.conversion;return(t.valueOf()-e.offset)*e.factor},m.prototype.select=function(){this.selected=!0},m.prototype.unselect=function(){this.selected=!1},m.prototype.show=function(){return!1},m.prototype.hide=function(){return!1},m.prototype.repaint=function(){return!1},m.prototype.reflow=function(){return!1},g.prototype=new m(null,null),g.prototype.select=function(){this.selected=!0},g.prototype.unselect=function(){this.selected=!1},g.prototype.repaint=function(){var t=!1,e=this.dom;if(e||(this._create(),e=this.dom,t=!0),e){if(!this.parent)throw Error("Cannot repaint item: no parent attached");var i=this.parent.getForeground();if(!i)throw Error("Cannot repaint time axis: parent has no foreground container element");var s=this.parent.getBackground();if(!s)throw Error("Cannot repaint time axis: parent has no background container element");var o=this.parent.getAxis();if(!s)throw Error("Cannot repaint time axis: parent has no axis container element");if(e.box.parentNode||(i.appendChild(e.box),t=!0),e.line.parentNode||(s.appendChild(e.line),t=!0),e.dot.parentNode||(o.appendChild(e.dot),t=!0),this.data.content!=this.content){if(this.content=this.data.content,this.content instanceof Element)e.content.innerHTML="",e.content.appendChild(this.content);else{if(void 0==this.data.content)throw Error('Property "content" missing in item '+this.data.id);e.content.innerHTML=this.content}t=!0}var n=(this.data.className?" "+this.data.className:"")+(this.selected?" selected":"");this.className!=n&&(this.className=n,e.box.className="item box"+n,e.line.className="item line"+n,e.dot.className="item dot"+n,t=!0)}return t},g.prototype.show=function(){return this.dom&&this.dom.box.parentNode?!1:this.repaint()},g.prototype.hide=function(){var t=!1,e=this.dom;return e&&(e.box.parentNode&&(e.box.parentNode.removeChild(e.box),t=!0),e.line.parentNode&&e.line.parentNode.removeChild(e.line),e.dot.parentNode&&e.dot.parentNode.removeChild(e.dot)),t},g.prototype.reflow=function(){var t,e,i,s,o,n,r,a,h,d,p,l,u=0;if(void 0==this.data.start)throw Error('Property "start" missing in item '+this.data.id);if(p=this.data,l=this.parent&&this.parent.range,this.visible=p&&l?p.start>l.start&&p.start<l.end:!1,this.visible)if(e=this.dom)if(t=C.updateProperty,i=this.props,s=this.options,n=this.parent.toScreen(this.data.start),r=s.align||this.defaultOptions.align,o=s.margin&&s.margin.axis||this.defaultOptions.margin.axis,a=s.orientation||this.defaultOptions.orientation,u+=t(i.dot,"height",e.dot.offsetHeight),u+=t(i.dot,"width",e.dot.offsetWidth),u+=t(i.line,"width",e.line.offsetWidth),u+=t(i.line,"height",e.line.offsetHeight),u+=t(i.line,"top",e.line.offsetTop),u+=t(this,"width",e.box.offsetWidth),u+=t(this,"height",e.box.offsetHeight),d="right"==r?n-this.width:"left"==r?n:n-this.width/2,u+=t(this,"left",d),u+=t(i.line,"left",n-i.line.width/2),u+=t(i.dot,"left",n-i.dot.width/2),u+=t(i.dot,"top",-i.dot.height/2),"top"==a)h=o,u+=t(this,"top",h);else{var c=this.parent.height;h=c-this.height-o,u+=t(this,"top",h)}else u+=1;return u>0},g.prototype._create=function(){var t=this.dom;t||(this.dom=t={},t.box=document.createElement("DIV"),t.content=document.createElement("DIV"),t.content.className="content",t.box.appendChild(t.content),t.line=document.createElement("DIV"),t.line.className="line",t.dot=document.createElement("DIV"),t.dot.className="dot")},g.prototype.reposition=function(){var t=this.dom,e=this.props,i=this.options.orientation||this.defaultOptions.orientation;if(t){var s=t.box,o=t.line,n=t.dot;s.style.left=this.left+"px",s.style.top=this.top+"px",o.style.left=e.line.left+"px","top"==i?(o.style.top="0px",o.style.height=this.top+"px"):(o.style.top=this.top+this.height+"px",o.style.height=Math.max(this.parent.height-this.top-this.height+this.props.dot.height/2,0)+"px"),n.style.left=e.dot.left+"px",n.style.top=e.dot.top+"px"}},v.prototype=new m(null,null),v.prototype.select=function(){this.selected=!0},v.prototype.unselect=function(){this.selected=!1},v.prototype.repaint=function(){var t=!1,e=this.dom;if(e||(this._create(),e=this.dom,t=!0),e){if(!this.parent)throw Error("Cannot repaint item: no parent attached");var i=this.parent.getForeground();if(!i)throw Error("Cannot repaint time axis: parent has no foreground container element");if(e.point.parentNode||(i.appendChild(e.point),i.appendChild(e.point),t=!0),this.data.content!=this.content){if(this.content=this.data.content,this.content instanceof Element)e.content.innerHTML="",e.content.appendChild(this.content);else{if(void 0==this.data.content)throw Error('Property "content" missing in item '+this.data.id);e.content.innerHTML=this.content}t=!0}var s=(this.data.className?" "+this.data.className:"")+(this.selected?" selected":"");this.className!=s&&(this.className=s,e.point.className="item point"+s,t=!0)}return t},v.prototype.show=function(){return this.dom&&this.dom.point.parentNode?!1:this.repaint()},v.prototype.hide=function(){var t=!1,e=this.dom;return e&&e.point.parentNode&&(e.point.parentNode.removeChild(e.point),t=!0),t},v.prototype.reflow=function(){var t,e,i,s,o,n,r,a,h,d,p=0;if(void 0==this.data.start)throw Error('Property "start" missing in item '+this.data.id);if(h=this.data,d=this.parent&&this.parent.range,this.visible=h&&d?h.start>d.start&&h.start<d.end:!1,this.visible)if(e=this.dom){if(t=C.updateProperty,i=this.props,s=this.options,n=s.orientation||this.defaultOptions.orientation,o=s.margin&&s.margin.axis||this.defaultOptions.margin.axis,r=this.parent.toScreen(this.data.start),p+=t(this,"width",e.point.offsetWidth),p+=t(this,"height",e.point.offsetHeight),p+=t(i.dot,"width",e.dot.offsetWidth),p+=t(i.dot,"height",e.dot.offsetHeight),p+=t(i.content,"height",e.content.offsetHeight),"top"==n)a=o;else{var l=this.parent.height;a=Math.max(l-this.height-o,0)}p+=t(this,"top",a),p+=t(this,"left",r-i.dot.width/2),p+=t(i.content,"marginLeft",1.5*i.dot.width),p+=t(i.dot,"top",(this.height-i.dot.height)/2)}else p+=1;return p>0},v.prototype._create=function(){var t=this.dom;t||(this.dom=t={},t.point=document.createElement("div"),t.content=document.createElement("div"),t.content.className="content",t.point.appendChild(t.content),t.dot=document.createElement("div"),t.dot.className="dot",t.point.appendChild(t.dot))},v.prototype.reposition=function(){var t=this.dom,e=this.props;t&&(t.point.style.top=this.top+"px",t.point.style.left=this.left+"px",t.content.style.marginLeft=e.content.marginLeft+"px",t.dot.style.top=e.dot.top+"px")},y.prototype=new m(null,null),y.prototype.select=function(){this.selected=!0},y.prototype.unselect=function(){this.selected=!1},y.prototype.repaint=function(){var t=!1,e=this.dom;if(e||(this._create(),e=this.dom,t=!0),e){if(!this.parent)throw Error("Cannot repaint item: no parent attached");var i=this.parent.getForeground();if(!i)throw Error("Cannot repaint time axis: parent has no foreground container element");if(e.box.parentNode||(i.appendChild(e.box),t=!0),this.data.content!=this.content){if(this.content=this.data.content,this.content instanceof Element)e.content.innerHTML="",e.content.appendChild(this.content);else{if(void 0==this.data.content)throw Error('Property "content" missing in item '+this.data.id);e.content.innerHTML=this.content}t=!0}var s=this.data.className?""+this.data.className:"";this.className!=s&&(this.className=s,e.box.className="item range"+s,t=!0)}return t},y.prototype.show=function(){return this.dom&&this.dom.box.parentNode?!1:this.repaint()},y.prototype.hide=function(){var t=!1,e=this.dom;return e&&e.box.parentNode&&(e.box.parentNode.removeChild(e.box),t=!0),t},y.prototype.reflow=function(){var t,e,i,s,o,n,r,a,h,d,p,l,u,c,f,m,g=0;if(void 0==this.data.start)throw Error('Property "start" missing in item '+this.data.id);if(void 0==this.data.end)throw Error('Property "end" missing in item '+this.data.id);return h=this.data,d=this.parent&&this.parent.range,this.visible=h&&d?h.start<d.end&&h.end>d.start:!1,this.visible&&(t=this.dom,t?(e=this.props,i=this.options,n=this.parent,r=n.toScreen(this.data.start),a=n.toScreen(this.data.end),p=C.updateProperty,l=t.box,u=n.width,f=i.orientation||this.defaultOptions.orientation,s=i.margin&&i.margin.axis||this.defaultOptions.margin.axis,o=i.padding||this.defaultOptions.padding,g+=p(e.content,"width",t.content.offsetWidth),g+=p(this,"height",l.offsetHeight),-u>r&&(r=-u),a>2*u&&(a=2*u),c=0>r?Math.min(-r,a-r-e.content.width-2*o):0,g+=p(e.content,"left",c),"top"==f?(m=s,g+=p(this,"top",m)):(m=n.height-this.height-s,g+=p(this,"top",m)),g+=p(this,"left",r),g+=p(this,"width",Math.max(a-r,1))):g+=1),g>0},y.prototype._create=function(){var t=this.dom;t||(this.dom=t={},t.box=document.createElement("div"),t.content=document.createElement("div"),t.content.className="content",t.box.appendChild(t.content))},y.prototype.reposition=function(){var t=this.dom,e=this.props;t&&(t.box.style.top=this.top+"px",t.box.style.left=this.left+"px",t.box.style.width=this.width+"px",t.content.style.left=e.content.left+"px")},w.prototype=new p,w.prototype.setOptions=p.prototype.setOptions,w.prototype.getContainer=function(){return this.parent.getContainer()},w.prototype.setItems=function(t){if(this.itemset&&(this.itemset.hide(),this.itemset.setItems(),this.parent.controller.remove(this.itemset),this.itemset=null),t){var e=this.groupId,i=Object.create(this.options);this.itemset=new f(this,null,i),this.itemset.setRange(this.parent.range),this.view=new n(t,{filter:function(t){return t.group==e
-}}),this.itemset.setItems(this.view),this.parent.controller.add(this.itemset)}},w.prototype.repaint=function(){return!1},w.prototype.reflow=function(){var t=0,e=C.updateProperty;return t+=e(this,"top",this.itemset?this.itemset.top:0),t+=e(this,"height",this.itemset?this.itemset.height:0),t>0},b.prototype=new l,b.prototype.setOptions=p.prototype.setOptions,b.prototype.setRange=function(){},b.prototype.setItems=function(t){this.itemsData=t;for(var e in this.groups)if(this.groups.hasOwnProperty(e)){var i=this.groups[e];i.setItems(t)}},b.prototype.getItems=function(){return this.itemsData},b.prototype.setRange=function(t){this.range=t},b.prototype.setGroups=function(t){var e,i=this;if(this.groupsData&&(C.forEach(this.listeners,function(t,e){i.groupsData.unsubscribe(e,t)}),e=this.groupsData.getIds(),this._onRemove(e)),t?t instanceof o?this.groupsData=t:(this.groupsData=new o({fieldTypes:{start:"Date",end:"Date"}}),this.groupsData.add(t)):this.groupsData=null,this.groupsData){var s=this.id;C.forEach(this.listeners,function(t,e){i.groupsData.subscribe(e,t,s)}),e=this.groupsData.getIds(),this._onAdd(e)}},b.prototype.getGroups=function(){return this.groupsData},b.prototype.repaint=function(){var t=0,e=C.updateProperty,i=C.option.asSize,s=this.options,o=this.frame;if(!o){o=document.createElement("div"),o.className="groupset";var n=s.className;n&&C.addClassName(o,C.option.asString(n)),this.frame=o,t+=1}if(!this.parent)throw Error("Cannot repaint groupset: no parent attached");var r=this.parent.getContainer();if(!r)throw Error("Cannot repaint groupset: parent has no container element");o.parentNode||(r.appendChild(o),t+=1),t+=e(o.style,"height",i(s.height,this.height+"px")),t+=e(o.style,"top",i(s.top,"0px")),t+=e(o.style,"left",i(s.left,"0px")),t+=e(o.style,"width",i(s.width,"100%"));var a=this,h=this.queue,d=this.groups,p=this.groupsData,l=Object.keys(h);if(l.length){l.forEach(function(t){var e=h[t],i=d[t];switch(e){case"add":case"update":if(!i){var s=Object.create(a.options);i=new w(a,t,s),i.setItems(a.itemsData),d[t]=i,a.controller.add(i)}i.data=p.get(t),delete h[t];break;case"remove":i&&(i.setItems(),delete d[t],a.controller.remove(i)),delete h[t];break;default:console.log('Error: unknown action "'+e+'"')}});for(var u=this.groupsData.getIds({order:this.options.groupsOrder}),c=0;u.length>c;c++)(function(t,e){var i=0;e&&(i=function(){return e.top+e.height}),t.setOptions({top:i})})(d[u[c]],d[u[c-1]]);t++}return t>0},b.prototype.getContainer=function(){return this.frame},b.prototype.reflow=function(){var t=0,e=this.options,i=C.updateProperty,s=C.option.asNumber,o=C.option.asSize,n=this.frame;if(n){var r,a=s(e.maxHeight),h=null!=o(e.height);if(h)r=n.offsetHeight;else{r=0;for(var d in this.groups)if(this.groups.hasOwnProperty(d)){var p=this.groups[d];r+=p.height}}null!=a&&(r=Math.min(r,a)),t+=i(this,"height",r),t+=i(this,"top",n.offsetTop),t+=i(this,"left",n.offsetLeft),t+=i(this,"width",n.offsetWidth)}return t>0},b.prototype.hide=function(){return this.frame&&this.frame.parentNode?(this.frame.parentNode.removeChild(this.frame),!0):!1},b.prototype.show=function(){return this.frame&&this.frame.parentNode?!1:this.repaint()},b.prototype._onUpdate=function(t){this._toQueue(t,"update")},b.prototype._onAdd=function(t){this._toQueue(t,"add")},b.prototype._onRemove=function(t){this._toQueue(t,"remove")},b.prototype._toQueue=function(t,e){var i=this.queue;t.forEach(function(t){i[t]=e}),this.controller&&this.requestRepaint()},x.prototype.setOptions=function(t){t&&C.extend(this.options,t),this.controller.reflow(),this.controller.repaint()},x.prototype.setItems=function(t){var e,i=null==this.itemsData;if(t?t instanceof o&&(e=t):e=null,t instanceof o||(e=new o({fieldTypes:{start:"Date",end:"Date"}}),e.add(t)),this.itemsData=e,this.content.setItems(e),i&&(void 0==this.options.start||void 0==this.options.end)){var s=this.getItemRange(),n=s.min,r=s.max;if(null!=n&&null!=r){var a=r.valueOf()-n.valueOf();n=new Date(n.valueOf()-.05*a),r=new Date(r.valueOf()+.05*a)}void 0!=this.options.start&&(n=new Date(this.options.start.valueOf())),void 0!=this.options.end&&(r=new Date(this.options.end.valueOf())),(null!=n||null!=r)&&this.range.setRange(n,r)}},x.prototype.setGroups=function(t){var e=this;this.groupsData=t;var i=this.groupsData?b:f;if(!(this.content instanceof i)){this.content&&(this.content.hide(),this.content.setItems&&this.content.setItems(),this.content.setGroups&&this.content.setGroups(),this.controller.remove(this.content));var s=Object.create(this.options);C.extend(s,{top:function(){return"top"==e.options.orientation?e.timeaxis.height:e.root.height-e.timeaxis.height-e.content.height},height:function(){return e.options.height?e.root.height-e.timeaxis.height:null},maxHeight:function(){if(e.options.maxHeight){if(!C.isNumber(e.options.maxHeight))throw new TypeError("Number expected for property maxHeight");return e.options.maxHeight-e.timeaxis.height}return null}}),this.content=new i(this.root,[this.timeaxis],s),this.content.setRange&&this.content.setRange(this.range),this.content.setItems&&this.content.setItems(this.itemsData),this.content.setGroups&&this.content.setGroups(this.groupsData),this.controller.add(this.content)}},x.prototype.getItemRange=function(){var t=this.itemsData,e=null,i=null;if(t){var s=t.min("start");e=s?s.start.valueOf():null;var o=t.max("start");o&&(i=o.start.valueOf());var n=t.max("end");n&&(i=null==i?n.end.valueOf():Math.max(i,n.end.valueOf()))}return{min:null!=e?new Date(e):null,max:null!=i?new Date(i):null}},_.prototype.setData=function(t){t.options&&this.setOptions(t.options),this.setNodes(t.nodes),this.setEdges(t.edges),this._reposition(),this.stabilize&&this._doStabilize(),this.start();var e=this,i=function(){e._redraw()};this.images.setOnloadCallback(i),this.trigger("ready")},_.prototype.setOptions=function(t){if(t){if(void 0!=t.width&&(this.width=t.width),void 0!=t.height&&(this.height=t.height),void 0!=t.stabilize&&(this.stabilize=t.stabilize),void 0!=t.selectable&&(this.selectable=t.selectable),t.edges){for(var e in t.edges)t.edges.hasOwnProperty(e)&&(this.constants.edges[e]=t.edges[e]);void 0!=t.edges.length&&t.nodes&&void 0==t.nodes.distance&&(this.constants.edges.length=t.edges.length,this.constants.nodes.distance=1.25*t.edges.length),t.edges.fontColor||(this.constants.edges.fontColor=t.edges.color),void 0!=t.edges.dashlength&&(this.constants.edges.dashlength=t.edges.dashlength),void 0!=t.edges.dashgap&&(this.constants.edges.dashgap=t.edges.dashgap),void 0!=t.edges.altdashlength&&(this.constants.edges.altdashlength=t.edges.altdashlength)}if(t.nodes)for(e in t.nodes)t.nodes.hasOwnProperty(e)&&(this.constants.nodes[e]=t.nodes[e]);if(t.groups)for(var i in t.groups)if(t.groups.hasOwnProperty(i)){var s=t.groups[i];this.groups.add(i,s)}this._setBackgroundColor(t.backgroundColor)}this._setSize(this.width,this.height),this._setTranslation(0,0),this._setScale(1)},_.prototype.trigger=function(t,e){E.trigger(this,t,e),"undefined"!=typeof google&&google.visualization&&google.visualization.events&&google.visualization.events.trigger(this,t,e)},_.prototype._create=function(){for(;this.containerElement.hasChildNodes();)this.containerElement.removeChild(this.containerElement.firstChild);if(this.frame=document.createElement("div"),this.frame.className="graph-frame",this.frame.style.position="relative",this.frame.style.overflow="hidden",this.frame.canvas=document.createElement("canvas"),this.frame.canvas.style.position="relative",this.frame.appendChild(this.frame.canvas),!this.frame.canvas.getContext){var t=document.createElement("DIV");t.style.color="red",t.style.fontWeight="bold",t.style.padding="10px",t.innerHTML="Error: your browser does not support HTML canvas",this.frame.canvas.appendChild(t)}var e=this,i=function(t){e._onMouseDown(t)},s=function(t){e._onMouseMoveTitle(t)},o=function(t){e._onMouseWheel(t)},n=function(t){e._onTouchStart(t)};L.util.addEventListener(this.frame.canvas,"mousedown",i),L.util.addEventListener(this.frame.canvas,"mousemove",s),L.util.addEventListener(this.frame.canvas,"mousewheel",o),L.util.addEventListener(this.frame.canvas,"touchstart",n),this.containerElement.appendChild(this.frame)},_.prototype._setBackgroundColor=function(t){var e="white",i="lightgray",s=1;if("string"==typeof t)e=t,i="none",s=0;else if("object"==typeof t)void 0!=t.fill&&(e=t.fill),void 0!=t.stroke&&(i=t.stroke),void 0!=t.strokeWidth&&(s=t.strokeWidth);else if(void 0!=t)throw"Unsupported type of backgroundColor";this.frame.style.boxSizing="border-box",this.frame.style.backgroundColor=e,this.frame.style.borderColor=i,this.frame.style.borderWidth=s+"px",this.frame.style.borderStyle="solid"},_.prototype._onMouseDown=function(t){if(t=t||window.event,this.selectable&&(this.leftButtonDown&&this._onMouseUp(t),this.leftButtonDown=t.which?1==t.which:1==t.button,this.leftButtonDown||this.touchDown)){var e=this;this.onmousemove||(this.onmousemove=function(t){e._onMouseMove(t)},L.util.addEventListener(document,"mousemove",e.onmousemove)),this.onmouseup||(this.onmouseup=function(t){e._onMouseUp(t)},L.util.addEventListener(document,"mouseup",e.onmouseup)),L.util.preventDefault(t),this.startMouseX=t.clientX||t.targetTouches[0].clientX,this.startMouseY=t.clientY||t.targetTouches[0].clientY,this.startFrameLeft=L.util.getAbsoluteLeft(this.frame.canvas),this.startFrameTop=L.util.getAbsoluteTop(this.frame.canvas),this.startTranslation=this._getTranslation(),this.ctrlKeyDown=t.ctrlKey,this.shiftKeyDown=t.shiftKey;var i={left:this._xToCanvas(this.startMouseX-this.startFrameLeft),top:this._yToCanvas(this.startMouseY-this.startFrameTop),right:this._xToCanvas(this.startMouseX-this.startFrameLeft),bottom:this._yToCanvas(this.startMouseY-this.startFrameTop)},s=this._getNodesOverlappingWith(i);if(this.startClickedObj=s.length>0?s[s.length-1]:void 0,this.startClickedObj){var o=this.nodes[this.startClickedObj.row];this.startClickedObj.xFixed=o.xFixed,this.startClickedObj.yFixed=o.yFixed,o.xFixed=!0,o.yFixed=!0,this.ctrlKeyDown&&o.isSelected()?this._unselectNodes([this.startClickedObj]):this._selectNodes([this.startClickedObj],this.ctrlKeyDown),this.moving||this._redraw()}else this.shiftKeyDown||(this.moved=!1)}},_.prototype._onMouseMove=function(t){if(t=t||window.event,this.selectable){var e=t.clientX||t.targetTouches&&t.targetTouches[0].clientX||0,i=t.clientY||t.targetTouches&&t.targetTouches[0].clientY||0;if(this.mouseX=e,this.mouseY=i,this.startClickedObj){var s=this.nodes[this.startClickedObj.row];this.startClickedObj.xFixed||(s.x=this._xToCanvas(e-this.startFrameLeft)),this.startClickedObj.yFixed||(s.y=this._yToCanvas(i-this.startFrameTop)),this.moving||(this.moving=!0,this.start())}else if(this.shiftKeyDown){void 0==this.frame.selRect&&(this.frame.selRect=document.createElement("DIV"),this.frame.appendChild(this.frame.selRect),this.frame.selRect.style.position="absolute",this.frame.selRect.style.border="1px dashed red");var o=Math.min(this.startMouseX,e)-this.startFrameLeft,n=Math.min(this.startMouseY,i)-this.startFrameTop,r=Math.max(this.startMouseX,e)-this.startFrameLeft,a=Math.max(this.startMouseY,i)-this.startFrameTop;this.frame.selRect.style.left=o+"px",this.frame.selRect.style.top=n+"px",this.frame.selRect.style.width=r-o+"px",this.frame.selRect.style.height=a-n+"px"}else{var h=e-this.startMouseX,d=i-this.startMouseY;this._setTranslation(this.startTranslation.x+h,this.startTranslation.y+d),this._redraw(),this.moved=!0}L.util.preventDefault(t)}},_.prototype._onMouseUp=function(t){if(t=t||window.event,this.selectable){this.onmousemove&&(L.util.removeEventListener(document,"mousemove",this.onmousemove),this.onmousemove=void 0),this.onmouseup&&(L.util.removeEventListener(document,"mouseup",this.onmouseup),this.onmouseup=void 0),L.util.preventDefault(t);var e=t.clientX||this.mouseX||0,i=t.clientY||this.mouseY||0,s=t?t.ctrlKey:window.event.ctrlKey;if(this.startClickedObj){var o=this.nodes[this.startClickedObj.row];o.xFixed=this.startClickedObj.xFixed,o.yFixed=this.startClickedObj.yFixed}else if(this.shiftKeyDown){var n={left:this._xToCanvas(Math.min(this.startMouseX,e)-this.startFrameLeft),top:this._yToCanvas(Math.min(this.startMouseY,i)-this.startFrameTop),right:this._xToCanvas(Math.max(this.startMouseX,e)-this.startFrameLeft),bottom:this._yToCanvas(Math.max(this.startMouseY,i)-this.startFrameTop)},r=this._getNodesOverlappingWith(n);this._selectNodes(r,s),this.redraw(),this.frame.selRect&&(this.frame.removeChild(this.frame.selRect),this.frame.selRect=void 0)}else this.ctrlKeyDown||this.moved||(this._unselectNodes(),this._redraw());this.leftButtonDown=!1,this.ctrlKeyDown=!1}},_.prototype._onMouseWheel=function(t){t=t||window.event;var e=t.clientX,i=t.clientY,s=0;if(t.wheelDelta?s=t.wheelDelta/120:t.detail&&(s=-t.detail/3),s){var o=s/10;0>s&&(o/=1-o);var n=this._getScale(),r=n*(1+o);.01>r&&(r=.01),r>10&&(r=10);var a=L.util.getAbsoluteLeft(this.frame.canvas),h=L.util.getAbsoluteTop(this.frame.canvas),d=e-a,p=i-h,l=this._getTranslation(),u=r/n,c=(1-u)*d+l.x*u,f=(1-u)*p+l.y*u;this._setScale(r),this._setTranslation(c,f),this._redraw()}L.util.preventDefault(t)},_.prototype._onMouseMoveTitle=function(t){t=t||window.event;var e=t.clientX,i=t.clientY;this.startFrameLeft=this.startFrameLeft||L.util.getAbsoluteLeft(this.frame.canvas),this.startFrameTop=this.startFrameTop||L.util.getAbsoluteTop(this.frame.canvas);var s=e-this.startFrameLeft,o=i-this.startFrameTop;this.popupNode&&this._checkHidePopup(s,o);var n=this,r=function(){n._checkShowPopup(s,o)};this.popupTimer&&clearInterval(this.popupTimer),this.leftButtonDown||(this.popupTimer=setTimeout(r,300))},_.prototype._checkShowPopup=function(t,e){var i,s,o={left:this._xToCanvas(t),top:this._yToCanvas(e),right:this._xToCanvas(t),bottom:this._yToCanvas(e)},n=this.popupNode;if(void 0==this.popupNode){var r=this.nodes;for(i=r.length-1;i>=0;i--){var a=r[i];if(void 0!=a.getTitle()&&a.isOverlappingWith(o)){this.popupNode=a;break}}}if(void 0==this.popupNode){var h=this.edges;for(i=0,s=h.length;s>i;i++){var d=h[i];if(void 0!=d.getTitle()&&d.isOverlappingWith(o)){this.popupNode=d;break}}}if(this.popupNode){if(this.popupNode!=n){var p=this;p.popup||(p.popup=new _.Popup(p.frame)),p.popup.setPosition(t-3,e-3),p.popup.setText(p.popupNode.getTitle()),p.popup.show()}}else this.popup&&this.popup.hide()},_.prototype._checkHidePopup=function(t,e){var i={left:t,top:e,right:t,bottom:e};this.popupNode&&this.popupNode.isOverlappingWith(i)||(this.popupNode=void 0,this.popup&&this.popup.hide())},_.prototype._onTouchStart=function(t){if(L.util.preventDefault(t),!this.touchDown){this.touchDown=!0;var e=this;this.ontouchmove||(this.ontouchmove=function(t){e._onTouchMove(t)},L.util.addEventListener(document,"touchmove",this.ontouchmove)),this.ontouchend||(this.ontouchend=function(t){e._onTouchEnd(t)},L.util.addEventListener(document,"touchend",this.ontouchend)),this._onMouseDown(t)}},_.prototype._onTouchMove=function(t){L.util.preventDefault(t),this._onMouseMove(t)},_.prototype._onTouchEnd=function(t){L.util.preventDefault(t),this.touchDown=!1,this.ontouchmove&&(L.util.removeEventListener(document,"touchmove",this.ontouchmove),this.ontouchmove=void 0),this.ontouchend&&(L.util.removeEventListener(document,"touchend",this.ontouchend),this.ontouchend=void 0),this._onMouseUp(t)},_.prototype._unselectNodes=function(t,e){var i,s,o,n=!1;if(t)for(i=0,s=t.length;s>i;i++){o=t[i].row,this.nodes[o].unselect();for(var r=0;this.selection.length>r;)this.selection[r].row==o?(this.selection.splice(r,1),n=!0):r++}else if(this.selection&&this.selection.length){for(i=0,s=this.selection.length;s>i;i++)o=this.selection[i].row,this.nodes[o].unselect(),n=!0;this.selection=[]}return!n||1!=e&&void 0!=e||this.trigger("select"),n},_.prototype._selectNodes=function(t,e){var i,s,o=!1,n=!0;if(t.length!=this.selection.length)n=!1;else for(i=0,s=Math.min(t.length,this.selection.length);s>i;i++)if(t[i].row!=this.selection[i].row){n=!1;break}if(n)return o;if(void 0==e||0==e){var r=!1;o=this._unselectNodes(void 0,r)}for(i=0,s=t.length;s>i;i++){for(var a=t[i].row,h=!1,d=0,p=this.selection.length;p>d;d++)if(this.selection[d].row==a){h=!0;break}h||(this.nodes[a].select(),this.selection.push(t[i]),o=!0)}return o&&this.trigger("select"),o},_.prototype._getNodesOverlappingWith=function(t){for(var e=[],i=0;this.nodes.length>i;i++)if(this.nodes[i].isOverlappingWith(t)){var s={row:i};e.push(s)}return e},_.prototype.getSelection=function(){for(var t=[],e=0;this.selection.length>e;e++){var i=this.selection[e].row;t.push({row:i})}return t},_.prototype.setSelection=function(t){var e,i,s;if(void 0==t.length)throw"Selection must be an array with objects";for(e=0,i=this.selection.length;i>e;e++)s=this.selection[e].row,this.nodes[s].unselect();for(this.selection=[],e=0,i=t.length;i>e;e++){if(s=t[e].row,void 0==s)throw"Parameter row missing in selection object";if(s>this.nodes.length-1)throw"Parameter row out of range";var o={row:s};this.selection.push(o),this.nodes[s].select()}this.redraw()},_.prototype._getConnectionCount=function(t){function e(t){for(var e=[],s=0,o=t.length;o>s;s++)for(var n=t[s],r=0,a=i.length;a>r;r++){var h=null;i[r].from==n?h=i[r].to:i[r].to==n&&(h=i[r].from);var d,p;if(h)for(d=0,p=t.length;p>d;d++)if(t[d]==h){h=null;break}if(h)for(d=0,p=e.length;p>d;d++)if(e[d]==h){h=null;break}h&&e.push(h)}return e}var i=this.edges;void 0==t&&(t=1);var s,o,n=[],r=this.nodes;for(s=0,o=r.length;o>s;s++){for(var a=[r[s]],h=0;t>h;h++)a=a.concat(e(a));n.push(a)}var d=[];for(s=0,len=n.length;len>s;s++)d.push(n[s].length);return d},_.prototype._setSize=function(t,e){this.frame.style.width=t,this.frame.style.height=e,this.frame.canvas.style.width="100%",this.frame.canvas.style.height="100%",this.frame.canvas.width=this.frame.canvas.clientWidth,this.frame.canvas.height=this.frame.canvas.clientHeight},_.prototype.setNodes=function(t){if(this.selection=[],this.nodes=[],this.moving=!1,t){this.nodesTable=t;for(var e=!1,i=t.length,s=0;i>s;s++){var o=t[s];if(void 0!=o.value&&(e=!0),void 0==o.id)throw"Column 'id' missing in table with nodes (row "+s+")";this._createNode(o)}e&&this._updateValueRange(this.nodes)}},_.prototype._createNode=function(t){var e,i,s,o,n=t.action?t.action:"update";if("create"===n)s=new _.Node(t,this.images,this.groups,this.constants),e=t.id,i=void 0!==e?this._findNode(e):void 0,void 0!==i?(o=this.nodes[i],this.nodes[i]=s,o.selected&&this._unselectNodes([{row:i}],!1)):this.nodes.push(s),s.isFixed()||(this.moving=!0);else if("update"===n){if(e=t.id,void 0===e)throw"Cannot update a node without id";i=this._findNode(e),void 0!==i?this.nodes[i].setProperties(t,this.constants):(s=new _.Node(t,this.images,this.groups,this.constants),this.nodes.push(s),s.isFixed()||(this.moving=!0))}else{if("delete"!==n)throw"Unknown action "+n+". Choose 'create', 'update', or 'delete'.";if(e=t.id,void 0===e)throw"Cannot delete node without its id";if(i=this._findNode(e),void 0===i)throw"Node with id "+e+" not found";o=this.nodes[i],o.selected&&this._unselectNodes([{row:i}],!1),this.nodes.splice(i,1)}},_.prototype._findNode=function(t){for(var e=this.nodes,i=0,s=e.length;s>i;i++)if(e[i].id===t)return i;return void 0},_.prototype._findNodeByRow=function(t){return this.nodes[t]},_.prototype.setEdges=function(t){if(this.edges=[],t){this.edgesTable=t;for(var e=!1,i=t.length,s=0;i>s;s++){var o=t[s];if(void 0===o.from)throw"Column 'from' missing in table with edges (row "+s+")";if(void 0===o.to)throw"Column 'to' missing in table with edges (row "+s+")";void 0!=o.value&&(e=!0),this._createEdge(o)}e&&this._updateValueRange(this.edges)}},_.prototype._createEdge=function(t){var e,i,s,o,n=t.action?t.action:"create";if("create"===n)e=t.id,i=void 0!==e?this._findEdge(e):void 0,s=new _.Edge(t,this,this.constants),void 0!==i?(o=this.edges[i],o.from.detachEdge(o),o.to.detachEdge(o),this.edges[i]=s):this.edges.push(s),s.from.attachEdge(s),s.to.attachEdge(s);else if("update"===n){if(e=t.id,void 0===e)throw"Cannot update a edge without id";i=this._findEdge(e),void 0!==i?(s=this.edges[i],s.from.detachEdge(s),s.to.detachEdge(s),s.setProperties(t,this.constants),s.from.attachEdge(s),s.to.attachEdge(s)):(s=new _.Edge(t,this,this.constants),s.from.attachEdge(s),s.to.attachEdge(s),this.edges.push(s))}else{if("delete"!==n)throw"Unknown action "+n+". Choose 'create', 'update', or 'delete'.";if(e=t.id,void 0===e)throw"Cannot delete edge without its id";if(i=this._findEdge(e),void 0===i)throw"Edge with id "+e+" not found";o=this.edges[e],s.from.detachEdge(o),s.to.detachEdge(o),this.edges.splice(i,1)}},_.prototype._updateNodeReferences=function(t,e){for(var i=this.edges,s=0,o=i.length;o>s;s++){var n=i[s];n.from===t&&(n.from=e),n.to===t&&(n.to=e)}},_.prototype._findEdge=function(t){for(var e=this.edges,i=0,s=e.length;s>i;i++)if(e[i].id===t)return i;return void 0},_.prototype._findEdgeByRow=function(t){return this.edges[t]},_.prototype._updateValueRange=function(t){var e,i=t.length,s=void 0,o=void 0;for(e=0;i>e;e++){var n=t[e].getValue();void 0!==n&&(s=void 0===s?n:Math.min(n,s),o=void 0===o?n:Math.max(n,o))}if(void 0!==s&&void 0!==o)for(e=0;i>e;e++)t[e].setValueRange(s,o)},_.prototype.redraw=function(){this._setSize(this.width,this.height),this._redraw()},_.prototype._redraw=function(){var t=this.frame.canvas.getContext("2d"),e=this.frame.canvas.width,i=this.frame.canvas.height;t.clearRect(0,0,e,i),t.save(),t.translate(this.translation.x,this.translation.y),t.scale(this.scale,this.scale),this._drawEdges(t),this._drawNodes(t),t.restore()},_.prototype._setTranslation=function(t,e){void 0===this.translation&&(this.translation={x:0,y:0}),void 0!==t&&(this.translation.x=t),void 0!==e&&(this.translation.y=e)},_.prototype._getTranslation=function(){return{x:this.translation.x,y:this.translation.y}},_.prototype._setScale=function(t){this.scale=t},_.prototype._getScale=function(){return this.scale},_.prototype._xToCanvas=function(t){return(t-this.translation.x)/this.scale},_.prototype._canvasToX=function(t){return t*this.scale+this.translation.x},_.prototype._yToCanvas=function(t){return(t-this.translation.y)/this.scale},_.prototype._canvasToY=function(t){return t*this.scale+this.translation.y},_.prototype._getNode=function(t){for(var e=0;this.nodes.length>e;e++)if(this.nodes[e].id==t)return this.nodes[e];return null},_.prototype._drawNodes=function(t){for(var e=this.nodes,i=[],s=0,o=e.length;o>s;s++)e[s].isSelected()?i.push(s):e[s].draw(t);for(var n=0,r=i.length;r>n;n++)e[i[n]].draw(t)},_.prototype._drawEdges=function(t){for(var e=this.edges,i=0,s=e.length;s>i;i++)e[i].draw(t)},_.prototype._reposition=function(){for(var t=2*this.constants.edges.length,e=this.frame.canvas.clientWidth/2,i=this.frame.canvas.clientHeight/2,s=0;this.nodes.length>s;s++){var o=2*Math.PI*(s/this.nodes.length);this.nodes[s].xFixed||(this.nodes[s].x=e+t*Math.cos(o)),this.nodes[s].yFixed||(this.nodes[s].y=i+t*Math.sin(o))}},_.prototype._doStabilize=function(){new Date;for(var t=0,e=this.constants.minVelocity,i=!1;!i&&this.constants.maxIterations>t;)this._calculateForces(),this._discreteStepNodes(),i=!this._isMoving(e),t++;new Date},_.prototype._calculateForces=function(){for(var t=this.nodes,e=this.edges,i=.01,s=this.frame.canvas.clientWidth/2,o=this.frame.canvas.clientHeight/2,n=0;t.length>n;n++){var r=s-t[n].x,a=o-t[n].y,h=Math.atan2(a,r),d=Math.cos(h)*i,p=Math.sin(h)*i;this.nodes[n]._setForce(d,p)}for(var l=this.constants.nodes.distance,u=10,n=0;t.length>n;n++)for(var c=n+1;this.nodes.length>c;c++){var r=t[c].x-t[n].x,a=t[c].y-t[n].y,f=Math.sqrt(r*r+a*a),h=Math.atan2(a,r),m=1/(1+Math.exp((f/l-1)*u)),d=Math.cos(h)*m,p=Math.sin(h)*m;this.nodes[n]._addForce(-d,-p),this.nodes[c]._addForce(d,p)}for(var g=0,v=e.length;v>g;g++){var y=e[g],r=y.to.x-y.from.x,a=y.to.y-y.from.y,w=y.length,b=Math.sqrt(r*r+a*a),h=Math.atan2(a,r),x=y.stiffness*(w-b),d=Math.cos(h)*x,p=Math.sin(h)*x;y.from._addForce(-d,-p),y.to._addForce(d,p)}},_.prototype._isMoving=function(t){for(var e=this.nodes,i=0,s=e.length;s>i;i++)if(e[i].isMoving(t))return!0;return!1},_.prototype._discreteStepNodes=function(){for(var t=this.refreshRate/1e3,e=this.nodes,i=0,s=e.length;s>i;i++)e[i].discreteStep(t)},_.prototype.start=function(){if(this.moving){this._calculateForces(),this._discreteStepNodes();var t=this.constants.minVelocity;this.moving=this._isMoving(t)}if(this.moving){if(!this.timer){var e=this;this.timer=window.setTimeout(function(){e.timer=void 0,e.start(),e._redraw()},this.refreshRate)}}else this._redraw()},_.prototype.stop=function(){this.timer&&(window.clearInterval(this.timer),this.timer=void 0)},_.Node=function(t,e,i,s){this.selected=!1,this.edges=[],this.group=s.nodes.group,this.fontSize=s.nodes.fontSize,this.fontFace=s.nodes.fontFace,this.fontColor=s.nodes.fontColor,this.borderColor=s.nodes.borderColor,this.backgroundColor=s.nodes.backgroundColor,this.highlightColor=s.nodes.highlightColor,this.id=void 0,this.style=s.nodes.style,this.image=s.nodes.image,this.x=0,this.y=0,this.xFixed=!1,this.yFixed=!1,this.radius=s.nodes.radius,this.radiusFixed=!1,this.radiusMin=s.nodes.radiusMin,this.radiusMax=s.nodes.radiusMax,this.imagelist=e,this.grouplist=i,this.setProperties(t,s),this.mass=50,this.fx=0,this.fy=0,this.vx=0,this.vy=0,this.minForce=s.minForce,this.damping=.9},_.Node.prototype.attachEdge=function(t){this.edges.push(t),this._updateMass()},_.Node.prototype.detachEdge=function(t){var e=this.edges.indexOf(t);-1!=e&&this.edges.splice(e,1),this._updateMass()},_.Node.prototype._updateMass=function(){this.mass=50+20*this.edges.length},_.Node.prototype.setProperties=function(t,e){if(t){if(void 0!=t.id&&(this.id=t.id),void 0!=t.text&&(this.text=t.text),void 0!=t.title&&(this.title=t.title),void 0!=t.group&&(this.group=t.group),void 0!=t.x&&(this.x=t.x),void 0!=t.y&&(this.y=t.y),void 0!=t.value&&(this.value=t.value),void 0===this.id)throw"Node must have an id";if(this.group){var i=this.grouplist.get(this.group);for(var s in i)i.hasOwnProperty(s)&&(this[s]=i[s])}if(void 0!=t.style&&(this.style=t.style),void 0!=t.image&&(this.image=t.image),void 0!=t.radius&&(this.radius=t.radius),void 0!=t.borderColor&&(this.borderColor=t.borderColor),void 0!=t.backgroundColor&&(this.backgroundColor=t.backgroundColor),void 0!=t.highlightColor&&(this.highlightColor=t.highlightColor),void 0!=t.fontColor&&(this.fontColor=t.fontColor),void 0!=t.fontSize&&(this.fontSize=t.fontSize),void 0!=t.fontFace&&(this.fontFace=t.fontFace),void 0!=this.image){if(!this.imagelist)throw"No imagelist provided";this.imageObj=this.imagelist.load(this.image)}this.xFixed=this.xFixed||void 0!=t.x,this.yFixed=this.yFixed||void 0!=t.y,this.radiusFixed=this.radiusFixed||void 0!=t.radius,"image"==this.style&&(this.radiusMin=e.nodes.widthMin,this.radiusMax=e.nodes.widthMax);var o=this.style;switch(o){case"database":this.draw=this._drawDatabase,this.resize=this._resizeDatabase;break;case"rect":this.draw=this._drawRect,this.resize=this._resizeRect;break;case"circle":this.draw=this._drawCircle,this.resize=this._resizeCircle;break;case"image":this.draw=this._drawImage,this.resize=this._resizeImage;break;case"text":this.draw=this._drawText,this.resize=this._resizeText;break;case"dot":this.draw=this._drawDot,this.resize=this._resizeShape;break;case"square":this.draw=this._drawSquare,this.resize=this._resizeShape;break;case"triangle":this.draw=this._drawTriangle,this.resize=this._resizeShape;break;case"triangleDown":this.draw=this._drawTriangleDown,this.resize=this._resizeShape;break;case"star":this.draw=this._drawStar,this.resize=this._resizeShape;break;default:this.draw=this._drawRect,this.resize=this._resizeRect}this._reset()}},_.Node.prototype.select=function(){this.selected=!0,this._reset()},_.Node.prototype.unselect=function(){this.selected=!1,this._reset()},_.Node.prototype._reset=function(){this.width=void 0,this.height=void 0},_.Node.prototype.getTitle=function(){return this.title},_.Node.prototype.distanceToBorder=function(t,e){var i=1;switch(this.width||this.resize(t),this.style){case"circle":case"dot":return this.radius+i;case"rect":case"image":case"text":default:return this.width?Math.min(Math.abs(this.width/2/Math.cos(e)),Math.abs(this.height/2/Math.sin(e)))+i:0}},_.Node.prototype._setForce=function(t,e){this.fx=t,this.fy=e},_.Node.prototype._addForce=function(t,e){this.fx+=t,this.fy+=e},_.Node.prototype.discreteStep=function(t){if(!this.xFixed){var e=-this.damping*this.vx,i=(this.fx+e)/this.mass;this.vx+=i/t,this.x+=this.vx/t}if(!this.yFixed){var s=-this.damping*this.vy,o=(this.fy+s)/this.mass;this.vy+=o/t,this.y+=this.vy/t}},_.Node.prototype.isFixed=function(){return this.xFixed&&this.yFixed},_.Node.prototype.isMoving=function(t){return Math.abs(this.vx)>t||Math.abs(this.vy)>t||!this.xFixed&&Math.abs(this.fx)>this.minForce||!this.yFixed&&Math.abs(this.fy)>this.minForce},_.Node.prototype.isSelected=function(){return this.selected},_.Node.prototype.getValue=function(){return this.value},_.Node.prototype.getDistance=function(t,e){var i=this.x-t,s=this.y-e;return Math.sqrt(i*i+s*s)},_.Node.prototype.setValueRange=function(t,e){if(!this.radiusFixed&&void 0!==this.value){var i=(this.radiusMax-this.radiusMin)/(e-t);this.radius=(this.value-t)*i+this.radiusMin}},_.Node.prototype.draw=function(){throw"Draw method not initialized for node"},_.Node.prototype.resize=function(){throw"Resize method not initialized for node"},_.Node.prototype.isOverlappingWith=function(t){return this.left<t.right&&this.left+this.width>t.left&&this.top<t.bottom&&this.top+this.height>t.top},_.Node.prototype._resizeImage=function(){if(!this.width){var t,e;if(this.value){var i=this.imageObj.height/this.imageObj.width;t=this.radius||this.imageObj.width,e=this.radius*i||this.imageObj.height}else t=this.imageObj.width,e=this.imageObj.height;this.width=t,this.height=e}},_.Node.prototype._drawImage=function(t){this._resizeImage(t),this.left=this.x-this.width/2,this.top=this.y-this.height/2;var e;this.imageObj?(t.drawImage(this.imageObj,this.left,this.top,this.width,this.height),e=this.y+this.height/2):e=this.y,this._text(t,this.text,this.x,e,void 0,"top")},_.Node.prototype._resizeRect=function(t){if(!this.width){var e=5,i=this.getTextSize(t);this.width=i.width+2*e,this.height=i.height+2*e}},_.Node.prototype._drawRect=function(t){this._resizeRect(t),this.left=this.x-this.width/2,this.top=this.y-this.height/2,t.strokeStyle=this.borderColor,t.fillStyle=this.selected?this.highlightColor:this.backgroundColor,t.lineWidth=this.selected?2:1,t.roundRect(this.left,this.top,this.width,this.height,this.radius),t.fill(),t.stroke(),this._text(t,this.text,this.x,this.y)},_.Node.prototype._resizeDatabase=function(t){if(!this.width){var e=5,i=this.getTextSize(t),s=i.width+2*e;this.width=s,this.height=s}},_.Node.prototype._drawDatabase=function(t){this._resizeDatabase(t),this.left=this.x-this.width/2,this.top=this.y-this.height/2,t.strokeStyle=this.borderColor,t.fillStyle=this.selected?this.highlightColor:this.backgroundColor,t.lineWidth=this.selected?2:1,t.database(this.x-this.width/2,this.y-.5*this.height,this.width,this.height),t.fill(),t.stroke(),this._text(t,this.text,this.x,this.y)},_.Node.prototype._resizeCircle=function(t){if(!this.width){var e=5,i=this.getTextSize(t),s=Math.max(i.width,i.height)+2*e;this.radius=s/2,this.width=s,this.height=s}},_.Node.prototype._drawCircle=function(t){this._resizeCircle(t),this.left=this.x-this.width/2,this.top=this.y-this.height/2,t.strokeStyle=this.borderColor,t.fillStyle=this.selected?this.highlightColor:this.backgroundColor,t.lineWidth=this.selected?2:1,t.circle(this.x,this.y,this.radius),t.fill(),t.stroke(),this._text(t,this.text,this.x,this.y)},_.Node.prototype._drawDot=function(t){this._drawShape(t,"circle")},_.Node.prototype._drawTriangle=function(t){this._drawShape(t,"triangle")},_.Node.prototype._drawTriangleDown=function(t){this._drawShape(t,"triangleDown")},_.Node.prototype._drawSquare=function(t){this._drawShape(t,"square")},_.Node.prototype._drawStar=function(t){this._drawShape(t,"star")},_.Node.prototype._resizeShape=function(){if(!this.width){var t=2*this.radius;this.width=t,this.height=t}},_.Node.prototype._drawShape=function(t,e){this._resizeShape(t),this.left=this.x-this.width/2,this.top=this.y-this.height/2,t.strokeStyle=this.borderColor,t.fillStyle=this.selected?this.highlightColor:this.backgroundColor,t.lineWidth=this.selected?2:1,t[e](this.x,this.y,this.radius),t.fill(),t.stroke(),this.text&&this._text(t,this.text,this.x,this.y+this.height/2,void 0,"top")
-},_.Node.prototype._resizeText=function(t){if(!this.width){var e=5,i=this.getTextSize(t);this.width=i.width+2*e,this.height=i.height+2*e}},_.Node.prototype._drawText=function(t){this._resizeText(t),this.left=this.x-this.width/2,this.top=this.y-this.height/2,this._text(t,this.text,this.x,this.y)},_.Node.prototype._text=function(t,e,i,s,o,n){if(e){t.font=(this.selected?"bold ":"")+this.fontSize+"px "+this.fontFace,t.fillStyle=this.fontColor||"black",t.textAlign=o||"center",t.textBaseline=n||"middle";for(var r=e.split("\n"),a=r.length,h=this.fontSize+4,d=s+(1-a)/2*h,p=0;a>p;p++)t.fillText(r[p],i,d),d+=h}},_.Node.prototype.getTextSize=function(t){if(void 0!=this.text){t.font=(this.selected?"bold ":"")+this.fontSize+"px "+this.fontFace;for(var e=this.text.split("\n"),i=(this.fontSize+4)*e.length,s=0,o=0,n=e.length;n>o;o++)s=Math.max(s,t.measureText(e[o]).width);return{width:s,height:i}}return{width:0,height:0}},_.Edge=function(t,e,i){if(!e)throw"No graph provided";this.graph=e,this.widthMin=i.edges.widthMin,this.widthMax=i.edges.widthMax,this.id=void 0,this.style=i.edges.style,this.title=void 0,this.width=i.edges.width,this.value=void 0,this.length=i.edges.length,this.dashlength=i.edges.dashlength,this.dashgap=i.edges.dashgap,this.altdashlength=i.edges.altdashlength,this.stiffness=void 0,this.color=i.edges.color,this.widthFixed=!1,this.lengthFixed=!1,this.setProperties(t,i)},_.Edge.prototype.setProperties=function(t,e){if(t){if(void 0!=t.from&&(this.from=this.graph._getNode(t.from)),void 0!=t.to&&(this.to=this.graph._getNode(t.to)),void 0!=t.id&&(this.id=t.id),void 0!=t.style&&(this.style=t.style),void 0!=t.text&&(this.text=t.text),this.text&&(this.fontSize=e.edges.fontSize,this.fontFace=e.edges.fontFace,this.fontColor=e.edges.fontColor,void 0!=t.fontColor&&(this.fontColor=t.fontColor),void 0!=t.fontSize&&(this.fontSize=t.fontSize),void 0!=t.fontFace&&(this.fontFace=t.fontFace)),void 0!=t.title&&(this.title=t.title),void 0!=t.width&&(this.width=t.width),void 0!=t.value&&(this.value=t.value),void 0!=t.length&&(this.length=t.length),void 0!=t.dashlength&&(this.dashlength=t.dashlength),void 0!=t.dashgap&&(this.dashgap=t.dashgap),void 0!=t.altdashlength&&(this.altdashlength=t.altdashlength),void 0!=t.color&&(this.color=t.color),!this.from)throw"Node with id "+t.from+" not found";if(!this.to)throw"Node with id "+t.to+" not found";switch(this.widthFixed=this.widthFixed||void 0!=t.width,this.lengthFixed=this.lengthFixed||void 0!=t.length,this.stiffness=1/this.length,"arrow"===this.style&&(this.arrows=[.5]),this.style){case"line":this.draw=this._drawLine;break;case"arrow":this.draw=this._drawArrow;break;case"arrow-end":this.draw=this._drawArrowEnd;break;case"dash-line":this.draw=this._drawDashLine;break;default:this.draw=this._drawLine}}},_.Edge.prototype.getTitle=function(){return this.title},_.Edge.prototype.getValue=function(){return this.value},_.Edge.prototype.setValueRange=function(t,e){if(!this.widthFixed&&void 0!==this.value){var i=(this.widthMax-this.widthMin)/(e-t);this.width=(this.value-t)*i+this.widthMin}},_.Edge.prototype.isLengthFixed=function(){return this.lengthFixed},_.Edge.prototype.getLength=function(){return this.length},_.Edge.prototype.setLength=function(t){this.lengthFixed||(this.length=t)},_.Edge.prototype.getDashLength=function(){return this.dashlength},_.Edge.prototype.setDashLength=function(t){this.dashlength=t},_.Edge.prototype.getDashGap=function(){return this.dashgap},_.Edge.prototype.setDashGap=function(t){this.dashgap=t},_.Edge.prototype.getAltDashLength=function(){return this.altdashlength},_.Edge.prototype.setAltDashLength=function(t){this.altdashlength=t},_.Edge.prototype.draw=function(){throw"Method draw not initialized in edge"},_.Edge.prototype.isOverlappingWith=function(t){var e=10,i=this.from.x,s=this.from.y,o=this.to.x,n=this.to.y,r=t.left,a=t.top,h=_._dist(i,s,o,n,r,a);return e>h},_._dist=function(t,e,i,s,o,n){var r=i-t,a=s-e,h=r*r+a*a,d=((o-t)*r+(n-e)*a)/h;d>1?d=1:0>d&&(d=0);var p=t+d*r,l=e+d*a,u=p-o,c=l-n;return Math.sqrt(u*u+c*c)},_.Edge.prototype._drawLine=function(t){t.strokeStyle=this.color,t.lineWidth=this._getLineWidth();var e;if(this.from!=this.to)this._line(t),this.text&&(e=this._pointOnLine(.5),this._text(t,this.text,e.x,e.y));else{var i,s,o=this.length/2/Math.PI,n=this.from;n.width||n.resize(t),n.width>n.height?(i=n.x+n.width/2,s=n.y-o):(i=n.x+o,s=n.y-n.height/2),this._circle(t,i,s,o),e=this._pointOnCircle(i,s,o,.5),this._text(t,this.text,e.x,e.y)}},_.Edge.prototype._getLineWidth=function(){return this.from.selected||this.to.selected?Math.min(2*this.width,this.widthMax):this.width},_.Edge.prototype._line=function(t){t.beginPath(),t.moveTo(this.from.x,this.from.y),t.lineTo(this.to.x,this.to.y),t.stroke()},_.Edge.prototype._circle=function(t,e,i,s){t.beginPath(),t.arc(e,i,s,0,2*Math.PI,!1),t.stroke()},_.Edge.prototype._text=function(t,e,i,s){if(e){t.font=(this.from.selected||this.to.selected?"bold ":"")+this.fontSize+"px "+this.fontFace,t.fillStyle="white";var o=t.measureText(this.text).width,n=this.fontSize,r=i-o/2,a=s-n/2;t.fillRect(r,a,o,n),t.fillStyle=this.fontColor||"black",t.textAlign="left",t.textBaseline="top",t.fillText(this.text,r,a)}};var D="undefined"!=typeof window&&window.CanvasRenderingContext2D&&CanvasRenderingContext2D.prototype;D&&D.lineTo&&(D.dashedLine=function(t,e,i,s,o){o||(o=[10,5]),0==u&&(u=.001);var n=o.length;this.moveTo(t,e);for(var r=i-t,a=s-e,h=a/r,d=Math.sqrt(r*r+a*a),p=0,l=!0;d>=.1;){var u=o[p++%n];u>d&&(u=d);var c=Math.sqrt(u*u/(1+h*h));0>r&&(c=-c),t+=c,e+=h*c,this[l?"lineTo":"moveTo"](t,e),d-=u,l=!l}}),_.Edge.prototype._drawDashLine=function(t){if(t.strokeStyle=this.color,t.lineWidth=this._getLineWidth(),t.beginPath(),t.lineCap="round",void 0!=this.altdashlength?t.dashedLine(this.from.x,this.from.y,this.to.x,this.to.y,[this.dashlength,this.dashgap,this.altdashlength,this.dashgap]):void 0!=this.dashlength&&void 0!=this.dashgap?t.dashedLine(this.from.x,this.from.y,this.to.x,this.to.y,[this.dashlength,this.dashgap]):(t.moveTo(this.from.x,this.from.y),t.lineTo(this.to.x,this.to.y)),t.stroke(),this.text){var e=this._pointOnLine(.5);this._text(t,this.text,e.x,e.y)}},_.Edge.prototype._pointOnLine=function(t){return{x:(1-t)*this.from.x+t*this.to.x,y:(1-t)*this.from.y+t*this.to.y}},_.Edge.prototype._pointOnCircle=function(t,e,i,s){var o=2*(s-3/8)*Math.PI;return{x:t+i*Math.cos(o),y:e-i*Math.sin(o)}},_.Edge.prototype._drawArrow=function(t){var e;if(t.strokeStyle=this.color,t.fillStyle=this.color,t.lineWidth=this._getLineWidth(),this.from!=this.to){this._line(t);var i=Math.atan2(this.to.y-this.from.y,this.to.x-this.from.x),s=10+5*this.width;for(var o in this.arrows)this.arrows.hasOwnProperty(o)&&(e=this._pointOnLine(this.arrows[o]),t.arrow(e.x,e.y,i,s),t.fill(),t.stroke());this.text&&(e=this._pointOnLine(.5),this._text(t,this.text,e.x,e.y))}else{var n,r,a=this.length/2/Math.PI,h=this.from;h.width||h.resize(t),h.width>h.height?(n=h.x+h.width/2,r=h.y-a):(n=h.x+a,r=h.y-h.height/2),this._circle(t,n,r,a);var i=.2*Math.PI,s=10+5*this.width;for(var o in this.arrows)this.arrows.hasOwnProperty(o)&&(e=this._pointOnCircle(n,r,a,this.arrows[o]),t.arrow(e.x,e.y,i,s),t.fill(),t.stroke());this.text&&(e=this._pointOnCircle(n,r,a,.5),this._text(t,this.text,e.x,e.y))}},_.Edge.prototype._drawArrowEnd=function(t){t.strokeStyle=this.color,t.fillStyle=this.color,t.lineWidth=this._getLineWidth();var e,i;if(this.from!=this.to){e=Math.atan2(this.to.y-this.from.y,this.to.x-this.from.x);var s=this.to.x-this.from.x,o=this.to.y-this.from.y,n=Math.sqrt(s*s+o*o),r=this.to.distanceToBorder(t,e+Math.PI),a=(n-r)/n,h=a*this.from.x+(1-a)*this.to.x,d=a*this.from.y+(1-a)*this.to.y,p=this.to.distanceToBorder(t,e),l=(n-p)/n,u=(1-l)*this.from.x+l*this.to.x,c=(1-l)*this.from.y+l*this.to.y;if(t.beginPath(),t.moveTo(h,d),t.lineTo(u,c),t.stroke(),i=10+5*this.width,t.arrow(u,c,e,i),t.fill(),t.stroke(),this.text){var f=this._pointOnLine(.5);this._text(t,this.text,f.x,f.y)}}else{var m,g,v,y=this.length/2/Math.PI,w=this.from;w.width||w.resize(t),w.width>w.height?(m=w.x+w.width/2,g=w.y-y,v={x:m,y:w.y,angle:.9*Math.PI}):(m=w.x+y,g=w.y-w.height/2,v={x:w.x,y:g,angle:.6*Math.PI}),t.beginPath(),t.arc(m,g,y,0,2*Math.PI,!1),t.stroke(),i=10+5*this.width,t.arrow(v.x,v.y,v.angle,i),t.fill(),t.stroke(),this.text&&(f=this._pointOnCircle(m,g,y,.5),this._text(t,this.text,f.x,f.y))}},_.Images=function(){this.images={},this.callback=void 0},_.Images.prototype.setOnloadCallback=function(t){this.callback=t},_.Images.prototype.load=function(t){var e=this.images[t];if(void 0==e){var i=this;e=new Image,this.images[t]=e,e.onload=function(){i.callback&&i.callback(this)},e.src=t}return e},_.Groups=function(){this.clear(),this.defaultIndex=0},_.Groups.DEFAULT=[{borderColor:"#2B7CE9",backgroundColor:"#97C2FC",highlightColor:"#D2E5FF"},{borderColor:"#FFA500",backgroundColor:"#FFFF00",highlightColor:"#FFFFA3"},{borderColor:"#FA0A10",backgroundColor:"#FB7E81",highlightColor:"#FFAFB1"},{borderColor:"#41A906",backgroundColor:"#7BE141",highlightColor:"#A1EC76"},{borderColor:"#E129F0",backgroundColor:"#EB7DF4",highlightColor:"#F0B3F5"},{borderColor:"#7C29F0",backgroundColor:"#AD85E4",highlightColor:"#D3BDF0"},{borderColor:"#C37F00",backgroundColor:"#FFA807",highlightColor:"#FFCA66"},{borderColor:"#4220FB",backgroundColor:"#6E6EFD",highlightColor:"#9B9BFD"},{borderColor:"#FD5A77",backgroundColor:"#FFC0CB",highlightColor:"#FFD1D9"},{borderColor:"#4AD63A",backgroundColor:"#C2FABC",highlightColor:"#E6FFE3"}],_.Groups.prototype.clear=function(){this.groups={},this.groups.length=function(){var t=0;for(var e in this)this.hasOwnProperty(e)&&t++;return t}},_.Groups.prototype.get=function(t){var e=this.groups[t];if(void 0==e){var i=this.defaultIndex%_.Groups.DEFAULT.length;this.defaultIndex++,e={},e.borderColor=_.Groups.DEFAULT[i].borderColor,e.backgroundColor=_.Groups.DEFAULT[i].backgroundColor,e.highlightColor=_.Groups.DEFAULT[i].highlightColor,this.groups[t]=e}return e},_.Groups.prototype.add=function(t,e){return this.groups[t]=e,e},_.isArray=function(t){return t instanceof Array?!0:"[object Array]"===Object.prototype.toString.call(t)},_.Popup=function(t,e,i,s){this.container=t?t:document.body,this.x=0,this.y=0,this.padding=5,void 0!==e&&void 0!==i&&this.setPosition(e,i),void 0!==s&&this.setText(s),this.frame=document.createElement("div");var o=this.frame.style;o.position="absolute",o.visibility="hidden",o.border="1px solid #666",o.color="black",o.padding=this.padding+"px",o.backgroundColor="#FFFFC6",o.borderRadius="3px",o.MozBorderRadius="3px",o.WebkitBorderRadius="3px",o.boxShadow="3px 3px 10px rgba(128, 128, 128, 0.5)",o.whiteSpace="nowrap",this.container.appendChild(this.frame)},_.Popup.prototype.setPosition=function(t,e){this.x=parseInt(t),this.y=parseInt(e)},_.Popup.prototype.setText=function(t){this.frame.innerHTML=t},_.Popup.prototype.show=function(t){if(void 0===t&&(t=!0),t){var e=this.frame.clientHeight,i=this.frame.clientWidth,s=this.frame.parentNode.clientHeight,o=this.frame.parentNode.clientWidth,n=this.y-e;n+e+this.padding>s&&(n=s-e-this.padding),this.padding>n&&(n=this.padding);var r=this.x;r+i+this.padding>o&&(r=o-i-this.padding),this.padding>r&&(r=this.padding),this.frame.style.left=r+"px",this.frame.style.top=n+"px",this.frame.style.visibility="visible"}else this.hide()},_.Popup.prototype.hide=function(){this.frame.style.visibility="hidden"},"undefined"!=typeof CanvasRenderingContext2D&&(CanvasRenderingContext2D.prototype.circle=function(t,e,i){this.beginPath(),this.arc(t,e,i,0,2*Math.PI,!1)},CanvasRenderingContext2D.prototype.square=function(t,e,i){this.beginPath(),this.rect(t-i,e-i,2*i,2*i)},CanvasRenderingContext2D.prototype.triangle=function(t,e,i){this.beginPath();var s=2*i,o=s/2,n=Math.sqrt(3)/6*s,r=Math.sqrt(s*s-o*o);this.moveTo(t,e-(r-n)),this.lineTo(t+o,e+n),this.lineTo(t-o,e+n),this.lineTo(t,e-(r-n)),this.closePath()},CanvasRenderingContext2D.prototype.triangleDown=function(t,e,i){this.beginPath();var s=2*i,o=s/2,n=Math.sqrt(3)/6*s,r=Math.sqrt(s*s-o*o);this.moveTo(t,e+(r-n)),this.lineTo(t+o,e-n),this.lineTo(t-o,e-n),this.lineTo(t,e+(r-n)),this.closePath()},CanvasRenderingContext2D.prototype.star=function(t,e,i){this.beginPath();for(var s=0;10>s;s++){var o=0===s%2?1.3*i:.5*i;this.lineTo(t+o*Math.sin(2*s*Math.PI/10),e-o*Math.cos(2*s*Math.PI/10))}this.closePath()},CanvasRenderingContext2D.prototype.roundRect=function(t,e,i,s,o){var n=Math.PI/180;0>i-2*o&&(o=i/2),0>s-2*o&&(o=s/2),this.beginPath(),this.moveTo(t+o,e),this.lineTo(t+i-o,e),this.arc(t+i-o,e+o,o,270*n,360*n,!1),this.lineTo(t+i,e+s-o),this.arc(t+i-o,e+s-o,o,0,90*n,!1),this.lineTo(t+o,e+s),this.arc(t+o,e+s-o,o,90*n,180*n,!1),this.lineTo(t,e+o),this.arc(t+o,e+o,o,180*n,270*n,!1)},CanvasRenderingContext2D.prototype.ellipse=function(t,e,i,s){var o=.5522848,n=i/2*o,r=s/2*o,a=t+i,h=e+s,d=t+i/2,p=e+s/2;this.beginPath(),this.moveTo(t,p),this.bezierCurveTo(t,p-r,d-n,e,d,e),this.bezierCurveTo(d+n,e,a,p-r,a,p),this.bezierCurveTo(a,p+r,d+n,h,d,h),this.bezierCurveTo(d-n,h,t,p+r,t,p)},CanvasRenderingContext2D.prototype.database=function(t,e,i,s){var o=1/3,n=i,r=s*o,a=.5522848,h=n/2*a,d=r/2*a,p=t+n,l=e+r,u=t+n/2,c=e+r/2,f=e+(s-r/2),m=e+s;this.beginPath(),this.moveTo(p,c),this.bezierCurveTo(p,c+d,u+h,l,u,l),this.bezierCurveTo(u-h,l,t,c+d,t,c),this.bezierCurveTo(t,c-d,u-h,e,u,e),this.bezierCurveTo(u+h,e,p,c-d,p,c),this.lineTo(p,f),this.bezierCurveTo(p,f+d,u+h,m,u,m),this.bezierCurveTo(u-h,m,t,f+d,t,f),this.lineTo(t,c)},CanvasRenderingContext2D.prototype.arrow=function(t,e,i,s){var o=t-s*Math.cos(i),n=e-s*Math.sin(i),r=t-.9*s*Math.cos(i),a=e-.9*s*Math.sin(i),h=o+s/3*Math.cos(i+.5*Math.PI),d=n+s/3*Math.sin(i+.5*Math.PI),p=o+s/3*Math.cos(i-.5*Math.PI),l=n+s/3*Math.sin(i-.5*Math.PI);this.beginPath(),this.moveTo(t,e),this.lineTo(h,d),this.lineTo(r,a),this.lineTo(p,l),this.closePath()}),_.util={},_.util.parseDOT=function(t){function e(t){return" "==t||"	"==t||"\n"==t||"\r"==t}function i(t){return-1!="[]{}();,=->".indexOf(t)}function s(){f++,m=t[f]}function o(){return"(char "+f+")"}function n(){for(;m&&e(m);)s();var i=t[f+1],o=t[f-1],r=m+i;if("/*"==r){for(;m&&("*"!=m||"/"!=t[f+1]);)s();s(),s(),n()}else if("//"==r||"#"==m&&"\n"==o){for(;m&&"\n"!=m;)s();s(),n()}}function r(){n();var t="";if('"'==m){for(s();m&&'"'!=m;)t+=m,s();s()}else{for(;m&&!e(m)&&!i(m);)t+=m,s();var o=Number(t);isNaN(o)?"true"==t?t=!0:"false"==t?t=!1:"null"==t&&(t=null):t=o}return t}function a(){if(n(),'"'==m)return r();var t=r();if(void 0!=t){var e=Number(t);isNaN(e)?"true"==t?t=!0:"false"==t?t=!1:"null"==t&&(t=null):t=e}return t}function h(){if(n(),"["==m){s();for(var t={};m&&"]"!=m;){n();var e=r();if(!e)throw new SyntaxError("Attribute name expected "+o());if(n(),"="!=m)throw new SyntaxError("Equal sign = expected "+o());s();var i=a();if(!i)throw new SyntaxError("Attribute value expected "+o());t[e]=i,n(),","==m&&s()}return s(),t}return void 0}function d(){if(n(),"-"==m){if(s(),">"==m||"-"==m){var t="-"+m;return s(),t}throw new SyntaxError('Arrow "->" or "--" expected '+o())}return void 0}function p(){return n(),";"==m?(s(),";"):void 0}function l(t,e){if(t&&e)for(var i in e)e.hasOwnProperty(i)&&(t[i]=e[i])}function u(t,e){var i={id:t+"",attr:e||{}};g[t]?l(g[t].attr,i.attr):g[t]=i}function c(t,e,i,s){v.push({from:t+"",to:e+"",type:i,attr:s||{}})}var f=-1,m="",g={},v=[];for(s();m&&"{"!=m;)s();if("{"!=m)throw new SyntaxError("Invalid data. Curly bracket { expected "+o());for(s();m&&"}"!=m;){var y=r();if(void 0==y)throw new SyntaxError("String with id expected "+o());var w=h();u(y,w);for(var b=d();b;){var x=y;if(y=r(),void 0==y)throw new SyntaxError("String with id expected "+o());u(y),w=h(),c(x,y,b,w),b=d()}p(),n()}if("}"!=m)throw new SyntaxError("Invalid data. Curly bracket } expected");var _=t.indexOf("{"),T=t.indexOf("}",_),C=-1!=_&&-1!=T?t.substring(_+1,T):void 0;if(!C)throw Error("Invalid data. no curly brackets containing data found");var S=[];for(y in g)g.hasOwnProperty(y)&&S.push(g[y]);return{nodes:S,edges:v}},_.util.DOTToGraph=function(t){function e(t,e,i){for(var s in e)!e.hasOwnProperty(s)||i&&-1!=i.indexOf(s)||(t[s]=e[s]);t.label&&(t.text=t.label,delete t.label),t.shape&&(t.style=t.shape,delete t.shape)}var i=_.util.parseDOT(t),s={nodes:[],edges:[],options:{nodes:{},edges:{}}};return i.nodes.forEach(function(t){if("graph"==t.id.toLowerCase())e(s.options,t.attr);else if("node"==t.id.toLowerCase())e(s.options.nodes,t.attr);else if("edge"==t.id.toLowerCase())e(s.options.edges,t.attr);else{var i={};i.id=t.id,i.text=t.id,e(i,t.attr),s.nodes.push(i)}}),i.edges.forEach(function(t){var i={};i.from=t.from,i.to=t.to,i.text=t.id,i.style="->"==t.type?"arrow-end":"line",e(i,t.attr),s.edges.push(i)}),s};var L={util:C,events:E,Controller:d,DataSet:o,DataView:n,Range:a,Stack:r,TimeStep:TimeStep,EventBus:h,components:{items:{Item:m,ItemBox:g,ItemPoint:v,ItemRange:y},Component:p,Panel:l,RootPanel:u,ItemSet:f,TimeAxis:c},Timeline:x,Graph:_};s!==void 0&&(s=L),i!==void 0&&i.exports!==void 0&&(i.exports=L),"function"==typeof t&&t(function(){return L}),"undefined"!=typeof window&&(window.vis=L),C.loadCss("/* vis.js stylesheet */\n\n.graph {\n    position: relative;\n    border: 1px solid #bfbfbf;\n}\n\n.graph .panel {\n    position: absolute;\n}\n\n.graph .groupset {\n    position: absolute;\n    padding: 0;\n    margin: 0;\n}\n\n\n.graph .itemset {\n    position: absolute;\n    padding: 0;\n    margin: 0;\n    overflow: hidden;\n}\n\n.graph .background {\n}\n\n.graph .foreground {\n}\n\n.graph .itemset-axis {\n    position: absolute;\n}\n\n.graph .groupset .itemset-axis {\n    border-top: 1px solid #bfbfbf;\n}\n\n/* TODO: with orientation=='bottom', this will more or less overlap with timeline axis\n.graph .groupset .itemset-axis:last-child {\n    border-top: none;\n}\n*/\n\n\n.graph .item {\n    position: absolute;\n    color: #1A1A1A;\n    border-color: #97B0F8;\n    background-color: #D5DDF6;\n    display: inline-block;\n}\n\n.graph .item.selected {\n    border-color: #FFC200;\n    background-color: #FFF785;\n    z-index: 999;\n}\n\n.graph .item.cluster {\n    /* TODO: use another color or pattern? */\n    background: #97B0F8 url('img/cluster_bg.png');\n    color: white;\n}\n.graph .item.cluster.point {\n    border-color: #D5DDF6;\n}\n\n.graph .item.box {\n    text-align: center;\n    border-style: solid;\n    border-width: 1px;\n    border-radius: 5px;\n    -moz-border-radius: 5px; /* For Firefox 3.6 and older */\n}\n\n.graph .item.point {\n    background: none;\n}\n\n.graph .dot {\n    border: 5px solid #97B0F8;\n    position: absolute;\n    border-radius: 5px;\n    -moz-border-radius: 5px;  /* For Firefox 3.6 and older */\n}\n\n.graph .item.range {\n    overflow: hidden;\n    border-style: solid;\n    border-width: 1px;\n    border-radius: 2px;\n    -moz-border-radius: 2px;  /* For Firefox 3.6 and older */\n}\n\n.graph .item.range .drag-left {\n    cursor: w-resize;\n    z-index: 1000;\n}\n\n.graph .item.range .drag-right {\n    cursor: e-resize;\n    z-index: 1000;\n}\n\n.graph .item.range .content {\n    position: relative;\n    display: inline-block;\n}\n\n.graph .item.line {\n    position: absolute;\n    width: 0;\n    border-left-width: 1px;\n    border-left-style: solid;\n}\n\n.graph .item .content {\n    margin: 5px;\n    white-space: nowrap;\n    overflow: hidden;\n}\n\n/* TODO: better css name, 'graph' is way to generic */\n\n.graph {\n    overflow: hidden;\n}\n\n.graph .axis {\n    position: relative;\n}\n\n.graph .axis .text {\n    position: absolute;\n    color: #4d4d4d;\n    padding: 3px;\n    white-space: nowrap;\n}\n\n.graph .axis .text.measure {\n    position: absolute;\n    padding-left: 0;\n    padding-right: 0;\n    margin-left: 0;\n    margin-right: 0;\n    visibility: hidden;\n}\n\n.graph .axis .grid.vertical {\n    position: absolute;\n    width: 0;\n    border-right: 1px solid;\n}\n\n.graph .axis .grid.horizontal {\n    position: absolute;\n    left: 0;\n    width: 100%;\n    height: 0;\n    border-bottom: 1px solid;\n}\n\n.graph .axis .grid.minor {\n    border-color: #e5e5e5;\n}\n\n.graph .axis .grid.major {\n    border-color: #bfbfbf;\n}\n\n")})()},{moment:2}],2:[function(e,i){(function(){(function(s){function o(t,e){return function(i){return l(t.call(this,i),e)}}function n(t){return function(e){return this.lang().ordinal(t.call(this,e))}}function r(){}function a(t){d(this,t)}function h(t){var e=this._data={},i=t.years||t.year||t.y||0,s=t.months||t.month||t.M||0,o=t.weeks||t.week||t.w||0,n=t.days||t.day||t.d||0,r=t.hours||t.hour||t.h||0,a=t.minutes||t.minute||t.m||0,h=t.seconds||t.second||t.s||0,d=t.milliseconds||t.millisecond||t.ms||0;this._milliseconds=d+1e3*h+6e4*a+36e5*r,this._days=n+7*o,this._months=s+12*i,e.milliseconds=d%1e3,h+=p(d/1e3),e.seconds=h%60,a+=p(h/60),e.minutes=a%60,r+=p(a/60),e.hours=r%24,n+=p(r/24),n+=7*o,e.days=n%30,s+=p(n/30),e.months=s%12,i+=p(s/12),e.years=i}function d(t,e){for(var i in e)e.hasOwnProperty(i)&&(t[i]=e[i]);return t}function p(t){return 0>t?Math.ceil(t):Math.floor(t)}function l(t,e){for(var i=t+"";e>i.length;)i="0"+i;return i}function u(t,e,i){var s,o=e._milliseconds,n=e._days,r=e._months;o&&t._d.setTime(+t+o*i),n&&t.date(t.date()+n*i),r&&(s=t.date(),t.date(1).month(t.month()+r*i).date(Math.min(s,t.daysInMonth())))}function c(t){return"[object Array]"===Object.prototype.toString.call(t)}function f(t,e){var i,s=Math.min(t.length,e.length),o=Math.abs(t.length-e.length),n=0;for(i=0;s>i;i++)~~t[i]!==~~e[i]&&n++;return n+o}function m(t,e){return e.abbr=t,P[t]||(P[t]=new r),P[t].set(e),P[t]}function g(t){return t?(!P[t]&&H&&e("./lang/"+t),P[t]):F.fn._lang}function v(t){return t.match(/\[.*\]/)?t.replace(/^\[|\]$/g,""):t.replace(/\\/g,"")}function y(t){var e,i,s=t.match(j);for(e=0,i=s.length;i>e;e++)s[e]=ae[s[e]]?ae[s[e]]:v(s[e]);return function(o){var n="";for(e=0;i>e;e++)n+="function"==typeof s[e].call?s[e].call(o,t):s[e];return n}}function w(t,e){function i(e){return t.lang().longDateFormat(e)||e}for(var s=5;s--&&U.test(e);)e=e.replace(U,i);return oe[e]||(oe[e]=y(e)),oe[e](t)}function b(t){switch(t){case"DDDD":return q;case"YYYY":return V;case"YYYYY":return X;case"S":case"SS":case"SSS":case"DDD":return B;case"MMM":case"MMMM":case"dd":case"ddd":case"dddd":case"a":case"A":return K;case"X":return J;case"Z":case"ZZ":return G;case"T":return Z;case"MM":case"DD":case"YY":case"HH":case"hh":case"mm":case"ss":case"M":case"D":case"d":case"H":case"h":case"m":case"s":return W;default:return RegExp(t.replace("\\",""))}}function x(t,e,i){var s,o=i._a;switch(t){case"M":case"MM":o[1]=null==e?0:~~e-1;break;case"MMM":case"MMMM":s=g(i._l).monthsParse(e),null!=s?o[1]=s:i._isValid=!1;break;case"D":case"DD":case"DDD":case"DDDD":null!=e&&(o[2]=~~e);break;case"YY":o[0]=~~e+(~~e>68?1900:2e3);break;case"YYYY":case"YYYYY":o[0]=~~e;break;case"a":case"A":i._isPm="pm"===(e+"").toLowerCase();break;case"H":case"HH":case"h":case"hh":o[3]=~~e;break;case"m":case"mm":o[4]=~~e;break;case"s":case"ss":o[5]=~~e;break;case"S":case"SS":case"SSS":o[6]=~~(1e3*("0."+e));break;case"X":i._d=new Date(1e3*parseFloat(e));break;case"Z":case"ZZ":i._useUTC=!0,s=(e+"").match(ee),s&&s[1]&&(i._tzh=~~s[1]),s&&s[2]&&(i._tzm=~~s[2]),s&&"+"===s[0]&&(i._tzh=-i._tzh,i._tzm=-i._tzm)}null==e&&(i._isValid=!1)}function _(t){var e,i,s=[];if(!t._d){for(e=0;7>e;e++)t._a[e]=s[e]=null==t._a[e]?2===e?1:0:t._a[e];s[3]+=t._tzh||0,s[4]+=t._tzm||0,i=new Date(0),t._useUTC?(i.setUTCFullYear(s[0],s[1],s[2]),i.setUTCHours(s[3],s[4],s[5],s[6])):(i.setFullYear(s[0],s[1],s[2]),i.setHours(s[3],s[4],s[5],s[6])),t._d=i}}function T(t){var e,i,s=t._f.match(j),o=t._i;for(t._a=[],e=0;s.length>e;e++)i=(b(s[e]).exec(o)||[])[0],i&&(o=o.slice(o.indexOf(i)+i.length)),ae[s[e]]&&x(s[e],i,t);t._isPm&&12>t._a[3]&&(t._a[3]+=12),t._isPm===!1&&12===t._a[3]&&(t._a[3]=0),_(t)}function C(t){for(var e,i,s,o,n=99;t._f.length;){if(e=d({},t),e._f=t._f.pop(),T(e),i=new a(e),i.isValid()){s=i;break}o=f(e._a,i.toArray()),n>o&&(n=o,s=i)}d(t,s)}function S(t){var e,i=t._i;if(Q.exec(i)){for(t._f="YYYY-MM-DDT",e=0;4>e;e++)if(te[e][1].exec(i)){t._f+=te[e][0];break}G.exec(i)&&(t._f+=" Z"),T(t)}else t._d=new Date(i)}function M(t){var e=t._i,i=R.exec(e);e===s?t._d=new Date:i?t._d=new Date(+i[1]):"string"==typeof e?S(t):c(e)?(t._a=e.slice(0),_(t)):t._d=e instanceof Date?new Date(+e):new Date(e)}function E(t,e,i,s,o){return o.relativeTime(e||1,!!i,t,s)}function D(t,e,i){var s=z(Math.abs(t)/1e3),o=z(s/60),n=z(o/60),r=z(n/24),a=z(r/365),h=45>s&&["s",s]||1===o&&["m"]||45>o&&["mm",o]||1===n&&["h"]||22>n&&["hh",n]||1===r&&["d"]||25>=r&&["dd",r]||45>=r&&["M"]||345>r&&["MM",z(r/30)]||1===a&&["y"]||["yy",a];return h[2]=e,h[3]=t>0,h[4]=i,E.apply({},h)}function L(t,e,i){var s=i-e,o=i-t.day();return o>s&&(o-=7),s-7>o&&(o+=7),Math.ceil(F(t).add("d",o).dayOfYear()/7)}function O(t){var e=t._i,i=t._f;return null===e||""===e?null:("string"==typeof e&&(t._i=e=g().preparse(e)),F.isMoment(e)?(t=d({},e),t._d=new Date(+e._d)):i?c(i)?C(t):T(t):M(t),new a(t))}function N(t,e){F.fn[t]=F.fn[t+"s"]=function(t){var i=this._isUTC?"UTC":"";return null!=t?(this._d["set"+i+e](t),this):this._d["get"+i+e]()}}function k(t){F.duration.fn[t]=function(){return this._data[t]}}function A(t,e){F.duration.fn["as"+t]=function(){return+this/e}}for(var F,I,Y="2.0.0",z=Math.round,P={},H=i!==s&&i.exports,R=/^\/?Date\((\-?\d+)/i,j=/(\[[^\[]*\])|(\\)?(Mo|MM?M?M?|Do|DDDo|DD?D?D?|ddd?d?|do?|w[o|w]?|W[o|W]?|YYYYY|YYYY|YY|a|A|hh?|HH?|mm?|ss?|SS?S?|X|zz?|ZZ?|.)/g,U=/(\[[^\[]*\])|(\\)?(LT|LL?L?L?|l{1,4})/g,W=/\d\d?/,B=/\d{1,3}/,q=/\d{3}/,V=/\d{1,4}/,X=/[+\-]?\d{1,6}/,K=/[0-9]*[a-z\u00A0-\u05FF\u0700-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+|[\u0600-\u06FF]+\s*?[\u0600-\u06FF]+/i,G=/Z|[\+\-]\d\d:?\d\d/i,Z=/T/i,J=/[\+\-]?\d+(\.\d{1,3})?/,Q=/^\s*\d{4}-\d\d-\d\d((T| )(\d\d(:\d\d(:\d\d(\.\d\d?\d?)?)?)?)?([\+\-]\d\d:?\d\d)?)?/,$="YYYY-MM-DDTHH:mm:ssZ",te=[["HH:mm:ss.S",/(T| )\d\d:\d\d:\d\d\.\d{1,3}/],["HH:mm:ss",/(T| )\d\d:\d\d:\d\d/],["HH:mm",/(T| )\d\d:\d\d/],["HH",/(T| )\d\d/]],ee=/([\+\-]|\d\d)/gi,ie="Month|Date|Hours|Minutes|Seconds|Milliseconds".split("|"),se={Milliseconds:1,Seconds:1e3,Minutes:6e4,Hours:36e5,Days:864e5,Months:2592e6,Years:31536e6},oe={},ne="DDD w W M D d".split(" "),re="M D H h m s w W".split(" "),ae={M:function(){return this.month()+1},MMM:function(t){return this.lang().monthsShort(this,t)},MMMM:function(t){return this.lang().months(this,t)},D:function(){return this.date()},DDD:function(){return this.dayOfYear()},d:function(){return this.day()},dd:function(t){return this.lang().weekdaysMin(this,t)},ddd:function(t){return this.lang().weekdaysShort(this,t)},dddd:function(t){return this.lang().weekdays(this,t)},w:function(){return this.week()},W:function(){return this.isoWeek()},YY:function(){return l(this.year()%100,2)},YYYY:function(){return l(this.year(),4)},YYYYY:function(){return l(this.year(),5)},a:function(){return this.lang().meridiem(this.hours(),this.minutes(),!0)},A:function(){return this.lang().meridiem(this.hours(),this.minutes(),!1)},H:function(){return this.hours()},h:function(){return this.hours()%12||12},m:function(){return this.minutes()},s:function(){return this.seconds()},S:function(){return~~(this.milliseconds()/100)},SS:function(){return l(~~(this.milliseconds()/10),2)},SSS:function(){return l(this.milliseconds(),3)},Z:function(){var t=-this.zone(),e="+";return 0>t&&(t=-t,e="-"),e+l(~~(t/60),2)+":"+l(~~t%60,2)},ZZ:function(){var t=-this.zone(),e="+";return 0>t&&(t=-t,e="-"),e+l(~~(10*t/6),4)},X:function(){return this.unix()}};ne.length;)I=ne.pop(),ae[I+"o"]=n(ae[I]);for(;re.length;)I=re.pop(),ae[I+I]=o(ae[I],2);for(ae.DDDD=o(ae.DDD,3),r.prototype={set:function(t){var e,i;for(i in t)e=t[i],"function"==typeof e?this[i]=e:this["_"+i]=e},_months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),months:function(t){return this._months[t.month()]},_monthsShort:"Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec".split("_"),monthsShort:function(t){return this._monthsShort[t.month()]},monthsParse:function(t){var e,i,s;for(this._monthsParse||(this._monthsParse=[]),e=0;12>e;e++)if(this._monthsParse[e]||(i=F([2e3,e]),s="^"+this.months(i,"")+"|^"+this.monthsShort(i,""),this._monthsParse[e]=RegExp(s.replace(".",""),"i")),this._monthsParse[e].test(t))return e},_weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),weekdays:function(t){return this._weekdays[t.day()]},_weekdaysShort:"Sun_Mon_Tue_Wed_Thu_Fri_Sat".split("_"),weekdaysShort:function(t){return this._weekdaysShort[t.day()]},_weekdaysMin:"Su_Mo_Tu_We_Th_Fr_Sa".split("_"),weekdaysMin:function(t){return this._weekdaysMin[t.day()]},_longDateFormat:{LT:"h:mm A",L:"MM/DD/YYYY",LL:"MMMM D YYYY",LLL:"MMMM D YYYY LT",LLLL:"dddd, MMMM D YYYY LT"},longDateFormat:function(t){var e=this._longDateFormat[t];return!e&&this._longDateFormat[t.toUpperCase()]&&(e=this._longDateFormat[t.toUpperCase()].replace(/MMMM|MM|DD|dddd/g,function(t){return t.slice(1)}),this._longDateFormat[t]=e),e},meridiem:function(t,e,i){return t>11?i?"pm":"PM":i?"am":"AM"},_calendar:{sameDay:"[Today at] LT",nextDay:"[Tomorrow at] LT",nextWeek:"dddd [at] LT",lastDay:"[Yesterday at] LT",lastWeek:"[last] dddd [at] LT",sameElse:"L"},calendar:function(t,e){var i=this._calendar[t];return"function"==typeof i?i.apply(e):i},_relativeTime:{future:"in %s",past:"%s ago",s:"a few seconds",m:"a minute",mm:"%d minutes",h:"an hour",hh:"%d hours",d:"a day",dd:"%d days",M:"a month",MM:"%d months",y:"a year",yy:"%d years"},relativeTime:function(t,e,i,s){var o=this._relativeTime[i];return"function"==typeof o?o(t,e,i,s):o.replace(/%d/i,t)},pastFuture:function(t,e){var i=this._relativeTime[t>0?"future":"past"];return"function"==typeof i?i(e):i.replace(/%s/i,e)},ordinal:function(t){return this._ordinal.replace("%d",t)},_ordinal:"%d",preparse:function(t){return t},postformat:function(t){return t},week:function(t){return L(t,this._week.dow,this._week.doy)},_week:{dow:0,doy:6}},F=function(t,e,i){return O({_i:t,_f:e,_l:i,_isUTC:!1})},F.utc=function(t,e,i){return O({_useUTC:!0,_isUTC:!0,_l:i,_i:t,_f:e})},F.unix=function(t){return F(1e3*t)},F.duration=function(t,e){var i,s=F.isDuration(t),o="number"==typeof t,n=s?t._data:o?{}:t;return o&&(e?n[e]=t:n.milliseconds=t),i=new h(n),s&&t.hasOwnProperty("_lang")&&(i._lang=t._lang),i},F.version=Y,F.defaultFormat=$,F.lang=function(t,e){return t?(e?m(t,e):P[t]||g(t),F.duration.fn._lang=F.fn._lang=g(t),s):F.fn._lang._abbr},F.langData=function(t){return t&&t._lang&&t._lang._abbr&&(t=t._lang._abbr),g(t)},F.isMoment=function(t){return t instanceof a},F.isDuration=function(t){return t instanceof h},F.fn=a.prototype={clone:function(){return F(this)},valueOf:function(){return+this._d},unix:function(){return Math.floor(+this._d/1e3)},toString:function(){return this.format("ddd MMM DD YYYY HH:mm:ss [GMT]ZZ")},toDate:function(){return this._d},toJSON:function(){return F.utc(this).format("YYYY-MM-DD[T]HH:mm:ss.SSS[Z]")},toArray:function(){var t=this;return[t.year(),t.month(),t.date(),t.hours(),t.minutes(),t.seconds(),t.milliseconds()]},isValid:function(){return null==this._isValid&&(this._isValid=this._a?!f(this._a,(this._isUTC?F.utc(this._a):F(this._a)).toArray()):!isNaN(this._d.getTime())),!!this._isValid},utc:function(){return this._isUTC=!0,this},local:function(){return this._isUTC=!1,this},format:function(t){var e=w(this,t||F.defaultFormat);return this.lang().postformat(e)},add:function(t,e){var i;return i="string"==typeof t?F.duration(+e,t):F.duration(t,e),u(this,i,1),this},subtract:function(t,e){var i;return i="string"==typeof t?F.duration(+e,t):F.duration(t,e),u(this,i,-1),this},diff:function(t,e,i){var s,o,n=this._isUTC?F(t).utc():F(t).local(),r=6e4*(this.zone()-n.zone());return e&&(e=e.replace(/s$/,"")),"year"===e||"month"===e?(s=432e5*(this.daysInMonth()+n.daysInMonth()),o=12*(this.year()-n.year())+(this.month()-n.month()),o+=(this-F(this).startOf("month")-(n-F(n).startOf("month")))/s,"year"===e&&(o/=12)):(s=this-n-r,o="second"===e?s/1e3:"minute"===e?s/6e4:"hour"===e?s/36e5:"day"===e?s/864e5:"week"===e?s/6048e5:s),i?o:p(o)},from:function(t,e){return F.duration(this.diff(t)).lang(this.lang()._abbr).humanize(!e)
-},fromNow:function(t){return this.from(F(),t)},calendar:function(){var t=this.diff(F().startOf("day"),"days",!0),e=-6>t?"sameElse":-1>t?"lastWeek":0>t?"lastDay":1>t?"sameDay":2>t?"nextDay":7>t?"nextWeek":"sameElse";return this.format(this.lang().calendar(e,this))},isLeapYear:function(){var t=this.year();return 0===t%4&&0!==t%100||0===t%400},isDST:function(){return this.zone()<F([this.year()]).zone()||this.zone()<F([this.year(),5]).zone()},day:function(t){var e=this._isUTC?this._d.getUTCDay():this._d.getDay();return null==t?e:this.add({d:t-e})},startOf:function(t){switch(t=t.replace(/s$/,"")){case"year":this.month(0);case"month":this.date(1);case"week":case"day":this.hours(0);case"hour":this.minutes(0);case"minute":this.seconds(0);case"second":this.milliseconds(0)}return"week"===t&&this.day(0),this},endOf:function(t){return this.startOf(t).add(t.replace(/s?$/,"s"),1).subtract("ms",1)},isAfter:function(t,e){return e=e!==s?e:"millisecond",+this.clone().startOf(e)>+F(t).startOf(e)},isBefore:function(t,e){return e=e!==s?e:"millisecond",+this.clone().startOf(e)<+F(t).startOf(e)},isSame:function(t,e){return e=e!==s?e:"millisecond",+this.clone().startOf(e)===+F(t).startOf(e)},zone:function(){return this._isUTC?0:this._d.getTimezoneOffset()},daysInMonth:function(){return F.utc([this.year(),this.month()+1,0]).date()},dayOfYear:function(t){var e=z((F(this).startOf("day")-F(this).startOf("year"))/864e5)+1;return null==t?e:this.add("d",t-e)},isoWeek:function(t){var e=L(this,1,4);return null==t?e:this.add("d",7*(t-e))},week:function(t){var e=this.lang().week(this);return null==t?e:this.add("d",7*(t-e))},lang:function(t){return t===s?this._lang:(this._lang=g(t),this)}},I=0;ie.length>I;I++)N(ie[I].toLowerCase().replace(/s$/,""),ie[I]);N("year","FullYear"),F.fn.days=F.fn.day,F.fn.weeks=F.fn.week,F.fn.isoWeeks=F.fn.isoWeek,F.duration.fn=h.prototype={weeks:function(){return p(this.days()/7)},valueOf:function(){return this._milliseconds+864e5*this._days+2592e6*this._months},humanize:function(t){var e=+this,i=D(e,!t,this.lang());return t&&(i=this.lang().pastFuture(e,i)),this.lang().postformat(i)},lang:F.fn.lang};for(I in se)se.hasOwnProperty(I)&&(A(I,se[I]),k(I.toLowerCase()));A("Weeks",6048e5),F.lang("en",{ordinal:function(t){var e=t%10,i=1===~~(t%100/10)?"th":1===e?"st":2===e?"nd":3===e?"rd":"th";return t+i}}),H&&(i.exports=F),"undefined"==typeof ender&&(this.moment=F),"function"==typeof t&&t.amd&&t("moment",[],function(){return F})}).call(this)})()},{}]},{},[1])(1)});
\ No newline at end of file
+(function(t){if("function"==typeof bootstrap)bootstrap("vis",t);else if("object"==typeof exports)module.exports=t();else if("function"==typeof define&&define.amd)define(t);else if("undefined"!=typeof ses){if(!ses.ok())return;ses.makeVis=t}else"undefined"!=typeof window?window.vis=t():global.vis=t()})(function(){var t;return function(t,e,i){function s(i,n){if(!e[i]){if(!t[i]){var r="function"==typeof require&&require;if(!n&&r)return r(i,!0);if(o)return o(i,!0);throw Error("Cannot find module '"+i+"'")}var a=e[i]={exports:{}};t[i][0].call(a.exports,function(e){var o=t[i][1][e];return s(o?o:e)},a,a.exports)}return e[i].exports}for(var o="function"==typeof require&&require,n=0;i.length>n;n++)s(i[n]);return s}({1:[function(e,i,s){(function(){function o(t){if(this.id=E.randomUUID(),this.options=t||{},this.data={},this.fieldId=this.options.fieldId||"id",this.fieldTypes={},this.options.fieldTypes)for(var e in this.options.fieldTypes)if(this.options.fieldTypes.hasOwnProperty(e)){var i=this.options.fieldTypes[e];this.fieldTypes[e]="Date"==i||"ISODate"==i||"ASPDate"==i?"Date":i}this.subscribers={},this.internalIds={}}function n(t,e){this.id=E.randomUUID(),this.data=null,this.ids={},this.options=e||{},this.fieldId="id",this.subscribers={};var i=this;this.listener=function(){i._onEvent.apply(i,arguments)},this.setData(t)}function r(t,e){this.parent=t,this.options=e||{},this.defaultOptions={order:function(t,e){if(t instanceof y){if(e instanceof y){var i=t.data.end-t.data.start,s=e.data.end-e.data.start;return i-s||t.data.start-e.data.start}return-1}return e instanceof y?1:t.data.start-e.data.start},margin:{item:10}},this.ordered=[]}function a(t){this.id=E.randomUUID(),this.start=0,this.end=0,this.options={min:null,max:null,zoomMin:null,zoomMax:null},this.listeners=[],this.setOptions(t)}function h(){this.subscriptions=[]}function d(){this.id=E.randomUUID(),this.components={},this.repaintTimer=void 0,this.reflowTimer=void 0}function p(){this.id=null,this.parent=null,this.depends=null,this.controller=null,this.options=null,this.frame=null,this.top=0,this.left=0,this.width=0,this.height=0}function l(t,e,i){this.id=E.randomUUID(),this.parent=t,this.depends=e,this.options=i||{}}function u(t,e){this.id=E.randomUUID(),this.container=t,this.options=e||{},this.defaultOptions={autoResize:!0},this.listeners={}}function c(t,e,i){this.id=E.randomUUID(),this.parent=t,this.depends=e,this.dom={majorLines:[],majorTexts:[],minorLines:[],minorTexts:[],redundant:{majorLines:[],majorTexts:[],minorLines:[],minorTexts:[]}},this.props={range:{start:0,end:0,minimumStep:0},lineTop:0},this.options=i||{},this.defaultOptions={orientation:"bottom",showMinorLabels:!0,showMajorLabels:!0},this.conversion=null,this.range=null}function f(t,e,i){this.id=E.randomUUID(),this.parent=t,this.depends=e,this.options=i||{},this.defaultOptions={style:"box",align:"center",orientation:"bottom",margin:{axis:20,item:10},padding:5},this.dom={};var s=this;this.itemsData=null,this.range=null,this.listeners={add:function(t,e,i){i!=s.id&&s._onAdd(e.items)},update:function(t,e,i){i!=s.id&&s._onUpdate(e.items)},remove:function(t,e,i){i!=s.id&&s._onRemove(e.items)}},this.items={},this.queue={},this.stack=new r(this,Object.create(this.options)),this.conversion=null}function m(t,e,i,s){this.parent=t,this.data=e,this.dom=null,this.options=i||{},this.defaultOptions=s||{},this.selected=!1,this.visible=!1,this.top=0,this.left=0,this.width=0,this.height=0}function g(t,e,i,s){this.props={dot:{left:0,top:0,width:0,height:0},line:{top:0,left:0,width:0,height:0}},m.call(this,t,e,i,s)}function v(t,e,i,s){this.props={dot:{top:0,width:0,height:0},content:{height:0,marginLeft:0}},m.call(this,t,e,i,s)}function y(t,e,i,s){this.props={content:{left:0,width:0}},m.call(this,t,e,i,s)}function w(t,e,i){this.id=E.randomUUID(),this.parent=t,this.groupId=e,this.itemsData=null,this.itemset=null,this.options=i||{},this.options.top=0,this.top=0,this.left=0,this.width=0,this.height=0}function b(t,e,i){this.id=E.randomUUID(),this.parent=t,this.depends=e,this.options=i||{},this.range=null,this.itemsData=null,this.groupsData=null,this.groups={},this.queue={};var s=this;this.listeners={add:function(t,e){s._onAdd(e.items)},update:function(t,e){s._onUpdate(e.items)},remove:function(t,e){s._onRemove(e.items)}}}function x(t,e,i){var s=this;if(this.options=E.extend({orientation:"bottom",min:null,max:null,zoomMin:10,zoomMax:31536e10,moveable:!0,zoomable:!0,showMinorLabels:!0,showMajorLabels:!0,autoResize:!1},i),this.controller=new d,!t)throw Error("No container element provided");var o=Object.create(this.options);o.height=function(){return s.options.height?s.options.height:s.timeaxis.height+s.content.height},this.root=new u(t,o),this.controller.add(this.root);var n=M().hours(0).minutes(0).seconds(0).milliseconds(0);this.range=new a({start:n.clone().add("days",-3).valueOf(),end:n.clone().add("days",4).valueOf()}),this.range.subscribe(this.root,"move","horizontal"),this.range.subscribe(this.root,"zoom","horizontal"),this.range.on("rangechange",function(){var t=!0;s.controller.requestReflow(t)}),this.range.on("rangechanged",function(){var t=!0;s.controller.requestReflow(t)});var r=Object.create(o);r.range=this.range,this.timeaxis=new c(this.root,[],r),this.timeaxis.setRange(this.range),this.controller.add(this.timeaxis),this.setGroups(null),this.itemsData=null,this.groupsData=null,e&&this.setItems(e)}function _(t,e,i,s){this.selected=!1,this.edges=[],this.group=s.nodes.group,this.fontSize=s.nodes.fontSize,this.fontFace=s.nodes.fontFace,this.fontColor=s.nodes.fontColor,this.borderColor=s.nodes.borderColor,this.backgroundColor=s.nodes.backgroundColor,this.highlightColor=s.nodes.highlightColor,this.id=void 0,this.style=s.nodes.style,this.image=s.nodes.image,this.x=0,this.y=0,this.xFixed=!1,this.yFixed=!1,this.radius=s.nodes.radius,this.radiusFixed=!1,this.radiusMin=s.nodes.radiusMin,this.radiusMax=s.nodes.radiusMax,this.imagelist=e,this.grouplist=i,this.setProperties(t,s),this.mass=50,this.fx=0,this.fy=0,this.vx=0,this.vy=0,this.minForce=s.minForce,this.damping=.9}function T(t,e,i){if(!e)throw"No graph provided";this.graph=e,this.widthMin=i.edges.widthMin,this.widthMax=i.edges.widthMax,this.id=void 0,this.style=i.edges.style,this.title=void 0,this.width=i.edges.width,this.value=void 0,this.length=i.edges.length,this.dashlength=i.edges.dashlength,this.dashgap=i.edges.dashgap,this.altdashlength=i.edges.altdashlength,this.stiffness=void 0,this.color=i.edges.color,this.widthFixed=!1,this.lengthFixed=!1,this.setProperties(t,i)}function C(t,e,i,s){this.container=t?t:document.body,this.x=0,this.y=0,this.padding=5,void 0!==e&&void 0!==i&&this.setPosition(e,i),void 0!==s&&this.setText(s),this.frame=document.createElement("div");var o=this.frame.style;o.position="absolute",o.visibility="hidden",o.border="1px solid #666",o.color="black",o.padding=this.padding+"px",o.backgroundColor="#FFFFC6",o.borderRadius="3px",o.MozBorderRadius="3px",o.WebkitBorderRadius="3px",o.boxShadow="3px 3px 10px rgba(128, 128, 128, 0.5)",o.whiteSpace="nowrap",this.container.appendChild(this.frame)}function S(t,e,i){this.containerElement=t,this.width="100%",this.height="100%",this.refreshRate=50,this.stabilize=!0,this.selectable=!0,this.constants={nodes:{radiusMin:5,radiusMax:20,radius:5,distance:100,style:"rect",image:void 0,widthMin:16,widthMax:64,fontColor:"black",fontSize:14,fontFace:"arial",borderColor:"#2B7CE9",backgroundColor:"#97C2FC",highlightColor:"#D2E5FF",group:void 0},edges:{widthMin:1,widthMax:15,width:1,style:"line",color:"#343434",fontColor:"#343434",fontSize:14,fontFace:"arial",length:100,dashlength:10,dashgap:5},minForce:.05,minVelocity:.02,maxIterations:1e3},this.nodes=[],this.edges=[],this.images=new Images,this.groups=new Groups,this.moving=!1,this.selection=[],this.timer=void 0,this._create(),this.setOptions(i),this.setData(e)}var M=e("moment"),E={};E.isNumber=function(t){return t instanceof Number||"number"==typeof t},E.isString=function(t){return t instanceof String||"string"==typeof t},E.isDate=function(t){if(t instanceof Date)return!0;if(E.isString(t)){var e=D.exec(t);if(e)return!0;if(!isNaN(Date.parse(t)))return!0}return!1},E.isDataTable=function(t){return"undefined"!=typeof google&&google.visualization&&google.visualization.DataTable&&t instanceof google.visualization.DataTable},E.randomUUID=function(){var t=function(){return Math.floor(65536*Math.random()).toString(16)};return t()+t()+"-"+t()+"-"+t()+"-"+t()+"-"+t()+t()+t()},E.extend=function(t){for(var e=1,i=arguments.length;i>e;e++){var s=arguments[e];for(var o in s)s.hasOwnProperty(o)&&void 0!==s[o]&&(t[o]=s[o])}return t},E.cast=function(t,e){var i;if(void 0===t)return void 0;if(null===t)return null;if(!e)return t;if("string"!=typeof e&&!(e instanceof String))throw Error("Type must be a string");switch(e){case"boolean":case"Boolean":return Boolean(t);case"number":case"Number":return Number(t);case"string":case"String":return t+"";case"Date":if(E.isNumber(t))return new Date(t);if(t instanceof Date)return new Date(t.valueOf());if(M.isMoment(t))return new Date(t.valueOf());if(E.isString(t))return i=D.exec(t),i?new Date(Number(i[1])):M(t).toDate();throw Error("Cannot cast object of type "+E.getType(t)+" to type Date");case"Moment":if(E.isNumber(t))return M(t);if(t instanceof Date)return M(t.valueOf());if(M.isMoment(t))return M.clone();if(E.isString(t))return i=D.exec(t),i?M(Number(i[1])):M(t);throw Error("Cannot cast object of type "+E.getType(t)+" to type Date");case"ISODate":if(t instanceof Date)return t.toISOString();if(M.isMoment(t))return t.toDate().toISOString();if(E.isNumber(t)||E.isString(t))return M(t).toDate().toISOString();throw Error("Cannot cast object of type "+E.getType(t)+" to type ISODate");case"ASPDate":if(t instanceof Date)return"/Date("+t.valueOf()+")/";if(E.isNumber(t)||E.isString(t))return"/Date("+M(t).valueOf()+")/";throw Error("Cannot cast object of type "+E.getType(t)+" to type ASPDate");default:throw Error("Cannot cast object of type "+E.getType(t)+' to type "'+e+'"')}};var D=/^\/?Date\((\-?\d+)/i;if(E.getType=function(t){var e=typeof t;return"object"==e?null==t?"null":t instanceof Boolean?"Boolean":t instanceof Number?"Number":t instanceof String?"String":t instanceof Array?"Array":t instanceof Date?"Date":"Object":"number"==e?"Number":"boolean"==e?"Boolean":"string"==e?"String":e},E.getAbsoluteLeft=function(t){for(var e=document.documentElement,i=document.body,s=t.offsetLeft,o=t.offsetParent;null!=o&&o!=i&&o!=e;)s+=o.offsetLeft,s-=o.scrollLeft,o=o.offsetParent;return s},E.getAbsoluteTop=function(t){for(var e=document.documentElement,i=document.body,s=t.offsetTop,o=t.offsetParent;null!=o&&o!=i&&o!=e;)s+=o.offsetTop,s-=o.scrollTop,o=o.offsetParent;return s},E.getPageY=function(t){if("pageY"in t)return t.pageY;var e;e="targetTouches"in t&&t.targetTouches.length?t.targetTouches[0].clientY:t.clientY;var i=document.documentElement,s=document.body;return e+(i&&i.scrollTop||s&&s.scrollTop||0)-(i&&i.clientTop||s&&s.clientTop||0)},E.getPageX=function(t){if("pageY"in t)return t.pageX;var e;e="targetTouches"in t&&t.targetTouches.length?t.targetTouches[0].clientX:t.clientX;var i=document.documentElement,s=document.body;return e+(i&&i.scrollLeft||s&&s.scrollLeft||0)-(i&&i.clientLeft||s&&s.clientLeft||0)},E.addClassName=function(t,e){var i=t.className.split(" ");-1==i.indexOf(e)&&(i.push(e),t.className=i.join(" "))},E.removeClassName=function(t,e){var i=t.className.split(" "),s=i.indexOf(e);-1!=s&&(i.splice(s,1),t.className=i.join(" "))},E.forEach=function(t,e){var i,s;if(t instanceof Array)for(i=0,s=t.length;s>i;i++)e(t[i],i,t);else for(i in t)t.hasOwnProperty(i)&&e(t[i],i,t)},E.updateProperty=function(t,e,i){return t[e]!==i?(t[e]=i,!0):!1},E.addEventListener=function(t,e,i,s){t.addEventListener?(void 0===s&&(s=!1),"mousewheel"===e&&navigator.userAgent.indexOf("Firefox")>=0&&(e="DOMMouseScroll"),t.addEventListener(e,i,s)):t.attachEvent("on"+e,i)},E.removeEventListener=function(t,e,i,s){t.removeEventListener?(void 0===s&&(s=!1),"mousewheel"===e&&navigator.userAgent.indexOf("Firefox")>=0&&(e="DOMMouseScroll"),t.removeEventListener(e,i,s)):t.detachEvent("on"+e,i)},E.getTarget=function(t){t||(t=window.event);var e;return t.target?e=t.target:t.srcElement&&(e=t.srcElement),void 0!=e.nodeType&&3==e.nodeType&&(e=e.parentNode),e},E.stopPropagation=function(t){t||(t=window.event),t.stopPropagation?t.stopPropagation():t.cancelBubble=!0},E.preventDefault=function(t){t||(t=window.event),t.preventDefault?t.preventDefault():t.returnValue=!1},E.option={},E.option.asBoolean=function(t,e){return"function"==typeof t&&(t=t()),null!=t?0!=t:e||null},E.option.asNumber=function(t,e){return"function"==typeof t&&(t=t()),null!=t?Number(t)||e||null:e||null},E.option.asString=function(t,e){return"function"==typeof t&&(t=t()),null!=t?t+"":e||null},E.option.asSize=function(t,e){return"function"==typeof t&&(t=t()),E.isString(t)?t:E.isNumber(t)?t+"px":e||null},E.option.asElement=function(t,e){return"function"==typeof t&&(t=t()),t||e||null},E.loadCss=function(t){if("undefined"!=typeof document){var e=document.createElement("style");e.type="text/css",e.styleSheet?e.styleSheet.cssText=t:e.appendChild(document.createTextNode(t)),document.getElementsByTagName("head")[0].appendChild(e)}},!Array.prototype.indexOf){Array.prototype.indexOf=function(t){for(var e=0;this.length>e;e++)if(this[e]==t)return e;return-1};try{console.log("Warning: Ancient browser detected. Please update your browser")}catch(L){}}Array.prototype.forEach||(Array.prototype.forEach=function(t,e){for(var i=0,s=this.length;s>i;++i)t.call(e||this,this[i],i,this)}),Array.prototype.map||(Array.prototype.map=function(t,e){var i,s,o;if(null==this)throw new TypeError(" this is null or not defined");var n=Object(this),r=n.length>>>0;if("function"!=typeof t)throw new TypeError(t+" is not a function");for(e&&(i=e),s=Array(r),o=0;r>o;){var a,h;o in n&&(a=n[o],h=t.call(i,a,o,n),s[o]=h),o++}return s}),Array.prototype.filter||(Array.prototype.filter=function(t){"use strict";if(null==this)throw new TypeError;var e=Object(this),i=e.length>>>0;if("function"!=typeof t)throw new TypeError;for(var s=[],o=arguments[1],n=0;i>n;n++)if(n in e){var r=e[n];t.call(o,r,n,e)&&s.push(r)}return s}),Object.keys||(Object.keys=function(){var t=Object.prototype.hasOwnProperty,e=!{toString:null}.propertyIsEnumerable("toString"),i=["toString","toLocaleString","valueOf","hasOwnProperty","isPrototypeOf","propertyIsEnumerable","constructor"],s=i.length;return function(o){if("object"!=typeof o&&"function"!=typeof o||null===o)throw new TypeError("Object.keys called on non-object");var n=[];for(var r in o)t.call(o,r)&&n.push(r);if(e)for(var a=0;s>a;a++)t.call(o,i[a])&&n.push(i[a]);return n}}()),Array.isArray||(Array.isArray=function(t){return"[object Array]"===Object.prototype.toString.call(t)}),Function.prototype.bind||(Function.prototype.bind=function(t){if("function"!=typeof this)throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");var e=Array.prototype.slice.call(arguments,1),i=this,s=function(){},o=function(){return i.apply(this instanceof s&&t?this:t,e.concat(Array.prototype.slice.call(arguments)))};return s.prototype=this.prototype,o.prototype=new s,o}),Object.create||(Object.create=function(t){function e(){}if(arguments.length>1)throw Error("Object.create implementation only accepts the first parameter.");return e.prototype=t,new e});var O={listeners:[],indexOf:function(t){for(var e=this.listeners,i=0,s=this.listeners.length;s>i;i++){var o=e[i];if(o&&o.object==t)return i}return-1},addListener:function(t,e,i){var s=this.indexOf(t),o=this.listeners[s];o||(o={object:t,events:{}},this.listeners.push(o));var n=o.events[e];n||(n=[],o.events[e]=n),-1==n.indexOf(i)&&n.push(i)},removeListener:function(t,e,i){var s=this.indexOf(t),o=this.listeners[s];if(o){var n=o.events[e];n&&(s=n.indexOf(i),-1!=s&&n.splice(s,1),0==n.length&&delete o.events[e]);var r=0,a=o.events;for(var h in a)a.hasOwnProperty(h)&&r++;0==r&&delete this.listeners[s]}},removeAllListeners:function(){this.listeners=[]},trigger:function(t,e,i){var s=this.indexOf(t),o=this.listeners[s];if(o){var n=o.events[e];if(n)for(var r=0,a=n.length;a>r;r++)n[r](i)}}};TimeStep=function(t,e,i){this.current=new Date,this._start=new Date,this._end=new Date,this.autoScale=!0,this.scale=TimeStep.SCALE.DAY,this.step=1,this.setRange(t,e,i)},TimeStep.SCALE={MILLISECOND:1,SECOND:2,MINUTE:3,HOUR:4,DAY:5,WEEKDAY:6,MONTH:7,YEAR:8},TimeStep.prototype.setRange=function(t,e,i){t instanceof Date&&e instanceof Date&&(this._start=void 0!=t?new Date(t.valueOf()):new Date,this._end=void 0!=e?new Date(e.valueOf()):new Date,this.autoScale&&this.setMinimumStep(i))},TimeStep.prototype.first=function(){this.current=new Date(this._start.valueOf()),this.roundToMinor()},TimeStep.prototype.roundToMinor=function(){switch(this.scale){case TimeStep.SCALE.YEAR:this.current.setFullYear(this.step*Math.floor(this.current.getFullYear()/this.step)),this.current.setMonth(0);case TimeStep.SCALE.MONTH:this.current.setDate(1);case TimeStep.SCALE.DAY:case TimeStep.SCALE.WEEKDAY:this.current.setHours(0);case TimeStep.SCALE.HOUR:this.current.setMinutes(0);case TimeStep.SCALE.MINUTE:this.current.setSeconds(0);case TimeStep.SCALE.SECOND:this.current.setMilliseconds(0)}if(1!=this.step)switch(this.scale){case TimeStep.SCALE.MILLISECOND:this.current.setMilliseconds(this.current.getMilliseconds()-this.current.getMilliseconds()%this.step);break;case TimeStep.SCALE.SECOND:this.current.setSeconds(this.current.getSeconds()-this.current.getSeconds()%this.step);break;case TimeStep.SCALE.MINUTE:this.current.setMinutes(this.current.getMinutes()-this.current.getMinutes()%this.step);break;case TimeStep.SCALE.HOUR:this.current.setHours(this.current.getHours()-this.current.getHours()%this.step);break;case TimeStep.SCALE.WEEKDAY:case TimeStep.SCALE.DAY:this.current.setDate(this.current.getDate()-1-(this.current.getDate()-1)%this.step+1);break;case TimeStep.SCALE.MONTH:this.current.setMonth(this.current.getMonth()-this.current.getMonth()%this.step);break;case TimeStep.SCALE.YEAR:this.current.setFullYear(this.current.getFullYear()-this.current.getFullYear()%this.step);break;default:}},TimeStep.prototype.hasNext=function(){return this.current.valueOf()<=this._end.valueOf()},TimeStep.prototype.next=function(){var t=this.current.valueOf();if(6>this.current.getMonth())switch(this.scale){case TimeStep.SCALE.MILLISECOND:this.current=new Date(this.current.valueOf()+this.step);break;case TimeStep.SCALE.SECOND:this.current=new Date(this.current.valueOf()+1e3*this.step);break;case TimeStep.SCALE.MINUTE:this.current=new Date(this.current.valueOf()+60*1e3*this.step);break;case TimeStep.SCALE.HOUR:this.current=new Date(this.current.valueOf()+60*60*1e3*this.step);var e=this.current.getHours();this.current.setHours(e-e%this.step);break;case TimeStep.SCALE.WEEKDAY:case TimeStep.SCALE.DAY:this.current.setDate(this.current.getDate()+this.step);break;case TimeStep.SCALE.MONTH:this.current.setMonth(this.current.getMonth()+this.step);break;case TimeStep.SCALE.YEAR:this.current.setFullYear(this.current.getFullYear()+this.step);break;default:}else switch(this.scale){case TimeStep.SCALE.MILLISECOND:this.current=new Date(this.current.valueOf()+this.step);break;case TimeStep.SCALE.SECOND:this.current.setSeconds(this.current.getSeconds()+this.step);break;case TimeStep.SCALE.MINUTE:this.current.setMinutes(this.current.getMinutes()+this.step);break;case TimeStep.SCALE.HOUR:this.current.setHours(this.current.getHours()+this.step);break;case TimeStep.SCALE.WEEKDAY:case TimeStep.SCALE.DAY:this.current.setDate(this.current.getDate()+this.step);break;case TimeStep.SCALE.MONTH:this.current.setMonth(this.current.getMonth()+this.step);break;case TimeStep.SCALE.YEAR:this.current.setFullYear(this.current.getFullYear()+this.step);break;default:}if(1!=this.step)switch(this.scale){case TimeStep.SCALE.MILLISECOND:this.current.getMilliseconds()<this.step&&this.current.setMilliseconds(0);break;case TimeStep.SCALE.SECOND:this.current.getSeconds()<this.step&&this.current.setSeconds(0);break;case TimeStep.SCALE.MINUTE:this.current.getMinutes()<this.step&&this.current.setMinutes(0);break;case TimeStep.SCALE.HOUR:this.current.getHours()<this.step&&this.current.setHours(0);break;case TimeStep.SCALE.WEEKDAY:case TimeStep.SCALE.DAY:this.current.getDate()<this.step+1&&this.current.setDate(1);break;case TimeStep.SCALE.MONTH:this.current.getMonth()<this.step&&this.current.setMonth(0);break;case TimeStep.SCALE.YEAR:break;default:}this.current.valueOf()==t&&(this.current=new Date(this._end.valueOf()))},TimeStep.prototype.getCurrent=function(){return this.current},TimeStep.prototype.setScale=function(t,e){this.scale=t,e>0&&(this.step=e),this.autoScale=!1},TimeStep.prototype.setAutoScale=function(t){this.autoScale=t},TimeStep.prototype.setMinimumStep=function(t){if(void 0!=t){var e=31104e6,i=2592e6,s=864e5,o=36e5,n=6e4,r=1e3,a=1;1e3*e>t&&(this.scale=TimeStep.SCALE.YEAR,this.step=1e3),500*e>t&&(this.scale=TimeStep.SCALE.YEAR,this.step=500),100*e>t&&(this.scale=TimeStep.SCALE.YEAR,this.step=100),50*e>t&&(this.scale=TimeStep.SCALE.YEAR,this.step=50),10*e>t&&(this.scale=TimeStep.SCALE.YEAR,this.step=10),5*e>t&&(this.scale=TimeStep.SCALE.YEAR,this.step=5),e>t&&(this.scale=TimeStep.SCALE.YEAR,this.step=1),3*i>t&&(this.scale=TimeStep.SCALE.MONTH,this.step=3),i>t&&(this.scale=TimeStep.SCALE.MONTH,this.step=1),5*s>t&&(this.scale=TimeStep.SCALE.DAY,this.step=5),2*s>t&&(this.scale=TimeStep.SCALE.DAY,this.step=2),s>t&&(this.scale=TimeStep.SCALE.DAY,this.step=1),s/2>t&&(this.scale=TimeStep.SCALE.WEEKDAY,this.step=1),4*o>t&&(this.scale=TimeStep.SCALE.HOUR,this.step=4),o>t&&(this.scale=TimeStep.SCALE.HOUR,this.step=1),15*n>t&&(this.scale=TimeStep.SCALE.MINUTE,this.step=15),10*n>t&&(this.scale=TimeStep.SCALE.MINUTE,this.step=10),5*n>t&&(this.scale=TimeStep.SCALE.MINUTE,this.step=5),n>t&&(this.scale=TimeStep.SCALE.MINUTE,this.step=1),15*r>t&&(this.scale=TimeStep.SCALE.SECOND,this.step=15),10*r>t&&(this.scale=TimeStep.SCALE.SECOND,this.step=10),5*r>t&&(this.scale=TimeStep.SCALE.SECOND,this.step=5),r>t&&(this.scale=TimeStep.SCALE.SECOND,this.step=1),200*a>t&&(this.scale=TimeStep.SCALE.MILLISECOND,this.step=200),100*a>t&&(this.scale=TimeStep.SCALE.MILLISECOND,this.step=100),50*a>t&&(this.scale=TimeStep.SCALE.MILLISECOND,this.step=50),10*a>t&&(this.scale=TimeStep.SCALE.MILLISECOND,this.step=10),5*a>t&&(this.scale=TimeStep.SCALE.MILLISECOND,this.step=5),a>t&&(this.scale=TimeStep.SCALE.MILLISECOND,this.step=1)}},TimeStep.prototype.snap=function(t){if(this.scale==TimeStep.SCALE.YEAR){var e=t.getFullYear()+Math.round(t.getMonth()/12);t.setFullYear(Math.round(e/this.step)*this.step),t.setMonth(0),t.setDate(0),t.setHours(0),t.setMinutes(0),t.setSeconds(0),t.setMilliseconds(0)}else if(this.scale==TimeStep.SCALE.MONTH)t.getDate()>15?(t.setDate(1),t.setMonth(t.getMonth()+1)):t.setDate(1),t.setHours(0),t.setMinutes(0),t.setSeconds(0),t.setMilliseconds(0);else if(this.scale==TimeStep.SCALE.DAY||this.scale==TimeStep.SCALE.WEEKDAY){switch(this.step){case 5:case 2:t.setHours(24*Math.round(t.getHours()/24));break;default:t.setHours(12*Math.round(t.getHours()/12))}t.setMinutes(0),t.setSeconds(0),t.setMilliseconds(0)}else if(this.scale==TimeStep.SCALE.HOUR){switch(this.step){case 4:t.setMinutes(60*Math.round(t.getMinutes()/60));break;default:t.setMinutes(30*Math.round(t.getMinutes()/30))}t.setSeconds(0),t.setMilliseconds(0)}else if(this.scale==TimeStep.SCALE.MINUTE){switch(this.step){case 15:case 10:t.setMinutes(5*Math.round(t.getMinutes()/5)),t.setSeconds(0);break;case 5:t.setSeconds(60*Math.round(t.getSeconds()/60));break;default:t.setSeconds(30*Math.round(t.getSeconds()/30))}t.setMilliseconds(0)}else if(this.scale==TimeStep.SCALE.SECOND)switch(this.step){case 15:case 10:t.setSeconds(5*Math.round(t.getSeconds()/5)),t.setMilliseconds(0);break;case 5:t.setMilliseconds(1e3*Math.round(t.getMilliseconds()/1e3));break;default:t.setMilliseconds(500*Math.round(t.getMilliseconds()/500))}else if(this.scale==TimeStep.SCALE.MILLISECOND){var i=this.step>5?this.step/2:1;t.setMilliseconds(Math.round(t.getMilliseconds()/i)*i)}},TimeStep.prototype.isMajor=function(){switch(this.scale){case TimeStep.SCALE.MILLISECOND:return 0==this.current.getMilliseconds();case TimeStep.SCALE.SECOND:return 0==this.current.getSeconds();case TimeStep.SCALE.MINUTE:return 0==this.current.getHours()&&0==this.current.getMinutes();case TimeStep.SCALE.HOUR:return 0==this.current.getHours();case TimeStep.SCALE.WEEKDAY:case TimeStep.SCALE.DAY:return 1==this.current.getDate();case TimeStep.SCALE.MONTH:return 0==this.current.getMonth();case TimeStep.SCALE.YEAR:return!1;default:return!1}},TimeStep.prototype.getLabelMinor=function(t){switch(void 0==t&&(t=this.current),this.scale){case TimeStep.SCALE.MILLISECOND:return M(t).format("SSS");case TimeStep.SCALE.SECOND:return M(t).format("s");case TimeStep.SCALE.MINUTE:return M(t).format("HH:mm");case TimeStep.SCALE.HOUR:return M(t).format("HH:mm");case TimeStep.SCALE.WEEKDAY:return M(t).format("ddd D");case TimeStep.SCALE.DAY:return M(t).format("D");case TimeStep.SCALE.MONTH:return M(t).format("MMM");case TimeStep.SCALE.YEAR:return M(t).format("YYYY");default:return""}},TimeStep.prototype.getLabelMajor=function(t){switch(void 0==t&&(t=this.current),this.scale){case TimeStep.SCALE.MILLISECOND:return M(t).format("HH:mm:ss");case TimeStep.SCALE.SECOND:return M(t).format("D MMMM HH:mm");case TimeStep.SCALE.MINUTE:case TimeStep.SCALE.HOUR:return M(t).format("ddd D MMMM");case TimeStep.SCALE.WEEKDAY:case TimeStep.SCALE.DAY:return M(t).format("MMMM YYYY");case TimeStep.SCALE.MONTH:return M(t).format("YYYY");case TimeStep.SCALE.YEAR:return"";default:return""}},o.prototype.subscribe=function(t,e,i){var s=this.subscribers[t];s||(s=[],this.subscribers[t]=s),s.push({id:i?i+"":null,callback:e})},o.prototype.unsubscribe=function(t,e){var i=this.subscribers[t];i&&(this.subscribers[t]=i.filter(function(t){return t.callback!=e}))},o.prototype._trigger=function(t,e,i){if("*"==t)throw Error("Cannot trigger event *");var s=[];t in this.subscribers&&(s=s.concat(this.subscribers[t])),"*"in this.subscribers&&(s=s.concat(this.subscribers["*"]));for(var o=0;s.length>o;o++){var n=s[o];n.callback&&n.callback(t,e,i||null)}},o.prototype.add=function(t,e){var i,s=[],o=this;if(t instanceof Array)for(var n=0,r=t.length;r>n;n++)i=o._addItem(t[n]),s.push(i);else if(E.isDataTable(t))for(var a=this._getColumnNames(t),h=0,d=t.getNumberOfRows();d>h;h++){for(var p={},l=0,u=a.length;u>l;l++){var c=a[l];p[c]=t.getValue(h,l)}i=o._addItem(p),s.push(i)}else{if(!(t instanceof Object))throw Error("Unknown dataType");i=o._addItem(t),s.push(i)}s.length&&this._trigger("add",{items:s},e)},o.prototype.update=function(t,e){var i=[],s=[],o=this,n=o.fieldId,r=function(t){var e=t[n];o.data[e]?(e=o._updateItem(t),s.push(e)):(e=o._addItem(t),i.push(e))};if(t instanceof Array)for(var a=0,h=t.length;h>a;a++)r(t[a]);else if(E.isDataTable(t))for(var d=this._getColumnNames(t),p=0,l=t.getNumberOfRows();l>p;p++){for(var u={},c=0,f=d.length;f>c;c++){var m=d[c];u[m]=t.getValue(p,c)}r(u)}else{if(!(t instanceof Object))throw Error("Unknown dataType");r(t)}i.length&&this._trigger("add",{items:i},e),s.length&&this._trigger("update",{items:s},e)},o.prototype.get=function(){var t,e,i,s,o=this,n=E.getType(arguments[0]);"String"==n||"Number"==n?(t=arguments[0],i=arguments[1],s=arguments[2]):"Array"==n?(e=arguments[0],i=arguments[1],s=arguments[2]):(i=arguments[0],s=arguments[1]);var r;if(i&&i.type){if(r="DataTable"==i.type?"DataTable":"Array",s&&r!=E.getType(s))throw Error('Type of parameter "data" ('+E.getType(s)+") "+"does not correspond with specified options.type ("+i.type+")");if("DataTable"==r&&!E.isDataTable(s))throw Error('Parameter "data" must be a DataTable when options.type is "DataTable"')}else r=s?"DataTable"==E.getType(s)?"DataTable":"Array":"Array";var a,h,d,p,l=i&&i.fieldTypes||this.options.fieldTypes,u=i&&i.filter,c=[];if(void 0!=t)a=o._getItem(t,l),u&&!u(a)&&(a=null);else if(void 0!=e)for(d=0,p=e.length;p>d;d++)a=o._getItem(e[d],l),(!u||u(a))&&c.push(a);else for(h in this.data)this.data.hasOwnProperty(h)&&(a=o._getItem(h,l),(!u||u(a))&&c.push(a));if(i&&i.order&&void 0==t&&this._sort(c,i.order),i&&i.fields){var f=i.fields;if(void 0!=t)a=this._filterFields(a,f);else for(d=0,p=c.length;p>d;d++)c[d]=this._filterFields(c[d],f)}if("DataTable"==r){var m=this._getColumnNames(s);if(void 0!=t)o._appendRow(s,m,a);else for(d=0,p=c.length;p>d;d++)o._appendRow(s,m,c[d]);return s}if(void 0!=t)return a;if(s){for(d=0,p=c.length;p>d;d++)s.push(c[d]);return s}return c},o.prototype.getIds=function(t){var e,i,s,o,n,r=this.data,a=t&&t.filter,h=t&&t.order,d=t&&t.fieldTypes||this.options.fieldTypes,p=[];if(a)if(h){n=[];for(s in r)r.hasOwnProperty(s)&&(o=this._getItem(s,d),a(o)&&n.push(o));for(this._sort(n,h),e=0,i=n.length;i>e;e++)p[e]=n[e][this.fieldId]}else for(s in r)r.hasOwnProperty(s)&&(o=this._getItem(s,d),a(o)&&p.push(o[this.fieldId]));else if(h){n=[];for(s in r)r.hasOwnProperty(s)&&n.push(r[s]);for(this._sort(n,h),e=0,i=n.length;i>e;e++)p[e]=n[e][this.fieldId]}else for(s in r)r.hasOwnProperty(s)&&(o=r[s],p.push(o[this.fieldId]));return p},o.prototype.forEach=function(t,e){var i,s,o=e&&e.filter,n=e&&e.fieldTypes||this.options.fieldTypes,r=this.data;if(e&&e.order)for(var a=this.get(e),h=0,d=a.length;d>h;h++)i=a[h],s=i[this.fieldId],t(i,s);else for(s in r)r.hasOwnProperty(s)&&(i=this._getItem(s,n),(!o||o(i))&&t(i,s))},o.prototype.map=function(t,e){var i,s=e&&e.filter,o=e&&e.fieldTypes||this.options.fieldTypes,n=[],r=this.data;for(var a in r)r.hasOwnProperty(a)&&(i=this._getItem(a,o),(!s||s(i))&&n.push(t(i,a)));return e&&e.order&&this._sort(n,e.order),n},o.prototype._filterFields=function(t,e){var i={};for(var s in t)t.hasOwnProperty(s)&&-1!=e.indexOf(s)&&(i[s]=t[s]);return i},o.prototype._sort=function(t,e){if(E.isString(e)){var i=e;t.sort(function(t,e){var s=t[i],o=e[i];return s>o?1:o>s?-1:0})}else{if("function"!=typeof e)throw new TypeError("Order must be a function or a string");t.sort(e)}},o.prototype.remove=function(t,e){var i,s,o=[];if(E.isNumber(t)||E.isString(t))delete this.data[t],delete this.internalIds[t],o.push(t);else if(t instanceof Array){for(i=0,s=t.length;s>i;i++)this.remove(t[i]);o=items.concat(t)}else if(t instanceof Object)for(i in this.data)this.data.hasOwnProperty(i)&&this.data[i]==t&&(delete this.data[i],delete this.internalIds[i],o.push(i));o.length&&this._trigger("remove",{items:o},e)},o.prototype.clear=function(t){var e=Object.keys(this.data);this.data={},this.internalIds={},this._trigger("remove",{items:e},t)},o.prototype.max=function(t){var e=this.data,i=null,s=null;for(var o in e)if(e.hasOwnProperty(o)){var n=e[o],r=n[t];null!=r&&(!i||r>s)&&(i=n,s=r)}return i},o.prototype.min=function(t){var e=this.data,i=null,s=null;for(var o in e)if(e.hasOwnProperty(o)){var n=e[o],r=n[t];null!=r&&(!i||s>r)&&(i=n,s=r)}return i},o.prototype.distinct=function(t){var e=this.data,i=[],s=this.options.fieldTypes[t],o=0;for(var n in e)if(e.hasOwnProperty(n)){for(var r=e[n],a=E.cast(r[t],s),h=!1,d=0;o>d;d++)if(i[d]==a){h=!0;break}h||(i[o]=a,o++)}return i},o.prototype._addItem=function(t){var e=t[this.fieldId];if(void 0!=e){if(this.data[e])throw Error("Cannot add item: item with id "+e+" already exists")}else e=E.randomUUID(),t[this.fieldId]=e,this.internalIds[e]=t;var i={};for(var s in t)if(t.hasOwnProperty(s)){var o=this.fieldTypes[s];i[s]=E.cast(t[s],o)}return this.data[e]=i,e},o.prototype._getItem=function(t,e){var i,s,o=this.data[t];if(!o)return null;var n={},r=this.fieldId,a=this.internalIds;if(e)for(i in o)o.hasOwnProperty(i)&&(s=o[i],i==r&&s in a||(n[i]=E.cast(s,e[i])));else for(i in o)o.hasOwnProperty(i)&&(s=o[i],i==r&&s in a||(n[i]=s));return n},o.prototype._updateItem=function(t){var e=t[this.fieldId];if(void 0==e)throw Error("Cannot update item: item has no id (item: "+JSON.stringify(t)+")");var i=this.data[e];if(!i)throw Error("Cannot update item: no item with id "+e+" found");for(var s in t)if(t.hasOwnProperty(s)){var o=this.fieldTypes[s];
+i[s]=E.cast(t[s],o)}return e},o.prototype._getColumnNames=function(t){for(var e=[],i=0,s=t.getNumberOfColumns();s>i;i++)e[i]=t.getColumnId(i)||t.getColumnLabel(i);return e},o.prototype._appendRow=function(t,e,i){for(var s=t.addRow(),o=0,n=e.length;n>o;o++){var r=e[o];t.setValue(s,o,i[r])}},n.prototype.setData=function(t){var e,i,s;if(this.data){this.data.unsubscribe&&this.data.unsubscribe("*",this.listener),e=[];for(var o in this.ids)this.ids.hasOwnProperty(o)&&e.push(o);this.ids={},this._trigger("remove",{items:e})}if(this.data=t,this.data){for(this.fieldId=this.options.fieldId||this.data&&this.data.options&&this.data.options.fieldId||"id",e=this.data.getIds({filter:this.options&&this.options.filter}),i=0,s=e.length;s>i;i++)o=e[i],this.ids[o]=!0;this._trigger("add",{items:e}),this.data.subscribe&&this.data.subscribe("*",this.listener)}},n.prototype.get=function(){var t,e,i,s=this,o=E.getType(arguments[0]);"String"==o||"Number"==o||"Array"==o?(t=arguments[0],e=arguments[1],i=arguments[2]):(e=arguments[0],i=arguments[1]);var n=E.extend({},this.options,e);this.options.filter&&e&&e.filter&&(n.filter=function(t){return s.options.filter(t)&&e.filter(t)});var r=[];return void 0!=t&&r.push(t),r.push(n),r.push(i),this.data&&this.data.get.apply(this.data,r)},n.prototype.getIds=function(t){var e;if(this.data){var i,s=this.options.filter;i=t&&t.filter?s?function(e){return s(e)&&t.filter(e)}:t.filter:s,e=this.data.getIds({filter:i,order:t&&t.order})}else e=[];return e},n.prototype._onEvent=function(t,e,i){var s,o,n,r,a=e&&e.items,h=this.data,d=[],p=[],l=[];if(a&&h){switch(t){case"add":for(s=0,o=a.length;o>s;s++)n=a[s],r=this.get(n),r&&(this.ids[n]=!0,d.push(n));break;case"update":for(s=0,o=a.length;o>s;s++)n=a[s],r=this.get(n),r?this.ids[n]?p.push(n):(this.ids[n]=!0,d.push(n)):this.ids[n]&&(delete this.ids[n],l.push(n));break;case"remove":for(s=0,o=a.length;o>s;s++)n=a[s],this.ids[n]&&(delete this.ids[n],l.push(n))}d.length&&this._trigger("add",{items:d},i),p.length&&this._trigger("update",{items:p},i),l.length&&this._trigger("remove",{items:l},i)}},n.prototype.subscribe=o.prototype.subscribe,n.prototype.unsubscribe=o.prototype.unsubscribe,n.prototype._trigger=o.prototype._trigger,r.prototype.setOptions=function(t){E.extend(this.options,t)},r.prototype.update=function(){this._order(),this._stack()},r.prototype._order=function(){var t=this.parent.items;if(!t)throw Error("Cannot stack items: parent does not contain items");var e=[],i=0;E.forEach(t,function(t){t.visible&&(e[i]=t,i++)});var s=this.options.order||this.defaultOptions.order;if("function"!=typeof s)throw Error("Option order must be a function");e.sort(s),this.ordered=e},r.prototype._stack=function(){var t,e,i,s=this.ordered,o=this.options,n=o.orientation||this.defaultOptions.orientation,r="top"==n;for(i=o.margin&&void 0!==o.margin.item?o.margin.item:this.defaultOptions.margin.item,t=0,e=s.length;e>t;t++){var a=s[t],h=null;do h=this.checkOverlap(s,t,0,t-1,i),null!=h&&(a.top=r?h.top+h.height+i:h.top-a.height-i);while(h)}},r.prototype.checkOverlap=function(t,e,i,s,o){for(var n=this.collision,r=t[e],a=s;a>=i;a--){var h=t[a];if(n(r,h,o)&&a!=e)return h}return null},r.prototype.collision=function(t,e,i){return t.left-i<e.left+e.width&&t.left+t.width+i>e.left&&t.top-i<e.top+e.height&&t.top+t.height+i>e.top},a.prototype.setOptions=function(t){E.extend(this.options,t),(null!=t.start||null!=t.end)&&this.setRange(t.start,t.end)},a.prototype.subscribe=function(t,e,i){var s,o=this;if("horizontal"!=i&&"vertical"!=i)throw new TypeError('Unknown direction "'+i+'". '+'Choose "horizontal" or "vertical".');if("move"==e)s={component:t,event:e,direction:i,callback:function(t){o._onMouseDown(t,s)},params:{}},t.on("mousedown",s.callback),o.listeners.push(s);else{if("zoom"!=e)throw new TypeError('Unknown event "'+e+'". '+'Choose "move" or "zoom".');s={component:t,event:e,direction:i,callback:function(t){o._onMouseWheel(t,s)},params:{}},t.on("mousewheel",s.callback),o.listeners.push(s)}},a.prototype.on=function(t,e){O.addListener(this,t,e)},a.prototype._trigger=function(t){O.trigger(this,t,{start:this.start,end:this.end})},a.prototype.setRange=function(t,e){var i=this._applyRange(t,e);i&&(this._trigger("rangechange"),this._trigger("rangechanged"))},a.prototype._applyRange=function(t,e){var i,s=null!=t?E.cast(t,"Number"):this.start,o=null!=e?E.cast(e,"Number"):this.end;if(isNaN(s))throw Error('Invalid start "'+t+'"');if(isNaN(o))throw Error('Invalid end "'+e+'"');if(s>o&&(o=s),null!=this.options.min){var n=this.options.min.valueOf();n>s&&(i=n-s,s+=i,o+=i)}if(null!=this.options.max){var r=this.options.max.valueOf();o>r&&(i=o-r,s-=i,o-=i)}if(null!=this.options.zoomMin){var a=this.options.zoomMin.valueOf();0>a&&(a=0),a>o-s&&(this.end-this.start>a?(i=a-(o-s),s-=i/2,o+=i/2):(s=this.start,o=this.end))}if(null!=this.options.zoomMax){var h=this.options.zoomMax.valueOf();0>h&&(h=0),o-s>h&&(h>this.end-this.start?(i=o-s-h,s+=i/2,o-=i/2):(s=this.start,o=this.end))}var d=this.start!=s||this.end!=o;return this.start=s,this.end=o,d},a.prototype.getRange=function(){return{start:this.start,end:this.end}},a.prototype.conversion=function(t){return this.start,this.end,a.conversion(this.start,this.end,t)},a.conversion=function(t,e,i){return 0!=i&&0!=e-t?{offset:t,factor:i/(e-t)}:{offset:0,factor:1}},a.prototype._onMouseDown=function(t,e){t=t||window.event;var i=e.params,s=t.which?1==t.which:1==t.button;if(s){i.mouseX=E.getPageX(t),i.mouseY=E.getPageY(t),i.previousLeft=0,i.previousOffset=0,i.moved=!1,i.start=this.start,i.end=this.end;var o=e.component.frame;o&&(o.style.cursor="move");var n=this;i.onMouseMove||(i.onMouseMove=function(t){n._onMouseMove(t,e)},E.addEventListener(document,"mousemove",i.onMouseMove)),i.onMouseUp||(i.onMouseUp=function(t){n._onMouseUp(t,e)},E.addEventListener(document,"mouseup",i.onMouseUp)),E.preventDefault(t)}},a.prototype._onMouseMove=function(t,e){t=t||window.event;var i=e.params,s=E.getPageX(t),o=E.getPageY(t);void 0==i.mouseX&&(i.mouseX=s),void 0==i.mouseY&&(i.mouseY=o);var n=s-i.mouseX,r=o-i.mouseY,a="horizontal"==e.direction?n:r;Math.abs(a)>=1&&(i.moved=!0);var h=i.end-i.start,d="horizontal"==e.direction?e.component.width:e.component.height,p=-a/d*h;this._applyRange(i.start+p,i.end+p),this._trigger("rangechange"),E.preventDefault(t)},a.prototype._onMouseUp=function(t,e){t=t||window.event;var i=e.params;e.component.frame&&(e.component.frame.style.cursor="auto"),i.onMouseMove&&(E.removeEventListener(document,"mousemove",i.onMouseMove),i.onMouseMove=null),i.onMouseUp&&(E.removeEventListener(document,"mouseup",i.onMouseUp),i.onMouseUp=null),i.moved&&this._trigger("rangechanged")},a.prototype._onMouseWheel=function(t,e){t=t||window.event;var i=0;if(t.wheelDelta?i=t.wheelDelta/120:t.detail&&(i=-t.detail/3),i){var s=this,o=function(){var o=i/5,n=null,r=e.component.frame;if(r){var a,h;if("horizontal"==e.direction){a=e.component.width,h=s.conversion(a);var d=E.getAbsoluteLeft(r),p=E.getPageX(t);n=(p-d)/h.factor+h.offset}else{a=e.component.height,h=s.conversion(a);var l=E.getAbsoluteTop(r),u=E.getPageY(t);n=(l+a-u-l)/h.factor+h.offset}}s.zoom(o,n)};o()}E.preventDefault(t)},a.prototype.zoom=function(t,e){null==e&&(e=(this.start+this.end)/2),t>=1&&(t=.9),-1>=t&&(t=-.9),0>t&&(t/=1+t);var i=this.start-e,s=this.end-e,o=this.start-i*t,n=this.end-s*t;this.setRange(o,n)},a.prototype.move=function(t){var e=this.end-this.start,i=this.start+e*t,s=this.end+e*t;this.start=i,this.end=s},h.prototype.on=function(t,e,i){var s=t instanceof RegExp?t:RegExp(t.replace("*","\\w+")),o={id:E.randomUUID(),event:t,regexp:s,callback:"function"==typeof e?e:null,target:i};return this.subscriptions.push(o),o.id},h.prototype.off=function(t){for(var e=0;this.subscriptions.length>e;){var i=this.subscriptions[e],s=!0;if(t instanceof Object)for(var o in t)t.hasOwnProperty(o)&&t[o]!==i[o]&&(s=!1);else s=i.id==t;s?this.subscriptions.splice(e,1):e++}},h.prototype.emit=function(t,e,i){for(var s=0;this.subscriptions.length>s;s++){var o=this.subscriptions[s];o.regexp.test(t)&&o.callback&&o.callback(t,e,i)}},d.prototype.add=function(t){if(void 0==t.id)throw Error("Component has no field id");if(!(t instanceof p||t instanceof d))throw new TypeError("Component must be an instance of prototype Component or Controller");t.controller=this,this.components[t.id]=t},d.prototype.remove=function(t){var e;for(e in this.components)if(this.components.hasOwnProperty(e)&&(e==t||this.components[e]==t))break;e&&delete this.components[e]},d.prototype.requestReflow=function(t){if(t)this.reflow();else if(!this.reflowTimer){var e=this;this.reflowTimer=setTimeout(function(){e.reflowTimer=void 0,e.reflow()},0)}},d.prototype.requestRepaint=function(t){if(t)this.repaint();else if(!this.repaintTimer){var e=this;this.repaintTimer=setTimeout(function(){e.repaintTimer=void 0,e.repaint()},0)}},d.prototype.repaint=function(){function t(s,o){o in i||(s.depends&&s.depends.forEach(function(e){t(e,e.id)}),s.parent&&t(s.parent,s.parent.id),e=s.repaint()||e,i[o]=!0)}var e=!1;this.repaintTimer&&(clearTimeout(this.repaintTimer),this.repaintTimer=void 0);var i={};E.forEach(this.components,t),e&&this.reflow()},d.prototype.reflow=function(){function t(s,o){o in i||(s.depends&&s.depends.forEach(function(e){t(e,e.id)}),s.parent&&t(s.parent,s.parent.id),e=s.reflow()||e,i[o]=!0)}var e=!1;this.reflowTimer&&(clearTimeout(this.reflowTimer),this.reflowTimer=void 0);var i={};E.forEach(this.components,t),e&&this.repaint()},p.prototype.setOptions=function(t){t&&(E.extend(this.options,t),this.controller&&(this.requestRepaint(),this.requestReflow()))},p.prototype.getOption=function(t){var e;return this.options&&(e=this.options[t]),void 0===e&&this.defaultOptions&&(e=this.defaultOptions[t]),e},p.prototype.getContainer=function(){return null},p.prototype.getFrame=function(){return this.frame},p.prototype.repaint=function(){return!1},p.prototype.reflow=function(){return!1},p.prototype.hide=function(){return this.frame&&this.frame.parentNode?(this.frame.parentNode.removeChild(this.frame),!0):!1},p.prototype.show=function(){return this.frame&&this.frame.parentNode?!1:this.repaint()},p.prototype.requestRepaint=function(){if(!this.controller)throw Error("Cannot request a repaint: no controller configured");this.controller.requestRepaint()},p.prototype.requestReflow=function(){if(!this.controller)throw Error("Cannot request a reflow: no controller configured");this.controller.requestReflow()},l.prototype=new p,l.prototype.setOptions=p.prototype.setOptions,l.prototype.getContainer=function(){return this.frame},l.prototype.repaint=function(){var t=0,e=E.updateProperty,i=E.option.asSize,s=this.options,o=this.frame;if(!o){o=document.createElement("div"),o.className="panel";var n=s.className;n&&("function"==typeof n?E.addClassName(o,n()+""):E.addClassName(o,n+"")),this.frame=o,t+=1}if(!o.parentNode){if(!this.parent)throw Error("Cannot repaint panel: no parent attached");var r=this.parent.getContainer();if(!r)throw Error("Cannot repaint panel: parent has no container element");r.appendChild(o),t+=1}return t+=e(o.style,"top",i(s.top,"0px")),t+=e(o.style,"left",i(s.left,"0px")),t+=e(o.style,"width",i(s.width,"100%")),t+=e(o.style,"height",i(s.height,"100%")),t>0},l.prototype.reflow=function(){var t=0,e=E.updateProperty,i=this.frame;return i?(t+=e(this,"top",i.offsetTop),t+=e(this,"left",i.offsetLeft),t+=e(this,"width",i.offsetWidth),t+=e(this,"height",i.offsetHeight)):t+=1,t>0},u.prototype=new l,u.prototype.setOptions=p.prototype.setOptions,u.prototype.repaint=function(){var t=0,e=E.updateProperty,i=E.option.asSize,s=this.options,o=this.frame;if(!o){o=document.createElement("div"),o.className="graph panel";var n=s.className;n&&E.addClassName(o,E.option.asString(n)),this.frame=o,t+=1}if(!o.parentNode){if(!this.container)throw Error("Cannot repaint root panel: no container attached");this.container.appendChild(o),t+=1}return t+=e(o.style,"top",i(s.top,"0px")),t+=e(o.style,"left",i(s.left,"0px")),t+=e(o.style,"width",i(s.width,"100%")),t+=e(o.style,"height",i(s.height,"100%")),this._updateEventEmitters(),this._updateWatch(),t>0},u.prototype.reflow=function(){var t=0,e=E.updateProperty,i=this.frame;return i?(t+=e(this,"top",i.offsetTop),t+=e(this,"left",i.offsetLeft),t+=e(this,"width",i.offsetWidth),t+=e(this,"height",i.offsetHeight)):t+=1,t>0},u.prototype._updateWatch=function(){var t=this.getOption("autoResize");t?this._watch():this._unwatch()},u.prototype._watch=function(){var t=this;this._unwatch();var e=function(){var e=t.getOption("autoResize");return e?(t.frame&&(t.frame.clientWidth!=t.width||t.frame.clientHeight!=t.height)&&t.requestReflow(),void 0):(t._unwatch(),void 0)};E.addEventListener(window,"resize",e),this.watchTimer=setInterval(e,1e3)},u.prototype._unwatch=function(){this.watchTimer&&(clearInterval(this.watchTimer),this.watchTimer=void 0)},u.prototype.on=function(t,e){var i=this.listeners[t];i||(i=[],this.listeners[t]=i),i.push(e),this._updateEventEmitters()},u.prototype._updateEventEmitters=function(){if(this.listeners){var t=this;E.forEach(this.listeners,function(e,i){if(t.emitters||(t.emitters={}),!(i in t.emitters)){var s=t.frame;if(s){var o=function(t){e.forEach(function(e){e(t)})};t.emitters[i]=o,E.addEventListener(s,i,o)}}})}},c.prototype=new p,c.prototype.setOptions=p.prototype.setOptions,c.prototype.setRange=function(t){if(!(t instanceof a||t&&t.start&&t.end))throw new TypeError("Range must be an instance of Range, or an object containing start and end.");this.range=t},c.prototype.toTime=function(t){var e=this.conversion;return new Date(t/e.factor+e.offset)},c.prototype.toScreen=function(t){var e=this.conversion;return(t.valueOf()-e.offset)*e.factor},c.prototype.repaint=function(){var t=0,e=E.updateProperty,i=E.option.asSize,s=this.options,o=this.getOption("orientation"),n=this.props,r=this.step,a=this.frame;if(a||(a=document.createElement("div"),this.frame=a,t+=1),a.className="axis "+o,!a.parentNode){if(!this.parent)throw Error("Cannot repaint time axis: no parent attached");var h=this.parent.getContainer();if(!h)throw Error("Cannot repaint time axis: parent has no container element");h.appendChild(a),t+=1}var d=a.parentNode;if(d){var p=a.nextSibling;d.removeChild(a);var l="bottom"==o&&this.props.parentHeight&&this.height?this.props.parentHeight-this.height+"px":"0px";if(t+=e(a.style,"top",i(s.top,l)),t+=e(a.style,"left",i(s.left,"0px")),t+=e(a.style,"width",i(s.width,"100%")),t+=e(a.style,"height",i(s.height,this.height+"px")),this._repaintMeasureChars(),this.step){this._repaintStart(),r.first();for(var u=void 0,c=0;r.hasNext()&&1e3>c;){c++;var f=r.getCurrent(),m=this.toScreen(f),g=r.isMajor();this.getOption("showMinorLabels")&&this._repaintMinorText(m,r.getLabelMinor()),g&&this.getOption("showMajorLabels")?(m>0&&(void 0==u&&(u=m),this._repaintMajorText(m,r.getLabelMajor())),this._repaintMajorLine(m)):this._repaintMinorLine(m),r.next()}if(this.getOption("showMajorLabels")){var v=this.toTime(0),y=r.getLabelMajor(v),w=y.length*(n.majorCharWidth||10)+10;(void 0==u||u>w)&&this._repaintMajorText(0,y)}this._repaintEnd()}this._repaintLine(),p?d.insertBefore(a,p):d.appendChild(a)}return t>0},c.prototype._repaintStart=function(){var t=this.dom,e=t.redundant;e.majorLines=t.majorLines,e.majorTexts=t.majorTexts,e.minorLines=t.minorLines,e.minorTexts=t.minorTexts,t.majorLines=[],t.majorTexts=[],t.minorLines=[],t.minorTexts=[]},c.prototype._repaintEnd=function(){E.forEach(this.dom.redundant,function(t){for(;t.length;){var e=t.pop();e&&e.parentNode&&e.parentNode.removeChild(e)}})},c.prototype._repaintMinorText=function(t,e){var i=this.dom.redundant.minorTexts.shift();if(!i){var s=document.createTextNode("");i=document.createElement("div"),i.appendChild(s),i.className="text minor",this.frame.appendChild(i)}this.dom.minorTexts.push(i),i.childNodes[0].nodeValue=e,i.style.left=t+"px",i.style.top=this.props.minorLabelTop+"px"},c.prototype._repaintMajorText=function(t,e){var i=this.dom.redundant.majorTexts.shift();if(!i){var s=document.createTextNode(e);i=document.createElement("div"),i.className="text major",i.appendChild(s),this.frame.appendChild(i)}this.dom.majorTexts.push(i),i.childNodes[0].nodeValue=e,i.style.top=this.props.majorLabelTop+"px",i.style.left=t+"px"},c.prototype._repaintMinorLine=function(t){var e=this.dom.redundant.minorLines.shift();e||(e=document.createElement("div"),e.className="grid vertical minor",this.frame.appendChild(e)),this.dom.minorLines.push(e);var i=this.props;e.style.top=i.minorLineTop+"px",e.style.height=i.minorLineHeight+"px",e.style.left=t-i.minorLineWidth/2+"px"},c.prototype._repaintMajorLine=function(t){var e=this.dom.redundant.majorLines.shift();e||(e=document.createElement("DIV"),e.className="grid vertical major",this.frame.appendChild(e)),this.dom.majorLines.push(e);var i=this.props;e.style.top=i.majorLineTop+"px",e.style.left=t-i.majorLineWidth/2+"px",e.style.height=i.majorLineHeight+"px"},c.prototype._repaintLine=function(){var t=this.dom.line,e=this.frame;this.options,this.getOption("showMinorLabels")||this.getOption("showMajorLabels")?(t?(e.removeChild(t),e.appendChild(t)):(t=document.createElement("div"),t.className="grid horizontal major",e.appendChild(t),this.dom.line=t),t.style.top=this.props.lineTop+"px"):t&&axis.parentElement&&(e.removeChild(axis.line),delete this.dom.line)},c.prototype._repaintMeasureChars=function(){var t,e=this.dom;if(!e.measureCharMinor){t=document.createTextNode("0");var i=document.createElement("DIV");i.className="text minor measure",i.appendChild(t),this.frame.appendChild(i),e.measureCharMinor=i}if(!e.measureCharMajor){t=document.createTextNode("0");var s=document.createElement("DIV");s.className="text major measure",s.appendChild(t),this.frame.appendChild(s),e.measureCharMajor=s}},c.prototype.reflow=function(){var t=0,e=E.updateProperty,i=this.frame,s=this.range;if(!s)throw Error("Cannot repaint time axis: no range configured");if(i){t+=e(this,"top",i.offsetTop),t+=e(this,"left",i.offsetLeft);var o=this.props,n=this.getOption("showMinorLabels"),r=this.getOption("showMajorLabels"),a=this.dom.measureCharMinor,h=this.dom.measureCharMajor;a&&(o.minorCharHeight=a.clientHeight,o.minorCharWidth=a.clientWidth),h&&(o.majorCharHeight=h.clientHeight,o.majorCharWidth=h.clientWidth);var d=i.parentNode?i.parentNode.offsetHeight:0;switch(d!=o.parentHeight&&(o.parentHeight=d,t+=1),this.getOption("orientation")){case"bottom":o.minorLabelHeight=n?o.minorCharHeight:0,o.majorLabelHeight=r?o.majorCharHeight:0,o.minorLabelTop=0,o.majorLabelTop=o.minorLabelTop+o.minorLabelHeight,o.minorLineTop=-this.top,o.minorLineHeight=Math.max(this.top+o.majorLabelHeight,0),o.minorLineWidth=1,o.majorLineTop=-this.top,o.majorLineHeight=Math.max(this.top+o.minorLabelHeight+o.majorLabelHeight,0),o.majorLineWidth=1,o.lineTop=0;break;case"top":o.minorLabelHeight=n?o.minorCharHeight:0,o.majorLabelHeight=r?o.majorCharHeight:0,o.majorLabelTop=0,o.minorLabelTop=o.majorLabelTop+o.majorLabelHeight,o.minorLineTop=o.minorLabelTop,o.minorLineHeight=Math.max(d-o.majorLabelHeight-this.top),o.minorLineWidth=1,o.majorLineTop=0,o.majorLineHeight=Math.max(d-this.top),o.majorLineWidth=1,o.lineTop=o.majorLabelHeight+o.minorLabelHeight;break;default:throw Error('Unkown orientation "'+this.getOption("orientation")+'"')}var p=o.minorLabelHeight+o.majorLabelHeight;t+=e(this,"width",i.offsetWidth),t+=e(this,"height",p),this._updateConversion();var l=E.cast(s.start,"Date"),u=E.cast(s.end,"Date"),c=this.toTime(5*(o.minorCharWidth||10))-this.toTime(0);this.step=new TimeStep(l,u,c),t+=e(o.range,"start",l.valueOf()),t+=e(o.range,"end",u.valueOf()),t+=e(o.range,"minimumStep",c.valueOf())}return t>0},c.prototype._updateConversion=function(){var t=this.range;if(!t)throw Error("No range configured");this.conversion=t.conversion?t.conversion(this.width):a.conversion(t.start,t.end,this.width)},f.prototype=new l,f.types={box:g,range:y,point:v},f.prototype.setOptions=p.prototype.setOptions,f.prototype.setRange=function(t){if(!(t instanceof a||t&&t.start&&t.end))throw new TypeError("Range must be an instance of Range, or an object containing start and end.");this.range=t},f.prototype.repaint=function(){var t=0,e=E.updateProperty,i=E.option.asSize,s=this.options,o=this.getOption("orientation"),n=this.defaultOptions,r=this.frame;if(!r){r=document.createElement("div"),r.className="itemset";var a=s.className;a&&E.addClassName(r,E.option.asString(a));var h=document.createElement("div");h.className="background",r.appendChild(h),this.dom.background=h;var d=document.createElement("div");d.className="foreground",r.appendChild(d),this.dom.foreground=d;var p=document.createElement("div");p.className="itemset-axis",this.dom.axis=p,this.frame=r,t+=1}if(!this.parent)throw Error("Cannot repaint itemset: no parent attached");var l=this.parent.getContainer();if(!l)throw Error("Cannot repaint itemset: parent has no container element");r.parentNode||(l.appendChild(r),t+=1),this.dom.axis.parentNode||(l.appendChild(this.dom.axis),t+=1),t+=e(r.style,"left",i(s.left,"0px")),t+=e(r.style,"top",i(s.top,"0px")),t+=e(r.style,"width",i(s.width,"100%")),t+=e(r.style,"height",i(s.height,this.height+"px")),t+=e(this.dom.axis.style,"left",i(s.left,"0px")),t+=e(this.dom.axis.style,"width",i(s.width,"100%")),t+="bottom"==o?e(this.dom.axis.style,"top",this.height+this.top+"px"):e(this.dom.axis.style,"top",this.top+"px"),this._updateConversion();var u=this,c=this.queue,m=this.itemsData,g=this.items,v={fields:[m&&m.fieldId||"id","start","end","content","type"]};return Object.keys(c).forEach(function(e){var i=c[e],o=g[e];switch(i){case"add":case"update":var r=m&&m.get(e,v);if(r){var a=r.type||r.start&&r.end&&"range"||"box",h=f.types[a];if(o&&(h&&o instanceof h?(o.data=r,t++):(t+=o.hide(),o=null)),!o){if(!h)throw new TypeError('Unknown item type "'+a+'"');o=new h(u,r,s,n),t++}o.repaint(),g[e]=o}delete c[e];break;case"remove":o&&(t+=o.hide()),delete g[e],delete c[e];break;default:console.log('Error: unknown action "'+i+'"')}}),E.forEach(this.items,function(e){e.visible?(t+=e.show(),e.reposition()):t+=e.hide()}),t>0},f.prototype.getForeground=function(){return this.dom.foreground},f.prototype.getBackground=function(){return this.dom.background},f.prototype.getAxis=function(){return this.dom.axis},f.prototype.reflow=function(){var t=0,e=this.options,i=e.margin&&e.margin.axis||this.defaultOptions.margin.axis,s=e.margin&&e.margin.item||this.defaultOptions.margin.item,o=E.updateProperty,n=E.option.asNumber,r=E.option.asSize,a=this.frame;if(a){this._updateConversion(),E.forEach(this.items,function(e){t+=e.reflow()}),this.stack.update();var h,d=n(e.maxHeight),p=null!=r(e.height);if(p)h=a.offsetHeight;else{var l=this.stack.ordered;if(l.length){var u=l[0].top,c=l[0].top+l[0].height;E.forEach(l,function(t){u=Math.min(u,t.top),c=Math.max(c,t.top+t.height)}),h=c-u+i+s}else h=i+s}null!=d&&(h=Math.min(h,d)),t+=o(this,"height",h),t+=o(this,"top",a.offsetTop),t+=o(this,"left",a.offsetLeft),t+=o(this,"width",a.offsetWidth)}else t+=1;return t>0},f.prototype.hide=function(){var t=!1;return this.frame&&this.frame.parentNode&&(this.frame.parentNode.removeChild(this.frame),t=!0),this.dom.axis&&this.dom.axis.parentNode&&(this.dom.axis.parentNode.removeChild(this.dom.axis),t=!0),t},f.prototype.setItems=function(t){var e,i=this,s=this.itemsData;if(s&&(E.forEach(this.listeners,function(t,e){s.unsubscribe(e,t)}),e=s.getIds(),this._onRemove(e)),t){if(!(t instanceof o||t instanceof n))throw new TypeError("Data must be an instance of DataSet");this.itemsData=t}else this.itemsData=null;if(this.itemsData){var r=this.id;E.forEach(this.listeners,function(t,e){i.itemsData.subscribe(e,t,r)}),e=this.itemsData.getIds(),this._onAdd(e)}},f.prototype.getItems=function(){return this.itemsData},f.prototype._onUpdate=function(t){this._toQueue("update",t)},f.prototype._onAdd=function(t){this._toQueue("add",t)},f.prototype._onRemove=function(t){this._toQueue("remove",t)},f.prototype._toQueue=function(t,e){var i=this.queue;e.forEach(function(e){i[e]=t}),this.controller&&this.requestRepaint()},f.prototype._updateConversion=function(){var t=this.range;if(!t)throw Error("No range configured");this.conversion=t.conversion?t.conversion(this.width):a.conversion(t.start,t.end,this.width)},f.prototype.toTime=function(t){var e=this.conversion;return new Date(t/e.factor+e.offset)},f.prototype.toScreen=function(t){var e=this.conversion;return(t.valueOf()-e.offset)*e.factor},m.prototype.select=function(){this.selected=!0},m.prototype.unselect=function(){this.selected=!1},m.prototype.show=function(){return!1},m.prototype.hide=function(){return!1},m.prototype.repaint=function(){return!1},m.prototype.reflow=function(){return!1},g.prototype=new m(null,null),g.prototype.select=function(){this.selected=!0},g.prototype.unselect=function(){this.selected=!1},g.prototype.repaint=function(){var t=!1,e=this.dom;if(e||(this._create(),e=this.dom,t=!0),e){if(!this.parent)throw Error("Cannot repaint item: no parent attached");var i=this.parent.getForeground();if(!i)throw Error("Cannot repaint time axis: parent has no foreground container element");var s=this.parent.getBackground();if(!s)throw Error("Cannot repaint time axis: parent has no background container element");var o=this.parent.getAxis();if(!s)throw Error("Cannot repaint time axis: parent has no axis container element");if(e.box.parentNode||(i.appendChild(e.box),t=!0),e.line.parentNode||(s.appendChild(e.line),t=!0),e.dot.parentNode||(o.appendChild(e.dot),t=!0),this.data.content!=this.content){if(this.content=this.data.content,this.content instanceof Element)e.content.innerHTML="",e.content.appendChild(this.content);else{if(void 0==this.data.content)throw Error('Property "content" missing in item '+this.data.id);e.content.innerHTML=this.content}t=!0}var n=(this.data.className?" "+this.data.className:"")+(this.selected?" selected":"");this.className!=n&&(this.className=n,e.box.className="item box"+n,e.line.className="item line"+n,e.dot.className="item dot"+n,t=!0)}return t},g.prototype.show=function(){return this.dom&&this.dom.box.parentNode?!1:this.repaint()},g.prototype.hide=function(){var t=!1,e=this.dom;return e&&(e.box.parentNode&&(e.box.parentNode.removeChild(e.box),t=!0),e.line.parentNode&&e.line.parentNode.removeChild(e.line),e.dot.parentNode&&e.dot.parentNode.removeChild(e.dot)),t},g.prototype.reflow=function(){var t,e,i,s,o,n,r,a,h,d,p,l,u=0;if(void 0==this.data.start)throw Error('Property "start" missing in item '+this.data.id);if(p=this.data,l=this.parent&&this.parent.range,this.visible=p&&l?p.start>l.start&&p.start<l.end:!1,this.visible)if(e=this.dom)if(t=E.updateProperty,i=this.props,s=this.options,n=this.parent.toScreen(this.data.start),r=s.align||this.defaultOptions.align,o=s.margin&&s.margin.axis||this.defaultOptions.margin.axis,a=s.orientation||this.defaultOptions.orientation,u+=t(i.dot,"height",e.dot.offsetHeight),u+=t(i.dot,"width",e.dot.offsetWidth),u+=t(i.line,"width",e.line.offsetWidth),u+=t(i.line,"height",e.line.offsetHeight),u+=t(i.line,"top",e.line.offsetTop),u+=t(this,"width",e.box.offsetWidth),u+=t(this,"height",e.box.offsetHeight),d="right"==r?n-this.width:"left"==r?n:n-this.width/2,u+=t(this,"left",d),u+=t(i.line,"left",n-i.line.width/2),u+=t(i.dot,"left",n-i.dot.width/2),u+=t(i.dot,"top",-i.dot.height/2),"top"==a)h=o,u+=t(this,"top",h);else{var c=this.parent.height;h=c-this.height-o,u+=t(this,"top",h)}else u+=1;return u>0},g.prototype._create=function(){var t=this.dom;t||(this.dom=t={},t.box=document.createElement("DIV"),t.content=document.createElement("DIV"),t.content.className="content",t.box.appendChild(t.content),t.line=document.createElement("DIV"),t.line.className="line",t.dot=document.createElement("DIV"),t.dot.className="dot")},g.prototype.reposition=function(){var t=this.dom,e=this.props,i=this.options.orientation||this.defaultOptions.orientation;if(t){var s=t.box,o=t.line,n=t.dot;s.style.left=this.left+"px",s.style.top=this.top+"px",o.style.left=e.line.left+"px","top"==i?(o.style.top="0px",o.style.height=this.top+"px"):(o.style.top=this.top+this.height+"px",o.style.height=Math.max(this.parent.height-this.top-this.height+this.props.dot.height/2,0)+"px"),n.style.left=e.dot.left+"px",n.style.top=e.dot.top+"px"}},v.prototype=new m(null,null),v.prototype.select=function(){this.selected=!0},v.prototype.unselect=function(){this.selected=!1},v.prototype.repaint=function(){var t=!1,e=this.dom;if(e||(this._create(),e=this.dom,t=!0),e){if(!this.parent)throw Error("Cannot repaint item: no parent attached");var i=this.parent.getForeground();if(!i)throw Error("Cannot repaint time axis: parent has no foreground container element");if(e.point.parentNode||(i.appendChild(e.point),i.appendChild(e.point),t=!0),this.data.content!=this.content){if(this.content=this.data.content,this.content instanceof Element)e.content.innerHTML="",e.content.appendChild(this.content);else{if(void 0==this.data.content)throw Error('Property "content" missing in item '+this.data.id);e.content.innerHTML=this.content}t=!0}var s=(this.data.className?" "+this.data.className:"")+(this.selected?" selected":"");this.className!=s&&(this.className=s,e.point.className="item point"+s,t=!0)}return t},v.prototype.show=function(){return this.dom&&this.dom.point.parentNode?!1:this.repaint()},v.prototype.hide=function(){var t=!1,e=this.dom;return e&&e.point.parentNode&&(e.point.parentNode.removeChild(e.point),t=!0),t},v.prototype.reflow=function(){var t,e,i,s,o,n,r,a,h,d,p=0;if(void 0==this.data.start)throw Error('Property "start" missing in item '+this.data.id);if(h=this.data,d=this.parent&&this.parent.range,this.visible=h&&d?h.start>d.start&&h.start<d.end:!1,this.visible)if(e=this.dom){if(t=E.updateProperty,i=this.props,s=this.options,n=s.orientation||this.defaultOptions.orientation,o=s.margin&&s.margin.axis||this.defaultOptions.margin.axis,r=this.parent.toScreen(this.data.start),p+=t(this,"width",e.point.offsetWidth),p+=t(this,"height",e.point.offsetHeight),p+=t(i.dot,"width",e.dot.offsetWidth),p+=t(i.dot,"height",e.dot.offsetHeight),p+=t(i.content,"height",e.content.offsetHeight),"top"==n)a=o;else{var l=this.parent.height;a=Math.max(l-this.height-o,0)}p+=t(this,"top",a),p+=t(this,"left",r-i.dot.width/2),p+=t(i.content,"marginLeft",1.5*i.dot.width),p+=t(i.dot,"top",(this.height-i.dot.height)/2)}else p+=1;return p>0},v.prototype._create=function(){var t=this.dom;t||(this.dom=t={},t.point=document.createElement("div"),t.content=document.createElement("div"),t.content.className="content",t.point.appendChild(t.content),t.dot=document.createElement("div"),t.dot.className="dot",t.point.appendChild(t.dot))},v.prototype.reposition=function(){var t=this.dom,e=this.props;t&&(t.point.style.top=this.top+"px",t.point.style.left=this.left+"px",t.content.style.marginLeft=e.content.marginLeft+"px",t.dot.style.top=e.dot.top+"px")},y.prototype=new m(null,null),y.prototype.select=function(){this.selected=!0},y.prototype.unselect=function(){this.selected=!1},y.prototype.repaint=function(){var t=!1,e=this.dom;if(e||(this._create(),e=this.dom,t=!0),e){if(!this.parent)throw Error("Cannot repaint item: no parent attached");var i=this.parent.getForeground();if(!i)throw Error("Cannot repaint time axis: parent has no foreground container element");if(e.box.parentNode||(i.appendChild(e.box),t=!0),this.data.content!=this.content){if(this.content=this.data.content,this.content instanceof Element)e.content.innerHTML="",e.content.appendChild(this.content);else{if(void 0==this.data.content)throw Error('Property "content" missing in item '+this.data.id);e.content.innerHTML=this.content}t=!0}var s=this.data.className?""+this.data.className:"";this.className!=s&&(this.className=s,e.box.className="item range"+s,t=!0)}return t},y.prototype.show=function(){return this.dom&&this.dom.box.parentNode?!1:this.repaint()},y.prototype.hide=function(){var t=!1,e=this.dom;return e&&e.box.parentNode&&(e.box.parentNode.removeChild(e.box),t=!0),t},y.prototype.reflow=function(){var t,e,i,s,o,n,r,a,h,d,p,l,u,c,f,m,g=0;if(void 0==this.data.start)throw Error('Property "start" missing in item '+this.data.id);
+if(void 0==this.data.end)throw Error('Property "end" missing in item '+this.data.id);return h=this.data,d=this.parent&&this.parent.range,this.visible=h&&d?h.start<d.end&&h.end>d.start:!1,this.visible&&(t=this.dom,t?(e=this.props,i=this.options,n=this.parent,r=n.toScreen(this.data.start),a=n.toScreen(this.data.end),p=E.updateProperty,l=t.box,u=n.width,f=i.orientation||this.defaultOptions.orientation,s=i.margin&&i.margin.axis||this.defaultOptions.margin.axis,o=i.padding||this.defaultOptions.padding,g+=p(e.content,"width",t.content.offsetWidth),g+=p(this,"height",l.offsetHeight),-u>r&&(r=-u),a>2*u&&(a=2*u),c=0>r?Math.min(-r,a-r-e.content.width-2*o):0,g+=p(e.content,"left",c),"top"==f?(m=s,g+=p(this,"top",m)):(m=n.height-this.height-s,g+=p(this,"top",m)),g+=p(this,"left",r),g+=p(this,"width",Math.max(a-r,1))):g+=1),g>0},y.prototype._create=function(){var t=this.dom;t||(this.dom=t={},t.box=document.createElement("div"),t.content=document.createElement("div"),t.content.className="content",t.box.appendChild(t.content))},y.prototype.reposition=function(){var t=this.dom,e=this.props;t&&(t.box.style.top=this.top+"px",t.box.style.left=this.left+"px",t.box.style.width=this.width+"px",t.content.style.left=e.content.left+"px")},w.prototype=new p,w.prototype.setOptions=p.prototype.setOptions,w.prototype.getContainer=function(){return this.parent.getContainer()},w.prototype.setItems=function(t){if(this.itemset&&(this.itemset.hide(),this.itemset.setItems(),this.parent.controller.remove(this.itemset),this.itemset=null),t){var e=this.groupId,i=Object.create(this.options);this.itemset=new f(this,null,i),this.itemset.setRange(this.parent.range),this.view=new n(t,{filter:function(t){return t.group==e}}),this.itemset.setItems(this.view),this.parent.controller.add(this.itemset)}},w.prototype.repaint=function(){return!1},w.prototype.reflow=function(){var t=0,e=E.updateProperty;return t+=e(this,"top",this.itemset?this.itemset.top:0),t+=e(this,"height",this.itemset?this.itemset.height:0),t>0},b.prototype=new l,b.prototype.setOptions=p.prototype.setOptions,b.prototype.setRange=function(){},b.prototype.setItems=function(t){this.itemsData=t;for(var e in this.groups)if(this.groups.hasOwnProperty(e)){var i=this.groups[e];i.setItems(t)}},b.prototype.getItems=function(){return this.itemsData},b.prototype.setRange=function(t){this.range=t},b.prototype.setGroups=function(t){var e,i=this;if(this.groupsData&&(E.forEach(this.listeners,function(t,e){i.groupsData.unsubscribe(e,t)}),e=this.groupsData.getIds(),this._onRemove(e)),t?t instanceof o?this.groupsData=t:(this.groupsData=new o({fieldTypes:{start:"Date",end:"Date"}}),this.groupsData.add(t)):this.groupsData=null,this.groupsData){var s=this.id;E.forEach(this.listeners,function(t,e){i.groupsData.subscribe(e,t,s)}),e=this.groupsData.getIds(),this._onAdd(e)}},b.prototype.getGroups=function(){return this.groupsData},b.prototype.repaint=function(){var t=0,e=E.updateProperty,i=E.option.asSize,s=this.options,o=this.frame;if(!o){o=document.createElement("div"),o.className="groupset";var n=s.className;n&&E.addClassName(o,E.option.asString(n)),this.frame=o,t+=1}if(!this.parent)throw Error("Cannot repaint groupset: no parent attached");var r=this.parent.getContainer();if(!r)throw Error("Cannot repaint groupset: parent has no container element");o.parentNode||(r.appendChild(o),t+=1),t+=e(o.style,"height",i(s.height,this.height+"px")),t+=e(o.style,"top",i(s.top,"0px")),t+=e(o.style,"left",i(s.left,"0px")),t+=e(o.style,"width",i(s.width,"100%"));var a=this,h=this.queue,d=this.groups,p=this.groupsData,l=Object.keys(h);if(l.length){l.forEach(function(t){var e=h[t],i=d[t];switch(e){case"add":case"update":if(!i){var s=Object.create(a.options);i=new w(a,t,s),i.setItems(a.itemsData),d[t]=i,a.controller.add(i)}i.data=p.get(t),delete h[t];break;case"remove":i&&(i.setItems(),delete d[t],a.controller.remove(i)),delete h[t];break;default:console.log('Error: unknown action "'+e+'"')}});for(var u=this.groupsData.getIds({order:this.options.groupsOrder}),c=0;u.length>c;c++)(function(t,e){var i=0;e&&(i=function(){return e.top+e.height}),t.setOptions({top:i})})(d[u[c]],d[u[c-1]]);t++}return t>0},b.prototype.getContainer=function(){return this.frame},b.prototype.reflow=function(){var t=0,e=this.options,i=E.updateProperty,s=E.option.asNumber,o=E.option.asSize,n=this.frame;if(n){var r,a=s(e.maxHeight),h=null!=o(e.height);if(h)r=n.offsetHeight;else{r=0;for(var d in this.groups)if(this.groups.hasOwnProperty(d)){var p=this.groups[d];r+=p.height}}null!=a&&(r=Math.min(r,a)),t+=i(this,"height",r),t+=i(this,"top",n.offsetTop),t+=i(this,"left",n.offsetLeft),t+=i(this,"width",n.offsetWidth)}return t>0},b.prototype.hide=function(){return this.frame&&this.frame.parentNode?(this.frame.parentNode.removeChild(this.frame),!0):!1},b.prototype.show=function(){return this.frame&&this.frame.parentNode?!1:this.repaint()},b.prototype._onUpdate=function(t){this._toQueue(t,"update")},b.prototype._onAdd=function(t){this._toQueue(t,"add")},b.prototype._onRemove=function(t){this._toQueue(t,"remove")},b.prototype._toQueue=function(t,e){var i=this.queue;t.forEach(function(t){i[t]=e}),this.controller&&this.requestRepaint()},x.prototype.setOptions=function(t){t&&E.extend(this.options,t),this.controller.reflow(),this.controller.repaint()},x.prototype.setItems=function(t){var e,i=null==this.itemsData;if(t?t instanceof o&&(e=t):e=null,t instanceof o||(e=new o({fieldTypes:{start:"Date",end:"Date"}}),e.add(t)),this.itemsData=e,this.content.setItems(e),i&&(void 0==this.options.start||void 0==this.options.end)){var s=this.getItemRange(),n=s.min,r=s.max;if(null!=n&&null!=r){var a=r.valueOf()-n.valueOf();n=new Date(n.valueOf()-.05*a),r=new Date(r.valueOf()+.05*a)}void 0!=this.options.start&&(n=new Date(this.options.start.valueOf())),void 0!=this.options.end&&(r=new Date(this.options.end.valueOf())),(null!=n||null!=r)&&this.range.setRange(n,r)}},x.prototype.setGroups=function(t){var e=this;this.groupsData=t;var i=this.groupsData?b:f;if(!(this.content instanceof i)){this.content&&(this.content.hide(),this.content.setItems&&this.content.setItems(),this.content.setGroups&&this.content.setGroups(),this.controller.remove(this.content));var s=Object.create(this.options);E.extend(s,{top:function(){return"top"==e.options.orientation?e.timeaxis.height:e.root.height-e.timeaxis.height-e.content.height},height:function(){return e.options.height?e.root.height-e.timeaxis.height:null},maxHeight:function(){if(e.options.maxHeight){if(!E.isNumber(e.options.maxHeight))throw new TypeError("Number expected for property maxHeight");return e.options.maxHeight-e.timeaxis.height}return null}}),this.content=new i(this.root,[this.timeaxis],s),this.content.setRange&&this.content.setRange(this.range),this.content.setItems&&this.content.setItems(this.itemsData),this.content.setGroups&&this.content.setGroups(this.groupsData),this.controller.add(this.content)}},x.prototype.getItemRange=function(){var t=this.itemsData,e=null,i=null;if(t){var s=t.min("start");e=s?s.start.valueOf():null;var o=t.max("start");o&&(i=o.start.valueOf());var n=t.max("end");n&&(i=null==i?n.end.valueOf():Math.max(i,n.end.valueOf()))}return{min:null!=e?new Date(e):null,max:null!=i?new Date(i):null}},E.parseDOT=function(t){function e(t){return" "==t||"	"==t||"\n"==t||"\r"==t}function i(t){return-1!="[]{}();,=->".indexOf(t)}function s(){f++,m=t[f]}function o(){return"(char "+f+")"}function n(){for(;m&&e(m);)s();var i=t[f+1],o=t[f-1],r=m+i;if("/*"==r){for(;m&&("*"!=m||"/"!=t[f+1]);)s();s(),s(),n()}else if("//"==r||"#"==m&&"\n"==o){for(;m&&"\n"!=m;)s();s(),n()}}function r(){n();var t="";if('"'==m){for(s();m&&'"'!=m;)t+=m,s();s()}else{for(;m&&!e(m)&&!i(m);)t+=m,s();var o=Number(t);isNaN(o)?"true"==t?t=!0:"false"==t?t=!1:"null"==t&&(t=null):t=o}return t}function a(){if(n(),'"'==m)return r();var t=r();if(void 0!=t){var e=Number(t);isNaN(e)?"true"==t?t=!0:"false"==t?t=!1:"null"==t&&(t=null):t=e}return t}function h(){if(n(),"["==m){s();for(var t={};m&&"]"!=m;){n();var e=r();if(!e)throw new SyntaxError("Attribute name expected "+o());if(n(),"="!=m)throw new SyntaxError("Equal sign = expected "+o());s();var i=a();if(!i)throw new SyntaxError("Attribute value expected "+o());t[e]=i,n(),","==m&&s()}return s(),t}return void 0}function d(){if(n(),"-"==m){if(s(),">"==m||"-"==m){var t="-"+m;return s(),t}throw new SyntaxError('Arrow "->" or "--" expected '+o())}return void 0}function p(){return n(),";"==m?(s(),";"):void 0}function l(t,e){if(t&&e)for(var i in e)e.hasOwnProperty(i)&&(t[i]=e[i])}function u(t,e){var i={id:t+"",attr:e||{}};g[t]?l(g[t].attr,i.attr):g[t]=i}function c(t,e,i,s){v.push({from:t+"",to:e+"",type:i,attr:s||{}})}var f=-1,m="",g={},v=[];for(s();m&&"{"!=m;)s();if("{"!=m)throw new SyntaxError("Invalid data. Curly bracket { expected "+o());for(s();m&&"}"!=m;){var y=r();if(void 0==y)throw new SyntaxError("String with id expected "+o());var w=h();u(y,w);for(var b=d();b;){var x=y;if(y=r(),void 0==y)throw new SyntaxError("String with id expected "+o());u(y),w=h(),c(x,y,b,w),b=d()}p(),n()}if("}"!=m)throw new SyntaxError("Invalid data. Curly bracket } expected");var _=t.indexOf("{"),T=t.indexOf("}",_),C=-1!=_&&-1!=T?t.substring(_+1,T):void 0;if(!C)throw Error("Invalid data. no curly brackets containing data found");var S=[];for(y in g)g.hasOwnProperty(y)&&S.push(g[y]);return{nodes:S,edges:v}},E.DOTToGraph=function(t){function e(t,e,i){for(var s in e)!e.hasOwnProperty(s)||i&&-1!=i.indexOf(s)||(t[s]=e[s]);t.label&&(t.text=t.label,delete t.label),t.shape&&(t.style=t.shape,delete t.shape)}var i=E.parseDOT(t),s={nodes:[],edges:[],options:{nodes:{},edges:{}}};return i.nodes.forEach(function(t){if("graph"==t.id.toLowerCase())e(s.options,t.attr);else if("node"==t.id.toLowerCase())e(s.options.nodes,t.attr);else if("edge"==t.id.toLowerCase())e(s.options.edges,t.attr);else{var i={};i.id=t.id,i.text=t.id,e(i,t.attr),s.nodes.push(i)}}),i.edges.forEach(function(t){var i={};i.from=t.from,i.to=t.to,i.text=t.id,i.style="->"==t.type?"arrow-end":"line",e(i,t.attr),s.edges.push(i)}),s},"undefined"!=typeof CanvasRenderingContext2D&&(CanvasRenderingContext2D.prototype.circle=function(t,e,i){this.beginPath(),this.arc(t,e,i,0,2*Math.PI,!1)},CanvasRenderingContext2D.prototype.square=function(t,e,i){this.beginPath(),this.rect(t-i,e-i,2*i,2*i)},CanvasRenderingContext2D.prototype.triangle=function(t,e,i){this.beginPath();var s=2*i,o=s/2,n=Math.sqrt(3)/6*s,r=Math.sqrt(s*s-o*o);this.moveTo(t,e-(r-n)),this.lineTo(t+o,e+n),this.lineTo(t-o,e+n),this.lineTo(t,e-(r-n)),this.closePath()},CanvasRenderingContext2D.prototype.triangleDown=function(t,e,i){this.beginPath();var s=2*i,o=s/2,n=Math.sqrt(3)/6*s,r=Math.sqrt(s*s-o*o);this.moveTo(t,e+(r-n)),this.lineTo(t+o,e-n),this.lineTo(t-o,e-n),this.lineTo(t,e+(r-n)),this.closePath()},CanvasRenderingContext2D.prototype.star=function(t,e,i){this.beginPath();for(var s=0;10>s;s++){var o=0===s%2?1.3*i:.5*i;this.lineTo(t+o*Math.sin(2*s*Math.PI/10),e-o*Math.cos(2*s*Math.PI/10))}this.closePath()},CanvasRenderingContext2D.prototype.roundRect=function(t,e,i,s,o){var n=Math.PI/180;0>i-2*o&&(o=i/2),0>s-2*o&&(o=s/2),this.beginPath(),this.moveTo(t+o,e),this.lineTo(t+i-o,e),this.arc(t+i-o,e+o,o,270*n,360*n,!1),this.lineTo(t+i,e+s-o),this.arc(t+i-o,e+s-o,o,0,90*n,!1),this.lineTo(t+o,e+s),this.arc(t+o,e+s-o,o,90*n,180*n,!1),this.lineTo(t,e+o),this.arc(t+o,e+o,o,180*n,270*n,!1)},CanvasRenderingContext2D.prototype.ellipse=function(t,e,i,s){var o=.5522848,n=i/2*o,r=s/2*o,a=t+i,h=e+s,d=t+i/2,p=e+s/2;this.beginPath(),this.moveTo(t,p),this.bezierCurveTo(t,p-r,d-n,e,d,e),this.bezierCurveTo(d+n,e,a,p-r,a,p),this.bezierCurveTo(a,p+r,d+n,h,d,h),this.bezierCurveTo(d-n,h,t,p+r,t,p)},CanvasRenderingContext2D.prototype.database=function(t,e,i,s){var o=1/3,n=i,r=s*o,a=.5522848,h=n/2*a,d=r/2*a,p=t+n,l=e+r,u=t+n/2,c=e+r/2,f=e+(s-r/2),m=e+s;this.beginPath(),this.moveTo(p,c),this.bezierCurveTo(p,c+d,u+h,l,u,l),this.bezierCurveTo(u-h,l,t,c+d,t,c),this.bezierCurveTo(t,c-d,u-h,e,u,e),this.bezierCurveTo(u+h,e,p,c-d,p,c),this.lineTo(p,f),this.bezierCurveTo(p,f+d,u+h,m,u,m),this.bezierCurveTo(u-h,m,t,f+d,t,f),this.lineTo(t,c)},CanvasRenderingContext2D.prototype.arrow=function(t,e,i,s){var o=t-s*Math.cos(i),n=e-s*Math.sin(i),r=t-.9*s*Math.cos(i),a=e-.9*s*Math.sin(i),h=o+s/3*Math.cos(i+.5*Math.PI),d=n+s/3*Math.sin(i+.5*Math.PI),p=o+s/3*Math.cos(i-.5*Math.PI),l=n+s/3*Math.sin(i-.5*Math.PI);this.beginPath(),this.moveTo(t,e),this.lineTo(h,d),this.lineTo(r,a),this.lineTo(p,l),this.closePath()},CanvasRenderingContext2D.prototype.dashedLine=function(t,e,i,s,o){o||(o=[10,5]),0==u&&(u=.001);var n=o.length;this.moveTo(t,e);for(var r=i-t,a=s-e,h=a/r,d=Math.sqrt(r*r+a*a),p=0,l=!0;d>=.1;){var u=o[p++%n];u>d&&(u=d);var c=Math.sqrt(u*u/(1+h*h));0>r&&(c=-c),t+=c,e+=h*c,this[l?"lineTo":"moveTo"](t,e),d-=u,l=!l}}),_.prototype.attachEdge=function(t){this.edges.push(t),this._updateMass()},_.prototype.detachEdge=function(t){var e=this.edges.indexOf(t);-1!=e&&this.edges.splice(e,1),this._updateMass()},_.prototype._updateMass=function(){this.mass=50+20*this.edges.length},_.prototype.setProperties=function(t,e){if(t){if(void 0!=t.id&&(this.id=t.id),void 0!=t.text&&(this.text=t.text),void 0!=t.title&&(this.title=t.title),void 0!=t.group&&(this.group=t.group),void 0!=t.x&&(this.x=t.x),void 0!=t.y&&(this.y=t.y),void 0!=t.value&&(this.value=t.value),void 0===this.id)throw"Node must have an id";if(this.group){var i=this.grouplist.get(this.group);for(var s in i)i.hasOwnProperty(s)&&(this[s]=i[s])}if(void 0!=t.style&&(this.style=t.style),void 0!=t.image&&(this.image=t.image),void 0!=t.radius&&(this.radius=t.radius),void 0!=t.borderColor&&(this.borderColor=t.borderColor),void 0!=t.backgroundColor&&(this.backgroundColor=t.backgroundColor),void 0!=t.highlightColor&&(this.highlightColor=t.highlightColor),void 0!=t.fontColor&&(this.fontColor=t.fontColor),void 0!=t.fontSize&&(this.fontSize=t.fontSize),void 0!=t.fontFace&&(this.fontFace=t.fontFace),void 0!=this.image){if(!this.imagelist)throw"No imagelist provided";this.imageObj=this.imagelist.load(this.image)}this.xFixed=this.xFixed||void 0!=t.x,this.yFixed=this.yFixed||void 0!=t.y,this.radiusFixed=this.radiusFixed||void 0!=t.radius,"image"==this.style&&(this.radiusMin=e.nodes.widthMin,this.radiusMax=e.nodes.widthMax);var o=this.style;switch(o){case"database":this.draw=this._drawDatabase,this.resize=this._resizeDatabase;break;case"rect":this.draw=this._drawRect,this.resize=this._resizeRect;break;case"circle":this.draw=this._drawCircle,this.resize=this._resizeCircle;break;case"image":this.draw=this._drawImage,this.resize=this._resizeImage;break;case"text":this.draw=this._drawText,this.resize=this._resizeText;break;case"dot":this.draw=this._drawDot,this.resize=this._resizeShape;break;case"square":this.draw=this._drawSquare,this.resize=this._resizeShape;break;case"triangle":this.draw=this._drawTriangle,this.resize=this._resizeShape;break;case"triangleDown":this.draw=this._drawTriangleDown,this.resize=this._resizeShape;break;case"star":this.draw=this._drawStar,this.resize=this._resizeShape;break;default:this.draw=this._drawRect,this.resize=this._resizeRect}this._reset()}},_.prototype.select=function(){this.selected=!0,this._reset()},_.prototype.unselect=function(){this.selected=!1,this._reset()},_.prototype._reset=function(){this.width=void 0,this.height=void 0},_.prototype.getTitle=function(){return this.title},_.prototype.distanceToBorder=function(t,e){var i=1;switch(this.width||this.resize(t),this.style){case"circle":case"dot":return this.radius+i;case"rect":case"image":case"text":default:return this.width?Math.min(Math.abs(this.width/2/Math.cos(e)),Math.abs(this.height/2/Math.sin(e)))+i:0}},_.prototype._setForce=function(t,e){this.fx=t,this.fy=e},_.prototype._addForce=function(t,e){this.fx+=t,this.fy+=e},_.prototype.discreteStep=function(t){if(!this.xFixed){var e=-this.damping*this.vx,i=(this.fx+e)/this.mass;this.vx+=i/t,this.x+=this.vx/t}if(!this.yFixed){var s=-this.damping*this.vy,o=(this.fy+s)/this.mass;this.vy+=o/t,this.y+=this.vy/t}},_.prototype.isFixed=function(){return this.xFixed&&this.yFixed},_.prototype.isMoving=function(t){return Math.abs(this.vx)>t||Math.abs(this.vy)>t||!this.xFixed&&Math.abs(this.fx)>this.minForce||!this.yFixed&&Math.abs(this.fy)>this.minForce},_.prototype.isSelected=function(){return this.selected},_.prototype.getValue=function(){return this.value},_.prototype.getDistance=function(t,e){var i=this.x-t,s=this.y-e;return Math.sqrt(i*i+s*s)},_.prototype.setValueRange=function(t,e){if(!this.radiusFixed&&void 0!==this.value){var i=(this.radiusMax-this.radiusMin)/(e-t);this.radius=(this.value-t)*i+this.radiusMin}},_.prototype.draw=function(){throw"Draw method not initialized for node"},_.prototype.resize=function(){throw"Resize method not initialized for node"},_.prototype.isOverlappingWith=function(t){return this.left<t.right&&this.left+this.width>t.left&&this.top<t.bottom&&this.top+this.height>t.top},_.prototype._resizeImage=function(){if(!this.width){var t,e;if(this.value){var i=this.imageObj.height/this.imageObj.width;t=this.radius||this.imageObj.width,e=this.radius*i||this.imageObj.height}else t=this.imageObj.width,e=this.imageObj.height;this.width=t,this.height=e}},_.prototype._drawImage=function(t){this._resizeImage(t),this.left=this.x-this.width/2,this.top=this.y-this.height/2;var e;this.imageObj?(t.drawImage(this.imageObj,this.left,this.top,this.width,this.height),e=this.y+this.height/2):e=this.y,this._text(t,this.text,this.x,e,void 0,"top")},_.prototype._resizeRect=function(t){if(!this.width){var e=5,i=this.getTextSize(t);this.width=i.width+2*e,this.height=i.height+2*e}},_.prototype._drawRect=function(t){this._resizeRect(t),this.left=this.x-this.width/2,this.top=this.y-this.height/2,t.strokeStyle=this.borderColor,t.fillStyle=this.selected?this.highlightColor:this.backgroundColor,t.lineWidth=this.selected?2:1,t.roundRect(this.left,this.top,this.width,this.height,this.radius),t.fill(),t.stroke(),this._text(t,this.text,this.x,this.y)},_.prototype._resizeDatabase=function(t){if(!this.width){var e=5,i=this.getTextSize(t),s=i.width+2*e;this.width=s,this.height=s}},_.prototype._drawDatabase=function(t){this._resizeDatabase(t),this.left=this.x-this.width/2,this.top=this.y-this.height/2,t.strokeStyle=this.borderColor,t.fillStyle=this.selected?this.highlightColor:this.backgroundColor,t.lineWidth=this.selected?2:1,t.database(this.x-this.width/2,this.y-.5*this.height,this.width,this.height),t.fill(),t.stroke(),this._text(t,this.text,this.x,this.y)},_.prototype._resizeCircle=function(t){if(!this.width){var e=5,i=this.getTextSize(t),s=Math.max(i.width,i.height)+2*e;this.radius=s/2,this.width=s,this.height=s}},_.prototype._drawCircle=function(t){this._resizeCircle(t),this.left=this.x-this.width/2,this.top=this.y-this.height/2,t.strokeStyle=this.borderColor,t.fillStyle=this.selected?this.highlightColor:this.backgroundColor,t.lineWidth=this.selected?2:1,t.circle(this.x,this.y,this.radius),t.fill(),t.stroke(),this._text(t,this.text,this.x,this.y)},_.prototype._drawDot=function(t){this._drawShape(t,"circle")},_.prototype._drawTriangle=function(t){this._drawShape(t,"triangle")},_.prototype._drawTriangleDown=function(t){this._drawShape(t,"triangleDown")},_.prototype._drawSquare=function(t){this._drawShape(t,"square")},_.prototype._drawStar=function(t){this._drawShape(t,"star")},_.prototype._resizeShape=function(){if(!this.width){var t=2*this.radius;this.width=t,this.height=t}},_.prototype._drawShape=function(t,e){this._resizeShape(t),this.left=this.x-this.width/2,this.top=this.y-this.height/2,t.strokeStyle=this.borderColor,t.fillStyle=this.selected?this.highlightColor:this.backgroundColor,t.lineWidth=this.selected?2:1,t[e](this.x,this.y,this.radius),t.fill(),t.stroke(),this.text&&this._text(t,this.text,this.x,this.y+this.height/2,void 0,"top")},_.prototype._resizeText=function(t){if(!this.width){var e=5,i=this.getTextSize(t);this.width=i.width+2*e,this.height=i.height+2*e}},_.prototype._drawText=function(t){this._resizeText(t),this.left=this.x-this.width/2,this.top=this.y-this.height/2,this._text(t,this.text,this.x,this.y)},_.prototype._text=function(t,e,i,s,o,n){if(e){t.font=(this.selected?"bold ":"")+this.fontSize+"px "+this.fontFace,t.fillStyle=this.fontColor||"black",t.textAlign=o||"center",t.textBaseline=n||"middle";for(var r=e.split("\n"),a=r.length,h=this.fontSize+4,d=s+(1-a)/2*h,p=0;a>p;p++)t.fillText(r[p],i,d),d+=h}},_.prototype.getTextSize=function(t){if(void 0!=this.text){t.font=(this.selected?"bold ":"")+this.fontSize+"px "+this.fontFace;for(var e=this.text.split("\n"),i=(this.fontSize+4)*e.length,s=0,o=0,n=e.length;n>o;o++)s=Math.max(s,t.measureText(e[o]).width);return{width:s,height:i}}return{width:0,height:0}},T.prototype.setProperties=function(t,e){if(t){if(void 0!=t.from&&(this.from=this.graph._getNode(t.from)),void 0!=t.to&&(this.to=this.graph._getNode(t.to)),void 0!=t.id&&(this.id=t.id),void 0!=t.style&&(this.style=t.style),void 0!=t.text&&(this.text=t.text),this.text&&(this.fontSize=e.edges.fontSize,this.fontFace=e.edges.fontFace,this.fontColor=e.edges.fontColor,void 0!=t.fontColor&&(this.fontColor=t.fontColor),void 0!=t.fontSize&&(this.fontSize=t.fontSize),void 0!=t.fontFace&&(this.fontFace=t.fontFace)),void 0!=t.title&&(this.title=t.title),void 0!=t.width&&(this.width=t.width),void 0!=t.value&&(this.value=t.value),void 0!=t.length&&(this.length=t.length),void 0!=t.dashlength&&(this.dashlength=t.dashlength),void 0!=t.dashgap&&(this.dashgap=t.dashgap),void 0!=t.altdashlength&&(this.altdashlength=t.altdashlength),void 0!=t.color&&(this.color=t.color),!this.from)throw"Node with id "+t.from+" not found";if(!this.to)throw"Node with id "+t.to+" not found";switch(this.widthFixed=this.widthFixed||void 0!=t.width,this.lengthFixed=this.lengthFixed||void 0!=t.length,this.stiffness=1/this.length,"arrow"===this.style&&(this.arrows=[.5]),this.style){case"line":this.draw=this._drawLine;break;case"arrow":this.draw=this._drawArrow;break;case"arrow-end":this.draw=this._drawArrowEnd;break;case"dash-line":this.draw=this._drawDashLine;break;default:this.draw=this._drawLine}}},T.prototype.getTitle=function(){return this.title},T.prototype.getValue=function(){return this.value},T.prototype.setValueRange=function(t,e){if(!this.widthFixed&&void 0!==this.value){var i=(this.widthMax-this.widthMin)/(e-t);this.width=(this.value-t)*i+this.widthMin}},T.prototype.draw=function(){throw"Method draw not initialized in edge"},T.prototype.isOverlappingWith=function(t){var e=10,i=this.from.x,s=this.from.y,o=this.to.x,n=this.to.y,r=t.left,a=t.top,h=T._dist(i,s,o,n,r,a);return e>h},T.prototype._drawLine=function(t){t.strokeStyle=this.color,t.lineWidth=this._getLineWidth();var e;if(this.from!=this.to)this._line(t),this.text&&(e=this._pointOnLine(.5),this._text(t,this.text,e.x,e.y));else{var i,s,o=this.length/2/Math.PI,n=this.from;n.width||n.resize(t),n.width>n.height?(i=n.x+n.width/2,s=n.y-o):(i=n.x+o,s=n.y-n.height/2),this._circle(t,i,s,o),e=this._pointOnCircle(i,s,o,.5),this._text(t,this.text,e.x,e.y)}},T.prototype._getLineWidth=function(){return this.from.selected||this.to.selected?Math.min(2*this.width,this.widthMax):this.width},T.prototype._line=function(t){t.beginPath(),t.moveTo(this.from.x,this.from.y),t.lineTo(this.to.x,this.to.y),t.stroke()},T.prototype._circle=function(t,e,i,s){t.beginPath(),t.arc(e,i,s,0,2*Math.PI,!1),t.stroke()},T.prototype._text=function(t,e,i,s){if(e){t.font=(this.from.selected||this.to.selected?"bold ":"")+this.fontSize+"px "+this.fontFace,t.fillStyle="white";var o=t.measureText(this.text).width,n=this.fontSize,r=i-o/2,a=s-n/2;t.fillRect(r,a,o,n),t.fillStyle=this.fontColor||"black",t.textAlign="left",t.textBaseline="top",t.fillText(this.text,r,a)}},T.prototype._drawDashLine=function(t){if(t.strokeStyle=this.color,t.lineWidth=this._getLineWidth(),t.beginPath(),t.lineCap="round",void 0!=this.altdashlength?t.dashedLine(this.from.x,this.from.y,this.to.x,this.to.y,[this.dashlength,this.dashgap,this.altdashlength,this.dashgap]):void 0!=this.dashlength&&void 0!=this.dashgap?t.dashedLine(this.from.x,this.from.y,this.to.x,this.to.y,[this.dashlength,this.dashgap]):(t.moveTo(this.from.x,this.from.y),t.lineTo(this.to.x,this.to.y)),t.stroke(),this.text){var e=this._pointOnLine(.5);this._text(t,this.text,e.x,e.y)}},T.prototype._pointOnLine=function(t){return{x:(1-t)*this.from.x+t*this.to.x,y:(1-t)*this.from.y+t*this.to.y}},T.prototype._pointOnCircle=function(t,e,i,s){var o=2*(s-3/8)*Math.PI;return{x:t+i*Math.cos(o),y:e-i*Math.sin(o)}},T.prototype._drawArrow=function(t){var e;if(t.strokeStyle=this.color,t.fillStyle=this.color,t.lineWidth=this._getLineWidth(),this.from!=this.to){this._line(t);var i=Math.atan2(this.to.y-this.from.y,this.to.x-this.from.x),s=10+5*this.width;for(var o in this.arrows)this.arrows.hasOwnProperty(o)&&(e=this._pointOnLine(this.arrows[o]),t.arrow(e.x,e.y,i,s),t.fill(),t.stroke());this.text&&(e=this._pointOnLine(.5),this._text(t,this.text,e.x,e.y))}else{var n,r,a=this.length/2/Math.PI,h=this.from;h.width||h.resize(t),h.width>h.height?(n=h.x+h.width/2,r=h.y-a):(n=h.x+a,r=h.y-h.height/2),this._circle(t,n,r,a);var i=.2*Math.PI,s=10+5*this.width;for(var o in this.arrows)this.arrows.hasOwnProperty(o)&&(e=this._pointOnCircle(n,r,a,this.arrows[o]),t.arrow(e.x,e.y,i,s),t.fill(),t.stroke());this.text&&(e=this._pointOnCircle(n,r,a,.5),this._text(t,this.text,e.x,e.y))}},T.prototype._drawArrowEnd=function(t){t.strokeStyle=this.color,t.fillStyle=this.color,t.lineWidth=this._getLineWidth();var e,i;if(this.from!=this.to){e=Math.atan2(this.to.y-this.from.y,this.to.x-this.from.x);var s=this.to.x-this.from.x,o=this.to.y-this.from.y,n=Math.sqrt(s*s+o*o),r=this.to.distanceToBorder(t,e+Math.PI),a=(n-r)/n,h=a*this.from.x+(1-a)*this.to.x,d=a*this.from.y+(1-a)*this.to.y,p=this.to.distanceToBorder(t,e),l=(n-p)/n,u=(1-l)*this.from.x+l*this.to.x,c=(1-l)*this.from.y+l*this.to.y;if(t.beginPath(),t.moveTo(h,d),t.lineTo(u,c),t.stroke(),i=10+5*this.width,t.arrow(u,c,e,i),t.fill(),t.stroke(),this.text){var f=this._pointOnLine(.5);this._text(t,this.text,f.x,f.y)}}else{var m,g,v,y=this.length/2/Math.PI,w=this.from;w.width||w.resize(t),w.width>w.height?(m=w.x+w.width/2,g=w.y-y,v={x:m,y:w.y,angle:.9*Math.PI}):(m=w.x+y,g=w.y-w.height/2,v={x:w.x,y:g,angle:.6*Math.PI}),t.beginPath(),t.arc(m,g,y,0,2*Math.PI,!1),t.stroke(),i=10+5*this.width,t.arrow(v.x,v.y,v.angle,i),t.fill(),t.stroke(),this.text&&(f=this._pointOnCircle(m,g,y,.5),this._text(t,this.text,f.x,f.y))}},T._dist=function(t,e,i,s,o,n){var r=i-t,a=s-e,h=r*r+a*a,d=((o-t)*r+(n-e)*a)/h;d>1?d=1:0>d&&(d=0);var p=t+d*r,l=e+d*a,u=p-o,c=l-n;return Math.sqrt(u*u+c*c)},C.prototype.setPosition=function(t,e){this.x=parseInt(t),this.y=parseInt(e)},C.prototype.setText=function(t){this.frame.innerHTML=t},C.prototype.show=function(t){if(void 0===t&&(t=!0),t){var e=this.frame.clientHeight,i=this.frame.clientWidth,s=this.frame.parentNode.clientHeight,o=this.frame.parentNode.clientWidth,n=this.y-e;n+e+this.padding>s&&(n=s-e-this.padding),this.padding>n&&(n=this.padding);var r=this.x;r+i+this.padding>o&&(r=o-i-this.padding),this.padding>r&&(r=this.padding),this.frame.style.left=r+"px",this.frame.style.top=n+"px",this.frame.style.visibility="visible"}else this.hide()},C.prototype.hide=function(){this.frame.style.visibility="hidden"},Groups=function(){this.clear(),this.defaultIndex=0},Groups.DEFAULT=[{borderColor:"#2B7CE9",backgroundColor:"#97C2FC",highlightColor:"#D2E5FF"},{borderColor:"#FFA500",backgroundColor:"#FFFF00",highlightColor:"#FFFFA3"},{borderColor:"#FA0A10",backgroundColor:"#FB7E81",highlightColor:"#FFAFB1"},{borderColor:"#41A906",backgroundColor:"#7BE141",highlightColor:"#A1EC76"},{borderColor:"#E129F0",backgroundColor:"#EB7DF4",highlightColor:"#F0B3F5"},{borderColor:"#7C29F0",backgroundColor:"#AD85E4",highlightColor:"#D3BDF0"},{borderColor:"#C37F00",backgroundColor:"#FFA807",highlightColor:"#FFCA66"},{borderColor:"#4220FB",backgroundColor:"#6E6EFD",highlightColor:"#9B9BFD"},{borderColor:"#FD5A77",backgroundColor:"#FFC0CB",highlightColor:"#FFD1D9"},{borderColor:"#4AD63A",backgroundColor:"#C2FABC",highlightColor:"#E6FFE3"}],Groups.prototype.clear=function(){this.groups={},this.groups.length=function(){var t=0;for(var e in this)this.hasOwnProperty(e)&&t++;return t}},Groups.prototype.get=function(t){var e=this.groups[t];if(void 0==e){var i=this.defaultIndex%Groups.DEFAULT.length;this.defaultIndex++,e={},e.borderColor=Groups.DEFAULT[i].borderColor,e.backgroundColor=Groups.DEFAULT[i].backgroundColor,e.highlightColor=Groups.DEFAULT[i].highlightColor,this.groups[t]=e}return e},Groups.prototype.add=function(t,e){return this.groups[t]=e,e},Images=function(){this.images={},this.callback=void 0},Images.prototype.setOnloadCallback=function(t){this.callback=t},Images.prototype.load=function(t){var e=this.images[t];if(void 0==e){var i=this;e=new Image,this.images[t]=e,e.onload=function(){i.callback&&i.callback(this)},e.src=t}return e},S.prototype.setData=function(t){t.options&&this.setOptions(t.options),this.setNodes(t.nodes),this.setEdges(t.edges),this._reposition(),this.stabilize&&this._doStabilize(),this.start();var e=this,i=function(){e._redraw()};this.images.setOnloadCallback(i),this.trigger("ready")},S.prototype.setOptions=function(t){if(t){if(void 0!=t.width&&(this.width=t.width),void 0!=t.height&&(this.height=t.height),void 0!=t.stabilize&&(this.stabilize=t.stabilize),void 0!=t.selectable&&(this.selectable=t.selectable),t.edges){for(var e in t.edges)t.edges.hasOwnProperty(e)&&(this.constants.edges[e]=t.edges[e]);void 0!=t.edges.length&&t.nodes&&void 0==t.nodes.distance&&(this.constants.edges.length=t.edges.length,this.constants.nodes.distance=1.25*t.edges.length),t.edges.fontColor||(this.constants.edges.fontColor=t.edges.color),void 0!=t.edges.dashlength&&(this.constants.edges.dashlength=t.edges.dashlength),void 0!=t.edges.dashgap&&(this.constants.edges.dashgap=t.edges.dashgap),void 0!=t.edges.altdashlength&&(this.constants.edges.altdashlength=t.edges.altdashlength)}if(t.nodes)for(e in t.nodes)t.nodes.hasOwnProperty(e)&&(this.constants.nodes[e]=t.nodes[e]);if(t.groups)for(var i in t.groups)if(t.groups.hasOwnProperty(i)){var s=t.groups[i];this.groups.add(i,s)}this._setBackgroundColor(t.backgroundColor)}this._setSize(this.width,this.height),this._setTranslation(0,0),this._setScale(1)},S.prototype.trigger=function(t,e){O.trigger(this,t,e),"undefined"!=typeof google&&google.visualization&&google.visualization.events&&google.visualization.events.trigger(this,t,e)},S.prototype._create=function(){for(;this.containerElement.hasChildNodes();)this.containerElement.removeChild(this.containerElement.firstChild);if(this.frame=document.createElement("div"),this.frame.className="graph-frame",this.frame.style.position="relative",this.frame.style.overflow="hidden",this.frame.canvas=document.createElement("canvas"),this.frame.canvas.style.position="relative",this.frame.appendChild(this.frame.canvas),!this.frame.canvas.getContext){var t=document.createElement("DIV");t.style.color="red",t.style.fontWeight="bold",t.style.padding="10px",t.innerHTML="Error: your browser does not support HTML canvas",this.frame.canvas.appendChild(t)}var e=this,i=function(t){e._onMouseDown(t)},s=function(t){e._onMouseMoveTitle(t)},o=function(t){e._onMouseWheel(t)},n=function(t){e._onTouchStart(t)};N.util.addEventListener(this.frame.canvas,"mousedown",i),N.util.addEventListener(this.frame.canvas,"mousemove",s),N.util.addEventListener(this.frame.canvas,"mousewheel",o),N.util.addEventListener(this.frame.canvas,"touchstart",n),this.containerElement.appendChild(this.frame)},S.prototype._setBackgroundColor=function(t){var e="white",i="lightgray",s=1;if("string"==typeof t)e=t,i="none",s=0;else if("object"==typeof t)void 0!=t.fill&&(e=t.fill),void 0!=t.stroke&&(i=t.stroke),void 0!=t.strokeWidth&&(s=t.strokeWidth);else if(void 0!=t)throw"Unsupported type of backgroundColor";this.frame.style.boxSizing="border-box",this.frame.style.backgroundColor=e,this.frame.style.borderColor=i,this.frame.style.borderWidth=s+"px",this.frame.style.borderStyle="solid"
+},S.prototype._onMouseDown=function(t){if(t=t||window.event,this.selectable&&(this.leftButtonDown&&this._onMouseUp(t),this.leftButtonDown=t.which?1==t.which:1==t.button,this.leftButtonDown||this.touchDown)){var e=this;this.onmousemove||(this.onmousemove=function(t){e._onMouseMove(t)},N.util.addEventListener(document,"mousemove",e.onmousemove)),this.onmouseup||(this.onmouseup=function(t){e._onMouseUp(t)},N.util.addEventListener(document,"mouseup",e.onmouseup)),N.util.preventDefault(t),this.startMouseX=t.clientX||t.targetTouches[0].clientX,this.startMouseY=t.clientY||t.targetTouches[0].clientY,this.startFrameLeft=N.util.getAbsoluteLeft(this.frame.canvas),this.startFrameTop=N.util.getAbsoluteTop(this.frame.canvas),this.startTranslation=this._getTranslation(),this.ctrlKeyDown=t.ctrlKey,this.shiftKeyDown=t.shiftKey;var i={left:this._xToCanvas(this.startMouseX-this.startFrameLeft),top:this._yToCanvas(this.startMouseY-this.startFrameTop),right:this._xToCanvas(this.startMouseX-this.startFrameLeft),bottom:this._yToCanvas(this.startMouseY-this.startFrameTop)},s=this._getNodesOverlappingWith(i);if(this.startClickedObj=s.length>0?s[s.length-1]:void 0,this.startClickedObj){var o=this.nodes[this.startClickedObj.row];this.startClickedObj.xFixed=o.xFixed,this.startClickedObj.yFixed=o.yFixed,o.xFixed=!0,o.yFixed=!0,this.ctrlKeyDown&&o.isSelected()?this._unselectNodes([this.startClickedObj]):this._selectNodes([this.startClickedObj],this.ctrlKeyDown),this.moving||this._redraw()}else this.shiftKeyDown||(this.moved=!1)}},S.prototype._onMouseMove=function(t){if(t=t||window.event,this.selectable){var e=t.clientX||t.targetTouches&&t.targetTouches[0].clientX||0,i=t.clientY||t.targetTouches&&t.targetTouches[0].clientY||0;if(this.mouseX=e,this.mouseY=i,this.startClickedObj){var s=this.nodes[this.startClickedObj.row];this.startClickedObj.xFixed||(s.x=this._xToCanvas(e-this.startFrameLeft)),this.startClickedObj.yFixed||(s.y=this._yToCanvas(i-this.startFrameTop)),this.moving||(this.moving=!0,this.start())}else if(this.shiftKeyDown){void 0==this.frame.selRect&&(this.frame.selRect=document.createElement("DIV"),this.frame.appendChild(this.frame.selRect),this.frame.selRect.style.position="absolute",this.frame.selRect.style.border="1px dashed red");var o=Math.min(this.startMouseX,e)-this.startFrameLeft,n=Math.min(this.startMouseY,i)-this.startFrameTop,r=Math.max(this.startMouseX,e)-this.startFrameLeft,a=Math.max(this.startMouseY,i)-this.startFrameTop;this.frame.selRect.style.left=o+"px",this.frame.selRect.style.top=n+"px",this.frame.selRect.style.width=r-o+"px",this.frame.selRect.style.height=a-n+"px"}else{var h=e-this.startMouseX,d=i-this.startMouseY;this._setTranslation(this.startTranslation.x+h,this.startTranslation.y+d),this._redraw(),this.moved=!0}N.util.preventDefault(t)}},S.prototype._onMouseUp=function(t){if(t=t||window.event,this.selectable){this.onmousemove&&(N.util.removeEventListener(document,"mousemove",this.onmousemove),this.onmousemove=void 0),this.onmouseup&&(N.util.removeEventListener(document,"mouseup",this.onmouseup),this.onmouseup=void 0),N.util.preventDefault(t);var e=t.clientX||this.mouseX||0,i=t.clientY||this.mouseY||0,s=t?t.ctrlKey:window.event.ctrlKey;if(this.startClickedObj){var o=this.nodes[this.startClickedObj.row];o.xFixed=this.startClickedObj.xFixed,o.yFixed=this.startClickedObj.yFixed}else if(this.shiftKeyDown){var n={left:this._xToCanvas(Math.min(this.startMouseX,e)-this.startFrameLeft),top:this._yToCanvas(Math.min(this.startMouseY,i)-this.startFrameTop),right:this._xToCanvas(Math.max(this.startMouseX,e)-this.startFrameLeft),bottom:this._yToCanvas(Math.max(this.startMouseY,i)-this.startFrameTop)},r=this._getNodesOverlappingWith(n);this._selectNodes(r,s),this.redraw(),this.frame.selRect&&(this.frame.removeChild(this.frame.selRect),this.frame.selRect=void 0)}else this.ctrlKeyDown||this.moved||(this._unselectNodes(),this._redraw());this.leftButtonDown=!1,this.ctrlKeyDown=!1}},S.prototype._onMouseWheel=function(t){t=t||window.event;var e=t.clientX,i=t.clientY,s=0;if(t.wheelDelta?s=t.wheelDelta/120:t.detail&&(s=-t.detail/3),s){var o=s/10;0>s&&(o/=1-o);var n=this._getScale(),r=n*(1+o);.01>r&&(r=.01),r>10&&(r=10);var a=N.util.getAbsoluteLeft(this.frame.canvas),h=N.util.getAbsoluteTop(this.frame.canvas),d=e-a,p=i-h,l=this._getTranslation(),u=r/n,c=(1-u)*d+l.x*u,f=(1-u)*p+l.y*u;this._setScale(r),this._setTranslation(c,f),this._redraw()}N.util.preventDefault(t)},S.prototype._onMouseMoveTitle=function(t){t=t||window.event;var e=t.clientX,i=t.clientY;this.startFrameLeft=this.startFrameLeft||N.util.getAbsoluteLeft(this.frame.canvas),this.startFrameTop=this.startFrameTop||N.util.getAbsoluteTop(this.frame.canvas);var s=e-this.startFrameLeft,o=i-this.startFrameTop;this.popupNode&&this._checkHidePopup(s,o);var n=this,r=function(){n._checkShowPopup(s,o)};this.popupTimer&&clearInterval(this.popupTimer),this.leftButtonDown||(this.popupTimer=setTimeout(r,300))},S.prototype._checkShowPopup=function(t,e){var i,s,o={left:this._xToCanvas(t),top:this._yToCanvas(e),right:this._xToCanvas(t),bottom:this._yToCanvas(e)},n=this.popupNode;if(void 0==this.popupNode){var r=this.nodes;for(i=r.length-1;i>=0;i--){var a=r[i];if(void 0!=a.getTitle()&&a.isOverlappingWith(o)){this.popupNode=a;break}}}if(void 0==this.popupNode){var h=this.edges;for(i=0,s=h.length;s>i;i++){var d=h[i];if(void 0!=d.getTitle()&&d.isOverlappingWith(o)){this.popupNode=d;break}}}if(this.popupNode){if(this.popupNode!=n){var p=this;p.popup||(p.popup=new C(p.frame)),p.popup.setPosition(t-3,e-3),p.popup.setText(p.popupNode.getTitle()),p.popup.show()}}else this.popup&&this.popup.hide()},S.prototype._checkHidePopup=function(t,e){var i={left:t,top:e,right:t,bottom:e};this.popupNode&&this.popupNode.isOverlappingWith(i)||(this.popupNode=void 0,this.popup&&this.popup.hide())},S.prototype._onTouchStart=function(t){if(N.util.preventDefault(t),!this.touchDown){this.touchDown=!0;var e=this;this.ontouchmove||(this.ontouchmove=function(t){e._onTouchMove(t)},N.util.addEventListener(document,"touchmove",this.ontouchmove)),this.ontouchend||(this.ontouchend=function(t){e._onTouchEnd(t)},N.util.addEventListener(document,"touchend",this.ontouchend)),this._onMouseDown(t)}},S.prototype._onTouchMove=function(t){N.util.preventDefault(t),this._onMouseMove(t)},S.prototype._onTouchEnd=function(t){N.util.preventDefault(t),this.touchDown=!1,this.ontouchmove&&(N.util.removeEventListener(document,"touchmove",this.ontouchmove),this.ontouchmove=void 0),this.ontouchend&&(N.util.removeEventListener(document,"touchend",this.ontouchend),this.ontouchend=void 0),this._onMouseUp(t)},S.prototype._unselectNodes=function(t,e){var i,s,o,n=!1;if(t)for(i=0,s=t.length;s>i;i++){o=t[i].row,this.nodes[o].unselect();for(var r=0;this.selection.length>r;)this.selection[r].row==o?(this.selection.splice(r,1),n=!0):r++}else if(this.selection&&this.selection.length){for(i=0,s=this.selection.length;s>i;i++)o=this.selection[i].row,this.nodes[o].unselect(),n=!0;this.selection=[]}return!n||1!=e&&void 0!=e||this.trigger("select"),n},S.prototype._selectNodes=function(t,e){var i,s,o=!1,n=!0;if(t.length!=this.selection.length)n=!1;else for(i=0,s=Math.min(t.length,this.selection.length);s>i;i++)if(t[i].row!=this.selection[i].row){n=!1;break}if(n)return o;if(void 0==e||0==e){var r=!1;o=this._unselectNodes(void 0,r)}for(i=0,s=t.length;s>i;i++){for(var a=t[i].row,h=!1,d=0,p=this.selection.length;p>d;d++)if(this.selection[d].row==a){h=!0;break}h||(this.nodes[a].select(),this.selection.push(t[i]),o=!0)}return o&&this.trigger("select"),o},S.prototype._getNodesOverlappingWith=function(t){for(var e=[],i=0;this.nodes.length>i;i++)if(this.nodes[i].isOverlappingWith(t)){var s={row:i};e.push(s)}return e},S.prototype.getSelection=function(){for(var t=[],e=0;this.selection.length>e;e++){var i=this.selection[e].row;t.push({row:i})}return t},S.prototype.setSelection=function(t){var e,i,s;if(void 0==t.length)throw"Selection must be an array with objects";for(e=0,i=this.selection.length;i>e;e++)s=this.selection[e].row,this.nodes[s].unselect();for(this.selection=[],e=0,i=t.length;i>e;e++){if(s=t[e].row,void 0==s)throw"Parameter row missing in selection object";if(s>this.nodes.length-1)throw"Parameter row out of range";var o={row:s};this.selection.push(o),this.nodes[s].select()}this.redraw()},S.prototype._getConnectionCount=function(t){function e(t){for(var e=[],s=0,o=t.length;o>s;s++)for(var n=t[s],r=0,a=i.length;a>r;r++){var h=null;i[r].from==n?h=i[r].to:i[r].to==n&&(h=i[r].from);var d,p;if(h)for(d=0,p=t.length;p>d;d++)if(t[d]==h){h=null;break}if(h)for(d=0,p=e.length;p>d;d++)if(e[d]==h){h=null;break}h&&e.push(h)}return e}var i=this.edges;void 0==t&&(t=1);var s,o,n=[],r=this.nodes;for(s=0,o=r.length;o>s;s++){for(var a=[r[s]],h=0;t>h;h++)a=a.concat(e(a));n.push(a)}var d=[];for(s=0,len=n.length;len>s;s++)d.push(n[s].length);return d},S.prototype._setSize=function(t,e){this.frame.style.width=t,this.frame.style.height=e,this.frame.canvas.style.width="100%",this.frame.canvas.style.height="100%",this.frame.canvas.width=this.frame.canvas.clientWidth,this.frame.canvas.height=this.frame.canvas.clientHeight},S.prototype.setNodes=function(t){if(this.selection=[],this.nodes=[],this.moving=!1,t){this.nodesTable=t;for(var e=!1,i=t.length,s=0;i>s;s++){var o=t[s];if(void 0!=o.value&&(e=!0),void 0==o.id)throw"Column 'id' missing in table with nodes (row "+s+")";this._createNode(o)}e&&this._updateValueRange(this.nodes)}},S.prototype._createNode=function(t){var e,i,s,o,n=t.action?t.action:"update";if("create"===n)s=new _(t,this.images,this.groups,this.constants),e=t.id,i=void 0!==e?this._findNode(e):void 0,void 0!==i?(o=this.nodes[i],this.nodes[i]=s,o.selected&&this._unselectNodes([{row:i}],!1)):this.nodes.push(s),s.isFixed()||(this.moving=!0);else if("update"===n){if(e=t.id,void 0===e)throw"Cannot update a node without id";i=this._findNode(e),void 0!==i?this.nodes[i].setProperties(t,this.constants):(s=new _(t,this.images,this.groups,this.constants),this.nodes.push(s),s.isFixed()||(this.moving=!0))}else{if("delete"!==n)throw"Unknown action "+n+". Choose 'create', 'update', or 'delete'.";if(e=t.id,void 0===e)throw"Cannot delete node without its id";if(i=this._findNode(e),void 0===i)throw"Node with id "+e+" not found";o=this.nodes[i],o.selected&&this._unselectNodes([{row:i}],!1),this.nodes.splice(i,1)}},S.prototype._findNode=function(t){for(var e=this.nodes,i=0,s=e.length;s>i;i++)if(e[i].id===t)return i;return void 0},S.prototype._findNodeByRow=function(t){return this.nodes[t]},S.prototype.setEdges=function(t){if(this.edges=[],t){this.edgesTable=t;for(var e=!1,i=t.length,s=0;i>s;s++){var o=t[s];if(void 0===o.from)throw"Column 'from' missing in table with edges (row "+s+")";if(void 0===o.to)throw"Column 'to' missing in table with edges (row "+s+")";void 0!=o.value&&(e=!0),this._createEdge(o)}e&&this._updateValueRange(this.edges)}},S.prototype._createEdge=function(t){var e,i,s,o,n=t.action?t.action:"create";if("create"===n)e=t.id,i=void 0!==e?this._findEdge(e):void 0,s=new T(t,this,this.constants),void 0!==i?(o=this.edges[i],o.from.detachEdge(o),o.to.detachEdge(o),this.edges[i]=s):this.edges.push(s),s.from.attachEdge(s),s.to.attachEdge(s);else if("update"===n){if(e=t.id,void 0===e)throw"Cannot update a edge without id";i=this._findEdge(e),void 0!==i?(s=this.edges[i],s.from.detachEdge(s),s.to.detachEdge(s),s.setProperties(t,this.constants),s.from.attachEdge(s),s.to.attachEdge(s)):(s=new T(t,this,this.constants),s.from.attachEdge(s),s.to.attachEdge(s),this.edges.push(s))}else{if("delete"!==n)throw"Unknown action "+n+". Choose 'create', 'update', or 'delete'.";if(e=t.id,void 0===e)throw"Cannot delete edge without its id";if(i=this._findEdge(e),void 0===i)throw"Edge with id "+e+" not found";o=this.edges[e],s.from.detachEdge(o),s.to.detachEdge(o),this.edges.splice(i,1)}},S.prototype._updateNodeReferences=function(t,e){for(var i=this.edges,s=0,o=i.length;o>s;s++){var n=i[s];n.from===t&&(n.from=e),n.to===t&&(n.to=e)}},S.prototype._findEdge=function(t){for(var e=this.edges,i=0,s=e.length;s>i;i++)if(e[i].id===t)return i;return void 0},S.prototype._findEdgeByRow=function(t){return this.edges[t]},S.prototype._updateValueRange=function(t){var e,i=t.length,s=void 0,o=void 0;for(e=0;i>e;e++){var n=t[e].getValue();void 0!==n&&(s=void 0===s?n:Math.min(n,s),o=void 0===o?n:Math.max(n,o))}if(void 0!==s&&void 0!==o)for(e=0;i>e;e++)t[e].setValueRange(s,o)},S.prototype.redraw=function(){this._setSize(this.width,this.height),this._redraw()},S.prototype._redraw=function(){var t=this.frame.canvas.getContext("2d"),e=this.frame.canvas.width,i=this.frame.canvas.height;t.clearRect(0,0,e,i),t.save(),t.translate(this.translation.x,this.translation.y),t.scale(this.scale,this.scale),this._drawEdges(t),this._drawNodes(t),t.restore()},S.prototype._setTranslation=function(t,e){void 0===this.translation&&(this.translation={x:0,y:0}),void 0!==t&&(this.translation.x=t),void 0!==e&&(this.translation.y=e)},S.prototype._getTranslation=function(){return{x:this.translation.x,y:this.translation.y}},S.prototype._setScale=function(t){this.scale=t},S.prototype._getScale=function(){return this.scale},S.prototype._xToCanvas=function(t){return(t-this.translation.x)/this.scale},S.prototype._canvasToX=function(t){return t*this.scale+this.translation.x},S.prototype._yToCanvas=function(t){return(t-this.translation.y)/this.scale},S.prototype._canvasToY=function(t){return t*this.scale+this.translation.y},S.prototype._getNode=function(t){for(var e=0;this.nodes.length>e;e++)if(this.nodes[e].id==t)return this.nodes[e];return null},S.prototype._drawNodes=function(t){for(var e=this.nodes,i=[],s=0,o=e.length;o>s;s++)e[s].isSelected()?i.push(s):e[s].draw(t);for(var n=0,r=i.length;r>n;n++)e[i[n]].draw(t)},S.prototype._drawEdges=function(t){for(var e=this.edges,i=0,s=e.length;s>i;i++)e[i].draw(t)},S.prototype._reposition=function(){for(var t=2*this.constants.edges.length,e=this.frame.canvas.clientWidth/2,i=this.frame.canvas.clientHeight/2,s=0;this.nodes.length>s;s++){var o=2*Math.PI*(s/this.nodes.length);this.nodes[s].xFixed||(this.nodes[s].x=e+t*Math.cos(o)),this.nodes[s].yFixed||(this.nodes[s].y=i+t*Math.sin(o))}},S.prototype._doStabilize=function(){new Date;for(var t=0,e=this.constants.minVelocity,i=!1;!i&&this.constants.maxIterations>t;)this._calculateForces(),this._discreteStepNodes(),i=!this._isMoving(e),t++;new Date},S.prototype._calculateForces=function(){for(var t=this.nodes,e=this.edges,i=.01,s=this.frame.canvas.clientWidth/2,o=this.frame.canvas.clientHeight/2,n=0;t.length>n;n++){var r=s-t[n].x,a=o-t[n].y,h=Math.atan2(a,r),d=Math.cos(h)*i,p=Math.sin(h)*i;this.nodes[n]._setForce(d,p)}for(var l=this.constants.nodes.distance,u=10,n=0;t.length>n;n++)for(var c=n+1;this.nodes.length>c;c++){var r=t[c].x-t[n].x,a=t[c].y-t[n].y,f=Math.sqrt(r*r+a*a),h=Math.atan2(a,r),m=1/(1+Math.exp((f/l-1)*u)),d=Math.cos(h)*m,p=Math.sin(h)*m;this.nodes[n]._addForce(-d,-p),this.nodes[c]._addForce(d,p)}for(var g=0,v=e.length;v>g;g++){var y=e[g],r=y.to.x-y.from.x,a=y.to.y-y.from.y,w=y.length,b=Math.sqrt(r*r+a*a),h=Math.atan2(a,r),x=y.stiffness*(w-b),d=Math.cos(h)*x,p=Math.sin(h)*x;y.from._addForce(-d,-p),y.to._addForce(d,p)}},S.prototype._isMoving=function(t){for(var e=this.nodes,i=0,s=e.length;s>i;i++)if(e[i].isMoving(t))return!0;return!1},S.prototype._discreteStepNodes=function(){for(var t=this.refreshRate/1e3,e=this.nodes,i=0,s=e.length;s>i;i++)e[i].discreteStep(t)},S.prototype.start=function(){if(this.moving){this._calculateForces(),this._discreteStepNodes();var t=this.constants.minVelocity;this.moving=this._isMoving(t)}if(this.moving){if(!this.timer){var e=this;this.timer=window.setTimeout(function(){e.timer=void 0,e.start(),e._redraw()},this.refreshRate)}}else this._redraw()},S.prototype.stop=function(){this.timer&&(window.clearInterval(this.timer),this.timer=void 0)};var N={util:E,events:O,Controller:d,DataSet:o,DataView:n,Range:a,Stack:r,TimeStep:TimeStep,EventBus:h,components:{items:{Item:m,ItemBox:g,ItemPoint:v,ItemRange:y},Component:p,Panel:l,RootPanel:u,ItemSet:f,TimeAxis:c},graph:{Node:_,Edge:T,Popup:C,Groups:Groups,Images:Images},Timeline:x,Graph:S};s!==void 0&&(s=N),i!==void 0&&i.exports!==void 0&&(i.exports=N),"function"==typeof t&&t(function(){return N}),"undefined"!=typeof window&&(window.vis=N),E.loadCss("/* vis.js stylesheet */\n\n.graph {\n    position: relative;\n    border: 1px solid #bfbfbf;\n}\n\n.graph .panel {\n    position: absolute;\n}\n\n.graph .groupset {\n    position: absolute;\n    padding: 0;\n    margin: 0;\n}\n\n\n.graph .itemset {\n    position: absolute;\n    padding: 0;\n    margin: 0;\n    overflow: hidden;\n}\n\n.graph .background {\n}\n\n.graph .foreground {\n}\n\n.graph .itemset-axis {\n    position: absolute;\n}\n\n.graph .groupset .itemset-axis {\n    border-top: 1px solid #bfbfbf;\n}\n\n/* TODO: with orientation=='bottom', this will more or less overlap with timeline axis\n.graph .groupset .itemset-axis:last-child {\n    border-top: none;\n}\n*/\n\n\n.graph .item {\n    position: absolute;\n    color: #1A1A1A;\n    border-color: #97B0F8;\n    background-color: #D5DDF6;\n    display: inline-block;\n}\n\n.graph .item.selected {\n    border-color: #FFC200;\n    background-color: #FFF785;\n    z-index: 999;\n}\n\n.graph .item.cluster {\n    /* TODO: use another color or pattern? */\n    background: #97B0F8 url('img/cluster_bg.png');\n    color: white;\n}\n.graph .item.cluster.point {\n    border-color: #D5DDF6;\n}\n\n.graph .item.box {\n    text-align: center;\n    border-style: solid;\n    border-width: 1px;\n    border-radius: 5px;\n    -moz-border-radius: 5px; /* For Firefox 3.6 and older */\n}\n\n.graph .item.point {\n    background: none;\n}\n\n.graph .dot {\n    border: 5px solid #97B0F8;\n    position: absolute;\n    border-radius: 5px;\n    -moz-border-radius: 5px;  /* For Firefox 3.6 and older */\n}\n\n.graph .item.range {\n    overflow: hidden;\n    border-style: solid;\n    border-width: 1px;\n    border-radius: 2px;\n    -moz-border-radius: 2px;  /* For Firefox 3.6 and older */\n}\n\n.graph .item.range .drag-left {\n    cursor: w-resize;\n    z-index: 1000;\n}\n\n.graph .item.range .drag-right {\n    cursor: e-resize;\n    z-index: 1000;\n}\n\n.graph .item.range .content {\n    position: relative;\n    display: inline-block;\n}\n\n.graph .item.line {\n    position: absolute;\n    width: 0;\n    border-left-width: 1px;\n    border-left-style: solid;\n}\n\n.graph .item .content {\n    margin: 5px;\n    white-space: nowrap;\n    overflow: hidden;\n}\n\n/* TODO: better css name, 'graph' is way to generic */\n\n.graph {\n    overflow: hidden;\n}\n\n.graph .axis {\n    position: relative;\n}\n\n.graph .axis .text {\n    position: absolute;\n    color: #4d4d4d;\n    padding: 3px;\n    white-space: nowrap;\n}\n\n.graph .axis .text.measure {\n    position: absolute;\n    padding-left: 0;\n    padding-right: 0;\n    margin-left: 0;\n    margin-right: 0;\n    visibility: hidden;\n}\n\n.graph .axis .grid.vertical {\n    position: absolute;\n    width: 0;\n    border-right: 1px solid;\n}\n\n.graph .axis .grid.horizontal {\n    position: absolute;\n    left: 0;\n    width: 100%;\n    height: 0;\n    border-bottom: 1px solid;\n}\n\n.graph .axis .grid.minor {\n    border-color: #e5e5e5;\n}\n\n.graph .axis .grid.major {\n    border-color: #bfbfbf;\n}\n\n")})()},{moment:2}],2:[function(e,i){(function(){(function(s){function o(t,e){return function(i){return l(t.call(this,i),e)}}function n(t){return function(e){return this.lang().ordinal(t.call(this,e))}}function r(){}function a(t){d(this,t)}function h(t){var e=this._data={},i=t.years||t.year||t.y||0,s=t.months||t.month||t.M||0,o=t.weeks||t.week||t.w||0,n=t.days||t.day||t.d||0,r=t.hours||t.hour||t.h||0,a=t.minutes||t.minute||t.m||0,h=t.seconds||t.second||t.s||0,d=t.milliseconds||t.millisecond||t.ms||0;this._milliseconds=d+1e3*h+6e4*a+36e5*r,this._days=n+7*o,this._months=s+12*i,e.milliseconds=d%1e3,h+=p(d/1e3),e.seconds=h%60,a+=p(h/60),e.minutes=a%60,r+=p(a/60),e.hours=r%24,n+=p(r/24),n+=7*o,e.days=n%30,s+=p(n/30),e.months=s%12,i+=p(s/12),e.years=i}function d(t,e){for(var i in e)e.hasOwnProperty(i)&&(t[i]=e[i]);return t}function p(t){return 0>t?Math.ceil(t):Math.floor(t)}function l(t,e){for(var i=t+"";e>i.length;)i="0"+i;return i}function u(t,e,i){var s,o=e._milliseconds,n=e._days,r=e._months;o&&t._d.setTime(+t+o*i),n&&t.date(t.date()+n*i),r&&(s=t.date(),t.date(1).month(t.month()+r*i).date(Math.min(s,t.daysInMonth())))}function c(t){return"[object Array]"===Object.prototype.toString.call(t)}function f(t,e){var i,s=Math.min(t.length,e.length),o=Math.abs(t.length-e.length),n=0;for(i=0;s>i;i++)~~t[i]!==~~e[i]&&n++;return n+o}function m(t,e){return e.abbr=t,P[t]||(P[t]=new r),P[t].set(e),P[t]}function g(t){return t?(!P[t]&&H&&e("./lang/"+t),P[t]):F.fn._lang}function v(t){return t.match(/\[.*\]/)?t.replace(/^\[|\]$/g,""):t.replace(/\\/g,"")}function y(t){var e,i,s=t.match(j);for(e=0,i=s.length;i>e;e++)s[e]=ae[s[e]]?ae[s[e]]:v(s[e]);return function(o){var n="";for(e=0;i>e;e++)n+="function"==typeof s[e].call?s[e].call(o,t):s[e];return n}}function w(t,e){function i(e){return t.lang().longDateFormat(e)||e}for(var s=5;s--&&U.test(e);)e=e.replace(U,i);return oe[e]||(oe[e]=y(e)),oe[e](t)}function b(t){switch(t){case"DDDD":return q;case"YYYY":return V;case"YYYYY":return X;case"S":case"SS":case"SSS":case"DDD":return B;case"MMM":case"MMMM":case"dd":case"ddd":case"dddd":case"a":case"A":return K;case"X":return J;case"Z":case"ZZ":return G;case"T":return Z;case"MM":case"DD":case"YY":case"HH":case"hh":case"mm":case"ss":case"M":case"D":case"d":case"H":case"h":case"m":case"s":return W;default:return RegExp(t.replace("\\",""))}}function x(t,e,i){var s,o=i._a;switch(t){case"M":case"MM":o[1]=null==e?0:~~e-1;break;case"MMM":case"MMMM":s=g(i._l).monthsParse(e),null!=s?o[1]=s:i._isValid=!1;break;case"D":case"DD":case"DDD":case"DDDD":null!=e&&(o[2]=~~e);break;case"YY":o[0]=~~e+(~~e>68?1900:2e3);break;case"YYYY":case"YYYYY":o[0]=~~e;break;case"a":case"A":i._isPm="pm"===(e+"").toLowerCase();break;case"H":case"HH":case"h":case"hh":o[3]=~~e;break;case"m":case"mm":o[4]=~~e;break;case"s":case"ss":o[5]=~~e;break;case"S":case"SS":case"SSS":o[6]=~~(1e3*("0."+e));break;case"X":i._d=new Date(1e3*parseFloat(e));break;case"Z":case"ZZ":i._useUTC=!0,s=(e+"").match(ee),s&&s[1]&&(i._tzh=~~s[1]),s&&s[2]&&(i._tzm=~~s[2]),s&&"+"===s[0]&&(i._tzh=-i._tzh,i._tzm=-i._tzm)}null==e&&(i._isValid=!1)}function _(t){var e,i,s=[];if(!t._d){for(e=0;7>e;e++)t._a[e]=s[e]=null==t._a[e]?2===e?1:0:t._a[e];s[3]+=t._tzh||0,s[4]+=t._tzm||0,i=new Date(0),t._useUTC?(i.setUTCFullYear(s[0],s[1],s[2]),i.setUTCHours(s[3],s[4],s[5],s[6])):(i.setFullYear(s[0],s[1],s[2]),i.setHours(s[3],s[4],s[5],s[6])),t._d=i}}function T(t){var e,i,s=t._f.match(j),o=t._i;for(t._a=[],e=0;s.length>e;e++)i=(b(s[e]).exec(o)||[])[0],i&&(o=o.slice(o.indexOf(i)+i.length)),ae[s[e]]&&x(s[e],i,t);t._isPm&&12>t._a[3]&&(t._a[3]+=12),t._isPm===!1&&12===t._a[3]&&(t._a[3]=0),_(t)}function C(t){for(var e,i,s,o,n=99;t._f.length;){if(e=d({},t),e._f=t._f.pop(),T(e),i=new a(e),i.isValid()){s=i;break}o=f(e._a,i.toArray()),n>o&&(n=o,s=i)}d(t,s)}function S(t){var e,i=t._i;if(Q.exec(i)){for(t._f="YYYY-MM-DDT",e=0;4>e;e++)if(te[e][1].exec(i)){t._f+=te[e][0];break}G.exec(i)&&(t._f+=" Z"),T(t)}else t._d=new Date(i)}function M(t){var e=t._i,i=R.exec(e);e===s?t._d=new Date:i?t._d=new Date(+i[1]):"string"==typeof e?S(t):c(e)?(t._a=e.slice(0),_(t)):t._d=e instanceof Date?new Date(+e):new Date(e)}function E(t,e,i,s,o){return o.relativeTime(e||1,!!i,t,s)}function D(t,e,i){var s=z(Math.abs(t)/1e3),o=z(s/60),n=z(o/60),r=z(n/24),a=z(r/365),h=45>s&&["s",s]||1===o&&["m"]||45>o&&["mm",o]||1===n&&["h"]||22>n&&["hh",n]||1===r&&["d"]||25>=r&&["dd",r]||45>=r&&["M"]||345>r&&["MM",z(r/30)]||1===a&&["y"]||["yy",a];return h[2]=e,h[3]=t>0,h[4]=i,E.apply({},h)}function L(t,e,i){var s=i-e,o=i-t.day();return o>s&&(o-=7),s-7>o&&(o+=7),Math.ceil(F(t).add("d",o).dayOfYear()/7)}function O(t){var e=t._i,i=t._f;return null===e||""===e?null:("string"==typeof e&&(t._i=e=g().preparse(e)),F.isMoment(e)?(t=d({},e),t._d=new Date(+e._d)):i?c(i)?C(t):T(t):M(t),new a(t))}function N(t,e){F.fn[t]=F.fn[t+"s"]=function(t){var i=this._isUTC?"UTC":"";return null!=t?(this._d["set"+i+e](t),this):this._d["get"+i+e]()}}function k(t){F.duration.fn[t]=function(){return this._data[t]}}function A(t,e){F.duration.fn["as"+t]=function(){return+this/e}}for(var F,I,Y="2.0.0",z=Math.round,P={},H=i!==s&&i.exports,R=/^\/?Date\((\-?\d+)/i,j=/(\[[^\[]*\])|(\\)?(Mo|MM?M?M?|Do|DDDo|DD?D?D?|ddd?d?|do?|w[o|w]?|W[o|W]?|YYYYY|YYYY|YY|a|A|hh?|HH?|mm?|ss?|SS?S?|X|zz?|ZZ?|.)/g,U=/(\[[^\[]*\])|(\\)?(LT|LL?L?L?|l{1,4})/g,W=/\d\d?/,B=/\d{1,3}/,q=/\d{3}/,V=/\d{1,4}/,X=/[+\-]?\d{1,6}/,K=/[0-9]*[a-z\u00A0-\u05FF\u0700-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+|[\u0600-\u06FF]+\s*?[\u0600-\u06FF]+/i,G=/Z|[\+\-]\d\d:?\d\d/i,Z=/T/i,J=/[\+\-]?\d+(\.\d{1,3})?/,Q=/^\s*\d{4}-\d\d-\d\d((T| )(\d\d(:\d\d(:\d\d(\.\d\d?\d?)?)?)?)?([\+\-]\d\d:?\d\d)?)?/,$="YYYY-MM-DDTHH:mm:ssZ",te=[["HH:mm:ss.S",/(T| )\d\d:\d\d:\d\d\.\d{1,3}/],["HH:mm:ss",/(T| )\d\d:\d\d:\d\d/],["HH:mm",/(T| )\d\d:\d\d/],["HH",/(T| )\d\d/]],ee=/([\+\-]|\d\d)/gi,ie="Month|Date|Hours|Minutes|Seconds|Milliseconds".split("|"),se={Milliseconds:1,Seconds:1e3,Minutes:6e4,Hours:36e5,Days:864e5,Months:2592e6,Years:31536e6},oe={},ne="DDD w W M D d".split(" "),re="M D H h m s w W".split(" "),ae={M:function(){return this.month()+1},MMM:function(t){return this.lang().monthsShort(this,t)},MMMM:function(t){return this.lang().months(this,t)},D:function(){return this.date()},DDD:function(){return this.dayOfYear()},d:function(){return this.day()},dd:function(t){return this.lang().weekdaysMin(this,t)},ddd:function(t){return this.lang().weekdaysShort(this,t)},dddd:function(t){return this.lang().weekdays(this,t)},w:function(){return this.week()},W:function(){return this.isoWeek()},YY:function(){return l(this.year()%100,2)},YYYY:function(){return l(this.year(),4)},YYYYY:function(){return l(this.year(),5)},a:function(){return this.lang().meridiem(this.hours(),this.minutes(),!0)},A:function(){return this.lang().meridiem(this.hours(),this.minutes(),!1)},H:function(){return this.hours()},h:function(){return this.hours()%12||12},m:function(){return this.minutes()},s:function(){return this.seconds()},S:function(){return~~(this.milliseconds()/100)},SS:function(){return l(~~(this.milliseconds()/10),2)},SSS:function(){return l(this.milliseconds(),3)},Z:function(){var t=-this.zone(),e="+";return 0>t&&(t=-t,e="-"),e+l(~~(t/60),2)+":"+l(~~t%60,2)},ZZ:function(){var t=-this.zone(),e="+";return 0>t&&(t=-t,e="-"),e+l(~~(10*t/6),4)},X:function(){return this.unix()}};ne.length;)I=ne.pop(),ae[I+"o"]=n(ae[I]);for(;re.length;)I=re.pop(),ae[I+I]=o(ae[I],2);for(ae.DDDD=o(ae.DDD,3),r.prototype={set:function(t){var e,i;for(i in t)e=t[i],"function"==typeof e?this[i]=e:this["_"+i]=e},_months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),months:function(t){return this._months[t.month()]},_monthsShort:"Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec".split("_"),monthsShort:function(t){return this._monthsShort[t.month()]},monthsParse:function(t){var e,i,s;for(this._monthsParse||(this._monthsParse=[]),e=0;12>e;e++)if(this._monthsParse[e]||(i=F([2e3,e]),s="^"+this.months(i,"")+"|^"+this.monthsShort(i,""),this._monthsParse[e]=RegExp(s.replace(".",""),"i")),this._monthsParse[e].test(t))return e},_weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),weekdays:function(t){return this._weekdays[t.day()]},_weekdaysShort:"Sun_Mon_Tue_Wed_Thu_Fri_Sat".split("_"),weekdaysShort:function(t){return this._weekdaysShort[t.day()]},_weekdaysMin:"Su_Mo_Tu_We_Th_Fr_Sa".split("_"),weekdaysMin:function(t){return this._weekdaysMin[t.day()]},_longDateFormat:{LT:"h:mm A",L:"MM/DD/YYYY",LL:"MMMM D YYYY",LLL:"MMMM D YYYY LT",LLLL:"dddd, MMMM D YYYY LT"},longDateFormat:function(t){var e=this._longDateFormat[t];return!e&&this._longDateFormat[t.toUpperCase()]&&(e=this._longDateFormat[t.toUpperCase()].replace(/MMMM|MM|DD|dddd/g,function(t){return t.slice(1)}),this._longDateFormat[t]=e),e},meridiem:function(t,e,i){return t>11?i?"pm":"PM":i?"am":"AM"},_calendar:{sameDay:"[Today at] LT",nextDay:"[Tomorrow at] LT",nextWeek:"dddd [at] LT",lastDay:"[Yesterday at] LT",lastWeek:"[last] dddd [at] LT",sameElse:"L"},calendar:function(t,e){var i=this._calendar[t];return"function"==typeof i?i.apply(e):i},_relativeTime:{future:"in %s",past:"%s ago",s:"a few seconds",m:"a minute",mm:"%d minutes",h:"an hour",hh:"%d hours",d:"a day",dd:"%d days",M:"a month",MM:"%d months",y:"a year",yy:"%d years"},relativeTime:function(t,e,i,s){var o=this._relativeTime[i];return"function"==typeof o?o(t,e,i,s):o.replace(/%d/i,t)},pastFuture:function(t,e){var i=this._relativeTime[t>0?"future":"past"];return"function"==typeof i?i(e):i.replace(/%s/i,e)},ordinal:function(t){return this._ordinal.replace("%d",t)},_ordinal:"%d",preparse:function(t){return t},postformat:function(t){return t},week:function(t){return L(t,this._week.dow,this._week.doy)},_week:{dow:0,doy:6}},F=function(t,e,i){return O({_i:t,_f:e,_l:i,_isUTC:!1})},F.utc=function(t,e,i){return O({_useUTC:!0,_isUTC:!0,_l:i,_i:t,_f:e})},F.unix=function(t){return F(1e3*t)},F.duration=function(t,e){var i,s=F.isDuration(t),o="number"==typeof t,n=s?t._data:o?{}:t;return o&&(e?n[e]=t:n.milliseconds=t),i=new h(n),s&&t.hasOwnProperty("_lang")&&(i._lang=t._lang),i},F.version=Y,F.defaultFormat=$,F.lang=function(t,e){return t?(e?m(t,e):P[t]||g(t),F.duration.fn._lang=F.fn._lang=g(t),s):F.fn._lang._abbr},F.langData=function(t){return t&&t._lang&&t._lang._abbr&&(t=t._lang._abbr),g(t)},F.isMoment=function(t){return t instanceof a},F.isDuration=function(t){return t instanceof h},F.fn=a.prototype={clone:function(){return F(this)},valueOf:function(){return+this._d},unix:function(){return Math.floor(+this._d/1e3)},toString:function(){return this.format("ddd MMM DD YYYY HH:mm:ss [GMT]ZZ")},toDate:function(){return this._d},toJSON:function(){return F.utc(this).format("YYYY-MM-DD[T]HH:mm:ss.SSS[Z]")},toArray:function(){var t=this;return[t.year(),t.month(),t.date(),t.hours(),t.minutes(),t.seconds(),t.milliseconds()]},isValid:function(){return null==this._isValid&&(this._isValid=this._a?!f(this._a,(this._isUTC?F.utc(this._a):F(this._a)).toArray()):!isNaN(this._d.getTime())),!!this._isValid},utc:function(){return this._isUTC=!0,this},local:function(){return this._isUTC=!1,this},format:function(t){var e=w(this,t||F.defaultFormat);return this.lang().postformat(e)},add:function(t,e){var i;return i="string"==typeof t?F.duration(+e,t):F.duration(t,e),u(this,i,1),this},subtract:function(t,e){var i;return i="string"==typeof t?F.duration(+e,t):F.duration(t,e),u(this,i,-1),this},diff:function(t,e,i){var s,o,n=this._isUTC?F(t).utc():F(t).local(),r=6e4*(this.zone()-n.zone());return e&&(e=e.replace(/s$/,"")),"year"===e||"month"===e?(s=432e5*(this.daysInMonth()+n.daysInMonth()),o=12*(this.year()-n.year())+(this.month()-n.month()),o+=(this-F(this).startOf("month")-(n-F(n).startOf("month")))/s,"year"===e&&(o/=12)):(s=this-n-r,o="second"===e?s/1e3:"minute"===e?s/6e4:"hour"===e?s/36e5:"day"===e?s/864e5:"week"===e?s/6048e5:s),i?o:p(o)},from:function(t,e){return F.duration(this.diff(t)).lang(this.lang()._abbr).humanize(!e)},fromNow:function(t){return this.from(F(),t)},calendar:function(){var t=this.diff(F().startOf("day"),"days",!0),e=-6>t?"sameElse":-1>t?"lastWeek":0>t?"lastDay":1>t?"sameDay":2>t?"nextDay":7>t?"nextWeek":"sameElse";return this.format(this.lang().calendar(e,this))},isLeapYear:function(){var t=this.year();return 0===t%4&&0!==t%100||0===t%400},isDST:function(){return this.zone()<F([this.year()]).zone()||this.zone()<F([this.year(),5]).zone()},day:function(t){var e=this._isUTC?this._d.getUTCDay():this._d.getDay();return null==t?e:this.add({d:t-e})},startOf:function(t){switch(t=t.replace(/s$/,"")){case"year":this.month(0);case"month":this.date(1);case"week":case"day":this.hours(0);case"hour":this.minutes(0);case"minute":this.seconds(0);
+case"second":this.milliseconds(0)}return"week"===t&&this.day(0),this},endOf:function(t){return this.startOf(t).add(t.replace(/s?$/,"s"),1).subtract("ms",1)},isAfter:function(t,e){return e=e!==s?e:"millisecond",+this.clone().startOf(e)>+F(t).startOf(e)},isBefore:function(t,e){return e=e!==s?e:"millisecond",+this.clone().startOf(e)<+F(t).startOf(e)},isSame:function(t,e){return e=e!==s?e:"millisecond",+this.clone().startOf(e)===+F(t).startOf(e)},zone:function(){return this._isUTC?0:this._d.getTimezoneOffset()},daysInMonth:function(){return F.utc([this.year(),this.month()+1,0]).date()},dayOfYear:function(t){var e=z((F(this).startOf("day")-F(this).startOf("year"))/864e5)+1;return null==t?e:this.add("d",t-e)},isoWeek:function(t){var e=L(this,1,4);return null==t?e:this.add("d",7*(t-e))},week:function(t){var e=this.lang().week(this);return null==t?e:this.add("d",7*(t-e))},lang:function(t){return t===s?this._lang:(this._lang=g(t),this)}},I=0;ie.length>I;I++)N(ie[I].toLowerCase().replace(/s$/,""),ie[I]);N("year","FullYear"),F.fn.days=F.fn.day,F.fn.weeks=F.fn.week,F.fn.isoWeeks=F.fn.isoWeek,F.duration.fn=h.prototype={weeks:function(){return p(this.days()/7)},valueOf:function(){return this._milliseconds+864e5*this._days+2592e6*this._months},humanize:function(t){var e=+this,i=D(e,!t,this.lang());return t&&(i=this.lang().pastFuture(e,i)),this.lang().postformat(i)},lang:F.fn.lang};for(I in se)se.hasOwnProperty(I)&&(A(I,se[I]),k(I.toLowerCase()));A("Weeks",6048e5),F.lang("en",{ordinal:function(t){var e=t%10,i=1===~~(t%100/10)?"th":1===e?"st":2===e?"nd":3===e?"rd":"th";return t+i}}),H&&(i.exports=F),"undefined"==typeof ender&&(this.moment=F),"function"==typeof t&&t.amd&&t("moment",[],function(){return F})}).call(this)})()},{}]},{},[1])(1)});
\ No newline at end of file