1 files changed, 31 insertions, 10 deletions

diff --git a/js/cli-demo.js b/js/cli-demo.js
index e7be617..ef6de87 100644
--- a/js/cli-demo.js
+++ b/js/cli-demo.js
@@ -10,8 +10,11 @@
     var cli_demo = function() {
 
         var $this = $(this);
+
         var interval = 2000;
         var speed = 80;
+        var running = false;
+        var current = null;
 
         $this.init = function() {
 
@@ -45,6 +48,12 @@
                 'click': function() { $this.play(); }
             }).appendTo($this.control);
 
+            $this.playButton = $('<button/>', {
+                'html': 'Stop',
+                'class': 'cli-demo-button',
+                'click': function() { $this.stop(); }
+            }).appendTo($this.control);
+
             $this.prevButton = $('<button/>', {
                 'html': 'Prev',
                 'class': 'cli-demo-button',
@@ -95,17 +104,24 @@
 
         $this.play = function() {
 
+            running = true;
+
             var run = function() {
+                if (!running) return;
                 if ($this.elements.contents().length == 0) return;
 
                 $this.next(function() {
-                    setTimeout(run, interval);
+                    if (running) setTimeout(run, interval);
                 });
             };
 
             run.call();
         };
 
+        $this.stop = function() {
+            running = false;
+        };
+
         $this.prev = function() {
             if ($this.content.contents().length == 0) return;
 
@@ -134,22 +150,22 @@
                 return;
             }
 
-            var element = $this.elements.contents().first().detach();
+            current = $this.elements.contents().first().detach();
 
-            if (element.hasClass('cli-demo-input')) {
-                var text = element.text();
+            if (current.hasClass('cli-demo-input')) {
+                var text = current.text();
                 if (text.length == 0) {
-                    $this.content.append(element);
+                    $this.content.append(current);
                     $this.next(callback);
 
                 } else {
-                    element.text('');
+                    current.text('');
                     var i = 0;
 
-                    $this.content.append(element);
+                    $this.content.append(current);
                     $this.animator = setInterval(function() {
                         if (i <= text.length) {
-                            element.text(text.substring(0, i));
+                            current.text(text.substring(0, i));
                             i++;
                         } else {
                             clearInterval($this.animator);
@@ -160,7 +176,7 @@
                 }
 
             } else {
-                $this.content.append(element);
+                $this.content.append(current);
                 $this.flush(function() {
                     var height = $this.content.height();
                     $this.console.scrollTop(height);
@@ -170,7 +186,12 @@
         };
 
         $this.reset = function() {
-            $this.elements.append($this.content.contents().detach());
+
+            $this.stop();
+
+            var elements = $this.content.contents().detach()
+            $this.elements.prepend(elements);
+
             $this.flush(function() {
                 var height = $this.content.height();
                 $this.console.scrollTop(height);