Search results pagination and clearing

www/assets/js/callbacks.js

@@ -692,21 +692,26 @@ Callbacks = {
     },
 
     librarySearchResults: function(data) {
-        var n = $("#library").children().length;
+        clearSearchResults();
-        for(var i = 0; i < n; i++) {
+        $("#library").data("entries", data.results);
-            $("#library")[0].removeChild($("#library").children()[0]);
+        if(data.results.length > 100) {
+            var pag = $("<div/>").addClass("pagination")
+                .attr("id", "search_pagination")
+                .insertAfter($("#library"));
+            var btns = $("<ul/>").appendTo(pag);
+            for(var i = 0; i < data.results.length / 100; i++) {
+                var li = $("<li/>").appendTo(btns);
+                (function(i) {
+                $("<a/>").attr("href", "javascript:void(0)")
+                    .text(i+1)
+                    .click(function() {
+                        loadSearchPage(i);
+                    })
+                    .appendTo(li);
+                })(i);
             }
-        var ul = $("#library")[0];
-        for(var i = 0; i < data.results.length; i++) {
-            var li = makeQueueEntry(data.results[i]);
-            if(RANK >= Rank.Moderator || OPENQUEUE || LEADER) {
-                if(data.results[i].thumb)
-                    addLibraryButtons(li, data.results[i].id, true);
-                else
-                    addLibraryButtons(li, data.results[i].id);
-            }
-            $(li).appendTo(ul);
         }
+        loadSearchPage(0);
     },
 
     /* REGION Polls */

www/assets/js/client.js

@@ -559,6 +559,10 @@ $("#youtube_search").click(function() {
     });
 });
 
+$("#search_clear").click(function() {
+    clearSearchResults();
+});
+
 function fluidLayout() {
     $(".row").each(function() {
         $(this).removeClass("row").addClass("row-fluid");

www/assets/js/functions.js

@@ -448,6 +448,29 @@ function addLibraryButtons(li, id, yt) {
     }
 }
 
+function loadSearchPage(page) {
+    $("#library").html("");
+    var results = $("#library").data("entries");
+    var start = page * 100;
+    for(var i = start; i < start + 100 && i < results.length; i++) {
+        var li = makeQueueEntry(results[i]);
+        if(hasPermission("playlistadd")) {
+            if(results[i].thumb) {
+                addLibraryButtons(li, results[i].id, true);
+            }
+            else {
+                addLibraryButtons(li, results[i].id);
+            }
+        }
+        $(li).appendTo($("#library"));
+    }
+}
+
+function clearSearchResults() {
+    $("#library").html("");
+    $("#search_pagination").remove();
+}
+
 // Rearranges the queue
 function moveVideo(src, dest, noanim) {
     var li = $($("#queue").children()[src]);

www/channel.html

@@ -85,6 +85,7 @@
                     <div class="span12" style="margin-left: 0;">
                         <ul id="library" class="videolist">
                         </ul>
+                        <button class="btn btn-block" id="search_clear">Clear Results</button>
                     </div>
                 </div>
             </div>