From 8cda98e0ac6eeedaf05c2dfa9bb0c1570291362c Mon Sep 17 00:00:00 2001
From: Ruben Verweij <verweij@physics.leidenuniv.nl>
Date: Fri, 10 May 2019 11:48:58 +0200
Subject: [PATCH 1/3] Show arbitrary number of incremental elements at the same
 time and add incremental hiding

---
 template.html | 81 +++++++++++++++++++++++++++++++++++++++------------
 1 file changed, 62 insertions(+), 19 deletions(-)

diff --git a/template.html b/template.html
index 5a75393..0455126 100644
--- a/template.html
+++ b/template.html
@@ -51,7 +51,8 @@ <h3>Even more incrementals</h3>
       <span class="next" next-order="3">They</span>
       <span class="next" next-order="5">can</span>
       <span class="next" next-order="2">even</span>
-      <span class="next" next-order="1">appear</span>
+      <span class="next" next-order="1" hide-after="7">appear</span>
+      <span class="next" next-order="8">disappear</span>
       <span class="next" next-order="7">in</span>
       <span class="next" next-order="4">any</span>
       <span class="next" next-order="6">order</span>
@@ -562,7 +563,7 @@ <h1>End!</h1>
     if (cursor.length == 2) {
       newidx = ~~cursor[1].split(".")[0];
       newstep = ~~cursor[1].split(".")[1];
-      if (newstep > Dz.slides[newidx - 1].$$('.next').length) {
+      if (newstep > this.getTotalSlideSteps(Dz.slides[newidx - 1])) {
         newstep = 0;
         newidx++;
       }
@@ -583,19 +584,18 @@ <h1>End!</h1>
     if (this.idx == 1) {
       return;
     }
-    this.setCursor(this.idx - 1,
-                   this.slides[this.idx - 2].$$('.next[active]').length);
+    this.setCursor(this.idx - 1, this.getTotalSlideSteps(this.slides[this.idx - 2]));
   }
 
   Dz.forward = function() {
     if (this.idx >= this.slides.length &&
-        this.step >= this.slides[this.idx - 1].$$('.next').length) {
+        this.step >= this.getTotalSlideSteps(this.slides[this.idx - 1])) {
         return;
     }
     if (this.html.classList.contains("view") ||
-        this.step >= this.slides[this.idx - 1].$$('.next').length) {
+        this.step >= this.getTotalSlideSteps(this.slides[this.idx - 1])) {
       this.setCursor(this.idx + 1,
-                     this.slides[this.idx].$$('.next[active]').length);
+                     this.getCurrentSlideStep(this.slides[this.idx]));
     } else {
       this.setCursor(this.idx, this.step + 1);
     }
@@ -607,7 +607,7 @@ <h1>End!</h1>
 
   Dz.goEnd = function() {
     var lastIdx = this.slides.length;
-    var lastStep = this.slides[lastIdx - 1].$$('.next').length;
+    var lastStep = this.getTotalSlideSteps(this.slides[lastIdx - 1]);
     this.setCursor(lastIdx, lastStep);
   }
 
@@ -647,18 +647,61 @@ <h1>End!</h1>
     }
   }
 
+  Dz.getTotalSlideSteps = function(slide) {
+    var total = 0;
+    var incrementals = Array.prototype.slice.call(slide.$$('.next'));
+    $$.forEach(incrementals, function(a, i) {
+        var order = i+1;
+        if (a.hasAttribute('next-order')) {
+            order = Number(a.getAttribute('next-order'));
+        }
+        if (order > total) {
+            total = order;
+        }
+    });
+    return total;
+  }
+
+  Dz.getCurrentSlideStep = function(slide) {
+    var total = 0;
+    var incrementals = Array.prototype.slice.call(slide.$$('.next'));
+    $$.forEach(incrementals, function(a, i) {
+        if (!a.hasAttribute('active')) {
+            return;
+        }
+        var order = i+1;
+        if (a.hasAttribute('next-order')) {
+            order = Number(a.getAttribute('next-order'));
+        }
+        if (order > total) {
+            total = order;
+        }
+    });
+    return total;
+  }
+
   Dz.setIncremental = function(aStep) {
-    this.step = aStep;
-    var incrementals = Array.prototype.slice.call(this.slides[this.idx - 1].$$('.next')).sort(function(a, b) {
-            return Number(a.getAttribute('next-order')) - Number(b.getAttribute('next-order'));
-          });
-    var next = incrementals[this.step - 1];
-    if (next) {
-      next.setAttribute('active', true);
-    } else {
-      this.setCursor(this.idx, 0);
+    var self = this;
+    self.step = aStep;
+    var incrementals = Array.prototype.slice.call(self.slides[self.idx-1].$$('.next'));
+    $$.forEach(incrementals, function(a, i) {
+        var order = i+1;
+        if (a.hasAttribute('next-order')) {
+            order = Number(a.getAttribute('next-order'));
+        }
+        var show = true;
+        if (a.hasAttribute('hide-after')) {
+            show = (Number(a.getAttribute('hide-after')) >= aStep);
+        }
+        if((aStep >= order) && show) {
+            a.setAttribute('active', true);
+        } else {
+            a.removeAttribute('active');
+        }
+    });
+    if (incrementals.length == 0) {
+        self.setCursor(self.idx, 0);
     }
-    return next;
   }
 
   Dz.goFullscreen = function() {
@@ -673,7 +716,7 @@ <h1>End!</h1>
     var slide = $("section:nth-of-type("+ aIdx +")");
     if (!slide)
       return;
-    var steps = slide.$$('.next').length + 1,
+    var steps = this.getTotalSlideSteps(slide),
         slideSize = 100 / (this.slides.length - 1),
         stepSize = slideSize / steps;
     this.progressBar.style.width = ((aIdx - 1) * slideSize + aStep * stepSize) + '%';

From 79a6819c1bf44590733e1d00a2cc2ba4af8169fc Mon Sep 17 00:00:00 2001
From: Ruben Verweij <verweij@physics.leidenuniv.nl>
Date: Fri, 10 May 2019 13:49:30 +0200
Subject: [PATCH 2/3] Convert to data- attributes for valid html

---
 template.html | 34 +++++++++++++++++-----------------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/template.html b/template.html
index 0455126..b83e4c2 100644
--- a/template.html
+++ b/template.html
@@ -48,15 +48,15 @@ <h3>More incrementals</h3>
 <section>
     <h3>Even more incrementals</h3>
     <p>
-      <span class="next" next-order="3">They</span>
-      <span class="next" next-order="5">can</span>
-      <span class="next" next-order="2">even</span>
-      <span class="next" next-order="1" hide-after="7">appear</span>
-      <span class="next" next-order="8">disappear</span>
-      <span class="next" next-order="7">in</span>
-      <span class="next" next-order="4">any</span>
-      <span class="next" next-order="6">order</span>
-      <span class="next" next-order="8">!</span>
+      <span class="next" data-next-order="3">They</span>
+      <span class="next" data-next-order="5">can</span>
+      <span class="next" data-next-order="2">even</span>
+      <span class="next" data-next-order="1" data-hide-after="7">appear</span>
+      <span class="next" data-next-order="8">disappear</span>
+      <span class="next" data-next-order="7">in</span>
+      <span class="next" data-next-order="4">any</span>
+      <span class="next" data-next-order="6">order</span>
+      <span class="next" data-next-order="8">!</span>
     </p>
 </section>
 
@@ -652,8 +652,8 @@ <h1>End!</h1>
     var incrementals = Array.prototype.slice.call(slide.$$('.next'));
     $$.forEach(incrementals, function(a, i) {
         var order = i+1;
-        if (a.hasAttribute('next-order')) {
-            order = Number(a.getAttribute('next-order'));
+        if (a.hasAttribute('data-next-order')) {
+            order = Number(a.getAttribute('data-next-order'));
         }
         if (order > total) {
             total = order;
@@ -670,8 +670,8 @@ <h1>End!</h1>
             return;
         }
         var order = i+1;
-        if (a.hasAttribute('next-order')) {
-            order = Number(a.getAttribute('next-order'));
+        if (a.hasAttribute('data-next-order')) {
+            order = Number(a.getAttribute('data-next-order'));
         }
         if (order > total) {
             total = order;
@@ -686,12 +686,12 @@ <h1>End!</h1>
     var incrementals = Array.prototype.slice.call(self.slides[self.idx-1].$$('.next'));
     $$.forEach(incrementals, function(a, i) {
         var order = i+1;
-        if (a.hasAttribute('next-order')) {
-            order = Number(a.getAttribute('next-order'));
+        if (a.hasAttribute('data-next-order')) {
+            order = Number(a.getAttribute('data-next-order'));
         }
         var show = true;
-        if (a.hasAttribute('hide-after')) {
-            show = (Number(a.getAttribute('hide-after')) >= aStep);
+        if (a.hasAttribute('data-hide-after')) {
+            show = (Number(a.getAttribute('data-hide-after')) >= aStep);
         }
         if((aStep >= order) && show) {
             a.setAttribute('active', true);

From 5f2f827a1fcf4d6a56ac78752267f3e5c8b05d25 Mon Sep 17 00:00:00 2001
From: Ruben Verweij <verweij@physics.leidenuniv.nl>
Date: Fri, 10 May 2019 14:00:13 +0200
Subject: [PATCH 3/3] Fix getCurrentStep

---
 template.html | 372 +++++++++++++++++++++++++-------------------------
 1 file changed, 185 insertions(+), 187 deletions(-)

diff --git a/template.html b/template.html
index b83e4c2..6fcb954 100644
--- a/template.html
+++ b/template.html
@@ -364,7 +364,7 @@ <h1>End!</h1>
 </style>
 
 <script>
-  var Dz = {
+var Dz = {
     remoteWindows: [],
     idx: -1,
     step: 0,
@@ -372,11 +372,11 @@ <h1>End!</h1>
     slides: null,
     progressBar : null,
     params: {
-      autoplay: "1"
+        autoplay: "1"
     }
-  };
+};
 
-  Dz.init = function() {
+Dz.init = function() {
     document.body.className = "loaded";
     this.slides = Array.prototype.slice.call($$("body > section"));
     this.progressBar = $("#progress-bar");
@@ -386,68 +386,68 @@ <h1>End!</h1>
     this.setupTouchEvents();
     this.onresize();
     this.setupView();
-  }
+}
 
-  Dz.setupParams = function() {
+Dz.setupParams = function() {
     var p = window.location.search.substr(1).split('&');
     p.forEach(function(e, i, a) {
-      var keyVal = e.split('=');
-      Dz.params[keyVal[0]] = decodeURIComponent(keyVal[1]);
+        var keyVal = e.split('=');
+        Dz.params[keyVal[0]] = decodeURIComponent(keyVal[1]);
     });
-  // Specific params handling
+    // Specific params handling
     if (!+this.params.autoplay)
-      $$.forEach($$("video"), function(v){ v.controls = true });
-  }
+        $$.forEach($$("video"), function(v){ v.controls = true });
+}
 
-  Dz.onkeydown = function(aEvent) {
+Dz.onkeydown = function(aEvent) {
     // Don't intercept keyboard shortcuts
     if (aEvent.altKey
-      || aEvent.ctrlKey
-      || aEvent.metaKey
-      || aEvent.shiftKey) {
-      return;
+        || aEvent.ctrlKey
+        || aEvent.metaKey
+        || aEvent.shiftKey) {
+        return;
     }
     if ( aEvent.keyCode == 37 // left arrow
-      || aEvent.keyCode == 38 // up arrow
-      || aEvent.keyCode == 33 // page up
+        || aEvent.keyCode == 38 // up arrow
+        || aEvent.keyCode == 33 // page up
     ) {
-      aEvent.preventDefault();
-      this.back();
+        aEvent.preventDefault();
+        this.back();
     }
     if ( aEvent.keyCode == 39 // right arrow
-      || aEvent.keyCode == 40 // down arrow
-      || aEvent.keyCode == 34 // page down
+        || aEvent.keyCode == 40 // down arrow
+        || aEvent.keyCode == 34 // page down
     ) {
-      aEvent.preventDefault();
-      this.forward();
+        aEvent.preventDefault();
+        this.forward();
     }
     if (aEvent.keyCode == 35) { // end
-      aEvent.preventDefault();
-      this.goEnd();
+        aEvent.preventDefault();
+        this.goEnd();
     }
     if (aEvent.keyCode == 36) { // home
-      aEvent.preventDefault();
-      this.goStart();
+        aEvent.preventDefault();
+        this.goStart();
     }
     if (aEvent.keyCode == 32) { // space
-      aEvent.preventDefault();
-      this.toggleContent();
+        aEvent.preventDefault();
+        this.toggleContent();
     }
     if (aEvent.keyCode == 70) { // f
-      aEvent.preventDefault();
-      this.goFullscreen();
+        aEvent.preventDefault();
+        this.goFullscreen();
     }
     if (aEvent.keyCode == 79    //o
-     || aEvent.keyCode == 27    //Esc
+        || aEvent.keyCode == 27    //Esc
     ) {
-      aEvent.preventDefault();
-      this.toggleView();
+        aEvent.preventDefault();
+        this.toggleView();
     }
-  }
+}
 
-  /* Touch Events */
+/* Touch Events */
 
-  Dz.setupTouchEvents = function() {
+Dz.setupTouchEvents = function() {
     var orgX, newX;
     var tracking = false;
 
@@ -456,39 +456,39 @@ <h1>End!</h1>
     db.addEventListener("touchmove", move.bind(this), false);
 
     function start(aEvent) {
-      aEvent.preventDefault();
-      tracking = true;
-      orgX = aEvent.changedTouches[0].pageX;
+        aEvent.preventDefault();
+        tracking = true;
+        orgX = aEvent.changedTouches[0].pageX;
     }
 
     function move(aEvent) {
-      if (!tracking) return;
-      newX = aEvent.changedTouches[0].pageX;
-      if (orgX - newX > 100) {
-        tracking = false;
-        this.forward();
-      } else {
-        if (orgX - newX < -100) {
-          tracking = false;
-          this.back();
+        if (!tracking) return;
+        newX = aEvent.changedTouches[0].pageX;
+        if (orgX - newX > 100) {
+            tracking = false;
+            this.forward();
+        } else {
+            if (orgX - newX < -100) {
+                tracking = false;
+                this.back();
+            }
         }
-      }
     }
-  }
+}
 
-  Dz.setupView = function() {
+Dz.setupView = function() {
     document.body.addEventListener("click", function ( e ) {
-      if (!Dz.html.classList.contains("view")) return;
-      if (!e.target || e.target.nodeName != "SECTION") return;
+        if (!Dz.html.classList.contains("view")) return;
+        if (!e.target || e.target.nodeName != "SECTION") return;
 
-      Dz.html.classList.remove("view");
-      Dz.setCursor(Dz.slides.indexOf(e.target) + 1);
+        Dz.html.classList.remove("view");
+        Dz.setCursor(Dz.slides.indexOf(e.target) + 1);
     }, false);
-  }
+}
 
-  /* Adapt the size of the slides to the window */
+/* Adapt the size of the slides to the window */
 
-  Dz.onresize = function() {
+Dz.onresize = function() {
     var db = document.body;
     var sx = db.clientWidth / window.innerWidth;
     var sy = db.clientHeight / window.innerHeight;
@@ -496,158 +496,156 @@ <h1>End!</h1>
     db.style.transform = transform;
     db.style.marginTop = -db.clientHeight / 2 + "px";
     db.style.marginLeft = -db.clientWidth / 2 + "px";
-  }
+}
 
 
-  Dz.getNotes = function(aIdx) {
+Dz.getNotes = function(aIdx) {
     var s = $("section:nth-of-type(" + aIdx + ")");
     var d = s.$("[role='note']");
     return d ? d.innerHTML : "";
-  }
+}
 
-  Dz.onmessage = function(aEvent) {
+Dz.onmessage = function(aEvent) {
     var argv = aEvent.data.split(" "), argc = argv.length;
     argv.forEach(function(e, i, a) { a[i] = decodeURIComponent(e) });
     var win = aEvent.source;
     if (argv[0] === "REGISTER" && argc === 1) {
-      this.remoteWindows.push(win);
-      this.postMsg(win, "REGISTERED", document.title, this.slides.length);
-      this.postMsg(win, "CURSOR", this.idx + "." + this.step);
-      return;
+        this.remoteWindows.push(win);
+        this.postMsg(win, "REGISTERED", document.title, this.slides.length);
+        this.postMsg(win, "CURSOR", this.idx + "." + this.step);
+        return;
     }
     if (argv[0] === "BACK" && argc === 1)
-      this.back();
+        this.back();
     if (argv[0] === "FORWARD" && argc === 1)
-      this.forward();
+        this.forward();
     if (argv[0] === "START" && argc === 1)
-      this.goStart();
+        this.goStart();
     if (argv[0] === "END" && argc === 1)
-      this.goEnd();
+        this.goEnd();
     if (argv[0] === "TOGGLE_CONTENT" && argc === 1)
-      this.toggleContent();
+        this.toggleContent();
     if (argv[0] === "SET_CURSOR" && argc === 2)
-      window.location.hash = "#" + argv[1];
+        window.location.hash = "#" + argv[1];
     if (argv[0] === "GET_CURSOR" && argc === 1)
-      this.postMsg(win, "CURSOR", this.idx + "." + this.step);
+        this.postMsg(win, "CURSOR", this.idx + "." + this.step);
     if (argv[0] === "GET_NOTES" && argc === 1)
-      this.postMsg(win, "NOTES", this.getNotes(this.idx));
-  }
+        this.postMsg(win, "NOTES", this.getNotes(this.idx));
+}
 
-  Dz.toggleContent = function() {
+Dz.toggleContent = function() {
     // If a Video is present in this new slide, play it.
     // If a Video is present in the previous slide, stop it.
     var s = $("section[aria-selected]");
     if (s) {
-      var video = s.$("video");
-      if (video) {
-        if (video.ended || video.paused) {
-          video.play();
-        } else {
-          video.pause();
+        var video = s.$("video");
+        if (video) {
+            if (video.ended || video.paused) {
+                video.play();
+            } else {
+                video.pause();
+            }
         }
-      }
     }
-  }
+}
 
-  Dz.setCursor = function(aIdx, aStep) {
+Dz.setCursor = function(aIdx, aStep) {
     // If the user change the slide number in the URL bar, jump
     // to this slide.
     aStep = (aStep != 0 && typeof aStep !== "undefined") ? "." + aStep : ".0";
     window.location.hash = "#" + aIdx + aStep;
-  }
+}
 
-  Dz.onhashchange = function() {
+Dz.onhashchange = function() {
     var cursor = window.location.hash.split("#"),
         newidx = 1,
         newstep = 0;
     if (cursor.length == 2) {
-      newidx = ~~cursor[1].split(".")[0];
-      newstep = ~~cursor[1].split(".")[1];
-      if (newstep > this.getTotalSlideSteps(Dz.slides[newidx - 1])) {
-        newstep = 0;
-        newidx++;
-      }
+        newidx = ~~cursor[1].split(".")[0];
+        newstep = ~~cursor[1].split(".")[1];
+        if (newstep > this.getTotalSlideSteps(Dz.slides[newidx - 1])) {
+            newstep = 0;
+            newidx++;
+        }
     }
     this.setProgress(newidx, newstep);
     if (newidx != this.idx) {
-      this.setSlide(newidx);
-    }
-    if (newstep != this.step) {
-      this.setIncremental(newstep);
+        this.setSlide(newidx);
     }
+    this.setIncremental(newstep);
     for (var i = 0; i < this.remoteWindows.length; i++) {
-      this.postMsg(this.remoteWindows[i], "CURSOR", this.idx + "." + this.step);
+        this.postMsg(this.remoteWindows[i], "CURSOR", this.idx + "." + this.step);
     }
-  }
+}
 
-  Dz.back = function() {
+Dz.back = function() {
     if (this.idx == 1) {
-      return;
+        return;
     }
     this.setCursor(this.idx - 1, this.getTotalSlideSteps(this.slides[this.idx - 2]));
-  }
+}
 
-  Dz.forward = function() {
+Dz.forward = function() {
     if (this.idx >= this.slides.length &&
         this.step >= this.getTotalSlideSteps(this.slides[this.idx - 1])) {
         return;
     }
     if (this.html.classList.contains("view") ||
         this.step >= this.getTotalSlideSteps(this.slides[this.idx - 1])) {
-      this.setCursor(this.idx + 1,
-                     this.getCurrentSlideStep(this.slides[this.idx]));
+        this.setCursor(this.idx + 1,
+            this.getCurrentSlideStep(this.slides[this.idx]));
     } else {
-      this.setCursor(this.idx, this.step + 1);
+        this.setCursor(this.idx, this.step + 1);
     }
-  }
+}
 
-  Dz.goStart = function() {
+Dz.goStart = function() {
     this.setCursor(1, 0);
-  }
+}
 
-  Dz.goEnd = function() {
+Dz.goEnd = function() {
     var lastIdx = this.slides.length;
     var lastStep = this.getTotalSlideSteps(this.slides[lastIdx - 1]);
     this.setCursor(lastIdx, lastStep);
-  }
+}
 
-  Dz.toggleView = function() {
+Dz.toggleView = function() {
     this.html.classList.toggle("view");
 
     if (this.html.classList.contains("view")) {
-      $("section[aria-selected]").scrollIntoView(true);
+        $("section[aria-selected]").scrollIntoView(true);
     }
-  }
+}
 
-  Dz.setSlide = function(aIdx) {
+Dz.setSlide = function(aIdx) {
     this.idx = aIdx;
     var old = $("section[aria-selected]");
     var next = $("section:nth-of-type("+ this.idx +")");
     if (old) {
-      old.removeAttribute("aria-selected");
-      var video = old.$("video");
-      if (video) {
-        video.pause();
-      }
+        old.removeAttribute("aria-selected");
+        var video = old.$("video");
+        if (video) {
+            video.pause();
+        }
     }
     if (next) {
-      next.setAttribute("aria-selected", "true");
-      if (this.html.classList.contains("view")) {
-        next.scrollIntoView();
-      } else {
-        var video = next.$("video");
-        if (video && !!+this.params.autoplay) {
-          video.play();
+        next.setAttribute("aria-selected", "true");
+        if (this.html.classList.contains("view")) {
+            next.scrollIntoView();
+        } else {
+            var video = next.$("video");
+            if (video && !!+this.params.autoplay) {
+                video.play();
+            }
         }
-      }
     } else {
-      // That should not happen
-      this.idx = -1;
-      // console.warn("Slide doesn't exist.");
+        // That should not happen
+        this.idx = -1;
+        // console.warn("Slide doesn't exist.");
     }
-  }
+}
 
-  Dz.getTotalSlideSteps = function(slide) {
+Dz.getTotalSlideSteps = function(slide) {
     var total = 0;
     var incrementals = Array.prototype.slice.call(slide.$$('.next'));
     $$.forEach(incrementals, function(a, i) {
@@ -660,10 +658,10 @@ <h1>End!</h1>
         }
     });
     return total;
-  }
+}
 
-  Dz.getCurrentSlideStep = function(slide) {
-    var total = 0;
+Dz.getCurrentSlideStep = function(slide) {
+    var step = 0;
     var incrementals = Array.prototype.slice.call(slide.$$('.next'));
     $$.forEach(incrementals, function(a, i) {
         if (!a.hasAttribute('active')) {
@@ -673,14 +671,14 @@ <h1>End!</h1>
         if (a.hasAttribute('data-next-order')) {
             order = Number(a.getAttribute('data-next-order'));
         }
-        if (order > total) {
-            total = order;
+        if (order > step) {
+            step = order;
         }
     });
-    return total;
-  }
+    return step;
+}
 
-  Dz.setIncremental = function(aStep) {
+Dz.setIncremental = function(aStep) {
     var self = this;
     self.step = aStep;
     var incrementals = Array.prototype.slice.call(self.slides[self.idx-1].$$('.next'));
@@ -702,80 +700,80 @@ <h1>End!</h1>
     if (incrementals.length == 0) {
         self.setCursor(self.idx, 0);
     }
-  }
+}
 
-  Dz.goFullscreen = function() {
+Dz.goFullscreen = function() {
     var html = $('html'),
         requestFullscreen = html.requestFullscreen || html.requestFullScreen || html.mozRequestFullScreen || html.webkitRequestFullScreen;
     if (requestFullscreen) {
-      requestFullscreen.apply(html);
+        requestFullscreen.apply(html);
     }
-  }
-  
-  Dz.setProgress = function(aIdx, aStep) {
+}
+
+Dz.setProgress = function(aIdx, aStep) {
     var slide = $("section:nth-of-type("+ aIdx +")");
     if (!slide)
-      return;
+        return;
     var steps = this.getTotalSlideSteps(slide),
         slideSize = 100 / (this.slides.length - 1),
         stepSize = slideSize / steps;
     this.progressBar.style.width = ((aIdx - 1) * slideSize + aStep * stepSize) + '%';
-  }
-  
-  Dz.postMsg = function(aWin, aMsg) { // [arg0, [arg1...]]
+}
+
+Dz.postMsg = function(aWin, aMsg) { // [arg0, [arg1...]]
     aMsg = [aMsg];
     for (var i = 2; i < arguments.length; i++)
-      aMsg.push(encodeURIComponent(arguments[i]));
+        aMsg.push(encodeURIComponent(arguments[i]));
     aWin.postMessage(aMsg.join(" "), "*");
-  }
-  
-  function init() {
+}
+
+function init() {
     Dz.init();
     window.onkeydown = Dz.onkeydown.bind(Dz);
     window.onresize = Dz.onresize.bind(Dz);
     window.onhashchange = Dz.onhashchange.bind(Dz);
     window.onmessage = Dz.onmessage.bind(Dz);
-  }
+}
 
-  window.onload = init;
+window.onload = init;
 
-  // Helpers
-  if (!Function.prototype.bind) {
+// Helpers
+if (!Function.prototype.bind) {
     Function.prototype.bind = function (oThis) {
 
-      // closest thing possible to the ECMAScript 5 internal IsCallable
-      // function 
-      if (typeof this !== "function")
-      throw new TypeError(
-        "Function.prototype.bind - what is trying to be fBound is not callable"
-      );
-
-      var aArgs = Array.prototype.slice.call(arguments, 1),
-          fToBind = this,
-          fNOP = function () {},
-          fBound = function () {
-            return fToBind.apply( this instanceof fNOP ? this : oThis || window,
-                   aArgs.concat(Array.prototype.slice.call(arguments)));
-          };
-
-      fNOP.prototype = this.prototype;
-      fBound.prototype = new fNOP();
-
-      return fBound;
+        // closest thing possible to the ECMAScript 5 internal IsCallable
+        // function 
+        if (typeof this !== "function")
+            throw new TypeError(
+                "Function.prototype.bind - what is trying to be fBound is not callable"
+            );
+
+        var aArgs = Array.prototype.slice.call(arguments, 1),
+            fToBind = this,
+            fNOP = function () {},
+            fBound = function () {
+                return fToBind.apply( this instanceof fNOP ? this : oThis || window,
+                    aArgs.concat(Array.prototype.slice.call(arguments)));
+            };
+
+        fNOP.prototype = this.prototype;
+        fBound.prototype = new fNOP();
+
+        return fBound;
     };
-  }
+}
 
-  var $ = (HTMLElement.prototype.$ = function(aQuery) {
+var $ = (HTMLElement.prototype.$ = function(aQuery) {
     return this.querySelector(aQuery);
-  }).bind(document);
+}).bind(document);
 
-  var $$ = (HTMLElement.prototype.$$ = function(aQuery) {
+var $$ = (HTMLElement.prototype.$$ = function(aQuery) {
     return this.querySelectorAll(aQuery);
-  }).bind(document);
+}).bind(document);
 
-  $$.forEach = function(nodeList, fun) {
+$$.forEach = function(nodeList, fun) {
     Array.prototype.forEach.call(nodeList, fun);
-  }
+}
 
 </script>
 <!-- vim: set fdm=marker: }}} -->