diff -r d32f123bfb9e -r 3648b6dea2cc alcatel/static/js/annotation-article.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/alcatel/static/js/annotation-article.js	Tue Sep 10 13:28:30 2013 +0200
@@ -0,0 +1,389 @@
+$(function() {
+
+    $(".fancybox").fancybox();
+    $('.font-up a').click(function(){
+        var taille_police=parseFloat($('.content').css('font-size'),100)+2;
+        if(taille_police<30){
+            var taille_ligne=parseFloat($('.content').css('line-height'),100)+2;
+            $('.content').css({
+                'line-height':taille_ligne+'px',
+                'font-size':taille_police+'px'
+            });
+        }
+        return false;
+    });
+    $('.font-down a').click(function(){
+        var taille_police=parseFloat($('.content').css('font-size'),100)-2;
+        if(taille_police>11){
+            var taille_ligne=parseFloat($('.content').css('line-height'),100)-2;
+            $('.content').css({
+                'line-height':taille_ligne+'px',
+                'font-size':taille_police+'px'
+            });
+        }
+        return false;
+    });
+    
+    /* ANNOTATION HANDLING */
+    
+    var basenode = $(".content")[0],
+        cleanHtml = cleanTextNodes(basenode).innerHtml,
+        textinfo = parseContents(basenode);
+        
+    window.annotations = window.annotations || [];
+    
+    var colors = ["#ff8", "#f88", "#8f8", "#8ff", "#f8f", "#88f"],
+        currentVisibleFrame = null,
+        ncol = 0,
+        mousedown = false,
+        shownByClick = false,
+        dragging = false;
+    
+    function cleanText(txt, keepbefore, keepafter) {
+        var res = txt.replace(/[\n\r\t]+/gm,' ').replace(/ {2,}/g,' ');
+        if (!keepbefore) {
+            res = res.replace(/^ +/,'');
+        }
+        if (!keepafter) {
+            res = res.replace(/ +$/,'');
+        }
+        return res;
+    }
+    
+    function recursiveParse(node, info) {
+        var children = node.childNodes;
+        for (var i = 0, l = children.length; i < l; i++) {
+            var childnode = children[i];
+            switch(childnode.nodeType) {
+                case node.ELEMENT_NODE:
+                    recursiveParse(childnode, info);
+                break;
+                case node.TEXT_NODE:
+                    var startpos = info.text.length;
+                    info.text += childnode.textContent;
+                    var endpos = info.text.length,
+                        nodeinfo = {
+                            start: startpos,
+                            end: endpos,
+                            length: endpos - startpos,
+                            textNode: childnode
+                        };
+                    childnode._nodeInfo = nodeinfo;
+                    info.nodes.push(nodeinfo);
+                break;
+            }
+        }
+    }
+    
+    
+    function parseContents(node) {
+        var res = {
+            text: '',
+            nodes: []
+        };
+        recursiveParse(node, res);
+        return res;
+    }
+    
+    function cleanTextNodes(node) {
+        var children = node.childNodes;
+        for (var i = 0, l = children.length; i < l; i++) {
+            var childnode = children[i];
+            switch(childnode.nodeType) {
+                case node.ELEMENT_NODE:
+                    cleanTextNodes(childnode);
+                break;
+                case node.TEXT_NODE:
+                    var keepbefore = (i && children[i-1].nodeType == node.ELEMENT_NODE),
+                        keepafter = (i < l-1 && children[i+1].nodeType == node.ELEMENT_NODE);
+                    childnode.textContent = cleanText(childnode.textContent, keepbefore, keepafter);
+                break;
+            }
+        }
+        return node;
+    }
+    
+    function highlightText(start, end, color) {
+		alert('start'+start);
+		alert('end'+end);
+		alert('color'+color);
+
+		alert('textinfo.text.substring(start, end)'+textinfo.text.substring(start, end));
+		alert('currentDocumentaryFile'+currentDocumentaryFile);
+		
+		
+        var annotation = {
+            startOffset: start,
+            length: end - start,
+            color: color,
+            comment: "",
+            creator: "cobled",
+            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]*$/,''),
+            documentaryFile: currentDocumentaryFile
+        }
+			alert('highlightText');
+        annotations.push(annotation);
+			alert('highlightText');
+        showAnnotation(annotation, true);
+			alert('highlightText');
+        updateAnnotationCounts();
+			alert('highlightText');
+    }
+    
+    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.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>'
+        + '<ul class="<%- editable ? "annotation-tags-form" : "" %>"><% _(annotation.tags).forEach(function(tag) { %><li><%- tag %></li><% }) %></ul>'
+        + '<% if (editable) { %><h3><input class="annotation-public" type="checkbox" <% if (annotation.isPublic) {%>checked <% } %>/>Annotation publique</h3><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 %>;"><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.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>'
+    );
+    
+    function showFrameBox() {
+        if (currentVisibleFrame) {
+            $(".annotation-frame-box").show();
+            var offset = currentVisibleFrame.offset(),
+                width = currentVisibleFrame.outerWidth(),
+                height = currentVisibleFrame.outerHeight();
+            $(".annotation-fb-top").css({
+                height: offset.top - 77
+            });
+            $(".annotation-fb-left").css({
+                top: offset.top,
+                height: height,
+                width: offset.left
+            });
+            $(".annotation-fb-right").css({
+                top: offset.top,
+                height: height,
+                left: offset.left + width
+            });
+            var fbbtop = offset.top + height;
+            $(".annotation-fb-bottom").css({
+                top: fbbtop,
+                height: ($("body").height() - fbbtop)
+            });
+            currentVisibleFrame.find(".annotation-textarea").focus();
+        } else {
+            $(".annotation-frame-box").hide();
+        }
+    }
+    
+    function hideAllFrames() {
+        if (currentVisibleFrame) {
+            currentVisibleFrame.hide();
+        }
+        
+        currentVisibleFrame = null;
+        showFrameBox();
+        $(".annotation-blocks li").removeClass("selected");
+    }
+    
+    function showAnnotation(annotation, editAfterShow) {
+        var start = annotation.startOffset,
+            end = annotation.length + start,
+            color = annotation.color;
+        var spans = [];
+        
+        for (var i = 0, l = textinfo.nodes.length; i < l; i++) {
+            var nodeinfo = textinfo.nodes[i];
+            if (nodeinfo.end > start && nodeinfo.start <= end) {
+                var r = document.createRange(),
+                    s = document.createElement('span'),
+                    rangestart = Math.max(0, start - nodeinfo.start),
+                    rangeend = Math.min(nodeinfo.length, end - nodeinfo.start);
+                s.style.backgroundColor = color;
+                r.setStart(nodeinfo.textNode, rangestart);
+                r.setEnd(nodeinfo.textNode, rangeend);
+                r.surroundContents(s);
+                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: (currentUser.id === annotation.creator.id),
+                top: top,
+                height: height,
+                left: basenode.offsetLeft
+            })),
+            li = $(liTpl({
+                annotation: annotation
+            }));
+        
+        $(".annotation-frames").append(frame);
+        $(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();
+            li.find(".annotation-comment").text(annotation.comment || "(Sans commentaire)");
+        });
+        
+        frame.find(".annotation-public").change(function() {
+            annotation.isPublic = $(this).is(":checked");
+        });
+        
+        frame.find("")
+        
+        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);
+        
+        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();
+            updateAnnotationCounts();
+            return false;
+        });
+        
+        li
+            .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();
+                shownByClick = true;
+                $(window).scrollTop(currentVisibleFrame.offset().top - 100);
+            });
+        
+        if (editAfterShow) {
+            show();
+            shownByClick = true;
+        }
+        
+    }
+    
+    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;
+        
+    $(".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;
+    });
+    
+    $(".annotation-frame-box").click(hideAllFrames);
+    
+    $(window).resize(function() {
+        showFrameBox();
+        $(".annotation-frame").css({
+            left: basenode.offsetLeft
+        })
+    });
+    
+    $(".add-annotation").css({
+        left: (basenode.offsetLeft + 500)
+    });
+
+});