Add some l337 UI for creating a multipass UI on the topics watch page

This makes it much easier to watch multiple topics, hoorah

Fixes #10

src/ratpack/handlebars/header.hbs

@@ -8,11 +8,8 @@
     <meta name="author" content="">
 
     <title>Offtopic!</title>
-    <style type="text/css">
-    body {
-      padding-top: 50px;
-      }
-    </style>
+
+    <link rel="stylesheet" href="/css/offtopic.css">
 
     {{> bootstrap}}
   </head>

src/ratpack/handlebars/topic-watch.html.hbs

@@ -33,7 +33,7 @@
 
 </div>
 
-<script src="/js/ws.js?1"></script>
+<script src="/js/ws.js"></script>
 <script type="text/javascript">
     watchTopic("{{name}}");
 

src/ratpack/handlebars/topics.html.hbs

@@ -1,25 +1,47 @@
 {{> header}}
 
 <div class="container">
-<div>
+
+    <div class="multipass-panel panel panel-warning" style="display:none;">
+        <div class="panel-heading">
+            <h3 class="panel-title">Multipass</h3>
+        </div>
+        <div class="multipass-body panel-body">
+            <div class="multipass-actions">
+                <button class="go-multipass btn btn-default">
+                    Use Multipass!
+                </button> 
+            </div>
+        </div>
+    </div>
+
+
     <ul class="list-group">
         {{#each topics}}
         <li class="list-group-item">
-            <strong>
-                <a href="/topics/{{this}}">
-                    {{this}}
-                </a>
-            </strong>
+            <button data-topic="{{this}}" class="add-multipass btn btn-xs btn-default">
+                <span class="glyphicon glyphicon-plus-sign" aria-hidden="true">
+                </span>
+                multipass
+            </button>
 
             <form style="display: inline;" action="/topics/{{this}}/watch">
                 <button type="submit" class="btn btn-xs btn-default">
+                    <span class="glyphicon glyphicon-eye-open" aria-hidden="true">
+                    </span>
                     watch
                 </button>
             </form>
+
+            <strong>
+                <a href="/topics/{{this}}">
+                    {{this}}
+                </a>
+            </strong>
         </li>
         {{/each}}
     </ul>
-    </div>
 </div>
 
+<script src="/js/multipass.js"></script>
 {{> footer}}

src/ratpack/public/css/offtopic.css

@@ -0,0 +1,16 @@
+body {
+    padding-top: 50px;
+}
+
+.multipass-body {
+    font-size: 1.2em;
+}
+
+.multipass-actions {
+    margin-top: 10px;
+}
+
+.multipass-label {
+    margin-left: 3px;
+    margin-right: 3px;
+}

src/ratpack/public/js/multipass.js

@@ -0,0 +1,25 @@
+/* Bind all our multipass buttons */
+$('.add-multipass').click(function(e) {
+
+    $('.multipass-panel').show();
+
+    $('.multipass-body').prepend([
+            '<span class="multipass-label label label-warning">',
+            $(e.target).attr('data-topic'),
+            '</span>'
+    ].join("\n"));
+});
+
+
+$('.go-multipass').click(function(e) {
+    var topics = [];
+
+    $('.multipass-label').each(function(idx, el) {
+        /* Add the topic stripping all the whitespace from the text node jQuery
+         * gives us back
+         */
+        topics.push($(el).text().replace(/\s/g, ''));
+    });
+
+    document.location.href = "/topics/" + topics.join('+') + "/watch";
+});