diff -r 94073a2af6e1 -r 94f586daa623 integration/js/treemap.js
--- a/integration/js/treemap.js	Tue Jan 22 14:43:22 2013 +0100
+++ b/integration/js/treemap.js	Wed Jan 23 18:21:30 2013 +0100
@@ -1,6 +1,40 @@
+/* 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(){
 
-    var IDEALRATIO = 1.25;
+    var IDEALRATIO = 1.33;
 
     function cuttree(data, x, y, w, h, cut, ratio, callback) {
         
@@ -77,54 +111,19 @@
         cuttree(data, x, y, w, h, cut, bestcumul / total, squarify);
     }
     
-    /* 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);
-    }
 
     /* Templates des éléments à insérer */
    
     var articleTemplate = _(
-        '<div class="cluster-article" style="position: absolute; left: <%=x%>px; top: <%=y%>px; width: <%=w%>px; height: <%=h%>px; background: <%=color%>">'+
-            '<%=label%>'+
+        '<div class="cluster-article" style="left: <%=x%>px; top: <%=y%>px; width: <%=w%>px; height: <%=h%>px;">'+
+            '<img src="<%=image_url%>" />' +
         '</div>'
     ).template();
     var clusterTemplate = _( 
-    '<div class="actu" style="left: <%=x%>px; top: <%=y%>px; width: <%=w%>px; height: <%=h%>px; background: <%=color%>">'+
-        '<a href="#">'+
-//            '<img src="img/home-visuel-<%-i%>.jpg" alt="" />'+
-        '<%=articles%>'+
+    '<div class="actu" style="left: <%=x%>px; top: <%=y%>px; width: <%=w - 1%>px; height: <%=h - 1%>px; background: #ffffff" data-cluster-id="<%=id%>">'+
+        '<%=articles%>'+ // Pour l'image composite
+        '<img src="<%=image_url%>" />' + // Pour l'image de cluster
         '<div class="voile"></div>'+
-        '</a>'+
         '<div class="inner-actu">'+
             '<h2><a href="#"><%-label%></a></h2>'+
             '<div class="links">'+
@@ -133,6 +132,7 @@
                 '</ul>'+
             '</div>'+
         '</div>'+
+        '<p class="abstract"><%= abstract %></p>'+
     '</div>'
     ).template();
 
@@ -142,17 +142,22 @@
     
     function showResults(results) {
         var data = _(results.clusters).map(function(cluster, i) {
-            var hue = (i%6)/6
+            var hue = (parseInt(cluster.id)%6)/6
             return {
+                id: cluster.id,
                 label: cluster.title,
+                abstract : cluster.abstract,
                 value: parseFloat(cluster.weight),
                 color: "rgb(" + hsvToRgb(hue,.8,.8).join(",") + ")",
                 annotation_count: cluster.annotations.length,
-                articles: _(cluster.documents).map(function(article, j) {
+                image_url: cluster.url_image || false,
+                articles: cluster.documents.filter(function(article) {
+                    return !!article.url_image
+                })
+                .map(function(article, j) {
                     return {
-                        label: article.title,
                         value: parseFloat(article.weight),
-                        color: "rgb(" + hsvToRgb(hue,.8,.9-.1*(j%6)).join(",") + ")"
+                        image_url: article.url_image || false
                     }
                 })
             }
@@ -162,7 +167,7 @@
         });
         squarify(data,0,0,760,hTreemap);
         _(data).each(function(cluster) {
-            squarify(cluster.articles, 0, 0, cluster.w, cluster.h);
+            squarify(cluster.articles, 0, 0, cluster.w - 1, cluster.h - 1);
             _(cluster.articles).sortBy(function(d) {
                 return -d.value;
             });
@@ -174,6 +179,43 @@
             return mem + clusterTemplate(d);
         },"");
         $('#treemap #actus').html(treemapHtml);
+        
+        //redimensionnement d'image
+        
+        $(".actu img").each(function() {
+            var img = $(this),
+                div = $(this).parent();
+            img.load(function() {
+                var iw = img.width(),
+                    ih = img.height(),
+                    dw = div.width(),
+                    dh = div.height(),
+                    scale = Math.max(dw/iw, dh/ih),
+                    niw = iw * scale,
+                    nih = ih * scale;
+                img.css({
+                    width: niw,
+                    height: nih,
+                    "margin-left": (dw - niw) / 2,
+                    "margin-top": (dh - nih) / 3
+                });
+            });
+        });
+        
+        $(".actu").hover(
+            function() {
+                $("body").trigger("select-cluster", $(this).attr("data-cluster-id"));
+            },
+            function() {
+                $("body").trigger("unselect-cluster", $(this).attr("data-cluster-id"));
+            }
+        )
+        $("body").on("select-cluster", function(e, clusterid) {
+            $(".actu[data-cluster-id='" + clusterid + "']").addClass("selected");
+        });
+        $("body").on("unselect-cluster", function(e, clusterid) {
+            $(".actu[data-cluster-id='" + clusterid + "']").removeClass("selected");
+        });
     }
     
     function renderJson(url) {
@@ -194,46 +236,6 @@
         }
         return false;
     });
-    
-    //redimensionnement d'image
-/*
-     $(".actu").each(function(k,v){
-        var wActu = $(this).width();
-        var hActu = $(this).height();
-        var img = $(this).find('img');
-        img.load(function(){
-            var img = $(this);
-
-            var wImg = img.width();
-            var hImg = img.height();
-
-            var ratioImg = wImg/hImg;
-            img.css('height',hActu);
-            img.css('width',hActu*ratioImg);
-            wImg = img.width();
-            hImg = img.height();
-
-            if(wActu>wImg){
-                var ratioImg = hImg/wImg;
-                img.css('width', wActu);
-                img.css('height',wActu*ratioImg);
-                wImg = img.width();
-                hImg = img.height();
-            }
-
-            if (wImg<wActu) {
-                img.css('margin-left',(wActu-wImg)/2);
-            }else{
-                img.css('margin-left',-(wImg-wActu)/2);
-            }
-            if (hImg<hActu) {
-                img.css('margin-top',(hActu-hImg)/2);
-            }else{
-                img.css('margin-top',-(hImg-hActu)/2);
-            }
-        });
-    });
-*/
 
 
     $("#liste").hide();