diff -r 3612737630f4 -r 8d7e6a9018fc integration/js/annotation-article.js
--- a/integration/js/annotation-article.js	Tue Jun 25 18:46:43 2013 +0200
+++ b/integration/js/annotation-article.js	Thu Jun 27 18:11:11 2013 +0200
@@ -106,32 +106,35 @@
     function highlightText(start, end, color) {
         var annotation = {
             startOffset: start,
-            endOffset: end,
+            length: end - start,
             color: color,
             comment: "",
+            creator: username,
             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]*$/,'')
         }
         annotations.push(annotation);
-        showAnnotation(annotation);
+        showAnnotation(annotation, true);
     }
     
     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>Commentaire&nbsp;:</h3>'
-        + '<textarea class="annotation-textarea" placeholder="Mon commentaire&hellip;"><%- annotation.comment || "" %></textarea>'
+        + '<form class="annotation-form"><h3>Annoté par&nbsp;: <em><%- annotation.creator %></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>'
-        + '<ul class="annotation-tags-form"><% _(annotation.tags).forEach(function(tag) { %><li><%- tag %></li><% }) %></ul>'
-        + '<div><button class="annotation-remove">Supprimer</button><input class="annotation-submit" type="submit" value="Enregistrer" /></div>'
+        + '<ul class="<%- editable ? "annotation-tags-form" : "" %>"><% _(annotation.tags).forEach(function(tag) { %><li><%- tag %></li><% }) %></ul>'
+        + '<% if (editable) { %><div><a class="annotation-remove" href="#">Supprimer</a><input class="annotation-submit" type="submit" value="Enregistrer" /></div><% } %>'
         + '</form></div>'
     );
     
     var liTpl = _.template(
         '<li style="border-color: <%- annotation.color %>;"><h3>Texte annoté</h3>'
         + '<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>'
         + '</li>'
@@ -177,9 +180,9 @@
         $(".annotation-list li").removeClass("selected");
     }
     
-    function showAnnotation(annotation) {
+    function showAnnotation(annotation, editAfterShow) {
         var start = annotation.startOffset,
-            end = annotation.endOffset,
+            end = annotation.length + start,
             color = annotation.color;
         var spans = [];
         
@@ -197,11 +200,13 @@
                 spans.push(s);
             }
         }
+        
         textinfo = parseContents(basenode);
         var top = Math.min.apply(Math, spans.map(function(s) { return s.offsetTop })),
             height = Math.max.apply(Math, spans.map(function(s) { return s.offsetHeight + s.offsetTop })) - top,
             frame = $(frameTpl({
                 annotation: annotation,
+                editable: (username === annotation.creator),
                 top: top,
                 height: height,
                 left: basenode.offsetLeft
@@ -281,35 +286,48 @@
                 shownByClick = true;
                 $(window).scrollTop(currentVisibleFrame.offset().top - 100);
             });
+        
+        if (editAfterShow) {
+            show();
+            shownByClick = true;
+        }
+        
     }
     
     annotations.forEach(function(annotation) {
         showAnnotation(annotation);
     });
     
-    $(".content")
-        .mousedown(function() {
-            mousedown = true;
-            dragging = false;
-        })
-        .mousemove(function() {
-            if (mousedown) {
-                dragging = true;
-            }
-        })
-        .mouseup(function() {
-            if (!dragging) {
-                return;
-            }
-            var range = document.getSelection().getRangeAt(0);
-            if (!range.collapsed && range.startContainer._nodeInfo && range.endContainer._nodeInfo) {
-                var start = range.startOffset + range.startContainer._nodeInfo.start,
-                    end = range.endOffset + range.endContainer._nodeInfo.start;
-                highlightText(start, end, colors[ncol++ % colors.length]);
-                document.getSelection().removeAllRanges();
-            }
-        });
+    var range = null;
         
+    $(".content").mouseup(function(e) {
+        range = document.getSelection().getRangeAt(0);
+        var addann = $(".add-annotation");
+        if (!range.collapsed && range.startContainer._nodeInfo && range.endContainer._nodeInfo && range.toString() !== " ") {
+            addann.show();
+            var doc = $(document), rect = range.getBoundingClientRect();
+            addann.css({
+                left: doc.scrollLeft() + rect.right + 5,
+                top: doc.scrollTop() + (rect.top + rect.bottom - addann.outerHeight()) / 2,
+            });
+        } else {
+            range = null;
+            $(".add-annotation").hide();
+        }
+    }).mousedown(function() {
+        $(".add-annotation").hide();
+    });
+    
+    $(".add-annotation").click(function() {
+        $(".add-annotation").hide();
+        if (range) {
+            var start = range.startOffset + range.startContainer._nodeInfo.start,
+                end = range.endOffset + range.endContainer._nodeInfo.start;
+            highlightText(start, end, colors[ncol++ % colors.length]);
+            document.getSelection().removeAllRanges();
+        }
+    });
+            
     $(window).mouseup(function() {
         mousedown = false;
         dragging = false;
@@ -322,6 +340,10 @@
         $(".annotation-frame").css({
             left: basenode.offsetLeft
         })
-    })
+    });
+    
+    $(".add-annotation").css({
+        left: (basenode.offsetLeft + 500)
+    });
 
 });