Add server querying for results.

Add:
    static/js/index.js
        -Add untested server-querying to `queryServer()`, which previously just
        generated random results.

static/js/index.js

@@ -10,6 +10,7 @@ var searchBar = $("form#search-bar input[type='text']")[0];
 var resultsDiv = $("div#results")[0];
 
 var typingTimer, lastValue;
+var searchResultsPage = 1;
 /*
  * Set all page callbacks.
  */
@@ -123,6 +124,7 @@ function clearResults(){
  * with its response.
  */
 function populateResults(){
+    searchResultsPage = 1;
     var results = queryServer();
 
     for(var result = 0; result < results.length; result++){
@@ -183,9 +185,9 @@ function createResult(codelet) {
     authors.id = 'authors';
 
     //Add the bulk of the html
-    title.innerHTML = 'File <a href="' + codelet.url + '">'
+    title.innerHTML = ' &raquo; <a href="' + codelet.url + '">'
                       + codelet.filename + '</a>';
-    site.innerHTML = 'on <a href="' + codelet.origin[1] + '">' + codelet.origin[0] +'</a>';
+    site.innerHTML = '<a href="' + codelet.origin[1] + '">' + codelet.origin[0] +'</a>';
     nextMatch.innerHTML = 'next match';
     prevMatch.innerHTML = 'prev match';
     language.innerHTML = 'Language: <span>' + codelet.language + '</span>';
@@ -256,8 +258,8 @@ function createResult(codelet) {
     row.appendChild(hiddenInfoContainer);
     table.appendChild(row);
 
-    displayInfo.appendChild(title);
     displayInfo.appendChild(site);
+    displayInfo.appendChild(title);
 
     cycle.appendChild(prevMatch);
     cycle.appendChild(nextMatch);
@@ -276,10 +278,24 @@ function createResult(codelet) {
  *      elements, to fill `div#results`.
  */
 function queryServer(){
-    var resultDivs = []
+    var queryUrl = document.URL + "search.json?" + $.param({
+        "q" : searchBar.value,
+        "p" : searchResultsPage++
+    });
+    console.log(queryUrl);
+    var result = $.getJSON(queryUrl, function(result){
+        $.each(result, function(key, value){
+            if(key == "error")
+                errorMessage(value);
+            else
+                console.log("Success.");
+        });
+    });
+    // return [];
+    var resultDivs = [];
     for(var result = 0; result < 20; result++){
         var newDiv = createResult(testCodelet);
-        resultDivs.push(newDiv);
+        resultDivs.push(newDiv)
     }
 
     return resultDivs;
@@ -289,7 +305,7 @@ function queryServer(){
  * Adds more results to `div#results`.
  */
 function loadMoreResults(){
-    results = queryServer();
+    var results = queryServer();
     for(var result = 0; result < results.length; result++){
         var newDiv = results[result];
         resultsDiv.appendChild(newDiv);
@@ -303,4 +319,13 @@ function loadMoreResults(){
     }
 }
 
+/*
+ * Displays a warning message in the UI.
+ *
+ * @param msg (str) The message string.
+ */
+function errorMessage(msg){
+    alert(msg);
+}
+
 loadMoreResults();

static/sass/index.sass

@@ -120,6 +120,11 @@ div#search-field
             margin-right: auto
             width: 60%
 
+            input:hover
+                @extend .t3
+
+                border: 1px solid $baseColor1
+
 div#advanced-search
     background-color: white
     border: 1px solid $baseColor3
@@ -311,7 +316,7 @@ div#results
                 height: inherit
 
         &.cascade
-            @extend .t3
+            @extend .t1
             margin-bottom: 15%
 
 div#display-info
@@ -325,8 +330,6 @@ div#display-info
     #site
         text-transform: capitalize
 
-
-
 td#code
     width: $codeWidth
     height: inherit
@@ -346,7 +349,6 @@ td#code
         z-index: 1
 
         table
-            table-layout:fixed
             border-collapse: collapse
             font-family: monospace
 
@@ -376,7 +378,7 @@ div#hidden-info
 
     span
         font-family: monospace
-        color: #5CADFF
+        color: $baseColor1
         float: right
 
     div

templates/index.html

@@ -1,7 +1,7 @@
 = extends "layout.html"
 
 = block title
-  Home
+  home
 = endblock
 
 = block head

templates/layout.html

@@ -4,8 +4,11 @@
 <html>
   <head>
     <title>
-      = block title
-      = endblock
+      bitshift &laquo;
+      = filter lower
+        = block title
+        = endblock
+      = endfilter
     </title>
 
     <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>