diff -r 7bb5f89ad242 -r 43012525c832 timeline/js/timeline.js
--- a/timeline/js/timeline.js	Fri May 25 16:45:40 2012 +0200
+++ b/timeline/js/timeline.js	Tue May 29 16:16:26 2012 +0200
@@ -115,7 +115,8 @@
     sync_now: true,
     url_occurrences: '',
     occurrences: [],
-    cluster_spacing: 10
+    cluster_spacing: 10,
+    tooltip_date_format: '{{dayOfMonth}} {{shortMonthName}} {{year}} {{0hours}}:{{0minutes}}'
 }
 
 for (var _i = 0; _i < Tlns.Defaults.Timeline.timescales.length; _i++) {
@@ -128,12 +129,20 @@
     + '<div class="Tl-TopBar-Button Tl-Border-Right"><div class="Tl-TopBar-PreviousButton"></div></div><div class="Tl-TopBar-TimeSpan Tl-TopBar-TextBtn Tl-Border-Right">--/--</div>'
     + '<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-BottomPart"><ul class="Tl-UniversLabels"></ul><div class="Tl-MainPart"><div class="Tl-Layer Tl-Grid"></div><canvas class="Tl-Layer Tl-Canvas"></canvas><canvas class="Tl-Layer Tl-Linking-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-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="{{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}}';
+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;">'
+    + '{{#locked}}<div class="Tl-Locked"></div>{{/locked}}<div class="Tl-Link"{{#editing}} style="display: block"{{/editing}}></div></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}}">'
+    + '{{#locked}}<div class="Tl-Locked"></div>{{/locked}}<div class="Tl-Link"{{#editing}} style="display: block"{{/editing}}></div></div>{{/occurrences}}</div>{{/open_cluster}}';
+    
+Tlns.Templates.OccurrenceTooltip = '<h3 class="Tl-Tooltip-Title">{{title}}</h3><p class="Tl-Tooltip-Date">{{formatted_date}}</p>'
+    + '<p class="Tl-Tooltip-Description">{{description}}</p><p class="Tl-Tooltip-Characters">{{univers.mainCharacter}}{{#characters}}, {{.}}{{/characters}}</p>'
 
 /* Classes */
 
@@ -155,7 +164,7 @@
     this.$.find('.Tl-BottomPart').css("height", this.main_height + "px");
     this.$.find('.Tl-MainPart').css("width", this.main_width + "px");
     this.$.find('.Tl-Overlay-Container').css("left", (this.$.find('.Tl-BottomPart').outerWidth() - this.main_width) + "px");
-    this.$.find('.Tl-Canvas').attr({
+    this.$.find('canvas.Tl-Layer').attr({
         width: this.main_width,
         height: this.main_height
     });
@@ -253,6 +262,12 @@
                 this.editing_occurrence.editing = false;
                 this.throttledDrawGrid();
             break;
+            case "link":
+                this.editing_occurrence.editing = false;
+                this.throttledDrawGrid();
+                var _ctx = this.$.find('.Tl-Linking-Canvas')[0].getContext('2d');
+                _ctx.clearRect(0,0,this.main_width, this.main_height);
+            break;
         }
     }
     this.mouse_down = false;
@@ -284,6 +299,15 @@
             case "timeline":
                 this.setTime(this.time_at_start + Math.floor(( this.start_pos.x - _event.pageX ) / this.current_scale));
             break;
+            case "link":
+                var _ctx = this.$.find('.Tl-Linking-Canvas')[0].getContext('2d');
+                _ctx.clearRect(0,0,this.main_width, this.main_height);
+                _ctx.beginPath();
+                _ctx.strokeStyle = '#800080';
+                _ctx.moveTo(this.editing_occurrence.x,this.editing_occurrence.y + Math.floor(this.univers_height / 2));
+                _ctx.lineTo(_event.pageX - this.dragging_bounds.left, _event.pageY - this.dragging_bounds.top);
+                _ctx.stroke();
+            break;
         }
     }
 }
@@ -474,6 +498,9 @@
         }
     }
     _(_clusters).each(function(_cluster) {
+        _cluster.occurrences = _(_cluster.occurrences).sortBy(function(_o) {
+            return _o.date;
+        });
         _cluster.type = _cluster.occurrences[0].type;
         _cluster.contents = _cluster.occurrences.map(function(_o) {
             return _o.type + ":" + _o.id;
@@ -515,9 +542,7 @@
         _ctx.moveTo(_link.from_x,_link.from_y);
         _ctx.lineTo(_link.to_x,_link.to_y);
         _ctx.stroke();
-    })
-    
-    console.log(_openCluster);
+    });
     
     var _html = Mustache.to_html(Tlns.Templates.Occurrence, {
         occurrences:_(_visible).reject(function(_o) {return _o.in_cluster}),
@@ -542,18 +567,43 @@
     
     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.editing_occurrence = _this.getOccurrence(_el.attr("occurrence-type"),_el.attr("occurrence-id"));
+        if (typeof _this.dragging_type === "undefined" && typeof _this.editing_occurrence !== "undefined" && !_this.editing_occurrence.locked) {
             _this.dragging_type = "occurrence";
             _this.editing_occurrence.editing = true;
         }
     }).mouseover(function(_event) {
         var _el = $(this),
             _occurrence = _this.getOccurrence(_el.attr("occurrence-type"),_el.attr("occurrence-id"));
-        _this.showTooltip(_occurrence.x, _occurrence.y, _occurrence.title, (_event.pageY - _this.dragging_bounds.top) > (_this.main_height / 2) );
+        if (!_occurrence.locked) {
+            _el.find('.Tl-Link').show();
+        }
+        _occurrence.formatted_date = Tlns.Utils.dateFormat(_occurrence.date,_this.tooltip_date_format);
+        var _html = Mustache.to_html(Tlns.Templates.OccurrenceTooltip, _occurrence);
+        _this.showTooltip(_occurrence.x, _occurrence.y, _html, (_event.pageY - _this.dragging_bounds.top) >= (.4 * _this.main_height) );
     }).mouseout(function() {
+        var _el = $(this),
+            _occurrence = _this.getOccurrence(_el.attr("occurrence-type"),_el.attr("occurrence-id"));
         _this.hideTooltip();
+        if (!_occurrence.editing) {
+            $(this).find('.Tl-Link').hide();
+        }
+    }).mouseup(function() {
+        var _el = $(this);
+        if (_this.dragging_type == "link" && _el.attr("occurrence-type") == "narrative") {
+            _this.editing_occurrence.addDependency(_el.attr("occurrence-id"));
+        }
     });
+    
+    this.$.find('.Tl-Link').mousedown(function() {
+        var _el = $(this).parent();
+        _this.editing_occurrence = _this.getOccurrence(_el.attr("occurrence-type"),_el.attr("occurrence-id"));
+        if (typeof _this.editing_occurrence !== "undefined" && !_this.editing_occurrence.locked) {
+            _this.dragging_type = "link";
+            _this.editing_occurrence.editing = true;
+        }
+    })
+    
     this.$.find('.Tl-Cluster').click(function() {
         var _el = $(this),
             _contents = _el.attr("cluster-contents");
@@ -562,7 +612,6 @@
         } else {
             _this.open_cluster = _contents;
         }
-        console.log(_this.open_cluster);
         _this.throttledDrawGrid();
     })
 }
@@ -619,6 +668,13 @@
     this.locked = _data.verrouille || false;
     this.characters = _data.personnagesSecondaires || [];
     this.dependsOn = _data.dependDe || [];
+    this.description = _data.description || "";
+}
+
+Tlns.Classes.Occurrence.prototype.addDependency = function(_id) {
+    if (_(this.dependsOn).indexOf(_id) == -1) {
+        this.dependsOn.push(_id);
+    }
 }
 
 Tlns.Classes.Occurrence.prototype.toString = function() {