--- a/timeline/js/timeline.js	Wed Jul 04 16:13:49 2012 +0200
+++ b/timeline/js/timeline.js	Fri Jul 06 18:57:20 2012 +0200
@@ -166,16 +166,25 @@
     + '<ul class="Tl-Adding"><li class="Tl-AddingTitle">Ajout d\'une occurrence</li><li><span>Narrative</span><div class="Tl-AddOccurrence Tl-Occnarrative" occurrence-type="narrative" title="Glisser sur la frise chronologique pour ajouter"></div></li>'
     + '<li><span>De Publication</span><div class="Tl-AddOccurrence Tl-Occpublication" occurrence-type="publication" title="Glisser sur la frise chronologique pour ajouter"></div></li></ul></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.List = '<div class="Ls-Main"><h2>Filtres&nbsp;:</h2><h3>Titre</h3><p><input class="Ls-Search" type="search" placeholder="Rechercher" /></p><h3>Univers&nbsp;:</h3><ul class="Ls-Univers"></ul>'
+    + '<h3>Type d\'occurrence</h3><ul class="Ls-Occtypes"><li><input type="checkbox" value="narrative" checked>Narratives</li><li><input type="checkbox" value="publication" checked>de Publication</li></ul></p>'
+    + '<h2>Occurrences&nbsp;:</h2><ul class="Ls-Occurrences"></ul></div>';
 
 Tlns.Templates.Univers = '<span class="Tl-UniversText">{{title}}</span>';
 
+Tlns.Templates.Univers_List = '{{#univers}}<li><input type="checkbox" value="{{id}}" checked>{{title}}</li>{{/univers}}';
+
 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-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-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.Occurrence_List = '{{#occurrences}}<li><h3>{{title}}</h3><p><b>Type d\'occurrence&nbsp;:</b> {{type}}</p><p>'
+    + '<b>Univers&nbsp;:</b> {{univers.title}}</p><p><b>Date&nbsp;:</b> {{formatted_date}}</p><p>{{description}}</p></li>{{/occurrences}}';
+
 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>'
 
@@ -308,6 +317,17 @@
     $.getJSON(this.url_univers, function(_data) {
         _this.onUniversLoaded(_data);
     });
+    
+    
+    
+    /* LIST */
+
+    $("body").append(Mustache.to_html(Tlns.Templates.List, this));
+    
+    $(".Ls-Main input").bind("click change keyup", function() {
+        _this.drawList();
+    });
+    
 }
 
 Tlns.Classes.Timeline.prototype.onMouseDown = function(_event) {
@@ -373,6 +393,7 @@
             case "occurrence":
                 var _d = this.timeFromMouse(_event.pageX);
                 this.editing_occurrence.date = _d;
+                this.editing_occurrence.formatted_date = Tlns.Utils.dateFormat(this.editing_occurrence.date,this.tooltip_date_format);
                 var _u = this.universFromMouse(_event.pageY);
                 this.editing_occurrence.univers = this.univers[_u];
                 this.editing_occurrence.univers_id = this.univers[_u].id;
@@ -405,6 +426,12 @@
     for(var _i = 0; _i < _data.length; _i++) {
         this.univers.push(new Tlns.Classes.Univers(_data[_i], this, _i));
     }
+    
+    $(".Ls-Univers").html(Mustache.to_html(Tlns.Templates.Univers_List, this));
+    var _this = this;
+    $(".Ls-Univers input").bind("click change keyup", function() {
+        _this.drawList();
+    });
     this.loadOccurrences();
 }
 
@@ -457,14 +484,6 @@
             + '<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.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.start_time) + 'px"></div>'
     }
@@ -495,6 +514,7 @@
     if (!this.mouse_down) {
         this.drawOccurrences();
     }
+    this.drawList();
 }
 
 Tlns.Classes.Timeline.prototype.deleteOccurrence = function(_id) {
@@ -674,7 +694,6 @@
                 _el.find('.Tl-Link').show();
             }
             if (!_this.is_dragging) {
-                _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) );
             }
@@ -718,6 +737,34 @@
     })
 }
 
+Tlns.Classes.Timeline.prototype.drawList = function() {
+    var _universfilter = $(".Ls-Univers input:checked").map(function(){return this.value}),
+        _occtypefilter = $(".Ls-Occtypes input:checked").map(function(){return this.value}),
+        _title = $(".Ls-Search").val(),
+        _titleregexp = new RegExp( "(" + _title.replace(/(\W)/gm, "\\$1") + ")", "gim" );
+    $(".Ls-Occurrences").html(
+        Mustache.to_html(
+            Tlns.Templates.Occurrence_List,
+            {
+                occurrences: this.occurrences.filter(function(_occ) {
+                    var _titletest = (!!_occ.title.match(_titleregexp)),
+                        _keep = (
+                            ( !_title || _titletest )
+                            && (_(_occtypefilter).indexOf(_occ.type) !== -1)
+                            && (_(_universfilter).indexOf(_occ.univers_id) !== -1)
+                        );
+                    return _keep;
+                })
+            }
+        )
+    );
+    if (_title) {
+        $(".Ls-Occurrences h3").each(function() {
+            $(this).html($(this).text().replace(_titleregexp, "<span style='background:yellow'>$1</span>"));
+        });
+    }
+}
+
 Tlns.Classes.Timeline.prototype.getUnivers = function(_id) {
     return _(this.univers).find(function(_univ) {
         return (_univ.id == _id);
@@ -763,6 +810,7 @@
     this.original_id = _data.id || Tlns.Utils.guid();
     this.id = _type + "_" + this.original_id;
     this.date = _data.date || _data.datePublication;
+    this.formatted_date = Tlns.Utils.dateFormat(this.date,Tlns.Defaults.Timeline.tooltip_date_format);
     this.title = _data.titre || "<untitled>";
     this.univers_id = _data.univers;
     this.univers = this.timeline.getUnivers(this.univers_id);