--- a/timeline/css/timeline.css	Tue Aug 13 16:46:38 2013 +0200
+++ b/timeline/css/timeline.css	Tue Aug 13 17:25:20 2013 +0200
@@ -119,87 +119,26 @@
     position: absolute; top: 0; height: 100%; margin-left: -1px; width: 2px; background: #f000ff;
 }
 
-.Tl-Occurrence, .Tl-Cluster, .Tl-AddOccurrence, .Ls-OccIcon {
-    width: 19px; height: 22px; background: url(../img/sprites.png); cursor: pointer;
+.Tl-Occurrence {
+    width: 85px; height: 38px; cursor: pointer; border: 2px solid rgba(255,255,255,.9);
+}
+
+.Tl-Occurrence img {
+    max-width: 100%; max-height: 100%; opacity: .6;
+}
+
+.Tl-Editing {
+    border-color: #c00000; z-index: 200;
 }
 
 .Tl-OccOnGrid, .Tl-Cluster {
-    position: absolute; margin-left: -9px; margin-top: -1px;
-}
-
-.Tl-OccInCluster {
-    float: left; position: relative;
-}
-
-.Tl-Locked {
-    position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../img/sprites.png); background-position: -57px -50px;
-}
-
-.Tl-Occnarrative {
-    background-position: 0 -50px;
-}
-
-.Tl-Occpublication {
-    background-position: -19px -50px;
-}
-
-.Tl-Occnarrative.Tl-Editing {
-    background-position: 0 -72px;
-}
-
-.Tl-Occpublication.Tl-Editing {
-    background-position: -19px -72px;
-}
-
-.Tl-Occnarrative.Tl-Occa_valider {
-    background-position: -38px -50px;
-}
-
-.Tl-Occpublication.Tl-Occa_valider {
-    background-position: -57px -50px;
-}
-
-.Tl-Occnarrative.Tl-Editing.Tl-Occa_valider {
-    background-position: -38px -72px;
-}
-
-.Tl-Occpublication.Tl-Editing.Tl-Occa_valider {
-    background-position: -57px -72px;
-}
-
-.Tl-Occnarrative.Tl-Occvalide {
-    background-position: -76px -50px;
-}
-
-.Tl-Occpublication.Tl-Occvalide {
-    background-position: -95px -50px;
-}
-
-.Tl-Occnarrative.Tl-Editing.Tl-Occvalide {
-    background-position: -76px -72px;
-}
-
-.Tl-Occpublication.Tl-Editing.Tl-Occvalide {
-    background-position: -95px -72px;
+    position: absolute; margin-left: -2px; margin-top: 4px; background: rgba(0,0,0,.9);
 }
 
 .Tl-Cluster {
     background-position: -114px -50px;
 }
 
-.Tl-Link {
-    position: absolute; left: 0; bottom: 0; width: 11px; height: 11px; background: url(../img/sprites.png) -114px -83px; display: none;
-}
-
-.Tl-ClusterCount {
-    position: absolute; right: 0; top: 0; border: 1px solid #999999; background: #333333;
-    padding: 1px 2px; font-size: 9px; color: #ffffff; border-radius: 5px;
-}
-
-.Tl-ClusterOverlay {
-    position: absolute; margin-top: -20px; height: 30px; background: url(../img/cluster-overlay.png) center;
-}
-
 .Tl-Overlay-Container {
     position: absolute; top: 0;
 }

--- a/timeline/js/timeline.js	Tue Aug 13 16:46:38 2013 +0200
+++ b/timeline/js/timeline.js	Tue Aug 13 17:25:20 2013 +0200
@@ -180,7 +180,9 @@
 Tlns.Templates.Univers = '<div class="Tl-UniversText">{{title}}</div>';
 
 Tlns.Templates.Occurrence =
-    '{{#occurrences}}<div class="Tl-Occurrence Tl-OccOnGrid Tl-Occ{{type}} Tl-Occ{{status}}" occurrence-id="{{id}}" style="left: {{x}}px; top: {{y}}px;"></div>{{/occurrences}}';
+    '{{#occurrences}}<div class="Tl-Occurrence Tl-OccOnGrid Tl-Occ{{type}} Tl-Occ{{status}}{{#editing}} Tl-Editing{{/editing}}" occurrence-id="{{id}}" style="left: {{x}}px; top: {{y}}px;">'
+    + '{{#image}}<img src="{{image}}" />{{/image}}'
+    + '</div>{{/occurrences}}';
 
 Tlns.Templates.OccurrenceTooltip = '<h3 class="Tl-Tooltip-Title">{{title}}</h3><p class="Tl-Tooltip-Date">{{formatted_date}} &mdash; {{translated_status}} &mdash; {{#jt}}Au JT{{/jt}}{{^jt}}Hors JT{{/jt}}{{#format}} &mdash; {{format}}{{/format}}</p>'
     + '<p class="Tl-Tooltip-Description">{{description}}</p>'
@@ -451,11 +453,11 @@
         _occ.y = _occ.univers.y;
     });
     var _visible = _(this.occurrences).filter(function(_occ) {
-        return (_occ.date >= _this.start_time && _occ.date <= _this.end_time && _occ.status);
+        return (_occ.date >= _this.start_time && _occ.date <= _this.end_time  && _occ.status);
     });
     
     var _moved = true, l = 0;
-    while (_moved && l < 200) {
+    while (_moved && l < 10) {
         l++;
         _moved = false;
         for (var _i = 0; _i < _visible.length; _i++) {
@@ -465,7 +467,7 @@
                     && delta < this.grid_spacing
                 ) {
                     var sign = _visible[_i].x < _visible[_j].x ? 1 : -1,
-                        add = sign * (this.cluster_spacing - delta) / 2;
+                        add = sign * (this.grid_spacing - delta) / 2;
                     _moved = true;
                     _visible[_i].x -= add;
                     _visible[_j].x += add;
@@ -501,8 +503,9 @@
         if (typeof _id !== "undefined") {
             var _occurrence = _this.getOccurrence(_id);
             if (!_this.is_dragging) {
-                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) );
+                var _html = Mustache.to_html(Tlns.Templates.OccurrenceTooltip, _occurrence),
+                    isup = (_event.pageY - _this.dragging_bounds.top) >= (.4 * _this.main_height);
+                _this.showTooltip(_occurrence.x + 42, _occurrence.y + (isup ? 10 : 20), _html,  isup);
             }
         }
     }).mouseout(function() {
@@ -557,7 +560,7 @@
     this.date = new Date(1000 * (_data.dateFirstPublication || _data.dateCreate) || Date.now);
     this.formatted_date = Tlns.Utils.dateFormat(this.date,Tlns.Defaults.Timeline.tooltip_date_format);
     this.title = _data.title;
-    this.univers_id = this.timeline.univers[0].id;
+    this.univers_id = this.timeline.univers[Math.floor(Math.random() * this.timeline.univers.length)].id;
     this.univers = this.timeline.getUnivers(this.univers_id);
     this.type = "publication";
     if (typeof _data.statut !== "undefined" || typeof this.status === "undefined") {
@@ -579,6 +582,10 @@
     if (typeof _data.typeOccurrencePublication !== "undefined" || typeof this.format === "undefined") {
         this.format = _data.typeOccurrencePublication || 'Format non défini';
     }
+    console.log(_data, _data.contentHasMedias);
+    if (_data.contentHasMedias && _data.contentHasMedias.length) {
+        this.image = _data.contentHasMedias[0].media.cinema.replace(/cinema\/[\d]+\/[\d]+/,'cinema/85/38');
+    }
     this.translated_status = Tlns.Defaults.Timeline.statuses[this.status];
 //    this.published = (_data.publication && _data.publication == "En ligne");
 //    this.locked = _data.verrouille || false;