diff --git a/static/scripts/excanvas.js b/static/scripts/excanvas.js
new file mode 100644
index 00000000000..2dbaef4d17c
--- /dev/null
+++ b/static/scripts/excanvas.js
@@ -0,0 +1,770 @@
+// Copyright 2006 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.
+
+
+// Known Issues: (From VML version)
+//
+// * Patterns are not implemented.
+// * Radial gradient are not implemented. The VML version of these look very
+// different from the canvas one.
+// * Clipping paths are not implemented.
+// * Coordsize. The width and height attribute have higher priority than the
+// width and height style values which isn't correct.
+// * Painting mode isn't implemented.
+// * Canvas width/height should is using content-box by default. IE in
+// Quirks mode will draw the canvas using border-box. Either change your
+// doctype to HTML5
+// (http://www.whatwg.org/specs/web-apps/current-work/#the-doctype)
+// or use Box Sizing Behavior from WebFX
+// (http://webfx.eae.net/dhtml/boxsizing/boxsizing.html)
+// * Optimize. There is always room for speed improvements.
+
+//Known Issues: Silverlight version
+//
+// * Doing a transformation during a path (ie lineTo, transform, lineTo) will
+// not work corerctly because the transform is done to the whole path (ie
+// transform, lineTo, lineTo)
+// * Patterns are not yet implemented.
+
+
+// only add this code if we do not already have a canvas implementation
+if (!window.CanvasRenderingContext2D) {
+
+(function () {
+
+ var xamlId;
+
+ var G_vmlCanvasManager_ = {
+ init: function (opt_doc) {
+ var doc = opt_doc || document;
+ // Create a dummy element so that IE will allow canvas elements to be
+ // recognized.
+ doc.createElement('canvas');
+ if (/MSIE/.test(navigator.userAgent) && !window.opera) {
+ var self = this;
+
+ createXamlScriptTag();
+
+ doc.attachEvent('onreadystatechange', function () {
+ self.init_(doc);
+ });
+ }
+ },
+
+ init_: function (doc) {
+ // setup default css
+ var ss = doc.createStyleSheet();
+ ss.cssText = 'canvas{display:inline-block;overflow:hidden;' +
+ // default size is 300x150 in Gecko and Opera
+ 'text-align:left;width:300px;height:150px}' +
+ 'canvas object{width:100%;height:100%;border:0;' +
+ 'background:transparen;margin:0}';
+
+ // find all canvas elements
+ var els = doc.getElementsByTagName('canvas');
+ for (var i = 0; i < els.length; i++) {
+ if (!els[i].getContext) {
+ this.initElement(els[i]);
+ }
+ }
+ },
+
+
+ /**
+ * Public initializes a canvas element so that it can be used as canvas
+ * element from now on. This is called automatically before the page is
+ * loaded but if you are creating elements using createElement you need to
+ * make sure this is called on the element.
+ * @param {HTMLElement} el The canvas element to initialize.
+ * @return {HTMLElement} the element that was created.
+ */
+ initElement: function (el) {
+ el.getContext = function () {
+ if (this.context_) {
+ return this.context_;
+ }
+ return this.context_ = new CanvasRenderingContext2D_(this);
+ };
+
+ var attrs = el.attributes;
+ if (attrs.width && attrs.width.specified) {
+ // TODO: use runtimeStyle and coordsize
+ // el.getContext().setWidth_(attrs.width.nodeValue);
+ el.style.width = attrs.width.nodeValue + 'px';
+ } else {
+ el.width = el.clientWidth;
+ }
+ if (attrs.height && attrs.height.specified) {
+ // TODO: use runtimeStyle and coordsize
+ // el.getContext().setHeight_(attrs.height.nodeValue);
+ el.style.height = attrs.height.nodeValue + 'px';
+ } else {
+ el.height = el.clientHeight;
+ }
+
+ // insert object tag
+ el.innerHTML = getObjectHtml();
+
+ // do not use inline function because that will leak memory
+ el.attachEvent('onpropertychange', onPropertyChange);
+ return el;
+ }
+ };
+
+ function onPropertyChange(e) {
+ var el = e.srcElement;
+
+ switch (e.propertyName) {
+ case 'width':
+ el.style.width = el.attributes.width.nodeValue + 'px';
+ el.getContext().clearRect();
+ break;
+ case 'height':
+ el.style.height = el.attributes.height.nodeValue + 'px';
+ el.getContext().clearRect();
+ break;
+ }
+ }
+
+ G_vmlCanvasManager_.init();
+
+ function createXamlScriptTag() {
+ // This script tag contains the boilerplate XAML.
+ document.write('');
+ // Find the id of the writtenscript file.
+ var scripts = document.scripts;
+ var script = scripts[scripts.length - 1];
+ xamlId = script.uniqueID;
+ script.id = xamlId;
+ }
+
+ function getObjectHtml(fn) {
+ return '';
+ }
+
+ function hasSilverlight() {
+ try {
+ new ActiveXObject('AgControl.AgControl');
+ return true;
+ } catch(_) {
+ return false;
+ }
+ }
+
+ // precompute "00" to "FF"
+ var dec2hex = [];
+ for (var i = 0; i < 16; i++) {
+ for (var j = 0; j < 16; j++) {
+ dec2hex[i * 16 + j] = i.toString(16) + j.toString(16);
+ }
+ }
+
+ function createMatrixIdentity() {
+ return [
+ [1, 0, 0],
+ [0, 1, 0],
+ [0, 0, 1]
+ ];
+ }
+
+ function matrixMultiply(m1, m2) {
+ var result = createMatrixIdentity();
+
+ for (var x = 0; x < 3; x++) {
+ for (var y = 0; y < 3; y++) {
+ var sum = 0;
+
+ for (var z = 0; z < 3; z++) {
+ sum += m1[x][z] * m2[z][y];
+ }
+
+ result[x][y] = sum;
+ }
+ }
+ return result;
+ }
+
+ function doTransform(ctx) {
+ transformObject(ctx, getRoot(ctx), ctx.m_);
+ }
+
+ function transformObject(ctx, obj, m) {
+ var transform = obj.renderTransform;
+ var matrix;
+ if (!transform) {
+ transform = create(ctx, '');
+ matrix = create(ctx, '');
+ transform.matrix = matrix;
+ obj.renderTransform = transform;
+ } else {
+ matrix = transform.matrix;
+ }
+
+ matrix.m11 = m[0][0];
+ matrix.m12 = m[0][1];
+ matrix.m21 = m[1][0];
+ matrix.m22 = m[1][1];
+ matrix.offsetX = m[2][0];
+ matrix.offsetY = m[2][1];
+ }
+
+ function copyState(o1, o2) {
+ o2.fillStyle = o1.fillStyle;
+ o2.lineCap = o1.lineCap;
+ o2.lineJoin = o1.lineJoin;
+ o2.lineWidth = o1.lineWidth;
+ o2.miterLimit = o1.miterLimit;
+ o2.shadowBlur = o1.shadowBlur;
+ o2.shadowColor = o1.shadowColor;
+ o2.shadowOffsetX = o1.shadowOffsetX;
+ o2.shadowOffsetY = o1.shadowOffsetY;
+ o2.strokeStyle = o1.strokeStyle;
+ o2.globalAlpha = o1.globalAlpha;
+ o2.arcScaleX_ = o1.arcScaleX_;
+ o2.arcScaleY_ = o1.arcScaleY_;
+ }
+
+ function translateColor(s) {
+ var rgbaMatch = /rgba\(([^)]+)\)/gi.exec(s);
+ if (rgbaMatch) {
+ var parts = rgbaMatch[1].split(',');
+ return '#' + dec2hex[Math.floor(Number(parts[3]) * 255)] +
+ dec2hex[Number(parts[0])] +
+ dec2hex[Number(parts[1])] +
+ dec2hex[Number(parts[2])];
+ }
+
+ var rgbMatch = /rgb\(([^)]+)\)/gi.exec(s);
+ if (rgbMatch) {
+ var parts = rgbMatch[1].split(',');
+ return '#FF' + dec2hex[Number(parts[0])] +
+ dec2hex[Number(parts[1])] +
+ dec2hex[Number(parts[2])];
+ }
+
+ return s;
+ }
+
+ function processLineCap(lineCap) {
+ switch (lineCap) {
+ case 'butt':
+ return 'flat';
+ case 'round':
+ return 'round';
+ case 'square':
+ default:
+ return 'square';
+ }
+ }
+
+ function getRoot(ctx) {
+ return ctx.canvas.firstChild.content.findName('root');
+ }
+
+ function create(ctx, s, opt_args) {
+ if (opt_args) {
+ s = s.replace(/\%(\d+)/g, function(match, index) {
+ return opt_args[Number(index) - 1];
+ });
+ }
+
+ try {
+ return ctx.canvas.firstChild.content.createFromXaml(s);
+ } catch (ex) {
+ throw Error('Could not create XAML from: ' + s);
+ }
+ }
+
+ function drawShape(ctx, s, opt_args) {
+ var canvas = ctx.lastCanvas_ || create(ctx, '');
+ var shape = create(ctx, s, opt_args);
+ canvas.children.add(shape);
+ transformObject(ctx, canvas, ctx.m_);
+ if (!ctx.lastCanvas_) {
+ getRoot(ctx).children.add(canvas);
+ ctx.lastCanvas_ = canvas;
+ }
+ return shape;
+ }
+
+ function createBrushObject(ctx, value) {
+ if (value instanceof CanvasGradient_) {
+ return value.createBrush_(ctx);
+ } else if (value instanceof CanvasPattern_) {
+ throw Error('Not implemented');
+ } else {
+ return create(ctx, '',
+ [translateColor(value)]);
+ }
+ }
+
+ /**
+ * This class implements CanvasRenderingContext2D interface as described by
+ * the WHATWG.
+ * @param {HTMLElement} surfaceElement The element that the 2D context should
+ * be associated with
+ */
+ function CanvasRenderingContext2D_(surfaceElement) {
+ this.m_ = createMatrixIdentity();
+ this.lastCanvas_ = null;
+
+ this.mStack_ = [];
+ this.aStack_ = [];
+ this.currentPath_ = [];
+
+ // Canvas context properties
+ this.strokeStyle = '#000';
+ this.fillStyle = '#000';
+
+ this.lineWidth = 1;
+ this.lineJoin = 'miter';
+ this.lineCap = 'butt';
+ this.miterLimit = 10;
+ this.globalAlpha = 1;
+ this.canvas = surfaceElement;
+ };
+
+
+ var contextPrototype = CanvasRenderingContext2D_.prototype;
+
+ contextPrototype.clearRect = function() {
+ var root = getRoot(this);
+ root.children.clear();
+
+ // TODO: Implement
+ this.currentPath_ = [];
+ this.lastCanvas_ = null;
+
+ };
+
+ contextPrototype.beginPath = function() {
+ // TODO: Branch current matrix so that save/restore has no effect
+ // as per safari docs.
+
+ this.currentPath_ = [];
+ };
+
+ contextPrototype.moveTo = function(aX, aY) {
+ this.currentPath_.push('M' + aX + ',' + aY);
+ };
+
+ contextPrototype.lineTo = function(aX, aY) {
+ if (this.currentPath_.length == 0) return;
+ this.currentPath_.push('L' + aX + ',' + aY);
+ };
+
+ contextPrototype.bezierCurveTo = function(aCP1x, aCP1y,
+ aCP2x, aCP2y,
+ aX, aY) {
+ if (this.currentPath_.length == 0) return;
+ this.currentPath_.push('C' + aCP1x + ',' + aCP1y + ' ' +
+ aCP2x + ',' + aCP2y + ' ' +
+ aX + ' ' + aY);
+ };
+
+ contextPrototype.quadraticCurveTo = function(aCPx, aCPy, aX, aY) {
+ if (this.currentPath_.length == 0) return;
+ this.currentPath_.push('Q' + aCPx + ',' + aCPy + ' ' +
+ aX + ',' + aY);
+ };
+
+ contextPrototype.arcTo = function(x1, y1, x2, y2, radius) {
+ if (this.currentPath_.length == 0) return;
+ // TODO: Implement
+ };
+
+ contextPrototype.arc = function(aX, aY, aRadius,
+ aStartAngle, aEndAngle, aClockwise) {
+ var deltaAngle = Math.abs(aStartAngle - aEndAngle);
+ // If start and stop are the same WebKit and Moz does nothing
+ if (aStartAngle == aEndAngle) {
+ // different browsers behave differently here so we do the easiest thing
+ return;
+ }
+
+ var endX = aX + aRadius * Math.cos(aEndAngle);
+ var endY = aY + aRadius * Math.sin(aEndAngle);
+
+ if (deltaAngle >= 2 * Math.PI) {
+ // if larger than 2PI
+ this.arc(aX, aY, aRadius, aStartAngle, aStartAngle + Math.PI, aClockwise);
+ this.arc(aX, aY, aRadius, aStartAngle + Math.PI,
+ aStartAngle + 2 * Math.PI, aClockwise);
+ // now move to end point
+ this.moveTo(endX, endY);
+ return;
+ }
+
+ var startX = aX + aRadius * Math.cos(aStartAngle);
+ var startY = aY + aRadius * Math.sin(aStartAngle);
+ var rotationAngle = deltaAngle * 180 / Math.PI; // sign, abs?
+ var sweepDirection = aClockwise ? 0 : 1;
+ var isLargeArc = rotationAngle >= 180 == Boolean(aClockwise) ? 0 : 1;
+
+ if (this.currentPath_.length != 0) {
+ // add line to start point
+ this.lineTo(startX, startY);
+ } else {
+ this.moveTo(startX, startY);
+ }
+
+ this.currentPath_.push('A' + aRadius + ',' + aRadius + ' ' +
+ rotationAngle + ' ' +
+ isLargeArc + ' ' +
+ sweepDirection + ' ' +
+ endX + ',' + endY);
+ };
+
+ contextPrototype.rect = function(aX, aY, aWidth, aHeight) {
+ this.moveTo(aX, aY);
+ this.lineTo(aX + aWidth, aY);
+ this.lineTo(aX + aWidth, aY + aHeight);
+ this.lineTo(aX, aY + aHeight);
+ this.closePath();
+ };
+
+ contextPrototype.strokeRect = function(aX, aY, aWidth, aHeight) {
+ // Will destroy any existing path (same as FF behaviour)
+ this.beginPath();
+ this.moveTo(aX, aY);
+ this.lineTo(aX + aWidth, aY);
+ this.lineTo(aX + aWidth, aY + aHeight);
+ this.lineTo(aX, aY + aHeight);
+ this.closePath();
+ this.stroke();
+ this.currentPath_ = [];
+ };
+
+ contextPrototype.fillRect = function(aX, aY, aWidth, aHeight) {
+ // Will destroy any existing path (same as FF behaviour)
+ this.beginPath();
+ this.moveTo(aX, aY);
+ this.lineTo(aX + aWidth, aY);
+ this.lineTo(aX + aWidth, aY + aHeight);
+ this.lineTo(aX, aY + aHeight);
+ this.closePath();
+ this.fill();
+ this.currentPath_ = [];
+ };
+
+ contextPrototype.createLinearGradient = function(aX0, aY0, aX1, aY1) {
+ return new LinearCanvasGradient_(aX0, aY0, aX1, aY1);
+ };
+
+ contextPrototype.createRadialGradient = function(x0, y0,
+ r0, x1,
+ y1, r1) {
+ return new RadialCanvasGradient_(x0, y0, r0, x1, y1, r1);
+ };
+
+ contextPrototype.drawImage = function (image, var_args) {
+ var dx, dy, dw, dh, sx, sy, sw, sh;
+
+ // For Silverlight we don't need to get the size of the image since
+ // Silverlight uses the image original dimension if not provided.
+
+ if (arguments.length == 3) {
+ dx = arguments[1];
+ dy = arguments[2];
+ // Keep sx, sy, sw, dw, sh and dh undefined
+ } else if (arguments.length == 5) {
+ dx = arguments[1];
+ dy = arguments[2];
+ dw = arguments[3];
+ dh = arguments[4];
+ // Keep sx, sy, sw and sh undefined
+ } else if (arguments.length == 9) {
+ sx = arguments[1];
+ sy = arguments[2];
+ sw = arguments[3];
+ sh = arguments[4];
+ dx = arguments[5];
+ dy = arguments[6];
+ dw = arguments[7];
+ dh = arguments[8];
+ } else {
+ throw Error('Invalid number of arguments');
+ }
+
+ var slImage;
+
+ // If we have a source rect we need to clip the image.
+ if (arguments.length == 9) {
+ slImage = drawShape(this, '', [image.src]);
+
+ var clipRect = create(this,
+ '', [sx, sy, sw, sh]);
+ slImage.clip = clipRect;
+
+ var m = createMatrixIdentity();
+
+ // translate to 0,0
+ m[2][0] = -sx;
+ m[2][1] = -sy;
+
+ // scale
+ var m2 = createMatrixIdentity();
+ m2[0][0] = dw / sw;
+ m2[1][1] = dh / sh;
+
+ m = matrixMultiply(m, m2);
+
+ // translate to destination
+ m[2][0] += dx;
+ m[2][1] += dy;
+
+ transformObject(this, slImage, m);
+
+ } else {
+ slImage = drawShape(this,
+ '',
+ [image.src, dx, dy]);
+ if (dw != undefined || dh != undefined) {
+ slImage.width = dw;
+ slImage.height = dh;
+ slImage.stretch = 'fill';
+ }
+ }
+ };
+
+ contextPrototype.stroke = function() {
+ if (this.currentPath_.length == 0) return;
+ var path = drawShape(this, '',
+ [this.currentPath_.join(' ')]);
+ path.stroke = createBrushObject(this, this.strokeStyle);
+ path.opacity = this.globalAlpha;
+ path.strokeThickness = this.lineWidth;
+ path.strokeMiterLimit = this.miterLimit;
+ path.strokeLineJoin = this.lineJoin;
+ // Canvas does not differentiate start from end
+ path.strokeEndLineCap = path.strokeStartLineCap =
+ processLineCap(this.lineCap);
+ };
+
+ contextPrototype.fill = function() {
+ if (this.currentPath_.length == 0) return;
+ var path = drawShape(this, '',
+ [this.currentPath_.join(' ')]);
+ // The spec says to use non zero but Silverlight uses EvenOdd by defaul
+ path.data.fillRule = 'NonZero';
+ path.fill = createBrushObject(this, this.fillStyle);
+ // TODO: What about even-odd etc?
+ };
+
+ contextPrototype.closePath = function() {
+ this.currentPath_.push('z');
+ };
+
+ /**
+ * Sets the transformation matrix and marks things as dirty
+ */
+ function setM(self, m) {
+ self.m_ = m;
+ self.lastCanvas_ = null;
+ };
+
+ contextPrototype.save = function() {
+ var o = {};
+ copyState(this, o);
+ this.aStack_.push(o);
+ this.mStack_.push(this.m_);
+ setM(this, matrixMultiply(createMatrixIdentity(), this.m_));
+ };
+
+ contextPrototype.restore = function() {
+ copyState(this.aStack_.pop(), this);
+ setM(this, this.mStack_.pop());
+ };
+
+ contextPrototype.translate = function(aX, aY) {
+ var m1 = [
+ [1, 0, 0],
+ [0, 1, 0],
+ [aX, aY, 1]
+ ];
+
+ setM(this, matrixMultiply(m1, this.m_));
+ };
+
+ contextPrototype.rotate = function(aRot) {
+ var c = Math.cos(aRot);
+ var s = Math.sin(aRot);
+
+ var m1 = [
+ [c, s, 0],
+ [-s, c, 0],
+ [0, 0, 1]
+ ];
+
+ setM(this, matrixMultiply(m1, this.m_));
+ };
+
+ contextPrototype.scale = function(aX, aY) {
+ var m1 = [
+ [aX, 0, 0],
+ [0, aY, 0],
+ [0, 0, 1]
+ ];
+
+ setM(this, matrixMultiply(m1, this.m_));
+ };
+
+ contextPrototype.transform = function(m11, m12, m21, m22, dx, dy) {
+ var m1 = [
+ [m11, m12, 0],
+ [m21, m22, 0],
+ [ dx, dy, 1]
+ ];
+
+ setM(this, matrixMultiply(m1, this.m_));
+ };
+
+ contextPrototype.setTransform = function(m11, m12, m21, m22, dx, dy) {
+ setM(this, [
+ [m11, m12, 0],
+ [m21, m22, 0],
+ [ dx, dy, 1],
+ ]);
+ };
+
+ /******** STUBS ********/
+ contextPrototype.clip = function() {
+ // TODO: Implement
+ };
+
+ contextPrototype.createPattern = function() {
+ return new CanvasPattern_;
+ };
+
+ // Gradient / Pattern Stubs
+ function CanvasGradient_() {
+ this.colors_ = [];
+ }
+
+ CanvasGradient_.prototype.addColorStop = function(aOffset, aColor) {
+ aColor = translateColor(aColor);
+ this.colors_.push({offset: aOffset, color: aColor});
+ };
+
+ CanvasGradient_.prototype.createStops_ = function(ctx, brushObj, colors) {
+ var gradientStopCollection = brushObj.gradientStops;
+ for (var i = 0, c; c = colors[i]; i++) {
+ var color = translateColor(c.color);
+ gradientStopCollection.add(create(ctx,
+ '', [color, c.offset]));
+ }
+ };
+
+ function LinearCanvasGradient_(x0, y0, x1, y1) {
+ CanvasGradient_.call(this);
+ this.x0_ = x0;
+ this.y0_ = y0;
+ this.x1_ = x1;
+ this.y1_ = y1;
+ }
+ LinearCanvasGradient_.prototype = new CanvasGradient_;
+
+ LinearCanvasGradient_.prototype.createBrush_ = function(ctx) {
+ var brushObj = create(ctx, '',
+ [this.x0_, this.y0_, this.x1_, this.y1_]);
+ this.createStops_(ctx, brushObj, this.colors_);
+ return brushObj;
+ };
+
+ function isNanOrInfinite(v) {
+ return isNaN(v) || !isFinite(v);
+ }
+
+ function RadialCanvasGradient_(x0, y0, r0, x1, y1, r1) {
+ if (r0 < 0 || r1 < 0 || isNanOrInfinite(x0) || isNanOrInfinite(y0) ||
+ isNanOrInfinite(x1) || isNanOrInfinite(y1)) {
+ // IE does not support DOMException so this is as close as we get.
+ var error = Error('DOMException.INDEX_SIZE_ERR');
+ error.code = 1;
+ throw error;
+ }
+
+ CanvasGradient_.call(this);
+ this.x0_ = x0;
+ this.y0_ = y0;
+ this.r0_ = r0;
+ this.x1_ = x1;
+ this.y1_ = y1;
+ this.r1_ = r1;
+ }
+ RadialCanvasGradient_.prototype = new CanvasGradient_;
+
+ CanvasGradient_.prototype.createBrush_ = function(ctx) {
+ if (this.x0_ == this.x1_ && this.y0_ == this.y1_ && this.r0_ == this.r1_) {
+ return null;
+ }
+
+ var radius = Math.max(this.r0_, this.r1_);
+ var minRadius = Math.min(this.r0_, this.r1_);
+ var brushObj = create(ctx, '',
+ [this.x0_, this.y0_, this.x1_, this.y1_, radius]);
+
+ var colors = this.colors_.concat();
+
+ if (this.r1_ < this.r0_) {
+ // reverse color stop array
+ colors.reverse();
+ for (var i = 0, c; c = colors[i]; i++) {
+ c.offset = 1 - c.offset;
+ }
+ }
+
+ // sort the color stops
+ colors.sort(function(c1, c2) {
+ return c1.offset - c2.offset;
+ });
+
+ if (minRadius > 0) {
+ // We need to adjust the color stops since SL always have the inner radius
+ // at (0, 0) so we change the stops in case the min radius is not 0.
+ for (var i = 0, c; c = colors[i]; i++) {
+ c.offset = minRadius / radius + (radius - minRadius) / radius * c.offset;
+ }
+ }
+
+ this.createStops_(ctx, brushObj, colors);
+ return brushObj;
+ };
+
+ function CanvasPattern_() {}
+
+ // set up externs
+ G_vmlCanvasManager = G_vmlCanvasManager_;
+ CanvasRenderingContext2D = CanvasRenderingContext2D_;
+ CanvasGradient = CanvasGradient_;
+ CanvasPattern = CanvasPattern_;
+
+})();
+
+} // if
diff --git a/static/scripts/packed/excanvas.js b/static/scripts/packed/excanvas.js
new file mode 100644
index 00000000000..8b787dce0cf
--- /dev/null
+++ b/static/scripts/packed/excanvas.js
@@ -0,0 +1 @@
+if(!window.CanvasRenderingContext2D){(function(){var L;var N={init:function(d){var e=d||document;e.createElement("canvas");if(/MSIE/.test(navigator.userAgent)&&!window.opera){var c=this;a();e.attachEvent("onreadystatechange",function(){c.init_(e)})}},init_:function(f){var e=f.createStyleSheet();e.cssText="canvas{display:inline-block;overflow:hidden;text-align:left;width:300px;height:150px}canvas object{width:100%;height:100%;border:0;background:transparen;margin:0}";var d=f.getElementsByTagName("canvas");for(var c=0;c<\/script>');var c=document.scripts;var d=c[c.length-1];L=d.uniqueID;d.id=L}function C(c){return''}function H(){try{new ActiveXObject("AgControl.AgControl");return true}catch(c){return false}}var I=[];for(var X=0;X<16;X++){for(var W=0;W<16;W++){I[X*16+W]=X.toString(16)+W.toString(16)}}function T(){return[[1,0,0],[0,1,0],[0,0,1]]}function K(f,e){var d=T();for(var c=0;c<3;c++){for(var i=0;i<3;i++){var g=0;for(var h=0;h<3;h++){g+=f[c][h]*e[h][i]}d[c][i]=g}}return d}function J(c){Q(c,F(c),c.m_)}function Q(d,g,c){var f=g.renderTransform;var e;if(!f){f=P(d,"");e=P(d,"");f.matrix=e;g.renderTransform=f}else{e=f.matrix}e.m11=c[0][0];e.m12=c[0][1];e.m21=c[1][0];e.m22=c[1][1];e.offsetX=c[2][0];e.offsetY=c[2][1]}function V(d,c){c.fillStyle=d.fillStyle;c.lineCap=d.lineCap;c.lineJoin=d.lineJoin;c.lineWidth=d.lineWidth;c.miterLimit=d.miterLimit;c.shadowBlur=d.shadowBlur;c.shadowColor=d.shadowColor;c.shadowOffsetX=d.shadowOffsetX;c.shadowOffsetY=d.shadowOffsetY;c.strokeStyle=d.strokeStyle;c.globalAlpha=d.globalAlpha;c.arcScaleX_=d.arcScaleX_;c.arcScaleY_=d.arcScaleY_}function R(c){var f=/rgba\(([^)]+)\)/gi.exec(c);if(f){var e=f[1].split(",");return"#"+I[Math.floor(Number(e[3])*255)]+I[Number(e[0])]+I[Number(e[1])]+I[Number(e[2])]}var d=/rgb\(([^)]+)\)/gi.exec(c);if(d){var e=d[1].split(",");return"#FF"+I[Number(e[0])]+I[Number(e[1])]+I[Number(e[2])]}return c}function U(c){switch(c){case"butt":return"flat";case"round":return"round";case"square":default:return"square"}}function F(c){return c.canvas.firstChild.content.findName("root")}function P(c,e,f){if(f){e=e.replace(/\%(\d+)/g,function(h,g){return f[Number(g)-1]})}try{return c.canvas.firstChild.content.createFromXaml(e)}catch(d){throw Error("Could not create XAML from: "+e)}}function E(c,f,g){var e=c.lastCanvas_||P(c,"");var d=P(c,f,g);e.children.add(d);Q(c,e,c.m_);if(!c.lastCanvas_){F(c).children.add(e);c.lastCanvas_=e}return d}function A(c,d){if(d instanceof Y){return d.createBrush_(c)}else{if(d instanceof M){throw Error("Not implemented")}else{return P(c,'',[R(d)])}}}function S(c){this.m_=T();this.lastCanvas_=null;this.mStack_=[];this.aStack_=[];this.currentPath_=[];this.strokeStyle="#000";this.fillStyle="#000";this.lineWidth=1;this.lineJoin="miter";this.lineCap="butt";this.miterLimit=10;this.globalAlpha=1;this.canvas=c}var O=S.prototype;O.clearRect=function(){var c=F(this);c.children.clear();this.currentPath_=[];this.lastCanvas_=null};O.beginPath=function(){this.currentPath_=[]};O.moveTo=function(d,c){this.currentPath_.push("M"+d+","+c)};O.lineTo=function(d,c){if(this.currentPath_.length==0){return }this.currentPath_.push("L"+d+","+c)};O.bezierCurveTo=function(e,c,h,g,f,d){if(this.currentPath_.length==0){return }this.currentPath_.push("C"+e+","+c+" "+h+","+g+" "+f+" "+d)};O.quadraticCurveTo=function(f,e,d,c){if(this.currentPath_.length==0){return }this.currentPath_.push("Q"+f+","+e+" "+d+","+c)};O.arcTo=function(e,g,d,f,c){if(this.currentPath_.length==0){return }};O.arc=function(j,g,i,f,d,e){var c=Math.abs(f-d);if(f==d){return }var p=j+i*Math.cos(d);var o=g+i*Math.sin(d);if(c>=2*Math.PI){this.arc(j,g,i,f,f+Math.PI,e);this.arc(j,g,i,f+Math.PI,f+2*Math.PI,e);this.moveTo(p,o);return }var k=j+i*Math.cos(f);var h=g+i*Math.sin(f);var n=c*180/Math.PI;var l=e?0:1;var m=n>=180==Boolean(e)?0:1;if(this.currentPath_.length!=0){this.lineTo(k,h)}else{this.moveTo(k,h)}this.currentPath_.push("A"+i+","+i+" "+n+" "+m+" "+l+" "+p+","+o)};O.rect=function(e,d,c,f){this.moveTo(e,d);this.lineTo(e+c,d);this.lineTo(e+c,d+f);this.lineTo(e,d+f);this.closePath()};O.strokeRect=function(e,d,c,f){this.beginPath();this.moveTo(e,d);this.lineTo(e+c,d);this.lineTo(e+c,d+f);this.lineTo(e,d+f);this.closePath();this.stroke();this.currentPath_=[]};O.fillRect=function(e,d,c,f){this.beginPath();this.moveTo(e,d);this.lineTo(e+c,d);this.lineTo(e+c,d+f);this.lineTo(e,d+f);this.closePath();this.fill();this.currentPath_=[]};O.createLinearGradient=function(d,f,c,e){return new D(d,f,c,e)};O.createRadialGradient=function(f,h,e,d,g,c){return new G(f,h,e,d,g,c)};O.drawImage=function(e,n){var q,p,c,i,k,j,l,h;if(arguments.length==3){q=arguments[1];p=arguments[2]}else{if(arguments.length==5){q=arguments[1];p=arguments[2];c=arguments[3];i=arguments[4]}else{if(arguments.length==9){k=arguments[1];j=arguments[2];l=arguments[3];h=arguments[4];q=arguments[5];p=arguments[6];c=arguments[7];i=arguments[8]}else{throw Error("Invalid number of arguments")}}}var g;if(arguments.length==9){g=E(this,'',[e.src]);var f=P(this,'',[k,j,l,h]);g.clip=f;var d=T();d[2][0]=-k;d[2][1]=-j;var o=T();o[0][0]=c/l;o[1][1]=i/h;d=K(d,o);d[2][0]+=q;d[2][1]+=p;Q(this,g,d)}else{g=E(this,'',[e.src,q,p]);if(c!=undefined||i!=undefined){g.width=c;g.height=i;g.stretch="fill"}}};O.stroke=function(){if(this.currentPath_.length==0){return }var c=E(this,'',[this.currentPath_.join(" ")]);c.stroke=A(this,this.strokeStyle);c.opacity=this.globalAlpha;c.strokeThickness=this.lineWidth;c.strokeMiterLimit=this.miterLimit;c.strokeLineJoin=this.lineJoin;c.strokeEndLineCap=c.strokeStartLineCap=U(this.lineCap)};O.fill=function(){if(this.currentPath_.length==0){return }var c=E(this,'',[this.currentPath_.join(" ")]);c.data.fillRule="NonZero";c.fill=A(this,this.fillStyle)};O.closePath=function(){this.currentPath_.push("z")};function Z(d,c){d.m_=c;d.lastCanvas_=null}O.save=function(){var c={};V(this,c);this.aStack_.push(c);this.mStack_.push(this.m_);Z(this,K(T(),this.m_))};O.restore=function(){V(this.aStack_.pop(),this);Z(this,this.mStack_.pop())};O.translate=function(e,d){var c=[[1,0,0],[0,1,0],[e,d,1]];Z(this,K(c,this.m_))};O.rotate=function(e){var g=Math.cos(e);var f=Math.sin(e);var d=[[g,f,0],[-f,g,0],[0,0,1]];Z(this,K(d,this.m_))};O.scale=function(e,d){var c=[[e,0,0],[0,d,0],[0,0,1]];Z(this,K(c,this.m_))};O.transform=function(g,f,i,h,d,c){var e=[[g,f,0],[i,h,0],[d,c,1]];Z(this,K(e,this.m_))};O.setTransform=function(f,e,h,g,d,c){Z(this,[[f,e,0],[h,g,0],[d,c,1],])};O.clip=function(){};O.createPattern=function(){return new M};function Y(){this.colors_=[]}Y.prototype.addColorStop=function(d,c){c=R(c);this.colors_.push({offset:d,color:c})};Y.prototype.createStops_=function(e,g,d){var j=g.gradientStops;for(var h=0,k;k=d[h];h++){var f=R(k.color);j.add(P(e,'',[f,k.offset]))}};function D(d,f,c,e){Y.call(this);this.x0_=d;this.y0_=f;this.x1_=c;this.y1_=e}D.prototype=new Y;D.prototype.createBrush_=function(c){var d=P(c,'',[this.x0_,this.y0_,this.x1_,this.y1_]);this.createStops_(c,d,this.colors_);return d};function B(c){return isNaN(c)||!isFinite(c)}function G(g,i,f,e,h,c){if(f<0||c<0||B(g)||B(i)||B(e)||B(h)){var d=Error("DOMException.INDEX_SIZE_ERR");d.code=1;throw d}Y.call(this);this.x0_=g;this.y0_=i;this.r0_=f;this.x1_=e;this.y1_=h;this.r1_=c}G.prototype=new Y;Y.prototype.createBrush_=function(f){if(this.x0_==this.x1_&&this.y0_==this.y1_&&this.r0_==this.r1_){return null}var d=Math.max(this.r0_,this.r1_);var j=Math.min(this.r0_,this.r1_);var g=P(f,'',[this.x0_,this.y0_,this.x1_,this.y1_,d]);var e=this.colors_.concat();if(this.r1_0){for(var h=0,k;k=e[h];h++){k.offset=j/d+(d-j)/d*k.offset}}this.createStops_(f,g,e);return g};function M(){}G_vmlCanvasManager=N;CanvasRenderingContext2D=S;CanvasGradient=Y;CanvasPattern=M})()};
\ No newline at end of file