# HG changeset patch
# User cavaliet
# Date 1326369179 -3600
# Node ID 7872b0e9ebc9c2da421eb9107fbf048d3209052a
# Parent  e8973c3fcc9ccf1ec7e725e4e72fb334005e9797
update front search template to add annotation graph.

diff -r e8973c3fcc9c -r 7872b0e9ebc9 src/ldt/ldt/ldt_utils/templates/front/front_search_results.html
--- a/src/ldt/ldt/ldt_utils/templates/front/front_search_results.html	Thu Jan 12 12:00:06 2012 +0100
+++ b/src/ldt/ldt/ldt_utils/templates/front/front_search_results.html	Thu Jan 12 12:52:59 2012 +0100
@@ -18,11 +18,11 @@
 
 {% block body %}
 {{block.super}}
-
-
 <script type="text/javascript">
     $(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,
@@ -30,13 +30,29 @@
         										  spotColor: false,
         										  lineWidth: '0px',
         										  fillColor: '#adadad',
-        										  lineColor: '#adadad'}); 
-
-        /* Use 'html' instead of an array of values to pass options 
-        to a sparkline with data in the tag */
+        										  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
     });
-</script>	
-
+</script>
 
 {% if msg %}
 {{ msg }}
@@ -76,10 +92,9 @@
                         <p>{{res.content.duration|str_duration:"::"}}</p>
                     </div>
                     <div class="graphe_result_media">
-                    	<span class="graph_annotation">
+                    	<span id="{{ res.content.iri_id }}" class="graph_annotation">
                     	{{ res.content.stat_annotation }}
                     	</span>
-                        <!--  <img src="img/placeholder_media_graph.png" width="340" height="25" alt="graph de volume" />-->
                     </div>
                 </div>