--- a/timeline/css/timeline.css	Wed May 23 18:16:27 2012 +0200
+++ b/timeline/css/timeline.css	Thu May 24 19:02:39 2012 +0200
@@ -84,7 +84,7 @@
 }
 
 .Tl-Layer {
-    position: absolute; top: 0; left: 50%; height: 100%;
+    position: absolute; top: 0; left: 0; height: 100%;
 }
 
 .Tl-Grid-Column {
@@ -115,6 +115,14 @@
     background-position: -19px -50px;
 }
 
+.Tl-Occnarrative.Tl-Editing {
+    background-position: 0 -72px;
+}
+
+.Tl-Occproduction.Tl-Editing {
+    background-position: -19px -72px;
+}
+
 .Tl-Occboth {
     background-position: -38px -50px;
 }

--- a/timeline/js/timeline.js	Wed May 23 18:16:27 2012 +0200
+++ b/timeline/js/timeline.js	Thu May 24 19:02:39 2012 +0200
@@ -128,12 +128,12 @@
     + '<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><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><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>';
 
 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}}" 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="{{#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}}';
 
 /* Classes */
 
@@ -154,7 +154,11 @@
     this.main_height = this.height - this.$.find('.Tl-TopBar').outerHeight();
     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", Math.floor(this.$.find('.Tl-BottomPart').outerWidth() - this.main_width / 2) + "px");
+    this.$.find('.Tl-Overlay-Container').css("left", (this.$.find('.Tl-BottomPart').outerWidth() - this.main_width) + "px");
+    this.$.find('.Tl-Canvas').attr({
+        width: this.main_width,
+        height: this.main_height
+    });
     var _o = this.$.find('.Tl-MainPart').offset();
     this.dragging_bounds = {
         left: _o.left,
@@ -204,8 +208,8 @@
         $(this).hide();
     })
     
-    this.throttledSetTime = _.throttle(function(_time) {
-        _this.setTime(_time)
+    this.throttledDrawGrid = _.throttle(function() {
+        _this.drawGrid();
     }, 150);
     
     /* Loading Univers */
@@ -217,17 +221,25 @@
 Tlns.Classes.Timeline.prototype.onMouseDown = function(_event) {
     this.mouse_down = true;
     this.is_dragging = false;
-    this.time_at_start = this.central_time;
     this.start_pos = {
         x: _event.pageX,
         y: _event.pageY
     };
     if (typeof this.dragging_type === "undefined") {
+        this.time_at_start = this.central_time;
         this.dragging_type = "timeline";
     }
 }
 
 Tlns.Classes.Timeline.prototype.onMouseUp = function(_event) {
+    if (this.is_dragging) {
+        switch (this.dragging_type) {
+            case "occurrence":
+                this.editing_occurrence.editing = false;
+                this.throttledDrawGrid();
+            break;
+        }
+    }
     this.mouse_down = false;
     this.is_dragging = false;
     this.dragging_type = undefined;
@@ -242,10 +254,17 @@
             && _event.pageY > this.dragging_bounds.top
             && _event.pageY < this.dragging_bounds.bottom
         ) {
-            var _newTime = Math.floor(this.time_at_start + ( this.start_pos.x - _event.pageX ) / this.current_scale);
+            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)));
+                    this.editing_occurrence.univers = this.univers[_u];
+                    this.editing_occurrence.univers_id = this.univers[_u].id;
+                    this.throttledDrawGrid();
+                break;
                 case "timeline":
-                    this.throttledSetTime(_newTime);
+                    this.setTime(this.time_at_start + _timeDelta);
                 break;
             }
         } else {
@@ -272,7 +291,7 @@
 Tlns.Classes.Timeline.prototype.setTime = function(_centralTime) {
     this.sync_now = false;
     this.central_time = _centralTime;
-    this.drawGrid();
+    this.throttledDrawGrid();
 }
 
 Tlns.Classes.Timeline.prototype.setLevel = function(_level) {
@@ -308,19 +327,19 @@
         _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.central_time) + 'px">'
+        _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>';
     }
 /*
  
     for (var _t = _roundstart; _t < _tmax; _t += _timescale.grid_interval) {
         var _isMajor = !(Math.floor((_t - _offset) / _timescale.grid_interval) % _timescale.major_interval);
-        _html += '<div class="Tl-Grid-Column' + ( _isMajor ? ' Tl-Grid-Major' : '' ) + '" style="width:' + _grid_width + 'px; left: ' + _scale * (_t - this.central_time) + 'px">'
+        _html += '<div class="Tl-Grid-Column' + ( _isMajor ? ' Tl-Grid-Major' : '' ) + '" style="width:' + _grid_width + 'px; left: ' + _scale * (_t - this.start_time) + 'px">'
         + ( _isMajor ? '<div class="Tl-Grid-Label">' + Tlns.Utils.dateFormat(_t, _timescale.date_format) + '</div>' : '' ) + '</div>';
     }
 */
     if (this.start_time <= _now && this.end_time >= _now) {
-        _html += '<div class="Tl-Grid-Now" style="left: ' + this.current_scale * (_now - this.central_time) + 'px"></div>'
+        _html += '<div class="Tl-Grid-Now" style="left: ' + this.current_scale * (_now - this.start_time) + 'px"></div>'
     }
     this.$.find('.Tl-Grid').html(_html);
     this.drawOccurrences();
@@ -385,7 +404,7 @@
         return (_occ.date >= _this.start_time && _occ.date <= _this.end_time && _occ.published);
     });
     _(_visible).each(function(_occ) {
-        _occ.x = _this.current_scale * (_occ.date - _this.central_time);
+        _occ.x = _this.current_scale * (_occ.date - _this.start_time);
         _occ.in_cluster = false;
     });
     
@@ -441,13 +460,47 @@
         }
     });
     
+    var _links = [];
+    
+    _(_visible).each(function(_occurrence) {
+        _(_occurrence.dependsOn).each(function(_dependance) {
+            var _parent = _(_visible).find(function(_o) {
+                return _o.type == "narrative" && _o.id == _dependance;
+            });
+            if (typeof _parent !== "undefined") {
+                _links.push({
+                    from_x: _occurrence.x,
+                    from_y: _occurrence.univers.y + Math.floor(_this.univers_height / 2),
+                    to_x: _parent.x,
+                    to_y: _parent.univers.y + Math.floor(_this.univers_height / 2)
+                });
+            }
+        });
+    });
+    
+    var _ctx = this.$.find('.Tl-Canvas')[0].getContext('2d');
+    _ctx.clearRect(0,0,this.main_width, this.main_height);
+    _(_links).each(function(_link) {
+        _ctx.beginPath();
+        _ctx.moveTo(_link.from_x,_link.from_y);
+        _ctx.lineTo(_link.to_x,_link.to_y);
+        _ctx.stroke();
+    })
+    
     var _html = Mustache.to_html(Tlns.Templates.Occurrence, {
         occurrences:_(_visible).reject(function(_o) {return _o.in_cluster}),
         clusters: _clusters
     });
     this.$.find('.Tl-Occurrences').html(_html);
     this.$.find('.Tl-Occurrence').mousedown(function() {
-        _this.dragging_type = "occurrence"
+        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() {
         var _el = $(this),
             _occurrence = _this.getOccurrence(_el.attr("occurrence-type"),_el.attr("occurrence-id"));

--- a/timeline/timeline.html	Wed May 23 18:16:27 2012 +0200
+++ b/timeline/timeline.html	Thu May 24 19:02:39 2012 +0200
@@ -19,7 +19,7 @@
                     url_univers: 'data/univers.json',
                     url_occurrences: 'data/occurrences.json',
                     container: "timeline",
-                    level: 2,
+                    level: 4,
                     sync_now: false,
                     central_time: Date.parse("2012-05-10T00:00:00Z")
                 });