update demo

demo/index.html

@@ -79,7 +79,7 @@ <H1><a href='../'><img src='../site/logo.png' width="30" /><span>videoconverter.
         <div class="clearfix">
           <h2>Terminal Demo</h2>
             <p>
-Imagine that you have installed FFmpeg on your computer.  Also imagine that you have files called <code>input.webm</code> and <code>input.jpeg</code> in the current directory.  Feel free to run whatever commands you want, or <strong>try the sample commands below:</strong>
+Imagine that you have installed FFmpeg on your computer.  Also imagine that you have files called <a href="bigbuckbunny.webm">input.webm</a> and <a href="bigbuckbunny.jpg">input.jpeg</a> in the current directory.  Feel free to run whatever commands you want, or <strong>try the sample commands below:</strong>
             </p>
 
             <div class="sample-commands">
@@ -97,6 +97,7 @@ <h2>Terminal Demo</h2>
 
               <button class="plain-button sample" data-command="-i input.webm -s 100x100 -f image2 -vf fps=fps=1,showinfo -an out%d.jpeg">Video to screenshots</button>
 
+              <button class="plain-button sample" data-command="-i input.webm -vf &quot;showinfo,drawbox=enable='between(n,0,60)' : x=10 : y=10 : w=50 : h=50 : color=red,drawbox=enable='gte(t,1)' : x=100 : y=100 : w=200 : h=200 : color=green&quot; -strict -2 output.mp4">Draw Boxes on Video</button>
 
             </div>
             <div id="terminal">

demo/terminal.js

@@ -55,11 +55,27 @@ function retrieveSampleVideo() {
   oReq.send(null);
 }
 
+function parseArguments(text) {
+  text = text.replace(/\s+/g, ' ');
+  var args = [];
+  // Allow double quotes to not split args.
+  text.split('"').forEach(function(t, i) {
+    t = t.trim();
+    if ((i % 2) === 1) {
+      args.push(t);
+    } else {
+      args = args.concat(t.split(" "));
+    }
+  });
+  return args;
+}
+
 
 function runCommand(text) {
   if (isReady()) {
     startRunning();
-    var args = text.split(" ");
+    var args = parseArguments(text);
+    console.log(args);
     worker.postMessage({
       type: "command",
       arguments: args,
@@ -147,6 +163,9 @@ document.addEventListener("DOMContentLoaded", function() {
 
   [].forEach.call(document.querySelectorAll(".sample"), function(link) {
     link.addEventListener("click", function(e) {
+      console.log("HI", this);
+      console.log(this.dataset.command)
+      console.log("HI", this.getAttribute("data-command"));
       inputElement.value = this.getAttribute("data-command");
       runCommand(inputElement.value);
       e.preventDefault();