diff -r 059e197617bb -r 3612737630f4 integration/js/annotation-article.js
--- a/integration/js/annotation-article.js	Wed Jun 19 18:28:56 2013 +0200
+++ b/integration/js/annotation-article.js	Tue Jun 25 18:46:43 2013 +0200
@@ -36,6 +36,7 @@
         currentVisibleFrame = null,
         ncol = 0,
         mousedown = false,
+        shownByClick = false,
         dragging = false;
     
     function cleanText(txt, keepbefore, keepafter) {
@@ -108,6 +109,7 @@
             endOffset: end,
             color: color,
             comment: "",
+            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]*$/,'')
@@ -119,15 +121,20 @@
     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>Annoter&nbsp;:</h3>'
+        + '<form class="annotation-form"><h3>Commentaire&nbsp;:</h3>'
         + '<textarea class="annotation-textarea" placeholder="Mon commentaire&hellip;"><%- annotation.comment || "" %></textarea>'
+        + '<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>'
         + '</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>Commentaire</h3><p class="annotation-comment"><%- annotation.comment || "(Sans commentaire)" %></p>'
+        + '<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>'
     );
     
     function showFrameBox() {
@@ -154,6 +161,7 @@
                 top: fbbtop,
                 height: ($("body").height() - fbbtop)
             });
+            currentVisibleFrame.find(".annotation-textarea").focus();
         } else {
             $(".annotation-frame-box").hide();
         }
@@ -166,7 +174,7 @@
         
         currentVisibleFrame = null;
         showFrameBox();
-        $(".annotations-list li").removeClass("selected");
+        $(".annotation-list li").removeClass("selected");
     }
     
     function showAnnotation(annotation) {
@@ -210,34 +218,72 @@
             li.find(".annotation-comment").text(annotation.comment || "(Sans commentaire)");
         });
         
+        var ontagchange = function(evt, ui) {
+            annotation.tags = $(this).tagit("assignedTags");
+            li.find(".annotation-tags").text((annotation.tags || []).join(", ") || "(aucun mot-clé)");
+        };
+        
+        frame.find(".annotation-tags-form").tagit({
+            afterTagAdded: ontagchange,
+            afterTagRemoved: ontagchange
+        });
+        
         var show = function() {
             if (mousedown) {
                 return;
             }
+            shownByClick = false;
             currentVisibleFrame = frame;
             frame.show();
             showFrameBox();
             li.addClass("selected");
         }
+                
+        $(spans).mouseenter(show);
         
-        $(spans).hover(show, hideAllFrames);
-        frame.hover(show, hideAllFrames);
-        li.hover(
-            function() {
+        frame
+            .mouseleave(function() {
+                if (!shownByClick) {
+                    hideAllFrames();
+                }
+            })
+            .click(function() {
+                shownByClick = true;
+            });
+        
+        frame.find(".annotation-form").submit(function() {
+            hideAllFrames();
+            return false;
+        });
+        
+        frame.find(".annotation-remove").click(function() {
+            annotations = _(annotations).reject(function(a) {
+                return a === annotation
+            });
+            $(spans).css("background-color","").off("mouseenter",show);
+            li.remove();
+            frame.remove();
+            hideAllFrames();
+            return false;
+        });
+        
+        li
+            .mouseenter(function() {
                 $(spans).addClass("annotation-selected");
                 li.addClass("selected");
-            },
-            function() {
+            })
+            .mouseleave(function() {
                 $(spans).removeClass("annotation-selected");
                 li.removeClass("selected");
-            }
-        ).click(function() {
-            show();
-            $(window).scrollTop(currentVisibleFrame.offset().top - 100);
-        });
+            })
+            .click(function() {
+                show();
+                shownByClick = true;
+                $(window).scrollTop(currentVisibleFrame.offset().top - 100);
+            });
     }
     
-    window.annotations.forEach(function(annotation) {
+    annotations.forEach(function(annotation) {
         showAnnotation(annotation);
     });