Save and restore params from the fragment identifier

Read location.hash when the switcher loads and use the parameters parsed out of it for the initial network conditions. Update location.hash after every simulation run completes so that it's easy to save scenarios for later re-use.

@@ -85,6 +85,13 @@
               capacity.
               capacity.
               <button type=button class=add-time-period>Add time period</button>
               <button type=button class=add-time-period>Add time period</button>
             </p>
             </p>
+            <p>
+              If you've created a complex scenario you'd like to retry
+              later, run the simulation and then save the URL of this
+              page. All of the network conditions you specify are
+              saved into the URL fragment after the results of a
+              simulation run are displayed.
+            </p>
             The video is available at
             The video is available at
             <ul>
             <ul>
               <li><input class=bitrate type=number min=1 value=65536> bits per second</li>
               <li><input class=bitrate type=number min=1 value=65536> bits per second</li>

@@ -29,18 +29,43 @@
 
 
   // a dynamic number of time-bandwidth pairs may be defined to drive the simulation
   // a dynamic number of time-bandwidth pairs may be defined to drive the simulation
   (function() {
   (function() {
-    var addTimePeriod = document.querySelector('.add-time-period'),
+    var params,
         networkTimeline = document.querySelector('.network-timeline'),
         networkTimeline = document.querySelector('.network-timeline'),
-        timePeriod = networkTimeline.querySelector('li:last-child').cloneNode(true);
-    addTimePeriod.addEventListener('click', function() {
-      var clone = timePeriod.cloneNode(true),
-          count = networkTimeline.querySelectorAll('input.bandwidth').length,
-          time = clone.querySelector('.time'),
-          bandwidth = clone.querySelector('input.bandwidth');
-
-      time.name = 'time' + count;
-      bandwidth.name = 'bandwidth' + count;
-      networkTimeline.appendChild(clone);
+        timePeriod = networkTimeline.querySelector('li:last-child').cloneNode(true),
+        appendTimePeriod = function() {
+          var clone = timePeriod.cloneNode(true),
+              count = networkTimeline.querySelectorAll('input.bandwidth').length,
+              time = clone.querySelector('.time'),
+              bandwidth = clone.querySelector('input.bandwidth');
+
+          time.name = 'time' + count;
+          bandwidth.name = 'bandwidth' + count;
+          networkTimeline.appendChild(clone);
+        };
+    document.querySelector('.add-time-period')
+      .addEventListener('click', appendTimePeriod);
+
+    // apply any simulation parameters that were set in the fragment identifier
+    if (!window.location.hash) {
+      return;
+    }
+
+    // time periods are specified as t<seconds>=<bitrate>
+    // e.g. #t15=450560&t150=65530
+    params = window.location.hash.substring(1)
+      .split('&')
+      .map(function(param) {
+        return ((/t(\d+)=(\d+)/i).exec(param) || [])
+          .map(window.parseFloat).slice(1);
+      }).filter(function(pair) {
+        return pair.length === 2;
+      });
+
+    networkTimeline.innerHTML = '';
+    params.forEach(function(param) {
+      appendTimePeriod();
+      networkTimeline.querySelector('li:last-child .time').value = param[0];
+      networkTimeline.querySelector('li:last-child input.bandwidth').value = param[1];
     });
     });
   })();
   })();
 
 
@@ -242,6 +267,11 @@
         clock.restore();
         clock.restore();
         fakeXhr.restore();
         fakeXhr.restore();
 
 
+        // update the fragment identifier so this scenario can be re-run easily
+        window.location.hash = '#' + options.bandwidths.map(function(interval) {
+          return 't' + interval.time + '=' + interval.bandwidth;
+        }).join('&');
+
         done(null, results);
         done(null, results);
       }, 0);
       }, 0);
     });
     });