showoff 0.16.2 → 0.17.0

data/public/css/showoff.css

@@ -1,4 +1,9 @@
-body {
+body,
+.ui-widget,
+.ui-widget input,
+.ui-widget select,
+.ui-widget textarea,
+.ui-widget button {
   font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
   color: #222;
 }
@@ -520,20 +525,15 @@ img#disconnected {
   display: none;
   position: absolute;
   overflow: hidden;
+  width: 640px;
+  height: 500px;
   z-index: 99999;
-  width: 200px;
-  height: 150px;
-  background-color: white;
-  border: 1px solid #4D4F53;
+  background-color: inherit;
   margin: 0px;
-  border-radius: 3px;
-  box-shadow: 3px 3px 5px #ccc;
+  box-shadow:0 0 25px rgba(0,0,0,0.35);
+  transform: scale(0.3);
+  transform-origin: 0 0;
 }
-  #navigationHover .content {
-    width: 200%;
-    transform: scale(0.5);
-    transform-origin: 0 0;
-  }
 
 #askedQuestions {
   margin: 0;
@@ -600,7 +600,7 @@ pre.highlight code.language-console,
 pre.highlight code.console {
   background: #222;
   background: url(titlebar/left.png) left top no-repeat, url(titlebar/right.png) right top no-repeat, url(titlebar/center.png) center top repeat-x #222;
-  color: #63de00;
+  color: #fff;
   padding: 30px 0.5em 0.5em;
   border: 1px solid #acacac;
   border-radius: 6px;
@@ -797,6 +797,66 @@ form .element {
   display: none;
 }
 
+/*****************
+ ***   modals   ***
+ *****************/
+.ui-dialog.ui-widget-content {
+  border: none;
+  box-shadow:0 0 25px rgba(0,0,0,0.35);
+}
+
+.ui-dialog .links,
+.ui-dialog .description,
+.ui-dialog select {
+  font-size: .75em;
+}
+
+.ui-dialog .ui-dialog-buttonpane{
+  border: none;
+  padding: 0;
+  margin-top: 0;
+}
+
+.ui-dialog .ui-widget-header {
+  border: none;
+  background-color: transparent;
+}
+
+.ui-dialog .setting {
+  margin-bottom: 8px;
+}
+
+.ui-dialog .setting input {
+  margin-left: 1em;
+}
+
+.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
+  float: none;
+  padding-left: 1em;
+}
+
+.ui-dialog .links {
+  text-align: right;
+}
+
+.ui-dialog p,
+.ui-dialog select {
+  margin-left: 30px;
+}
+
+.ui-dialog p {
+  margin-top: .5em;
+  margin-bottom: .5em;
+}
+
+.no-close .ui-dialog-titlebar-close {
+  display: none;
+}
+
+ /*****************
+  *** end modal ***
+  *****************/
+
 /**********************************
  ***   supplemental materials   ***
  **********************************/

data/public/js/jquery-ui-1.12.1.js

@@ -13466,7 +13466,7 @@ var widgetsProgressbar = $.widget( "ui.progressbar", {
 
 		this.valueDiv
 			.toggle( this.indeterminate || value > this.min )
-			.width( percentage.toFixed( 0 ) + "%" );
+			.width( percentage.toFixed( 1 ) + "%" );
 
 		this
 			._toggleClass( this.valueDiv, "ui-progressbar-complete", null,
@@ -18703,4 +18703,4 @@ var widgetsTooltip = $.ui.tooltip;
 
 
 
-}));
+}));

data/public/js/presenter.js

@@ -18,25 +18,57 @@ $(document).ready(function(){
   // the presenter window doesn't need the reload on resize bit
   $(window).unbind('resize');
 
-  $("#startTimer").click(function() { startTimer()  });
-  $("#pauseTimer").click(function() { toggleTimer() });
-  $("#stopTimer").click(function()  { stopTimer()   });
-
-  /* zoom slide to match preview size, then set up resize handler. */
-  zoom(true);
-  $(window).resize(function() { zoom(true); });
-
-  $('#statslink').click(function(e) {
-    presenterPopupToggle('/stats', e);
+  $("#startTimer").click(    function() { startTimer()    });
+  $("#pauseTimer").click(    function() { toggleTimer()   });
+  $("#stopTimer").click(     function() { stopTimer()     });
+  $("#close-sidebar").click( function() { toggleSidebar() });
+  $("#edit").click(          function() { editSlide()     });
+// browser security causes a click event to react differently than an actual user click. Even though they're the same damn thing.
+//  $("#report").click(        function() { reportIssue()   });
+  $("#slaveWindow").click(   function() { toggleSlave()   });
+  $("#printSlides").click(   function() { printSlides()   });
+  $("#settings").click(      function() { $("#settings-modal").dialog("open"); });
+  $("#slideSource a").click( function() { openEditor() });
+  $("#notesToggle").click(   function() { toggleNotes() });
+  $("#clearCookies").click(  function() { clearCookies() });
+  $("#nextWinCancel").click( function() { chooseLayout('default') });
+  $("#openNextWindow").click(function() { openNext() });
+
+  $("#notes-wrapper .fa-minus").click( function() {
+    notesFontSize('decrease');
   });
-  $('#downloadslink').click(function(e) {
-    presenterPopupToggle('/download', e);
+  $("#notes-wrapper .fa-dot-circle-o").click( function() {
+    notesFontSize('reset');
   });
-  $('#layoutSelector').change(function(e) {
-    chooseLayout(e.target.value);
+  $("#notes-wrapper .fa-plus").click( function() {
+    notesFontSize('increase');
   });
+
+  $('#statslink').click(function(e) { presenterPopupToggle('/stats', e); });
+  $('#downloadslink').click(function(e) { presenterPopupToggle('/download', e); });
+
+  $('#layoutSelector').change(function(e) { chooseLayout(e.target.value); });
+
   chooseLayout(null);
 
+  $("#settings-modal").dialog({
+    autoOpen: false,
+    dialogClass: "no-close",
+    draggable: false,
+    height: "auto",
+    modal: true,
+    resizable: false,
+    width: 400,
+    buttons: {
+      Close: function() {
+        $( this ).dialog( "close" );
+      }
+    }
+  });
+
+  $("#annotationsToggle").checkboxradio({
+    icon: false
+  });
 
   // Bind events for mobile viewing
   if( mobile() ) {
@@ -68,9 +100,6 @@ $(document).ready(function(){
     document.cookie = "notes="+$('#notes').height();
   });
 
-  // Turn the progress display into an actual progressbar
-  $('#progress').progressbar({max:100})
-
   // restore the UI settings
   var ui = document.cookieHash['ui'];
   $('#notes').height(document.cookieHash['notes']);
@@ -146,7 +175,6 @@ $(document).ready(function(){
 
   }, 30000);
 
-
   // Tell the showoff server that we're a presenter
   register();
 
@@ -165,6 +193,10 @@ $(document).ready(function(){
     }
   };
 
+  /* zoom slide to match preview size, then set up resize handler. */
+  zoom(true);
+  $(window).resize(function() { zoom(true); });
+
 });
 
 function presenterPopupToggle(page, event) {
@@ -356,6 +388,23 @@ function toggleNotes() {
   zoom(true);
 }
 
+function notesFontSize(action) {
+  var current = parseInt($('#notes').css('font-size'));
+  switch (action) {
+    case 'increase':
+      $('#notes').css('font-size', current * 1.1);
+      break;
+
+    case 'decrease':
+      $('#notes').css('font-size', current * 0.9);
+      break;
+
+    case 'reset':
+      $('#notes').css('font-size', '');
+      break;
+  }
+}
+
 function blankStyledWindow(title, dimensions, classes, resizable) {
   // yes, the explicit address is needed. Because Chrome.
   var opts = "status=0,toolbar=0,location=0,menubar=0,"+dimensions;
@@ -579,21 +628,20 @@ function postSlide() {
     $('#notes').html(notes);
 
     var sections = getCurrentSections();
-    if(sections.size() > 1) {
-      var ul = $('<ul>').addClass('section-selector');
-      sections.each(function(idx, value){
-        var li = $('<li/>').appendTo(ul);
+
+    var ul = $('.section-selector').empty();
+    if(sections.size() > 0) {
+      sections.each( function (idx, value) {
+        var li = $('<li>').prependTo(ul);
         var a  = $('<a/>')
                       .text(value)
                       .attr('href','javascript:setCurrentSection("'+value+'");')
                       .appendTo(li);
 
-        if(section == value) {
+        if(section === value) {
           li.addClass('selected');
         }
       });
-
-      $('#notes').prepend(ul);
     }
 
     var nextIndex = slidenum + 1;
@@ -613,7 +661,8 @@ function postSlide() {
 
 		var fileName = currentSlide.children('div').first().attr('ref');
 		$('#slideFile').text(fileName);
-    $('#progress').progressbar('value', getSlidePercent());
+    $('#progress').progressbar({ max: slideTotal })
+                  .progressbar('value', slidenum);
 
     $("#notes div.form.wrapper").each(function(e) {
       renderFormInterval = renderFormWatcher($(this));
@@ -823,8 +872,7 @@ function toggleUpdater()
 /********************
  Annotations
  ********************/
-function toggleAnnotations()
-{
+function toggleAnnotations() {
   mode.annotations = $("#annotationsToggle").prop("checked");
 
   if(mode.annotations) {
@@ -842,7 +890,7 @@ function toggleAnnotations()
 }
 
 function openNext() {
-  $("#nextWindowConfirmation").slideUp(125);
+  $("#nextWindowConfirmation").hide();
   try {
     if(windowIsClosed(nextWindow)){
       nextWindow = blankStyledWindow("Next Slide Preview", 'width=320,height=300', 'next');
@@ -857,7 +905,7 @@ function openNext() {
 
         postSlide();
       }, 500);
-
+      $("#settings-modal").dialog("close");
     }
   }
   catch(e) {
@@ -876,7 +924,7 @@ function chooseLayout(layout)
 
   // in case we're being called externally, make the UI match
   $('#layoutSelector').val(layout);
-  $("#nextWindowConfirmation").slideUp(125);
+  $("#nextWindowConfirmation").hide();
   console.log("Setting layout to " + layout);
 
   // change focus so we don't inadvertently change layout again by changing slides
@@ -930,7 +978,7 @@ function chooseLayout(layout)
       break;
 
     case 'floating':
-      $("#nextWindowConfirmation").slideDown(125);
+      $("#nextWindowConfirmation").show();
       break;
 
     default:

data/public/js/showoff.js

@@ -362,11 +362,7 @@ function setupMenu() {
       sectionUL = '';
 
   slides.each(function(s, slide){
-    var slidePath = $(slide)
-      .find(".content")
-      .attr('ref')
-      .split('/')
-      .shift();
+    var slidePath = $(slide).attr('data-section');
     var headers = $(slide).children("h1, h2");
     var slideTitle = '';
     var content;
@@ -438,6 +434,13 @@ function setupMenu() {
   $("#navigation").append(nav);
 }
 
+// at some point this should get more sophisticated. Our needs are pretty minimal so far.
+function clearCookies() {
+  document.cookie = "sidebar=;expires=Thu, 21 Sep 1979 00:00:01 UTC;";
+  document.cookie = "layout=;expires=Thu, 21 Sep 1979 00:00:01 UTC;";
+  document.cookie = "notes=;expires=Thu, 21 Sep 1979 00:00:01 UTC;";
+}
+
 function checkSlideParameter() {
 	if (slideParam = currentSlideFromParams()) {
 		slidenum = slideParam;

data/views/header.erb

@@ -10,6 +10,7 @@
   <link rel="stylesheet" type="text/css" href="<%= @asset_path %>/css/highlight/<%= @highlightStyle %>.css"  />
   <link rel="stylesheet" type="text/css" href="<%= @asset_path %>/css/mermaid-6.0.0.css" />
   <link rel="stylesheet" type="text/css" href="<%= @asset_path %>/css/font-awesome-4.4.0/css/font-awesome.min.css">
+  <link rel="stylesheet" type="text/css" href="<%= @asset_path %>/css/jquery-ui-1.12.1.css">
   <link rel="stylesheet" type="text/css" href="<%= @asset_path %>/css/showoff.css?v=<%= SHOWOFF_VERSION %>" />
   <link rel="stylesheet" type="text/css" href="<%= @asset_path %>/css/zoomline-0.0.1.css">
 

data/views/presenter.erb

@@ -5,7 +5,6 @@
   <%= erb :header %>
   <link rel="stylesheet" href="<%= @asset_path %>/css/presenter.css?v=<%= SHOWOFF_VERSION %>" type="text/css"/>
   <link href="<%= @asset_path %>/css/TimeCircles-89ac5ae.css" rel="stylesheet">
-  <link href="<%= @asset_path %>/css/jquery-ui-1.12.1.css" rel="stylesheet">
 
   <script type="text/javascript" src="<%= @asset_path %>/js/TimeCircles-89ac5ae.js"></script>
   <script type="text/javascript" src="<%= @asset_path %>/js/presenter.js?v=<%= SHOWOFF_VERSION %>"></script>
@@ -22,136 +21,161 @@
 
 <div id="pagewrapper">
   <div id="topbar">
-    <a id="close-sidebar" class="fa fa-bars" aria-hidden="true" href="javascript:toggleSidebar();"></a>
-    <span id="slideSource">
-      <label>Source:</label>
-      <% if @request.host == 'localhost' %>
-        <a href="javascript:openEditor();"><span id="slideFile"></span></a>
-      <% else %>
-        <span id="slideFile"></span>
-      <% end %>
-    </span>
+    <a id="close-sidebar" class="fa fa-bars fa-2x" aria-hidden="true" href="#"></a>
+
     <span id="links">
       <span class="desktop">
+        <label for="annotationsToggle" class="no-mobile">Annotations <i class="fa fa-pencil"></i></label>
+        <input type="checkbox" id="annotationsToggle" autocomplete="off" class="no-mobile" />
+
         <% if @edit %>
-          <a id="edit" href="javascript:editSlide();" title="Edit current slide in new window.">Edit Slide <i class="fa fa-pencil-square-o"></i></a>
+          <a id="edit" href="#" title="Edit current slide in new window.">Edit Slide <i class="fa fa-pencil-square-o"></i></a>
         <% end %>
         <% if @issues %>
           <a id="report" href="javascript:reportIssue();" title="Report an issue with the current slide.">Report Issue With Slide <i class="fa fa-list-alt"></i></a>
         <% end %>
-        <span>
-          <a id="statslink" href="">Viewing Statistics <i class="fa fa-chevron-down"></i></a>
-          <a id="downloadslink" href="">Downloads <i class="fa fa-chevron-down"></i></a>
-        </span>
-        <span>
-          <a id="slaveWindow" href="javascript:toggleSlave();" title="Enable the display window.">Display Window <i class="fa fa-clone"></i></a>
-        </span>
-        <span>
-          <a id="printSlides" href="javascript:printSlides();" title="Print slides using a new window.">Print Slides <i class="fa fa-print"></i></a>
-          <a id="onePage" href="/" title="Switch to Display Window.">Switch Views <i class="fa fa-exchange fa-rotate-90"></i></a>
-        </span>
+
+        <a id="statslink" href="">Viewing Statistics <i class="fa fa-chevron-down"></i></a>
+
+        <a id="downloadslink" href="">Downloads <i class="fa fa-chevron-down"></i></a>
+
+        <a id="slaveWindow" href="#" title="Enable the display window.">Display Window <i class="fa fa-clone"></i></a>
+
+        <a id="printSlides" href="#" title="Print slides using a new window.">Print Slides <i class="fa fa-print"></i></a>
+
+        <a id="settings" href="#">Settings <i class="fa fa-cog"></i></a>
       </span>
-      <select id="layoutSelector" autocomplete="off">
-        <option value="default" selected>Default Layout</option>
-        <option value="thumbs"   title="Display thumbnail previews of the next and previous slides.">Thumbnails</option>
-        <option value="floating" title="Open the next slide as a floating window.">Floating</option>
-        <option value="beside"   title="Display the next slide as a large preview in the main presenter view.">Side-by-Side</option>
-      </select>
+
+
       <span class="mobile">
         <a id="update" href="">Update</a>
       </span>
     </span>
   </div>
-  <div id="nextWindowConfirmation">
-    <p>Browser security requires confirmation before opening a new window.</p>
-    <p><a href="javascript:chooseLayout('default');">cancel</a><input type="button" onClick="javascript:openNext();" value="Open Window" /></p>
-  </div>
-
-<div id="main">
-  <div id="sidebar">
-    <div id="timerSection">
-      <input type="button" id="pauseTimer" value="Pause" />
-      <input type="button" id="stopTimer" value="Cancel" />
-      <span id="timerLabel">Timer:</span>
-      <span id="minStart">
-        <input type="text" size="8" id="timerMinutes"/> min
-        <input type="button" id="startTimer" value="Start" />
-      </span>
-      <div id="timerDisplay"></div>
-    </div>
-    <div id="feedbackPace">
-      <span id="paceSlow">Speed Up!</span>
-      <span id="paceFast">Slow Down!</span>
-      <img id="paceMarker" src="<%= @asset_path %>/css/paceMarker.png" />
-    </div>
-    <div id="navigation" class="submenu"></div>
-    <div id="navigationHover"></div>
-    <div id="questions">
-      <h3>Audience Questions</h3>
-      <ol id="unanswered"></ol>
-      <ol id="answered"></ol>
-    </div>
-  </div>
 
-  <div id="presenter">
-    <div id="frame">
-      <div id="preview">
-        <img id="disconnected" src="<%= @asset_path %>/css/disconnected-large.png" />
-        <div id="prevSlide" class="thumb"><div class="container"></div><h3 class="label">Previous</h3></div>
-        <div id="nextSlide" class="thumb"><div class="container"></div><h3 class="label">Next</h3></div>
-        <div id="preso">loading presentation...</div>
+  <div id="main">
+    <div id="sidebar">
+      <div id="timerSection">
+        <input type="button" id="pauseTimer" value="Pause" />
+        <input type="button" id="stopTimer" value="Cancel" />
+        <span id="timerLabel">Timer:</span>
+        <span id="minStart">
+          <input type="text" size="8" id="timerMinutes"/> min
+          <input type="button" id="startTimer" value="Start" />
+        </span>
+        <div id="timerDisplay"></div>
       </div>
-      <div id="annotationToolbar">
-        <label>Tools</label>
-          <i class="fa fa-pencil tool default active" data-action="draw" aria-hidden="true"></i>
-          <i class="fa fa-arrow-right tool"  data-action="rightArrow" aria-hidden="true"></i>
-          <i class="fa fa-arrow-left tool"  data-action="leftArrow" aria-hidden="true"></i>
-          <i class="fa fa-bullseye tool" data-action="highlight" aria-hidden="true"></i>
-          <i class="fa fa-eraser tool"  data-action="erase" aria-hidden="true"></i>
-        <label>Lines</label>
-          <i class="fa fa-square-o lines color1 active" aria-hidden="true"></i>
-          <i class="fa fa-square-o lines color2" aria-hidden="true"></i>
-          <i class="fa fa-square-o lines color3" aria-hidden="true"></i>
-          <i class="fa fa-square-o lines color4" aria-hidden="true"></i>
-        <label>Shapes</label>
-          <i class="fa fa-square shapes color1" aria-hidden="true"></i>
-          <i class="fa fa-square shapes color2" aria-hidden="true"></i>
-          <i class="fa fa-square shapes color3 active" aria-hidden="true"></i>
-          <i class="fa fa-square shapes color4" aria-hidden="true"></i>
+      <div id="feedbackPace">
+        <span id="paceSlow">Speed Up!</span>
+        <span id="paceFast">Slow Down!</span>
+        <img id="paceMarker" src="<%= @asset_path %>/css/paceMarker.png" />
+      </div>
+      <div id="navigation" class="submenu"></div>
+      <div id="navigationHover"></div>
+      <div id="questions">
+        <h3>Audience Questions</h3>
+        <ol id="unanswered"></ol>
+        <ol id="answered"></ol>
       </div>
     </div>
 
-    <div id="statusbar">
-      <div id="progress" class="no-mobile"><span class="label">Slide: <span id="slideInfo"></span></span></div>
-      <div id="debugInfo"></div>
+    <div id="presenter">
+      <div id="frame">
+        <div id="preview">
+          <img id="disconnected" src="<%= @asset_path %>/css/disconnected-large.png" />
+          <div id="prevSlide" class="thumb"><div class="container"></div><h3 class="label">Previous</h3></div>
+          <div id="nextSlide" class="thumb"><div class="container"></div><h3 class="label">Next</h3></div>
+          <div id="preso">loading presentation...</div>
+        </div>
+        <div id="annotationToolbar">
+          <label>Tools</label>
+            <i class="fa fa-pencil tool default active" data-action="draw" aria-hidden="true"></i>
+            <i class="fa fa-arrow-right tool"  data-action="rightArrow" aria-hidden="true"></i>
+            <i class="fa fa-arrow-left tool"  data-action="leftArrow" aria-hidden="true"></i>
+            <i class="fa fa-bullseye tool" data-action="highlight" aria-hidden="true"></i>
+            <i class="fa fa-eraser tool"  data-action="erase" aria-hidden="true"></i>
+          <label>Lines</label>
+            <i class="fa fa-square-o lines color1 active" aria-hidden="true"></i>
+            <i class="fa fa-square-o lines color2" aria-hidden="true"></i>
+            <i class="fa fa-square-o lines color3" aria-hidden="true"></i>
+            <i class="fa fa-square-o lines color4" aria-hidden="true"></i>
+          <label>Shapes</label>
+            <i class="fa fa-square shapes color1" aria-hidden="true"></i>
+            <i class="fa fa-square shapes color2" aria-hidden="true"></i>
+            <i class="fa fa-square shapes color3 active" aria-hidden="true"></i>
+            <i class="fa fa-square shapes color4" aria-hidden="true"></i>
+        </div>
+      </div>
 
-      <div class="controls">
-        <span id="enableAnnotations" title="Enable the annotation system." class="no-mobile">
-          <label for="annotationsToggle">Annotations</label><input type="checkbox" id="annotationsToggle" autocomplete="off" />
-        </span>
-        <span id="enableFollower" title="Send slide change notifications.">
-          <label for="followerToggle">Update Follower</label><input type="checkbox" id="followerToggle" autocomplete="off" checked />
+      <div id="statusbar">
+        <span class="label">Slide: <span id="slideInfo"></span></span>
+        <span id="debugInfo"></span>
+        <span id="slideSource">
+          <% if @request.host == 'localhost' %>
+            <a href="#"><span id="slideFile"></span></a>
+          <% else %>
+            <span id="slideFile"></span>
+          <% end %>
         </span>
-        <span id="enableRemote" title="Enables tracking of other presenters.">
-          <label for="remoteToggle">Enable Remote</label><input type="checkbox" id="remoteToggle" autocomplete="off" checked />
-        </span>
-        <a class="no-mobile fa fa-external-link-square" aria-hidden="true" href="javascript:toggleNotes();"></a>
-        <i class="no-mobile fa fa-bars notes-grippy ui-resizable-handle ui-resizable-n" aria-hidden="true"></i>
+      </div>
+      <div id="progress" class="no-mobile"></div>
+
+      <div id="buttonNav">
+        <div id="buttonPrev"><i class="fa fa-chevron-left fa-lg"></i> Previous</div><div id="buttonNext">Next <i class="fa fa-chevron-right fa-lg"></i></div>
       </div>
 
+      <div id="notes-wrapper">
+        <ul class="section-selector"></ul>
+        <div class="controls">
+          <a class="no-mobile fa fa-minus small" aria-hidden="true" href="#"></a>
+          <a class="no-mobile fa fa-dot-circle-o small" aria-hidden="true" href="#"></a>
+          <a class="no-mobile fa fa-plus small" aria-hidden="true" href="#"></a>
+          <span class="spacer"> </span>
+          <a id="notesToggle" class="no-mobile fa fa-external-link-square" aria-hidden="true" href="#"></a>
+          <span><i class="no-mobile fa fa-bars notes-grippy ui-resizable-handle ui-resizable-n" aria-hidden="true"></i></span>
+        </div>
+        <div id="notes"></div>
+      </div>
+    </div><!-- end presenter -->
+  </div><!-- end main -->
+
+  <div id="settings-modal" title="Settings">
+    <div id="enableFollower" class="setting" title="Send slide change notifications.">
+      <label for="followerToggle">Update Follower</label><input type="checkbox" id="followerToggle" autocomplete="off" checked />
+      <p class="description">
+        When this is enabled, the Showoff server will track your slide changes. Disable it to observe the presentation without inadvertently causing slide changes.
+      </p>
     </div>
-    <div id="buttonNav">
-      <div id="buttonPrev"><i class="fa fa-chevron-left fa-lg"></i> Previous</div><div id="buttonNext">Next <i class="fa fa-chevron-right fa-lg"></i></div>
+    <div id="enableRemote" class="setting" title="Enables tracking of other presenters.">
+      <label for="remoteToggle">Enable Remote</label><input type="checkbox" id="remoteToggle" autocomplete="off" checked />
+      <p class="description">
+        When this is enabled, you can load the presenter in another browser (typically on your mobile phone) to control the presentation.
+      </p>
+    </div>
+    <div class="setting">
+      <label>Layout</label><br>
+      <select id="layoutSelector" autocomplete="off">
+        <option value="default" selected>Default Layout</option>
+        <option value="thumbs"   title="Display thumbnail previews of the next and previous slides.">Thumbnails</option>
+        <option value="floating" title="Open the next slide as a floating window.">Floating</option>
+        <option value="beside"   title="Display the next slide as a large preview in the main presenter view.">Side-by-Side</option>
+      </select>
+      <div id="nextWindowConfirmation">
+        <p class="description">Browser security requires confirmation before opening a new window.</p>
+        <p>
+          <input id="openNextWindow" type="button" onClick="#" value="Open Window" />
+          <a id="nextWinCancel" href="#">cancel</a>
+        </p>
+      </div>
+    </div>
+    <div class="links">
+      <a id="clearCookies" href="#" title="Reset Showoff UI settings to default values.">Clear Showoff settings.</a>
     </div>
-
-    <div id="notes"></div>
   </div>
 
-</div>
-
-<div id="slides" class="offscreen" <%= 'style="display:none;"' if @slides %>>
-<%= @slides %>
-</div>
-
+  <div id="slides" class="offscreen" <%= 'style="display:none;"' if @slides %>>
+  <%= @slides %>
+  </div>
+</div><!-- end pagewrapper -->
 </body>
 </html>