diff -r d7bcf5f39b6c -r eddf4d5db875 player/js/player.js
--- a/player/js/player.js	Fri May 24 18:49:09 2013 +0200
+++ b/player/js/player.js	Mon May 27 18:54:46 2013 +0200
@@ -43,18 +43,19 @@
     
     $("body").click(function() {
         if (clickedTag) {
-            $(".chapter").removeClass("found");
+            $(".found").removeClass("found");
             clickedTag = null;
         }
     });
     
     function showTag(tagId) {
-        $(".chapter").removeClass("found");
+        $(".found").removeClass("found");
         var tag = myProject.getElement(tagId);
         if (tag) {
             tag.getRelated("annotation").forEach(function(a) {
                 a.trigger("found-tags");
             });
+            $(".tag[data-tag-id="+tagId+"]").addClass("found");
         }
         lastTag = tagId;
     }
@@ -117,7 +118,7 @@
             highlightChapter();
         });
         chapter.on("found-tags", function() {
-            element.addClass("found"); 
+            element.addClass("found");
         });
         chapterList.append(element);
     });
@@ -126,11 +127,13 @@
         if (i) {
             myMedia.setCurrentTime(chapters[currentChapterI - 1].begin);
         }
+        return false;
     });
     $(".next-chapter").click(function() {
         if (i < chapters.length - 1) {
             myMedia.setCurrentTime(chapters[currentChapterI + 1].begin);
         }
+        return false;
     });
     
     $(".play-button").click(function() {
@@ -139,6 +142,7 @@
         } else {
             myMedia.pause();
         }
+        return false;
     });
     
     $(".progress-indicator").draggable({
@@ -149,9 +153,6 @@
             myMedia.setCurrentTime(t);
         }
     });
-    $(".play-button").click(function() {
-        $(this).toggleClass("pause");
-    });
     
     var pictoTemplate = _.template(
         '<li class="<%- type %>"><span class="picto"><a href="#"></a></span>'
@@ -159,22 +160,34 @@
     );
     
     var chipTemplate = _.template(
-        '<li class="chip <%- type %>" style="left: <%- pos %>%"><span class="chip-circle">'
+        '<li class="chip <%- type %><%- left %>" style="left: <%- pos %>%"><span class="chip-circle">'
         + '</span><span class="chip-title"><%- annotation.title %></span></li>'
     );
     
     var annotations = myProject.getAnnotationsByTypeTitle("annotations");
     
-    annotations.forEach(function(annotation) {
+    var annotationinfos = annotations.map(function(annotation) {
         var annotationinfo = {
             annotation: annotation,
             open: false,
             pos: 100 * annotation.begin / annotation.getMedia().duration
         };
+        annotationinfo.left = (annotationinfo.pos > 80 ? " left": "");
         switch(annotation.content.mimetype) {
             case "application/x-ldt-slideshow":
                 annotationinfo.type = "slideshow";
             break;
+            case "application/x-ldt-video":
+                annotationinfo.type = "video";
+            break;
+            case "application/x-ldt-audio":
+                annotationinfo.type = "audio";
+            break;
+            case "application/x-ldt-links":
+                annotationinfo.type = "link";
+            break;
+            default:
+                annotationinfo.type = "text";
         }
         annotationinfo.picto = $(pictoTemplate(annotationinfo)).appendTo(".pictolist");
         annotationinfo.chip = $(chipTemplate(annotationinfo)).appendTo(".chips-list");
@@ -193,12 +206,17 @@
         annotation.on("leave", function() {
             annotationinfo.picto.hide();
         });
+        annotation.on("found-tags", function() {
+            annotationinfo.both.addClass("found");
+        });
+        return annotationinfo;
     });
     
+    currentAnnotation = null;
+    
     function openAnnotation(annotationinfo) {
         
-        if (annotationinfo.open) {
-            annotationinfo.open = false;
+        if (currentAnnotation === annotationinfo) {
             closeAnnotation(true);
             return;
         }
@@ -207,113 +225,231 @@
             myMedia.setCurrentTime(annotationinfo.annotation.begin);
         }
         
-        annotationinfo.open = true;
-        
         myMedia.pause();
         closeAnnotation(false);
         
+        currentAnnotation = annotationinfo;
+        
         annotationinfo.both.addClass("current");
         
         $(".chapters-bar").addClass("annotation-onscreen");
         
+        var annotationDiv = $(".annotation-templates ." + annotationinfo.type + "-annotation").clone();
+        
+        annotationDiv.appendTo($(".main-video"));
+        annotationDiv.find(".close-annotation").click(closeAnnotation);
+        annotationDiv.find(".annotation-title").text(annotationinfo.annotation.title);
+        
         switch (annotationinfo.type) {
+            
             case "slideshow":
-                slideshow(annotationinfo.annotation);
+       
+                var currentslide = 0,
+                    slideInterval,
+                    playing = false,
+                    loaded = false,
+                    slides = annotationinfo.annotation.content.images;
+                      
+                var resizeImage = function() {
+                    var imgel = annotationDiv.find(".slideshow-image");
+                    imgel.css("margin-top","");
+                    var w = imgel.width(),
+                        h = imgel.height();
+                    annotationDiv.find(".slideshow-center").css("height","");
+                    annotationDiv.find(".slideshow-description").css("margin-left",w);
+                    var h2 = annotationDiv.find(".slideshow-center").height();
+                    if (h < h2) {
+                        imgel.css("margin-top",Math.floor((h2-h)/2)+"px");
+                    }
+                }
+               
+                var showCurrentImage = function() {
+                    var slide = slides[currentslide];
+                    annotationDiv.find(".slideshow-image").attr({
+                        src: slide.image.src,
+                        title: slide.title,
+                        alt: slide.title
+                    });
+                    annotationDiv.find(".slideshow-title").text(slide.title);
+                    annotationDiv.find(".slideshow-description").html(
+                        slide.description.split(/\n/gm).map(function(l) {
+                            return '<p>' + _.escape(l) + '</p>';
+                        }).join("")
+                    );
+                    resizeImage();
+                }
+               
+                var nextImage = function() {
+                    currentslide = (currentslide + 1) % slides.length;
+                    showCurrentImage();
+                }
+               
+                var togglePlay = function() {
+                    playing = !playing;
+                    clearInterval(slideInterval);
+                    if (playing) {
+                        slideInterval = setInterval(nextImage,annotationinfo.annotation["slide-duration"]);
+                        annotationDiv.find(".slideshow-play-pause").addClass("pause");
+                    } else {
+                        annotationDiv.find(".slideshow-play-pause").removeClass("pause");
+                    }
+                }
+               
+                var checkloaded = function() {
+                    if (loaded) {
+                        return;
+                    }
+                    loaded = slides.reduce(function(mem, slide) {
+                        return (mem && !!slide.image && !!slide.image.width);
+                    }, true);
+                    if (loaded) {
+                        showCurrentImage();
+                        if (annotationinfo.annotation.autostart) {
+                            togglePlay();
+                        }
+                    }
+                }
+               
+                slides.forEach(function(slide) {
+                    slide.image = new Image();
+                    slide.image.onload = checkloaded;
+                    slide.image.src = slide.url;
+                });
+               
+                checkloaded();
+               
+                annotationDiv.find(".slideshow-next").click(nextImage);
+                annotationDiv.find(".slideshow-previous").click(function() {
+                    currentslide = (currentslide ? currentslide : slides.length) - 1;
+                    showCurrentImage();
+                });
+                annotationDiv.find(".slideshow-play-pause").click(togglePlay);
+                
+            break;
+            
+            case "video":
+            
+                var youtubeTemplate = _.template(
+                    '<iframe width="<%- width %>" height="<%- height %>" src="http://www.youtube.com/embed/<%- ytid %>?rel=0&autoplay=<%- autoplay %>" frameborder="0"></iframe>'
+                );
+                
+                var htmlVideoTemplate = _.template(
+                    '<video width="<%- width %>" controls="true" autoplay="<%- autoplay %>"><source src="<%- mp4vid %>" type="video/mp4" /><source src="<%- webmvid %>" type="video/webm" /></video>'
+                );
+                
+                var videoW = 650, videoH = 400;
+        
+                annotationDiv.find(".video-description").html(
+                    annotationinfo.annotation.description.split(/\n/gm).map(function(l) {
+                        return '<p>' + _.escape(l) + '</p>';
+                    }).join("")
+                );
+                
+                if (/^(https?:\/\/)?(www\.)?youtu\.?be/.test(annotationinfo.annotation.content.url)) {
+                    var urlparts = annotationinfo.annotation.content.url.split(/[?&]/g),
+                        ytid = "",
+                        vtest = /^v=/;
+                    urlparts.slice(1).forEach(function(p) {
+                        if (/^v=/.test(p)) {
+                            ytid = p.replace(vtest,"");
+                        }
+                    });
+                    if (!ytid) {
+                        ytid = (urlparts[0].match(/[^\/]+$/) || [""])[0];
+                    }
+                    annotationDiv.find(".video-frame").html(youtubeTemplate({
+                        ytid: ytid,
+                        width: videoW,
+                        height: videoH,
+                        autoplay: +annotationinfo.annotation.content.autostart
+                    }));
+                    return;
+                }
+                
+                annotationDiv.find(".video-frame").html(htmlVideoTemplate({
+                    mp4vid: annotationinfo.annotation.content.url.replace(/\.webm$/,'.mp4'),
+                    webmvid: annotationinfo.annotation.content.url.replace(/\.mp4$/,'.webm'),
+                    width: videoW,
+                    height: videoH,
+                    autoplay: ""+annotationinfo.annotation.content.autostart
+                }));
+                
+            break;
+            
+            case "audio":
+            
+                var htmlAudioTemplate = _.template(
+                    '<video width="100%" height="30" controls="true" autoplay="<%- autoplay %>" src="<%- src %>" />'
+                );
+                        
+                annotationDiv.find(".audio-description").html(
+                    annotationinfo.annotation.description.split(/\n/gm).map(function(l) {
+                        return '<p>' + _.escape(l) + '</p>';
+                    }).join("")
+                );
+                
+                if (/^(https?:\/\/)?(www\.)?soundcloud\.com/.test(annotationinfo.annotation.content.url)) {
+                    $.ajax({
+                        url: "http://soundcloud.com/oembed",
+                        dataType: "jsonp",
+                        data: {
+                            format: "js",
+                            show_comments: false,
+                            auto_play: annotationinfo.annotation.content.autostart,
+                            show_artwork: false,
+                            url: annotationinfo.annotation.content.url,
+                            color: "63be6c"
+                        },
+                        success: function(data) {
+                            annotationDiv.find(".audio-frame").html(data.html);
+                        }
+                    }
+                    );
+                    return;
+                }
+               
+                annotationDiv.find(".audio-frame").html(htmlAudioTemplate({
+                    src: annotationinfo.annotation.content.url,
+                    autoplay: ""+annotationinfo.annotation.content.autostart
+                }));
+                
+            break;
+            
+            case "text":
+                
+                var text = annotationinfo.annotation.content.text || annotationinfo.annotation.description;
+                
+                switch (annotationinfo.annotation.content.markup) {
+                    case "html":
+                        annotationDiv.find(".text-contents").html(text);
+                    break;
+                    default:
+                        annotationDiv.find(".text-contents").html(
+                            text.split(/\n/gm).map(function(l) {
+                                return '<p>' + _.escape(l) + '</p>';
+                            }).join("")
+                        );
+                    break;
+                }
+                annotationDiv.find(".text-contents a").attr("target","_blank");
+                
+            break;
+            
+            case "link":
+            
+                var linkTemplate = _.template('<p><a href="<%- url %>" target="_blank"><%- title %></a></p>');
+                
+                annotationDiv.find(".link-contents").html(
+                    annotationinfo.annotation.content.links.map(linkTemplate).join("")
+                );
+                
             break;
         }
     }
-      
-    function slideshow(data) {
-       
-        var currentslide = 0,
-            slideInterval,
-            playing = false,
-            loaded = false,
-            slides = data.content.images
-            slideShowElement = $(".annotation-templates .slideshow-annotation").clone();
-       
-        slideShowElement.appendTo($(".main-video"));
-       
-        function checkloaded() {
-            if (loaded) {
-                return;
-            }
-            loaded = slides.reduce(function(mem, slide) {
-                return (mem && !!slide.image && !!slide.image.width);
-            }, true);
-            if (loaded) {
-                showCurrentImage();
-                if (data.autostart) {
-                    togglePlay();
-                }
-            }
-        }
-       
-        slides.forEach(function(slide) {
-            slide.image = new Image();
-            slide.image.onload = checkloaded;
-            slide.image.src = slide.url;
-        });
-       
-        checkloaded();
-              
-        function resizeImage() {
-            var imgel = slideShowElement.find(".slideshow-image");
-            imgel.css("margin-top","");
-            var w = imgel.width(),
-                h = imgel.height();
-            slideShowElement.find(".slideshow-center").css("height","");
-            slideShowElement.find(".slideshow-description").css("margin-left",w);
-            var h2 = slideShowElement.find(".slideshow-center").height();
-            if (h < h2) {
-                imgel.css("margin-top",Math.floor((h2-h)/2)+"px");
-            }
-        }
-       
-        function showCurrentImage() {
-            var slide = slides[currentslide];
-            slideShowElement.find(".slideshow-image").attr({
-                src: slide.image.src,
-                title: slide.title,
-                alt: slide.title
-            });
-            slideShowElement.find(".slideshow-title").text(slide.title);
-            slideShowElement.find(".slideshow-description").html(
-                slide.description.split(/\n/gm).map(function(l) {
-                    return '<p>' + _.escape(l) + '</p>';
-                }).join("")
-            );
-            resizeImage();
-        }
-       
-        function nextImage() {
-            currentslide = (currentslide + 1) % slides.length;
-            showCurrentImage();
-        }
-       
-        function togglePlay() {
-            playing = !playing;
-            clearInterval(slideInterval);
-            if (playing) {
-                slideInterval = setInterval(nextImage,data["slide-duration"]);
-                slideShowElement.find(".slideshow-play-pause").addClass("pause");
-            } else {
-                slideShowElement.find(".slideshow-play-pause").removeClass("pause");
-            }
-        }
-       
-        slideShowElement.find(".slideshow-next").click(nextImage);
-        slideShowElement.find(".slideshow-previous").click(function() {
-            currentslide = (currentslide ? currentslide : slides.length) - 1;
-            showCurrentImage();
-        });
-        slideShowElement.find(".slideshow-play-pause").click(togglePlay);
-        slideShowElement.find(".close-annotation").click(closeAnnotation);
-        slideShowElement.find(".annotation-title").text(data.title);
-    }
    
     function closeAnnotation(e) {
-        $(".chip").removeClass("current");
+        currentAnnotation = null;
+        $(".chip, .pictolist li").removeClass("current");
         $(".chapters-bar").removeClass("annotation-onscreen");
         $(".main-video .annotation").remove();
         if (!!e) {