diff -r 63dae3d25255 -r bad0e6c60b63 integration/js/annotation-article.js
--- a/integration/js/annotation-article.js	Mon Jul 22 12:02:47 2013 +0200
+++ b/integration/js/annotation-article.js	Mon Jul 22 14:56:35 2013 +0200
@@ -109,20 +109,23 @@
             length: end - start,
             color: color,
             comment: "",
-            creator: username,
+            creator: currentUser,
             tags: [],
             annotatedText: textinfo.text.substring(start, end),
             beforeText: textinfo.text.substring(start - 40, start).replace(/^[\S]*\s+/,''),
-            afterText: textinfo.text.substring(end, end + 40).replace(/\s+[\S]*$/,'')
+            afterText: textinfo.text.substring(end, end + 40).replace(/\s+[\S]*$/,''),
+            documentaryFile: currentDocumentaryFile
         }
         annotations.push(annotation);
         showAnnotation(annotation, true);
+        updateAnnotationCounts();
     }
     
     var frameTpl = _.template(
         '<div class="annotation-frame" style="border-color: <%- annotation.color %>; top: <%-top %>px; left: <%- left %>px;">'
         + '<div class="annotation-area" style="background-color: <%- annotation.color %>; height: <%- height %>px;"></div>'
-        + '<form class="annotation-form"><h3>Annoté par&nbsp;: <em><%- annotation.creator %></em></h3><h3>Commentaire&nbsp;:</h3>'
+        + '<form class="annotation-form"><h3>Annoté par&nbsp;: <em><%- annotation.creator.name %></em></h3>'
+        + '<h3>Dossier documentaire&nbsp;: <em><%- annotation.documentaryFile.name %></em></h3><h3>Commentaire&nbsp;:</h3>'
         + '<% if (editable) { %><textarea class="annotation-textarea" placeholder="Mon commentaire&hellip;"><%- annotation.comment || "" %></textarea>'
         + '<% } else { %><p><%- annotation.comment || "(sans commentaire)" %></p><% } %>'
         + '<h3>Mots-clés&nbsp;:</h3>'
@@ -132,11 +135,11 @@
     );
     
     var liTpl = _.template(
-        '<li style="border-color: <%- annotation.color %>;"><h3>Texte annoté</h3>'
+        '<li style="border-color: <%- annotation.color %>;"><div class="annotation-longview"><h3>Texte annoté&nbsp;:</h3></div>'
         + '<p class="annotation-text"><%- annotation.beforeText %><b><%- annotation.annotatedText %></b><%- annotation.afterText %></p>'
-        + '<h3>Annoté par&nbsp;: <em><%- annotation.creator %></em></h3>'
-        + '<h3>Commentaire&nbsp;:</h3><p class="annotation-comment"><%- annotation.comment || "(Sans commentaire)" %></p>'
-        + '<h3>Mots-clés&nbsp;:</h3><p class="annotation-tags"><%- (annotation.tags || []).join(", ") || "(aucun mot-clé)" %></p>'
+        + '<h3>Annoté par&nbsp;: <em><%- annotation.creator.name %></em></h3>'
+        + '<div class="annotation-longview"><h3>Commentaire&nbsp;:</h3><p class="annotation-comment"><%- annotation.comment || "(Sans commentaire)" %></p>'
+        + '<h3>Mots-clés&nbsp;:</h3><p class="annotation-tags"><%- (annotation.tags || []).join(", ") || "(aucun mot-clé)" %></p></div>'
         + '</li>'
     );
     
@@ -177,7 +180,7 @@
         
         currentVisibleFrame = null;
         showFrameBox();
-        $(".annotation-list li").removeClass("selected");
+        $(".annotation-blocks li").removeClass("selected");
     }
     
     function showAnnotation(annotation, editAfterShow) {
@@ -206,7 +209,7 @@
             height = Math.max.apply(Math, spans.map(function(s) { return s.offsetHeight + s.offsetTop })) - top,
             frame = $(frameTpl({
                 annotation: annotation,
-                editable: (username === annotation.creator),
+                editable: (currentUser.id === annotation.creator.id),
                 top: top,
                 height: height,
                 left: basenode.offsetLeft
@@ -216,7 +219,7 @@
             }));
         
         $(".annotation-frames").append(frame);
-        $(".annotation-list").append(li);
+        $(annotation.documentaryFile.id === currentDocumentaryFile.id ? ".annotation-file-list" : ".annotation-other-list").append(li);
         
         frame.find(".annotation-textarea").on("keyup paste input change", function() {
             annotation.comment = $(this).val();
@@ -275,6 +278,7 @@
             li.remove();
             frame.remove();
             hideAllFrames();
+            updateAnnotationCounts();
             return false;
         });
         
@@ -282,10 +286,12 @@
             .mouseenter(function() {
                 $(spans).addClass("annotation-selected");
                 li.addClass("selected");
+                li.find(".annotation-longview").stop().slideDown();
             })
             .mouseleave(function() {
                 $(spans).removeClass("annotation-selected");
                 li.removeClass("selected");
+                li.find(".annotation-longview").stop().slideUp();
             })
             .click(function() {
                 show();
@@ -300,9 +306,22 @@
         
     }
     
+    function updateAnnotationCounts() {
+        $(".annotation-blocks .block").each(function() {
+            var $this = $(this), n = $this.find("li").length;
+            $this.find(".annotations-count").text(n || "aucune");
+            if (n > 1) {
+                $this.find(".annotation-plural").show();
+            } else {
+                $this.find(".annotation-plural").hide();
+            }
+        })
+    }
+    
     annotations.forEach(function(annotation) {
         showAnnotation(annotation);
     });
+    updateAnnotationCounts();
     
     var range = null;