From ff6a6689bf1ed69ab68c57e0162c73f07dbc33ab Mon Sep 17 00:00:00 2001
From: rolux <rolux@rolux.org>
Date: Wed, 13 Feb 2013 10:03:26 +0530
Subject: [PATCH] rewrite video overlay js

---
 static/videoOverlay.js | 150 ++++++++++++++++++++++++-----------------
 1 file changed, 89 insertions(+), 61 deletions(-)

diff --git a/static/videoOverlay.js b/static/videoOverlay.js
index c976a72..f0253be 100644
--- a/static/videoOverlay.js
+++ b/static/videoOverlay.js
@@ -33,68 +33,97 @@ function getVideoOverlay(page) {
             //console.log('lets end it here');
         },
         appendImage: function(image) {
-            this.counter++;
-            var id = this.counter;
-            if (editable || videoOverlay[page][id]) {
-                var div = document.createElement('div');
-                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] && videoOverlay[page][id]) {
-                    div.className = 'interface video';
-                    div.title = 'Click to play video';
-                    div.onclick = function(event) {
-                        event.preventDefault();
-                        event.stopPropagation();
-                        var iframe = document.createElement('iframe');
-                        iframe.width = '100%';
-                        iframe.height = '100%';
-                        iframe.setAttribute('frameborder', '0');
-                        iframe.id = 'video' + page + id;
-                        iframe.src = getEmbedURL(iframe.id, videoOverlay[page][id]);
-                        div.appendChild(iframe);
-                        Array.prototype.forEach.call(div.getElementsByClassName('button'), function(e) {
-                            e.style.display = 'none';
-                        });
-                        return false;
-                    };
-                    var img = document.createElement('img');
-                    img.className = 'button playButton';
-                    img.src = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2Ij48cG9seWdvbiBwb2ludHM9IjU2LDMyIDI0OCwxMjggNTYsMjI0IiBmaWxsPSIjRkZGRkZGIi8+PC9zdmc+PCEtLXsiY29sb3IiOiJ2aWRlbyIsIm5hbWUiOiJzeW1ib2xQbGF5IiwidGhlbWUiOiJveGRhcmsifS0tPg==';
-                    div.appendChild(img);
-                } else {
-                    div.className = 'interface';
-                }
+            var id = ++this.counter,
+                hasVideo = videoOverlay[page] && videoOverlay[page][id],
+                $interface, $playButton, $editButton;
+            if (editable || hasVideo) {
+                $interface = Ox.$('<div>')
+                    .addClass('interface')
+                    .css({
+                        left: image.left + 'px',
+                        top: image.top + 'px',
+                        width: image.width + 'px',
+                        height: image.height + 'px'
+                    });
+                $playButton = Ox.$('<img>')
+                    .addClass('button playButton')
+                    .attr({
+                        src: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2Ij48cG9seWdvbiBwb2ludHM9IjU2LDMyIDI0OCwxMjggNTYsMjI0IiBmaWxsPSIjRkZGRkZGIi8+PC9zdmc+PCEtLXsiY29sb3IiOiJ2aWRlbyIsIm5hbWUiOiJzeW1ib2xQbGF5IiwidGhlbWUiOiJveGRhcmsifS0tPg=='
+                    })
+                    .hide()
+                    .appendTo($interface);
+                $editButton = Ox.$('<img>')
+                    .addClass('button editButton')
+                    .attr({
+                        src: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2Ij48cG9seWdvbiBwb2ludHM9IjMyLDIyNCA2NCwxNjAgOTYsMTkyIiBmaWxsPSIjRkZGRkZGIi8+PGxpbmUgeDE9Ijg4IiB5MT0iMTY4IiB4Mj0iMTg0IiB5Mj0iNzIiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLXdpZHRoPSI0OCIvPjxsaW5lIHgxPSIxOTIiIHkxPSI2NCIgeDI9IjIwOCIgeTI9IjQ4IiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iNDgiLz48bGluZSB4MT0iMTEyIiB5MT0iMjIwIiB4Mj0iMjI0IiB5Mj0iMjIwIiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iOCIvPjxsaW5lIHgxPSIxMjgiIHkxPSIyMDQiIHgyPSIyMjQiIHkyPSIyMDQiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLXdpZHRoPSI4Ii8+PGxpbmUgeDE9IjE0NCIgeTE9IjE4OCIgeDI9IjIyNCIgeTI9IjE4OCIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjgiLz48L3N2Zz4=',
+                        title: 'Click to add video'
+                    })
+                    .on({click: edit})
+                    .hide()
+                    .appendTo($interface);
                 if (editable) {
-                    var img = document.createElement('img');
-                    img.className = 'button editButton';
-                    img.src = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2Ij48cG9seWdvbiBwb2ludHM9IjMyLDIyNCA2NCwxNjAgOTYsMTkyIiBmaWxsPSIjRkZGRkZGIi8+PGxpbmUgeDE9Ijg4IiB5MT0iMTY4IiB4Mj0iMTg0IiB5Mj0iNzIiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLXdpZHRoPSI0OCIvPjxsaW5lIHgxPSIxOTIiIHkxPSI2NCIgeDI9IjIwOCIgeTI9IjQ4IiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iNDgiLz48bGluZSB4MT0iMTEyIiB5MT0iMjIwIiB4Mj0iMjI0IiB5Mj0iMjIwIiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iOCIvPjxsaW5lIHgxPSIxMjgiIHkxPSIyMDQiIHgyPSIyMjQiIHkyPSIyMDQiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLXdpZHRoPSI4Ii8+PGxpbmUgeDE9IjE0NCIgeTE9IjE4OCIgeDI9IjIyNCIgeTI9IjE4OCIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjgiLz48L3N2Zz4=';
-                    img.title = videoOverlay[page] && videoOverlay[page][id]
-                        ? 'Click to edit or remove video' : 'Click to add video';
-                    img.onclick = function(event) {
-                        event.preventDefault();
-                        event.stopPropagation();
-                        if (!videoOverlay[page]) {
-                            videoOverlay[page] = {}
-                        }
-                        if (!videoOverlay[page][id]) {
-                            videoOverlay[page][id] = '';
-                        }
-                        console.log('EDIT');
-                        var message = 'Please enter a pan.do/ra video URL, like\n'
-                                + 'http://pad.ma/A/editor/00:00:00,00:01:00,00:02:00'
-                                + (videoOverlay[page][id] ? '\n\nTo remove the video, just remove the URL.' : ''),
-                            url = prompt(message, videoOverlay[page][id]);
-                        if (url !== null) {
-                            videoOverlay[page][id] = url;
-                            saveVideoOverlay();
-                        }
-                        return false;
-                    }
-                    div.appendChild(img);
+                    $editButton.show();
                 }
-                this.div.appendChild(div);
+                if (hasVideo) {
+                    enableVideoUI();
+                }
+                this.div.appendChild($interface[0]);
+            }
+            function play(e) {
+                e.preventDefault();
+                e.stopPropagation();
+                var videoId = 'video' + page + id,
+                    $iframe = Ox.$('<iframe>')
+                        .attr({
+                            id: videoId,
+                            src: getEmbedURL(videoId, videoOverlay[page][id]),
+                            width: '100%',
+                            height: '100%',
+                            frameborder: 0
+                        })
+                        .appendTo($interface);
+                $playButton.hide();
+                $editButton && $editButton.hide();
+                return false;
+            }
+            function edit(e) {
+                var url;
+                e.preventDefault();
+                e.stopPropagation();
+                if (!videoOverlay[page]) {
+                    videoOverlay[page] = {}
+                }
+                if (!videoOverlay[page][id]) {
+                    videoOverlay[page][id] = '';
+                }
+                url = prompt(
+                    'Please enter a pan.do/ra video URL, like\n'
+                    + 'http://pad.ma/A/editor/00:00:00,00:01:00,00:02:00'
+                    + (videoOverlay[page][id] ? '\n\nTo remove the video, just remove the URL.' : ''),
+                    videoOverlay[page][id]
+                );
+                if (url !== null) {
+                    videoOverlay[page][id] = url;
+                    saveVideoOverlay();
+                    url !== '' ? enableVideoUI() : disableVideoUI()
+                }
+                return false;
+            }
+            function enableVideoUI() {
+                $interface
+                    .addClass('video')
+                    .attr({title: 'Click to play video'})
+                    .on({click: play});
+                $playButton.show();
+                $editButton.attr({title: 'Click to edit or remove video'});
+            }
+            function disableVideoUI() {
+                $interface
+                    .removeClass('video')
+                    .attr({title: ''})
+                    .off({click: play});
+                $playButton.hide();
+                $editButton.attr({title: 'Click to add video'});
             }
         }
     } : null;
@@ -114,7 +143,6 @@ function saveVideoOverlay() {
     request.open('POST', '/save');
     request.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
     request.send(formData);
-
     function getCookie(name) {
          var cookieValue = null;
          if (document.cookie && document.cookie != '') {