Add cycling between matches when clicking on the result.

static/css/lib/highlight.css

@@ -1,7 +1,7 @@
 td.linenos { background-color: #f0f0f0; padding-right: 10px; }
 span.lineno { background-color: #f0f0f0; padding: 0 5px 0 5px; }
 pre { line-height: 125% }
-.highlighttable { background-color: #49483e; width: inherit; }
+.highlighttable { background-color: #49483e; width: inherit; height: inherit; }
 .hll { display: block }
  { background: #272822; color: #f8f8f2 }
 .c { color: #75715e } /* Comment */

static/js/index.js

@@ -194,6 +194,10 @@ function createResult(codelet) {
 
     // Needs to be processed on the server
     codeElt.innerHTML = '<div id=tablecontainer>' + codelet.html_code + '</div>';
+    var matches = codeElt.querySelectorAll('.hll');
+    $.each(matches, function(i, a) {
+        a.id = 'match_' + i;
+    });
 
     //Event binding
     $(newDiv).hover(function(e) {
@@ -206,6 +210,20 @@ function createResult(codelet) {
         });
     });
 
+    var cur_match = 0;
+    $(newDiv).click(function(e) {
+        var $match = $('#match_' + cur_match),
+            $code = $('#tablecontainer');
+
+        $code.scrollTop($code.scrollTop() - $code.height() / 2 +
+            $match.position().top + $match.height() / 2);
+
+        $match.effect("highlight", {}, 750)
+
+        cur_match = cur_match === codeElt.querySelectorAll('.hll').length - 1 ?
+            0 : cur_match + 1;
+    });
+
     //Finish and append elements to parent elements
     hiddenInfo.appendChild(dateCreated);
     hiddenInfo.appendChild(dateModified);

static/sass/index.sass

@@ -347,6 +347,7 @@ td#code
         width: 100%
         height: inherit
         background-color: #49483e
+        position: relative
 
         table
             table-layout:fixed