--- a/timeline/css/timeline.css	Mon Aug 19 12:54:37 2013 +0200
+++ b/timeline/css/timeline.css	Mon Aug 19 18:04:32 2013 +0200
@@ -83,7 +83,9 @@
 
 .Tl-UniversLabels li:before {
     content: "."; position: absolute; height: 1px; text-indent: -9999px;
-    width: 100%; top: 0; background: #DEDEDE;
+    width: 200px; top: 0; background: #DEDEDE; z-index: 5;
+    background: -moz-linear-gradient(to right, rgba(220,220,220,1) 80px, rgba(220,220,220,.1) 140px );
+    background: -webkit-linear-gradient(to right, rgba(220,220,220,1) 80%, rgba(220,220,220,.1) 140px );
 }
 
 .Tl-UniversLabels li:after {
@@ -91,7 +93,7 @@
     width: 0; right: -8px; top: 50%; margin-top: -6px;
     border-top: 6px solid transparent;
     border-bottom: 6px solid transparent;
-    border-left: 8px solid #ffffff;
+    border-left: 8px solid #ffffff; z-index: 5;
 }
 
 .Tl-UniversText {
@@ -100,7 +102,8 @@
 
 .Tl-Grid {
     position: absolute; top: 0; right: 0; bottom: 0; overflow: hidden;
-    background: -moz-linear-gradient(to right, #cccccc 0, #ffffff 3%, #ffffff 97%, #cccccc 100% )
+    background: -moz-linear-gradient(to right, #cccccc 0, #ffffff 3%, #ffffff 97%, #cccccc 100% );
+    background: -webkit-linear-gradient(to right, #cccccc 0, #ffffff 3%, #ffffff 97%, #cccccc 100% );
 }
 
 .Tl-Grid-Column {
@@ -128,7 +131,7 @@
 }
 
 .Tl-Editing {
-    border-color: #c00000; z-index: 200;
+    border-color: #c00000; z-index: 3;
 }
 
 .Tl-OccOnGrid, .Tl-Cluster {
@@ -148,7 +151,7 @@
 }
 
 .Tl-Overlay {
-    position: absolute; left: -105px; width: 210px;
+    position: absolute; left: -105px; width: 210px; z-index: 6;
 }
 
 .Tl-Overlay-Up .Tl-Overlay {
@@ -210,4 +213,38 @@
 
 .Tl-AddOccurrence {
     float: right; margin: -3px;
-}
\ No newline at end of file
+}
+
+/**************/
+
+.Tl-Detail {
+    border: 1px solid #cccccc; margin: 10px 0 0 80px; padding: 10px; text-align: left; min-height: 135px; font-size: 12px;
+}
+
+.Tl-Detail-Image {
+    float: left;
+}
+
+.Tl-Detail-Title {
+    font-size: 18px; font-weight: bold; margin-left: 145px;
+}
+
+.Tl-Detail-Description {
+    margin: 5px 0 5px 145px;
+}
+
+.Tl-Detail-Bottom {
+    margin-left: 145px; text-align: right;
+}
+
+.Tl-Detail-Date {
+    float: left; color: #666666;
+}
+
+.Tl-Detail-Read {
+    text-decoration: none; color: #000000;
+}
+
+.Tl-Detail-Read:hover {
+    text-decoration: underline;
+}

--- a/timeline/js/timeline.js	Mon Aug 19 12:54:37 2013 +0200
+++ b/timeline/js/timeline.js	Mon Aug 19 18:04:32 2013 +0200
@@ -126,7 +126,7 @@
         span : 7 * 86400 * 1000,
         grid_interval : 86400 * 1000,
         grid_date_format : '{{dayOfMonth}} {{monthName}}',
-        min_importance : 1
+        min_importance : 0
     }, {
         label : "3 jours",
         span : 3 * 86400 * 1000,
@@ -171,7 +171,8 @@
         "Cms\\Video": "Vidéo",
         "Cms\\SweetCadaver": "Cadavre exquis"
     },
-    maxtime: false
+    maxtime: false,
+    url_base: ""
 }
 
 for (var _i = 0; _i < Tlns.Defaults.Timeline.timescales.length; _i++) {
@@ -185,6 +186,7 @@
     + '<div class="Tl-MainPart"><div class="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></div>'
+    + '<div class="Tl-Details"></div>'
     
 Tlns.Templates.Univers = '<div class="Tl-UniversText">{{title}}</div>';
 
@@ -197,6 +199,10 @@
     + '<p class="Tl-Tooltip-Description">{{description}}</p>'
 //    + '<p class="Tl-Tooltip-Characters">{{univers.mainCharacter}}{{#characters}}, {{.}}{{/characters}}</p>'
 
+Tlns.Templates.OccurrenceDetails = '<div class="Tl-Detail"><img class="Tl-Detail-Image" src="{{detail_image}}" />'
+    + '<h2 class="Tl-Detail-Title">{{title}}</h2><p class="Tl-Detail-Description">{{detail_description}}</p>'
+    + '<div class="Tl-Detail-Bottom"><span class="Tl-Detail-Date">{{formatted_date}}</span><a class="Tl-Detail-Read" href="{{url}}" target="_blank">Lire la suite</a></div></div>';
+
 /* Classes */
 
 Tlns.Classes.Timeline = function(_options) {
@@ -516,6 +522,7 @@
                     _occ.editing = false;
                 });
                 _this.editing_occurrence.editing = true;
+                _this.$.find(".Tl-Details").html(Mustache.to_html(Tlns.Templates.OccurrenceDetails, _this.editing_occurrence));
             }
             _this.throttledDrawGrid();
         }
@@ -620,13 +627,17 @@
     this.format = this.timeline.class_labels[this.type];
     if (_data.contentHasMedias && _data.contentHasMedias.length) {
         this.image = _data.contentHasMedias[0].media.cinema.replace(/cinema\/[\d]+\/[\d]+/,'cinema/85/38');
+        this.detail_image = _data.contentHasMedias[0].media.carre.replace(/carre\/[\d]+\/[\d]+/,'carre/135/135');
     }
     this.translated_status = Tlns.Defaults.Timeline.statuses[this.status];
 //    this.published = (_data.publication && _data.publication == "En ligne");
 //    this.locked = _data.verrouille || false;
 //    this.characters = _data.personnagesSecondaires || [];
     var _tmp = $('<p>').html(_data.resume || "");
-    this.description = _tmp.text().trim().replace(/(\n|\r|\r\n)/mg,' ').replace(/(^.{60,80})[\s].+$/m,'$1&hellip;');
+    var trimmedDesc = _tmp.text().trim().replace(/(\n|\r|\r\n)/mg,' ');
+    this.description = trimmedDesc.replace(/(^.{60,80})[\s].+$/m,'$1&hellip;');
+    this.detail_description = trimmedDesc.replace(/(^.{360,380})[\s].+$/m,'$1&hellip;');
+    this.url = this.timeline.url_base + _data.url;
 }
 
 Tlns.Classes.Occurrence.prototype.addDependency = function(_id) {

--- a/timeline/timeline.html	Mon Aug 19 12:54:37 2013 +0200
+++ b/timeline/timeline.html	Mon Aug 19 18:04:32 2013 +0200
@@ -42,7 +42,8 @@
                     container: "timeline",
                     sync_now: false,
                     central_time: Date.parse("2013-07-18T00:00:00Z"),
-                    maxtime: Date.now()
+                    maxtime: Date.now(),
+                    url_base: "http://anarchy2.solicis.fr"
                 });
             }); 
         </script>