From 1f6209da11abc3b8f384e8f492a7a07c19296cd4 Mon Sep 17 00:00:00 2001
From: Kyle Fiedler <kfiedler@thoughtbot.com>
Date: Thu, 5 Apr 2012 14:48:20 -0400
Subject: [PATCH] Added styles and tooltips for full screen and captions

---
 static/css/application.css         |  6 ++++++
 templates/sass/layout/_layout.scss | 10 ++++++++++
 templates/video.html               | 17 ++++++++++++-----
 3 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/static/css/application.css b/static/css/application.css
index c582285440..07365a9ae7 100644
--- a/static/css/application.css
+++ b/static/css/application.css
@@ -506,6 +506,12 @@ html body section.main-content, html body section.outside-app {
     -o-border-radius: 4px;
     border-radius: 4px;
     margin-top: 11.326px; } }
+html body div.qtip div.ui-tooltip-content {
+  border: none;
+  background: rgba(0, 0, 0, 0.8);
+  color: #fff;
+  font: 12px 14px;
+  margin-top: 5px; }
 html body section.outside-app {
   max-width: 600px;
   padding: 22.652px; }
diff --git a/templates/sass/layout/_layout.scss b/templates/sass/layout/_layout.scss
index 1cc9e2cdd1..187bcd4723 100644
--- a/templates/sass/layout/_layout.scss
+++ b/templates/sass/layout/_layout.scss
@@ -30,6 +30,16 @@ html {
       }
     }
 
+    div.qtip {
+     div.ui-tooltip-content {
+       border: none;
+       background: rgba(#000, .8);
+       color: #fff;
+       font: 12px $body-font-size;
+       margin-top: 5px;
+      }
+    }
+
     section.outside-app {
       @extend .main-content;
       max-width: 600px;
diff --git a/templates/video.html b/templates/video.html
index 0fc563d43c..344a7193af 100644
--- a/templates/video.html
+++ b/templates/video.html
@@ -35,7 +35,7 @@
           <ol id="video_speeds"></ol>
         </div>
 
-        <a href="#" class="add-fullscreen" title="Full screen">Full screen</a>
+        <a href="#" class="add-fullscreen" title="Fill browser">Fill Browser</a>
 
         <a href="#" class="hide-subtitles" title="Turn off captions">Captions</a>
         </div>
@@ -69,7 +69,12 @@
 <%block name="js_extra">
 <script type="text/javascript" charset="utf-8">
   $(function() {
-      $('.add-fullscreen, .hide-subtitles').qtip();
+      $('.add-fullscreen, .hide-subtitles').qtip({
+        position: {
+my: 'top center',  // Position my top left...
+at: 'bottom center', // at the bottom right 
+        }
+        });
 
       $('.add-fullscreen').click(function() {
           //var window_height = $(window).height();
@@ -90,6 +95,10 @@
             $(this).remove();
             return false;
             });
+
+          var link_title = $(this).attr('title');
+          $(this).attr('title', (link_title == 'Exit fill browser') ? 'Fill browser' : 'Exit fill browser');
+
           return false;
         });
 
@@ -98,9 +107,7 @@
         $('div.video-subtitles').toggleClass('closed');
 
         var link_title = $(this).attr('title');
-        console.log(link_title);
-
-        ///$(this).attr('title', 'Turn on captions' ? 'Turn off captions' : 'Turn on captions');
+        $(this).attr('title', (link_title == 'Turn on captions') ? 'Turn off captions' : 'Turn on captions');
 
         return false;
        });