diff -r 7d1c2c21d891 -r 0444ad28e6ba timeline/js/timeline.js
--- a/timeline/js/timeline.js	Thu Sep 19 19:34:29 2013 +0200
+++ b/timeline/js/timeline.js	Fri Sep 20 17:34:07 2013 +0200
@@ -32,7 +32,7 @@
             }
         }
     });
-}
+};
 
 Tlns.Utils.dateFormat = function(_date, _template) {
     if (typeof _date !== "object") {
@@ -53,17 +53,17 @@
         monthNumber: 1+_date.getMonth(),
         "0monthNumber": Tlns.Utils.zeroPad(1+_date.getMonth()),
         monthName: ["janvier","février","mars","avril","mai","juin","juillet","août","septembre","octobre","novembre","décembre"][_date.getMonth()],
-        shortMonthName: ["jan","fev","mar","avr","mai","jun","jul","aou","sep","oct","nov","dec"][_date.getMonth()],
+        shortMonthName: ["jan.","fev.","mar.","avr.","mai","jun.","jul.","aou.","sep.","oct.","nov.","dec."][_date.getMonth()],
         year: _date.getFullYear()
     }
     return Mustache.to_html(_template, _params);
-}
+};
 
 Tlns.Utils.guid = function() {
     return 'xxxx-xxxx-xxxx-xxxx'.replace(/x/g,function() {
         return Math.floor(Math.random()*16).toString(16);
     });
-}
+};
 
 Tlns.Utils.timeFieldProcess = function(_val) {
     var _h = 0,
@@ -80,7 +80,7 @@
         minutes: _m,
         text: Tlns.Utils.zeroPad(_h) + ':' + Tlns.Utils.zeroPad(_m)
     }
-}
+};
 
 Tlns.Utils.dateFieldProcess = function(_val) {
     var _now = new Date(),
@@ -107,7 +107,7 @@
         date: _d,
         text: Tlns.Utils.zeroPad(_d) + '/' + Tlns.Utils.zeroPad(_m) + '/' + _y
     }
-}
+};
 
 /* Defaults */
 
@@ -115,7 +115,7 @@
     email: "",
     token: "",
     container : "timeline",
-    width : 780,
+    width : 790,
     height : 225,
     min_width : 400,
     min_height : 100,
@@ -215,7 +215,7 @@
     },
     maxtime: false,
     url_base: ""
-}
+};
 
 for (var _i = 0; _i < Tlns.Defaults.Timeline.timescales.length; _i++) {
     Tlns.Defaults.Timeline.timescales[_i].level = _i;
@@ -224,11 +224,11 @@
 /* Templates */
 
 Tlns.Templates.Timeline = '<div class="Tl-Main"><div class="Tl-Grid"></div><div class="Tl-TopBar"></div>'
-    + '<div class="Tl-BottomPart"><ul class="Tl-UniversLabels"></ul>'
+    + '<div class="Tl-BottomPart"><div class="Tl-AnotherGroup"><ul class="Tl-UniversLabels"></ul>'
     + '<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></div></div></div></div>'
-    + '<div class="Tl-Details"></div>'
+    + '</div></div><div class="Tl-Slider-Container"><a class="Tl-Slider-Zoom-In" href="#"></a><div class="Tl-Slider"></div><a class="Tl-Slider-Zoom-Out" href="#"></a></div>'
+    + '<div class="Tl-Overlay-Container"><div class="Tl-Overlay-Box"><div class="Tl-Overlay"><div class="Tl-Overlay-Main"></div></div></div></div></div></div>'
+    + '<div class="Tl-Details"></div>';
     
 Tlns.Templates.Univers = '<div class="Tl-UniversText">{{title}}</div>';
 
@@ -260,20 +260,25 @@
     this.top_height = this.$.find('.Tl-TopBar').outerHeight();
     this.main_height = this.height - this.top_height;
     //this.main_height = this.height - 27;
+    var labelsWidth = this.$.find('.Tl-UniversLabels').width();
+    this.main_width = this.width - labelsWidth - this.$.find('.Tl-Slider-Container').width();
     this.$.find('.Tl-BottomPart').css("height", this.main_height + "px");
-    this.$.find('.Tl-MainPart, .Tl-Grid').css("width", this.main_width + "px");
+    this.$.find('.Tl-MainPart').css("width", this.main_width + "px");
+    this.$.find('.Tl-Grid').css({
+        "left": labelsWidth + "px",
+        "width": this.main_width + "px"
+    });
     this.$.find('.Tl-Overlay-Container').css("left", (this.$.find('.Tl-BottomPart').outerWidth() - this.main_width) + "px");
+    this.$slider = this.$.find('.Tl-Slider');
     
-    var _o = this.$.find('.Tl-MainPart').offset();
+    var $mainpart = this.$.find('.Tl-MainPart'),
+        _o = $mainpart.offset();
     this.dragging_bounds = {
         left: _o.left,
         top: _o.top,
-        right: _o.left + this.$.find('.Tl-MainPart').outerWidth(),
-        bottom: _o.top + this.$.find('.Tl-MainPart').outerHeight(),
+        right: _o.left + $mainpart.outerWidth(),
+        bottom: _o.top + $mainpart.outerHeight(),
     };
-    this.$.find('.Tl-UniversLabels').css({
-        width: this.width - this.main_width
-    });
     
     var _this = this;
     
@@ -281,24 +286,24 @@
         _this.drawGrid();
     }, 150);
     
-    this.setLevel(this.level);
+    var $scrollgroup = this.$.find('.Tl-AnotherGroup');
      
-    this.$.find('.Tl-MainPart').mousedown(function(_event) {
+    $scrollgroup.mousedown(function(_event) {
         _this.onMouseDown(_event);
         return false;
     });
     
-    this.$.find('.Tl-MainPart').mousemove(function(_event) {
+    $scrollgroup.mousemove(function(_event) {
         _this.onMouseMove(_event);
         return false;
     });
     
-    this.$.find('.Tl-MainPart').mouseup(function(_event) {
+    $scrollgroup.mouseup(function(_event) {
         _this.onMouseUp(_event);
         return false;
     });
     
-    this.$.find('.Tl-MainPart').mousewheel(function(_event, _delta) {
+    $scrollgroup.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();
@@ -319,10 +324,38 @@
         $(this).hide();
     });
     
+    this.$slider.slider({
+        orientation: "vertical",
+        min: 0,
+        max: this.timescales.length - 1,
+        value: this.level,
+        slide: function(e, ui) {
+            _this.setLevel(ui.value);
+        }
+    });
+    this.$.find('.Tl-Slider-Container').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();
+            _this.setLevel(_newLevel);
+        }
+        return false;
+    });
+    
+    $(".Tl-Slider-Zoom-In").click(function() {
+        _this.setLevel(Math.min(_this.timescales.length-1,parseInt(_this.level)+1));
+        return false;
+    });
+    $(".Tl-Slider-Zoom-Out").click(function() {
+        _this.setLevel(Math.max(0,parseInt(_this.level)-1));
+        return false;
+    });
+    
+    this.setLevel(this.level);
        
     this.onUniversLoaded(this.linelabels);
     
-}
+};
 
 Tlns.Classes.Timeline.prototype.onMouseDown = function(_event) {
     this.mouse_down = true;
@@ -335,29 +368,29 @@
         this.time_at_start = this.central_time;
         this.dragging_type = "timeline";
     }
-}
+};
 
 Tlns.Classes.Timeline.prototype.onMouseUp = function(_event) {
     this.mouse_down = false;
     this.is_dragging = false;
     this.dragging_type = undefined;
-}
+};
 
 Tlns.Classes.Timeline.prototype.timeFromX = function(_x) {
     return 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.universFromY = function(_y) {
-    return Math.max(0,Math.min(this.univers.length, Math.floor(_y / this.univers_height)))
-}
+    return Math.max(0,Math.min(this.univers.length, Math.floor(_y / this.univers_height)));
+};
 
 Tlns.Classes.Timeline.prototype.universFromMouse = function(_pageY) {
     return this.universFromY(_pageY - this.dragging_bounds.top);
-}
+};
 
 Tlns.Classes.Timeline.prototype.onMouseMove = function(_event) {
     if (this.mouse_down && !this.is_dragging) {
@@ -376,7 +409,7 @@
             break;
         }
     }
-}
+};
 
 Tlns.Classes.Timeline.prototype.onUniversLoaded = function(_data) {
     this.univers = [];
@@ -388,24 +421,25 @@
     }
     
     this.loadOccurrences();
-}
+};
 
 Tlns.Classes.Timeline.prototype.offsetTime = function(_timeOffset) {
     this.setTime(this.central_time + _timeOffset);
-}
+};
 
 Tlns.Classes.Timeline.prototype.setTime = function(_centralTime) {
     this.sync_now = false;
     this.central_time = this.maxtime ? Math.min(_centralTime, this.maxtime) : _centralTime;
     this.changeSpan();
-}
+};
 
 Tlns.Classes.Timeline.prototype.setLevel = function(_level) {
     if (_level >= 0 && _level < this.timescales.length) {
         this.level = _level;
+        this.$slider.slider("value", _level);
         this.changeSpan();
     }
-}
+};
 
 Tlns.Classes.Timeline.prototype.changeSpan = function() {
     var _now = new Date().valueOf();
@@ -417,7 +451,7 @@
     this.start_time = this.central_time - (_timescale.span / 2);
     this.end_time = this.central_time + (_timescale.span / 2);
     this.throttledDrawGrid();
-}
+};
 
 Tlns.Classes.Timeline.prototype.drawGrid = function() {
     var _now = new Date().valueOf(),
@@ -427,18 +461,22 @@
         _roundstart = Math.floor((this.start_time - _offset) / _timescale.grid_interval) * _timescale.grid_interval + _offset,
         _html = '';
     for (var _t = _roundstart; _t < this.end_time; _t += _timescale.grid_interval) {
-        var _x = this.current_scale * (_t - this.start_time);
+        var _x = this.current_scale * (_t - this.start_time),
+            isMajor = !((_t - _offset)%(24*60*60*1000));
         if (_x > 0) {
-            _html += '<div class="Tl-Grid-Column" style="width:' + _grid_width + 'px; left: ' + _x + 'px">'
+            _html += '<div class="Tl-Grid-Column' + (isMajor ? ' Tl-Grid-Major':'') + '" style="width:' + _grid_width + 'px; left: ' + _x + 'px">'
             + '<div class="Tl-Grid-Label">' + Tlns.Utils.dateFormat(_t, _timescale.grid_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.start_time) + 'px"></div>'
+        _html += '<div class="Tl-Grid-Now" style="left: ' + this.current_scale * (_now - this.start_time) + 'px"></div>';
+    }
+    if (this.editing_occurrence && this.editing_occurrence.date <= this.end_time && this.editing_occurrence.date >= this.start_time) {
+        _html += '<div class="Tl-Grid-Editing" style="left: ' + this.editing_occurrence.x + 'px"></div>';
     }
     this.$.find('.Tl-Grid').html(_html);
     this.drawOccurrences();
-}
+};
 
 Tlns.Classes.Timeline.prototype.loadOccurrences = function() {
     var _this = this;
@@ -451,7 +489,7 @@
         _this.onOccurrencesLoaded(_data);
     });
     
-}
+};
 
 Tlns.Classes.Timeline.prototype.onOccurrencesLoaded = function(_data) {
     for (var _i = 0; _i < _data.data.length; _i++) {
@@ -460,19 +498,19 @@
     if (!this.mouse_down) {
         this.drawOccurrences();
     }
-}
+};
 
 Tlns.Classes.Timeline.prototype.deleteOccurrence = function(_id) {
     this.occurrences = _(this.occurrences).reject(function(_occ) {
         return _occ.id == _id;
     });
-}
+};
 
 Tlns.Classes.Timeline.prototype.getOccurrence = function(_id) {
     return _(this.occurrences).find(function(_occ) {
         return _occ.id == _id;
     });
-}
+};
 
 Tlns.Classes.Timeline.prototype.createOrUpdateOccurrence = function(_data) {
     var _id = _data.id,
@@ -486,7 +524,7 @@
         _occurrence.update(_data);
     }
     return _occurrence;
-}
+};
 
 Tlns.Classes.Timeline.prototype.showTooltip = function(_x, _y, _html) {
     this.$.find('.Tl-Overlay-Box')
@@ -497,11 +535,11 @@
         });
     this.$.find('.Tl-Overlay-Main').html(_html);
     
-}
+};
 
 Tlns.Classes.Timeline.prototype.hideTooltip = function() {
     this.$.find('.Tl-Overlay-Box').hide();
-}
+};
 
 Tlns.Classes.Timeline.prototype.drawOccurrences = function() {
     var _this = this;
@@ -564,7 +602,7 @@
             var _occurrence = _this.getOccurrence(_id);
             if (!_this.is_dragging) {
                 var _html = Mustache.to_html(Tlns.Templates.OccurrenceTooltip, _occurrence);
-                _this.showTooltip(_occurrence.x + 19, _occurrence.y + 20, _html);
+                _this.showTooltip(_occurrence.x, _occurrence.y, _html);
             }
         }
     }).mouseout(function() {
@@ -576,13 +614,13 @@
         }
     });
     
-}
+};
 
 Tlns.Classes.Timeline.prototype.getUnivers = function(_id) {
     return _(this.univers).find(function(_univ) {
         return (_univ.id == _id);
     });
-}
+};
 
 /*
  * Univers
@@ -602,7 +640,7 @@
     
     var txtdiv = this.$label.find(".Tl-UniversText");
     txtdiv.css("margin-top", Math.floor((_timeline.univers_height - txtdiv.height()) / 2));
-}
+};
 
 /*
  * Occurrence
@@ -610,7 +648,7 @@
 
 Tlns.Classes.Occurrence = function(_timeline) {
     this.timeline = _timeline;
-}
+};
 
 Tlns.Classes.Occurrence.prototype.update = function(_data) {
     this.original_data = _data;
@@ -622,9 +660,12 @@
     this.importance = _data.importance;
     var typeinfo = this.timeline.class_info[_data.__CLASS__];
     this.univers_id = typeinfo.univers_id;
-    if (_data.contentHasMedias && _data.contentHasMedias.length) {
-        this.image = _data.contentHasMedias[0].media.carre.replace(/carre\/[\d]+\/[\d]+/,'carre/32/32');
-        this.detail_image = _data.contentHasMedias[0].media.carre.replace(/carre\/[\d]+\/[\d]+/,'carre/135/135');
+    var media = _(_data.contentHasMedias).find(function(m) {
+        return !!m.media.carre;
+    });
+    if (media) {
+        this.image = media.media.carre.replace(/carre\/[\d]+\/[\d]+/,'carre/32/32');
+        this.detail_image = media.media.carre.replace(/carre\/[\d]+\/[\d]+/,'carre/135/135');
     }
     if (typeinfo.picto) {
         this.image = this.timeline.picto_url + typeinfo.picto;
@@ -639,20 +680,8 @@
     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) {
-    if (_(this.dependsOn).indexOf(_id) == -1) {
-        this.dependsOn.push(_id);
-    }
-}
-
-Tlns.Classes.Occurrence.prototype.removeDependency = function(_id) {
-    this.dependsOn = _(this.dependsOn).reject(function(_n) {
-        return _n == _id;
-    });
-}
+};
 
 Tlns.Classes.Occurrence.prototype.toString = function() {
     return "Occurrence " + this.type + ': "' + this.title + '"';
-}
+};