flink-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From trohrm...@apache.org
Subject [17/82] [abbrv] incubator-flink git commit: Moved WebInfoServer and WebInterfaceServer resources into resource folders of respective projects. Jetty uses the jar as base directory.
Date Thu, 18 Dec 2014 18:45:13 GMT
http://git-wip-us.apache.org/repos/asf/incubator-flink/blob/76d603c0/flink-runtime/resources/web-docs-infoserver/js/timeline.js
----------------------------------------------------------------------
diff --git a/flink-runtime/resources/web-docs-infoserver/js/timeline.js b/flink-runtime/resources/web-docs-infoserver/js/timeline.js
deleted file mode 100644
index f4c7997..0000000
--- a/flink-runtime/resources/web-docs-infoserver/js/timeline.js
+++ /dev/null
@@ -1,6444 +0,0 @@
-/**
- * @file timeline.js
- *
- * @brief
- * The Timeline is an interactive visualization chart to visualize events in
- * time, having a start and end date.
- * You can freely move and zoom in the timeline by dragging
- * and scrolling in the Timeline. Items are optionally dragable. The time
- * scale on the axis is adjusted automatically, and supports scales ranging
- * from milliseconds to years.
- *
- * Timeline is part of the CHAP Links library.
- *
- * Timeline is tested on Firefox 3.6, Safari 5.0, Chrome 6.0, Opera 10.6, and
- * Internet Explorer 6+.
- *
- * @license
- * Licensed under the Apache License, Version 2.0 (the "License"); you may not
- * use this file except in compliance with the License. You may obtain a copy
- * of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations under
- * the License.
- *
- * Copyright (c) 2011-2013 Almende B.V.
- *
- * @author     Jos de Jong, <jos@almende.org>
- * @date    2013-08-20
- * @version 2.5.0
- */
-
-/*
- * i18n mods by github user iktuz (https://gist.github.com/iktuz/3749287/)
- * added to v2.4.1 with da_DK language by @bjarkebech
- */
-
-/*
- * TODO
- *
- * Add zooming with pinching on Android
- * 
- * Bug: when an item contains a javascript onclick or a link, this does not work
- *      when the item is not selected (when the item is being selected,
- *      it is redrawn, which cancels any onclick or link action)
- * Bug: when an item contains an image without size, or a css max-width, it is not sized correctly
- * Bug: neglect items when they have no valid start/end, instead of throwing an error
- * Bug: Pinching on ipad does not work very well, sometimes the page will zoom when pinching vertically
- * Bug: cannot set max width for an item, like div.timeline-event-content {white-space: normal; max-width: 100px;}
- * Bug on IE in Quirks mode. When you have groups, and delete an item, the groups become invisible
- */
-
-/**
- * Declare a unique namespace for CHAP's Common Hybrid Visualisation Library,
- * "links"
- */
-if (typeof links === 'undefined') {
-    links = {};
-    // important: do not use var, as "var links = {};" will overwrite 
-    //            the existing links variable value with undefined in IE8, IE7.  
-}
-
-
-/**
- * Ensure the variable google exists
- */
-if (typeof google === 'undefined') {
-    google = undefined;
-    // important: do not use var, as "var google = undefined;" will overwrite 
-    //            the existing google variable value with undefined in IE8, IE7.
-}
-
-
-
-// Internet Explorer 8 and older does not support Array.indexOf,
-// so we define it here in that case
-// http://soledadpenades.com/2007/05/17/arrayindexof-in-internet-explorer/
-if(!Array.prototype.indexOf) {
-    Array.prototype.indexOf = function(obj){
-        for(var i = 0; i < this.length; i++){
-            if(this[i] == obj){
-                return i;
-            }
-        }
-        return -1;
-    }
-}
-
-// Internet Explorer 8 and older does not support Array.forEach,
-// so we define it here in that case
-// https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach
-if (!Array.prototype.forEach) {
-    Array.prototype.forEach = function(fn, scope) {
-        for(var i = 0, len = this.length; i < len; ++i) {
-            fn.call(scope || this, this[i], i, this);
-        }
-    }
-}
-
-
-/**
- * @constructor links.Timeline
- * The timeline is a visualization chart to visualize events in time.
- *
- * The timeline is developed in javascript as a Google Visualization Chart.
- *
- * @param {Element} container   The DOM element in which the Timeline will
- *                                  be created. Normally a div element.
- */
-links.Timeline = function(container) {
-    if (!container) {
-        // this call was probably only for inheritance, no constructor-code is required
-        return;
-    }
-
-    // create variables and set default values
-    this.dom = {};
-    this.conversion = {};
-    this.eventParams = {}; // stores parameters for mouse events
-    this.groups = [];
-    this.groupIndexes = {};
-    this.items = [];
-    this.renderQueue = {
-        show: [],   // Items made visible but not yet added to DOM
-        hide: [],   // Items currently visible but not yet removed from DOM
-        update: []  // Items with changed data but not yet adjusted DOM
-    };
-    this.renderedItems = [];  // Items currently rendered in the DOM
-    this.clusterGenerator = new links.Timeline.ClusterGenerator(this);
-    this.currentClusters = [];
-    this.selection = undefined; // stores index and item which is currently selected
-
-    this.listeners = {}; // event listener callbacks
-
-    // Initialize sizes. 
-    // Needed for IE (which gives an error when you try to set an undefined
-    // value in a style)
-    this.size = {
-        'actualHeight': 0,
-        'axis': {
-            'characterMajorHeight': 0,
-            'characterMajorWidth': 0,
-            'characterMinorHeight': 0,
-            'characterMinorWidth': 0,
-            'height': 0,
-            'labelMajorTop': 0,
-            'labelMinorTop': 0,
-            'line': 0,
-            'lineMajorWidth': 0,
-            'lineMinorHeight': 0,
-            'lineMinorTop': 0,
-            'lineMinorWidth': 0,
-            'top': 0
-        },
-        'contentHeight': 0,
-        'contentLeft': 0,
-        'contentWidth': 0,
-        'frameHeight': 0,
-        'frameWidth': 0,
-        'groupsLeft': 0,
-        'groupsWidth': 0,
-        'items': {
-            'top': 0
-        }
-    };
-
-    this.dom.container = container;
-
-    this.options = {
-        'width': "100%",
-        'height': "auto",
-        'minHeight': 0,        // minimal height in pixels
-        'autoHeight': true,
-
-        'eventMargin': 10,     // minimal margin between events
-        'eventMarginAxis': 20, // minimal margin between events and the axis
-        'dragAreaWidth': 10,   // pixels
-
-        'min': undefined,
-        'max': undefined,
-        'zoomMin': 10,     // milliseconds
-        'zoomMax': 1000 * 60 * 60 * 24 * 365 * 10000, // milliseconds
-
-        'moveable': true,
-        'zoomable': true,
-        'selectable': true,
-        'unselectable': true,
-        'editable': false,
-        'snapEvents': true,
-        'groupChangeable': true,
-
-        'showCurrentTime': true, // show a red bar displaying the current time
-        'showCustomTime': false, // show a blue, draggable bar displaying a custom time    
-        'showMajorLabels': true,
-        'showMinorLabels': true,
-        'showNavigation': false,
-        'showButtonNew': false,
-        'groupsOnRight': false,
-        'axisOnTop': false,
-        'stackEvents': true,
-        'animate': true,
-        'animateZoom': true,
-        'cluster': false,
-        'style': 'box',
-        'customStackOrder': false, //a function(a,b) for determining stackorder amongst a group of items. Essentially a comparator, -ve value for "a before b" and vice versa
-        
-        // i18n: Timeline only has built-in English text per default. Include timeline-locales.js to support more localized text.
-        'locale': 'en',
-        'MONTHS': new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"),
-        'MONTHS_SHORT': new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"),
-        'DAYS': new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"),
-        'DAYS_SHORT': new Array("Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"),
-        'ZOOM_IN': "Zoom in",
-        'ZOOM_OUT': "Zoom out",
-        'MOVE_LEFT': "Move left",
-        'MOVE_RIGHT': "Move right",
-        'NEW': "New",
-        'CREATE_NEW_EVENT': "Create new event"
-    };
-
-    this.clientTimeOffset = 0;    // difference between client time and the time
-    // set via Timeline.setCurrentTime()
-    var dom = this.dom;
-
-    // remove all elements from the container element.
-    while (dom.container.hasChildNodes()) {
-        dom.container.removeChild(dom.container.firstChild);
-    }
-
-    // create a step for drawing the axis
-    this.step = new links.Timeline.StepDate();
-
-    // add standard item types
-    this.itemTypes = {
-        box:   links.Timeline.ItemBox,
-        range: links.Timeline.ItemRange,
-        dot:   links.Timeline.ItemDot
-    };
-
-    // initialize data
-    this.data = [];
-    this.firstDraw = true;
-
-    // date interval must be initialized 
-    this.setVisibleChartRange(undefined, undefined, false);
-
-    // render for the first time
-    this.render();
-
-    // fire the ready event
-    var me = this;
-    setTimeout(function () {
-        me.trigger('ready');
-    }, 0);
-};
-
-
-/**
- * Main drawing logic. This is the function that needs to be called
- * in the html page, to draw the timeline.
- *
- * A data table with the events must be provided, and an options table.
- *
- * @param {google.visualization.DataTable}      data
- *                                 The data containing the events for the timeline.
- *                                 Object DataTable is defined in
- *                                 google.visualization.DataTable
- * @param {Object} options         A name/value map containing settings for the
- *                                 timeline. Optional.
- */
-links.Timeline.prototype.draw = function(data, options) {
-    this.setOptions(options);
-    
-    if (this.options.selectable) {
-        links.Timeline.addClassName(this.dom.frame, "timeline-selectable");
-    }
-
-    // read the data
-    this.setData(data);
-
-    // set timer range. this will also redraw the timeline
-    if (options && (options.start || options.end)) {
-        this.setVisibleChartRange(options.start, options.end);
-    }
-    else if (this.firstDraw) {
-        this.setVisibleChartRangeAuto();
-    }
-
-    this.firstDraw = false;
-};
-
-
-/**
- * Set options for the timeline.
- * Timeline must be redrawn afterwards
- * @param {Object} options A name/value map containing settings for the
- *                                 timeline. Optional.
- */
-links.Timeline.prototype.setOptions = function(options) {
-    if (options) {
-        // retrieve parameter values
-        for (var i in options) {
-            if (options.hasOwnProperty(i)) {
-                this.options[i] = options[i];
-            }
-        }
-        
-        // prepare i18n dependent on set locale
-        if (typeof links.locales !== 'undefined' && this.options.locale !== 'en') {
-            var localeOpts = links.locales[this.options.locale];
-            if(localeOpts) {
-                for (var l in localeOpts) {
-                    if (localeOpts.hasOwnProperty(l)) {
-                        this.options[l] = localeOpts[l];
-                    }
-                }
-            }
-        }
-
-        // check for deprecated options
-        if (options.showButtonAdd != undefined) {
-            this.options.showButtonNew = options.showButtonAdd;
-            console.log('WARNING: Option showButtonAdd is deprecated. Use showButtonNew instead');
-        }
-        if (options.intervalMin != undefined) {
-            this.options.zoomMin = options.intervalMin;
-            console.log('WARNING: Option intervalMin is deprecated. Use zoomMin instead');
-        }
-        if (options.intervalMax != undefined) {
-            this.options.zoomMax = options.intervalMax;
-            console.log('WARNING: Option intervalMax is deprecated. Use zoomMax instead');
-        }
-
-        if (options.scale && options.step) {
-            this.step.setScale(options.scale, options.step);
-        }
-    }
-
-    // validate options
-    this.options.autoHeight = (this.options.height === "auto");
-};
-
-/**
- * Add new type of items
- * @param {String} typeName  Name of new type
- * @param {links.Timeline.Item} typeFactory Constructor of items
- */
-links.Timeline.prototype.addItemType = function (typeName, typeFactory) {
-    this.itemTypes[typeName] = typeFactory;
-};
-
-/**
- * Retrieve a map with the column indexes of the columns by column name.
- * For example, the method returns the map
- *     {
- *         start: 0,
- *         end: 1,
- *         content: 2,
- *         group: undefined,
- *         className: undefined
- *         editable: undefined
- *         type: undefined
- *     }
- * @param {google.visualization.DataTable} dataTable
- * @type {Object} map
- */
-links.Timeline.mapColumnIds = function (dataTable) {
-    var cols = {},
-        colCount = dataTable.getNumberOfColumns(),
-        allUndefined = true;
-
-    // loop over the columns, and map the column id's to the column indexes
-    for (var col = 0; col < colCount; col++) {
-        var id = dataTable.getColumnId(col) || dataTable.getColumnLabel(col);
-        cols[id] = col;
-        if (id == 'start' || id == 'end' || id == 'content' || id == 'group' ||
-            id == 'className' || id == 'editable' || id == 'type') {
-            allUndefined = false;
-        }
-    }
-
-    // if no labels or ids are defined, use the default mapping
-    // for start, end, content, group, className, editable, type
-    if (allUndefined) {
-        cols.start = 0;
-        cols.end = 1;
-        cols.content = 2;
-        if (colCount >= 3) {cols.group = 3}
-        if (colCount >= 4) {cols.className = 4}
-        if (colCount >= 5) {cols.editable = 5}
-        if (colCount >= 6) {cols.type = 6}
-    }
-
-    return cols;
-};
-
-/**
- * Set data for the timeline
- * @param {google.visualization.DataTable | Array} data
- */
-links.Timeline.prototype.setData = function(data) {
-    // unselect any previously selected item
-    this.unselectItem();
-
-    if (!data) {
-        data = [];
-    }
-
-    // clear all data
-    this.stackCancelAnimation();
-    this.clearItems();
-    this.data = data;
-    var items = this.items;
-    this.deleteGroups();
-
-    if (google && google.visualization &&
-        data instanceof google.visualization.DataTable) {
-        // map the datatable columns
-        var cols = links.Timeline.mapColumnIds(data);
-
-        // read DataTable
-        for (var row = 0, rows = data.getNumberOfRows(); row < rows; row++) {
-            items.push(this.createItem({
-                'start':     ((cols.start != undefined)     ? data.getValue(row, cols.start)     : undefined),
-                'end':       ((cols.end != undefined)       ? data.getValue(row, cols.end)       : undefined),
-                'content':   ((cols.content != undefined)   ? data.getValue(row, cols.content)   : undefined),
-                'group':     ((cols.group != undefined)     ? data.getValue(row, cols.group)     : undefined),
-                'className': ((cols.className != undefined) ? data.getValue(row, cols.className) : undefined),
-                'editable':  ((cols.editable != undefined)  ? data.getValue(row, cols.editable)  : undefined),
-                'type':      ((cols.editable != undefined)  ? data.getValue(row, cols.type)      : undefined)
-            }));
-        }
-    }
-    else if (links.Timeline.isArray(data)) {
-        // read JSON array
-        for (var row = 0, rows = data.length; row < rows; row++) {
-            var itemData = data[row];
-            var item = this.createItem(itemData);
-            items.push(item);
-        }
-    }
-    else {
-        throw "Unknown data type. DataTable or Array expected.";
-    }
-
-    // prepare data for clustering, by filtering and sorting by type
-    if (this.options.cluster) {
-        this.clusterGenerator.setData(this.items);
-    }
-
-    this.render({
-        animate: false
-    });
-};
-
-/**
- * Return the original data table.
- * @return {google.visualization.DataTable | Array} data
- */
-links.Timeline.prototype.getData = function  () {
-    return this.data;
-};
-
-
-/**
- * Update the original data with changed start, end or group.
- *
- * @param {Number} index
- * @param {Object} values   An object containing some of the following parameters:
- *                          {Date} start,
- *                          {Date} end,
- *                          {String} content,
- *                          {String} group
- */
-links.Timeline.prototype.updateData = function  (index, values) {
-    var data = this.data,
-        prop;
-
-    if (google && google.visualization &&
-        data instanceof google.visualization.DataTable) {
-        // update the original google DataTable
-        var missingRows = (index + 1) - data.getNumberOfRows();
-        if (missingRows > 0) {
-            data.addRows(missingRows);
-        }
-
-        // map the column id's by name
-        var cols = links.Timeline.mapColumnIds(data);
-
-        // merge all fields from the provided data into the current data
-        for (prop in values) {
-            if (values.hasOwnProperty(prop)) {
-                var col = cols[prop];
-                if (col == undefined) {
-                    // create new column
-                    var value = values[prop];
-                    var valueType = 'string';
-                    if (typeof(value) == 'number')       {valueType = 'number';}
-                    else if (typeof(value) == 'boolean') {valueType = 'boolean';}
-                    else if (value instanceof Date)      {valueType = 'datetime';}
-                    col = data.addColumn(valueType, prop);
-                }
-                data.setValue(index, col, values[prop]);
-
-                // TODO: correctly serialize the start and end Date to the desired type (Date, String, or Number)
-            }
-        }
-    }
-    else if (links.Timeline.isArray(data)) {
-        // update the original JSON table
-        var row = data[index];
-        if (row == undefined) {
-            row = {};
-            data[index] = row;
-        }
-
-        // merge all fields from the provided data into the current data
-        for (prop in values) {
-            if (values.hasOwnProperty(prop)) {
-                row[prop] = values[prop];
-
-                // TODO: correctly serialize the start and end Date to the desired type (Date, String, or Number)
-            }
-        }
-    }
-    else {
-        throw "Cannot update data, unknown type of data";
-    }
-};
-
-/**
- * Find the item index from a given HTML element
- * If no item index is found, undefined is returned
- * @param {Element} element
- * @return {Number | undefined} index
- */
-links.Timeline.prototype.getItemIndex = function(element) {
-    var e = element,
-        dom = this.dom,
-        frame = dom.items.frame,
-        items = this.items,
-        index = undefined;
-
-    // try to find the frame where the items are located in
-    while (e.parentNode && e.parentNode !== frame) {
-        e = e.parentNode;
-    }
-
-    if (e.parentNode === frame) {
-        // yes! we have found the parent element of all items
-        // retrieve its id from the array with items
-        for (var i = 0, iMax = items.length; i < iMax; i++) {
-            if (items[i].dom === e) {
-                index = i;
-                break;
-            }
-        }
-    }
-
-    return index;
-};
-
-/**
- * Set a new size for the timeline
- * @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%")
- */
-links.Timeline.prototype.setSize = function(width, height) {
-    if (width) {
-        this.options.width = width;
-        this.dom.frame.style.width = width;
-    }
-    if (height) {
-        this.options.height = height;
-        this.options.autoHeight = (this.options.height === "auto");
-        if (height !==  "auto" ) {
-            this.dom.frame.style.height = height;
-        }
-    }
-
-    this.render({
-        animate: false
-    });
-};
-
-
-/**
- * Set a new value for the visible range int the timeline.
- * Set start undefined to include everything from the earliest date to end.
- * Set end undefined to include everything from start to the last date.
- * Example usage:
- *    myTimeline.setVisibleChartRange(new Date("2010-08-22"),
- *                                    new Date("2010-09-13"));
- * @param {Date}   start     The start date for the timeline. optional
- * @param {Date}   end       The end date for the timeline. optional
- * @param {boolean} redraw   Optional. If true (default) the Timeline is
- *                           directly redrawn
- */
-links.Timeline.prototype.setVisibleChartRange = function(start, end, redraw) {
-    var range = {};
-    if (!start || !end) {
-        // retrieve the date range of the items
-        range = this.getDataRange(true);
-    }
-
-    if (!start) {
-        if (end) {
-            if (range.min && range.min.valueOf() < end.valueOf()) {
-                // start of the data
-                start = range.min;
-            }
-            else {
-                // 7 days before the end
-                start = new Date(end.valueOf());
-                start.setDate(start.getDate() - 7);
-            }
-        }
-        else {
-            // default of 3 days ago
-            start = new Date();
-            start.setDate(start.getDate() - 3);
-        }
-    }
-
-    if (!end) {
-        if (range.max) {
-            // end of the data
-            end = range.max;
-        }
-        else {
-            // 7 days after start
-            end = new Date(start.valueOf());
-            end.setDate(end.getDate() + 7);
-        }
-    }
-
-    // prevent start Date <= end Date
-    if (end <= start) {
-        end = new Date(start.valueOf());
-        end.setDate(end.getDate() + 7);
-    }
-
-    // limit to the allowed range (don't let this do by applyRange,
-    // because that method will try to maintain the interval (end-start)
-    var min = this.options.min ? this.options.min : undefined; // date
-    if (min != undefined && start.valueOf() < min.valueOf()) {
-        start = new Date(min.valueOf()); // date
-    }
-    var max = this.options.max ? this.options.max : undefined; // date
-    if (max != undefined && end.valueOf() > max.valueOf()) {
-        end = new Date(max.valueOf()); // date
-    }
-
-    this.applyRange(start, end);
-
-    if (redraw == undefined || redraw == true) {
-        this.render({
-            animate: false
-        });  // TODO: optimize, no reflow needed
-    }
-    else {
-        this.recalcConversion();
-    }
-};
-
-
-/**
- * Change the visible chart range such that all items become visible
- */
-links.Timeline.prototype.setVisibleChartRangeAuto = function() {
-    var range = this.getDataRange(true);
-    this.setVisibleChartRange(range.min, range.max);
-};
-
-/**
- * Adjust the visible range such that the current time is located in the center
- * of the timeline
- */
-links.Timeline.prototype.setVisibleChartRangeNow = function() {
-    var now = new Date();
-
-    var diff = (this.end.valueOf() - this.start.valueOf());
-
-    var startNew = new Date(now.valueOf() - diff/2);
-    var endNew = new Date(startNew.valueOf() + diff);
-    this.setVisibleChartRange(startNew, endNew);
-};
-
-
-/**
- * Retrieve the current visible range in the timeline.
- * @return {Object} An object with start and end properties
- */
-links.Timeline.prototype.getVisibleChartRange = function() {
-    return {
-        'start': new Date(this.start.valueOf()),
-        'end': new Date(this.end.valueOf())
-    };
-};
-
-/**
- * Get the date range of the items.
- * @param {boolean} [withMargin]  If true, 5% of whitespace is added to the
- *                                left and right of the range. Default is false.
- * @return {Object} range    An object with parameters min and max.
- *                           - {Date} min is the lowest start date of the items
- *                           - {Date} max is the highest start or end date of the items
- *                           If no data is available, the values of min and max
- *                           will be undefined
- */
-links.Timeline.prototype.getDataRange = function (withMargin) {
-    var items = this.items,
-        min = undefined, // number
-        max = undefined; // number
-
-    if (items) {
-        for (var i = 0, iMax = items.length; i < iMax; i++) {
-            var item = items[i],
-                start = item.start != undefined ? item.start.valueOf() : undefined,
-                end   = item.end != undefined   ? item.end.valueOf() : start;
-
-            if (start != undefined) {
-                min = (min != undefined) ? Math.min(min.valueOf(), start.valueOf()) : start;
-            }
-
-            if (end != undefined) {
-                max = (max != undefined) ? Math.max(max.valueOf(), end.valueOf()) : end;
-            }
-        }
-    }
-
-    if (min && max && withMargin) {
-        // zoom out 5% such that you have a little white space on the left and right
-        var diff = (max - min);
-        min = min - diff * 0.05;
-        max = max + diff * 0.05;
-    }
-
-    return {
-        'min': min != undefined ? new Date(min) : undefined,
-        'max': max != undefined ? new Date(max) : undefined
-    };
-};
-
-/**
- * Re-render (reflow and repaint) all components of the Timeline: frame, axis,
- * items, ...
- * @param {Object} [options]  Available options:
- *                            {boolean} renderTimesLeft   Number of times the
- *                                                        render may be repeated
- *                                                        5 times by default.
- *                            {boolean} animate           takes options.animate
- *                                                        as default value
- */
-links.Timeline.prototype.render = function(options) {
-    var frameResized = this.reflowFrame();
-    var axisResized = this.reflowAxis();
-    var groupsResized = this.reflowGroups();
-    var itemsResized = this.reflowItems();
-    var resized = (frameResized || axisResized || groupsResized || itemsResized);
-
-    // TODO: only stackEvents/filterItems when resized or changed. (gives a bootstrap issue).
-    // if (resized) {
-    var animate = this.options.animate;
-    if (options && options.animate != undefined) {
-        animate = options.animate;
-    }
-
-    this.recalcConversion();
-    this.clusterItems();
-    this.filterItems();
-    this.stackItems(animate);
-
-    this.recalcItems();
-
-    // TODO: only repaint when resized or when filterItems or stackItems gave a change?
-    var needsReflow = this.repaint();
-
-    // re-render once when needed (prevent endless re-render loop)
-    if (needsReflow) {
-        var renderTimesLeft = options ? options.renderTimesLeft : undefined;
-        if (renderTimesLeft == undefined) {
-            renderTimesLeft = 5;
-        }
-        if (renderTimesLeft > 0) {
-            this.render({
-                'animate': options ? options.animate: undefined,
-                'renderTimesLeft': (renderTimesLeft - 1)
-            });
-        }
-    }
-};
-
-/**
- * Repaint all components of the Timeline
- * @return {boolean} needsReflow   Returns true if the DOM is changed such that
- *                                 a reflow is needed.
- */
-links.Timeline.prototype.repaint = function() {
-    var frameNeedsReflow = this.repaintFrame();
-    var axisNeedsReflow  = this.repaintAxis();
-    var groupsNeedsReflow  = this.repaintGroups();
-    var itemsNeedsReflow = this.repaintItems();
-    this.repaintCurrentTime();
-    this.repaintCustomTime();
-
-    return (frameNeedsReflow || axisNeedsReflow || groupsNeedsReflow || itemsNeedsReflow);
-};
-
-/**
- * Reflow the timeline frame
- * @return {boolean} resized    Returns true if any of the frame elements
- *                              have been resized.
- */
-links.Timeline.prototype.reflowFrame = function() {
-    var dom = this.dom,
-        options = this.options,
-        size = this.size,
-        resized = false;
-
-    // Note: IE7 has issues with giving frame.clientWidth, therefore I use offsetWidth instead
-    var frameWidth  = dom.frame ? dom.frame.offsetWidth : 0,
-        frameHeight = dom.frame ? dom.frame.clientHeight : 0;
-
-    resized = resized || (size.frameWidth !== frameWidth);
-    resized = resized || (size.frameHeight !== frameHeight);
-    size.frameWidth = frameWidth;
-    size.frameHeight = frameHeight;
-
-    return resized;
-};
-
-/**
- * repaint the Timeline frame
- * @return {boolean} needsReflow   Returns true if the DOM is changed such that
- *                                 a reflow is needed.
- */
-links.Timeline.prototype.repaintFrame = function() {
-    var needsReflow = false,
-        dom = this.dom,
-        options = this.options,
-        size = this.size;
-
-    // main frame
-    if (!dom.frame) {
-        dom.frame = document.createElement("DIV");
-        dom.frame.className = "timeline-frame ui-widget ui-widget-content ui-corner-all";
-        dom.frame.style.position = "relative";
-        dom.frame.style.overflow = "hidden";
-        dom.container.appendChild(dom.frame);
-        needsReflow = true;
-    }
-
-    var height = options.autoHeight ?
-        (size.actualHeight + "px") :
-        (options.height || "100%");
-    var width  = options.width || "100%";
-    needsReflow = needsReflow || (dom.frame.style.height != height);
-    needsReflow = needsReflow || (dom.frame.style.width != width);
-    dom.frame.style.height = height;
-    dom.frame.style.width = width;
-
-    // contents
-    if (!dom.content) {
-        // create content box where the axis and items will be created
-        dom.content = document.createElement("DIV");
-        dom.content.style.position = "relative";
-        dom.content.style.overflow = "hidden";
-        dom.frame.appendChild(dom.content);
-
-        var timelines = document.createElement("DIV");
-        timelines.style.position = "absolute";
-        timelines.style.left = "0px";
-        timelines.style.top = "0px";
-        timelines.style.height = "100%";
-        timelines.style.width = "0px";
-        dom.content.appendChild(timelines);
-        dom.contentTimelines = timelines;
-
-        var params = this.eventParams,
-            me = this;
-        if (!params.onMouseDown) {
-            params.onMouseDown = function (event) {me.onMouseDown(event);};
-            links.Timeline.addEventListener(dom.content, "mousedown", params.onMouseDown);
-        }
-        if (!params.onTouchStart) {
-            params.onTouchStart = function (event) {me.onTouchStart(event);};
-            links.Timeline.addEventListener(dom.content, "touchstart", params.onTouchStart);
-        }
-        if (!params.onMouseWheel) {
-            params.onMouseWheel = function (event) {me.onMouseWheel(event);};
-            links.Timeline.addEventListener(dom.content, "mousewheel", params.onMouseWheel);
-        }
-        if (!params.onDblClick) {
-            params.onDblClick = function (event) {me.onDblClick(event);};
-            links.Timeline.addEventListener(dom.content, "dblclick", params.onDblClick);
-        }
-
-        needsReflow = true;
-    }
-    dom.content.style.left = size.contentLeft + "px";
-    dom.content.style.top = "0px";
-    dom.content.style.width = size.contentWidth + "px";
-    dom.content.style.height = size.frameHeight + "px";
-
-    this.repaintNavigation();
-
-    return needsReflow;
-};
-
-/**
- * Reflow the timeline axis. Calculate its height, width, positioning, etc...
- * @return {boolean} resized    returns true if the axis is resized
- */
-links.Timeline.prototype.reflowAxis = function() {
-    var resized = false,
-        dom = this.dom,
-        options = this.options,
-        size = this.size,
-        axisDom = dom.axis;
-
-    var characterMinorWidth  = (axisDom && axisDom.characterMinor) ? axisDom.characterMinor.clientWidth : 0,
-        characterMinorHeight = (axisDom && axisDom.characterMinor) ? axisDom.characterMinor.clientHeight : 0,
-        characterMajorWidth  = (axisDom && axisDom.characterMajor) ? axisDom.characterMajor.clientWidth : 0,
-        characterMajorHeight = (axisDom && axisDom.characterMajor) ? axisDom.characterMajor.clientHeight : 0,
-        axisHeight = (options.showMinorLabels ? characterMinorHeight : 0) +
-            (options.showMajorLabels ? characterMajorHeight : 0);
-
-    var axisTop  = options.axisOnTop ? 0 : size.frameHeight - axisHeight,
-        axisLine = options.axisOnTop ? axisHeight : axisTop;
-
-    resized = resized || (size.axis.top !== axisTop);
-    resized = resized || (size.axis.line !== axisLine);
-    resized = resized || (size.axis.height !== axisHeight);
-    size.axis.top = axisTop;
-    size.axis.line = axisLine;
-    size.axis.height = axisHeight;
-    size.axis.labelMajorTop = options.axisOnTop ? 0 : axisLine +
-        (options.showMinorLabels ? characterMinorHeight : 0);
-    size.axis.labelMinorTop = options.axisOnTop ?
-        (options.showMajorLabels ? characterMajorHeight : 0) :
-        axisLine;
-    size.axis.lineMinorTop = options.axisOnTop ? size.axis.labelMinorTop : 0;
-    size.axis.lineMinorHeight = options.showMajorLabels ?
-        size.frameHeight - characterMajorHeight:
-        size.frameHeight;
-    if (axisDom && axisDom.minorLines && axisDom.minorLines.length) {
-        size.axis.lineMinorWidth = axisDom.minorLines[0].offsetWidth;
-    }
-    else {
-        size.axis.lineMinorWidth = 1;
-    }
-    if (axisDom && axisDom.majorLines && axisDom.majorLines.length) {
-        size.axis.lineMajorWidth = axisDom.majorLines[0].offsetWidth;
-    }
-    else {
-        size.axis.lineMajorWidth = 1;
-    }
-
-    resized = resized || (size.axis.characterMinorWidth  !== characterMinorWidth);
-    resized = resized || (size.axis.characterMinorHeight !== characterMinorHeight);
-    resized = resized || (size.axis.characterMajorWidth  !== characterMajorWidth);
-    resized = resized || (size.axis.characterMajorHeight !== characterMajorHeight);
-    size.axis.characterMinorWidth  = characterMinorWidth;
-    size.axis.characterMinorHeight = characterMinorHeight;
-    size.axis.characterMajorWidth  = characterMajorWidth;
-    size.axis.characterMajorHeight = characterMajorHeight;
-
-    var contentHeight = Math.max(size.frameHeight - axisHeight, 0);
-    size.contentLeft = options.groupsOnRight ? 0 : size.groupsWidth;
-    size.contentWidth = Math.max(size.frameWidth - size.groupsWidth, 0);
-    size.contentHeight = contentHeight;
-
-    return resized;
-};
-
-/**
- * Redraw the timeline axis with minor and major labels
- * @return {boolean} needsReflow     Returns true if the DOM is changed such
- *                                   that a reflow is needed.
- */
-links.Timeline.prototype.repaintAxis = function() {
-    var needsReflow = false,
-        dom = this.dom,
-        options = this.options,
-        size = this.size,
-        step = this.step;
-
-    var axis = dom.axis;
-    if (!axis) {
-        axis = {};
-        dom.axis = axis;
-    }
-    if (!size.axis.properties) {
-        size.axis.properties = {};
-    }
-    if (!axis.minorTexts) {
-        axis.minorTexts = [];
-    }
-    if (!axis.minorLines) {
-        axis.minorLines = [];
-    }
-    if (!axis.majorTexts) {
-        axis.majorTexts = [];
-    }
-    if (!axis.majorLines) {
-        axis.majorLines = [];
-    }
-
-    if (!axis.frame) {
-        axis.frame = document.createElement("DIV");
-        axis.frame.style.position = "absolute";
-        axis.frame.style.left = "0px";
-        axis.frame.style.top = "0px";
-        dom.content.appendChild(axis.frame);
-    }
-
-    // take axis offline
-    dom.content.removeChild(axis.frame);
-
-    axis.frame.style.width = (size.contentWidth) + "px";
-    axis.frame.style.height = (size.axis.height) + "px";
-
-    // the drawn axis is more wide than the actual visual part, such that
-    // the axis can be dragged without having to redraw it each time again.
-    var start = this.screenToTime(0);
-    var end = this.screenToTime(size.contentWidth);
-
-    // calculate minimum step (in milliseconds) based on character size
-    if (size.axis.characterMinorWidth) {
-        this.minimumStep = this.screenToTime(size.axis.characterMinorWidth * 6) -
-            this.screenToTime(0);
-
-        step.setRange(start, end, this.minimumStep);
-    }
-
-    var charsNeedsReflow = this.repaintAxisCharacters();
-    needsReflow = needsReflow || charsNeedsReflow;
-
-    // The current labels on the axis will be re-used (much better performance),
-    // therefore, the repaintAxis method uses the mechanism with
-    // repaintAxisStartOverwriting, repaintAxisEndOverwriting, and
-    // this.size.axis.properties is used.
-    this.repaintAxisStartOverwriting();
-
-    step.start();
-    var xFirstMajorLabel = undefined;
-    var max = 0;
-    while (!step.end() && max < 1000) {
-        max++;
-        var cur = step.getCurrent(),
-            x = this.timeToScreen(cur),
-            isMajor = step.isMajor();
-
-        if (options.showMinorLabels) {
-            this.repaintAxisMinorText(x, step.getLabelMinor(options));
-        }
-
-        if (isMajor && options.showMajorLabels) {
-            if (x > 0) {
-                if (xFirstMajorLabel == undefined) {
-                    xFirstMajorLabel = x;
-                }
-                this.repaintAxisMajorText(x, step.getLabelMajor(options));
-            }
-            this.repaintAxisMajorLine(x);
-        }
-        else {
-            this.repaintAxisMinorLine(x);
-        }
-
-        step.next();
-    }
-
-    // create a major label on the left when needed
-    if (options.showMajorLabels) {
-        var leftTime = this.screenToTime(0),
-            leftText = this.step.getLabelMajor(options, leftTime),
-            width = leftText.length * size.axis.characterMajorWidth + 10; // upper bound estimation
-
-        if (xFirstMajorLabel == undefined || width < xFirstMajorLabel) {
-            this.repaintAxisMajorText(0, leftText, leftTime);
-        }
-    }
-
-    // cleanup left over labels
-    this.repaintAxisEndOverwriting();
-
-    this.repaintAxisHorizontal();
-
-    // put axis online
-    dom.content.insertBefore(axis.frame, dom.content.firstChild);
-
-    return needsReflow;
-};
-
-/**
- * Create characters used to determine the size of text on the axis
- * @return {boolean} needsReflow   Returns true if the DOM is changed such that
- *                                 a reflow is needed.
- */
-links.Timeline.prototype.repaintAxisCharacters = function () {
-    // calculate the width and height of a single character
-    // this is used to calculate the step size, and also the positioning of the
-    // axis
-    var needsReflow = false,
-        dom = this.dom,
-        axis = dom.axis,
-        text;
-
-    if (!axis.characterMinor) {
-        text = document.createTextNode("0");
-        var characterMinor = document.createElement("DIV");
-        characterMinor.className = "timeline-axis-text timeline-axis-text-minor";
-        characterMinor.appendChild(text);
-        characterMinor.style.position = "absolute";
-        characterMinor.style.visibility = "hidden";
-        characterMinor.style.paddingLeft = "0px";
-        characterMinor.style.paddingRight = "0px";
-        axis.frame.appendChild(characterMinor);
-
-        axis.characterMinor = characterMinor;
-        needsReflow = true;
-    }
-
-    if (!axis.characterMajor) {
-        text = document.createTextNode("0");
-        var characterMajor = document.createElement("DIV");
-        characterMajor.className = "timeline-axis-text timeline-axis-text-major";
-        characterMajor.appendChild(text);
-        characterMajor.style.position = "absolute";
-        characterMajor.style.visibility = "hidden";
-        characterMajor.style.paddingLeft = "0px";
-        characterMajor.style.paddingRight = "0px";
-        axis.frame.appendChild(characterMajor);
-
-        axis.characterMajor = characterMajor;
-        needsReflow = true;
-    }
-
-    return needsReflow;
-};
-
-/**
- * Initialize redraw of the axis. All existing labels and lines will be
- * overwritten and reused.
- */
-links.Timeline.prototype.repaintAxisStartOverwriting = function () {
-    var properties = this.size.axis.properties;
-
-    properties.minorTextNum = 0;
-    properties.minorLineNum = 0;
-    properties.majorTextNum = 0;
-    properties.majorLineNum = 0;
-};
-
-/**
- * End of overwriting HTML DOM elements of the axis.
- * remaining elements will be removed
- */
-links.Timeline.prototype.repaintAxisEndOverwriting = function () {
-    var dom = this.dom,
-        props = this.size.axis.properties,
-        frame = this.dom.axis.frame,
-        num;
-
-    // remove leftovers
-    var minorTexts = dom.axis.minorTexts;
-    num = props.minorTextNum;
-    while (minorTexts.length > num) {
-        var minorText = minorTexts[num];
-        frame.removeChild(minorText);
-        minorTexts.splice(num, 1);
-    }
-
-    var minorLines = dom.axis.minorLines;
-    num = props.minorLineNum;
-    while (minorLines.length > num) {
-        var minorLine = minorLines[num];
-        frame.removeChild(minorLine);
-        minorLines.splice(num, 1);
-    }
-
-    var majorTexts = dom.axis.majorTexts;
-    num = props.majorTextNum;
-    while (majorTexts.length > num) {
-        var majorText = majorTexts[num];
-        frame.removeChild(majorText);
-        majorTexts.splice(num, 1);
-    }
-
-    var majorLines = dom.axis.majorLines;
-    num = props.majorLineNum;
-    while (majorLines.length > num) {
-        var majorLine = majorLines[num];
-        frame.removeChild(majorLine);
-        majorLines.splice(num, 1);
-    }
-};
-
-/**
- * Repaint the horizontal line and background of the axis
- */
-links.Timeline.prototype.repaintAxisHorizontal = function() {
-    var axis = this.dom.axis,
-        size = this.size,
-        options = this.options;
-
-    // line behind all axis elements (possibly having a background color)
-    var hasAxis = (options.showMinorLabels || options.showMajorLabels);
-    if (hasAxis) {
-        if (!axis.backgroundLine) {
-            // create the axis line background (for a background color or so)
-            var backgroundLine = document.createElement("DIV");
-            backgroundLine.className = "timeline-axis";
-            backgroundLine.style.position = "absolute";
-            backgroundLine.style.left = "0px";
-            backgroundLine.style.width = "100%";
-            backgroundLine.style.border = "none";
-            axis.frame.insertBefore(backgroundLine, axis.frame.firstChild);
-
-            axis.backgroundLine = backgroundLine;
-        }
-
-        if (axis.backgroundLine) {
-            axis.backgroundLine.style.top = size.axis.top + "px";
-            axis.backgroundLine.style.height = size.axis.height + "px";
-        }
-    }
-    else {
-        if (axis.backgroundLine) {
-            axis.frame.removeChild(axis.backgroundLine);
-            delete axis.backgroundLine;
-        }
-    }
-
-    // line before all axis elements
-    if (hasAxis) {
-        if (axis.line) {
-            // put this line at the end of all childs
-            var line = axis.frame.removeChild(axis.line);
-            axis.frame.appendChild(line);
-        }
-        else {
-            // make the axis line
-            var line = document.createElement("DIV");
-            line.className = "timeline-axis";
-            line.style.position = "absolute";
-            line.style.left = "0px";
-            line.style.width = "100%";
-            line.style.height = "0px";
-            axis.frame.appendChild(line);
-
-            axis.line = line;
-        }
-
-        axis.line.style.top = size.axis.line + "px";
-    }
-    else {
-        if (axis.line && axis.line.parentElement) {
-            axis.frame.removeChild(axis.line);
-            delete axis.line;
-        }
-    }
-};
-
-/**
- * Create a minor label for the axis at position x
- * @param {Number} x
- * @param {String} text
- */
-links.Timeline.prototype.repaintAxisMinorText = function (x, text) {
-    var size = this.size,
-        dom = this.dom,
-        props = size.axis.properties,
-        frame = dom.axis.frame,
-        minorTexts = dom.axis.minorTexts,
-        index = props.minorTextNum,
-        label;
-
-    if (index < minorTexts.length) {
-        label = minorTexts[index]
-    }
-    else {
-        // create new label
-        var content = document.createTextNode("");
-        label = document.createElement("DIV");
-        label.appendChild(content);
-        label.className = "timeline-axis-text timeline-axis-text-minor";
-        label.style.position = "absolute";
-
-        frame.appendChild(label);
-
-        minorTexts.push(label);
-    }
-
-    label.childNodes[0].nodeValue = text;
-    label.style.left = x + "px";
-    label.style.top  = size.axis.labelMinorTop + "px";
-    //label.title = title;  // TODO: this is a heavy operation
-
-    props.minorTextNum++;
-};
-
-/**
- * Create a minor line for the axis at position x
- * @param {Number} x
- */
-links.Timeline.prototype.repaintAxisMinorLine = function (x) {
-    var axis = this.size.axis,
-        dom = this.dom,
-        props = axis.properties,
-        frame = dom.axis.frame,
-        minorLines = dom.axis.minorLines,
-        index = props.minorLineNum,
-        line;
-
-    if (index < minorLines.length) {
-        line = minorLines[index];
-    }
-    else {
-        // create vertical line
-        line = document.createElement("DIV");
-        line.className = "timeline-axis-grid timeline-axis-grid-minor";
-        line.style.position = "absolute";
-        line.style.width = "0px";
-
-        frame.appendChild(line);
-        minorLines.push(line);
-    }
-
-    line.style.top = axis.lineMinorTop + "px";
-    line.style.height = axis.lineMinorHeight + "px";
-    line.style.left = (x - axis.lineMinorWidth/2) + "px";
-
-    props.minorLineNum++;
-};
-
-/**
- * Create a Major label for the axis at position x
- * @param {Number} x
- * @param {String} text
- */
-links.Timeline.prototype.repaintAxisMajorText = function (x, text) {
-    var size = this.size,
-        props = size.axis.properties,
-        frame = this.dom.axis.frame,
-        majorTexts = this.dom.axis.majorTexts,
-        index = props.majorTextNum,
-        label;
-
-    if (index < majorTexts.length) {
-        label = majorTexts[index];
-    }
-    else {
-        // create label
-        var content = document.createTextNode(text);
-        label = document.createElement("DIV");
-        label.className = "timeline-axis-text timeline-axis-text-major";
-        label.appendChild(content);
-        label.style.position = "absolute";
-        label.style.top = "0px";
-
-        frame.appendChild(label);
-        majorTexts.push(label);
-    }
-
-    label.childNodes[0].nodeValue = text;
-    label.style.top = size.axis.labelMajorTop + "px";
-    label.style.left = x + "px";
-    //label.title = title; // TODO: this is a heavy operation
-
-    props.majorTextNum ++;
-};
-
-/**
- * Create a Major line for the axis at position x
- * @param {Number} x
- */
-links.Timeline.prototype.repaintAxisMajorLine = function (x) {
-    var size = this.size,
-        props = size.axis.properties,
-        axis = this.size.axis,
-        frame = this.dom.axis.frame,
-        majorLines = this.dom.axis.majorLines,
-        index = props.majorLineNum,
-        line;
-
-    if (index < majorLines.length) {
-        line = majorLines[index];
-    }
-    else {
-        // create vertical line
-        line = document.createElement("DIV");
-        line.className = "timeline-axis-grid timeline-axis-grid-major";
-        line.style.position = "absolute";
-        line.style.top = "0px";
-        line.style.width = "0px";
-
-        frame.appendChild(line);
-        majorLines.push(line);
-    }
-
-    line.style.left = (x - axis.lineMajorWidth/2) + "px";
-    line.style.height = size.frameHeight + "px";
-
-    props.majorLineNum ++;
-};
-
-/**
- * Reflow all items, retrieve their actual size
- * @return {boolean} resized    returns true if any of the items is resized
- */
-links.Timeline.prototype.reflowItems = function() {
-    var resized = false,
-        i,
-        iMax,
-        group,
-        groups = this.groups,
-        renderedItems = this.renderedItems;
-
-    if (groups) { // TODO: need to check if labels exists?
-        // loop through all groups to reset the items height
-        groups.forEach(function (group) {
-            group.itemsHeight = 0;
-        });
-    }
-
-    // loop through the width and height of all visible items
-    for (i = 0, iMax = renderedItems.length; i < iMax; i++) {
-        var item = renderedItems[i],
-            domItem = item.dom;
-        group = item.group;
-
-        if (domItem) {
-            // TODO: move updating width and height into item.reflow
-            var width = domItem ? domItem.clientWidth : 0;
-            var height = domItem ? domItem.clientHeight : 0;
-            resized = resized || (item.width != width);
-            resized = resized || (item.height != height);
-            item.width = width;
-            item.height = height;
-            //item.borderWidth = (domItem.offsetWidth - domItem.clientWidth - 2) / 2; // TODO: borderWidth
-            item.reflow();
-        }
-
-        if (group) {
-            group.itemsHeight = group.itemsHeight ?
-                Math.max(group.itemsHeight, item.height) :
-                item.height;
-        }
-    }
-
-    return resized;
-};
-
-/**
- * Recalculate item properties:
- * - the height of each group.
- * - the actualHeight, from the stacked items or the sum of the group heights
- * @return {boolean} resized    returns true if any of the items properties is
- *                              changed
- */
-links.Timeline.prototype.recalcItems = function () {
-    var resized = false,
-        i,
-        iMax,
-        item,
-        finalItem,
-        finalItems,
-        group,
-        groups = this.groups,
-        size = this.size,
-        options = this.options,
-        renderedItems = this.renderedItems;
-
-    var actualHeight = 0;
-    if (groups.length == 0) {
-        // calculate actual height of the timeline when there are no groups
-        // but stacked items
-        if (options.autoHeight || options.cluster) {
-            var min = 0,
-                max = 0;
-
-            if (this.stack && this.stack.finalItems) {
-                // adjust the offset of all finalItems when the actualHeight has been changed
-                finalItems = this.stack.finalItems;
-                finalItem = finalItems[0];
-                if (finalItem && finalItem.top) {
-                    min = finalItem.top;
-                    max = finalItem.top + finalItem.height;
-                }
-                for (i = 1, iMax = finalItems.length; i < iMax; i++) {
-                    finalItem = finalItems[i];
-                    min = Math.min(min, finalItem.top);
-                    max = Math.max(max, finalItem.top + finalItem.height);
-                }
-            }
-            else {
-                item = renderedItems[0];
-                if (item && item.top) {
-                    min = item.top;
-                    max = item.top + item.height;
-                }
-                for (i = 1, iMax = renderedItems.length; i < iMax; i++) {
-                    item = renderedItems[i];
-                    if (item.top) {
-                        min = Math.min(min, item.top);
-                        max = Math.max(max, (item.top + item.height));
-                    }
-                }
-            }
-
-            actualHeight = (max - min) + 2 * options.eventMarginAxis + size.axis.height;
-            if (actualHeight < options.minHeight) {
-                actualHeight = options.minHeight;
-            }
-
-            if (size.actualHeight != actualHeight && options.autoHeight && !options.axisOnTop) {
-                // adjust the offset of all items when the actualHeight has been changed
-                var diff = actualHeight - size.actualHeight;
-                if (this.stack && this.stack.finalItems) {
-                    finalItems = this.stack.finalItems;
-                    for (i = 0, iMax = finalItems.length; i < iMax; i++) {
-                        finalItems[i].top += diff;
-                        finalItems[i].item.top += diff;
-                    }
-                }
-                else {
-                    for (i = 0, iMax = renderedItems.length; i < iMax; i++) {
-                        renderedItems[i].top += diff;
-                    }
-                }
-            }
-        }
-    }
-    else {
-        // loop through all groups to get the height of each group, and the
-        // total height
-        actualHeight = size.axis.height + 2 * options.eventMarginAxis;
-        for (i = 0, iMax = groups.length; i < iMax; i++) {
-            group = groups[i];
-
-            var groupHeight = Math.max(group.labelHeight || 0, group.itemsHeight || 0);
-            resized = resized || (groupHeight != group.height);
-            group.height = groupHeight;
-
-            actualHeight += groups[i].height + options.eventMargin;
-        }
-
-        // calculate top positions of the group labels and lines
-        var eventMargin = options.eventMargin,
-            top = options.axisOnTop ?
-                options.eventMarginAxis + eventMargin/2 :
-                size.contentHeight - options.eventMarginAxis + eventMargin/ 2,
-            axisHeight = size.axis.height;
-
-        for (i = 0, iMax = groups.length; i < iMax; i++) {
-            group = groups[i];
-            if (options.axisOnTop) {
-                group.top = top + axisHeight;
-                group.labelTop = top + axisHeight + (group.height - group.labelHeight) / 2;
-                group.lineTop = top + axisHeight + group.height + eventMargin/2;
-                top += group.height + eventMargin;
-            }
-            else {
-                top -= group.height + eventMargin;
-                group.top = top;
-                group.labelTop = top + (group.height - group.labelHeight) / 2;
-                group.lineTop = top - eventMargin/2;
-            }
-        }
-
-        // calculate top position of the visible items
-        for (i = 0, iMax = renderedItems.length; i < iMax; i++) {
-            item = renderedItems[i];
-            group = item.group;
-
-            if (group) {
-                item.top = group.top;
-            }
-        }
-
-        resized = true;
-    }
-
-    if (actualHeight < options.minHeight) {
-        actualHeight = options.minHeight;
-    }
-    resized = resized || (actualHeight != size.actualHeight);
-    size.actualHeight = actualHeight;
-
-    return resized;
-};
-
-/**
- * This method clears the (internal) array this.items in a safe way: neatly
- * cleaning up the DOM, and accompanying arrays this.renderedItems and
- * the created clusters.
- */
-links.Timeline.prototype.clearItems = function() {
-    // add all visible items to the list to be hidden
-    var hideItems = this.renderQueue.hide;
-    this.renderedItems.forEach(function (item) {
-        hideItems.push(item);
-    });
-
-    // clear the cluster generator
-    this.clusterGenerator.clear();
-
-    // actually clear the items
-    this.items = [];
-};
-
-/**
- * Repaint all items
- * @return {boolean} needsReflow   Returns true if the DOM is changed such that
- *                                 a reflow is needed.
- */
-links.Timeline.prototype.repaintItems = function() {
-    var i, iMax, item, index;
-
-    var needsReflow = false,
-        dom = this.dom,
-        size = this.size,
-        timeline = this,
-        renderedItems = this.renderedItems;
-
-    if (!dom.items) {
-        dom.items = {};
-    }
-
-    // draw the frame containing the items
-    var frame = dom.items.frame;
-    if (!frame) {
-        frame = document.createElement("DIV");
-        frame.style.position = "relative";
-        dom.content.appendChild(frame);
-        dom.items.frame = frame;
-    }
-
-    frame.style.left = "0px";
-    frame.style.top = size.items.top + "px";
-    frame.style.height = "0px";
-
-    // Take frame offline (for faster manipulation of the DOM)
-    dom.content.removeChild(frame);
-
-    // process the render queue with changes
-    var queue = this.renderQueue;
-    var newImageUrls = [];
-    needsReflow = needsReflow ||
-        (queue.show.length > 0) ||
-        (queue.update.length > 0) ||
-        (queue.hide.length > 0);   // TODO: reflow needed on hide of items?
-
-    while (item = queue.show.shift()) {
-        item.showDOM(frame);
-        item.getImageUrls(newImageUrls);
-        renderedItems.push(item);
-    }
-    while (item = queue.update.shift()) {
-        item.updateDOM(frame);
-        item.getImageUrls(newImageUrls);
-        index = this.renderedItems.indexOf(item);
-        if (index == -1) {
-            renderedItems.push(item);
-        }
-    }
-    while (item = queue.hide.shift()) {
-        item.hideDOM(frame);
-        index = this.renderedItems.indexOf(item);
-        if (index != -1) {
-            renderedItems.splice(index, 1);
-        }
-    }
-
-    // reposition all visible items
-    renderedItems.forEach(function (item) {
-        item.updatePosition(timeline);
-    });
-
-    // redraw the delete button and dragareas of the selected item (if any)
-    this.repaintDeleteButton();
-    this.repaintDragAreas();
-
-    // put frame online again
-    dom.content.appendChild(frame);
-
-    if (newImageUrls.length) {
-        // retrieve all image sources from the items, and set a callback once
-        // all images are retrieved
-        var callback = function () {
-            timeline.render();
-        };
-        var sendCallbackWhenAlreadyLoaded = false;
-        links.imageloader.loadAll(newImageUrls, callback, sendCallbackWhenAlreadyLoaded);
-    }
-
-    return needsReflow;
-};
-
-/**
- * Reflow the size of the groups
- * @return {boolean} resized    Returns true if any of the frame elements
- *                              have been resized.
- */
-links.Timeline.prototype.reflowGroups = function() {
-    var resized = false,
-        options = this.options,
-        size = this.size,
-        dom = this.dom;
-
-    // calculate the groups width and height
-    // TODO: only update when data is changed! -> use an updateSeq
-    var groupsWidth = 0;
-
-    // loop through all groups to get the labels width and height
-    var groups = this.groups;
-    var labels = this.dom.groups ? this.dom.groups.labels : [];
-    for (var i = 0, iMax = groups.length; i < iMax; i++) {
-        var group = groups[i];
-        var label = labels[i];
-        group.labelWidth  = label ? label.clientWidth : 0;
-        group.labelHeight = label ? label.clientHeight : 0;
-        group.width = group.labelWidth;  // TODO: group.width is redundant with labelWidth
-
-        groupsWidth = Math.max(groupsWidth, group.width);
-    }
-
-    // limit groupsWidth to the groups width in the options
-    if (options.groupsWidth !== undefined) {
-        groupsWidth = dom.groups.frame ? dom.groups.frame.clientWidth : 0;
-    }
-
-    // compensate for the border width. TODO: calculate the real border width
-    groupsWidth += 1;
-
-    var groupsLeft = options.groupsOnRight ? size.frameWidth - groupsWidth : 0;
-    resized = resized || (size.groupsWidth !== groupsWidth);
-    resized = resized || (size.groupsLeft !== groupsLeft);
-    size.groupsWidth = groupsWidth;
-    size.groupsLeft = groupsLeft;
-
-    return resized;
-};
-
-/**
- * Redraw the group labels
- */
-links.Timeline.prototype.repaintGroups = function() {
-    var dom = this.dom,
-        timeline = this,
-        options = this.options,
-        size = this.size,
-        groups = this.groups;
-
-    if (dom.groups === undefined) {
-        dom.groups = {};
-    }
-
-    var labels = dom.groups.labels;
-    if (!labels) {
-        labels = [];
-        dom.groups.labels = labels;
-    }
-    var labelLines = dom.groups.labelLines;
-    if (!labelLines) {
-        labelLines = [];
-        dom.groups.labelLines = labelLines;
-    }
-    var itemLines = dom.groups.itemLines;
-    if (!itemLines) {
-        itemLines = [];
-        dom.groups.itemLines = itemLines;
-    }
-
-    // create the frame for holding the groups
-    var frame = dom.groups.frame;
-    if (!frame) {
-        frame =  document.createElement("DIV");
-        frame.className = "timeline-groups-axis";
-        frame.style.position = "absolute";
-        frame.style.overflow = "hidden";
-        frame.style.top = "0px";
-        frame.style.height = "100%";
-
-        dom.frame.appendChild(frame);
-        dom.groups.frame = frame;
-    }
-
-    frame.style.left = size.groupsLeft + "px";
-    frame.style.width = (options.groupsWidth !== undefined) ?
-        options.groupsWidth :
-        size.groupsWidth + "px";
-
-    // hide groups axis when there are no groups
-    if (groups.length == 0) {
-        frame.style.display = 'none';
-    }
-    else {
-        frame.style.display = '';
-    }
-
-    // TODO: only create/update groups when data is changed.
-
-    // create the items
-    var current = labels.length,
-        needed = groups.length;
-
-    // overwrite existing group labels
-    for (var i = 0, iMax = Math.min(current, needed); i < iMax; i++) {
-        var group = groups[i];
-        var label = labels[i];
-        label.innerHTML = this.getGroupName(group);
-        label.style.display = '';
-    }
-
-    // append new items when needed
-    for (var i = current; i < needed; i++) {
-        var group = groups[i];
-
-        // create text label
-        var label = document.createElement("DIV");
-        label.className = "timeline-groups-text";
-        label.style.position = "absolute";
-        if (options.groupsWidth === undefined) {
-            label.style.whiteSpace = "nowrap";
-        }
-        label.innerHTML = this.getGroupName(group);
-        frame.appendChild(label);
-        labels[i] = label;
-
-        // create the grid line between the group labels
-        var labelLine = document.createElement("DIV");
-        labelLine.className = "timeline-axis-grid timeline-axis-grid-minor";
-        labelLine.style.position = "absolute";
-        labelLine.style.left = "0px";
-        labelLine.style.width = "100%";
-        labelLine.style.height = "0px";
-        labelLine.style.borderTopStyle = "solid";
-        frame.appendChild(labelLine);
-        labelLines[i] = labelLine;
-
-        // create the grid line between the items
-        var itemLine = document.createElement("DIV");
-        itemLine.className = "timeline-axis-grid timeline-axis-grid-minor";
-        itemLine.style.position = "absolute";
-        itemLine.style.left = "0px";
-        itemLine.style.width = "100%";
-        itemLine.style.height = "0px";
-        itemLine.style.borderTopStyle = "solid";
-        dom.content.insertBefore(itemLine, dom.content.firstChild);
-        itemLines[i] = itemLine;
-    }
-
-    // remove redundant items from the DOM when needed
-    for (var i = needed; i < current; i++) {
-        var label = labels[i],
-            labelLine = labelLines[i],
-            itemLine = itemLines[i];
-
-        frame.removeChild(label);
-        frame.removeChild(labelLine);
-        dom.content.removeChild(itemLine);
-    }
-    labels.splice(needed, current - needed);
-    labelLines.splice(needed, current - needed);
-    itemLines.splice(needed, current - needed);
-    
-    links.Timeline.addClassName(frame, options.groupsOnRight ? 'timeline-groups-axis-onright' : 'timeline-groups-axis-onleft');
-
-    // position the groups
-    for (var i = 0, iMax = groups.length; i < iMax; i++) {
-        var group = groups[i],
-            label = labels[i],
-            labelLine = labelLines[i],
-            itemLine = itemLines[i];
-
-        label.style.top = group.labelTop + "px";
-        labelLine.style.top = group.lineTop + "px";
-        itemLine.style.top = group.lineTop + "px";
-        itemLine.style.width = size.contentWidth + "px";
-    }
-
-    if (!dom.groups.background) {
-        // create the axis grid line background
-        var background = document.createElement("DIV");
-        background.className = "timeline-axis";
-        background.style.position = "absolute";
-        background.style.left = "0px";
-        background.style.width = "100%";
-        background.style.border = "none";
-
-        frame.appendChild(background);
-        dom.groups.background = background;
-    }
-    dom.groups.background.style.top = size.axis.top + 'px';
-    dom.groups.background.style.height = size.axis.height + 'px';
-
-    if (!dom.groups.line) {
-        // create the axis grid line
-        var line = document.createElement("DIV");
-        line.className = "timeline-axis";
-        line.style.position = "absolute";
-        line.style.left = "0px";
-        line.style.width = "100%";
-        line.style.height = "0px";
-
-        frame.appendChild(line);
-        dom.groups.line = line;
-    }
-    dom.groups.line.style.top = size.axis.line + 'px';
-
-    // create a callback when there are images which are not yet loaded
-    // TODO: more efficiently load images in the groups
-    if (dom.groups.frame && groups.length) {
-        var imageUrls = [];
-        links.imageloader.filterImageUrls(dom.groups.frame, imageUrls);
-        if (imageUrls.length) {
-            // retrieve all image sources from the items, and set a callback once
-            // all images are retrieved
-            var callback = function () {
-                timeline.render();
-            };
-            var sendCallbackWhenAlreadyLoaded = false;
-            links.imageloader.loadAll(imageUrls, callback, sendCallbackWhenAlreadyLoaded);
-        }
-    }
-};
-
-
-/**
- * Redraw the current time bar
- */
-links.Timeline.prototype.repaintCurrentTime = function() {
-    var options = this.options,
-        dom = this.dom,
-        size = this.size;
-
-    if (!options.showCurrentTime) {
-        if (dom.currentTime) {
-            dom.contentTimelines.removeChild(dom.currentTime);
-            delete dom.currentTime;
-        }
-
-        return;
-    }
-
-    if (!dom.currentTime) {
-        // create the current time bar
-        var currentTime = document.createElement("DIV");
-        currentTime.className = "timeline-currenttime";
-        currentTime.style.position = "absolute";
-        currentTime.style.top = "0px";
-        currentTime.style.height = "100%";
-
-        dom.contentTimelines.appendChild(currentTime);
-        dom.currentTime = currentTime;
-    }
-
-    var now = new Date();
-    var nowOffset = new Date(now.valueOf() + this.clientTimeOffset);
-    var x = this.timeToScreen(nowOffset);
-
-    var visible = (x > -size.contentWidth && x < 2 * size.contentWidth);
-    dom.currentTime.style.display = visible ? '' : 'none';
-    dom.currentTime.style.left = x + "px";
-    dom.currentTime.title = "Current time: " + nowOffset;
-
-    // start a timer to adjust for the new time
-    if (this.currentTimeTimer != undefined) {
-        clearTimeout(this.currentTimeTimer);
-        delete this.currentTimeTimer;
-    }
-    var timeline = this;
-    var onTimeout = function() {
-        timeline.repaintCurrentTime();
-    };
-    // the time equal to the width of one pixel, divided by 2 for more smoothness
-    var interval = 1 / this.conversion.factor / 2;
-    if (interval < 30) interval = 30;
-    this.currentTimeTimer = setTimeout(onTimeout, interval);
-};
-
-/**
- * Redraw the custom time bar
- */
-links.Timeline.prototype.repaintCustomTime = function() {
-    var options = this.options,
-        dom = this.dom,
-        size = this.size;
-
-    if (!options.showCustomTime) {
-        if (dom.customTime) {
-            dom.contentTimelines.removeChild(dom.customTime);
-            delete dom.customTime;
-        }
-
-        return;
-    }
-
-    if (!dom.customTime) {
-        var customTime = document.createElement("DIV");
-        customTime.className = "timeline-customtime";
-        customTime.style.position = "absolute";
-        customTime.style.top = "0px";
-        customTime.style.height = "100%";
-
-        var drag = document.createElement("DIV");
-        drag.style.position = "relative";
-        drag.style.top = "0px";
-        drag.style.left = "-10px";
-        drag.style.height = "100%";
-        drag.style.width = "20px";
-        customTime.appendChild(drag);
-
-        dom.contentTimelines.appendChild(customTime);
-        dom.customTime = customTime;
-
-        // initialize parameter
-        this.customTime = new Date();
-    }
-
-    var x = this.timeToScreen(this.customTime),
-        visible = (x > -size.contentWidth && x < 2 * size.contentWidth);
-    dom.customTime.style.display = visible ? '' : 'none';
-    dom.customTime.style.left = x + "px";
-    dom.customTime.title = "Time: " + this.customTime;
-};
-
-
-/**
- * Redraw the delete button, on the top right of the currently selected item
- * if there is no item selected, the button is hidden.
- */
-links.Timeline.prototype.repaintDeleteButton = function () {
-    var timeline = this,
-        dom = this.dom,
-        frame = dom.items.frame;
-
-    var deleteButton = dom.items.deleteButton;
-    if (!deleteButton) {
-        // create a delete button
-        deleteButton = document.createElement("DIV");
-        deleteButton.className = "timeline-navigation-delete";
-        deleteButton.style.position = "absolute";
-
-        frame.appendChild(deleteButton);
-        dom.items.deleteButton = deleteButton;
-    }
-
-    var index = this.selection ? this.selection.index : -1,
-        item = this.selection ? this.items[index] : undefined;
-    if (item && item.rendered && this.isEditable(item)) {
-        var right = item.getRight(this),
-            top = item.top;
-
-        deleteButton.style.left = right + 'px';
-        deleteButton.style.top = top + 'px';
-        deleteButton.style.display = '';
-        frame.removeChild(deleteButton);
-        frame.appendChild(deleteButton);
-    }
-    else {
-        deleteButton.style.display = 'none';
-    }
-};
-
-
-/**
- * Redraw the drag areas. When an item (ranges only) is selected,
- * it gets a drag area on the left and right side, to change its width
- */
-links.Timeline.prototype.repaintDragAreas = function () {
-    var timeline = this,
-        options = this.options,
-        dom = this.dom,
-        frame = this.dom.items.frame;
-
-    // create left drag area
-    var dragLeft = dom.items.dragLeft;
-    if (!dragLeft) {
-        dragLeft = document.createElement("DIV");
-        dragLeft.className="timeline-event-range-drag-left";
-        dragLeft.style.position = "absolute";
-
-        frame.appendChild(dragLeft);
-        dom.items.dragLeft = dragLeft;
-    }
-
-    // create right drag area
-    var dragRight = dom.items.dragRight;
-    if (!dragRight) {
-        dragRight = document.createElement("DIV");
-        dragRight.className="timeline-event-range-drag-right";
-        dragRight.style.position = "absolute";
-
-        frame.appendChild(dragRight);
-        dom.items.dragRight = dragRight;
-    }
-
-    // reposition left and right drag area
-    var index = this.selection ? this.selection.index : -1,
-        item = this.selection ? this.items[index] : undefined;
-    if (item && item.rendered && this.isEditable(item) &&
-        (item instanceof links.Timeline.ItemRange)) {
-        var left = this.timeToScreen(item.start),
-            right = this.timeToScreen(item.end),
-            top = item.top,
-            height = item.height;
-
-        dragLeft.style.left = left + 'px';
-        dragLeft.style.top = top + 'px';
-        dragLeft.style.width = options.dragAreaWidth + "px";
-        dragLeft.style.height = height + 'px';
-        dragLeft.style.display = '';
-        frame.removeChild(dragLeft);
-        frame.appendChild(dragLeft);
-
-        dragRight.style.left = (right - options.dragAreaWidth) + 'px';
-        dragRight.style.top = top + 'px';
-        dragRight.style.width = options.dragAreaWidth + "px";
-        dragRight.style.height = height + 'px';
-        dragRight.style.display = '';
-        frame.removeChild(dragRight);
-        frame.appendChild(dragRight);
-    }
-    else {
-        dragLeft.style.display = 'none';
-        dragRight.style.display = 'none';
-    }
-};
-
-/**
- * Create the navigation buttons for zooming and moving
- */
-links.Timeline.prototype.repaintNavigation = function () {
-    var timeline = this,
-        options = this.options,
-        dom = this.dom,
-        frame = dom.frame,
-        navBar = dom.navBar;
-
-    if (!navBar) {
-        var showButtonNew = options.showButtonNew && options.editable;
-        var showNavigation = options.showNavigation && (options.zoomable || options.moveable);
-        if (showNavigation || showButtonNew) {
-            // create a navigation bar containing the navigation buttons
-            navBar = document.createElement("DIV");
-            navBar.style.position = "absolute";
-            navBar.className = "timeline-navigation ui-widget ui-state-highlight ui-corner-all";
-            if (options.groupsOnRight) {
-                navBar.style.left = '10px';
-            }
-            else {
-                navBar.style.right = '10px';
-            }
-            if (options.axisOnTop) {
-                navBar.style.bottom = '10px';
-            }
-            else {
-                navBar.style.top = '10px';
-            }
-            dom.navBar = navBar;
-            frame.appendChild(navBar);
-        }
-
-        if (showButtonNew) {
-            // create a new in button
-            navBar.addButton = document.createElement("DIV");
-            navBar.addButton.className = "timeline-navigation-new";
-            navBar.addButton.title = options.CREATE_NEW_EVENT;
-            var addIconSpan = document.createElement("SPAN");
-            addIconSpan.className = "ui-icon ui-icon-circle-plus";            
-            navBar.addButton.appendChild(addIconSpan);
-            
-            var onAdd = function(event) {
-                links.Timeline.preventDefault(event);
-                links.Timeline.stopPropagation(event);
-
-                // create a new event at the center of the frame
-                var w = timeline.size.contentWidth;
-                var x = w / 2;
-                var xstart = timeline.screenToTime(x - w / 10); // subtract 10% of timeline width
-                var xend = timeline.screenToTime(x + w / 10);   // add 10% of timeline width
-                if (options.snapEvents) {
-                    timeline.step.snap(xstart);
-                    timeline.step.snap(xend);
-                }
-
-                var content = options.NEW;
-                var group = timeline.groups.length ? timeline.groups[0].content : undefined;
-                var preventRender = true;
-                timeline.addItem({
-                    'start': xstart,
-                    'end': xend,
-                    'content': content,
-                    'group': group
-                }, preventRender);
-                var index = (timeline.items.length - 1);
-                timeline.selectItem(index);
-
-                timeline.applyAdd = true;
-
-                // fire an add event.
-                // Note that the change can be canceled from within an event listener if
-                // this listener calls the method cancelAdd().
-                timeline.trigger('add');
-
-                if (timeline.applyAdd) {
-                    // render and select the item
-                    timeline.render({animate: false});
-                    timeline.selectItem(index);
-                }
-                else {
-                    // undo an add
-                    timeline.deleteItem(index);
-                }
-            };
-            links.Timeline.addEventListener(navBar.addButton, "mousedown", onAdd);
-            navBar.appendChild(navBar.addButton);
-        }
-
-        if (showButtonNew && showNavigation) {
-            // create a separator line
-            links.Timeline.addClassName(navBar.addButton, 'timeline-navigation-new-line');
-        }
-
-        if (showNavigation) {
-            if (options.zoomable) {
-                // create a zoom in button
-                navBar.zoomInButton = document.createElement("DIV");
-                navBar.zoomInButton.className = "timeline-navigation-zoom-in";
-                navBar.zoomInButton.title = this.options.ZOOM_IN;
-                var ziIconSpan = document.createElement("SPAN");
-                ziIconSpan.className = "ui-icon ui-icon-circle-zoomin";
-                navBar.zoomInButton.appendChild(ziIconSpan);
-                
-                var onZoomIn = function(event) {
-                    links.Timeline.preventDefault(event);
-                    links.Timeline.stopPropagation(event);
-                    timeline.zoom(0.4);
-                    timeline.trigger("rangechange");
-                    timeline.trigger("rangechanged");
-                };
-                links.Timeline.addEventListener(navBar.zoomInButton, "mousedown", onZoomIn);
-                navBar.appendChild(navBar.zoomInButton);
-
-                // create a zoom out button
-                navBar.zoomOutButton = document.createElement("DIV");
-                navBar.zoomOutButton.className = "timeline-navigation-zoom-out";
-                navBar.zoomOutButton.title = this.options.ZOOM_OUT;
-                var zoIconSpan = document.createElement("SPAN");
-                zoIconSpan.className = "ui-icon ui-icon-circle-zoomout";
-                navBar.zoomOutButton.appendChild(zoIconSpan);
-                
-                var onZoomOut = function(event) {
-                    links.Timeline.preventDefault(event);
-                    links.Timeline.stopPropagation(event);
-                    timeline.zoom(-0.4);
-                    timeline.trigger("rangechange");
-                    timeline.trigger("rangechanged");
-                };
-                links.Timeline.addEventListener(navBar.zoomOutButton, "mousedown", onZoomOut);
-                navBar.appendChild(navBar.zoomOutButton);
-            }
-
-            if (options.moveable) {
-                // create a move left button
-                navBar.moveLeftButton = document.createElement("DIV");
-                navBar.moveLeftButton.className = "timeline-navigation-move-left";
-                navBar.moveLeftButton.title = this.options.MOVE_LEFT;
-                var mlIconSpan = document.createElement("SPAN");
-                mlIconSpan.className = "ui-icon ui-icon-circle-arrow-w";
-                navBar.moveLeftButton.appendChild(mlIconSpan);
-                
-                var onMoveLeft = function(event) {
-                    links.Timeline.preventDefault(event);
-                    links.Timeline.stopPropagation(event);
-                    timeline.move(-0.2);
-                    timeline.trigger("rangechange");
-                    timeline.trigger("rangechanged");
-                };
-                links.Timeline.addEventListener(navBar.moveLeftButton, "mousedown", onMoveLeft);
-                navBar.appendChild(navBar.moveLeftButton);
-
-                // create a move right button
-                navBar.moveRightButton = document.createElement("DIV");
-                navBar.moveRightButton.className = "timeline-navigation-move-right";
-                navBar.moveRightButton.title = this.options.MOVE_RIGHT;
-                var mrIconSpan = document.createElement("SPAN");
-                mrIconSpan.className = "ui-icon ui-icon-circle-arrow-e";
-                navBar.moveRightButton.appendChild(mrIconSpan);
-                
-                var onMoveRight = function(event) {
-                    links.Timeline.preventDefault(event);
-                    links.Timeline.stopPropagation(event);
-                    timeline.move(0.2);
-                    timeline.trigger("rangechange");
-                    timeline.trigger("rangechanged");
-                };
-                links.Timeline.addEventListener(navBar.moveRightButton, "mousedown", onMoveRight);
-                navBar.appendChild(navBar.moveRightButton);
-            }
-        }
-    }
-};
-
-
-/**
- * Set current time. This function can be used to set the time in the client
- * timeline equal with the time on a server.
- * @param {Date} time
- */
-links.Timeline.prototype.setCurrentTime = function(time) {
-    var now = new Date();
-    this.clientTimeOffset = (time.valueOf() - now.valueOf());
-
-    this.repaintCurrentTime();
-};
-
-/**
- * Get current time. The time can have an offset from the real time, when
- * the current time has been changed via the method setCurrentTime.
- * @return {Date} time
- */
-links.Timeline.prototype.getCurrentTime = function() {
-    var now = new Date();
-    return new Date(now.valueOf() + this.clientTimeOffset);
-};
-
-
-/**
- * Set custom time.
- * The custom time bar can be used to display events in past or future.
- * @param {Date} time
- */
-links.Timeline.prototype.setCustomTime = function(time) {
-    this.customTime = new Date(time.valueOf());
-    this.repaintCustomTime();
-};
-
-/**
- * Retrieve the current custom time.
- * @return {Date} customTime
- */
-links.Timeline.prototype.getCustomTime = function() {
-    return new Date(this.customTime.valueOf());
-};
-
-/**
- * Set a custom scale. Autoscaling will be disabled.
- * For example setScale(SCALE.MINUTES, 5) will result
- * in minor steps of 5 minutes, and major steps of an hour.
- *
- * @param {links.Timeline.StepDate.SCALE} scale
- *                               A scale. Choose from SCALE.MILLISECOND,
- *                               SCALE.SECOND, SCALE.MINUTE, SCALE.HOUR,
- *                               SCALE.WEEKDAY, SCALE.DAY, SCALE.MONTH,
- *                               SCALE.YEAR.
- * @param {int}        step   A step size, by default 1. Choose for
- *                               example 1, 2, 5, or 10.
- */
-links.Timeline.prototype.setScale = function(scale, step) {
-    this.step.setScale(scale, step);
-    this.render(); // TODO: optimize: only reflow/repaint axis
-};
-
-/**
- * Enable or disable autoscaling
- * @param {boolean} enable  If true or not defined, autoscaling is enabled.
- *                          If false, autoscaling is disabled.
- */
-links.Timeline.prototype.setAutoScale = function(enable) {
-    this.step.setAutoScale(enable);
-    this.render(); // TODO: optimize: only reflow/repaint axis
-};
-
-/**
- * Redraw the timeline
- * Reloads the (linked) data table and redraws the timeline when resized.
- * See also the method checkResize
- */
-links.Timeline.prototype.redraw = function() {
-    this.setData(this.data);
-};
-
-
-/**
- * Check if the timeline is resized, and if so, redraw the timeline.
- * Useful when the webpage is resized.
- */
-links.Timeline.prototype.checkResize = function() {
-    // TODO: re-implement the method checkResize, or better, make it redundant as this.render will be smarter
-    this.render();
-};
-
-/**
- * Check whether a given item is editable
- * @param {links.Timeline.Item} item
- * @return {boolean} editable
- */
-links.Timeline.prototype.isEditable = function (item) {
-    if (item) {
-        if (item.editable != undefined) {
-            return item.editable;
-        }
-        else {
-            return this.options.editable;
-        }
-    }
-    return false;
-};
-
-/**
- * Calculate the factor and offset to convert a position on screen to the
- * corresponding date and vice versa.
- * After the method calcConversionFactor is executed once, the methods screenToTime and
- * timeToScreen can be used.
- */
-links.Timeline.prototype.recalcConversion = function() {
-    this.conversion.offset = this.start.valueOf();
-    this.conversion.factor = this.size.contentWidth /
-        (this.end.valueOf() - this.start.valueOf());
-};
-
-
-/**
- * Convert a position on screen (pixels) to a datetime
- * Before this method can be used, the method calcConversionFactor must be
- * executed once.
- * @param {int}     x    Position on the screen in pixels
- * @return {Date}   time The datetime the corresponds with given position x
- */
-links.Timeline.prototype.screenToTime = function(x) {
-    var conversion = this.conversion;
-    return new Date(x / conversion.factor + conversion.offset);
-};
-
-/**
- * Convert a datetime (Date object) into a position on the screen
- * Before this method can be used, the method calcConversionFactor must be
- * executed once.
- * @param {Date}   time A date
- * @return {int}   x    The position on the screen in pixels which corresponds
- *                      with the given date.
- */
-links.Timeline.prototype.timeToScreen = function(time) {
-    var conversion = this.conversion;
-    return (time.valueOf() - conversion.offset) * conversion.factor;
-};
-
-
-
-/**
- * Event handler for touchstart event on mobile devices
- */
-links.Timeline.prototype.onTouchStart = function(event) {
-    var params = this.eventParams,
-        me = this;
-
-    if (params.touchDown) {
-        // if already moving, return
-        return;
-    }
-
-    params.touchDown = true;
-    params.zoomed = false;
-
-    this.onMouseDown(event);
-
-    if (!params.onTouchMove) {
-        params.onTouchMove = function (event) {me.onTouchMove(event);};
-        links.Timeline.addEventListener(document, "touchmove", params.onTouchMove);
-    }
-    if (!params.onTouchEnd) {
-        params.onTouchEnd  = function (event) {me.onTouchEnd(event);};
-        links.Timeline.addEventListener(document, "touchend",  params.onTouchEnd);
-    }
-
-    /* TODO
-     // check for double tap event
-     var delta = 500; // ms
-     var doubleTapStart = (new Date()).valueOf();
-     var target = links.Timeline.getTarget(event);
-     var doubleTapItem = this.getItemIndex(target);
-     if (params.doubleTapStart &&
-     (doubleTapStart - params.doubleTapStart) < delta &&
-     doubleTapItem == params.doubleTapItem) {
-     delete params.doubleTapStart;
-     delete params.doubleTapItem;
-     me.onDblClick(event);
-     params.touchDown = false;
-     }
-     params.doubleTapStart = doubleTapStart;
-     params.doubleTapItem = doubleTapItem;
-     */
-    // store timing for double taps
-    var target = links.Timeline.getTarget(event);
-    var item = this.getItemIndex(target);
-    params.doubleTapStartPrev = params.doubleTapStart;
-    params.doubleTapStart = (new Date()).valueOf();
-    params.doubleTapItemPrev = params.doubleTapItem;
-    params.doubleTapItem = item;
-
-    links.Timeline.preventDefault(event);
-};
-
-/**
- * Event handler for touchmove event on mobile devices
- */
-links.Timeline.prototype.onTouchMove = function(event) {
-    var params = this.eventParams;
-
-    if (event.scale && event.scale !== 1) {
-        params.zoomed = true;
-    }
-
-    if (!params.zoomed) {
-        // move 
-        this.onMouseMove(event);
-    }
-    else {
-        if (this.options.zoomable) {
-            // pinch
-            // TODO: pinch only supported on iPhone/iPad. Create something manually for Android?
-            params.zoomed = true;
-
-            var scale = event.scale,
-                oldWidth = (params.end.valueOf() - params.start.valueOf()),
-                newWidth = oldWidth / scale,
-                diff = newWidth - oldWidth,
-                start = new Date(parseInt(params.start.valueOf() - diff/2)),
-                end = new Date(parseInt(params.end.valueOf() + diff/2));
-
-            // TODO: determine zoom-around-date from touch positions?
-
-            this.setVisibleChartRange(start, end);
-            this.trigger("rangechange");
-        }
-    }
-
-    links.Timeline.preventDefault(event);
-};
-
-/**
- * Event handler for touchend event on mobile devices
- */
-links.Timeline.prototype.onTouchEnd = function(event) {
-    var params = this.eventParams;
-    var me = this;
-    params.touchDown = false;
-
-    if (params.zoom

<TRUNCATED>

Mime
View raw message