diff -r bad0e6c60b63 -r 3848e1813a30 alcatel/static/js/treemap.js
--- a/alcatel/static/js/treemap.js	Mon Jul 22 14:56:35 2013 +0200
+++ b/alcatel/static/js/treemap.js	Wed Aug 14 16:36:41 2013 +0200
@@ -1,146 +1,384 @@
-/* Génération de données aléatoires */
+//$(function(){
 
-var data = [],
-    startcolor = [ 0, 0, 255 ],
-    endcolor = [ 255, 255, 0 ]
-    elementcount = 8;
+    var IDEALRATIO = 1.33;
+		
+    function cuttree(data, x, y, w, h, cut, ratio, callback) {
+        
+        function f(subdata, subx, suby, subw, subh) {
+            if (subdata.length == 1) {
+                subdata[0].x = subx;
+                subdata[0].y = suby;
+                subdata[0].w = subw;
+                subdata[0].h = subh;
+            } else {
+                callback(subdata, subx, suby, subw, subh)
+            }
+        }
+        
+        var first = _(data).first(cut), rest = _(data).rest(cut);
+        if (!first.length || !rest.length) {
+            return;
+        }
+        if (w/h > IDEALRATIO) {
+            var leftw = w * ratio;
+            f(first, x, y, leftw, h);
+            f(rest, x + leftw, y, w - leftw, h);
+        } else {
+            var toph = h * ratio;
+            f(first, x, y, w, toph);
+            f(rest, x, y + toph, w, h - toph);
+        }
+    }
 
-for (var i = 0; i < elementcount; i++) {
-    var r = i/elementcount,
-        col = _(endcolor).map(function(e,i) {
-            var s = startcolor[i]
-            return Math.floor(r*e + (1-r)*s)
-        });
-    data.push({
-        label: "Cluster " + (1+i),
-        i: i+1,
-        color: "rgb("+col.join(",")+")",
-        value: 1+Math.pow(Math.random(),2)*5
-    });
-}
-
-/* Génération du Treemap */
+    function pivot(data, x, y, w, h) {
+        if (data.length == 1) {
+            data[0].x = x;
+            data[0].y = x;
+            data[0].w = w;
+            data[0].h = h;
+            return;
+        }
+        var cut = 1, cumul = 0, bestcumul = 0, total = _(data).reduce(function(a,b){return a+b.value},0), bestcut = Infinity;
+        for (var i = 0; i < data.length - 1; i++) {
+            cumul += data[i].value;
+            var delta = Math.abs(cumul - total/2);
+            if (delta < bestcut) {
+                bestcut = delta;
+                bestcumul = cumul;
+                cut = i+1;
+            } else {
+                break;
+            }
+        }
+        cuttree(data, x, y, w, h, cut, bestcumul / total, pivot);
+    }
 
-data = _(data).sortBy(function(d) { return -d.value; });
-
-var IDEALRATIO = 1.25;
-
-function cuttree(data, x, y, w, h, cut, ratio, callback) {
-    
-    function f(subdata, subx, suby, subw, subh) {
-        if (subdata.length == 1) {
-            subdata[0].x = subx;
-            subdata[0].y = suby;
-            subdata[0].w = subw;
-            subdata[0].h = subh;
-        } else {
-            callback(subdata, subx, suby, subw, subh)
+    function squarify(data, x, y, w, h) {
+        if (data.length == 1) {
+            data[0].x = x;
+            data[0].y = x;
+            data[0].w = w;
+            data[0].h = h;
+            return;
         }
+        var cut = 1, cumul = 0, bestcumul = 0, total = _(data).reduce(function(a,b){return a+b.value},0), bestcut = Infinity;
+        for (var i = 0; i < data.length - 1; i++) {
+            cumul += data[i].value;
+            cuttree(data, x, y, w, h, i+1, cumul / total, pivot);
+            var ratio = Math.abs(Math.log(IDEALRATIO*data[0].h/data[0].w));
+            if (ratio < bestcut) {
+                bestcut = ratio;
+                bestcumul = cumul;
+                cut = i+1;
+            } else {
+                break;
+            }
+        }
+        cuttree(data, x, y, w, h, cut, bestcumul / total, squarify);
     }
     
-    var first = _(data).first(cut), rest = _(data).rest(cut);
-    if (!first.length || !rest.length) {
-        return;
-    }
-    if (w/h > IDEALRATIO) {
-        var leftw = w * ratio;
-        f(first, x, y, leftw, h);
-        f(rest, x + leftw, y, w - leftw, h);
-    } else {
-        var toph = h * ratio;
-        f(first, x, y, w, toph);
-        f(rest, x, y + toph, w, h - toph);
-    }
-}
 
-function pivot(data, x, y, w, h) {
-    var cut = 1, cumul = 0, bestcumul = 0, total = _(data).reduce(function(a,b){return a+b.value},0), bestcut = Infinity;
-    for (var i = 0; i < data.length - 1; i++) {
-        cumul += data[i].value;
-        var delta = Math.abs(cumul - total/2);
-        if (delta < bestcut) {
-            bestcut = delta;
-            bestcumul = cumul;
-            cut = i+1;
-        } else {
-            break;
-        }
-    }
-    cuttree(data, x, y, w, h, cut, bestcumul / total, pivot);
-}
-
-function squarify(data, x, y, w, h) {
-    var cut = 1, cumul = 0, bestcumul = 0, total = _(data).reduce(function(a,b){return a+b.value},0), bestcut = Infinity;
-    for (var i = 0; i < data.length - 1; i++) {
-        cumul += data[i].value;
-        cuttree(data, x, y, w, h, i+1, cumul / total, pivot);
-        var ratio = Math.abs(Math.log(IDEALRATIO*data[0].h/data[0].w));
-        if (ratio < bestcut) {
-            bestcut = ratio;
-            bestcumul = cumul;
-            cut = i+1;
-        } else {
-            break;
-        }
-    }
-    cuttree(data, x, y, w, h, cut, bestcumul / total, squarify);
-}
-
-/* Template des éléments à insérer */
-var actu = 
-    '<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="" />'+
-        '</a>'+
+    /* Templates des éléments à insérer */
+   
+    var articleTemplate = _(
+        '<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 - 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>'+
         '<div class="inner-actu">'+
-            '<h2><a href="#"><%-label%></a></h2>'+
+            '<h2><a href="http://localhost:8000/<%=query_id%>/<%=id%>/0/12/0"><%-label%></a></h2>'+
             '<div class="links">'+
                 '<ul>'+
-                    '<li><a href="#" title="Supprimer le cluster" class="trash"></a></li>'+
-                    '<li><a href="#" title="317 Annotations sur ce cluster" class="file"><span>317</span></a></li>'+
-                    '<li><a href="#" title="Ajouter une annotation au cluster" class="comment"></a></li>'+
+                    '<li><a href="#" title="<%=annotation_count%> Annotations sur ce cluster" class="file"><span><%=annotation_count%></span></a></li>'+
+                '</ul>'+
+            '</div>'+
+        '</div>'+
+        '<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 href="http://localhost:8000/<%=query_id%>/<%=id%>/0/12/0" title="Lire l\'article" > <%= title %> »</a></h2>'+
+			   '<p class="number-article">'+
+                   '<a href="http://localhost:8000/<%=query_id%>/<%=id%>/0/12/0"><%= 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 clusterListeTemplateDossierDoc = _(
+      '<div class="article" data-cluster-id="<%= id %>">'+
+           '<div class="inner-article clearfix">'+
+               '<h2><a href="http://localhost:8000/documentary_files/<%=user%>/<%=id%>/0/12/<%=doc_id%>" title="Lire l\'article" > <%= title %> »</a></h2>'+
+			   '<p class="number-article">'+
+                   '<a href="http://localhost:8000/documentary_files/<%=user%>/<%=id%>/0/12/<%=doc_id%>"><%= 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 clusterTemplateDossierDoc = _( 
+    '<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>'+
+        '<div class="inner-actu">'+
+            '<h2><a href="http://localhost:8000/documentary_files/<%=user%>/<%=id%>/0/12/<%=doc_id%>"><%-label%></a></h2>'+
+            '<div class="links">'+
+                '<ul>'+
+                    '<li><a href="#" title="<%=annotation_count%> Annotations sur ce cluster" class="file"><span><%=annotation_count%></span></a></li>'+
                 '</ul>'+
             '</div>'+
         '</div>'+
-    '</div>';
-var tmpl = _.template(actu);
-
-squarify(data,0,0,760,358);
-
-document.getElementById('treemap1').innerHTML = _(data).reduce(function(mem, d) {
-    return mem + tmpl(d);
-},"");
+        '<p class="abstract"><%= abstract %></p>'+
+    '</div>'
+    ).template();
+	/* var clusterListeTemplate = _(
+      '<div class="article" data-cluster-id="<%= id %>">'+
+           '<div class="inner-article clearfix">'+
+               '<h2><a onClick="getDocumentsWithAnnotations();" title="Lire l\'article" style="cursor:pointer;"> <%= title %> »</a></h2> <form id="ajaxgetdocuments" method="post" action="/<%=query_id%>/<%=id%>/0/10"> <input type="hidden" id="requestType"  name="requestType" value="documents"/></form>'+
+			   '<p class="number-article">'+
+                   '<a href="http://localhost:8000/documents_cluster/<%=query_id%>/<%=id%>/0/10"><%= 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) 
+	{
+		
+		if (typeof (results.clusters) == 'undefined')
+		{
+			$('#create-dossierDoc').hide();
+		}
+		else
+		{
+			$('#create-dossierDoc').show();
+		}
+		$(".articles").empty();
+		$(".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 {
+                id: cluster.id,
+				query_id: cluster.query_id,
+                label: cluster.title,
+                abstract : cluster.abstract,
+                value: parseFloat(cluster.weight),
+                annotation_count: cluster.annotations.length,
+                image_url: cluster.url_image || false,
+                articles: cluster.documents.filter(function(article) {
+                    return !!article.url_image
+                })
+                .map(function(article, j) {
+                    return {
+                        value: parseFloat(article.weight),
+                        image_url: article.url_image || false
+                    }
+                })
+            }
+        });
+        data = _(data).sortBy(function(d) {
+            return -d.value;
+        });
+        squarify(data,0,0,760,hTreemap);
+        _(data).each(function(cluster) {
+            squarify(cluster.articles, 0, 0, cluster.w - 1, cluster.h - 1);
+            _(cluster.articles).sortBy(function(d) {
+                return -d.value;
+            });
+            cluster.articles = _(cluster.articles).reduce(function(mem, a) {
+                return mem + articleTemplate(a);
+            }, "");
+        });
+        var treemapHtml = _(data).reduce(function(mem, d) {
+            return mem + clusterTemplate(d);
+        },"");
+		$('#treemap #actus').empty();
+        $('#treemap #actus').html(treemapHtml);
 
-//redimensionnement d'image
-$(".actu").each(function(k,v){
-    var wActu = $(this).width();
-    var hActu = $(this).height();
-    var img = $(this).find('img');
-    var wImg = img.width();
-    var hImg = img.height();
+        //redimensionnement d'image        
+        $(".actu img").each(function() 
+		{
+			
+			var img = $(this),
+                div = $(this).parent();
+            $(this).load(function() {
+                var iw = $(this).width(),
+                    ih = $(this).height(),
+                    dw = $(this).parent().width(),
+                    dh = $(this).parent().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
+                });
+            });
+        });
+        
+     /*   $(".cluster").html(data.reduce(function(mem, c) {
+            return mem + '<li><a href="http://localhost:8000/'+c.query_id+'/'+c.id+'/0/12/0" 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"));
+            },
+            function() 
+			{
+                $("body").trigger("unselect-cluster", $(this).attr("data-cluster-id"));
+            }
+        )*/
+		
+        
+    }
+    
+	 function showResultsDossierDoc(results) 
+	 {
+		$(".articles").empty();
+		$(".articles").html(_(results.clusters).reduce(function(mem, c) { return mem + clusterListeTemplateDossierDoc(c); },''));
+		 var data = _(results.clusters).map(function(cluster, i) {
+			 var hue = (parseInt(cluster.id)%6)/6
+            return {
+                id: cluster.id,
+				doc_id: cluster.doc_id,
+				user: cluster.user,
+                label: cluster.title,
+                abstract : cluster.abstract,
+                value: parseFloat(cluster.weight),
+                annotation_count: cluster.annotations.length,
+                image_url: cluster.url_image || false,
+                articles: cluster.documents.filter(function(article) {
+                    return !!article.url_image
+                })
+                .map(function(article, j) {
+                    return {
+                        value: parseFloat(article.weight),
+                        image_url: article.url_image || false
+                    }
+                })
+            }
+        });
+	
+        data = _(data).sortBy(function(d) {
+            return -d.value;
+        });
 
-    var ratioImg = wImg/hImg;
-    img.css('height',hActu);
-    img.css('width',hActu*ratioImg);
-    wImg = img.width();
-    hImg = img.height();
+		squarify(data,0,0,760,hTreemap);
+		_(data).each(function(cluster) {
+            squarify(cluster.articles, 0, 0, cluster.w - 1, cluster.h - 1);
+            _(cluster.articles).sortBy(function(d) {
+                return -d.value;
+            });
+            cluster.articles = _(cluster.articles).reduce(function(mem, a) {
+                return mem + articleTemplate(a);
+            }, "");
+        });
+		 var treemapHtml = _(data).reduce(function(mem, d) {
+            return mem + clusterTemplateDossierDoc(d);
+        },"");
+		$('#treemap #actus').empty();
+        $('#treemap #actus').html(treemapHtml);
 
-    if(wActu>wImg){
-        var ratioImg = hImg/wImg;
-        img.css('width', wActu);
-        img.css('height',wActu*ratioImg);
-        wImg = img.width();
-        hImg = img.height();
+        //redimensionnement d'image        
+        $(".actu img").each(function() 
+		{
+			var img = $(this),
+                div = $(this).parent();
+			var loadThisImage = 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
+                });
+            }
+			if (this.width) {
+				loadThisImage();
+			} else {
+            	img.load(loadThisImage);
+			}
+        });
+  
+        /*$("body").on("select-cluster", function(e, clusterid) {
+            $(".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 + "'], .cluster a[data-cluster-id='" + clusterid + "'], .article[data-cluster-id='" + clusterid + "']").removeClass("selected");
+        });*/
     }
 
-    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);
-    }
-});
\ No newline at end of file
+
+    $("#liste").hide();
+//})
\ No newline at end of file