Merged in ernies video changes

mitx_global.html

@@ -12,7 +12,7 @@
       </section>
 
     <section class="intro-video">
-      <a rel="leanModal" href="#video-overlay"><img src="/static/images/video-image.png" alt="" /><span> Watch intro video</span></a>
+      <a id="video-overlay-link" rel="leanModal" href="#video-overlay"><img src="/static/images/video-image.png" id="video-img" alt="" /><span> Watch intro video</span></a>
     </section>
 
     </section>
@@ -48,12 +48,32 @@
 </section>
 
 <div id="video-overlay" class="leanModal_box">
-  <iframe width="560" height="315" src="http://www.youtube.com/embed/p2Q6BrNhdh8?rel=0" frameborder="0" allowfullscreen></iframe>
+  <iframe id="player" type="text/html" width="560" height="390" src="http://www.youtube.com/embed/p2Q6BrNhdh8?enablejsapi=1" frameborder="0">
+  </iframe>
 </div>
 <script>
 
+var player;
+function onYouTubePlayerAPIReady() {
+  player = new YT.Player('player', {
+  });
+}
+
 $(function() {
 
+    var tag = document.createElement('script');
+    tag.src = "http://www.youtube.com/player_api";
+    var firstScriptTag = document.getElementsByTagName('script')[0];
+    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+
+    $("a#video-overlay-link").click(function(){
+      player.playVideo();
+      $("a.modal_close, #lean_overlay").click(function(){
+        player.pauseVideo();
+      });
+    });
+
+
     // TODO: Clean up as per http://stackoverflow.com/questions/169506/obtain-form-input-fields-using-jquery
 
     /* Handles when the user hits 'enroll'. Grabs form data. Does AJAX.
@@ -89,7 +109,7 @@ $(function() {
           });
         })
 
-
    /*$("sregion"+$("[id^=spinner_]")[1].id.substring(7)) */
 });
+
 </script>

video_init.js

@@ -58,15 +58,23 @@ for(var i=0; i<l.length; i++) {
     add_speed(l[i], streams[l[i]])
 }
 
-//toggle video play/pause. the HTML assumes video is always autoplayed
-//initially since it starts with class "pause". may want to set that in
-//javascript
-$("#video_control").click(function(){
-  if ($(this).hasClass("play")){
+function toggleVideo(){
+  if ($("#video_control").hasClass("play")){
     play();
-    $(this).removeClass().addClass("pause");
+    $("#video_control").removeClass().addClass("pause");
   } else {
     pause();
-    $(this).removeClass().addClass("play");
+    $("#video_control").removeClass().addClass("play");
+  }
+}
+
+$("#video_control").click(toggleVideo);
+
+// space bar to pause video
+$(".video-wrapper").keyup(function(e){
+  active = document.activeElement;
+  if (e.which == 32) {
+    e.preventDefault();
+    $("#video_control").click();
   }
 });