--- 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;
+    });
     
 }