Fix terminal carousel on landing page of docs

This isn't perfect, but it is a step in the right direction. This fixes
the prev button not working at all and the next button having some
undesirable behavior.

This seems to work for the most part, but I noticed that if I leave this
open and go to a different tab in my browser, there's some strange
behavior when I come back to the landing page: there are multiple
outputs playing at once. This is similar to the current behavior, where
clicking the next button multiple times does the same thing.

docs/_themes/jrnl/index.html

@@ -24,9 +24,9 @@
                 <h1>Collect your thoughts and notes <br />without leaving the command line</h1>
             </div>
             <div id="prompt">
-                <div class="pleft" onlick="next(); return false;"><i class="icon left"></i></div>
+                <div class="pleft" onclick="reset(); prev(); return false;"><i class="icon left"></i></div>
                 <div class="terminal">$ jrnl <span id="args"></span><span id="input">today: Started writing my memoirs. On the command line. Like a boss.</span><div id="output"></div></div>
-                <div class="pright" onclick="next(); return false;"><i class="icon right"></i></div>
+                <div class="pright" onclick="reset(); next(); return false;"><i class="icon right"></i></div>
             </div>
         </div>
         <div id="nav">

docs/_themes/jrnl/static/js/landing.js

@@ -11,18 +11,23 @@ var phrases = [
 var args = document.getElementById("args");
 var input = document.getElementById("input");
 var output = document.getElementById("output");
-var right = document.getElementById("right");
-var left = document.getElementById("left");
 var current = 0
 var timer = null;
+var fadeInTimer = null;
+var fadeOutTimer = null;
+var letterTimer = null;
+var unletterTimer = null;
 
 var next = function() {
-    clearTimeout(timer);
+    current = (current + 1) % phrases.length;
-    reveal(++current % phrases.length);
+    reveal(current);
-    setTimeout(next, 5000);
+    timer = setTimeout(next, 5000);
 }
+
 var prev = function() {
-    reveal(--current % phrases.length);
+    current = (current === 0) ? phrases.length - 1 : current - 1;
+    reveal(current);
+    timer = setTimeout(next, 5000);
 }
 
 var reveal = function(idx) {
@@ -31,9 +36,9 @@ var reveal = function(idx) {
     var output_text    = phrases[idx][2];
     var old_dix = idx == 0 ? phrases.length - 1 : idx - 1;
     console.log(idx, old_dix, "++++++++++++")
-    var old_args_text  = phrases[old_dix][0]
+    var old_args_text   = args.innerHTML;
-    var old_input_text = phrases[old_dix][1]
+    var old_input_text  = input.innerHTML;
-    var old_output_text =phrases[old_dix][2]
+    var old_output_text = output.innerHTML;
     console.log(args_text, input_text, output_text)
     console.log(old_args_text, old_input_text, old_output_text)
     var s4 = function() {fadeIn(output_text, output);}
@@ -42,23 +47,23 @@ var reveal = function(idx) {
     var s1 = function() {unletter(old_args_text, args, s2);}
     var s0 = function() {unletter(old_input_text, input, s1);}
     fadeOut(old_output_text, output, s0, 10);
-    // letter(input_text, input);
-    // output.innerHTML = output_text;
 }
+
 var fadeIn = function(text, element, next, step) {
     step = step || 0
     var nx = function() { fadeIn(text, element, next, ++step); }
     if (step==0) {
         element.innerHTML = "";
-        setTimeout(nx, 550);
+        fadeInTimer = setTimeout(nx, 550);
         return;
     }
     if (step==1) {element.innerHTML = text;}
     if (step>10 || !text) { if (next) {next(); return;} else return;}
     element.style.opacity = (step-1)/10;
     element.style.filter = 'alpha(opacity=' + (step-1)*10 + ')';
-    setTimeout(nx, 50);
+    fadeInTimer = setTimeout(nx, 50);
 }
+
 var fadeOut = function(text, element, next, step) {
     if (step===10) element.innerHTML = text;
     if (step<0 || !text) {
@@ -69,7 +74,7 @@ var fadeOut = function(text, element, next, step) {
     element.style.opacity = step/10;
     element.style.filter = 'alpha(opacity=' + step*10 + ')';
     var nx = function() { fadeOut(text, element, next, --step); }
-    setTimeout(nx, 50);
+    fadeOutTimer = setTimeout(nx, 50);
 }
 
 var unletter = function(text, element, next, timeout, index) {
@@ -78,7 +83,7 @@ var unletter = function(text, element, next, timeout, index) {
     if (index==-1 || !text.length) { if (next) {next(); return;} else return;}
     element.innerHTML = text.substring(0, index);
     var nx = function() { unletter(text, element, next, timeout, --index); }
-    setTimeout(nx, timeout);
+    unletterTimer = setTimeout(nx, timeout);
 }
 
 var letter = function(text, element, next, timeout, index) {
@@ -87,6 +92,18 @@ var letter = function(text, element, next, timeout, index) {
     if (index > text.length || !text.length) { if (next) {next(); return;} else return;}
     element.innerHTML = text.substring(0, index);
     var nx = function() { letter(text, element, next, timeout, ++index); }
-    setTimeout(nx, timeout);
+    letterTimer = setTimeout(nx, timeout);
 }
-setTimeout(next, 3000);
+
+var reset = function() {
+    var timers = [timer, fadeInTimer, fadeOutTimer, letterTimer, unletterTimer];
+    timers.forEach(function (t) {
+      clearTimeout(t);
+    });
+
+    args.innerHTML = "";
+    input.innerHTML = "";
+    output.innerHTML = "";
+}
+
+timer = setTimeout(next, 3000);