From b686f041212c6069835872ebe658aa2416493426 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <Paulus@PaulusSchoutsen.nl>
Date: Sat, 1 Nov 2014 15:04:44 -0700
Subject: [PATCH] Major cleanup frontend

---
 homeassistant/components/http/__init__.py     |    7 +-
 homeassistant/components/http/frontend.py     |    2 +-
 .../components/http/www_static/frontend.html  | 9727 ++++++++++++++---
 .../http/www_static/polymer/bower.json        |    7 +-
 .../http/www_static/polymer/domain-icon.html  |   19 +-
 .../polymer/home-assistant-api.html           |   31 +-
 .../polymer/home-assistant-main.html          |   59 +-
 .../www_static/polymer/services-list.html     |   10 +-
 .../http/www_static/polymer/splash-login.html |    9 +
 .../http/www_static/polymer/state-badge.html  |   10 +-
 .../http/www_static/polymer/state-card.html   |   96 +-
 .../http/www_static/polymer/states-cards.html |    5 +-
 12 files changed, 8169 insertions(+), 1813 deletions(-)
diff --git a/homeassistant/components/http/__init__.py b/homeassistant/components/http/__init__.py
index 4720137f49e..216c91643a7 100644
--- a/homeassistant/components/http/__init__.py
+++ b/homeassistant/components/http/__init__.py
@@ -356,14 +356,15 @@ class RequestHandler(SimpleHTTPRequestHandler):
                "<link rel='shortcut icon' href='/static/favicon.ico' />"
                "<link rel='icon' type='image/png' "
                "     href='/static/favicon-192x192.png' sizes='192x192'>"
-               "<script"
-               "     src='/static/polymer_platform.js'></script>"
-               "<link rel='import' href='/static/{}' />"
                "<meta name='viewport' content='width=device-width, "
                "      user-scalable=no, initial-scale=1.0, "
                "      minimum-scale=1.0, maximum-scale=1.0' />"
                "</head>"
                "<body fullbleed>"
+               "<h3 id='init' align='center'>Initializing Home Assistant</h3>"
+               "<script"
+               "     src='/static/polymer_platform.js'></script>"
+               "<link rel='import' href='/static/{}' />"
                "<splash-login auth='{}'></splash-login>"
                "</body></html>").format(app_url, data.get('api_password', '')))
 
diff --git a/homeassistant/components/http/frontend.py b/homeassistant/components/http/frontend.py
index f29f9fc415c..df35e766af5 100644
--- a/homeassistant/components/http/frontend.py
+++ b/homeassistant/components/http/frontend.py
@@ -1,2 +1,2 @@
 """ DO NOT MODIFY. Auto-generated by build_polymer script """
-VERSION = "5ae474d6905e074fa2a6aa0cfa2941be"
+VERSION = "835922d1958738763525d6670c11bfb5"
diff --git a/homeassistant/components/http/www_static/frontend.html b/homeassistant/components/http/www_static/frontend.html
index ab7fe559931..bc4d5eededc 100644
--- a/homeassistant/components/http/www_static/frontend.html
+++ b/homeassistant/components/http/www_static/frontend.html
@@ -4565,178 +4565,20 @@ polyfill-next-selector { content: ':host .indent'; }
 
 <!--
 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--->
-
-<!--
-`core-icon-button` is an icon with button behaviors.
-
-    <core-icon-button src="star.png"></core-icon-button>
-
-`core-icon-button` includes a default icon set.  Use `icon` to specify 
-which icon from the icon set to use.
-
-    <core-icon-button icon="menu"></core-icon-button>
-
-See [`core-iconset`](#core-iconset) for more information about 
-how to use a custom icon set.
-
-@group Polymer Core Elements
-@element core-icon-button
-@homepage github.io
--->
-
-
-
-
-<polymer-element name="core-icon-button" attributes="src icon active" assetpath="polymer/bower_components/core-icon-button/">
-
-  <template>
-    <style>/*
-Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
 The complete set of authors may be found at http://polymer.github.io/AUTHORS
 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
 Code distributed by Google as part of the polymer project is also
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
-*/
-
-:host {
-  display: inline-block;
-  box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  user-select: none;
-  -moz-user-select: none;
-  -webkit-user-select: none;
-  border-radius: 2px;
-  padding: 7px;
-  margin: 2px;
-  vertical-align: middle;
-  font-size: 1rem;
-  cursor: pointer;
-}
-
-:host([disabled]) {
-  opacity: 0.6;
-  pointer-events: none;
-}
-
-:host(.outline) {
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
-}
-
-:host(:hover:not([disabled])) {
-  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.1);
-}
-
-:host(.selected:not([disabled])) {
-  background-color: rgba(0, 0, 0, 0.05);
-  box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.12);
-}
-
-:host(:active:not([disabled]), .selected:active:not([disabled])) {
-  background-color: rgba(0, 0, 0, 0.05);
-  box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.12);
-}
-
-:host(.core-dark-theme.outline) {
-  background-color: rgba(200, 200, 200, 0.05);
-  box-shadow: 0 0 0 1px rgba(200, 200, 200, 0.1);
-}
-
-:host(.core-dark-theme:hover) {
-  background-color: rgba(200, 200, 200, 0.05);
-  box-shadow: 0 1px 0 0 rgba(200, 200, 200, 0.12), 0 0 0 1px rgba(200, 200, 200, 0.1);
-}
-
-:host(.core-dark-theme.selected) {
-  background-color: rgba(220, 220, 220, 0.05);
-  box-shadow: inset 0 1px 0 0 rgba(200, 200, 200, 0.05), 0 0 0 1px rgba(200, 200, 200, 0.12);
-}
-
-:host(.core-dark-theme:active, .core-dark-theme.selected:active) {
-  background-color: rgba(200, 200, 200, 0.05);
-  box-shadow: inset 0 1px 0 0 rgba(200, 200, 200, 0.1), 0 0 0 1px rgba(200, 200, 200, 0.12);
-}
-
-core-icon {
-  pointer-events: none;
-}
-
-/* note: this is a polyfill aware selector */
-:host ::content > :not(core-icon) {
-  margin-left: 4px;
-}
-</style>
-    <core-icon src="{{src}}" icon="{{icon}}"></core-icon><content></content>
-  </template>
-
-  <script>
-
-    Polymer('core-icon-button', {
-
-      /**
-       * The URL of an image for the icon.  Should not use `icon` property
-       * if you are using this property.
-       *
-       * @attribute src
-       * @type string
-       * @default ''
-       */
-      src: '',
-
-      /**
-       * If true, border is placed around the button to indicate it's
-       * active state.
-       *
-       * @attribute active
-       * @type boolean
-       * @default false
-       */
-      active: false,
-
-      /**
-       * Specifies the icon name or index in the set of icons available in
-       * the icon set.  Should not use `src` property if you are using this
-       * property.
-       *
-       * @attribute icon
-       * @type string
-       * @default ''
-       */
-      icon: '',
-
-      activeChanged: function() {
-        this.classList.toggle('selected', this.active);
-      }
-
-    });
-
-  </script>
-
-</polymer-element>
-
-<!--
-Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 -->
 
 <!--
 @group Paper Elements
 
-Material Design: <a href="https://spec.googleplex.com/quantum/components/buttons.html">Button</a>
+Material Design: <a href="https://spec.googleplex.com/quantum/components/buttons.html">Buttons</a>
 
-`paper-fab` is a floating action button. It contains an image placed in the center and
-comes in two sizes: regular size and a smaller size by applying the class `mini`. When
-the user touches the button, a ripple effect emanates from the center of the button.
+`paper-icon-button` is a button with an image placed at the center. When the user touches
+the button, a ripple effect emanates from the center of the button.
 
 You may import `core-icons` to use with this element, or provide an URL to a custom icon.
 See `core-iconset` for more information about how to use a custom icon set.
@@ -4745,18 +4587,17 @@ Example:
 
     <link href="path/to/core-icons/core-icons.html" rel="import">
 
-    <paper-fab icon="add"></paper-fab>
-    <paper-fab mini icon="favorite"></paper-fab>
-    <paper-fab src="star.png"></paper-fab>
+    <paper-icon-button icon="favorite"></paper-icon-button>
+    <paper-icon-button src="star.png"></paper-icon-button>
 
 Styling
 -------
 
 Style the button with CSS as you would a normal DOM element. If you are using the icons
-provided by `core-icons`, the icon will inherit the foreground color of the button.
+provided by `core-icons`, they will inherit the foreground color of the button.
 
-    /* make a blue "cloud" button */
-    <paper-fab icon="cloud" style="color: blue;"></paper-fab>
+    /* make a red "favorite" button */
+    <paper-icon-button icon="favorite" style="color: red;"></paper-icon-button>
 
 By default, the ripple is the same color as the foreground at 25% opacity. You may
 customize the color using this selector:
@@ -4775,11 +4616,11 @@ The button is accessible by default if you use the `icon` property. By default,
 `aria-label` attribute will be set to the `icon` property. If you use a custom icon,
 you should ensure that the `aria-label` attribute is set.
 
-    <paper-fab src="star.png" aria-label="star"></paper-fab>
+    <paper-icon-button src="star.png" aria-label="star"></paper-icon-button>
 
-@element paper-fab
+@element paper-icon-button
 @extends paper-button-base
-@status unstable
+@homepage github.io
 -->
 
 
@@ -4787,7 +4628,7 @@ you should ensure that the `aria-label` attribute is set.
 
 
 
-<polymer-element name="paper-fab" extends="paper-button-base" attributes="src icon mini" role="button" assetpath="polymer/bower_components/paper-fab/">
+<polymer-element name="paper-icon-button" extends="paper-button-base" attributes="src icon" role="button" assetpath="polymer/bower_components/paper-icon-button/">
 
   <template>
 
@@ -4795,25 +4636,12 @@ you should ensure that the `aria-label` attribute is set.
       :host {
         display: inline-block;
         position: relative;
+        padding: 8px;
         outline: none;
         -webkit-user-select: none;
         user-select: none;
         cursor: pointer;
         z-index: 0;
-
-        box-sizing: border-box;
-        width: 56px;
-        height: 56px;
-        background: #d23f31;
-        color: #fff;
-        border-radius: 50%;
-        padding: 16px;
-      }
-
-      :host([mini]) {
-        width: 40px;
-        height: 40px;
-        padding: 8px;
       }
 
       :host([disabled]) {
@@ -4828,17 +4656,13 @@ you should ensure that the `aria-label` attribute is set.
       }
     </style>
 
-    <template if="{{raised}}">
-      <paper-shadow id="shadow" z="{{z}}" animated=""></paper-shadow>
-    </template>
-
     <!-- to position to ripple behind the icon -->
     <core-icon relative="" id="icon" src="{{src}}" icon="{{icon}}"></core-icon>
 
   </template>
 
   <script>
-    Polymer('paper-fab',{
+    Polymer('paper-icon-button',{
 
       publish: {
 
@@ -4863,18 +4687,8 @@ you should ensure that the `aria-label` attribute is set.
          */
         icon: '',
 
-        /**
-         * Set this to true to style this is a "mini" FAB.
-         *
-         * @attribute mini
-         * @type boolean
-         * @default false
-         */
-        mini: false,
-
-        raised: true,
-        recenteringTouch: false,
-        fill: true
+        recenteringTouch: true,
+        fill: false
 
       },
 
@@ -4885,6 +4699,7 @@ you should ensure that the `aria-label` attribute is set.
     });
 
   </script>
+
 </polymer-element>
 
 <!--
@@ -4897,37 +4712,1602 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 -->
 
 <!--
-`paper-tabs` is a `core-selector` styled to look like tabs. Tabs make it easy to 
-explore and switch between different views or functional aspects of an app, or 
-to browse categorized data sets.
+@group Paper Elements
 
-Use `selected` property to get or set the selected tab.
+`paper-item` is a list-item object for use in menus. It may contain and icon and/or
+a text label.
 
 Example:
 
-    <paper-tabs selected="0">
-      <paper-tab>TAB 1</paper-tab>
-      <paper-tab>TAB 2</paper-tab>
-      <paper-tab>TAB 3</paper-tab>
-    </paper-tabs>
+    <core-menu>
+        <paper-item icon="refresh" label="Refresh"></paper-item>
+        <paper-item label="Help"></paper-item>
+        <paper-item label="Sign Out"></paper-item>
+    </core-menu>
 
-See <a href="#paper-tab">paper-tab</a> for more information about 
-`paper-tab`.
+To use as a link, put an `<a>` element in the item.
 
-Styling tabs:
+Example:
 
-To change the sliding bar color:
+    <paper-item icon="home" label="Home">
+        <a href="http://www.polymer-project.org"></a>
+    </paper-item>
 
-    paper-tabs.pink::shadow #selectionBar {
-      background-color: #ff4081;
-    }
+@class paper-item
+-->
+
+
+
+
+
+<style shim-shadowdom="">/*
+ * @license
+ * Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+ * This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+ * The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+ * The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+ * Code distributed by Google as part of the polymer project is also
+ * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+ */
+
+html /deep/ paper-item {
+  display: block;
+  position: relative;
+  font-size: 16px;
+  -webkit-user-select: none;
+  user-select: none;
+  cursor: pointer;
+  box-sizing: border-box;
+  height: 48px;
+  padding: 0 16px;
+  white-space: nowrap;
+}
+
+html /deep/ paper-item::shadow #ripple {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  pointer-events: none;
+}
+
+html /deep/ paper-item::shadow #icon {
+  margin-right: 8px;
+}
+
+html /deep/ paper-item::shadow ::content > a {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+</style>
+
+<polymer-element name="paper-item" attributes="label iconSrc icon" center="" horizontal="" layout="" assetpath="polymer/bower_components/paper-item/">
+
+  <template>
+
+    <paper-ripple id="ripple"></paper-ripple>
+
+    <core-icon id="icon" hidden?="{{!iconSrc && !icon}}" src="{{iconSrc}}" icon="{{icon}}"></core-icon>
+    <div id="label">{{label}}</div>
+    <content></content>
+  </template>
+
+  <script>
+    Polymer('paper-item', {
+
+      publish: {
+
+        /**
+         * The label for the item.
+         *
+         * @attribute label
+         * @type string
+         * @default ''
+         */
+        label: '',
+
+        /**
+         * (optional) The URL of an image for an icon to use in the button.
+         * Should not use `icon` property if you are using this property.
+         *
+         * @attribute iconSrc
+         * @type string
+         * @default ''
+         */
+        iconSrc: '',
+
+        /**
+         * (optional) Specifies the icon name or index in the set of icons
+         * available in the icon set. If using this property, load the icon
+         * set separately where the icon is used. Should not use `src`
+         * if you are using this property.
+         *
+         * @attribute icon
+         * @type string
+         * @default ''
+         */
+        icon: ''
+
+      },
+
+      eventDelegates: {
+        'down': 'downAction',
+        'up': 'upAction'
+      },
+
+      downAction: function(e) {
+        this.$.ripple.downAction(e);
+      },
+
+      upAction: function(e) {
+        this.$.ripple.upAction(e);
+      }
+    });
+  </script>
+</polymer-element>
+
+<!--
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<!--
+A `paper-menu-button` is a `paper-icon-button` that opens a drop down menu when tapped.
+
+Example:
+
+    <paper-menu-button icon="menu">
+      <div>Menu Item 1</div>
+      <div>Menu Item 2</div>
+      <div>Menu Item 3</div>
+    </paper-menu-button>
+
+Theming
+=======
+
+To change the text color in the menu:
+
+paper-menu-button::shadow #menu {
+  color: white;
+}
+
+To change the overlay background color:
+
+paper-menu-button::shadow .paper-menu-button-overlay-bg {
+  background: green;
+}
+
+To change the color of the ripple effect:
+
+paper-menu-button:shadow .paper-menu-button-overlay-ink {
+ background: red;
+}
 
 @group Paper Elements
-@element paper-tabs
-@extends core-selector
+@element paper-menu-button
+@extends paper-focusable
+-->
+
+
+<!--
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<!--
+
+`core-dropdown` is an element that is initially hidden and is positioned relatively to another
+element, usually the element that triggers the dropdown. The dropdown and the triggering element
+should be children of the same offsetParent, e.g. the same `<div>` with `position: relative`.
+It can be used to implement dropdown menus, menu buttons, etc..
+
+Example:
+
+    <template is="auto-binding">
+      <div relative>
+        <core-icon-button id="trigger" icon="menu"></core-icon-button>
+        <core-dropdown relatedTarget="{{$.trigger}}">
+          <core-menu>
+            <core-item>Cut</core-item>
+            <core-item>Copy</core-item>
+            <core-item>Paste</core-item>
+          </core-menu>
+        </core-dropdown>
+      </div>
+    </template>
+
+Positioning
+-----------
+
+By default, the dropdown is absolutely positioned on top of the `relatedTarget` with the top and
+left edges aligned. The `halign` and `valign` properties controls the various alignments. The size
+of the dropdown is automatically restrained such that it is entirely visible on the screen. Use the
+`margin`
+
+If you need more control over the dropdown's position, use CSS. The `halign` and `valign` properties are
+ignored if the dropdown is positioned with CSS.
+
+Example:
+
+    <style>
+      /* manually position the dropdown below the trigger */
+      core-dropdown {
+        position: absolute;
+        top: 38px;
+        left: 0;
+      }
+    </style>
+
+    <template is="auto-binding">
+      <div relative>
+        <core-icon-button id="trigger" icon="menu"></core-icon-button>
+        <core-dropdown relatedTarget="{{$.trigger}}">
+          <core-menu>
+            <core-item>Cut</core-item>
+            <core-item>Copy</core-item>
+            <core-item>Paste</core-item>
+          </core-menu>
+        </core-dropdown>
+      </div>
+    </template>
+
+@group Polymer Core Elements
+@element core-dropdown
 @homepage github.io
 -->
 
+
+<!--
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+
+<!--
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+
+<!--
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<!--
+
+`<core-transition>` is an abstraction of an animation. It is used to implement pluggable
+transitions, for example in `<core-overlay>`. You can extend this class to create a custom
+animation, instantiate it, and import it where you need the animation.
+
+All instances of `<core-transition>` are stored in a single database with `type=transition`.
+For more about the database, please see the documentation for `<core-meta>`.
+
+Each instance of `<core-transition>` objects are shared across all the clients, so you should
+not store state information specific to the animated element in the transition. Rather, store
+it on the element.
+
+Example:
+
+my-transition.html:
+
+    <polymer-element name="my-transition" extends="core-transition">
+        <script>
+            go: function(node) {
+                node.style.transition = 'opacity 1s ease-out';
+                node.style.opacity = 0;
+            }
+        </script>
+    </polymer-element>
+
+    <my-transition id="my-fade-out"></my-transition>
+
+my-transition-demo.html:
+
+    <link href="components/core-meta/core-meta.html" rel="import">
+    <link href="my-transition.html" rel="import">
+
+    <div id="animate-me"></div>
+
+    <script>
+        // Get the core-transition
+        var meta = document.createElement('core-meta');
+        meta.type = 'transition';
+        var transition = meta.byId('my-fade-out');
+
+        // Run the animation
+        var animated = document.getElementById('animate-me');
+        transition.go(animated);
+    </script>
+
+@group Polymer Core Elements
+@element core-transition
+@extends core-meta
+@status beta
+@homepage github.io
+-->
+<!--
+Fired when the animation finishes.
+
+@event core-transitionend
+@param {Object} detail
+@param {Object} detail.node The animated node
+-->
+
+
+
+<polymer-element name="core-transition" extends="core-meta" assetpath="polymer/bower_components/core-transition/">
+  
+  <script>
+    Polymer('core-transition', {
+      
+      type: 'transition',
+
+      /**
+       * Run the animation.
+       *
+       * @method go
+       * @param {Node} node The node to apply the animation on
+       * @param {Object} state State info
+       */
+      go: function(node, state) {
+        this.complete(node);
+      },
+
+      /**
+       * Set up the animation. This may include injecting a stylesheet,
+       * applying styles, creating a web animations object, etc.. This
+       *
+       * @method setup
+       * @param {Node} node The animated node
+       */
+      setup: function(node) {
+      },
+
+      /**
+       * Tear down the animation.
+       *
+       * @method teardown
+       * @param {Node} node The animated node
+       */
+      teardown: function(node) {
+      },
+
+      /**
+       * Called when the animation completes. This function also fires the
+       * `core-transitionend` event.
+       *
+       * @method complete
+       * @param {Node} node The animated node
+       */
+      complete: function(node) {
+        this.fire('core-transitionend', null, node);
+      },
+
+      /**
+       * Utility function to listen to an event on a node once.
+       *
+       * @method listenOnce
+       * @param {Node} node The animated node
+       * @param {string} event Name of an event
+       * @param {Function} fn Event handler
+       * @param {Array} args Additional arguments to pass to `fn`
+       */
+      listenOnce: function(node, event, fn, args) {
+        var self = this;
+        var listener = function() {
+          fn.apply(self, args);
+          node.removeEventListener(event, listener, false);
+        }
+        node.addEventListener(event, listener, false);
+      }
+
+    });
+  </script>
+</polymer-element>
+<!--
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+
+
+<polymer-element name="core-key-helper" assetpath="polymer/bower_components/core-overlay/">
+  <script>
+    Polymer('core-key-helper', {
+      ENTER_KEY: 13,
+      ESCAPE_KEY: 27
+    });
+  </script>
+</polymer-element>
+
+<!--
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<polymer-element name="core-overlay-layer" assetpath="polymer/bower_components/core-overlay/">
+<template>
+  <style>
+    :host {
+      position: fixed;
+      top: 0;
+      left: 0;
+      z-index: 1000;
+      display: none;
+    }
+
+    :host(.core-opened) {
+      display: block;
+    }
+  </style>
+  <content></content>
+</template>
+<script>
+(function() {
+
+  Polymer('core-overlay-layer', {
+    publish: {
+      opened: false
+    },
+    openedChanged: function() {
+      this.classList.toggle('core-opened', this.opened);
+    },
+    /**
+     * Adds an element to the overlay layer
+     */
+    addElement: function(element) {
+      if (!this.parentNode) {
+        document.querySelector('body').appendChild(this);
+      }
+      if (element.parentNode !== this) {
+        element.__contents = [];
+        var ip$ = element.querySelectorAll('content');
+        for (var i=0, l=ip$.length, n; (i<l) && (n = ip$[i]); i++) {
+          this.moveInsertedElements(n);
+          this.cacheDomLocation(n);
+          n.parentNode.removeChild(n);
+          element.__contents.push(n);
+        }
+        this.cacheDomLocation(element);
+        this.updateEventController(element);
+        var h = this.makeHost();
+        h.shadowRoot.appendChild(element);
+        element.__host = h;
+      }
+    },
+    makeHost: function() {
+      var h = document.createElement('overlay-host');
+      h.createShadowRoot();
+      this.appendChild(h);
+      return h;
+    },
+    moveInsertedElements: function(insertionPoint) {
+      var n$ = insertionPoint.getDistributedNodes();
+      var parent = insertionPoint.parentNode;
+      insertionPoint.__contents = [];
+      for (var i=0, l=n$.length, n; (i<l) && (n=n$[i]); i++) {
+        this.cacheDomLocation(n);
+        this.updateEventController(n);
+        insertionPoint.__contents.push(n);
+        parent.appendChild(n);  
+      }
+    },
+    updateEventController: function(element) {
+      element.eventController = this.element.findController(element);
+    },
+    /**
+     * Removes an element from the overlay layer
+     */
+    removeElement: function(element) {
+      element.eventController = null;
+      this.replaceElement(element);
+      var h = element.__host;
+      if (h) {
+        h.parentNode.removeChild(h);
+      }
+    },
+    replaceElement: function(element) {
+      if (element.__contents) {
+        for (var i=0, c$=element.__contents, c; (c=c$[i]); i++) {
+          this.replaceElement(c);
+        }
+        element.__contents = null;
+      }
+      if (element.__parentNode) {
+        var n = element.__nextElementSibling && element.__nextElementSibling 
+            === element.__parentNode ? element.__nextElementSibling : null;
+        element.__parentNode.insertBefore(element, n);
+      }
+    },
+    cacheDomLocation: function(element) {
+      element.__nextElementSibling = element.nextElementSibling;
+      element.__parentNode = element.parentNode;
+    }
+  });
+  
+})();
+</script>
+</polymer-element>
+
+
+<!--
+The `core-overlay` element displays overlayed on top of other content. It starts
+out hidden and is displayed by setting its `opened` property to true.
+A `core-overlay's` opened state can be toggled by calling the `toggle`
+method.
+
+The `core-overlay` will, by default, show/hide itself when it's opened. The 
+`target` property may be set to another element to cause that element to 
+be shown when the overlay is opened.
+
+It's common to want a `core-overlay` to animate to its opened
+position. The `core-overlay` element uses a `core-transition` to handle
+animation. The default transition is `core-transition-fade` which 
+causes the overlay to fade in when displayed. See 
+<a href="../core-transition/">`core-transition`</a> for more
+information about customizing a `core-overlay's` opening animation. The
+`backdrop` property can be set to true to show a backdrop behind the overlay
+that will darken the rest of the window.
+
+An element that should close the `core-overlay` will automatically
+do so if it's given the `core-overlay-toggle` attribute. This attribute
+can be customized with the `closeAttribute` property. You can also use
+`closeSelector` if more general matching is needed.
+
+By default  `core-overlay` will close whenever the user taps outside it or
+presses the escape key. This behavior can be turned off via the
+`autoCloseDisabled` property.
+
+    <core-overlay>
+      <h2>Dialog</h2>
+      <input placeholder="say something..." autofocus>
+      <div>I agree with this wholeheartedly.</div>
+      <button core-overlay-toggle>OK</button>
+    </core-overlay>
+
+`core-overlay` will automatically size and position itself according to the 
+following rules. The overlay's size is constrained such that it does not
+overflow the screen. This is done by setting maxHeight/maxWidth on the 
+`sizingTarget`. If the `sizingTarget` already has a setting for one of these
+properties, it will not be overridden. The overlay should
+be positioned via css or imperatively using the `core-overlay-position` event.
+If the overlay is not positioned vertically via setting `top` or `bottom`, it
+will be centered vertically. The same is true horizontally via a setting to 
+`left` or `right`. In addition, css `margin` can be used to provide some space
+around the overlay. This can be used to ensure
+that, for example, a drop shadow is always visible around the overlay.
+
+@group Core Elements
+@element core-overlay
+@homepage github.io
+-->
+<!--
+Fired when the `core-overlay`'s `opened` property changes.
+
+@event core-overlay-open
+@param {Object} detail
+@param {Object} detail.opened the opened state
+-->
+<!--
+Fired when the `core-overlay` has completely opened.
+
+@event core-overlay-open-completed
+-->
+<!--
+Fired when the `core-overlay` has completely closed.
+
+@event core-overlay-close-completed
+-->
+<!--
+Fired when the `core-overlay` needs to position itself. Optionally, implement
+in order to position an overlay via code. If the overlay was not otherwise
+positioned, it's important to indicate how the overlay has been positioned by
+setting the `dimensions.position` object. For example, if the overlay has been
+positioned via setting `right` and `top`, set dimensions.position to an
+object like this: `{v: 'top', h: 'right'}`.
+
+@event core-overlay-position
+@param {Object} detail
+@param {Object} detail.target the overlay target
+@param {Object} detail.sizingTarget the overlay sizing target
+@param {Object} detail.opened the opened state
+-->
+<style>
+  .core-overlay-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: black;
+    opacity: 0;
+    transition: opacity 0.2s;
+  }
+
+  .core-overlay-backdrop.core-opened {
+    opacity: 0.6;
+  }
+</style>
+
+<polymer-element name="core-overlay" assetpath="polymer/bower_components/core-overlay/">
+<script>
+(function() {
+
+  Polymer('core-overlay', {
+
+    publish: {
+      /**
+       * The target element that will be shown when the overlay is 
+       * opened. If unspecified, the core-overlay itself is the target.
+       *
+       * @attribute target
+       * @type Object
+       * @default the overlay element
+       */
+      target: null,
+
+
+      /**
+       * A `core-overlay`'s size is guaranteed to be 
+       * constrained to the window size. To achieve this, the sizingElement
+       * is sized with a max-height/width. By default this element is the 
+       * target element, but it can be specifically set to a specific element
+       * inside the target if that is more appropriate. This is useful, for 
+       * example, when a region inside the overlay should scroll if needed.
+       *
+       * @attribute sizingTarget
+       * @type Object
+       * @default the target element
+       */
+      sizingTarget: null,
+    
+      /**
+       * Set opened to true to show an overlay and to false to hide it.
+       * A `core-overlay` may be made initially opened by setting its
+       * `opened` attribute.
+       * @attribute opened
+       * @type boolean
+       * @default false
+       */
+      opened: false,
+
+      /**
+       * If true, the overlay has a backdrop darkening the rest of the screen.
+       * The backdrop element is attached to the document body and may be styled
+       * with the class `core-overlay-backdrop`. When opened the `core-opened`
+       * class is applied.
+       *
+       * @attribute backdrop
+       * @type boolean
+       * @default false
+       */    
+      backdrop: false,
+
+      /**
+       * If true, the overlay is guaranteed to display above page content.
+       *
+       * @attribute layered
+       * @type boolean
+       * @default false
+      */
+      layered: false,
+    
+      /**
+       * By default an overlay will close automatically if the user
+       * taps outside it or presses the escape key. Disable this
+       * behavior by setting the `autoCloseDisabled` property to true.
+       * @attribute autoCloseDisabled
+       * @type boolean
+       * @default false
+       */
+      autoCloseDisabled: false,
+
+      /**
+       * By default an overlay will focus its target or an element inside
+       * it with the `autoFocus` attribute. Disable this
+       * behavior by setting the `autoFocusDisabled` property to true.
+       * @attribute autoFocusDisabled
+       * @type boolean
+       * @default false
+       */
+      autoFocusDisabled: false,
+
+      /**
+       * This property specifies an attribute on elements that should
+       * close the overlay on tap. Should not set `closeSelector` if this
+       * is set.
+       *
+       * @attribute closeAttribute
+       * @type string
+       * @default "core-overlay-toggle"
+       */
+      closeAttribute: 'core-overlay-toggle',
+
+      /**
+       * This property specifies a selector matching elements that should
+       * close the overlay on tap. Should not set `closeAttribute` if this
+       * is set.
+       *
+       * @attribute closeSelector
+       * @type string
+       * @default ""
+       */
+      closeSelector: '',
+
+      /**
+       * The transition property specifies a string which identifies a 
+       * <a href="../core-transition/">`core-transition`</a> element that 
+       * will be used to help the overlay open and close. The default
+       * `core-transition-fade` will cause the overlay to fade in and out.
+       *
+       * @attribute transition
+       * @type string
+       * @default 'core-transition-fade'
+       */
+      transition: 'core-transition-fade'
+
+    },
+
+    captureEventName: 'tap',
+    targetListeners: {
+      'tap': 'tapHandler',
+      'keydown': 'keydownHandler',
+      'core-transitionend': 'transitionend'
+    },
+    
+    registerCallback: function(element) {
+      this.layer = document.createElement('core-overlay-layer');
+      this.keyHelper = document.createElement('core-key-helper');
+      this.meta = document.createElement('core-transition');
+      this.scrim = document.createElement('div');
+      this.scrim.className = 'core-overlay-backdrop';
+    },
+
+    ready: function() {
+      this.target = this.target || this;
+      // flush to ensure styles are installed before paint
+      Platform.flush();
+    },
+
+    /** 
+     * Toggle the opened state of the overlay.
+     * @method toggle
+     */
+    toggle: function() {
+      this.opened = !this.opened;
+    },
+
+    /** 
+     * Open the overlay. This is equivalent to setting the `opened`
+     * property to true.
+     * @method open
+     */
+    open: function() {
+      this.opened = true;
+    },
+
+    /** 
+     * Close the overlay. This is equivalent to setting the `opened` 
+     * property to false.
+     * @method close
+     */
+    close: function() {
+      this.opened = false;
+    },
+
+    domReady: function() {
+      this.ensureTargetSetup();
+    },
+
+    targetChanged: function(old) {
+      if (this.target) {
+        // really make sure tabIndex is set
+        if (this.target.tabIndex < 0) {
+          this.target.tabIndex = -1;
+        }
+        this.addElementListenerList(this.target, this.targetListeners);
+        this.target.style.display = 'none';
+        this.target.__overlaySetup = false;
+      }
+      if (old) {
+        this.removeElementListenerList(old, this.targetListeners);
+        var transition = this.getTransition();
+        if (transition) {
+          transition.teardown(old);
+        } else {
+          old.style.position = '';
+          old.style.outline = '';
+        }
+        old.style.display = '';
+      }
+    },
+
+    transitionChanged: function(old) {
+      if (!this.target) {
+        return;
+      }
+      if (old) {
+        this.getTransition(old).teardown(this.target);
+      }
+      this.target.__overlaySetup = false;
+    },
+
+    // NOTE: wait to call this until we're as sure as possible that target
+    // is styled.
+    ensureTargetSetup: function() {
+      if (!this.target || this.target.__overlaySetup) {
+        return;
+      }
+      if (!this.sizingTarget) {
+        this.sizingTarget = this.target;
+      }
+      this.target.__overlaySetup = true;
+      this.target.style.display = '';
+      var transition = this.getTransition();
+      if (transition) {
+        transition.setup(this.target);
+      }
+      var style = this.target.style;
+      var computed = getComputedStyle(this.target);
+      if (computed.position === 'static') {
+        style.position = 'fixed';
+      }
+      style.outline = 'none';
+      style.display = 'none';
+    },
+
+    openedChanged: function() {
+      this.transitioning = true;
+      this.ensureTargetSetup();
+      this.prepareRenderOpened();
+      // async here to allow overlay layer to become visible.
+      this.async(function() {
+        this.target.style.display = '';
+        // force layout to ensure transitions will go
+        this.target.offsetWidth;
+        this.renderOpened();
+      });
+      this.fire('core-overlay-open', this.opened);
+    },
+
+    // tasks which must occur before opening; e.g. making the element visible
+    prepareRenderOpened: function() {
+      if (this.opened) {
+        addOverlay(this);
+      }
+      this.prepareBackdrop();
+      // async so we don't auto-close immediately via a click.
+      this.async(function() {
+        if (!this.autoCloseDisabled) {
+          this.enableElementListener(this.opened, document,
+              this.captureEventName, 'captureHandler', true);
+        }
+      });
+      this.enableElementListener(this.opened, window, 'resize',
+          'resizeHandler');
+
+      if (this.opened) {
+        // force layout so SD Polyfill renders
+        this.target.offsetHeight;
+        this.discoverDimensions();
+        // if we are showing, then take care when positioning
+        this.preparePositioning();
+        this.positionTarget();
+        this.updateTargetDimensions();
+        this.finishPositioning();
+        if (this.layered) {
+          this.layer.addElement(this.target);
+          this.layer.opened = this.opened;
+        }
+      }
+    },
+
+    // tasks which cause the overlay to actually open; typically play an
+    // animation
+    renderOpened: function() {
+      var transition = this.getTransition();
+      if (transition) {
+        transition.go(this.target, {opened: this.opened});
+      } else {
+        this.transitionend();
+      }
+      this.renderBackdropOpened();
+    },
+
+    // finishing tasks; typically called via a transition
+    transitionend: function(e) {
+      // make sure this is our transition event.
+      if (e && e.target !== this.target) {
+        return;
+      }
+      this.transitioning = false;
+      if (!this.opened) {
+        this.resetTargetDimensions();
+        this.target.style.display = 'none';
+        this.completeBackdrop();
+        removeOverlay(this);
+        if (this.layered) {
+          if (!currentOverlay()) {
+            this.layer.opened = this.opened;
+          }
+          this.layer.removeElement(this.target);
+        }
+      }
+      this.fire('core-overlay-' + (this.opened ? 'open' : 'close') + 
+          '-completed');
+      this.applyFocus();
+    },
+
+    prepareBackdrop: function() {
+      if (this.backdrop && this.opened) {
+        if (!this.scrim.parentNode) {
+          document.body.appendChild(this.scrim);
+          this.scrim.style.zIndex = currentOverlayZ() - 1;
+        }
+        trackBackdrop(this);
+      }
+    },
+
+    renderBackdropOpened: function() {
+      if (this.backdrop && getBackdrops().length < 2) {
+        this.scrim.classList.toggle('core-opened', this.opened);
+      }
+    },
+
+    completeBackdrop: function() {
+      if (this.backdrop) {
+        trackBackdrop(this);
+        if (getBackdrops().length === 0) {
+          this.scrim.parentNode.removeChild(this.scrim);
+        }
+      }
+    },
+
+    preparePositioning: function() {
+      this.target.style.transition = this.target.style.webkitTransition = 'none';
+      this.target.style.transform = this.target.style.webkitTransform = 'none';
+      this.target.style.display = '';
+    },
+
+    discoverDimensions: function() {
+      if (this.dimensions) {
+        return;
+      }
+      var target = getComputedStyle(this.target);
+      var sizer = getComputedStyle(this.sizingTarget);
+      this.dimensions = {
+        position: {
+          v: target.top !== 'auto' ? 'top' : (target.bottom !== 'auto' ?
+            'bottom' : null),
+          h: target.left !== 'auto' ? 'left' : (target.right !== 'auto' ?
+            'right' : null),
+          css: target.position
+        },
+        size: {
+          v: sizer.maxHeight !== 'none',
+          h: sizer.maxWidth !== 'none'
+        },
+        margin: {
+          top: parseInt(target.marginTop) || 0,
+          right: parseInt(target.marginRight) || 0,
+          bottom: parseInt(target.marginBottom) || 0,
+          left: parseInt(target.marginLeft) || 0
+        }
+      };
+    },
+
+    finishPositioning: function(target) {
+      this.target.style.display = 'none';
+      this.target.style.transform = this.target.style.webkitTransform = '';
+      // force layout to avoid application of transform
+      this.target.offsetWidth;
+      this.target.style.transition = this.target.style.webkitTransition = '';
+    },
+
+    getTransition: function(name) {
+      return this.meta.byId(name || this.transition);
+    },
+
+    getFocusNode: function() {
+      return this.target.querySelector('[autofocus]') || this.target;
+    },
+
+    applyFocus: function() {
+      var focusNode = this.getFocusNode();
+      if (this.opened) {
+        if (!this.autoFocusDisabled) {
+          focusNode.focus();
+        }
+      } else {
+        focusNode.blur();
+        if (currentOverlay() == this) {
+          console.warn('Current core-overlay is attempting to focus itself as next! (bug)');
+        } else {
+          focusOverlay();
+        }
+      }
+    },
+
+    positionTarget: function() {
+      // fire positioning event
+      this.fire('core-overlay-position', {target: this.target,
+          sizingTarget: this.sizingTarget, opened: this.opened});
+      if (!this.dimensions.position.v) {
+        this.target.style.top = '0px';
+      }
+      if (!this.dimensions.position.h) {
+        this.target.style.left = '0px';
+      }
+    },
+
+    updateTargetDimensions: function() {
+      this.sizeTarget();
+      this.repositionTarget();
+    },
+
+    sizeTarget: function() {
+      this.sizingTarget.style.boxSizing = 'border-box';
+      var dims = this.dimensions;
+      var rect = this.target.getBoundingClientRect();
+      if (!dims.size.v) {
+        this.sizeDimension(rect, dims.position.v, 'top', 'bottom', 'Height');
+      }
+      if (!dims.size.h) {
+        this.sizeDimension(rect, dims.position.h, 'left', 'right', 'Width');
+      }
+    },
+
+    sizeDimension: function(rect, positionedBy, start, end, extent) {
+      var dims = this.dimensions;
+      var flip = (positionedBy === end);
+      var m = flip ? start : end;
+      var ws = window['inner' + extent];
+      var o = dims.margin[m] + (flip ? ws - rect[end] : 
+          rect[start]);
+      var offset = 'offset' + extent;
+      var o2 = this.target[offset] - this.sizingTarget[offset];
+      this.sizingTarget.style['max' + extent] = (ws - o - o2) + 'px';
+    },
+
+    // vertically and horizontally center if not positioned
+    repositionTarget: function() {
+      // only center if position fixed.      
+      if (this.dimensions.position.css !== 'fixed') {
+        return; 
+      }
+      if (!this.dimensions.position.v) {
+        var t = (window.innerHeight - this.target.offsetHeight) / 2;
+        t -= this.dimensions.margin.top;
+        this.target.style.top = t + 'px';
+      }
+
+      if (!this.dimensions.position.h) {
+        var l = (window.innerWidth - this.target.offsetWidth) / 2;
+        l -= this.dimensions.margin.left;
+        this.target.style.left = l + 'px';
+      }
+    },
+
+    resetTargetDimensions: function() {
+      if (!this.dimensions.size.v) {
+        this.sizingTarget.style.maxHeight = '';  
+      }
+      if (!this.dimensions.size.h) {
+        this.sizingTarget.style.maxWidth = '';  
+      }
+      this.dimensions = null;
+    },
+
+    tapHandler: function(e) {
+      // closeSelector takes precedence since closeAttribute has a default non-null value.
+      if (e.target &&
+          (this.closeSelector && e.target.matches(this.closeSelector)) ||
+          (this.closeAttribute && e.target.hasAttribute(this.closeAttribute))) {
+        this.toggle();
+      } else {
+        if (this.autoCloseJob) {
+          this.autoCloseJob.stop();
+          this.autoCloseJob = null;
+        }
+      }
+    },
+    
+    // We use the traditional approach of capturing events on document
+    // to to determine if the overlay needs to close. However, due to 
+    // ShadowDOM event retargeting, the event target is not useful. Instead
+    // of using it, we attempt to close asynchronously and prevent the close
+    // if a tap event is immediately heard on the target.
+    // TODO(sorvell): This approach will not work with modal. For
+    // this we need a scrim.
+    captureHandler: function(e) {
+      if (!this.autoCloseDisabled && (currentOverlay() == this)) {
+        this.autoCloseJob = this.job(this.autoCloseJob, function() {
+          this.close();
+        });
+      }
+    },
+
+    keydownHandler: function(e) {
+      if (!this.autoCloseDisabled && (e.keyCode == this.keyHelper.ESCAPE_KEY)) {
+        this.close();
+        e.stopPropagation();
+      }
+    },
+
+    /**
+     * Extensions of core-overlay should implement the `resizeHandler`
+     * method to adjust the size and position of the overlay when the 
+     * browser window resizes.
+     * @method resizeHandler
+     */
+    resizeHandler: function() {
+      this.updateTargetDimensions();
+    },
+
+    // TODO(sorvell): these utility methods should not be here.
+    addElementListenerList: function(node, events) {
+      for (var i in events) {
+        this.addElementListener(node, i, events[i]);
+      }
+    },
+
+    removeElementListenerList: function(node, events) {
+      for (var i in events) {
+        this.removeElementListener(node, i, events[i]);
+      }
+    },
+
+    enableElementListener: function(enable, node, event, methodName, capture) {
+      if (enable) {
+        this.addElementListener(node, event, methodName, capture);
+      } else {
+        this.removeElementListener(node, event, methodName, capture);
+      }
+    },
+
+    addElementListener: function(node, event, methodName, capture) {
+      var fn = this._makeBoundListener(methodName);
+      if (node && fn) {
+        Polymer.addEventListener(node, event, fn, capture);
+      }
+    },
+
+    removeElementListener: function(node, event, methodName, capture) {
+      var fn = this._makeBoundListener(methodName);
+      if (node && fn) {
+        Polymer.removeEventListener(node, event, fn, capture);
+      }
+    },
+
+    _makeBoundListener: function(methodName) {
+      var self = this, method = this[methodName];
+      if (!method) {
+        return;
+      }
+      var bound = '_bound' + methodName;
+      if (!this[bound]) {
+        this[bound] = function(e) {
+          method.call(self, e);
+        };
+      }
+      return this[bound];
+    },
+  });
+
+  // TODO(sorvell): This should be an element with private state so it can
+  // be independent of overlay.
+  // track overlays for z-index and focus managemant
+  var overlays = [];
+  function addOverlay(overlay) {
+    var z0 = currentOverlayZ();
+    overlays.push(overlay);
+    var z1 = currentOverlayZ();
+    if (z1 <= z0) {
+      applyOverlayZ(overlay, z0);
+    }
+  }
+
+  function removeOverlay(overlay) {
+    var i = overlays.indexOf(overlay);
+    if (i >= 0) {
+      overlays.splice(i, 1);
+      setZ(overlay, '');
+    }
+  }
+  
+  function applyOverlayZ(overlay, aboveZ) {
+    setZ(overlay.target, aboveZ + 2);
+  }
+  
+  function setZ(element, z) {
+    element.style.zIndex = z;
+  }
+
+  function currentOverlay() {
+    return overlays[overlays.length-1];
+  }
+  
+  var DEFAULT_Z = 10;
+  
+  function currentOverlayZ() {
+    var z;
+    var current = currentOverlay();
+    if (current) {
+      var z1 = window.getComputedStyle(current.target).zIndex;
+      if (!isNaN(z1)) {
+        z = Number(z1);
+      }
+    }
+    return z || DEFAULT_Z;
+  }
+  
+  function focusOverlay() {
+    var current = currentOverlay();
+    // We have to be careful to focus the next overlay _after_ any current
+    // transitions are complete (due to the state being toggled prior to the
+    // transition). Otherwise, we risk infinite recursion when a transitioning
+    // (closed) overlay becomes the current overlay.
+    //
+    // NOTE: We make the assumption that any overlay that completes a transition
+    // will call into focusOverlay to kick the process back off. Currently:
+    // transitionend -> applyFocus -> focusOverlay.
+    if (current && !current.transitioning) {
+      current.applyFocus();
+    }
+  }
+
+  var backdrops = [];
+  function trackBackdrop(element) {
+    if (element.opened) {
+      backdrops.push(element);
+    } else {
+      var i = backdrops.indexOf(element);
+      if (i >= 0) {
+        backdrops.splice(i, 1);
+      }
+    }
+  }
+
+  function getBackdrops() {
+    return backdrops;
+  }
+})();
+</script>
+</polymer-element>
+
+
+<!--
+
+`core-dropdown-overlay` is a helper class to position an overlay relative to another
+element within the same offsetParent.
+
+@group Polymer Core Elements
+@element core-dropdown-overlay
+@extends core-overlay
+@homepage github.io
+-->
+
+<polymer-element name="core-dropdown-overlay" extends="core-overlay" assetpath="polymer/bower_components/core-dropdown/">
+<script>
+    Polymer('core-dropdown-overlay',{
+
+      publish: {
+
+        /**
+         * The `relatedTarget` is an element used to position the overlay. It should have
+         * the same offsetParent as the target.
+         *
+         * @attribute relatedTarget
+         * @type Node
+         */
+        relatedTarget: null,
+
+        /**
+         * The horizontal alignment of the overlay relative to the `relatedTarget`.
+         * `left` means the left edges are aligned together and `right` means the right
+         * edges are aligned together.
+         *
+         * @attribute halign
+         * @type 'left' | 'right'
+         * @default 'auto'
+         */
+        halign: 'left',
+
+        /**
+         * The vertical alignment of the overlay relative to the `relatedTarget`. `top`
+         * means the top edges are aligned together and `bottom` means the bottom edges
+         * are aligned together.
+         *
+         * @attribute valign
+         * @type 'top' | 'bottom'
+         * @default 'top'
+         */
+        valign: 'top'
+
+      },
+
+      measure: function() {
+        var target = this.target;
+        // remember position, because core-overlay may have set the property
+        var pos = target.style.position;
+
+        // get the size of the target as if it's positioned in the top left
+        // corner of the screen
+        target.style.position = 'fixed';
+        target.style.left = '0px';
+        target.style.top = '0px';
+
+        var rect = target.getBoundingClientRect();
+
+        target.style.position = pos;
+        target.style.left = null;
+        target.style.top = null;
+
+        return rect;
+      },
+
+      resetTargetDimensions: function() {
+        var dims = this.dimensions;
+        var style = this.target.style;
+        if (dims.position.h_by === this.localName) {
+          style[dims.position.h] = null;
+        }
+        if (dims.position.v_by === this.localName) {
+          style[dims.position.v] = null;
+        }
+        this.super();
+      },
+
+      positionTarget: function() {
+        if (!this.relatedTarget) {
+          this.super();
+          return;
+        }
+
+        var target = this.target;
+        var related = this.relatedTarget;
+
+        // explicitly set width/height, because we don't want it constrained
+        // to the offsetParent
+        var rect = this.measure();
+        target.style.width = rect.width + 'px';
+        target.style.height = rect.height + 'px';
+
+        var t_op = target.offsetParent;
+        var r_op = related.offsetParent;
+        if (window.ShadowDOMPolyfill) {
+          t_op = wrap(t_op);
+          r_op = wrap(r_op);
+        }
+
+        if (t_op !== r_op && t_op !== related) {
+          console.warn('core-dropdown-overlay: dropdown\'s offsetParent must be the relatedTarget or the relatedTarget\'s offsetParent!');
+        }
+
+        // Don't use CSS to handle halign/valign so we can use
+        // dimensions.position to detect custom positioning
+
+        var dims = this.dimensions;
+        var margin = dims.margin;
+        var inside = t_op === related;
+
+        if (!dims.position.h) {
+          if (this.halign === 'right') {
+            target.style.right = ((inside ? 0 : t_op.offsetWidth - related.offsetLeft - related.offsetWidth) - margin.right) + 'px';
+            dims.position.h = 'right';
+          } else {
+            target.style.left = ((inside ? 0 : related.offsetLeft) - margin.left) + 'px';
+            dims.position.h = 'left';
+          }
+          dims.position.h_by = this.localName;
+        }
+
+        if (!dims.position.v) {
+          if (this.valign === 'bottom') {
+            target.style.bottom = ((inside ? 0 : t_op.offsetHeight - related.offsetTop - related.offsetHeight) - margin.bottom) + 'px';
+            dims.position.v = 'bottom';
+          } else {
+            target.style.top = ((inside ? 0 : related.offsetTop) - margin.top) + 'px';
+            dims.position.v = 'top';
+          }
+          dims.position.v_by = this.localName;
+        }
+      }
+
+    });
+  </script>
+</polymer-element>
+
+
+<polymer-element name="core-dropdown" assetpath="polymer/bower_components/core-dropdown/">
+<template>
+
+  <style>/*
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+*/
+
+:host {
+  position: absolute;
+  overflow: auto;
+  background-color: #fff;
+}</style>
+
+  <core-dropdown-overlay id="overlay" target="{{}}" relatedtarget="{{relatedTarget}}" opened="{{opened}}" halign="{{halign}}" valign="{{valign}}" margin="{{margin}}" transition="{{transition}}" autofocusdisabled="{{autoFocusDisabled}}"></core-dropdown-overlay>
+
+  <content></content>
+
+</template>
+<script>
+
+  Polymer('core-dropdown',{
+
+    publish: {
+
+      /**
+       * The element associated with this dropdown, usually the element that triggers
+       * the menu.
+       *
+       * @attribute relatedTarget
+       * @type Node
+       */
+      relatedTarget: null,
+
+      /**
+       * If true, the menu is currently visible.
+       *
+       * @attribute opened
+       * @type boolean
+       * @default false
+       */
+      opened: false,
+
+      /**
+       * The horizontal alignment of the popup relative to `relatedTarget`. `left`
+       * means the left edges are aligned together. `right` means the right edges
+       * are aligned together.
+       *
+       * @attribute halign
+       * @type 'left' | 'right'
+       * @default 'left'
+       */
+      halign: 'left',
+
+      /**
+       * The vertical alignment of the popup relative to `relatedTarget`. `top` means
+       * the top edges are aligned together. `bottom` means the bottom edges are
+       * aligned together.
+       *
+       * @attribute valign
+       * @type 'top' | 'bottom'
+       * @default 'top'
+       */
+      valign: 'top',
+
+     /**
+       * By default an overlay will focus its target or an element inside
+       * it with the `autoFocus` attribute. Disable this
+       * behavior by setting the `autoFocusDisabled` property to true.
+       *
+       * @attribute autoFocusDisabled
+       * @type boolean
+       * @default false
+       */
+      autoFocusDisabled: false,
+
+      /**
+       * The transition property specifies a string which identifies a 
+       * <a href="../core-transition/">`core-transition`</a> element that 
+       * will be used to help the overlay open and close. The default
+       * `core-transition-fade` will cause the overlay to fade in and out.
+       *
+       * @attribute transition
+       * @type string
+       * @default null
+       */
+      transition: null
+
+    }
+
+  });
+
+</script>
+</polymer-element>
+
+
+<!--
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<!--
+`core-menu` is a selector which styles to looks like a menu.
+
+    <core-menu selected="0">
+      <core-item icon="settings" label="Settings"></core-item>
+      <core-item icon="dialog" label="Dialog"></core-item>
+      <core-item icon="search" label="Search"></core-item>
+    </core-menu>
+    
+When an item is selected the `core-selected` class is added to it.  The user can
+use the class to add more stylings to the selected item.
+
+    core-item.core-selected {
+      color: red;
+    }
+
+The `selectedItem` property references the selected item.
+
+    <core-menu selected="0" selectedItem="{{item}}">
+      <core-item icon="settings" label="Settings"></core-item>
+      <core-item icon="dialog" label="Dialog"></core-item>
+      <core-item icon="search" label="Search"></core-item>
+    </core-menu>
+
+    <div>selected label: {{item.label}}</div>
+
+The `core-select` event signals selection change.
+
+    <core-menu selected="0" on-core-select="{{selectAction}}">
+      <core-item icon="settings" label="Settings"></core-item>
+      <core-item icon="dialog" label="Dialog"></core-item>
+      <core-item icon="search" label="Search"></core-item>
+    </core-menu>
+
+    ...
+
+    selectAction: function(e, detail) {
+      if (detail.isSelected) {
+        var selectedItem = detail.item;
+        ...
+      }
+    }
+
+@group Polymer Core Elements
+@element core-menu
+@extends core-selector
+-->
+
 <!--
 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
@@ -5588,6 +6968,6276 @@ contains the selection state.
   </script>
 </polymer-element>
 
+
+<polymer-element name="core-menu" extends="core-selector" assetpath="polymer/bower_components/core-menu/">
+<template>
+
+  <style>/*
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+*/
+
+:host {
+  display: block;
+  margin: 12px;
+}
+
+polyfill-next-selector { content: ':host > core-item'; }
+::content > core-item {
+  cursor: default;
+}
+</style>
+  
+  <shadow></shadow>
+  
+</template>
+<script>Polymer('core-menu');</script></polymer-element>
+
+
+
+
+
+
+<!--
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<!--
+@group Paper Elements
+@class paper-menu-button-transition
+@extends core-transition-css
+-->
+
+<!--
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<!--
+
+`<core-transition-css>` implements CSS transitions as `<core-transition>` objects so they can be
+reused in a pluggable transition system such as in `<core-overlay>`. Currently this class has
+some specific support to animate an element from and to the viewport such as a dialog, but you
+can override it for different effects.
+
+Example:
+
+my-css-transition.html:
+
+    <polymer-element name="my-css-transition" extends="core-transition-css">
+    <template>
+        <style>
+            :host(.my-transition) {
+                opacity: 0;
+                transition: transform 1s ease-out, opacity 1s ease-out;
+            }
+            :host(.my-transition.my-opened) {
+                opacity: 1;
+                transform: none;
+            }
+            :host(.my-transition-top) {
+                transform: translateY(-100vh);
+            }
+            :host(.my-transition-bottom) {
+                transform: translateY(100vh);
+            }
+        </style>
+    </template>
+    <script>
+      Polymer({
+        baseClass: 'my-transition',
+        openedClass: 'my-opened'
+      });
+    </script>
+    </polymer-element>
+
+    <my-css-transition id="my-transition-top" transitionType="top"></my-css-transition>
+    <my-css-transition id="my-transition-bottom" transitionType="bottom"></my-css-transition>
+
+my-css-transition-demo.html
+
+    <link href="components/core-meta/core-meta.html" rel="import">
+    <link href="my-css-transition.html">
+
+    <div id="animate-me"></div>
+
+    <script>
+        // Get the core-transition
+        var meta = document.createElement('core-meta');
+        meta.type = 'transition';
+        var transition1 = meta.byId('my-transition-top');
+
+        // Set up the animation
+        var animated = document.getElementById('animate-me');
+        transition1.setup(animated);
+        transition1.go(animated, {opened: true});
+    </script>
+
+The first element in the template of a `<core-transition-css>` object should be a stylesheet. It
+will be injected to the scope of the animated node in the `setup` function. The node is initially
+invisible with `opacity: 0`, and you can transition it to an "opened" state by passing
+`{opened: true}` to the `go` function.
+
+All nodes being animated will get the class `my-transition` added in the `setup` function.
+Additionally, the class `my-transition-<transitionType>` will be applied. You can use the
+`transitionType` attribute to implement several different behaviors with the same
+`<core-transition-css>` object. In the above example, `<my-css-transition>` implements both
+sliding the node from the top of the viewport and from the bottom of the viewport.
+
+Available transitions
+---------------------
+
+`<core-transition-css>` includes several commonly used transitions.
+
+`core-transition-fade`: Animates from `opacity: 0` to `opacity: 1` when it opens.
+
+`core-transition-center`: Zooms the node into the final size.
+
+`core-transition-top`: Slides the node into the final position from the top.
+
+`core-transition-bottom`: Slides the node into the final position from the bottom.
+
+`core-transition-left`: Slides the node into the final position from the left.
+
+`core-transition-right`: Slides the node into the final position from the right.
+
+@group Polymer Core Elements
+@element core-transition-css
+@extends core-transition
+@status beta
+@homepage github.io
+-->
+
+
+
+<polymer-element name="core-transition-css" extends="core-transition" attributes="transitionType" assetpath="polymer/bower_components/core-transition/">
+<template>
+  <style no-shim="">/* Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt */
+
+:host(.core-transition) {
+  outline: none;
+  overflow: auto;
+  opacity: 0;
+  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in;
+  -webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in;
+}
+
+
+:host(.core-transition.core-opened) {
+  opacity: 1;
+  transform: translateZ(0);
+  -webkit-transform: translateZ(0);
+}
+
+:host(.core-transition-center) {
+  transform: scale(0.5);
+  -webkit-transform: scale(0.5);
+}
+
+:host(.core-transition-top) {
+  transform: translateY(-200%);
+  -webkit-transform: translateY(-200%);
+}
+
+:host(.core-transition-bottom) {
+  transform: translateY(200%);
+  -webkit-transform: translateY(200%);
+}
+
+:host(.core-transition-left) {
+  transform: translateX(-200%);
+  -webkit-transform: translateX(-200%);
+}
+
+:host(.core-transition-right) {
+  transform: translateX(200%);
+  -webkit-transform: translateX(200%);
+}</style>
+</template>
+<script>
+
+  Polymer('core-transition-css', {
+    
+    /**
+     * The class that will be applied to all animated nodes.
+     *
+     * @attribute baseClass
+     * @type string
+     * @default "core-transition"
+     */
+    baseClass: 'core-transition',
+
+    /**
+     * The class that will be applied to nodes in the opened state.
+     *
+     * @attribute openedClass
+     * @type string
+     * @default "core-opened"
+     */
+    openedClass: 'core-opened',
+
+    /**
+     * The class that will be applied to nodes in the closed state.
+     *
+     * @attribute closedClass
+     * @type string
+     * @default "core-closed"
+     */
+    closedClass: 'core-closed',
+
+    /**
+     * Event to listen to for animation completion.
+     *
+     * @attribute completeEventName
+     * @type string
+     * @default "transitionEnd"
+     */
+    completeEventName: 'transitionend',
+
+    publish: {
+      /**
+       * A secondary configuration attribute for the animation. The class
+       * `<baseClass>-<transitionType` is applied to the animated node during
+       * `setup`.
+       *
+       * @attribute transitionType
+       * @type string
+       */
+      transitionType: null
+    },
+
+    registerCallback: function(element) {
+      this.transitionStyle = element.templateContent().firstElementChild;
+    },
+
+    // template is just for loading styles, we don't need a shadowRoot
+    fetchTemplate: function() {
+      return null;
+    },
+
+    go: function(node, state) {
+      if (state.opened !== undefined) {
+        this.transitionOpened(node, state.opened);
+      }
+    },
+
+    setup: function(node) {
+      if (!node._hasTransitionStyle) {
+        if (!node.shadowRoot) {
+          node.createShadowRoot().innerHTML = '<content></content>';
+        }
+        this.installScopeStyle(this.transitionStyle, 'transition',
+            node.shadowRoot);
+        node._hasTransitionStyle = true;
+      }
+      node.classList.add(this.baseClass);
+      if (this.transitionType) {
+        node.classList.add(this.baseClass + '-' + this.transitionType);
+      }
+    },
+
+    teardown: function(node) {
+      node.classList.remove(this.baseClass);
+      if (this.transitionType) {
+        node.classList.remove(this.baseClass + '-' + this.transitionType);
+      }
+    },
+
+    transitionOpened: function(node, opened) {
+      this.listenOnce(node, this.completeEventName, function() {
+        node.classList.toggle(this.revealedClass, opened);
+        if (!opened) {
+          node.classList.remove(this.closedClass);
+        }
+        this.complete(node);
+      });
+      node.classList.toggle(this.openedClass, opened);
+      node.classList.toggle(this.closedClass, !opened);
+    }
+
+  });
+</script>
+</polymer-element>
+
+<core-transition-css id="core-transition-fade"></core-transition-css>
+<core-transition-css id="core-transition-center" transitiontype="center"></core-transition-css>
+<core-transition-css id="core-transition-top" transitiontype="top"></core-transition-css>
+<core-transition-css id="core-transition-bottom" transitiontype="bottom"></core-transition-css>
+<core-transition-css id="core-transition-left" transitiontype="left"></core-transition-css>
+<core-transition-css id="core-transition-right" transitiontype="right"></core-transition-css>
+
+<!--
+    @license
+    Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+    This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+    The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+    The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+    Code distributed by Google as part of the polymer project is also
+    subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<script>/**
+ * Copyright 2012 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.
+ */
+
+(function() {
+'use strict';
+
+var ASSERT_ENABLED = false;
+var SVG_NS = 'http://www.w3.org/2000/svg';
+
+function assert(check, message) {
+  console.assert(ASSERT_ENABLED,
+      'assert should not be called when ASSERT_ENABLED is false');
+  console.assert(check, message);
+  // Some implementations of console.assert don't actually throw
+  if (!check) { throw message; }
+}
+
+function detectFeatures() {
+  var el = createDummyElement();
+  el.style.cssText = 'width: calc(0px);' +
+                     'width: -webkit-calc(0px);';
+  var calcFunction = el.style.width.split('(')[0];
+  function detectProperty(candidateProperties) {
+    return [].filter.call(candidateProperties, function(property) {
+      return property in el.style;
+    })[0];
+  }
+  var transformProperty = detectProperty([
+    'transform',
+    'webkitTransform',
+    'msTransform']);
+  var perspectiveProperty = detectProperty([
+    'perspective',
+    'webkitPerspective',
+    'msPerspective']);
+  return {
+    calcFunction: calcFunction,
+    transformProperty: transformProperty,
+    transformOriginProperty: transformProperty + 'Origin',
+    perspectiveProperty: perspectiveProperty,
+    perspectiveOriginProperty: perspectiveProperty + 'Origin'
+  };
+}
+var features = detectFeatures();
+
+function prefixProperty(property) {
+  switch (property) {
+    case 'transform':
+      return features.transformProperty;
+    case 'transformOrigin':
+      return features.transformOriginProperty;
+    case 'perspective':
+      return features.perspectiveProperty;
+    case 'perspectiveOrigin':
+      return features.perspectiveOriginProperty;
+    default:
+      return property;
+  }
+}
+
+function createDummyElement() {
+  return document.documentElement.namespaceURI == SVG_NS ?
+         document.createElementNS(SVG_NS, 'g') :
+         document.createElement('div');
+}
+
+var constructorToken = {};
+var deprecationsSilenced = {};
+
+var createObject = function(proto, obj) {
+  var newObject = Object.create(proto);
+  Object.getOwnPropertyNames(obj).forEach(function(name) {
+    Object.defineProperty(
+        newObject, name, Object.getOwnPropertyDescriptor(obj, name));
+  });
+  return newObject;
+};
+
+var abstractMethod = function() {
+  throw 'Abstract method not implemented.';
+};
+
+var deprecated = function(name, deprecationDate, advice, plural) {
+  if (deprecationsSilenced[name]) {
+    return;
+  }
+  var auxVerb = plural ? 'are' : 'is';
+  var today = new Date();
+  var cutoffDate = new Date(deprecationDate);
+  cutoffDate.setMonth(cutoffDate.getMonth() + 3); // 3 months grace period
+
+  if (today < cutoffDate) {
+    console.warn('Web Animations: ' + name +
+        ' ' + auxVerb + ' deprecated and will stop working on ' +
+        cutoffDate.toDateString() + '. ' + advice);
+    deprecationsSilenced[name] = true;
+  } else {
+    throw new Error(name + ' ' + auxVerb + ' no longer supported. ' + advice);
+  }
+};
+
+var defineDeprecatedProperty = function(object, property, getFunc, setFunc) {
+  var descriptor = {
+    get: getFunc,
+    configurable: true
+  };
+  if (setFunc) {
+    descriptor.set = setFunc;
+  }
+  Object.defineProperty(object, property, descriptor);
+};
+
+var IndexSizeError = function(message) {
+  Error.call(this);
+  this.name = 'IndexSizeError';
+  this.message = message;
+};
+
+IndexSizeError.prototype = Object.create(Error.prototype);
+
+
+
+/** @constructor */
+var TimingDict = function(timingInput) {
+  if (typeof timingInput === 'object') {
+    for (var k in timingInput) {
+      if (k in TimingDict.prototype) {
+        this[k] = timingInput[k];
+      }
+    }
+  } else if (isDefinedAndNotNull(timingInput)) {
+    this.duration = Number(timingInput);
+  }
+};
+
+TimingDict.prototype = {
+  delay: 0,
+  endDelay: 0,
+  fill: 'auto',
+  iterationStart: 0,
+  iterations: 1,
+  duration: 'auto',
+  playbackRate: 1,
+  direction: 'normal',
+  easing: 'linear'
+};
+
+
+
+/** @constructor */
+var Timing = function(token, timingInput, changeHandler) {
+  if (token !== constructorToken) {
+    throw new TypeError('Illegal constructor');
+  }
+  this._dict = new TimingDict(timingInput);
+  this._changeHandler = changeHandler;
+};
+
+Timing.prototype = {
+  _timingFunction: function(timedItem) {
+    var timingFunction = TimingFunction.createFromString(
+        this.easing, timedItem);
+    this._timingFunction = function() {
+      return timingFunction;
+    };
+    return timingFunction;
+  },
+  _invalidateTimingFunction: function() {
+    delete this._timingFunction;
+  },
+  _iterations: function() {
+    var value = this._dict.iterations;
+    return value < 0 ? 1 : value;
+  },
+  _duration: function() {
+    var value = this._dict.duration;
+    return typeof value === 'number' ? value : 'auto';
+  },
+  _clone: function() {
+    return new Timing(
+        constructorToken, this._dict, this._updateInternalState.bind(this));
+  }
+};
+
+// Configures an accessor descriptor for use with Object.defineProperty() to
+// allow the property to be changed and enumerated, to match __defineGetter__()
+// and __defineSetter__().
+var configureDescriptor = function(descriptor) {
+  descriptor.configurable = true;
+  descriptor.enumerable = true;
+  return descriptor;
+};
+
+Timing._defineProperty = function(prop) {
+  Object.defineProperty(Timing.prototype, prop, configureDescriptor({
+    get: function() {
+      return this._dict[prop];
+    },
+    set: function(value) {
+      if (isDefinedAndNotNull(value)) {
+        if (prop == 'duration' && value == 'auto') {
+          // duration is not always a number
+        } else if (['delay', 'endDelay', 'iterationStart', 'iterations',
+                    'duration', 'playbackRate'].indexOf(prop) >= 0) {
+          value = Number(value);
+        }
+        this._dict[prop] = value;
+      } else {
+        delete this._dict[prop];
+      }
+      // FIXME: probably need to implement specialized handling parsing
+      // for each property
+      if (prop === 'easing') {
+        // Cached timing function may be invalid now.
+        this._invalidateTimingFunction();
+      }
+      this._changeHandler();
+    }
+  }));
+};
+
+for (var prop in TimingDict.prototype) {
+  Timing._defineProperty(prop);
+}
+
+var isDefined = function(val) {
+  return typeof val !== 'undefined';
+};
+
+var isDefinedAndNotNull = function(val) {
+  return isDefined(val) && (val !== null);
+};
+
+
+
+/** @constructor */
+var AnimationTimeline = function(token) {
+  if (token !== constructorToken) {
+    throw new TypeError('Illegal constructor');
+  }
+  // TODO: This will probably need to change.
+  this._startTime = documentTimeZeroAsClockTime;
+};
+
+AnimationTimeline.prototype = {
+  get currentTime() {
+    if (this._startTime === undefined) {
+      this._startTime = documentTimeZeroAsClockTime;
+      if (this._startTime === undefined) {
+        return null;
+      }
+    }
+    return relativeTime(cachedClockTime(), this._startTime);
+  },
+  get effectiveCurrentTime() {
+    return this.currentTime || 0;
+  },
+  play: function(source) {
+    return new AnimationPlayer(constructorToken, source, this);
+  },
+  getCurrentPlayers: function() {
+    return PLAYERS.filter(function(player) {
+      return !player._isPastEndOfActiveInterval();
+    });
+  },
+  toTimelineTime: function(otherTime, other) {
+    if ((this.currentTime === null) || (other.currentTime === null)) {
+      return null;
+    } else {
+      return otherTime + other._startTime - this._startTime;
+    }
+  },
+  _pauseAnimationsForTesting: function(pauseAt) {
+    PLAYERS.forEach(function(player) {
+      player.pause();
+      player.currentTime = pauseAt;
+    });
+  }
+};
+
+// TODO: Remove dead players from here?
+var PLAYERS = [];
+var playersAreSorted = false;
+var playerSequenceNumber = 0;
+
+// Methods for event target objects.
+var initializeEventTarget = function(eventTarget) {
+  eventTarget._handlers = {};
+  eventTarget._onHandlers = {};
+};
+var setOnEventHandler = function(eventTarget, type, handler) {
+  if (typeof handler === 'function') {
+    eventTarget._onHandlers[type] = {
+      callback: handler,
+      index: (eventTarget._handlers[type] || []).length
+    };
+  } else {
+    eventTarget._onHandlers[type] = null;
+  }
+};
+var getOnEventHandler = function(eventTarget, type) {
+  if (isDefinedAndNotNull(eventTarget._onHandlers[type])) {
+    return eventTarget._onHandlers[type].callback;
+  }
+  return null;
+};
+var addEventHandler = function(eventTarget, type, handler) {
+  if (typeof handler !== 'function') {
+    return;
+  }
+  if (!isDefinedAndNotNull(eventTarget._handlers[type])) {
+    eventTarget._handlers[type] = [];
+  } else if (eventTarget._handlers[type].indexOf(handler) !== -1) {
+    return;
+  }
+  eventTarget._handlers[type].push(handler);
+};
+var removeEventHandler = function(eventTarget, type, handler) {
+  if (!eventTarget._handlers[type]) {
+    return;
+  }
+  var index = eventTarget._handlers[type].indexOf(handler);
+  if (index === -1) {
+    return;
+  }
+  eventTarget._handlers[type].splice(index, 1);
+  if (isDefinedAndNotNull(eventTarget._onHandlers[type]) &&
+      (index < eventTarget._onHandlers[type].index)) {
+    eventTarget._onHandlers[type].index -= 1;
+  }
+};
+var hasEventHandlersForEvent = function(eventTarget, type) {
+  return (isDefinedAndNotNull(eventTarget._handlers[type]) &&
+      eventTarget._handlers[type].length > 0) ||
+      isDefinedAndNotNull(eventTarget._onHandlers[type]);
+};
+var callEventHandlers = function(eventTarget, type, event) {
+  var callbackList;
+  if (isDefinedAndNotNull(eventTarget._handlers[type])) {
+    callbackList = eventTarget._handlers[type].slice();
+  } else {
+    callbackList = [];
+  }
+  if (isDefinedAndNotNull(eventTarget._onHandlers[type])) {
+    callbackList.splice(eventTarget._onHandlers[type].index, 0,
+        eventTarget._onHandlers[type].callback);
+  }
+  setTimeout(function() {
+    for (var i = 0; i < callbackList.length; i++) {
+      callbackList[i].call(eventTarget, event);
+    }
+  }, 0);
+};
+var createEventPrototype = function() {
+  var prototype = Object.create(window.Event.prototype, {
+    type: { get: function() { return this._type; } },
+    target: { get: function() { return this._target; } },
+    currentTarget: { get: function() { return this._target; } },
+    eventPhase: { get: function() { return this._eventPhase; } },
+    bubbles: { get: function() { return false; } },
+    cancelable: { get: function() { return false; } },
+    timeStamp: { get: function() { return this._timeStamp; } },
+    defaultPrevented: { get: function() { return false; } }
+  });
+  prototype._type = '';
+  prototype._target = null;
+  prototype._eventPhase = Event.NONE;
+  prototype._timeStamp = 0;
+  prototype._initialize = function(target) {
+    this._target = target;
+    this._eventPhase = Event.AT_TARGET;
+    this._timeStamp = cachedClockTime();
+  };
+  return prototype;
+};
+
+
+
+/** @constructor */
+var AnimationPlayer = function(token, source, timeline) {
+  if (token !== constructorToken) {
+    throw new TypeError('Illegal constructor');
+  }
+  enterModifyCurrentAnimationState();
+  try {
+    this._registeredOnTimeline = false;
+    this._sequenceNumber = playerSequenceNumber++;
+    this._timeline = timeline;
+    this._startTime =
+        this.timeline.currentTime === null ? 0 : this.timeline.currentTime;
+    this._storedTimeLag = 0.0;
+    this._pausedState = false;
+    this._holdTime = null;
+    this._previousCurrentTime = null;
+    this._playbackRate = 1.0;
+    this._hasTicked = false;
+
+    this.source = source;
+    this._lastCurrentTime = undefined;
+    this._finishedFlag = false;
+    initializeEventTarget(this);
+
+    playersAreSorted = false;
+    maybeRestartAnimation();
+  } finally {
+    exitModifyCurrentAnimationState(ensureRetickBeforeGetComputedStyle);
+  }
+};
+
+AnimationPlayer.prototype = {
+  set source(source) {
+    enterModifyCurrentAnimationState();
+    try {
+      if (isDefinedAndNotNull(this.source)) {
+        // To prevent infinite recursion.
+        var oldTimedItem = this.source;
+        this._source = null;
+        oldTimedItem._attach(null);
+      }
+      this._source = source;
+      if (isDefinedAndNotNull(this.source)) {
+        this.source._attach(this);
+        this._update();
+        maybeRestartAnimation();
+      }
+    } finally {
+      exitModifyCurrentAnimationState(repeatLastTick);
+    }
+  },
+  get source() {
+    return this._source;
+  },
+  // This is the effective current time.
+  set currentTime(currentTime) {
+    enterModifyCurrentAnimationState();
+    try {
+      this._currentTime = currentTime;
+    } finally {
+      exitModifyCurrentAnimationState(repeatLastTick);
+    }
+  },
+  get currentTime() {
+    return this._currentTime;
+  },
+  set _currentTime(seekTime) {
+    // If we are paused or seeking to a time where limiting applies (i.e. beyond
+    // the end in the current direction), update the hold time.
+    var sourceContentEnd = this.source ? this.source.endTime : 0;
+    if (this.paused ||
+        (this.playbackRate > 0 && seekTime >= sourceContentEnd) ||
+        (this.playbackRate < 0 && seekTime <= 0)) {
+      this._holdTime = seekTime;
+    // Otherwise, clear the hold time (it may been set by previously seeking to
+    // a limited time) and update the time lag.
+    } else {
+      this._holdTime = null;
+      this._storedTimeLag = (this.timeline.effectiveCurrentTime -
+          this.startTime) * this.playbackRate - seekTime;
+    }
+    this._update();
+    maybeRestartAnimation();
+  },
+  get _currentTime() {
+    this._previousCurrentTime = (this.timeline.effectiveCurrentTime -
+        this.startTime) * this.playbackRate - this.timeLag;
+    return this._previousCurrentTime;
+  },
+  get _unlimitedCurrentTime() {
+    return (this.timeline.effectiveCurrentTime - this.startTime) *
+        this.playbackRate - this._storedTimeLag;
+  },
+  get timeLag() {
+    if (this.paused) {
+      return this._pauseTimeLag;
+    }
+
+    // Apply limiting at start of interval when playing in reverse
+    if (this.playbackRate < 0 && this._unlimitedCurrentTime <= 0) {
+      if (this._holdTime === null) {
+        this._holdTime = Math.min(this._previousCurrentTime, 0);
+      }
+      return this._pauseTimeLag;
+    }
+
+    // Apply limiting at end of interval when playing forwards
+    var sourceContentEnd = this.source ? this.source.endTime : 0;
+    if (this.playbackRate > 0 &&
+        this._unlimitedCurrentTime >= sourceContentEnd) {
+      if (this._holdTime === null) {
+        this._holdTime = Math.max(this._previousCurrentTime, sourceContentEnd);
+      }
+      return this._pauseTimeLag;
+    }
+
+    // Finished limiting so store pause time lag
+    if (this._holdTime !== null) {
+      this._storedTimeLag = this._pauseTimeLag;
+      this._holdTime = null;
+    }
+
+    return this._storedTimeLag;
+  },
+  get _pauseTimeLag() {
+    return ((this.timeline.currentTime || 0) - this.startTime) *
+        this.playbackRate - this._holdTime;
+  },
+  set startTime(startTime) {
+    enterModifyCurrentAnimationState();
+    try {
+      // This seeks by updating _startTime and hence the currentTime. It does
+      // not affect _storedTimeLag.
+      this._startTime = startTime;
+      this._holdTime = null;
+      playersAreSorted = false;
+      this._update();
+      maybeRestartAnimation();
+    } finally {
+      exitModifyCurrentAnimationState(repeatLastTick);
+    }
+  },
+  get startTime() {
+    return this._startTime;
+  },
+  set _paused(isPaused) {
+    if (isPaused === this._pausedState) {
+      return;
+    }
+    if (this._pausedState) {
+      this._storedTimeLag = this.timeLag;
+      this._holdTime = null;
+      maybeRestartAnimation();
+    } else {
+      this._holdTime = this.currentTime;
+    }
+    this._pausedState = isPaused;
+  },
+  get paused() {
+    return this._pausedState;
+  },
+  get timeline() {
+    return this._timeline;
+  },
+  set playbackRate(playbackRate) {
+    enterModifyCurrentAnimationState();
+    try {
+      var cachedCurrentTime = this.currentTime;
+      // This will impact currentTime, so perform a compensatory seek.
+      this._playbackRate = playbackRate;
+      this.currentTime = cachedCurrentTime;
+    } finally {
+      exitModifyCurrentAnimationState(repeatLastTick);
+    }
+  },
+  get playbackRate() {
+    return this._playbackRate;
+  },
+  get finished() {
+    return this._isLimited;
+  },
+  get _isLimited() {
+    var sourceEnd = this.source ? this.source.endTime : 0;
+    return ((this.playbackRate > 0 && this.currentTime >= sourceEnd) ||
+        (this.playbackRate < 0 && this.currentTime <= 0));
+  },
+  cancel: function() {
+    this.source = null;
+  },
+  finish: function() {
+    if (this.playbackRate < 0) {
+      this.currentTime = 0;
+    } else if (this.playbackRate > 0) {
+      var sourceEndTime = this.source ? this.source.endTime : 0;
+      if (sourceEndTime === Infinity) {
+        throw new Error('InvalidStateError');
+      }
+      this.currentTime = sourceEndTime;
+    }
+  },
+  play: function() {
+    this._paused = false;
+    if (!this.source) {
+      return;
+    }
+    if (this.playbackRate > 0 &&
+        (this.currentTime < 0 ||
+         this.currentTime >= this.source.endTime)) {
+      this.currentTime = 0;
+    } else if (this.playbackRate < 0 &&
+        (this.currentTime <= 0 ||
+        this.currentTime > this.source.endTime)) {
+      this.currentTime = this.source.endTime;
+    }
+  },
+  pause: function() {
+    this._paused = true;
+  },
+  reverse: function() {
+    if (this.playbackRate === 0) {
+      return;
+    }
+    if (this.source) {
+      if (this.playbackRate > 0 && this.currentTime >= this.source.endTime) {
+        this.currentTime = this.source.endTime;
+      } else if (this.playbackRate < 0 && this.currentTime < 0) {
+        this.currentTime = 0;
+      }
+    }
+    this.playbackRate = -this.playbackRate;
+    this._paused = false;
+  },
+  _update: function() {
+    if (this.source !== null) {
+      this.source._updateInheritedTime(
+          this.timeline.currentTime === null ? null : this._currentTime);
+      this._registerOnTimeline();
+    }
+  },
+  _hasFutureAnimation: function() {
+    return this.source === null || this.playbackRate === 0 ||
+        this.source._hasFutureAnimation(this.playbackRate > 0);
+  },
+  _isPastEndOfActiveInterval: function() {
+    return this.source === null ||
+        this.source._isPastEndOfActiveInterval();
+  },
+  _isCurrent: function() {
+    return this.source && this.source._isCurrent();
+  },
+  _hasFutureEffect: function() {
+    return this.source && this.source._hasFutureEffect();
+  },
+  _getLeafItemsInEffect: function(items) {
+    if (this.source) {
+      this.source._getLeafItemsInEffect(items);
+    }
+  },
+  _isTargetingElement: function(element) {
+    return this.source && this.source._isTargetingElement(element);
+  },
+  _getAnimationsTargetingElement: function(element, animations) {
+    if (this.source) {
+      this.source._getAnimationsTargetingElement(element, animations);
+    }
+  },
+  set onfinish(handler) {
+    return setOnEventHandler(this, 'finish', handler);
+  },
+  get onfinish() {
+    return getOnEventHandler(this, 'finish');
+  },
+  addEventListener: function(type, handler) {
+    if (type === 'finish') {
+      addEventHandler(this, type, handler);
+    }
+  },
+  removeEventListener: function(type, handler) {
+    if (type === 'finish') {
+      removeEventHandler(this, type, handler);
+    }
+  },
+  _generateEvents: function() {
+    if (!this._finishedFlag && this.finished &&
+        hasEventHandlersForEvent(this, 'finish')) {
+      var event = new AnimationPlayerEvent('finish', {
+        currentTime: this.currentTime,
+        timelineTime: this.timeline.currentTime
+      });
+      event._initialize(this);
+      callEventHandlers(this, 'finish', event);
+    }
+    this._finishedFlag = this.finished;
+
+    // The following code is for deprecated TimedItem event handling and should
+    // be removed once we stop supporting it.
+    if (!isDefinedAndNotNull(this._lastCurrentTime)) {
+      this._lastCurrentTime = 0;
+    }
+
+    this._lastCurrentTime = this._unlimitedCurrentTime;
+  },
+  _registerOnTimeline: function() {
+    if (!this._registeredOnTimeline) {
+      PLAYERS.push(this);
+      this._registeredOnTimeline = true;
+    }
+  },
+  _deregisterFromTimeline: function() {
+    PLAYERS.splice(PLAYERS.indexOf(this), 1);
+    this._registeredOnTimeline = false;
+  }
+};
+
+
+
+/** @constructor */
+var AnimationPlayerEvent = function(type, eventInit) {
+  this._type = type;
+  this.currentTime = eventInit.currentTime;
+  this.timelineTime = eventInit.timelineTime;
+};
+
+AnimationPlayerEvent.prototype = createEventPrototype();
+
+
+
+/** @constructor */
+var TimedItem = function(token, timingInput) {
+  if (token !== constructorToken) {
+    throw new TypeError('Illegal constructor');
+  }
+  this.timing = new Timing(
+      constructorToken, timingInput,
+      this._specifiedTimingModified.bind(this));
+  this._inheritedTime = null;
+  this.currentIteration = null;
+  this._iterationTime = null;
+  this._animationTime = null;
+  this._startTime = 0.0;
+  this._player = null;
+  this._parent = null;
+  this._updateInternalState();
+  this._fill = this._resolveFillMode(this.timing.fill);
+  initializeEventTarget(this);
+};
+
+TimedItem.prototype = {
+  // TODO: It would be good to avoid the need for this. We would need to modify
+  // call sites to instead rely on a call from the parent.
+  get _effectiveParentTime() {
+    return this.parent !== null && this.parent._iterationTime !== null ?
+        this.parent._iterationTime : 0;
+  },
+  get localTime() {
+    return this._inheritedTime === null ?
+        null : this._inheritedTime - this._startTime;
+  },
+  get startTime() {
+    return this._startTime;
+  },
+  get duration() {
+    var result = this.timing._duration();
+    if (result === 'auto') {
+      result = this._intrinsicDuration();
+    }
+    return result;
+  },
+  get activeDuration() {
+    var repeatedDuration = this.duration * this.timing._iterations();
+    return repeatedDuration / Math.abs(this.timing.playbackRate);
+  },
+  get endTime() {
+    return this._startTime + this.activeDuration + this.timing.delay +
+        this.timing.endDelay;
+  },
+  get parent() {
+    return this._parent;
+  },
+  get previousSibling() {
+    if (!this.parent) {
+      return null;
+    }
+    var siblingIndex = this.parent.indexOf(this) - 1;
+    if (siblingIndex < 0) {
+      return null;
+    }
+    return this.parent.children[siblingIndex];
+  },
+  get nextSibling() {
+    if (!this.parent) {
+      return null;
+    }
+    var siblingIndex = this.parent.indexOf(this) + 1;
+    if (siblingIndex >= this.parent.children.length) {
+      return null;
+    }
+    return this.parent.children[siblingIndex];
+  },
+  _attach: function(player) {
+    // Remove ourselves from our parent, if we have one. This also removes any
+    // exsisting player.
+    this._reparent(null);
+    this._player = player;
+  },
+  // Takes care of updating the outgoing parent. This is called with a non-null
+  // parent only from TimingGroup.splice(), which takes care of calling
+  // TimingGroup._childrenStateModified() for the new parent.
+  _reparent: function(parent) {
+    if (parent === this) {
+      throw new Error('parent can not be set to self!');
+    }
+    enterModifyCurrentAnimationState();
+    try {
+      if (this._player !== null) {
+        this._player.source = null;
+        this._player = null;
+      }
+      if (this.parent !== null) {
+        this.remove();
+      }
+      this._parent = parent;
+      // In the case of a AnimationSequence parent, _startTime will be updated
+      // by TimingGroup.splice().
+      if (this.parent === null || this.parent.type !== 'seq') {
+        this._startTime =
+            this._stashedStartTime === undefined ? 0.0 : this._stashedStartTime;
+        this._stashedStartTime = undefined;
+      }
+      // In the case of the parent being non-null, _childrenStateModified() will
+      // call this via _updateChildInheritedTimes().
+      // TODO: Consider optimising this case by skipping this call.
+      this._updateTimeMarkers();
+    } finally {
+      exitModifyCurrentAnimationState(
+          Boolean(this.player) ? repeatLastTick : null);
+    }
+  },
+  _intrinsicDuration: function() {
+    return 0.0;
+  },
+  _resolveFillMode: abstractMethod,
+  _updateInternalState: function() {
+    this._fill = this._resolveFillMode(this.timing.fill);
+    if (this.parent) {
+      this.parent._childrenStateModified();
+    } else if (this._player) {
+      this._player._registerOnTimeline();
+    }
+    this._updateTimeMarkers();
+  },
+  _specifiedTimingModified: function() {
+    enterModifyCurrentAnimationState();
+    try {
+      this._updateInternalState();
+    } finally {
+      exitModifyCurrentAnimationState(
+          Boolean(this.player) ? repeatLastTick : null);
+    }
+  },
+  // We push time down to children. We could instead have children pull from
+  // above, but this is tricky because a TimedItem may use either a parent
+  // TimedItem or an AnimationPlayer. This requires either logic in
+  // TimedItem, or for TimedItem and AnimationPlayer to implement Timeline
+  // (or an equivalent), both of which are ugly.
+  _updateInheritedTime: function(inheritedTime) {
+    this._inheritedTime = inheritedTime;
+    this._updateTimeMarkers();
+  },
+  _updateAnimationTime: function() {
+    if (this.localTime < this.timing.delay) {
+      if (this._fill === 'backwards' ||
+          this._fill === 'both') {
+        this._animationTime = 0;
+      } else {
+        this._animationTime = null;
+      }
+    } else if (this.localTime <
+        this.timing.delay + this.activeDuration) {
+      this._animationTime = this.localTime - this.timing.delay;
+    } else {
+      if (this._fill === 'forwards' ||
+          this._fill === 'both') {
+        this._animationTime = this.activeDuration;
+      } else {
+        this._animationTime = null;
+      }
+    }
+  },
+  _updateIterationParamsZeroDuration: function() {
+    this._iterationTime = 0;
+    var isAtEndOfIterations = this.timing._iterations() !== 0 &&
+        this.localTime >= this.timing.delay;
+    this.currentIteration = (
+        isAtEndOfIterations ?
+        this._floorWithOpenClosedRange(
+            this.timing.iterationStart + this.timing._iterations(),
+            1.0) :
+        this._floorWithClosedOpenRange(this.timing.iterationStart, 1.0));
+    // Equivalent to unscaledIterationTime below.
+    var unscaledFraction = (
+        isAtEndOfIterations ?
+        this._modulusWithOpenClosedRange(
+            this.timing.iterationStart + this.timing._iterations(),
+            1.0) :
+        this._modulusWithClosedOpenRange(this.timing.iterationStart, 1.0));
+    var timingFunction = this.timing._timingFunction(this);
+    this._timeFraction = (
+        this._isCurrentDirectionForwards() ?
+        unscaledFraction :
+        1.0 - unscaledFraction);
+    ASSERT_ENABLED && assert(
+        this._timeFraction >= 0.0 && this._timeFraction <= 1.0,
+        'Time fraction should be in the range [0, 1]');
+    if (timingFunction) {
+      this._timeFraction = timingFunction.scaleTime(this._timeFraction);
+    }
+  },
+  _getAdjustedAnimationTime: function(animationTime) {
+    var startOffset =
+        multiplyZeroGivesZero(this.timing.iterationStart, this.duration);
+    return (this.timing.playbackRate < 0 ?
+        (animationTime - this.activeDuration) : animationTime) *
+        this.timing.playbackRate + startOffset;
+  },
+  _scaleIterationTime: function(unscaledIterationTime) {
+    return this._isCurrentDirectionForwards() ?
+        unscaledIterationTime :
+        this.duration - unscaledIterationTime;
+  },
+  _updateIterationParams: function() {
+    var adjustedAnimationTime =
+        this._getAdjustedAnimationTime(this._animationTime);
+    var repeatedDuration = this.duration * this.timing._iterations();
+    var startOffset = this.timing.iterationStart * this.duration;
+    var isAtEndOfIterations = (this.timing._iterations() !== 0) &&
+        (adjustedAnimationTime - startOffset === repeatedDuration);
+    this.currentIteration = isAtEndOfIterations ?
+        this._floorWithOpenClosedRange(
+            adjustedAnimationTime, this.duration) :
+        this._floorWithClosedOpenRange(
+            adjustedAnimationTime, this.duration);
+    var unscaledIterationTime = isAtEndOfIterations ?
+        this._modulusWithOpenClosedRange(
+            adjustedAnimationTime, this.duration) :
+        this._modulusWithClosedOpenRange(
+            adjustedAnimationTime, this.duration);
+    this._iterationTime = this._scaleIterationTime(unscaledIterationTime);
+    if (this.duration == Infinity) {
+      this._timeFraction = 0;
+      return;
+    }
+    this._timeFraction = this._iterationTime / this.duration;
+    ASSERT_ENABLED && assert(
+        this._timeFraction >= 0.0 && this._timeFraction <= 1.0,
+        'Time fraction should be in the range [0, 1], got ' +
+        this._timeFraction + ' ' + this._iterationTime + ' ' +
+        this.duration + ' ' + isAtEndOfIterations + ' ' +
+        unscaledIterationTime);
+    var timingFunction = this.timing._timingFunction(this);
+    if (timingFunction) {
+      this._timeFraction = timingFunction.scaleTime(this._timeFraction);
+    }
+    this._iterationTime = this._timeFraction * this.duration;
+  },
+  _updateTimeMarkers: function() {
+    if (this.localTime === null) {
+      this._animationTime = null;
+      this._iterationTime = null;
+      this.currentIteration = null;
+      this._timeFraction = null;
+      return false;
+    }
+    this._updateAnimationTime();
+    if (this._animationTime === null) {
+      this._iterationTime = null;
+      this.currentIteration = null;
+      this._timeFraction = null;
+    } else if (this.duration === 0) {
+      this._updateIterationParamsZeroDuration();
+    } else {
+      this._updateIterationParams();
+    }
+    maybeRestartAnimation();
+  },
+  _floorWithClosedOpenRange: function(x, range) {
+    return Math.floor(x / range);
+  },
+  _floorWithOpenClosedRange: function(x, range) {
+    return Math.ceil(x / range) - 1;
+  },
+  _modulusWithClosedOpenRange: function(x, range) {
+    ASSERT_ENABLED && assert(
+        range > 0, 'Range must be strictly positive');
+    var modulus = x % range;
+    var result = modulus < 0 ? modulus + range : modulus;
+    ASSERT_ENABLED && assert(
+        result >= 0.0 && result < range,
+        'Result should be in the range [0, range)');
+    return result;
+  },
+  _modulusWithOpenClosedRange: function(x, range) {
+    var modulus = this._modulusWithClosedOpenRange(x, range);
+    var result = modulus === 0 ? range : modulus;
+    ASSERT_ENABLED && assert(
+        result > 0.0 && result <= range,
+        'Result should be in the range (0, range]');
+    return result;
+  },
+  _isCurrentDirectionForwards: function() {
+    if (this.timing.direction === 'normal') {
+      return true;
+    }
+    if (this.timing.direction === 'reverse') {
+      return false;
+    }
+    var d = this.currentIteration;
+    if (this.timing.direction === 'alternate-reverse') {
+      d += 1;
+    }
+    // TODO: 6.13.3 step 3. wtf?
+    return d % 2 === 0;
+  },
+  clone: abstractMethod,
+  before: function() {
+    var newItems = [];
+    for (var i = 0; i < arguments.length; i++) {
+      newItems.push(arguments[i]);
+    }
+    this.parent._splice(this.parent.indexOf(this), 0, newItems);
+  },
+  after: function() {
+    var newItems = [];
+    for (var i = 0; i < arguments.length; i++) {
+      newItems.push(arguments[i]);
+    }
+    this.parent._splice(this.parent.indexOf(this) + 1, 0, newItems);
+  },
+  replace: function() {
+    var newItems = [];
+    for (var i = 0; i < arguments.length; i++) {
+      newItems.push(arguments[i]);
+    }
+    this.parent._splice(this.parent.indexOf(this), 1, newItems);
+  },
+  remove: function() {
+    this.parent._splice(this.parent.indexOf(this), 1);
+  },
+  // Gets the leaf TimedItems currently in effect. Note that this is a superset
+  // of the leaf TimedItems in their active interval, as a TimedItem can have an
+  // effect outside its active interval due to fill.
+  _getLeafItemsInEffect: function(items) {
+    if (this._timeFraction !== null) {
+      this._getLeafItemsInEffectImpl(items);
+    }
+  },
+  _getLeafItemsInEffectImpl: abstractMethod,
+  _hasFutureAnimation: function(timeDirectionForwards) {
+    return timeDirectionForwards ? this._inheritedTime < this.endTime :
+        this._inheritedTime > this.startTime;
+  },
+  _isPastEndOfActiveInterval: function() {
+    return this._inheritedTime >= this.endTime;
+  },
+  get player() {
+    return this.parent === null ?
+        this._player : this.parent.player;
+  },
+  _isCurrent: function() {
+    return !this._isPastEndOfActiveInterval() ||
+           (this.parent !== null && this.parent._isCurrent());
+  },
+  _isTargetingElement: abstractMethod,
+  _getAnimationsTargetingElement: abstractMethod,
+  _netEffectivePlaybackRate: function() {
+    var effectivePlaybackRate = this._isCurrentDirectionForwards() ?
+        this.timing.playbackRate : -this.timing.playbackRate;
+    return this.parent === null ? effectivePlaybackRate :
+        effectivePlaybackRate * this.parent._netEffectivePlaybackRate();
+  },
+  // Note that this restriction is currently incomplete - for example,
+  // Animations which are playing forwards and have a fill of backwards
+  // are not in effect unless current.
+  // TODO: Complete this restriction.
+  _hasFutureEffect: function() {
+    return this._isCurrent() || this._fill !== 'none';
+  },
+  _toSubRanges: function(fromTime, toTime, iterationTimes) {
+    if (fromTime > toTime) {
+      var revRanges = this._toSubRanges(toTime, fromTime, iterationTimes);
+      revRanges.ranges.forEach(function(a) { a.reverse(); });
+      revRanges.ranges.reverse();
+      revRanges.start = iterationTimes.length - revRanges.start - 1;
+      revRanges.delta = -1;
+      return revRanges;
+    }
+    var skipped = 0;
+    // TODO: this should be calculatable. This would be more efficient
+    // than searching through the list.
+    while (iterationTimes[skipped] < fromTime) {
+      skipped++;
+    }
+    var currentStart = fromTime;
+    var ranges = [];
+    for (var i = skipped; i < iterationTimes.length; i++) {
+      if (iterationTimes[i] < toTime) {
+        ranges.push([currentStart, iterationTimes[i]]);
+        currentStart = iterationTimes[i];
+      } else {
+        ranges.push([currentStart, toTime]);
+        return {start: skipped, delta: 1, ranges: ranges};
+      }
+    }
+    ranges.push([currentStart, toTime]);
+    return {start: skipped, delta: 1, ranges: ranges};
+  }
+};
+
+var TimingEvent = function(
+    token, target, type, localTime, timelineTime, iterationIndex, seeked) {
+  if (token !== constructorToken) {
+    throw new TypeError('Illegal constructor');
+  }
+  this._initialize(target);
+  this._type = type;
+  this.localTime = localTime;
+  this.timelineTime = timelineTime;
+  this.iterationIndex = iterationIndex;
+  this.seeked = seeked ? true : false;
+};
+
+TimingEvent.prototype = createEventPrototype();
+
+var isEffectCallback = function(animationEffect) {
+  return typeof animationEffect === 'function';
+};
+
+var interpretAnimationEffect = function(animationEffect) {
+  if (animationEffect instanceof AnimationEffect ||
+      isEffectCallback(animationEffect)) {
+    return animationEffect;
+  } else if (isDefinedAndNotNull(animationEffect) &&
+      typeof animationEffect === 'object') {
+    // The spec requires animationEffect to be an instance of
+    // OneOrMoreKeyframes, but this type is just a dictionary or a list of
+    // dictionaries, so the best we can do is test for an object.
+    return new KeyframeEffect(animationEffect);
+  }
+  return null;
+};
+
+var cloneAnimationEffect = function(animationEffect) {
+  if (animationEffect instanceof AnimationEffect) {
+    return animationEffect.clone();
+  } else if (isEffectCallback(animationEffect)) {
+    return animationEffect;
+  } else {
+    return null;
+  }
+};
+
+
+
+/** @constructor */
+var Animation = function(target, animationEffect, timingInput) {
+  enterModifyCurrentAnimationState();
+  try {
+    TimedItem.call(this, constructorToken, timingInput);
+    this.effect = interpretAnimationEffect(animationEffect);
+    this._target = target;
+  } finally {
+    exitModifyCurrentAnimationState(null);
+  }
+};
+
+Animation.prototype = createObject(TimedItem.prototype, {
+  _resolveFillMode: function(fillMode) {
+    return fillMode === 'auto' ? 'none' : fillMode;
+  },
+  _sample: function() {
+    if (isDefinedAndNotNull(this.effect) &&
+        !(this.target instanceof PseudoElementReference)) {
+      if (isEffectCallback(this.effect)) {
+        this.effect(this._timeFraction, this.target, this);
+      } else {
+        this.effect._sample(this._timeFraction, this.currentIteration,
+            this.target, this.underlyingValue);
+      }
+    }
+  },
+  _getLeafItemsInEffectImpl: function(items) {
+    items.push(this);
+  },
+  _isTargetingElement: function(element) {
+    return element === this.target;
+  },
+  _getAnimationsTargetingElement: function(element, animations) {
+    if (this._isTargetingElement(element)) {
+      animations.push(this);
+    }
+  },
+  get target() {
+    return this._target;
+  },
+  set effect(effect) {
+    enterModifyCurrentAnimationState();
+    try {
+      this._effect = effect;
+      this.timing._invalidateTimingFunction();
+    } finally {
+      exitModifyCurrentAnimationState(
+          Boolean(this.player) ? repeatLastTick : null);
+    }
+  },
+  get effect() {
+    return this._effect;
+  },
+  clone: function() {
+    return new Animation(this.target,
+        cloneAnimationEffect(this.effect), this.timing._dict);
+  },
+  toString: function() {
+    var effectString = '<none>';
+    if (this.effect instanceof AnimationEffect) {
+      effectString = this.effect.toString();
+    } else if (isEffectCallback(this.effect)) {
+      effectString = 'Effect callback';
+    }
+    return 'Animation ' + this.startTime + '-' + this.endTime + ' (' +
+        this.localTime + ') ' + effectString;
+  }
+});
+
+function throwNewHierarchyRequestError() {
+  var element = document.createElement('span');
+  element.appendChild(element);
+}
+
+
+
+/** @constructor */
+var TimedItemList = function(token, children) {
+  if (token !== constructorToken) {
+    throw new TypeError('Illegal constructor');
+  }
+  this._children = children;
+  this._getters = 0;
+  this._ensureGetters();
+};
+
+TimedItemList.prototype = {
+  get length() {
+    return this._children.length;
+  },
+  _ensureGetters: function() {
+    while (this._getters < this._children.length) {
+      this._ensureGetter(this._getters++);
+    }
+  },
+  _ensureGetter: function(i) {
+    Object.defineProperty(this, i, {
+      get: function() {
+        return this._children[i];
+      }
+    });
+  }
+};
+
+
+
+/** @constructor */
+var TimingGroup = function(token, type, children, timing) {
+  if (token !== constructorToken) {
+    throw new TypeError('Illegal constructor');
+  }
+  // Take a copy of the children array, as it could be modified as a side-effect
+  // of creating this object. See
+  // https://github.com/web-animations/web-animations-js/issues/65 for details.
+  var childrenCopy = (children && Array.isArray(children)) ?
+      children.slice() : [];
+  // used by TimedItem via _intrinsicDuration(), so needs to be set before
+  // initializing super.
+  this.type = type || 'par';
+  this._children = [];
+  this._cachedTimedItemList = null;
+  this._cachedIntrinsicDuration = null;
+  TimedItem.call(this, constructorToken, timing);
+  // We add children after setting the parent. This means that if an ancestor
+  // (including the parent) is specified as a child, it will be removed from our
+  // ancestors and used as a child,
+  this.append.apply(this, childrenCopy);
+};
+
+TimingGroup.prototype = createObject(TimedItem.prototype, {
+  _resolveFillMode: function(fillMode) {
+    return fillMode === 'auto' ? 'both' : fillMode;
+  },
+  _childrenStateModified: function() {
+    // See _updateChildStartTimes().
+    this._isInChildrenStateModified = true;
+    if (this._cachedTimedItemList) {
+      this._cachedTimedItemList._ensureGetters();
+    }
+    this._cachedIntrinsicDuration = null;
+
+    // We need to walk up and down the tree to re-layout. endTime and the
+    // various durations (which are all calculated lazily) are the only
+    // properties of a TimedItem which can affect the layout of its ancestors.
+    // So it should be sufficient to simply update start times and time markers
+    // on the way down.
+
+    // This calls up to our parent, then calls _updateTimeMarkers().
+    this._updateInternalState();
+    this._updateChildInheritedTimes();
+
+    // Update child start times before walking down.
+    this._updateChildStartTimes();
+
+    this._isInChildrenStateModified = false;
+  },
+  _updateInheritedTime: function(inheritedTime) {
+    this._inheritedTime = inheritedTime;
+    this._updateTimeMarkers();
+    this._updateChildInheritedTimes();
+  },
+  _updateChildInheritedTimes: function() {
+    for (var i = 0; i < this._children.length; i++) {
+      var child = this._children[i];
+      child._updateInheritedTime(this._iterationTime);
+    }
+  },
+  _updateChildStartTimes: function() {
+    if (this.type === 'seq') {
+      var cumulativeStartTime = 0;
+      for (var i = 0; i < this._children.length; i++) {
+        var child = this._children[i];
+        if (child._stashedStartTime === undefined) {
+          child._stashedStartTime = child._startTime;
+        }
+        child._startTime = cumulativeStartTime;
+        // Avoid updating the child's inherited time and time markers if this is
+        // about to be done in the down phase of _childrenStateModified().
+        if (!child._isInChildrenStateModified) {
+          // This calls _updateTimeMarkers() on the child.
+          child._updateInheritedTime(this._iterationTime);
+        }
+        cumulativeStartTime += Math.max(0, child.timing.delay +
+            child.activeDuration + child.timing.endDelay);
+      }
+    }
+  },
+  get children() {
+    if (!this._cachedTimedItemList) {
+      this._cachedTimedItemList = new TimedItemList(
+          constructorToken, this._children);
+    }
+    return this._cachedTimedItemList;
+  },
+  get firstChild() {
+    return this._children[0];
+  },
+  get lastChild() {
+    return this._children[this.children.length - 1];
+  },
+  _intrinsicDuration: function() {
+    if (!isDefinedAndNotNull(this._cachedIntrinsicDuration)) {
+      if (this.type === 'par') {
+        var dur = Math.max.apply(undefined, this._children.map(function(a) {
+          return a.endTime;
+        }));
+        this._cachedIntrinsicDuration = Math.max(0, dur);
+      } else if (this.type === 'seq') {
+        var result = 0;
+        this._children.forEach(function(a) {
+          result += a.activeDuration + a.timing.delay + a.timing.endDelay;
+        });
+        this._cachedIntrinsicDuration = result;
+      } else {
+        throw 'Unsupported type ' + this.type;
+      }
+    }
+    return this._cachedIntrinsicDuration;
+  },
+  _getLeafItemsInEffectImpl: function(items) {
+    for (var i = 0; i < this._children.length; i++) {
+      this._children[i]._getLeafItemsInEffect(items);
+    }
+  },
+  clone: function() {
+    var children = [];
+    this._children.forEach(function(child) {
+      children.push(child.clone());
+    });
+    return this.type === 'par' ?
+        new AnimationGroup(children, this.timing._dict) :
+        new AnimationSequence(children, this.timing._dict);
+  },
+  clear: function() {
+    this._splice(0, this._children.length);
+  },
+  append: function() {
+    var newItems = [];
+    for (var i = 0; i < arguments.length; i++) {
+      newItems.push(arguments[i]);
+    }
+    this._splice(this._children.length, 0, newItems);
+  },
+  prepend: function() {
+    var newItems = [];
+    for (var i = 0; i < arguments.length; i++) {
+      newItems.push(arguments[i]);
+    }
+    this._splice(0, 0, newItems);
+  },
+  _addInternal: function(child) {
+    this._children.push(child);
+    this._childrenStateModified();
+  },
+  indexOf: function(item) {
+    return this._children.indexOf(item);
+  },
+  _splice: function(start, deleteCount, newItems) {
+    enterModifyCurrentAnimationState();
+    try {
+      var args = arguments;
+      if (args.length === 3) {
+        args = [start, deleteCount].concat(newItems);
+      }
+      for (var i = 2; i < args.length; i++) {
+        var newChild = args[i];
+        if (this._isInclusiveAncestor(newChild)) {
+          throwNewHierarchyRequestError();
+        }
+        newChild._reparent(this);
+      }
+      var result = Array.prototype.splice.apply(this._children, args);
+      for (var i = 0; i < result.length; i++) {
+        result[i]._parent = null;
+      }
+      this._childrenStateModified();
+      return result;
+    } finally {
+      exitModifyCurrentAnimationState(
+          Boolean(this.player) ? repeatLastTick : null);
+    }
+  },
+  _isInclusiveAncestor: function(item) {
+    for (var ancestor = this; ancestor !== null; ancestor = ancestor.parent) {
+      if (ancestor === item) {
+        return true;
+      }
+    }
+    return false;
+  },
+  _isTargetingElement: function(element) {
+    return this._children.some(function(child) {
+      return child._isTargetingElement(element);
+    });
+  },
+  _getAnimationsTargetingElement: function(element, animations) {
+    this._children.map(function(child) {
+      return child._getAnimationsTargetingElement(element, animations);
+    });
+  },
+  toString: function() {
+    return this.type + ' ' + this.startTime + '-' + this.endTime + ' (' +
+        this.localTime + ') ' + ' [' +
+        this._children.map(function(a) { return a.toString(); }) + ']';
+  }
+});
+
+
+
+/** @constructor */
+var AnimationGroup = function(children, timing, parent) {
+  TimingGroup.call(this, constructorToken, 'par', children, timing, parent);
+};
+
+AnimationGroup.prototype = Object.create(TimingGroup.prototype);
+
+
+
+/** @constructor */
+var AnimationSequence = function(children, timing, parent) {
+  TimingGroup.call(this, constructorToken, 'seq', children, timing, parent);
+};
+
+AnimationSequence.prototype = Object.create(TimingGroup.prototype);
+
+
+
+/** @constructor */
+var PseudoElementReference = function(element, pseudoElement) {
+  this.element = element;
+  this.pseudoElement = pseudoElement;
+  console.warn('PseudoElementReference is not supported.');
+};
+
+
+
+/** @constructor */
+var MediaReference = function(mediaElement, timing, parent, delta) {
+  TimedItem.call(this, constructorToken, timing, parent);
+  this._media = mediaElement;
+
+  // We can never be sure when _updateInheritedTime() is going to be called
+  // next, due to skipped frames or the player being seeked. Plus the media
+  // element's currentTime may drift from our iterationTime. So if a media
+  // element has loop set, we can't be sure that we'll stop it before it wraps.
+  // For this reason, we simply disable looping.
+  // TODO: Maybe we should let it loop if our duration exceeds it's
+  // length?
+  this._media.loop = false;
+
+  // If the media element has a media controller, we detach it. This mirrors the
+  // behaviour when re-parenting a TimedItem, or attaching one to an
+  // AnimationPlayer.
+  // TODO: It would be neater to assign to MediaElement.controller, but this was
+  // broken in Chrome until recently. See crbug.com/226270.
+  this._media.mediaGroup = '';
+
+  this._delta = delta;
+};
+
+MediaReference.prototype = createObject(TimedItem.prototype, {
+  _resolveFillMode: function(fillMode) {
+    // TODO: Fill modes for MediaReferences are still undecided. The spec is not
+    // clear what 'auto' should mean for TimedItems other than Animations and
+    // groups.
+    return fillMode === 'auto' ? 'none' : fillMode;
+  },
+  _intrinsicDuration: function() {
+    // TODO: This should probably default to zero. But doing so means that as
+    // soon as our inheritedTime is zero, the polyfill deems the animation to be
+    // done and stops ticking, so we don't get any further calls to
+    // _updateInheritedTime(). One way around this would be to modify
+    // TimedItem._isPastEndOfActiveInterval() to recurse down the tree, then we
+    // could override it here.
+    return isNaN(this._media.duration) ?
+        Infinity : this._media.duration / this._media.defaultPlaybackRate;
+  },
+  _unscaledMediaCurrentTime: function() {
+    return this._media.currentTime / this._media.defaultPlaybackRate;
+  },
+  _getLeafItemsInEffectImpl: function(items) {
+    items.push(this);
+  },
+  _ensurePlaying: function() {
+    // The media element is paused when created.
+    if (this._media.paused) {
+      this._media.play();
+    }
+  },
+  _ensurePaused: function() {
+    if (!this._media.paused) {
+      this._media.pause();
+    }
+  },
+  _isSeekableUnscaledTime: function(time) {
+    var seekTime = time * this._media.defaultPlaybackRate;
+    var ranges = this._media.seekable;
+    for (var i = 0; i < ranges.length; i++) {
+      if (seekTime >= ranges.start(i) && seekTime <= ranges.end(i)) {
+        return true;
+      }
+    }
+    return false;
+  },
+  // Note that a media element's timeline may not start at zero, although its
+  // duration is always the timeline time at the end point. This means that an
+  // element's duration isn't always it's length and not all values of the
+  // timline are seekable. Furthermore, some types of media further limit the
+  // range of seekable timeline times. For this reason, we always map an
+  // iteration to the range [0, duration] and simply seek to the nearest
+  // seekable time.
+  _ensureIsAtUnscaledTime: function(time) {
+    if (this._unscaledMediaCurrentTime() !== time) {
+      this._media.currentTime = time * this._media.defaultPlaybackRate;
+    }
+  },
+  // This is called by the polyfill on each tick when our AnimationPlayer's tree
+  // is active.
+  _updateInheritedTime: function(inheritedTime) {
+    this._inheritedTime = inheritedTime;
+    this._updateTimeMarkers();
+
+    // The polyfill uses a sampling model whereby time values are propagated
+    // down the tree at each sample. However, for the media item, we need to use
+    // play() and pause().
+
+    // Handle the case of being outside our effect interval.
+    if (this._iterationTime === null) {
+      this._ensureIsAtUnscaledTime(0);
+      this._ensurePaused();
+      return;
+    }
+
+    if (this._iterationTime >= this._intrinsicDuration()) {
+      // Our iteration time exceeds the media element's duration, so just make
+      // sure the media element is at the end. It will stop automatically, but
+      // that could take some time if the seek below is significant, so force
+      // it.
+      this._ensureIsAtUnscaledTime(this._intrinsicDuration());
+      this._ensurePaused();
+      return;
+    }
+
+    var finalIteration = this._floorWithOpenClosedRange(
+        this.timing.iterationStart + this.timing._iterations(), 1.0);
+    var endTimeFraction = this._modulusWithOpenClosedRange(
+        this.timing.iterationStart + this.timing._iterations(), 1.0);
+    if (this.currentIteration === finalIteration &&
+        this._timeFraction === endTimeFraction &&
+        this._intrinsicDuration() >= this.duration) {
+      // We have reached the end of our final iteration, but the media element
+      // is not done.
+      this._ensureIsAtUnscaledTime(this.duration * endTimeFraction);
+      this._ensurePaused();
+      return;
+    }
+
+    // Set the appropriate playback rate.
+    var playbackRate =
+        this._media.defaultPlaybackRate * this._netEffectivePlaybackRate();
+    if (this._media.playbackRate !== playbackRate) {
+      this._media.playbackRate = playbackRate;
+    }
+
+    // Set the appropriate play/pause state. Note that we may not be able to
+    // seek to the desired time. In this case, the media element's seek
+    // algorithm repositions the seek to the nearest seekable time. This is OK,
+    // but in this case, we don't want to play the media element, as it prevents
+    // us from synchronising properly.
+    if (this.player.paused ||
+        !this._isSeekableUnscaledTime(this._iterationTime)) {
+      this._ensurePaused();
+    } else {
+      this._ensurePlaying();
+    }
+
+    // Seek if required. This could be due to our AnimationPlayer being seeked,
+    // or video slippage. We need to handle the fact that the video may not play
+    // at exactly the right speed. There's also a variable delay when the video
+    // is first played.
+    // TODO: What's the right value for this delta?
+    var delta = isDefinedAndNotNull(this._delta) ? this._delta :
+        0.2 * Math.abs(this._media.playbackRate);
+    if (Math.abs(this._iterationTime - this._unscaledMediaCurrentTime()) >
+        delta) {
+      this._ensureIsAtUnscaledTime(this._iterationTime);
+    }
+  },
+  _isTargetingElement: function(element) {
+    return this._media === element;
+  },
+  _getAnimationsTargetingElement: function() { },
+  _attach: function(player) {
+    this._ensurePaused();
+    TimedItem.prototype._attach.call(this, player);
+  }
+});
+
+
+
+/** @constructor */
+var AnimationEffect = function(token) {
+  if (token !== constructorToken) {
+    throw new TypeError('Illegal constructor');
+  }
+};
+
+AnimationEffect.prototype = {
+  _sample: abstractMethod,
+  clone: abstractMethod,
+  toString: abstractMethod
+};
+
+var clamp = function(x, min, max) {
+  return Math.max(Math.min(x, max), min);
+};
+
+
+
+/** @constructor */
+var MotionPathEffect = function(path, autoRotate, angle, composite) {
+  var iterationComposite = undefined;
+  var options = autoRotate;
+  if (typeof options == 'string' || options instanceof String ||
+      angle || composite) {
+    // FIXME: add deprecation warning - please pass an options dictionary to
+    // MotionPathEffect constructor
+  } else if (options) {
+    autoRotate = options.autoRotate;
+    angle = options.angle;
+    composite = options.composite;
+    iterationComposite = options.iterationComposite;
+  }
+
+  enterModifyCurrentAnimationState();
+  try {
+    AnimationEffect.call(this, constructorToken);
+
+    this.composite = composite;
+    this.iterationComposite = iterationComposite;
+
+    // TODO: path argument is not in the spec -- seems useful since
+    // SVGPathSegList doesn't have a constructor.
+    this.autoRotate = isDefined(autoRotate) ? autoRotate : 'none';
+    this.angle = isDefined(angle) ? angle : 0;
+    this._path = document.createElementNS(SVG_NS, 'path');
+    if (path instanceof SVGPathSegList) {
+      this.segments = path;
+    } else {
+      var tempPath = document.createElementNS(SVG_NS, 'path');
+      tempPath.setAttribute('d', String(path));
+      this.segments = tempPath.pathSegList;
+    }
+  } finally {
+    exitModifyCurrentAnimationState(null);
+  }
+};
+
+MotionPathEffect.prototype = createObject(AnimationEffect.prototype, {
+  get composite() {
+    return this._composite;
+  },
+  set composite(value) {
+    enterModifyCurrentAnimationState();
+    try {
+      // Use the default value if an invalid string is specified.
+      this._composite = value === 'add' ? 'add' : 'replace';
+    } finally {
+      exitModifyCurrentAnimationState(repeatLastTick);
+    }
+  },
+  get iterationComposite() {
+    return this._iterationComposite;
+  },
+  set iterationComposite(value) {
+    enterModifyCurrentAnimationState();
+    try {
+      // Use the default value if an invalid string is specified.
+      this._iterationComposite =
+          value === 'accumulate' ? 'accumulate' : 'replace';
+      this._updateOffsetPerIteration();
+    } finally {
+      exitModifyCurrentAnimationState(repeatLastTick);
+    }
+  },
+  _sample: function(timeFraction, currentIteration, target) {
+    // TODO: Handle accumulation.
+    var lengthAtTimeFraction = this._lengthAtTimeFraction(timeFraction);
+    var point = this._path.getPointAtLength(lengthAtTimeFraction);
+    var x = point.x - target.offsetWidth / 2;
+    var y = point.y - target.offsetHeight / 2;
+    if (currentIteration !== 0 && this._offsetPerIteration) {
+      x += this._offsetPerIteration.x * currentIteration;
+      y += this._offsetPerIteration.y * currentIteration;
+    }
+    // TODO: calc(point.x - 50%) doesn't work?
+    var value = [{t: 'translate', d: [{px: x}, {px: y}]}];
+    var angle = this.angle;
+    if (this._autoRotate === 'auto-rotate') {
+      // Super hacks
+      var lastPoint = this._path.getPointAtLength(lengthAtTimeFraction - 0.01);
+      var dx = point.x - lastPoint.x;
+      var dy = point.y - lastPoint.y;
+      var rotation = Math.atan2(dy, dx);
+      angle += rotation / 2 / Math.PI * 360;
+    }
+    value.push({t: 'rotate', d: [angle]});
+    compositor.setAnimatedValue(target, 'transform',
+        new AddReplaceCompositableValue(value, this.composite));
+  },
+  _lengthAtTimeFraction: function(timeFraction) {
+    var segmentCount = this._cumulativeLengths.length - 1;
+    if (!segmentCount) {
+      return 0;
+    }
+    var scaledFraction = timeFraction * segmentCount;
+    var index = clamp(Math.floor(scaledFraction), 0, segmentCount);
+    return this._cumulativeLengths[index] + ((scaledFraction % 1) * (
+        this._cumulativeLengths[index + 1] - this._cumulativeLengths[index]));
+  },
+  _updateOffsetPerIteration: function() {
+    if (this.iterationComposite === 'accumulate' &&
+        this._cumulativeLengths &&
+        this._cumulativeLengths.length > 0) {
+      this._offsetPerIteration = this._path.getPointAtLength(
+          this._cumulativeLengths[this._cumulativeLengths.length - 1]);
+    } else {
+      this._offsetPerIteration = null;
+    }
+  },
+  clone: function() {
+    return new MotionPathEffect(this._path.getAttribute('d'));
+  },
+  toString: function() {
+    return '<MotionPathEffect>';
+  },
+  set autoRotate(autoRotate) {
+    enterModifyCurrentAnimationState();
+    try {
+      this._autoRotate = String(autoRotate);
+    } finally {
+      exitModifyCurrentAnimationState(repeatLastTick);
+    }
+  },
+  get autoRotate() {
+    return this._autoRotate;
+  },
+  set angle(angle) {
+    enterModifyCurrentAnimationState();
+    try {
+      // TODO: This should probably be a string with a unit, but the spec
+      //       says it's a double.
+      this._angle = Number(angle);
+    } finally {
+      exitModifyCurrentAnimationState(repeatLastTick);
+    }
+  },
+  get angle() {
+    return this._angle;
+  },
+  set segments(segments) {
+    enterModifyCurrentAnimationState();
+    try {
+      var targetSegments = this.segments;
+      targetSegments.clear();
+      var cumulativeLengths = [0];
+      // TODO: *moving* the path segments is not correct, but pathSegList
+      //       is read only
+      var items = segments.numberOfItems;
+      while (targetSegments.numberOfItems < items) {
+        var segment = segments.removeItem(0);
+        targetSegments.appendItem(segment);
+        if (segment.pathSegType !== SVGPathSeg.PATHSEG_MOVETO_REL &&
+            segment.pathSegType !== SVGPathSeg.PATHSEG_MOVETO_ABS) {
+          cumulativeLengths.push(this._path.getTotalLength());
+        }
+      }
+      this._cumulativeLengths = cumulativeLengths;
+      this._updateOffsetPerIteration();
+    } finally {
+      exitModifyCurrentAnimationState(repeatLastTick);
+    }
+  },
+  get segments() {
+    return this._path.pathSegList;
+  }
+});
+
+var shorthandToLonghand = {
+  background: [
+    'backgroundImage',
+    'backgroundPosition',
+    'backgroundSize',
+    'backgroundRepeat',
+    'backgroundAttachment',
+    'backgroundOrigin',
+    'backgroundClip',
+    'backgroundColor'
+  ],
+  border: [
+    'borderTopColor',
+    'borderTopStyle',
+    'borderTopWidth',
+    'borderRightColor',
+    'borderRightStyle',
+    'borderRightWidth',
+    'borderBottomColor',
+    'borderBottomStyle',
+    'borderBottomWidth',
+    'borderLeftColor',
+    'borderLeftStyle',
+    'borderLeftWidth'
+  ],
+  borderBottom: [
+    'borderBottomWidth',
+    'borderBottomStyle',
+    'borderBottomColor'
+  ],
+  borderColor: [
+    'borderTopColor',
+    'borderRightColor',
+    'borderBottomColor',
+    'borderLeftColor'
+  ],
+  borderLeft: [
+    'borderLeftWidth',
+    'borderLeftStyle',
+    'borderLeftColor'
+  ],
+  borderRadius: [
+    'borderTopLeftRadius',
+    'borderTopRightRadius',
+    'borderBottomRightRadius',
+    'borderBottomLeftRadius'
+  ],
+  borderRight: [
+    'borderRightWidth',
+    'borderRightStyle',
+    'borderRightColor'
+  ],
+  borderTop: [
+    'borderTopWidth',
+    'borderTopStyle',
+    'borderTopColor'
+  ],
+  borderWidth: [
+    'borderTopWidth',
+    'borderRightWidth',
+    'borderBottomWidth',
+    'borderLeftWidth'
+  ],
+  font: [
+    'fontFamily',
+    'fontSize',
+    'fontStyle',
+    'fontVariant',
+    'fontWeight',
+    'lineHeight'
+  ],
+  margin: [
+    'marginTop',
+    'marginRight',
+    'marginBottom',
+    'marginLeft'
+  ],
+  outline: [
+    'outlineColor',
+    'outlineStyle',
+    'outlineWidth'
+  ],
+  padding: [
+    'paddingTop',
+    'paddingRight',
+    'paddingBottom',
+    'paddingLeft'
+  ]
+};
+
+// This delegates parsing shorthand value syntax to the browser.
+var shorthandExpanderElem = createDummyElement();
+var expandShorthand = function(property, value, result) {
+  shorthandExpanderElem.style[property] = value;
+  var longProperties = shorthandToLonghand[property];
+  for (var i in longProperties) {
+    var longProperty = longProperties[i];
+    var longhandValue = shorthandExpanderElem.style[longProperty];
+    result[longProperty] = longhandValue;
+  }
+};
+
+var normalizeKeyframeDictionary = function(properties) {
+  var result = {
+    offset: null,
+    composite: null,
+    easing: presetTimingFunctions.linear
+  };
+  var animationProperties = [];
+  for (var property in properties) {
+    // TODO: Apply the CSS property to IDL attribute algorithm.
+    if (property === 'offset') {
+      if (typeof properties.offset === 'number') {
+        result.offset = properties.offset;
+      }
+    } else if (property === 'composite') {
+      if (properties.composite === 'add' ||
+          properties.composite === 'replace') {
+        result.composite = properties.composite;
+      }
+    } else if (property === 'easing') {
+      result.easing = TimingFunction.createFromString(properties.easing);
+    } else {
+      // TODO: Check whether this is a supported property.
+      animationProperties.push(property);
+    }
+  }
+  // TODO: Remove prefixed properties if the unprefixed version is also
+  // supported and present.
+  animationProperties = animationProperties.sort(playerSortFunction);
+  for (var i = 0; i < animationProperties.length; i++) {
+    // TODO: Apply the IDL attribute to CSS property algorithm.
+    var property = animationProperties[i];
+    // TODO: The spec does not specify how to handle null values.
+    // See https://www.w3.org/Bugs/Public/show_bug.cgi?id=22572
+    var value = isDefinedAndNotNull(properties[property]) ?
+        properties[property].toString() : '';
+    if (property in shorthandToLonghand) {
+      expandShorthand(property, value, result);
+    } else {
+      result[property] = value;
+    }
+  }
+  return result;
+};
+
+
+
+/** @constructor */
+var KeyframeEffect = function(oneOrMoreKeyframeDictionaries,
+    composite) {
+  enterModifyCurrentAnimationState();
+  try {
+    AnimationEffect.call(this, constructorToken);
+
+    this.composite = composite;
+
+    this.setFrames(oneOrMoreKeyframeDictionaries);
+  } finally {
+    exitModifyCurrentAnimationState(null);
+  }
+};
+
+KeyframeEffect.prototype = createObject(AnimationEffect.prototype, {
+  get composite() {
+    return this._composite;
+  },
+  set composite(value) {
+    enterModifyCurrentAnimationState();
+    try {
+      // Use the default value if an invalid string is specified.
+      this._composite = value === 'add' ? 'add' : 'replace';
+    } finally {
+      exitModifyCurrentAnimationState(repeatLastTick);
+    }
+  },
+  getFrames: function() {
+    return this._keyframeDictionaries.slice(0);
+  },
+  setFrames: function(oneOrMoreKeyframeDictionaries) {
+    enterModifyCurrentAnimationState();
+    try {
+      if (!Array.isArray(oneOrMoreKeyframeDictionaries)) {
+        oneOrMoreKeyframeDictionaries = [oneOrMoreKeyframeDictionaries];
+      }
+      this._keyframeDictionaries =
+          oneOrMoreKeyframeDictionaries.map(normalizeKeyframeDictionary);
+      // Set lazily
+      this._cachedPropertySpecificKeyframes = null;
+    } finally {
+      exitModifyCurrentAnimationState(repeatLastTick);
+    }
+  },
+  _sample: function(timeFraction, currentIteration, target) {
+    var frames = this._propertySpecificKeyframes();
+    for (var property in frames) {
+      compositor.setAnimatedValue(target, property,
+          this._sampleForProperty(
+              frames[property], timeFraction, currentIteration));
+    }
+  },
+  _sampleForProperty: function(frames, timeFraction, currentIteration) {
+    ASSERT_ENABLED && assert(
+        frames.length >= 2,
+        'Interpolation requires at least two keyframes');
+
+    var startKeyframeIndex;
+    var length = frames.length;
+    // We extrapolate differently depending on whether or not there are multiple
+    // keyframes at offsets of 0 and 1.
+    if (timeFraction < 0.0) {
+      if (frames[1].offset === 0.0) {
+        return new AddReplaceCompositableValue(frames[0].rawValue(),
+            this._compositeForKeyframe(frames[0]));
+      } else {
+        startKeyframeIndex = 0;
+      }
+    } else if (timeFraction >= 1.0) {
+      if (frames[length - 2].offset === 1.0) {
+        return new AddReplaceCompositableValue(frames[length - 1].rawValue(),
+            this._compositeForKeyframe(frames[length - 1]));
+      } else {
+        startKeyframeIndex = length - 2;
+      }
+    } else {
+      for (var i = length - 1; i >= 0; i--) {
+        if (frames[i].offset <= timeFraction) {
+          ASSERT_ENABLED && assert(frames[i].offset !== 1.0);
+          startKeyframeIndex = i;
+          break;
+        }
+      }
+    }
+    var startKeyframe = frames[startKeyframeIndex];
+    var endKeyframe = frames[startKeyframeIndex + 1];
+    if (startKeyframe.offset === timeFraction) {
+      return new AddReplaceCompositableValue(startKeyframe.rawValue(),
+          this._compositeForKeyframe(startKeyframe));
+    }
+    if (endKeyframe.offset === timeFraction) {
+      return new AddReplaceCompositableValue(endKeyframe.rawValue(),
+          this._compositeForKeyframe(endKeyframe));
+    }
+    var intervalDistance = (timeFraction - startKeyframe.offset) /
+        (endKeyframe.offset - startKeyframe.offset);
+    if (startKeyframe.easing) {
+      intervalDistance = startKeyframe.easing.scaleTime(intervalDistance);
+    }
+    return new BlendedCompositableValue(
+        new AddReplaceCompositableValue(startKeyframe.rawValue(),
+            this._compositeForKeyframe(startKeyframe)),
+        new AddReplaceCompositableValue(endKeyframe.rawValue(),
+            this._compositeForKeyframe(endKeyframe)),
+        intervalDistance);
+  },
+  _propertySpecificKeyframes: function() {
+    if (isDefinedAndNotNull(this._cachedPropertySpecificKeyframes)) {
+      return this._cachedPropertySpecificKeyframes;
+    }
+
+    this._cachedPropertySpecificKeyframes = {};
+    var distributedFrames = this._getDistributedKeyframes();
+    for (var i = 0; i < distributedFrames.length; i++) {
+      for (var property in distributedFrames[i].cssValues) {
+        if (!(property in this._cachedPropertySpecificKeyframes)) {
+          this._cachedPropertySpecificKeyframes[property] = [];
+        }
+        var frame = distributedFrames[i];
+        this._cachedPropertySpecificKeyframes[property].push(
+            new PropertySpecificKeyframe(frame.offset, frame.composite,
+                frame.easing, property, frame.cssValues[property]));
+      }
+    }
+
+    for (var property in this._cachedPropertySpecificKeyframes) {
+      var frames = this._cachedPropertySpecificKeyframes[property];
+      ASSERT_ENABLED && assert(
+          frames.length > 0,
+          'There should always be keyframes for each property');
+
+      // Add synthetic keyframes at offsets of 0 and 1 if required.
+      if (frames[0].offset !== 0.0) {
+        var keyframe = new PropertySpecificKeyframe(0.0, 'add',
+            presetTimingFunctions.linear, property, cssNeutralValue);
+        frames.unshift(keyframe);
+      }
+      if (frames[frames.length - 1].offset !== 1.0) {
+        var keyframe = new PropertySpecificKeyframe(1.0, 'add',
+            presetTimingFunctions.linear, property, cssNeutralValue);
+        frames.push(keyframe);
+      }
+      ASSERT_ENABLED && assert(
+          frames.length >= 2,
+          'There should be at least two keyframes including' +
+          ' synthetic keyframes');
+    }
+
+    return this._cachedPropertySpecificKeyframes;
+  },
+  clone: function() {
+    var result = new KeyframeEffect([], this.composite);
+    result._keyframeDictionaries = this._keyframeDictionaries.slice(0);
+    return result;
+  },
+  toString: function() {
+    return '<KeyframeEffect>';
+  },
+  _compositeForKeyframe: function(keyframe) {
+    return isDefinedAndNotNull(keyframe.composite) ?
+        keyframe.composite : this.composite;
+  },
+  _allKeyframesUseSameCompositeOperation: function(keyframes) {
+    ASSERT_ENABLED && assert(
+        keyframes.length >= 1, 'This requires at least one keyframe');
+    var composite = this._compositeForKeyframe(keyframes[0]);
+    for (var i = 1; i < keyframes.length; i++) {
+      if (this._compositeForKeyframe(keyframes[i]) !== composite) {
+        return false;
+      }
+    }
+    return true;
+  },
+  _areKeyframeDictionariesLooselySorted: function() {
+    var previousOffset = -Infinity;
+    for (var i = 0; i < this._keyframeDictionaries.length; i++) {
+      if (isDefinedAndNotNull(this._keyframeDictionaries[i].offset)) {
+        if (this._keyframeDictionaries[i].offset < previousOffset) {
+          return false;
+        }
+        previousOffset = this._keyframeDictionaries[i].offset;
+      }
+    }
+    return true;
+  },
+  // The spec describes both this process and the process for interpretting the
+  // properties of a keyframe dictionary as 'normalizing'. Here we use the term
+  // 'distributing' to avoid confusion with normalizeKeyframeDictionary().
+  _getDistributedKeyframes: function() {
+    if (!this._areKeyframeDictionariesLooselySorted()) {
+      return [];
+    }
+
+    var distributedKeyframes = this._keyframeDictionaries.map(
+        KeyframeInternal.createFromNormalizedProperties);
+
+    // Remove keyframes with offsets out of bounds.
+    var length = distributedKeyframes.length;
+    var count = 0;
+    for (var i = 0; i < length; i++) {
+      var offset = distributedKeyframes[i].offset;
+      if (isDefinedAndNotNull(offset)) {
+        if (offset >= 0) {
+          break;
+        } else {
+          count = i;
+        }
+      }
+    }
+    distributedKeyframes.splice(0, count);
+
+    length = distributedKeyframes.length;
+    count = 0;
+    for (var i = length - 1; i >= 0; i--) {
+      var offset = distributedKeyframes[i].offset;
+      if (isDefinedAndNotNull(offset)) {
+        if (offset <= 1) {
+          break;
+        } else {
+          count = length - i;
+        }
+      }
+    }
+    distributedKeyframes.splice(length - count, count);
+
+    // Distribute offsets.
+    length = distributedKeyframes.length;
+    if (length > 1 && !isDefinedAndNotNull(distributedKeyframes[0].offset)) {
+      distributedKeyframes[0].offset = 0;
+    }
+    if (length > 0 &&
+        !isDefinedAndNotNull(distributedKeyframes[length - 1].offset)) {
+      distributedKeyframes[length - 1].offset = 1;
+    }
+    var lastOffsetIndex = 0;
+    var nextOffsetIndex = 0;
+    for (var i = 1; i < distributedKeyframes.length - 1; i++) {
+      var keyframe = distributedKeyframes[i];
+      if (isDefinedAndNotNull(keyframe.offset)) {
+        lastOffsetIndex = i;
+        continue;
+      }
+      if (i > nextOffsetIndex) {
+        nextOffsetIndex = i;
+        while (!isDefinedAndNotNull(
+            distributedKeyframes[nextOffsetIndex].offset)) {
+          nextOffsetIndex++;
+        }
+      }
+      var lastOffset = distributedKeyframes[lastOffsetIndex].offset;
+      var nextOffset = distributedKeyframes[nextOffsetIndex].offset;
+      var unspecifiedKeyframes = nextOffsetIndex - lastOffsetIndex - 1;
+      ASSERT_ENABLED && assert(unspecifiedKeyframes > 0);
+      var localIndex = i - lastOffsetIndex;
+      ASSERT_ENABLED && assert(localIndex > 0);
+      distributedKeyframes[i].offset = lastOffset +
+          (nextOffset - lastOffset) * localIndex / (unspecifiedKeyframes + 1);
+    }
+
+    // Remove invalid property values.
+    for (var i = distributedKeyframes.length - 1; i >= 0; i--) {
+      var keyframe = distributedKeyframes[i];
+      for (var property in keyframe.cssValues) {
+        if (!KeyframeInternal.isSupportedPropertyValue(
+            keyframe.cssValues[property])) {
+          delete(keyframe.cssValues[property]);
+        }
+      }
+      if (Object.keys(keyframe).length === 0) {
+        distributedKeyframes.splice(i, 1);
+      }
+    }
+
+    return distributedKeyframes;
+  }
+});
+
+
+
+/**
+ * An internal representation of a keyframe. The Keyframe type from the spec is
+ * just a dictionary and is not exposed.
+ *
+ * @constructor
+ */
+var KeyframeInternal = function(offset, composite, easing) {
+  ASSERT_ENABLED && assert(
+      typeof offset === 'number' || offset === null,
+      'Invalid offset value');
+  ASSERT_ENABLED && assert(
+      composite === 'add' || composite === 'replace' || composite === null,
+      'Invalid composite value');
+  this.offset = offset;
+  this.composite = composite;
+  this.easing = easing;
+  this.cssValues = {};
+};
+
+KeyframeInternal.prototype = {
+  addPropertyValuePair: function(property, value) {
+    ASSERT_ENABLED && assert(!this.cssValues.hasOwnProperty(property));
+    this.cssValues[property] = value;
+  },
+  hasValueForProperty: function(property) {
+    return property in this.cssValues;
+  }
+};
+
+KeyframeInternal.isSupportedPropertyValue = function(value) {
+  ASSERT_ENABLED && assert(
+      typeof value === 'string' || value === cssNeutralValue);
+  // TODO: Check this properly!
+  return value !== '';
+};
+
+KeyframeInternal.createFromNormalizedProperties = function(properties) {
+  ASSERT_ENABLED && assert(
+      isDefinedAndNotNull(properties) && typeof properties === 'object',
+      'Properties must be an object');
+  var keyframe = new KeyframeInternal(properties.offset, properties.composite,
+      properties.easing);
+  for (var candidate in properties) {
+    if (candidate !== 'offset' &&
+        candidate !== 'composite' &&
+        candidate !== 'easing') {
+      keyframe.addPropertyValuePair(candidate, properties[candidate]);
+    }
+  }
+  return keyframe;
+};
+
+
+
+/** @constructor */
+var PropertySpecificKeyframe = function(offset, composite, easing, property,
+    cssValue) {
+  this.offset = offset;
+  this.composite = composite;
+  this.easing = easing;
+  this.property = property;
+  this.cssValue = cssValue;
+  // Calculated lazily
+  this.cachedRawValue = null;
+};
+
+PropertySpecificKeyframe.prototype = {
+  rawValue: function() {
+    if (!isDefinedAndNotNull(this.cachedRawValue)) {
+      this.cachedRawValue = fromCssValue(this.property, this.cssValue);
+    }
+    return this.cachedRawValue;
+  }
+};
+
+
+
+/** @constructor */
+var TimingFunction = function() {
+  throw new TypeError('Illegal constructor');
+};
+
+TimingFunction.prototype.scaleTime = abstractMethod;
+
+TimingFunction.createFromString = function(spec, timedItem) {
+  var preset = presetTimingFunctions[spec];
+  if (preset) {
+    return preset;
+  }
+  if (spec === 'paced') {
+    if (timedItem instanceof Animation &&
+        timedItem.effect instanceof MotionPathEffect) {
+      return new PacedTimingFunction(timedItem.effect);
+    }
+    return presetTimingFunctions.linear;
+  }
+  var stepMatch = /steps\(\s*(\d+)\s*,\s*(start|end|middle)\s*\)/.exec(spec);
+  if (stepMatch) {
+    return new StepTimingFunction(Number(stepMatch[1]), stepMatch[2]);
+  }
+  var bezierMatch =
+      /cubic-bezier\(([^,]*),([^,]*),([^,]*),([^)]*)\)/.exec(spec);
+  if (bezierMatch) {
+    return new CubicBezierTimingFunction([
+      Number(bezierMatch[1]),
+      Number(bezierMatch[2]),
+      Number(bezierMatch[3]),
+      Number(bezierMatch[4])
+    ]);
+  }
+  return presetTimingFunctions.linear;
+};
+
+
+
+/** @constructor */
+var CubicBezierTimingFunction = function(spec) {
+  this.params = spec;
+  this.map = [];
+  for (var ii = 0; ii <= 100; ii += 1) {
+    var i = ii / 100;
+    this.map.push([
+      3 * i * (1 - i) * (1 - i) * this.params[0] +
+          3 * i * i * (1 - i) * this.params[2] + i * i * i,
+      3 * i * (1 - i) * (1 - i) * this.params[1] +
+          3 * i * i * (1 - i) * this.params[3] + i * i * i
+    ]);
+  }
+};
+
+CubicBezierTimingFunction.prototype = createObject(TimingFunction.prototype, {
+  scaleTime: function(fraction) {
+    var fst = 0;
+    while (fst !== 100 && fraction > this.map[fst][0]) {
+      fst += 1;
+    }
+    if (fraction === this.map[fst][0] || fst === 0) {
+      return this.map[fst][1];
+    }
+    var yDiff = this.map[fst][1] - this.map[fst - 1][1];
+    var xDiff = this.map[fst][0] - this.map[fst - 1][0];
+    var p = (fraction - this.map[fst - 1][0]) / xDiff;
+    return this.map[fst - 1][1] + p * yDiff;
+  }
+});
+
+
+
+/** @constructor */
+var StepTimingFunction = function(numSteps, position) {
+  this.numSteps = numSteps;
+  this.position = position || 'end';
+};
+
+StepTimingFunction.prototype = createObject(TimingFunction.prototype, {
+  scaleTime: function(fraction) {
+    if (fraction >= 1) {
+      return 1;
+    }
+    var stepSize = 1 / this.numSteps;
+    if (this.position === 'start') {
+      fraction += stepSize;
+    } else if (this.position === 'middle') {
+      fraction += stepSize / 2;
+    }
+    return fraction - fraction % stepSize;
+  }
+});
+
+var presetTimingFunctions = {
+  'linear': null,
+  'ease': new CubicBezierTimingFunction([0.25, 0.1, 0.25, 1.0]),
+  'ease-in': new CubicBezierTimingFunction([0.42, 0, 1.0, 1.0]),
+  'ease-out': new CubicBezierTimingFunction([0, 0, 0.58, 1.0]),
+  'ease-in-out': new CubicBezierTimingFunction([0.42, 0, 0.58, 1.0]),
+  'step-start': new StepTimingFunction(1, 'start'),
+  'step-middle': new StepTimingFunction(1, 'middle'),
+  'step-end': new StepTimingFunction(1, 'end')
+};
+
+
+
+/** @constructor */
+var PacedTimingFunction = function(pathEffect) {
+  ASSERT_ENABLED && assert(pathEffect instanceof MotionPathEffect);
+  this._pathEffect = pathEffect;
+  // Range is the portion of the effect over which we pace, normalized to
+  // [0, 1].
+  this._range = {min: 0, max: 1};
+};
+
+PacedTimingFunction.prototype = createObject(TimingFunction.prototype, {
+  setRange: function(range) {
+    ASSERT_ENABLED && assert(range.min >= 0 && range.min <= 1);
+    ASSERT_ENABLED && assert(range.max >= 0 && range.max <= 1);
+    ASSERT_ENABLED && assert(range.min < range.max);
+    this._range = range;
+  },
+  scaleTime: function(fraction) {
+    var cumulativeLengths = this._pathEffect._cumulativeLengths;
+    var numSegments = cumulativeLengths.length - 1;
+    if (!cumulativeLengths[numSegments] || fraction <= 0) {
+      return this._range.min;
+    }
+    if (fraction >= 1) {
+      return this._range.max;
+    }
+    var minLength = this.lengthAtIndex(this._range.min * numSegments);
+    var maxLength = this.lengthAtIndex(this._range.max * numSegments);
+    var length = interp(minLength, maxLength, fraction);
+    var leftIndex = this.findLeftIndex(cumulativeLengths, length);
+    var leftLength = cumulativeLengths[leftIndex];
+    var segmentLength = cumulativeLengths[leftIndex + 1] - leftLength;
+    if (segmentLength > 0) {
+      return (leftIndex + (length - leftLength) / segmentLength) / numSegments;
+    }
+    return leftLength / cumulativeLengths.length;
+  },
+  findLeftIndex: function(array, value) {
+    var leftIndex = 0;
+    var rightIndex = array.length;
+    while (rightIndex - leftIndex > 1) {
+      var midIndex = (leftIndex + rightIndex) >> 1;
+      if (array[midIndex] <= value) {
+        leftIndex = midIndex;
+      } else {
+        rightIndex = midIndex;
+      }
+    }
+    return leftIndex;
+  },
+  lengthAtIndex: function(i) {
+    ASSERT_ENABLED &&
+        console.assert(i >= 0 && i <= cumulativeLengths.length - 1);
+    var leftIndex = Math.floor(i);
+    var startLength = this._pathEffect._cumulativeLengths[leftIndex];
+    var endLength = this._pathEffect._cumulativeLengths[leftIndex + 1];
+    var indexFraction = i % 1;
+    return interp(startLength, endLength, indexFraction);
+  }
+});
+
+var interp = function(from, to, f, type) {
+  if (Array.isArray(from) || Array.isArray(to)) {
+    return interpArray(from, to, f, type);
+  }
+  var zero = (type && type.indexOf('scale') === 0) ? 1 : 0;
+  to = isDefinedAndNotNull(to) ? to : zero;
+  from = isDefinedAndNotNull(from) ? from : zero;
+
+  return to * f + from * (1 - f);
+};
+
+var interpArray = function(from, to, f, type) {
+  ASSERT_ENABLED && assert(
+      Array.isArray(from) || from === null,
+      'From is not an array or null');
+  ASSERT_ENABLED && assert(
+      Array.isArray(to) || to === null,
+      'To is not an array or null');
+  ASSERT_ENABLED && assert(
+      from === null || to === null || from.length === to.length,
+      'Arrays differ in length ' + from + ' : ' + to);
+  var length = from ? from.length : to.length;
+
+  var result = [];
+  for (var i = 0; i < length; i++) {
+    result[i] = interp(from ? from[i] : null, to ? to[i] : null, f, type);
+  }
+  return result;
+};
+
+var typeWithKeywords = function(keywords, type) {
+  var isKeyword;
+  if (keywords.length === 1) {
+    var keyword = keywords[0];
+    isKeyword = function(value) {
+      return value === keyword;
+    };
+  } else {
+    isKeyword = function(value) {
+      return keywords.indexOf(value) >= 0;
+    };
+  }
+  return createObject(type, {
+    add: function(base, delta) {
+      if (isKeyword(base) || isKeyword(delta)) {
+        return delta;
+      }
+      return type.add(base, delta);
+    },
+    interpolate: function(from, to, f) {
+      if (isKeyword(from) || isKeyword(to)) {
+        return nonNumericType.interpolate(from, to, f);
+      }
+      return type.interpolate(from, to, f);
+    },
+    toCssValue: function(value, svgMode) {
+      return isKeyword(value) ? value : type.toCssValue(value, svgMode);
+    },
+    fromCssValue: function(value) {
+      return isKeyword(value) ? value : type.fromCssValue(value);
+    }
+  });
+};
+
+var numberType = {
+  add: function(base, delta) {
+    // If base or delta are 'auto', we fall back to replacement.
+    if (base === 'auto' || delta === 'auto') {
+      return nonNumericType.add(base, delta);
+    }
+    return base + delta;
+  },
+  interpolate: function(from, to, f) {
+    // If from or to are 'auto', we fall back to step interpolation.
+    if (from === 'auto' || to === 'auto') {
+      return nonNumericType.interpolate(from, to);
+    }
+    return interp(from, to, f);
+  },
+  toCssValue: function(value) { return value + ''; },
+  fromCssValue: function(value) {
+    if (value === 'auto') {
+      return 'auto';
+    }
+    var result = Number(value);
+    return isNaN(result) ? undefined : result;
+  }
+};
+
+var integerType = createObject(numberType, {
+  interpolate: function(from, to, f) {
+    // If from or to are 'auto', we fall back to step interpolation.
+    if (from === 'auto' || to === 'auto') {
+      return nonNumericType.interpolate(from, to);
+    }
+    return Math.floor(interp(from, to, f));
+  }
+});
+
+var fontWeightType = {
+  add: function(base, delta) { return base + delta; },
+  interpolate: function(from, to, f) {
+    return interp(from, to, f);
+  },
+  toCssValue: function(value) {
+    value = Math.round(value / 100) * 100;
+    value = clamp(value, 100, 900);
+    if (value === 400) {
+      return 'normal';
+    }
+    if (value === 700) {
+      return 'bold';
+    }
+    return String(value);
+  },
+  fromCssValue: function(value) {
+    // TODO: support lighter / darker ?
+    var out = Number(value);
+    if (isNaN(out) || out < 100 || out > 900 || out % 100 !== 0) {
+      return undefined;
+    }
+    return out;
+  }
+};
+
+// This regular expression is intentionally permissive, so that
+// platform-prefixed versions of calc will still be accepted as
+// input. While we are restrictive with the transform property
+// name, we need to be able to read underlying calc values from
+// computedStyle so can't easily restrict the input here.
+var outerCalcRE = /^\s*(-webkit-)?calc\s*\(\s*([^)]*)\)/;
+var valueRE = /^\s*(-?[0-9]+(\.[0-9])?[0-9]*)([a-zA-Z%]*)/;
+var operatorRE = /^\s*([+-])/;
+var autoRE = /^\s*auto/i;
+var percentLengthType = {
+  zero: function() { return {}; },
+  add: function(base, delta) {
+    var out = {};
+    for (var value in base) {
+      out[value] = base[value] + (delta[value] || 0);
+    }
+    for (value in delta) {
+      if (value in base) {
+        continue;
+      }
+      out[value] = delta[value];
+    }
+    return out;
+  },
+  interpolate: function(from, to, f) {
+    var out = {};
+    for (var value in from) {
+      out[value] = interp(from[value], to[value], f);
+    }
+    for (var value in to) {
+      if (value in out) {
+        continue;
+      }
+      out[value] = interp(0, to[value], f);
+    }
+    return out;
+  },
+  toCssValue: function(value) {
+    var s = '';
+    var singleValue = true;
+    for (var item in value) {
+      if (s === '') {
+        s = value[item] + item;
+      } else if (singleValue) {
+        if (value[item] !== 0) {
+          s = features.calcFunction +
+              '(' + s + ' + ' + value[item] + item + ')';
+          singleValue = false;
+        }
+      } else if (value[item] !== 0) {
+        s = s.substring(0, s.length - 1) + ' + ' + value[item] + item + ')';
+      }
+    }
+    return s;
+  },
+  fromCssValue: function(value) {
+    var result = percentLengthType.consumeValueFromString(value);
+    if (result) {
+      return result.value;
+    }
+    return undefined;
+  },
+  consumeValueFromString: function(value) {
+    if (!isDefinedAndNotNull(value)) {
+      return undefined;
+    }
+    var autoMatch = autoRE.exec(value);
+    if (autoMatch) {
+      return {
+        value: { auto: true },
+        remaining: value.substring(autoMatch[0].length)
+      };
+    }
+    var out = {};
+    var calcMatch = outerCalcRE.exec(value);
+    if (!calcMatch) {
+      var singleValue = valueRE.exec(value);
+      if (singleValue && (singleValue.length === 4)) {
+        out[singleValue[3]] = Number(singleValue[1]);
+        return {
+          value: out,
+          remaining: value.substring(singleValue[0].length)
+        };
+      }
+      return undefined;
+    }
+    var remaining = value.substring(calcMatch[0].length);
+    var calcInnards = calcMatch[2];
+    var firstTime = true;
+    while (true) {
+      var reversed = false;
+      if (firstTime) {
+        firstTime = false;
+      } else {
+        var op = operatorRE.exec(calcInnards);
+        if (!op) {
+          return undefined;
+        }
+        if (op[1] === '-') {
+          reversed = true;
+        }
+        calcInnards = calcInnards.substring(op[0].length);
+      }
+      value = valueRE.exec(calcInnards);
+      if (!value) {
+        return undefined;
+      }
+      var valueUnit = value[3];
+      var valueNumber = Number(value[1]);
+      if (!isDefinedAndNotNull(out[valueUnit])) {
+        out[valueUnit] = 0;
+      }
+      if (reversed) {
+        out[valueUnit] -= valueNumber;
+      } else {
+        out[valueUnit] += valueNumber;
+      }
+      calcInnards = calcInnards.substring(value[0].length);
+      if (/\s*/.exec(calcInnards)[0].length === calcInnards.length) {
+        return {
+          value: out,
+          remaining: remaining
+        };
+      }
+    }
+  },
+  negate: function(value) {
+    var out = {};
+    for (var unit in value) {
+      out[unit] = -value[unit];
+    }
+    return out;
+  }
+};
+
+var percentLengthAutoType = typeWithKeywords(['auto'], percentLengthType);
+
+var positionKeywordRE = /^\s*left|^\s*center|^\s*right|^\s*top|^\s*bottom/i;
+var positionType = {
+  zero: function() { return [{ px: 0 }, { px: 0 }]; },
+  add: function(base, delta) {
+    return [
+      percentLengthType.add(base[0], delta[0]),
+      percentLengthType.add(base[1], delta[1])
+    ];
+  },
+  interpolate: function(from, to, f) {
+    return [
+      percentLengthType.interpolate(from[0], to[0], f),
+      percentLengthType.interpolate(from[1], to[1], f)
+    ];
+  },
+  toCssValue: function(value) {
+    return value.map(percentLengthType.toCssValue).join(' ');
+  },
+  fromCssValue: function(value) {
+    var tokens = positionType.consumeAllTokensFromString(value);
+    if (!tokens || tokens.length > 4) {
+      return undefined;
+    }
+
+    if (tokens.length === 1) {
+      var token = tokens[0];
+      return (positionType.isHorizontalToken(token) ?
+          [token, 'center'] : ['center', token]).map(positionType.resolveToken);
+    }
+
+    if (tokens.length === 2 &&
+        positionType.isHorizontalToken(tokens[0]) &&
+        positionType.isVerticalToken(tokens[1])) {
+      return tokens.map(positionType.resolveToken);
+    }
+
+    if (tokens.filter(positionType.isKeyword).length !== 2) {
+      return undefined;
+    }
+
+    var out = [undefined, undefined];
+    var center = false;
+    for (var i = 0; i < tokens.length; i++) {
+      var token = tokens[i];
+      if (!positionType.isKeyword(token)) {
+        return undefined;
+      }
+      if (token === 'center') {
+        if (center) {
+          return undefined;
+        }
+        center = true;
+        continue;
+      }
+      var axis = Number(positionType.isVerticalToken(token));
+      if (out[axis]) {
+        return undefined;
+      }
+      if (i === tokens.length - 1 || positionType.isKeyword(tokens[i + 1])) {
+        out[axis] = positionType.resolveToken(token);
+        continue;
+      }
+      var percentLength = tokens[++i];
+      if (token === 'bottom' || token === 'right') {
+        percentLength = percentLengthType.negate(percentLength);
+        percentLength['%'] = (percentLength['%'] || 0) + 100;
+      }
+      out[axis] = percentLength;
+    }
+    if (center) {
+      if (!out[0]) {
+        out[0] = positionType.resolveToken('center');
+      } else if (!out[1]) {
+        out[1] = positionType.resolveToken('center');
+      } else {
+        return undefined;
+      }
+    }
+    return out.every(isDefinedAndNotNull) ? out : undefined;
+  },
+  consumeAllTokensFromString: function(remaining) {
+    var tokens = [];
+    while (remaining.trim()) {
+      var result = positionType.consumeTokenFromString(remaining);
+      if (!result) {
+        return undefined;
+      }
+      tokens.push(result.value);
+      remaining = result.remaining;
+    }
+    return tokens;
+  },
+  consumeTokenFromString: function(value) {
+    var keywordMatch = positionKeywordRE.exec(value);
+    if (keywordMatch) {
+      return {
+        value: keywordMatch[0].trim().toLowerCase(),
+        remaining: value.substring(keywordMatch[0].length)
+      };
+    }
+    return percentLengthType.consumeValueFromString(value);
+  },
+  resolveToken: function(token) {
+    if (typeof token === 'string') {
+      return percentLengthType.fromCssValue({
+        left: '0%',
+        center: '50%',
+        right: '100%',
+        top: '0%',
+        bottom: '100%'
+      }[token]);
+    }
+    return token;
+  },
+  isHorizontalToken: function(token) {
+    if (typeof token === 'string') {
+      return token in { left: true, center: true, right: true };
+    }
+    return true;
+  },
+  isVerticalToken: function(token) {
+    if (typeof token === 'string') {
+      return token in { top: true, center: true, bottom: true };
+    }
+    return true;
+  },
+  isKeyword: function(token) {
+    return typeof token === 'string';
+  }
+};
+
+// Spec: http://dev.w3.org/csswg/css-backgrounds/#background-position
+var positionListType = {
+  zero: function() { return [positionType.zero()]; },
+  add: function(base, delta) {
+    var out = [];
+    var maxLength = Math.max(base.length, delta.length);
+    for (var i = 0; i < maxLength; i++) {
+      var basePosition = base[i] ? base[i] : positionType.zero();
+      var deltaPosition = delta[i] ? delta[i] : positionType.zero();
+      out.push(positionType.add(basePosition, deltaPosition));
+    }
+    return out;
+  },
+  interpolate: function(from, to, f) {
+    var out = [];
+    var maxLength = Math.max(from.length, to.length);
+    for (var i = 0; i < maxLength; i++) {
+      var fromPosition = from[i] ? from[i] : positionType.zero();
+      var toPosition = to[i] ? to[i] : positionType.zero();
+      out.push(positionType.interpolate(fromPosition, toPosition, f));
+    }
+    return out;
+  },
+  toCssValue: function(value) {
+    return value.map(positionType.toCssValue).join(', ');
+  },
+  fromCssValue: function(value) {
+    if (!isDefinedAndNotNull(value)) {
+      return undefined;
+    }
+    if (!value.trim()) {
+      return [positionType.fromCssValue('0% 0%')];
+    }
+    var positionValues = value.split(',');
+    var out = positionValues.map(positionType.fromCssValue);
+    return out.every(isDefinedAndNotNull) ? out : undefined;
+  }
+};
+
+var rectangleRE = /rect\(([^,]+),([^,]+),([^,]+),([^)]+)\)/;
+var rectangleType = {
+  add: function(base, delta) {
+    return {
+      top: percentLengthType.add(base.top, delta.top),
+      right: percentLengthType.add(base.right, delta.right),
+      bottom: percentLengthType.add(base.bottom, delta.bottom),
+      left: percentLengthType.add(base.left, delta.left)
+    };
+  },
+  interpolate: function(from, to, f) {
+    return {
+      top: percentLengthType.interpolate(from.top, to.top, f),
+      right: percentLengthType.interpolate(from.right, to.right, f),
+      bottom: percentLengthType.interpolate(from.bottom, to.bottom, f),
+      left: percentLengthType.interpolate(from.left, to.left, f)
+    };
+  },
+  toCssValue: function(value) {
+    return 'rect(' +
+        percentLengthType.toCssValue(value.top) + ',' +
+        percentLengthType.toCssValue(value.right) + ',' +
+        percentLengthType.toCssValue(value.bottom) + ',' +
+        percentLengthType.toCssValue(value.left) + ')';
+  },
+  fromCssValue: function(value) {
+    var match = rectangleRE.exec(value);
+    if (!match) {
+      return undefined;
+    }
+    var out = {
+      top: percentLengthType.fromCssValue(match[1]),
+      right: percentLengthType.fromCssValue(match[2]),
+      bottom: percentLengthType.fromCssValue(match[3]),
+      left: percentLengthType.fromCssValue(match[4])
+    };
+    if (out.top && out.right && out.bottom && out.left) {
+      return out;
+    }
+    return undefined;
+  }
+};
+
+var originType = {
+  zero: function() { return [{'%': 0}, {'%': 0}, {px: 0}]; },
+  add: function(base, delta) {
+    return [
+      percentLengthType.add(base[0], delta[0]),
+      percentLengthType.add(base[1], delta[1]),
+      percentLengthType.add(base[2], delta[2])
+    ];
+  },
+  interpolate: function(from, to, f) {
+    return [
+      percentLengthType.interpolate(from[0], to[0], f),
+      percentLengthType.interpolate(from[1], to[1], f),
+      percentLengthType.interpolate(from[2], to[2], f)
+    ];
+  },
+  toCssValue: function(value) {
+    var result = percentLengthType.toCssValue(value[0]) + ' ' +
+        percentLengthType.toCssValue(value[1]);
+    // Return the third value if it is non-zero.
+    for (var unit in value[2]) {
+      if (value[2][unit] !== 0) {
+        return result + ' ' + percentLengthType.toCssValue(value[2]);
+      }
+    }
+    return result;
+  },
+  fromCssValue: function(value) {
+    var tokens = positionType.consumeAllTokensFromString(value);
+    if (!tokens) {
+      return undefined;
+    }
+    var out = ['center', 'center', {px: 0}];
+    switch (tokens.length) {
+      case 0:
+        return originType.zero();
+      case 1:
+        if (positionType.isHorizontalToken(tokens[0])) {
+          out[0] = tokens[0];
+        } else if (positionType.isVerticalToken(tokens[0])) {
+          out[1] = tokens[0];
+        } else {
+          return undefined;
+        }
+        return out.map(positionType.resolveToken);
+      case 3:
+        if (positionType.isKeyword(tokens[2])) {
+          return undefined;
+        }
+        out[2] = tokens[2];
+      case 2:
+        if (positionType.isHorizontalToken(tokens[0]) &&
+            positionType.isVerticalToken(tokens[1])) {
+          out[0] = tokens[0];
+          out[1] = tokens[1];
+        } else if (positionType.isVerticalToken(tokens[0]) &&
+            positionType.isHorizontalToken(tokens[1])) {
+          out[0] = tokens[1];
+          out[1] = tokens[0];
+        } else {
+          return undefined;
+        }
+        return out.map(positionType.resolveToken);
+      default:
+        return undefined;
+    }
+  }
+};
+
+var shadowType = {
+  zero: function() {
+    return {
+      hOffset: lengthType.zero(),
+      vOffset: lengthType.zero()
+    };
+  },
+  _addSingle: function(base, delta) {
+    if (base && delta && base.inset !== delta.inset) {
+      return delta;
+    }
+    var result = {
+      inset: base ? base.inset : delta.inset,
+      hOffset: lengthType.add(
+          base ? base.hOffset : lengthType.zero(),
+          delta ? delta.hOffset : lengthType.zero()),
+      vOffset: lengthType.add(
+          base ? base.vOffset : lengthType.zero(),
+          delta ? delta.vOffset : lengthType.zero()),
+      blur: lengthType.add(
+          base && base.blur || lengthType.zero(),
+          delta && delta.blur || lengthType.zero())
+    };
+    if (base && base.spread || delta && delta.spread) {
+      result.spread = lengthType.add(
+          base && base.spread || lengthType.zero(),
+          delta && delta.spread || lengthType.zero());
+    }
+    if (base && base.color || delta && delta.color) {
+      result.color = colorType.add(
+          base && base.color || colorType.zero(),
+          delta && delta.color || colorType.zero());
+    }
+    return result;
+  },
+  add: function(base, delta) {
+    var result = [];
+    for (var i = 0; i < base.length || i < delta.length; i++) {
+      result.push(this._addSingle(base[i], delta[i]));
+    }
+    return result;
+  },
+  _interpolateSingle: function(from, to, f) {
+    if (from && to && from.inset !== to.inset) {
+      return f < 0.5 ? from : to;
+    }
+    var result = {
+      inset: from ? from.inset : to.inset,
+      hOffset: lengthType.interpolate(
+          from ? from.hOffset : lengthType.zero(),
+          to ? to.hOffset : lengthType.zero(), f),
+      vOffset: lengthType.interpolate(
+          from ? from.vOffset : lengthType.zero(),
+          to ? to.vOffset : lengthType.zero(), f),
+      blur: lengthType.interpolate(
+          from && from.blur || lengthType.zero(),
+          to && to.blur || lengthType.zero(), f)
+    };
+    if (from && from.spread || to && to.spread) {
+      result.spread = lengthType.interpolate(
+          from && from.spread || lengthType.zero(),
+          to && to.spread || lengthType.zero(), f);
+    }
+    if (from && from.color || to && to.color) {
+      result.color = colorType.interpolate(
+          from && from.color || colorType.zero(),
+          to && to.color || colorType.zero(), f);
+    }
+    return result;
+  },
+  interpolate: function(from, to, f) {
+    var result = [];
+    for (var i = 0; i < from.length || i < to.length; i++) {
+      result.push(this._interpolateSingle(from[i], to[i], f));
+    }
+    return result;
+  },
+  _toCssValueSingle: function(value) {
+    return (value.inset ? 'inset ' : '') +
+        lengthType.toCssValue(value.hOffset) + ' ' +
+        lengthType.toCssValue(value.vOffset) + ' ' +
+        lengthType.toCssValue(value.blur) +
+        (value.spread ? ' ' + lengthType.toCssValue(value.spread) : '') +
+        (value.color ? ' ' + colorType.toCssValue(value.color) : '');
+  },
+  toCssValue: function(value) {
+    return value.map(this._toCssValueSingle).join(', ');
+  },
+  fromCssValue: function(value) {
+    var shadowRE = /(([^(,]+(\([^)]*\))?)+)/g;
+    var match;
+    var shadows = [];
+    while ((match = shadowRE.exec(value)) !== null) {
+      shadows.push(match[0]);
+    }
+
+    var result = shadows.map(function(value) {
+      if (value === 'none') {
+        return shadowType.zero();
+      }
+      value = value.replace(/^\s+|\s+$/g, '');
+
+      var partsRE = /([^ (]+(\([^)]*\))?)/g;
+      var parts = [];
+      while ((match = partsRE.exec(value)) !== null) {
+        parts.push(match[0]);
+      }
+
+      if (parts.length < 2 || parts.length > 7) {
+        return undefined;
+      }
+      var result = {
+        inset: false
+      };
+
+      var lengths = [];
+      while (parts.length) {
+        var part = parts.shift();
+
+        var length = lengthType.fromCssValue(part);
+        if (length) {
+          lengths.push(length);
+          continue;
+        }
+
+        var color = colorType.fromCssValue(part);
+        if (color) {
+          result.color = color;
+        }
+
+        if (part === 'inset') {
+          result.inset = true;
+        }
+      }
+
+      if (lengths.length < 2 || lengths.length > 4) {
+        return undefined;
+      }
+      result.hOffset = lengths[0];
+      result.vOffset = lengths[1];
+      if (lengths.length > 2) {
+        result.blur = lengths[2];
+      }
+      if (lengths.length > 3) {
+        result.spread = lengths[3];
+      }
+      return result;
+    });
+
+    return result.every(isDefined) ? result : undefined;
+  }
+};
+
+var nonNumericType = {
+  add: function(base, delta) {
+    return isDefined(delta) ? delta : base;
+  },
+  interpolate: function(from, to, f) {
+    return f < 0.5 ? from : to;
+  },
+  toCssValue: function(value) {
+    return value;
+  },
+  fromCssValue: function(value) {
+    return value;
+  }
+};
+
+var visibilityType = createObject(nonNumericType, {
+  interpolate: function(from, to, f) {
+    if (from !== 'visible' && to !== 'visible') {
+      return nonNumericType.interpolate(from, to, f);
+    }
+    if (f <= 0) {
+      return from;
+    }
+    if (f >= 1) {
+      return to;
+    }
+    return 'visible';
+  },
+  fromCssValue: function(value) {
+    if (['visible', 'hidden', 'collapse'].indexOf(value) !== -1) {
+      return value;
+    }
+    return undefined;
+  }
+});
+
+var lengthType = percentLengthType;
+var lengthAutoType = typeWithKeywords(['auto'], lengthType);
+
+var colorRE = new RegExp(
+    '(hsla?|rgba?)\\(' +
+    '([\\-0-9]+%?),?\\s*' +
+    '([\\-0-9]+%?),?\\s*' +
+    '([\\-0-9]+%?)(?:,?\\s*([\\-0-9\\.]+%?))?' +
+    '\\)');
+var colorHashRE = new RegExp(
+    '#([0-9A-Fa-f][0-9A-Fa-f]?)' +
+    '([0-9A-Fa-f][0-9A-Fa-f]?)' +
+    '([0-9A-Fa-f][0-9A-Fa-f]?)');
+
+function hsl2rgb(h, s, l) {
+  // Cribbed from http://dev.w3.org/csswg/css-color/#hsl-color
+  // Wrap to 0->360 degrees (IE -10 === 350) then normalize
+  h = (((h % 360) + 360) % 360) / 360;
+  s = s / 100;
+  l = l / 100;
+  function hue2rgb(m1, m2, h) {
+    if (h < 0) {
+      h += 1;
+    }
+    if (h > 1) {
+      h -= 1;
+    }
+    if (h * 6 < 1) {
+      return m1 + (m2 - m1) * h * 6;
+    }
+    if (h * 2 < 1) {
+      return m2;
+    }
+    if (h * 3 < 2) {
+      return m1 + (m2 - m1) * (2 / 3 - h) * 6;
+    }
+    return m1;
+  }
+  var m2;
+  if (l <= 0.5) {
+    m2 = l * (s + 1);
+  } else {
+    m2 = l + s - l * s;
+  }
+
+  var m1 = l * 2 - m2;
+  var r = Math.ceil(hue2rgb(m1, m2, h + 1 / 3) * 255);
+  var g = Math.ceil(hue2rgb(m1, m2, h) * 255);
+  var b = Math.ceil(hue2rgb(m1, m2, h - 1 / 3) * 255);
+  return [r, g, b];
+}
+
+var namedColors = {
+  aliceblue: [240, 248, 255, 1],
+  antiquewhite: [250, 235, 215, 1],
+  aqua: [0, 255, 255, 1],
+  aquamarine: [127, 255, 212, 1],
+  azure: [240, 255, 255, 1],
+  beige: [245, 245, 220, 1],
+  bisque: [255, 228, 196, 1],
+  black: [0, 0, 0, 1],
+  blanchedalmond: [255, 235, 205, 1],
+  blue: [0, 0, 255, 1],
+  blueviolet: [138, 43, 226, 1],
+  brown: [165, 42, 42, 1],
+  burlywood: [222, 184, 135, 1],
+  cadetblue: [95, 158, 160, 1],
+  chartreuse: [127, 255, 0, 1],
+  chocolate: [210, 105, 30, 1],
+  coral: [255, 127, 80, 1],
+  cornflowerblue: [100, 149, 237, 1],
+  cornsilk: [255, 248, 220, 1],
+  crimson: [220, 20, 60, 1],
+  cyan: [0, 255, 255, 1],
+  darkblue: [0, 0, 139, 1],
+  darkcyan: [0, 139, 139, 1],
+  darkgoldenrod: [184, 134, 11, 1],
+  darkgray: [169, 169, 169, 1],
+  darkgreen: [0, 100, 0, 1],
+  darkgrey: [169, 169, 169, 1],
+  darkkhaki: [189, 183, 107, 1],
+  darkmagenta: [139, 0, 139, 1],
+  darkolivegreen: [85, 107, 47, 1],
+  darkorange: [255, 140, 0, 1],
+  darkorchid: [153, 50, 204, 1],
+  darkred: [139, 0, 0, 1],
+  darksalmon: [233, 150, 122, 1],
+  darkseagreen: [143, 188, 143, 1],
+  darkslateblue: [72, 61, 139, 1],
+  darkslategray: [47, 79, 79, 1],
+  darkslategrey: [47, 79, 79, 1],
+  darkturquoise: [0, 206, 209, 1],
+  darkviolet: [148, 0, 211, 1],
+  deeppink: [255, 20, 147, 1],
+  deepskyblue: [0, 191, 255, 1],
+  dimgray: [105, 105, 105, 1],
+  dimgrey: [105, 105, 105, 1],
+  dodgerblue: [30, 144, 255, 1],
+  firebrick: [178, 34, 34, 1],
+  floralwhite: [255, 250, 240, 1],
+  forestgreen: [34, 139, 34, 1],
+  fuchsia: [255, 0, 255, 1],
+  gainsboro: [220, 220, 220, 1],
+  ghostwhite: [248, 248, 255, 1],
+  gold: [255, 215, 0, 1],
+  goldenrod: [218, 165, 32, 1],
+  gray: [128, 128, 128, 1],
+  green: [0, 128, 0, 1],
+  greenyellow: [173, 255, 47, 1],
+  grey: [128, 128, 128, 1],
+  honeydew: [240, 255, 240, 1],
+  hotpink: [255, 105, 180, 1],
+  indianred: [205, 92, 92, 1],
+  indigo: [75, 0, 130, 1],
+  ivory: [255, 255, 240, 1],
+  khaki: [240, 230, 140, 1],
+  lavender: [230, 230, 250, 1],
+  lavenderblush: [255, 240, 245, 1],
+  lawngreen: [124, 252, 0, 1],
+  lemonchiffon: [255, 250, 205, 1],
+  lightblue: [173, 216, 230, 1],
+  lightcoral: [240, 128, 128, 1],
+  lightcyan: [224, 255, 255, 1],
+  lightgoldenrodyellow: [250, 250, 210, 1],
+  lightgray: [211, 211, 211, 1],
+  lightgreen: [144, 238, 144, 1],
+  lightgrey: [211, 211, 211, 1],
+  lightpink: [255, 182, 193, 1],
+  lightsalmon: [255, 160, 122, 1],
+  lightseagreen: [32, 178, 170, 1],
+  lightskyblue: [135, 206, 250, 1],
+  lightslategray: [119, 136, 153, 1],
+  lightslategrey: [119, 136, 153, 1],
+  lightsteelblue: [176, 196, 222, 1],
+  lightyellow: [255, 255, 224, 1],
+  lime: [0, 255, 0, 1],
+  limegreen: [50, 205, 50, 1],
+  linen: [250, 240, 230, 1],
+  magenta: [255, 0, 255, 1],
+  maroon: [128, 0, 0, 1],
+  mediumaquamarine: [102, 205, 170, 1],
+  mediumblue: [0, 0, 205, 1],
+  mediumorchid: [186, 85, 211, 1],
+  mediumpurple: [147, 112, 219, 1],
+  mediumseagreen: [60, 179, 113, 1],
+  mediumslateblue: [123, 104, 238, 1],
+  mediumspringgreen: [0, 250, 154, 1],
+  mediumturquoise: [72, 209, 204, 1],
+  mediumvioletred: [199, 21, 133, 1],
+  midnightblue: [25, 25, 112, 1],
+  mintcream: [245, 255, 250, 1],
+  mistyrose: [255, 228, 225, 1],
+  moccasin: [255, 228, 181, 1],
+  navajowhite: [255, 222, 173, 1],
+  navy: [0, 0, 128, 1],
+  oldlace: [253, 245, 230, 1],
+  olive: [128, 128, 0, 1],
+  olivedrab: [107, 142, 35, 1],
+  orange: [255, 165, 0, 1],
+  orangered: [255, 69, 0, 1],
+  orchid: [218, 112, 214, 1],
+  palegoldenrod: [238, 232, 170, 1],
+  palegreen: [152, 251, 152, 1],
+  paleturquoise: [175, 238, 238, 1],
+  palevioletred: [219, 112, 147, 1],
+  papayawhip: [255, 239, 213, 1],
+  peachpuff: [255, 218, 185, 1],
+  peru: [205, 133, 63, 1],
+  pink: [255, 192, 203, 1],
+  plum: [221, 160, 221, 1],
+  powderblue: [176, 224, 230, 1],
+  purple: [128, 0, 128, 1],
+  red: [255, 0, 0, 1],
+  rosybrown: [188, 143, 143, 1],
+  royalblue: [65, 105, 225, 1],
+  saddlebrown: [139, 69, 19, 1],
+  salmon: [250, 128, 114, 1],
+  sandybrown: [244, 164, 96, 1],
+  seagreen: [46, 139, 87, 1],
+  seashell: [255, 245, 238, 1],
+  sienna: [160, 82, 45, 1],
+  silver: [192, 192, 192, 1],
+  skyblue: [135, 206, 235, 1],
+  slateblue: [106, 90, 205, 1],
+  slategray: [112, 128, 144, 1],
+  slategrey: [112, 128, 144, 1],
+  snow: [255, 250, 250, 1],
+  springgreen: [0, 255, 127, 1],
+  steelblue: [70, 130, 180, 1],
+  tan: [210, 180, 140, 1],
+  teal: [0, 128, 128, 1],
+  thistle: [216, 191, 216, 1],
+  tomato: [255, 99, 71, 1],
+  transparent: [0, 0, 0, 0],
+  turquoise: [64, 224, 208, 1],
+  violet: [238, 130, 238, 1],
+  wheat: [245, 222, 179, 1],
+  white: [255, 255, 255, 1],
+  whitesmoke: [245, 245, 245, 1],
+  yellow: [255, 255, 0, 1],
+  yellowgreen: [154, 205, 50, 1]
+};
+
+var colorType = typeWithKeywords(['currentColor'], {
+  zero: function() { return [0, 0, 0, 0]; },
+  _premultiply: function(value) {
+    var alpha = value[3];
+    return [value[0] * alpha, value[1] * alpha, value[2] * alpha];
+  },
+  add: function(base, delta) {
+    var alpha = Math.min(base[3] + delta[3], 1);
+    if (alpha === 0) {
+      return [0, 0, 0, 0];
+    }
+    base = this._premultiply(base);
+    delta = this._premultiply(delta);
+    return [(base[0] + delta[0]) / alpha, (base[1] + delta[1]) / alpha,
+            (base[2] + delta[2]) / alpha, alpha];
+  },
+  interpolate: function(from, to, f) {
+    var alpha = clamp(interp(from[3], to[3], f), 0, 1);
+    if (alpha === 0) {
+      return [0, 0, 0, 0];
+    }
+    from = this._premultiply(from);
+    to = this._premultiply(to);
+    return [interp(from[0], to[0], f) / alpha,
+            interp(from[1], to[1], f) / alpha,
+            interp(from[2], to[2], f) / alpha, alpha];
+  },
+  toCssValue: function(value) {
+    return 'rgba(' + Math.round(value[0]) + ', ' + Math.round(value[1]) +
+        ', ' + Math.round(value[2]) + ', ' + value[3] + ')';
+  },
+  fromCssValue: function(value) {
+    // http://dev.w3.org/csswg/css-color/#color
+    var out = [];
+
+    var regexResult = colorHashRE.exec(value);
+    if (regexResult) {
+      if (value.length !== 4 && value.length !== 7) {
+        return undefined;
+      }
+
+      var out = [];
+      regexResult.shift();
+      for (var i = 0; i < 3; i++) {
+        if (regexResult[i].length === 1) {
+          regexResult[i] = regexResult[i] + regexResult[i];
+        }
+        var v = Math.max(Math.min(parseInt(regexResult[i], 16), 255), 0);
+        out[i] = v;
+      }
+      out.push(1.0);
+    }
+
+    var regexResult = colorRE.exec(value);
+    if (regexResult) {
+      regexResult.shift();
+      var type = regexResult.shift().substr(0, 3);
+      for (var i = 0; i < 3; i++) {
+        var m = 1;
+        if (regexResult[i][regexResult[i].length - 1] === '%') {
+          regexResult[i] = regexResult[i].substr(0, regexResult[i].length - 1);
+          m = 255.0 / 100.0;
+        }
+        if (type === 'rgb') {
+          out[i] = clamp(Math.round(parseInt(regexResult[i], 10) * m), 0, 255);
+        } else {
+          out[i] = parseInt(regexResult[i], 10);
+        }
+      }
+
+      // Convert hsl values to rgb value
+      if (type === 'hsl') {
+        out = hsl2rgb.apply(null, out);
+      }
+
+      if (typeof regexResult[3] !== 'undefined') {
+        out[3] = Math.max(Math.min(parseFloat(regexResult[3]), 1.0), 0.0);
+      } else {
+        out.push(1.0);
+      }
+    }
+
+    if (out.some(isNaN)) {
+      return undefined;
+    }
+    if (out.length > 0) {
+      return out;
+    }
+    return namedColors[value];
+  }
+});
+
+var convertToDeg = function(num, type) {
+  switch (type) {
+    case 'grad':
+      return num / 400 * 360;
+    case 'rad':
+      return num / 2 / Math.PI * 360;
+    case 'turn':
+      return num * 360;
+    default:
+      return num;
+  }
+};
+
+var extractValue = function(values, pos, hasUnits) {
+  var value = Number(values[pos]);
+  if (!hasUnits) {
+    return value;
+  }
+  var type = values[pos + 1];
+  if (type === '') { type = 'px'; }
+  var result = {};
+  result[type] = value;
+  return result;
+};
+
+var extractValues = function(values, numValues, hasOptionalValue,
+    hasUnits) {
+  var result = [];
+  for (var i = 0; i < numValues; i++) {
+    result.push(extractValue(values, 1 + 2 * i, hasUnits));
+  }
+  if (hasOptionalValue && values[1 + 2 * numValues]) {
+    result.push(extractValue(values, 1 + 2 * numValues, hasUnits));
+  }
+  return result;
+};
+
+var SPACES = '\\s*';
+var NUMBER = '[+-]?(?:\\d+|\\d*\\.\\d+)';
+var RAW_OPEN_BRACKET = '\\(';
+var RAW_CLOSE_BRACKET = '\\)';
+var RAW_COMMA = ',';
+var UNIT = '[a-zA-Z%]*';
+var START = '^';
+
+function capture(x) { return '(' + x + ')'; }
+function optional(x) { return '(?:' + x + ')?'; }
+
+var OPEN_BRACKET = [SPACES, RAW_OPEN_BRACKET, SPACES].join('');
+var CLOSE_BRACKET = [SPACES, RAW_CLOSE_BRACKET, SPACES].join('');
+var COMMA = [SPACES, RAW_COMMA, SPACES].join('');
+var UNIT_NUMBER = [capture(NUMBER), capture(UNIT)].join('');
+
+function transformRE(name, numParms, hasOptionalParm) {
+  var tokenList = [START, SPACES, name, OPEN_BRACKET];
+  for (var i = 0; i < numParms - 1; i++) {
+    tokenList.push(UNIT_NUMBER);
+    tokenList.push(COMMA);
+  }
+  tokenList.push(UNIT_NUMBER);
+  if (hasOptionalParm) {
+    tokenList.push(optional([COMMA, UNIT_NUMBER].join('')));
+  }
+  tokenList.push(CLOSE_BRACKET);
+  return new RegExp(tokenList.join(''));
+}
+
+function buildMatcher(name, numValues, hasOptionalValue, hasUnits,
+    baseValue) {
+  var baseName = name;
+  if (baseValue) {
+    if (name[name.length - 1] === 'X' || name[name.length - 1] === 'Y') {
+      baseName = name.substring(0, name.length - 1);
+    } else if (name[name.length - 1] === 'Z') {
+      baseName = name.substring(0, name.length - 1) + '3d';
+    }
+  }
+
+  var f = function(x) {
+    var r = extractValues(x, numValues, hasOptionalValue, hasUnits);
+    if (baseValue !== undefined) {
+      if (name[name.length - 1] === 'X') {
+        r.push(baseValue);
+      } else if (name[name.length - 1] === 'Y') {
+        r = [baseValue].concat(r);
+      } else if (name[name.length - 1] === 'Z') {
+        r = [baseValue, baseValue].concat(r);
+      } else if (hasOptionalValue) {
+        while (r.length < 2) {
+          if (baseValue === 'copy') {
+            r.push(r[0]);
+          } else {
+            r.push(baseValue);
+          }
+        }
+      }
+    }
+    return r;
+  };
+  return [transformRE(name, numValues, hasOptionalValue), f, baseName];
+}
+
+function buildRotationMatcher(name, numValues, hasOptionalValue,
+    baseValue) {
+  var m = buildMatcher(name, numValues, hasOptionalValue, true, baseValue);
+
+  var f = function(x) {
+    var r = m[1](x);
+    return r.map(function(v) {
+      var result = 0;
+      for (var type in v) {
+        result += convertToDeg(v[type], type);
+      }
+      return result;
+    });
+  };
+  return [m[0], f, m[2]];
+}
+
+function build3DRotationMatcher() {
+  var m = buildMatcher('rotate3d', 4, false, true);
+  var f = function(x) {
+    var r = m[1](x);
+    var out = [];
+    for (var i = 0; i < 3; i++) {
+      out.push(r[i].px);
+    }
+    var angle = 0;
+    for (var unit in r[3]) {
+      angle += convertToDeg(r[3][unit], unit);
+    }
+    out.push(angle);
+    return out;
+  };
+  return [m[0], f, m[2]];
+}
+
+var transformREs = [
+  buildRotationMatcher('rotate', 1, false),
+  buildRotationMatcher('rotateX', 1, false),
+  buildRotationMatcher('rotateY', 1, false),
+  buildRotationMatcher('rotateZ', 1, false),
+  build3DRotationMatcher(),
+  buildRotationMatcher('skew', 1, true, 0),
+  buildRotationMatcher('skewX', 1, false),
+  buildRotationMatcher('skewY', 1, false),
+  buildMatcher('translateX', 1, false, true, {px: 0}),
+  buildMatcher('translateY', 1, false, true, {px: 0}),
+  buildMatcher('translateZ', 1, false, true, {px: 0}),
+  buildMatcher('translate', 1, true, true, {px: 0}),
+  buildMatcher('translate3d', 3, false, true),
+  buildMatcher('scale', 1, true, false, 'copy'),
+  buildMatcher('scaleX', 1, false, false, 1),
+  buildMatcher('scaleY', 1, false, false, 1),
+  buildMatcher('scaleZ', 1, false, false, 1),
+  buildMatcher('scale3d', 3, false, false),
+  buildMatcher('perspective', 1, false, true),
+  buildMatcher('matrix', 6, false, false),
+  buildMatcher('matrix3d', 16, false, false)
+];
+
+var decomposeMatrix = (function() {
+  // this is only ever used on the perspective matrix, which has 0, 0, 0, 1 as
+  // last column
+  function determinant(m) {
+    return m[0][0] * m[1][1] * m[2][2] +
+           m[1][0] * m[2][1] * m[0][2] +
+           m[2][0] * m[0][1] * m[1][2] -
+           m[0][2] * m[1][1] * m[2][0] -
+           m[1][2] * m[2][1] * m[0][0] -
+           m[2][2] * m[0][1] * m[1][0];
+  }
+
+  // from Wikipedia:
+  //
+  // [A B]^-1 = [A^-1 + A^-1B(D - CA^-1B)^-1CA^-1     -A^-1B(D - CA^-1B)^-1]
+  // [C D]      [-(D - CA^-1B)^-1CA^-1                (D - CA^-1B)^-1      ]
+  //
+  // Therefore
+  //
+  // [A [0]]^-1 = [A^-1       [0]]
+  // [C  1 ]      [ -CA^-1     1 ]
+  function inverse(m) {
+    var iDet = 1 / determinant(m);
+    var a = m[0][0], b = m[0][1], c = m[0][2];
+    var d = m[1][0], e = m[1][1], f = m[1][2];
+    var g = m[2][0], h = m[2][1], k = m[2][2];
+    var Ainv = [
+      [(e * k - f * h) * iDet, (c * h - b * k) * iDet,
+       (b * f - c * e) * iDet, 0],
+      [(f * g - d * k) * iDet, (a * k - c * g) * iDet,
+       (c * d - a * f) * iDet, 0],
+      [(d * h - e * g) * iDet, (g * b - a * h) * iDet,
+       (a * e - b * d) * iDet, 0]
+    ];
+    var lastRow = [];
+    for (var i = 0; i < 3; i++) {
+      var val = 0;
+      for (var j = 0; j < 3; j++) {
+        val += m[3][j] * Ainv[j][i];
+      }
+      lastRow.push(val);
+    }
+    lastRow.push(1);
+    Ainv.push(lastRow);
+    return Ainv;
+  }
+
+  function transposeMatrix4(m) {
+    return [[m[0][0], m[1][0], m[2][0], m[3][0]],
+            [m[0][1], m[1][1], m[2][1], m[3][1]],
+            [m[0][2], m[1][2], m[2][2], m[3][2]],
+            [m[0][3], m[1][3], m[2][3], m[3][3]]];
+  }
+
+  function multVecMatrix(v, m) {
+    var result = [];
+    for (var i = 0; i < 4; i++) {
+      var val = 0;
+      for (var j = 0; j < 4; j++) {
+        val += v[j] * m[j][i];
+      }
+      result.push(val);
+    }
+    return result;
+  }
+
+  function normalize(v) {
+    var len = length(v);
+    return [v[0] / len, v[1] / len, v[2] / len];
+  }
+
+  function length(v) {
+    return Math.sqrt(v[0] * v[0] + v[1] * v[1] + v[2] * v[2]);
+  }
+
+  function combine(v1, v2, v1s, v2s) {
+    return [v1s * v1[0] + v2s * v2[0], v1s * v1[1] + v2s * v2[1],
+            v1s * v1[2] + v2s * v2[2]];
+  }
+
+  function cross(v1, v2) {
+    return [v1[1] * v2[2] - v1[2] * v2[1],
+            v1[2] * v2[0] - v1[0] * v2[2],
+            v1[0] * v2[1] - v1[1] * v2[0]];
+  }
+
+  // TODO: Implement 2D matrix decomposition.
+  // http://dev.w3.org/csswg/css-transforms/#decomposing-a-2d-matrix
+  function decomposeMatrix(matrix) {
+    var m3d = [
+      matrix.slice(0, 4),
+      matrix.slice(4, 8),
+      matrix.slice(8, 12),
+      matrix.slice(12, 16)
+    ];
+
+    // skip normalization step as m3d[3][3] should always be 1
+    if (m3d[3][3] !== 1) {
+      throw 'attempt to decompose non-normalized matrix';
+    }
+
+    var perspectiveMatrix = m3d.concat(); // copy m3d
+    for (var i = 0; i < 3; i++) {
+      perspectiveMatrix[i][3] = 0;
+    }
+
+    if (determinant(perspectiveMatrix) === 0) {
+      return false;
+    }
+
+    var rhs = [];
+
+    var perspective;
+    if (m3d[0][3] !== 0 || m3d[1][3] !== 0 || m3d[2][3] !== 0) {
+      rhs.push(m3d[0][3]);
+      rhs.push(m3d[1][3]);
+      rhs.push(m3d[2][3]);
+      rhs.push(m3d[3][3]);
+
+      var inversePerspectiveMatrix = inverse(perspectiveMatrix);
+      var transposedInversePerspectiveMatrix =
+          transposeMatrix4(inversePerspectiveMatrix);
+      perspective = multVecMatrix(rhs, transposedInversePerspectiveMatrix);
+    } else {
+      perspective = [0, 0, 0, 1];
+    }
+
+    var translate = m3d[3].slice(0, 3);
+
+    var row = [];
+    row.push(m3d[0].slice(0, 3));
+    var scale = [];
+    scale.push(length(row[0]));
+    row[0] = normalize(row[0]);
+
+    var skew = [];
+    row.push(m3d[1].slice(0, 3));
+    skew.push(dot(row[0], row[1]));
+    row[1] = combine(row[1], row[0], 1.0, -skew[0]);
+
+    scale.push(length(row[1]));
+    row[1] = normalize(row[1]);
+    skew[0] /= scale[1];
+
+    row.push(m3d[2].slice(0, 3));
+    skew.push(dot(row[0], row[2]));
+    row[2] = combine(row[2], row[0], 1.0, -skew[1]);
+    skew.push(dot(row[1], row[2]));
+    row[2] = combine(row[2], row[1], 1.0, -skew[2]);
+
+    scale.push(length(row[2]));
+    row[2] = normalize(row[2]);
+    skew[1] /= scale[2];
+    skew[2] /= scale[2];
+
+    var pdum3 = cross(row[1], row[2]);
+    if (dot(row[0], pdum3) < 0) {
+      for (var i = 0; i < 3; i++) {
+        scale[i] *= -1;
+        row[i][0] *= -1;
+        row[i][1] *= -1;
+        row[i][2] *= -1;
+      }
+    }
+
+    var t = row[0][0] + row[1][1] + row[2][2] + 1;
+    var s;
+    var quaternion;
+
+    if (t > 1e-4) {
+      s = 0.5 / Math.sqrt(t);
+      quaternion = [
+        (row[2][1] - row[1][2]) * s,
+        (row[0][2] - row[2][0]) * s,
+        (row[1][0] - row[0][1]) * s,
+        0.25 / s
+      ];
+    } else if (row[0][0] > row[1][1] && row[0][0] > row[2][2]) {
+      s = Math.sqrt(1 + row[0][0] - row[1][1] - row[2][2]) * 2.0;
+      quaternion = [
+        0.25 * s,
+        (row[0][1] + row[1][0]) / s,
+        (row[0][2] + row[2][0]) / s,
+        (row[2][1] - row[1][2]) / s
+      ];
+    } else if (row[1][1] > row[2][2]) {
+      s = Math.sqrt(1.0 + row[1][1] - row[0][0] - row[2][2]) * 2.0;
+      quaternion = [
+        (row[0][1] + row[1][0]) / s,
+        0.25 * s,
+        (row[1][2] + row[2][1]) / s,
+        (row[0][2] - row[2][0]) / s
+      ];
+    } else {
+      s = Math.sqrt(1.0 + row[2][2] - row[0][0] - row[1][1]) * 2.0;
+      quaternion = [
+        (row[0][2] + row[2][0]) / s,
+        (row[1][2] + row[2][1]) / s,
+        0.25 * s,
+        (row[1][0] - row[0][1]) / s
+      ];
+    }
+
+    return {
+      translate: translate, scale: scale, skew: skew,
+      quaternion: quaternion, perspective: perspective
+    };
+  }
+  return decomposeMatrix;
+})();
+
+function dot(v1, v2) {
+  var result = 0;
+  for (var i = 0; i < v1.length; i++) {
+    result += v1[i] * v2[i];
+  }
+  return result;
+}
+
+function multiplyMatrices(a, b) {
+  return [
+    a[0] * b[0] + a[4] * b[1] + a[8] * b[2] + a[12] * b[3],
+    a[1] * b[0] + a[5] * b[1] + a[9] * b[2] + a[13] * b[3],
+    a[2] * b[0] + a[6] * b[1] + a[10] * b[2] + a[14] * b[3],
+    a[3] * b[0] + a[7] * b[1] + a[11] * b[2] + a[15] * b[3],
+
+    a[0] * b[4] + a[4] * b[5] + a[8] * b[6] + a[12] * b[7],
+    a[1] * b[4] + a[5] * b[5] + a[9] * b[6] + a[13] * b[7],
+    a[2] * b[4] + a[6] * b[5] + a[10] * b[6] + a[14] * b[7],
+    a[3] * b[4] + a[7] * b[5] + a[11] * b[6] + a[15] * b[7],
+
+    a[0] * b[8] + a[4] * b[9] + a[8] * b[10] + a[12] * b[11],
+    a[1] * b[8] + a[5] * b[9] + a[9] * b[10] + a[13] * b[11],
+    a[2] * b[8] + a[6] * b[9] + a[10] * b[10] + a[14] * b[11],
+    a[3] * b[8] + a[7] * b[9] + a[11] * b[10] + a[15] * b[11],
+
+    a[0] * b[12] + a[4] * b[13] + a[8] * b[14] + a[12] * b[15],
+    a[1] * b[12] + a[5] * b[13] + a[9] * b[14] + a[13] * b[15],
+    a[2] * b[12] + a[6] * b[13] + a[10] * b[14] + a[14] * b[15],
+    a[3] * b[12] + a[7] * b[13] + a[11] * b[14] + a[15] * b[15]
+  ];
+}
+
+function convertItemToMatrix(item) {
+  switch (item.t) {
+    case 'rotateX':
+      var angle = item.d * Math.PI / 180;
+      return [1, 0, 0, 0,
+              0, Math.cos(angle), Math.sin(angle), 0,
+              0, -Math.sin(angle), Math.cos(angle), 0,
+              0, 0, 0, 1];
+    case 'rotateY':
+      var angle = item.d * Math.PI / 180;
+      return [Math.cos(angle), 0, -Math.sin(angle), 0,
+              0, 1, 0, 0,
+              Math.sin(angle), 0, Math.cos(angle), 0,
+              0, 0, 0, 1];
+    case 'rotate':
+    case 'rotateZ':
+      var angle = item.d * Math.PI / 180;
+      return [Math.cos(angle), Math.sin(angle), 0, 0,
+              -Math.sin(angle), Math.cos(angle), 0, 0,
+              0, 0, 1, 0,
+              0, 0, 0, 1];
+    case 'rotate3d':
+      var x = item.d[0];
+      var y = item.d[1];
+      var z = item.d[2];
+      var sqrLength = x * x + y * y + z * z;
+      if (sqrLength === 0) {
+        x = 1;
+        y = 0;
+        z = 0;
+      } else if (sqrLength !== 1) {
+        var length = Math.sqrt(sqrLength);
+        x /= length;
+        y /= length;
+        z /= length;
+      }
+      var s = Math.sin(item.d[3] * Math.PI / 360);
+      var sc = s * Math.cos(item.d[3] * Math.PI / 360);
+      var sq = s * s;
+      return [
+        1 - 2 * (y * y + z * z) * sq,
+        2 * (x * y * sq + z * sc),
+        2 * (x * z * sq - y * sc),
+        0,
+
+        2 * (x * y * sq - z * sc),
+        1 - 2 * (x * x + z * z) * sq,
+        2 * (y * z * sq + x * sc),
+        0,
+
+        2 * (x * z * sq + y * sc),
+        2 * (y * z * sq - x * sc),
+        1 - 2 * (x * x + y * y) * sq,
+        0,
+
+        0, 0, 0, 1
+      ];
+    case 'scale':
+      return [item.d[0], 0, 0, 0,
+              0, item.d[1], 0, 0,
+              0, 0, 1, 0,
+              0, 0, 0, 1];
+    case 'scale3d':
+      return [item.d[0], 0, 0, 0,
+              0, item.d[1], 0, 0,
+              0, 0, item.d[2], 0,
+              0, 0, 0, 1];
+    case 'skew':
+      return [1, Math.tan(item.d[1] * Math.PI / 180), 0, 0,
+              Math.tan(item.d[0] * Math.PI / 180), 1, 0, 0,
+              0, 0, 1, 0,
+              0, 0, 0, 1];
+    case 'skewX':
+      return [1, 0, 0, 0,
+              Math.tan(item.d * Math.PI / 180), 1, 0, 0,
+              0, 0, 1, 0,
+              0, 0, 0, 1];
+    case 'skewY':
+      return [1, Math.tan(item.d * Math.PI / 180), 0, 0,
+              0, 1, 0, 0,
+              0, 0, 1, 0,
+              0, 0, 0, 1];
+    // TODO: Work out what to do with non-px values.
+    case 'translate':
+      return [1, 0, 0, 0,
+              0, 1, 0, 0,
+              0, 0, 1, 0,
+              item.d[0].px, item.d[1].px, 0, 1];
+    case 'translate3d':
+      return [1, 0, 0, 0,
+              0, 1, 0, 0,
+              0, 0, 1, 0,
+              item.d[0].px, item.d[1].px, item.d[2].px, 1];
+    case 'perspective':
+      return [
+        1, 0, 0, 0,
+        0, 1, 0, 0,
+        0, 0, 1, -1 / item.d.px,
+        0, 0, 0, 1];
+    case 'matrix':
+      return [item.d[0], item.d[1], 0, 0,
+              item.d[2], item.d[3], 0, 0,
+              0, 0, 1, 0,
+              item.d[4], item.d[5], 0, 1];
+    case 'matrix3d':
+      return item.d;
+    default:
+      ASSERT_ENABLED && assert(false, 'Transform item type ' + item.t +
+          ' conversion to matrix not yet implemented.');
+  }
+}
+
+function convertToMatrix(transformList) {
+  if (transformList.length === 0) {
+    return [1, 0, 0, 0,
+            0, 1, 0, 0,
+            0, 0, 1, 0,
+            0, 0, 0, 1];
+  }
+  return transformList.map(convertItemToMatrix).reduce(multiplyMatrices);
+}
+
+var composeMatrix = (function() {
+  function multiply(a, b) {
+    var result = [[0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0]];
+    for (var i = 0; i < 4; i++) {
+      for (var j = 0; j < 4; j++) {
+        for (var k = 0; k < 4; k++) {
+          result[i][j] += b[i][k] * a[k][j];
+        }
+      }
+    }
+    return result;
+  }
+
+  function is2D(m) {
+    return (
+        m[0][2] == 0 &&
+        m[0][3] == 0 &&
+        m[1][2] == 0 &&
+        m[1][3] == 0 &&
+        m[2][0] == 0 &&
+        m[2][1] == 0 &&
+        m[2][2] == 1 &&
+        m[2][3] == 0 &&
+        m[3][2] == 0 &&
+        m[3][3] == 1);
+  }
+
+  function composeMatrix(translate, scale, skew, quat, perspective) {
+    var matrix = [[1, 0, 0, 0], [0, 1, 0, 0], [0, 0, 1, 0], [0, 0, 0, 1]];
+
+    for (var i = 0; i < 4; i++) {
+      matrix[i][3] = perspective[i];
+    }
+
+    for (var i = 0; i < 3; i++) {
+      for (var j = 0; j < 3; j++) {
+        matrix[3][i] += translate[j] * matrix[j][i];
+      }
+    }
+
+    var x = quat[0], y = quat[1], z = quat[2], w = quat[3];
+
+    var rotMatrix = [[1, 0, 0, 0], [0, 1, 0, 0], [0, 0, 1, 0], [0, 0, 0, 1]];
+
+    rotMatrix[0][0] = 1 - 2 * (y * y + z * z);
+    rotMatrix[0][1] = 2 * (x * y - z * w);
+    rotMatrix[0][2] = 2 * (x * z + y * w);
+    rotMatrix[1][0] = 2 * (x * y + z * w);
+    rotMatrix[1][1] = 1 - 2 * (x * x + z * z);
+    rotMatrix[1][2] = 2 * (y * z - x * w);
+    rotMatrix[2][0] = 2 * (x * z - y * w);
+    rotMatrix[2][1] = 2 * (y * z + x * w);
+    rotMatrix[2][2] = 1 - 2 * (x * x + y * y);
+
+    matrix = multiply(matrix, rotMatrix);
+
+    var temp = [[1, 0, 0, 0], [0, 1, 0, 0], [0, 0, 1, 0], [0, 0, 0, 1]];
+    if (skew[2]) {
+      temp[2][1] = skew[2];
+      matrix = multiply(matrix, temp);
+    }
+
+    if (skew[1]) {
+      temp[2][1] = 0;
+      temp[2][0] = skew[0];
+      matrix = multiply(matrix, temp);
+    }
+
+    if (skew[0]) {
+      temp[2][0] = 0;
+      temp[1][0] = skew[0];
+      matrix = multiply(matrix, temp);
+    }
+
+    for (var i = 0; i < 3; i++) {
+      for (var j = 0; j < 3; j++) {
+        matrix[i][j] *= scale[i];
+      }
+    }
+
+    if (is2D(matrix)) {
+      return {
+        t: 'matrix',
+        d: [matrix[0][0], matrix[0][1], matrix[1][0], matrix[1][1],
+            matrix[3][0], matrix[3][1]]
+      };
+    }
+    return {
+      t: 'matrix3d',
+      d: matrix[0].concat(matrix[1], matrix[2], matrix[3])
+    };
+  }
+  return composeMatrix;
+})();
+
+function interpolateDecomposedTransformsWithMatrices(fromM, toM, f) {
+  var product = dot(fromM.quaternion, toM.quaternion);
+  product = clamp(product, -1.0, 1.0);
+
+  var quat = [];
+  if (product === 1.0) {
+    quat = fromM.quaternion;
+  } else {
+    var theta = Math.acos(product);
+    var w = Math.sin(f * theta) * 1 / Math.sqrt(1 - product * product);
+
+    for (var i = 0; i < 4; i++) {
+      quat.push(fromM.quaternion[i] * (Math.cos(f * theta) - product * w) +
+                toM.quaternion[i] * w);
+    }
+  }
+
+  var translate = interp(fromM.translate, toM.translate, f);
+  var scale = interp(fromM.scale, toM.scale, f);
+  var skew = interp(fromM.skew, toM.skew, f);
+  var perspective = interp(fromM.perspective, toM.perspective, f);
+
+  return composeMatrix(translate, scale, skew, quat, perspective);
+}
+
+function interpTransformValue(from, to, f) {
+  var type = from.t ? from.t : to.t;
+  switch (type) {
+    case 'matrix':
+    case 'matrix3d':
+      ASSERT_ENABLED && assert(false,
+          'Must use matrix decomposition when interpolating raw matrices');
+    // Transforms with unitless parameters.
+    case 'rotate':
+    case 'rotateX':
+    case 'rotateY':
+    case 'rotateZ':
+    case 'rotate3d':
+    case 'scale':
+    case 'scaleX':
+    case 'scaleY':
+    case 'scaleZ':
+    case 'scale3d':
+    case 'skew':
+    case 'skewX':
+    case 'skewY':
+      return {t: type, d: interp(from.d, to.d, f, type)};
+    default:
+      // Transforms with lengthType parameters.
+      var result = [];
+      var maxVal;
+      if (from.d && to.d) {
+        maxVal = Math.max(from.d.length, to.d.length);
+      } else if (from.d) {
+        maxVal = from.d.length;
+      } else {
+        maxVal = to.d.length;
+      }
+      for (var j = 0; j < maxVal; j++) {
+        var fromVal = from.d ? from.d[j] : {};
+        var toVal = to.d ? to.d[j] : {};
+        result.push(lengthType.interpolate(fromVal, toVal, f));
+      }
+      return {t: type, d: result};
+  }
+}
+
+function isMatrix(item) {
+  return item.t[0] === 'm';
+}
+
+// The CSSWG decided to disallow scientific notation in CSS property strings
+// (see http://lists.w3.org/Archives/Public/www-style/2010Feb/0050.html).
+// We need this function to hakonitize all numbers before adding them to
+// property strings.
+// TODO: Apply this function to all property strings
+function n(num) {
+  return Number(num).toFixed(4);
+}
+
+var transformType = {
+  add: function(base, delta) { return base.concat(delta); },
+  interpolate: function(from, to, f) {
+    var out = [];
+    for (var i = 0; i < Math.min(from.length, to.length); i++) {
+      if (from[i].t !== to[i].t || isMatrix(from[i])) {
+        break;
+      }
+      out.push(interpTransformValue(from[i], to[i], f));
+    }
+
+    if (i < Math.min(from.length, to.length) ||
+        from.some(isMatrix) || to.some(isMatrix)) {
+      if (from.decompositionPair !== to) {
+        from.decompositionPair = to;
+        from.decomposition = decomposeMatrix(convertToMatrix(from.slice(i)));
+      }
+      if (to.decompositionPair !== from) {
+        to.decompositionPair = from;
+        to.decomposition = decomposeMatrix(convertToMatrix(to.slice(i)));
+      }
+      out.push(interpolateDecomposedTransformsWithMatrices(
+          from.decomposition, to.decomposition, f));
+      return out;
+    }
+
+    for (; i < from.length; i++) {
+      out.push(interpTransformValue(from[i], {t: null, d: null}, f));
+    }
+    for (; i < to.length; i++) {
+      out.push(interpTransformValue({t: null, d: null}, to[i], f));
+    }
+    return out;
+  },
+  toCssValue: function(value, svgMode) {
+    // TODO: fix this :)
+    var out = '';
+    for (var i = 0; i < value.length; i++) {
+      ASSERT_ENABLED && assert(
+          value[i].t, 'transform type should be resolved by now');
+      switch (value[i].t) {
+        case 'rotate':
+        case 'rotateX':
+        case 'rotateY':
+        case 'rotateZ':
+        case 'skewX':
+        case 'skewY':
+          var unit = svgMode ? '' : 'deg';
+          out += value[i].t + '(' + value[i].d + unit + ') ';
+          break;
+        case 'skew':
+          var unit = svgMode ? '' : 'deg';
+          out += value[i].t + '(' + value[i].d[0] + unit;
+          if (value[i].d[1] === 0) {
+            out += ') ';
+          } else {
+            out += ', ' + value[i].d[1] + unit + ') ';
+          }
+          break;
+        case 'rotate3d':
+          var unit = svgMode ? '' : 'deg';
+          out += value[i].t + '(' + value[i].d[0] + ', ' + value[i].d[1] +
+              ', ' + value[i].d[2] + ', ' + value[i].d[3] + unit + ') ';
+          break;
+        case 'translateX':
+        case 'translateY':
+        case 'translateZ':
+        case 'perspective':
+          out += value[i].t + '(' + lengthType.toCssValue(value[i].d[0]) +
+              ') ';
+          break;
+        case 'translate':
+          if (svgMode) {
+            if (value[i].d[1] === undefined) {
+              out += value[i].t + '(' + value[i].d[0].px + ') ';
+            } else {
+              out += (
+                  value[i].t + '(' + value[i].d[0].px + ', ' +
+                  value[i].d[1].px + ') ');
+            }
+            break;
+          }
+          if (value[i].d[1] === undefined) {
+            out += value[i].t + '(' + lengthType.toCssValue(value[i].d[0]) +
+                ') ';
+          } else {
+            out += value[i].t + '(' + lengthType.toCssValue(value[i].d[0]) +
+                ', ' + lengthType.toCssValue(value[i].d[1]) + ') ';
+          }
+          break;
+        case 'translate3d':
+          var values = value[i].d.map(lengthType.toCssValue);
+          out += value[i].t + '(' + values[0] + ', ' + values[1] +
+              ', ' + values[2] + ') ';
+          break;
+        case 'scale':
+          if (value[i].d[0] === value[i].d[1]) {
+            out += value[i].t + '(' + value[i].d[0] + ') ';
+          } else {
+            out += value[i].t + '(' + value[i].d[0] + ', ' + value[i].d[1] +
+                ') ';
+          }
+          break;
+        case 'scaleX':
+        case 'scaleY':
+        case 'scaleZ':
+          out += value[i].t + '(' + value[i].d[0] + ') ';
+          break;
+        case 'scale3d':
+          out += value[i].t + '(' + value[i].d[0] + ', ' +
+              value[i].d[1] + ', ' + value[i].d[2] + ') ';
+          break;
+        case 'matrix':
+        case 'matrix3d':
+          out += value[i].t + '(' + value[i].d.map(n).join(', ') + ') ';
+          break;
+      }
+    }
+    return out.substring(0, out.length - 1);
+  },
+  fromCssValue: function(value) {
+    // TODO: fix this :)
+    if (value === undefined) {
+      return undefined;
+    }
+    var result = [];
+    while (value.length > 0) {
+      var r;
+      for (var i = 0; i < transformREs.length; i++) {
+        var reSpec = transformREs[i];
+        r = reSpec[0].exec(value);
+        if (r) {
+          result.push({t: reSpec[2], d: reSpec[1](r)});
+          value = value.substring(r[0].length);
+          break;
+        }
+      }
+      if (!isDefinedAndNotNull(r)) {
+        return result;
+      }
+    }
+    return result;
+  }
+};
+
+var pathType = {
+  // Properties ...
+  // - path: The target path element
+  // - points: The absolute points to set on the path
+  // - cachedCumulativeLengths: The lengths at the end of each segment
+  add: function() { throw 'Addition not supported for path attribute' },
+  cumulativeLengths: function(value) {
+    if (isDefinedAndNotNull(value.cachedCumulativeLengths))
+      return value.cachedCumulativeLengths;
+    var path = value.path.cloneNode(true);
+    var cumulativeLengths = [];
+    while (path.pathSegList.numberOfItems > 0) {
+      // TODO: It would be good to skip moves here and when generating points.
+      cumulativeLengths.unshift(path.getTotalLength());
+      path.pathSegList.removeItem(path.pathSegList.numberOfItems - 1);
+    }
+    value.cachedCumulativeLengths = cumulativeLengths;
+    return value.cachedCumulativeLengths;
+  },
+  appendFractions: function(fractions, cumulativeLengths) {
+    ASSERT_ENABLED && assert(cumulativeLengths[0] === 0);
+    var totalLength = cumulativeLengths[cumulativeLengths.length - 1];
+    for (var i = 1; i < cumulativeLengths.length - 1; ++i)
+      fractions.push(cumulativeLengths[i] / totalLength);
+  },
+  interpolate: function(from, to, f) {
+    // FIXME: Handle non-linear path segments.
+    // Get the fractions at which we need to sample.
+    var sampleFractions = [0, 1];
+    pathType.appendFractions(sampleFractions, pathType.cumulativeLengths(from));
+    pathType.appendFractions(sampleFractions, pathType.cumulativeLengths(to));
+    sampleFractions.sort();
+    ASSERT_ENABLED && assert(sampleFractions[0] === 0);
+    ASSERT_ENABLED && assert(sampleFractions[sampleFractions.length - 1] === 1);
+
+    // FIXME: Cache the 'from' and 'to' points.
+    var fromTotalLength = from.path.getTotalLength();
+    var toTotalLength = to.path.getTotalLength();
+    var points = [];
+    for (var i = 0; i < sampleFractions.length; ++i) {
+      var fromPoint = from.path.getPointAtLength(
+          fromTotalLength * sampleFractions[i]);
+      var toPoint = to.path.getPointAtLength(
+          toTotalLength * sampleFractions[i]);
+      points.push({
+        x: interp(fromPoint.x, toPoint.x, f),
+        y: interp(fromPoint.y, toPoint.y, f)
+      });
+    }
+    return {points: points};
+  },
+  pointToString: function(point) {
+    return point.x + ',' + point.y;
+  },
+  toCssValue: function(value, svgMode) {
+    // FIXME: It would be good to use PathSegList API on the target directly,
+    // rather than generating this string, but that would require a hack to
+    // setValue().
+    ASSERT_ENABLED && assert(svgMode,
+        'Path type should only be used with SVG \'d\' attribute');
+    if (value.path)
+      return value.path.getAttribute('d');
+    var ret = 'M' + pathType.pointToString(value.points[0]);
+    for (var i = 1; i < value.points.length; ++i)
+      ret += 'L' + pathType.pointToString(value.points[i]);
+    return ret;
+  },
+  fromCssValue: function(value) {
+    var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    if (value)
+      path.setAttribute('d', value);
+    return {path: path};
+  }
+};
+
+var propertyTypes = {
+  backgroundColor: colorType,
+  backgroundPosition: positionListType,
+  borderBottomColor: colorType,
+  borderBottomLeftRadius: percentLengthType,
+  borderBottomRightRadius: percentLengthType,
+  borderBottomWidth: lengthType,
+  borderLeftColor: colorType,
+  borderLeftWidth: lengthType,
+  borderRightColor: colorType,
+  borderRightWidth: lengthType,
+  borderSpacing: lengthType,
+  borderTopColor: colorType,
+  borderTopLeftRadius: percentLengthType,
+  borderTopRightRadius: percentLengthType,
+  borderTopWidth: lengthType,
+  bottom: percentLengthAutoType,
+  boxShadow: shadowType,
+  clip: typeWithKeywords(['auto'], rectangleType),
+  color: colorType,
+  cx: lengthType,
+  cy: lengthType,
+  d: pathType,
+  dx: lengthType,
+  dy: lengthType,
+  fill: colorType,
+  floodColor: colorType,
+
+  // TODO: Handle these keywords properly.
+  fontSize: typeWithKeywords(['smaller', 'larger'], percentLengthType),
+  fontWeight: typeWithKeywords(['lighter', 'bolder'], fontWeightType),
+
+  height: percentLengthAutoType,
+  left: percentLengthAutoType,
+  letterSpacing: typeWithKeywords(['normal'], lengthType),
+  lightingColor: colorType,
+  lineHeight: percentLengthType, // TODO: Should support numberType as well.
+  marginBottom: lengthAutoType,
+  marginLeft: lengthAutoType,
+  marginRight: lengthAutoType,
+  marginTop: lengthAutoType,
+  maxHeight: typeWithKeywords(
+      ['none', 'max-content', 'min-content', 'fill-available', 'fit-content'],
+      percentLengthType),
+  maxWidth: typeWithKeywords(
+      ['none', 'max-content', 'min-content', 'fill-available', 'fit-content'],
+      percentLengthType),
+  minHeight: typeWithKeywords(
+      ['max-content', 'min-content', 'fill-available', 'fit-content'],
+      percentLengthType),
+  minWidth: typeWithKeywords(
+      ['max-content', 'min-content', 'fill-available', 'fit-content'],
+      percentLengthType),
+  opacity: numberType,
+  outlineColor: typeWithKeywords(['invert'], colorType),
+  outlineOffset: lengthType,
+  outlineWidth: lengthType,
+  paddingBottom: lengthType,
+  paddingLeft: lengthType,
+  paddingRight: lengthType,
+  paddingTop: lengthType,
+  perspective: typeWithKeywords(['none'], lengthType),
+  perspectiveOrigin: originType,
+  r: lengthType,
+  right: percentLengthAutoType,
+  stopColor: colorType,
+  stroke: colorType,
+  textIndent: typeWithKeywords(['each-line', 'hanging'], percentLengthType),
+  textShadow: shadowType,
+  top: percentLengthAutoType,
+  transform: transformType,
+  transformOrigin: originType,
+  verticalAlign: typeWithKeywords([
+    'baseline',
+    'sub',
+    'super',
+    'text-top',
+    'text-bottom',
+    'middle',
+    'top',
+    'bottom'
+  ], percentLengthType),
+  visibility: visibilityType,
+  width: typeWithKeywords([
+    'border-box',
+    'content-box',
+    'auto',
+    'max-content',
+    'min-content',
+    'available',
+    'fit-content'
+  ], percentLengthType),
+  wordSpacing: typeWithKeywords(['normal'], percentLengthType),
+  x: lengthType,
+  y: lengthType,
+  zIndex: typeWithKeywords(['auto'], integerType)
+};
+
+var svgProperties = {
+  'cx': 1,
+  'cy': 1,
+  'd': 1,
+  'dx': 1,
+  'dy': 1,
+  'fill': 1,
+  'floodColor': 1,
+  'height': 1,
+  'lightingColor': 1,
+  'r': 1,
+  'stopColor': 1,
+  'stroke': 1,
+  'width': 1,
+  'x': 1,
+  'y': 1
+};
+
+var borderWidthAliases = {
+  initial: '3px',
+  thin: '1px',
+  medium: '3px',
+  thick: '5px'
+};
+
+var propertyValueAliases = {
+  backgroundColor: { initial: 'transparent' },
+  backgroundPosition: { initial: '0% 0%' },
+  borderBottomColor: { initial: 'currentColor' },
+  borderBottomLeftRadius: { initial: '0px' },
+  borderBottomRightRadius: { initial: '0px' },
+  borderBottomWidth: borderWidthAliases,
+  borderLeftColor: { initial: 'currentColor' },
+  borderLeftWidth: borderWidthAliases,
+  borderRightColor: { initial: 'currentColor' },
+  borderRightWidth: borderWidthAliases,
+  // Spec says this should be 0 but in practise it is 2px.
+  borderSpacing: { initial: '2px' },
+  borderTopColor: { initial: 'currentColor' },
+  borderTopLeftRadius: { initial: '0px' },
+  borderTopRightRadius: { initial: '0px' },
+  borderTopWidth: borderWidthAliases,
+  bottom: { initial: 'auto' },
+  clip: { initial: 'rect(0px, 0px, 0px, 0px)' },
+  color: { initial: 'black' }, // Depends on user agent.
+  fontSize: {
+    initial: '100%',
+    'xx-small': '60%',
+    'x-small': '75%',
+    'small': '89%',
+    'medium': '100%',
+    'large': '120%',
+    'x-large': '150%',
+    'xx-large': '200%'
+  },
+  fontWeight: {
+    initial: '400',
+    normal: '400',
+    bold: '700'
+  },
+  height: { initial: 'auto' },
+  left: { initial: 'auto' },
+  letterSpacing: { initial: 'normal' },
+  lineHeight: {
+    initial: '120%',
+    normal: '120%'
+  },
+  marginBottom: { initial: '0px' },
+  marginLeft: { initial: '0px' },
+  marginRight: { initial: '0px' },
+  marginTop: { initial: '0px' },
+  maxHeight: { initial: 'none' },
+  maxWidth: { initial: 'none' },
+  minHeight: { initial: '0px' },
+  minWidth: { initial: '0px' },
+  opacity: { initial: '1.0' },
+  outlineColor: { initial: 'invert' },
+  outlineOffset: { initial: '0px' },
+  outlineWidth: borderWidthAliases,
+  paddingBottom: { initial: '0px' },
+  paddingLeft: { initial: '0px' },
+  paddingRight: { initial: '0px' },
+  paddingTop: { initial: '0px' },
+  right: { initial: 'auto' },
+  textIndent: { initial: '0px' },
+  textShadow: {
+    initial: '0px 0px 0px transparent',
+    none: '0px 0px 0px transparent'
+  },
+  top: { initial: 'auto' },
+  transform: {
+    initial: '',
+    none: ''
+  },
+  verticalAlign: { initial: '0px' },
+  visibility: { initial: 'visible' },
+  width: { initial: 'auto' },
+  wordSpacing: { initial: 'normal' },
+  zIndex: { initial: 'auto' }
+};
+
+var propertyIsSVGAttrib = function(property, target) {
+  return target.namespaceURI === 'http://www.w3.org/2000/svg' &&
+      property in svgProperties;
+};
+
+var getType = function(property) {
+  return propertyTypes[property] || nonNumericType;
+};
+
+var add = function(property, base, delta) {
+  if (delta === rawNeutralValue) {
+    return base;
+  }
+  if (base === 'inherit' || delta === 'inherit') {
+    return nonNumericType.add(base, delta);
+  }
+  return getType(property).add(base, delta);
+};
+
+
+/**
+ * Interpolate the given property name (f*100)% of the way from 'from' to 'to'.
+ * 'from' and 'to' are both raw values already converted from CSS value
+ * strings. Requires the target element to be able to determine whether the
+ * given property is an SVG attribute or not, as this impacts the conversion of
+ * the interpolated value back into a CSS value string for transform
+ * translations.
+ *
+ * e.g. interpolate('transform', elem, 'rotate(40deg)', 'rotate(50deg)', 0.3);
+ *   will return 'rotate(43deg)'.
+ */
+var interpolate = function(property, from, to, f) {
+  ASSERT_ENABLED && assert(
+      isDefinedAndNotNull(from) && isDefinedAndNotNull(to),
+      'Both to and from values should be specified for interpolation');
+  if (from === 'inherit' || to === 'inherit') {
+    return nonNumericType.interpolate(from, to, f);
+  }
+  if (f === 0) {
+    return from;
+  }
+  if (f === 1) {
+    return to;
+  }
+  return getType(property).interpolate(from, to, f);
+};
+
+
+/**
+ * Convert the provided interpolable value for the provided property to a CSS
+ * value string. Note that SVG transforms do not require units for translate
+ * or rotate values while CSS properties require 'px' or 'deg' units.
+ */
+var toCssValue = function(property, value, svgMode) {
+  if (value === 'inherit') {
+    return value;
+  }
+  return getType(property).toCssValue(value, svgMode);
+};
+
+var fromCssValue = function(property, value) {
+  if (value === cssNeutralValue) {
+    return rawNeutralValue;
+  }
+  if (value === 'inherit') {
+    return value;
+  }
+  if (property in propertyValueAliases &&
+      value in propertyValueAliases[property]) {
+    value = propertyValueAliases[property][value];
+  }
+  var result = getType(property).fromCssValue(value);
+  // Currently we'll hit this assert if input to the API is bad. To avoid this,
+  // we should eliminate invalid values when normalizing the list of keyframes.
+  // See the TODO in isSupportedPropertyValue().
+  ASSERT_ENABLED && assert(isDefinedAndNotNull(result),
+      'Invalid property value "' + value + '" for property "' + property + '"');
+  return result;
+};
+
+// Sentinel values
+var cssNeutralValue = {};
+var rawNeutralValue = {};
+
+
+
+/** @constructor */
+var CompositableValue = function() {
+};
+
+CompositableValue.prototype = {
+  compositeOnto: abstractMethod,
+  // This is purely an optimization.
+  dependsOnUnderlyingValue: function() {
+    return true;
+  }
+};
+
+
+
+/** @constructor */
+var AddReplaceCompositableValue = function(value, composite) {
+  this.value = value;
+  this.composite = composite;
+  ASSERT_ENABLED && assert(
+      !(this.value === cssNeutralValue && this.composite === 'replace'),
+      'Should never replace-composite the neutral value');
+};
+
+AddReplaceCompositableValue.prototype = createObject(
+    CompositableValue.prototype, {
+      compositeOnto: function(property, underlyingValue) {
+        switch (this.composite) {
+          case 'replace':
+            return this.value;
+          case 'add':
+            return add(property, underlyingValue, this.value);
+          default:
+            ASSERT_ENABLED && assert(
+                false, 'Invalid composite operation ' + this.composite);
+        }
+      },
+      dependsOnUnderlyingValue: function() {
+        return this.composite === 'add';
+      }
+    });
+
+
+
+/** @constructor */
+var BlendedCompositableValue = function(startValue, endValue, fraction) {
+  this.startValue = startValue;
+  this.endValue = endValue;
+  this.fraction = fraction;
+};
+
+BlendedCompositableValue.prototype = createObject(
+    CompositableValue.prototype, {
+      compositeOnto: function(property, underlyingValue) {
+        return interpolate(property,
+            this.startValue.compositeOnto(property, underlyingValue),
+            this.endValue.compositeOnto(property, underlyingValue),
+            this.fraction);
+      },
+      dependsOnUnderlyingValue: function() {
+        // Travis crashes here randomly in Chrome beta and unstable,
+        // this try catch is to help debug the problem.
+        try {
+          return this.startValue.dependsOnUnderlyingValue() ||
+              this.endValue.dependsOnUnderlyingValue();
+        }
+        catch (error) {
+          throw new Error(
+              error + '\n JSON.stringify(this) = ' + JSON.stringify(this));
+        }
+      }
+    });
+
+/** @constructor */
+var CompositedPropertyMap = function(target) {
+  this.properties = {};
+  this.baseValues = {};
+  this.target = target;
+};
+
+CompositedPropertyMap.prototype = {
+  addValue: function(property, animValue) {
+    if (!(property in this.properties)) {
+      this.properties[property] = [];
+    }
+    if (!(animValue instanceof CompositableValue)) {
+      throw new TypeError('expected CompositableValue');
+    }
+    this.properties[property].push(animValue);
+  },
+  stackDependsOnUnderlyingValue: function(stack) {
+    for (var i = 0; i < stack.length; i++) {
+      if (!stack[i].dependsOnUnderlyingValue()) {
+        return false;
+      }
+    }
+    return true;
+  },
+  clear: function() {
+    for (var property in this.properties) {
+      if (this.stackDependsOnUnderlyingValue(this.properties[property])) {
+        clearValue(this.target, property);
+      }
+    }
+  },
+  captureBaseValues: function() {
+    for (var property in this.properties) {
+      var stack = this.properties[property];
+      if (stack.length > 0 && this.stackDependsOnUnderlyingValue(stack)) {
+        var baseValue = fromCssValue(property, getValue(this.target, property));
+        // TODO: Decide what to do with elements not in the DOM.
+        ASSERT_ENABLED && assert(
+            isDefinedAndNotNull(baseValue) && baseValue !== '',
+            'Base value should always be set. ' +
+            'Is the target element in the DOM?');
+        this.baseValues[property] = baseValue;
+      } else {
+        this.baseValues[property] = undefined;
+      }
+    }
+  },
+  applyAnimatedValues: function() {
+    for (var property in this.properties) {
+      var valuesToComposite = this.properties[property];
+      if (valuesToComposite.length === 0) {
+        continue;
+      }
+      var baseValue = this.baseValues[property];
+      var i = valuesToComposite.length - 1;
+      while (i > 0 && valuesToComposite[i].dependsOnUnderlyingValue()) {
+        i--;
+      }
+      for (; i < valuesToComposite.length; i++) {
+        baseValue = valuesToComposite[i].compositeOnto(property, baseValue);
+      }
+      ASSERT_ENABLED && assert(
+          isDefinedAndNotNull(baseValue) && baseValue !== '',
+          'Value should always be set after compositing');
+      var isSvgMode = propertyIsSVGAttrib(property, this.target);
+      setValue(this.target, property, toCssValue(property, baseValue,
+          isSvgMode));
+      this.properties[property] = [];
+    }
+  }
+};
+
+
+var cssStyleDeclarationAttribute = {
+  cssText: true,
+  length: true,
+  parentRule: true,
+  'var': true
+};
+
+var cssStyleDeclarationMethodModifiesStyle = {
+  getPropertyValue: false,
+  getPropertyCSSValue: false,
+  removeProperty: true,
+  getPropertyPriority: false,
+  setProperty: true,
+  item: false
+};
+
+var copyInlineStyle = function(sourceStyle, destinationStyle) {
+  for (var i = 0; i < sourceStyle.length; i++) {
+    var property = sourceStyle[i];
+    destinationStyle[property] = sourceStyle[property];
+  }
+};
+
+var retickThenGetComputedStyle = function() {
+  repeatLastTick();
+  ensureOriginalGetComputedStyle();
+  return window.getComputedStyle.apply(this, arguments);
+};
+
+// This redundant flag is to support Safari which has trouble determining
+// function object equality during an animation.
+var isGetComputedStylePatched = false;
+var originalGetComputedStyle = window.getComputedStyle;
+
+var ensureRetickBeforeGetComputedStyle = function() {
+  if (!isGetComputedStylePatched) {
+    Object.defineProperty(window, 'getComputedStyle', configureDescriptor({
+      value: retickThenGetComputedStyle
+    }));
+    isGetComputedStylePatched = true;
+  }
+};
+
+var ensureOriginalGetComputedStyle = function() {
+  if (isGetComputedStylePatched) {
+    Object.defineProperty(window, 'getComputedStyle', configureDescriptor({
+      value: originalGetComputedStyle
+    }));
+    isGetComputedStylePatched = false;
+  }
+};
+
+// Changing the inline style of an element under animation may require the
+// animation to be recomputed ontop of the new inline style if
+// getComputedStyle() is called inbetween setting the style and the next
+// animation frame.
+// We modify getComputedStyle() to re-evaluate the animations only if it is
+// called instead of re-evaluating them here potentially unnecessarily.
+var animatedInlineStyleChanged = function() {
+  maybeRestartAnimation();
+  ensureRetickBeforeGetComputedStyle();
+};
+
+
+
+/** @constructor */
+var AnimatedCSSStyleDeclaration = function(element) {
+  ASSERT_ENABLED && assert(
+      !(element.style instanceof AnimatedCSSStyleDeclaration),
+      'Element must not already have an animated style attached.');
+
+  // Stores the inline style of the element on its behalf while the
+  // polyfill uses the element's inline style to simulate web animations.
+  // This is needed to fake regular inline style CSSOM access on the element.
+  this._surrogateElement = createDummyElement();
+  this._style = element.style;
+  this._length = 0;
+  this._isAnimatedProperty = {};
+
+  // Populate the surrogate element's inline style.
+  copyInlineStyle(this._style, this._surrogateElement.style);
+  this._updateIndices();
+};
+
+AnimatedCSSStyleDeclaration.prototype = {
+  get cssText() {
+    return this._surrogateElement.style.cssText;
+  },
+  set cssText(text) {
+    var isAffectedProperty = {};
+    for (var i = 0; i < this._surrogateElement.style.length; i++) {
+      isAffectedProperty[this._surrogateElement.style[i]] = true;
+    }
+    this._surrogateElement.style.cssText = text;
+    this._updateIndices();
+    for (var i = 0; i < this._surrogateElement.style.length; i++) {
+      isAffectedProperty[this._surrogateElement.style[i]] = true;
+    }
+    for (var property in isAffectedProperty) {
+      if (!this._isAnimatedProperty[property]) {
+        this._style.setProperty(property,
+            this._surrogateElement.style.getPropertyValue(property));
+      }
+    }
+    animatedInlineStyleChanged();
+  },
+  get length() {
+    return this._surrogateElement.style.length;
+  },
+  get parentRule() {
+    return this._style.parentRule;
+  },
+  get 'var'() {
+    return this._style.var;
+  },
+  _updateIndices: function() {
+    while (this._length < this._surrogateElement.style.length) {
+      Object.defineProperty(this, this._length, {
+        configurable: true,
+        enumerable: false,
+        get: (function(index) {
+          return function() {
+            return this._surrogateElement.style[index];
+          };
+        })(this._length)
+      });
+      this._length++;
+    }
+    while (this._length > this._surrogateElement.style.length) {
+      this._length--;
+      Object.defineProperty(this, this._length, {
+        configurable: true,
+        enumerable: false,
+        value: undefined
+      });
+    }
+  },
+  _clearAnimatedProperty: function(property) {
+    this._style[property] = this._surrogateElement.style[property];
+    this._isAnimatedProperty[property] = false;
+  },
+  _setAnimatedProperty: function(property, value) {
+    this._style[property] = value;
+    this._isAnimatedProperty[property] = true;
+  }
+};
+
+for (var method in cssStyleDeclarationMethodModifiesStyle) {
+  AnimatedCSSStyleDeclaration.prototype[method] =
+      (function(method, modifiesStyle) {
+    return function() {
+      var result = this._surrogateElement.style[method].apply(
+          this._surrogateElement.style, arguments);
+      if (modifiesStyle) {
+        if (!this._isAnimatedProperty[arguments[0]]) {
+          this._style[method].apply(this._style, arguments);
+        }
+        this._updateIndices();
+        animatedInlineStyleChanged();
+      }
+      return result;
+    }
+  })(method, cssStyleDeclarationMethodModifiesStyle[method]);
+}
+
+for (var property in document.documentElement.style) {
+  if (cssStyleDeclarationAttribute[property] ||
+      property in cssStyleDeclarationMethodModifiesStyle) {
+    continue;
+  }
+  (function(property) {
+    Object.defineProperty(AnimatedCSSStyleDeclaration.prototype, property,
+        configureDescriptor({
+          get: function() {
+            return this._surrogateElement.style[property];
+          },
+          set: function(value) {
+            this._surrogateElement.style[property] = value;
+            this._updateIndices();
+            if (!this._isAnimatedProperty[property]) {
+              this._style[property] = value;
+            }
+            animatedInlineStyleChanged();
+          }
+        }));
+  })(property);
+}
+
+// This function is a fallback for when we can't replace an element's style with
+// AnimatatedCSSStyleDeclaration and must patch the existing style to behave
+// in a similar way.
+// Only the methods listed in cssStyleDeclarationMethodModifiesStyle will
+// be patched to behave in the same manner as a native implementation,
+// getter properties like style.left or style[0] will be tainted by the
+// polyfill's animation engine.
+var patchInlineStyleForAnimation = function(style) {
+  var surrogateElement = document.createElement('div');
+  copyInlineStyle(style, surrogateElement.style);
+  var isAnimatedProperty = {};
+  for (var method in cssStyleDeclarationMethodModifiesStyle) {
+    if (!(method in style)) {
+      continue;
+    }
+    Object.defineProperty(style, method, configureDescriptor({
+      value: (function(method, originalMethod, modifiesStyle) {
+        return function() {
+          var result = surrogateElement.style[method].apply(
+              surrogateElement.style, arguments);
+          if (modifiesStyle) {
+            if (!isAnimatedProperty[arguments[0]]) {
+              originalMethod.apply(style, arguments);
+            }
+            animatedInlineStyleChanged();
+          }
+          return result;
+        }
+      })(method, style[method], cssStyleDeclarationMethodModifiesStyle[method])
+    }));
+  }
+
+  style._clearAnimatedProperty = function(property) {
+    this[property] = surrogateElement.style[property];
+    isAnimatedProperty[property] = false;
+  };
+
+  style._setAnimatedProperty = function(property, value) {
+    this[property] = value;
+    isAnimatedProperty[property] = true;
+  };
+};
+
+
+
+/** @constructor */
+var Compositor = function() {
+  this.targets = [];
+};
+
+Compositor.prototype = {
+  setAnimatedValue: function(target, property, animValue) {
+    if (target !== null) {
+      if (target._animProperties === undefined) {
+        target._animProperties = new CompositedPropertyMap(target);
+        this.targets.push(target);
+      }
+      target._animProperties.addValue(property, animValue);
+    }
+  },
+  applyAnimatedValues: function() {
+    for (var i = 0; i < this.targets.length; i++) {
+      this.targets[i]._animProperties.clear();
+    }
+    for (var i = 0; i < this.targets.length; i++) {
+      this.targets[i]._animProperties.captureBaseValues();
+    }
+    for (var i = 0; i < this.targets.length; i++) {
+      this.targets[i]._animProperties.applyAnimatedValues();
+    }
+  }
+};
+
+var ensureTargetInitialised = function(property, target) {
+  if (propertyIsSVGAttrib(property, target)) {
+    ensureTargetSVGInitialised(property, target);
+  } else {
+    ensureTargetCSSInitialised(target);
+  }
+};
+
+var ensureTargetSVGInitialised = function(property, target) {
+  if (!isDefinedAndNotNull(target._actuals)) {
+    target._actuals = {};
+    target._bases = {};
+    target.actuals = {};
+    target._getAttribute = target.getAttribute;
+    target._setAttribute = target.setAttribute;
+    target.getAttribute = function(name) {
+      if (isDefinedAndNotNull(target._bases[name])) {
+        return target._bases[name];
+      }
+      return target._getAttribute(name);
+    };
+    target.setAttribute = function(name, value) {
+      if (isDefinedAndNotNull(target._actuals[name])) {
+        target._bases[name] = value;
+      } else {
+        target._setAttribute(name, value);
+      }
+    };
+  }
+  if (!isDefinedAndNotNull(target._actuals[property])) {
+    var baseVal = target.getAttribute(property);
+    target._actuals[property] = 0;
+    target._bases[property] = baseVal;
+
+    Object.defineProperty(target.actuals, property, configureDescriptor({
+      set: function(value) {
+        if (value === null) {
+          target._actuals[property] = target._bases[property];
+          target._setAttribute(property, target._bases[property]);
+        } else {
+          target._actuals[property] = value;
+          target._setAttribute(property, value);
+        }
+      },
+      get: function() {
+        return target._actuals[property];
+      }
+    }));
+  }
+};
+
+var ensureTargetCSSInitialised = function(target) {
+  if (target.style._webAnimationsStyleInitialised) {
+    return;
+  }
+  try {
+    var animatedStyle = new AnimatedCSSStyleDeclaration(target);
+    Object.defineProperty(target, 'style', configureDescriptor({
+      get: function() { return animatedStyle; }
+    }));
+  } catch (error) {
+    patchInlineStyleForAnimation(target.style);
+  }
+  target.style._webAnimationsStyleInitialised = true;
+};
+
+var setValue = function(target, property, value) {
+  ensureTargetInitialised(property, target);
+  property = prefixProperty(property);
+  if (propertyIsSVGAttrib(property, target)) {
+    target.actuals[property] = value;
+  } else {
+    target.style._setAnimatedProperty(property, value);
+  }
+};
+
+var clearValue = function(target, property) {
+  ensureTargetInitialised(property, target);
+  property = prefixProperty(property);
+  if (propertyIsSVGAttrib(property, target)) {
+    target.actuals[property] = null;
+  } else {
+    target.style._clearAnimatedProperty(property);
+  }
+};
+
+var getValue = function(target, property) {
+  ensureTargetInitialised(property, target);
+  property = prefixProperty(property);
+  if (propertyIsSVGAttrib(property, target)) {
+    return target.actuals[property];
+  } else {
+    return getComputedStyle(target)[property];
+  }
+};
+
+var rafScheduled = false;
+
+var compositor = new Compositor();
+
+var usePerformanceTiming =
+    typeof window.performance === 'object' &&
+    typeof window.performance.timing === 'object' &&
+    typeof window.performance.now === 'function';
+
+// Don't use a local named requestAnimationFrame, to avoid potential problems
+// with hoisting.
+var nativeRaf = window.requestAnimationFrame ||
+    window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame;
+var raf;
+if (nativeRaf) {
+  raf = function(callback) {
+    nativeRaf(function() {
+      callback(clockMillis());
+    });
+  };
+} else {
+  raf = function(callback) {
+    setTimeout(function() {
+      callback(clockMillis());
+    }, 1000 / 60);
+  };
+}
+
+var clockMillis = function() {
+  return usePerformanceTiming ? window.performance.now() : Date.now();
+};
+// Set up the zero times for document time. Document time is relative to the
+// document load event.
+var documentTimeZeroAsRafTime;
+var documentTimeZeroAsClockTime;
+var load;
+if (usePerformanceTiming) {
+  load = function() {
+    // RAF time is relative to the navigationStart event.
+    documentTimeZeroAsRafTime =
+        window.performance.timing.loadEventStart -
+        window.performance.timing.navigationStart;
+    // performance.now() uses the same origin as RAF time.
+    documentTimeZeroAsClockTime = documentTimeZeroAsRafTime;
+  };
+} else {
+  // The best approximation we have for the relevant clock and RAF times is to
+  // listen to the load event.
+  load = function() {
+    raf(function(rafTime) {
+      documentTimeZeroAsRafTime = rafTime;
+    });
+    documentTimeZeroAsClockTime = Date.now();
+  };
+}
+// Start timing when load event fires or if this script is processed when
+// document loading is already complete.
+if (document.readyState === 'complete') {
+  // When performance timing is unavailable and this script is loaded
+  // dynamically, document zero time is incorrect.
+  // Warn the user in this case.
+  if (!usePerformanceTiming) {
+    console.warn(
+        'Web animations can\'t discover document zero time when ' +
+        'asynchronously loaded in the absence of performance timing.');
+  }
+  load();
+} else {
+  addEventListener('load', function() {
+    load();
+    if (usePerformanceTiming) {
+      // We use setTimeout() to clear cachedClockTimeMillis at the end of a
+      // frame, but this will not run until after other load handlers. We need
+      // those handlers to pick up the new value of clockMillis(), so we must
+      // clear the cached value.
+      cachedClockTimeMillis = undefined;
+    }
+  });
+}
+
+// A cached document time for use during the current callstack.
+var cachedClockTimeMillis;
+// Calculates one time relative to another, returning null if the zero time is
+// undefined.
+var relativeTime = function(time, zeroTime) {
+  return isDefined(zeroTime) ? time - zeroTime : null;
+};
+
+var lastClockTimeMillis;
+
+var cachedClockTime = function() {
+  // Cache a document time for the remainder of this callstack.
+  if (!isDefined(cachedClockTimeMillis)) {
+    cachedClockTimeMillis = clockMillis();
+    lastClockTimeMillis = cachedClockTimeMillis;
+    setTimeout(function() { cachedClockTimeMillis = undefined; }, 0);
+  }
+  return cachedClockTimeMillis;
+};
+
+
+// These functions should be called in every stack that could possibly modify
+// the effect results that have already been calculated for the current tick.
+var modifyCurrentAnimationStateDepth = 0;
+var enterModifyCurrentAnimationState = function() {
+  modifyCurrentAnimationStateDepth++;
+};
+var exitModifyCurrentAnimationState = function(updateCallback) {
+  modifyCurrentAnimationStateDepth--;
+  // updateCallback is set to null when we know we can't possibly affect the
+  // current state (eg. a TimedItem which is not attached to a player). We track
+  // the depth of recursive calls trigger just one repeat per entry. Only the
+  // updateCallback from the outermost call is considered, this allows certain
+  // locatations (eg. constructors) to override nested calls that would
+  // otherwise set updateCallback unconditionally.
+  if (modifyCurrentAnimationStateDepth === 0 && updateCallback) {
+    updateCallback();
+  }
+};
+
+var repeatLastTick = function() {
+  if (isDefined(lastTickTime)) {
+    ticker(lastTickTime, true);
+  }
+};
+
+var playerSortFunction = function(a, b) {
+  var result = a.startTime - b.startTime;
+  return result !== 0 ? result : a._sequenceNumber - b._sequenceNumber;
+};
+
+var lastTickTime;
+var ticker = function(rafTime, isRepeat) {
+  // Don't tick till the page is loaded....
+  if (!isDefined(documentTimeZeroAsRafTime)) {
+    raf(ticker);
+    return;
+  }
+
+  if (!isRepeat) {
+    if (rafTime < lastClockTimeMillis) {
+      rafTime = lastClockTimeMillis;
+    }
+    lastTickTime = rafTime;
+    cachedClockTimeMillis = rafTime;
+  }
+
+  // Clear any modifications to getComputedStyle.
+  ensureOriginalGetComputedStyle();
+
+  // Get animations for this sample. We order by AnimationPlayer then by DFS
+  // order within each AnimationPlayer's tree.
+  if (!playersAreSorted) {
+    PLAYERS.sort(playerSortFunction);
+    playersAreSorted = true;
+  }
+  var finished = true;
+  var paused = true;
+  var animations = [];
+  var finishedPlayers = [];
+  PLAYERS.forEach(function(player) {
+    player._update();
+    finished = finished && !player._hasFutureAnimation();
+    if (!player._hasFutureEffect()) {
+      finishedPlayers.push(player);
+    }
+    paused = paused && player.paused;
+    player._getLeafItemsInEffect(animations);
+  });
+
+  // Apply animations in order
+  for (var i = 0; i < animations.length; i++) {
+    if (animations[i] instanceof Animation) {
+      animations[i]._sample();
+    }
+  }
+
+  // Generate events
+  PLAYERS.forEach(function(player) {
+    player._generateEvents();
+  });
+
+  // Remove finished players. Warning: _deregisterFromTimeline modifies
+  // the PLAYER list. It should not be called from within a PLAYERS.forEach
+  // loop directly.
+  finishedPlayers.forEach(function(player) {
+    player._deregisterFromTimeline();
+    playersAreSorted = false;
+  });
+
+  // Composite animated values into element styles
+  compositor.applyAnimatedValues();
+
+  if (!isRepeat) {
+    if (finished || paused) {
+      rafScheduled = false;
+    } else {
+      raf(ticker);
+    }
+    cachedClockTimeMillis = undefined;
+  }
+};
+
+// Multiplication where zero multiplied by any value (including infinity)
+// gives zero.
+var multiplyZeroGivesZero = function(a, b) {
+  return (a === 0 || b === 0) ? 0 : a * b;
+};
+
+var maybeRestartAnimation = function() {
+  if (rafScheduled) {
+    return;
+  }
+  raf(ticker);
+  rafScheduled = true;
+};
+
+var DOCUMENT_TIMELINE = new AnimationTimeline(constructorToken);
+// attempt to override native implementation
+try {
+  Object.defineProperty(document, 'timeline', {
+    configurable: true,
+    get: function() { return DOCUMENT_TIMELINE }
+  });
+} catch (e) { }
+// maintain support for Safari
+try {
+  document.timeline = DOCUMENT_TIMELINE;
+} catch (e) { }
+
+window.Element.prototype.animate = function(effect, timing) {
+  var anim = new Animation(this, effect, timing);
+  DOCUMENT_TIMELINE.play(anim);
+  return anim.player;
+};
+window.Element.prototype.getCurrentPlayers = function() {
+  return PLAYERS.filter((function(player) {
+    return player._isCurrent() && player._isTargetingElement(this);
+  }).bind(this));
+};
+window.Element.prototype.getCurrentAnimations = function() {
+  var animations = [];
+  PLAYERS.forEach((function(player) {
+    if (player._isCurrent()) {
+      player._getAnimationsTargetingElement(this, animations);
+    }
+  }).bind(this));
+  return animations;
+};
+
+window.Animation = Animation;
+window.AnimationEffect = AnimationEffect;
+window.AnimationGroup = AnimationGroup;
+window.AnimationPlayer = AnimationPlayer;
+window.AnimationSequence = AnimationSequence;
+window.AnimationTimeline = AnimationTimeline;
+window.KeyframeEffect = KeyframeEffect;
+window.MediaReference = MediaReference;
+window.MotionPathEffect = MotionPathEffect;
+window.PseudoElementReference = PseudoElementReference;
+window.TimedItem = TimedItem;
+window.TimedItemList = TimedItemList;
+window.Timing = Timing;
+window.TimingEvent = TimingEvent;
+window.TimingGroup = TimingGroup;
+
+window._WebAnimationsTestingUtilities = {
+  _constructorToken: constructorToken,
+  _deprecated: deprecated,
+  _positionListType: positionListType,
+  _hsl2rgb: hsl2rgb,
+  _types: propertyTypes,
+  _knownPlayers: PLAYERS,
+  _pacedTimingFunction: PacedTimingFunction,
+  _prefixProperty: prefixProperty,
+  _propertyIsSVGAttrib: propertyIsSVGAttrib
+};
+
+})();
+</script>
+
+<polymer-element name="paper-menu-button-transition" extends="core-transition-css" attributes="duration transformOrigin" assetpath="polymer/bower_components/paper-menu-button/">
+  <template>
+    <style no-shim="">/* Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt */
+
+:host(.paper-menu-button-transition) {
+  outline: none;
+  opacity: 0;
+  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in;
+  -webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in;
+}
+
+:host(.paper-menu-button-transition.paper-menu-button-opened) {
+  opacity: 1;
+  transform: none;
+  -webkit-transform: none;
+}
+</style>
+  </template>
+  <script>
+    Polymer('paper-menu-button-transition', {
+
+      baseClass: 'paper-menu-button-transition',
+      revealedClass: 'paper-menu-button-revealed',
+      openedClass: 'paper-menu-button-opened',
+      closedClass: 'paper-menu-button-closed',
+      completeEventName: null,
+
+      duration: 500,
+
+      setup: function(node) {
+        this.super(arguments);
+
+        var bg = node.querySelector('.paper-menu-button-overlay-bg');
+        bg.style.transformOrigin = this.transformOrigin;
+        bg.style.webkitTransformOrigin = this.transformOrigin;
+      },
+
+      transitionOpened: function(node, opened) {
+        this.super(arguments);
+
+        if (opened) {
+          if (this.player) {
+            this.player.cancel();
+          }
+
+          var anims = [];
+
+          var size = node.getBoundingClientRect();
+
+          var ink = node.querySelector('.paper-menu-button-overlay-ink');
+          var offset = 40 / Math.max(size.width, size.height);
+          anims.push(new Animation(ink, [{
+            'opacity': 0.9,
+            'transform': 'scale(0)',
+          }, {
+            'opacity': 0.9,
+            'transform': 'scale(1)'
+          }], {
+            duration: this.duration * offset
+          }));
+
+          var bg = node.querySelector('.paper-menu-button-overlay-bg');
+          anims.push(new Animation(bg, [{
+            'opacity': 0.9,
+            'transform': 'scale(' + 40 / size.width + ',' + 40 / size.height + ')',
+          }, {
+            'opacity': 1,
+            'transform': 'scale(0.95, 0.5)'
+          }, {
+            'opacity': 1,
+            'transform': 'scale(1, 1)'
+          }], {
+            delay: this.duration * offset,
+            duration: this.duration * (1 - offset),
+            fill: 'forwards'
+          }));
+
+          var items = node.querySelector('#menu').items;
+          var itemDelay = offset + (1 - offset) / 2;
+          var itemDuration = this.duration * (1 - itemDelay) / items.length;
+          var reverse = this.transformOrigin.split(' ')[1] === '100%';
+          items.forEach(function(item, i) {
+            if (!item.classList.contains('paper-menu-button-overlay-bg') && !item.classList.contains('paper-menu-button-overlay-ink')) {
+              anims.push(new Animation(item, [{
+                'opacity': 0
+              }, {
+                'opacity': 1
+              }], {
+                delay: this.duration * itemDelay + itemDuration * (reverse ? items.length - 1 - i : i),
+                duration: itemDuration,
+                fill: 'both'
+              }));
+            }
+          }.bind(this));
+
+          var group = new AnimationGroup(anims, {
+            easing: 'cubic-bezier(0.4, 0, 0.2, 1)'
+          });
+          this.player = document.timeline.play(group);
+          this.player.onfinish = function() {
+            this.fire('core-transitionend', this, node);
+          }.bind(this);
+
+        } else {
+          this.listenOnce(node, 'transitionend', function() {
+            this.fire('core-transitionend', this, node);
+          }.bind(this));
+        }
+      },
+
+    });
+  </script>
+</polymer-element>
+
+<paper-menu-button-transition id="paper-menu-button-transition-top-left" transformorigin="0% 0%"></paper-menu-button-transition>
+<paper-menu-button-transition id="paper-menu-button-transition-top-right" transformorigin="100% 0%"></paper-menu-button-transition>
+<paper-menu-button-transition id="paper-menu-button-transition-top-right-slow" transformorigin="100% 0%" duration="10000"></paper-menu-button-transition>
+
+<paper-menu-button-transition id="paper-menu-button-transition-bottom-left" transformorigin="0% 100%"></paper-menu-button-transition>
+<paper-menu-button-transition id="paper-menu-button-transition-bottom-right" transformorigin="100% 100%"></paper-menu-button-transition>
+
+
+<core-style id="paper-menu-button">
+
+.paper-menu-button-overlay-ink {
+  background: {{g.paperMenuButton.background}}
+}
+
+.paper-menu-button-overlay-bg {
+  background: {{g.paperMenuButton.background}}
+}
+
+</core-style>
+
+<script>
+  (function() {
+
+    CoreStyle.g.paperMenuButton = CoreStyle.g.paperMenuButton || {
+      'background': '#fff'
+    };
+
+  })();
+</script>
+
+<polymer-element name="paper-menu-button" extends="paper-focusable" attributes="src icon opened halign valign slow" assetpath="polymer/bower_components/paper-menu-button/">
+  <template>
+
+    <style>/*
+Copyright 2013 The Polymer Authors. All rights reserved.
+Use of this source code is governed by a BSD-style
+license that can be found in the LICENSE file.
+*/
+
+:host {
+  display: inline-block;
+  padding: 8px;
+  position: relative;
+  background-image: none;
+  outline: none;
+  user-select: none;
+  -webkit-user-select: none;
+  cursor: pointer;
+}
+
+:host([disabled]) {
+  cursor: auto;
+}
+
+core-icon {
+  position: relative;
+}
+
+core-icon::shadow svg {
+  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  transform-origin: 50% 50%;
+  -webkit-transform-origin: 50% 50%;
+}
+
+:host(:hover) core-icon::shadow svg {
+  transform: scale(1.2);
+  -webkit-transform: scale(1.2);
+}
+
+:host([disabled]:hover) core-icon::shadow svg {
+  transform: none;
+  -webkit-transform: none;
+}
+
+:host([disabled]) core-icon::shadow path {
+  fill: #c9c9c9;
+}
+
+#dropdown {
+  background-color: transparent;
+  margin: 12px;
+  color: #000;
+}
+
+#menu {
+  padding-top: 8px;
+  padding-bottom: 8px;
+  margin: 0;
+}
+
+.paper-menu-button-overlay-ink {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 40px;
+  height: 40px;
+  border-radius: 20px;
+  opacity: 0;
+  transform: scale(0);
+  -webkit-transform: scale(0);
+}
+
+:host([halign="right"]) .paper-menu-button-overlay-ink {
+  left: auto;
+  right: 0;
+}
+
+:host([valign="bottom"]) .paper-menu-button-overlay-ink {
+  top: auto;
+  bottom: 0;
+}
+
+.paper-menu-button-overlay-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  border-radius: 3px;
+  opacity: 0;
+  z-index: -1;
+}
+
+:host([noTransition]) .paper-menu-button-overlay-bg {
+  opacity: 1;
+}
+
+.paper-menu-button-menu-container {
+  overflow: auto;
+  max-height: 100%;
+  max-width: 100%;
+}</style>
+    <core-style ref="paper-menu-button"></core-style>
+
+    <core-icon src="{{src}}" icon="{{icon}}" on-tap="{{tapAction}}"></core-icon>
+
+    <core-dropdown id="dropdown" relatedtarget="{{}}" opened="{{opened}}" halign="{{halign}}" valign="{{valign}}" transition="{{noTransition ? '' : transition}}" on-core-transitionend="{{transitionEndAction}}">
+
+      <paper-shadow id="shadow" z="1" target="{{$.dropdown}}"></paper-shadow>
+
+      <div class="paper-menu-button-overlay-ink"></div>
+      <div id="overlayBg" class="paper-menu-button-overlay-bg"></div>
+
+      <div class="paper-menu-button-menu-container">
+        <core-menu id="menu" selected="{{selected}}" selecteditem="{{selectedItem}}" selectedclass="{{selectedClass}}" valueattr="{{valueattr}}" selectedproperty="{{selectedProperty}}" selectedattribute="{{selectedAttribute}}" on-core-select="{{selectAction}}" on-core-activate="{{activateAction}}">
+          <content></content>
+        </core-menu>
+      </div>
+
+    </core-dropdown>
+
+  </template>
+  <script>
+    Polymer('paper-menu-button', {
+
+      publish: {
+
+        /**
+         * If true, this menu is currently visible.
+         *
+         * @attribute opened
+         * @type boolean
+         * @default false
+         */
+        opened: false,
+
+        /**
+         * The horizontal alignment of the menu relative to the button.
+         *
+         * @attribute halign
+         * @type 'left' | 'right'
+         * @default 'left'
+         */
+        halign: 'left',
+
+        /**
+         * The vertical alignment of the menu relative to the button.
+         *
+         * @attribute valign
+         * @type 'bottom' | 'top'
+         * @default 'top'
+         */
+        valign: 'top',
+
+        /**
+         * Set to true to disable the transition.
+         *
+         * @attribute noTransition
+         * @type boolean
+         * @default false
+         */
+        noTransition: false
+
+      },
+
+      computed: {
+        transition: '"paper-menu-button-transition-" + valign + "-" + halign'
+      },
+
+      /**
+       * The URL of an image for the icon. Should not use `icon` property
+       * if you are using this property.
+       *
+       * @attribute src
+       * @type string
+       * @default ''
+       */
+      src: '',
+
+      /**
+       * Specifies the icon name or index in the set of icons available in
+       * the icon set.  Should not use `src` property if you are using this
+       * property.
+       *
+       * @attribute icon
+       * @type string
+       * @default ''
+       */
+      icon: '',
+
+      tapAction: function() {
+        if (this.disabled) {
+          return;
+        }
+
+        this.super();
+        this.toggle();
+        if (this.opened && !this.noTransition) {
+          this.$.shadow.z = 0;
+        }
+      },
+
+      transitionEndAction: function() {
+        this.$.shadow.z = 1;
+      },
+
+      activateAction: function() {
+        this.opened = false;
+      },
+
+      /**
+       * Toggle the opened state of the menu.
+       *
+       * @method toggle
+       */
+      toggle: function() {
+        this.opened = !this.opened;
+      }
+
+    });
+  </script>
+</polymer-element>
+
+<!--
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<!--
+`paper-tabs` is a `core-selector` styled to look like tabs. Tabs make it easy to 
+explore and switch between different views or functional aspects of an app, or 
+to browse categorized data sets.
+
+Use `selected` property to get or set the selected tab.
+
+Example:
+
+    <paper-tabs selected="0">
+      <paper-tab>TAB 1</paper-tab>
+      <paper-tab>TAB 2</paper-tab>
+      <paper-tab>TAB 3</paper-tab>
+    </paper-tabs>
+
+See <a href="#paper-tab">paper-tab</a> for more information about 
+`paper-tab`.
+
+Styling tabs:
+
+To change the sliding bar color:
+
+    paper-tabs.pink::shadow #selectionBar {
+      background-color: #ff4081;
+    }
+
+@group Paper Elements
+@element paper-tabs
+@extends core-selector
+@homepage github.io
+-->
+
+
 <!--
 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
@@ -10139,15 +17789,18 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 </core-iconset-svg>
 
 
-<polymer-element name="domain-icon" attributes="domain" assetpath="polymer/">
+<polymer-element name="domain-icon" attributes="domain state" constructor="DomainIcon" assetpath="polymer/">
   <template>
-    <core-icon icon="{{icon(domain)}}"></core-icon>
+    <core-icon icon="{{icon(domain, state)}}"></core-icon>
   </template>
   <script>
   Polymer('domain-icon',{
 
-    icon: function() {
-      switch(this.domain) {
+    icon: function(domain, state) {
+      switch(domain) {
+        case "homeassistant":
+          return "home";
+
         case "group":
           return "social:communities";
 
@@ -10158,8 +17811,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
           return "settings-input-svideo";
 
         case "chromecast":
-          // hardware:cast-connected
-          return "hardware:cast";
+          if(state && state != "idle") {
+            return "hardware:cast-connected";
+          } else {
+            return "hardware:cast";
+          }
 
         case "process":
           return "hardware:memory"
@@ -10180,7 +17836,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 </polymer-element>
 
 
-<polymer-element name="state-badge" attributes="domain state" assetpath="polymer/">
+<polymer-element name="state-badge" attributes="stateObj" assetpath="polymer/">
   <template>
     <style>
     :host {
@@ -10190,6 +17846,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
       color: white;
       border-radius: 23px;
     }
+
     div {
       height: 45px;
       text-align: center;
@@ -10201,18 +17858,15 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
     </style>
 
     <div horizontal="" layout="" center="">
-      <domain-icon domain="{{domain}}"></domain-icon>
+      <domain-icon domain="{{stateObj.domain}}" state="{{stateObj.state}}">
+      </domain-icon>
     </div>
 
   </template>
-  <script>
-  Polymer('state-badge',{
-  });
-  </script>
-</polymer-element>
+<script>Polymer('state-badge');</script></polymer-element>
 
 
-<polymer-element name="state-card" attributes="entity state last_changed state_attr cb_turn_on, cb_turn_off cb_edit" assetpath="polymer/">
+<polymer-element name="state-card" attributes="stateObj cb_turn_on, cb_turn_off cb_edit" assetpath="polymer/">
   <template>
     <style>
     :host {
@@ -10232,13 +17886,14 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
     state-badge {
       float: left;
       cursor: pointer;
-      transition: background-color .2s;
+      transition: background-color .2s ease-in-out, color .5s ease-in-out;
     }
 
     state-badge:hover {
       background-color: #039be5;
     }
 
+    /* Color the icon if light or sun is on */
     state-badge[data-domain=light][data-state=on],
     state-badge[data-domain=sun][data-state=above_horizon] {
       color: #fff176;
@@ -10247,7 +17902,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
     .name, .state.text {
       text-transform: capitalize;  
       font-weight: 300;
-      font-size: 1.5rem;
+      font-size: 1.3rem;
     }
 
     .state {
@@ -10282,39 +17937,41 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
     <div horizontal="" justified="" layout="">
       
       <div class="entity">
-        <state-badge domain="{{domain}}" state="{{state}}" data-domain="{{domain}}" data-state="{{state}}" on-click="{{editClicked}}">
+        <state-badge id="badge" stateobj="{{stateObj}}" data-domain="{{stateObj.domain}}" data-state="{{stateObj.state}}" on-click="{{editClicked}}">
         </state-badge>
 
         <div class="info">
           <div class="name">
-            <template if="{{state_attr['friendly_name']}}">{{state_attr['friendly_name']}}</template>
-            <template if="{{!state_attr['friendly_name']}}">{{entity_id | makeReadable}}</template>
+            <template if="{{state_attr['friendly_name']}}">
+              {{state_attr['friendly_name']}}
+            </template>
+            <template if="{{!state_attr['friendly_name']}}">
+              {{stateObj.entityDisplay}}
+            </template>
           </div>
 
           <div class="time-ago">
             <core-tooltip label="{{last_changed}}" position="bottom">
-              {{last_changed_from_now}}
+              {{lastChangedFromNow}}
             </core-tooltip>
           </div>
           
         </div>
       </div>
 
-      <template if="{{!state_unknown}}">
-        <template if="{{state == 'on' || state == 'off'}}">
+      <template if="{{!stateUnknown}}">
+        <template if="{{stateObj.state == 'on' || stateObj.state == 'off'}}">
           <div class="state toggle" self-center="" flex="">
             <paper-toggle-button checked="{{toggleChecked}}">
             </paper-toggle-button>
           </div>
         </template>
-        <template if="{{state != 'on' && state != 'off'}}">
-          <div class="state text">
-            {{state | makeReadable}}
-          </div>
+        <template if="{{stateObj.state != 'on' && stateObj.state != 'off'}}">
+          <div class="state text">{{stateObj.stateDisplay}}</div>
         </template>
       </template>
 
-      <template if="{{state_unknown}}">
+      <template if="{{stateUnknown}}">
         <div class="state" self-center="" flex="">Updating..</div>
       </template>
 
@@ -10324,19 +17981,25 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   <script>
   Polymer('state-card',{
     // attributes
-    entity: "",
-    state: "",
-    last_changed: "never",
-    state_attr: {},
+    stateObj: {},
+
     cb_turn_on: null,
     cb_turn_off: null,
     cb_edit: null,
-    state_unknown: false,
+    stateUnknown: false,
     toggleChecked: -1,
 
-    // computed
-    domain: "",
-    entity_id: "",
+    computed: {
+      lastChangedFromNow: "stateObj.last_changed | parseLastChangedFromNow",
+    },
+
+    observe: {
+      'stateObj.state': 'stateChanged'
+    },
+
+    parseLastChangedFromNow: function(lastChanged) {
+      return moment(lastChanged, "HH:mm:ss DD-MM-YYYY").fromNow()
+    },
 
     toggleCheckedChanged: function(oldVal, newVal) {
       // to filter out init
@@ -10344,41 +18007,39 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
         return;
       }
 
-      if(newVal && this.state == "off") {
+      if(newVal && this.stateObj.state == "off") {
         this.turn_on();
-      } else if(!newVal && this.state == "on") {
+      } else if(!newVal && this.stateObj.state == "on") {
         this.turn_off();
       }
     },
 
     stateChanged: function(oldVal, newVal) {
-      this.state_unknown = newVal == null;
+      this.stateUnknown = newVal == null;
       this.toggleChecked = newVal == "on"
-    },
 
-    entityChanged: function(oldVal, newVal) {
-      var parts = newVal.split(".")
+      var state = this.stateObj;
 
-      if(parts.length == 1) {
-        this.domain = ""
-        this.entity_id = parts[0]
+      // for domain light, set color of icon to light color if available
+      if(state.domain == "light" && newVal == "on" &&
+         state.attributes.brightness && state.attributes.xy_color) {
+
+        var rgb = this.xyBriToRgb(state.attributes.xy_color[0],
+                                  state.attributes.xy_color[1],
+                                  state.attributes.brightness);
+        this.$.badge.style.color = "rgb(" + rgb.map(Math.floor).join(",") + ")";
       } else {
-        this.domain = parts[0]
-        this.entity_id = parts.slice(1).join('.')
+        this.$.badge.style.color = null;
       }
     },
 
-    last_changedChanged: function(oldVal, newVal) {
-      this.last_changed_from_now = moment(this.last_changed, "HH:mm:ss DD-MM-YYYY").fromNow()
-    },
-
     turn_on: function() {
       if(this.cb_turn_on) {
-        this.cb_turn_on(this.entity);
+        this.cb_turn_on(this.stateObj.entity_id);
 
         // unset state while we wait for an update
         var delayUnsetSate = function() {
-          this.state = null;
+          this.stateObj.state = null;
         }
         setTimeout(delayUnsetSate.bind(this), 500);      
       }
@@ -10386,11 +18047,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 
     turn_off: function() {
       if(this.cb_turn_off) {
-        this.cb_turn_off(this.entity);
+        this.cb_turn_off(this.stateObj.entity_id);
 
         // unset state while we wait for an update
         var delayUnsetSate = function() {
-          this.state = null;
+          this.stateObj.state = null;
         }
         setTimeout(delayUnsetSate.bind(this), 500);      
       }
@@ -10398,21 +18059,30 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 
     editClicked: function() {
       if(this.cb_edit) {
-        this.cb_edit(this.entity);
+        this.cb_edit(this.stateObj.entity_id);
       }
     },
 
-    // used as filter
-    makeReadable: function(value) {
-      if(typeof value == "string") {
-        return value.replace(/_/g, " ");
-
-      } else if(Array.isArray(value)) {
-        return value.join(", ");
-
-      } else {
-        return value;
-      }
+    // from http://stackoverflow.com/questions/22894498/philips-hue-convert-xy-from-api-to-hex-or-rgb
+    xyBriToRgb: function (x, y, bri) {
+      z = 1.0 - x - y;
+      Y = bri / 255.0; // Brightness of lamp
+      X = (Y / y) * x;
+      Z = (Y / y) * z;
+      r = X * 1.612 - Y * 0.203 - Z * 0.302;
+      g = -X * 0.509 + Y * 1.412 + Z * 0.066;
+      b = X * 0.026 - Y * 0.072 + Z * 0.962;
+      r = r <= 0.0031308 ? 12.92 * r : (1.0 + 0.055) * Math.pow(r, (1.0 / 2.4)) - 0.055;
+      g = g <= 0.0031308 ? 12.92 * g : (1.0 + 0.055) * Math.pow(g, (1.0 / 2.4)) - 0.055;
+      b = b <= 0.0031308 ? 12.92 * b : (1.0 + 0.055) * Math.pow(b, (1.0 / 2.4)) - 0.055;
+      maxValue = Math.max(r,g,b);
+      r /= maxValue;
+      g /= maxValue;
+      b /= maxValue;
+      r = r * 255;   if (r < 0) { r = 255 };
+      g = g * 255;   if (g < 0) { g = 255 };
+      b = b * 255;   if (b < 0) { b = 255 };
+      return [r, g, b]
     }
   });
   </script>
@@ -10441,7 +18111,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 
     <div horizontal="" layout="" wrap="">
       <template repeat="{{state in states}}">
-        <state-card entity="{{state.entity_id}}" state="{{state.state}}" last_changed="{{state.last_changed}}" state_attr="{{state.attributes}}" cb_turn_on="{{api.turn_on}}" cb_turn_off="{{api.turn_off}}" cb_edit="{{editCallback}}">
+        <state-card stateobj="{{state}}" cb_turn_on="{{api.turn_on}}" cb_turn_off="{{api.turn_off}}" cb_edit="{{editCallback}}">
         </state-card>
       </template>
 
@@ -10519,33 +18189,40 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 
       core-toolbar {
         background: #03a9f4;
-        font-size: 1.4rem;
+        font-size: 1.3rem;
         color: white;
       }
 
-      .content {
-        padding-bottom: 75px;
-        padding-right: 10px;
+      paper-tab {
+        text-transform: uppercase;
       }
 
-      paper-fab {
-        position: fixed;
-        bottom: 10px;
-        right: 10px;
+      .content {
+        padding-bottom: 10px;
+        padding-right: 10px;
       }
 
     </style>
 
-
-    <core-header-panel unresolved="" fullbleed="">
+    <core-header-panel fullbleed="">
 
       <core-toolbar class="medium-tall">
         <div flex="">
           Home Assistant
         </div>
-        <core-icon-button icon="refresh" on-click="{{handleRefreshClick}}"></core-icon-button>
-        <core-icon-button icon="developer-mode-tv" on-click="{{handleEventClick}}"></core-icon-button>
-        <core-icon-button icon="settings-remote" on-click="{{handleServiceClick}}"></core-icon-button>
+        <paper-icon-button icon="refresh" on-click="{{handleRefreshClick}}"></paper-icon-button>
+        <paper-icon-button icon="settings-remote" on-click="{{handleServiceClick}}"></paper-icon-button>
+        <paper-menu-button icon="more-vert" halign="right">
+          <paper-item label="Set State">
+            <a on-click="{{handleAddStateClick}}"></a>
+          </paper-item>
+          <paper-item label="Trigger Event">
+            <a on-click="{{handleEventClick}}"></a>
+          </paper-item>
+          <paper-item label="Log Out">
+            <a on-click="{{handleLogOutClick}}"></a>
+          </paper-item>
+        </paper-menu-button>
 
         <div class="bottom fit" horizontal="" layout="">
             <paper-tabs id="tabsHolder" noink="" flex="" selected="0" on-core-select="{{tabClicked}}">
@@ -10553,8 +18230,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
               <paper-tab>ALL</paper-tab>
 
               <template repeat="{{state in api.states}}">
-                <template if="{{isCustomGroup(state)}}">
-                  <paper-tab data-entity="{{state.entity_id}}">{{state.entity_id | groupName}}</paper-tab>
+                <template if="{{state.domain == 'group' && !state.attributes.auto}}">
+                  <paper-tab data-entity="{{state.entity_id}}">
+                    {{state.entityDisplay}}
+                  </paper-tab>
                 </template>
               </template>
                 
@@ -10564,7 +18243,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 
       <div class="content" flex="">
         <states-cards api="{{api}}" filter="{{selectedTab}}"></states-cards>
-        <paper-fab icon="add" on-click="{{handleAddStateClick}}"></paper-fab>
       </div>
 
     </core-header-panel>
@@ -10574,15 +18252,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   Polymer('home-assistant-main',{
     selectedTab: null,
 
-    isCustomGroup: function(state) {
-      return (state.entity_id.lastIndexOf('group.') == 0 &&
-              !state.attributes.auto);
-    },
-
-    groupName: function(entity_id) {
-      return entity_id.substring(6).toUpperCase().replace(/_/g, " ");
-    },
-
     tabClicked: function(ev) {
       if(ev.detail.isSelected) {
         // will be null for ALL tab
@@ -10604,6 +18273,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 
     handleAddStateClick: function() {
       this.api.showSetStateDialog();
+    },
+
+    handleLogOutClick: function() {
+      this.api.logOut();
     }
 
   });
@@ -10673,1302 +18346,8 @@ the toast will automatically fits at the bottom of the screen.
 @homepage github.io
 -->
 
-<!--
-Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--->
 
 
-<!--
-Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--->
-
-<!--
-
-`<core-transition>` is an abstraction of an animation. It is used to implement pluggable
-transitions, for example in `<core-overlay>`. You can extend this class to create a custom
-animation, instantiate it, and import it where you need the animation.
-
-All instances of `<core-transition>` are stored in a single database with `type=transition`.
-For more about the database, please see the documentation for `<core-meta>`.
-
-Each instance of `<core-transition>` objects are shared across all the clients, so you should
-not store state information specific to the animated element in the transition. Rather, store
-it on the element.
-
-Example:
-
-my-transition.html:
-
-    <polymer-element name="my-transition" extends="core-transition">
-        <script>
-            go: function(node) {
-                node.style.transition = 'opacity 1s ease-out';
-                node.style.opacity = 0;
-            }
-        </script>
-    </polymer-element>
-
-    <my-transition id="my-fade-out"></my-transition>
-
-my-transition-demo.html:
-
-    <link href="components/core-meta/core-meta.html" rel="import">
-    <link href="my-transition.html" rel="import">
-
-    <div id="animate-me"></div>
-
-    <script>
-        // Get the core-transition
-        var meta = document.createElement('core-meta');
-        meta.type = 'transition';
-        var transition = meta.byId('my-fade-out');
-
-        // Run the animation
-        var animated = document.getElementById('animate-me');
-        transition.go(animated);
-    </script>
-
-@group Polymer Core Elements
-@element core-transition
-@extends core-meta
-@status beta
-@homepage github.io
--->
-<!--
-Fired when the animation finishes.
-
-@event core-transitionend
-@param {Object} detail
-@param {Object} detail.node The animated node
--->
-
-
-
-<polymer-element name="core-transition" extends="core-meta" assetpath="polymer/bower_components/core-transition/">
-  
-  <script>
-    Polymer('core-transition', {
-      
-      type: 'transition',
-
-      /**
-       * Run the animation.
-       *
-       * @method go
-       * @param {Node} node The node to apply the animation on
-       * @param {Object} state State info
-       */
-      go: function(node, state) {
-        this.complete(node);
-      },
-
-      /**
-       * Set up the animation. This may include injecting a stylesheet,
-       * applying styles, creating a web animations object, etc.. This
-       *
-       * @method setup
-       * @param {Node} node The animated node
-       */
-      setup: function(node) {
-      },
-
-      /**
-       * Tear down the animation.
-       *
-       * @method teardown
-       * @param {Node} node The animated node
-       */
-      teardown: function(node) {
-      },
-
-      /**
-       * Called when the animation completes. This function also fires the
-       * `core-transitionend` event.
-       *
-       * @method complete
-       * @param {Node} node The animated node
-       */
-      complete: function(node) {
-        this.fire('core-transitionend', null, node);
-      },
-
-      /**
-       * Utility function to listen to an event on a node once.
-       *
-       * @method listenOnce
-       * @param {Node} node The animated node
-       * @param {string} event Name of an event
-       * @param {Function} fn Event handler
-       * @param {Array} args Additional arguments to pass to `fn`
-       */
-      listenOnce: function(node, event, fn, args) {
-        var self = this;
-        var listener = function() {
-          fn.apply(self, args);
-          node.removeEventListener(event, listener, false);
-        }
-        node.addEventListener(event, listener, false);
-      }
-
-    });
-  </script>
-</polymer-element>
-<!--
-Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--->
-
-
-
-<polymer-element name="core-key-helper" assetpath="polymer/bower_components/core-overlay/">
-  <script>
-    Polymer('core-key-helper', {
-      ENTER_KEY: 13,
-      ESCAPE_KEY: 27
-    });
-  </script>
-</polymer-element>
-
-<!--
-Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--->
-
-<polymer-element name="core-overlay-layer" assetpath="polymer/bower_components/core-overlay/">
-<template>
-  <style>
-    :host {
-      position: fixed;
-      top: 0;
-      left: 0;
-      z-index: 1000;
-      display: none;
-    }
-
-    :host(.core-opened) {
-      display: block;
-    }
-  </style>
-  <content></content>
-</template>
-<script>
-(function() {
-
-  Polymer('core-overlay-layer', {
-    publish: {
-      opened: false
-    },
-    openedChanged: function() {
-      this.classList.toggle('core-opened', this.opened);
-    },
-    /**
-     * Adds an element to the overlay layer
-     */
-    addElement: function(element) {
-      if (!this.parentNode) {
-        document.querySelector('body').appendChild(this);
-      }
-      if (element.parentNode !== this) {
-        element.__contents = [];
-        var ip$ = element.querySelectorAll('content');
-        for (var i=0, l=ip$.length, n; (i<l) && (n = ip$[i]); i++) {
-          this.moveInsertedElements(n);
-          this.cacheDomLocation(n);
-          n.parentNode.removeChild(n);
-          element.__contents.push(n);
-        }
-        this.cacheDomLocation(element);
-        this.updateEventController(element);
-        var h = this.makeHost();
-        h.shadowRoot.appendChild(element);
-        element.__host = h;
-      }
-    },
-    makeHost: function() {
-      var h = document.createElement('overlay-host');
-      h.createShadowRoot();
-      this.appendChild(h);
-      return h;
-    },
-    moveInsertedElements: function(insertionPoint) {
-      var n$ = insertionPoint.getDistributedNodes();
-      var parent = insertionPoint.parentNode;
-      insertionPoint.__contents = [];
-      for (var i=0, l=n$.length, n; (i<l) && (n=n$[i]); i++) {
-        this.cacheDomLocation(n);
-        this.updateEventController(n);
-        insertionPoint.__contents.push(n);
-        parent.appendChild(n);  
-      }
-    },
-    updateEventController: function(element) {
-      element.eventController = this.element.findController(element);
-    },
-    /**
-     * Removes an element from the overlay layer
-     */
-    removeElement: function(element) {
-      element.eventController = null;
-      this.replaceElement(element);
-      var h = element.__host;
-      if (h) {
-        h.parentNode.removeChild(h);
-      }
-    },
-    replaceElement: function(element) {
-      if (element.__contents) {
-        for (var i=0, c$=element.__contents, c; (c=c$[i]); i++) {
-          this.replaceElement(c);
-        }
-        element.__contents = null;
-      }
-      if (element.__parentNode) {
-        var n = element.__nextElementSibling && element.__nextElementSibling 
-            === element.__parentNode ? element.__nextElementSibling : null;
-        element.__parentNode.insertBefore(element, n);
-      }
-    },
-    cacheDomLocation: function(element) {
-      element.__nextElementSibling = element.nextElementSibling;
-      element.__parentNode = element.parentNode;
-    }
-  });
-  
-})();
-</script>
-</polymer-element>
-
-
-<!--
-The `core-overlay` element displays overlayed on top of other content. It starts
-out hidden and is displayed by setting its `opened` property to true.
-A `core-overlay's` opened state can be toggled by calling the `toggle`
-method.
-
-The `core-overlay` will, by default, show/hide itself when it's opened. The 
-`target` property may be set to another element to cause that element to 
-be shown when the overlay is opened.
-
-It's common to want a `core-overlay` to animate to its opened
-position. The `core-overlay` element uses a `core-transition` to handle
-animation. The default transition is `core-transition-fade` which 
-causes the overlay to fade in when displayed. See 
-<a href="../core-transition/">`core-transition`</a> for more
-information about customizing a `core-overlay's` opening animation. The
-`backdrop` property can be set to true to show a backdrop behind the overlay
-that will darken the rest of the window.
-
-An element that should close the `core-overlay` will automatically
-do so if it's given the `core-overlay-toggle` attribute. This attribute
-can be customized with the `closeAttribute` property. You can also use
-`closeSelector` if more general matching is needed.
-
-By default  `core-overlay` will close whenever the user taps outside it or
-presses the escape key. This behavior can be turned off via the
-`autoCloseDisabled` property.
-
-    <core-overlay>
-      <h2>Dialog</h2>
-      <input placeholder="say something..." autofocus>
-      <div>I agree with this wholeheartedly.</div>
-      <button core-overlay-toggle>OK</button>
-    </core-overlay>
-
-`core-overlay` will automatically size and position itself according to the 
-following rules. The overlay's size is constrained such that it does not
-overflow the screen. This is done by setting maxHeight/maxWidth on the 
-`sizingTarget`. If the `sizingTarget` already has a setting for one of these
-properties, it will not be overridden. The overlay should
-be positioned via css or imperatively using the `core-overlay-position` event.
-If the overlay is not positioned vertically via setting `top` or `bottom`, it
-will be centered vertically. The same is true horizontally via a setting to 
-`left` or `right`. In addition, css `margin` can be used to provide some space
-around the overlay. This can be used to ensure
-that, for example, a drop shadow is always visible around the overlay.
-
-@group Core Elements
-@element core-overlay
-@homepage github.io
--->
-<!--
-Fired when the `core-overlay`'s `opened` property changes.
-
-@event core-overlay-open
-@param {Object} detail
-@param {Object} detail.opened the opened state
--->
-<!--
-Fired when the `core-overlay` has completely opened.
-
-@event core-overlay-open-completed
--->
-<!--
-Fired when the `core-overlay` has completely closed.
-
-@event core-overlay-close-completed
--->
-<!--
-Fired when the `core-overlay` needs to position itself. Optionally, implement
-in order to position an overlay via code. If the overlay was not otherwise
-positioned, it's important to indicate how the overlay has been positioned by
-setting the `dimensions.position` object. For example, if the overlay has been
-positioned via setting `right` and `top`, set dimensions.position to an
-object like this: `{v: 'top', h: 'right'}`.
-
-@event core-overlay-position
-@param {Object} detail
-@param {Object} detail.target the overlay target
-@param {Object} detail.sizingTarget the overlay sizing target
-@param {Object} detail.opened the opened state
--->
-<style>
-  .core-overlay-backdrop {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    background-color: black;
-    opacity: 0;
-    transition: opacity 0.2s;
-  }
-
-  .core-overlay-backdrop.core-opened {
-    opacity: 0.6;
-  }
-</style>
-
-<polymer-element name="core-overlay" assetpath="polymer/bower_components/core-overlay/">
-<script>
-(function() {
-
-  Polymer('core-overlay', {
-
-    publish: {
-      /**
-       * The target element that will be shown when the overlay is 
-       * opened. If unspecified, the core-overlay itself is the target.
-       *
-       * @attribute target
-       * @type Object
-       * @default the overlay element
-       */
-      target: null,
-
-
-      /**
-       * A `core-overlay`'s size is guaranteed to be 
-       * constrained to the window size. To achieve this, the sizingElement
-       * is sized with a max-height/width. By default this element is the 
-       * target element, but it can be specifically set to a specific element
-       * inside the target if that is more appropriate. This is useful, for 
-       * example, when a region inside the overlay should scroll if needed.
-       *
-       * @attribute sizingTarget
-       * @type Object
-       * @default the target element
-       */
-      sizingTarget: null,
-    
-      /**
-       * Set opened to true to show an overlay and to false to hide it.
-       * A `core-overlay` may be made initially opened by setting its
-       * `opened` attribute.
-       * @attribute opened
-       * @type boolean
-       * @default false
-       */
-      opened: false,
-
-      /**
-       * If true, the overlay has a backdrop darkening the rest of the screen.
-       * The backdrop element is attached to the document body and may be styled
-       * with the class `core-overlay-backdrop`. When opened the `core-opened`
-       * class is applied.
-       *
-       * @attribute backdrop
-       * @type boolean
-       * @default false
-       */    
-      backdrop: false,
-
-      /**
-       * If true, the overlay is guaranteed to display above page content.
-       *
-       * @attribute layered
-       * @type boolean
-       * @default false
-      */
-      layered: false,
-    
-      /**
-       * By default an overlay will close automatically if the user
-       * taps outside it or presses the escape key. Disable this
-       * behavior by setting the `autoCloseDisabled` property to true.
-       * @attribute autoCloseDisabled
-       * @type boolean
-       * @default false
-       */
-      autoCloseDisabled: false,
-
-      /**
-       * By default an overlay will focus its target or an element inside
-       * it with the `autoFocus` attribute. Disable this
-       * behavior by setting the `autoFocusDisabled` property to true.
-       * @attribute autoFocusDisabled
-       * @type boolean
-       * @default false
-       */
-      autoFocusDisabled: false,
-
-      /**
-       * This property specifies an attribute on elements that should
-       * close the overlay on tap. Should not set `closeSelector` if this
-       * is set.
-       *
-       * @attribute closeAttribute
-       * @type string
-       * @default "core-overlay-toggle"
-       */
-      closeAttribute: 'core-overlay-toggle',
-
-      /**
-       * This property specifies a selector matching elements that should
-       * close the overlay on tap. Should not set `closeAttribute` if this
-       * is set.
-       *
-       * @attribute closeSelector
-       * @type string
-       * @default ""
-       */
-      closeSelector: '',
-
-      /**
-       * The transition property specifies a string which identifies a 
-       * <a href="../core-transition/">`core-transition`</a> element that 
-       * will be used to help the overlay open and close. The default
-       * `core-transition-fade` will cause the overlay to fade in and out.
-       *
-       * @attribute transition
-       * @type string
-       * @default 'core-transition-fade'
-       */
-      transition: 'core-transition-fade'
-
-    },
-
-    captureEventName: 'tap',
-    targetListeners: {
-      'tap': 'tapHandler',
-      'keydown': 'keydownHandler',
-      'core-transitionend': 'transitionend'
-    },
-    
-    registerCallback: function(element) {
-      this.layer = document.createElement('core-overlay-layer');
-      this.keyHelper = document.createElement('core-key-helper');
-      this.meta = document.createElement('core-transition');
-      this.scrim = document.createElement('div');
-      this.scrim.className = 'core-overlay-backdrop';
-    },
-
-    ready: function() {
-      this.target = this.target || this;
-      // flush to ensure styles are installed before paint
-      Platform.flush();
-    },
-
-    /** 
-     * Toggle the opened state of the overlay.
-     * @method toggle
-     */
-    toggle: function() {
-      this.opened = !this.opened;
-    },
-
-    /** 
-     * Open the overlay. This is equivalent to setting the `opened`
-     * property to true.
-     * @method open
-     */
-    open: function() {
-      this.opened = true;
-    },
-
-    /** 
-     * Close the overlay. This is equivalent to setting the `opened` 
-     * property to false.
-     * @method close
-     */
-    close: function() {
-      this.opened = false;
-    },
-
-    domReady: function() {
-      this.ensureTargetSetup();
-    },
-
-    targetChanged: function(old) {
-      if (this.target) {
-        // really make sure tabIndex is set
-        if (this.target.tabIndex < 0) {
-          this.target.tabIndex = -1;
-        }
-        this.addElementListenerList(this.target, this.targetListeners);
-        this.target.style.display = 'none';
-        this.target.__overlaySetup = false;
-      }
-      if (old) {
-        this.removeElementListenerList(old, this.targetListeners);
-        var transition = this.getTransition();
-        if (transition) {
-          transition.teardown(old);
-        } else {
-          old.style.position = '';
-          old.style.outline = '';
-        }
-        old.style.display = '';
-      }
-    },
-
-    transitionChanged: function(old) {
-      if (!this.target) {
-        return;
-      }
-      if (old) {
-        this.getTransition(old).teardown(this.target);
-      }
-      this.target.__overlaySetup = false;
-    },
-
-    // NOTE: wait to call this until we're as sure as possible that target
-    // is styled.
-    ensureTargetSetup: function() {
-      if (!this.target || this.target.__overlaySetup) {
-        return;
-      }
-      if (!this.sizingTarget) {
-        this.sizingTarget = this.target;
-      }
-      this.target.__overlaySetup = true;
-      this.target.style.display = '';
-      var transition = this.getTransition();
-      if (transition) {
-        transition.setup(this.target);
-      }
-      var style = this.target.style;
-      var computed = getComputedStyle(this.target);
-      if (computed.position === 'static') {
-        style.position = 'fixed';
-      }
-      style.outline = 'none';
-      style.display = 'none';
-    },
-
-    openedChanged: function() {
-      this.transitioning = true;
-      this.ensureTargetSetup();
-      this.prepareRenderOpened();
-      // async here to allow overlay layer to become visible.
-      this.async(function() {
-        this.target.style.display = '';
-        // force layout to ensure transitions will go
-        this.target.offsetWidth;
-        this.renderOpened();
-      });
-      this.fire('core-overlay-open', this.opened);
-    },
-
-    // tasks which must occur before opening; e.g. making the element visible
-    prepareRenderOpened: function() {
-      if (this.opened) {
-        addOverlay(this);
-      }
-      this.prepareBackdrop();
-      // async so we don't auto-close immediately via a click.
-      this.async(function() {
-        if (!this.autoCloseDisabled) {
-          this.enableElementListener(this.opened, document,
-              this.captureEventName, 'captureHandler', true);
-        }
-      });
-      this.enableElementListener(this.opened, window, 'resize',
-          'resizeHandler');
-
-      if (this.opened) {
-        // force layout so SD Polyfill renders
-        this.target.offsetHeight;
-        this.discoverDimensions();
-        // if we are showing, then take care when positioning
-        this.preparePositioning();
-        this.positionTarget();
-        this.updateTargetDimensions();
-        this.finishPositioning();
-        if (this.layered) {
-          this.layer.addElement(this.target);
-          this.layer.opened = this.opened;
-        }
-      }
-    },
-
-    // tasks which cause the overlay to actually open; typically play an
-    // animation
-    renderOpened: function() {
-      var transition = this.getTransition();
-      if (transition) {
-        transition.go(this.target, {opened: this.opened});
-      } else {
-        this.transitionend();
-      }
-      this.renderBackdropOpened();
-    },
-
-    // finishing tasks; typically called via a transition
-    transitionend: function(e) {
-      // make sure this is our transition event.
-      if (e && e.target !== this.target) {
-        return;
-      }
-      this.transitioning = false;
-      if (!this.opened) {
-        this.resetTargetDimensions();
-        this.target.style.display = 'none';
-        this.completeBackdrop();
-        removeOverlay(this);
-        if (this.layered) {
-          if (!currentOverlay()) {
-            this.layer.opened = this.opened;
-          }
-          this.layer.removeElement(this.target);
-        }
-      }
-      this.fire('core-overlay-' + (this.opened ? 'open' : 'close') + 
-          '-completed');
-      this.applyFocus();
-    },
-
-    prepareBackdrop: function() {
-      if (this.backdrop && this.opened) {
-        if (!this.scrim.parentNode) {
-          document.body.appendChild(this.scrim);
-          this.scrim.style.zIndex = currentOverlayZ() - 1;
-        }
-        trackBackdrop(this);
-      }
-    },
-
-    renderBackdropOpened: function() {
-      if (this.backdrop && getBackdrops().length < 2) {
-        this.scrim.classList.toggle('core-opened', this.opened);
-      }
-    },
-
-    completeBackdrop: function() {
-      if (this.backdrop) {
-        trackBackdrop(this);
-        if (getBackdrops().length === 0) {
-          this.scrim.parentNode.removeChild(this.scrim);
-        }
-      }
-    },
-
-    preparePositioning: function() {
-      this.target.style.transition = this.target.style.webkitTransition = 'none';
-      this.target.style.transform = this.target.style.webkitTransform = 'none';
-      this.target.style.display = '';
-    },
-
-    discoverDimensions: function() {
-      if (this.dimensions) {
-        return;
-      }
-      var target = getComputedStyle(this.target);
-      var sizer = getComputedStyle(this.sizingTarget);
-      this.dimensions = {
-        position: {
-          v: target.top !== 'auto' ? 'top' : (target.bottom !== 'auto' ?
-            'bottom' : null),
-          h: target.left !== 'auto' ? 'left' : (target.right !== 'auto' ?
-            'right' : null),
-          css: target.position
-        },
-        size: {
-          v: sizer.maxHeight !== 'none',
-          h: sizer.maxWidth !== 'none'
-        },
-        margin: {
-          top: parseInt(target.marginTop) || 0,
-          right: parseInt(target.marginRight) || 0,
-          bottom: parseInt(target.marginBottom) || 0,
-          left: parseInt(target.marginLeft) || 0
-        }
-      };
-    },
-
-    finishPositioning: function(target) {
-      this.target.style.display = 'none';
-      this.target.style.transform = this.target.style.webkitTransform = '';
-      // force layout to avoid application of transform
-      this.target.offsetWidth;
-      this.target.style.transition = this.target.style.webkitTransition = '';
-    },
-
-    getTransition: function(name) {
-      return this.meta.byId(name || this.transition);
-    },
-
-    getFocusNode: function() {
-      return this.target.querySelector('[autofocus]') || this.target;
-    },
-
-    applyFocus: function() {
-      var focusNode = this.getFocusNode();
-      if (this.opened) {
-        if (!this.autoFocusDisabled) {
-          focusNode.focus();
-        }
-      } else {
-        focusNode.blur();
-        if (currentOverlay() == this) {
-          console.warn('Current core-overlay is attempting to focus itself as next! (bug)');
-        } else {
-          focusOverlay();
-        }
-      }
-    },
-
-    positionTarget: function() {
-      // fire positioning event
-      this.fire('core-overlay-position', {target: this.target,
-          sizingTarget: this.sizingTarget, opened: this.opened});
-      if (!this.dimensions.position.v) {
-        this.target.style.top = '0px';
-      }
-      if (!this.dimensions.position.h) {
-        this.target.style.left = '0px';
-      }
-    },
-
-    updateTargetDimensions: function() {
-      this.sizeTarget();
-      this.repositionTarget();
-    },
-
-    sizeTarget: function() {
-      this.sizingTarget.style.boxSizing = 'border-box';
-      var dims = this.dimensions;
-      var rect = this.target.getBoundingClientRect();
-      if (!dims.size.v) {
-        this.sizeDimension(rect, dims.position.v, 'top', 'bottom', 'Height');
-      }
-      if (!dims.size.h) {
-        this.sizeDimension(rect, dims.position.h, 'left', 'right', 'Width');
-      }
-    },
-
-    sizeDimension: function(rect, positionedBy, start, end, extent) {
-      var dims = this.dimensions;
-      var flip = (positionedBy === end);
-      var m = flip ? start : end;
-      var ws = window['inner' + extent];
-      var o = dims.margin[m] + (flip ? ws - rect[end] : 
-          rect[start]);
-      var offset = 'offset' + extent;
-      var o2 = this.target[offset] - this.sizingTarget[offset];
-      this.sizingTarget.style['max' + extent] = (ws - o - o2) + 'px';
-    },
-
-    // vertically and horizontally center if not positioned
-    repositionTarget: function() {
-      // only center if position fixed.      
-      if (this.dimensions.position.css !== 'fixed') {
-        return; 
-      }
-      if (!this.dimensions.position.v) {
-        var t = (window.innerHeight - this.target.offsetHeight) / 2;
-        t -= this.dimensions.margin.top;
-        this.target.style.top = t + 'px';
-      }
-
-      if (!this.dimensions.position.h) {
-        var l = (window.innerWidth - this.target.offsetWidth) / 2;
-        l -= this.dimensions.margin.left;
-        this.target.style.left = l + 'px';
-      }
-    },
-
-    resetTargetDimensions: function() {
-      if (!this.dimensions.size.v) {
-        this.sizingTarget.style.maxHeight = '';  
-      }
-      if (!this.dimensions.size.h) {
-        this.sizingTarget.style.maxWidth = '';  
-      }
-      this.dimensions = null;
-    },
-
-    tapHandler: function(e) {
-      // closeSelector takes precedence since closeAttribute has a default non-null value.
-      if (e.target &&
-          (this.closeSelector && e.target.matches(this.closeSelector)) ||
-          (this.closeAttribute && e.target.hasAttribute(this.closeAttribute))) {
-        this.toggle();
-      } else {
-        if (this.autoCloseJob) {
-          this.autoCloseJob.stop();
-          this.autoCloseJob = null;
-        }
-      }
-    },
-    
-    // We use the traditional approach of capturing events on document
-    // to to determine if the overlay needs to close. However, due to 
-    // ShadowDOM event retargeting, the event target is not useful. Instead
-    // of using it, we attempt to close asynchronously and prevent the close
-    // if a tap event is immediately heard on the target.
-    // TODO(sorvell): This approach will not work with modal. For
-    // this we need a scrim.
-    captureHandler: function(e) {
-      if (!this.autoCloseDisabled && (currentOverlay() == this)) {
-        this.autoCloseJob = this.job(this.autoCloseJob, function() {
-          this.close();
-        });
-      }
-    },
-
-    keydownHandler: function(e) {
-      if (!this.autoCloseDisabled && (e.keyCode == this.keyHelper.ESCAPE_KEY)) {
-        this.close();
-        e.stopPropagation();
-      }
-    },
-
-    /**
-     * Extensions of core-overlay should implement the `resizeHandler`
-     * method to adjust the size and position of the overlay when the 
-     * browser window resizes.
-     * @method resizeHandler
-     */
-    resizeHandler: function() {
-      this.updateTargetDimensions();
-    },
-
-    // TODO(sorvell): these utility methods should not be here.
-    addElementListenerList: function(node, events) {
-      for (var i in events) {
-        this.addElementListener(node, i, events[i]);
-      }
-    },
-
-    removeElementListenerList: function(node, events) {
-      for (var i in events) {
-        this.removeElementListener(node, i, events[i]);
-      }
-    },
-
-    enableElementListener: function(enable, node, event, methodName, capture) {
-      if (enable) {
-        this.addElementListener(node, event, methodName, capture);
-      } else {
-        this.removeElementListener(node, event, methodName, capture);
-      }
-    },
-
-    addElementListener: function(node, event, methodName, capture) {
-      var fn = this._makeBoundListener(methodName);
-      if (node && fn) {
-        Polymer.addEventListener(node, event, fn, capture);
-      }
-    },
-
-    removeElementListener: function(node, event, methodName, capture) {
-      var fn = this._makeBoundListener(methodName);
-      if (node && fn) {
-        Polymer.removeEventListener(node, event, fn, capture);
-      }
-    },
-
-    _makeBoundListener: function(methodName) {
-      var self = this, method = this[methodName];
-      if (!method) {
-        return;
-      }
-      var bound = '_bound' + methodName;
-      if (!this[bound]) {
-        this[bound] = function(e) {
-          method.call(self, e);
-        };
-      }
-      return this[bound];
-    },
-  });
-
-  // TODO(sorvell): This should be an element with private state so it can
-  // be independent of overlay.
-  // track overlays for z-index and focus managemant
-  var overlays = [];
-  function addOverlay(overlay) {
-    var z0 = currentOverlayZ();
-    overlays.push(overlay);
-    var z1 = currentOverlayZ();
-    if (z1 <= z0) {
-      applyOverlayZ(overlay, z0);
-    }
-  }
-
-  function removeOverlay(overlay) {
-    var i = overlays.indexOf(overlay);
-    if (i >= 0) {
-      overlays.splice(i, 1);
-      setZ(overlay, '');
-    }
-  }
-  
-  function applyOverlayZ(overlay, aboveZ) {
-    setZ(overlay.target, aboveZ + 2);
-  }
-  
-  function setZ(element, z) {
-    element.style.zIndex = z;
-  }
-
-  function currentOverlay() {
-    return overlays[overlays.length-1];
-  }
-  
-  var DEFAULT_Z = 10;
-  
-  function currentOverlayZ() {
-    var z;
-    var current = currentOverlay();
-    if (current) {
-      var z1 = window.getComputedStyle(current.target).zIndex;
-      if (!isNaN(z1)) {
-        z = Number(z1);
-      }
-    }
-    return z || DEFAULT_Z;
-  }
-  
-  function focusOverlay() {
-    var current = currentOverlay();
-    // We have to be careful to focus the next overlay _after_ any current
-    // transitions are complete (due to the state being toggled prior to the
-    // transition). Otherwise, we risk infinite recursion when a transitioning
-    // (closed) overlay becomes the current overlay.
-    //
-    // NOTE: We make the assumption that any overlay that completes a transition
-    // will call into focusOverlay to kick the process back off. Currently:
-    // transitionend -> applyFocus -> focusOverlay.
-    if (current && !current.transitioning) {
-      current.applyFocus();
-    }
-  }
-
-  var backdrops = [];
-  function trackBackdrop(element) {
-    if (element.opened) {
-      backdrops.push(element);
-    } else {
-      var i = backdrops.indexOf(element);
-      if (i >= 0) {
-        backdrops.splice(i, 1);
-      }
-    }
-  }
-
-  function getBackdrops() {
-    return backdrops;
-  }
-})();
-</script>
-</polymer-element>
-
-<!--
-Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--->
-
-<!--
-
-`<core-transition-css>` implements CSS transitions as `<core-transition>` objects so they can be
-reused in a pluggable transition system such as in `<core-overlay>`. Currently this class has
-some specific support to animate an element from and to the viewport such as a dialog, but you
-can override it for different effects.
-
-Example:
-
-my-css-transition.html:
-
-    <polymer-element name="my-css-transition" extends="core-transition-css">
-    <template>
-        <style>
-            :host(.my-transition) {
-                opacity: 0;
-                transition: transform 1s ease-out, opacity 1s ease-out;
-            }
-            :host(.my-transition.my-opened) {
-                opacity: 1;
-                transform: none;
-            }
-            :host(.my-transition-top) {
-                transform: translateY(-100vh);
-            }
-            :host(.my-transition-bottom) {
-                transform: translateY(100vh);
-            }
-        </style>
-    </template>
-    <script>
-      Polymer({
-        baseClass: 'my-transition',
-        openedClass: 'my-opened'
-      });
-    </script>
-    </polymer-element>
-
-    <my-css-transition id="my-transition-top" transitionType="top"></my-css-transition>
-    <my-css-transition id="my-transition-bottom" transitionType="bottom"></my-css-transition>
-
-my-css-transition-demo.html
-
-    <link href="components/core-meta/core-meta.html" rel="import">
-    <link href="my-css-transition.html">
-
-    <div id="animate-me"></div>
-
-    <script>
-        // Get the core-transition
-        var meta = document.createElement('core-meta');
-        meta.type = 'transition';
-        var transition1 = meta.byId('my-transition-top');
-
-        // Set up the animation
-        var animated = document.getElementById('animate-me');
-        transition1.setup(animated);
-        transition1.go(animated, {opened: true});
-    </script>
-
-The first element in the template of a `<core-transition-css>` object should be a stylesheet. It
-will be injected to the scope of the animated node in the `setup` function. The node is initially
-invisible with `opacity: 0`, and you can transition it to an "opened" state by passing
-`{opened: true}` to the `go` function.
-
-All nodes being animated will get the class `my-transition` added in the `setup` function.
-Additionally, the class `my-transition-<transitionType>` will be applied. You can use the
-`transitionType` attribute to implement several different behaviors with the same
-`<core-transition-css>` object. In the above example, `<my-css-transition>` implements both
-sliding the node from the top of the viewport and from the bottom of the viewport.
-
-Available transitions
----------------------
-
-`<core-transition-css>` includes several commonly used transitions.
-
-`core-transition-fade`: Animates from `opacity: 0` to `opacity: 1` when it opens.
-
-`core-transition-center`: Zooms the node into the final size.
-
-`core-transition-top`: Slides the node into the final position from the top.
-
-`core-transition-bottom`: Slides the node into the final position from the bottom.
-
-`core-transition-left`: Slides the node into the final position from the left.
-
-`core-transition-right`: Slides the node into the final position from the right.
-
-@group Polymer Core Elements
-@element core-transition-css
-@extends core-transition
-@status beta
-@homepage github.io
--->
-
-
-
-<polymer-element name="core-transition-css" extends="core-transition" attributes="transitionType" assetpath="polymer/bower_components/core-transition/">
-<template>
-  <style no-shim="">/* Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt */
-
-:host(.core-transition) {
-  outline: none;
-  overflow: auto;
-  opacity: 0;
-  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in;
-  -webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in;
-}
-
-
-:host(.core-transition.core-opened) {
-  opacity: 1;
-  transform: translateZ(0);
-  -webkit-transform: translateZ(0);
-}
-
-:host(.core-transition-center) {
-  transform: scale(0.5);
-  -webkit-transform: scale(0.5);
-}
-
-:host(.core-transition-top) {
-  transform: translateY(-200%);
-  -webkit-transform: translateY(-200%);
-}
-
-:host(.core-transition-bottom) {
-  transform: translateY(200%);
-  -webkit-transform: translateY(200%);
-}
-
-:host(.core-transition-left) {
-  transform: translateX(-200%);
-  -webkit-transform: translateX(-200%);
-}
-
-:host(.core-transition-right) {
-  transform: translateX(200%);
-  -webkit-transform: translateX(200%);
-}</style>
-</template>
-<script>
-
-  Polymer('core-transition-css', {
-    
-    /**
-     * The class that will be applied to all animated nodes.
-     *
-     * @attribute baseClass
-     * @type string
-     * @default "core-transition"
-     */
-    baseClass: 'core-transition',
-
-    /**
-     * The class that will be applied to nodes in the opened state.
-     *
-     * @attribute openedClass
-     * @type string
-     * @default "core-opened"
-     */
-    openedClass: 'core-opened',
-
-    /**
-     * The class that will be applied to nodes in the closed state.
-     *
-     * @attribute closedClass
-     * @type string
-     * @default "core-closed"
-     */
-    closedClass: 'core-closed',
-
-    /**
-     * Event to listen to for animation completion.
-     *
-     * @attribute completeEventName
-     * @type string
-     * @default "transitionEnd"
-     */
-    completeEventName: 'transitionend',
-
-    publish: {
-      /**
-       * A secondary configuration attribute for the animation. The class
-       * `<baseClass>-<transitionType` is applied to the animated node during
-       * `setup`.
-       *
-       * @attribute transitionType
-       * @type string
-       */
-      transitionType: null
-    },
-
-    registerCallback: function(element) {
-      this.transitionStyle = element.templateContent().firstElementChild;
-    },
-
-    // template is just for loading styles, we don't need a shadowRoot
-    fetchTemplate: function() {
-      return null;
-    },
-
-    go: function(node, state) {
-      if (state.opened !== undefined) {
-        this.transitionOpened(node, state.opened);
-      }
-    },
-
-    setup: function(node) {
-      if (!node._hasTransitionStyle) {
-        if (!node.shadowRoot) {
-          node.createShadowRoot().innerHTML = '<content></content>';
-        }
-        this.installScopeStyle(this.transitionStyle, 'transition',
-            node.shadowRoot);
-        node._hasTransitionStyle = true;
-      }
-      node.classList.add(this.baseClass);
-      if (this.transitionType) {
-        node.classList.add(this.baseClass + '-' + this.transitionType);
-      }
-    },
-
-    teardown: function(node) {
-      node.classList.remove(this.baseClass);
-      if (this.transitionType) {
-        node.classList.remove(this.baseClass + '-' + this.transitionType);
-      }
-    },
-
-    transitionOpened: function(node, opened) {
-      this.listenOnce(node, this.completeEventName, function() {
-        node.classList.toggle(this.revealedClass, opened);
-        if (!opened) {
-          node.classList.remove(this.closedClass);
-        }
-        this.complete(node);
-      });
-      node.classList.toggle(this.openedClass, opened);
-      node.classList.toggle(this.closedClass, !opened);
-    }
-
-  });
-</script>
-</polymer-element>
-
-<core-transition-css id="core-transition-fade"></core-transition-css>
-<core-transition-css id="core-transition-center" transitiontype="center"></core-transition-css>
-<core-transition-css id="core-transition-top" transitiontype="top"></core-transition-css>
-<core-transition-css id="core-transition-bottom" transitiontype="bottom"></core-transition-css>
-<core-transition-css id="core-transition-left" transitiontype="left"></core-transition-css>
-<core-transition-css id="core-transition-right" transitiontype="right"></core-transition-css>
-
 <!--
 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
@@ -12789,92 +19168,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 
 
 
-<!--
-Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--->
-
-<!--
-`core-menu` is a selector which styles to looks like a menu.
-
-    <core-menu selected="0">
-      <core-item icon="settings" label="Settings"></core-item>
-      <core-item icon="dialog" label="Dialog"></core-item>
-      <core-item icon="search" label="Search"></core-item>
-    </core-menu>
-    
-When an item is selected the `core-selected` class is added to it.  The user can
-use the class to add more stylings to the selected item.
-
-    core-item.core-selected {
-      color: red;
-    }
-
-The `selectedItem` property references the selected item.
-
-    <core-menu selected="0" selectedItem="{{item}}">
-      <core-item icon="settings" label="Settings"></core-item>
-      <core-item icon="dialog" label="Dialog"></core-item>
-      <core-item icon="search" label="Search"></core-item>
-    </core-menu>
-
-    <div>selected label: {{item.label}}</div>
-
-The `core-select` event signals selection change.
-
-    <core-menu selected="0" on-core-select="{{selectAction}}">
-      <core-item icon="settings" label="Settings"></core-item>
-      <core-item icon="dialog" label="Dialog"></core-item>
-      <core-item icon="search" label="Search"></core-item>
-    </core-menu>
-
-    ...
-
-    selectAction: function(e, detail) {
-      if (detail.isSelected) {
-        var selectedItem = detail.item;
-        ...
-      }
-    }
-
-@group Polymer Core Elements
-@element core-menu
-@extends core-selector
--->
-
-
-
-<polymer-element name="core-menu" extends="core-selector" assetpath="polymer/bower_components/core-menu/">
-<template>
-
-  <style>/*
-Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-*/
-
-:host {
-  display: block;
-  margin: 12px;
-}
-
-polyfill-next-selector { content: ':host > core-item'; }
-::content > core-item {
-  cursor: default;
-}
-</style>
-  
-  <shadow></shadow>
-  
-</template>
-<script>Polymer('core-menu');</script></polymer-element>
 
 <!--
 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
@@ -13444,6 +19737,8 @@ core-item {
 
 
 
+
+
 <polymer-element name="services-list" attributes="api cbServiceClicked" assetpath="polymer/">
   <template>
     <style>
@@ -13463,7 +19758,7 @@ core-item {
 
     <template if="{{cbServiceClicked}}">
       <style>
-      a {
+      a, core-submenu {
         text-decoration: underline;
         cursor: pointer;
       }
@@ -13474,7 +19769,7 @@ core-item {
       <core-menu selected="0">
       
         <template repeat="{{serv in services}}">
-          <core-submenu icon="settings" label="{{serv.domain}}">
+          <core-submenu icon="{{serv.domain | getIcon}}" label="{{serv.domain}}">
             <template repeat="{{service in serv.services}}">
               <a on-click="{{serviceClicked}}" data-domain="{{serv.domain}}">{{service}}</a>
             </template>
@@ -13496,6 +19791,10 @@ core-item {
       this.api.addEventListener('services-updated', this.servicesUpdated.bind(this))
     },
 
+    getIcon: function(domain) {
+      return (new DomainIcon).icon(domain);
+    },
+
     servicesUpdated: function() {
       this.services = this.api.services;
     },
@@ -13785,7 +20084,7 @@ core-item {
     },
 
     _sortStates: function(states) {
-      return states.sort(function(one, two) {
+      states.sort(function(one, two) {
         if (one.entity_id > two.entity_id) {
           return 1;
         } else if (one.entity_id < two.entity_id) {
@@ -13813,6 +20112,7 @@ core-item {
       }
 
       if(!stateFound) {
+        this._enhanceState(state);
         this.states.push(new_state);
         this._sortStates(this.states);
       }
@@ -13820,6 +20120,14 @@ core-item {
       this.fire('states-updated')
     },
 
+    _enhanceState: function(state) {
+      var parts = state.entity_id.split(".");
+      state.domain = parts[0];
+      state.entity = parts[1];
+      state.entityDisplay = state.entity.replace(/_/g, " ");
+      state.stateDisplay = state.state.replace(/_/g, " ");
+    },
+
     // call api methods
     fetchState: function(entityId) {
       var successStateUpdate = function(new_state) {
@@ -13831,7 +20139,9 @@ core-item {
 
     fetchStates: function(onSuccess, onError) {
       var successStatesUpdate = function(newStates) {
-        this.states = this._sortStates(newStates);
+        this._sortStates(newStates);
+        newStates.map(this._enhanceState);
+        this.states = newStates;
 
         this.fire('states-updated')
 
@@ -13882,7 +20192,7 @@ core-item {
       }
 
       var successToast = function(new_state) {
-        this.showToast("State of "+entity_id+" successful set to "+state+".");
+        this.showToast("State of "+entity_id+" set to "+state+".");
         this._pushNewState(new_state);
       }
 
@@ -13892,7 +20202,13 @@ core-item {
 
     call_service: function(domain, service, parameters) {
       var successToast = function() {
-        this.showToast("Service "+domain+"/"+service+" successful called.");
+        if(service == "turn_on" && parameters.entity_id) {
+          this.showToast("Turned on " + parameters.entity_id + '.');
+        } else if(service == "turn_off") {
+          this.showToast("Turned off " + parameters.entity_id + '.');
+        } else {
+          this.showToast("Service "+domain+"/"+service+" called.");  
+        }
 
         // if we call a service on an entity_id, update the state
         if(parameters && parameters.entity_id) {
@@ -13924,7 +20240,7 @@ core-item {
       eventData = eventData ? JSON.parse(eventData) : "";
 
       var successToast = function() {
-        this.showToast("Event "+eventType+" successful fired.");
+        this.showToast("Event "+eventType+" fired.");
       }
 
       this.call_api("POST", "events/" + eventType,
@@ -13994,6 +20310,10 @@ core-item {
     showToast: function(message) {
       this.$.toast.text = message;
       this.$.toast.show();
+    },
+
+    logOut: function() {
+      this.auth = "";
     }
 
   });
@@ -14058,11 +20378,20 @@ core-item {
     },
 
     domReady: function() {
+      document.getElementById('init').remove();
+
       if(this.auth) {
         this.validatePassword();
       }
     },
 
+    authChanged: function(oldVal, newVal) {
+      // log out functionality
+      if(newVal == "" && this.state == "valid_auth") {
+        this.state = "no_auth";
+      }
+    },
+
     passwordKeyup: function(ev) {
       if(ev.keyCode == 13) {
         this.validatePassword();
diff --git a/homeassistant/components/http/www_static/polymer/bower.json b/homeassistant/components/http/www_static/polymer/bower.json
index 9490918ce0c..063b30c9f8d 100644
--- a/homeassistant/components/http/www_static/polymer/bower.json
+++ b/homeassistant/components/http/www_static/polymer/bower.json
@@ -19,8 +19,6 @@
     "font-roboto": "Polymer/font-roboto#~0.4.2",
     "core-header-panel": "Polymer/core-header-panel#~0.4.2",
     "core-toolbar": "Polymer/core-toolbar#~0.4.2",
-    "core-icon-button": "Polymer/core-icon-button#~0.4.2",
-    "paper-fab": "Polymer/paper-fab#~0.4.2",
     "paper-toast": "Polymer/paper-toast#~0.4.2",
     "paper-dialog": "Polymer/paper-dialog#~0.4.2",
     "paper-button": "Polymer/paper-button#~0.4.2",
@@ -31,6 +29,9 @@
     "core-item": "Polymer/core-item#~0.4.2",
     "core-icons": "polymer/core-icons#~0.4.2",
     "paper-toggle-button": "polymer/paper-toggle-button#~0.4.2",
-    "paper-tabs": "polymer/paper-tabs#~0.4.2"
+    "paper-tabs": "polymer/paper-tabs#~0.4.2",
+    "paper-icon-button": "polymer/paper-icon-button#~0.4.2",
+    "paper-menu-button": "polymer/paper-menu-button#~0.4.2",
+    "paper-item": "polymer/paper-item#~0.4.2"
   }
 }
diff --git a/homeassistant/components/http/www_static/polymer/domain-icon.html b/homeassistant/components/http/www_static/polymer/domain-icon.html
index daf80e873af..bdf487b2e32 100644
--- a/homeassistant/components/http/www_static/polymer/domain-icon.html
+++ b/homeassistant/components/http/www_static/polymer/domain-icon.html
@@ -6,15 +6,19 @@
 <link rel="import" href="bower_components/core-icons/image-icons.html">
 <link rel="import" href="bower_components/core-icons/hardware-icons.html">
 
-<polymer-element name="domain-icon" attributes="domain">
+<polymer-element name="domain-icon"
+  attributes="domain state" constructor="DomainIcon">
   <template>
-    <core-icon icon="{{icon(domain)}}"></core-icon>
+    <core-icon icon="{{icon(domain, state)}}"></core-icon>
   </template>
   <script>
   Polymer({
 
-    icon: function() {
-      switch(this.domain) {
+    icon: function(domain, state) {
+      switch(domain) {
+        case "homeassistant":
+          return "home";
+
         case "group":
           return "social:communities";
 
@@ -25,8 +29,11 @@
           return "settings-input-svideo";
 
         case "chromecast":
-          // hardware:cast-connected
-          return "hardware:cast";
+          if(state && state != "idle") {
+            return "hardware:cast-connected";
+          } else {
+            return "hardware:cast";
+          }
 
         case "process":
           return "hardware:memory"
diff --git a/homeassistant/components/http/www_static/polymer/home-assistant-api.html b/homeassistant/components/http/www_static/polymer/home-assistant-api.html
index 8219129b863..e08c57d4d46 100644
--- a/homeassistant/components/http/www_static/polymer/home-assistant-api.html
+++ b/homeassistant/components/http/www_static/polymer/home-assistant-api.html
@@ -58,7 +58,7 @@
     },
 
     _sortStates: function(states) {
-      return states.sort(function(one, two) {
+      states.sort(function(one, two) {
         if (one.entity_id > two.entity_id) {
           return 1;
         } else if (one.entity_id < two.entity_id) {
@@ -86,6 +86,7 @@
       }
 
       if(!stateFound) {
+        this._enhanceState(state);
         this.states.push(new_state);
         this._sortStates(this.states);
       }
@@ -93,6 +94,14 @@
       this.fire('states-updated')
     },
 
+    _enhanceState: function(state) {
+      var parts = state.entity_id.split(".");
+      state.domain = parts[0];
+      state.entity = parts[1];
+      state.entityDisplay = state.entity.replace(/_/g, " ");
+      state.stateDisplay = state.state.replace(/_/g, " ");
+    },
+
     // call api methods
     fetchState: function(entityId) {
       var successStateUpdate = function(new_state) {
@@ -104,7 +113,9 @@
 
     fetchStates: function(onSuccess, onError) {
       var successStatesUpdate = function(newStates) {
-        this.states = this._sortStates(newStates);
+        this._sortStates(newStates);
+        newStates.map(this._enhanceState);
+        this.states = newStates;
 
         this.fire('states-updated')
 
@@ -155,7 +166,7 @@
       }
 
       var successToast = function(new_state) {
-        this.showToast("State of "+entity_id+" successful set to "+state+".");
+        this.showToast("State of "+entity_id+" set to "+state+".");
         this._pushNewState(new_state);
       }
 
@@ -165,7 +176,13 @@
 
     call_service: function(domain, service, parameters) {
       var successToast = function() {
-        this.showToast("Service "+domain+"/"+service+" successful called.");
+        if(service == "turn_on" && parameters.entity_id) {
+          this.showToast("Turned on " + parameters.entity_id + '.');
+        } else if(service == "turn_off") {
+          this.showToast("Turned off " + parameters.entity_id + '.');
+        } else {
+          this.showToast("Service "+domain+"/"+service+" called.");  
+        }
 
         // if we call a service on an entity_id, update the state
         if(parameters && parameters.entity_id) {
@@ -197,7 +214,7 @@
       eventData = eventData ? JSON.parse(eventData) : "";
 
       var successToast = function() {
-        this.showToast("Event "+eventType+" successful fired.");
+        this.showToast("Event "+eventType+" fired.");
       }
 
       this.call_api("POST", "events/" + eventType,
@@ -267,6 +284,10 @@
     showToast: function(message) {
       this.$.toast.text = message;
       this.$.toast.show();
+    },
+
+    logOut: function() {
+      this.auth = "";
     }
 
   });
diff --git a/homeassistant/components/http/www_static/polymer/home-assistant-main.html b/homeassistant/components/http/www_static/polymer/home-assistant-main.html
index ff361341893..5e3b6e8f557 100644
--- a/homeassistant/components/http/www_static/polymer/home-assistant-main.html
+++ b/homeassistant/components/http/www_static/polymer/home-assistant-main.html
@@ -1,7 +1,8 @@
 <link rel="import" href="bower_components/core-header-panel/core-header-panel.html">
 <link rel="import" href="bower_components/core-toolbar/core-toolbar.html">
-<link rel="import" href="bower_components/core-icon-button/core-icon-button.html">
-<link rel="import" href="bower_components/paper-fab/paper-fab.html">
+<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="bower_components/paper-item/paper-item.html">
+<link rel="import" href="bower_components/paper-menu-button/paper-menu-button.html">
 <link rel="import" href="bower_components/paper-tabs/paper-tabs.html">
 <link rel="import" href="bower_components/paper-tabs/paper-tab.html">
 
@@ -24,33 +25,41 @@
 
       core-toolbar {
         background: #03a9f4;
-        font-size: 1.4rem;
+        font-size: 1.3rem;
         color: white;
       }
 
-      .content {
-        padding-bottom: 75px;
-        padding-right: 10px;
+      paper-tab {
+        text-transform: uppercase;
       }
 
-      paper-fab {
-        position: fixed;
-        bottom: 10px;
-        right: 10px;
+      .content {
+        padding-bottom: 10px;
+        padding-right: 10px;
       }
 
     </style>
 
-
-    <core-header-panel unresolved fullbleed>
+    <core-header-panel fullbleed>
 
       <core-toolbar class='medium-tall'>
         <div flex>
           Home Assistant
         </div>
-        <core-icon-button icon="refresh" on-click="{{handleRefreshClick}}"></core-icon-button>
-        <core-icon-button icon="developer-mode-tv" on-click="{{handleEventClick}}"></core-icon-button>
-        <core-icon-button icon="settings-remote" on-click="{{handleServiceClick}}"></core-icon-button>
+        <paper-icon-button icon="refresh" on-click="{{handleRefreshClick}}"></paper-icon-button>
+        <paper-icon-button icon="settings-remote"
+          on-click="{{handleServiceClick}}"></paper-icon-button>
+        <paper-menu-button icon="more-vert" halign="right">
+          <paper-item label="Set State">
+            <a on-click={{handleAddStateClick}}></a>
+          </paper-item>
+          <paper-item label="Trigger Event">
+            <a on-click={{handleEventClick}}></a>
+          </paper-item>
+          <paper-item label="Log Out">
+            <a on-click={{handleLogOutClick}}></a>
+          </paper-item>
+        </paper-menu-button>
 
         <div class="bottom fit" horizontal layout>
             <paper-tabs id="tabsHolder" noink flex
@@ -59,8 +68,10 @@
               <paper-tab>ALL</paper-tab>
 
               <template repeat="{{state in api.states}}">
-                <template if="{{isCustomGroup(state)}}">
-                  <paper-tab data-entity="{{state.entity_id}}">{{state.entity_id | groupName}}</paper-tab>
+                <template if="{{state.domain == 'group' && !state.attributes.auto}}">
+                  <paper-tab data-entity="{{state.entity_id}}">
+                    {{state.entityDisplay}}
+                  </paper-tab>
                 </template>
               </template>
                 
@@ -70,7 +81,6 @@
 
       <div class="content" flex>
         <states-cards api="{{api}}" filter="{{selectedTab}}"></states-cards>
-        <paper-fab icon="add" on-click={{handleAddStateClick}}></paper-fab>
       </div>
 
     </core-header-panel>
@@ -80,15 +90,6 @@
   Polymer({
     selectedTab: null,
 
-    isCustomGroup: function(state) {
-      return (state.entity_id.lastIndexOf('group.') == 0 &&
-              !state.attributes.auto);
-    },
-
-    groupName: function(entity_id) {
-      return entity_id.substring(6).toUpperCase().replace(/_/g, " ");
-    },
-
     tabClicked: function(ev) {
       if(ev.detail.isSelected) {
         // will be null for ALL tab
@@ -110,6 +111,10 @@
 
     handleAddStateClick: function() {
       this.api.showSetStateDialog();
+    },
+
+    handleLogOutClick: function() {
+      this.api.logOut();
     }
 
   });
diff --git a/homeassistant/components/http/www_static/polymer/services-list.html b/homeassistant/components/http/www_static/polymer/services-list.html
index 715e5b6a9bf..96fc19f97f9 100644
--- a/homeassistant/components/http/www_static/polymer/services-list.html
+++ b/homeassistant/components/http/www_static/polymer/services-list.html
@@ -3,6 +3,8 @@
 <link rel="import" href="bower_components/core-menu/core-submenu.html">
 <link rel="import" href="bower_components/core-item/core-item.html">
 
+<link rel="import" href="domain-icon.html">
+
 <polymer-element name="services-list" attributes="api cbServiceClicked">
   <template>
     <style>
@@ -22,7 +24,7 @@
 
     <template if={{cbServiceClicked}}>
       <style>
-      a {
+      a, core-submenu {
         text-decoration: underline;
         cursor: pointer;
       }
@@ -33,7 +35,7 @@
       <core-menu selected="0">
       
         <template repeat="{{serv in services}}">
-          <core-submenu icon="settings" label="{{serv.domain}}">
+          <core-submenu icon="{{serv.domain | getIcon}}" label="{{serv.domain}}">
             <template repeat="{{service in serv.services}}">
               <a on-click={{serviceClicked}} data-domain={{serv.domain}}>{{service}}</a>
             </template>
@@ -55,6 +57,10 @@
       this.api.addEventListener('services-updated', this.servicesUpdated.bind(this))
     },
 
+    getIcon: function(domain) {
+      return (new DomainIcon).icon(domain);
+    },
+
     servicesUpdated: function() {
       this.services = this.api.services;
     },
diff --git a/homeassistant/components/http/www_static/polymer/splash-login.html b/homeassistant/components/http/www_static/polymer/splash-login.html
index 16b9adac2ed..3b2721403ea 100644
--- a/homeassistant/components/http/www_static/polymer/splash-login.html
+++ b/homeassistant/components/http/www_static/polymer/splash-login.html
@@ -64,11 +64,20 @@
     },
 
     domReady: function() {
+      document.getElementById('init').remove();
+
       if(this.auth) {
         this.validatePassword();
       }
     },
 
+    authChanged: function(oldVal, newVal) {
+      // log out functionality
+      if(newVal == "" && this.state == "valid_auth") {
+        this.state = "no_auth";
+      }
+    },
+
     passwordKeyup: function(ev) {
       if(ev.keyCode == 13) {
         this.validatePassword();
diff --git a/homeassistant/components/http/www_static/polymer/state-badge.html b/homeassistant/components/http/www_static/polymer/state-badge.html
index 9fd34cd802b..d74f7cdf904 100644
--- a/homeassistant/components/http/www_static/polymer/state-badge.html
+++ b/homeassistant/components/http/www_static/polymer/state-badge.html
@@ -2,7 +2,7 @@
 
 <link rel="import" href="domain-icon.html">
 
-<polymer-element name="state-badge" attributes="domain state">
+<polymer-element name="state-badge" attributes="stateObj" noscript>
   <template>
     <style>
     :host {
@@ -12,6 +12,7 @@
       color: white;
       border-radius: 23px;
     }
+
     div {
       height: 45px;
       text-align: center;
@@ -23,12 +24,9 @@
     </style>
 
     <div horizontal layout center>
-      <domain-icon domain="{{domain}}"></domain-icon>
+      <domain-icon domain="{{stateObj.domain}}" state="{{stateObj.state}}">
+      </domain-icon>
     </div>
 
   </template>
-  <script>
-  Polymer({
-  });
-  </script>
 </polymer-element>
diff --git a/homeassistant/components/http/www_static/polymer/state-card.html b/homeassistant/components/http/www_static/polymer/state-card.html
index 169e1e66c4b..9bb95a32b4b 100755
--- a/homeassistant/components/http/www_static/polymer/state-card.html
+++ b/homeassistant/components/http/www_static/polymer/state-card.html
@@ -7,7 +7,7 @@
 <link rel="import" href="state-badge.html">
 
 <polymer-element name="state-card"
-  attributes="entity state last_changed state_attr cb_turn_on, cb_turn_off cb_edit">
+                 attributes="stateObj cb_turn_on, cb_turn_off cb_edit">
   <template>
     <style>
     :host {
@@ -79,44 +79,45 @@
       
       <div class="entity">
         <state-badge
-          id="badge" 
-          domain="{{domain}}"
-          state="{{state}}"
-          data-domain="{{domain}}"
-          data-state="{{state}}"
+          id="badge"
+          stateObj="{{stateObj}}"
+          data-domain="{{stateObj.domain}}"
+          data-state="{{stateObj.state}}"
           on-click="{{editClicked}}">
         </state-badge>
 
         <div class='info'>
           <div class='name'>
-            <template if="{{state_attr['friendly_name']}}">{{state_attr['friendly_name']}}</template>
-            <template if="{{!state_attr['friendly_name']}}">{{entity_id | makeReadable}}</template>
+            <template if="{{state_attr['friendly_name']}}">
+              {{state_attr['friendly_name']}}
+            </template>
+            <template if="{{!state_attr['friendly_name']}}">
+              {{stateObj.entityDisplay}}
+            </template>
           </div>
 
           <div class="time-ago">
             <core-tooltip label="{{last_changed}}" position="bottom">
-              {{last_changed_from_now}}
+              {{lastChangedFromNow}}
             </core-tooltip>
           </div>
           
         </div>
       </div>
 
-      <template if="{{!state_unknown}}">
-        <template if="{{state == 'on' || state == 'off'}}">
+      <template if="{{!stateUnknown}}">
+        <template if="{{stateObj.state == 'on' || stateObj.state == 'off'}}">
           <div class='state toggle' self-center flex>
             <paper-toggle-button checked="{{toggleChecked}}">
             </paper-toggle-button>
           </div>
         </template>
-        <template if="{{state != 'on' && state != 'off'}}">
-          <div class='state text'>
-            {{state | makeReadable}}
-          </div>
+        <template if="{{stateObj.state != 'on' && stateObj.state != 'off'}}">
+          <div class='state text'>{{stateObj.stateDisplay}}</div>
         </template>
       </template>
 
-      <template if="{{state_unknown}}">
+      <template if="{{stateUnknown}}">
         <div class="state" self-center flex>Updating..</div>
       </template>
 
@@ -126,28 +127,20 @@
   <script>
   Polymer({
     // attributes
-    entity: "",
-    state: "",
-    last_changed: "never",
-    state_attr: {},
+    stateObj: {},
+
     cb_turn_on: null,
     cb_turn_off: null,
     cb_edit: null,
-    state_unknown: false,
+    stateUnknown: false,
     toggleChecked: -1,
 
     computed: {
-      domain: "entity | parseDomain",
-      entity_id: "entity | parseEntityId",
-      last_changed_from_now: "last_changed | parseLastChangedFromNow"
+      lastChangedFromNow: "stateObj.last_changed | parseLastChangedFromNow",
     },
 
-    parseDomain: function(entity) {
-      return entity.split('.')[0];
-    },
-
-    parseEntityId: function(entity) {
-      return entity.split('.')[1];
+    observe: {
+      'stateObj.state': 'stateChanged'
     },
 
     parseLastChangedFromNow: function(lastChanged) {
@@ -160,24 +153,26 @@
         return;
       }
 
-      if(newVal && this.state == "off") {
+      if(newVal && this.stateObj.state == "off") {
         this.turn_on();
-      } else if(!newVal && this.state == "on") {
+      } else if(!newVal && this.stateObj.state == "on") {
         this.turn_off();
       }
     },
 
     stateChanged: function(oldVal, newVal) {
-      this.state_unknown = newVal == null;
+      this.stateUnknown = newVal == null;
       this.toggleChecked = newVal == "on"
 
-      // for domain light, set color of icon to light color if available
-      if(this.domain == "light" && newVal == "on" &&
-         this.state_attr.brightness && this.state_attr.xy_color) {
+      var state = this.stateObj;
 
-        var rgb = this.xyBriToRgb(this.state_attr.xy_color[0],
-                                  this.state_attr.xy_color[1],
-                                  this.state_attr.brightness);
+      // for domain light, set color of icon to light color if available
+      if(state.domain == "light" && newVal == "on" &&
+         state.attributes.brightness && state.attributes.xy_color) {
+
+        var rgb = this.xyBriToRgb(state.attributes.xy_color[0],
+                                  state.attributes.xy_color[1],
+                                  state.attributes.brightness);
         this.$.badge.style.color = "rgb(" + rgb.map(Math.floor).join(",") + ")";
       } else {
         this.$.badge.style.color = null;
@@ -186,11 +181,11 @@
 
     turn_on: function() {
       if(this.cb_turn_on) {
-        this.cb_turn_on(this.entity);
+        this.cb_turn_on(this.stateObj.entity_id);
 
         // unset state while we wait for an update
         var delayUnsetSate = function() {
-          this.state = null;
+          this.stateObj.state = null;
         }
         setTimeout(delayUnsetSate.bind(this), 500);      
       }
@@ -198,11 +193,11 @@
 
     turn_off: function() {
       if(this.cb_turn_off) {
-        this.cb_turn_off(this.entity);
+        this.cb_turn_off(this.stateObj.entity_id);
 
         // unset state while we wait for an update
         var delayUnsetSate = function() {
-          this.state = null;
+          this.stateObj.state = null;
         }
         setTimeout(delayUnsetSate.bind(this), 500);      
       }
@@ -210,20 +205,7 @@
 
     editClicked: function() {
       if(this.cb_edit) {
-        this.cb_edit(this.entity);
-      }
-    },
-
-    // used as filter
-    makeReadable: function(value) {
-      if(typeof value == "string") {
-        return value.replace(/_/g, " ");
-
-      } else if(Array.isArray(value)) {
-        return value.join(", ");
-
-      } else {
-        return value;
+        this.cb_edit(this.stateObj.entity_id);
       }
     },
 
diff --git a/homeassistant/components/http/www_static/polymer/states-cards.html b/homeassistant/components/http/www_static/polymer/states-cards.html
index 21fe91ad66b..8aab872d386 100755
--- a/homeassistant/components/http/www_static/polymer/states-cards.html
+++ b/homeassistant/components/http/www_static/polymer/states-cards.html
@@ -24,10 +24,7 @@
     <div horizontal layout wrap>
       <template repeat="{{state in states}}">
         <state-card
-          entity="{{state.entity_id}}"
-          state="{{state.state}}"
-          last_changed="{{state.last_changed}}"
-          state_attr="{{state.attributes}}"
+          stateObj="{{state}}"
           cb_turn_on="{{api.turn_on}}"
           cb_turn_off="{{api.turn_off}}"
           cb_edit={{editCallback}}>
