Add search group creation/selection.

Add:
    static/js/index.js
        -Add advanced-search form search-group logic.
        -Allow users to create new search groups, and cycle through existing
        ones.

    static/templates/index.html
        -Add search-group count widget, and selection/addition buttons.

    static/sass/index.sass
        -Style the various search group elements.

static/js/index.js

@@ -5,7 +5,6 @@
 
 var advancedSearchDiv = $("div#advanced-search");
 var advancedSearchButton = $("button#advanced-search");
-advancedSearchDiv.hide();
 advancedSearchButton.click(function(){
     var searchField = $("div#search-field");
     if(!advancedSearchDiv.hasClass("visible")){
@@ -21,10 +20,8 @@ advancedSearchButton.click(function(){
     }
 });
 
-$(function() {
-    $("#date-last-modified").datepicker();
-    $("#date-created").datepicker();
-});
+$("#date-last-modified").datepicker();
+$("#date-created").datepicker();
 
 var languages = new Bloodhound({
     datumTokenizer: Bloodhound.tokenizers.obj.whitespace("value"),
@@ -173,3 +170,55 @@ function loadMoreResults(){
             result * 20);
     }
 }
+
+var searchGroups = [];
+var currentSearchGroup = 0;
+
+$("div#add-group").click(function(){
+    storeSearchGroup();
+    currentSearchGroup = searchGroups.length;
+    $("span#current, span#total").text(currentSearchGroup + 1);
+});
+
+$("div#previous-group").click(function(){
+    console.log(currentSearchGroup);
+    if(0 < currentSearchGroup){
+        storeSearchGroup();
+        currentSearchGroup--;
+        loadSearchGroup();
+        $("span#current").text(currentSearchGroup + 1);
+    }
+});
+
+$("div#next-group").click(function(){
+    console.log(currentSearchGroup);
+    if(currentSearchGroup < searchGroups.length - 1){
+        storeSearchGroup();
+        currentSearchGroup++;
+        loadSearchGroup();
+        $("span#current").text(currentSearchGroup + 1);
+    }
+});
+
+function storeSearchGroup(){
+    var searchGroup = {};
+    var inputs = $("div#advanced-search input[type='text']");
+
+    for(var input = 0; input < inputs.length; input++)
+        if(inputs[input].value.length > 0){
+            searchGroup[inputs[input].id] = inputs[input].value;
+            inputs[input].value = "";
+        }
+
+    if(currentSearchGroup < searchGroups.length)
+        searchGroups[currentSearchGroup] = searchGroup;
+    else
+        searchGroups.push(searchGroup);
+}
+
+function loadSearchGroup(groupNumber){
+    for(var inputId in searchGroups[currentSearchGroup]){
+        var selector = "div#advanced-search input[type='text']#" + inputId;
+        $(selector).val(searchGroups[currentSearchGroup][inputId]);
+    }
+}

static/sass/index.sass

@@ -51,20 +51,23 @@ div#search-field
     top: 0
     width: 40%
 
-    #title
-        font-size: 400%
-        padding-bottom: 0.2em
-        text-align: center
+    a#title
+        text-decoration: none
 
-        #title-bit
-            color: $baseColor1
+        div#title
+            font-size: 400%
+            padding-bottom: 0.2em
+            text-align: center
 
-        #title-angle
-            color: $baseColor3
+            #title-bit
+                color: $baseColor1
 
-        #title-shift
-            color: $baseColor2
-            font-style: italic
+            #title-angle
+                color: $baseColor3
+
+            #title-shift
+                color: $baseColor2
+                font-style: italic
 
     form#search-bar
         input[type="text"], button
@@ -82,7 +85,7 @@ div#search-field
             &:hover
                 border-color: $baseColor1
 
-        button
+        button#advanced-search
             background-color: white
             border: 1px solid white
             width: 15%
@@ -107,12 +110,11 @@ div#search-field
                 height: 26px
 
         div#advanced-search
-            background-color: white
             border: 1px solid $baseColor2
             margin: 0px
             overflow: auto
             padding: 0px
-            display: none
+            // display: none
 
             >div
                 @include vendor(box-sizing, border-box)
@@ -123,6 +125,86 @@ div#search-field
             >#col1
                 width: 10%
 
+                div#group-count
+                    font-size: 150%
+                    margin-left: 10%
+                    padding: 35% 0 20% 12%
+
+                    #current
+                        color: green
+                        font-size: 140%
+
+                    #seperator
+                        color: $baseColor3
+                        font-weight: bold
+
+                div#group-selector
+                    margin-left: 20%
+
+                    div
+                        $triangleHeight: 40%
+
+                        display: inline-block
+                        height: 0
+                        padding-bottom: $triangleHeight
+                        padding-top: $triangleHeight
+                        overflow: hidden
+
+                        &:after
+                            border-bottom: 500px solid transparent
+                            border-top: 500px solid transparent
+                            content: ""
+                            display: block
+                            height: 0
+                            margin-top: -500px
+                            width: 0
+
+                        &#previous-group
+                            width: $triangleHeight
+
+                            &:after
+                                border-right: 500px solid $baseColor3
+
+                            &:hover
+                                &:after
+                                    @extend .t3
+
+                                    border-right-color: green
+
+                        &#next-group
+                            padding-left: $triangleHeight
+                            width: 0
+
+                            &:after
+                                border-left: 500px solid $baseColor3
+                                margin-left: -500px
+
+                            &:hover
+                                &:after
+                                    @extend .t3
+
+                                    border-left-color: green
+
+                div#add-group
+                    margin-top: -10px
+                    margin-left: auto
+                    margin-right: auto
+                    width: 50%
+
+                    span
+                        color: $baseColor3
+                        font-size: 510%
+                        font-weight: bold
+
+                        &:hover
+                            @extend .t3
+
+                            color: green
+
+                div#add-group, div#group-selector div
+                    &:hover
+                        cursor: pointer
+
             >#col2
                 width: 84%
 
@@ -132,12 +214,15 @@ div#search-field
                     li
                         margin-bottom: 0.5em
 
-                        &:hover, &:focus
+                        label
+                            @extend .t3
+
+
+                        &:hover
                             input[type="text"]
                                 border-color: $baseColor1
 
                             label
-                                @extend .t3
                                 color: black
 
                         label

templates/index.html

@@ -18,12 +18,14 @@
 = endblock
 
 = block body
-  <div id="search-field">
-    <div id="title">
-      <span id="title-bit">bit</span
-      ><span id="title-angle">&laquo;</span
-      ><span id="title-shift">shift</span>
-    </div>
+  <div id="search-field" class="partly-visible">
+    <a id="title" href="/">
+      <div id="title">
+        <span id="title-bit">bit</span
+        ><span id="title-angle">&laquo;</span
+        ><span id="title-shift">shift</span>
+      </div>
+    </a>
 
     <form id="search-bar">
       <input type="text" name="query"
@@ -34,14 +36,27 @@
       <div id="advanced-search">
         <!-- Tags are closed on the following line to remove whitespace between divs. -->
         <div id="col1">
-          + Add group <!-- Placeholder.  -->
-        </div><div id="col2">
+          <div id="group-count">
+            <span id="current">1</span
+            ><span id="seperator">/</span
+            ><span id="total">1</span>
+          </div>
+          <div id="group-selector">
+            <div id="previous-group"></div>
+            <div></div>
+            <div id="next-group"></div>
+          </div>
+          <div id="add-group">
+            <span>+</span>
+          </div>
+        </div
+        ><div id="col2">
           <div id="upper-half">
             <div id="col1">
               <ul>
                 <li>
                   <label for="languages">Languages</label>
-                  <input class="typeahead" type="text" name="languages" id="languages"><br>
+                  <input type="text" name="languages" id="languages" class="typeahead"><br>
                 </li>
 
                 <li>