change behaviour of sidebar

jquery.tooltip.css

@@ -3,7 +3,7 @@
 	z-index: 3000;
 	border: 1px solid #111;
 	background-color: rgb(187,187,87);
-  background-color: rgba(187,187,87,0.7);
+  background-color: rgba(187,187,87,0.9);
 	padding: 5px;
 	opacity: 1;
   border-radius: 10px;

test.css

@@ -16,7 +16,7 @@ body {
 }
 
 #essay {
-  width: 100%;
+  width: 60%;
 }
 
 .para {
@@ -30,14 +30,19 @@ h1 {
 }
 
 #padmaSidebar {
-  width: 0px;
+  width: 400px;
   position: fixed;
   top: 0px;
   right: 0px;
-  background: #ffffff;
+  background: #000;
   bottom: 0px;
 }
 
+#aboutTxt {
+  color: #ccc;
+  padding: 15px;
+}
+
 #padmaSidebarRelative {
   position: relative;
 }
@@ -51,7 +56,7 @@ h1 {
   margin-top: 15px;
   margin-bottom: 15px;
   font-size: 13px;
-  height: 420px;
+  height: 35%;
   padding: 8px;
   margin-left: 2px;
   margin-right: 2px;

test.html

@@ -74,6 +74,9 @@
   </h1>
   <div id="padmaSidebar">
     <div id="padmaSidebarWrapper"></div>
+    <div id="aboutTxt">
+      Abstract / About goes here.
+    </div>
   </div>
 
   <div id="essay">

test.js

@@ -3,6 +3,9 @@ var padmaContainer;
 $(function() {
   padmaContainer = $('#padmaSidebar');
   padmaContainer.data("currentVideo", false);
+  var docWidth = $(document).width();
+  var essayWidth = docWidth - 440;
+  $('#essay').css("width", essayWidth);
 });
 
 function setupPadmaLink(video, data) {
@@ -36,19 +39,28 @@ function setupPadmaLink(video, data) {
   $a.click(function(e) {
 
     function sidebarAnimateIn() {
+      /*
       $container.animate({'width': '400px'}, function() {
         $(this).animate({'backgroundColor': '#000000'});
       });
       var docWidth = $(document).width();
       var newWidth = docWidth - 440;
       $('#essay').animate({'width': newWidth + "px"});
+      */
+//      $container.show();
+      $('#aboutTxt').hide();
     }
 
     function sidebarAnimateOut() {
+      $container.find('.padmaViewer').empty();
+      $('#aboutTxt').show();
+             
+      /*
       $container.animate({'width': '0px'}, function() { 
         $(this).animate({'backgroundColor': '#ffffff'});
       });
       $('#essay').animate({'width': '100%'});
+      */
     }
 
     function isSidebarVisible() {
@@ -62,9 +74,11 @@ function setupPadmaLink(video, data) {
     e.preventDefault();
     var currentVideo = $container.data("currentVideo");
     if (currentVideo == video) { 
+    /*
      if (!isSidebarVisible()) {
         sidebarAnimateIn();
       }
+    */
       return;
     }
     if (currentVideo) {
@@ -76,6 +90,7 @@ function setupPadmaLink(video, data) {
     } 
     var html = tmpl("tmpl_sidebar", {'video': video, 'linkData': linkData});
     $('#padmaSidebarWrapper').html(html);
+    $('#aboutTxt').hide();
 
     //FIXME: should be a better way to deal with displaying default layer.
     var currentLayers = video.getLayersAtTimecode(npt2ms(linkData.tcIn));
@@ -119,7 +134,8 @@ function setupPadmaLink(video, data) {
     });
 
     videoElem.bind("ended", function() {
-      cleanupVideo(videoObj);
+      clearInterval(videoObj.interval);
+//      cleanupVideo(videoObj);
       sidebarAnimateOut();
     });