Added tooltip for time on video

templates/main.html

@@ -107,6 +107,7 @@
 
   <script type="text/javascript" src="${ settings.LIB_URL }jquery.treeview.js"></script>
   <script type="text/javascript" src="/static/js/jquery.leanModal.min.js"></script>
+  <script type="text/javascript" src="/static/js/jquery.qtip.min.js"></script>
   <script type="text/javascript" src="/static/js/jquery.cookie.js"></script>
   <script type="text/javascript" src="/static/js/video_player.js"></script>
   <script type="text/javascript" src="/static/js/schematic.js"></script>

templates/sass/application.scss

@@ -4,7 +4,7 @@
 @import "base/reset", "base/font-face";
 @import "base/variables", "base/functions", "base/extends", "base/base";
 @import "layout/layout", "layout/header", "layout/footer", "layout/calculator", "layout/leanmodal";
-@import "plugins/jquery-ui-1.8.16.custom";
+@import "plugins/jquery-ui-1.8.16.custom", "plugins/jquery.qtip.min";
 
 // pages
 @import "courseware/courseware", "courseware/sidebar", "courseware/video", "courseware/sequence-nav", "courseware/amplifier";

templates/sass/courseware/_video.scss

@@ -62,6 +62,7 @@ section.course-content {
         background: #333;
         position: relative;
         border: 1px solid #000;
+        border-top: 0;
         color: #ccc;
 
         div#slider {
@@ -70,10 +71,16 @@ section.course-content {
           @include box-shadow(inset 0 1px 0 #eee, 0 1px 0 #555);
           background: #c2c2c2;
           border: none;
+          border-top: 1px solid #000;
           border-bottom: 1px solid #000;
           height: 7px;
           @include transition();
 
+          div.ui-widget-header {
+            background: #777;
+            @include box-shadow(inset 0 1px 0 #999);
+          }
+
           a.ui-slider-handle {
             @include border-radius(15px);
             @include box-shadow(inset 0 1px 0 lighten($mit-red, 10%));
@@ -125,6 +132,7 @@ section.course-content {
               padding: lh(.75);
               text-indent: -9999px;
               width: 14px;
+              @include transition();
 
               &.play {
                 background: url('/static/images/play-icon.png') center center no-repeat;
@@ -166,6 +174,7 @@ section.course-content {
             position: relative;
             @include transition();
             width: 110px;
+            cursor: pointer;
             -webkit-font-smoothing: antialiased;
 
             h3 {

templates/sass/plugins/_jquery.qtip.min.scss

@@ -0,0 +1 @@
+.ui-tooltip,.qtip{position:absolute;left:-28000px;top:-28000px;display:none;max-width:280px;min-width:50px;font-size:10.5px;line-height:12px;}.ui-tooltip-fluid{display:block;visibility:hidden;position:static!important;float:left!important;}.ui-tooltip-content{position:relative;padding:5px 9px;overflow:hidden;border:1px solid #000001;text-align:left;word-wrap:break-word;overflow:hidden;}.ui-tooltip-titlebar{position:relative;min-height:14px;padding:5px 35px 5px 10px;overflow:hidden;border:1px solid #000001;border-width:1px 1px 0;font-weight:bold;}.ui-tooltip-titlebar+.ui-tooltip-content{border-top-width:0!important;}/*!Default close button class */ .ui-tooltip-titlebar .ui-state-default{position:absolute;right:4px;top:50%;margin-top:-9px;cursor:pointer;outline:medium none;border-width:1px;border-style:solid;}* html .ui-tooltip-titlebar .ui-state-default{top:16px;}.ui-tooltip-titlebar .ui-icon,.ui-tooltip-icon .ui-icon{display:block;text-indent:-1000em;}.ui-tooltip-icon,.ui-tooltip-icon .ui-icon{-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}.ui-tooltip-icon .ui-icon{width:18px;height:14px;text-align:center;text-indent:0;font:normal bold 10px/13px Tahoma,sans-serif;color:inherit;background:transparent none no-repeat -100em -100em;}/*!Default tooltip style */ .ui-tooltip-default .ui-tooltip-titlebar,.ui-tooltip-default .ui-tooltip-content{border-color:#F1D031;background-color:#FFFFA3;color:#555;}.ui-tooltip-default .ui-tooltip-titlebar{background-color:#FFEF93;}.ui-tooltip-default .ui-tooltip-icon{border-color:#CCC;background:#F1F1F1;color:#777;}.ui-tooltip-default .ui-tooltip-titlebar .ui-state-hover{border-color:#AAA;color:#111;}

templates/video_init.js

@@ -20,9 +20,38 @@ if (swfobject.hasFlashPlayerVersion("10.1")){
   // Make sure the callback is called once API ready, YT seems to be buggy
   loadHTML5Video();
 }
+
 var captions=0;
-$("#slider").slider({slide:function(event,ui){seek_slide('slide',event.originalEvent,ui.value);},
-                     stop:function(event,ui){seek_slide('stop',event.originalEvent,ui.value);}});
+
+/* Cache a reference to our slider element */
+var slider = $('#slider')
+
+.slider({range: "min", slide:function(event,ui){seek_slide('slide',event.originalEvent,ui.value); handle.qtip('option', 'content.text', '' + ui.value);}, stop:function(event,ui){seek_slide('stop',event.originalEvent,ui.value);}}),
+
+/* Grab and cache the newly created slider handle */
+handle = $('.ui-slider-handle', slider);
+
+/* 
+	 * Selector needs changing here to match your elements.
+	 * 
+	 * Notice the second argument to the $() constructor, which tells
+	 * jQuery to use that as the top-level element to seareh down from.
+	 */
+	handle.qtip({
+		content: '' + slider.slider('option', 'value'), // Use the current value of the slider
+		position: {
+			my: 'bottom center',
+			at: 'top center',
+			container: handle // Stick it inside the handle element so it keeps the position synched up
+		},
+		hide: {
+			delay: 700 // Give it a longer delay so it doesn't hide frequently as we move the handle
+		},
+		style: {
+			classes: 'ui-tooltip-slider',
+			widget: true // Make it Themeroller compatible
+		}
+	});
 
 function good() {
     window['console'].log(ytplayer.getCurrentTime());
@@ -92,8 +121,6 @@ $(document).ready(function() {
 
 });
 
-
-
 function toggleVideo(){
   if ($("#video_control").hasClass("play")){
     play();