From 48dbc127a7dfeacc1e2aee8ed58cbb8f972bc09f Mon Sep 17 00:00:00 2001
From: Mark McDowall <markus.mcd5@gmail.com>
Date: Sun, 22 Sep 2013 00:55:44 -0700
Subject: [PATCH] Added search bar under nav bar to jump to series by searching

---
 UI/Content/menu.less                     | 72 +++++++++++++++---------
 UI/Mixins/AutoComplete.js                |  1 -
 UI/Navbar/NavbarTemplate.html            | 11 ++++
 UI/Navbar/NavbarView.js                  | 13 ++++-
 UI/Navbar/Search.js                      | 29 ++++++++++
 UI/Series/Details/SeriesDetailsLayout.js |  5 +-
 6 files changed, 98 insertions(+), 33 deletions(-)
 create mode 100644 UI/Navbar/Search.js

diff --git a/UI/Content/menu.less b/UI/Content/menu.less
index 91f2d9a3b..ce423051a 100644
--- a/UI/Content/menu.less
+++ b/UI/Content/menu.less
@@ -1,6 +1,9 @@
 @import "prefixer";
 
 #main-menu-region {
+  text-align    : center;
+  margin-bottom : 10px;
+
   i:before {
     font-size : 35px;
   }
@@ -8,27 +11,6 @@
   i {
     width : 40px;
   }
-}
-
-.backdrop #nav-region {
-  background-color : #000000;
-  .opacity(0.85);
-}
-
-#nav-region li a:hover, #in-sub-nav li a.active {
-  background-color : #555555;
-  text-decoration  : none;
-}
-
-#nav-region {
-
-  margin-bottom : 80px;
-  height        : 120px;
-
-  .span12 {
-    margin-left : 0px;
-  }
-
 
   .logo {
     margin-top     : 25px;
@@ -37,10 +19,6 @@
     width          : 70px;
   }
 
-  ul {
-    text-align    : center;
-    margin-bottom : 10px;
-  }
   li {
     list-style-type : none;
     display         : inline-block;
@@ -55,7 +33,7 @@
       padding       : 15px 10px 5px;
       min-height    : 56px;
       min-width     : 64px;
-      margin        : 20px 10px 10px;
+      margin        : 20px 10px 5px;
       color         : #b9b9b9;
       font-weight   : 100;
     }
@@ -66,3 +44,45 @@
     }
   }
 }
+
+.backdrop #nav-region {
+  background-color : #000000;
+  .opacity(0.85);
+}
+
+#nav-region li a:hover, #in-sub-nav li a.active {
+  background-color : #555555;
+  text-decoration  : none;
+}
+
+#nav-region {
+  margin-bottom : 80px;
+  height        : 150px;
+
+  .span12 {
+    margin-left : 0px;
+  }
+}
+
+.search {
+  text-align: center;
+
+  input, .add-on {
+    background-color: #333333;
+    border-color: #333333;
+    color: #cccccc;
+  }
+
+  ul {
+    text-align: left;
+  }
+
+  .dropdown-menu {
+    background-color: #333333;
+    color: #cccccc;
+
+    > li > a {
+      color: #cccccc;
+    }
+  }
+}
\ No newline at end of file
diff --git a/UI/Mixins/AutoComplete.js b/UI/Mixins/AutoComplete.js
index 90856cb20..0bc512be2 100644
--- a/UI/Mixins/AutoComplete.js
+++ b/UI/Mixins/AutoComplete.js
@@ -19,5 +19,4 @@ define(function () {
             items    : 20
         });
     };
-
 });
diff --git a/UI/Navbar/NavbarTemplate.html b/UI/Navbar/NavbarTemplate.html
index c2ee2fab4..d9b1c83e6 100644
--- a/UI/Navbar/NavbarTemplate.html
+++ b/UI/Navbar/NavbarTemplate.html
@@ -59,4 +59,15 @@
             </ul>
         </div>
     </div>
+
+    <div class="row">
+        <div class="span12">
+            <div class="search">
+                <div class="input-prepend">
+                    <span class="add-on"><i class="icon-search"></i></span>
+                    <input class="span4 x-series-search" id="prependedInput" type="text">
+                </div>
+            </div>
+        </div>
+    </div>
 </div>
diff --git a/UI/Navbar/NavbarView.js b/UI/Navbar/NavbarView.js
index b78f8f678..85ca28cb6 100644
--- a/UI/Navbar/NavbarView.js
+++ b/UI/Navbar/NavbarView.js
@@ -1,14 +1,23 @@
 'use strict';
 define(
     [
-        'marionette'
+        'marionette',
+        'Navbar/Search'
     ], function (Marionette) {
         return Marionette.ItemView.extend({
+            template : 'Navbar/NavbarTemplate',
+
+            ui: {
+                search: '.x-series-search'
+            },
+
             events: {
                 'click a': 'onClick'
             },
 
-            template : 'Navbar/NavbarTemplate',
+            onRender: function (){
+                this.ui.search.bindSearch();
+            },
 
             onClick: function (event) {
 
diff --git a/UI/Navbar/Search.js b/UI/Navbar/Search.js
new file mode 100644
index 000000000..35e0d733b
--- /dev/null
+++ b/UI/Navbar/Search.js
@@ -0,0 +1,29 @@
+'use strict';
+define(
+    [
+        'app',
+        'Series/SeriesCollection'
+    ], function (App, SeriesCollection) {
+        $.fn.bindSearch = function () {
+            $(this).typeahead({
+                source   : function () {
+                    return SeriesCollection.map(function (model) {
+                        return model.get('title');
+                    });
+                },
+
+                sorter: function (items) {
+                    return items.sort();
+                },
+
+                updater: function (item) {
+                    var series = SeriesCollection.find(function (model) {
+                        return model.get('title') === item;
+                    });
+
+                    this.$element.blur();
+                    App.Router.navigate('/series/{0}'.format(series.get('titleSlug')), { trigger: true });
+                }
+            });
+        };
+    });
diff --git a/UI/Series/Details/SeriesDetailsLayout.js b/UI/Series/Details/SeriesDetailsLayout.js
index ec6fc38c9..238ffb00c 100644
--- a/UI/Series/Details/SeriesDetailsLayout.js
+++ b/UI/Series/Details/SeriesDetailsLayout.js
@@ -41,14 +41,13 @@ define(
             },
 
             initialize: function () {
-                $('body').addClass('backdrop');
-
                 this.listenTo(this.model, 'change:monitored', this._setMonitoredState);
                 this.listenTo(App.vent, App.Events.SeriesDeleted, this._onSeriesDeleted);
                 this.listenTo(App.vent, App.Events.SeasonRenamed, this._onSeasonRenamed);
             },
 
             onShow: function () {
+                $('body').addClass('backdrop');
                 var fanArt = this._getFanArt();
 
                 if (fanArt) {
@@ -61,8 +60,6 @@ define(
                 this._showSeasons();
                 this._setMonitoredState();
                 this._showInfo();
-
-
             },
 
             onRender: function () {