# HG changeset patch
# User Atul Varma <varmaa@toolness.com>
# Date 1265838950 28800
# Node ID ca63f0dd6b0ee75f7d7d27aa83838b3f388d3c97
# Parent  9c2325f7bcb1304c0d0cdbc1e6966bee5dce0552
Better subtitles, now toggle-able too.

diff -r 9c2325f7bcb1 -r ca63f0dd6b0e css/ff-herdict-preso.css
--- a/css/ff-herdict-preso.css	Wed Feb 10 13:32:36 2010 -0800
+++ b/css/ff-herdict-preso.css	Wed Feb 10 13:55:50 2010 -0800
@@ -20,22 +20,19 @@
 }
 
 #subtitles {
-    height: 400px;
     width: 660px;
+    height: 4em;
     margin: 0 auto;
-    display: table;
     font-size: 12pt;
-    position: absolute;
-    top: 0px;
+    display: none;
 }
 
 #subtitles p {
-    vertical-align: bottom;
     display: none;
 }
 
 #subtitles .visible {
-    display: table-cell;
+    display: block;
 }
 
 #slides {
@@ -60,6 +57,16 @@
     font-weight: bold;
 }
 
+#hide-subtitles {
+    display: none;
+}
+
+.button {
+    color: gray;
+    font-size: 9pt;
+    cursor: pointer;
+}
+
 audio {
     width: 660px;
 }
diff -r 9c2325f7bcb1 -r ca63f0dd6b0e ff-herdict-preso.html
--- a/ff-herdict-preso.html	Wed Feb 10 13:32:36 2010 -0800
+++ b/ff-herdict-preso.html	Wed Feb 10 13:55:50 2010 -0800
@@ -138,6 +138,8 @@
     standards-compliant browser that
     supports the <code>audio</code> element.
   </audio>
+  <p class="button" id="show-subtitles">Click to show subtitles.</p>
+  <p class="button" id="hide-subtitles">Click to hide subtitles.</p>
   <p id="license"><a rel="license" href="http://creativecommons.org/licenses/by/3.0/us/"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by/3.0/us/80x15.png" /></a></p>
 </div>
 </body>
diff -r 9c2325f7bcb1 -r ca63f0dd6b0e js/ff-herdict-preso.js
--- a/js/ff-herdict-preso.js	Wed Feb 10 13:32:36 2010 -0800
+++ b/js/ff-herdict-preso.js	Wed Feb 10 13:55:50 2010 -0800
@@ -121,4 +121,15 @@
     // Sync the audio with subtitles.
     syncVisualsWithAudio({audio: "audio#main",
                           visuals: "#subtitles > p[data-at]"});
+
+    $("#show-subtitles").click(function() {
+      $("#subtitles").slideDown();
+      $(this).hide();
+      $("#hide-subtitles").show();
+    });
+    $("#hide-subtitles").click(function() {
+      $("#subtitles").slideUp();
+      $(this).hide();
+      $("#show-subtitles").show();
+    });    
   });