Fix synchtube layout, add placeholder text, fix alignment issue

www/assets/js/client.js

@@ -532,6 +532,7 @@ function narrowLayout() {
 
 function synchtubeLayout() {
     $("#videodiv").detach().insertBefore($("#chatdiv"));
+    $("#queuediv").detach().prependTo($("#queuerow"));
 }
 
 function onYouTubeIframeAPIReady() {

www/assets/js/functions.js

@@ -973,8 +973,13 @@ function showUserOpts() {
         .appendTo(layoutselect);
     $("<option/>").attr("value", "single").text("Single Column")
         .appendTo(layoutselect);
+    $("<option/>").attr("value", "synchtube").text("Synchtube")
+        .appendTo(layoutselect);
     layoutselect.val(USEROPTS.layout);
     addOption("Layout", layoutselect);
+    var warn = $("<p/>").addClass("text-error")
+        .text("Changing layouts may require a refresh")
+    addOption("", warn);
 
     var synchcontainer = $("<label/>").addClass("checkbox")
         .text("Synchronize Media");
@@ -1051,6 +1056,9 @@ function applyOpts() {
         case "single":
             singleColumnLayout();
             break;
+        case "synchtube":
+            synchtubeLayout();
+            break;
         default:
             break;
     }

www/index.html

@@ -78,7 +78,7 @@
                     <div class="span12" id="pollcontainer">
                     </div>
                     <div class="span7" style="margin-left: 0;">
-                        <input type="text" id="library_query" class="input-block-level">
+                        <input type="text" id="library_query" class="input-block-level" placeholder="Search Query">
                     </div>
                     <div class="span5 btn-group">
                         <button class="btn" id="library_search">Library</button>
@@ -91,10 +91,13 @@
                 </div>
             </div>
             <div class="span7" id="queuediv">
+                <div class="row-fluid" id="qclear">
+                    <div class="span12"></div>
+                </div>
                 <div id="playlist_controls"style="display: none;">
                     <div class="row-fluid">
                         <div class="span8">
-                            <input type="text" id="mediaurl" class="input-block-level">
+                            <input type="text" id="mediaurl" class="input-block-level" placeholder="Media URL">
                         </div>
                         <div class="span4 btn-group">
                             <button class="btn" id="queue_next">Next</button>
@@ -240,16 +243,6 @@
                 </table>
             </div>
         </div>
-        <div class="row" id="layout_buttons">
-            <div class="span4 offset3">
-                <div class="btn-group" style="width: 100%">
-                    <button id="largelayout" class="btn">Large Layout</button>
-                    <button id="hugelayout" class="btn">Huge Layout</button>
-                    <button id="narrowlayout" class="btn">Narrow Layout</button>
-                    <button id="stlayout" class="btn">Synchtube Layout</button>
-                </div>
-            </div>
-        </div>
     </div> <!-- /container -->
     <div class="push"></div>
     </div>