Initial seed code contribution for CDT

Issue-ID: APPC-682
Change-Id: I0331ffce2a430195c29d0d1b2295966f9eb28699
Signed-off-by: Skip Wonnell <skip@att.com>

1 files changed, 4010 insertions, 0 deletions

diff --git a/src/material.js b/src/material.js
new file mode 100644
index 0000000..cd63c92
--- /dev/null
+++ b/src/material.js
@@ -0,0 +1,4010 @@
+;(function () {
+    "use strict";
+
+    /**
+     * @license
+     * Copyright 2015 Google Inc. All Rights Reserved.
+     *
+     * 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.
+     */
+
+    /**
+     * A component handler interface using the revealing module design pattern.
+     * More details on this design pattern here:
+     * https://github.com/jasonmayes/mdl-component-design-pattern
+     *
+     * @author Jason Mayes.
+     */
+    /* exported componentHandler */
+
+// Pre-defining the componentHandler interface, for closure documentation and
+// static verification.
+    var componentHandler = {
+        /**
+         * Searches existing DOM for elements of our component type and upgrades them
+         * if they have not already been upgraded.
+         *
+         * @param {string=} optJsClass the programatic name of the element class we
+         * need to create a new instance of.
+         * @param {string=} optCssClass the name of the CSS class elements of this
+         * type will have.
+         */
+        upgradeDom: function (optJsClass, optCssClass) {
+        },
+        /**
+         * Upgrades a specific element rather than all in the DOM.
+         *
+         * @param {!Element} element The element we wish to upgrade.
+         * @param {string=} optJsClass Optional name of the class we want to upgrade
+         * the element to.
+         */
+        upgradeElement: function (element, optJsClass) {
+        },
+        /**
+         * Upgrades a specific list of elements rather than all in the DOM.
+         *
+         * @param {!Element|!Array<!Element>|!NodeList|!HTMLCollection} elements
+         * The elements we wish to upgrade.
+         */
+        upgradeElements: function (elements) {
+        },
+        /**
+         * Upgrades all registered components found in the current DOM. This is
+         * automatically called on window load.
+         */
+        upgradeAllRegistered: function () {
+        },
+        /**
+         * Allows user to be alerted to any upgrades that are performed for a given
+         * component type
+         *
+         * @param {string} jsClass The class name of the MDL component we wish
+         * to hook into for any upgrades performed.
+         * @param {function(!HTMLElement)} callback The function to call upon an
+         * upgrade. This function should expect 1 parameter - the HTMLElement which
+         * got upgraded.
+         */
+        registerUpgradedCallback: function (jsClass, callback) {
+        },
+        /**
+         * Registers a class for future use and attempts to upgrade existing DOM.
+         *
+         * @param {componentHandler.ComponentConfigPublic} config the registration configuration
+         */
+        register: function (config) {
+        },
+        /**
+         * Downgrade either a given node, an array of nodes, or a NodeList.
+         *
+         * @param {!Node|!Array<!Node>|!NodeList} nodes
+         */
+        downgradeElements: function (nodes) {
+        }
+    };
+
+    componentHandler = (function () {
+        'use strict';
+
+        /** @type {!Array<componentHandler.ComponentConfig>} */
+        var registeredComponents_ = [];
+
+        /** @type {!Array<componentHandler.Component>} */
+        var createdComponents_ = [];
+
+        var componentConfigProperty_ = 'mdlComponentConfigInternal_';
+
+        /**
+         * Searches registered components for a class we are interested in using.
+         * Optionally replaces a match with passed object if specified.
+         *
+         * @param {string} name The name of a class we want to use.
+         * @param {componentHandler.ComponentConfig=} optReplace Optional object to replace match with.
+         * @return {!Object|boolean}
+         * @private
+         */
+        function findRegisteredClass_(name, optReplace) {
+            for (var i = 0; i < registeredComponents_.length; i++) {
+                if (registeredComponents_[i].className === name) {
+                    if (typeof optReplace !== 'undefined') {
+                        registeredComponents_[i] = optReplace;
+                    }
+                    return registeredComponents_[i];
+                }
+            }
+            return false;
+        }
+
+        /**
+         * Returns an array of the classNames of the upgraded classes on the element.
+         *
+         * @param {!Element} element The element to fetch data from.
+         * @return {!Array<string>}
+         * @private
+         */
+        function getUpgradedListOfElement_(element) {
+            var dataUpgraded = element.getAttribute('data-upgraded');
+            // Use `['']` as default value to conform the `,name,name...` style.
+            return dataUpgraded === null ? [''] : dataUpgraded.split(',');
+        }
+
+        /**
+         * Returns true if the given element has already been upgraded for the given
+         * class.
+         *
+         * @param {!Element} element The element we want to check.
+         * @param {string} jsClass The class to check for.
+         * @returns {boolean}
+         * @private
+         */
+        function isElementUpgraded_(element, jsClass) {
+            var upgradedList = getUpgradedListOfElement_(element);
+            return upgradedList.indexOf(jsClass) !== -1;
+        }
+
+        /**
+         * Create an event object.
+         *
+         * @param {string} eventType The type name of the event.
+         * @param {boolean} bubbles Whether the event should bubble up the DOM.
+         * @param {boolean} cancelable Whether the event can be canceled.
+         * @returns {!Event}
+         */
+        function createEvent_(eventType, bubbles, cancelable) {
+            if ('CustomEvent' in window && typeof window.CustomEvent === 'function') {
+                return new CustomEvent(eventType, {
+                    bubbles: bubbles,
+                    cancelable: cancelable
+                });
+            } else {
+                var ev = document.createEvent('Events');
+                ev.initEvent(eventType, bubbles, cancelable);
+                return ev;
+            }
+        }
+
+        /**
+         * Searches existing DOM for elements of our component type and upgrades them
+         * if they have not already been upgraded.
+         *
+         * @param {string=} optJsClass the programatic name of the element class we
+         * need to create a new instance of.
+         * @param {string=} optCssClass the name of the CSS class elements of this
+         * type will have.
+         */
+        function upgradeDomInternal(optJsClass, optCssClass) {
+            if (typeof optJsClass === 'undefined' &&
+                typeof optCssClass === 'undefined') {
+                for (var i = 0; i < registeredComponents_.length; i++) {
+                    upgradeDomInternal(registeredComponents_[i].className,
+                        registeredComponents_[i].cssClass);
+                }
+            } else {
+                var jsClass = /** @type {string} */ (optJsClass);
+                if (typeof optCssClass === 'undefined') {
+                    var registeredClass = findRegisteredClass_(jsClass);
+                    if (registeredClass) {
+                        optCssClass = registeredClass.cssClass;
+                    }
+                }
+
+                var elements = document.querySelectorAll('.' + optCssClass);
+                for (var n = 0; n < elements.length; n++) {
+                    upgradeElementInternal(elements[n], jsClass);
+                }
+            }
+        }
+
+        /**
+         * Upgrades a specific element rather than all in the DOM.
+         *
+         * @param {!Element} element The element we wish to upgrade.
+         * @param {string=} optJsClass Optional name of the class we want to upgrade
+         * the element to.
+         */
+        function upgradeElementInternal(element, optJsClass) {
+            // Verify argument type.
+            if (!(typeof element === 'object' && element instanceof Element)) {
+                throw new Error('Invalid argument provided to upgrade MDL element.');
+            }
+            // Allow upgrade to be canceled by canceling emitted event.
+            var upgradingEv = createEvent_('mdl-componentupgrading', true, true);
+            element.dispatchEvent(upgradingEv);
+            if (upgradingEv.defaultPrevented) {
+                return;
+            }
+
+            var upgradedList = getUpgradedListOfElement_(element);
+            var classesToUpgrade = [];
+            // If jsClass is not provided scan the registered components to find the
+            // ones matching the element's CSS classList.
+            if (!optJsClass) {
+                var classList = element.classList;
+                registeredComponents_.forEach(function (component) {
+                    // Match CSS & Not to be upgraded & Not upgraded.
+                    if (classList.contains(component.cssClass) &&
+                        classesToUpgrade.indexOf(component) === -1 &&
+                        !isElementUpgraded_(element, component.className)) {
+                        classesToUpgrade.push(component);
+                    }
+                });
+            } else if (!isElementUpgraded_(element, optJsClass)) {
+                classesToUpgrade.push(findRegisteredClass_(optJsClass));
+            }
+
+            // Upgrade the element for each classes.
+            for (var i = 0, n = classesToUpgrade.length, registeredClass; i < n; i++) {
+                registeredClass = classesToUpgrade[i];
+                if (registeredClass) {
+                    // Mark element as upgraded.
+                    upgradedList.push(registeredClass.className);
+                    element.setAttribute('data-upgraded', upgradedList.join(','));
+                    var instance = new registeredClass.classConstructor(element);
+                    instance[componentConfigProperty_] = registeredClass;
+                    createdComponents_.push(instance);
+                    // Call any callbacks the user has registered with this component type.
+                    for (var j = 0, m = registeredClass.callbacks.length; j < m; j++) {
+                        registeredClass.callbacks[j](element);
+                    }
+
+                    if (registeredClass.widget) {
+                        // Assign per element instance for control over API
+                        element[registeredClass.className] = instance;
+                    }
+                } else {
+                    throw new Error(
+                        'Unable to find a registered component for the given class.');
+                }
+
+                var upgradedEv = createEvent_('mdl-componentupgraded', true, false);
+                element.dispatchEvent(upgradedEv);
+            }
+        }
+
+        /**
+         * Upgrades a specific list of elements rather than all in the DOM.
+         *
+         * @param {!Element|!Array<!Element>|!NodeList|!HTMLCollection} elements
+         * The elements we wish to upgrade.
+         */
+        function upgradeElementsInternal(elements) {
+            if (!Array.isArray(elements)) {
+                if (elements instanceof Element) {
+                    elements = [elements];
+                } else {
+                    elements = Array.prototype.slice.call(elements);
+                }
+            }
+            for (var i = 0, n = elements.length, element; i < n; i++) {
+                element = elements[i];
+                if (element instanceof HTMLElement) {
+                    upgradeElementInternal(element);
+                    if (element.children.length > 0) {
+                        upgradeElementsInternal(element.children);
+                    }
+                }
+            }
+        }
+
+        /**
+         * Registers a class for future use and attempts to upgrade existing DOM.
+         *
+         * @param {componentHandler.ComponentConfigPublic} config
+         */
+        function registerInternal(config) {
+            // In order to support both Closure-compiled and uncompiled code accessing
+            // this method, we need to allow for both the dot and array syntax for
+            // property access. You'll therefore see the `foo.bar || foo['bar']`
+            // pattern repeated across this method.
+            var widgetMissing = (typeof config.widget === 'undefined' &&
+                typeof config['widget'] === 'undefined');
+            var widget = true;
+
+            if (!widgetMissing) {
+                widget = config.widget || config['widget'];
+            }
+
+            var newConfig = /** @type {componentHandler.ComponentConfig} */ ({
+                classConstructor: config.constructor || config['constructor'],
+                className: config.classAsString || config['classAsString'],
+                cssClass: config.cssClass || config['cssClass'],
+                widget: widget,
+                callbacks: []
+            });
+
+            registeredComponents_.forEach(function (item) {
+                if (item.cssClass === newConfig.cssClass) {
+                    throw new Error('The provided cssClass has already been registered: ' + item.cssClass);
+                }
+                if (item.className === newConfig.className) {
+                    throw new Error('The provided className has already been registered');
+                }
+            });
+
+            if (config.constructor.prototype
+                    .hasOwnProperty(componentConfigProperty_)) {
+                throw new Error(
+                    'MDL component classes must not have ' + componentConfigProperty_ +
+                    ' defined as a property.');
+            }
+
+            var found = findRegisteredClass_(config.classAsString, newConfig);
+
+            if (!found) {
+                registeredComponents_.push(newConfig);
+            }
+        }
+
+        /**
+         * Allows user to be alerted to any upgrades that are performed for a given
+         * component type
+         *
+         * @param {string} jsClass The class name of the MDL component we wish
+         * to hook into for any upgrades performed.
+         * @param {function(!HTMLElement)} callback The function to call upon an
+         * upgrade. This function should expect 1 parameter - the HTMLElement which
+         * got upgraded.
+         */
+        function registerUpgradedCallbackInternal(jsClass, callback) {
+            var regClass = findRegisteredClass_(jsClass);
+            if (regClass) {
+                regClass.callbacks.push(callback);
+            }
+        }
+
+        /**
+         * Upgrades all registered components found in the current DOM. This is
+         * automatically called on window load.
+         */
+        function upgradeAllRegisteredInternal() {
+            for (var n = 0; n < registeredComponents_.length; n++) {
+                upgradeDomInternal(registeredComponents_[n].className);
+            }
+        }
+
+        /**
+         * Check the component for the downgrade method.
+         * Execute if found.
+         * Remove component from createdComponents list.
+         *
+         * @param {?componentHandler.Component} component
+         */
+        function deconstructComponentInternal(component) {
+            if (component) {
+                var componentIndex = createdComponents_.indexOf(component);
+                createdComponents_.splice(componentIndex, 1);
+
+                var upgrades = component.element_.getAttribute('data-upgraded').split(',');
+                var componentPlace = upgrades.indexOf(component[componentConfigProperty_].classAsString);
+                upgrades.splice(componentPlace, 1);
+                component.element_.setAttribute('data-upgraded', upgrades.join(','));
+
+                var ev = createEvent_('mdl-componentdowngraded', true, false);
+                component.element_.dispatchEvent(ev);
+            }
+        }
+
+        /**
+         * Downgrade either a given node, an array of nodes, or a NodeList.
+         *
+         * @param {!Node|!Array<!Node>|!NodeList} nodes
+         */
+        function downgradeNodesInternal(nodes) {
+            /**
+             * Auxiliary function to downgrade a single node.
+             * @param  {!Node} node the node to be downgraded
+             */
+            var downgradeNode = function (node) {
+                createdComponents_.filter(function (item) {
+                    return item.element_ === node;
+                }).forEach(deconstructComponentInternal);
+            };
+            if (nodes instanceof Array || nodes instanceof NodeList) {
+                for (var n = 0; n < nodes.length; n++) {
+                    downgradeNode(nodes[n]);
+                }
+            } else if (nodes instanceof Node) {
+                downgradeNode(nodes);
+            } else {
+                throw new Error('Invalid argument provided to downgrade MDL nodes.');
+            }
+        }
+
+        // Now return the functions that should be made public with their publicly
+        // facing names...
+        return {
+            upgradeDom: upgradeDomInternal,
+            upgradeElement: upgradeElementInternal,
+            upgradeElements: upgradeElementsInternal,
+            upgradeAllRegistered: upgradeAllRegisteredInternal,
+            registerUpgradedCallback: registerUpgradedCallbackInternal,
+            register: registerInternal,
+            downgradeElements: downgradeNodesInternal
+        };
+    })();
+
+    /**
+     * Describes the type of a registered component type managed by
+     * componentHandler. Provided for benefit of the Closure compiler.
+     *
+     * @typedef {{
+ *   constructor: Function,
+ *   classAsString: string,
+ *   cssClass: string,
+ *   widget: (string|boolean|undefined)
+ * }}
+     */
+    componentHandler.ComponentConfigPublic;  // jshint ignore:line
+
+    /**
+     * Describes the type of a registered component type managed by
+     * componentHandler. Provided for benefit of the Closure compiler.
+     *
+     * @typedef {{
+ *   constructor: !Function,
+ *   className: string,
+ *   cssClass: string,
+ *   widget: (string|boolean),
+ *   callbacks: !Array<function(!HTMLElement)>
+ * }}
+     */
+    componentHandler.ComponentConfig;  // jshint ignore:line
+
+    /**
+     * Created component (i.e., upgraded element) type as managed by
+     * componentHandler. Provided for benefit of the Closure compiler.
+     *
+     * @typedef {{
+ *   element_: !HTMLElement,
+ *   className: string,
+ *   classAsString: string,
+ *   cssClass: string,
+ *   widget: string
+ * }}
+     */
+    componentHandler.Component;  // jshint ignore:line
+
+// Export all symbols, for the benefit of Closure compiler.
+// No effect on uncompiled code.
+    componentHandler['upgradeDom'] = componentHandler.upgradeDom;
+    componentHandler['upgradeElement'] = componentHandler.upgradeElement;
+    componentHandler['upgradeElements'] = componentHandler.upgradeElements;
+    componentHandler['upgradeAllRegistered'] =
+        componentHandler.upgradeAllRegistered;
+    componentHandler['registerUpgradedCallback'] =
+        componentHandler.registerUpgradedCallback;
+    componentHandler['register'] = componentHandler.register;
+    componentHandler['downgradeElements'] = componentHandler.downgradeElements;
+    window.componentHandler = componentHandler;
+    window['componentHandler'] = componentHandler;
+
+    window.addEventListener('load', function () {
+        'use strict';
+
+        /**
+         * Performs a "Cutting the mustard" test. If the browser supports the features
+         * tested, adds a mdl-js class to the <html> element. It then upgrades all MDL
+         * components requiring JavaScript.
+         */
+        if ('classList' in document.createElement('div') &&
+            'querySelector' in document &&
+            'addEventListener' in window && Array.prototype.forEach) {
+            document.documentElement.classList.add('mdl-js');
+            componentHandler.upgradeAllRegistered();
+        } else {
+            /**
+             * Dummy function to avoid JS errors.
+             */
+            componentHandler.upgradeElement = function () {
+            };
+            /**
+             * Dummy function to avoid JS errors.
+             */
+            componentHandler.register = function () {
+            };
+        }
+    });
+
+// Source: https://github.com/darius/requestAnimationFrame/blob/master/requestAnimationFrame.js
+// Adapted from https://gist.github.com/paulirish/1579671 which derived from
+// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
+// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
+// requestAnimationFrame polyfill by Erik Möller.
+// Fixes from Paul Irish, Tino Zijdel, Andrew Mao, Klemen Slavič, Darius Bacon
+// MIT license
+    if (!Date.now) {
+        /**
+         * Date.now polyfill.
+         * @return {number} the current Date
+         */
+        Date.now = function () {
+            return new Date().getTime();
+        };
+        Date['now'] = Date.now;
+    }
+    var vendors = [
+        'webkit',
+        'moz'
+    ];
+    for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) {
+        var vp = vendors[i];
+        window.requestAnimationFrame = window[vp + 'RequestAnimationFrame'];
+        window.cancelAnimationFrame = window[vp + 'CancelAnimationFrame'] || window[vp + 'CancelRequestAnimationFrame'];
+        window['requestAnimationFrame'] = window.requestAnimationFrame;
+        window['cancelAnimationFrame'] = window.cancelAnimationFrame;
+    }
+    if (/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent) || !window.requestAnimationFrame || !window.cancelAnimationFrame) {
+        var lastTime = 0;
+        /**
+         * requestAnimationFrame polyfill.
+         * @param  {!Function} callback the callback function.
+         */
+        window.requestAnimationFrame = function (callback) {
+            var now = Date.now();
+            var nextTime = Math.max(lastTime + 16, now);
+            return setTimeout(function () {
+                callback(lastTime = nextTime);
+            }, nextTime - now);
+        };
+        window.cancelAnimationFrame = clearTimeout;
+        window['requestAnimationFrame'] = window.requestAnimationFrame;
+        window['cancelAnimationFrame'] = window.cancelAnimationFrame;
+    }
+    /**
+     * @license
+     * Copyright 2015 Google Inc. All Rights Reserved.
+     *
+     * 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.
+     */
+    /**
+     * Class constructor for Button MDL component.
+     * Implements MDL component design pattern defined at:
+     * https://github.com/jasonmayes/mdl-component-design-pattern
+     *
+     * @param {HTMLElement} element The element that will be upgraded.
+     */
+    var MaterialButton = function MaterialButton(element) {
+        this.element_ = element;
+        // Initialize instance.
+        this.init();
+    };
+    window['MaterialButton'] = MaterialButton;
+    /**
+     * Store constants in one place so they can be updated easily.
+     *
+     * @enum {string | number}
+     * @private
+     */
+    MaterialButton.prototype.Constant_ = {};
+    /**
+     * Store strings for class names defined by this component that are used in
+     * JavaScript. This allows us to simply change it in one place should we
+     * decide to modify at a later date.
+     *
+     * @enum {string}
+     * @private
+     */
+    MaterialButton.prototype.CssClasses_ = {
+        RIPPLE_EFFECT: 'mdl-js-ripple-effect',
+        RIPPLE_CONTAINER: 'mdl-button__ripple-container',
+        RIPPLE: 'mdl-ripple'
+    };
+    /**
+     * Handle blur of element.
+     *
+     * @param {Event} event The event that fired.
+     * @private
+     */
+    MaterialButton.prototype.blurHandler_ = function (event) {
+        if (event) {
+            this.element_.blur();
+        }
+    };
+// Public methods.
+    /**
+     * Disable button.
+     *
+     * @public
+     */
+    MaterialButton.prototype.disable = function () {
+        this.element_.disabled = true;
+    };
+    MaterialButton.prototype['disable'] = MaterialButton.prototype.disable;
+    /**
+     * Enable button.
+     *
+     * @public
+     */
+    MaterialButton.prototype.enable = function () {
+        this.element_.disabled = false;
+    };
+    MaterialButton.prototype['enable'] = MaterialButton.prototype.enable;
+    /**
+     * Initialize element.
+     */
+    MaterialButton.prototype.init = function () {
+        if (this.element_) {
+            if (this.element_.classList.contains(this.CssClasses_.RIPPLE_EFFECT)) {
+                var rippleContainer = document.createElement('span');
+                rippleContainer.classList.add(this.CssClasses_.RIPPLE_CONTAINER);
+                this.rippleElement_ = document.createElement('span');
+                this.rippleElement_.classList.add(this.CssClasses_.RIPPLE);
+                rippleContainer.appendChild(this.rippleElement_);
+                this.boundRippleBlurHandler = this.blurHandler_.bind(this);
+                this.rippleElement_.addEventListener('mouseup', this.boundRippleBlurHandler);
+                this.element_.appendChild(rippleContainer);
+            }
+            this.boundButtonBlurHandler = this.blurHandler_.bind(this);
+            this.element_.addEventListener('mouseup', this.boundButtonBlurHandler);
+            this.element_.addEventListener('mouseleave', this.boundButtonBlurHandler);
+        }
+    };
+// The component registers itself. It can assume componentHandler is available
+// in the global scope.
+    componentHandler.register({
+        constructor: MaterialButton,
+        classAsString: 'MaterialButton',
+        cssClass: 'mdl-js-button',
+        widget: true
+    });
+    /**
+     * @license
+     * Copyright 2015 Google Inc. All Rights Reserved.
+     *
+     * 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.
+     */
+    /**
+     * Class constructor for Checkbox MDL component.
+     * Implements MDL component design pattern defined at:
+     * https://github.com/jasonmayes/mdl-component-design-pattern
+     *
+     * @constructor
+     * @param {HTMLElement} element The element that will be upgraded.
+     */
+    var MaterialCheckbox = function MaterialCheckbox(element) {
+        this.element_ = element;
+        // Initialize instance.
+        this.init();
+    };
+    window['MaterialCheckbox'] = MaterialCheckbox;
+    /**
+     * Store constants in one place so they can be updated easily.
+     *
+     * @enum {string | number}
+     * @private
+     */
+    MaterialCheckbox.prototype.Constant_ = {TINY_TIMEOUT: 0.001};
+    /**
+     * Store strings for class names defined by this component that are used in
+     * JavaScript. This allows us to simply change it in one place should we
+     * decide to modify at a later date.
+     *
+     * @enum {string}
+     * @private
+     */
+    MaterialCheckbox.prototype.CssClasses_ = {
+        INPUT: 'mdl-checkbox__input',
+        BOX_OUTLINE: 'mdl-checkbox__box-outline',
+        FOCUS_HELPER: 'mdl-checkbox__focus-helper',
+        TICK_OUTLINE: 'mdl-checkbox__tick-outline',
+        RIPPLE_EFFECT: 'mdl-js-ripple-effect',
+        RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
+        RIPPLE_CONTAINER: 'mdl-checkbox__ripple-container',
+        RIPPLE_CENTER: 'mdl-ripple--center',
+        RIPPLE: 'mdl-ripple',
+        IS_FOCUSED: 'is-focused',
+        IS_DISABLED: 'is-disabled',
+        IS_CHECKED: 'is-checked',
+        IS_UPGRADED: 'is-upgraded'
+    };
+    /**
+     * Handle change of state.
+     *
+     * @param {Event} event The event that fired.
+     * @private
+     */
+    MaterialCheckbox.prototype.onChange_ = function (event) {
+        this.updateClasses_();
+    };
+    /**
+     * Handle focus of element.
+     *
+     * @param {Event} event The event that fired.
+     * @private
+     */
+    MaterialCheckbox.prototype.onFocus_ = function (event) {
+        this.element_.classList.add(this.CssClasses_.IS_FOCUSED);
+    };
+    /**
+     * Handle lost focus of element.
+     *
+     * @param {Event} event The event that fired.
+     * @private
+     */
+    MaterialCheckbox.prototype.onBlur_ = function (event) {
+        this.element_.classList.remove(this.CssClasses_.IS_FOCUSED);
+    };
+    /**
+     * Handle mouseup.
+     *
+     * @param {Event} event The event that fired.
+     * @private
+     */
+    MaterialCheckbox.prototype.onMouseUp_ = function (event) {
+        this.blur_();
+    };
+    /**
+     * Handle class updates.
+     *
+     * @private
+     */
+    MaterialCheckbox.prototype.updateClasses_ = function () {
+        this.checkDisabled();
+        this.checkToggleState();
+    };
+    /**
+     * Add blur.
+     *
+     * @private
+     */
+    MaterialCheckbox.prototype.blur_ = function () {
+        // TODO: figure out why there's a focus event being fired after our blur,
+        // so that we can avoid this hack.
+        window.setTimeout(function () {
+            this.inputElement_.blur();
+        }.bind(this), this.Constant_.TINY_TIMEOUT);
+    };
+// Public methods.
+    /**
+     * Check the inputs toggle state and update display.
+     *
+     * @public
+     */
+    MaterialCheckbox.prototype.checkToggleState = function () {
+        if (this.inputElement_.checked) {
+            this.element_.classList.add(this.CssClasses_.IS_CHECKED);
+        } else {
+            this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
+        }
+    };
+    MaterialCheckbox.prototype['checkToggleState'] = MaterialCheckbox.prototype.checkToggleState;
+    /**
+     * Check the inputs disabled state and update display.
+     *
+     * @public
+     */
+    MaterialCheckbox.prototype.checkDisabled = function () {
+        if (this.inputElement_.disabled) {
+            this.element_.classList.add(this.CssClasses_.IS_DISABLED);
+        } else {
+            this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
+        }
+    };
+    MaterialCheckbox.prototype['checkDisabled'] = MaterialCheckbox.prototype.checkDisabled;
+    /**
+     * Disable checkbox.
+     *
+     * @public
+     */
+    MaterialCheckbox.prototype.disable = function () {
+        this.inputElement_.disabled = true;
+        this.updateClasses_();
+    };
+    MaterialCheckbox.prototype['disable'] = MaterialCheckbox.prototype.disable;
+    /**
+     * Enable checkbox.
+     *
+     * @public
+     */
+    MaterialCheckbox.prototype.enable = function () {
+        this.inputElement_.disabled = false;
+        this.updateClasses_();
+    };
+    MaterialCheckbox.prototype['enable'] = MaterialCheckbox.prototype.enable;
+    /**
+     * Check checkbox.
+     *
+     * @public
+     */
+    MaterialCheckbox.prototype.check = function () {
+        this.inputElement_.checked = true;
+        this.updateClasses_();
+    };
+    MaterialCheckbox.prototype['check'] = MaterialCheckbox.prototype.check;
+    /**
+     * Uncheck checkbox.
+     *
+     * @public
+     */
+    MaterialCheckbox.prototype.uncheck = function () {
+        this.inputElement_.checked = false;
+        this.updateClasses_();
+    };
+    MaterialCheckbox.prototype['uncheck'] = MaterialCheckbox.prototype.uncheck;
+    /**
+     * Initialize element.
+     */
+    MaterialCheckbox.prototype.init = function () {
+        if (this.element_) {
+            this.inputElement_ = this.element_.querySelector('.' + this.CssClasses_.INPUT);
+            var boxOutline = document.createElement('span');
+            boxOutline.classList.add(this.CssClasses_.BOX_OUTLINE);
+            var tickContainer = document.createElement('span');
+            tickContainer.classList.add(this.CssClasses_.FOCUS_HELPER);
+            var tickOutline = document.createElement('span');
+            tickOutline.classList.add(this.CssClasses_.TICK_OUTLINE);
+            boxOutline.appendChild(tickOutline);
+            this.element_.appendChild(tickContainer);
+            this.element_.appendChild(boxOutline);
+            if (this.element_.classList.contains(this.CssClasses_.RIPPLE_EFFECT)) {
+                this.element_.classList.add(this.CssClasses_.RIPPLE_IGNORE_EVENTS);
+                this.rippleContainerElement_ = document.createElement('span');
+                this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_CONTAINER);
+                this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_EFFECT);
+                this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_CENTER);
+                this.boundRippleMouseUp = this.onMouseUp_.bind(this);
+                this.rippleContainerElement_.addEventListener('mouseup', this.boundRippleMouseUp);
+                var ripple = document.createElement('span');
+                ripple.classList.add(this.CssClasses_.RIPPLE);
+                this.rippleContainerElement_.appendChild(ripple);
+                this.element_.appendChild(this.rippleContainerElement_);
+            }
+            this.boundInputOnChange = this.onChange_.bind(this);
+            this.boundInputOnFocus = this.onFocus_.bind(this);
+            this.boundInputOnBlur = this.onBlur_.bind(this);
+            this.boundElementMouseUp = this.onMouseUp_.bind(this);
+            this.inputElement_.addEventListener('change', this.boundInputOnChange);
+            this.inputElement_.addEventListener('focus', this.boundInputOnFocus);
+            this.inputElement_.addEventListener('blur', this.boundInputOnBlur);
+            this.element_.addEventListener('mouseup', this.boundElementMouseUp);
+            this.updateClasses_();
+            this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
+        }
+    };
+// The component registers itself. It can assume componentHandler is available
+// in the global scope.
+    componentHandler.register({
+        constructor: MaterialCheckbox,
+        classAsString: 'MaterialCheckbox',
+        cssClass: 'mdl-js-checkbox',
+        widget: true
+    });
+    /**
+     * @license
+     * Copyright 2015 Google Inc. All Rights Reserved.
+     *
+     * 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.
+     */
+    /**
+     * Class constructor for icon toggle MDL component.
+     * Implements MDL component design pattern defined at:
+     * https://github.com/jasonmayes/mdl-component-design-pattern
+     *
+     * @constructor
+     * @param {HTMLElement} element The element that will be upgraded.
+     */
+    var MaterialIconToggle = function MaterialIconToggle(element) {
+        this.element_ = element;
+        // Initialize instance.
+        this.init();
+    };
+    window['MaterialIconToggle'] = MaterialIconToggle;
+    /**
+     * Store constants in one place so they can be updated easily.
+     *
+     * @enum {string | number}
+     * @private
+     */
+    MaterialIconToggle.prototype.Constant_ = {TINY_TIMEOUT: 0.001};
+    /**
+     * Store strings for class names defined by this component that are used in
+     * JavaScript. This allows us to simply change it in one place should we
+     * decide to modify at a later date.
+     *
+     * @enum {string}
+     * @private
+     */
+    MaterialIconToggle.prototype.CssClasses_ = {
+        INPUT: 'mdl-icon-toggle__input',
+        JS_RIPPLE_EFFECT: 'mdl-js-ripple-effect',
+        RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
+        RIPPLE_CONTAINER: 'mdl-icon-toggle__ripple-container',
+        RIPPLE_CENTER: 'mdl-ripple--center',
+        RIPPLE: 'mdl-ripple',
+        IS_FOCUSED: 'is-focused',
+        IS_DISABLED: 'is-disabled',
+        IS_CHECKED: 'is-checked'
+    };
+    /**
+     * Handle change of state.
+     *
+     * @param {Event} event The event that fired.
+     * @private
+     */
+    MaterialIconToggle.prototype.onChange_ = function (event) {
+        this.updateClasses_();
+    };
+    /**
+     * Handle focus of element.
+     *
+     * @param {Event} event The event that fired.
+     * @private
+     */
+    MaterialIconToggle.prototype.onFocus_ = function (event) {
+        this.element_.classList.add(this.CssClasses_.IS_FOCUSED);
+    };
+    /**
+     * Handle lost focus of element.
+     *
+     * @param {Event} event The event that fired.
+     * @private
+     */
+    MaterialIconToggle.prototype.onBlur_ = function (event) {
+        this.element_.classList.remove(this.CssClasses_.IS_FOCUSED);
+    };
+    /**
+     * Handle mouseup.
+     *
+     * @param {Event} event The event that fired.
+     * @private
+     */
+    MaterialIconToggle.prototype.onMouseUp_ = function (event) {
+        this.blur_();
+    };
+    /**
+     * Handle class updates.
+     *
+     * @private
+     */
+    MaterialIconToggle.prototype.updateClasses_ = function () {
+        this.checkDisabled();
+        this.checkToggleState();
+    };
+    /**
+     * Add blur.
+     *
+     * @private
+     */
+    MaterialIconToggle.prototype.blur_ = function () {
+        // TODO: figure out why there's a focus event being fired after our blur,
+        // so that we can avoid this hack.
+        window.setTimeout(function () {
+            this.inputElement_.blur();
+        }.bind(this), this.Constant_.TINY_TIMEOUT);
+    };
+// Public methods.
+    /**
+     * Check the inputs toggle state and update display.
+     *
+     * @public
+     */
+    MaterialIconToggle.prototype.checkToggleState = function () {
+        if (this.inputElement_.checked) {
+            this.element_.classList.add(this.CssClasses_.IS_CHECKED);
+        } else {
+            this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
+        }
+    };
+    MaterialIconToggle.prototype['checkToggleState'] = MaterialIconToggle.prototype.checkToggleState;
+    /**
+     * Check the inputs disabled state and update display.
+     *
+     * @public
+     */
+    MaterialIconToggle.prototype.checkDisabled = function () {
+        if (this.inputElement_.disabled) {
+            this.element_.classList.add(this.CssClasses_.IS_DISABLED);
+        } else {
+            this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
+        }
+    };
+    MaterialIconToggle.prototype['checkDisabled'] = MaterialIconToggle.prototype.checkDisabled;
+    /**
+     * Disable icon toggle.
+     *
+     * @public
+     */
+    MaterialIconToggle.prototype.disable = function () {
+        this.inputElement_.disabled = true;
+        this.updateClasses_();
+    };
+    MaterialIconToggle.prototype['disable'] = MaterialIconToggle.prototype.disable;
+    /**
+     * Enable icon toggle.
+     *
+     * @public
+     */
+    MaterialIconToggle.prototype.enable = function () {
+        this.inputElement_.disabled = false;
+        this.updateClasses_();
+    };
+    MaterialIconToggle.prototype['enable'] = MaterialIconToggle.prototype.enable;
+    /**
+     * Check icon toggle.
+     *
+     * @public
+     */
+    MaterialIconToggle.prototype.check = function () {
+        this.inputElement_.checked = true;
+        this.updateClasses_();
+    };
+    MaterialIconToggle.prototype['check'] = MaterialIconToggle.prototype.check;
+    /**
+     * Uncheck icon toggle.
+     *
+     * @public
+     */
+    MaterialIconToggle.prototype.uncheck = function () {
+        this.inputElement_.checked = false;
+        this.updateClasses_();
+    };
+    MaterialIconToggle.prototype['uncheck'] = MaterialIconToggle.prototype.uncheck;
+    /**
+     * Initialize element.
+     */
+    MaterialIconToggle.prototype.init = function () {
+        if (this.element_) {
+            this.inputElement_ = this.element_.querySelector('.' + this.CssClasses_.INPUT);
+            if (this.element_.classList.contains(this.CssClasses_.JS_RIPPLE_EFFECT)) {
+                this.element_.classList.add(this.CssClasses_.RIPPLE_IGNORE_EVENTS);
+                this.rippleContainerElement_ = document.createElement('span');
+                this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_CONTAINER);
+                this.rippleContainerElement_.classList.add(this.CssClasses_.JS_RIPPLE_EFFECT);
+                this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_CENTER);
+                this.boundRippleMouseUp = this.onMouseUp_.bind(this);
+                this.rippleContainerElement_.addEventListener('mouseup', this.boundRippleMouseUp);
+                var ripple = document.createElement('span');
+                ripple.classList.add(this.CssClasses_.RIPPLE);
+                this.rippleContainerElement_.appendChild(ripple);
+                this.element_.appendChild(this.rippleContainerElement_);
+            }
+            this.boundInputOnChange = this.onChange_.bind(this);
+            this.boundInputOnFocus = this.onFocus_.bind(this);
+            this.boundInputOnBlur = this.onBlur_.bind(this);
+            this.boundElementOnMouseUp = this.onMouseUp_.bind(this);
+            this.inputElement_.addEventListener('change', this.boundInputOnChange);
+            this.inputElement_.addEventListener('focus', this.boundInputOnFocus);
+            this.inputElement_.addEventListener('blur', this.boundInputOnBlur);
+            this.element_.addEventListener('mouseup', this.boundElementOnMouseUp);
+            this.updateClasses_();
+            this.element_.classList.add('is-upgraded');
+        }
+    };
+// The component registers itself. It can assume componentHandler is available
+// in the global scope.
+    componentHandler.register({
+        constructor: MaterialIconToggle,
+        classAsString: 'MaterialIconToggle',
+        cssClass: 'mdl-js-icon-toggle',
+        widget: true
+    });
+    /**
+     * @license
+     * Copyright 2015 Google Inc. All Rights Reserved.
+     *
+     * 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.
+     */
+    /**
+     * Class constructor for dropdown MDL component.
+     * Implements MDL component design pattern defined at:
+     * https://github.com/jasonmayes/mdl-component-design-pattern
+     *
+     * @constructor
+     * @param {HTMLElement} element The element that will be upgraded.
+     */
+    var MaterialMenu = function MaterialMenu(element) {
+        this.element_ = element;
+        // Initialize instance.
+        this.init();
+    };
+    window['MaterialMenu'] = MaterialMenu;
+    /**
+     * Store constants in one place so they can be updated easily.
+     *
+     * @enum {string | number}
+     * @private
+     */
+    MaterialMenu.prototype.Constant_ = {
+        // Total duration of the menu animation.
+        TRANSITION_DURATION_SECONDS: 0.3,
+        // The fraction of the total duration we want to use for menu item animations.
+        TRANSITION_DURATION_FRACTION: 0.8,
+        // How long the menu stays open after choosing an option (so the user can see
+        // the ripple).
+        CLOSE_TIMEOUT: 150
+    };
+    /**
+     * Keycodes, for code readability.
+     *
+     * @enum {number}
+     * @private
+     */
+    MaterialMenu.prototype.Keycodes_ = {
+        ENTER: 13,
+        ESCAPE: 27,
+        SPACE: 32,
+        UP_ARROW: 38,
+        DOWN_ARROW: 40
+    };
+    /**
+     * Store strings for class names defined by this component that are used in
+     * JavaScript. This allows us to simply change it in one place should we
+     * decide to modify at a later date.
+     *
+     * @enum {string}
+     * @private
+     */
+    MaterialMenu.prototype.CssClasses_ = {
+        CONTAINER: 'mdl-menu__container',
+        OUTLINE: 'mdl-menu__outline',
+        ITEM: 'mdl-menu__item',
+        ITEM_RIPPLE_CONTAINER: 'mdl-menu__item-ripple-container',
+        RIPPLE_EFFECT: 'mdl-js-ripple-effect',
+        RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
+        RIPPLE: 'mdl-ripple',
+        // Statuses
+        IS_UPGRADED: 'is-upgraded',
+        IS_VISIBLE: 'is-visible',
+        IS_ANIMATING: 'is-animating',
+        // Alignment options
+        BOTTOM_LEFT: 'mdl-menu--bottom-left',
+        // This is the default.
+        BOTTOM_RIGHT: 'mdl-menu--bottom-right',
+        TOP_LEFT: 'mdl-menu--top-left',
+        TOP_RIGHT: 'mdl-menu--top-right',
+        UNALIGNED: 'mdl-menu--unaligned'
+    };
+    /**
+     * Initialize element.
+     */
+    MaterialMenu.prototype.init = function () {
+        if (this.element_) {
+            // Create container for the menu.
+            var container = document.createElement('div');
+            container.classList.add(this.CssClasses_.CONTAINER);
+            this.element_.parentElement.insertBefore(container, this.element_);
+            this.element_.parentElement.removeChild(this.element_);
+            container.appendChild(this.element_);
+            this.container_ = container;
+            // Create outline for the menu (shadow and background).
+            var outline = document.createElement('div');
+            outline.classList.add(this.CssClasses_.OUTLINE);
+            this.outline_ = outline;
+            container.insertBefore(outline, this.element_);
+            // Find the "for" element and bind events to it.
+            var forElId = this.element_.getAttribute('for') || this.element_.getAttribute('data-mdl-for');
+            var forEl = null;
+            if (forElId) {
+                forEl = document.getElementById(forElId);
+                if (forEl) {
+                    this.forElement_ = forEl;
+                    forEl.addEventListener('click', this.handleForClick_.bind(this));
+                    forEl.addEventListener('keydown', this.handleForKeyboardEvent_.bind(this));
+                }
+            }
+            var items = this.element_.querySelectorAll('.' + this.CssClasses_.ITEM);
+            this.boundItemKeydown_ = this.handleItemKeyboardEvent_.bind(this);
+            this.boundItemClick_ = this.handleItemClick_.bind(this);
+            for (var i = 0; i < items.length; i++) {
+                // Add a listener to each menu item.
+                items[i].addEventListener('click', this.boundItemClick_);
+                // Add a tab index to each menu item.
+                items[i].tabIndex = '-1';
+                // Add a keyboard listener to each menu item.
+                items[i].addEventListener('keydown', this.boundItemKeydown_);
+            }
+            // Add ripple classes to each item, if the user has enabled ripples.
+            if (this.element_.classList.contains(this.CssClasses_.RIPPLE_EFFECT)) {
+                this.element_.classList.add(this.CssClasses_.RIPPLE_IGNORE_EVENTS);
+                for (i = 0; i < items.length; i++) {
+                    var item = items[i];
+                    var rippleContainer = document.createElement('span');
+                    rippleContainer.classList.add(this.CssClasses_.ITEM_RIPPLE_CONTAINER);
+                    var ripple = document.createElement('span');
+                    ripple.classList.add(this.CssClasses_.RIPPLE);
+                    rippleContainer.appendChild(ripple);
+                    item.appendChild(rippleContainer);
+                    item.classList.add(this.CssClasses_.RIPPLE_EFFECT);
+                }
+            }
+            // Copy alignment classes to the container, so the outline can use them.
+            if (this.element_.classList.contains(this.CssClasses_.BOTTOM_LEFT)) {
+                this.outline_.classList.add(this.CssClasses_.BOTTOM_LEFT);
+            }
+            if (this.element_.classList.contains(this.CssClasses_.BOTTOM_RIGHT)) {
+                this.outline_.classList.add(this.CssClasses_.BOTTOM_RIGHT);
+            }
+            if (this.element_.classList.contains(this.CssClasses_.TOP_LEFT)) {
+                this.outline_.classList.add(this.CssClasses_.TOP_LEFT);
+            }
+            if (this.element_.classList.contains(this.CssClasses_.TOP_RIGHT)) {
+                this.outline_.classList.add(this.CssClasses_.TOP_RIGHT);
+            }
+            if (this.element_.classList.contains(this.CssClasses_.UNALIGNED)) {
+                this.outline_.classList.add(this.CssClasses_.UNALIGNED);
+            }
+            container.classList.add(this.CssClasses_.IS_UPGRADED);
+        }
+    };
+    /**
+     * Handles a click on the "for" element, by positioning the menu and then
+     * toggling it.
+     *
+     * @param {Event} evt The event that fired.
+     * @private
+     */
+    MaterialMenu.prototype.handleForClick_ = function (evt) {
+        if (this.element_ && this.forElement_) {
+            var rect = this.forElement_.getBoundingClientRect();
+            var forRect = this.forElement_.parentElement.getBoundingClientRect();
+            if (this.element_.classList.contains(this.CssClasses_.UNALIGNED)) {
+            } else if (this.element_.classList.contains(this.CssClasses_.BOTTOM_RIGHT)) {
+                // Position below the "for" element, aligned to its right.
+                this.container_.style.right = forRect.right - rect.right + 'px';
+                this.container_.style.top = this.forElement_.offsetTop + this.forElement_.offsetHeight + 'px';
+            } else if (this.element_.classList.contains(this.CssClasses_.TOP_LEFT)) {
+                // Position above the "for" element, aligned to its left.
+                this.container_.style.left = this.forElement_.offsetLeft + 'px';
+                this.container_.style.bottom = forRect.bottom - rect.top + 'px';
+            } else if (this.element_.classList.contains(this.CssClasses_.TOP_RIGHT)) {
+                // Position above the "for" element, aligned to its right.
+                this.container_.style.right = forRect.right - rect.right + 'px';
+                this.container_.style.bottom = forRect.bottom - rect.top + 'px';
+            } else {
+                // Default: position below the "for" element, aligned to its left.
+                this.container_.style.left = this.forElement_.offsetLeft + 'px';
+                this.container_.style.top = this.forElement_.offsetTop + this.forElement_.offsetHeight + 'px';
+            }
+        }
+        this.toggle(evt);
+    };
+    /**
+     * Handles a keyboard event on the "for" element.
+     *
+     * @param {Event} evt The event that fired.
+     * @private
+     */
+    MaterialMenu.prototype.handleForKeyboardEvent_ = function (evt) {
+        if (this.element_ && this.container_ && this.forElement_) {
+            var items = this.element_.querySelectorAll('.' + this.CssClasses_.ITEM + ':not([disabled])');
+            if (items && items.length > 0 && this.container_.classList.contains(this.CssClasses_.IS_VISIBLE)) {
+                if (evt.keyCode === this.Keycodes_.UP_ARROW) {
+                    evt.preventDefault();
+                    items[items.length - 1].focus();
+                } else if (evt.keyCode === this.Keycodes_.DOWN_ARROW) {
+                    evt.preventDefault();
+                    items[0].focus();
+                }
+            }
+        }
+    };
+    /**
+     * Handles a keyboard event on an item.
+     *
+     * @param {Event} evt The event that fired.
+     * @private
+     */
+    MaterialMenu.prototype.handleItemKeyboardEvent_ = function (evt) {
+        if (this.element_ && this.container_) {
+            var items = this.element_.querySelectorAll('.' + this.CssClasses_.ITEM + ':not([disabled])');
+            if (items && items.length > 0 && this.container_.classList.contains(this.CssClasses_.IS_VISIBLE)) {
+                var currentIndex = Array.prototype.slice.call(items).indexOf(evt.target);
+                if (evt.keyCode === this.Keycodes_.UP_ARROW) {
+                    evt.preventDefault();
+                    if (currentIndex > 0) {
+                        items[currentIndex - 1].focus();
+                    } else {
+                        items[items.length - 1].focus();
+                    }
+                } else if (evt.keyCode === this.Keycodes_.DOWN_ARROW) {
+                    evt.preventDefault();
+                    if (items.length > currentIndex + 1) {
+                        items[currentIndex + 1].focus();
+                    } else {
+                        items[0].focus();
+                    }
+                } else if (evt.keyCode === this.Keycodes_.SPACE || evt.keyCode === this.Keycodes_.ENTER) {
+                    evt.preventDefault();
+                    // Send mousedown and mouseup to trigger ripple.
+                    var e = new MouseEvent('mousedown');
+                    evt.target.dispatchEvent(e);
+                    e = new MouseEvent('mouseup');
+                    evt.target.dispatchEvent(e);
+                    // Send click.
+                    evt.target.click();
+                } else if (evt.keyCode === this.Keycodes_.ESCAPE) {
+                    evt.preventDefault();
+                    this.hide();
+                }
+            }
+        }
+    };
+    /**
+     * Handles a click event on an item.
+     *
+     * @param {Event} evt The event that fired.
+     * @private
+     */
+    MaterialMenu.prototype.handleItemClick_ = function (evt) {
+        if (evt.target.hasAttribute('disabled')) {
+            evt.stopPropagation();
+        } else {
+            // Wait some time before closing menu, so the user can see the ripple.
+            this.closing_ = true;
+            window.setTimeout(function (evt) {
+                this.hide();
+                this.closing_ = false;
+            }.bind(this), this.Constant_.CLOSE_TIMEOUT);
+        }
+    };
+    /**
+     * Calculates the initial clip (for opening the menu) or final clip (for closing
+     * it), and applies it. This allows us to animate from or to the correct point,
+     * that is, the point it's aligned to in the "for" element.
+     *
+     * @param {number} height Height of the clip rectangle
+     * @param {number} width Width of the clip rectangle
+     * @private
+     */
+    MaterialMenu.prototype.applyClip_ = function (height, width) {
+        if (this.element_.classList.contains(this.CssClasses_.UNALIGNED)) {
+            // Do not clip.
+            this.element_.style.clip = '';
+        } else if (this.element_.classList.contains(this.CssClasses_.BOTTOM_RIGHT)) {
+            // Clip to the top right corner of the menu.
+            this.element_.style.clip = 'rect(0 ' + width + 'px ' + '0 ' + width + 'px)';
+        } else if (this.element_.classList.contains(this.CssClasses_.TOP_LEFT)) {
+            // Clip to the bottom left corner of the menu.
+            this.element_.style.clip = 'rect(' + height + 'px 0 ' + height + 'px 0)';
+        } else if (this.element_.classList.contains(this.CssClasses_.TOP_RIGHT)) {
+            // Clip to the bottom right corner of the menu.
+            this.element_.style.clip = 'rect(' + height + 'px ' + width + 'px ' + height + 'px ' + width + 'px)';
+        } else {
+            // Default: do not clip (same as clipping to the top left corner).
+            this.element_.style.clip = '';
+        }
+    };
+    /**
+     * Cleanup function to remove animation listeners.
+     *
+     * @param {Event} evt
+     * @private
+     */
+    MaterialMenu.prototype.removeAnimationEndListener_ = function (evt) {
+        evt.target.classList.remove(MaterialMenu.prototype.CssClasses_.IS_ANIMATING);
+    };
+    /**
+     * Adds an event listener to clean up after the animation ends.
+     *
+     * @private
+     */
+    MaterialMenu.prototype.addAnimationEndListener_ = function () {
+        this.element_.addEventListener('transitionend', this.removeAnimationEndListener_);
+        this.element_.addEventListener('webkitTransitionEnd', this.removeAnimationEndListener_);
+    };
+    /**
+     * Displays the menu.
+     *
+     * @public
+     */
+    MaterialMenu.prototype.show = function (evt) {
+        if (this.element_ && this.container_ && this.outline_) {
+            // Measure the inner element.
+            var height = this.element_.getBoundingClientRect().height;
+            var width = this.element_.getBoundingClientRect().width;
+            // Apply the inner element's size to the container and outline.
+            this.container_.style.width = width + 'px';
+            this.container_.style.height = height + 'px';
+            this.outline_.style.width = width + 'px';
+            this.outline_.style.height = height + 'px';
+            var transitionDuration = this.Constant_.TRANSITION_DURATION_SECONDS * this.Constant_.TRANSITION_DURATION_FRACTION;
+            // Calculate transition delays for individual menu items, so that they fade
+            // in one at a time.
+            var items = this.element_.querySelectorAll('.' + this.CssClasses_.ITEM);
+            for (var i = 0; i < items.length; i++) {
+                var itemDelay = null;
+                if (this.element_.classList.contains(this.CssClasses_.TOP_LEFT) || this.element_.classList.contains(this.CssClasses_.TOP_RIGHT)) {
+                    itemDelay = (height - items[i].offsetTop - items[i].offsetHeight) / height * transitionDuration + 's';
+                } else {
+                    itemDelay = items[i].offsetTop / height * transitionDuration + 's';
+                }
+                items[i].style.transitionDelay = itemDelay;
+            }
+            // Apply the initial clip to the text before we start animating.
+            this.applyClip_(height, width);
+            // Wait for the next frame, turn on animation, and apply the final clip.
+            // Also make it visible. This triggers the transitions.
+            window.requestAnimationFrame(function () {
+                this.element_.classList.add(this.CssClasses_.IS_ANIMATING);
+                this.element_.style.clip = 'rect(0 ' + width + 'px ' + height + 'px 0)';
+                this.container_.classList.add(this.CssClasses_.IS_VISIBLE);
+            }.bind(this));
+            // Clean up after the animation is complete.
+            this.addAnimationEndListener_();
+            // Add a click listener to the document, to close the menu.
+            var callback = function (e) {
+                // Check to see if the document is processing the same event that
+                // displayed the menu in the first place. If so, do nothing.
+                // Also check to see if the menu is in the process of closing itself, and
+                // do nothing in that case.
+                // Also check if the clicked element is a menu item
+                // if so, do nothing.
+                if (e !== evt && !this.closing_ && e.target.parentNode !== this.element_) {
+                    document.removeEventListener('click', callback);
+                    this.hide();
+                }
+            }.bind(this);
+            document.addEventListener('click', callback);
+        }
+    };
+    MaterialMenu.prototype['show'] = MaterialMenu.prototype.show;
+    /**
+     * Hides the menu.
+     *
+     * @public
+     */
+    MaterialMenu.prototype.hide = function () {
+        if (this.element_ && this.container_ && this.outline_) {
+            var items = this.element_.querySelectorAll('.' + this.CssClasses_.ITEM);
+            // Remove all transition delays; menu items fade out concurrently.
+            for (var i = 0; i < items.length; i++) {
+                items[i].style.removeProperty('transition-delay');
+            }
+            // Measure the inner element.
+            var rect = this.element_.getBoundingClientRect();
+            var height = rect.height;
+            var width = rect.width;
+            // Turn on animation, and apply the final clip. Also make invisible.
+            // This triggers the transitions.
+            this.element_.classList.add(this.CssClasses_.IS_ANIMATING);
+            this.applyClip_(height, width);
+            this.container_.classList.remove(this.CssClasses_.IS_VISIBLE);
+            // Clean up after the animation is complete.
+            this.addAnimationEndListener_();
+        }
+    };
+    MaterialMenu.prototype['hide'] = MaterialMenu.prototype.hide;
+    /**
+     * Displays or hides the menu, depending on current state.
+     *
+     * @public
+     */
+    MaterialMenu.prototype.toggle = function (evt) {
+        if (this.container_.classList.contains(this.CssClasses_.IS_VISIBLE)) {
+            this.hide();
+        } else {
+            this.show(evt);
+        }
+    };
+    MaterialMenu.prototype['toggle'] = MaterialMenu.prototype.toggle;
+// The component registers itself. It can assume componentHandler is available
+// in the global scope.
+    componentHandler.register({
+        constructor: MaterialMenu,
+        classAsString: 'MaterialMenu',
+        cssClass: 'mdl-js-menu',
+        widget: true
+    });
+    /**
+     * @license
+     * Copyright 2015 Google Inc. All Rights Reserved.
+     *
+     * 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.
+     */
+    /**
+     * Class constructor for Progress MDL component.
+     * Implements MDL component design pattern defined at:
+     * https://github.com/jasonmayes/mdl-component-design-pattern
+     *
+     * @constructor
+     * @param {HTMLElement} element The element that will be upgraded.
+     */
+    var MaterialProgress = function MaterialProgress(element) {
+        this.element_ = element;
+        // Initialize instance.
+        this.init();
+    };
+    window['MaterialProgress'] = MaterialProgress;
+    /**
+     * Store constants in one place so they can be updated easily.
+     *
+     * @enum {string | number}
+     * @private
+     */
+    MaterialProgress.prototype.Constant_ = {};
+    /**
+     * Store strings for class names defined by this component that are used in
+     * JavaScript. This allows us to simply change it in one place should we
+     * decide to modify at a later date.
+     *
+     * @enum {string}
+     * @private
+     */
+    MaterialProgress.prototype.CssClasses_ = {INDETERMINATE_CLASS: 'mdl-progress__indeterminate'};
+    /**
+     * Set the current progress of the progressbar.
+     *
+     * @param {number} p Percentage of the progress (0-100)
+     * @public
+     */
+    MaterialProgress.prototype.setProgress = function (p) {
+        if (this.element_.classList.contains(this.CssClasses_.INDETERMINATE_CLASS)) {
+            return;
+        }
+        this.progressbar_.style.width = p + '%';
+    };
+    MaterialProgress.prototype['setProgress'] = MaterialProgress.prototype.setProgress;
+    /**
+     * Set the current progress of the buffer.
+     *
+     * @param {number} p Percentage of the buffer (0-100)
+     * @public
+     */
+    MaterialProgress.prototype.setBuffer = function (p) {
+        this.bufferbar_.style.width = p + '%';
+        this.auxbar_.style.width = 100 - p + '%';
+    };
+    MaterialProgress.prototype['setBuffer'] = MaterialProgress.prototype.setBuffer;
+    /**
+     * Initialize element.
+     */
+    MaterialProgress.prototype.init = function () {
+        if (this.element_) {
+            var el = document.createElement('div');
+            el.className = 'progressbar bar bar1';
+            this.element_.appendChild(el);
+            this.progressbar_ = el;
+            el = document.createElement('div');
+            el.className = 'bufferbar bar bar2';
+            this.element_.appendChild(el);
+            this.bufferbar_ = el;
+            el = document.createElement('div');
+            el.className = 'auxbar bar bar3';
+            this.element_.appendChild(el);
+            this.auxbar_ = el;
+            this.progressbar_.style.width = '0%';
+            this.bufferbar_.style.width = '100%';
+            this.auxbar_.style.width = '0%';
+            this.element_.classList.add('is-upgraded');
+        }
+    };
+// The component registers itself. It can assume componentHandler is available
+// in the global scope.
+    componentHandler.register({
+        constructor: MaterialProgress,
+        classAsString: 'MaterialProgress',
+        cssClass: 'mdl-js-progress',
+        widget: true
+    });
+    /**
+     * @license
+     * Copyright 2015 Google Inc. All Rights Reserved.
+     *
+     * 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.
+     */
+    /**
+     * Class constructor for Radio MDL component.
+     * Implements MDL component design pattern defined at:
+     * https://github.com/jasonmayes/mdl-component-design-pattern
+     *
+     * @constructor
+     * @param {HTMLElement} element The element that will be upgraded.
+     */
+    var MaterialRadio = function MaterialRadio(element) {
+        this.element_ = element;
+        // Initialize instance.
+        this.init();
+    };
+    window['MaterialRadio'] = MaterialRadio;
+    /**
+     * Store constants in one place so they can be updated easily.
+     *
+     * @enum {string | number}
+     * @private
+     */
+    MaterialRadio.prototype.Constant_ = {TINY_TIMEOUT: 0.001};
+    /**
+     * Store strings for class names defined by this component that are used in
+     * JavaScript. This allows us to simply change it in one place should we
+     * decide to modify at a later date.
+     *
+     * @enum {string}
+     * @private
+     */
+    MaterialRadio.prototype.CssClasses_ = {
+        IS_FOCUSED: 'is-focused',
+        IS_DISABLED: 'is-disabled',
+        IS_CHECKED: 'is-checked',
+        IS_UPGRADED: 'is-upgraded',
+        JS_RADIO: 'mdl-js-radio',
+        RADIO_BTN: 'mdl-radio__button',
+        RADIO_OUTER_CIRCLE: 'mdl-radio__outer-circle',
+        RADIO_INNER_CIRCLE: 'mdl-radio__inner-circle',
+        RIPPLE_EFFECT: 'mdl-js-ripple-effect',
+        RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
+        RIPPLE_CONTAINER: 'mdl-radio__ripple-container',
+        RIPPLE_CENTER: 'mdl-ripple--center',
+        RIPPLE: 'mdl-ripple'
+    };
+    /**
+     * Handle change of state.
+     *
+     * @param {Event} event The event that fired.
+     * @private
+     */
+    MaterialRadio.prototype.onChange_ = function (event) {
+        // Since other radio buttons don't get change events, we need to look for
+        // them to update their classes.
+        var radios = document.getElementsByClassName(this.CssClasses_.JS_RADIO);
+        for (var i = 0; i < radios.length; i++) {
+            var button = radios[i].querySelector('.' + this.CssClasses_.RADIO_BTN);
+            // Different name == different group, so no point updating those.
+            if (button.getAttribute('name') === this.btnElement_.getAttribute('name')) {
+                if (typeof radios[i]['MaterialRadio'] !== 'undefined') {
+                    radios[i]['MaterialRadio'].updateClasses_();
+                }
+            }
+        }
+    };
+    /**
+     * Handle focus.
+     *
+     * @param {Event} event The event that fired.
+     * @private
+     */
+    MaterialRadio.prototype.onFocus_ = function (event) {
+        this.element_.classList.add(this.CssClasses_.IS_FOCUSED);
+    };
+    /**
+     * Handle lost focus.
+     *
+     * @param {Event} event The event that fired.
+     * @private
+     */
+    MaterialRadio.prototype.onBlur_ = function (event) {
+        this.element_.classList.remove(this.CssClasses_.IS_FOCUSED);
+    };
+    /**
+     * Handle mouseup.
+     *
+     * @param {Event} event The event that fired.
+     * @private
+     */
+    MaterialRadio.prototype.onMouseup_ = function (event) {
+        this.blur_();
+    };
+    /**
+     * Update classes.
+     *
+     * @private
+     */
+    MaterialRadio.prototype.updateClasses_ = function () {
+        this.checkDisabled();
+        this.checkToggleState();
+    };
+    /**
+     * Add blur.
+     *
+     * @private
+     */
+    MaterialRadio.prototype.blur_ = function () {
+        // TODO: figure out why there's a focus event being fired after our blur,
+        // so that we can avoid this hack.
+        window.setTimeout(function () {
+            this.btnElement_.blur();
+        }.bind(this), this.Constant_.TINY_TIMEOUT);
+    };
+// Public methods.
+    /**
+     * Check the components disabled state.
+     *
+     * @public
+     */
+    MaterialRadio.prototype.checkDisabled = function () {
+        if (this.btnElement_.disabled) {
+            this.element_.classList.add(this.CssClasses_.IS_DISABLED);
+        } else {
+            this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
+        }
+    };
+    MaterialRadio.prototype['checkDisabled'] = MaterialRadio.prototype.checkDisabled;
+    /**
+     * Check the components toggled state.
+     *
+     * @public
+     */
+    MaterialRadio.prototype.checkToggleState = function () {
+        if (this.btnElement_.checked) {
+            this.element_.classList.add(this.CssClasses_.IS_CHECKED);
+        } else {
+            this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
+        }
+    };
+    MaterialRadio.prototype['checkToggleState'] = MaterialRadio.prototype.checkToggleState;
+    /**
+     * Disable radio.
+     *
+     * @public
+     */
+    MaterialRadio.prototype.disable = function () {
+        this.btnElement_.disabled = true;
+        this.updateClasses_();
+    };
+    MaterialRadio.prototype['disable'] = MaterialRadio.prototype.disable;
+    /**
+     * Enable radio.
+     *
+     * @public
+     */
+    MaterialRadio.prototype.enable = function () {
+        this.btnElement_.disabled = false;
+        this.updateClasses_();
+    };
+    MaterialRadio.prototype['enable'] = MaterialRadio.prototype.enable;
+    /**
+     * Check radio.
+     *
+     * @public
+     */
+    MaterialRadio.prototype.check = function () {
+        this.btnElement_.checked = true;
+        this.onChange_(null);
+    };
+    MaterialRadio.prototype['check'] = MaterialRadio.prototype.check;
+    /**
+     * Uncheck radio.
+     *
+     * @public
+     */
+    MaterialRadio.prototype.uncheck = function () {
+        this.btnElement_.checked = false;
+        this.onChange_(null);
+    };
+    MaterialRadio.prototype['uncheck'] = MaterialRadio.prototype.uncheck;
+    /**
+     * Initialize element.
+     */
+    MaterialRadio.prototype.init = function () {
+        if (this.element_) {
+            this.btnElement_ = this.element_.querySelector('.' + this.CssClasses_.RADIO_BTN);
+            this.boundChangeHandler_ = this.onChange_.bind(this);
+            this.boundFocusHandler_ = this.onChange_.bind(this);
+            this.boundBlurHandler_ = this.onBlur_.bind(this);
+            this.boundMouseUpHandler_ = this.onMouseup_.bind(this);
+            var outerCircle = document.createElement('span');
+            outerCircle.classList.add(this.CssClasses_.RADIO_OUTER_CIRCLE);
+            var innerCircle = document.createElement('span');
+            innerCircle.classList.add(this.CssClasses_.RADIO_INNER_CIRCLE);
+            this.element_.appendChild(outerCircle);
+            this.element_.appendChild(innerCircle);
+            var rippleContainer;
+            if (this.element_.classList.contains(this.CssClasses_.RIPPLE_EFFECT)) {
+                this.element_.classList.add(this.CssClasses_.RIPPLE_IGNORE_EVENTS);
+                rippleContainer = document.createElement('span');
+                rippleContainer.classList.add(this.CssClasses_.RIPPLE_CONTAINER);
+                rippleContainer.classList.add(this.CssClasses_.RIPPLE_EFFECT);
+                rippleContainer.classList.add(this.CssClasses_.RIPPLE_CENTER);
+                rippleContainer.addEventListener('mouseup', this.boundMouseUpHandler_);
+                var ripple = document.createElement('span');
+                ripple.classList.add(this.CssClasses_.RIPPLE);
+                rippleContainer.appendChild(ripple);
+                this.element_.appendChild(rippleContainer);
+            }
+            this.btnElement_.addEventListener('change', this.boundChangeHandler_);
+            this.btnElement_.addEventListener('focus', this.boundFocusHandler_);
+            this.btnElement_.addEventListener('blur', this.boundBlurHandler_);
+            this.element_.addEventListener('mouseup', this.boundMouseUpHandler_);
+            this.updateClasses_();
+            this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
+        }
+    };
+// The component registers itself. It can assume componentHandler is available
+// in the global scope.
+    componentHandler.register({
+        constructor: MaterialRadio,
+        classAsString: 'MaterialRadio',
+        cssClass: 'mdl-js-radio',
+        widget: true
+    });
+    /**
+     * @license
+     * Copyright 2015 Google Inc. All Rights Reserved.
+     *
+     * 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.
+     */
+    /**
+     * Class constructor for Slider MDL component.
+     * Implements MDL component design pattern defined at:
+     * https://github.com/jasonmayes/mdl-component-design-pattern
+     *
+     * @constructor
+     * @param {HTMLElement} element The element that will be upgraded.
+     */
+    var MaterialSlider = function MaterialSlider(element) {
+        this.element_ = element;
+        // Browser feature detection.
+        this.isIE_ = window.navigator.msPointerEnabled;
+        // Initialize instance.
+        this.init();
+    };
+    window['MaterialSlider'] = MaterialSlider;
+    /**
+     * Store constants in one place so they can be updated easily.
+     *
+     * @enum {string | number}
+     * @private
+     */
+    MaterialSlider.prototype.Constant_ = {};
+    /**
+     * Store strings for class names defined by this component that are used in
+     * JavaScript. This allows us to simply change it in one place should we
+     * decide to modify at a later date.
+     *
+     * @enum {string}
+     * @private
+     */
+    MaterialSlider.prototype.CssClasses_ = {
+        IE_CONTAINER: 'mdl-slider__ie-container',
+        SLIDER_CONTAINER: 'mdl-slider__container',
+        BACKGROUND_FLEX: 'mdl-slider__background-flex',
+        BACKGROUND_LOWER: 'mdl-slider__background-lower',
+        BACKGROUND_UPPER: 'mdl-slider__background-upper',
+        IS_LOWEST_VALUE: 'is-lowest-value',
+        IS_UPGRADED: 'is-upgraded'
+    };
+    /**
+     * Handle input on element.
+     *
+     * @param {Event} event The event that fired.
+     * @private
+     */
+    MaterialSlider.prototype.onInput_ = function (event) {
+        this.updateValueStyles_();
+    };
+    /**
+     * Handle change on element.
+     *
+     * @param {Event} event The event that fired.
+     * @private
+     */
+    MaterialSlider.prototype.onChange_ = function (event) {
+        this.updateValueStyles_();
+    };
+    /**
+     * Handle mouseup on element.
+     *
+     * @param {Event} event The event that fired.
+     * @private
+     */
+    MaterialSlider.prototype.onMouseUp_ = function (event) {
+        event.target.blur();
+    };
+    /**
+     * Handle mousedown on container element.
+     * This handler is purpose is to not require the use to click
+     * exactly on the 2px slider element, as FireFox seems to be very
+     * strict about this.
+     *
+     * @param {Event} event The event that fired.
+     * @private
+     * @suppress {missingProperties}
+     */
+    MaterialSlider.prototype.onContainerMouseDown_ = function (event) {
+        // If this click is not on the parent element (but rather some child)
+        // ignore. It may still bubble up.
+        if (event.target !== this.element_.parentElement) {
+            return;
+        }
+        // Discard the original event and create a new event that
+        // is on the slider element.
+        event.preventDefault();
+        var newEvent = new MouseEvent('mousedown', {
+            target: event.target,
+            buttons: event.buttons,
+            clientX: event.clientX,
+            clientY: this.element_.getBoundingClientRect().y
+        });
+        this.element_.dispatchEvent(newEvent);
+    };
+    /**
+     * Handle updating of values.
+     *
+     * @private
+     */
+    MaterialSlider.prototype.updateValueStyles_ = function () {
+        // Calculate and apply percentages to div structure behind slider.
+        var fraction = (this.element_.value - this.element_.min) / (this.element_.max - this.element_.min);
+        if (fraction === 0) {
+            this.element_.classList.add(this.CssClasses_.IS_LOWEST_VALUE);
+        } else {
+            this.element_.classList.remove(this.CssClasses_.IS_LOWEST_VALUE);
+        }
+        if (!this.isIE_) {
+            this.backgroundLower_.style.flex = fraction;
+            this.backgroundLower_.style.webkitFlex = fraction;
+            this.backgroundUpper_.style.flex = 1 - fraction;
+            this.backgroundUpper_.style.webkitFlex = 1 - fraction;
+        }
+    };
+// Public methods.
+    /**
+     * Disable slider.
+     *
+     * @public
+     */
+    MaterialSlider.prototype.disable = function () {
+        this.element_.disabled = true;
+    };
+    MaterialSlider.prototype['disable'] = MaterialSlider.prototype.disable;
+    /**
+     * Enable slider.
+     *
+     * @public
+     */
+    MaterialSlider.prototype.enable = function () {
+        this.element_.disabled = false;
+    };
+    MaterialSlider.prototype['enable'] = MaterialSlider.prototype.enable;
+    /**
+     * Update slider value.
+     *
+     * @param {number} value The value to which to set the control (optional).
+     * @public
+     */
+    MaterialSlider.prototype.change = function (value) {
+        if (typeof value !== 'undefined') {
+            this.element_.value = value;
+        }
+        this.updateValueStyles_();
+    };
+    MaterialSlider.prototype['change'] = MaterialSlider.prototype.change;
+    /**
+     * Initialize element.
+     */
+    MaterialSlider.prototype.init = function () {
+        if (this.element_) {
+            if (this.isIE_) {
+                // Since we need to specify a very large height in IE due to
+                // implementation limitations, we add a parent here that trims it down to
+                // a reasonable size.
+                var containerIE = document.createElement('div');
+                containerIE.classList.add(this.CssClasses_.IE_CONTAINER);
+                this.element_.parentElement.insertBefore(containerIE, this.element_);
+                this.element_.parentElement.removeChild(this.element_);
+                containerIE.appendChild(this.element_);
+            } else {
+                // For non-IE browsers, we need a div structure that sits behind the
+                // slider and allows us to style the left and right sides of it with
+                // different colors.
+                var container = document.createElement('div');
+                container.classList.add(this.CssClasses_.SLIDER_CONTAINER);
+                this.element_.parentElement.insertBefore(container, this.element_);
+                this.element_.parentElement.removeChild(this.element_);
+                container.appendChild(this.element_);
+                var backgroundFlex = document.createElement('div');
+                backgroundFlex.classList.add(this.CssClasses_.BACKGROUND_FLEX);
+                container.appendChild(backgroundFlex);
+                this.backgroundLower_ = document.createElement('div');
+                this.backgroundLower_.classList.add(this.CssClasses_.BACKGROUND_LOWER);
+                backgroundFlex.appendChild(this.backgroundLower_);
+                this.backgroundUpper_ = document.createElement('div');
+                this.backgroundUpper_.classList.add(this.CssClasses_.BACKGROUND_UPPER);
+                backgroundFlex.appendChild(this.backgroundUpper_);
+            }
+            this.boundInputHandler = this.onInput_.bind(this);
+            this.boundChangeHandler = this.onChange_.bind(this);
+            this.boundMouseUpHandler = this.onMouseUp_.bind(this);
+            this.boundContainerMouseDownHandler = this.onContainerMouseDown_.bind(this);
+            this.element_.addEventListener('input', this.boundInputHandler);
+            this.element_.addEventListener('change', this.boundChangeHandler);
+            this.element_.addEventListener('mouseup', this.boundMouseUpHandler);
+            this.element_.parentElement.addEventListener('mousedown', this.boundContainerMouseDownHandler);
+            this.updateValueStyles_();
+            this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
+        }
+    };
+// The component registers itself. It can assume componentHandler is available
+// in the global scope.
+    componentHandler.register({
+        constructor: MaterialSlider,
+        classAsString: 'MaterialSlider',
+        cssClass: 'mdl-js-slider',
+        widget: true
+    });
+    /**
+     * Copyright 2015 Google Inc. All Rights Reserved.
+     *
+     * 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.
+     */
+    /**
+     * Class constructor for Snackbar MDL component.
+     * Implements MDL component design pattern defined at:
+     * https://github.com/jasonmayes/mdl-component-design-pattern
+     *
+     * @constructor
+     * @param {HTMLElement} element The element that will be upgraded.
+     */
+    var MaterialSnackbar = function MaterialSnackbar(element) {
+        this.element_ = element;
+        this.textElement_ = this.element_.querySelector('.' + this.cssClasses_.MESSAGE);
+        this.actionElement_ = this.element_.querySelector('.' + this.cssClasses_.ACTION);
+        if (!this.textElement_) {
+            throw new Error('There must be a message element for a snackbar.');
+        }
+        if (!this.actionElement_) {
+            throw new Error('There must be an action element for a snackbar.');
+        }
+        this.active = false;
+        this.actionHandler_ = undefined;
+        this.message_ = undefined;
+        this.actionText_ = undefined;
+        this.queuedNotifications_ = [];
+        this.setActionHidden_(true);
+    };
+    window['MaterialSnackbar'] = MaterialSnackbar;
+    /**
+     * Store constants in one place so they can be updated easily.
+     *
+     * @enum {string | number}
+     * @private
+     */
+    MaterialSnackbar.prototype.Constant_ = {
+        // The duration of the snackbar show/hide animation, in ms.
+        ANIMATION_LENGTH: 250
+    };
+    /**
+     * Store strings for class names defined by this component that are used in
+     * JavaScript. This allows us to simply change it in one place should we
+     * decide to modify at a later date.
+     *
+     * @enum {string}
+     * @private
+     */
+    MaterialSnackbar.prototype.cssClasses_ = {
+        SNACKBAR: 'mdl-snackbar',
+        MESSAGE: 'mdl-snackbar__text',
+        ACTION: 'mdl-snackbar__action',
+        ACTIVE: 'mdl-snackbar--active'
+    };
+    /**
+     * Display the snackbar.
+     *
+     * @private
+     */
+    MaterialSnackbar.prototype.displaySnackbar_ = function () {
+        this.element_.setAttribute('aria-hidden', 'true');
+        if (this.actionHandler_) {
+            this.actionElement_.textContent = this.actionText_;
+            this.actionElement_.addEventListener('click', this.actionHandler_);
+            this.setActionHidden_(false);
+        }
+        this.textElement_.textContent = this.message_;
+        this.element_.classList.add(this.cssClasses_.ACTIVE);
+        this.element_.setAttribute('aria-hidden', 'false');
+        setTimeout(this.cleanup_.bind(this), this.timeout_);
+    };
+    /**
+     * Show the snackbar.
+     *
+     * @param {Object} data The data for the notification.
+     * @public
+     */
+    MaterialSnackbar.prototype.showSnackbar = function (data) {
+        if (data === undefined) {
+            throw new Error('Please provide a data object with at least a message to display.');
+        }
+        if (data['message'] === undefined) {
+            throw new Error('Please provide a message to be displayed.');
+        }
+        if (data['actionHandler'] && !data['actionText']) {
+            throw new Error('Please provide action text with the handler.');
+        }
+        if (this.active) {
+            this.queuedNotifications_.push(data);
+        } else {
+            this.active = true;
+            this.message_ = data['message'];
+            if (data['timeout']) {
+                this.timeout_ = data['timeout'];
+            } else {
+                this.timeout_ = 2750;
+            }
+            if (data['actionHandler']) {
+                this.actionHandler_ = data['actionHandler'];
+            }
+            if (data['actionText']) {
+                this.actionText_ = data['actionText'];
+            }
+            this.displaySnackbar_();
+        }
+    };
+    MaterialSnackbar.prototype['showSnackbar'] = MaterialSnackbar.prototype.showSnackbar;
+    /**
+     * Check if the queue has items within it.
+     * If it does, display the next entry.
+     *
+     * @private
+     */
+    MaterialSnackbar.prototype.checkQueue_ = function () {
+        if (this.queuedNotifications_.length > 0) {
+            this.showSnackbar(this.queuedNotifications_.shift());
+        }
+    };
+    /**
+     * Cleanup the snackbar event listeners and accessiblity attributes.
+     *
+     * @private
+     */
+    MaterialSnackbar.prototype.cleanup_ = function () {
+        this.element_.classList.remove(this.cssClasses_.ACTIVE);
+        setTimeout(function () {
+            this.element_.setAttribute('aria-hidden', 'true');
+            this.textElement_.textContent = '';
+            if (!Boolean(this.actionElement_.getAttribute('aria-hidden'))) {
+                this.setActionHidden_(true);
+                this.actionElement_.textContent = '';
+                this.actionElement_.removeEventListener('click', this.actionHandler_);
+            }
+            this.actionHandler_ = undefined;
+            this.message_ = undefined;
+            this.actionText_ = undefined;
+            this.active = false;
+            this.checkQueue_();
+        }.bind(this), this.Constant_.ANIMATION_LENGTH);
+    };
+    /**
+     * Set the action handler hidden state.
+     *
+     * @param {boolean} value
+     * @private
+     */
+    MaterialSnackbar.prototype.setActionHidden_ = function (value) {
+        if (value) {
+            this.actionElement_.setAttribute('aria-hidden', 'true');
+        } else {
+            this.actionElement_.removeAttribute('aria-hidden');
+        }
+    };
+// The component registers itself. It can assume componentHandler is available
+// in the global scope.
+    componentHandler.register({
+        constructor: MaterialSnackbar,
+        classAsString: 'MaterialSnackbar',
+        cssClass: 'mdl-js-snackbar',
+        widget: true
+    });
+    /**
+     * @license
+     * Copyright 2015 Google Inc. All Rights Reserved.
+     *
+     * 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.
+     */
+    /**
+     * Class constructor for Spinner MDL component.
+     * Implements MDL component design pattern defined at:
+     * https://github.com/jasonmayes/mdl-component-design-pattern
+     *
+     * @param {HTMLElement} element The element that will be upgraded.
+     * @constructor
+     */
+    var MaterialSpinner = function MaterialSpinner(element) {
+        this.element_ = element;
+        // Initialize instance.
+        this.init();
+    };
+    window['MaterialSpinner'] = MaterialSpinner;
+    /**
+     * Store constants in one place so they can be updated easily.
+     *
+     * @enum {string | number}
+     * @private
+     */
+    MaterialSpinner.prototype.Constant_ = {MDL_SPINNER_LAYER_COUNT: 4};
+    /**
+     * Store strings for class names defined by this component that are used in
+     * JavaScript. This allows us to simply change it in one place should we
+     * decide to modify at a later date.
+     *
+     * @enum {string}
+     * @private
+     */
+    MaterialSpinner.prototype.CssClasses_ = {
+        MDL_SPINNER_LAYER: 'mdl-spinner__layer',
+        MDL_SPINNER_CIRCLE_CLIPPER: 'mdl-spinner__circle-clipper',
+        MDL_SPINNER_CIRCLE: 'mdl-spinner__circle',
+        MDL_SPINNER_GAP_PATCH: 'mdl-spinner__gap-patch',
+        MDL_SPINNER_LEFT: 'mdl-spinner__left',
+        MDL_SPINNER_RIGHT: 'mdl-spinner__right'
+    };
+    /**
+     * Auxiliary method to create a spinner layer.
+     *
+     * @param {number} index Index of the layer to be created.
+     * @public
+     */
+    MaterialSpinner.prototype.createLayer = function (index) {
+        var layer = document.createElement('div');
+        layer.classList.add(this.CssClasses_.MDL_SPINNER_LAYER);
+        layer.classList.add(this.CssClasses_.MDL_SPINNER_LAYER + '-' + index);
+        var leftClipper = document.createElement('div');
+        leftClipper.classList.add(this.CssClasses_.MDL_SPINNER_CIRCLE_CLIPPER);
+        leftClipper.classList.add(this.CssClasses_.MDL_SPINNER_LEFT);
+        var gapPatch = document.createElement('div');
+        gapPatch.classList.add(this.CssClasses_.MDL_SPINNER_GAP_PATCH);
+        var rightClipper = document.createElement('div');
+        rightClipper.classList.add(this.CssClasses_.MDL_SPINNER_CIRCLE_CLIPPER);
+        rightClipper.classList.add(this.CssClasses_.MDL_SPINNER_RIGHT);
+        var circleOwners = [
+            leftClipper,
+            gapPatch,
+            rightClipper
+        ];
+        for (var i = 0; i < circleOwners.length; i++) {
+            var circle = document.createElement('div');
+            circle.classList.add(this.CssClasses_.MDL_SPINNER_CIRCLE);
+            circleOwners[i].appendChild(circle);
+        }
+        layer.appendChild(leftClipper);
+        layer.appendChild(gapPatch);
+        layer.appendChild(rightClipper);
+        this.element_.appendChild(layer);
+    };
+    MaterialSpinner.prototype['createLayer'] = MaterialSpinner.prototype.createLayer;
+    /**
+     * Stops the spinner animation.
+     * Public method for users who need to stop the spinner for any reason.
+     *
+     * @public
+     */
+    MaterialSpinner.prototype.stop = function () {
+        this.element_.classList.remove('is-active');
+    };
+    MaterialSpinner.prototype['stop'] = MaterialSpinner.prototype.stop;
+    /**
+     * Starts the spinner animation.
+     * Public method for users who need to manually start the spinner for any reason
+     * (instead of just adding the 'is-active' class to their markup).
+     *
+     * @public
+     */
+    MaterialSpinner.prototype.start = function () {
+        this.element_.classList.add('is-active');
+    };
+    MaterialSpinner.prototype['start'] = MaterialSpinner.prototype.start;
+    /**
+     * Initialize element.
+     */
+    MaterialSpinner.prototype.init = function () {
+        if (this.element_) {
+            for (var i = 1; i <= this.Constant_.MDL_SPINNER_LAYER_COUNT; i++) {
+                this.createLayer(i);
+            }
+            this.element_.classList.add('is-upgraded');
+        }
+    };
+// The component registers itself. It can assume componentHandler is available
+// in the global scope.
+    componentHandler.register({
+        constructor: MaterialSpinner,
+        classAsString: 'MaterialSpinner',
+        cssClass: 'mdl-js-spinner',
+        widget: true
+    });
+    /**
+     * @license
+     * Copyright 2015 Google Inc. All Rights Reserved.
+     *
+     * 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.
+     */
+    /**
+     * Class constructor for Checkbox MDL component.
+     * Implements MDL component design pattern defined at:
+     * https://github.com/jasonmayes/mdl-component-design-pattern
+     *
+     * @constructor
+     * @param {HTMLElement} element The element that will be upgraded.
+     */
+    var MaterialSwitch = function MaterialSwitch(element) {
+        this.element_ = element;
+        // Initialize instance.
+        this.init();
+    };
+    window['MaterialSwitch'] = MaterialSwitch;
+    /**
+     * Store constants in one place so they can be updated easily.
+     *
+     * @enum {string | number}
+     * @private
+     */
+    MaterialSwitch.prototype.Constant_ = {TINY_TIMEOUT: 0.001};
+    /**
+     * Store strings for class names defined by this component that are used in
+     * JavaScript. This allows us to simply change it in one place should we
+     * decide to modify at a later date.
+     *
+     * @enum {string}
+     * @private
+     */
+    MaterialSwitch.prototype.CssClasses_ = {
+        INPUT: 'mdl-switch__input',
+        TRACK: 'mdl-switch__track',
+        THUMB: 'mdl-switch__thumb',
+        FOCUS_HELPER: 'mdl-switch__focus-helper',
+        RIPPLE_EFFECT: 'mdl-js-ripple-effect',
+        RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
+        RIPPLE_CONTAINER: 'mdl-switch__ripple-container',
+        RIPPLE_CENTER: 'mdl-ripple--center',
+        RIPPLE: 'mdl-ripple',
+        IS_FOCUSED: 'is-focused',
+        IS_DISABLED: 'is-disabled',
+        IS_CHECKED: 'is-checked'
+    };
+    /**
+     * Handle change of state.
+     *
+     * @param {Event} event The event that fired.
+     * @private
+     */
+    MaterialSwitch.prototype.onChange_ = function (event) {
+        this.updateClasses_();
+    };
+    /**
+     * Handle focus of element.
+     *
+     * @param {Event} event The event that fired.
+     * @private
+     */
+    MaterialSwitch.prototype.onFocus_ = function (event) {
+        this.element_.classList.add(this.CssClasses_.IS_FOCUSED);
+    };
+    /**
+     * Handle lost focus of element.
+     *
+     * @param {Event} event The event that fired.
+     * @private
+     */
+    MaterialSwitch.prototype.onBlur_ = function (event) {
+        this.element_.classList.remove(this.CssClasses_.IS_FOCUSED);
+    };
+    /**
+     * Handle mouseup.
+     *
+     * @param {Event} event The event that fired.
+     * @private
+     */
+    MaterialSwitch.prototype.onMouseUp_ = function (event) {
+        this.blur_();
+    };
+    /**
+     * Handle class updates.
+     *
+     * @private
+     */
+    MaterialSwitch.prototype.updateClasses_ = function () {
+        this.checkDisabled();
+        this.checkToggleState();
+    };
+    /**
+     * Add blur.
+     *
+     * @private
+     */
+    MaterialSwitch.prototype.blur_ = function () {
+        // TODO: figure out why there's a focus event being fired after our blur,
+        // so that we can avoid this hack.
+        window.setTimeout(function () {
+            this.inputElement_.blur();
+        }.bind(this), this.Constant_.TINY_TIMEOUT);
+    };
+// Public methods.
+    /**
+     * Check the components disabled state.
+     *
+     * @public
+     */
+    MaterialSwitch.prototype.checkDisabled = function () {
+        if (this.inputElement_.disabled) {
+            this.element_.classList.add(this.CssClasses_.IS_DISABLED);
+        } else {
+            this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
+        }
+    };
+    MaterialSwitch.prototype['checkDisabled'] = MaterialSwitch.prototype.checkDisabled;
+    /**
+     * Check the components toggled state.
+     *
+     * @public
+     */
+    MaterialSwitch.prototype.checkToggleState = function () {
+        if (this.inputElement_.checked) {
+            this.element_.classList.add(this.CssClasses_.IS_CHECKED);
+        } else {
+            this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
+        }
+    };
+    MaterialSwitch.prototype['checkToggleState'] = MaterialSwitch.prototype.checkToggleState;
+    /**
+     * Disable switch.
+     *
+     * @public
+     */
+    MaterialSwitch.prototype.disable = function () {
+        this.inputElement_.disabled = true;
+        this.updateClasses_();
+    };
+    MaterialSwitch.prototype['disable'] = MaterialSwitch.prototype.disable;
+    /**
+     * Enable switch.
+     *
+     * @public
+     */
+    MaterialSwitch.prototype.enable = function () {
+        this.inputElement_.disabled = false;
+        this.updateClasses_();
+    };
+    MaterialSwitch.prototype['enable'] = MaterialSwitch.prototype.enable;
+    /**
+     * Activate switch.
+     *
+     * @public
+     */
+    MaterialSwitch.prototype.on = function () {
+        this.inputElement_.checked = true;
+        this.updateClasses_();
+    };
+    MaterialSwitch.prototype['on'] = MaterialSwitch.prototype.on;
+    /**
+     * Deactivate switch.
+     *
+     * @public
+     */
+    MaterialSwitch.prototype.off = function () {
+        this.inputElement_.checked = false;
+        this.updateClasses_();
+    };
+    MaterialSwitch.prototype['off'] = MaterialSwitch.prototype.off;
+    /**
+     * Initialize element.
+     */
+    MaterialSwitch.prototype.init = function () {
+        if (this.element_) {
+            this.inputElement_ = this.element_.querySelector('.' + this.CssClasses_.INPUT);
+            var track = document.createElement('div');
+            track.classList.add(this.CssClasses_.TRACK);
+            var thumb = document.createElement('div');
+            thumb.classList.add(this.CssClasses_.THUMB);
+            var focusHelper = document.createElement('span');
+            focusHelper.classList.add(this.CssClasses_.FOCUS_HELPER);
+            thumb.appendChild(focusHelper);
+            this.element_.appendChild(track);
+            this.element_.appendChild(thumb);
+            this.boundMouseUpHandler = this.onMouseUp_.bind(this);
+            if (this.element_.classList.contains(this.CssClasses_.RIPPLE_EFFECT)) {
+                this.element_.classList.add(this.CssClasses_.RIPPLE_IGNORE_EVENTS);
+                this.rippleContainerElement_ = document.createElement('span');
+                this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_CONTAINER);
+                this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_EFFECT);
+                this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_CENTER);
+                this.rippleContainerElement_.addEventListener('mouseup', this.boundMouseUpHandler);
+                var ripple = document.createElement('span');
+                ripple.classList.add(this.CssClasses_.RIPPLE);
+                this.rippleContainerElement_.appendChild(ripple);
+                this.element_.appendChild(this.rippleContainerElement_);
+            }
+            this.boundChangeHandler = this.onChange_.bind(this);
+            this.boundFocusHandler = this.onFocus_.bind(this);
+            this.boundBlurHandler = this.onBlur_.bind(this);
+            this.inputElement_.addEventListener('change', this.boundChangeHandler);
+            this.inputElement_.addEventListener('focus', this.boundFocusHandler);
+            this.inputElement_.addEventListener('blur', this.boundBlurHandler);
+            this.element_.addEventListener('mouseup', this.boundMouseUpHandler);
+            this.updateClasses_();
+            this.element_.classList.add('is-upgraded');
+        }
+    };
+// The component registers itself. It can assume componentHandler is available
+// in the global scope.
+    componentHandler.register({
+        constructor: MaterialSwitch,
+        classAsString: 'MaterialSwitch',
+        cssClass: 'mdl-js-switch',
+        widget: true
+    });
+    /**
+     * @license
+     * Copyright 2015 Google Inc. All Rights Reserved.
+     *
+     * 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.
+     */
+    /**
+     * Class constructor for Tabs MDL component.
+     * Implements MDL component design pattern defined at:
+     * https://github.com/jasonmayes/mdl-component-design-pattern
+     *
+     * @constructor
+     * @param {Element} element The element that will be upgraded.
+     */
+    var MaterialTabs = function MaterialTabs(element) {
+        // Stores the HTML element.
+        this.element_ = element;
+        // Initialize instance.
+        this.init();
+    };
+    window['MaterialTabs'] = MaterialTabs;
+    /**
+     * Store constants in one place so they can be updated easily.
+     *
+     * @enum {string}
+     * @private
+     */
+    MaterialTabs.prototype.Constant_ = {};
+    /**
+     * Store strings for class names defined by this component that are used in
+     * JavaScript. This allows us to simply change it in one place should we
+     * decide to modify at a later date.
+     *
+     * @enum {string}
+     * @private
+     */
+    MaterialTabs.prototype.CssClasses_ = {
+        TAB_CLASS: 'mdl-tabs__tab',
+        PANEL_CLASS: 'mdl-tabs__panel',
+        ACTIVE_CLASS: 'is-active',
+        UPGRADED_CLASS: 'is-upgraded',
+        MDL_JS_RIPPLE_EFFECT: 'mdl-js-ripple-effect',
+        MDL_RIPPLE_CONTAINER: 'mdl-tabs__ripple-container',
+        MDL_RIPPLE: 'mdl-ripple',
+        MDL_JS_RIPPLE_EFFECT_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events'
+    };
+    /**
+     * Handle clicks to a tabs component
+     *
+     * @private
+     */
+    MaterialTabs.prototype.initTabs_ = function () {
+        if (this.element_.classList.contains(this.CssClasses_.MDL_JS_RIPPLE_EFFECT)) {
+            this.element_.classList.add(this.CssClasses_.MDL_JS_RIPPLE_EFFECT_IGNORE_EVENTS);
+        }
+        // Select element tabs, document panels
+        this.tabs_ = this.element_.querySelectorAll('.' + this.CssClasses_.TAB_CLASS);
+        this.panels_ = this.element_.querySelectorAll('.' + this.CssClasses_.PANEL_CLASS);
+        // Create new tabs for each tab element
+        for (var i = 0; i < this.tabs_.length; i++) {
+            new MaterialTab(this.tabs_[i], this);
+        }
+        this.element_.classList.add(this.CssClasses_.UPGRADED_CLASS);
+    };
+    /**
+     * Reset tab state, dropping active classes
+     *
+     * @private
+     */
+    MaterialTabs.prototype.resetTabState_ = function () {
+        for (var k = 0; k < this.tabs_.length; k++) {
+            this.tabs_[k].classList.remove(this.CssClasses_.ACTIVE_CLASS);
+        }
+    };
+    /**
+     * Reset panel state, droping active classes
+     *
+     * @private
+     */
+    MaterialTabs.prototype.resetPanelState_ = function () {
+        for (var j = 0; j < this.panels_.length; j++) {
+            this.panels_[j].classList.remove(this.CssClasses_.ACTIVE_CLASS);
+        }
+    };
+    /**
+     * Initialize element.
+     */
+    MaterialTabs.prototype.init = function () {
+        if (this.element_) {
+            this.initTabs_();
+        }
+    };
+
+    /**
+     * Constructor for an individual tab.
+     *
+     * @constructor
+     * @param {Element} tab The HTML element for the tab.
+     * @param {MaterialTabs} ctx The MaterialTabs object that owns the tab.
+     */
+    function MaterialTab(tab, ctx) {
+        if (tab) {
+            if (ctx.element_.classList.contains(ctx.CssClasses_.MDL_JS_RIPPLE_EFFECT)) {
+                var rippleContainer = document.createElement('span');
+                rippleContainer.classList.add(ctx.CssClasses_.MDL_RIPPLE_CONTAINER);
+                rippleContainer.classList.add(ctx.CssClasses_.MDL_JS_RIPPLE_EFFECT);
+                var ripple = document.createElement('span');
+                ripple.classList.add(ctx.CssClasses_.MDL_RIPPLE);
+                rippleContainer.appendChild(ripple);
+                tab.appendChild(rippleContainer);
+            }
+            tab.addEventListener('click', function (e) {
+                if (tab.getAttribute('href').charAt(0) === '#') {
+                    e.preventDefault();
+                    var href = tab.href.split('#')[1];
+                    var panel = ctx.element_.querySelector('#' + href);
+                    ctx.resetTabState_();
+                    ctx.resetPanelState_();
+                    tab.classList.add(ctx.CssClasses_.ACTIVE_CLASS);
+                    panel.classList.add(ctx.CssClasses_.ACTIVE_CLASS);
+                }
+            });
+        }
+    }
+
+// The component registers itself. It can assume componentHandler is available
+// in the global scope.
+    componentHandler.register({
+        constructor: MaterialTabs,
+        classAsString: 'MaterialTabs',
+        cssClass: 'mdl-js-tabs'
+    });
+    /**
+     * @license
+     * Copyright 2015 Google Inc. All Rights Reserved.
+     *
+     * 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.
+     */
+    /**
+     * Class constructor for Textfield MDL component.
+     * Implements MDL component design pattern defined at:
+     * https://github.com/jasonmayes/mdl-component-design-pattern
+     *
+     * @constructor
+     * @param {HTMLElement} element The element that will be upgraded.
+     */
+    var MaterialTextfield = function MaterialTextfield(element) {
+        this.element_ = element;
+        this.maxRows = this.Constant_.NO_MAX_ROWS;
+        // Initialize instance.
+        this.init();
+    };
+    window['MaterialTextfield'] = MaterialTextfield;
+    /**
+     * Store constants in one place so they can be updated easily.
+     *
+     * @enum {string | number}
+     * @private
+     */
+    MaterialTextfield.prototype.Constant_ = {
+        NO_MAX_ROWS: -1,
+        MAX_ROWS_ATTRIBUTE: 'maxrows'
+    };
+    /**
+     * Store strings for class names defined by this component that are used in
+     * JavaScript. This allows us to simply change it in one place should we
+     * decide to modify at a later date.
+     *
+     * @enum {string}
+     * @private
+     */
+    MaterialTextfield.prototype.CssClasses_ = {
+        LABEL: 'mdl-textfield__label',
+        INPUT: 'mdl-textfield__input',
+        IS_DIRTY: 'is-dirty',
+        IS_FOCUSED: 'is-focused',
+        IS_DISABLED: 'is-disabled',
+        IS_INVALID: 'is-invalid',
+        IS_UPGRADED: 'is-upgraded',
+        HAS_PLACEHOLDER: 'has-placeholder'
+    };
+    /**
+     * Handle input being entered.
+     *
+     * @param {Event} event The event that fired.
+     * @private
+     */
+    MaterialTextfield.prototype.onKeyDown_ = function (event) {
+        var currentRowCount = event.target.value.split('\n').length;
+        if (event.keyCode === 13) {
+            if (currentRowCount >= this.maxRows) {
+                event.preventDefault();
+            }
+        }
+    };
+    /**
+     * Handle focus.
+     *
+     * @param {Event} event The event that fired.
+     * @private
+     */
+    MaterialTextfield.prototype.onFocus_ = function (event) {
+        this.element_.classList.add(this.CssClasses_.IS_FOCUSED);
+    };
+    /**
+     * Handle lost focus.
+     *
+     * @param {Event} event The event that fired.
+     * @private
+     */
+    MaterialTextfield.prototype.onBlur_ = function (event) {
+        this.element_.classList.remove(this.CssClasses_.IS_FOCUSED);
+    };
+    /**
+     * Handle reset event from out side.
+     *
+     * @param {Event} event The event that fired.
+     * @private
+     */
+    MaterialTextfield.prototype.onReset_ = function (event) {
+        this.updateClasses_();
+    };
+    /**
+     * Handle class updates.
+     *
+     * @private
+     */
+    MaterialTextfield.prototype.updateClasses_ = function () {
+        this.checkDisabled();
+        this.checkValidity();
+        this.checkDirty();
+        this.checkFocus();
+    };
+// Public methods.
+    /**
+     * Check the disabled state and update field accordingly.
+     *
+     * @public
+     */
+    MaterialTextfield.prototype.checkDisabled = function () {
+        if (this.input_.disabled) {
+            this.element_.classList.add(this.CssClasses_.IS_DISABLED);
+        } else {
+            this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
+        }
+    };
+    MaterialTextfield.prototype['checkDisabled'] = MaterialTextfield.prototype.checkDisabled;
+    /**
+     * Check the focus state and update field accordingly.
+     *
+     * @public
+     */
+    MaterialTextfield.prototype.checkFocus = function () {
+        if (Boolean(this.element_.querySelector(':focus'))) {
+            this.element_.classList.add(this.CssClasses_.IS_FOCUSED);
+        } else {
+            this.element_.classList.remove(this.CssClasses_.IS_FOCUSED);
+        }
+    };
+    MaterialTextfield.prototype['checkFocus'] = MaterialTextfield.prototype.checkFocus;
+    /**
+     * Check the validity state and update field accordingly.
+     *
+     * @public
+     */
+    MaterialTextfield.prototype.checkValidity = function () {
+        if (this.input_.validity) {
+            if (this.input_.validity.valid) {
+                this.element_.classList.remove(this.CssClasses_.IS_INVALID);
+            } else {
+                this.element_.classList.add(this.CssClasses_.IS_INVALID);
+            }
+        }
+    };
+    MaterialTextfield.prototype['checkValidity'] = MaterialTextfield.prototype.checkValidity;
+    /**
+     * Check the dirty state and update field accordingly.
+     *
+     * @public
+     */
+    MaterialTextfield.prototype.checkDirty = function () {
+        if (this.input_.value && this.input_.value.length > 0) {
+            this.element_.classList.add(this.CssClasses_.IS_DIRTY);
+        } else {
+            this.element_.classList.remove(this.CssClasses_.IS_DIRTY);
+        }
+    };
+    MaterialTextfield.prototype['checkDirty'] = MaterialTextfield.prototype.checkDirty;
+    /**
+     * Disable text field.
+     *
+     * @public
+     */
+    MaterialTextfield.prototype.disable = function () {
+        this.input_.disabled = true;
+        this.updateClasses_();
+    };
+    MaterialTextfield.prototype['disable'] = MaterialTextfield.prototype.disable;
+    /**
+     * Enable text field.
+     *
+     * @public
+     */
+    MaterialTextfield.prototype.enable = function () {
+        this.input_.disabled = false;
+        this.updateClasses_();
+    };
+    MaterialTextfield.prototype['enable'] = MaterialTextfield.prototype.enable;
+    /**
+     * Update text field value.
+     *
+     * @param {string} value The value to which to set the control (optional).
+     * @public
+     */
+    MaterialTextfield.prototype.change = function (value) {
+        this.input_.value = value || '';
+        this.updateClasses_();
+    };
+    MaterialTextfield.prototype['change'] = MaterialTextfield.prototype.change;
+    /**
+     * Initialize element.
+     */
+    MaterialTextfield.prototype.init = function () {
+        if (this.element_) {
+            this.label_ = this.element_.querySelector('.' + this.CssClasses_.LABEL);
+            this.input_ = this.element_.querySelector('.' + this.CssClasses_.INPUT);
+            if (this.input_) {
+                if (this.input_.hasAttribute(this.Constant_.MAX_ROWS_ATTRIBUTE)) {
+                    this.maxRows = parseInt(this.input_.getAttribute(this.Constant_.MAX_ROWS_ATTRIBUTE), 10);
+                    if (isNaN(this.maxRows)) {
+                        this.maxRows = this.Constant_.NO_MAX_ROWS;
+                    }
+                }
+                if (this.input_.hasAttribute('placeholder')) {
+                    this.element_.classList.add(this.CssClasses_.HAS_PLACEHOLDER);
+                }
+                this.boundUpdateClassesHandler = this.updateClasses_.bind(this);
+                this.boundFocusHandler = this.onFocus_.bind(this);
+                this.boundBlurHandler = this.onBlur_.bind(this);
+                this.boundResetHandler = this.onReset_.bind(this);
+                this.input_.addEventListener('input', this.boundUpdateClassesHandler);
+                this.input_.addEventListener('focus', this.boundFocusHandler);
+                this.input_.addEventListener('blur', this.boundBlurHandler);
+                this.input_.addEventListener('reset', this.boundResetHandler);
+                if (this.maxRows !== this.Constant_.NO_MAX_ROWS) {
+                    // TODO: This should handle pasting multi line text.
+                    // Currently doesn't.
+                    this.boundKeyDownHandler = this.onKeyDown_.bind(this);
+                    this.input_.addEventListener('keydown', this.boundKeyDownHandler);
+                }
+                var invalid = this.element_.classList.contains(this.CssClasses_.IS_INVALID);
+                this.updateClasses_();
+                this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
+                if (invalid) {
+                    this.element_.classList.add(this.CssClasses_.IS_INVALID);
+                }
+                if (this.input_.hasAttribute('autofocus')) {
+                    this.element_.focus();
+                    this.checkFocus();
+                }
+            }
+        }
+    };
+// The component registers itself. It can assume componentHandler is available
+// in the global scope.
+    componentHandler.register({
+        constructor: MaterialTextfield,
+        classAsString: 'MaterialTextfield',
+        cssClass: 'mdl-js-textfield',
+        widget: true
+    });
+    /**
+     * @license
+     * Copyright 2015 Google Inc. All Rights Reserved.
+     *
+     * 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.
+     */
+    /**
+     * Class constructor for Tooltip MDL component.
+     * Implements MDL component design pattern defined at:
+     * https://github.com/jasonmayes/mdl-component-design-pattern
+     *
+     * @constructor
+     * @param {HTMLElement} element The element that will be upgraded.
+     */
+    var MaterialTooltip = function MaterialTooltip(element) {
+        this.element_ = element;
+        // Initialize instance.
+        this.init();
+    };
+    window['MaterialTooltip'] = MaterialTooltip;
+    /**
+     * Store constants in one place so they can be updated easily.
+     *
+     * @enum {string | number}
+     * @private
+     */
+    MaterialTooltip.prototype.Constant_ = {};
+    /**
+     * Store strings for class names defined by this component that are used in
+     * JavaScript. This allows us to simply change it in one place should we
+     * decide to modify at a later date.
+     *
+     * @enum {string}
+     * @private
+     */
+    MaterialTooltip.prototype.CssClasses_ = {
+        IS_ACTIVE: 'is-active',
+        BOTTOM: 'mdl-tooltip--bottom',
+        LEFT: 'mdl-tooltip--left',
+        RIGHT: 'mdl-tooltip--right',
+        TOP: 'mdl-tooltip--top'
+    };
+    /**
+     * Handle mouseenter for tooltip.
+     *
+     * @param {Event} event The event that fired.
+     * @private
+     */
+    MaterialTooltip.prototype.handleMouseEnter_ = function (event) {
+        var props = event.target.getBoundingClientRect();
+        var left = props.left + props.width / 2;
+        var top = props.top + props.height / 2;
+        var marginLeft = -1 * (this.element_.offsetWidth / 2);
+        var marginTop = -1 * (this.element_.offsetHeight / 2);
+        if (this.element_.classList.contains(this.CssClasses_.LEFT) || this.element_.classList.contains(this.CssClasses_.RIGHT)) {
+            left = props.width / 2;
+            if (top + marginTop < 0) {
+                this.element_.style.top = '0';
+                this.element_.style.marginTop = '0';
+            } else {
+                this.element_.style.top = top + 'px';
+                this.element_.style.marginTop = marginTop + 'px';
+            }
+        } else {
+            if (left + marginLeft < 0) {
+                this.element_.style.left = '0';
+                this.element_.style.marginLeft = '0';
+            } else {
+                this.element_.style.left = left + 'px';
+                this.element_.style.marginLeft = marginLeft + 'px';
+            }
+        }
+        if (this.element_.classList.contains(this.CssClasses_.TOP)) {
+            this.element_.style.top = props.top - this.element_.offsetHeight - 10 + 'px';
+        } else if (this.element_.classList.contains(this.CssClasses_.RIGHT)) {
+            this.element_.style.left = props.left + props.width + 10 + 'px';
+        } else if (this.element_.classList.contains(this.CssClasses_.LEFT)) {
+            this.element_.style.left = props.left - this.element_.offsetWidth - 10 + 'px';
+        } else {
+            this.element_.style.top = props.top + props.height + 10 + 'px';
+        }
+        this.element_.classList.add(this.CssClasses_.IS_ACTIVE);
+    };
+    /**
+     * Hide tooltip on mouseleave or scroll
+     *
+     * @private
+     */
+    MaterialTooltip.prototype.hideTooltip_ = function () {
+        this.element_.classList.remove(this.CssClasses_.IS_ACTIVE);
+    };
+    /**
+     * Initialize element.
+     */
+    MaterialTooltip.prototype.init = function () {
+        if (this.element_) {
+            var forElId = this.element_.getAttribute('for') || this.element_.getAttribute('data-mdl-for');
+            if (forElId) {
+                this.forElement_ = document.getElementById(forElId);
+            }
+            if (this.forElement_) {
+                // It's left here because it prevents accidental text selection on Android
+                if (!this.forElement_.hasAttribute('tabindex')) {
+                    this.forElement_.setAttribute('tabindex', '0');
+                }
+                this.boundMouseEnterHandler = this.handleMouseEnter_.bind(this);
+                this.boundMouseLeaveAndScrollHandler = this.hideTooltip_.bind(this);
+                this.forElement_.addEventListener('mouseenter', this.boundMouseEnterHandler, false);
+                this.forElement_.addEventListener('touchend', this.boundMouseEnterHandler, false);
+                this.forElement_.addEventListener('mouseleave', this.boundMouseLeaveAndScrollHandler, false);
+                window.addEventListener('scroll', this.boundMouseLeaveAndScrollHandler, true);
+                window.addEventListener('touchstart', this.boundMouseLeaveAndScrollHandler);
+            }
+        }
+    };
+// The component registers itself. It can assume componentHandler is available
+// in the global scope.
+    componentHandler.register({
+        constructor: MaterialTooltip,
+        classAsString: 'MaterialTooltip',
+        cssClass: 'mdl-tooltip'
+    });
+    /**
+     * @license
+     * Copyright 2015 Google Inc. All Rights Reserved.
+     *
+     * 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.
+     */
+    /**
+     * Class constructor for Layout MDL component.
+     * Implements MDL component design pattern defined at:
+     * https://github.com/jasonmayes/mdl-component-design-pattern
+     *
+     * @constructor
+     * @param {HTMLElement} element The element that will be upgraded.
+     */
+    var MaterialLayout = function MaterialLayout(element) {
+        this.element_ = element;
+        // Initialize instance.
+        this.init();
+    };
+    window['MaterialLayout'] = MaterialLayout;
+    /**
+     * Store constants in one place so they can be updated easily.
+     *
+     * @enum {string | number}
+     * @private
+     */
+    MaterialLayout.prototype.Constant_ = {
+        MAX_WIDTH: '(max-width: 1024px)',
+        TAB_SCROLL_PIXELS: 100,
+        RESIZE_TIMEOUT: 100,
+        MENU_ICON: '&#xE5D2;',
+        CHEVRON_LEFT: 'chevron_left',
+        CHEVRON_RIGHT: 'chevron_right'
+    };
+    /**
+     * Keycodes, for code readability.
+     *
+     * @enum {number}
+     * @private
+     */
+    MaterialLayout.prototype.Keycodes_ = {
+        ENTER: 13,
+        ESCAPE: 27,
+        SPACE: 32
+    };
+    /**
+     * Modes.
+     *
+     * @enum {number}
+     * @private
+     */
+    MaterialLayout.prototype.Mode_ = {
+        STANDARD: 0,
+        SEAMED: 1,
+        WATERFALL: 2,
+        SCROLL: 3
+    };
+    /**
+     * Store strings for class names defined by this component that are used in
+     * JavaScript. This allows us to simply change it in one place should we
+     * decide to modify at a later date.
+     *
+     * @enum {string}
+     * @private
+     */
+    MaterialLayout.prototype.CssClasses_ = {
+        CONTAINER: 'mdl-layout__container',
+        HEADER: 'mdl-layout__header',
+        DRAWER: 'mdl-layout__drawer',
+        CONTENT: 'mdl-layout__content',
+        DRAWER_BTN: 'mdl-layout__drawer-button',
+        ICON: 'material-icons',
+        JS_RIPPLE_EFFECT: 'mdl-js-ripple-effect',
+        RIPPLE_CONTAINER: 'mdl-layout__tab-ripple-container',
+        RIPPLE: 'mdl-ripple',
+        RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
+        HEADER_SEAMED: 'mdl-layout__header--seamed',
+        HEADER_WATERFALL: 'mdl-layout__header--waterfall',
+        HEADER_SCROLL: 'mdl-layout__header--scroll',
+        FIXED_HEADER: 'mdl-layout--fixed-header',
+        OBFUSCATOR: 'mdl-layout__obfuscator',
+        TAB_BAR: 'mdl-layout__tab-bar',
+        TAB_CONTAINER: 'mdl-layout__tab-bar-container',
+        TAB: 'mdl-layout__tab',
+        TAB_BAR_BUTTON: 'mdl-layout__tab-bar-button',
+        TAB_BAR_LEFT_BUTTON: 'mdl-layout__tab-bar-left-button',
+        TAB_BAR_RIGHT_BUTTON: 'mdl-layout__tab-bar-right-button',
+        TAB_MANUAL_SWITCH: 'mdl-layout__tab-manual-switch',
+        PANEL: 'mdl-layout__tab-panel',
+        HAS_DRAWER: 'has-drawer',
+        HAS_TABS: 'has-tabs',
+        HAS_SCROLLING_HEADER: 'has-scrolling-header',
+        CASTING_SHADOW: 'is-casting-shadow',
+        IS_COMPACT: 'is-compact',
+        IS_SMALL_SCREEN: 'is-small-screen',
+        IS_DRAWER_OPEN: 'is-visible',
+        IS_ACTIVE: 'is-active',
+        IS_UPGRADED: 'is-upgraded',
+        IS_ANIMATING: 'is-animating',
+        ON_LARGE_SCREEN: 'mdl-layout--large-screen-only',
+        ON_SMALL_SCREEN: 'mdl-layout--small-screen-only'
+    };
+    /**
+     * Handles scrolling on the content.
+     *
+     * @private
+     */
+    MaterialLayout.prototype.contentScrollHandler_ = function () {
+        if (this.header_.classList.contains(this.CssClasses_.IS_ANIMATING)) {
+            return;
+        }
+        var headerVisible = !this.element_.classList.contains(this.CssClasses_.IS_SMALL_SCREEN) || this.element_.classList.contains(this.CssClasses_.FIXED_HEADER);
+        if (this.content_.scrollTop > 0 && !this.header_.classList.contains(this.CssClasses_.IS_COMPACT)) {
+            this.header_.classList.add(this.CssClasses_.CASTING_SHADOW);
+            this.header_.classList.add(this.CssClasses_.IS_COMPACT);
+            if (headerVisible) {
+                this.header_.classList.add(this.CssClasses_.IS_ANIMATING);
+            }
+        } else if (this.content_.scrollTop <= 0 && this.header_.classList.contains(this.CssClasses_.IS_COMPACT)) {
+            this.header_.classList.remove(this.CssClasses_.CASTING_SHADOW);
+            this.header_.classList.remove(this.CssClasses_.IS_COMPACT);
+            if (headerVisible) {
+                this.header_.classList.add(this.CssClasses_.IS_ANIMATING);
+            }
+        }
+    };
+    /**
+     * Handles a keyboard event on the drawer.
+     *
+     * @param {Event} evt The event that fired.
+     * @private
+     */
+    MaterialLayout.prototype.keyboardEventHandler_ = function (evt) {
+        // Only react when the drawer is open.
+        if (evt.keyCode === this.Keycodes_.ESCAPE && this.drawer_.classList.contains(this.CssClasses_.IS_DRAWER_OPEN)) {
+            this.toggleDrawer();
+        }
+    };
+    /**
+     * Handles changes in screen size.
+     *
+     * @private
+     */
+    MaterialLayout.prototype.screenSizeHandler_ = function () {
+        if (this.screenSizeMediaQuery_.matches) {
+            this.element_.classList.add(this.CssClasses_.IS_SMALL_SCREEN);
+        } else {
+            this.element_.classList.remove(this.CssClasses_.IS_SMALL_SCREEN);
+            // Collapse drawer (if any) when moving to a large screen size.
+            if (this.drawer_) {
+                this.drawer_.classList.remove(this.CssClasses_.IS_DRAWER_OPEN);
+                this.obfuscator_.classList.remove(this.CssClasses_.IS_DRAWER_OPEN);
+            }
+        }
+    };
+    /**
+     * Handles events of drawer button.
+     *
+     * @param {Event} evt The event that fired.
+     * @private
+     */
+    MaterialLayout.prototype.drawerToggleHandler_ = function (evt) {
+        if (evt && evt.type === 'keydown') {
+            if (evt.keyCode === this.Keycodes_.SPACE || evt.keyCode === this.Keycodes_.ENTER) {
+                // prevent scrolling in drawer nav
+                evt.preventDefault();
+            } else {
+                // prevent other keys
+                return;
+            }
+        }
+        this.toggleDrawer();
+    };
+    /**
+     * Handles (un)setting the `is-animating` class
+     *
+     * @private
+     */
+    MaterialLayout.prototype.headerTransitionEndHandler_ = function () {
+        this.header_.classList.remove(this.CssClasses_.IS_ANIMATING);
+    };
+    /**
+     * Handles expanding the header on click
+     *
+     * @private
+     */
+    MaterialLayout.prototype.headerClickHandler_ = function () {
+        if (this.header_.classList.contains(this.CssClasses_.IS_COMPACT)) {
+            this.header_.classList.remove(this.CssClasses_.IS_COMPACT);
+            this.header_.classList.add(this.CssClasses_.IS_ANIMATING);
+        }
+    };
+    /**
+     * Reset tab state, dropping active classes
+     *
+     * @private
+     */
+    MaterialLayout.prototype.resetTabState_ = function (tabBar) {
+        for (var k = 0; k < tabBar.length; k++) {
+            tabBar[k].classList.remove(this.CssClasses_.IS_ACTIVE);
+        }
+    };
+    /**
+     * Reset panel state, droping active classes
+     *
+     * @private
+     */
+    MaterialLayout.prototype.resetPanelState_ = function (panels) {
+        for (var j = 0; j < panels.length; j++) {
+            panels[j].classList.remove(this.CssClasses_.IS_ACTIVE);
+        }
+    };
+    /**
+     * Toggle drawer state
+     *
+     * @public
+     */
+    MaterialLayout.prototype.toggleDrawer = function () {
+        var drawerButton = this.element_.querySelector('.' + this.CssClasses_.DRAWER_BTN);
+        this.drawer_.classList.toggle(this.CssClasses_.IS_DRAWER_OPEN);
+        this.obfuscator_.classList.toggle(this.CssClasses_.IS_DRAWER_OPEN);
+        // Set accessibility properties.
+        if (this.drawer_.classList.contains(this.CssClasses_.IS_DRAWER_OPEN)) {
+            this.drawer_.setAttribute('aria-hidden', 'false');
+            drawerButton.setAttribute('aria-expanded', 'true');
+        } else {
+            this.drawer_.setAttribute('aria-hidden', 'true');
+            drawerButton.setAttribute('aria-expanded', 'false');
+        }
+    };
+    MaterialLayout.prototype['toggleDrawer'] = MaterialLayout.prototype.toggleDrawer;
+    /**
+     * Initialize element.
+     */
+    MaterialLayout.prototype.init = function () {
+        if (this.element_) {
+            var container = document.createElement('div');
+            container.classList.add(this.CssClasses_.CONTAINER);
+            var focusedElement = this.element_.querySelector(':focus');
+            this.element_.parentElement.insertBefore(container, this.element_);
+            this.element_.parentElement.removeChild(this.element_);
+            container.appendChild(this.element_);
+            if (focusedElement) {
+                focusedElement.focus();
+            }
+            var directChildren = this.element_.childNodes;
+            var numChildren = directChildren.length;
+            for (var c = 0; c < numChildren; c++) {
+                var child = directChildren[c];
+                if (child.classList && child.classList.contains(this.CssClasses_.HEADER)) {
+                    this.header_ = child;
+                }
+                if (child.classList && child.classList.contains(this.CssClasses_.DRAWER)) {
+                    this.drawer_ = child;
+                }
+                if (child.classList && child.classList.contains(this.CssClasses_.CONTENT)) {
+                    this.content_ = child;
+                }
+            }
+            window.addEventListener('pageshow', function (e) {
+                if (e.persisted) {
+                    // when page is loaded from back/forward cache
+                    // trigger repaint to let layout scroll in safari
+                    this.element_.style.overflowY = 'hidden';
+                    requestAnimationFrame(function () {
+                        this.element_.style.overflowY = '';
+                    }.bind(this));
+                }
+            }.bind(this), false);
+            if (this.header_) {
+                this.tabBar_ = this.header_.querySelector('.' + this.CssClasses_.TAB_BAR);
+            }
+            var mode = this.Mode_.STANDARD;
+            if (this.header_) {
+                if (this.header_.classList.contains(this.CssClasses_.HEADER_SEAMED)) {
+                    mode = this.Mode_.SEAMED;
+                } else if (this.header_.classList.contains(this.CssClasses_.HEADER_WATERFALL)) {
+                    mode = this.Mode_.WATERFALL;
+                    this.header_.addEventListener('transitionend', this.headerTransitionEndHandler_.bind(this));
+                    this.header_.addEventListener('click', this.headerClickHandler_.bind(this));
+                } else if (this.header_.classList.contains(this.CssClasses_.HEADER_SCROLL)) {
+                    mode = this.Mode_.SCROLL;
+                    container.classList.add(this.CssClasses_.HAS_SCROLLING_HEADER);
+                }
+                if (mode === this.Mode_.STANDARD) {
+                    this.header_.classList.add(this.CssClasses_.CASTING_SHADOW);
+                    if (this.tabBar_) {
+                        this.tabBar_.classList.add(this.CssClasses_.CASTING_SHADOW);
+                    }
+                } else if (mode === this.Mode_.SEAMED || mode === this.Mode_.SCROLL) {
+                    this.header_.classList.remove(this.CssClasses_.CASTING_SHADOW);
+                    if (this.tabBar_) {
+                        this.tabBar_.classList.remove(this.CssClasses_.CASTING_SHADOW);
+                    }
+                } else if (mode === this.Mode_.WATERFALL) {
+                    // Add and remove shadows depending on scroll position.
+                    // Also add/remove auxiliary class for styling of the compact version of
+                    // the header.
+                    this.content_.addEventListener('scroll', this.contentScrollHandler_.bind(this));
+                    this.contentScrollHandler_();
+                }
+            }
+            // Add drawer toggling button to our layout, if we have an openable drawer.
+            if (this.drawer_) {
+                var drawerButton = this.element_.querySelector('.' + this.CssClasses_.DRAWER_BTN);
+                if (!drawerButton) {
+                    drawerButton = document.createElement('div');
+                    drawerButton.setAttribute('aria-expanded', 'false');
+                    drawerButton.setAttribute('role', 'button');
+                    drawerButton.setAttribute('tabindex', '0');
+                    drawerButton.classList.add(this.CssClasses_.DRAWER_BTN);
+                    var drawerButtonIcon = document.createElement('i');
+                    drawerButtonIcon.classList.add(this.CssClasses_.ICON);
+                    drawerButtonIcon.innerHTML = this.Constant_.MENU_ICON;
+                    drawerButton.appendChild(drawerButtonIcon);
+                }
+                if (this.drawer_.classList.contains(this.CssClasses_.ON_LARGE_SCREEN)) {
+                    //If drawer has ON_LARGE_SCREEN class then add it to the drawer toggle button as well.
+                    drawerButton.classList.add(this.CssClasses_.ON_LARGE_SCREEN);
+                } else if (this.drawer_.classList.contains(this.CssClasses_.ON_SMALL_SCREEN)) {
+                    //If drawer has ON_SMALL_SCREEN class then add it to the drawer toggle button as well.
+                    drawerButton.classList.add(this.CssClasses_.ON_SMALL_SCREEN);
+                }
+                drawerButton.addEventListener('click', this.drawerToggleHandler_.bind(this));
+                drawerButton.addEventListener('keydown', this.drawerToggleHandler_.bind(this));
+                // Add a class if the layout has a drawer, for altering the left padding.
+                // Adds the HAS_DRAWER to the elements since this.header_ may or may
+                // not be present.
+                this.element_.classList.add(this.CssClasses_.HAS_DRAWER);
+                // If we have a fixed header, add the button to the header rather than
+                // the layout.
+                if (this.element_.classList.contains(this.CssClasses_.FIXED_HEADER)) {
+                    this.header_.insertBefore(drawerButton, this.header_.firstChild);
+                } else {
+                    this.element_.insertBefore(drawerButton, this.content_);
+                }
+                var obfuscator = document.createElement('div');
+                obfuscator.classList.add(this.CssClasses_.OBFUSCATOR);
+                this.element_.appendChild(obfuscator);
+                obfuscator.addEventListener('click', this.drawerToggleHandler_.bind(this));
+                this.obfuscator_ = obfuscator;
+                this.drawer_.addEventListener('keydown', this.keyboardEventHandler_.bind(this));
+                this.drawer_.setAttribute('aria-hidden', 'true');
+            }
+            // Keep an eye on screen size, and add/remove auxiliary class for styling
+            // of small screens.
+            this.screenSizeMediaQuery_ = window.matchMedia(this.Constant_.MAX_WIDTH);
+            this.screenSizeMediaQuery_.addListener(this.screenSizeHandler_.bind(this));
+            this.screenSizeHandler_();
+            // Initialize tabs, if any.
+            if (this.header_ && this.tabBar_) {
+                this.element_.classList.add(this.CssClasses_.HAS_TABS);
+                var tabContainer = document.createElement('div');
+                tabContainer.classList.add(this.CssClasses_.TAB_CONTAINER);
+                this.header_.insertBefore(tabContainer, this.tabBar_);
+                this.header_.removeChild(this.tabBar_);
+                var leftButton = document.createElement('div');
+                leftButton.classList.add(this.CssClasses_.TAB_BAR_BUTTON);
+                leftButton.classList.add(this.CssClasses_.TAB_BAR_LEFT_BUTTON);
+                var leftButtonIcon = document.createElement('i');
+                leftButtonIcon.classList.add(this.CssClasses_.ICON);
+                leftButtonIcon.textContent = this.Constant_.CHEVRON_LEFT;
+                leftButton.appendChild(leftButtonIcon);
+                leftButton.addEventListener('click', function () {
+                    this.tabBar_.scrollLeft -= this.Constant_.TAB_SCROLL_PIXELS;
+                }.bind(this));
+                var rightButton = document.createElement('div');
+                rightButton.classList.add(this.CssClasses_.TAB_BAR_BUTTON);
+                rightButton.classList.add(this.CssClasses_.TAB_BAR_RIGHT_BUTTON);
+                var rightButtonIcon = document.createElement('i');
+                rightButtonIcon.classList.add(this.CssClasses_.ICON);
+                rightButtonIcon.textContent = this.Constant_.CHEVRON_RIGHT;
+                rightButton.appendChild(rightButtonIcon);
+                rightButton.addEventListener('click', function () {
+                    this.tabBar_.scrollLeft += this.Constant_.TAB_SCROLL_PIXELS;
+                }.bind(this));
+                tabContainer.appendChild(leftButton);
+                tabContainer.appendChild(this.tabBar_);
+                tabContainer.appendChild(rightButton);
+                // Add and remove tab buttons depending on scroll position and total
+                // window size.
+                var tabUpdateHandler = function () {
+                    if (this.tabBar_.scrollLeft > 0) {
+                        leftButton.classList.add(this.CssClasses_.IS_ACTIVE);
+                    } else {
+                        leftButton.classList.remove(this.CssClasses_.IS_ACTIVE);
+                    }
+                    if (this.tabBar_.scrollLeft < this.tabBar_.scrollWidth - this.tabBar_.offsetWidth) {
+                        rightButton.classList.add(this.CssClasses_.IS_ACTIVE);
+                    } else {
+                        rightButton.classList.remove(this.CssClasses_.IS_ACTIVE);
+                    }
+                }.bind(this);
+                this.tabBar_.addEventListener('scroll', tabUpdateHandler);
+                tabUpdateHandler();
+                // Update tabs when the window resizes.
+                var windowResizeHandler = function () {
+                    // Use timeouts to make sure it doesn't happen too often.
+                    if (this.resizeTimeoutId_) {
+                        clearTimeout(this.resizeTimeoutId_);
+                    }
+                    this.resizeTimeoutId_ = setTimeout(function () {
+                        tabUpdateHandler();
+                        this.resizeTimeoutId_ = null;
+                    }.bind(this), this.Constant_.RESIZE_TIMEOUT);
+                }.bind(this);
+                window.addEventListener('resize', windowResizeHandler);
+                if (this.tabBar_.classList.contains(this.CssClasses_.JS_RIPPLE_EFFECT)) {
+                    this.tabBar_.classList.add(this.CssClasses_.RIPPLE_IGNORE_EVENTS);
+                }
+                // Select element tabs, document panels
+                var tabs = this.tabBar_.querySelectorAll('.' + this.CssClasses_.TAB);
+                var panels = this.content_.querySelectorAll('.' + this.CssClasses_.PANEL);
+                // Create new tabs for each tab element
+                for (var i = 0; i < tabs.length; i++) {
+                    new MaterialLayoutTab(tabs[i], tabs, panels, this);
+                }
+            }
+            this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
+        }
+    };
+
+    /**
+     * Constructor for an individual tab.
+     *
+     * @constructor
+     * @param {HTMLElement} tab The HTML element for the tab.
+     * @param {!Array<HTMLElement>} tabs Array with HTML elements for all tabs.
+     * @param {!Array<HTMLElement>} panels Array with HTML elements for all panels.
+     * @param {MaterialLayout} layout The MaterialLayout object that owns the tab.
+     */
+    function MaterialLayoutTab(tab, tabs, panels, layout) {
+        /**
+         * Auxiliary method to programmatically select a tab in the UI.
+         */
+        function selectTab() {
+            var href = tab.href.split('#')[1];
+            var panel = layout.content_.querySelector('#' + href);
+            layout.resetTabState_(tabs);
+            layout.resetPanelState_(panels);
+            tab.classList.add(layout.CssClasses_.IS_ACTIVE);
+            panel.classList.add(layout.CssClasses_.IS_ACTIVE);
+        }
+
+        if (layout.tabBar_.classList.contains(layout.CssClasses_.JS_RIPPLE_EFFECT)) {
+            var rippleContainer = document.createElement('span');
+            rippleContainer.classList.add(layout.CssClasses_.RIPPLE_CONTAINER);
+            rippleContainer.classList.add(layout.CssClasses_.JS_RIPPLE_EFFECT);
+            var ripple = document.createElement('span');
+            ripple.classList.add(layout.CssClasses_.RIPPLE);
+            rippleContainer.appendChild(ripple);
+            tab.appendChild(rippleContainer);
+        }
+        if (!layout.tabBar_.classList.contains(layout.CssClasses_.TAB_MANUAL_SWITCH)) {
+            tab.addEventListener('click', function (e) {
+                if (tab.getAttribute('href').charAt(0) === '#') {
+                    e.preventDefault();
+                    selectTab();
+                }
+            });
+        }
+        tab.show = selectTab;
+    }
+
+    window['MaterialLayoutTab'] = MaterialLayoutTab;
+// The component registers itself. It can assume componentHandler is available
+// in the global scope.
+    componentHandler.register({
+        constructor: MaterialLayout,
+        classAsString: 'MaterialLayout',
+        cssClass: 'mdl-js-layout'
+    });
+    /**
+     * @license
+     * Copyright 2015 Google Inc. All Rights Reserved.
+     *
+     * 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.
+     */
+    /**
+     * Class constructor for Data Table Card MDL component.
+     * Implements MDL component design pattern defined at:
+     * https://github.com/jasonmayes/mdl-component-design-pattern
+     *
+     * @constructor
+     * @param {Element} element The element that will be upgraded.
+     */
+    var MaterialDataTable = function MaterialDataTable(element) {
+        this.element_ = element;
+        // Initialize instance.
+        this.init();
+    };
+    window['MaterialDataTable'] = MaterialDataTable;
+    /**
+     * Store constants in one place so they can be updated easily.
+     *
+     * @enum {string | number}
+     * @private
+     */
+    MaterialDataTable.prototype.Constant_ = {};
+    /**
+     * Store strings for class names defined by this component that are used in
+     * JavaScript. This allows us to simply change it in one place should we
+     * decide to modify at a later date.
+     *
+     * @enum {string}
+     * @private
+     */
+    MaterialDataTable.prototype.CssClasses_ = {
+        DATA_TABLE: 'mdl-data-table',
+        SELECTABLE: 'mdl-data-table--selectable',
+        SELECT_ELEMENT: 'mdl-data-table__select',
+        IS_SELECTED: 'is-selected',
+        IS_UPGRADED: 'is-upgraded'
+    };
+    /**
+     * Generates and returns a function that toggles the selection state of a
+     * single row (or multiple rows).
+     *
+     * @param {Element} checkbox Checkbox that toggles the selection state.
+     * @param {Element} row Row to toggle when checkbox changes.
+     * @param {(Array<Object>|NodeList)=} opt_rows Rows to toggle when checkbox changes.
+     * @private
+     */
+    MaterialDataTable.prototype.selectRow_ = function (checkbox, row, opt_rows) {
+        if (row) {
+            return function () {
+                if (checkbox.checked) {
+                    row.classList.add(this.CssClasses_.IS_SELECTED);
+                } else {
+                    row.classList.remove(this.CssClasses_.IS_SELECTED);
+                }
+            }.bind(this);
+        }
+        if (opt_rows) {
+            return function () {
+                var i;
+                var el;
+                if (checkbox.checked) {
+                    for (i = 0; i < opt_rows.length; i++) {
+                        el = opt_rows[i].querySelector('td').querySelector('.mdl-checkbox');
+                        el['MaterialCheckbox'].check();
+                        opt_rows[i].classList.add(this.CssClasses_.IS_SELECTED);
+                    }
+                } else {
+                    for (i = 0; i < opt_rows.length; i++) {
+                        el = opt_rows[i].querySelector('td').querySelector('.mdl-checkbox');
+                        el['MaterialCheckbox'].uncheck();
+                        opt_rows[i].classList.remove(this.CssClasses_.IS_SELECTED);
+                    }
+                }
+            }.bind(this);
+        }
+    };
+    /**
+     * Creates a checkbox for a single or or multiple rows and hooks up the
+     * event handling.
+     *
+     * @param {Element} row Row to toggle when checkbox changes.
+     * @param {(Array<Object>|NodeList)=} opt_rows Rows to toggle when checkbox changes.
+     * @private
+     */
+    MaterialDataTable.prototype.createCheckbox_ = function (row, opt_rows) {
+        var label = document.createElement('label');
+        var labelClasses = [
+            'mdl-checkbox',
+            'mdl-js-checkbox',
+            'mdl-js-ripple-effect',
+            this.CssClasses_.SELECT_ELEMENT
+        ];
+        label.className = labelClasses.join(' ');
+        var checkbox = document.createElement('input');
+        checkbox.type = 'checkbox';
+        checkbox.classList.add('mdl-checkbox__input');
+        if (row) {
+            checkbox.checked = row.classList.contains(this.CssClasses_.IS_SELECTED);
+            checkbox.addEventListener('change', this.selectRow_(checkbox, row));
+        } else if (opt_rows) {
+            checkbox.addEventListener('change', this.selectRow_(checkbox, null, opt_rows));
+        }
+        label.appendChild(checkbox);
+        componentHandler.upgradeElement(label, 'MaterialCheckbox');
+        return label;
+    };
+    /**
+     * Initialize element.
+     */
+    MaterialDataTable.prototype.init = function () {
+        if (this.element_) {
+            var firstHeader = this.element_.querySelector('th');
+            var bodyRows = Array.prototype.slice.call(this.element_.querySelectorAll('tbody tr'));
+            var footRows = Array.prototype.slice.call(this.element_.querySelectorAll('tfoot tr'));
+            var rows = bodyRows.concat(footRows);
+            if (this.element_.classList.contains(this.CssClasses_.SELECTABLE)) {
+                var th = document.createElement('th');
+                var headerCheckbox = this.createCheckbox_(null, rows);
+                th.appendChild(headerCheckbox);
+                firstHeader.parentElement.insertBefore(th, firstHeader);
+                for (var i = 0; i < rows.length; i++) {
+                    var firstCell = rows[i].querySelector('td');
+                    if (firstCell) {
+                        var td = document.createElement('td');
+                        if (rows[i].parentNode.nodeName.toUpperCase() === 'TBODY') {
+                            var rowCheckbox = this.createCheckbox_(rows[i]);
+                            td.appendChild(rowCheckbox);
+                        }
+                        rows[i].insertBefore(td, firstCell);
+                    }
+                }
+                this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
+            }
+        }
+    };
+// The component registers itself. It can assume componentHandler is available
+// in the global scope.
+    componentHandler.register({
+        constructor: MaterialDataTable,
+        classAsString: 'MaterialDataTable',
+        cssClass: 'mdl-js-data-table'
+    });
+    /**
+     * @license
+     * Copyright 2015 Google Inc. All Rights Reserved.
+     *
+     * 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.
+     */
+    /**
+     * Class constructor for Ripple MDL component.
+     * Implements MDL component design pattern defined at:
+     * https://github.com/jasonmayes/mdl-component-design-pattern
+     *
+     * @constructor
+     * @param {HTMLElement} element The element that will be upgraded.
+     */
+    var MaterialRipple = function MaterialRipple(element) {
+        this.element_ = element;
+        // Initialize instance.
+        this.init();
+    };
+    window['MaterialRipple'] = MaterialRipple;
+    /**
+     * Store constants in one place so they can be updated easily.
+     *
+     * @enum {string | number}
+     * @private
+     */
+    MaterialRipple.prototype.Constant_ = {
+        INITIAL_SCALE: 'scale(0.0001, 0.0001)',
+        INITIAL_SIZE: '1px',
+        INITIAL_OPACITY: '0.4',
+        FINAL_OPACITY: '0',
+        FINAL_SCALE: ''
+    };
+    /**
+     * Store strings for class names defined by this component that are used in
+     * JavaScript. This allows us to simply change it in one place should we
+     * decide to modify at a later date.
+     *
+     * @enum {string}
+     * @private
+     */
+    MaterialRipple.prototype.CssClasses_ = {
+        RIPPLE_CENTER: 'mdl-ripple--center',
+        RIPPLE_EFFECT_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
+        RIPPLE: 'mdl-ripple',
+        IS_ANIMATING: 'is-animating',
+        IS_VISIBLE: 'is-visible'
+    };
+    /**
+     * Handle mouse / finger down on element.
+     *
+     * @param {Event} event The event that fired.
+     * @private
+     */
+    MaterialRipple.prototype.downHandler_ = function (event) {
+        if (!this.rippleElement_.style.width && !this.rippleElement_.style.height) {
+            var rect = this.element_.getBoundingClientRect();
+            this.boundHeight = rect.height;
+            this.boundWidth = rect.width;
+            this.rippleSize_ = Math.sqrt(rect.width * rect.width + rect.height * rect.height) * 2 + 2;
+            this.rippleElement_.style.width = this.rippleSize_ + 'px';
+            this.rippleElement_.style.height = this.rippleSize_ + 'px';
+        }
+        this.rippleElement_.classList.add(this.CssClasses_.IS_VISIBLE);
+        if (event.type === 'mousedown' && this.ignoringMouseDown_) {
+            this.ignoringMouseDown_ = false;
+        } else {
+            if (event.type === 'touchstart') {
+                this.ignoringMouseDown_ = true;
+            }
+            var frameCount = this.getFrameCount();
+            if (frameCount > 0) {
+                return;
+            }
+            this.setFrameCount(1);
+            var bound = event.currentTarget.getBoundingClientRect();
+            var x;
+            var y;
+            // Check if we are handling a keyboard click.
+            if (event.clientX === 0 && event.clientY === 0) {
+                x = Math.round(bound.width / 2);
+                y = Math.round(bound.height / 2);
+            } else {
+                var clientX = event.clientX !== undefined ? event.clientX : event.touches[0].clientX;
+                var clientY = event.clientY !== undefined ? event.clientY : event.touches[0].clientY;
+                x = Math.round(clientX - bound.left);
+                y = Math.round(clientY - bound.top);
+            }
+            this.setRippleXY(x, y);
+            this.setRippleStyles(true);
+            window.requestAnimationFrame(this.animFrameHandler.bind(this));
+        }
+    };
+    /**
+     * Handle mouse / finger up on element.
+     *
+     * @param {Event} event The event that fired.
+     * @private
+     */
+    MaterialRipple.prototype.upHandler_ = function (event) {
+        // Don't fire for the artificial "mouseup" generated by a double-click.
+        if (event && event.detail !== 2) {
+            // Allow a repaint to occur before removing this class, so the animation
+            // shows for tap events, which seem to trigger a mouseup too soon after
+            // mousedown.
+            window.setTimeout(function () {
+                this.rippleElement_.classList.remove(this.CssClasses_.IS_VISIBLE);
+            }.bind(this), 0);
+        }
+    };
+    /**
+     * Initialize element.
+     */
+    MaterialRipple.prototype.init = function () {
+        if (this.element_) {
+            var recentering = this.element_.classList.contains(this.CssClasses_.RIPPLE_CENTER);
+            if (!this.element_.classList.contains(this.CssClasses_.RIPPLE_EFFECT_IGNORE_EVENTS)) {
+                this.rippleElement_ = this.element_.querySelector('.' + this.CssClasses_.RIPPLE);
+                this.frameCount_ = 0;
+                this.rippleSize_ = 0;
+                this.x_ = 0;
+                this.y_ = 0;
+                // Touch start produces a compat mouse down event, which would cause a
+                // second ripples. To avoid that, we use this property to ignore the first
+                // mouse down after a touch start.
+                this.ignoringMouseDown_ = false;
+                this.boundDownHandler = this.downHandler_.bind(this);
+                this.element_.addEventListener('mousedown', this.boundDownHandler);
+                this.element_.addEventListener('touchstart', this.boundDownHandler);
+                this.boundUpHandler = this.upHandler_.bind(this);
+                this.element_.addEventListener('mouseup', this.boundUpHandler);
+                this.element_.addEventListener('mouseleave', this.boundUpHandler);
+                this.element_.addEventListener('touchend', this.boundUpHandler);
+                this.element_.addEventListener('blur', this.boundUpHandler);
+                /**
+                 * Getter for frameCount_.
+                 * @return {number} the frame count.
+                 */
+                this.getFrameCount = function () {
+                    return this.frameCount_;
+                };
+                /**
+                 * Setter for frameCount_.
+                 * @param {number} fC the frame count.
+                 */
+                this.setFrameCount = function (fC) {
+                    this.frameCount_ = fC;
+                };
+                /**
+                 * Getter for rippleElement_.
+                 * @return {Element} the ripple element.
+                 */
+                this.getRippleElement = function () {
+                    return this.rippleElement_;
+                };
+                /**
+                 * Sets the ripple X and Y coordinates.
+                 * @param  {number} newX the new X coordinate
+                 * @param  {number} newY the new Y coordinate
+                 */
+                this.setRippleXY = function (newX, newY) {
+                    this.x_ = newX;
+                    this.y_ = newY;
+                };
+                /**
+                 * Sets the ripple styles.
+                 * @param  {boolean} start whether or not this is the start frame.
+                 */
+                this.setRippleStyles = function (start) {
+                    if (this.rippleElement_ !== null) {
+                        var transformString;
+                        var scale;
+                        var size;
+                        var offset = 'translate(' + this.x_ + 'px, ' + this.y_ + 'px)';
+                        if (start) {
+                            scale = this.Constant_.INITIAL_SCALE;
+                            size = this.Constant_.INITIAL_SIZE;
+                        } else {
+                            scale = this.Constant_.FINAL_SCALE;
+                            size = this.rippleSize_ + 'px';
+                            if (recentering) {
+                                offset = 'translate(' + this.boundWidth / 2 + 'px, ' + this.boundHeight / 2 + 'px)';
+                            }
+                        }
+                        transformString = 'translate(-50%, -50%) ' + offset + scale;
+                        this.rippleElement_.style.webkitTransform = transformString;
+                        this.rippleElement_.style.msTransform = transformString;
+                        this.rippleElement_.style.transform = transformString;
+                        if (start) {
+                            this.rippleElement_.classList.remove(this.CssClasses_.IS_ANIMATING);
+                        } else {
+                            this.rippleElement_.classList.add(this.CssClasses_.IS_ANIMATING);
+                        }
+                    }
+                };
+                /**
+                 * Handles an animation frame.
+                 */
+                this.animFrameHandler = function () {
+                    if (this.frameCount_-- > 0) {
+                        window.requestAnimationFrame(this.animFrameHandler.bind(this));
+                    } else {
+                        this.setRippleStyles(false);
+                    }
+                };
+            }
+        }
+    };
+// The component registers itself. It can assume componentHandler is available
+// in the global scope.
+    componentHandler.register({
+        constructor: MaterialRipple,
+        classAsString: 'MaterialRipple',
+        cssClass: 'mdl-js-ripple-effect',
+        widget: false
+    });
+}());