Continue working on options

www/assets/css/ytsync.css

@@ -24,10 +24,6 @@ html, body {
     background-color: #ffffff;
 }
 
-#librarytoggle, #userpltoggle, #playlisttoggle {
-    background-color: #ffffff;
-}
-
 #librarywrap, #userplaylistwrap, #playlist_controls {
     display: none;
 }

www/assets/js/channelsettings.js

@@ -1,17 +1,13 @@
 (function() {
 
-    $("#channelsettingswrap div").each(function() {
+    $("#channelsettingswrap div.span12").each(function() {
         $(this).hide();
     });
 
     function clickHandler(selector, div) {
         $(selector).click(function() {
-            $("#channelsettings_nav li").each(function() {
+            $("#csdropdown_title").text($(selector).text());
-                $(this).removeClass("active");
+            $("#channelsettingswrap div.span12").each(function() {
-            });
-            $(selector).parent().addClass("active");
-
-            $("#channelsettingswrap div").each(function() {
                 $(this).hide();
             });
             $(div).show();
@@ -21,4 +17,7 @@
     clickHandler("#show_optedit", "#optedit");
     clickHandler("#show_permedit", "#permedit");
     clickHandler("#show_motdedit", "#motdedit");
+    clickHandler("#show_filteredit", "#filteredit");
+    clickHandler("#show_cssedit", "#cssedit");
+    clickHandler("#show_jsedit", "#jsedit");
 })();

www/assets/js/ui.js

@@ -4,14 +4,14 @@ function generateToggle(chevron, div) {
         if($(div).css("display") == "none") {
             $(chevron).html($(chevron).html().replace(/Show/, "Hide"));
             $(div).show();
-            $(chevron+" i").removeClass("icon-chevron-down")
+            $(chevron+" i").removeClass("icon-plus")
-                .addClass("icon-chevron-up");
+                .addClass("icon-minus");
         }
         else {
             $(chevron).html($(chevron).html().replace(/Hide/, "Show"));
             $(div).hide();
-            $(chevron+" i").removeClass("icon-chevron-up")
+            $(chevron+" i").removeClass("icon-minus")
-                .addClass("icon-chevron-down");
+                .addClass("icon-plus");
         }
     });
 }

www/channel.html

@@ -89,14 +89,17 @@
           <!-- left pane - Library + user playlists -->
           <div class="span5" id="leftpane-outer">
             <div class="row-fluid" id="leftpane-inner">
+              <!-- new poll controls -->
+              <div class="span12" id="pollbtnwrap">
                   <button class="btn btn-primary btn-small" id="newpollbtn">New Poll</button>
+              </div>
               <!-- poll container -->
               <div class="span12" id="pollwrap">
-                <!-- new poll controls -->
               </div>
               <!-- library search -->
+              <div class="well well-small span12 row-fluid">
               <div class="span12 pointer" id="librarytoggle">
-                <i class="icon-chevron-down pull-left"></i>
+                <i class="icon-plus pull-left"></i>
                 <p>Show Library</p>
               </div>
               <div id="librarywrap">
@@ -110,9 +113,11 @@
                 <ul class="span12 videolist" id="library">
                 </ul>
               </div>
+              </div>
               <!-- user playlists -->
+              <div class="well well-small span12 row-fluid">
               <div class="span12 pointer" id="userpltoggle">
-                <i class="icon-chevron-down pull-left"></i>
+                <i class="icon-plus pull-left"></i>
                 <p>Show Playlist Manager</p>
               </div>
               <div id="userplaylistwrap">
@@ -127,6 +132,7 @@
               </div>
               </div>
             </div>
+          </div>
           <!-- right pane - channel playlist -->
           <div class="span7" id="rightpane-outer">
             <div class="row-fluid" id="rightpane-inner">
@@ -135,8 +141,9 @@
               <!-- electric boogaloo -->
               <div class="span12" id="queue_align2"></div>
               <!-- playlist controls -->
+              <div class="well well-small span12 row-fluid">
               <div class="span12 pointer" id="playlisttoggle">
-                <i class="icon-chevron-down pull-left"></i>
+                <i class="icon-plus pull-left"></i>
                 <p>Show Playlist Controls</p>
               </div>
               <div id="playlist_controls">
@@ -154,6 +161,7 @@
                   <button class="btn btn-block" id="shuffleplaylist">Shuffle Playlist</button>
                 </div>
               </div>
+              </div>
               <!-- video queue -->
               <ul class="span12 videolist" id="queue">
               </ul>
@@ -164,7 +172,12 @@
             </div>
           </div>
           <!-- moderator controls -->
-          <div class="span12 row-fluid" id="channelsettingswrap">
+          <!-- there has got to be a better way to nest this -->
+          <div class="span12" id="channelsettingswrap3">
+            <div class="well" id="channelsettingswrap2">
+              <div class="row-fluid" id="channelsettingswrap">
+              </div>
+            </div>
           </div>
         </div>
       </div>

www/channeloptions.html

@@ -1,5 +1,10 @@
 <script src="/assets/js/channelsettings.js"></script>
-<ul class="nav nav-pills" id="channelsettings_nav">
+<div class="btn-group">
+    <a class="btn dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)">
+        <span id="csdropdown_title">Moderation Menu</span>
+        <span class="caret"></span>
+    </a>
+    <ul class="dropdown-menu" id="channelsettings_nav">
         <li id="optedit_tab"><a href="javascript:void(0);" id="show_optedit">Channel Options</a></li>
         <li id="permedit_tab"><a href="javascript:void(0);" id="show_permedit">Permissions</a></li>
         <li id="motdedit_tab"><a href="javascript:void(0);" id="show_motdedit">MOTD Editor</a></li>
@@ -9,13 +14,89 @@
         <li id="banlist_tab"><a href="javascript:void(0);" id="show_banlist">Ban List</a></li>
         <li id="recentconn_tab"><a href="javascript:void(0);" id="show_recentconn">Recent Connections</a></li>
     </ul>
+</div>
+<hr>
 
 <div id="optedit" class="span12">
-    Wut
+    <form class="form-horizontal" action="javascript:void(0)">
+    <!-- prevent chat flood -->
+    <div class="control-group">
+        <label class="control-label" for="opt_chat_antiflood">Prevent Chat Flood</label>
+        <div class="controls">
+            <input type="checkbox" id="opt_chat_antiflood">
+        </div>
+    </div>
+    <!-- convert URLs to links -->
+    <div class="control-group">
+        <label class="control-label" for="opt_enable_link_regex">Convert URLs in chat to links</label>
+        <div class="controls">
+            <input type="checkbox" id="opt_enable_link_regex">
+        </div>
+    </div>
+    <!-- voteskip toggle -->
+    <div class="control-group">
+        <label class="control-label" for="opt_allow_voteskip">Allow Voteskip</label>
+        <div class="controls">
+            <input type="checkbox" id="opt_allow_voteskip">
+        </div>
+    </div>
+    <!-- voteskip ratio -->
+    <div class="control-group">
+        <label class="control-label" for="opt_voteskip_ratio">Voteskip Ratio</label>
+        <div class="controls">
+            <input type="text" id="opt_voteskip_ratio" placeholder="0.5">
+        </div>
+    </div>
+    <hr>
+    <strong>Admin-Only Controls</strong>
+    <!-- page title -->
+    <div class="control-group">
+        <label class="control-label" for="opt_pagetitle">Page Title</label>
+        <div class="controls">
+            <input type="text" id="opt_pagetitle" placeholder="CyTube">
+        </div>
+    </div>
+    <!-- external CSS -->
+    <div class="control-group">
+        <label class="control-label" for="opt_externalcss">External CSS</label>
+        <div class="controls">
+            <input type="text" id="opt_externalcss" placeholder="Stylesheet URL">
+        </div>
+    </div>
+    <!-- external JS -->
+    <div class="control-group">
+        <label class="control-label" for="opt_externaljs">External Javascript</label>
+        <div class="controls">
+            <input type="text" id="opt_externaljs" placeholder="Script URL">
+        </div>
+    </div>
+    <!-- show publicly -->
+    <div class="control-group">
+        <label class="control-label" for="opt_show_public">List Channel Publicly</label>
+        <div class="controls">
+            <input type="checkbox" id="opt_show_public">
+        </div>
+    </div>
+</div>
+<br>
 </div>
 <div id="permedit" class="span12">
-    Permissions shit
+Permissions Here
 </div>
 <div id="motdedit" class="span12">
-    MOTD shit
+    <textarea rows="10" id="motdtext"></textarea>
+    <button class="btn btn-primary" id="save_motd">Save</button>
+</div>
+<div id="filteredit" class="span12">
+Filters Here
+</div>
+<div id="cssedit" class="span12">
+    <p>Max 20KB.  If you need more space, host the file externally and use the External CSS option</p>
+    <textarea rows="10" id="csstext"></textarea>
+    <button class="btn btn-primary" id="save_css">Save</button>
+</div>
+<div id="jsedit" class="span12">
+    <p>Max 20KB.  If you need more space, host the file externally and use the External JS option</p>
+    <textarea rows="10" id="jstext"></textarea>
+    <button class="btn btn-primary" id="save_js">Save</button>
 </div>