From 38b0eb518d781eb81307daa052822c45ebc622c9 Mon Sep 17 00:00:00 2001
From: sideroad <sideroad.jp@gmail.com>
Date: Sat, 5 Jul 2014 21:48:25 +0900
Subject: [PATCH] Fixing affix style, Use scrollspy

---
 build/build.css      |   21 +-
 build/build.js       | 2994 +++++++++++++++++++++++++++++++++++++++---
 component.json       |    4 +-
 grunt-wpt-page.css   |   24 +-
 index.html           |  357 +++--
 index.js             |  315 +++--
 tests/locations.json |    2 +-
 tests/results.json   |    2 +-
 8 files changed, 3208 insertions(+), 511 deletions(-)

diff --git a/build/build.css b/build/build.css
index 295ddda..6d40ab3 100644
--- a/build/build.css
+++ b/build/build.css
@@ -8,6 +8,23 @@
  * Copyright 2011-2014 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  */.btn-default,.btn-primary,.btn-success,.btn-info,.btn-warning,.btn-danger{text-shadow:0 -1px 0 rgba(0,0,0,.2);-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075)}.btn-default:active,.btn-primary:active,.btn-success:active,.btn-info:active,.btn-warning:active,.btn-danger:active,.btn-default.active,.btn-primary.active,.btn-success.active,.btn-info.active,.btn-warning.active,.btn-danger.active{-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}.btn:active,.btn.active{background-image:none}.btn-default{text-shadow:0 1px 0 #fff;background-image:-webkit-linear-gradient(top,#fff 0,#e0e0e0 100%);background-image:-o-linear-gradient(top,#fff 0,#e0e0e0 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#e0e0e0));background-image:linear-gradient(to bottom,#fff 0,#e0e0e0 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe0e0e0', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);background-repeat:repeat-x;border-color:#dbdbdb;border-color:#ccc}.btn-default:hover,.btn-default:focus{background-color:#e0e0e0;background-position:0 -15px}.btn-default:active,.btn-default.active{background-color:#e0e0e0;border-color:#dbdbdb}.btn-default:disabled,.btn-default[disabled]{background-color:#e0e0e0;background-image:none}.btn-primary{background-image:-webkit-linear-gradient(top,#428bca 0,#2d6ca2 100%);background-image:-o-linear-gradient(top,#428bca 0,#2d6ca2 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#428bca),to(#2d6ca2));background-image:linear-gradient(to bottom,#428bca 0,#2d6ca2 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff2d6ca2', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);background-repeat:repeat-x;border-color:#2b669a}.btn-primary:hover,.btn-primary:focus{background-color:#2d6ca2;background-position:0 -15px}.btn-primary:active,.btn-primary.active{background-color:#2d6ca2;border-color:#2b669a}.btn-primary:disabled,.btn-primary[disabled]{background-color:#2d6ca2;background-image:none}.btn-success{background-image:-webkit-linear-gradient(top,#5cb85c 0,#419641 100%);background-image:-o-linear-gradient(top,#5cb85c 0,#419641 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#5cb85c),to(#419641));background-image:linear-gradient(to bottom,#5cb85c 0,#419641 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff419641', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);background-repeat:repeat-x;border-color:#3e8f3e}.btn-success:hover,.btn-success:focus{background-color:#419641;background-position:0 -15px}.btn-success:active,.btn-success.active{background-color:#419641;border-color:#3e8f3e}.btn-success:disabled,.btn-success[disabled]{background-color:#419641;background-image:none}.btn-info{background-image:-webkit-linear-gradient(top,#5bc0de 0,#2aabd2 100%);background-image:-o-linear-gradient(top,#5bc0de 0,#2aabd2 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#5bc0de),to(#2aabd2));background-image:linear-gradient(to bottom,#5bc0de 0,#2aabd2 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2aabd2', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);background-repeat:repeat-x;border-color:#28a4c9}.btn-info:hover,.btn-info:focus{background-color:#2aabd2;background-position:0 -15px}.btn-info:active,.btn-info.active{background-color:#2aabd2;border-color:#28a4c9}.btn-info:disabled,.btn-info[disabled]{background-color:#2aabd2;background-image:none}.btn-warning{background-image:-webkit-linear-gradient(top,#f0ad4e 0,#eb9316 100%);background-image:-o-linear-gradient(top,#f0ad4e 0,#eb9316 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#f0ad4e),to(#eb9316));background-image:linear-gradient(to bottom,#f0ad4e 0,#eb9316 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffeb9316', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);background-repeat:repeat-x;border-color:#e38d13}.btn-warning:hover,.btn-warning:focus{background-color:#eb9316;background-position:0 -15px}.btn-warning:active,.btn-warning.active{background-color:#eb9316;border-color:#e38d13}.btn-warning:disabled,.btn-warning[disabled]{background-color:#eb9316;background-image:none}.btn-danger{background-image:-webkit-linear-gradient(top,#d9534f 0,#c12e2a 100%);background-image:-o-linear-gradient(top,#d9534f 0,#c12e2a 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#d9534f),to(#c12e2a));background-image:linear-gradient(to bottom,#d9534f 0,#c12e2a 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc12e2a', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);background-repeat:repeat-x;border-color:#b92c28}.btn-danger:hover,.btn-danger:focus{background-color:#c12e2a;background-position:0 -15px}.btn-danger:active,.btn-danger.active{background-color:#c12e2a;border-color:#b92c28}.btn-danger:disabled,.btn-danger[disabled]{background-color:#c12e2a;background-image:none}.thumbnail,.img-thumbnail{-webkit-box-shadow:0 1px 2px rgba(0,0,0,.075);box-shadow:0 1px 2px rgba(0,0,0,.075)}.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus{background-color:#e8e8e8;background-image:-webkit-linear-gradient(top,#f5f5f5 0,#e8e8e8 100%);background-image:-o-linear-gradient(top,#f5f5f5 0,#e8e8e8 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#f5f5f5),to(#e8e8e8));background-image:linear-gradient(to bottom,#f5f5f5 0,#e8e8e8 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);background-repeat:repeat-x}.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus{background-color:#357ebd;background-image:-webkit-linear-gradient(top,#428bca 0,#357ebd 100%);background-image:-o-linear-gradient(top,#428bca 0,#357ebd 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#428bca),to(#357ebd));background-image:linear-gradient(to bottom,#428bca 0,#357ebd 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff357ebd', GradientType=0);background-repeat:repeat-x}.navbar-default{background-image:-webkit-linear-gradient(top,#fff 0,#f8f8f8 100%);background-image:-o-linear-gradient(top,#fff 0,#f8f8f8 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#f8f8f8));background-image:linear-gradient(to bottom,#fff 0,#f8f8f8 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff8f8f8', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);background-repeat:repeat-x;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 1px 5px rgba(0,0,0,.075);box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 1px 5px rgba(0,0,0,.075)}.navbar-default .navbar-nav>.active>a{background-image:-webkit-linear-gradient(top,#ebebeb 0,#f3f3f3 100%);background-image:-o-linear-gradient(top,#ebebeb 0,#f3f3f3 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#ebebeb),to(#f3f3f3));background-image:linear-gradient(to bottom,#ebebeb 0,#f3f3f3 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffebebeb', endColorstr='#fff3f3f3', GradientType=0);background-repeat:repeat-x;-webkit-box-shadow:inset 0 3px 9px rgba(0,0,0,.075);box-shadow:inset 0 3px 9px rgba(0,0,0,.075)}.navbar-brand,.navbar-nav>li>a{text-shadow:0 1px 0 rgba(255,255,255,.25)}.navbar-inverse{background-image:-webkit-linear-gradient(top,#3c3c3c 0,#222 100%);background-image:-o-linear-gradient(top,#3c3c3c 0,#222 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#3c3c3c),to(#222));background-image:linear-gradient(to bottom,#3c3c3c 0,#222 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3c3c3c', endColorstr='#ff222222', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);background-repeat:repeat-x}.navbar-inverse .navbar-nav>.active>a{background-image:-webkit-linear-gradient(top,#222 0,#282828 100%);background-image:-o-linear-gradient(top,#222 0,#282828 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#222),to(#282828));background-image:linear-gradient(to bottom,#222 0,#282828 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff222222', endColorstr='#ff282828', GradientType=0);background-repeat:repeat-x;-webkit-box-shadow:inset 0 3px 9px rgba(0,0,0,.25);box-shadow:inset 0 3px 9px rgba(0,0,0,.25)}.navbar-inverse .navbar-brand,.navbar-inverse .navbar-nav>li>a{text-shadow:0 -1px 0 rgba(0,0,0,.25)}.navbar-static-top,.navbar-fixed-top,.navbar-fixed-bottom{border-radius:0}.alert{text-shadow:0 1px 0 rgba(255,255,255,.2);-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 2px rgba(0,0,0,.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 2px rgba(0,0,0,.05)}.alert-success{background-image:-webkit-linear-gradient(top,#dff0d8 0,#c8e5bc 100%);background-image:-o-linear-gradient(top,#dff0d8 0,#c8e5bc 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#dff0d8),to(#c8e5bc));background-image:linear-gradient(to bottom,#dff0d8 0,#c8e5bc 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffc8e5bc', GradientType=0);background-repeat:repeat-x;border-color:#b2dba1}.alert-info{background-image:-webkit-linear-gradient(top,#d9edf7 0,#b9def0 100%);background-image:-o-linear-gradient(top,#d9edf7 0,#b9def0 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#d9edf7),to(#b9def0));background-image:linear-gradient(to bottom,#d9edf7 0,#b9def0 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffb9def0', GradientType=0);background-repeat:repeat-x;border-color:#9acfea}.alert-warning{background-image:-webkit-linear-gradient(top,#fcf8e3 0,#f8efc0 100%);background-image:-o-linear-gradient(top,#fcf8e3 0,#f8efc0 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#fcf8e3),to(#f8efc0));background-image:linear-gradient(to bottom,#fcf8e3 0,#f8efc0 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fff8efc0', GradientType=0);background-repeat:repeat-x;border-color:#f5e79e}.alert-danger{background-image:-webkit-linear-gradient(top,#f2dede 0,#e7c3c3 100%);background-image:-o-linear-gradient(top,#f2dede 0,#e7c3c3 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#f2dede),to(#e7c3c3));background-image:linear-gradient(to bottom,#f2dede 0,#e7c3c3 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffe7c3c3', GradientType=0);background-repeat:repeat-x;border-color:#dca7a7}.progress{background-image:-webkit-linear-gradient(top,#ebebeb 0,#f5f5f5 100%);background-image:-o-linear-gradient(top,#ebebeb 0,#f5f5f5 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#ebebeb),to(#f5f5f5));background-image:linear-gradient(to bottom,#ebebeb 0,#f5f5f5 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffebebeb', endColorstr='#fff5f5f5', GradientType=0);background-repeat:repeat-x}.progress-bar{background-image:-webkit-linear-gradient(top,#428bca 0,#3071a9 100%);background-image:-o-linear-gradient(top,#428bca 0,#3071a9 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#428bca),to(#3071a9));background-image:linear-gradient(to bottom,#428bca 0,#3071a9 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff3071a9', GradientType=0);background-repeat:repeat-x}.progress-bar-success{background-image:-webkit-linear-gradient(top,#5cb85c 0,#449d44 100%);background-image:-o-linear-gradient(top,#5cb85c 0,#449d44 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#5cb85c),to(#449d44));background-image:linear-gradient(to bottom,#5cb85c 0,#449d44 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff449d44', GradientType=0);background-repeat:repeat-x}.progress-bar-info{background-image:-webkit-linear-gradient(top,#5bc0de 0,#31b0d5 100%);background-image:-o-linear-gradient(top,#5bc0de 0,#31b0d5 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#5bc0de),to(#31b0d5));background-image:linear-gradient(to bottom,#5bc0de 0,#31b0d5 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff31b0d5', GradientType=0);background-repeat:repeat-x}.progress-bar-warning{background-image:-webkit-linear-gradient(top,#f0ad4e 0,#ec971f 100%);background-image:-o-linear-gradient(top,#f0ad4e 0,#ec971f 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#f0ad4e),to(#ec971f));background-image:linear-gradient(to bottom,#f0ad4e 0,#ec971f 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffec971f', GradientType=0);background-repeat:repeat-x}.progress-bar-danger{background-image:-webkit-linear-gradient(top,#d9534f 0,#c9302c 100%);background-image:-o-linear-gradient(top,#d9534f 0,#c9302c 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#d9534f),to(#c9302c));background-image:linear-gradient(to bottom,#d9534f 0,#c9302c 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc9302c', GradientType=0);background-repeat:repeat-x}.progress-bar-striped{background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)}.list-group{border-radius:4px;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.075);box-shadow:0 1px 2px rgba(0,0,0,.075)}.list-group-item.active,.list-group-item.active:hover,.list-group-item.active:focus{text-shadow:0 -1px 0 #3071a9;background-image:-webkit-linear-gradient(top,#428bca 0,#3278b3 100%);background-image:-o-linear-gradient(top,#428bca 0,#3278b3 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#428bca),to(#3278b3));background-image:linear-gradient(to bottom,#428bca 0,#3278b3 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff3278b3', GradientType=0);background-repeat:repeat-x;border-color:#3278b3}.panel{-webkit-box-shadow:0 1px 2px rgba(0,0,0,.05);box-shadow:0 1px 2px rgba(0,0,0,.05)}.panel-default>.panel-heading{background-image:-webkit-linear-gradient(top,#f5f5f5 0,#e8e8e8 100%);background-image:-o-linear-gradient(top,#f5f5f5 0,#e8e8e8 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#f5f5f5),to(#e8e8e8));background-image:linear-gradient(to bottom,#f5f5f5 0,#e8e8e8 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);background-repeat:repeat-x}.panel-primary>.panel-heading{background-image:-webkit-linear-gradient(top,#428bca 0,#357ebd 100%);background-image:-o-linear-gradient(top,#428bca 0,#357ebd 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#428bca),to(#357ebd));background-image:linear-gradient(to bottom,#428bca 0,#357ebd 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff357ebd', GradientType=0);background-repeat:repeat-x}.panel-success>.panel-heading{background-image:-webkit-linear-gradient(top,#dff0d8 0,#d0e9c6 100%);background-image:-o-linear-gradient(top,#dff0d8 0,#d0e9c6 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#dff0d8),to(#d0e9c6));background-image:linear-gradient(to bottom,#dff0d8 0,#d0e9c6 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffd0e9c6', GradientType=0);background-repeat:repeat-x}.panel-info>.panel-heading{background-image:-webkit-linear-gradient(top,#d9edf7 0,#c4e3f3 100%);background-image:-o-linear-gradient(top,#d9edf7 0,#c4e3f3 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#d9edf7),to(#c4e3f3));background-image:linear-gradient(to bottom,#d9edf7 0,#c4e3f3 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffc4e3f3', GradientType=0);background-repeat:repeat-x}.panel-warning>.panel-heading{background-image:-webkit-linear-gradient(top,#fcf8e3 0,#faf2cc 100%);background-image:-o-linear-gradient(top,#fcf8e3 0,#faf2cc 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#fcf8e3),to(#faf2cc));background-image:linear-gradient(to bottom,#fcf8e3 0,#faf2cc 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fffaf2cc', GradientType=0);background-repeat:repeat-x}.panel-danger>.panel-heading{background-image:-webkit-linear-gradient(top,#f2dede 0,#ebcccc 100%);background-image:-o-linear-gradient(top,#f2dede 0,#ebcccc 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#f2dede),to(#ebcccc));background-image:linear-gradient(to bottom,#f2dede 0,#ebcccc 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffebcccc', GradientType=0);background-repeat:repeat-x}.well{background-image:-webkit-linear-gradient(top,#e8e8e8 0,#f5f5f5 100%);background-image:-o-linear-gradient(top,#e8e8e8 0,#f5f5f5 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#e8e8e8),to(#f5f5f5));background-image:linear-gradient(to bottom,#e8e8e8 0,#f5f5f5 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe8e8e8', endColorstr='#fff5f5f5', GradientType=0);background-repeat:repeat-x;border-color:#dcdcdc;-webkit-box-shadow:inset 0 1px 3px rgba(0,0,0,.05),0 1px 0 rgba(255,255,255,.1);box-shadow:inset 0 1px 3px rgba(0,0,0,.05),0 1px 0 rgba(255,255,255,.1)}
-.sidebar .affix select{
-	width: 68%;
+
+body {
+  position: relative;
+}
+.sidebar .affix{
+	position: static;
+}
+@media (min-width: 992px) {
+	.sidebar .affix{
+		width: 132px;
+		position: fixed;
+	}
+}
+
+@media (min-width: 1200px) {
+	.sidebar .affix{
+		width: 165px;
+		position: fixed;
+	}
 }
\ No newline at end of file
diff --git a/build/build.js b/build/build.js
index 2869f80..bab0494 100644
--- a/build/build.js
+++ b/build/build.js
@@ -27739,6 +27739,2663 @@ require.register("lodash-lodash/dist/lodash.compat.js", function(exports, requir
   }
 }.call(this));
 
+});
+require.register("component-emitter/index.js", function(exports, require, module){
+
+/**
+ * Expose `Emitter`.
+ */
+
+module.exports = Emitter;
+
+/**
+ * Initialize a new `Emitter`.
+ *
+ * @api public
+ */
+
+function Emitter(obj) {
+  if (obj) return mixin(obj);
+};
+
+/**
+ * Mixin the emitter properties.
+ *
+ * @param {Object} obj
+ * @return {Object}
+ * @api private
+ */
+
+function mixin(obj) {
+  for (var key in Emitter.prototype) {
+    obj[key] = Emitter.prototype[key];
+  }
+  return obj;
+}
+
+/**
+ * Listen on the given `event` with `fn`.
+ *
+ * @param {String} event
+ * @param {Function} fn
+ * @return {Emitter}
+ * @api public
+ */
+
+Emitter.prototype.on =
+Emitter.prototype.addEventListener = function(event, fn){
+  this._callbacks = this._callbacks || {};
+  (this._callbacks[event] = this._callbacks[event] || [])
+    .push(fn);
+  return this;
+};
+
+/**
+ * Adds an `event` listener that will be invoked a single
+ * time then automatically removed.
+ *
+ * @param {String} event
+ * @param {Function} fn
+ * @return {Emitter}
+ * @api public
+ */
+
+Emitter.prototype.once = function(event, fn){
+  var self = this;
+  this._callbacks = this._callbacks || {};
+
+  function on() {
+    self.off(event, on);
+    fn.apply(this, arguments);
+  }
+
+  on.fn = fn;
+  this.on(event, on);
+  return this;
+};
+
+/**
+ * Remove the given callback for `event` or all
+ * registered callbacks.
+ *
+ * @param {String} event
+ * @param {Function} fn
+ * @return {Emitter}
+ * @api public
+ */
+
+Emitter.prototype.off =
+Emitter.prototype.removeListener =
+Emitter.prototype.removeAllListeners =
+Emitter.prototype.removeEventListener = function(event, fn){
+  this._callbacks = this._callbacks || {};
+
+  // all
+  if (0 == arguments.length) {
+    this._callbacks = {};
+    return this;
+  }
+
+  // specific event
+  var callbacks = this._callbacks[event];
+  if (!callbacks) return this;
+
+  // remove all handlers
+  if (1 == arguments.length) {
+    delete this._callbacks[event];
+    return this;
+  }
+
+  // remove specific handler
+  var cb;
+  for (var i = 0; i < callbacks.length; i++) {
+    cb = callbacks[i];
+    if (cb === fn || cb.fn === fn) {
+      callbacks.splice(i, 1);
+      break;
+    }
+  }
+  return this;
+};
+
+/**
+ * Emit `event` with the given args.
+ *
+ * @param {String} event
+ * @param {Mixed} ...
+ * @return {Emitter}
+ */
+
+Emitter.prototype.emit = function(event){
+  this._callbacks = this._callbacks || {};
+  var args = [].slice.call(arguments, 1)
+    , callbacks = this._callbacks[event];
+
+  if (callbacks) {
+    callbacks = callbacks.slice(0);
+    for (var i = 0, len = callbacks.length; i < len; ++i) {
+      callbacks[i].apply(this, args);
+    }
+  }
+
+  return this;
+};
+
+/**
+ * Return array of callbacks for `event`.
+ *
+ * @param {String} event
+ * @return {Array}
+ * @api public
+ */
+
+Emitter.prototype.listeners = function(event){
+  this._callbacks = this._callbacks || {};
+  return this._callbacks[event] || [];
+};
+
+/**
+ * Check if this emitter has `event` handlers.
+ *
+ * @param {String} event
+ * @return {Boolean}
+ * @api public
+ */
+
+Emitter.prototype.hasListeners = function(event){
+  return !! this.listeners(event).length;
+};
+
+});
+require.register("component-reduce/index.js", function(exports, require, module){
+
+/**
+ * Reduce `arr` with `fn`.
+ *
+ * @param {Array} arr
+ * @param {Function} fn
+ * @param {Mixed} initial
+ *
+ * TODO: combatible error handling?
+ */
+
+module.exports = function(arr, fn, initial){  
+  var idx = 0;
+  var len = arr.length;
+  var curr = arguments.length == 3
+    ? initial
+    : arr[idx++];
+
+  while (idx < len) {
+    curr = fn.call(null, curr, arr[idx], ++idx, arr);
+  }
+  
+  return curr;
+};
+});
+require.register("visionmedia-superagent/lib/client.js", function(exports, require, module){
+/**
+ * Module dependencies.
+ */
+
+var Emitter = require('emitter');
+var reduce = require('reduce');
+
+/**
+ * Root reference for iframes.
+ */
+
+var root = 'undefined' == typeof window
+  ? this
+  : window;
+
+/**
+ * Noop.
+ */
+
+function noop(){};
+
+/**
+ * Check if `obj` is a host object,
+ * we don't want to serialize these :)
+ *
+ * TODO: future proof, move to compoent land
+ *
+ * @param {Object} obj
+ * @return {Boolean}
+ * @api private
+ */
+
+function isHost(obj) {
+  var str = {}.toString.call(obj);
+
+  switch (str) {
+    case '[object File]':
+    case '[object Blob]':
+    case '[object FormData]':
+      return true;
+    default:
+      return false;
+  }
+}
+
+/**
+ * Determine XHR.
+ */
+
+function getXHR() {
+  if (root.XMLHttpRequest
+    && ('file:' != root.location.protocol || !root.ActiveXObject)) {
+    return new XMLHttpRequest;
+  } else {
+    try { return new ActiveXObject('Microsoft.XMLHTTP'); } catch(e) {}
+    try { return new ActiveXObject('Msxml2.XMLHTTP.6.0'); } catch(e) {}
+    try { return new ActiveXObject('Msxml2.XMLHTTP.3.0'); } catch(e) {}
+    try { return new ActiveXObject('Msxml2.XMLHTTP'); } catch(e) {}
+  }
+  return false;
+}
+
+/**
+ * Removes leading and trailing whitespace, added to support IE.
+ *
+ * @param {String} s
+ * @return {String}
+ * @api private
+ */
+
+var trim = ''.trim
+  ? function(s) { return s.trim(); }
+  : function(s) { return s.replace(/(^\s*|\s*$)/g, ''); };
+
+/**
+ * Check if `obj` is an object.
+ *
+ * @param {Object} obj
+ * @return {Boolean}
+ * @api private
+ */
+
+function isObject(obj) {
+  return obj === Object(obj);
+}
+
+/**
+ * Serialize the given `obj`.
+ *
+ * @param {Object} obj
+ * @return {String}
+ * @api private
+ */
+
+function serialize(obj) {
+  if (!isObject(obj)) return obj;
+  var pairs = [];
+  for (var key in obj) {
+    if (null != obj[key]) {
+      pairs.push(encodeURIComponent(key)
+        + '=' + encodeURIComponent(obj[key]));
+    }
+  }
+  return pairs.join('&');
+}
+
+/**
+ * Expose serialization method.
+ */
+
+ request.serializeObject = serialize;
+
+ /**
+  * Parse the given x-www-form-urlencoded `str`.
+  *
+  * @param {String} str
+  * @return {Object}
+  * @api private
+  */
+
+function parseString(str) {
+  var obj = {};
+  var pairs = str.split('&');
+  var parts;
+  var pair;
+
+  for (var i = 0, len = pairs.length; i < len; ++i) {
+    pair = pairs[i];
+    parts = pair.split('=');
+    obj[decodeURIComponent(parts[0])] = decodeURIComponent(parts[1]);
+  }
+
+  return obj;
+}
+
+/**
+ * Expose parser.
+ */
+
+request.parseString = parseString;
+
+/**
+ * Default MIME type map.
+ *
+ *     superagent.types.xml = 'application/xml';
+ *
+ */
+
+request.types = {
+  html: 'text/html',
+  json: 'application/json',
+  xml: 'application/xml',
+  urlencoded: 'application/x-www-form-urlencoded',
+  'form': 'application/x-www-form-urlencoded',
+  'form-data': 'application/x-www-form-urlencoded'
+};
+
+/**
+ * Default serialization map.
+ *
+ *     superagent.serialize['application/xml'] = function(obj){
+ *       return 'generated xml here';
+ *     };
+ *
+ */
+
+ request.serialize = {
+   'application/x-www-form-urlencoded': serialize,
+   'application/json': JSON.stringify
+ };
+
+ /**
+  * Default parsers.
+  *
+  *     superagent.parse['application/xml'] = function(str){
+  *       return { object parsed from str };
+  *     };
+  *
+  */
+
+request.parse = {
+  'application/x-www-form-urlencoded': parseString,
+  'application/json': JSON.parse
+};
+
+/**
+ * Parse the given header `str` into
+ * an object containing the mapped fields.
+ *
+ * @param {String} str
+ * @return {Object}
+ * @api private
+ */
+
+function parseHeader(str) {
+  var lines = str.split(/\r?\n/);
+  var fields = {};
+  var index;
+  var line;
+  var field;
+  var val;
+
+  lines.pop(); // trailing CRLF
+
+  for (var i = 0, len = lines.length; i < len; ++i) {
+    line = lines[i];
+    index = line.indexOf(':');
+    field = line.slice(0, index).toLowerCase();
+    val = trim(line.slice(index + 1));
+    fields[field] = val;
+  }
+
+  return fields;
+}
+
+/**
+ * Return the mime type for the given `str`.
+ *
+ * @param {String} str
+ * @return {String}
+ * @api private
+ */
+
+function type(str){
+  return str.split(/ *; */).shift();
+};
+
+/**
+ * Return header field parameters.
+ *
+ * @param {String} str
+ * @return {Object}
+ * @api private
+ */
+
+function params(str){
+  return reduce(str.split(/ *; */), function(obj, str){
+    var parts = str.split(/ *= */)
+      , key = parts.shift()
+      , val = parts.shift();
+
+    if (key && val) obj[key] = val;
+    return obj;
+  }, {});
+};
+
+/**
+ * Initialize a new `Response` with the given `xhr`.
+ *
+ *  - set flags (.ok, .error, etc)
+ *  - parse header
+ *
+ * Examples:
+ *
+ *  Aliasing `superagent` as `request` is nice:
+ *
+ *      request = superagent;
+ *
+ *  We can use the promise-like API, or pass callbacks:
+ *
+ *      request.get('/').end(function(res){});
+ *      request.get('/', function(res){});
+ *
+ *  Sending data can be chained:
+ *
+ *      request
+ *        .post('/user')
+ *        .send({ name: 'tj' })
+ *        .end(function(res){});
+ *
+ *  Or passed to `.send()`:
+ *
+ *      request
+ *        .post('/user')
+ *        .send({ name: 'tj' }, function(res){});
+ *
+ *  Or passed to `.post()`:
+ *
+ *      request
+ *        .post('/user', { name: 'tj' })
+ *        .end(function(res){});
+ *
+ * Or further reduced to a single call for simple cases:
+ *
+ *      request
+ *        .post('/user', { name: 'tj' }, function(res){});
+ *
+ * @param {XMLHTTPRequest} xhr
+ * @param {Object} options
+ * @api private
+ */
+
+function Response(req, options) {
+  options = options || {};
+  this.req = req;
+  this.xhr = this.req.xhr;
+  this.text = this.xhr.responseText;
+  this.setStatusProperties(this.xhr.status);
+  this.header = this.headers = parseHeader(this.xhr.getAllResponseHeaders());
+  // getAllResponseHeaders sometimes falsely returns "" for CORS requests, but
+  // getResponseHeader still works. so we get content-type even if getting
+  // other headers fails.
+  this.header['content-type'] = this.xhr.getResponseHeader('content-type');
+  this.setHeaderProperties(this.header);
+  this.body = this.req.method != 'HEAD'
+    ? this.parseBody(this.text)
+    : null;
+}
+
+/**
+ * Get case-insensitive `field` value.
+ *
+ * @param {String} field
+ * @return {String}
+ * @api public
+ */
+
+Response.prototype.get = function(field){
+  return this.header[field.toLowerCase()];
+};
+
+/**
+ * Set header related properties:
+ *
+ *   - `.type` the content type without params
+ *
+ * A response of "Content-Type: text/plain; charset=utf-8"
+ * will provide you with a `.type` of "text/plain".
+ *
+ * @param {Object} header
+ * @api private
+ */
+
+Response.prototype.setHeaderProperties = function(header){
+  // content-type
+  var ct = this.header['content-type'] || '';
+  this.type = type(ct);
+
+  // params
+  var obj = params(ct);
+  for (var key in obj) this[key] = obj[key];
+};
+
+/**
+ * Parse the given body `str`.
+ *
+ * Used for auto-parsing of bodies. Parsers
+ * are defined on the `superagent.parse` object.
+ *
+ * @param {String} str
+ * @return {Mixed}
+ * @api private
+ */
+
+Response.prototype.parseBody = function(str){
+  var parse = request.parse[this.type];
+  return parse
+    ? parse(str)
+    : null;
+};
+
+/**
+ * Set flags such as `.ok` based on `status`.
+ *
+ * For example a 2xx response will give you a `.ok` of __true__
+ * whereas 5xx will be __false__ and `.error` will be __true__. The
+ * `.clientError` and `.serverError` are also available to be more
+ * specific, and `.statusType` is the class of error ranging from 1..5
+ * sometimes useful for mapping respond colors etc.
+ *
+ * "sugar" properties are also defined for common cases. Currently providing:
+ *
+ *   - .noContent
+ *   - .badRequest
+ *   - .unauthorized
+ *   - .notAcceptable
+ *   - .notFound
+ *
+ * @param {Number} status
+ * @api private
+ */
+
+Response.prototype.setStatusProperties = function(status){
+  var type = status / 100 | 0;
+
+  // status / class
+  this.status = status;
+  this.statusType = type;
+
+  // basics
+  this.info = 1 == type;
+  this.ok = 2 == type;
+  this.clientError = 4 == type;
+  this.serverError = 5 == type;
+  this.error = (4 == type || 5 == type)
+    ? this.toError()
+    : false;
+
+  // sugar
+  this.accepted = 202 == status;
+  this.noContent = 204 == status || 1223 == status;
+  this.badRequest = 400 == status;
+  this.unauthorized = 401 == status;
+  this.notAcceptable = 406 == status;
+  this.notFound = 404 == status;
+  this.forbidden = 403 == status;
+};
+
+/**
+ * Return an `Error` representative of this response.
+ *
+ * @return {Error}
+ * @api public
+ */
+
+Response.prototype.toError = function(){
+  var req = this.req;
+  var method = req.method;
+  var url = req.url;
+
+  var msg = 'cannot ' + method + ' ' + url + ' (' + this.status + ')';
+  var err = new Error(msg);
+  err.status = this.status;
+  err.method = method;
+  err.url = url;
+
+  return err;
+};
+
+/**
+ * Expose `Response`.
+ */
+
+request.Response = Response;
+
+/**
+ * Initialize a new `Request` with the given `method` and `url`.
+ *
+ * @param {String} method
+ * @param {String} url
+ * @api public
+ */
+
+function Request(method, url) {
+  var self = this;
+  Emitter.call(this);
+  this._query = this._query || [];
+  this.method = method;
+  this.url = url;
+  this.header = {};
+  this._header = {};
+  this.on('end', function(){
+    var res = new Response(self);
+    if ('HEAD' == method) res.text = null;
+    self.callback(null, res);
+  });
+}
+
+/**
+ * Mixin `Emitter`.
+ */
+
+Emitter(Request.prototype);
+
+/**
+ * Allow for extension
+ */
+
+Request.prototype.use = function(fn) {
+  fn(this);
+  return this;
+}
+
+/**
+ * Set timeout to `ms`.
+ *
+ * @param {Number} ms
+ * @return {Request} for chaining
+ * @api public
+ */
+
+Request.prototype.timeout = function(ms){
+  this._timeout = ms;
+  return this;
+};
+
+/**
+ * Clear previous timeout.
+ *
+ * @return {Request} for chaining
+ * @api public
+ */
+
+Request.prototype.clearTimeout = function(){
+  this._timeout = 0;
+  clearTimeout(this._timer);
+  return this;
+};
+
+/**
+ * Abort the request, and clear potential timeout.
+ *
+ * @return {Request}
+ * @api public
+ */
+
+Request.prototype.abort = function(){
+  if (this.aborted) return;
+  this.aborted = true;
+  this.xhr.abort();
+  this.clearTimeout();
+  this.emit('abort');
+  return this;
+};
+
+/**
+ * Set header `field` to `val`, or multiple fields with one object.
+ *
+ * Examples:
+ *
+ *      req.get('/')
+ *        .set('Accept', 'application/json')
+ *        .set('X-API-Key', 'foobar')
+ *        .end(callback);
+ *
+ *      req.get('/')
+ *        .set({ Accept: 'application/json', 'X-API-Key': 'foobar' })
+ *        .end(callback);
+ *
+ * @param {String|Object} field
+ * @param {String} val
+ * @return {Request} for chaining
+ * @api public
+ */
+
+Request.prototype.set = function(field, val){
+  if (isObject(field)) {
+    for (var key in field) {
+      this.set(key, field[key]);
+    }
+    return this;
+  }
+  this._header[field.toLowerCase()] = val;
+  this.header[field] = val;
+  return this;
+};
+
+/**
+ * Get case-insensitive header `field` value.
+ *
+ * @param {String} field
+ * @return {String}
+ * @api private
+ */
+
+Request.prototype.getHeader = function(field){
+  return this._header[field.toLowerCase()];
+};
+
+/**
+ * Set Content-Type to `type`, mapping values from `request.types`.
+ *
+ * Examples:
+ *
+ *      superagent.types.xml = 'application/xml';
+ *
+ *      request.post('/')
+ *        .type('xml')
+ *        .send(xmlstring)
+ *        .end(callback);
+ *
+ *      request.post('/')
+ *        .type('application/xml')
+ *        .send(xmlstring)
+ *        .end(callback);
+ *
+ * @param {String} type
+ * @return {Request} for chaining
+ * @api public
+ */
+
+Request.prototype.type = function(type){
+  this.set('Content-Type', request.types[type] || type);
+  return this;
+};
+
+/**
+ * Set Accept to `type`, mapping values from `request.types`.
+ *
+ * Examples:
+ *
+ *      superagent.types.json = 'application/json';
+ *
+ *      request.get('/agent')
+ *        .accept('json')
+ *        .end(callback);
+ *
+ *      request.get('/agent')
+ *        .accept('application/json')
+ *        .end(callback);
+ *
+ * @param {String} accept
+ * @return {Request} for chaining
+ * @api public
+ */
+
+Request.prototype.accept = function(type){
+  this.set('Accept', request.types[type] || type);
+  return this;
+};
+
+/**
+ * Set Authorization field value with `user` and `pass`.
+ *
+ * @param {String} user
+ * @param {String} pass
+ * @return {Request} for chaining
+ * @api public
+ */
+
+Request.prototype.auth = function(user, pass){
+  var str = btoa(user + ':' + pass);
+  this.set('Authorization', 'Basic ' + str);
+  return this;
+};
+
+/**
+* Add query-string `val`.
+*
+* Examples:
+*
+*   request.get('/shoes')
+*     .query('size=10')
+*     .query({ color: 'blue' })
+*
+* @param {Object|String} val
+* @return {Request} for chaining
+* @api public
+*/
+
+Request.prototype.query = function(val){
+  if ('string' != typeof val) val = serialize(val);
+  if (val) this._query.push(val);
+  return this;
+};
+
+/**
+ * Write the field `name` and `val` for "multipart/form-data"
+ * request bodies.
+ *
+ * ``` js
+ * request.post('/upload')
+ *   .field('foo', 'bar')
+ *   .end(callback);
+ * ```
+ *
+ * @param {String} name
+ * @param {String|Blob|File} val
+ * @return {Request} for chaining
+ * @api public
+ */
+
+Request.prototype.field = function(name, val){
+  if (!this._formData) this._formData = new FormData();
+  this._formData.append(name, val);
+  return this;
+};
+
+/**
+ * Queue the given `file` as an attachment to the specified `field`,
+ * with optional `filename`.
+ *
+ * ``` js
+ * request.post('/upload')
+ *   .attach(new Blob(['<a id="a"><b id="b">hey!</b></a>'], { type: "text/html"}))
+ *   .end(callback);
+ * ```
+ *
+ * @param {String} field
+ * @param {Blob|File} file
+ * @param {String} filename
+ * @return {Request} for chaining
+ * @api public
+ */
+
+Request.prototype.attach = function(field, file, filename){
+  if (!this._formData) this._formData = new FormData();
+  this._formData.append(field, file, filename);
+  return this;
+};
+
+/**
+ * Send `data`, defaulting the `.type()` to "json" when
+ * an object is given.
+ *
+ * Examples:
+ *
+ *       // querystring
+ *       request.get('/search')
+ *         .end(callback)
+ *
+ *       // multiple data "writes"
+ *       request.get('/search')
+ *         .send({ search: 'query' })
+ *         .send({ range: '1..5' })
+ *         .send({ order: 'desc' })
+ *         .end(callback)
+ *
+ *       // manual json
+ *       request.post('/user')
+ *         .type('json')
+ *         .send('{"name":"tj"})
+ *         .end(callback)
+ *
+ *       // auto json
+ *       request.post('/user')
+ *         .send({ name: 'tj' })
+ *         .end(callback)
+ *
+ *       // manual x-www-form-urlencoded
+ *       request.post('/user')
+ *         .type('form')
+ *         .send('name=tj')
+ *         .end(callback)
+ *
+ *       // auto x-www-form-urlencoded
+ *       request.post('/user')
+ *         .type('form')
+ *         .send({ name: 'tj' })
+ *         .end(callback)
+ *
+ *       // defaults to x-www-form-urlencoded
+  *      request.post('/user')
+  *        .send('name=tobi')
+  *        .send('species=ferret')
+  *        .end(callback)
+ *
+ * @param {String|Object} data
+ * @return {Request} for chaining
+ * @api public
+ */
+
+Request.prototype.send = function(data){
+  var obj = isObject(data);
+  var type = this.getHeader('Content-Type');
+
+  // merge
+  if (obj && isObject(this._data)) {
+    for (var key in data) {
+      this._data[key] = data[key];
+    }
+  } else if ('string' == typeof data) {
+    if (!type) this.type('form');
+    type = this.getHeader('Content-Type');
+    if ('application/x-www-form-urlencoded' == type) {
+      this._data = this._data
+        ? this._data + '&' + data
+        : data;
+    } else {
+      this._data = (this._data || '') + data;
+    }
+  } else {
+    this._data = data;
+  }
+
+  if (!obj) return this;
+  if (!type) this.type('json');
+  return this;
+};
+
+/**
+ * Invoke the callback with `err` and `res`
+ * and handle arity check.
+ *
+ * @param {Error} err
+ * @param {Response} res
+ * @api private
+ */
+
+Request.prototype.callback = function(err, res){
+  var fn = this._callback;
+  if (2 == fn.length) return fn(err, res);
+  if (err) return this.emit('error', err);
+  fn(res);
+};
+
+/**
+ * Invoke callback with x-domain error.
+ *
+ * @api private
+ */
+
+Request.prototype.crossDomainError = function(){
+  var err = new Error('Origin is not allowed by Access-Control-Allow-Origin');
+  err.crossDomain = true;
+  this.callback(err);
+};
+
+/**
+ * Invoke callback with timeout error.
+ *
+ * @api private
+ */
+
+Request.prototype.timeoutError = function(){
+  var timeout = this._timeout;
+  var err = new Error('timeout of ' + timeout + 'ms exceeded');
+  err.timeout = timeout;
+  this.callback(err);
+};
+
+/**
+ * Enable transmission of cookies with x-domain requests.
+ *
+ * Note that for this to work the origin must not be
+ * using "Access-Control-Allow-Origin" with a wildcard,
+ * and also must set "Access-Control-Allow-Credentials"
+ * to "true".
+ *
+ * @api public
+ */
+
+Request.prototype.withCredentials = function(){
+  this._withCredentials = true;
+  return this;
+};
+
+/**
+ * Initiate request, invoking callback `fn(res)`
+ * with an instanceof `Response`.
+ *
+ * @param {Function} fn
+ * @return {Request} for chaining
+ * @api public
+ */
+
+Request.prototype.end = function(fn){
+  var self = this;
+  var xhr = this.xhr = getXHR();
+  var query = this._query.join('&');
+  var timeout = this._timeout;
+  var data = this._formData || this._data;
+
+  // store callback
+  this._callback = fn || noop;
+
+  // state change
+  xhr.onreadystatechange = function(){
+    if (4 != xhr.readyState) return;
+    if (0 == xhr.status) {
+      if (self.aborted) return self.timeoutError();
+      return self.crossDomainError();
+    }
+    self.emit('end');
+  };
+
+  // progress
+  if (xhr.upload) {
+    xhr.upload.onprogress = function(e){
+      e.percent = e.loaded / e.total * 100;
+      self.emit('progress', e);
+    };
+  }
+
+  // timeout
+  if (timeout && !this._timer) {
+    this._timer = setTimeout(function(){
+      self.abort();
+    }, timeout);
+  }
+
+  // querystring
+  if (query) {
+    query = request.serializeObject(query);
+    this.url += ~this.url.indexOf('?')
+      ? '&' + query
+      : '?' + query;
+  }
+
+  // initiate request
+  xhr.open(this.method, this.url, true);
+
+  // CORS
+  if (this._withCredentials) xhr.withCredentials = true;
+
+  // body
+  if ('GET' != this.method && 'HEAD' != this.method && 'string' != typeof data && !isHost(data)) {
+    // serialize stuff
+    var serialize = request.serialize[this.getHeader('Content-Type')];
+    if (serialize) data = serialize(data);
+  }
+
+  // set header fields
+  for (var field in this.header) {
+    if (null == this.header[field]) continue;
+    xhr.setRequestHeader(field, this.header[field]);
+  }
+
+  // send stuff
+  this.emit('request', this);
+  xhr.send(data);
+  return this;
+};
+
+/**
+ * Expose `Request`.
+ */
+
+request.Request = Request;
+
+/**
+ * Issue a request:
+ *
+ * Examples:
+ *
+ *    request('GET', '/users').end(callback)
+ *    request('/users').end(callback)
+ *    request('/users', callback)
+ *
+ * @param {String} method
+ * @param {String|Function} url or callback
+ * @return {Request}
+ * @api public
+ */
+
+function request(method, url) {
+  // callback
+  if ('function' == typeof url) {
+    return new Request('GET', method).end(url);
+  }
+
+  // url first
+  if (1 == arguments.length) {
+    return new Request('GET', method);
+  }
+
+  return new Request(method, url);
+}
+
+/**
+ * GET `url` with optional callback `fn(res)`.
+ *
+ * @param {String} url
+ * @param {Mixed|Function} data or fn
+ * @param {Function} fn
+ * @return {Request}
+ * @api public
+ */
+
+request.get = function(url, data, fn){
+  var req = request('GET', url);
+  if ('function' == typeof data) fn = data, data = null;
+  if (data) req.query(data);
+  if (fn) req.end(fn);
+  return req;
+};
+
+/**
+ * HEAD `url` with optional callback `fn(res)`.
+ *
+ * @param {String} url
+ * @param {Mixed|Function} data or fn
+ * @param {Function} fn
+ * @return {Request}
+ * @api public
+ */
+
+request.head = function(url, data, fn){
+  var req = request('HEAD', url);
+  if ('function' == typeof data) fn = data, data = null;
+  if (data) req.send(data);
+  if (fn) req.end(fn);
+  return req;
+};
+
+/**
+ * DELETE `url` with optional callback `fn(res)`.
+ *
+ * @param {String} url
+ * @param {Function} fn
+ * @return {Request}
+ * @api public
+ */
+
+request.del = function(url, fn){
+  var req = request('DELETE', url);
+  if (fn) req.end(fn);
+  return req;
+};
+
+/**
+ * PATCH `url` with optional `data` and callback `fn(res)`.
+ *
+ * @param {String} url
+ * @param {Mixed} data
+ * @param {Function} fn
+ * @return {Request}
+ * @api public
+ */
+
+request.patch = function(url, data, fn){
+  var req = request('PATCH', url);
+  if ('function' == typeof data) fn = data, data = null;
+  if (data) req.send(data);
+  if (fn) req.end(fn);
+  return req;
+};
+
+/**
+ * POST `url` with optional `data` and callback `fn(res)`.
+ *
+ * @param {String} url
+ * @param {Mixed} data
+ * @param {Function} fn
+ * @return {Request}
+ * @api public
+ */
+
+request.post = function(url, data, fn){
+  var req = request('POST', url);
+  if ('function' == typeof data) fn = data, data = null;
+  if (data) req.send(data);
+  if (fn) req.end(fn);
+  return req;
+};
+
+/**
+ * PUT `url` with optional `data` and callback `fn(res)`.
+ *
+ * @param {String} url
+ * @param {Mixed|Function} data or fn
+ * @param {Function} fn
+ * @return {Request}
+ * @api public
+ */
+
+request.put = function(url, data, fn){
+  var req = request('PUT', url);
+  if ('function' == typeof data) fn = data, data = null;
+  if (data) req.send(data);
+  if (fn) req.end(fn);
+  return req;
+};
+
+/**
+ * Expose `request`.
+ */
+
+module.exports = request;
+
+});
+require.register("microjs-q/q.js", function(exports, require, module){
+// vim:ts=4:sts=4:sw=4:
+/*!
+ *
+ * Copyright 2009-2012 Kris Kowal under the terms of the MIT
+ * license found at http://github.com/kriskowal/q/raw/master/LICENSE
+ *
+ * With parts by Tyler Close
+ * Copyright 2007-2009 Tyler Close under the terms of the MIT X license found
+ * at http://www.opensource.org/licenses/mit-license.html
+ * Forked at ref_send.js version: 2009-05-11
+ *
+ * With parts by Mark Miller
+ * Copyright (C) 2011 Google Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+(function (definition) {
+    // Turn off strict mode for this function so we can assign to global.Q
+    /*jshint strict: false*/
+
+    // This file will function properly as a <script> tag, or a module
+    // using CommonJS and NodeJS or RequireJS module formats.  In
+    // Common/Node/RequireJS, the module exports the Q API and when
+    // executed as a simple <script>, it creates a Q global instead.
+
+    // Montage Require
+    if (typeof bootstrap === "function") {
+        bootstrap("promise", definition);
+
+    // CommonJS
+    } else if (typeof exports === "object") {
+        module.exports = definition();
+
+    // RequireJS
+    } else if (typeof define === "function") {
+        define(definition);
+
+    // SES (Secure EcmaScript)
+    } else if (typeof ses !== "undefined") {
+        if (!ses.ok()) {
+            return;
+        } else {
+            ses.makeQ = definition;
+        }
+
+    // <script>
+    } else {
+        Q = definition();
+    }
+
+})(function () {
+"use strict";
+
+// All code after this point will be filtered from stack traces reported
+// by Q.
+var qStartingLine = captureLine();
+var qFileName;
+
+// shims
+
+// used for fallback "defend" and in "allResolved"
+var noop = function () {};
+
+// for the security conscious, defend may be a deep freeze as provided
+// by cajaVM.  Otherwise we try to provide a shallow freeze just to
+// discourage promise changes that are not compatible with secure
+// usage.  If Object.freeze does not exist, fall back to doing nothing
+// (no op).
+var defend = Object.freeze || noop;
+if (typeof cajaVM !== "undefined") {
+    defend = cajaVM.def;
+}
+
+// use the fastest possible means to execute a task in a future turn
+// of the event loop.
+var nextTick;
+if (typeof process !== "undefined") {
+    // node
+    nextTick = process.nextTick;
+} else if (typeof setImmediate === "function") {
+    // In IE10, or use https://github.com/NobleJS/setImmediate
+    nextTick = setImmediate;
+} else if (typeof MessageChannel !== "undefined") {
+    // modern browsers
+    // http://www.nonblocking.io/2011/06/windownexttick.html
+    var channel = new MessageChannel();
+    // linked list of tasks (single, with head node)
+    var head = {}, tail = head;
+    channel.port1.onmessage = function () {
+        head = head.next;
+        var task = head.task;
+        delete head.task;
+        task();
+    };
+    nextTick = function (task) {
+        tail = tail.next = {task: task};
+        channel.port2.postMessage(0);
+    };
+} else {
+    // old browsers
+    nextTick = function (task) {
+        setTimeout(task, 0);
+    };
+}
+
+// Attempt to make generics safe in the face of downstream
+// modifications.
+// There is no situation where this is necessary.
+// If you need a security guarantee, these primordials need to be
+// deeply frozen anyway, and if you don’t need a security guarantee,
+// this is just plain paranoid.
+// However, this does have the nice side-effect of reducing the size
+// of the code by reducing x.call() to merely x(), eliminating many
+// hard-to-minify characters.
+// See Mark Miller’s explanation of what this does.
+// http://wiki.ecmascript.org/doku.php?id=conventions:safe_meta_programming
+var uncurryThis;
+// I have kept both variations because the first is theoretically
+// faster, if bind is available.
+if (Function.prototype.bind) {
+    var Function_bind = Function.prototype.bind;
+    uncurryThis = Function_bind.bind(Function_bind.call);
+} else {
+    uncurryThis = function (f) {
+        return function () {
+            return f.call.apply(f, arguments);
+        };
+    };
+}
+
+var array_slice = uncurryThis(Array.prototype.slice);
+
+var array_reduce = uncurryThis(
+    Array.prototype.reduce || function (callback, basis) {
+        var index = 0,
+            length = this.length;
+        // concerning the initial value, if one is not provided
+        if (arguments.length === 1) {
+            // seek to the first value in the array, accounting
+            // for the possibility that is is a sparse array
+            do {
+                if (index in this) {
+                    basis = this[index++];
+                    break;
+                }
+                if (++index >= length) {
+                    throw new TypeError();
+                }
+            } while (1);
+        }
+        // reduce
+        for (; index < length; index++) {
+            // account for the possibility that the array is sparse
+            if (index in this) {
+                basis = callback(basis, this[index], index);
+            }
+        }
+        return basis;
+    }
+);
+
+var array_indexOf = uncurryThis(
+    Array.prototype.indexOf || function (value) {
+        // not a very good shim, but good enough for our one use of it
+        for (var i = 0; i < this.length; i++) {
+            if (this[i] === value) {
+                return i;
+            }
+        }
+        return -1;
+    }
+);
+
+var array_map = uncurryThis(
+    Array.prototype.map || function (callback, thisp) {
+        var self = this;
+        var collect = [];
+        array_reduce(self, function (undefined, value, index) {
+            collect.push(callback.call(thisp, value, index, self));
+        }, void 0);
+        return collect;
+    }
+);
+
+var object_create = Object.create || function (prototype) {
+    function Type() { }
+    Type.prototype = prototype;
+    return new Type();
+};
+
+var object_keys = Object.keys || function (object) {
+    var keys = [];
+    for (var key in object) {
+        keys.push(key);
+    }
+    return keys;
+};
+
+var object_toString = Object.prototype.toString;
+
+// generator related shims
+
+function isStopIteration(exception) {
+    return (
+        object_toString(exception) === "[object StopIteration]" ||
+        exception instanceof QReturnValue
+    );
+}
+
+var QReturnValue;
+if (typeof ReturnValue !== "undefined") {
+    QReturnValue = ReturnValue;
+} else {
+    QReturnValue = function (value) {
+        this.value = value;
+    };
+}
+
+// long stack traces
+
+var STACK_JUMP_SEPARATOR = "From previous event:";
+
+function makeStackTraceLong(error, promise) {
+    // If possible (that is, if in V8), transform the error stack
+    // trace by removing Node and Q cruft, then concatenating with
+    // the stack trace of the promise we are ``done``ing. See #57.
+    if (promise.stack &&
+        typeof error === "object" &&
+        error !== null &&
+        error.stack &&
+        error.stack.indexOf(STACK_JUMP_SEPARATOR) === -1
+    ) {
+        error.stack = filterStackString(error.stack) +
+            "\n" + STACK_JUMP_SEPARATOR + "\n" +
+            filterStackString(promise.stack);
+    }
+}
+
+function filterStackString(stackString) {
+    var lines = stackString.split("\n");
+    var desiredLines = [];
+    for (var i = 0; i < lines.length; ++i) {
+        var line = lines[i];
+
+        if (!isInternalFrame(line) && !isNodeFrame(line)) {
+            desiredLines.push(line);
+        }
+    }
+    return desiredLines.join("\n");
+}
+
+function isNodeFrame(stackLine) {
+    return stackLine.indexOf("(module.js:") !== -1 ||
+           stackLine.indexOf("(node.js:") !== -1;
+}
+
+function isInternalFrame(stackLine) {
+    var pieces = /at .+ \((.*):(\d+):\d+\)/.exec(stackLine);
+
+    if (!pieces) {
+        return false;
+    }
+
+    var fileName = pieces[1];
+    var lineNumber = pieces[2];
+
+    return fileName === qFileName &&
+        lineNumber >= qStartingLine &&
+        lineNumber <= qEndingLine;
+}
+
+// discover own file name and line number range for filtering stack
+// traces
+function captureLine() {
+    if (Error.captureStackTrace) {
+        var fileName, lineNumber;
+
+        var oldPrepareStackTrace = Error.prepareStackTrace;
+
+        Error.prepareStackTrace = function (error, frames) {
+            fileName = frames[1].getFileName();
+            lineNumber = frames[1].getLineNumber();
+        };
+
+        // teases call of temporary prepareStackTrace
+        // JSHint and Closure Compiler generate known warnings here
+        /*jshint expr: true */
+        new Error().stack;
+
+        Error.prepareStackTrace = oldPrepareStackTrace;
+        qFileName = fileName;
+        return lineNumber;
+    }
+}
+
+function deprecate(callback, name, alternative) {
+    return function () {
+        if (typeof console !== "undefined" && typeof console.warn === "function") {
+            console.warn(name + " is deprecated, use " + alternative + " instead.", new Error("").stack);
+        }
+        return callback.apply(callback, arguments);
+    };
+}
+
+// end of shims
+// beginning of real work
+
+/**
+ * Creates fulfilled promises from non-promises,
+ * Passes Q promises through,
+ * Coerces CommonJS/Promises/A+ promises to Q promises.
+ */
+function Q(value) {
+    return resolve(value);
+}
+
+/**
+ * Performs a task in a future turn of the event loop.
+ * @param {Function} task
+ */
+Q.nextTick = nextTick;
+
+/**
+ * Constructs a {promise, resolve} object.
+ *
+ * The resolver is a callback to invoke with a more resolved value for the
+ * promise. To fulfill the promise, invoke the resolver with any value that is
+ * not a function. To reject the promise, invoke the resolver with a rejection
+ * object. To put the promise in the same state as another promise, invoke the
+ * resolver with that other promise.
+ */
+Q.defer = defer;
+function defer() {
+    // if "pending" is an "Array", that indicates that the promise has not yet
+    // been resolved.  If it is "undefined", it has been resolved.  Each
+    // element of the pending array is itself an array of complete arguments to
+    // forward to the resolved promise.  We coerce the resolution value to a
+    // promise using the ref promise because it handles both fully
+    // resolved values and other promises gracefully.
+    var pending = [], progressListeners = [], value;
+
+    var deferred = object_create(defer.prototype);
+    var promise = object_create(makePromise.prototype);
+
+    promise.promiseDispatch = function (resolve, op, operands) {
+        var args = array_slice(arguments);
+        if (pending) {
+            pending.push(args);
+            if (op === "when" && operands[1]) { // progress operand
+                progressListeners.push(operands[1]);
+            }
+        } else {
+            nextTick(function () {
+                value.promiseDispatch.apply(value, args);
+            });
+        }
+    };
+
+    promise.valueOf = function () {
+        if (pending) {
+            return promise;
+        }
+        return value.valueOf();
+    };
+
+    if (Error.captureStackTrace) {
+        Error.captureStackTrace(promise, defer);
+
+        // Reify the stack into a string by using the accessor; this prevents
+        // memory leaks as per GH-111. At the same time, cut off the first line;
+        // it's always just "[object Promise]\n", as per the `toString`.
+        promise.stack = promise.stack.substring(promise.stack.indexOf("\n") + 1);
+    }
+
+    function become(resolvedValue) {
+        if (!pending) {
+            return;
+        }
+        value = resolve(resolvedValue);
+        array_reduce(pending, function (undefined, pending) {
+            nextTick(function () {
+                value.promiseDispatch.apply(value, pending);
+            });
+        }, void 0);
+        pending = void 0;
+        progressListeners = void 0;
+    }
+
+    defend(promise);
+
+    deferred.promise = promise;
+    deferred.resolve = become;
+    deferred.fulfill = function (value) {
+        become(fulfill(value));
+    };
+    deferred.reject = function (exception) {
+        become(reject(exception));
+    };
+    deferred.notify = function (progress) {
+        if (pending) {
+            array_reduce(progressListeners, function (undefined, progressListener) {
+                nextTick(function () {
+                    progressListener(progress);
+                });
+            }, void 0);
+        }
+    };
+
+    return deferred;
+}
+
+/**
+ * Creates a Node-style callback that will resolve or reject the deferred
+ * promise.
+ * @returns a nodeback
+ */
+defer.prototype.makeNodeResolver = function () {
+    var self = this;
+    return function (error, value) {
+        if (error) {
+            self.reject(error);
+        } else if (arguments.length > 2) {
+            self.resolve(array_slice(arguments, 1));
+        } else {
+            self.resolve(value);
+        }
+    };
+};
+
+/**
+ * @param makePromise {Function} a function that returns nothing and accepts
+ * the resolve, reject, and notify functions for a deferred.
+ * @returns a promise that may be resolved with the given resolve and reject
+ * functions, or rejected by a thrown exception in makePromise
+ */
+Q.promise = promise;
+function promise(makePromise) {
+    var deferred = defer();
+    fcall(
+        makePromise,
+        deferred.resolve,
+        deferred.reject,
+        deferred.notify
+    ).fail(deferred.reject);
+    return deferred.promise;
+}
+
+/**
+ * Constructs a Promise with a promise descriptor object and optional fallback
+ * function.  The descriptor contains methods like when(rejected), get(name),
+ * put(name, value), post(name, args), and delete(name), which all
+ * return either a value, a promise for a value, or a rejection.  The fallback
+ * accepts the operation name, a resolver, and any further arguments that would
+ * have been forwarded to the appropriate method above had a method been
+ * provided with the proper name.  The API makes no guarantees about the nature
+ * of the returned object, apart from that it is usable whereever promises are
+ * bought and sold.
+ */
+Q.makePromise = makePromise;
+function makePromise(descriptor, fallback, valueOf, exception) {
+    if (fallback === void 0) {
+        fallback = function (op) {
+            return reject(new Error("Promise does not support operation: " + op));
+        };
+    }
+
+    var promise = object_create(makePromise.prototype);
+
+    promise.promiseDispatch = function (resolve, op, args) {
+        var result;
+        try {
+            if (descriptor[op]) {
+                result = descriptor[op].apply(promise, args);
+            } else {
+                result = fallback.call(promise, op, args);
+            }
+        } catch (exception) {
+            result = reject(exception);
+        }
+        if (resolve) {
+            resolve(result);
+        }
+    };
+
+    if (valueOf) {
+        promise.valueOf = valueOf;
+    }
+
+    if (exception) {
+        promise.exception = exception;
+    }
+
+    defend(promise);
+
+    return promise;
+}
+
+// provide thenables, CommonJS/Promises/A
+makePromise.prototype.then = function (fulfilled, rejected, progressed) {
+    return when(this, fulfilled, rejected, progressed);
+};
+
+makePromise.prototype.thenResolve = function (value) {
+    return when(this, function () { return value; });
+};
+
+// Chainable methods
+array_reduce(
+    [
+        "isResolved", "isFulfilled", "isRejected",
+        "dispatch",
+        "when", "spread",
+        "get", "put", "set", "del", "delete",
+        "post", "send",
+        "invoke", // XXX deprecated
+        "keys",
+        "fapply", "fcall", "fbind",
+        "all", "allResolved",
+        "timeout", "delay",
+        "catch", "finally", "fail", "fin", "progress", "done",
+        "nfcall", "nfapply", "nfbind",
+        "ncall", "napply", "nbind",
+        "npost", "nsend",
+        "ninvoke", // XXX deprecated
+        "nodeify"
+    ],
+    function (undefined, name) {
+        makePromise.prototype[name] = function () {
+            return Q[name].apply(
+                Q,
+                [this].concat(array_slice(arguments))
+            );
+        };
+    },
+    void 0
+);
+
+makePromise.prototype.toSource = function () {
+    return this.toString();
+};
+
+makePromise.prototype.toString = function () {
+    return "[object Promise]";
+};
+
+defend(makePromise.prototype);
+
+/**
+ * If an object is not a promise, it is as "near" as possible.
+ * If a promise is rejected, it is as "near" as possible too.
+ * If it’s a fulfilled promise, the fulfillment value is nearer.
+ * If it’s a deferred promise and the deferred has been resolved, the
+ * resolution is "nearer".
+ * @param object
+ * @returns most resolved (nearest) form of the object
+ */
+Q.nearer = valueOf;
+function valueOf(value) {
+    if (isPromise(value)) {
+        return value.valueOf();
+    }
+    return value;
+}
+
+/**
+ * @returns whether the given object is a promise.
+ * Otherwise it is a fulfilled value.
+ */
+Q.isPromise = isPromise;
+function isPromise(object) {
+    return object && typeof object.promiseDispatch === "function";
+}
+
+Q.isPromiseAlike = isPromiseAlike;
+function isPromiseAlike(object) {
+    return object && typeof object.then === "function";
+}
+
+/**
+ * @returns whether the given object is a resolved promise.
+ */
+Q.isResolved = isResolved;
+function isResolved(object) {
+    return isFulfilled(object) || isRejected(object);
+}
+
+/**
+ * @returns whether the given object is a value or fulfilled
+ * promise.
+ */
+Q.isFulfilled = isFulfilled;
+function isFulfilled(object) {
+    return !isPromiseAlike(valueOf(object));
+}
+
+/**
+ * @returns whether the given object is a rejected promise.
+ */
+Q.isRejected = isRejected;
+function isRejected(object) {
+    object = valueOf(object);
+    return isPromise(object) && 'exception' in object;
+}
+
+var rejections = [];
+var errors = [];
+var errorsDisplayed;
+function displayErrors() {
+    if (
+        !errorsDisplayed &&
+        typeof window !== "undefined" &&
+        !window.Touch &&
+        window.console
+    ) {
+        // This promise library consumes exceptions thrown in handlers so
+        // they can be handled by a subsequent promise.  The rejected
+        // promises get added to this array when they are created, and
+        // removed when they are handled.
+        console.log("Should be empty:", errors);
+    }
+    errorsDisplayed = true;
+}
+
+/**
+ * Constructs a rejected promise.
+ * @param exception value describing the failure
+ */
+Q.reject = reject;
+function reject(exception) {
+    var rejection = makePromise({
+        "when": function (rejected) {
+            // note that the error has been handled
+            if (rejected) {
+                var at = array_indexOf(rejections, this);
+                if (at !== -1) {
+                    errors.splice(at, 1);
+                    rejections.splice(at, 1);
+                }
+            }
+            return rejected ? rejected(exception) : reject(exception);
+        }
+    }, function fallback() {
+        return reject(exception);
+    }, function valueOf() {
+        return this;
+    }, exception);
+    // note that the error has not been handled
+    displayErrors();
+    rejections.push(rejection);
+    errors.push(exception);
+    return rejection;
+}
+
+/**
+ * Constructs a fulfilled promise for an immediate reference.
+ * @param value immediate reference
+ */
+Q.fulfill = fulfill;
+function fulfill(object) {
+    return makePromise({
+        "when": function () {
+            return object;
+        },
+        "get": function (name) {
+            return object[name];
+        },
+        "set": function (name, value) {
+            object[name] = value;
+            return object;
+        },
+        "delete": function (name) {
+            delete object[name];
+            return object;
+        },
+        "post": function (name, value) {
+            return object[name].apply(object, value);
+        },
+        "apply": function (args) {
+            return object.apply(void 0, args);
+        },
+        "keys": function () {
+            return object_keys(object);
+        }
+    }, void 0, function valueOf() {
+        return object;
+    });
+}
+
+/**
+ * Constructs a promise for an immediate reference, passes promises through, or
+ * coerces promises from different systems.
+ * @param value immediate reference or promise
+ */
+Q.resolve = resolve;
+function resolve(value) {
+    // If the object is already a Promise, return it directly.  This enables
+    // the resolve function to both be used to created references from objects,
+    // but to tolerably coerce non-promises to promises.
+    if (isPromise(value)) {
+        return value;
+    }
+    // In order to break infinite recursion or loops between `then` and
+    // `resolve`, it is necessary to attempt to extract fulfilled values
+    // out of foreign promise implementations before attempting to wrap
+    // them as unresolved promises.  It is my hope that other
+    // implementations will implement `valueOf` to synchronously extract
+    // the fulfillment value from their fulfilled promises.  If the
+    // other promise library does not implement `valueOf`, the
+    // implementations on primordial prototypes are harmless.
+    value = valueOf(value);
+    // assimilate thenables, CommonJS/Promises/A+
+    if (isPromiseAlike(value)) {
+        return coerce(value);
+    } else {
+        return fulfill(value);
+    }
+}
+
+/**
+ * Converts thenables to Q promises.
+ * @param promise thenable promise
+ * @returns a Q promise
+ */
+function coerce(promise) {
+    var deferred = defer();
+    promise.then(deferred.resolve, deferred.reject, deferred.notify);
+    return deferred.promise;
+}
+
+/**
+ * Annotates an object such that it will never be
+ * transferred away from this process over any promise
+ * communication channel.
+ * @param object
+ * @returns promise a wrapping of that object that
+ * additionally responds to the "isDef" message
+ * without a rejection.
+ */
+Q.master = master;
+function master(object) {
+    return makePromise({
+        "isDef": function () {}
+    }, function fallback(op, args) {
+        return dispatch(object, op, args);
+    }, function () {
+        return valueOf(object);
+    });
+}
+
+/**
+ * Registers an observer on a promise.
+ *
+ * Guarantees:
+ *
+ * 1. that fulfilled and rejected will be called only once.
+ * 2. that either the fulfilled callback or the rejected callback will be
+ *    called, but not both.
+ * 3. that fulfilled and rejected will not be called in this turn.
+ *
+ * @param value      promise or immediate reference to observe
+ * @param fulfilled  function to be called with the fulfilled value
+ * @param rejected   function to be called with the rejection exception
+ * @param progressed function to be called on any progress notifications
+ * @return promise for the return value from the invoked callback
+ */
+Q.when = when;
+function when(value, fulfilled, rejected, progressed) {
+    var deferred = defer();
+    var done = false;   // ensure the untrusted promise makes at most a
+                        // single call to one of the callbacks
+
+    function _fulfilled(value) {
+        try {
+            return typeof fulfilled === "function" ? fulfilled(value) : value;
+        } catch (exception) {
+            return reject(exception);
+        }
+    }
+
+    function _rejected(exception) {
+        if (typeof rejected === "function") {
+            makeStackTraceLong(exception, resolvedValue);
+            try {
+                return rejected(exception);
+            } catch (newException) {
+                return reject(newException);
+            }
+        }
+        return reject(exception);
+    }
+
+    function _progressed(value) {
+        return typeof progressed === "function" ? progressed(value) : value;
+    }
+
+    var resolvedValue = resolve(value);
+    nextTick(function () {
+        resolvedValue.promiseDispatch(function (value) {
+            if (done) {
+                return;
+            }
+            done = true;
+
+            deferred.resolve(_fulfilled(value));
+        }, "when", [function (exception) {
+            if (done) {
+                return;
+            }
+            done = true;
+
+            deferred.resolve(_rejected(exception));
+        }]);
+    });
+
+    // Progress propagator need to be attached in the current tick.
+    resolvedValue.promiseDispatch(void 0, "when", [void 0, function (value) {
+        var newValue;
+        var threw = false;
+        try {
+            newValue = _progressed(value);
+        } catch (e) {
+            threw = true;
+            if (Q.onerror) {
+                Q.onerror(e);
+            } else {
+                throw e;
+            }
+        }
+
+        if (!threw) {
+            deferred.notify(newValue);
+        }
+    }]);
+
+    return deferred.promise;
+}
+
+/**
+ * Spreads the values of a promised array of arguments into the
+ * fulfillment callback.
+ * @param fulfilled callback that receives variadic arguments from the
+ * promised array
+ * @param rejected callback that receives the exception if the promise
+ * is rejected.
+ * @returns a promise for the return value or thrown exception of
+ * either callback.
+ */
+Q.spread = spread;
+function spread(promise, fulfilled, rejected) {
+    return when(promise, function (valuesOrPromises) {
+        return all(valuesOrPromises).then(function (values) {
+            return fulfilled.apply(void 0, values);
+        }, rejected);
+    }, rejected);
+}
+
+/**
+ * The async function is a decorator for generator functions, turning
+ * them into asynchronous generators.  This presently only works in
+ * Firefox/Spidermonkey, however, this code does not cause syntax
+ * errors in older engines.  This code should continue to work and
+ * will in fact improve over time as the language improves.
+ *
+ * Decorates a generator function such that:
+ *  - it may yield promises
+ *  - execution will continue when that promise is fulfilled
+ *  - the value of the yield expression will be the fulfilled value
+ *  - it returns a promise for the return value (when the generator
+ *    stops iterating)
+ *  - the decorated function returns a promise for the return value
+ *    of the generator or the first rejected promise among those
+ *    yielded.
+ *  - if an error is thrown in the generator, it propagates through
+ *    every following yield until it is caught, or until it escapes
+ *    the generator function altogether, and is translated into a
+ *    rejection for the promise returned by the decorated generator.
+ *  - in present implementations of generators, when a generator
+ *    function is complete, it throws ``StopIteration``, ``return`` is
+ *    a syntax error in the presence of ``yield``, so there is no
+ *    observable return value. There is a proposal[1] to add support
+ *    for ``return``, which would permit the value to be carried by a
+ *    ``StopIteration`` instance, in which case it would fulfill the
+ *    promise returned by the asynchronous generator.  This can be
+ *    emulated today by throwing StopIteration explicitly with a value
+ *    property.
+ *
+ *  [1]: http://wiki.ecmascript.org/doku.php?id=strawman:async_functions#reference_implementation
+ *
+ */
+Q.async = async;
+function async(makeGenerator) {
+    return function () {
+        // when verb is "send", arg is a value
+        // when verb is "throw", arg is an exception
+        function continuer(verb, arg) {
+            var result;
+            try {
+                result = generator[verb](arg);
+            } catch (exception) {
+                if (isStopIteration(exception)) {
+                    return exception.value;
+                } else {
+                    return reject(exception);
+                }
+            }
+            return when(result, callback, errback);
+        }
+        var generator = makeGenerator.apply(this, arguments);
+        var callback = continuer.bind(continuer, "send");
+        var errback = continuer.bind(continuer, "throw");
+        return callback();
+    };
+}
+
+/**
+ * Throws a ReturnValue exception to stop an asynchronous generator.
+ * Only useful presently in Firefox/SpiderMonkey since generators are
+ * implemented.
+ * @param value the return value for the surrounding generator
+ * @throws ReturnValue exception with the value.
+ * @example
+ * Q.async(function () {
+ *      var foo = yield getFooPromise();
+ *      var bar = yield getBarPromise();
+ *      Q.return(foo + bar);
+ * })
+ */
+Q['return'] = _return;
+function _return(value) {
+    throw new QReturnValue(value);
+}
+
+/**
+ * The promised function decorator ensures that any promise arguments
+ * are resolved and passed as values (`this` is also resolved and passed
+ * as a value).  It will also ensure that the result of a function is
+ * always a promise.
+ *
+ * @example
+ * var add = Q.promised(function (a, b) {
+ *     return a + b;
+ * });
+ * add(Q.resolve(a), Q.resolve(B));
+ *
+ * @param {function} callback The function to decorate
+ * @returns {function} a function that has been decorated.
+ */
+Q.promised = promised;
+function promised(callback) {
+    return function () {
+        return spread([this, all(arguments)], function (self, args) {
+            return callback.apply(self, args);
+        });
+    };
+}
+
+/**
+ * sends a message to a value in a future turn
+ * @param object* the recipient
+ * @param op the name of the message operation, e.g., "when",
+ * @param args further arguments to be forwarded to the operation
+ * @returns result {Promise} a promise for the result of the operation
+ */
+Q.dispatch = dispatch;
+function dispatch(object, op, args) {
+    var deferred = defer();
+    nextTick(function () {
+        resolve(object).promiseDispatch(deferred.resolve, op, args);
+    });
+    return deferred.promise;
+}
+
+/**
+ * Constructs a promise method that can be used to safely observe resolution of
+ * a promise for an arbitrarily named method like "propfind" in a future turn.
+ *
+ * "dispatcher" constructs methods like "get(promise, name)" and "put(promise)".
+ */
+Q.dispatcher = dispatcher;
+function dispatcher(op) {
+    return function (object) {
+        var args = array_slice(arguments, 1);
+        return dispatch(object, op, args);
+    };
+}
+
+/**
+ * Gets the value of a property in a future turn.
+ * @param object    promise or immediate reference for target object
+ * @param name      name of property to get
+ * @return promise for the property value
+ */
+Q.get = dispatcher("get");
+
+/**
+ * Sets the value of a property in a future turn.
+ * @param object    promise or immediate reference for object object
+ * @param name      name of property to set
+ * @param value     new value of property
+ * @return promise for the return value
+ */
+Q.put = // XXX deprecated
+Q.set = dispatcher("set");
+
+/**
+ * Deletes a property in a future turn.
+ * @param object    promise or immediate reference for target object
+ * @param name      name of property to delete
+ * @return promise for the return value
+ */
+Q["delete"] = // XXX experimental
+Q.del = dispatcher("delete");
+
+/**
+ * Invokes a method in a future turn.
+ * @param object    promise or immediate reference for target object
+ * @param name      name of method to invoke
+ * @param value     a value to post, typically an array of
+ *                  invocation arguments for promises that
+ *                  are ultimately backed with `resolve` values,
+ *                  as opposed to those backed with URLs
+ *                  wherein the posted value can be any
+ *                  JSON serializable object.
+ * @return promise for the return value
+ */
+// bound locally because it is used by other methods
+var post = Q.post = dispatcher("post");
+
+/**
+ * Invokes a method in a future turn.
+ * @param object    promise or immediate reference for target object
+ * @param name      name of method to invoke
+ * @param ...args   array of invocation arguments
+ * @return promise for the return value
+ */
+Q.send = function (value, name) {
+    var args = array_slice(arguments, 2);
+    return post(value, name, args);
+};
+// XXX deprecated
+Q.invoke = deprecate(Q.send, "invoke", "send");
+
+/**
+ * Applies the promised function in a future turn.
+ * @param object    promise or immediate reference for target function
+ * @param args      array of application arguments
+ */
+var fapply = Q.fapply = dispatcher("apply");
+
+/**
+ * Calls the promised function in a future turn.
+ * @param object    promise or immediate reference for target function
+ * @param ...args   array of application arguments
+ */
+Q["try"] = fcall; // XXX experimental
+Q.fcall = fcall;
+function fcall(value) {
+    var args = array_slice(arguments, 1);
+    return fapply(value, args);
+}
+
+/**
+ * Binds the promised function, transforming return values into a fulfilled
+ * promise and thrown errors into a rejected one.
+ * @param object    promise or immediate reference for target function
+ * @param ...args   array of application arguments
+ */
+Q.fbind = fbind;
+function fbind(value) {
+    var args = array_slice(arguments, 1);
+    return function fbound() {
+        var allArgs = args.concat(array_slice(arguments));
+        return fapply(value, allArgs);
+    };
+}
+
+/**
+ * Requests the names of the owned properties of a promised
+ * object in a future turn.
+ * @param object    promise or immediate reference for target object
+ * @return promise for the keys of the eventually resolved object
+ */
+Q.keys = dispatcher("keys");
+
+/**
+ * Turns an array of promises into a promise for an array.  If any of
+ * the promises gets rejected, the whole array is rejected immediately.
+ * @param {Array*} an array (or promise for an array) of values (or
+ * promises for values)
+ * @returns a promise for an array of the corresponding values
+ */
+// By Mark Miller
+// http://wiki.ecmascript.org/doku.php?id=strawman:concurrency&rev=1308776521#allfulfilled
+Q.all = all;
+function all(promises) {
+    return when(promises, function (promises) {
+        var countDown = promises.length;
+        if (countDown === 0) {
+            return resolve(promises);
+        }
+        var deferred = defer();
+        array_reduce(promises, function (undefined, promise, index) {
+            if (isFulfilled(promise)) {
+                promises[index] = valueOf(promise);
+                if (--countDown === 0) {
+                    deferred.resolve(promises);
+                }
+            } else {
+                when(promise, function (value) {
+                    promises[index] = value;
+                    if (--countDown === 0) {
+                        deferred.resolve(promises);
+                    }
+                })
+                .fail(deferred.reject);
+            }
+        }, void 0);
+        return deferred.promise;
+    });
+}
+
+/**
+ * Waits for all promises to be resolved, either fulfilled or
+ * rejected.  This is distinct from `all` since that would stop
+ * waiting at the first rejection.  The promise returned by
+ * `allResolved` will never be rejected.
+ * @param promises a promise for an array (or an array) of promises
+ * (or values)
+ * @return a promise for an array of promises
+ */
+Q.allResolved = allResolved;
+function allResolved(promises) {
+    return when(promises, function (promises) {
+        return when(all(array_map(promises, function (promise) {
+            return when(promise, noop, noop);
+        })), function () {
+            return array_map(promises, resolve);
+        });
+    });
+}
+
+/**
+ * Captures the failure of a promise, giving an oportunity to recover
+ * with a callback.  If the given promise is fulfilled, the returned
+ * promise is fulfilled.
+ * @param {Any*} promise for something
+ * @param {Function} callback to fulfill the returned promise if the
+ * given promise is rejected
+ * @returns a promise for the return value of the callback
+ */
+Q["catch"] = // XXX experimental
+Q.fail = fail;
+function fail(promise, rejected) {
+    return when(promise, void 0, rejected);
+}
+
+/**
+ * Attaches a listener that can respond to progress notifications from a
+ * promise's originating deferred. This listener receives the exact arguments
+ * passed to ``deferred.notify``.
+ * @param {Any*} promise for something
+ * @param {Function} callback to receive any progress notifications
+ * @returns the given promise, unchanged
+ */
+Q.progress = progress;
+function progress(promise, progressed) {
+    return when(promise, void 0, void 0, progressed);
+}
+
+/**
+ * Provides an opportunity to observe the rejection of a promise,
+ * regardless of whether the promise is fulfilled or rejected.  Forwards
+ * the resolution to the returned promise when the callback is done.
+ * The callback can return a promise to defer completion.
+ * @param {Any*} promise
+ * @param {Function} callback to observe the resolution of the given
+ * promise, takes no arguments.
+ * @returns a promise for the resolution of the given promise when
+ * ``fin`` is done.
+ */
+Q["finally"] = // XXX experimental
+Q.fin = fin;
+function fin(promise, callback) {
+    return when(promise, function (value) {
+        return when(callback(), function () {
+            return value;
+        });
+    }, function (exception) {
+        return when(callback(), function () {
+            return reject(exception);
+        });
+    });
+}
+
+/**
+ * Terminates a chain of promises, forcing rejections to be
+ * thrown as exceptions.
+ * @param {Any*} promise at the end of a chain of promises
+ * @returns nothing
+ */
+Q.done = done;
+function done(promise, fulfilled, rejected, progress) {
+    var onUnhandledError = function (error) {
+        // forward to a future turn so that ``when``
+        // does not catch it and turn it into a rejection.
+        nextTick(function () {
+            makeStackTraceLong(error, promise);
+
+            if (Q.onerror) {
+                Q.onerror(error);
+            } else {
+                throw error;
+            }
+        });
+    };
+
+    // Avoid unnecessary `nextTick`ing via an unnecessary `when`.
+    var promiseToHandle = fulfilled || rejected || progress ?
+        when(promise, fulfilled, rejected, progress) :
+        promise;
+
+    if (typeof process === "object" && process && process.domain) {
+        onUnhandledError = process.domain.bind(onUnhandledError);
+    }
+    fail(promiseToHandle, onUnhandledError);
+}
+
+/**
+ * Causes a promise to be rejected if it does not get fulfilled before
+ * some milliseconds time out.
+ * @param {Any*} promise
+ * @param {Number} milliseconds timeout
+ * @returns a promise for the resolution of the given promise if it is
+ * fulfilled before the timeout, otherwise rejected.
+ */
+Q.timeout = timeout;
+function timeout(promise, ms) {
+    var deferred = defer();
+    var timeoutId = setTimeout(function () {
+        deferred.reject(new Error("Timed out after " + ms + " ms"));
+    }, ms);
+
+    when(promise, function (value) {
+        clearTimeout(timeoutId);
+        deferred.resolve(value);
+    }, function (exception) {
+        clearTimeout(timeoutId);
+        deferred.reject(exception);
+    });
+
+    return deferred.promise;
+}
+
+/**
+ * Returns a promise for the given value (or promised value) after some
+ * milliseconds.
+ * @param {Any*} promise
+ * @param {Number} milliseconds
+ * @returns a promise for the resolution of the given promise after some
+ * time has elapsed.
+ */
+Q.delay = delay;
+function delay(promise, timeout) {
+    if (timeout === void 0) {
+        timeout = promise;
+        promise = void 0;
+    }
+    var deferred = defer();
+    setTimeout(function () {
+        deferred.resolve(promise);
+    }, timeout);
+    return deferred.promise;
+}
+
+/**
+ * Passes a continuation to a Node function, which is called with the given
+ * arguments provided as an array, and returns a promise.
+ *
+ *      Q.nfapply(FS.readFile, [__filename])
+ *      .then(function (content) {
+ *      })
+ *
+ */
+Q.nfapply = nfapply;
+function nfapply(callback, args) {
+    var nodeArgs = array_slice(args);
+    var deferred = defer();
+    nodeArgs.push(deferred.makeNodeResolver());
+
+    fapply(callback, nodeArgs).fail(deferred.reject);
+    return deferred.promise;
+}
+
+/**
+ * Passes a continuation to a Node function, which is called with the given
+ * arguments provided individually, and returns a promise.
+ *
+ *      Q.nfcall(FS.readFile, __filename)
+ *      .then(function (content) {
+ *      })
+ *
+ */
+Q.nfcall = nfcall;
+function nfcall(callback/*, ...args */) {
+    var nodeArgs = array_slice(arguments, 1);
+    var deferred = defer();
+    nodeArgs.push(deferred.makeNodeResolver());
+
+    fapply(callback, nodeArgs).fail(deferred.reject);
+    return deferred.promise;
+}
+
+/**
+ * Wraps a NodeJS continuation passing function and returns an equivalent
+ * version that returns a promise.
+ *
+ *      Q.nfbind(FS.readFile, __filename)("utf-8")
+ *      .then(console.log)
+ *      .done()
+ *
+ */
+Q.nfbind = nfbind;
+function nfbind(callback/*, ...args */) {
+    var baseArgs = array_slice(arguments, 1);
+    return function () {
+        var nodeArgs = baseArgs.concat(array_slice(arguments));
+        var deferred = defer();
+        nodeArgs.push(deferred.makeNodeResolver());
+
+        fapply(callback, nodeArgs).fail(deferred.reject);
+        return deferred.promise;
+    };
+}
+
+/**
+ * Calls a method of a Node-style object that accepts a Node-style
+ * callback with a given array of arguments, plus a provided callback.
+ * @param object an object that has the named method
+ * @param {String} name name of the method of object
+ * @param {Array} args arguments to pass to the method; the callback
+ * will be provided by Q and appended to these arguments.
+ * @returns a promise for the value or error
+ */
+Q.npost = npost;
+function npost(object, name, args) {
+    var nodeArgs = array_slice(args);
+    var deferred = defer();
+    nodeArgs.push(deferred.makeNodeResolver());
+
+    post(object, name, nodeArgs).fail(deferred.reject);
+    return deferred.promise;
+}
+
+/**
+ * Calls a method of a Node-style object that accepts a Node-style
+ * callback, forwarding the given variadic arguments, plus a provided
+ * callback argument.
+ * @param object an object that has the named method
+ * @param {String} name name of the method of object
+ * @param ...args arguments to pass to the method; the callback will
+ * be provided by Q and appended to these arguments.
+ * @returns a promise for the value or error
+ */
+Q.nsend = nsend;
+function nsend(object, name /*, ...args*/) {
+    var nodeArgs = array_slice(arguments, 2);
+    var deferred = defer();
+    nodeArgs.push(deferred.makeNodeResolver());
+    post(object, name, nodeArgs).fail(deferred.reject);
+    return deferred.promise;
+}
+// XXX deprecated
+Q.ninvoke = deprecate(nsend, "ninvoke", "nsend");
+
+Q.nodeify = nodeify;
+function nodeify(promise, nodeback) {
+    if (nodeback) {
+        promise.then(function (value) {
+            nextTick(function () {
+                nodeback(null, value);
+            });
+        }, function (error) {
+            nextTick(function () {
+                nodeback(error);
+            });
+        });
+    } else {
+        return promise;
+    }
+}
+
+// All code before this point will be filtered from stack traces.
+var qEndingLine = captureLine();
+
+return Q;
+
+});
+
 });
 require.register("grunt-wpt-page/index.js", function(exports, require, module){
 /*global Morris: true */
@@ -27748,8 +30405,10 @@ require.register("grunt-wpt-page/index.js", function(exports, require, module){
 
     var $ = require('jquery'),
         _ = require('lodash'),
+        request = require('superagent'),
         moment = require('moment'),
         bootstrap = require('components-bootstrap'),
+        Q = require('q'),
         Vue = require('vue'),
         renderMorris = function(data){
             $("#"+data.element).html('');
@@ -27763,179 +30422,170 @@ require.register("grunt-wpt-page/index.js", function(exports, require, module){
             });
         };
 
-    $.when(
-        $.ajax({
-            url: 'tests/results.json',
-            dataType: 'json'
-        }),
-        $.ajax({
-            url: 'tests/locations.json',
-            dataType: 'json'
-        })
-    ).done(function(resultsAjax, locationsAjax){
-        var results = resultsAjax[0],
-            locations = locationsAjax[0];
-
-        new Vue({
-            el: '#app',
-            data: {
-                results: results,
-                locations: locations,
-                tests: {},
-                labels: {
-                    responseTime: {
-                        median: {
-                            domContentLoadedEventStart: 'DOM Content Ready Start',
-                            domContentLoadedEventEnd: 'DOM Content Ready End',
-                            loadTime: 'Document Complete',
-                            loadEventStart: 'Load Event Start',
-                            loadEventEnd: 'Load Event End',
-                            fullyLoaded: 'Fully Loaded'
-                        },
-                        average: {
-                            loadTime: 'Document Complete',
-                            fullyLoaded: 'Fully Loaded'
-                        }
+    var app = new Vue({
+        el: '#app',
+        data: {
+            results: {},
+            locations: {},
+            tests: {},
+            labels: {
+                responseTime: {
+                    median: {
+                        domContentLoadedEventStart: 'DOM Content Ready Start',
+                        domContentLoadedEventEnd: 'DOM Content Ready End',
+                        loadTime: 'Document Complete',
+                        loadEventStart: 'Load Event Start',
+                        loadEventEnd: 'Load Event End',
+                        fullyLoaded: 'Fully Loaded'
                     },
-                    contents: {
-                        'html': 'HTML',
-                        'css': 'CSS',
-                        'image': 'Image',
-                        'flash': 'Flash',
-                        'js': 'JavaScript',
-                        'font': 'Font',
-                        'other': 'Other'
+                    average: {
+                        loadTime: 'Document Complete',
+                        fullyLoaded: 'Fully Loaded'
                     }
-                }
-            },
-            ready: function(){
-                this.location = _.chain(this.locations).keys().first().value();
-                this.url = _.chain(this.urls).keys().first().value();
-                this.renderGraph();
-            },
-            computed: {
-                urls: function(){
-                    return this.results[this.location]||{};
                 },
-                testIds: function(){
-                    return this.urls[this.url];
+                contents: {
+                    'html': 'HTML',
+                    'css': 'CSS',
+                    'image': 'Image',
+                    'flash': 'Flash',
+                    'js': 'JavaScript',
+                    'font': 'Font',
+                    'other': 'Other'
                 }
+            }
+        },
+        created: function(){
+            var that = this;
+
+            this.$watch('url', function(){
+                that.renderGraph();
+            });
+
+            request.get('tests/results.json', function(res){
+                that.results = res.body;
+            });
+
+            request.get('tests/locations.json', function(res){
+                that.locations = res.body;
+                that.location = _.chain(that.locations).keys().first().value();
+                that.url = _.chain(that.urls).keys().first().value();
+            });
+
+        },
+        computed: {
+            urls: function(){
+                return this.results[this.location]||{};
             },
-            filters: {
-                convertToDate: function(time){
-                    return moment(time*1000).format('LLL');
-                },
-                totalBytes: function(data){
-                    var total = _.reduce(data, function(memo, val, key){
-                        return memo + (val.bytes||0);
-                    }, 0);
+            testIds: function(){
+                return this.urls[this.url];
+            }
+        },
+        filters: {
+            convertToDate: function(time){
+                return moment(time*1000).format('LLL');
+            },
+            totalBytes: function(data){
+                var total = _.reduce(data, function(memo, val, key){
+                    return memo + (val.bytes||0);
+                }, 0);
 
-                    return total;
-                },
-                totalRequests: function(data){
-                    var total = _.reduce(data, function(memo, val, key){
-                        return memo + (val.requests||0);
-                    }, 0);
+                return total;
+            },
+            totalRequests: function(data){
+                var total = _.reduce(data, function(memo, val, key){
+                    return memo + (val.requests||0);
+                }, 0);
 
-                    return total;
-                },
-                ms: function(num){
-                    return String(num).replace(/(\d{1,3})(?=(?:\d{3})+$)/g,"$1,")+' ms';
-                },
-                KB: function(num){
-                    return String((num / 1000).toFixed(1)).replace(/(\d{1,3})(?=(?:\d{3})+$)/g,"$1,")+' KB';
-                }
+                return total;
             },
-            methods: {
-                renderGraph: function(){
-                    var dummy = new $.Deferred(),
-                        requests = [dummy],
-                        that = this;
-
-                    dummy.resolve([]);
-
-                    _(this.testIds).each(function(testId){
-                        requests.push($.ajax({
-                            url: 'tests/'+testId+'.json',
-                            dataType: 'json',
-                            cache: true
-                        }));
-                    });
+            ms: function(num){
+                return String(num).replace(/(\d{1,3})(?=(?:\d{3})+$)/g,"$1,")+' ms';
+            },
+            KB: function(num){
+                return String((num / 1000).toFixed(1)).replace(/(\d{1,3})(?=(?:\d{3})+$)/g,"$1,")+' KB';
+            }
+        },
+        methods: {
+            renderGraph: function(){
+                var requests = [],
+                    that = this;
 
-                    $.when.apply( $, requests ).done(function(){
-                        var tests = _.map(arguments, function(arr){
-                            return arr[0];
-                        });
-                        
-                        // Remove dummy deferred object
-                        tests.shift();
-
-                        that.$set('tests', tests);
-
-                        that.renderResponseTimeGraph( tests, 'average', 'first' );
-                        that.renderResponseTimeGraph( tests, 'median', 'first' );
-                        that.renderResponseTimeGraph( tests, 'average', 'repeat' );
-                        that.renderResponseTimeGraph( tests, 'median', 'repeat' );
-                        that.renderContentsSizeGraph( tests, 'first' );
-                        that.renderContentsSizeGraph( tests, 'repeat' );
-                        that.renderContentsRequestsGraph( tests, 'first' );
-                        that.renderContentsRequestsGraph( tests, 'repeat' );
-                    });
+                _(this.testIds).each(function(testId){
+                    var dfd = Q.defer();
 
-                },
-                renderResponseTimeGraph: function(tests, type, view){
-                    renderMorris({
-                        data: _.map(tests, function(test){
-                            var obj = test.response.data[type][view+'View'] || {};
-                            obj.date = new Date( test.info.completed*1000 ).getTime();
-                            return obj;
-                        }),
-                        keys: _(this.labels.responseTime[type]).keys().value(),
-                        labels: _(this.labels.responseTime[type]).values().value(),
-                        element: $.camelCase( view + '-' + type)
-                    });
-                },
-                renderContentsSizeGraph: function(tests, view){
-                    renderMorris({
-                          data: _.map(tests, function(test){
-                            var obj = {};
-                            var tmp = 0;
-                            _.each(test.response.data.median[view+'View'].breakdown, function(val, key){
-                                obj[key] = ( val.bytes / 1000).toFixed(1);
-                                tmp += Number(obj[key]);
-                            });
-                            obj.total = _.reduce(obj, function(memo, val, key){
-                                return memo + Number(val||0);
-                            }, 0).toFixed(1);
-                            obj.date = new Date( test.info.completed*1000 ).getTime();
-                            return obj;
-                        }),
-                        keys: _(this.labels.contents).keys().value().concat(['total']),
-                        labels: _(this.labels.contents).values().value().concat(['Total']),
-                        element: view + 'ContentsSize'
-                    });
-                },
-                renderContentsRequestsGraph: function(tests, view){
-                    renderMorris({
-                          data: _.map(tests, function(test){
-                            var obj = {};
-                            var tmp = 0;
-                            _.each(test.response.data.median[view+'View'].breakdown, function(val, key){
-                                obj[key] = Number(val.requests);
-                            });
-                            obj.total = _.reduce(obj, function(memo, val, key){
-                                return memo + Number(val||0);
-                            }, 0);
-                            obj.date = new Date( test.info.completed*1000 ).getTime();
-                            return obj;
-                        }),
-                        keys: _(this.labels.contents).keys().value().concat(['total']),
-                        labels: _(this.labels.contents).values().value().concat(['Total']),
-                        element: view + 'ContentsRequests'
+                    request.get('tests/'+testId+'.json', function(res){
+                        dfd.resolve(res.body);
                     });
-                }
+                    requests.push(dfd.promise);
+                });
+
+                Q.all(requests).then(function(tests){
+
+                    that.$set('tests', tests);
+
+                    that.renderResponseTimeGraph( tests, 'average', 'first' );
+                    that.renderResponseTimeGraph( tests, 'median', 'first' );
+                    that.renderResponseTimeGraph( tests, 'average', 'repeat' );
+                    that.renderResponseTimeGraph( tests, 'median', 'repeat' );
+                    that.renderContentsSizeGraph( tests, 'first' );
+                    that.renderContentsSizeGraph( tests, 'repeat' );
+                    that.renderContentsRequestsGraph( tests, 'first' );
+                    that.renderContentsRequestsGraph( tests, 'repeat' );
+                });
+
+            },
+            renderResponseTimeGraph: function(tests, type, view){
+                renderMorris({
+                    data: _.map(tests, function(test){
+                        var obj = test.response.data[type][view+'View'] || {};
+                        obj.date = new Date( test.info.completed*1000 ).getTime();
+                        return obj;
+                    }),
+                    keys: _(this.labels.responseTime[type]).keys().value(),
+                    labels: _(this.labels.responseTime[type]).values().value(),
+                    element: $.camelCase( view + '-' + type)
+                });
+            },
+            renderContentsSizeGraph: function(tests, view){
+                renderMorris({
+                      data: _.map(tests, function(test){
+                        var obj = {};
+                        var tmp = 0;
+                        _.each(test.response.data.median[view+'View'].breakdown, function(val, key){
+                            obj[key] = ( val.bytes / 1000).toFixed(1);
+                            tmp += Number(obj[key]);
+                        });
+                        obj.total = _.reduce(obj, function(memo, val, key){
+                            return memo + Number(val||0);
+                        }, 0).toFixed(1);
+                        obj.date = new Date( test.info.completed*1000 ).getTime();
+                        return obj;
+                    }),
+                    keys: _(this.labels.contents).keys().value().concat(['total']),
+                    labels: _(this.labels.contents).values().value().concat(['Total']),
+                    element: view + 'ContentsSize'
+                });
+            },
+            renderContentsRequestsGraph: function(tests, view){
+                renderMorris({
+                      data: _.map(tests, function(test){
+                        var obj = {};
+                        var tmp = 0;
+                        _.each(test.response.data.median[view+'View'].breakdown, function(val, key){
+                            obj[key] = Number(val.requests);
+                        });
+                        obj.total = _.reduce(obj, function(memo, val, key){
+                            return memo + Number(val||0);
+                        }, 0);
+                        obj.date = new Date( test.info.completed*1000 ).getTime();
+                        return obj;
+                    }),
+                    keys: _(this.labels.contents).keys().value().concat(['total']),
+                    labels: _(this.labels.contents).values().value().concat(['Total']),
+                    element: view + 'ContentsRequests'
+                });
             }
-        });
+        }
     });
 
 })(Morris);
@@ -27950,8 +30600,14 @@ require.register("grunt-wpt-page/index.js", function(exports, require, module){
 
 
 
+
+
+
+
+
+
 require.register("grunt-wpt-page/index.html", function(exports, require, module){
-module.exports = '<!DOCTYPE html>\n<html>\n<head>\n    <link rel=\'stylesheet\' href=\'//cdn.oesmith.co.uk/morris-0.4.3.min.css\'>\n    <link rel=\'stylesheet\' href=\'build/components/bootstrap/3.1.1/css/bootstrap.min.css\'>\n    <link rel=\'stylesheet\' href=\'build/components/bootstrap/3.1.1/css/bootstrap-theme.min.css\'>\n    <link rel=\'stylesheet\' href=\'build/build.css\'>\n\n	<title>Grunt WebPageTest</title>\n</head>\n<body>\n\n	<div class="container">\n		<nav class="navbar navbar-default" role="navigation">\n		    <!-- Brand and toggle get grouped for better mobile display -->\n		    <div class="navbar-header">\n		        <a class="navbar-brand" href="#">Grunt WebPageTest</a>\n		    </div>\n		</nav>\n	</div>\n\n	<div id="app" class="container">\n		<div class="row">\n			<div class="col-md-2 sidebar" >\n				<div data-spy="affix" data-offset-top="60">\n			  		<h2>Location</h2>\n					<select id="locations" class="form-control" v-model="location" >\n						<option v-repeat="locations" value="{{$key}}" >{{$value}}</option>\n					</select>\n			  		<h2>URL</h2>\n					<select id="urls" class="form-control" v-model="url" v-on="change: render" >\n						<option v-repeat="urls" value="{{$key}}" >{{$key}}</option>\n					</select>\n\n					<ul class="nav nav-pills nav-stacked">\n					  <li>\n					  	<a href="#responseTime">Response Time</a>\n					  	<a href="#contentsSize">Contents Size</a>\n					  	<a href="#contentsRequests">Contents Requests</a>\n					  </li>\n					</ul>\n				</div>\n			</div>\n			<div class="col-md-10">\n\n				<h2 id="responseTime" >Response Time</h2>\n				<h3>FirstView</h3>\n				<h4>Average</h4>\n				<div id="firstAverage" class="graphs"></div>\n\n				<h4>Median</h4>\n				<div id="firstMedian" class="graphs"></div>\n\n				<h3>RepeatView</h3>\n				<h4>Average</h4>\n				<div id="repeatAverage" class="graphs"></div>\n\n				<h4>Median</h4>\n				<div id="repeatMedian" class="graphs"></div>\n\n				<h3>Detail</h3>\n				<h4>Average</h4>\n				<table class="table table-striped table-bordered">\n					<thead>\n						<tr>\n							<th rowspan="2">Date</th>\n							<th rowspan="2">ID</th>\n							<th colspan="2">FirstView</th>\n							<th colspan="2">RepeatView</th>\n						</tr>\n						<tr>\n							<th v-repeat="labels.responseTime.average">{{$value}}</th>\n							<th v-repeat="labels.responseTime.average">{{$value}}</th>\n						</tr>\n					</thead>\n					<tbody id="averageTable">\n						<tr v-repeat="tests" >\n							<td>{{info.completed | convertToDate }}</td>\n							<td><a v-attr="href: response.data.summary">{{info.id}}</a></td>\n							<td v-repeat="labels.responseTime.average">{{response.data.average.firstView[$key] | ms}}</td>\n							<td v-repeat="labels.responseTime.average">{{response.data.average.repeatView[$key] | ms}}</td>\n						</tr>\n					</tbody>\n				</table>\n\n				<h4>Median</h4>\n				<table class="table table-striped table-bordered">\n					<thead>\n						<tr>\n							<th rowspan="2">Date</th>\n							<th rowspan="2">ID</th>\n							<th colspan="6">FirstView</th>\n							<th colspan="6">RepeatView</th>\n						</tr>\n						<tr>\n\n							<th v-repeat="labels.responseTime.median">{{$value}}</th>\n							<th v-repeat="labels.responseTime.median">{{$value}}</th>\n						</tr>\n					</thead>\n					<tbody id="medianTable">\n						<tr v-repeat="tests">\n							<td>{{info.completed | convertToDate}}</td>\n							<td><a v-attr="href: response.data.summary">{{info.id}}</a></td>\n							<td v-repeat="labels.responseTime.median">{{response.data.median.firstView[$key] | ms}}</td>\n							<td v-repeat="labels.responseTime.median">{{response.data.median.repeatView[$key] | ms}}</td>\n						</tr>\n					</tbody>\n				</table>\n\n\n				<h2 id="contentsSize" >Contents Size</h2>\n				<h3>FirstView</h3>\n				<div id="firstContentsSize" class="graphs"></div>\n\n				<h3>RepeatView</h3>\n				<div id="repeatContentsSize" class="graphs"></div>\n\n				<h3>Detail</h3>\n				<table class="table table-striped table-bordered">\n					<thead>\n						<tr>\n							<th rowspan="2">Date</th>\n							<th rowspan="2">ID</th>\n							<th colspan="8">FirstView</th>\n							<th colspan="8">RepeatView</th>\n						</tr>\n						<tr>\n							<th>Total</th>\n							<th v-repeat="labels.contents">{{$value}}</th>\n							<th>Total</th>\n							<th v-repeat="labels.contents">{{$value}}</th>\n						</tr>\n					</thead>\n					<tbody id="contentsSizeTable">\n						<tr v-repeat="tests" >\n							<td>{{info.completed | convertToDate}}</td>\n							<td><a v-attr="href: response.data.summary">{{info.id}}</a></td>\n							<td>{{response.data.median.firstView.breakdown | totalBytes | KB}}</td>\n							<td v-repeat="labels.contents" >{{response.data.median.firstView.breakdown[$key].bytes | KB}}</td>\n							<td>{{response.data.median.repeatView.breakdown | totalBytes | KB}}</td>\n							<td v-repeat="labels.contents" >{{response.data.median.repeatView.breakdown[$key].bytes | KB}}</td>\n	 					</tr>\n					</tbody>\n				</table>\n\n				<h2 id="contentsRequests" >Contents Requests</h2>\n				<h3>FirstView</h3>\n				<div id="firstContentsRequests" class="graphs"></div>\n\n				<h3>RepeatView</h3>\n				<div id="repeatContentsRequests" class="graphs"></div>\n\n				<h3>Detail</h3>\n				<table class="table table-striped table-bordered">\n					<thead>\n						<tr>\n							<th rowspan="2">Date</th>\n							<th rowspan="2">ID</th>\n							<th colspan="8">FirstView</th>\n							<th colspan="8">RepeatView</th>\n						</tr>\n						<tr>\n							<th>Total</th>\n							<th v-repeat="labels.contents">{{$value}}</th>\n							<th>Total</th>\n							<th v-repeat="labels.contents">{{$value}}</th>\n						</tr>\n					</thead>\n					<tbody id="contentsRequestsTable">\n						<tr v-repeat="tests" >\n							<td>{{info.completed | convertToDate}}</td>\n							<td><a v-attr="href: response.data.summary">{{info.id}}</a></td>\n							<td>{{response.data.median.firstView.breakdown | totalRequests }}</td>\n							<td v-repeat="labels.contents" >{{response.data.median.firstView.breakdown[$key].requests }}</td>\n							<td>{{response.data.median.repeatView.breakdown | totalRequests }}</td>\n							<td v-repeat="labels.contents" >{{response.data.median.repeatView.breakdown[$key].requests }}</td>\n	 					</tr>\n					</tbody>\n				</table>\n\n			</div>\n		</div>\n	</div>\n\n    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>\n    <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>\n    <script src="//cdn.oesmith.co.uk/morris-0.5.1.min.js"></script>\n	<script src=\'build/build.js\'></script>\n</body>\n</html>';
+module.exports = '<!DOCTYPE html>\n<html>\n<head>\n    <link rel=\'stylesheet\' href=\'//cdn.oesmith.co.uk/morris-0.4.3.min.css\'>\n    <link rel=\'stylesheet\' href=\'build/build.css\'>\n\n    <title>Grunt WebPageTest</title>\n</head>\n<body data-spy="scroll" data-target=".nav-graph">\n\n    <div class="container">\n        <nav class="navbar navbar-default" role="navigation">\n            <!-- Brand and toggle get grouped for better mobile display -->\n            <div class="navbar-header">\n                <a class="navbar-brand" href="#">Grunt WebPageTest</a>\n            </div>\n        </nav>\n    </div>\n\n    <div id="app" class="container">\n        <div class="row">\n            <div class="col-md-2 sidebar" >\n                <div data-spy="affix" data-offset-top="60" class="nav-graph">\n                    <h2>Location</h2>\n                    <select id="locations" class="form-control" v-model="location" >\n                        <option v-repeat="locations" value="{{$key}}" >{{$value}}</option>\n                    </select>\n\n                    <h2>URL</h2>\n                    <select id="urls" class="form-control" v-model="url" >\n                        <option v-repeat="urls" value="{{$key}}" >{{$key}}</option>\n                    </select>\n\n                    <h2>Results</h2>\n                    <ul class="nav nav-pills nav-stacked">\n                        <li><a href="#responseTime">Response Time</a></li>\n                        <li><a href="#contentsSize">Contents Size</a></li>\n                        <li><a href="#contentsRequests">Contents Requests</a></li>\n                    </ul>\n                </div>\n            </div>\n            <div class="col-md-10">\n\n                <h2 id="responseTime" >Response Time</h2>\n                <h3>FirstView</h3>\n                <h4>Average</h4>\n                <div id="firstAverage" class="graphs"></div>\n\n                <h4>Median</h4>\n                <div id="firstMedian" class="graphs"></div>\n\n                <h3>RepeatView</h3>\n                <h4>Average</h4>\n                <div id="repeatAverage" class="graphs"></div>\n\n                <h4>Median</h4>\n                <div id="repeatMedian" class="graphs"></div>\n\n                <h3>Detail</h3>\n                <h4>Average</h4>\n                <table class="table table-striped table-bordered">\n                    <thead>\n                        <tr>\n                            <th rowspan="2">Date</th>\n                            <th rowspan="2">ID</th>\n                            <th colspan="2">FirstView</th>\n                            <th colspan="2">RepeatView</th>\n                        </tr>\n                        <tr>\n                            <th v-repeat="labels.responseTime.average">{{$value}}</th>\n                            <th v-repeat="labels.responseTime.average">{{$value}}</th>\n                        </tr>\n                    </thead>\n                    <tbody id="averageTable">\n                        <tr v-repeat="tests" >\n                            <td>{{info.completed | convertToDate }}</td>\n                            <td><a v-attr="href: response.data.summary">{{info.id}}</a></td>\n                            <td v-repeat="labels.responseTime.average">{{response.data.average.firstView[$key] | ms}}</td>\n                            <td v-repeat="labels.responseTime.average">{{response.data.average.repeatView[$key] | ms}}</td>\n                        </tr>\n                    </tbody>\n                </table>\n\n                <h4>Median</h4>\n                <table class="table table-striped table-bordered">\n                    <thead>\n                        <tr>\n                            <th rowspan="2">Date</th>\n                            <th rowspan="2">ID</th>\n                            <th colspan="6">FirstView</th>\n                            <th colspan="6">RepeatView</th>\n                        </tr>\n                        <tr>\n                            <th v-repeat="labels.responseTime.median">{{$value}}</th>\n                            <th v-repeat="labels.responseTime.median">{{$value}}</th>\n                        </tr>\n                    </thead>\n                    <tbody id="medianTable">\n                        <tr v-repeat="tests">\n                            <td>{{info.completed | convertToDate}}</td>\n                            <td><a v-attr="href: response.data.summary">{{info.id}}</a></td>\n                            <td v-repeat="labels.responseTime.median">{{response.data.median.firstView[$key] | ms}}</td>\n                            <td v-repeat="labels.responseTime.median">{{response.data.median.repeatView[$key] | ms}}</td>\n                        </tr>\n                    </tbody>\n                </table>\n\n\n                <h2 id="contentsSize" >Contents Size</h2>\n                <h3>FirstView</h3>\n                <div id="firstContentsSize" class="graphs"></div>\n\n                <h3>RepeatView</h3>\n                <div id="repeatContentsSize" class="graphs"></div>\n\n                <h3>Detail</h3>\n                <table class="table table-striped table-bordered">\n                    <thead>\n                        <tr>\n                            <th rowspan="2">Date</th>\n                            <th rowspan="2">ID</th>\n                            <th colspan="8">FirstView</th>\n                            <th colspan="8">RepeatView</th>\n                        </tr>\n                        <tr>\n                            <th>Total</th>\n                            <th v-repeat="labels.contents">{{$value}}</th>\n                            <th>Total</th>\n                            <th v-repeat="labels.contents">{{$value}}</th>\n                        </tr>\n                    </thead>\n                    <tbody id="contentsSizeTable">\n                        <tr v-repeat="tests" >\n                            <td>{{info.completed | convertToDate}}</td>\n                            <td><a v-attr="href: response.data.summary">{{info.id}}</a></td>\n                            <td>{{response.data.median.firstView.breakdown | totalBytes | KB}}</td>\n                            <td v-repeat="labels.contents" >{{response.data.median.firstView.breakdown[$key].bytes | KB}}</td>\n                            <td>{{response.data.median.repeatView.breakdown | totalBytes | KB}}</td>\n                            <td v-repeat="labels.contents" >{{response.data.median.repeatView.breakdown[$key].bytes | KB}}</td>\n                         </tr>\n                    </tbody>\n                </table>\n\n                <h2 id="contentsRequests" >Contents Requests</h2>\n                <h3>FirstView</h3>\n                <div id="firstContentsRequests" class="graphs"></div>\n\n                <h3>RepeatView</h3>\n                <div id="repeatContentsRequests" class="graphs"></div>\n\n                <h3>Detail</h3>\n                <table class="table table-striped table-bordered">\n                    <thead>\n                        <tr>\n                            <th rowspan="2">Date</th>\n                            <th rowspan="2">ID</th>\n                            <th colspan="8">FirstView</th>\n                            <th colspan="8">RepeatView</th>\n                        </tr>\n                        <tr>\n                            <th>Total</th>\n                            <th v-repeat="labels.contents">{{$value}}</th>\n                            <th>Total</th>\n                            <th v-repeat="labels.contents">{{$value}}</th>\n                        </tr>\n                    </thead>\n                    <tbody id="contentsRequestsTable">\n                        <tr v-repeat="tests" >\n                            <td>{{info.completed | convertToDate}}</td>\n                            <td><a v-attr="href: response.data.summary">{{info.id}}</a></td>\n                            <td>{{response.data.median.firstView.breakdown | totalRequests }}</td>\n                            <td v-repeat="labels.contents" >{{response.data.median.firstView.breakdown[$key].requests }}</td>\n                            <td>{{response.data.median.repeatView.breakdown | totalRequests }}</td>\n                            <td v-repeat="labels.contents" >{{response.data.median.repeatView.breakdown[$key].requests }}</td>\n                         </tr>\n                    </tbody>\n                </table>\n\n            </div>\n        </div>\n    </div>\n\n    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>\n    <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>\n    <script src="//cdn.oesmith.co.uk/morris-0.5.1.min.js"></script>\n    <script src=\'build/build.js\'></script>\n    <script>\n        require(\'grunt-wpt-page\')\n    </script>\n</body>\n</html>';
 });
 require.alias("moment-moment/moment.js", "grunt-wpt-page/deps/moment/moment.js");
 require.alias("moment-moment/moment.js", "grunt-wpt-page/deps/moment/index.js");
@@ -28000,4 +30656,16 @@ require.alias("components-bootstrap/js/bootstrap.js", "components-bootstrap/inde
 require.alias("lodash-lodash/dist/lodash.compat.js", "grunt-wpt-page/deps/lodash/dist/lodash.compat.js");
 require.alias("lodash-lodash/dist/lodash.compat.js", "grunt-wpt-page/deps/lodash/index.js");
 require.alias("lodash-lodash/dist/lodash.compat.js", "lodash/index.js");
-require.alias("lodash-lodash/dist/lodash.compat.js", "lodash-lodash/index.js");
\ No newline at end of file
+require.alias("lodash-lodash/dist/lodash.compat.js", "lodash-lodash/index.js");
+require.alias("visionmedia-superagent/lib/client.js", "grunt-wpt-page/deps/superagent/lib/client.js");
+require.alias("visionmedia-superagent/lib/client.js", "grunt-wpt-page/deps/superagent/index.js");
+require.alias("visionmedia-superagent/lib/client.js", "superagent/index.js");
+require.alias("component-emitter/index.js", "visionmedia-superagent/deps/emitter/index.js");
+
+require.alias("component-reduce/index.js", "visionmedia-superagent/deps/reduce/index.js");
+
+require.alias("visionmedia-superagent/lib/client.js", "visionmedia-superagent/index.js");
+require.alias("microjs-q/q.js", "grunt-wpt-page/deps/q/q.js");
+require.alias("microjs-q/q.js", "grunt-wpt-page/deps/q/index.js");
+require.alias("microjs-q/q.js", "q/index.js");
+require.alias("microjs-q/q.js", "microjs-q/index.js");
\ No newline at end of file
diff --git a/component.json b/component.json
index b7494c8..7993e65 100644
--- a/component.json
+++ b/component.json
@@ -8,7 +8,9 @@
     "yyx990803/vue": "*",
     "components/jquery": "*",
     "components/bootstrap": "*",
-    "lodash/lodash": "*"
+    "lodash/lodash": "*",
+    "visionmedia/superagent": "*",
+    "microjs/q": "*"
   },
   "development": {},
   "license": "MIT",
diff --git a/grunt-wpt-page.css b/grunt-wpt-page.css
index 2514f45..04f3a96 100644
--- a/grunt-wpt-page.css
+++ b/grunt-wpt-page.css
@@ -1,3 +1,21 @@
-.sidebar .affix select{
-	width: 68%;
-}
\ No newline at end of file
+
+body {
+  position: relative;
+}
+.sidebar .affix{
+	position: static;
+}
+@media (min-width: 992px) {
+	.sidebar .affix{
+		width: 132px;
+		position: fixed;
+	}
+}
+
+@media (min-width: 1200px) {
+	.sidebar .affix{
+		width: 165px;
+		position: fixed;
+	}
+}
+
diff --git a/index.html b/index.html
index b99e808..2d6a76a 100644
--- a/index.html
+++ b/index.html
@@ -4,189 +4,188 @@
     <link rel='stylesheet' href='//cdn.oesmith.co.uk/morris-0.4.3.min.css'>
     <link rel='stylesheet' href='build/build.css'>
 
-	<title>Grunt WebPageTest</title>
+    <title>Grunt WebPageTest</title>
 </head>
-<body>
-
-	<div class="container">
-		<nav class="navbar navbar-default" role="navigation">
-		    <!-- Brand and toggle get grouped for better mobile display -->
-		    <div class="navbar-header">
-		        <a class="navbar-brand" href="#">Grunt WebPageTest</a>
-		    </div>
-		</nav>
-	</div>
-
-	<div id="app" class="container">
-		<div class="row">
-			<div class="col-md-2 sidebar" >
-				<div data-spy="affix" data-offset-top="60">
-			  		<h2>Location</h2>
-					<select id="locations" class="form-control" v-model="location" >
-						<option v-repeat="locations" value="{{$key}}" >{{$value}}</option>
-					</select>
-			  		<h2>URL</h2>
-					<select id="urls" class="form-control" v-model="url" v-on="change: renderGraph" >
-						<option v-repeat="urls" value="{{$key}}" >{{$key}}</option>
-					</select>
-
-					<ul class="nav nav-pills nav-stacked">
-					  <li>
-					  	<a href="#responseTime">Response Time</a>
-					  	<a href="#contentsSize">Contents Size</a>
-					  	<a href="#contentsRequests">Contents Requests</a>
-					  </li>
-					</ul>
-				</div>
-			</div>
-			<div class="col-md-10">
-
-				<h2 id="responseTime" >Response Time</h2>
-				<h3>FirstView</h3>
-				<h4>Average</h4>
-				<div id="firstAverage" class="graphs"></div>
-
-				<h4>Median</h4>
-				<div id="firstMedian" class="graphs"></div>
-
-				<h3>RepeatView</h3>
-				<h4>Average</h4>
-				<div id="repeatAverage" class="graphs"></div>
-
-				<h4>Median</h4>
-				<div id="repeatMedian" class="graphs"></div>
-
-				<h3>Detail</h3>
-				<h4>Average</h4>
-				<table class="table table-striped table-bordered">
-					<thead>
-						<tr>
-							<th rowspan="2">Date</th>
-							<th rowspan="2">ID</th>
-							<th colspan="2">FirstView</th>
-							<th colspan="2">RepeatView</th>
-						</tr>
-						<tr>
-							<th v-repeat="labels.responseTime.average">{{$value}}</th>
-							<th v-repeat="labels.responseTime.average">{{$value}}</th>
-						</tr>
-					</thead>
-					<tbody id="averageTable">
-						<tr v-repeat="tests" >
-							<td>{{info.completed | convertToDate }}</td>
-							<td><a v-attr="href: response.data.summary">{{info.id}}</a></td>
-							<td v-repeat="labels.responseTime.average">{{response.data.average.firstView[$key] | ms}}</td>
-							<td v-repeat="labels.responseTime.average">{{response.data.average.repeatView[$key] | ms}}</td>
-						</tr>
-					</tbody>
-				</table>
-
-				<h4>Median</h4>
-				<table class="table table-striped table-bordered">
-					<thead>
-						<tr>
-							<th rowspan="2">Date</th>
-							<th rowspan="2">ID</th>
-							<th colspan="6">FirstView</th>
-							<th colspan="6">RepeatView</th>
-						</tr>
-						<tr>
-
-							<th v-repeat="labels.responseTime.median">{{$value}}</th>
-							<th v-repeat="labels.responseTime.median">{{$value}}</th>
-						</tr>
-					</thead>
-					<tbody id="medianTable">
-						<tr v-repeat="tests">
-							<td>{{info.completed | convertToDate}}</td>
-							<td><a v-attr="href: response.data.summary">{{info.id}}</a></td>
-							<td v-repeat="labels.responseTime.median">{{response.data.median.firstView[$key] | ms}}</td>
-							<td v-repeat="labels.responseTime.median">{{response.data.median.repeatView[$key] | ms}}</td>
-						</tr>
-					</tbody>
-				</table>
-
-
-				<h2 id="contentsSize" >Contents Size</h2>
-				<h3>FirstView</h3>
-				<div id="firstContentsSize" class="graphs"></div>
-
-				<h3>RepeatView</h3>
-				<div id="repeatContentsSize" class="graphs"></div>
-
-				<h3>Detail</h3>
-				<table class="table table-striped table-bordered">
-					<thead>
-						<tr>
-							<th rowspan="2">Date</th>
-							<th rowspan="2">ID</th>
-							<th colspan="8">FirstView</th>
-							<th colspan="8">RepeatView</th>
-						</tr>
-						<tr>
-							<th>Total</th>
-							<th v-repeat="labels.contents">{{$value}}</th>
-							<th>Total</th>
-							<th v-repeat="labels.contents">{{$value}}</th>
-						</tr>
-					</thead>
-					<tbody id="contentsSizeTable">
-						<tr v-repeat="tests" >
-							<td>{{info.completed | convertToDate}}</td>
-							<td><a v-attr="href: response.data.summary">{{info.id}}</a></td>
-							<td>{{response.data.median.firstView.breakdown | totalBytes | KB}}</td>
-							<td v-repeat="labels.contents" >{{response.data.median.firstView.breakdown[$key].bytes | KB}}</td>
-							<td>{{response.data.median.repeatView.breakdown | totalBytes | KB}}</td>
-							<td v-repeat="labels.contents" >{{response.data.median.repeatView.breakdown[$key].bytes | KB}}</td>
-	 					</tr>
-					</tbody>
-				</table>
-
-				<h2 id="contentsRequests" >Contents Requests</h2>
-				<h3>FirstView</h3>
-				<div id="firstContentsRequests" class="graphs"></div>
-
-				<h3>RepeatView</h3>
-				<div id="repeatContentsRequests" class="graphs"></div>
-
-				<h3>Detail</h3>
-				<table class="table table-striped table-bordered">
-					<thead>
-						<tr>
-							<th rowspan="2">Date</th>
-							<th rowspan="2">ID</th>
-							<th colspan="8">FirstView</th>
-							<th colspan="8">RepeatView</th>
-						</tr>
-						<tr>
-							<th>Total</th>
-							<th v-repeat="labels.contents">{{$value}}</th>
-							<th>Total</th>
-							<th v-repeat="labels.contents">{{$value}}</th>
-						</tr>
-					</thead>
-					<tbody id="contentsRequestsTable">
-						<tr v-repeat="tests" >
-							<td>{{info.completed | convertToDate}}</td>
-							<td><a v-attr="href: response.data.summary">{{info.id}}</a></td>
-							<td>{{response.data.median.firstView.breakdown | totalRequests }}</td>
-							<td v-repeat="labels.contents" >{{response.data.median.firstView.breakdown[$key].requests }}</td>
-							<td>{{response.data.median.repeatView.breakdown | totalRequests }}</td>
-							<td v-repeat="labels.contents" >{{response.data.median.repeatView.breakdown[$key].requests }}</td>
-	 					</tr>
-					</tbody>
-				</table>
-
-			</div>
-		</div>
-	</div>
+<body data-spy="scroll" data-target=".nav-graph">
+
+    <div class="container">
+        <nav class="navbar navbar-default" role="navigation">
+            <!-- Brand and toggle get grouped for better mobile display -->
+            <div class="navbar-header">
+                <a class="navbar-brand" href="#">Grunt WebPageTest</a>
+            </div>
+        </nav>
+    </div>
+
+    <div id="app" class="container">
+        <div class="row">
+            <div class="col-md-2 sidebar" >
+                <div data-spy="affix" data-offset-top="60" class="nav-graph">
+                    <h2>Location</h2>
+                    <select id="locations" class="form-control" v-model="location" >
+                        <option v-repeat="locations" value="{{$key}}" >{{$value}}</option>
+                    </select>
+
+                    <h2>URL</h2>
+                    <select id="urls" class="form-control" v-model="url" >
+                        <option v-repeat="urls" value="{{$key}}" >{{$key}}</option>
+                    </select>
+
+                    <h2>Results</h2>
+                    <ul class="nav nav-pills nav-stacked">
+                        <li><a href="#responseTime">Response Time</a></li>
+                        <li><a href="#contentsSize">Contents Size</a></li>
+                        <li><a href="#contentsRequests">Contents Requests</a></li>
+                    </ul>
+                </div>
+            </div>
+            <div class="col-md-10">
+
+                <h2 id="responseTime" >Response Time</h2>
+                <h3>FirstView</h3>
+                <h4>Average</h4>
+                <div id="firstAverage" class="graphs"></div>
+
+                <h4>Median</h4>
+                <div id="firstMedian" class="graphs"></div>
+
+                <h3>RepeatView</h3>
+                <h4>Average</h4>
+                <div id="repeatAverage" class="graphs"></div>
+
+                <h4>Median</h4>
+                <div id="repeatMedian" class="graphs"></div>
+
+                <h3>Detail</h3>
+                <h4>Average</h4>
+                <table class="table table-striped table-bordered">
+                    <thead>
+                        <tr>
+                            <th rowspan="2">Date</th>
+                            <th rowspan="2">ID</th>
+                            <th colspan="2">FirstView</th>
+                            <th colspan="2">RepeatView</th>
+                        </tr>
+                        <tr>
+                            <th v-repeat="labels.responseTime.average">{{$value}}</th>
+                            <th v-repeat="labels.responseTime.average">{{$value}}</th>
+                        </tr>
+                    </thead>
+                    <tbody id="averageTable">
+                        <tr v-repeat="tests" >
+                            <td>{{info.completed | convertToDate }}</td>
+                            <td><a v-attr="href: response.data.summary">{{info.id}}</a></td>
+                            <td v-repeat="labels.responseTime.average">{{response.data.average.firstView[$key] | ms}}</td>
+                            <td v-repeat="labels.responseTime.average">{{response.data.average.repeatView[$key] | ms}}</td>
+                        </tr>
+                    </tbody>
+                </table>
+
+                <h4>Median</h4>
+                <table class="table table-striped table-bordered">
+                    <thead>
+                        <tr>
+                            <th rowspan="2">Date</th>
+                            <th rowspan="2">ID</th>
+                            <th colspan="6">FirstView</th>
+                            <th colspan="6">RepeatView</th>
+                        </tr>
+                        <tr>
+                            <th v-repeat="labels.responseTime.median">{{$value}}</th>
+                            <th v-repeat="labels.responseTime.median">{{$value}}</th>
+                        </tr>
+                    </thead>
+                    <tbody id="medianTable">
+                        <tr v-repeat="tests">
+                            <td>{{info.completed | convertToDate}}</td>
+                            <td><a v-attr="href: response.data.summary">{{info.id}}</a></td>
+                            <td v-repeat="labels.responseTime.median">{{response.data.median.firstView[$key] | ms}}</td>
+                            <td v-repeat="labels.responseTime.median">{{response.data.median.repeatView[$key] | ms}}</td>
+                        </tr>
+                    </tbody>
+                </table>
+
+
+                <h2 id="contentsSize" >Contents Size</h2>
+                <h3>FirstView</h3>
+                <div id="firstContentsSize" class="graphs"></div>
+
+                <h3>RepeatView</h3>
+                <div id="repeatContentsSize" class="graphs"></div>
+
+                <h3>Detail</h3>
+                <table class="table table-striped table-bordered">
+                    <thead>
+                        <tr>
+                            <th rowspan="2">Date</th>
+                            <th rowspan="2">ID</th>
+                            <th colspan="8">FirstView</th>
+                            <th colspan="8">RepeatView</th>
+                        </tr>
+                        <tr>
+                            <th>Total</th>
+                            <th v-repeat="labels.contents">{{$value}}</th>
+                            <th>Total</th>
+                            <th v-repeat="labels.contents">{{$value}}</th>
+                        </tr>
+                    </thead>
+                    <tbody id="contentsSizeTable">
+                        <tr v-repeat="tests" >
+                            <td>{{info.completed | convertToDate}}</td>
+                            <td><a v-attr="href: response.data.summary">{{info.id}}</a></td>
+                            <td>{{response.data.median.firstView.breakdown | totalBytes | KB}}</td>
+                            <td v-repeat="labels.contents" >{{response.data.median.firstView.breakdown[$key].bytes | KB}}</td>
+                            <td>{{response.data.median.repeatView.breakdown | totalBytes | KB}}</td>
+                            <td v-repeat="labels.contents" >{{response.data.median.repeatView.breakdown[$key].bytes | KB}}</td>
+                         </tr>
+                    </tbody>
+                </table>
+
+                <h2 id="contentsRequests" >Contents Requests</h2>
+                <h3>FirstView</h3>
+                <div id="firstContentsRequests" class="graphs"></div>
+
+                <h3>RepeatView</h3>
+                <div id="repeatContentsRequests" class="graphs"></div>
+
+                <h3>Detail</h3>
+                <table class="table table-striped table-bordered">
+                    <thead>
+                        <tr>
+                            <th rowspan="2">Date</th>
+                            <th rowspan="2">ID</th>
+                            <th colspan="8">FirstView</th>
+                            <th colspan="8">RepeatView</th>
+                        </tr>
+                        <tr>
+                            <th>Total</th>
+                            <th v-repeat="labels.contents">{{$value}}</th>
+                            <th>Total</th>
+                            <th v-repeat="labels.contents">{{$value}}</th>
+                        </tr>
+                    </thead>
+                    <tbody id="contentsRequestsTable">
+                        <tr v-repeat="tests" >
+                            <td>{{info.completed | convertToDate}}</td>
+                            <td><a v-attr="href: response.data.summary">{{info.id}}</a></td>
+                            <td>{{response.data.median.firstView.breakdown | totalRequests }}</td>
+                            <td v-repeat="labels.contents" >{{response.data.median.firstView.breakdown[$key].requests }}</td>
+                            <td>{{response.data.median.repeatView.breakdown | totalRequests }}</td>
+                            <td v-repeat="labels.contents" >{{response.data.median.repeatView.breakdown[$key].requests }}</td>
+                         </tr>
+                    </tbody>
+                </table>
+
+            </div>
+        </div>
+    </div>
 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
     <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
     <script src="//cdn.oesmith.co.uk/morris-0.5.1.min.js"></script>
-	<script src='build/build.js'></script>
-	<script>
-		require('grunt-wpt-page')
-	</script>
+    <script src='build/build.js'></script>
+    <script>
+        require('grunt-wpt-page')
+    </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/index.js b/index.js
index 95b0409..63f1722 100644
--- a/index.js
+++ b/index.js
@@ -5,8 +5,10 @@
 
     var $ = require('jquery'),
         _ = require('lodash'),
+        request = require('superagent'),
         moment = require('moment'),
         bootstrap = require('components-bootstrap'),
+        Q = require('q'),
         Vue = require('vue'),
         renderMorris = function(data){
             $("#"+data.element).html('');
@@ -20,179 +22,170 @@
             });
         };
 
-    $.when(
-        $.ajax({
-            url: 'tests/results.json',
-            dataType: 'json'
-        }),
-        $.ajax({
-            url: 'tests/locations.json',
-            dataType: 'json'
-        })
-    ).done(function(resultsAjax, locationsAjax){
-        var results = resultsAjax[0],
-            locations = locationsAjax[0];
-
-        new Vue({
-            el: '#app',
-            data: {
-                results: results,
-                locations: locations,
-                tests: {},
-                labels: {
-                    responseTime: {
-                        median: {
-                            domContentLoadedEventStart: 'DOM Content Ready Start',
-                            domContentLoadedEventEnd: 'DOM Content Ready End',
-                            loadTime: 'Document Complete',
-                            loadEventStart: 'Load Event Start',
-                            loadEventEnd: 'Load Event End',
-                            fullyLoaded: 'Fully Loaded'
-                        },
-                        average: {
-                            loadTime: 'Document Complete',
-                            fullyLoaded: 'Fully Loaded'
-                        }
+    var app = new Vue({
+        el: '#app',
+        data: {
+            results: {},
+            locations: {},
+            tests: {},
+            labels: {
+                responseTime: {
+                    median: {
+                        domContentLoadedEventStart: 'DOM Content Ready Start',
+                        domContentLoadedEventEnd: 'DOM Content Ready End',
+                        loadTime: 'Document Complete',
+                        loadEventStart: 'Load Event Start',
+                        loadEventEnd: 'Load Event End',
+                        fullyLoaded: 'Fully Loaded'
                     },
-                    contents: {
-                        'html': 'HTML',
-                        'css': 'CSS',
-                        'image': 'Image',
-                        'flash': 'Flash',
-                        'js': 'JavaScript',
-                        'font': 'Font',
-                        'other': 'Other'
+                    average: {
+                        loadTime: 'Document Complete',
+                        fullyLoaded: 'Fully Loaded'
                     }
-                }
-            },
-            ready: function(){
-                this.location = _.chain(this.locations).keys().first().value();
-                this.url = _.chain(this.urls).keys().first().value();
-                this.renderGraph();
-            },
-            computed: {
-                urls: function(){
-                    return this.results[this.location]||{};
                 },
-                testIds: function(){
-                    return this.urls[this.url];
+                contents: {
+                    'html': 'HTML',
+                    'css': 'CSS',
+                    'image': 'Image',
+                    'flash': 'Flash',
+                    'js': 'JavaScript',
+                    'font': 'Font',
+                    'other': 'Other'
                 }
+            }
+        },
+        created: function(){
+            var that = this;
+
+            this.$watch('url', function(){
+                that.renderGraph();
+            });
+
+            request.get('tests/results.json', function(res){
+                that.results = res.body;
+            });
+
+            request.get('tests/locations.json', function(res){
+                that.locations = res.body;
+                that.location = _.chain(that.locations).keys().first().value();
+                that.url = _.chain(that.urls).keys().first().value();
+            });
+
+        },
+        computed: {
+            urls: function(){
+                return this.results[this.location]||{};
             },
-            filters: {
-                convertToDate: function(time){
-                    return moment(time*1000).format('LLL');
-                },
-                totalBytes: function(data){
-                    var total = _.reduce(data, function(memo, val, key){
-                        return memo + (val.bytes||0);
-                    }, 0);
+            testIds: function(){
+                return this.urls[this.url];
+            }
+        },
+        filters: {
+            convertToDate: function(time){
+                return moment(time*1000).format('LLL');
+            },
+            totalBytes: function(data){
+                var total = _.reduce(data, function(memo, val, key){
+                    return memo + (val.bytes||0);
+                }, 0);
 
-                    return total;
-                },
-                totalRequests: function(data){
-                    var total = _.reduce(data, function(memo, val, key){
-                        return memo + (val.requests||0);
-                    }, 0);
+                return total;
+            },
+            totalRequests: function(data){
+                var total = _.reduce(data, function(memo, val, key){
+                    return memo + (val.requests||0);
+                }, 0);
 
-                    return total;
-                },
-                ms: function(num){
-                    return String(num).replace(/(\d{1,3})(?=(?:\d{3})+$)/g,"$1,")+' ms';
-                },
-                KB: function(num){
-                    return String((num / 1000).toFixed(1)).replace(/(\d{1,3})(?=(?:\d{3})+$)/g,"$1,")+' KB';
-                }
+                return total;
             },
-            methods: {
-                renderGraph: function(){
-                    var dummy = new $.Deferred(),
-                        requests = [dummy],
-                        that = this;
-
-                    dummy.resolve([]);
-
-                    _(this.testIds).each(function(testId){
-                        requests.push($.ajax({
-                            url: 'tests/'+testId+'.json',
-                            dataType: 'json',
-                            cache: true
-                        }));
-                    });
+            ms: function(num){
+                return String(num).replace(/(\d{1,3})(?=(?:\d{3})+$)/g,"$1,")+' ms';
+            },
+            KB: function(num){
+                return String((num / 1000).toFixed(1)).replace(/(\d{1,3})(?=(?:\d{3})+$)/g,"$1,")+' KB';
+            }
+        },
+        methods: {
+            renderGraph: function(){
+                var requests = [],
+                    that = this;
 
-                    $.when.apply( $, requests ).done(function(){
-                        var tests = _.map(arguments, function(arr){
-                            return arr[0];
-                        });
-                        
-                        // Remove dummy deferred object
-                        tests.shift();
-
-                        that.$set('tests', tests);
-
-                        that.renderResponseTimeGraph( tests, 'average', 'first' );
-                        that.renderResponseTimeGraph( tests, 'median', 'first' );
-                        that.renderResponseTimeGraph( tests, 'average', 'repeat' );
-                        that.renderResponseTimeGraph( tests, 'median', 'repeat' );
-                        that.renderContentsSizeGraph( tests, 'first' );
-                        that.renderContentsSizeGraph( tests, 'repeat' );
-                        that.renderContentsRequestsGraph( tests, 'first' );
-                        that.renderContentsRequestsGraph( tests, 'repeat' );
-                    });
+                _(this.testIds).each(function(testId){
+                    var dfd = Q.defer();
 
-                },
-                renderResponseTimeGraph: function(tests, type, view){
-                    renderMorris({
-                        data: _.map(tests, function(test){
-                            var obj = test.response.data[type][view+'View'] || {};
-                            obj.date = new Date( test.info.completed*1000 ).getTime();
-                            return obj;
-                        }),
-                        keys: _(this.labels.responseTime[type]).keys().value(),
-                        labels: _(this.labels.responseTime[type]).values().value(),
-                        element: $.camelCase( view + '-' + type)
+                    request.get('tests/'+testId+'.json', function(res){
+                        dfd.resolve(res.body);
                     });
-                },
-                renderContentsSizeGraph: function(tests, view){
-                    renderMorris({
-                          data: _.map(tests, function(test){
-                            var obj = {};
-                            var tmp = 0;
-                            _.each(test.response.data.median[view+'View'].breakdown, function(val, key){
-                                obj[key] = ( val.bytes / 1000).toFixed(1);
-                                tmp += Number(obj[key]);
-                            });
-                            obj.total = _.reduce(obj, function(memo, val, key){
-                                return memo + Number(val||0);
-                            }, 0).toFixed(1);
-                            obj.date = new Date( test.info.completed*1000 ).getTime();
-                            return obj;
-                        }),
-                        keys: _(this.labels.contents).keys().value().concat(['total']),
-                        labels: _(this.labels.contents).values().value().concat(['Total']),
-                        element: view + 'ContentsSize'
-                    });
-                },
-                renderContentsRequestsGraph: function(tests, view){
-                    renderMorris({
-                          data: _.map(tests, function(test){
-                            var obj = {};
-                            var tmp = 0;
-                            _.each(test.response.data.median[view+'View'].breakdown, function(val, key){
-                                obj[key] = Number(val.requests);
-                            });
-                            obj.total = _.reduce(obj, function(memo, val, key){
-                                return memo + Number(val||0);
-                            }, 0);
-                            obj.date = new Date( test.info.completed*1000 ).getTime();
-                            return obj;
-                        }),
-                        keys: _(this.labels.contents).keys().value().concat(['total']),
-                        labels: _(this.labels.contents).values().value().concat(['Total']),
-                        element: view + 'ContentsRequests'
-                    });
-                }
+                    requests.push(dfd.promise);
+                });
+
+                Q.all(requests).then(function(tests){
+
+                    that.$set('tests', tests);
+
+                    that.renderResponseTimeGraph( tests, 'average', 'first' );
+                    that.renderResponseTimeGraph( tests, 'median', 'first' );
+                    that.renderResponseTimeGraph( tests, 'average', 'repeat' );
+                    that.renderResponseTimeGraph( tests, 'median', 'repeat' );
+                    that.renderContentsSizeGraph( tests, 'first' );
+                    that.renderContentsSizeGraph( tests, 'repeat' );
+                    that.renderContentsRequestsGraph( tests, 'first' );
+                    that.renderContentsRequestsGraph( tests, 'repeat' );
+                });
+
+            },
+            renderResponseTimeGraph: function(tests, type, view){
+                renderMorris({
+                    data: _.map(tests, function(test){
+                        var obj = test.response.data[type][view+'View'] || {};
+                        obj.date = new Date( test.info.completed*1000 ).getTime();
+                        return obj;
+                    }),
+                    keys: _(this.labels.responseTime[type]).keys().value(),
+                    labels: _(this.labels.responseTime[type]).values().value(),
+                    element: $.camelCase( view + '-' + type)
+                });
+            },
+            renderContentsSizeGraph: function(tests, view){
+                renderMorris({
+                      data: _.map(tests, function(test){
+                        var obj = {};
+                        var tmp = 0;
+                        _.each(test.response.data.median[view+'View'].breakdown, function(val, key){
+                            obj[key] = ( val.bytes / 1000).toFixed(1);
+                            tmp += Number(obj[key]);
+                        });
+                        obj.total = _.reduce(obj, function(memo, val, key){
+                            return memo + Number(val||0);
+                        }, 0).toFixed(1);
+                        obj.date = new Date( test.info.completed*1000 ).getTime();
+                        return obj;
+                    }),
+                    keys: _(this.labels.contents).keys().value().concat(['total']),
+                    labels: _(this.labels.contents).values().value().concat(['Total']),
+                    element: view + 'ContentsSize'
+                });
+            },
+            renderContentsRequestsGraph: function(tests, view){
+                renderMorris({
+                      data: _.map(tests, function(test){
+                        var obj = {};
+                        var tmp = 0;
+                        _.each(test.response.data.median[view+'View'].breakdown, function(val, key){
+                            obj[key] = Number(val.requests);
+                        });
+                        obj.total = _.reduce(obj, function(memo, val, key){
+                            return memo + Number(val||0);
+                        }, 0);
+                        obj.date = new Date( test.info.completed*1000 ).getTime();
+                        return obj;
+                    }),
+                    keys: _(this.labels.contents).keys().value().concat(['total']),
+                    labels: _(this.labels.contents).values().value().concat(['Total']),
+                    element: view + 'ContentsRequests'
+                });
             }
-        });
+        }
     });
 
 })(Morris);
\ No newline at end of file
diff --git a/tests/locations.json b/tests/locations.json
index 9e26dfe..0967ef4 100644
--- a/tests/locations.json
+++ b/tests/locations.json
@@ -1 +1 @@
-{}
\ No newline at end of file
+{}
diff --git a/tests/results.json b/tests/results.json
index 9e26dfe..0967ef4 100644
--- a/tests/results.json
+++ b/tests/results.json
@@ -1 +1 @@
-{}
\ No newline at end of file
+{}