diff -r 8ca7f2cea729 -r 10a958322a62 integration/js/treemap.js
--- a/integration/js/treemap.js	Thu Jan 24 16:58:55 2013 +0100
+++ b/integration/js/treemap.js	Tue Jan 29 13:29:21 2013 +0100
@@ -1,36 +1,3 @@
-/* SOURCE : http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript */
-
-/**
- * Converts an HSV color value to RGB. Conversion formula
- * adapted from http://en.wikipedia.org/wiki/HSV_color_space.
- * Assumes h, s, and v are contained in the set [0, 1] and
- * returns r, g, and b in the set [0, 255].
- *
- * @param   Number  h       The hue
- * @param   Number  s       The saturation
- * @param   Number  v       The value
- * @return  Array           The RGB representation
- */
-function hsvToRgb(h, s, v){
-    var r, g, b;
-
-    var i = Math.floor(h * 6);
-    var f = h * 6 - i;
-    var p = v * (1 - s);
-    var q = v * (1 - f * s);
-    var t = v * (1 - (1 - f) * s);
-
-    switch(i % 6){
-        case 0: r = v, g = t, b = p; break;
-        case 1: r = q, g = v, b = p; break;
-        case 2: r = p, g = v, b = t; break;
-        case 3: r = p, g = q, b = v; break;
-        case 4: r = t, g = p, b = v; break;
-        case 5: r = v, g = p, b = q; break;
-    }
-
-    return _([r * 255, g * 255, b * 255]).map(Math.floor);
-}
 
 $(function(){
 
@@ -135,12 +102,42 @@
         '<p class="abstract"><%= abstract %></p>'+
     '</div>'
     ).template();
+    
+    /* Templates pour la vue liste */
+   
+    var clusterListeTemplate = _(
+      '<div class="article" data-cluster-id="<%= id %>">'+
+           '<div class="inner-article clearfix">'+
+               '<h2><a title="Lire l\'article" href="#"> <%= title %> »</a></h2>'+
+               '<p class="number-article">'+
+                   '<a href="#"><%= documents_number %> articles | <%= annotations.length %> annotations </a>'+
+                   '<a title="ajouter une annotation" class="add-annotation" href="#"></a>'+
+               '</p>'+
+                '<div class="article-annotations">'+
+                   '<a title="48 annotations" class="blue" href="#" style="width:20%;"></a>'+
+                   '<a title="title" class="green" href="#" style="width:20%;"></a>'+
+                   '<a title="title" class="red" href="#" style="width:40%;"></a>'+
+                   '<a title="title" class="empty" href="#" style="width:20%;"></a>'+
+               '</div>'+
+               '<div class="article-content">'+
+                   '<p class="resume"><%= abstract %></p>'+
+                    '<ul class="links">'+
+                       '<ul>'+
+                       '<% _(documents).each(function(d) { print("<li><a href=\'" + d.url_document + "\'>" + d.title.replace(/(^.{30,60})[\s].+$/m,\'$1&hellip;\') + "</a></li>"); }) %>'+
+                       '</ul>'+
+                   '</ul>'+
+               '</div>'+
+           '</div>'+
+       '</div>'
+    ).template();
 
 
     var hTreemap = 600;//à définir
     $('#treemap').height(hTreemap);
     
     function showResults(results) {
+        $(".articles").html(_(results.clusters).reduce(function(mem, c) { return mem + clusterListeTemplate(c) },''));
+        
         var data = _(results.clusters).map(function(cluster, i) {
             var hue = (parseInt(cluster.id)%6)/6
             return {
@@ -148,7 +145,6 @@
                 label: cluster.title,
                 abstract : cluster.abstract,
                 value: parseFloat(cluster.weight),
-                color: "rgb(" + hsvToRgb(hue,.8,.8).join(",") + ")",
                 annotation_count: cluster.annotations.length,
                 image_url: cluster.url_image || false,
                 articles: cluster.documents.filter(function(article) {
@@ -202,7 +198,11 @@
             });
         });
         
-        $(".actu").hover(
+        $(".cluster").html(data.reduce(function(mem, c) {
+            return mem + '<li><a href="#" title="Afficher le cluster" data-cluster-id="' + c.id + '">' + c.label + '</a></li>'
+        }, ''));
+        
+        $(".actu, .cluster a, .article").hover(
             function() {
                 $("body").trigger("select-cluster", $(this).attr("data-cluster-id"));
             },
@@ -211,10 +211,10 @@
             }
         )
         $("body").on("select-cluster", function(e, clusterid) {
-            $(".actu[data-cluster-id='" + clusterid + "']").addClass("selected");
+            $(".actu[data-cluster-id='" + clusterid + "'], .cluster a[data-cluster-id='" + clusterid + "'], .article[data-cluster-id='" + clusterid + "']").addClass("selected");
         });
         $("body").on("unselect-cluster", function(e, clusterid) {
-            $(".actu[data-cluster-id='" + clusterid + "']").removeClass("selected");
+            $(".actu[data-cluster-id='" + clusterid + "'], .cluster a[data-cluster-id='" + clusterid + "'], .article[data-cluster-id='" + clusterid + "']").removeClass("selected");
         });
     }
     
@@ -222,20 +222,7 @@
         $.getJSON(url, showResults);
     }
     
-    renderJson("data/requete.json");
-    
-    $(".header-menu a").click(function() {
-        if ($(this).text() == "INTERNATIONAL") {
-            renderJson("data/requete_filtre_international.json");
-        }
-        if ($(this).text() == "FRANCE") {
-            renderJson("data/requete_filtre_france.json");
-        }
-        if ($(this).hasClass("home")) {
-            renderJson("data/requete.json")
-        }
-        return false;
-    });
+    renderJson("data/requete_filtre_2008.json");
 
 
     $("#liste").hide();