very basic thumbnail browser.

lib/ComicBook.js

@@ -17,7 +17,6 @@
     - make page draggable with the cursor
     - enable menu items via config, allow for custom items
     - split out classes into seperate files
-    - thumbnail browser
     - refactor so we are not using all these loose shared variables and other nastyness
     - use custom event emitters instead of hacky code
     - properly bind 'this' so we don't have to keep using 'self'
@@ -82,7 +81,8 @@ var ComicBook = (function ($) {
       keyboard: {
         next: 78,
         previous: 80,
-        toggleLayout: 76
+        toggleLayout: 76,
+        thumbnails: 84
       },
       libPath: '/lib/',
       forward_buffer: 3
@@ -837,6 +837,11 @@ var ComicBook = (function ($) {
         if (e.keyCode === options.keyboard.toggleLayout) {
           self.toggleLayout();
         }
+
+        // display thumbnail browser
+        if (e.keyCode === options.keyboard.thumbnails) {
+          self.toggleThumbnails();
+        }
         break;
 
       default:
@@ -869,6 +874,28 @@ var ComicBook = (function ($) {
         .find('.manga-' + !options.manga).hide();
     };
 
+    ComicBook.prototype.toggleThumbnails = function () {
+      // TODO: show page numbers
+      // TODO: in double page mode merge both pages into a single link
+      // TODO: only load thumbnails when they are in view
+      // TODO: keyboard navigation (left / right / up / down / enter)
+      // TODO: highlight currently selected thumbnail
+      // TODO: focus on current page
+      // TODO: toolbar button
+      var $thumbnails = self.getControl('thumbnails');
+      $thumbnails.html('');
+      self.toggleControl('thumbnails');
+      $.each(pages, function (i, img) {
+        var $img = $(img).clone();
+        var $link = $('<a>').attr('href', '#' + i).append($img);
+        $img.attr('height', 150);
+        $link.on('click', function () {
+          self.hideControl('thumbnails');
+        });
+        $thumbnails.append($link);
+      });
+    };
+
     ComicBook.prototype.destroy = function () {
 
       $.each(this.controls, function (name, $control) {