chaplinks-library-timeline 2.5.5 → 2.9.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 5c4e0f75794aac680cd4a37fe7d374291af77a0d
-  data.tar.gz: b539d0ab3af508943edf526d9154de6336d49461
+  metadata.gz: 38fefa2f824f0f0240cf305b0957211958d4feb7
+  data.tar.gz: faf9c59c8ab1c628c66ae2c85b7a7b49babe23eb
 SHA512:
-  metadata.gz: 84cfd145f6462c1515eb9d9b4277f3f1651c0e13c677c065d197dccc8ca1e9fd9bdff2ec75c2edd2f1103e0664fa69263ea5cb69be09c7ee9618075bc274a9a2
-  data.tar.gz: 2bf06dfb8696f46dd80afe22482cfe83b159268bce99510ab0f5df4d3e50cdcd7df9b05b022bb9f0dcce08e1a6f23cf2e1444c11fb31022b5360b191fbdb020e
+  metadata.gz: 0da5dfa904b50daadace34c2b98933bdf8e1a219d75934df78f654ae9a5d8ef7b67a7e21665f1372a8cef6e2e45615eb74e10fb014bc750422ab3e42d3cf4c6a
+  data.tar.gz: 81002371685bc5994f9a29e59f9d0c22c30eddbbdb7f6fd09e35f1510a71986b26330f6c701544452a0528d89fcdb911072e0d560526a0a88943f145d2237ce7

data/Gemfile

@@ -2,3 +2,4 @@ source 'https://rubygems.org'
 
 # Specify your gem's dependencies in chaplinks-library-timeline.gemspec
 gemspec
+

data/lib/chaplinks/library/timeline/version.rb

@@ -1,7 +1,7 @@
 module Chaplinks
   module Library
     module Timeline
-      VERSION = "2.5.5"
+      VERSION = "2.9.0"
     end
   end
 end

data/vendor/assets/javascripts/chaplinks-library/timeline/timeline-locales.js

@@ -1,4 +1,4 @@
-if (typeof links === 'undefined') {
+if (typeof links === 'undefined') {
     links = {};
     links.locales = {};
 } else if (typeof links.locales === 'undefined') {
@@ -7,10 +7,10 @@ if (typeof links === 'undefined') {
 
 // English ===================================================
 links.locales['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"),
+    'MONTHS': ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
+    'MONTHS_SHORT': ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
+    'DAYS': ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
+    'DAYS_SHORT': ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
     'ZOOM_IN': "Zoom in",
     'ZOOM_OUT': "Zoom out",
     'MOVE_LEFT': "Move left",
@@ -24,10 +24,10 @@ links.locales['en_UK'] = links.locales['en'];
 
 // French ===================================================
 links.locales['fr'] = {
-    'MONTHS': new Array("Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"),
-    'MONTHS_SHORT': new Array("Jan", "Fev", "Mar", "Avr", "Mai", "Jun", "Jul", "Aou", "Sep", "Oct", "Nov", "Dec"),
-    'DAYS': new Array("Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"),
-    'DAYS_SHORT': new Array("Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam"),
+    'MONTHS': ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"],
+    'MONTHS_SHORT': ["Jan", "Fev", "Mar", "Avr", "Mai", "Jun", "Jul", "Aou", "Sep", "Oct", "Nov", "Dec"],
+    'DAYS': ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"],
+    'DAYS_SHORT': ["Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam"],
     'ZOOM_IN': "Zoomer",
     'ZOOM_OUT': "Dézoomer",
     'MOVE_LEFT': "Déplacer à gauche",
@@ -42,10 +42,10 @@ links.locales['fr_CA'] = links.locales['fr'];
 
 // Catalan ===================================================
 links.locales['ca'] = {
-    'MONTHS': new Array("Gener", "Febrer", "Març", "Abril", "Maig", "Juny", "Juliol", "Setembre", "Octubre", "Novembre", "Desembre"),
-    'MONTHS_SHORT': new Array("Gen", "Feb", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Oct", "Nov", "Des"),
-    'DAYS': new Array("Diumenge", "Dilluns", "Dimarts", "Dimecres", "Dijous", "Divendres", "Dissabte"),
-    'DAYS_SHORT': new Array("Dm.", "Dl.", "Dm.", "Dc.", "Dj.", "Dv.", "Ds."),
+    'MONTHS': ["Gener", "Febrer", "Març", "Abril", "Maig", "Juny", "Juliol", "Setembre", "Octubre", "Novembre", "Desembre"],
+    'MONTHS_SHORT': ["Gen", "Feb", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Oct", "Nov", "Des"],
+    'DAYS': ["Diumenge", "Dilluns", "Dimarts", "Dimecres", "Dijous", "Divendres", "Dissabte"],
+    'DAYS_SHORT': ["Dm.", "Dl.", "Dm.", "Dc.", "Dj.", "Dv.", "Ds."],
     'ZOOM_IN': "Augmentar zoom",
     'ZOOM_OUT': "Disminuir zoom",
     'MOVE_LEFT': "Moure esquerra",
@@ -57,10 +57,10 @@ links.locales['ca_ES'] = links.locales['ca'];
 
 // German ===================================================
 links.locales['de'] = {
-    'MONTHS': new Array("Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"),
-    'MONTHS_SHORT': new Array("Jan", "Feb", "Mär", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"),
-    'DAYS': new Array("Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"),
-    'DAYS_SHORT': new Array("Son", "Mon", "Die", "Mit", "Don", "Fre", "Sam"),
+    'MONTHS': ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"],
+    'MONTHS_SHORT': ["Jan", "Feb", "Mär", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"],
+    'DAYS': ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"],
+    'DAYS_SHORT': ["Son", "Mon", "Die", "Mit", "Don", "Fre", "Sam"],
     'ZOOM_IN': "Vergrößern",
     'ZOOM_OUT': "Verkleinern",
     'MOVE_LEFT': "Nach links verschieben",
@@ -74,10 +74,10 @@ links.locales['de_CH'] = links.locales['de'];
 
 // Danish ===================================================
 links.locales['da'] = {
-    'MONTHS': new Array("januar", "februar", "marts", "april", "maj", "juni", "juli", "august", "september", "oktober", "november", "december"),
-    'MONTHS_SHORT': new Array("jan", "feb", "mar", "apr", "maj", "jun", "jul", "aug", "sep", "okt", "nov", "dec"),
-    'DAYS': new Array("søndag", "mandag", "tirsdag", "onsdag", "torsdag", "fredag", "lørdag"),
-    'DAYS_SHORT': new Array("søn", "man", "tir", "ons", "tor", "fre", "lør"),
+    'MONTHS': ["januar", "februar", "marts", "april", "maj", "juni", "juli", "august", "september", "oktober", "november", "december"],
+    'MONTHS_SHORT': ["jan", "feb", "mar", "apr", "maj", "jun", "jul", "aug", "sep", "okt", "nov", "dec"],
+    'DAYS': ["søndag", "mandag", "tirsdag", "onsdag", "torsdag", "fredag", "lørdag"],
+    'DAYS_SHORT': ["søn", "man", "tir", "ons", "tor", "fre", "lør"],
     'ZOOM_IN': "Zoom in",
     'ZOOM_OUT': "Zoom out",
     'MOVE_LEFT': "Move left",
@@ -89,10 +89,10 @@ links.locales['da_DK'] = links.locales['da'];
 
 // Russian ===================================================
 links.locales['ru'] = {
-    'MONTHS': new Array("Январь", "Февраль", "Март", "Апрель", "Май", "Июнь", "Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь"),
-    'MONTHS_SHORT': new Array("Янв", "Фев", "Мар", "Апр", "Май", "Июн", "Июл", "Авг", "Сен", "Окт", "Ноя", "Дек"),
-    'DAYS': new Array("Воскресенье", "Понедельник", "Вторник", "Среда", "Четверг", "Пятница", "Суббота"),
-    'DAYS_SHORT': new Array("Вос", "Пон", "Втo", "Срe", "Чет", "Пят", "Суб"),
+    'MONTHS': ["Январь", "Февраль", "Март", "Апрель", "Май", "Июнь", "Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь"],
+    'MONTHS_SHORT': ["Янв", "Фев", "Мар", "Апр", "Май", "Июн", "Июл", "Авг", "Сен", "Окт", "Ноя", "Дек"],
+    'DAYS': ["Воскресенье", "Понедельник", "Вторник", "Среда", "Четверг", "Пятница", "Суббота"],
+    'DAYS_SHORT': ["Вос", "Пон", "Втo", "Срe", "Чет", "Пят", "Суб"],
     'ZOOM_IN': "Увeличить",
     'ZOOM_OUT': "Умeньшить",
     'MOVE_LEFT': "Сдвинуть налeво",
@@ -104,10 +104,10 @@ links.locales['ru_RU'] = links.locales['ru'];
 
 // Spanish ===================================================
 links.locales['es'] = {
-    'MONTHS': new Array("Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"),
-    'MONTHS_SHORT': new Array("Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dic"),
-    'DAYS': new Array("Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"),
-    'DAYS_SHORT': new Array("Dom", "Lun", "Mar", "Mié", "Jue", "Vie", "Sáb"),
+    'MONTHS': ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"],
+    'MONTHS_SHORT': ["Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dic"],
+    'DAYS': ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"],
+    'DAYS_SHORT': ["Dom", "Lun", "Mar", "Mié", "Jue", "Vie", "Sáb"],
     'ZOOM_IN': "Aumentar zoom",
     'ZOOM_OUT': "Disminuir zoom",
     'MOVE_LEFT': "Mover izquierda",
@@ -120,10 +120,10 @@ links.locales['es_ES'] = links.locales['es'];
 
 // Dutch =====================================================
 links.locales['nl'] = {
-    'MONTHS': new Array("januari", "februari", "maart", "april", "mei", "juni", "juli", "augustus", "september", "oktober", "november", "december"),
-    'MONTHS_SHORT': new Array("jan", "feb", "mrt", "apr", "mei", "jun", "jul", "aug", "sep", "okt", "nov", "dec"),
-    'DAYS': new Array("zondag", "maandag", "dinsdag", "woensdag", "donderdag", "vrijdag", "zaterdag"),
-    'DAYS_SHORT': new Array("zo", "ma", "di", "wo", "do", "vr", "za"),
+    'MONTHS': ["januari", "februari", "maart", "april", "mei", "juni", "juli", "augustus", "september", "oktober", "november", "december"],
+    'MONTHS_SHORT': ["jan", "feb", "mrt", "apr", "mei", "jun", "jul", "aug", "sep", "okt", "nov", "dec"],
+    'DAYS': ["zondag", "maandag", "dinsdag", "woensdag", "donderdag", "vrijdag", "zaterdag"],
+    'DAYS_SHORT': ["zo", "ma", "di", "wo", "do", "vr", "za"],
     'ZOOM_IN': "Inzoomen",
     'ZOOM_OUT': "Uitzoomen",
     'MOVE_LEFT': "Naar links",
@@ -134,3 +134,35 @@ links.locales['nl'] = {
 
 links.locales['nl_NL'] = links.locales['nl'];
 links.locales['nl_BE'] = links.locales['nl'];
+
+// Turkish ===================================================
+links.locales['tr'] = {
+    'MONTHS': ["Ocak", "Şubat", "Mart", "Nisan", "Mayıs", "Haziran", "Temmuz", "Ağustos", "Eylül", "Ekim", "Kasım", "Aralık"],
+    'MONTHS_SHORT': ["Oca", "Şub", "Mar", "Nis", "May", "Haz", "Tem", "Ağu", "Eyl", "Eki", "Kas", "Ara"],
+    'DAYS': ["Pazar", "Pazartesi", "Salı", "Çarşamba", "Perşembe", "Cuma", "Cumartesi"],
+    'DAYS_SHORT': ["Paz", "Pzt", "Sal", "Çar", "Per", "Cum", "Cmt"],
+    'ZOOM_IN': "Büyült",
+    'ZOOM_OUT': "Küçült",
+    'MOVE_LEFT': "Sola Taşı",
+    'MOVE_RIGHT': "Sağa Taşı",
+    'NEW': "Yeni",
+    'CREATE_NEW_EVENT': "Yeni etkinlik oluştur"
+};
+
+links.locales['tr_TR'] = links.locales['tr'];
+
+// Hungarian ===================================================
+links.locales['hu'] = {
+    'MONTHS': ["január", "február", "március", "április", "május", "június", "július", "augusztus", "szeptember", "október", "november", "december"],
+    'MONTHS_SHORT': ["jan", "feb", "márc", "ápr", "máj", "jún", "júl", "aug", "szep", "okt", "nov", "dec"],
+    'DAYS': ["vasárnap", "hétfő", "kedd", "szerda", "csütörtök", "péntek", "szombat"],
+    'DAYS_SHORT': ["vas", "hét", "kedd", "sze", "csü", "pé", "szo"],
+    'ZOOM_IN': "Nagyítás",
+    'ZOOM_OUT': "Kicsinyítés",
+    'MOVE_LEFT': "Balra",
+    'MOVE_RIGHT': "Jobbra",
+    'NEW': "Új",
+    'CREATE_NEW_EVENT': "Új esemény készítése"
+};
+
+links.locales['hu_HU'] = links.locales['hu'];

data/vendor/assets/javascripts/chaplinks-library/timeline/timeline.js

@@ -27,11 +27,11 @@
  * License for the specific language governing permissions and limitations under
  * the License.
  *
- * Copyright (c) 2011-2013 Almende B.V.
+ * Copyright (c) 2011-2014 Almende B.V.
  *
- * @author     Jos de Jong, <jos@almende.org>
- * @date    2013-08-20
- * @version 2.5.0
+ * @author  Jos de Jong, <jos@almende.org>
+ * @date    2014-07-28
+ * @version 2.9.0
  */
 
 /*
@@ -43,7 +43,7 @@
  * 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)
@@ -60,8 +60,8 @@
  */
 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.  
+    // important: do not use var, as "var links = {};" will overwrite
+    //            the existing links variable value with undefined in IE8, IE7.
 }
 
 
@@ -70,7 +70,7 @@ if (typeof links === 'undefined') {
  */
 if (typeof google === 'undefined') {
     google = undefined;
-    // important: do not use var, as "var google = undefined;" will overwrite 
+    // important: do not use var, as "var google = undefined;" will overwrite
     //            the existing google variable value with undefined in IE8, IE7.
 }
 
@@ -109,9 +109,11 @@ if (!Array.prototype.forEach) {
  * 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.
+ *                              be created. Normally a div element.
+ * @param {Object} options      A name/value map containing settings for the
+ *                              timeline. Optional.
  */
-links.Timeline = function(container) {
+links.Timeline = function(container, options) {
     if (!container) {
         // this call was probably only for inheritance, no constructor-code is required
         return;
@@ -136,7 +138,7 @@ links.Timeline = function(container) {
 
     this.listeners = {}; // event listener callbacks
 
-    // Initialize sizes. 
+    // Initialize sizes.
     // Needed for IE (which gives an error when you try to set an undefined
     // value in a style)
     this.size = {
@@ -170,10 +172,14 @@ links.Timeline = function(container) {
 
     this.dom.container = container;
 
+    //
+    // Let's set the default options first
+    //
     this.options = {
         'width': "100%",
         'height': "auto",
         'minHeight': 0,        // minimal height in pixels
+        'groupMinHeight': 0,
         'autoHeight': true,
 
         'eventMargin': 10,     // minimal margin between events
@@ -192,28 +198,31 @@ links.Timeline = function(container) {
         'editable': false,
         'snapEvents': true,
         'groupChangeable': true,
+        'timeChangeable': true,
 
         'showCurrentTime': true, // show a red bar displaying the current time
-        'showCustomTime': false, // show a blue, draggable bar displaying a custom time    
+        'showCustomTime': false, // show a blue, draggable bar displaying a custom time
         'showMajorLabels': true,
         'showMinorLabels': true,
         'showNavigation': false,
         'showButtonNew': false,
         'groupsOnRight': false,
+        'groupsOrder' : true,
         'axisOnTop': false,
         'stackEvents': true,
         'animate': true,
         'animateZoom': true,
         'cluster': false,
+        'clusterMaxItems': 5,
         '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"),
+        'MONTHS': ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
+        'MONTHS_SHORT': ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
+        'DAYS': ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
+        'DAYS_SHORT': ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
         'ZOOM_IN': "Zoom in",
         'ZOOM_OUT': "Zoom out",
         'MOVE_LEFT': "Move left",
@@ -221,6 +230,11 @@ links.Timeline = function(container) {
         'NEW': "New",
         'CREATE_NEW_EVENT': "Create new event"
     };
+    
+    //
+    // Now we can set the givenproperties
+    //
+    this.setOptions(options);
 
     this.clientTimeOffset = 0;    // difference between client time and the time
     // set via Timeline.setCurrentTime()
@@ -236,16 +250,17 @@ links.Timeline = function(container) {
 
     // add standard item types
     this.itemTypes = {
-        box:   links.Timeline.ItemBox,
-        range: links.Timeline.ItemRange,
-        dot:   links.Timeline.ItemDot
+        box:           links.Timeline.ItemBox,
+        range:         links.Timeline.ItemRange,
+        floatingRange: links.Timeline.ItemFloatingRange,
+        dot:           links.Timeline.ItemDot
     };
 
     // initialize data
     this.data = [];
     this.firstDraw = true;
 
-    // date interval must be initialized 
+    // date interval must be initialized
     this.setVisibleChartRange(undefined, undefined, false);
 
     // render for the first time
@@ -270,11 +285,16 @@ links.Timeline = function(container) {
  *                                 Object DataTable is defined in
  *                                 google.visualization.DataTable
  * @param {Object} options         A name/value map containing settings for the
- *                                 timeline. Optional.
+ *                                 timeline. Optional. The use of options here
+ *                                 is deprecated. Pass timeline options in the
+ *                                 constructor or use setOptions()
  */
 links.Timeline.prototype.draw = function(data, options) {
+    if (options) {
+        console.log("WARNING: Passing options in draw() is deprecated. Pass options to the constructur or use setOptions() instead!");
+    }
     this.setOptions(options);
-    
+
     if (this.options.selectable) {
         links.Timeline.addClassName(this.dom.frame, "timeline-selectable");
     }
@@ -308,7 +328,7 @@ links.Timeline.prototype.setOptions = function(options) {
                 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];
@@ -344,6 +364,15 @@ links.Timeline.prototype.setOptions = function(options) {
     this.options.autoHeight = (this.options.height === "auto");
 };
 
+/**
+ * Get options for the timeline.
+ *
+ * @return the options object
+ */
+links.Timeline.prototype.getOptions = function() {
+    return this.options;
+};
+
 /**
  * Add new type of items
  * @param {String} typeName  Name of new type
@@ -389,10 +418,10 @@ links.Timeline.mapColumnIds = function (dataTable) {
         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}
+        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;
@@ -431,7 +460,7 @@ links.Timeline.prototype.setData = function(data) {
                 '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)
+                'type':      ((cols.type != undefined)      ? data.getValue(row, cols.type)      : undefined)
             }));
         }
     }
@@ -564,6 +593,79 @@ links.Timeline.prototype.getItemIndex = function(element) {
     return index;
 };
 
+
+/**
+ * Find the cluster index from a given HTML element
+ * If no cluster index is found, undefined is returned
+ * @param {Element} element
+ * @return {Number | undefined} index
+ */
+links.Timeline.prototype.getClusterIndex = function(element) {
+    var e = element,
+        dom = this.dom,
+        frame = dom.items.frame,
+        clusters = this.clusters,
+        index = undefined;
+
+    if (this.clusters) {
+        // try to find the frame where the clusters 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 clusters
+            // retrieve its id from the array with clusters
+            for (var i = 0, iMax = clusters.length; i < iMax; i++) {
+                if (clusters[i].dom === e) {
+                    index = i;
+                    break;
+                }
+            }
+        }
+    }
+
+    return index;
+};
+
+/**
+ * Find all elements within the start and end range
+ * If no element is found, returns an empty array
+ * @param start time
+ * @param end time
+ * @return Array itemsInRange
+ */
+links.Timeline.prototype.getVisibleItems = function  (start, end) {
+    var items = this.items;
+    var itemsInRange = [];
+
+    if (items) {
+        for (var i = 0, iMax = items.length; i < iMax; i++) {
+            var item = items[i];
+            if (item.end) {
+                // Time range object // NH use getLeft and getRight here
+                if (start <= item.start && item.end <= end) {
+                    itemsInRange.push({"row": i});
+                }
+            } else {
+                // Point object
+                if (start <= item.start && item.start <= end) {
+                    itemsInRange.push({"row": i});
+                }
+            }
+        }
+    }
+
+    //     var sel = [];
+    // if (this.selection) {
+    //     sel.push({"row": this.selection.index});
+    // }
+    // return sel;
+
+    return itemsInRange;
+};
+
+
 /**
  * Set a new size for the timeline
  * @param {string} width   Width in pixels or percentage (for example "800px"
@@ -776,7 +878,6 @@ links.Timeline.prototype.render = function(options) {
     this.clusterItems();
     this.filterItems();
     this.stackItems(animate);
-
     this.recalcItems();
 
     // TODO: only repaint when resized or when filterItems or stackItems gave a change?
@@ -851,8 +952,6 @@ links.Timeline.prototype.repaintFrame = function() {
     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;
     }
@@ -870,8 +969,7 @@ links.Timeline.prototype.repaintFrame = function() {
     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.content.className = "timeline-content";
         dom.frame.appendChild(dom.content);
 
         var timelines = document.createElement("DIV");
@@ -1451,9 +1549,9 @@ links.Timeline.prototype.reflowItems = function() {
         }
 
         if (group) {
-            group.itemsHeight = group.itemsHeight ?
+            group.itemsHeight = Math.max(this.options.groupMinHeight,group.itemsHeight ?
                 Math.max(group.itemsHeight, item.height) :
-                item.height;
+                item.height);
         }
     }
 
@@ -1547,9 +1645,12 @@ links.Timeline.prototype.recalcItems = function () {
         for (i = 0, iMax = groups.length; i < iMax; i++) {
             group = groups[i];
 
-            var groupHeight = Math.max(group.labelHeight || 0, group.itemsHeight || 0);
+            //
+            // TODO: Do we want to apply a max height? how ?
+            //
+            var groupHeight = group.itemsHeight;
             resized = resized || (groupHeight != group.height);
-            group.height = groupHeight;
+            group.height = Math.max(groupHeight, options.groupMinHeight);
 
             actualHeight += groups[i].height + options.eventMargin;
         }
@@ -1577,16 +1678,6 @@ links.Timeline.prototype.recalcItems = function () {
             }
         }
 
-        // 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;
     }
 
@@ -1873,7 +1964,7 @@ links.Timeline.prototype.repaintGroups = function() {
     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
@@ -2056,8 +2147,8 @@ links.Timeline.prototype.repaintDeleteButton = function () {
         dom.items.deleteButton = deleteButton;
     }
 
-    var index = this.selection ? this.selection.index : -1,
-        item = this.selection ? this.items[index] : undefined;
+    var index = (this.selection && this.selection.index !== undefined) ? this.selection.index : -1,
+        item = (this.selection && this.selection.index !== undefined) ? this.items[index] : undefined;
     if (item && item.rendered && this.isEditable(item)) {
         var right = item.getRight(this),
             top = item.top;
@@ -2107,12 +2198,12 @@ links.Timeline.prototype.repaintDragAreas = function () {
     }
 
     // reposition left and right drag area
-    var index = this.selection ? this.selection.index : -1,
-        item = this.selection ? this.items[index] : undefined;
+    var index = (this.selection && this.selection.index !== undefined) ? this.selection.index : -1,
+        item = (this.selection && this.selection.index !== undefined) ? 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),
+        (item instanceof links.Timeline.ItemRange || item instanceof links.Timeline.ItemFloatingRange)) {
+        var left = item.getLeft(this), // NH change to getLeft
+            right = item.getRight(this), // NH change to getRight
             top = item.top,
             height = item.height;
 
@@ -2178,9 +2269,9 @@ links.Timeline.prototype.repaintNavigation = function () {
             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";            
+            addIconSpan.className = "ui-icon ui-icon-circle-plus";
             navBar.addButton.appendChild(addIconSpan);
-            
+
             var onAdd = function(event) {
                 links.Timeline.preventDefault(event);
                 links.Timeline.stopPropagation(event);
@@ -2188,11 +2279,9 @@ links.Timeline.prototype.repaintNavigation = function () {
                 // 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
+                var xstart = timeline.screenToTime(x);
                 if (options.snapEvents) {
                     timeline.step.snap(xstart);
-                    timeline.step.snap(xend);
                 }
 
                 var content = options.NEW;
@@ -2200,7 +2289,6 @@ links.Timeline.prototype.repaintNavigation = function () {
                 var preventRender = true;
                 timeline.addItem({
                     'start': xstart,
-                    'end': xend,
                     'content': content,
                     'group': group
                 }, preventRender);
@@ -2242,7 +2330,7 @@ links.Timeline.prototype.repaintNavigation = function () {
                 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);
@@ -2260,7 +2348,7 @@ links.Timeline.prototype.repaintNavigation = function () {
                 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);
@@ -2280,7 +2368,7 @@ links.Timeline.prototype.repaintNavigation = function () {
                 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);
@@ -2298,7 +2386,7 @@ links.Timeline.prototype.repaintNavigation = function () {
                 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);
@@ -2524,7 +2612,7 @@ links.Timeline.prototype.onTouchMove = function(event) {
     }
 
     if (!params.zoomed) {
-        // move 
+        // move
         this.onMouseMove(event);
     }
     else {
@@ -2628,10 +2716,12 @@ links.Timeline.prototype.onMouseDown = function(event) {
     params.itemDragRight = (params.target === dragRight);
 
     if (params.itemDragLeft || params.itemDragRight) {
-        params.itemIndex = this.selection ? this.selection.index : undefined;
+        params.itemIndex = (this.selection && this.selection.index !== undefined) ? this.selection.index : undefined;
+        delete params.clusterIndex;
     }
     else {
         params.itemIndex = this.getItemIndex(params.target);
+        params.clusterIndex = this.getClusterIndex(params.target);
     }
 
     params.customTime = (params.target === dom.customTime ||
@@ -2659,6 +2749,7 @@ links.Timeline.prototype.onMouseDown = function(event) {
             'group': this.getGroupName(group)
         });
         params.itemIndex = (this.items.length - 1);
+        delete params.clusterIndex;
         this.selectItem(params.itemIndex);
         params.itemDragRight = true;
     }
@@ -2670,8 +2761,8 @@ links.Timeline.prototype.onMouseDown = function(event) {
         params.itemStart = item.start;
         params.itemEnd = item.end;
         params.itemGroup = item.group;
-        params.itemLeft = item.start ? this.timeToScreen(item.start) : undefined;
-        params.itemRight = item.end ? this.timeToScreen(item.end) : undefined;
+        params.itemLeft = item.getLeft(this); // NH Use item.getLeft here
+        params.itemRight = item.getRight(this); // NH Use item.getRight here
     }
     else {
         this.dom.frame.style.cursor = 'move';
@@ -2741,7 +2832,7 @@ links.Timeline.prototype.onMouseMove = function (event) {
             left,
             right;
 
-        if (params.itemDragLeft) {
+        if (params.itemDragLeft && options.timeChangeable) {
             // move the start of the item
             left = params.itemLeft + diffX;
             right = params.itemRight;
@@ -2756,8 +2847,9 @@ links.Timeline.prototype.onMouseMove = function (event) {
                 left = right;
                 item.start = this.screenToTime(left);
             }
+          this.trigger('change');
         }
-        else if (params.itemDragRight) {
+        else if (params.itemDragRight && options.timeChangeable) {
             // move the end of the item
             left = params.itemLeft;
             right = params.itemRight + diffX;
@@ -2772,8 +2864,9 @@ links.Timeline.prototype.onMouseMove = function (event) {
                 right = left;
                 item.end = this.screenToTime(right);
             }
+          this.trigger('change');
         }
-        else {
+        else if (options.timeChangeable) {
             // move the item
             left = params.itemLeft + diffX;
             item.start = this.screenToTime(left);
@@ -2786,6 +2879,7 @@ links.Timeline.prototype.onMouseMove = function (event) {
                 right = left + (params.itemRight - params.itemLeft);
                 item.end = this.screenToTime(right);
             }
+            this.trigger('change');
         }
 
         item.setPosition(left, right);
@@ -2827,7 +2921,7 @@ links.Timeline.prototype.onMouseMove = function (event) {
         this.recalcConversion();
 
         // move the items by changing the left position of their frame.
-        // this is much faster than repositioning all elements individually via the 
+        // this is much faster than repositioning all elements individually via the
         // repaintFrame() function (which is done once at mouseup)
         // note that we round diffX to prevent wrong positioning on millisecond scale
         var previousLeft = params.previousLeft || 0;
@@ -2894,10 +2988,13 @@ links.Timeline.prototype.onMouseUp = function (event) {
                 'end': item.end
             });
 
-            // fire an add or change event. 
-            // Note that the change can be canceled from within an event listener if 
+            // fire an add or changed event.
+            // Note that the change can be canceled from within an event listener if
             // this listener calls the method cancelChange().
-            this.trigger(params.addItem ? 'add' : 'change');
+            this.trigger(params.addItem ? 'add' : 'changed');
+            
+            //retrieve item data again to include changes made to it in the triggered event handlers
+            item = this.items[params.itemIndex];
 
             if (params.addItem) {
                 if (this.applyAdd) {
@@ -2933,6 +3030,11 @@ links.Timeline.prototype.onMouseUp = function (event) {
                     item.group = params.itemGroup;
                     // TODO: original group should be restored too
                     item.setPosition(params.itemLeft, params.itemRight);
+
+                    this.updateData(params.itemIndex, {
+                        'start': params.itemStart,
+                        'end': params.itemEnd
+                    });
                 }
             }
 
@@ -2950,7 +3052,7 @@ links.Timeline.prototype.onMouseUp = function (event) {
 
             if (params.target === this.dom.items.deleteButton) {
                 // delete item
-                if (this.selection) {
+                if (this.selection && this.selection.index !== undefined) {
                     this.confirmDeleteItem(this.selection.index);
                 }
             }
@@ -2962,6 +3064,10 @@ links.Timeline.prototype.onMouseUp = function (event) {
                         this.trigger('select');
                     }
                 }
+                else if(params.clusterIndex != undefined) {
+                    this.selectCluster(params.clusterIndex);
+                    this.trigger('select');
+                }
                 else {
                     if (options.unselectable) {
                         this.unselectItem();
@@ -3013,10 +3119,8 @@ links.Timeline.prototype.onDblClick = function (event) {
 
             // create a new event at the current mouse position
             var xstart = this.screenToTime(x);
-            var xend = this.screenToTime(x  + size.frameWidth / 10); // add 10% of timeline width
             if (options.snapEvents) {
                 this.step.snap(xstart);
-                this.step.snap(xend);
             }
 
             var content = options.NEW;
@@ -3024,7 +3128,6 @@ links.Timeline.prototype.onDblClick = function (event) {
             var preventRender = true;
             this.addItem({
                 'start': xstart,
-                'end': xend,
                 'content': content,
                 'group': this.getGroupName(group)
             }, preventRender);
@@ -3067,7 +3170,7 @@ links.Timeline.prototype.onMouseWheel = function(event) {
         event = window.event;
     }
 
-    // retrieve delta    
+    // retrieve delta
     var delta = 0;
     if (event.wheelDelta) { /* IE/Opera. */
         delta = event.wheelDelta/120;
@@ -3081,7 +3184,7 @@ links.Timeline.prototype.onMouseWheel = function(event) {
     // Basically, delta is now positive if wheel was scrolled up,
     // and negative, if wheel was scrolled down.
     if (delta) {
-        // TODO: on FireFox, the window is not redrawn within repeated scroll-events 
+        // TODO: on FireFox, the window is not redrawn within repeated scroll-events
         // -> use a delayed redraw? Make a zoom queue?
 
         var timeline = this;
@@ -3300,8 +3403,8 @@ links.Timeline.prototype.confirmDeleteItem = function(index) {
         this.selectItem(index);
     }
 
-    // fire a delete event trigger. 
-    // Note that the delete event can be canceled from within an event listener if 
+    // fire a delete event trigger.
+    // Note that the delete event can be canceled from within an event listener if
     // this listener calls the method cancelChange().
     this.trigger('delete');
 
@@ -3323,7 +3426,7 @@ links.Timeline.prototype.deleteItem = function(index, preventRender) {
         throw "Cannot delete row, index out of range";
     }
 
-    if (this.selection) {
+    if (this.selection && this.selection.index !== undefined) {
         // adjust the selection
         if (this.selection.index == index) {
             // item to be deleted is selected
@@ -3586,6 +3689,16 @@ links.Timeline.Item.prototype.setPosition = function (left, right) {
     // Should be implemented by sub-prototype
 };
 
+/**
+ * Calculate the left position of the item
+ * @param {links.Timeline} timeline
+ * @return {Number} left
+ */
+links.Timeline.Item.prototype.getLeft = function (timeline) {
+    // Should be implemented by sub-prototype
+    return 0;
+};
+
 /**
  * Calculate the right position of the item
  * @param {links.Timeline} timeline
@@ -3871,6 +3984,27 @@ links.Timeline.ItemBox.prototype.setPosition = function (left, right) {
     }
 };
 
+/**
+ * Calculate the left position of the item
+ * @param {links.Timeline} timeline
+ * @return {Number} left
+ * @override
+ */
+links.Timeline.ItemBox.prototype.getLeft = function (timeline) {
+    var boxAlign = (timeline.options.box && timeline.options.box.align) ?
+        timeline.options.box.align : undefined;
+
+    var left = timeline.timeToScreen(this.start);
+    if (boxAlign == 'right') {
+        left = left - width;
+    }
+    else { // default or 'center'
+        left = (left - this.width / 2);
+    }
+
+    return left;
+};
+
 /**
  * Calculate the right position of the item
  * @param {links.Timeline} timeline
@@ -4080,6 +4214,16 @@ links.Timeline.ItemRange.prototype.setPosition = function (left, right) {
     }
 };
 
+/**
+ * Calculate the left position of the item
+ * @param {links.Timeline} timeline
+ * @return {Number} left
+ * @override
+ */
+links.Timeline.ItemRange.prototype.getLeft = function (timeline) {
+    return timeline.timeToScreen(this.start);
+};
+
 /**
  * Calculate the right position of the item
  * @param {links.Timeline} timeline
@@ -4100,6 +4244,237 @@ links.Timeline.ItemRange.prototype.getWidth = function (timeline) {
     return timeline.timeToScreen(this.end) - timeline.timeToScreen(this.start);
 };
 
+/**
+ * @constructor links.Timeline.ItemFloatingRange
+ * @extends links.Timeline.Item
+ * @param {Object} data       Object containing parameters start, end
+ *                            content, group, type, className, editable.
+ * @param {Object} [options]  Options to set initial property values
+ *                                {Number} top
+ *                                {Number} left
+ *                                {Number} width
+ *                                {Number} height
+ */
+links.Timeline.ItemFloatingRange = function (data, options) {
+    links.Timeline.Item.call(this, data, options);
+};
+
+links.Timeline.ItemFloatingRange.prototype = new links.Timeline.Item();
+
+/**
+ * Select the item
+ * @override
+ */
+links.Timeline.ItemFloatingRange.prototype.select = function () {
+    var dom = this.dom;
+    links.Timeline.addClassName(dom, 'timeline-event-selected ui-state-active');
+};
+
+/**
+ * Unselect the item
+ * @override
+ */
+links.Timeline.ItemFloatingRange.prototype.unselect = function () {
+    var dom = this.dom;
+    links.Timeline.removeClassName(dom, 'timeline-event-selected ui-state-active');
+};
+
+/**
+ * Creates the DOM for the item, depending on its type
+ * @return {Element | undefined}
+ * @override
+ */
+links.Timeline.ItemFloatingRange.prototype.createDOM = function () {
+    // background box
+    var divBox = document.createElement("DIV");
+    divBox.style.position = "absolute";
+
+    // contents box
+    var divContent = document.createElement("DIV");
+    divContent.className = "timeline-event-content";
+    divBox.appendChild(divContent);
+
+    this.dom = divBox;
+    this.updateDOM();
+
+    return divBox;
+};
+
+/**
+ * Append the items DOM to the given HTML container. If items DOM does not yet
+ * exist, it will be created first.
+ * @param {Element} container
+ * @override
+ */
+links.Timeline.ItemFloatingRange.prototype.showDOM = function (container) {
+    var dom = this.dom;
+    if (!dom) {
+        dom = this.createDOM();
+    }
+
+    if (dom.parentNode != container) {
+        if (dom.parentNode) {
+            // container changed. remove the item from the old container
+            this.hideDOM();
+        }
+
+        // append to the new container
+        container.appendChild(dom);
+        this.rendered = true;
+    }
+};
+
+/**
+ * Remove the items DOM from the current HTML container
+ * The DOM will be kept in memory
+ * @override
+ */
+links.Timeline.ItemFloatingRange.prototype.hideDOM = function () {
+    var dom = this.dom;
+    if (dom) {
+        if (dom.parentNode) {
+            dom.parentNode.removeChild(dom);
+        }
+        this.rendered = false;
+    }
+};
+
+/**
+ * Update the DOM of the item. This will update the content and the classes
+ * of the item
+ * @override
+ */
+links.Timeline.ItemFloatingRange.prototype.updateDOM = function () {
+    var divBox = this.dom;
+    if (divBox) {
+        // update contents
+        divBox.firstChild.innerHTML = this.content;
+
+        // update class
+        divBox.className = "timeline-event timeline-event-range ui-widget ui-state-default";
+
+        if (this.isCluster) {
+            links.Timeline.addClassName(divBox, 'timeline-event-cluster ui-widget-header');
+        }
+
+        // add item specific class name when provided
+        if (this.className) {
+            links.Timeline.addClassName(divBox, this.className);
+        }
+
+        // TODO: apply selected className?
+    }
+};
+
+/**
+ * Reposition the item, recalculate its left, top, and width, using the current
+ * range of the timeline and the timeline options. *
+ * @param {links.Timeline} timeline
+ * @override
+ */
+links.Timeline.ItemFloatingRange.prototype.updatePosition = function (timeline) {
+    var dom = this.dom;
+    if (dom) {
+        var contentWidth = timeline.size.contentWidth,
+            left = this.getLeft(timeline), // NH use getLeft
+            right = this.getRight(timeline); // NH use getRight;
+
+        // limit the width of the this, as browsers cannot draw very wide divs
+        if (left < -contentWidth) {
+            left = -contentWidth;
+        }
+        if (right > 2 * contentWidth) {
+            right = 2 * contentWidth;
+        }
+
+        dom.style.top = this.top + "px";
+        dom.style.left = left + "px";
+        //dom.style.width = Math.max(right - left - 2 * this.borderWidth, 1) + "px"; // TODO: borderWidth
+        dom.style.width = Math.max(right - left, 1) + "px";
+    }
+};
+
+/**
+ * Check if the item is visible in the timeline, and not part of a cluster
+ * @param {Number} start
+ * @param {Number} end
+ * @return {boolean} visible
+ * @override
+ */
+links.Timeline.ItemFloatingRange.prototype.isVisible = function (start, end) {
+    if (this.cluster) {
+        return false;
+    }
+
+	// NH check for no end value
+	if (this.end && this.start) {
+		return (this.end > start)
+			&& (this.start < end);
+	} else if (this.start) {
+		return (this.start < end);
+	} else if (this.end) {
+        return (this.end > start);
+    } else {return true;}
+};
+
+/**
+ * Reposition the item
+ * @param {Number} left
+ * @param {Number} right
+ * @override
+ */
+links.Timeline.ItemFloatingRange.prototype.setPosition = function (left, right) {
+    var dom = this.dom;
+
+    dom.style.left = left + 'px';
+    dom.style.width = (right - left) + 'px';
+
+    if (this.group) {
+        this.top = this.group.top;
+        dom.style.top = this.top + 'px';
+    }
+};
+
+/**
+ * Calculate the left position of the item
+ * @param {links.Timeline} timeline
+ * @return {Number} left
+ * @override
+ */
+links.Timeline.ItemFloatingRange.prototype.getLeft = function (timeline) {
+    // NH check for no start value
+	if (this.start) {
+		return timeline.timeToScreen(this.start);
+	} else {
+		return 0;
+	}
+};
+
+/**
+ * Calculate the right position of the item
+ * @param {links.Timeline} timeline
+ * @return {Number} right
+ * @override
+ */
+links.Timeline.ItemFloatingRange.prototype.getRight = function (timeline) {
+    // NH check for no end value
+	if (this.end) {
+		return timeline.timeToScreen(this.end);
+	} else {
+		return timeline.size.contentWidth;
+	}
+};
+
+/**
+ * Calculate the width of the item
+ * @param {links.Timeline} timeline
+ * @return {Number} width
+ * @override
+ */
+links.Timeline.ItemFloatingRange.prototype.getWidth = function (timeline) {
+    return this.getRight(timeline) - this.getLeft(timeline);
+};
+
 /**
  * @constructor links.Timeline.ItemDot
  * @extends links.Timeline.Item
@@ -4312,6 +4687,16 @@ links.Timeline.ItemDot.prototype.setPosition = function (left, right) {
     }
 };
 
+/**
+ * Calculate the left position of the item
+ * @param {links.Timeline} timeline
+ * @return {Number} left
+ * @override
+ */
+links.Timeline.ItemDot.prototype.getLeft = function (timeline) {
+    return timeline.timeToScreen(this.start);
+};
+
 /**
  * Calculate the right position of the item
  * @param {links.Timeline} timeline
@@ -4325,7 +4710,7 @@ links.Timeline.ItemDot.prototype.getRight = function (timeline) {
 /**
  * Retrieve the properties of an item.
  * @param {Number} index
- * @return {Object} properties  Object containing item properties:<br>
+ * @return {Object} itemData    Object containing item properties:<br>
  *                              {Date} start (required),
  *                              {Date} end (optional),
  *                              {String} content (required),
@@ -4339,28 +4724,91 @@ links.Timeline.prototype.getItem = function (index) {
         throw "Cannot get item, index out of range";
     }
 
+    // take the original data as start, includes foreign fields
+    var data = this.data,
+        itemData;
+    if (google && google.visualization &&
+        data instanceof google.visualization.DataTable) {
+        // map the datatable columns
+        var cols = links.Timeline.mapColumnIds(data);
+
+        itemData = {};
+        for (var col in cols) {
+            if (cols.hasOwnProperty(col)) {
+                itemData[col] = this.data.getValue(index, cols[col]);
+            }
+        }
+    }
+    else if (links.Timeline.isArray(this.data)) {
+        // read JSON array
+        itemData = links.Timeline.clone(this.data[index]);
+    }
+    else {
+        throw "Unknown data type. DataTable or Array expected.";
+    }
+
+    // override the data with current settings of the item (should be the same)
     var item = this.items[index];
 
-    var properties = {};
-    properties.start = new Date(item.start.valueOf());
+    itemData.start = new Date(item.start.valueOf());
     if (item.end) {
-        properties.end = new Date(item.end.valueOf());
+        itemData.end = new Date(item.end.valueOf());
     }
-    properties.content = item.content;
+    itemData.content = item.content;
     if (item.group) {
-        properties.group = this.getGroupName(item.group);
+        itemData.group = this.getGroupName(item.group);
     }
-    if ('className' in item) {
-        properties.className = this.getGroupName(item.className);
+    if (item.className) {
+        itemData.className = item.className;
     }
-    if (item.hasOwnProperty('editable') && (typeof item.editable != 'undefined')) {
-        properties.editable = item.editable;
+    if (typeof item.editable !== 'undefined') {
+        itemData.editable = item.editable;
     }
     if (item.type) {
-        properties.type = item.type;
+        itemData.type = item.type;
+    }
+
+    return itemData;
+};
+
+
+/**
+ * Retrieve the properties of a cluster.
+ * @param {Number} index
+ * @return {Object} clusterdata    Object containing cluster properties:<br>
+ *                              {Date} start (required),
+ *                              {String} type (optional)
+ *                              {Array} array with item data as is in getItem()
+ */
+links.Timeline.prototype.getCluster = function (index) {
+    if (index >= this.clusters.length) {
+        throw "Cannot get cluster, index out of range";
     }
 
-    return properties;
+    var clusterData = {},
+        cluster = this.clusters[index],
+        clusterItems = cluster.items;
+    
+    clusterData.start = new Date(cluster.start.valueOf());
+    if (cluster.type) {
+        clusterData.type = cluster.type;
+    }
+
+    // push cluster item data
+    clusterData.items = [];
+    for(var i = 0; i < clusterItems.length; i++){
+        for(var j = 0; j < this.items.length; j++){
+            // TODO could be nicer to be able to have the item index into the cluster
+            if(this.items[j] == clusterItems[i])
+            {
+                clusterData.items.push(this.getItem(j));
+                break;
+            }
+
+        }
+    }
+
+    return clusterData;
 };
 
 /**
@@ -4431,15 +4879,9 @@ links.Timeline.prototype.addItems = function (itemsData, preventRender) {
  */
 links.Timeline.prototype.createItem = function(itemData) {
     var type = itemData.type || (itemData.end ? 'range' : this.options.style);
-    var data = {
-        start: itemData.start,
-        end: itemData.end,
-        content: itemData.content,
-        className: itemData.className,
-        editable: itemData.editable,
-        group: this.getGroup(itemData.group),
-        type: type
-    };
+    var data = links.Timeline.clone(itemData);
+    data.type = type;
+    data.group = this.getGroup(itemData.group);
     // TODO: optimize this, when creating an item, all data is copied twice...
 
     // TODO: is initialTop needed?
@@ -4456,7 +4898,7 @@ links.Timeline.prototype.createItem = function(itemData) {
         return new this.itemTypes[type](data, {'top': initialTop})
     }
 
-    console.log('ERROR: Unknown event style "' + type + '"');
+    console.log('ERROR: Unknown event type "' + type + '"');
     return new links.Timeline.Item(data, {
         'top': initialTop
     });
@@ -4480,10 +4922,10 @@ links.Timeline.prototype.changeItem = function (index, itemData, preventRender)
 
     // replace item, merge the changes
     var newItem = this.createItem({
-        'start':     itemData.hasOwnProperty('start') ?     itemData.start :     oldItem.start,
-        'end':       itemData.hasOwnProperty('end') ?       itemData.end :       oldItem.end,
-        'content':   itemData.hasOwnProperty('content') ?   itemData.content :   oldItem.content,
-        'group':     itemData.hasOwnProperty('group') ?     itemData.group :     this.getGroupName(oldItem.group),
+        'start':   itemData.hasOwnProperty('start') ?   itemData.start :   oldItem.start,
+        'end':     itemData.hasOwnProperty('end') ?     itemData.end :     oldItem.end,
+        'content': itemData.hasOwnProperty('content') ? itemData.content : oldItem.content,
+        'group':   itemData.hasOwnProperty('group') ?   itemData.group :   this.getGroupName(oldItem.group),
         'className': itemData.hasOwnProperty('className') ? itemData.className : oldItem.className,
         'editable':  itemData.hasOwnProperty('editable') ?  itemData.editable :  oldItem.editable,
         'type':      itemData.hasOwnProperty('type') ?      itemData.type :      oldItem.type
@@ -4540,20 +4982,24 @@ links.Timeline.prototype.getGroup = function (groupName) {
             'content': groupName,
             'labelTop': 0,
             'lineTop': 0
-            // note: this object will lateron get addition information, 
-            //       such as height and width of the group         
+            // note: this object will lateron get addition information,
+            //       such as height and width of the group
         };
         groups.push(groupObj);
         // sort the groups
-        groups = groups.sort(function (a, b) {
-            if (a.content > b.content) {
-                return 1;
-            }
-            if (a.content < b.content) {
-                return -1;
-            }
-            return 0;
-        });
+        if (this.options.groupsOrder == true) {
+            groups = groups.sort(function (a, b) {
+                if (a.content > b.content) {
+                    return 1;
+		        }
+		        if (a.content < b.content) {
+		            return -1;
+		        }
+		        return 0;
+        	});
+        } else if (typeof(this.options.groupsOrder) == "function") {
+        	groups = groups.sort(this.options.groupsOrder)
+        }
 
         // rebuilt the groupIndexes
         for (var i = 0, iMax = groups.length; i < iMax; i++) {
@@ -4657,7 +5103,12 @@ links.Timeline.prototype.setSelection = function(selection) {
 links.Timeline.prototype.getSelection = function() {
     var sel = [];
     if (this.selection) {
-        sel.push({"row": this.selection.index});
+        if(this.selection.index !== undefined)
+        {
+            sel.push({"row": this.selection.index});
+        } else {
+            sel.push({"cluster": this.selection.cluster});
+        }
     }
     return sel;
 };
@@ -4692,6 +5143,24 @@ links.Timeline.prototype.selectItem = function(index) {
     }
 };
 
+/**
+ * Select an cluster by its index
+ * @param {Number} index
+ */
+links.Timeline.prototype.selectCluster = function(index) {
+    this.unselectItem();
+
+    this.selection = undefined;
+
+    if (this.clusters[index] != undefined) {
+        this.selection = {
+            'cluster': index
+        };
+        this.repaintDeleteButton();
+        this.repaintDragAreas();
+    }
+};
+
 /**
  * Check if an item is currently selected
  * @param {Number} index
@@ -4705,7 +5174,7 @@ links.Timeline.prototype.isSelected = function (index) {
  * Unselect the currently selected event (if any)
  */
 links.Timeline.prototype.unselectItem = function() {
-    if (this.selection) {
+    if (this.selection && this.selection.index !== undefined) {
         var item = this.items[this.selection.index];
 
         if (item && item.dom) {
@@ -4729,12 +5198,6 @@ links.Timeline.prototype.unselectItem = function() {
  *                                         defaults to false.
  */
 links.Timeline.prototype.stackItems = function(animate) {
-    if (this.groups.length > 0) {
-        // under this conditions we refuse to stack the events
-        // TODO: implement support for stacking items per group
-        return;
-    }
-
     if (animate == undefined) {
         animate = false;
     }
@@ -4785,6 +5248,29 @@ links.Timeline.prototype.stackCancelAnimation = function() {
     }
 };
 
+links.Timeline.prototype.getItemsByGroup = function(items) {
+    var itemsByGroup = {};
+    for (var i = 0; i < items.length; ++i) {
+        var item = items[i];
+        var group = "undefined";
+
+        if (item.group) {
+            if (item.group.content) {
+                group = item.group.content;
+            } else {
+                group = item.group;
+            }
+        }
+
+        if (!itemsByGroup[group]) {
+            itemsByGroup[group] = [];
+        }
+
+        itemsByGroup[group].push(item);
+    }
+
+    return itemsByGroup;
+};
 
 /**
  * Order the items in the array this.items. The default order is determined via:
@@ -4798,16 +5284,16 @@ links.Timeline.prototype.stackOrder = function(items) {
     // TODO: store the sorted items, to have less work later on
     var sortedItems = items.concat([]);
 
-    //if a customer stack order function exists, use it. 
+    //if a customer stack order function exists, use it.
     var f = this.options.customStackOrder && (typeof this.options.customStackOrder === 'function') ? this.options.customStackOrder : function (a, b)
     {
-        if ((a instanceof links.Timeline.ItemRange) &&
-            !(b instanceof links.Timeline.ItemRange)) {
+        if ((a instanceof links.Timeline.ItemRange || a instanceof links.Timeline.ItemFloatingRange) &&
+            !(b instanceof links.Timeline.ItemRange || b instanceof links.Timeline.ItemFloatingRange)) {
             return -1;
         }
 
-        if (!(a instanceof links.Timeline.ItemRange) &&
-            (b instanceof links.Timeline.ItemRange)) {
+        if (!(a instanceof links.Timeline.ItemRange || a instanceof links.Timeline.ItemFloatingRange) &&
+            (b instanceof links.Timeline.ItemRange || b instanceof links.Timeline.ItemFloatingRange)) {
             return 1;
         }
 
@@ -4826,56 +5312,83 @@ links.Timeline.prototype.stackOrder = function(items) {
  * @return {Object[]} finalItems
  */
 links.Timeline.prototype.stackCalculateFinal = function(items) {
-    var i,
-        iMax,
-        size = this.size,
-        axisTop = size.axis.top,
-        axisHeight = size.axis.height,
+    var size = this.size,
         options = this.options,
         axisOnTop = options.axisOnTop,
         eventMargin = options.eventMargin,
         eventMarginAxis = options.eventMarginAxis,
-        finalItems = [];
+        groupBase = (axisOnTop)
+                  ? size.axis.height + eventMarginAxis + eventMargin/2
+                  : size.contentHeight - eventMarginAxis - eventMargin/2,
+        groupedItems, groupFinalItems, finalItems = [];
+
+    groupedItems = this.getItemsByGroup(items);
+
+    //
+    // groupedItems contains all items by group, plus it may contain an
+    // additional "undefined" group which contains all items with no group. We
+    // first process the grouped items, and then the ungrouped
+    //
+    for (j = 0; j<this.groups.length; ++j) {
+        var group = this.groups[j];
+
+        if (!groupedItems[group.content]) {
+            if (axisOnTop) {
+                groupBase += options.groupMinHeight + eventMargin;
+            } else {
+                groupBase -= (options.groupMinHeight + eventMargin);
+            }
+            continue;
+        }
 
-    // initialize final positions
-    for (i = 0, iMax = items.length; i < iMax; i++) {
-        var item = items[i],
-            top,
-            bottom,
-            height = item.height,
-            width = item.getWidth(this),
-            right = item.getRight(this),
-            left = right - width;
+        // initialize final positions and fill finalItems
+        groupFinalItems = this.finalItemsPosition(groupedItems[group.content], groupBase, group);
+        groupFinalItems.forEach(function(item) {
+           finalItems.push(item);
+        });
 
         if (axisOnTop) {
-            top = axisHeight + eventMarginAxis + eventMargin / 2;
-        }
-        else {
-            top = axisTop - height - eventMarginAxis - eventMargin / 2;
+            groupBase += group.itemsHeight + eventMargin;
+        } else {
+            groupBase -= (group.itemsHeight + eventMargin);
         }
-        bottom = top + height;
+    }
 
-        finalItems[i] = {
-            'left': left,
-            'top': top,
-            'right': right,
-            'bottom': bottom,
-            'height': height,
-            'item': item
-        };
+    //
+    // Ungrouped items' turn now!
+    //
+    if (groupedItems["undefined"]) {
+        // initialize final positions and fill finalItems
+        groupFinalItems = this.finalItemsPosition(groupedItems["undefined"], groupBase);
+        groupFinalItems.forEach(function(item) {
+           finalItems.push(item);
+        });
     }
 
-    if (this.options.stackEvents) {
-        // calculate new, non-overlapping positions
-        //var items = sortedItems;
-        for (i = 0, iMax = finalItems.length; i < iMax; i++) {
-            //for (var i = finalItems.length - 1; i >= 0; i--) {
-            var finalItem = finalItems[i];
-            var collidingItem = null;
+    return finalItems;
+};
+
+links.Timeline.prototype.finalItemsPosition = function(items, groupBase, group) {
+    var i,
+        iMax,
+        options = this.options,
+        axisOnTop = options.axisOnTop,
+        eventMargin = options.eventMargin,
+        groupFinalItems;
+
+    // initialize final positions and fill finalItems
+    groupFinalItems = this.initialItemsPosition(items, groupBase);
+
+    // calculate new, non-overlapping positions
+    for (i = 0, iMax = groupFinalItems.length; i < iMax; i++) {
+        var finalItem = groupFinalItems[i];
+        var collidingItem = null;
+
+        if (this.options.stackEvents) {
             do {
                 // TODO: optimize checking for overlap. when there is a gap without items,
                 //  you only need to check for items from the next item on, not from zero
-                collidingItem = this.stackItemsCheckOverlap(finalItems, i, 0, i-1);
+                collidingItem = this.stackItemsCheckOverlap(groupFinalItems, i, 0, i-1);
                 if (collidingItem != null) {
                     // There is a collision. Reposition the event above the colliding element
                     if (axisOnTop) {
@@ -4888,11 +5401,54 @@ links.Timeline.prototype.stackCalculateFinal = function(items) {
                 }
             } while (collidingItem);
         }
+
+        if (group) {
+            if (axisOnTop) {
+                group.itemsHeight = (group.itemsHeight)
+                                  ? Math.max(group.itemsHeight, finalItem.bottom - groupBase)
+                                  : finalItem.height + eventMargin;
+            } else {
+                group.itemsHeight = (group.itemsHeight)
+                                  ? Math.max(group.itemsHeight, groupBase - finalItem.top)
+                                  : finalItem.height + eventMargin;
+            }
+        }
     }
 
-    return finalItems;
+    return groupFinalItems;
 };
 
+links.Timeline.prototype.initialItemsPosition = function(items, groupBase) {
+    var options = this.options,
+        axisOnTop = options.axisOnTop,
+        finalItems = [];
+
+    for (var i = 0, iMax = items.length; i < iMax; ++i) {
+        var item = items[i],
+            top,
+            bottom,
+            height = item.height,
+            width = item.getWidth(this),
+            right = item.getRight(this),
+            left = right - width;
+
+        top = (axisOnTop) ? groupBase
+                          : groupBase - height;
+
+        bottom = top + height;
+
+        finalItems.push({
+            'left': left,
+            'top': top,
+            'right': right,
+            'bottom': bottom,
+            'height': height,
+            'item': item
+        });
+    }
+
+    return finalItems;
+};
 
 /**
  * Move the events one step in the direction of their final positions
@@ -4907,7 +5463,7 @@ links.Timeline.prototype.stackMoveOneStep = function(currentItems, finalItems) {
     var arrived = true;
 
     // apply new positions animated
-    for (i = 0, iMax = finalItems.length; i < iMax; i++) {
+    for (var i = 0, iMax = finalItems.length; i < iMax; i++) {
         var finalItem = finalItems[i],
             item = finalItem.item;
 
@@ -4949,7 +5505,7 @@ links.Timeline.prototype.stackMoveOneStep = function(currentItems, finalItems) {
  */
 links.Timeline.prototype.stackMoveToFinal = function(currentItems, finalItems) {
     // Put the events directly at there final position
-    for (i = 0, iMax = finalItems.length; i < iMax; i++) {
+    for (var i = 0, iMax = finalItems.length; i < iMax; i++) {
         var finalItem = finalItems[i],
             current = finalItem.item;
 
@@ -4976,7 +5532,7 @@ links.Timeline.prototype.stackItemsCheckOverlap = function(items, itemIndex,
     var eventMargin = this.options.eventMargin,
         collision = this.collision;
 
-    // we loop from end to start, as we suppose that the chance of a 
+    // we loop from end to start, as we suppose that the chance of a
     // collision is larger for items at the end, so check these first.
     var item1 = items[itemIndex];
     for (var i = itemEnd; i >= itemStart; i--) {
@@ -5004,7 +5560,7 @@ links.Timeline.prototype.stackItemsCheckOverlap = function(items, itemIndex,
  * @return {boolean}            true if item1 and item2 collide, else false
  */
 links.Timeline.prototype.collision = function(item1, item2, margin) {
-    // set margin if not specified 
+    // set margin if not specified
     if (margin == undefined) {
         margin = 0;
     }
@@ -5059,7 +5615,7 @@ links.Timeline.prototype.clusterItems = function () {
         return;
     }
 
-    var clusters = this.clusterGenerator.getClusters(this.conversion.factor);
+    var clusters = this.clusterGenerator.getClusters(this.conversion.factor, this.options.clusterMaxItems);
     if (this.clusters != clusters) {
         // cluster level changed
         var queue = this.renderQueue;
@@ -5235,20 +5791,14 @@ links.Timeline.ClusterGenerator.prototype.filterData = function () {
  *                           defined as (windowWidth / (endDate - startDate))
  * @return {Item[]} clusters
  */
-links.Timeline.ClusterGenerator.prototype.getClusters = function (scale) {
+links.Timeline.ClusterGenerator.prototype.getClusters = function (scale, maxItems) {
     var level = -1,
         granularity = 2, // TODO: what granularity is needed for the cluster levels?
-        timeWindow = 0,  // milliseconds
-        maxItems = 5;    // TODO: do not hard code maxItems
+        timeWindow = 0;  // milliseconds
 
     if (scale > 0) {
         level = Math.round(Math.log(100 / scale) / Math.log(granularity));
         timeWindow = Math.pow(granularity, level);
-
-        // groups must have a larger time window, as the items will not be stacked
-        if (this.timeline.groups && this.timeline.groups.length) {
-            timeWindow *= 4;
-        }
     }
 
     // clear the cache when and re-filter the data when needed.
@@ -5333,7 +5883,7 @@ links.Timeline.ClusterGenerator.prototype.getClusters = function (scale) {
                             }
                             min = (min != undefined) ? Math.min(min, start) : start;
                             max = (max != undefined) ? Math.max(max, end) : end;
-                            containsRanges = containsRanges || (p instanceof links.Timeline.ItemRange);
+                            containsRanges = containsRanges || (p instanceof links.Timeline.ItemRange || p instanceof links.Timeline.ItemFloatingRange);
                             count++;
                             m++;
                         }
@@ -5643,7 +6193,7 @@ links.Timeline.StepDate.prototype.end = function () {
 links.Timeline.StepDate.prototype.next = function() {
     var prev = this.current.valueOf();
 
-    // Two cases, needed to prevent issues with switching daylight savings 
+    // Two cases, needed to prevent issues with switching daylight savings
     // (end of March and end of October)
     if (this.current.getMonth() < 6)   {
         switch (this.scale) {
@@ -5810,7 +6360,7 @@ links.Timeline.StepDate.prototype.snap = function(date) {
         if (date.getDate() > 15) {
             date.setDate(1);
             date.setMonth(date.getMonth() + 1);
-            // important: first set Date to 1, after that change the month.      
+            // important: first set Date to 1, after that change the month.
         }
         else {
             date.setDate(1);
@@ -6002,7 +6552,7 @@ links.Timeline.StepDate.prototype.addZeros = function(value, len) {
  */
 links.imageloader = (function () {
     var urls = {};  // the loaded urls
-    var callbacks = {}; // the urls currently being loaded. Each key contains 
+    var callbacks = {}; // the urls currently being loaded. Each key contains
     // an array with callbacks
 
     /**
@@ -6354,7 +6904,7 @@ links.Timeline.getPageX = function (event) {
 links.Timeline.addClassName = function(elem, className) {
     var classes = elem.className.split(' ');
     var classesToAdd = className.split(' ');
-    
+
     var added = false;
     for (var i=0; i<classesToAdd.length; i++) {
         if (classes.indexOf(classesToAdd[i]) == -1) {
@@ -6362,7 +6912,7 @@ links.Timeline.addClassName = function(elem, className) {
             added = true;
         }
     }
-    
+
     if (added) {
         elem.className = classes.join(' ');
     }
@@ -6376,7 +6926,7 @@ links.Timeline.addClassName = function(elem, className) {
 links.Timeline.removeClassName = function(elem, className) {
     var classes = elem.className.split(' ');
     var classesToRemove = className.split(' ');
-    
+
     var removed = false;
     for (var i=0; i<classesToRemove.length; i++) {
         var index = classes.indexOf(classesToRemove[i]);
@@ -6385,7 +6935,7 @@ links.Timeline.removeClassName = function(elem, className) {
             removed = true;
         }
     }
-    
+
     if (removed) {
         elem.className = classes.join(' ');
     }
@@ -6404,6 +6954,21 @@ links.Timeline.isArray = function (obj) {
     return (Object.prototype.toString.call(obj) === '[object Array]');
 };
 
+/**
+ * Shallow clone an object
+ * @param {Object} object
+ * @return {Object} clone
+ */
+links.Timeline.clone = function (object) {
+    var clone = {};
+    for (var prop in object) {
+        if (object.hasOwnProperty(prop)) {
+            clone[prop] = object[prop];
+        }
+    }
+    return clone;
+};
+
 /**
  * parse a JSON date
  * @param {Date | String | Number} date    Date object to be parsed. Can be: