Add button to show/hide userlist

www/assets/css/ytsync.css

@@ -77,12 +77,21 @@ html, body {
     margin-bottom: 0;
 }
 
-#usercount, #currenttitle {
+#usercountcontainer, #currenttitle {
     border: 1px solid #aaaaaa;
     border-bottom: none;
     margin: 0;
 }
 
+#usercount {
+    margin: 0;
+}
+
+#ulistchevron {
+    cursor: pointer;
+    float: left;
+}
+
 #plmeta {
     border: 1px solid #aaaaaa;
     background-color: #ffffff;

www/assets/js/client.js

@@ -149,6 +149,18 @@ if(!USEROPTS.hidevid) {
     firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
 }
 
+$("#ulistchevron").click(function() {
+    var state = $("#userlist").css("display");
+    if(state == "none") {
+        $("#userlist").show();
+        $("#ulistchevron").removeClass().addClass("icon-chevron-up");
+    }
+    else {
+        $("#userlist").hide();
+        $("#ulistchevron").removeClass().addClass("icon-chevron-down");
+    }
+});
+
 var sendVideoUpdate = function() { }
 setInterval(function() {
     sendVideoUpdate();

www/channel.html

@@ -58,7 +58,10 @@
         </div>
         <div class="row" id="main" style="margin-top: 20px;">
             <div class="span5" id="chatdiv">
+                <div id="usercountcontainer">
+                    <i class="icon-chevron-up" id="ulistchevron" title="Show/Hide Userlist"></i>
                     <p id="usercount"></p>
+                </div>
                 <div id="userlist">
                 </div>
                 <div id="messagebuffer">