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