diff -r 30e0ed21127c -r 5a4dd4e6bbe7 player/js/player.js
--- a/player/js/player.js	Tue May 21 19:12:29 2013 +0200
+++ b/player/js/player.js	Thu May 23 13:10:54 2013 +0200
@@ -1,7 +1,153 @@
-$(function() {
+var myDir = new IriSP.Model.Directory(),
+    myProject = myDir.remoteSource({
+            url: "data/rigoletto.json",
+            serializer: IriSP.serializers.ldt
+        });
+
+myProject.onLoad(function() {
+    
+    $(".project-title").text(myProject.title);
+    
+    var myMedia = myProject.getCurrentMedia();
+    
+    IriSP.htmlPlayer(
+        myMedia,
+        $(".video-container"),
+        {
+            width: 1000,
+            height: 560,
+            autostart: true
+        }
+    );
+    
+    myMedia.on("timeupdate", function(t) {
+        var progress = $(".progress-indicator"),
+            pos = ($(".chapters-bar").width() - 2 * progress.width()) * t / myMedia.duration;
+        progress.css("left",pos);
+    });
+    myMedia.on("play", function() {
+        $(".play-button").addClass("pause");
+    });
+    myMedia.on("pause", function() {
+        $(".play-button").removeClass("pause");
+    });
+    
+    var tags = myProject.getTags().sortBy(function(t) {
+            return - t.getRelated("annotation").length;
+        }).slice(0,12),
+        tagTemplate = _.template('<li data-tag-id="<%- id %>" class="tag"><%- title %></li>'),
+        clickedTag = null,
+        lastTag = null;
+    
+    $(".tags-list").html(tags.map(tagTemplate).join(""));
+    
+    $("body").click(function() {
+        if (clickedTag) {
+            $(".chapter").removeClass("found");
+            clickedTag = null;
+        }
+    });
+    
+    function showTag(tagId) {
+        $(".chapter").removeClass("found");
+        var tag = myProject.getElement(tagId);
+        if (tag) {
+            tag.getRelated("annotation").forEach(function(a) {
+                a.trigger("found-tags");
+            });
+        }
+        lastTag = tagId;
+    }
+    
+    $(".tag").hover(function() {
+        showTag($(this).attr("data-tag-id"));
+    }, function() {
+        showTag(clickedTag);
+    }).click(function() {
+        clickedTag = lastTag;
+        return false;
+    });
+    
+    
+    var chapters = myProject.getAnnotationsByTypeTitle("chapitrage"),
+        chapterTemplate = _.template(
+            '<li class="chapter" style="left: <%- 100*begin/getMedia().duration %>%; width: <%- 100*getDuration()/getMedia().duration %>%;">'
+            + '<div class="chapter-block"></div><div class="chapter-title"><%- title %></div></li>'
+        ),
+        chapterList = $(".chapters-list"),
+        hoveredChapter = null,
+        currentChapter = null,
+        currentChapterI = 0;
+    
+    function highlightChapter() {
+        $(".chapter").removeClass("active");
+        if (hoveredChapter || currentChapter) {
+            (hoveredChapter || currentChapter).addClass("active");
+        }
+    }
+    
+    chapters.forEach(function(chapter, i) {
+        var element = $(chapterTemplate(chapter));
+        element.click(function() {
+           myMedia.setCurrentTime(chapter.begin); 
+        }).hover(function() {
+            hoveredChapter = element;
+            highlightChapter();
+        }, function() {
+            hoveredChapter = null;
+            highlightChapter();
+        });
+        chapter.on("enter", function() {
+            currentChapter = element;
+            currentChapterI = i;
+            if (i) {
+                $(".prev-chapter").removeClass("inactive");
+            } else {
+                $(".prev-chapter").addClass("inactive");
+            }
+            if (i < chapters.length - 1) {
+                $(".next-chapter").removeClass("inactive");
+            } else {
+                $(".next-chapter").addClass("inactive");
+            }
+            highlightChapter();
+        });
+        chapter.on("leave", function() {
+            currentChapter = null;
+            highlightChapter();
+        });
+        chapter.on("found-tags", function() {
+            element.addClass("found"); 
+        });
+        chapterList.append(element);
+    });
+    
+    $(".prev-chapter").click(function() {
+        if (i) {
+            myMedia.setCurrentTime(chapters[currentChapterI - 1].begin);
+        }
+    });
+    $(".next-chapter").click(function() {
+        if (i < chapters.length - 1) {
+            myMedia.setCurrentTime(chapters[currentChapterI + 1].begin);
+        }
+    });
+    
+    $(".play-button").click(function() {
+        if (myMedia.paused) {
+            myMedia.play();
+        } else {
+            myMedia.pause();
+        }
+    });
+    
     $(".progress-indicator").draggable({
         axis: "x",
-        containment: "parent"
+        containment: "parent",
+        drag: function(e, ui) {
+            var t = myMedia.duration * parseInt(ui.helper.css("left")) / ( $(".chapters-bar").width() - 2 * ui.helper.width() );
+            myMedia.setCurrentTime(t);
+        }
     });
     $(".chips-list").on( {
         mouseenter: function() {
@@ -41,37 +187,54 @@
    ];
    
    function slideshow(data) {
-       var currentslide = 0, slideInterval, playing = false;
+       var currentslide = 0, slideInterval, playing = false, loaded = false;
+       
+       function checkloaded() {
+           loaded = data.reduce(function(mem, slide) {
+               return (mem && !!slide.image && !!slide.image.width);
+           }, true);
+           if (loaded) {
+               showCurrentImage();
+           }
+       }
        
-       $(".slideshow-image").load(function(e) {
-           var imgData = data[currentslide],
-               el = $(this);
-           el.show();
-           var w = el.width(),
-               h = el.height();
+       data.forEach(function(slide) {
+           slide.image = new Image();
+           slide.image.onload = checkloaded;
+           slide.image.src = slide.url;
+       });
+              
+       function resizeImage() {
+           var imgel = $(".slideshow-image");
+           imgel.css("margin-top","");
+           var w = imgel.width(),
+               h = imgel.height();
            $(".slideshow-center").css("height","");
-           $(".slideshow-frame").css("width",w);
            $(".slideshow-description").css("margin-left",w);
-           $(".slideshow-credits").text(imgData.credit);
-           $(".slideshow-title").text(imgData.title);
+           var h2 = $(".slideshow-center").height();
+           if (h < h2) {
+               imgel.css("margin-top",Math.floor((h2-h)/2)+"px");
+           }
+       }
+       
+       function showCurrentImage() {
+           var slide = data[currentslide];
+           $(".slideshow-image").attr({
+               src: slide.image.src,
+               title: slide.title,
+               alt: slide.title
+           });
+           $(".slideshow-credits").text(slide.credit);
+           $(".slideshow-title").text(slide.title);
            $(".slideshow-description").html(
-               imgData.description.split(/\n/gm).map(function(l) {
+               slide.description.split(/\n/gm).map(function(l) {
                    return '<p>' + _.escape(l) + '</p>';
                }).join("")
            );
-           var h2 = $(".slideshow-center").height();
-           if (h < h2) {
-               $(".slideshow-image").css("margin-top",Math.floor((h2-h)/2)+"px");
-           }
-       });
+           resizeImage();
+       }
        
-       function showCurrentImage() {
-           $(".slideshow-center").css("height",$(".slideshow-center").height());
-           $(".slideshow-image").attr("src",data[currentslide].url).hide().css("margin-top","");
-           $(".slideshow-credits").empty();
-           $(".slideshow-title").empty();
-           $(".slideshow-description").empty();
-       }
+       $(window).on("resize", resizeImage);
        
        function nextImage() {
            currentslide = (currentslide + 1) % data.length;
@@ -89,8 +252,6 @@
            }
        }
        
-       showCurrentImage();
-       
        $(".slideshow-next").click(nextImage);
        $(".slideshow-previous").click(function() {
            currentslide = (currentslide ? currentslide : data.length) - 1;
@@ -102,4 +263,20 @@
    
    slideshow(slideshowData);
    
+   $(".slideshow").click(function() {
+       $(".slideshow-annotation").show();
+   });
+   
+   $(".text").click(function() {
+       $(".text-annotation").show();
+   });
+   
+   $(".audio").click(function() {
+       $(".audio-annotation").show();
+   });
+   
+   $(".close-annotation").click(function() {
+       $(".annotation").hide();
+   })
+   
 });