From 354da0d0107aca983f674264c58d10daac49d6b8 Mon Sep 17 00:00:00 2001
From: rolux <rolux@rolux.org>
Date: Tue, 12 Feb 2013 16:08:01 +0530
Subject: [PATCH] update video overlay js

---
 static/videoOverlay.js | 60 ++++++++++++++++++++++++------------------
 1 file changed, 34 insertions(+), 26 deletions(-)

diff --git a/static/videoOverlay.js b/static/videoOverlay.js
index 6bf6e81..2120160 100644
--- a/static/videoOverlay.js
+++ b/static/videoOverlay.js
@@ -1,39 +1,47 @@
 function getVideoOverlay(page) {
-    var PLAY_BUTTON='data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2Ij48cG9seWdvbiBwb2ludHM9IjU2LDMyIDI0OCwxMjggNTYsMjI0IiBmaWxsPSIjNDA0MDQwIi8+PC9zdmc+PCEtLXsiY29sb3IiOiJkZWZhdWx0IiwibmFtZSI6InN5bWJvbFBsYXkiLCJ0aGVtZSI6Im94bGlnaHQifS0tPg==';
-    function playButton(height) {
-        var img = document.createElement('img');
-        img.src = PLAY_BUTTON;
-        img.style.cssText = "position: absolute;margin: auto;top: 0;left: 0;right: 0;bottom: 0;opacity:0.8;height: "+height+"px;width: auto";
-        img.title = 'Click to play';
-        return img;
-    }
     return videoOverlay[page] ? {
         beginLayout: function() {
-          this.counter = 0;
-          //console.log('lets beging');
+            this.counter = 0;
+            //console.log('lets beging');
         },
         endLayout: function() {
-          //console.log('lets end it here');
+            //console.log('lets end it here');
         },
         appendImage: function(image) {
             this.counter++;
             var id = this.counter;
-            if (videoOverlay[page][id]) {
-                console.log('add image', image, this);
+            if (videoOverlay[page][id] || editable) {
                 var div = document.createElement('div');
-                div.style.cssText = "position: relative; width: "
-                  + image.width + "px;height: "
-                  + image.height + "px;top:"
-                  + image.top + "px;left:"
-                  + image.left + "px;";
-                div.appendChild(playButton(image.height/1.5));
-                div.onclick = function(event) {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    div.innerHTML =  videoOverlay[page][id];
-                    div.style.opacity = 1;
-                    return false;
-                };
+                div.className = 'interface';
+                div.style.left = image.left + 'px';
+                div.style.top = image.top + 'px';
+                div.style.width = image.width + 'px';
+                div.style.height = image.height + 'px';
+                if (videoOverlay[page][id]) {
+                    div.title = 'Click to Play';
+                    div.onclick = function(event) {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        div.innerHTML = videoOverlay[page][id];
+                        return false;
+                    };
+                    var img = document.createElement('img');
+                    img.src = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2Ij48cG9seWdvbiBwb2ludHM9IjU2LDMyIDI0OCwxMjggNTYsMjI0IiBmaWxsPSIjRkZGRkZGIi8+PC9zdmc+PCEtLXsiY29sb3IiOiJ2aWRlbyIsIm5hbWUiOiJzeW1ib2xQbGF5IiwidGhlbWUiOiJveGRhcmsifS0tPg==';
+                    img.className = 'button playButton';
+                    div.appendChild(img);
+                } else {
+                    var img = document.createElement('img');
+                    img.src = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2Ij48cG9seWdvbiBwb2ludHM9IjMyLDIyNCA2NCwxNjAgOTYsMTkyIiBmaWxsPSIjRkZGRkZGIi8+PGxpbmUgeDE9Ijg4IiB5MT0iMTY4IiB4Mj0iMTg0IiB5Mj0iNzIiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLXdpZHRoPSI0OCIvPjxsaW5lIHgxPSIxOTIiIHkxPSI2NCIgeDI9IjIwOCIgeTI9IjQ4IiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iNDgiLz48bGluZSB4MT0iMTEyIiB5MT0iMjIwIiB4Mj0iMjI0IiB5Mj0iMjIwIiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iOCIvPjxsaW5lIHgxPSIxMjgiIHkxPSIyMDQiIHgyPSIyMjQiIHkyPSIyMDQiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLXdpZHRoPSI4Ii8+PGxpbmUgeDE9IjE0NCIgeTE9IjE4OCIgeDI9IjIyNCIgeTI9IjE4OCIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjgiLz48L3N2Zz4=';
+                    img.className = 'button editButton';
+                    img.title = 'Click to Edit';
+                    img.onclick = function(event) {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        console.log('EDIT');
+                        return false;
+                    }
+                    div.appendChild(img);
+                }
                 this.div.appendChild(div);
             }
         }