--- a/src/ldt/ldt/ldt_utils/templates/front/front_search_results.html	Thu Jan 12 17:52:54 2012 +0100
+++ b/src/ldt/ldt/ldt_utils/templates/front/front_search_results.html	Thu Jan 12 18:19:23 2012 +0100
@@ -19,38 +19,74 @@
 {% block body %}
 {{block.super}}
 <script type="text/javascript">
+    var _medias = [ {% for res in results.object_list %}
+        {
+            "iri_id" : '{{ res.content.iri_id }}',
+            "duration" : {{ res.content.duration }},
+            "segments" : [ {% for segment in res.list %}
+                {
+                    "id" : '{{segment.element_id}}',
+                    "begin" : {{segment.begin}},
+                    "duration" : {{segment.duration}},
+                },{% endfor %}
+            ],
+            "stats" : [{{ res.content.stat_annotation }}],
+        },{% endfor %}
+    ];
+    function getRect(_el) {
+        var _sid = _el.id.substr(3);
+        for (var _i = 0; _i < _medias.length; _i++) {
+            for (var _j = 0; _j < _medias[_i].segments.length; _j++) {
+                if (_medias[_i].segments[_j].id == _sid) {
+                    return _medias[_i].segments[_j].rect;
+                }
+            }
+        }
+    }
     $(document).ready(function () {
-        // We draw the annotation volume for each content
-        /* Use 'html' instead of an array of values to pass options 
-        to a sparkline with data in the tag */
-        $('.graph_annotation').sparkline('html', {width: '340px',
-        										  height:'25px',
-        										  minSpotColor: false,
-        										  maxSpotColor: false,
-        										  spotColor: false,
-        										  lineWidth: '0px',
-        										  fillColor: '#adadad',
-        										  lineColor: '#adadad'});
-        
-        // We put the annotations into an object
-        var annots = [];
-        width_max = 340;
-        {% for res in results.object_list %}
-        // We get the canvas
-        var cnv = $('#{{ res.content.iri_id }}').children()[0];
-        var ctx = cnv.getContext("2d");
-        var content_dur = {{ res.content.duration }};
-            {% for segment in res.list %}
-            // We draw the segment in the canvas
-		    ctx.fillStyle = 'rgba(244,154,245,0.5)';
-            x = (width_max*{{segment.begin}})/content_dur;
-            y = 0;
-            w = (width_max*{{segment.duration}})/content_dur;;
-            h = 25;
-		    ctx.fillRect (x, y, w, h);
-            {% endfor %}
-        {% endfor %}
-        // We draw
+        $('.graph_annotation').each(function(_i) {
+            var _values = _medias[_i].stats,
+                _nb = _values.length,
+                _max = _values.reduce(function(_a,_b) {
+                    return Math.max(_a,_b);
+                }, 0),
+                _x = function(_p) {
+                    return _p * 340 / _nb;
+                },
+                _y = function(_p) {
+                    return 25 * ( 1 - _p / _max );
+                },
+                _d = _values.map(function(_v,_k) {
+                    return ( _k == 0 ?
+                        "M" + _x(_k) + " " + _y(_v) :
+                        "C" + _x(_k-.5) + " " + _y(_values[_k - 1])
+                        + " " + + _x(_k-.5) + " " + _y(_v)
+                        + " " + + _x(_k) + " " + _y(_v)
+                        ) ;
+                }).join("") + "L340 25L0 25";
+            this.innerHTML = '';
+            var _paper = new Raphael(this,340,25);
+            _paper.path(_d).attr({
+                "fill" : "#adadad",
+                "stroke" : "none"
+            });
+            var _x = function(_p) {
+                return _p * 340 / _medias[_i].duration;
+            };
+            for (var _j = 0; _j < _medias[_i].segments.length; _j++) {
+                var _s = _medias[_i].segments[_j];
+                _s.rect = _paper.rect(_x(_s.begin),0,_x(_s.duration),25).attr({
+                    "fill" : "rgb(255,120,255)",
+                    "opacity" : .5,
+                    "stroke" : "none"
+                });
+            }
+        });
+        $("li.li_segment").mouseover(function() {
+            getRect(this).attr("fill","rgb(255,120,255)");
+        }).mouseout(function() {
+            getRect(this).attr("fill","rgb(200,150,200)");
+        });
     });
 </script>
 
@@ -101,7 +137,7 @@
             <!-- Segments du média -->
                 <ul class="floatlist list_segments">
                 {% for segment in res.list %}
-                    <li class="li_segment">
+                    <li class="li_segment" id="li_{{segment.element_id}}">
                         <div class="left_segment">
                             <div class="color_zone" style="background: #f49af5;"></div>
                             <a href="{% url ldt.ldt_utils.views.lignesdetemps.index_segment segment.project_id segment.iri_id segment.ensemble_id segment.decoupage_id segment.element_id %}"><img src="{{LDT_MEDIA_PREFIX}}img/annot_icon_80x45.png" width="80" height="45" /></a>