vis-rails 0.0.6 → 1.0.0

data/vendor/assets/vis/graph/graphMixins/physics/Repulsion.js

@@ -10,8 +10,8 @@ var repulsionMixin = {
    * This field is linearly approximated.
    *
    * @private
-  */
-  _calculateNodeForces : function() {
+   */
+  _calculateNodeForces: function () {
     var dx, dy, angle, distance, fx, fy, combinedClusterSize,
       repulsingForce, node1, node2, i, j;
 
@@ -19,8 +19,8 @@ var repulsionMixin = {
     var nodeIndices = this.calculationNodeIndices;
 
     // approximation constants
-    var a_base = -2/3;
-    var b = 4/3;
+    var a_base = -2 / 3;
+    var b = 4 / 3;
 
     // repulsing forces between nodes
     var nodeDistance = this.constants.physics.repulsion.nodeDistance;
@@ -28,9 +28,9 @@ var repulsionMixin = {
 
     // we loop from i over all but the last entree in the array
     // j loops from i+1 to the last. This way we do not double count any of the indices, nor i == j
-    for (i = 0; i < nodeIndices.length-1; i++) {
+    for (i = 0; i < nodeIndices.length - 1; i++) {
       node1 = nodes[nodeIndices[i]];
-      for (j = i+1; j < nodeIndices.length; j++) {
+      for (j = i + 1; j < nodeIndices.length; j++) {
         node2 = nodes[nodeIndices[j]];
         combinedClusterSize = node1.clusterSize + node2.clusterSize - 2;
 
@@ -40,8 +40,8 @@ var repulsionMixin = {
 
         minimumDistance = (combinedClusterSize == 0) ? nodeDistance : (nodeDistance * (1 + combinedClusterSize * this.constants.clustering.distanceAmplification));
         var a = a_base / minimumDistance;
-        if (distance < 2*minimumDistance) {
-          if (distance < 0.5*minimumDistance) {
+        if (distance < 2 * minimumDistance) {
+          if (distance < 0.5 * minimumDistance) {
             repulsingForce = 1.0;
           }
           else {
@@ -50,7 +50,7 @@ var repulsionMixin = {
 
           // amplify the repulsion for clusters.
           repulsingForce *= (combinedClusterSize == 0) ? 1 : 1 + combinedClusterSize * this.constants.clustering.forceAmplification;
-          repulsingForce = repulsingForce/distance;
+          repulsingForce = repulsingForce / distance;
 
           fx = dx * repulsingForce;
           fy = dy * repulsingForce;
@@ -63,4 +63,4 @@ var repulsionMixin = {
       }
     }
   }
-}
+};

data/vendor/assets/vis/module/exports.js

@@ -4,11 +4,10 @@
 var vis = {
   util: util,
 
-  Controller: Controller,
   DataSet: DataSet,
   DataView: DataView,
   Range: Range,
-  Stack: Stack,
+  stack: stack,
   TimeStep: TimeStep,
 
   components: {

data/vendor/assets/vis/module/header.js

@@ -4,8 +4,8 @@
  *
  * A dynamic, browser-based visualization library.
  *
- * @version 0.6.1
- * @date    2014-03-06e
+ * @version @@version
+ * @date    @@date
  *
  * @license
  * Copyright (C) 2011-2014 Almende B.V, http://almende.com

data/vendor/assets/vis/timeline/Range.js

@@ -3,20 +3,39 @@
  * A Range controls a numeric range with a start and end value.
  * The Range adjusts the range based on mouse events or programmatic changes,
  * and triggers events when the range is changing or has been changed.
- * @param {Object} [options]   See description at Range.setOptions
- * @extends Controller
+ * @param {RootPanel} root      Root panel, used to subscribe to events
+ * @param {Panel} parent        Parent panel, used to attach to the DOM
+ * @param {Object} [options]    See description at Range.setOptions
  */
-function Range(options) {
+function Range(root, parent, options) {
   this.id = util.randomUUID();
   this.start = null; // Number
   this.end = null;   // Number
 
+  this.root = root;
+  this.parent = parent;
   this.options = options || {};
 
+  // drag listeners for dragging
+  this.root.on('dragstart', this._onDragStart.bind(this));
+  this.root.on('drag',      this._onDrag.bind(this));
+  this.root.on('dragend',   this._onDragEnd.bind(this));
+
+  // ignore dragging when holding
+  this.root.on('hold', this._onHold.bind(this));
+
+  // mouse wheel for zooming
+  this.root.on('mousewheel',      this._onMouseWheel.bind(this));
+  this.root.on('DOMMouseScroll',  this._onMouseWheel.bind(this)); // For FF
+
+  // pinch to zoom
+  this.root.on('touch', this._onTouch.bind(this));
+  this.root.on('pinch', this._onPinch.bind(this));
+
   this.setOptions(options);
 }
 
-// extend the Range prototype with an event emitter mixin
+// turn Range into an event emitter
 Emitter(Range.prototype);
 
 /**
@@ -49,59 +68,6 @@ function validateDirection (direction) {
   }
 }
 
-/**
- * Add listeners for mouse and touch events to the component
- * @param {Controller} controller
- * @param {Component} component  Should be a rootpanel
- * @param {String} event        Available events: 'move', 'zoom'
- * @param {String} direction    Available directions: 'horizontal', 'vertical'
- */
-Range.prototype.subscribe = function (controller, component, event, direction) {
-  var me = this;
-
-  if (event == 'move') {
-    // drag start listener
-    controller.on('dragstart', function (event) {
-      me._onDragStart(event, component);
-    });
-
-    // drag listener
-    controller.on('drag', function (event) {
-      me._onDrag(event, component, direction);
-    });
-
-    // drag end listener
-    controller.on('dragend', function (event) {
-      me._onDragEnd(event, component);
-    });
-
-    // ignore dragging when holding
-    controller.on('hold', function (event) {
-      me._onHold();
-    });
-  }
-  else if (event == 'zoom') {
-    // mouse wheel
-    function mousewheel (event) {
-      me._onMouseWheel(event, component, direction);
-    }
-    controller.on('mousewheel', mousewheel);
-    controller.on('DOMMouseScroll', mousewheel); // For FF
-
-    // pinch
-    controller.on('touch', function (event) {
-      me._onTouch(event);
-    });
-    controller.on('pinch', function (event) {
-      me._onPinch(event, component, direction);
-    });
-  }
-  else {
-    throw new TypeError('Unknown event "' + event + '". ' +
-        'Choose "move" or "zoom".');
-  }
-};
-
 /**
  * Set a new start and end range
  * @param {Number} [start]
@@ -111,8 +77,8 @@ Range.prototype.setRange = function(start, end) {
   var changed = this._applyRange(start, end);
   if (changed) {
     var params = {
-          start: this.start,
-          end: this.end
+      start: new Date(this.start),
+      end: new Date(this.end)
     };
     this.emit('rangechange', params);
     this.emit('rangechanged', params);
@@ -280,10 +246,9 @@ var touchParams = {};
 /**
  * Start dragging horizontally or vertically
  * @param {Event} event
- * @param {Object} component
  * @private
  */
-Range.prototype._onDragStart = function(event, component) {
+Range.prototype._onDragStart = function(event) {
   // refuse to drag when we where pinching to prevent the timeline make a jump
   // when releasing the fingers in opposite order from the touch screen
   if (touchParams.ignore) return;
@@ -293,7 +258,7 @@ Range.prototype._onDragStart = function(event, component) {
   touchParams.start = this.start;
   touchParams.end = this.end;
 
-  var frame = component.frame;
+  var frame = this.parent.frame;
   if (frame) {
     frame.style.cursor = 'move';
   }
@@ -302,11 +267,10 @@ Range.prototype._onDragStart = function(event, component) {
 /**
  * Perform dragging operating.
  * @param {Event} event
- * @param {Component} component
- * @param {String} direction    'horizontal' or 'vertical'
  * @private
  */
-Range.prototype._onDrag = function (event, component, direction) {
+Range.prototype._onDrag = function (event) {
+  var direction = this.options.direction;
   validateDirection(direction);
 
   // TODO: reckon with option movable
@@ -318,38 +282,37 @@ Range.prototype._onDrag = function (event, component, direction) {
 
   var delta = (direction == 'horizontal') ? event.gesture.deltaX : event.gesture.deltaY,
       interval = (touchParams.end - touchParams.start),
-      width = (direction == 'horizontal') ? component.width : component.height,
+      width = (direction == 'horizontal') ? this.parent.width : this.parent.height,
       diffRange = -delta / width * interval;
 
   this._applyRange(touchParams.start + diffRange, touchParams.end + diffRange);
 
   this.emit('rangechange', {
-    start: this.start,
-    end: this.end
+    start: new Date(this.start),
+    end:   new Date(this.end)
   });
 };
 
 /**
  * Stop dragging operating.
  * @param {event} event
- * @param {Component} component
  * @private
  */
-Range.prototype._onDragEnd = function (event, component) {
+Range.prototype._onDragEnd = function (event) {
   // refuse to drag when we where pinching to prevent the timeline make a jump
   // when releasing the fingers in opposite order from the touch screen
   if (touchParams.ignore) return;
 
   // TODO: reckon with option movable
 
-  if (component.frame) {
-    component.frame.style.cursor = 'auto';
+  if (this.parent.frame) {
+    this.parent.frame.style.cursor = 'auto';
   }
 
   // fire a rangechanged event
   this.emit('rangechanged', {
-    start: this.start,
-    end: this.end
+    start: new Date(this.start),
+    end:   new Date(this.end)
   });
 };
 
@@ -357,13 +320,9 @@ Range.prototype._onDragEnd = function (event, component) {
  * Event handler for mouse wheel event, used to zoom
  * Code from http://adomas.org/javascript-mouse-wheel/
  * @param {Event} event
- * @param {Component} component
- * @param {String} direction    'horizontal' or 'vertical'
  * @private
  */
-Range.prototype._onMouseWheel = function(event, component, direction) {
-  validateDirection(direction);
-
+Range.prototype._onMouseWheel = function(event) {
   // TODO: reckon with option zoomable
 
   // retrieve delta
@@ -394,8 +353,8 @@ Range.prototype._onMouseWheel = function(event, component, direction) {
 
     // calculate center, the date to zoom around
     var gesture = util.fakeGesture(this, event),
-        pointer = getPointer(gesture.center, component.frame),
-        pointerDate = this._pointerToDate(component, direction, pointer);
+        pointer = getPointer(gesture.center, this.parent.frame),
+        pointerDate = this._pointerToDate(pointer);
 
     this.zoom(scale, pointerDate);
   }
@@ -434,24 +393,23 @@ Range.prototype._onHold = function () {
 /**
  * Handle pinch event
  * @param {Event} event
- * @param {Component} component
- * @param {String} direction    'horizontal' or 'vertical'
  * @private
  */
-Range.prototype._onPinch = function (event, component, direction) {
+Range.prototype._onPinch = function (event) {
+  var direction = this.options.direction;
   touchParams.ignore = true;
 
   // TODO: reckon with option zoomable
 
   if (event.gesture.touches.length > 1) {
     if (!touchParams.center) {
-      touchParams.center = getPointer(event.gesture.center, component.frame);
+      touchParams.center = getPointer(event.gesture.center, this.parent.frame);
     }
 
     var scale = 1 / event.gesture.scale,
-        initDate = this._pointerToDate(component, direction, touchParams.center),
-        center = getPointer(event.gesture.center, component.frame),
-        date = this._pointerToDate(component, direction, center),
+        initDate = this._pointerToDate(touchParams.center),
+        center = getPointer(event.gesture.center, this.parent.frame),
+        date = this._pointerToDate(this.parent, center),
         delta = date - initDate; // TODO: utilize delta
 
     // calculate new start and end
@@ -465,21 +423,23 @@ Range.prototype._onPinch = function (event, component, direction) {
 
 /**
  * Helper function to calculate the center date for zooming
- * @param {Component} component
  * @param {{x: Number, y: Number}} pointer
- * @param {String} direction    'horizontal' or 'vertical'
  * @return {number} date
  * @private
  */
-Range.prototype._pointerToDate = function (component, direction, pointer) {
+Range.prototype._pointerToDate = function (pointer) {
   var conversion;
+  var direction = this.options.direction;
+
+  validateDirection(direction);
+
   if (direction == 'horizontal') {
-    var width = component.width;
+    var width = this.parent.width;
     conversion = this.conversion(width);
     return pointer.x / conversion.scale + conversion.offset;
   }
   else {
-    var height = component.height;
+    var height = this.parent.height;
     conversion = this.conversion(height);
     return pointer.y / conversion.scale + conversion.offset;
   }

data/vendor/assets/vis/timeline/Timeline.js

@@ -6,12 +6,24 @@
  * @constructor
  */
 function Timeline (container, items, options) {
+  // validate arguments
+  if (!container) throw new Error('No container element provided');
+
   var me = this;
   var now = moment().hours(0).minutes(0).seconds(0).milliseconds(0);
   this.options = {
     orientation: 'bottom',
+    direction: 'horizontal', // 'horizontal' or 'vertical'
     autoResize: true,
-    editable: false,
+    stack: true,
+
+    editable: {
+      updateTime: false,
+      updateGroup: false,
+      add: false,
+      remove: false
+    },
+
     selectable: true,
     snap: null, // will be specified after timeaxis is created
 
@@ -27,6 +39,14 @@ function Timeline (container, items, options) {
     showCurrentTime: false,
     showCustomTime: false,
 
+    type: 'box',
+    align: 'center',
+    margin: {
+      axis: 20,
+      item: 10
+    },
+    padding: 5,
+
     onAdd: function (item, callback) {
       callback(item);
     },
@@ -38,112 +58,205 @@ function Timeline (container, items, options) {
     },
     onRemove: function (item, callback) {
       callback(item);
-    }
-  };
+    },
 
-  // controller
-  this.controller = new Controller();
+    toScreen: me._toScreen.bind(me),
+    toTime: me._toTime.bind(me)
+  };
 
   // root panel
-  if (!container) {
-    throw new Error('No container element provided');
-  }
-  var rootOptions = Object.create(this.options);
-  rootOptions.height = function () {
-    // TODO: change to height
-    if (me.options.height) {
-      // fixed height
-      return me.options.height;
-    }
-    else {
-      // auto height
-      return (me.timeaxis.height + me.content.height) + 'px';
+  var rootOptions = util.extend(Object.create(this.options), {
+    height: function () {
+      if (me.options.height) {
+        // fixed height
+        return me.options.height;
+      }
+      else {
+        // auto height
+        // TODO: implement a css based solution to automatically have the right hight
+        return (me.timeAxis.height + me.contentPanel.height) + 'px';
+      }
     }
-  };
+  });
   this.rootPanel = new RootPanel(container, rootOptions);
-  this.controller.add(this.rootPanel);
 
   // single select (or unselect) when tapping an item
-  this.controller.on('tap',  this._onSelectItem.bind(this));
+  this.rootPanel.on('tap',  this._onSelectItem.bind(this));
 
   // multi select when holding mouse/touch, or on ctrl+click
-  this.controller.on('hold', this._onMultiSelectItem.bind(this));
+  this.rootPanel.on('hold', this._onMultiSelectItem.bind(this));
 
   // add item on doubletap
-  this.controller.on('doubletap', this._onAddItem.bind(this));
+  this.rootPanel.on('doubletap', this._onAddItem.bind(this));
 
-  // item panel
-  var itemOptions = Object.create(this.options);
-  itemOptions.left = function () {
-    return me.labelPanel.width;
-  };
-  itemOptions.width = function () {
-    return me.rootPanel.width - me.labelPanel.width;
-  };
-  itemOptions.top = null;
-  itemOptions.height = null;
-  this.itemPanel = new Panel(this.rootPanel, [], itemOptions);
-  this.controller.add(this.itemPanel);
-
-  // label panel
-  var labelOptions = Object.create(this.options);
-  labelOptions.top = null;
-  labelOptions.left = null;
-  labelOptions.height = null;
-  labelOptions.width = function () {
-    if (me.content && typeof me.content.getLabelsWidth === 'function') {
-      return me.content.getLabelsWidth();
-    }
-    else {
-      return 0;
+  // side panel
+  var sideOptions = util.extend(Object.create(this.options), {
+    top: function () {
+      return (sideOptions.orientation == 'top') ? '0' : '';
+    },
+    bottom: function () {
+      return (sideOptions.orientation == 'top') ? '' : '0';
+    },
+    left: '0',
+    right: null,
+    height: '100%',
+    width: function () {
+      if (me.itemSet) {
+        return me.itemSet.getLabelsWidth();
+      }
+      else {
+        return 0;
+      }
+    },
+    className: function () {
+      return 'side' + (me.groupsData ? '' : ' hidden');
     }
-  };
-  this.labelPanel = new Panel(this.rootPanel, [], labelOptions);
-  this.controller.add(this.labelPanel);
+  });
+  this.sidePanel = new Panel(sideOptions);
+  this.rootPanel.appendChild(this.sidePanel);
+
+  // main panel (contains time axis and itemsets)
+  var mainOptions = util.extend(Object.create(this.options), {
+    left: function () {
+      // we align left to enable a smooth resizing of the window
+      return me.sidePanel.width;
+    },
+    right: null,
+    height: '100%',
+    width: function () {
+      return me.rootPanel.width - me.sidePanel.width;
+    },
+    className: 'main'
+  });
+  this.mainPanel = new Panel(mainOptions);
+  this.rootPanel.appendChild(this.mainPanel);
 
   // range
+  // TODO: move range inside rootPanel?
   var rangeOptions = Object.create(this.options);
-  this.range = new Range(rangeOptions);
+  this.range = new Range(this.rootPanel, this.mainPanel, rangeOptions);
   this.range.setRange(
       now.clone().add('days', -3).valueOf(),
       now.clone().add('days', 4).valueOf()
   );
-
-  this.range.subscribe(this.controller, this.rootPanel, 'move', 'horizontal');
-  this.range.subscribe(this.controller, this.rootPanel, 'zoom', 'horizontal');
   this.range.on('rangechange', function (properties) {
-    var force = true;
-    me.controller.emit('rangechange', properties);
-    me.controller.emit('request-reflow', force);
+    me.rootPanel.repaint();
+    me.emit('rangechange', properties);
   });
   this.range.on('rangechanged', function (properties) {
-    var force = true;
-    me.controller.emit('rangechanged', properties);
-    me.controller.emit('request-reflow', force);
+    me.rootPanel.repaint();
+    me.emit('rangechanged', properties);
+  });
+
+  // panel with time axis
+  var timeAxisOptions = util.extend(Object.create(rootOptions), {
+    range: this.range,
+    left: null,
+    top: null,
+    width: null,
+    height: null
+  });
+  this.timeAxis = new TimeAxis(timeAxisOptions);
+  this.timeAxis.setRange(this.range);
+  this.options.snap = this.timeAxis.snap.bind(this.timeAxis);
+  this.mainPanel.appendChild(this.timeAxis);
+
+  // content panel (contains itemset(s))
+  var contentOptions = util.extend(Object.create(this.options), {
+    top: function () {
+      return (me.options.orientation == 'top') ? (me.timeAxis.height + 'px') : '';
+    },
+    bottom: function () {
+      return (me.options.orientation == 'top') ? '' : (me.timeAxis.height + 'px');
+    },
+    left: null,
+    right: null,
+    height: null,
+    width: null,
+    className: 'content'
+  });
+  this.contentPanel = new Panel(contentOptions);
+  this.mainPanel.appendChild(this.contentPanel);
+
+  // content panel (contains the vertical lines of box items)
+  var backgroundOptions = util.extend(Object.create(this.options), {
+    top: function () {
+      return (me.options.orientation == 'top') ? (me.timeAxis.height + 'px') : '';
+    },
+    bottom: function () {
+      return (me.options.orientation == 'top') ? '' : (me.timeAxis.height + 'px');
+    },
+    left: null,
+    right: null,
+    height: function () {
+      return me.contentPanel.height;
+    },
+    width: null,
+    className: 'background'
+  });
+  this.backgroundPanel = new Panel(backgroundOptions);
+  this.mainPanel.insertBefore(this.backgroundPanel, this.contentPanel);
+
+  // panel with axis holding the dots of item boxes
+  var axisPanelOptions = util.extend(Object.create(rootOptions), {
+    left: 0,
+    top: function () {
+      return (me.options.orientation == 'top') ? (me.timeAxis.height + 'px') : '';
+    },
+    bottom: function () {
+      return (me.options.orientation == 'top') ? '' : (me.timeAxis.height + 'px');
+    },
+    width: '100%',
+    height: 0,
+    className: 'axis'
   });
+  this.axisPanel = new Panel(axisPanelOptions);
+  this.mainPanel.appendChild(this.axisPanel);
 
-  // time axis
-  var timeaxisOptions = Object.create(rootOptions);
-  timeaxisOptions.range = this.range;
-  timeaxisOptions.left = null;
-  timeaxisOptions.top = null;
-  timeaxisOptions.width = '100%';
-  timeaxisOptions.height = null;
-  this.timeaxis = new TimeAxis(this.itemPanel, [], timeaxisOptions);
-  this.timeaxis.setRange(this.range);
-  this.controller.add(this.timeaxis);
-  this.options.snap = this.timeaxis.snap.bind(this.timeaxis);
+  // content panel (contains itemset(s))
+  var sideContentOptions = util.extend(Object.create(this.options), {
+    top: function () {
+      return (me.options.orientation == 'top') ? (me.timeAxis.height + 'px') : '';
+    },
+    bottom: function () {
+      return (me.options.orientation == 'top') ? '' : (me.timeAxis.height + 'px');
+    },
+    left: null,
+    right: null,
+    height: null,
+    width: null,
+    className: 'side-content'
+  });
+  this.sideContentPanel = new Panel(sideContentOptions);
+  this.sidePanel.appendChild(this.sideContentPanel);
 
   // current time bar
-  this.currenttime = new CurrentTime(this.timeaxis, [], rootOptions);
-  this.controller.add(this.currenttime);
+  // Note: time bar will be attached in this.setOptions when selected
+  this.currentTime = new CurrentTime(this.range, rootOptions);
 
   // custom time bar
-  this.customtime = new CustomTime(this.timeaxis, [], rootOptions);
-  this.controller.add(this.customtime);
+  // Note: time bar will be attached in this.setOptions when selected
+  this.customTime = new CustomTime(rootOptions);
+  this.customTime.on('timechange', function (time) {
+    me.emit('timechange', time);
+  });
+  this.customTime.on('timechanged', function (time) {
+    me.emit('timechanged', time);
+  });
 
-  // create groupset
-  this.setGroups(null);
+  // itemset containing items and groups
+  var itemOptions = util.extend(Object.create(this.options), {
+    left: null,
+    right: null,
+    top: null,
+    bottom: null,
+    width: null,
+    height: null
+  });
+  this.itemSet = new ItemSet(this.backgroundPanel, this.axisPanel, this.sideContentPanel, itemOptions);
+  this.itemSet.setRange(this.range);
+  this.itemSet.on('change', me.rootPanel.repaint.bind(me.rootPanel));
+  this.contentPanel.appendChild(this.itemSet);
 
   this.itemsData = null;      // DataSet
   this.groupsData = null;     // DataSet
@@ -153,30 +266,14 @@ function Timeline (container, items, options) {
     this.setOptions(options);
   }
 
-  // create itemset and groupset
+  // create itemset
   if (items) {
     this.setItems(items);
   }
 }
 
-/**
- * Add an event listener to the timeline
- * @param {String} event    Available events: select, rangechange, rangechanged,
- *                          timechange, timechanged
- * @param {function} callback
- */
-Timeline.prototype.on = function on (event, callback) {
-  this.controller.on(event, callback);
-};
-
-/**
- * Add an event listener from the timeline
- * @param {String} event
- * @param {function} callback
- */
-Timeline.prototype.off = function off (event, callback) {
-  this.controller.off(event, callback);
-};
+// turn Timeline into an event emitter
+Emitter(Timeline.prototype);
 
 /**
  * Set options
@@ -185,6 +282,17 @@ Timeline.prototype.off = function off (event, callback) {
 Timeline.prototype.setOptions = function (options) {
   util.extend(this.options, options);
 
+  if ('editable' in options) {
+    var isBoolean = typeof options.editable === 'boolean';
+
+    this.options.editable = {
+      updateTime:  isBoolean ? options.editable : (options.editable.updateTime || false),
+      updateGroup: isBoolean ? options.editable : (options.editable.updateGroup || false),
+      add:         isBoolean ? options.editable : (options.editable.add || false),
+      remove:      isBoolean ? options.editable : (options.editable.remove || false)
+    };
+  }
+
   // force update of range (apply new min/max etc.)
   // both start and end are optional
   this.range.setRange(options.start, options.end);
@@ -200,6 +308,9 @@ Timeline.prototype.setOptions = function (options) {
     }
   }
 
+  // force the itemSet to refresh: options like orientation and margins may be changed
+  this.itemSet.markDirty();
+
   // validate the callback functions
   var validateCallback = (function (fn) {
     if (!(this.options[fn] instanceof Function) || this.options[fn].length != 2) {
@@ -208,8 +319,39 @@ Timeline.prototype.setOptions = function (options) {
   }).bind(this);
   ['onAdd', 'onUpdate', 'onRemove', 'onMove'].forEach(validateCallback);
 
-  this.controller.reflow();
-  this.controller.repaint();
+  // add/remove the current time bar
+  if (this.options.showCurrentTime) {
+    if (!this.mainPanel.hasChild(this.currentTime)) {
+      this.mainPanel.appendChild(this.currentTime);
+      this.currentTime.start();
+    }
+  }
+  else {
+    if (this.mainPanel.hasChild(this.currentTime)) {
+      this.currentTime.stop();
+      this.mainPanel.removeChild(this.currentTime);
+    }
+  }
+
+  // add/remove the custom time bar
+  if (this.options.showCustomTime) {
+    if (!this.mainPanel.hasChild(this.customTime)) {
+      this.mainPanel.appendChild(this.customTime);
+    }
+  }
+  else {
+    if (this.mainPanel.hasChild(this.customTime)) {
+      this.mainPanel.removeChild(this.customTime);
+    }
+  }
+
+  // TODO: remove deprecation error one day (deprecated since version 0.8.0)
+  if (options && options.order) {
+    throw new Error('Option order is deprecated. There is no replacement for this feature.');
+  }
+
+  // repaint everything
+  this.rootPanel.repaint();
 };
 
 /**
@@ -217,11 +359,11 @@ Timeline.prototype.setOptions = function (options) {
  * @param {Date} time
  */
 Timeline.prototype.setCustomTime = function (time) {
-  if (!this.customtime) {
+  if (!this.customTime) {
     throw new Error('Cannot get custom time: Custom time bar is not enabled');
   }
 
-  this.customtime.setCustomTime(time);
+  this.customTime.setCustomTime(time);
 };
 
 /**
@@ -229,11 +371,11 @@ Timeline.prototype.setCustomTime = function (time) {
  * @return {Date} customTime
  */
 Timeline.prototype.getCustomTime = function() {
-  if (!this.customtime) {
+  if (!this.customTime) {
     throw new Error('Cannot get custom time: Custom time bar is not enabled');
   }
 
-  return this.customtime.getCustomTime();
+  return this.customTime.getCustomTime();
 };
 
 /**
@@ -248,52 +390,30 @@ Timeline.prototype.setItems = function(items) {
   if (!items) {
     newDataSet = null;
   }
-  else if (items instanceof DataSet) {
+  else if (items instanceof DataSet || items instanceof DataView) {
     newDataSet = items;
   }
-  if (!(items instanceof DataSet)) {
-    newDataSet = new DataSet({
+  else {
+    // turn an array into a dataset
+    newDataSet = new DataSet(items, {
       convert: {
         start: 'Date',
         end: 'Date'
       }
     });
-    newDataSet.add(items);
   }
 
   // set items
   this.itemsData = newDataSet;
-  this.content.setItems(newDataSet);
+  this.itemSet.setItems(newDataSet);
 
   if (initialLoad && (this.options.start == undefined || this.options.end == undefined)) {
-    // apply the data range as range
-    var dataRange = this.getItemRange();
-
-    // add 5% space on both sides
-    var start = dataRange.min;
-    var end = dataRange.max;
-    if (start != null && end != null) {
-      var interval = (end.valueOf() - start.valueOf());
-      if (interval <= 0) {
-        // prevent an empty interval
-        interval = 24 * 60 * 60 * 1000; // 1 day
-      }
-      start = new Date(start.valueOf() - interval * 0.05);
-      end = new Date(end.valueOf() + interval * 0.05);
-    }
+    this.fit();
 
-    // override specified start and/or end date
-    if (this.options.start != undefined) {
-      start = util.convert(this.options.start, 'Date');
-    }
-    if (this.options.end != undefined) {
-      end = util.convert(this.options.end, 'Date');
-    }
+    var start = (this.options.start != undefined) ? util.convert(this.options.start, 'Date') : null;
+    var end   = (this.options.end != undefined) ? util.convert(this.options.end, 'Date') : null;
 
-    // apply range if there is a min or max available
-    if (start != null || end != null) {
-      this.range.setRange(start, end);
-    }
+    this.setWindow(start, end);
   }
 };
 
@@ -301,77 +421,50 @@ Timeline.prototype.setItems = function(items) {
  * Set groups
  * @param {vis.DataSet | Array | google.visualization.DataTable} groups
  */
-Timeline.prototype.setGroups = function(groups) {
-  var me = this;
-  this.groupsData = groups;
-
-  // switch content type between ItemSet or GroupSet when needed
-  var Type = this.groupsData ? GroupSet : ItemSet;
-  if (!(this.content instanceof Type)) {
-    // remove old content set
-    if (this.content) {
-      this.content.hide();
-      if (this.content.setItems) {
-        this.content.setItems(); // disconnect from items
-      }
-      if (this.content.setGroups) {
-        this.content.setGroups(); // disconnect from groups
-      }
-      this.controller.remove(this.content);
-    }
+Timeline.prototype.setGroups = function setGroups(groups) {
+  // convert to type DataSet when needed
+  var newDataSet;
+  if (!groups) {
+    newDataSet = null;
+  }
+  else if (groups instanceof DataSet || groups instanceof DataView) {
+    newDataSet = groups;
+  }
+  else {
+    // turn an array into a dataset
+    newDataSet = new DataSet(groups);
+  }
 
-    // create new content set
-    var options = Object.create(this.options);
-    util.extend(options, {
-      top: function () {
-        if (me.options.orientation == 'top') {
-          return me.timeaxis.height;
-        }
-        else {
-          return me.itemPanel.height - me.timeaxis.height - me.content.height;
-        }
-      },
-      left: null,
-      width: '100%',
-      height: function () {
-        if (me.options.height) {
-          // fixed height
-          return me.itemPanel.height - me.timeaxis.height;
-        }
-        else {
-          // auto height
-          return null;
-        }
-      },
-      maxHeight: function () {
-        // TODO: change maxHeight to be a css string like '100%' or '300px'
-        if (me.options.maxHeight) {
-          if (!util.isNumber(me.options.maxHeight)) {
-            throw new TypeError('Number expected for property maxHeight');
-          }
-          return me.options.maxHeight - me.timeaxis.height;
-        }
-        else {
-          return null;
-        }
-      },
-      labelContainer: function () {
-        return me.labelPanel.getContainer();
-      }
-    });
+  this.groupsData = newDataSet;
+  this.itemSet.setGroups(newDataSet);
+};
 
-    this.content = new Type(this.itemPanel, [this.timeaxis], options);
-    if (this.content.setRange) {
-      this.content.setRange(this.range);
-    }
-    if (this.content.setItems) {
-      this.content.setItems(this.itemsData);
-    }
-    if (this.content.setGroups) {
-      this.content.setGroups(this.groupsData);
+/**
+ * Set Timeline window such that it fits all items
+ */
+Timeline.prototype.fit = function fit() {
+  // apply the data range as range
+  var dataRange = this.getItemRange();
+
+  // add 5% space on both sides
+  var start = dataRange.min;
+  var end = dataRange.max;
+  if (start != null && end != null) {
+    var interval = (end.valueOf() - start.valueOf());
+    if (interval <= 0) {
+      // prevent an empty interval
+      interval = 24 * 60 * 60 * 1000; // 1 day
     }
-    this.controller.add(this.content);
+    start = new Date(start.valueOf() - interval * 0.05);
+    end = new Date(end.valueOf() + interval * 0.05);
+  }
+
+  // skip range set if there is no start and end date
+  if (start === null && end === null) {
+    return;
   }
+
+  this.range.setRange(start, end);
 };
 
 /**
@@ -421,7 +514,7 @@ Timeline.prototype.getItemRange = function getItemRange() {
  *                      unselected.
  */
 Timeline.prototype.setSelection = function setSelection (ids) {
-  if (this.content) this.content.setSelection(ids);
+  this.itemSet.setSelection(ids);
 };
 
 /**
@@ -429,17 +522,30 @@ Timeline.prototype.setSelection = function setSelection (ids) {
  * @return {Array} ids  The ids of the selected items
  */
 Timeline.prototype.getSelection = function getSelection() {
-  return this.content ? this.content.getSelection() : [];
+  return this.itemSet.getSelection();
 };
 
 /**
  * Set the visible window. Both parameters are optional, you can change only
- * start or only end.
+ * start or only end. Syntax:
+ *
+ *     TimeLine.setWindow(start, end)
+ *     TimeLine.setWindow(range)
+ *
+ * Where start and end can be a Date, number, or string, and range is an
+ * object with properties start and end.
+ *
  * @param {Date | Number | String} [start] Start date of visible window
  * @param {Date | Number | String} [end]   End date of visible window
  */
 Timeline.prototype.setWindow = function setWindow(start, end) {
-  this.range.setRange(start, end);
+  if (arguments.length == 1) {
+    var range = arguments[0];
+    this.range.setRange(range.start, range.end);
+  }
+  else {
+    this.range.setRange(start, end);
+  }
 };
 
 /**
@@ -470,14 +576,20 @@ Timeline.prototype._onSelectItem = function (event) {
     return;
   }
 
-  var item = ItemSet.itemFromTarget(event);
+  var oldSelection = this.getSelection();
 
+  var item = ItemSet.itemFromTarget(event);
   var selection = item ? [item.id] : [];
   this.setSelection(selection);
 
-  this.controller.emit('select', {
-    items: this.getSelection()
-  });
+  var newSelection = this.getSelection();
+
+  // if selection is changed, emit a select event
+  if (!util.equalArray(oldSelection, newSelection)) {
+    this.emit('select', {
+      items: this.getSelection()
+    });
+  }
 
   event.stopPropagation();
 };
@@ -489,7 +601,7 @@ Timeline.prototype._onSelectItem = function (event) {
  */
 Timeline.prototype._onAddItem = function (event) {
   if (!this.options.selectable) return;
-  if (!this.options.editable) return;
+  if (!this.options.editable.add) return;
 
   var me = this,
       item = ItemSet.itemFromTarget(event);
@@ -507,17 +619,17 @@ Timeline.prototype._onAddItem = function (event) {
   }
   else {
     // add item
-    var xAbs = vis.util.getAbsoluteLeft(this.rootPanel.frame);
+    var xAbs = vis.util.getAbsoluteLeft(this.contentPanel.frame);
     var x = event.gesture.center.pageX - xAbs;
     var newItem = {
-      start: this.timeaxis.snap(this._toTime(x)),
+      start: this.timeAxis.snap(this._toTime(x)),
       content: 'new item'
     };
 
     var id = util.randomUUID();
     newItem[this.itemsData.fieldId] = id;
 
-    var group = GroupSet.groupFromTarget(event);
+    var group = ItemSet.groupFromTarget(event);
     if (group) {
       newItem.group = group.groupId;
     }
@@ -526,15 +638,7 @@ Timeline.prototype._onAddItem = function (event) {
     this.options.onAdd(newItem, function (item) {
       if (item) {
         me.itemsData.add(newItem);
-
-        // select the created item after it is repainted
-        me.controller.once('repaint', function () {
-          me.setSelection([id]);
-
-          me.controller.emit('select', {
-            items: me.getSelection()
-          });
-        }.bind(me));
+        // TODO: need to trigger a repaint?
       }
     });
   }
@@ -566,7 +670,7 @@ Timeline.prototype._onMultiSelectItem = function (event) {
     }
     this.setSelection(selection);
 
-    this.controller.emit('select', {
+    this.emit('select', {
       items: this.getSelection()
     });
 
@@ -581,7 +685,7 @@ Timeline.prototype._onMultiSelectItem = function (event) {
  * @private
  */
 Timeline.prototype._toTime = function _toTime(x) {
-  var conversion = this.range.conversion(this.content.width);
+  var conversion = this.range.conversion(this.mainPanel.width);
   return new Date(x / conversion.scale + conversion.offset);
 };
 
@@ -593,6 +697,6 @@ Timeline.prototype._toTime = function _toTime(x) {
  * @private
  */
 Timeline.prototype._toScreen = function _toScreen(time) {
-  var conversion = this.range.conversion(this.content.width);
+  var conversion = this.range.conversion(this.mainPanel.width);
   return (time.valueOf() - conversion.offset) * conversion.scale;
 };