# HG changeset patch
# User veltr
# Date 1357746600 -3600
# Node ID fb4d0566ab199183526f1115f862a25ccdcbccb6
# Parent  07d4049eec01fe44968dbe15d630fa4d2032cd9f
Bugfixes, Segment list now moves when changing segments

diff -r 07d4049eec01 -r fb4d0566ab19 integration/content.html
--- a/integration/content.html	Mon Jan 07 15:54:47 2013 +0100
+++ b/integration/content.html	Wed Jan 09 16:50:00 2013 +0100
@@ -27,29 +27,10 @@
                 post_annotation : "testdata/post-test.php",
                 tag_page : "tag.html?tag=__TAG__"
             };
-            if (typeof window.localStorage !== "undefined" && window.localStorage.getItem !== "undefined") {
-                var res = window.localStorage.getItem("resolution") || "SD";
-            } else {
-                var res = "SD";
-            }
-            IriSP.video_url_transform = function(url) {
-                return url.replace(/[SH]D(\.[a-z0-9]+)$/,res + "$1");
-            }
             $(function() {
                 IriSP.contentplayer({
                     project_url: "http://theend-integ.ftinfo.fr/theend/ldt/cljson/id/" + project
                 });
-                
-                $(".sdhdgroup").addClass(res);
-                
-                $(".sdhdbtn").click(function() {
-                    var newres = $(this).attr("title");
-                    if (res !== newres) {
-                        window.localStorage.setItem("resolution", newres);
-                        document.location.reload();
-                    }
-                    return false;
-                });
             });
         </script>
 
@@ -123,6 +104,18 @@
             </section>
             <!-- /Controlbar container -->
         </footer>
+        
+        <div class="lightBoxWrap">
+            <div class="lightBoxBg"></div>
+            <div class="lightBox">
+                <a href="#" class="lightBoxClose">&times;</a>
+                <h3>THE END, ETC. de Laetitia Masson.</h3>
+                <div class="lightBoxScroll">            
+                    <p>À compléter</p>
+                </div>
+            </div>
+        </div>
+        
         <!-- Metanav FranceTV 	-->
         <script src="http://static.francetv.fr/js/jquery.metanav-min.js" charset="utf-8"></script>
         <!-- JavaScript -->
diff -r 07d4049eec01 -r fb4d0566ab19 integration/css/theend.css
--- a/integration/css/theend.css	Mon Jan 07 15:54:47 2013 +0100
+++ b/integration/css/theend.css	Wed Jan 09 16:50:00 2013 +0100
@@ -535,3 +535,51 @@
     max-width: 210px;
     max-height: 500px;
 }
+
+/* LIGHTBOX */
+
+.lightBoxWrap {
+    display: none; z-index: 100;
+}
+
+.lightBoxWrap, .lightBoxBg {
+    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
+}
+
+.lightBoxBg {
+    background: black; opacity: .8;
+}
+
+.lightBox {
+    position: absolute; top: 120px; left: 120px; right: 120px; bottom: 120px;
+}
+
+.lightBoxScroll {
+    position: absolute; top: 30px; left: 0; right: 0; bottom: 0; overflow: auto;
+}
+
+.lightBox h3 {
+    color: #FFFFFF; font-family: "arial_black", sans-serif;
+    font-size: 18px; text-align: center; margin: 3px 0;
+}
+
+a.lightBoxClose {
+    float: right; font-size: 24px; color: #ACACAC;
+    font-family: "arial_black", sans-serif;
+}
+
+a.lightBoxClose:hover {
+    color: #FFFFFF;
+}
+
+.lightBoxScroll {
+    color: #ACACAC;
+}
+
+.lightBoxScroll p, .lightBoxScroll h4 {
+    font-size: 14px; margin: 1em 0;
+}
+
+.lightBoxScroll h4 {
+    font-weight: bold;
+}
diff -r 07d4049eec01 -r fb4d0566ab19 integration/home.html
--- a/integration/home.html	Mon Jan 07 15:54:47 2013 +0100
+++ b/integration/home.html	Wed Jan 09 16:50:00 2013 +0100
@@ -44,7 +44,18 @@
             <div class="arrow arrow_left"></div>
             <div class="arrow arrow_right"></div>
 		</section>
-		
+        
+        <div class="lightBoxWrap">
+            <div class="lightBoxBg"></div>
+            <div class="lightBox">
+                <a href="#" class="lightBoxClose">&times;</a>
+                <h3>THE END, ETC. de Laetitia Masson.</h3>
+                <div class="lightBoxScroll">            
+                    <p>À compléter</p>
+                </div>
+            </div>
+        </div>
+        
 		<!-- Metanav FranceTV 	-->
 		<script src="http://static.francetv.fr/js/jquery.metanav-min.js" charset="utf-8"></script>
 		<!-- JavaScript -->		
diff -r 07d4049eec01 -r fb4d0566ab19 integration/js/contentplayer.js
--- a/integration/js/contentplayer.js	Mon Jan 07 15:54:47 2013 +0100
+++ b/integration/js/contentplayer.js	Wed Jan 09 16:50:00 2013 +0100
@@ -12,6 +12,15 @@
         seqCount;
         
     var ratio = 2.37;
+    
+    if (typeof window.localStorage !== "undefined" && window.localStorage.getItem !== "undefined") {
+        var resolution = window.localStorage.getItem("resolution") || "SD";
+    } else {
+        var resolution = "SD";
+    }
+    var video_url_transform = function(url) {
+        return url.replace(/[SH]D(\.[a-z0-9]+)$/,resolution + "$1");
+    }
 
     function resizeVideo() {
         var currentwidth = $(window).width(),
@@ -62,7 +71,11 @@
     
     function resizeSegmentDrag() {
         var segmentdelta = segmentdragout.width() - segmentdragin.width();
-        segmentdragin.draggable("option","containment",segmentdelta < 0 ? [ segmentdelta - 20, 0, 20, 0 ] : "parent")
+        segmentdragin.draggable("option","containment",segmentdelta < 0 ? [ segmentdelta - 20, 0, 20, 0 ] : "parent");
+        if (segmentdelta < 0 && currentSegment && $("#title_sequence li").length) {
+            var x = $("#title_sequence li[data-segment-id='" + currentSegment.id + "']").offset().left - segmentdragin.offset().left;
+            segmentdragin.css("left", Math.max(segmentdelta - 20, Math.min( 20, 36 - x)))
+        }
     }
     
     segmentdragin.draggable({
@@ -93,10 +106,10 @@
         tagsdragin = tagsdragout.find("ul")
         tagsdragging = false;
     
-    function resizeTagsDrag() {
+    function resizeTagsDrag(toRight) {
         var tagsdelta = tagsdragout.width() - tagsdragin.width();
         tagsdragin.draggable("option","containment",tagsdelta < 0 ? [ tagsdelta - 20, 0, 20, 0 ] : "parent");
-        tagsdragin.css("left",Math.floor(tagsdelta/2));
+        tagsdragin.css("left",(toRight && tagsdelta < 0) ? tagsdelta - 20 : Math.floor(tagsdelta/2));
     }
     
     tagsdragin.draggable({
@@ -196,7 +209,7 @@
                 success: function(_data) {
                     var n = 1 + (segmentAtPost.__tags[_tagvalue] || 0)
                     segmentAtPost.__tags[_tagvalue] = n;
-                    showCurrentTags();
+                    showCurrentTags(_tagvalue);
                 },
                 error: function(_xhr, _error, _thrown) {
                     console.log("Error when sending annotation", _thrown);
@@ -248,6 +261,7 @@
                 showCurrentTags();
                 $("#title_sequence li").removeClass("here");
                 $("#title_sequence li[data-segment-id='" + s.id + "']").addClass("here");
+                resizeSegmentDrag();
             });
         });
         
@@ -257,28 +271,41 @@
         currentMedia.play();
     });
     
-    function showCurrentTags() {
+    function showCurrentTags(tagToShow) {
         var vals = _(currentSegment.__tags).values(),
             max = Math.max.apply(Math, vals),
             min = Math.min(max - 1, Math.min.apply(Math, vals)),
-            b = 160 / (max - min);
-        var html = _(currentSegment.__tags)
-            .chain()
-            .map(function(v, k) {
-                var c = Math.floor( 95 + (v - min) * b );
-                return '<li><a href="'
-                    + IriSP.endpoints.tag_page.replace("__TAG__",encodeURIComponent(k))
+            b = 160 / (max - min),
+            tagList = _(currentSegment.__tags).map(function(v, k) {
+                return {
+                    label: k,
+                    weight: v
+                }
+            });
+        tagList = _(tagList).shuffle();
+        if (tagToShow && currentSegment.__tags[tagToShow]) {
+            tagList = tagList.filter(function(t) {
+                return (t.label !== tagToShow);
+            });
+            tagList.push({
+                label: tagToShow,
+                weight: currentSegment.__tags[tagToShow]
+            });
+        }
+        var html = tagList.reduce(
+            function(memo, tag) {
+                var c = Math.floor( 95 + (tag.weight - min) * b );
+                return memo + '<li><a href="'
+                    + IriSP.endpoints.tag_page.replace("__TAG__",encodeURIComponent(tag.label))
                     + '" style="color: rgb('
                     + [c,c,c].join(",")
                     + ')">'
-                    + k
-                    + ' </a> </li>'
-            })
-            .shuffle()
-            .value()
-            .join("");
+                    + tag.label
+                    + ' </a> </li>';
+            },
+            "");
         tagsdragin.html(html);
-        resizeTagsDrag();
+        resizeTagsDrag(!!tagToShow);
     }
     
     function addMedia(media) {
@@ -288,11 +315,8 @@
         media.has_player = true;
         media.loaded = false;
         media.paused = true;
-        var videourl = media.video;
-        if (typeof IriSP.video_url_transform === "function") {
-            videourl = IriSP.video_url_transform(media.video);
-        }
-        var videoid = "video_" + media.id,
+        var videourl = video_url_transform(media.video),
+            videoid = "video_" + media.id,
             videoEl = $('<video>'),
             mp4_file = videourl.replace(/\.webm$/i,'.mp4'),
             webm_file = videourl.replace(/\.mp4$/i,'.webm'),
@@ -431,4 +455,20 @@
         
     }
     
+    $(".sdhdgroup").addClass(resolution);
+    
+    $(".sdhdbtn").click(function() {
+        var newres = $(this).attr("title");
+        if (resolution !== newres) {
+            window.localStorage.setItem("resolution", newres);
+            document.location.reload();
+        }
+        return false;
+    });
+    
+    $("#btnInfo, .lightBoxClose").click(function() {
+        $(".lightBoxWrap").toggle();
+        return false;
+    });
+    
 }
diff -r 07d4049eec01 -r fb4d0566ab19 integration/js/taghome.js
--- a/integration/js/taghome.js	Mon Jan 07 15:54:47 2013 +0100
+++ b/integration/js/taghome.js	Wed Jan 09 16:50:00 2013 +0100
@@ -67,7 +67,7 @@
     $(".arrow_bottom").data({xdelta: 0, ydelta: -6});
     
     $(".arrow")
-        .mousedown(function() {
+        .on("touchstart mousedown", function(evt) {
             var deltas = $(this).data(),
                 move = function() {
                     tagsInner.css({
@@ -78,9 +78,10 @@
             window.clearInterval(dragtimeout);
             dragtimeout = window.setInterval(move, 20);
             move();
+            return false;
         })
         .on(
-            "mouseout mouseup",
+            "touchend mouseout mouseup",
             function() {
                 window.clearInterval(dragtimeout);
             }
@@ -206,4 +207,10 @@
             resizeTags();
         }
     });
+    
+    $("#btnInfo, .lightBoxClose").click(function() {
+        $(".lightBoxWrap").toggle();
+        return false;
+    });
+    
 }
diff -r 07d4049eec01 -r fb4d0566ab19 integration/js/tagplayer.js
--- a/integration/js/tagplayer.js	Mon Jan 07 15:54:47 2013 +0100
+++ b/integration/js/tagplayer.js	Wed Jan 09 16:50:00 2013 +0100
@@ -17,6 +17,15 @@
         
     var ratio = 2.37;
 
+    if (typeof window.localStorage !== "undefined" && window.localStorage.getItem !== "undefined") {
+        var resolution = window.localStorage.getItem("resolution") || "SD";
+    } else {
+        var resolution = "SD";
+    }
+    var video_url_transform = function(url) {
+        return url.replace(/[SH]D(\.[a-z0-9]+)$/,resolution + "$1");
+    }
+    
     function resizeVideo() {
         var currentwidth = $(window).width(),
             maxheight = $(window).height() - 220,
@@ -78,7 +87,11 @@
     
     function resizeSegmentDrag() {
         var segmentdelta = segmentdragout.width() - segmentdragin.width();
-        segmentdragin.draggable("option","containment",segmentdelta < 0 ? [ segmentdelta - 20, 0, 20, 0 ] : "parent")
+        segmentdragin.draggable("option","containment",segmentdelta < 0 ? [ segmentdelta - 20, 0, 20, 0 ] : "parent");
+        if (segmentdelta < 0 && $("#title_sequence li").length) {
+            var x = $("#title_sequence li[data-segment-index='" + currentIndex + "']").offset().left - segmentdragin.offset().left;
+            segmentdragin.css("left", Math.max(segmentdelta - 20, Math.min( 20, 36 - x)))
+        }
     }
     
     segmentdragin.draggable({
@@ -106,10 +119,10 @@
         tagsdragin = tagsdragout.find("ul")
         tagsdragging = false;
     
-    function resizeTagsDrag() {
+    function resizeTagsDrag(toRight) {
         var tagsdelta = tagsdragout.width() - tagsdragin.width();
         tagsdragin.draggable("option","containment",tagsdelta < 0 ? [ tagsdelta - 20, 0, 20, 0 ] : "parent");
-        tagsdragin.css("left",Math.floor(tagsdelta/2));
+        tagsdragin.css("left",(toRight && tagsdelta < 0) ? tagsdelta - 20 : Math.floor(tagsdelta/2));
     }
     
     tagsdragin.draggable({
@@ -209,7 +222,7 @@
                 success: function(_data) {
                     var n = 1 + (segmentAtPost.__tags[_tagvalue] || 0)
                     segmentAtPost.__tags[_tagvalue] = n;
-                    showCurrentTags();
+                    showCurrentTags(_tagvalue);
                 },
                 error: function(_xhr, _error, _thrown) {
                     console.log("Error when sending annotation", _thrown);
@@ -281,6 +294,7 @@
         });
         $("#title_sequence li").removeClass("here");
         $("#title_sequence li[data-segment-index='" + n + "']").addClass("here");
+        resizeSegmentDrag();
         $("#duration").text(currentSegment.getDuration().toString());
         
         if (currentSegment.__tags) {
@@ -295,28 +309,41 @@
         currentMedia.play();
     }
     
-    function showCurrentTags() {
+    function showCurrentTags(tagToShow) {
         var vals = _(currentSegment.__tags).values(),
             max = Math.max.apply(Math, vals),
             min = Math.min(max - 1, Math.min.apply(Math, vals)),
-            b = 160 / (max - min);
-        var html = _(currentSegment.__tags)
-            .chain()
-            .map(function(v, k) {
-                var c = Math.floor( 95 + (v - min) * b );
-                return '<li><a href="'
-                    + IriSP.endpoints.tag_page.replace("__TAG__",encodeURIComponent(k))
+            b = 160 / (max - min),
+            tagList = _(currentSegment.__tags).map(function(v, k) {
+                return {
+                    label: k,
+                    weight: v
+                }
+            });
+        tagList = _(tagList).shuffle();
+        if (tagToShow && currentSegment.__tags[tagToShow]) {
+            tagList = tagList.filter(function(t) {
+                return (t.label !== tagToShow);
+            });
+            tagList.push({
+                label: tagToShow,
+                weight: currentSegment.__tags[tagToShow]
+            });
+        }
+        var html = tagList.reduce(
+            function(memo, tag) {
+                var c = Math.floor( 95 + (tag.weight - min) * b );
+                return memo + '<li><a href="'
+                    + IriSP.endpoints.tag_page.replace("__TAG__",encodeURIComponent(tag.label))
                     + '" style="color: rgb('
                     + [c,c,c].join(",")
                     + ')">'
-                    + k
-                    + ' </a> </li>'
-            })
-            .shuffle()
-            .value()
-            .join("");
+                    + tag.label
+                    + ' </a> </li>';
+            },
+            "");
         tagsdragin.html(html);
-        resizeTagsDrag();
+        resizeTagsDrag(!!tagToShow);
     }
     
     function addMedia(media) {
@@ -326,11 +353,8 @@
         media.has_player = true;
         media.loaded = false;
         media.paused = true;
-        var videourl = media.video;
-        if (typeof IriSP.video_url_transform === "function") {
-            videourl = IriSP.video_url_transform(media.video);
-        }
-        var videoid = "video_" + media.id,
+        var videourl = video_url_transform(media.video),
+            videoid = "video_" + media.id,
             videoEl = $('<video>'),
             mp4_file = videourl.replace(/\.webm$/i,'.mp4'),
             webm_file = videourl.replace(/\.mp4$/i,'.webm'),
@@ -479,12 +503,31 @@
                     timeSlider.slider("value", slidersRange * t / currentSegment.getDuration());
                 } else {
                     media.pause();
-                    goToPart((currentIndex + 1) % seqCount)
+                    if (currentIndex < seqCount - 1) {
+                        goToPart(currentIndex + 1)
+                    } else {
+                        document.location = $(".link_prev").attr("href");
+                    }
                 }
             }
         });
             
     }
     
+    $(".sdhdgroup").addClass(resolution);
+    
+    $(".sdhdbtn").click(function() {
+        var newres = $(this).attr("title");
+        if (resolution !== newres) {
+            window.localStorage.setItem("resolution", newres);
+            document.location.reload();
+        }
+        return false;
+    });
+    
+    $("#btnInfo, .lightBoxClose").click(function() {
+        $(".lightBoxWrap").toggle();
+        return false;
+    });
     
 }
diff -r 07d4049eec01 -r fb4d0566ab19 integration/tag.html
--- a/integration/tag.html	Mon Jan 07 15:54:47 2013 +0100
+++ b/integration/tag.html	Wed Jan 09 16:50:00 2013 +0100
@@ -28,32 +28,14 @@
                 post_annotation : "testdata/post-test.php",
                 tag_page : "tag.html?tag=__TAG__"
             };
-            if (typeof window.localStorage !== "undefined" && window.localStorage.getItem !== "undefined") {
-                var res = window.localStorage.getItem("resolution") || "SD";
-            } else {
-                var res = "SD";
-            }
-            IriSP.video_url_transform = function(url) {
-                return url.replace(/[SH]D(\.[a-z0-9]+)$/,res + "$1");
-            }
+            
             $(function() {
                 $("h1").text(tag);
                 
-
                 IriSP.tagplayer({
                     tag : tag
                 });
                 
-                $(".sdhdgroup").addClass(res);
-                
-                $(".sdhdbtn").click(function() {
-                    var newres = $(this).attr("title");
-                    if (res !== newres) {
-                        window.localStorage.setItem("resolution", newres);
-                        document.location.reload();
-                    }
-                    return false;
-                });
             });
         </script>
 
@@ -131,6 +113,18 @@
             </section>
             <!-- /Controlbar container -->
         </footer>
+        
+        <div class="lightBoxWrap">
+            <div class="lightBoxBg"></div>
+            <div class="lightBox">
+                <a href="#" class="lightBoxClose">&times;</a>
+                <h3>THE END, ETC. de Laetitia Masson.</h3>
+                <div class="lightBoxScroll">            
+                    <p>À compléter</p>
+                </div>
+            </div>
+        </div>
+        
         <!-- Metanav FranceTV 	-->
         <script src="http://static.francetv.fr/js/jquery.metanav-min.js" charset="utf-8"></script>
         <!-- JavaScript -->
diff -r 07d4049eec01 -r fb4d0566ab19 src/theend/__init__.py
--- a/src/theend/__init__.py	Mon Jan 07 15:54:47 2013 +0100
+++ b/src/theend/__init__.py	Wed Jan 09 16:50:00 2013 +0100
@@ -1,4 +1,4 @@
-VERSION = (1, 14, 0, "final", 0)
+VERSION = (1, 15, 0, "final", 0)
 
 VERSION_STR = unicode(".".join(map(lambda i:"%02d" % (i,), VERSION[:2])))
 
diff -r 07d4049eec01 -r fb4d0566ab19 src/theend/static/theend/css/theend.css
--- a/src/theend/static/theend/css/theend.css	Mon Jan 07 15:54:47 2013 +0100
+++ b/src/theend/static/theend/css/theend.css	Wed Jan 09 16:50:00 2013 +0100
@@ -535,3 +535,51 @@
     max-width: 210px;
     max-height: 500px;
 }
+
+/* LIGHTBOX */
+
+.lightBoxWrap {
+    display: none; z-index: 100;
+}
+
+.lightBoxWrap, .lightBoxBg {
+    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
+}
+
+.lightBoxBg {
+    background: black; opacity: .8;
+}
+
+.lightBox {
+    position: absolute; top: 120px; left: 120px; right: 120px; bottom: 120px;
+}
+
+.lightBoxScroll {
+    position: absolute; top: 30px; left: 0; right: 0; bottom: 0; overflow: auto;
+}
+
+.lightBox h3 {
+    color: #FFFFFF; font-family: "arial_black", sans-serif;
+    font-size: 18px; text-align: center; margin: 3px 0;
+}
+
+a.lightBoxClose {
+    float: right; font-size: 24px; color: #ACACAC;
+    font-family: "arial_black", sans-serif;
+}
+
+a.lightBoxClose:hover {
+    color: #FFFFFF;
+}
+
+.lightBoxScroll {
+    color: #ACACAC;
+}
+
+.lightBoxScroll p, .lightBoxScroll h4 {
+    font-size: 14px; margin: 1em 0;
+}
+
+.lightBoxScroll h4 {
+    font-weight: bold;
+}
diff -r 07d4049eec01 -r fb4d0566ab19 src/theend/static/theend/js/contentplayer.js
--- a/src/theend/static/theend/js/contentplayer.js	Mon Jan 07 15:54:47 2013 +0100
+++ b/src/theend/static/theend/js/contentplayer.js	Wed Jan 09 16:50:00 2013 +0100
@@ -12,6 +12,15 @@
         seqCount;
         
     var ratio = 2.37;
+    
+    if (typeof window.localStorage !== "undefined" && window.localStorage.getItem !== "undefined") {
+        var resolution = window.localStorage.getItem("resolution") || "SD";
+    } else {
+        var resolution = "SD";
+    }
+    var video_url_transform = function(url) {
+        return url.replace(/[SH]D(\.[a-z0-9]+)$/,resolution + "$1");
+    }
 
     function resizeVideo() {
         var currentwidth = $(window).width(),
@@ -62,7 +71,11 @@
     
     function resizeSegmentDrag() {
         var segmentdelta = segmentdragout.width() - segmentdragin.width();
-        segmentdragin.draggable("option","containment",segmentdelta < 0 ? [ segmentdelta - 20, 0, 20, 0 ] : "parent")
+        segmentdragin.draggable("option","containment",segmentdelta < 0 ? [ segmentdelta - 20, 0, 20, 0 ] : "parent");
+        if (segmentdelta < 0 && currentSegment && $("#title_sequence li").length) {
+            var x = $("#title_sequence li[data-segment-id='" + currentSegment.id + "']").offset().left - segmentdragin.offset().left;
+            segmentdragin.css("left", Math.max(segmentdelta - 20, Math.min( 20, 36 - x)))
+        }
     }
     
     segmentdragin.draggable({
@@ -93,10 +106,10 @@
         tagsdragin = tagsdragout.find("ul")
         tagsdragging = false;
     
-    function resizeTagsDrag() {
+    function resizeTagsDrag(toRight) {
         var tagsdelta = tagsdragout.width() - tagsdragin.width();
         tagsdragin.draggable("option","containment",tagsdelta < 0 ? [ tagsdelta - 20, 0, 20, 0 ] : "parent");
-        tagsdragin.css("left",Math.floor(tagsdelta/2));
+        tagsdragin.css("left",(toRight && tagsdelta < 0) ? tagsdelta - 20 : Math.floor(tagsdelta/2));
     }
     
     tagsdragin.draggable({
@@ -196,7 +209,7 @@
                 success: function(_data) {
                     var n = 1 + (segmentAtPost.__tags[_tagvalue] || 0)
                     segmentAtPost.__tags[_tagvalue] = n;
-                    showCurrentTags();
+                    showCurrentTags(_tagvalue);
                 },
                 error: function(_xhr, _error, _thrown) {
                     console.log("Error when sending annotation", _thrown);
@@ -248,6 +261,7 @@
                 showCurrentTags();
                 $("#title_sequence li").removeClass("here");
                 $("#title_sequence li[data-segment-id='" + s.id + "']").addClass("here");
+                resizeSegmentDrag();
             });
         });
         
@@ -257,28 +271,41 @@
         currentMedia.play();
     });
     
-    function showCurrentTags() {
+    function showCurrentTags(tagToShow) {
         var vals = _(currentSegment.__tags).values(),
             max = Math.max.apply(Math, vals),
             min = Math.min(max - 1, Math.min.apply(Math, vals)),
-            b = 160 / (max - min);
-        var html = _(currentSegment.__tags)
-            .chain()
-            .map(function(v, k) {
-                var c = Math.floor( 95 + (v - min) * b );
-                return '<li><a href="'
-                    + IriSP.endpoints.tag_page.replace("__TAG__",encodeURIComponent(k))
+            b = 160 / (max - min),
+            tagList = _(currentSegment.__tags).map(function(v, k) {
+                return {
+                    label: k,
+                    weight: v
+                }
+            });
+        tagList = _(tagList).shuffle();
+        if (tagToShow && currentSegment.__tags[tagToShow]) {
+            tagList = tagList.filter(function(t) {
+                return (t.label !== tagToShow);
+            });
+            tagList.push({
+                label: tagToShow,
+                weight: currentSegment.__tags[tagToShow]
+            });
+        }
+        var html = tagList.reduce(
+            function(memo, tag) {
+                var c = Math.floor( 95 + (tag.weight - min) * b );
+                return memo + '<li><a href="'
+                    + IriSP.endpoints.tag_page.replace("__TAG__",encodeURIComponent(tag.label))
                     + '" style="color: rgb('
                     + [c,c,c].join(",")
                     + ')">'
-                    + k
-                    + ' </a> </li>'
-            })
-            .shuffle()
-            .value()
-            .join("");
+                    + tag.label
+                    + ' </a> </li>';
+            },
+            "");
         tagsdragin.html(html);
-        resizeTagsDrag();
+        resizeTagsDrag(!!tagToShow);
     }
     
     function addMedia(media) {
@@ -288,11 +315,8 @@
         media.has_player = true;
         media.loaded = false;
         media.paused = true;
-        var videourl = media.video;
-        if (typeof IriSP.video_url_transform === "function") {
-            videourl = IriSP.video_url_transform(media.video);
-        }
-        var videoid = "video_" + media.id,
+        var videourl = video_url_transform(media.video),
+            videoid = "video_" + media.id,
             videoEl = $('<video>'),
             mp4_file = videourl.replace(/\.webm$/i,'.mp4'),
             webm_file = videourl.replace(/\.mp4$/i,'.webm'),
@@ -431,4 +455,20 @@
         
     }
     
+    $(".sdhdgroup").addClass(resolution);
+    
+    $(".sdhdbtn").click(function() {
+        var newres = $(this).attr("title");
+        if (resolution !== newres) {
+            window.localStorage.setItem("resolution", newres);
+            document.location.reload();
+        }
+        return false;
+    });
+    
+    $("#btnInfo, .lightBoxClose").click(function() {
+        $(".lightBoxWrap").toggle();
+        return false;
+    });
+    
 }
diff -r 07d4049eec01 -r fb4d0566ab19 src/theend/static/theend/js/taghome.js
--- a/src/theend/static/theend/js/taghome.js	Mon Jan 07 15:54:47 2013 +0100
+++ b/src/theend/static/theend/js/taghome.js	Wed Jan 09 16:50:00 2013 +0100
@@ -67,7 +67,7 @@
     $(".arrow_bottom").data({xdelta: 0, ydelta: -6});
     
     $(".arrow")
-        .mousedown(function() {
+        .on("touchstart mousedown", function(evt) {
             var deltas = $(this).data(),
                 move = function() {
                     tagsInner.css({
@@ -78,9 +78,10 @@
             window.clearInterval(dragtimeout);
             dragtimeout = window.setInterval(move, 20);
             move();
+            return false;
         })
         .on(
-            "mouseout mouseup",
+            "touchend mouseout mouseup",
             function() {
                 window.clearInterval(dragtimeout);
             }
@@ -203,4 +204,10 @@
             resizeTags();
         }
     });
+    
+    $("#btnInfo, .lightBoxClose").click(function() {
+        $(".lightBoxWrap").toggle();
+        return false;
+    });
+    
 }
diff -r 07d4049eec01 -r fb4d0566ab19 src/theend/static/theend/js/tagplayer.js
--- a/src/theend/static/theend/js/tagplayer.js	Mon Jan 07 15:54:47 2013 +0100
+++ b/src/theend/static/theend/js/tagplayer.js	Wed Jan 09 16:50:00 2013 +0100
@@ -17,6 +17,15 @@
         
     var ratio = 2.37;
 
+    if (typeof window.localStorage !== "undefined" && window.localStorage.getItem !== "undefined") {
+        var resolution = window.localStorage.getItem("resolution") || "SD";
+    } else {
+        var resolution = "SD";
+    }
+    var video_url_transform = function(url) {
+        return url.replace(/[SH]D(\.[a-z0-9]+)$/,resolution + "$1");
+    }
+    
     function resizeVideo() {
         var currentwidth = $(window).width(),
             maxheight = $(window).height() - 220,
@@ -78,7 +87,11 @@
     
     function resizeSegmentDrag() {
         var segmentdelta = segmentdragout.width() - segmentdragin.width();
-        segmentdragin.draggable("option","containment",segmentdelta < 0 ? [ segmentdelta - 20, 0, 20, 0 ] : "parent")
+        segmentdragin.draggable("option","containment",segmentdelta < 0 ? [ segmentdelta - 20, 0, 20, 0 ] : "parent");
+        if (segmentdelta < 0 && $("#title_sequence li").length) {
+            var x = $("#title_sequence li[data-segment-index='" + currentIndex + "']").offset().left - segmentdragin.offset().left;
+            segmentdragin.css("left", Math.max(segmentdelta - 20, Math.min( 20, 36 - x)))
+        }
     }
     
     segmentdragin.draggable({
@@ -106,10 +119,10 @@
         tagsdragin = tagsdragout.find("ul")
         tagsdragging = false;
     
-    function resizeTagsDrag() {
+    function resizeTagsDrag(toRight) {
         var tagsdelta = tagsdragout.width() - tagsdragin.width();
         tagsdragin.draggable("option","containment",tagsdelta < 0 ? [ tagsdelta - 20, 0, 20, 0 ] : "parent");
-        tagsdragin.css("left",Math.floor(tagsdelta/2));
+        tagsdragin.css("left",(toRight && tagsdelta < 0) ? tagsdelta - 20 : Math.floor(tagsdelta/2));
     }
     
     tagsdragin.draggable({
@@ -209,7 +222,7 @@
                 success: function(_data) {
                     var n = 1 + (segmentAtPost.__tags[_tagvalue] || 0)
                     segmentAtPost.__tags[_tagvalue] = n;
-                    showCurrentTags();
+                    showCurrentTags(_tagvalue);
                 },
                 error: function(_xhr, _error, _thrown) {
                     console.log("Error when sending annotation", _thrown);
@@ -281,6 +294,7 @@
         });
         $("#title_sequence li").removeClass("here");
         $("#title_sequence li[data-segment-index='" + n + "']").addClass("here");
+        resizeSegmentDrag();
         $("#duration").text(currentSegment.getDuration().toString());
         
         if (currentSegment.__tags) {
@@ -295,28 +309,41 @@
         currentMedia.play();
     }
     
-    function showCurrentTags() {
+    function showCurrentTags(tagToShow) {
         var vals = _(currentSegment.__tags).values(),
             max = Math.max.apply(Math, vals),
             min = Math.min(max - 1, Math.min.apply(Math, vals)),
-            b = 160 / (max - min);
-        var html = _(currentSegment.__tags)
-            .chain()
-            .map(function(v, k) {
-                var c = Math.floor( 95 + (v - min) * b );
-                return '<li><a href="'
-                    + IriSP.endpoints.tag_page.replace("__TAG__",encodeURIComponent(k))
+            b = 160 / (max - min),
+            tagList = _(currentSegment.__tags).map(function(v, k) {
+                return {
+                    label: k,
+                    weight: v
+                }
+            });
+        tagList = _(tagList).shuffle();
+        if (tagToShow && currentSegment.__tags[tagToShow]) {
+            tagList = tagList.filter(function(t) {
+                return (t.label !== tagToShow);
+            });
+            tagList.push({
+                label: tagToShow,
+                weight: currentSegment.__tags[tagToShow]
+            });
+        }
+        var html = tagList.reduce(
+            function(memo, tag) {
+                var c = Math.floor( 95 + (tag.weight - min) * b );
+                return memo + '<li><a href="'
+                    + IriSP.endpoints.tag_page.replace("__TAG__",encodeURIComponent(tag.label))
                     + '" style="color: rgb('
                     + [c,c,c].join(",")
                     + ')">'
-                    + k
-                    + ' </a> </li>'
-            })
-            .shuffle()
-            .value()
-            .join("");
+                    + tag.label
+                    + ' </a> </li>';
+            },
+            "");
         tagsdragin.html(html);
-        resizeTagsDrag();
+        resizeTagsDrag(!!tagToShow);
     }
     
     function addMedia(media) {
@@ -326,11 +353,8 @@
         media.has_player = true;
         media.loaded = false;
         media.paused = true;
-        var videourl = media.video;
-        if (typeof IriSP.video_url_transform === "function") {
-            videourl = IriSP.video_url_transform(media.video);
-        }
-        var videoid = "video_" + media.id,
+        var videourl = video_url_transform(media.video),
+            videoid = "video_" + media.id,
             videoEl = $('<video>'),
             mp4_file = videourl.replace(/\.webm$/i,'.mp4'),
             webm_file = videourl.replace(/\.mp4$/i,'.webm'),
@@ -479,12 +503,31 @@
                     timeSlider.slider("value", slidersRange * t / currentSegment.getDuration());
                 } else {
                     media.pause();
-                    goToPart((currentIndex + 1) % seqCount)
+                    if (currentIndex < seqCount - 1) {
+                        goToPart(currentIndex + 1)
+                    } else {
+                        document.location = $(".link_prev").attr("href");
+                    }
                 }
             }
         });
             
     }
     
+    $(".sdhdgroup").addClass(resolution);
+    
+    $(".sdhdbtn").click(function() {
+        var newres = $(this).attr("title");
+        if (resolution !== newres) {
+            window.localStorage.setItem("resolution", newres);
+            document.location.reload();
+        }
+        return false;
+    });
+    
+    $("#btnInfo, .lightBoxClose").click(function() {
+        $(".lightBoxWrap").toggle();
+        return false;
+    });
     
 }
diff -r 07d4049eec01 -r fb4d0566ab19 src/theend/templates/theend/home.html
--- a/src/theend/templates/theend/home.html	Mon Jan 07 15:54:47 2013 +0100
+++ b/src/theend/templates/theend/home.html	Wed Jan 09 16:50:00 2013 +0100
@@ -44,7 +44,7 @@
 {% block main_content %}
         <header class="home_header">
             <a id="btnInfo" class="btn" href="#" title="info"></a>
-            <a id="btnChoice" class="btn" href="{{ BASE_URL }}transition.html" title="Choice"></a>
+            <a id="btnChoice" class="btn" href="{{ BASE_URL }}transition.html" title="Retour au menu principal"></a>
             <form id="form_tag">
                 <input type="search" name="tag" placeholder="Rechercher" />
             </form>
@@ -59,6 +59,17 @@
         </section>
 {% endblock %}
         
+        <div class="lightBoxWrap">
+            <div class="lightBoxBg"></div>
+            <div class="lightBox">
+                <a href="#" class="lightBoxClose">&times;</a>
+                <h3>THE END, ETC. de Laetitia Masson.</h3>
+                <div class="lightBoxScroll">            
+                    <p>À compléter</p>
+                </div>
+            </div>
+        </div>
+        
         <!-- Metanav FranceTV   -->
         <script src="http://static.francetv.fr/js/jquery.metanav-min.js" charset="utf-8"></script>
 {% analytics %}
diff -r 07d4049eec01 -r fb4d0566ab19 src/theend/templates/theend/tag.html
--- a/src/theend/templates/theend/tag.html	Mon Jan 07 15:54:47 2013 +0100
+++ b/src/theend/templates/theend/tag.html	Wed Jan 09 16:50:00 2013 +0100
@@ -27,28 +27,6 @@
             });
         </script>
     {% endblock %}
-    
-        <script type="text/javascript">
-            if (typeof window.localStorage !== "undefined" && window.localStorage.getItem !== "undefined") {
-                var res = window.localStorage.getItem("resolution") || "SD";
-            } else {
-                var res = "SD";
-            }
-            IriSP.video_url_transform = function(url) {
-                return url.replace(/[SH]D(\.[a-z0-9]+)$/,res + "$1");
-            }
-            $(function() {
-                $(".sdhdgroup").addClass(res);
-                $(".sdhdbtn").click(function() {
-                    var newres = $(this).attr("title");
-                    if (res !== newres) {
-                        window.localStorage.setItem("resolution", newres);
-                        document.location.reload();
-                    }
-                    return false;
-                });
-            });
-        </script>
 
 {% endblock %}
 
@@ -93,7 +71,7 @@
         <!-- Controls container -->
         <footer id="controlContainer">
             <section id="controlbar">
-                <a id="btnInfo" class="btn" href="#" title="info"></a>
+                <a id="btnInfo" class="btn" href="#" title="Plus d'infos"></a>
 
                 <div class="sdhdgroup">
                     <a id="btnSD" class="sdhdbtn" href="#" title="SD"></a>
@@ -123,7 +101,7 @@
                 <a id="btnFwd" class="btn txt_hidden" href="#" title="Segment suivant"></a>
     {% endblock %}
     
-                <a id="btnChoice" class="btn" href="{{ BASE_URL }}transition.html" title="Retour au menu"></a>
+                <a id="btnChoice" class="btn" href="{{ BASE_URL }}transition.html" title="Retour au menu principal"></a>
             </section>
             <!-- /Controlbar container -->
         </footer>
diff -r 07d4049eec01 -r fb4d0566ab19 src/theend/urls.py
--- a/src/theend/urls.py	Mon Jan 07 15:54:47 2013 +0100
+++ b/src/theend/urls.py	Wed Jan 09 16:50:00 2013 +0100
@@ -39,12 +39,12 @@
     #(r'^$', 'socialauth.views.signin_complete'),
     #(r'^$', 'social_auth.views.complete'),
     
-    #(r'^/?$', 'django.views.generic.simple.redirect_to', {'url': 'ldt'}),
+    (r'^/?$', 'django.views.generic.simple.redirect_to', {'url': 'prolonger'}),
     #(r'^static/(?P<path>.*)$', 'django.views.static.serve', {'document_root': settings.STATIC_ROOT}),
     
     (r'^jsi18n/$', 'django.views.i18n.javascript_catalog', js_info_dict), 
     
-    url(r'^$', TemplateView.as_view(template_name="theend/home.html"), name='level2_home'),
+    url(r'^prolonger/$', TemplateView.as_view(template_name="theend/home.html"), name='level2_home'),
     url(r'^tag/(?P<tag>.*)$', 'theend.views.level2_tag', name='level2_tag'),
     url(r'^content/(?P<content_id>.*)$', 'theend.views.level2_content', name='level2_content'),