Buttons to cycle through matches in the code.

static/js/index.js

@@ -155,6 +155,8 @@ function createResult(codelet) {
     //Level 3
     var title = document.createElement("span"),
         site = document.createElement("span"),
+        nextMatch = document.createElement("a"),
+        prevMatch = document.createElement("a"),
         dateModified = document.createElement("div"),
         language = document.createElement("div"),
         dateCreated = document.createElement("div"),
@@ -169,6 +171,10 @@ function createResult(codelet) {
 
     title.id = 'title';
     site.id = 'site';
+    nextMatch.id = 'next-match';
+    nextMatch.href = '#';
+    prevMatch.id = 'prev-match';
+    prevMatch.href = '#';
     dateModified.id = 'date-modified';
     language.id = 'language';
     dateCreated.id = 'date-created';
@@ -178,6 +184,8 @@ function createResult(codelet) {
     title.innerHTML = 'File <a href="' + codelet.url + '">'
                       + codelet.filename + '</a>';
     site.innerHTML = 'on <a href="' + codelet.origin[1] + '">' + codelet.origin[0] +'</a>';
+    nextMatch.innerHTML = 'next match';
+    prevMatch.innerHTML = 'prev match';
     language.innerHTML = 'Language: <span>' + codelet.language + '</span>';
     dateModified.innerHTML = 'Last modified: <span>' + codelet.date_modified + '</span>';
     // Needs to be changed from int to string on the server
@@ -200,28 +208,37 @@ function createResult(codelet) {
     });
 
     //Event binding
-    $(newDiv).hover(function(e) {
+    $(codeElt).hover(function(e) {
         $(row).addClass('display-all');
     });
 
     $(newDiv).on('transitionend', function(e) {
-        $(newDiv).one('mouseleave', function(e) {
+        $(codeElt).one('mouseleave', function(e) {
             $(row).removeClass('display-all');
         });
     });
 
-    var cur_match = 0;
-    $(newDiv).click(function(e) {
-        var $code = $(this).find('#tablecontainer'),
+    var cur_match = -1;
+    var newMatch = function(e) {
+        var $code = $(newDiv).find('#tablecontainer'),
             $match = $code.find('#match_' + cur_match);
 
         $code.scrollTop($code.scrollTop() - $code.height() / 2 +
             $match.position().top + $match.height() / 2);
 
         $match.effect("highlight", {}, 750)
+    }
+
+    $(nextMatch).click(function(e) {
+        e.stopPropagation()
+        cur_match = cur_match >= matches.length - 1 ?  0 : cur_match + 1;
+        newMatch();
+    });
 
-        cur_match = cur_match === codeElt.querySelectorAll('.hll').length - 1 ?
-            0 : cur_match + 1;
+    $(prevMatch).click(function(e) {
+        e.stopPropagation()
+        cur_match = cur_match <= 0 ?  matches.length - 1 : cur_match - 1;
+        newMatch();
     });
 
     //Finish and append elements to parent elements
@@ -238,6 +255,8 @@ function createResult(codelet) {
 
     displayInfo.appendChild(title);
     displayInfo.appendChild(site);
+    displayInfo.appendChild(prevMatch);
+    displayInfo.appendChild(nextMatch);
 
     newDiv.appendChild(displayInfo);
     newDiv.appendChild(table);

static/sass/index.sass

@@ -33,6 +33,7 @@ div#search-field
     max-height: 100px
     right: 0
     position: absolute
+    z-index: 2
     top: 0
     width: 40%
 
@@ -102,7 +103,6 @@ div#search-field
 
     &.partly-visible
         margin-top: 0%
-        padding-bottom: 3%
         position: absolute
         width: 100%
 
@@ -311,7 +311,7 @@ div#results
 div#display-info
     font-size: 1.3em
     padding: 5px 0px 5px 5px
-    width: 400px
+    width: 100%
 
     a
         text-decoration: none
@@ -325,14 +325,13 @@ div#display-info
     #site
         text-transform: capitalize
 
-    #language
-        font-size: 0.8em
-        font-weight: bold
-        margin-left: 100px
-        padding: 3px
-        @include vendor(border-radius, 2px)
-        background: #eee
-        color: #aaa
+    #prev-match
+        font-size: 0.7em
+        margin-left: 125px
+
+    #next-match
+        font-size: 0.7em
+        margin-left: 20px
 
 td#code
     width: $codeWidth
@@ -348,6 +347,7 @@ td#code
         height: inherit
         background-color: #49483e
         position: relative
+        z-index: 1
 
         table
             table-layout:fixed
@@ -363,6 +363,8 @@ div#hidden-info
     font-size: 1.2em
     line-height: 1.5em
     @include vendor(transition, margin-left 0.2s ease-in-out)
+    position: relative
+    z-index: 0
 
     .display-all &
         margin-left: 0px