From 3081cc0189943d2109e5ddc877b18fc3be976bac Mon Sep 17 00:00:00 2001
From: Kyle Fiedler <kfiedler@thoughtbot.com>
Date: Wed, 22 Feb 2012 15:01:56 -0500
Subject: [PATCH] Added styles and js to hide captions

--HG--
branch : kf-captions
---
 courseware.html             |   2 -
 sass/courseware/_video.scss | 348 ++++++++++++++++++++----------------
 video.html                  | 103 +++++++----
 3 files changed, 259 insertions(+), 194 deletions(-)

diff --git a/courseware.html b/courseware.html
index 67e596545e..af3b721e2e 100644
--- a/courseware.html
+++ b/courseware.html
@@ -1,13 +1,11 @@
 <%inherit file="main.html" />
 
-<%block name="js_extra">
 <!-- TODO: http://docs.jquery.com/Plugins/Validation -->
 <script type="text/javascript">
   $(function() {
       ${init}
     });
 </script>
-</%block>
 
 <%include file="navigation.html" args="active_page='courseware'" />
 
diff --git a/sass/courseware/_video.scss b/sass/courseware/_video.scss
index 264bcc953d..22e90916d5 100644
--- a/sass/courseware/_video.scss
+++ b/sass/courseware/_video.scss
@@ -1,185 +1,227 @@
 section.course-content {
+  div.video-subtitles {
+    position: relative;
 
-  div.video-wrapper {
-    float: left;
-    width: flex-grid(6, 9);
-    margin-right: flex-gutter(9);
+    div.video-wrapper {
+      float: left;
+      width: flex-grid(6, 9);
+      margin-right: flex-gutter(9);
 
-    div.video-player {
-      position: relative;
-      padding-bottom: 56.25%;
-      padding-top: 30px;
-      height: 0;
-      overflow: hidden;
+      div.video-player {
+        position: relative;
+        padding-bottom: 56.25%;
+        padding-top: 30px;
+        height: 0;
+        overflow: hidden;
 
-      object {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
+        object {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+        }
+
+        iframe#html5_player {
+          border: none;
+          display: none;
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+        }
       }
 
-      iframe#html5_player {
-        border: none;
-        display: none;
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-      }
-    }
+      // ul {
+      //   float: left;
 
-    // ul {
-    //   float: left;
+      //   li {
+      //     margin-top: 5px;
+      //     display: inline-block;
+      //     cursor: pointer;
+      //     border: 0;
+      //     padding: 0;
 
-    //   li {
-    //     margin-top: 5px;
-    //     display: inline-block;
-    //     cursor: pointer;
-    //     border: 0;
-    //     padding: 0;
+      //     div {
+      //       &:empty {
+      //         display: none;
+      //       }
+      //     }
+      //   }
+      // }
 
-    //     div {
-    //       &:empty {
-    //         display: none;
-    //       }
-    //     }
-    //   }
-    // }
-
-    section.video-controls {
-      @extend .clearfix;
-      background: #333;
-      border: 1px solid #000;
-      color: #ccc;
-
-      div#slider {
+      section.video-controls {
         @extend .clearfix;
-        @include border-radius(0);
-        @include box-shadow(inset 0 1px 0 #eee, 0 1px 0 #555);
-        background: #c2c2c2;
-        border: none;
-        border-bottom: 1px solid #000;
-        height: 14px;
+        background: #333;
+        border: 1px solid #000;
+        color: #ccc;
 
-        a.ui-slider-handle {
-          @include border-radius(20px);
-          @include box-shadow(inset 0 1px 0 lighten($mit-red, 10%));
-          background: $mit-red url(/static/images/slider-handle.png) center center no-repeat;
-          border: 0;
-          border: 1px solid darken($mit-red, 20%);
-          cursor: pointer;
-          height: 20px;
-          margin-left: -10px;
-          top: -4px;
-          width: 20px;
+        div#slider {
+          @extend .clearfix;
+          @include border-radius(0);
+          @include box-shadow(inset 0 1px 0 #eee, 0 1px 0 #555);
+          background: #c2c2c2;
+          border: none;
+          border-bottom: 1px solid #000;
+          height: 14px;
 
-          &:focus {
-            outline: none;
+          a.ui-slider-handle {
+            @include border-radius(20px);
+            @include box-shadow(inset 0 1px 0 lighten($mit-red, 10%));
+            background: $mit-red url(/static/images/slider-handle.png) center center no-repeat;
+            border: 0;
+            border: 1px solid darken($mit-red, 20%);
+            cursor: pointer;
+            height: 20px;
+            margin-left: -10px;
+            top: -4px;
+            width: 20px;
+
+            &:focus {
+              outline: none;
+            }
           }
         }
-      }
 
-      ul.vcr {
-        float: left;
-        margin-right: lh();
-
-        li {
+        ul.vcr {
           float: left;
-          margin-bottom: 0;
+          margin-right: lh();
 
-          a {
-            @include box-shadow(1px 0 0 #555);
-            border-right: 1px solid #000;
-            display: block;
-            cursor: pointer;
-            height: 14px;
-            padding: lh(.75) lh();
-            text-indent: -9999px;
-            width: 14px;
-
-            &.play {
-              background: url('/static/images/play-icon.png') center center no-repeat;
-
-              &:hover {
-                background-color: #444;
-              }
-            }
-
-            &.pause {
-              background: url('/static/images/pause-icon.png') center center no-repeat;
-
-              &:hover {
-                background-color: #444;
-              }
-            }
-          }
-        }
-      }
-
-      div#vidtime {
-        float: left;
-        font-weight: bold;
-        line-height: 46px; //height of play pause buttons
-        -webkit-font-smoothing: antialiased;
-      }
-
-      div.speeds {
-        float: right;
-        line-height: 46px; //height of play pause buttons
-        margin-right: lh();
-        -webkit-font-smoothing: antialiased;
-
-        div#video_speeds {
-          @include inline-block();
-          font-weight: bold;
-
-          span {
-            @include inline-block();
-            cursor: pointer;
+          li {
+            float: left;
             margin-bottom: 0;
 
+            a {
+              @include box-shadow(1px 0 0 #555);
+              border-right: 1px solid #000;
+              display: block;
+              cursor: pointer;
+              height: 14px;
+              padding: lh(.75) lh();
+              text-indent: -9999px;
+              width: 14px;
+
+              &.play {
+                background: url('/static/images/play-icon.png') center center no-repeat;
+
+                &:hover {
+                  background-color: #444;
+                }
+              }
+
+              &.pause {
+                background: url('/static/images/pause-icon.png') center center no-repeat;
+
+                &:hover {
+                  background-color: #444;
+                }
+              }
+
+            }
+
+            div#vidtime {
+              padding-left: lh();
+              font-weight: bold;
+              line-height: 46px; //height of play pause buttons
+              -webkit-font-smoothing: antialiased;
+            }
+          }
+        }
+
+        div.secondary-controls {
+          float: right;
+
+          div.speeds {
+            float: left;
+            line-height: 46px; //height of play pause buttons
+            padding-right: lh();
+            margin-right: 0;
+            -webkit-font-smoothing: antialiased;
+              @include box-shadow(1px 0 0 #555);
+              border-right: 1px solid #000;
+
+            div#video_speeds {
+              @include inline-block();
+              font-weight: bold;
+
+              span {
+                @include inline-block();
+                cursor: pointer;
+                margin-bottom: 0;
+
+                &:hover {
+                  color: $mit-red;
+                }
+              }
+            }
+          }
+
+          a.hide-subtitles {
+            float: left;
+            display: block;
+            padding-right: lh(.5);
+            margin-left: 0;
+            color: #797979;
+            padding-left: 50px;
+            line-height: 46px; //height of play pause buttons
+            font-weight: 800;
+            background: url('/static/images/cc.png') 16px center no-repeat;
+            -webkit-font-smoothing: antialiased;
+
             &:hover {
-              color: $mit-red;
+              color: #fff;
+              text-decoration: none;
+              background-color: #444;
             }
           }
         }
       }
     }
-  }
 
-  ol.subtitles {
-    float: left;
-    width: flex-grid(3, 9);
-    height: 530px;
-    overflow: hidden;
+    ol.subtitles {
+      float: left;
+      width: flex-grid(3, 9);
+      height: 530px;
+      overflow: hidden;
 
-    li {
-      margin-bottom: 0px;
-      cursor: pointer;
-      border: 0;
-      padding: 0;
-      color: #666;
-
-      &.current {
-        background-color: #f3f3f3;
-        color: #333;
-      }
-
-      &:hover {
-        color: $mit-red;
-      }
-
-      div {
-        margin-bottom: 8px;
-      }
-
-      div:empty {
+      li {
         margin-bottom: 0px;
+        cursor: pointer;
+        border: 0;
+        padding: 0;
+        color: #666;
+
+        &.current {
+          background-color: #f3f3f3;
+          color: #333;
+        }
+
+        &:hover {
+          color: $mit-red;
+        }
+
+        div {
+          margin-bottom: 8px;
+        }
+
+        div:empty {
+          margin-bottom: 0px;
+        }
+      }
+    }
+
+    &.closed {
+      @extend .trans;
+
+      div.video-wrapper {
+        width: flex-grid(9,9);
+      }
+
+      ol.subtitles {
+        width: 0px;
+        height: 0;
       }
     }
   }
-
 }
diff --git a/video.html b/video.html
index fdfc9c27a3..394e8f591e 100644
--- a/video.html
+++ b/video.html
@@ -1,48 +1,73 @@
 % if name is not UNDEFINED and name != None: 
-<h1> ${name} </h1>
+  <h1> ${name} </h1>
 % endif
-<div class="video-wrapper">
-  <div class="video-player">
-    <div id="ytapiplayer">
+
+<div class="video-subtitles">
+
+  <div class="video-wrapper">
+    <div class="video-player">
+      <div id="ytapiplayer">
+      </div>
+
+      <iframe id="html5_player" type="text/html" frameborder="0">
+      </iframe>
     </div>
 
-    <iframe id="html5_player" type="text/html" frameborder="0">
-    </iframe>
+    <section class="video-controls">
+      <div id="slider"></div>
+
+      <section>
+        <ul class="vcr">
+          <li><a id="video_control" class="pause">Pause</a></li>
+
+          <li>
+            <div id="vidtime">0:00/0:00</div>
+          </li>
+        </ul>
+
+
+        <div class="secondary-controls">
+        <div class="speeds">
+          Speed: <div id="video_speeds"></div>
+        </div>
+
+        <a href="#" class="hide-subtitles">on</a>
+        </div>
+      </section>
+    </section>
   </div>
 
-  <section class="video-controls">
-    <div id="slider"></div>
-
-    <section>
-      <ul class="vcr">
-        <li><a id="video_control" class="pause">Pause</a></li>
-      </ul>
-
-      <div id="vidtime">0:00/0:00</div>
-
-      <div class="speeds">
-        Speed: <div id="video_speeds"></div>
-      </div>
-    </section>
-  </section>
+  <ol class="subtitles">
+    <!-- <li id="stt_n5"><div id="std_n7" onclick="title_seek(-7);"></div></li> -->
+    <li id="stt_n4"><div id="std_n6" onclick="title_seek(-6);"></div></li>
+    <li id="stt_n4"><div id="std_n5" onclick="title_seek(-5);"></div></li>
+    <li id="stt_n4"><div id="std_n4" onclick="title_seek(-4);"></div></li>
+    <li id="stt_n3"><div id="std_n3" onclick="title_seek(-3);"></div></li>
+    <li id="stt_n2"><div id="std_n2" onclick="title_seek(-2);"></div></li>
+    <li id="stt_n1"><div id="std_n1" onclick="title_seek(-1);"></div></li>
+    <li id="stt_0 "class="current"><div id="std_0" onclick="title_seek(0);"></div></li>
+    <li id="stt_p1"><div id="std_p1" onclick="title_seek( 1);"></div></li>
+    <li id="stt_p2"><div id="std_p2" onclick="title_seek( 2);"></div></li>
+    <li id="stt_p3"><div id="std_p3" onclick="title_seek( 3);"></div></li>
+    <li id="stt_p4"><div id="std_p4" onclick="title_seek( 4);"></div></li>
+    <li id="stt_p5"><div id="std_p5" onclick="title_seek( 5);"></div></li>
+    <li id="stt_p6"><div id="std_p7" onclick="title_seek( 6);"></div></li>
+    <li id="stt_p6"><div id="std_p7" onclick="title_seek( 7);"></div></li>
+    <!-- <li id="stt_p6"><div id="std_p7" onclick="title_seek( 8);"></div></li> -->
+  </ol>
 
 </div>
 
-<ol class="subtitles">
-  <!-- <li id="stt_n5"><div id="std_n7" onclick="title_seek(-7);"></div></li> -->
-  <li id="stt_n4"><div id="std_n6" onclick="title_seek(-6);"></div></li>
-  <li id="stt_n4"><div id="std_n5" onclick="title_seek(-5);"></div></li>
-  <li id="stt_n4"><div id="std_n4" onclick="title_seek(-4);"></div></li>
-  <li id="stt_n3"><div id="std_n3" onclick="title_seek(-3);"></div></li>
-  <li id="stt_n2"><div id="std_n2" onclick="title_seek(-2);"></div></li>
-  <li id="stt_n1"><div id="std_n1" onclick="title_seek(-1);"></div></li>
-  <li id="stt_0 "class="current"><div id="std_0" onclick="title_seek(0);"></div></li>
-  <li id="stt_p1"><div id="std_p1" onclick="title_seek( 1);"></div></li>
-  <li id="stt_p2"><div id="std_p2" onclick="title_seek( 2);"></div></li>
-  <li id="stt_p3"><div id="std_p3" onclick="title_seek( 3);"></div></li>
-  <li id="stt_p4"><div id="std_p4" onclick="title_seek( 4);"></div></li>
-  <li id="stt_p5"><div id="std_p5" onclick="title_seek( 5);"></div></li>
-  <li id="stt_p6"><div id="std_p7" onclick="title_seek( 6);"></div></li>
-  <li id="stt_p6"><div id="std_p7" onclick="title_seek( 7);"></div></li>
-  <!-- <li id="stt_p6"><div id="std_p7" onclick="title_seek( 8);"></div></li> -->
-</ol>
+<%block name="js_extra">
+<script type="text/javascript" charset="utf-8">
+  $(function() {
+      $('.hide-subtitles').click(function() {
+        $('div.video-subtitles').toggleClass('closed');
+
+        var link_text = $('.hide-subtitles').text();
+        $(this).text((link_text == 'on') ? 'off' : 'on');
+        return false;
+       });
+  });
+</script>
+</%block>