Added styles and js to hide captions

--HG--
branch : kf-captions

courseware.html

 <%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'" />
 

sass/courseware/_video.scss

 section.course-content {
+  div.video-subtitles {
+    position: relative;
 
     div.video-wrapper {
       float: left;
@@ -115,22 +117,29 @@ section.course-content {
                   background-color: #444;
                 }
               }
-          }
-        }
+
             }
 
             div#vidtime {
-        float: left;
+              padding-left: lh();
               font-weight: bold;
               line-height: 46px; //height of play pause buttons
               -webkit-font-smoothing: antialiased;
             }
+          }
+        }
 
-      div.speeds {
+        div.secondary-controls {
           float: right;
+
+          div.speeds {
+            float: left;
             line-height: 46px; //height of play pause buttons
-        margin-right: lh();
+            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();
@@ -147,6 +156,26 @@ section.course-content {
               }
             }
           }
+
+          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: #fff;
+              text-decoration: none;
+              background-color: #444;
+            }
+          }
+        }
       }
     }
 
@@ -182,4 +211,17 @@ section.course-content {
       }
     }
 
+    &.closed {
+      @extend .trans;
+
+      div.video-wrapper {
+        width: flex-grid(9,9);
+      }
+
+      ol.subtitles {
+        width: 0px;
+        height: 0;
+      }
+    }
+  }
 }

video.html

 % if name is not UNDEFINED and name != None: 
-<h1> ${name} </h1>
+  <h1> ${name} </h1>
 % endif
-<div class="video-wrapper">
+
+<div class="video-subtitles">
+
+  <div class="video-wrapper">
     <div class="video-player">
       <div id="ytapiplayer">
       </div>
@@ -16,19 +19,25 @@
       <section>
         <ul class="vcr">
           <li><a id="video_control" class="pause">Pause</a></li>
-      </ul>
 
+          <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>
 
-</div>
-
-<ol class="subtitles">
+  <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>
@@ -45,4 +54,20 @@
     <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>
+  </ol>
+
+</div>
+
+<%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>