diff -r 5d1ac260d3ee -r 4def147b1604 timeline/js/timeline.js
--- a/timeline/js/timeline.js	Thu May 24 19:02:39 2012 +0200
+++ b/timeline/js/timeline.js	Fri May 25 16:32:31 2012 +0200
@@ -115,7 +115,7 @@
     sync_now: true,
     url_occurrences: '',
     occurrences: [],
-    cluster_spacing: 9
+    cluster_spacing: 10
 }
 
 for (var _i = 0; _i < Tlns.Defaults.Timeline.timescales.length; _i++) {
@@ -129,11 +129,11 @@
     + '<div class="Tl-TopBar-Button Tl-Border-Right"><div class="Tl-TopBar-SyncButton"></div></div><div class="Tl-TopBar-Button Tl-Border-Right"><div class="Tl-TopBar-NextButton"></div></div><div class="Tl-TopBar-Spacer Tl-Border-Right"></div>'
     + '<div class="Tl-TopBar-Timescales">{{#timescales}}<div class="Tl-TopBar-Button Tl-TopBar-TextBtn Tl-Border-Right" data-level="{{level}}">{{label}}</div>{{/timescales}}</div></div>'
     + '<div class="Tl-BottomPart"><ul class="Tl-UniversLabels"></ul><div class="Tl-MainPart"><div class="Tl-Layer Tl-Grid"></div><canvas class="Tl-Layer Tl-Canvas"></canvas><div class="Tl-Layer Tl-Occurrences"></div></div>'
-    + '<div class="Tl-Overlay-Container"><div class="Tl-Overlay-Box"><div class="Tl-Overlay"><div class="Tl-Overlay-Main"></div><div class="Tl-Overlay-Tip"></div></div></div></div></div>';
+    + '<div class="Tl-Overlay-Container"><div class="Tl-Overlay-Box"><div class="Tl-Overlay"><div class="Tl-Overlay-Tip-Top"></div><div class="Tl-Overlay-Main"></div><div class="Tl-Overlay-Tip-Bottom"></div></div></div></div></div>';
 
 Tlns.Templates.Univers = '<span class="Tl-UniversText">{{title}}</span>';
 
-Tlns.Templates.Occurrence = '{{#clusters}}<div class="Tl-Cluster Tl-Occ{{type}}" style="left: {{x}}px; top: {{y}}px;" cluster-contents="{{#occurrences}}{{type}}|{{id}},{{/occurrences}}"><div class="Tl-ClusterCount">{{occurrences.length}}</div></div>{{/clusters}}{{#occurrences}}<div class="Tl-Occurrence Tl-Occ{{type}}{{#editing}} Tl-Editing{{/editing}}" occurrence-type="{{type}}" occurrence-id="{{id}}" style="left: {{x}}px; top: {{univers.y}}px;"></div>{{/occurrences}}';
+Tlns.Templates.Occurrence = '{{#clusters}}<div class="Tl-Cluster Tl-Occ{{type}}" style="left: {{x}}px; top: {{y}}px;" cluster-contents="{{contents}}"><div class="Tl-ClusterCount">{{occurrences.length}}</div></div>{{/clusters}}{{#occurrences}}<div class="Tl-Occurrence Tl-OccOnGrid Tl-Occ{{type}}{{#editing}} Tl-Editing{{/editing}}" occurrence-type="{{type}}" occurrence-id="{{id}}" style="left: {{x}}px; top: {{y}}px;"></div>{{/occurrences}}{{#open_cluster}}<div class="Tl-ClusterOverlay" style="left: {{x}}px; top: {{y}}px;">{{#occurrences}}<div class="Tl-Occurrence Tl-OccInCluster Tl-Occ{{type}}{{#editing}} Tl-Editing{{/editing}}" occurrence-type="{{type}}" occurrence-id="{{id}}"></div>{{/occurrences}}</div>{{/open_cluster}}';
 
 /* Classes */
 
@@ -167,9 +167,14 @@
         bottom: _o.top + this.$.find('.Tl-MainPart').outerHeight(),
     };
     
+    var _this = this;
+    
+    this.throttledDrawGrid = _.throttle(function() {
+        _this.drawGrid();
+    }, 150);
+    
     this.setLevel(this.level);
     
-    var _this = this;
     this.$.find('.Tl-TopBar-Timescales>div').click(function() {
         _this.setLevel($(this).attr("data-level"));
     });
@@ -202,15 +207,25 @@
         return false;
     });
     
+    this.$.find('.Tl-MainPart').mousewheel(function(_event, _delta) {
+        var _newLevel = Math.max(0,Math.min(_this.timescales.length-1, (_delta < 0 ? -1 : 1) + parseInt(_this.level)));
+        if (_newLevel != _this.level) {
+            _this.hideTooltip();
+            var _deltaX = _event.pageX - _this.dragging_bounds.left,
+                _tAtMouse = _this.timeFromMouse(_event.pageX),
+                _newScale = _this.main_width / (_this.timescales[_newLevel].span),
+                _newStart = _tAtMouse - _deltaX / _newScale;
+            _this.central_time = _newStart + _this.timescales[_newLevel].span / 2;
+            _this.setLevel(_newLevel);
+        }
+        return false;
+    });
+    
     this.$.find('.Tl-Overlay-Box').mouseover(function(_event) {
         $(this).show();
     }).mouseout(function(_event) {
         $(this).hide();
-    })
-    
-    this.throttledDrawGrid = _.throttle(function() {
-        _this.drawGrid();
-    }, 150);
+    });
     
     /* Loading Univers */
     $.getJSON(this.url_univers, function(_data) {
@@ -245,26 +260,34 @@
     this.dragging_type = undefined;
 }
 
+Tlns.Classes.Timeline.prototype.timeFromX = function(_x) {
+    return Math.max(this.start_time,Math.min(this.end_time, this.start_time + _x / this.current_scale));
+}
+
+Tlns.Classes.Timeline.prototype.timeFromMouse = function(_pageX) {
+    return this.timeFromX(_pageX - this.dragging_bounds.left);
+}
+
 Tlns.Classes.Timeline.prototype.onMouseMove = function(_event) {
     if (this.mouse_down) {
         this.is_dragging = true;
-        this.$.find('.Tl-Overlay-Box').hide();
+        this.hideTooltip();
         if (_event.pageX > this.dragging_bounds.left
             && _event.pageX < this.dragging_bounds.right
             && _event.pageY > this.dragging_bounds.top
             && _event.pageY < this.dragging_bounds.bottom
         ) {
-            var _timeDelta = Math.floor(( this.start_pos.x - _event.pageX ) / this.current_scale);
             switch (this.dragging_type) {
                 case "occurrence":
-                    this.editing_occurrence.date = this.time_at_start - _timeDelta;
-                    var _u = Math.max(0,Math.min(this.univers.length, Math.floor(this.u_at_start - (this.start_pos.y - _event.pageY) / this.univers_height)));
+                    var _d = this.timeFromMouse(_event.pageX);
+                    this.editing_occurrence.date = _d;
+                    var _u = Math.max(0,Math.min(this.univers.length, Math.floor((_event.pageY - this.dragging_bounds.top) / this.univers_height)));
                     this.editing_occurrence.univers = this.univers[_u];
                     this.editing_occurrence.univers_id = this.univers[_u].id;
                     this.throttledDrawGrid();
                 break;
                 case "timeline":
-                    this.setTime(this.time_at_start + _timeDelta);
+                    this.setTime(this.time_at_start + Math.floor(( this.start_pos.x - _event.pageX ) / this.current_scale));
                 break;
             }
         } else {
@@ -305,7 +328,7 @@
             }
         });
         this.level = _level;
-        this.drawGrid();
+        this.throttledDrawGrid();
     }
 }
 
@@ -327,8 +350,11 @@
         _html = '';
     this.$.find('.Tl-TopBar-TimeSpan').html(Tlns.Utils.dateFormat(this.start_time, _timescale.start_date_format) + ' - ' + Tlns.Utils.dateFormat(this.end_time, _timescale.end_date_format));
     for (var _t = _roundstart; _t < this.end_time; _t += _timescale.grid_interval) {
-        _html += '<div class="Tl-Grid-Column" style="width:' + _grid_width + 'px; left: ' + this.current_scale * (_t - this.start_time) + 'px">'
-        + '<div class="Tl-Grid-Label">' + Tlns.Utils.dateFormat(_t, _timescale.grid_date_format) + '</div></div>';
+        var _x = this.current_scale * (_t - this.start_time);
+        if (_x > 0) {
+            _html += '<div class="Tl-Grid-Column" style="width:' + _grid_width + 'px; left: ' + _x + 'px">'
+            + '<div class="Tl-Grid-Label">' + Tlns.Utils.dateFormat(_t, _timescale.grid_date_format) + '</div></div>';
+        }
     }
 /*
  
@@ -385,8 +411,11 @@
     _occurrence.update(_type, _data);
 }
 
-Tlns.Classes.Timeline.prototype.showTooltip = function(_x, _y, _html) {
-    this.$.find('.Tl-Overlay-Box').show()
+Tlns.Classes.Timeline.prototype.showTooltip = function(_x, _y, _html, _isUp) {
+    this.$.find('.Tl-Overlay-Box')
+        .removeClass(_isUp ? 'Tl-Overlay-Down' : 'Tl-Overlay-Up')
+        .addClass(_isUp ? 'Tl-Overlay-Up' : 'Tl-Overlay-Down')
+        .show()
         .css({
             left: _x + "px",
             top: _y + "px"
@@ -405,6 +434,7 @@
     });
     _(_visible).each(function(_occ) {
         _occ.x = _this.current_scale * (_occ.date - _this.start_time);
+        _occ.y = _occ.univers.y;
         _occ.in_cluster = false;
     });
     
@@ -424,14 +454,15 @@
             }
         }
     }
-    var _clusters = [];
+    var _clusters = [],
+        _openCluster = false;
     for (var _i = 0; _i < _visible.length; _i++) {
         for (var _j = 0; _j < _i; _j++) {
             if (_visible[_j].univers_id == _visible[_i].univers_id && _visible[_j].x == _visible[_i].x) {
                 _visible[_j].in_cluster = true;
                 _visible[_i].in_cluster = true;
                 var _x = _visible[_j].x,
-                    _y = _visible[_j].univers.y;
+                    _y = _visible[_j].y;
                     _cluster = _(_clusters).find(function(_c) { return _c.x == _x && _c.y == _y });
                 if (typeof _cluster === "undefined") {
                     _cluster = { x: _x, y: _y, occurrences: [] };
@@ -440,18 +471,24 @@
                 if ("undefined" === typeof _(_cluster.occurrences).find(function(_o) {
                     return _o.type == _visible[_j].type && _o.id == _visible[_j].id;
                 })) {
-                    _cluster.occurrences.push({type: _visible[_j].type, id: _visible[_j].id});
+                    _cluster.occurrences.push(_visible[_j]);
                 }
                 if ("undefined" === typeof _(_cluster.occurrences).find(function(_o) {
                     return _o.type == _visible[_i].type && _o.id == _visible[_i].id;
                 })) {
-                    _cluster.occurrences.push({type: _visible[_i].type, id: _visible[_i].id});
+                    _cluster.occurrences.push(_visible[_i]);
                 }
             }
         }
     }
     _(_clusters).each(function(_cluster) {
         _cluster.type = _cluster.occurrences[0].type;
+        _cluster.contents = _cluster.occurrences.map(function(_o) {
+            return _o.type + ":" + _o.id;
+        }).join("|");
+        if (_cluster.contents == _this.open_cluster) {
+            _openCluster = _cluster;
+        }
         for (var _i = 1; _i < _cluster.occurrences.length; _i++) {
             if (_cluster.occurrences[_i].type !== _cluster.type) {
                 _cluster.type = "both";
@@ -460,6 +497,7 @@
         }
     });
     
+    
     var _links = [];
     
     _(_visible).each(function(_occurrence) {
@@ -470,9 +508,9 @@
             if (typeof _parent !== "undefined") {
                 _links.push({
                     from_x: _occurrence.x,
-                    from_y: _occurrence.univers.y + Math.floor(_this.univers_height / 2),
+                    from_y: _occurrence.y + Math.floor(_this.univers_height / 2),
                     to_x: _parent.x,
-                    to_y: _parent.univers.y + Math.floor(_this.univers_height / 2)
+                    to_y: _parent.y + Math.floor(_this.univers_height / 2)
                 });
             }
         });
@@ -487,27 +525,54 @@
         _ctx.stroke();
     })
     
+    console.log(_openCluster);
+    
     var _html = Mustache.to_html(Tlns.Templates.Occurrence, {
         occurrences:_(_visible).reject(function(_o) {return _o.in_cluster}),
-        clusters: _clusters
+        clusters: _clusters,
+        open_cluster: _openCluster
     });
     this.$.find('.Tl-Occurrences').html(_html);
+    
+    
+    if (_openCluster) {
+        var _w = this.$.find('.Tl-Occurrence').width(),
+            _ww = _w * _openCluster.occurrences.length;
+        this.$.find('.Tl-ClusterOverlay').css({
+            "margin-left": - Math.floor(_ww/2) + "px",
+            width: _ww
+        });
+        _(_openCluster.occurrences).each(function(_o, _i) {
+            _o.y = _o.y - 20;
+            _o.x = _o.x - (_ww / 2) + ((_i + .5) * _w);
+        });
+    }
+    
     this.$.find('.Tl-Occurrence').mousedown(function() {
         var _el = $(this);
         _this.editing_occurrence = _occurrence = _this.getOccurrence(_el.attr("occurrence-type"),_el.attr("occurrence-id"));
         if (typeof _this.editing_occurrence !== "undefined") {
             _this.dragging_type = "occurrence";
-            _this.time_at_start = _this.editing_occurrence.date;
-            _this.u_at_start = _this.editing_occurrence.univers.index;
             _this.editing_occurrence.editing = true;
         }
-    }).mouseover(function() {
+    }).mouseover(function(_event) {
         var _el = $(this),
             _occurrence = _this.getOccurrence(_el.attr("occurrence-type"),_el.attr("occurrence-id"));
-        _this.showTooltip(_occurrence.x, _occurrence.univers.y, _occurrence.title);
+        _this.showTooltip(_occurrence.x, _occurrence.y, _occurrence.title, (_event.pageY - _this.dragging_bounds.top) > (_this.main_height / 2) );
     }).mouseout(function() {
         _this.hideTooltip();
     });
+    this.$.find('.Tl-Cluster').click(function() {
+        var _el = $(this),
+            _contents = _el.attr("cluster-contents");
+        if (_this.open_cluster == _contents) {
+            _this.open_cluster = false;
+        } else {
+            _this.open_cluster = _contents;
+        }
+        console.log(_this.open_cluster);
+        _this.throttledDrawGrid();
+    })
 }
 
 Tlns.Classes.Timeline.prototype.getUnivers = function(_id) {