Mod results style; integrate front/back end.

Add:
        static/js/index.js
                -Modify functions to add actual result codelets to the `results`
                column: redefine `populateResults()` as a wrapper for
                `loadMoreResults()`, introduce a `Deferred` return-type to
                `queryServer()`, and change some incorrect object field names
                (eg, "html_code", which should've been "code") in
                `createResult()`.

Fix:
        static/sass/index.sass
                -Allow codelet-scrolling, and modify result component widths.

static/js/index.js

@@ -141,13 +141,13 @@ var codeExample = '<table class="highlighttable"><tr><td class="linenos"><div cl
 
 var testCodelet = {
     'url': 'https://github.com/earwig/bitshift/blob/develop/app.py',
-    'filename': 'app.py',
+    'name': 'app.py',
     'language': 'python',
     'date_created': 'May 10, 2014',
     'date_modified': '2 days ago',
     'origin': ['GitHub', 'https://github.com', ''],
     'authors': ['sevko', 'earwig'],
-    'html_code': codeExample
+    'code': codeExample
 };
 
 // Enable infinite scrolling down the results page.
@@ -210,26 +210,6 @@ function clearResults(){
 }
 
 /*
- * Query the server with the current search string, and populate `div#results`
- * with its response.
- */
-function populateResults(){
-    searchResultsPage = 1;
-    var results = queryServer();
-
-    for(var result = 0; result < results.length; result++){
-        var newDiv = results[result];
-        resultsDiv.appendChild(newDiv);
-        setTimeout(
-            (function(divReference){
-                return function(){
-                    divReference.classList.add("cascade");
-                };
-            }(newDiv)), result * 20);
-    }
-}
-
-/*
  * Create a result element based upon a codelet instance.
  *
  * @return {Element} The result element.
@@ -276,7 +256,7 @@ function createResult(codelet) {
 
     //Add the bulk of the html
     title.innerHTML = ' &raquo; <a href="' + codelet.url + '">'
-                      + codelet.filename + '</a>';
+                      + codelet.name + '</a>';
     site.innerHTML = '<a href="' + codelet.origin[1] + '">' + codelet.origin[0] +'</a>';
     nextMatch.innerHTML = 'next match';
     prevMatch.innerHTML = 'prev match';
@@ -295,7 +275,7 @@ function createResult(codelet) {
     authors.innerHTML = authorsHtml;
 
     // Needs to be processed on the server
-    codeElt.innerHTML = '<div id=tablecontainer>' + codelet.html_code + '</div>';
+    codeElt.innerHTML = '<div id=tablecontainer>' + codelet.code + '</div>';
 
     //Event binding
     $(newDiv).on('mousemove', function(e) {
@@ -408,39 +388,49 @@ function queryServer(){
         "p" : searchResultsPage++
     });
 
-    var resultDivs = [];
+    var results = $.Deferred();
     $.getJSON(queryUrl, function(result){
+        var resultDivs = [];
         if("error" in result)
             insertErrorMessage(result["error"]);
         else
-            for(var codelet = 0; codelet < result["results"].length; codelet++)
-                resultDivs.push(result["results"][codelet]);
+            for(var codelet = 0; codelet < result["results"].length; codelet++){
+                resultDivs.push(createResult(result["results"][codelet]));
+                console.log(result["results"][codelet]);
+            }
+        results.resolve(resultDivs);
     });
 
-    for(var result = 0; result < 20; result++){
-        var newDiv = createResult(testCodelet);
-        resultDivs.push(newDiv)
-    }
+    return results;
+}
 
-    return resultDivs;
+/*
+ * Query the server with the current search string, and populate `div#results`
+ * with its response.
+ */
+function populateResults(){
+    searchResultsPage = 1;
+    loadMoreResults();
 }
 
 /*
- * Adds more results to `div#results`.
+ * Query the server for the next results page, and add its codelets to
+ * `div#results`.
  */
 function loadMoreResults(){
-    var results = queryServer();
-    for(var result = 0; result < results.length; result++){
-        var newDiv = results[result];
-        resultsDiv.appendChild(newDiv);
-        setTimeout(
-            (function(divReference){
-                return function(){
-                    divReference.classList.add("cascade");
-                };
-            }(newDiv)),
-            result * 20);
-    }
+    queryServer().done(function(results){
+        for(var result = 0; result < results.length; result++){
+            var newDiv = results[result];
+            resultsDiv.appendChild(newDiv);
+            setTimeout(
+                (function(divReference){
+                    return function(){
+                        divReference.classList.add("cascade");
+                    };
+                }(newDiv)),
+                result * 20);
+        }
+    });
 }
 
 /*
@@ -453,5 +443,3 @@ function insertErrorMessage(msg){
     error.append(msg);
     resultsDiv.appendChild(error[0]);
 }
-
-// loadMoreResults();

static/sass/index.sass

@@ -6,8 +6,8 @@
 @import variables
 
 $minSearchFieldsWidth: 490px
-$resultWidth: 1000px
-$codeWidth: 650px
+$resultWidth: 800px
+$codeWidth: 700px
 $hiddenInfoWidth: 250px
 
 .ui-datepicker
@@ -366,8 +366,9 @@ div.result
         @extend .t1
         margin-bottom: 15%
 
-    &.display-all table tr
-        @include opaque(1.0)
+    &.display-all
+        table tr
+            @include opaque(1.0)
 
 div#display-info
     font-size: 1.3em
@@ -384,14 +385,14 @@ td#code
     @include vendor(transition, width 0.2s ease-in-out)
 
     width: $codeWidth
+    max-width: $codeWidth
     height: inherit
     padding: 0px
-    border: 1px solid #bbb
 
     #tablecontainer
-        overflow: hidden
         width: 100%
         height: inherit
+        overflow: auto
         background-color: #49483e
         position: relative
         z-index: 1
@@ -414,7 +415,7 @@ td#code
 
 div#hidden-info
     width: $hiddenInfoWidth
-    margin-left: -$hiddenInfoWidth - 10px
+    margin-left: -$hiddenInfoWidth - 200px
     height: 100%
     padding-top: 40px
     font-size: 1.2em