Added styles for speeds in video player

sass/courseware/_video.scss

@@ -54,6 +54,7 @@ section.course-content {
       section.video-controls {
         @extend .clearfix;
         background: #333;
+        position: relative;
         border: 1px solid #000;
         color: #ccc;
 
@@ -133,22 +134,47 @@ section.course-content {
           float: right;
 
           div.speeds {
+            border-right: 1px solid #000;
+            border-left: 1px solid #000;
+            @include box-shadow(1px 0 0 #555, inset 1px 0 0 #555);
             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();
+            h3 {
+              a {
+                color: #fff;
+                display: block;
+                padding: 0 lh(.5);
+
+                &:hover {
+                  text-decoration: none;
+                  background-color: #444;
+                }
+              }
+            }
+
+            ol#video_speeds {
+              @extend .clearfix;
+              background: #333;
+              border: 1px solid #000;
               font-weight: bold;
+              @include inline-block();
+              padding: 0 lh();
+              position: absolute;
+              right: 79px;
+              @include box-shadow(inset 0 1px 0 #555);
 
-              span {
-                @include inline-block();
+              li {
                 cursor: pointer;
+                float: left;
                 margin-bottom: 0;
+                margin-right: lh(.5);
+
+                &:last-child {
+                  margin-right: 0;
+                }
 
                 &:hover {
                   color: $mit-red;

video.html

@@ -28,7 +28,8 @@
 
         <div class="secondary-controls">
         <div class="speeds">
-          Speed: <div id="video_speeds"></div>
+          <h3><a href="#">Speed</a></h3>
+          <ol id="video_speeds"></ol>
         </div>
 
         <a href="#" class="hide-subtitles">on</a>
@@ -68,6 +69,14 @@
         $(this).text((link_text == 'on') ? 'off' : 'on');
         return false;
        });
+
+
+        $('.speeds ol').hide();
+
+      $('.speeds h3 a').click(function() {
+        $('.speeds ol').toggle();
+        return false;
+        });
   });
 </script>
 </%block>

video_init.js

@@ -34,9 +34,13 @@ loadNewVideo(streams["1.0"], ${ position });
 
 function add_speed(key, stream) {
     var id = 'speed_' + stream;
-    $("#video_speeds").append(' <span id="'+id+'">'+key+'x</span>');
+
+    $("#video_speeds").append(' <li id="'+id+'">'+key+'x</li>');
+
     $("#"+id).click(function(){
       change_video_speed(key, stream);
+      $(this).siblings().removeClass("active");
+      $(this).addClass("active");
     });
 }