From 3d9c178df3305a0dc2bbcb424880c26665b54e57 Mon Sep 17 00:00:00 2001
From: Saivann <saivann@gmail.com>
Date: Fri, 26 Jun 2015 17:13:00 -0400
Subject: [PATCH] Avoid duplicate code and non-reusable functions with
 hardcoded variables

---
 _templates/index.html | 15 +--------------
 index.html            | 15 +--------------
 js/main.js            | 13 +++++++++++++
 3 files changed, 15 insertions(+), 28 deletions(-)

diff --git a/_templates/index.html b/_templates/index.html
index 2453c9f9..941e38f5 100755
--- a/_templates/index.html
+++ b/_templates/index.html
@@ -5,21 +5,8 @@
 layout: base
 id: index
 ---
-<script>
-function loadMainVideo() {
-var p = document.getElementById('mainvideo'),
-    t = p.getElementsByTagName('DIV')[0],
-    nd = document.createElement('IFRAME');
-nd.src = '//www.youtube.com/embed/Gc2en3nHxA4?rel=0&amp;showinfo=0&amp;wmode=opaque&amp;autoplay=1{% if page.lang != 'en' %}&amp;cc_load_policy=1&amp;hl={{ page.lang }}&amp;cc_lang_pref={{ page.lang }}{% endif %}';
-nd.setAttribute('frameborder', 0);
-nd.setAttribute('allowfullscreen', true);
-t.innerHTML = '';
-t.appendChild(nd);
-p.onclick = '';
-}
-</script>
 <p class="mainsummary">{% translate listintro %}</p>
-<div class="mainvideo" id="mainvideo" onclick="loadMainVideo();"><div>
+<div class="mainvideo"><div onclick="loadYoutubeVideo(event);" data-youtubeurl="//www.youtube.com/embed/Gc2en3nHxA4?rel=0&amp;showinfo=0&amp;wmode=opaque&amp;autoplay=1{% if page.lang != 'en' %}&amp;cc_load_policy=1&amp;hl={{ page.lang }}&amp;cc_lang_pref={{ page.lang }}{% endif %}">
   <img src="/img/video/video_wuc.jpg" alt="Youtube video">
   <div class="mainvideoicon"></div>
   <div class="mainvideoiconhover"></div>
diff --git a/index.html b/index.html
index 57ef2b2d..18a7fe37 100755
--- a/index.html
+++ b/index.html
@@ -7,21 +7,8 @@ lang: en
 id: index
 title: Bitcoin
 ---
-<script>
-function loadMainVideo() {
-var p = document.getElementById('mainvideo'),
-    t = p.getElementsByTagName('DIV')[0],
-    nd = document.createElement('IFRAME');
-nd.src = '//www.youtube.com/embed/Gc2en3nHxA4?rel=0&amp;showinfo=0&amp;wmode=opaque&amp;autoplay=1{% if page.lang != 'en' %}&amp;cc_load_policy=1&amp;hl={{ page.lang }}&amp;cc_lang_pref={{ page.lang }}{% endif %}';
-nd.setAttribute('frameborder', 0);
-nd.setAttribute('allowfullscreen', true);
-t.innerHTML = '';
-t.appendChild(nd);
-p.onclick = '';
-}
-</script>
 <p class="mainsummary">{% translate listintro %}</p>
-<div class="mainvideo" id="mainvideo" onclick="loadMainVideo();"><div>
+<div class="mainvideo"><div onclick="loadYoutubeVideo(event);" data-youtubeurl="//www.youtube.com/embed/Gc2en3nHxA4?rel=0&amp;showinfo=0&amp;wmode=opaque&amp;autoplay=1{% if page.lang != 'en' %}&amp;cc_load_policy=1&amp;hl={{ page.lang }}&amp;cc_lang_pref={{ page.lang }}{% endif %}">
   <img src="/img/video/video_wuc.jpg" alt="Youtube video">
   <div class="mainvideoicon"></div>
   <div class="mainvideoiconhover"></div>
diff --git a/js/main.js b/js/main.js
index 139e365b..3ff90c95 100644
--- a/js/main.js
+++ b/js/main.js
@@ -115,6 +115,19 @@ for (var i = 0, n = domPrefixes.length; i < n; i++) {
 return false;
 }
 
+function loadYoutubeVideo(e) {
+// Load Youtube video on target node on click.
+var t = getEventTarget(e),
+    nd = document.createElement('IFRAME');
+while (t.getAttribute('data-youtubeurl') === null || t.getAttribute('data-youtubeurl') === '') t = t.parentNode;
+nd.src = t.getAttribute('data-youtubeurl');
+nd.setAttribute('frameborder', 0);
+nd.setAttribute('allowfullscreen', true);
+t.innerHTML = '';
+t.appendChild(nd);
+t.onclick = '';
+}
+
 function boxShow(e) {
 // Display the box content when the user click a box on the "Secure your wallet" page.
 var p = t = getEventTarget(e);