diff --git a/examples/polymer/epub-reader.html b/examples/polymer/epub-reader.html
new file mode 100644
index 0000000..8cff540
--- /dev/null
+++ b/examples/polymer/epub-reader.html
@@ -0,0 +1,1527 @@
+<!-- Monkey Patch addResolvePath to use assetpath -->
+<script>Polymer.addResolvePath = function (proto, element) {
+  var assetPath = element.getAttribute('assetpath');
+  var url = HTMLImports.getDocumentUrl(element.ownerDocument) || '';
+  if (url) {
+    var parts = url.split('/');
+    parts.pop();
+    if (assetPath) {
+      parts.push(assetPath);
+    }
+    parts.push('');
+    url = parts.join('/');
+  }
+  proto.resolvePath = function(path) {
+    return url + path;
+  }
+}</script>
+<polymer-element name="epub-controls" attributes="items" assetpath="epub-reader">
+  <template>
+      <style>
+        @host {
+          * {
+
+            background: #4e4e4e;
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 25px;
+            padding: 10px 0;
+            display: block;
+          }
+
+         
+        }
+
+       #controls a {
+          float: left;
+          margin-left: 12px;
+          opacity: .5;
+        }
+
+        #controls img:hover {
+          opacity: .8;
+        }
+
+        #controls img:active {
+          opacity: 1;
+        }
+
+        
+
+      </style>
+      <div id="controls">
+        
+        <!-- <a id="network"><img id="store" src="../../../demo/img/save.png" save="../../../demo/img/save.png" data-saved="../../../demo/img/saved.png"></a>
+        <a id="setting"><img id="settings" src="../../../demo/img/settings.png"></a>
+        <a id="bookmark"><img id="bookmarks" src="../../../demo/img/star.png"></a> -->
+      </div>
+  </template>
+  <script>
+
+    Polymer('epub-controls', {
+      ready: function() {
+        
+      }
+    });
+    
+  </script>
+</polymer-element>
+<polymer-element name="epub-settings" attributes="items" assetpath="epub-reader">
+  <template>
+      <div id="settings">
+        
+      </div>
+  </template>
+  <script>
+
+    Polymer('epub-settings', {
+      ready: function() {
+        
+      }
+    });
+    
+  </script>
+</polymer-element>
+<polymer-element name="epub-toc" attributes="items current" assetpath="epub-reader">
+  <template>
+      <style>
+        @host {
+          * {
+              overflow-x: hidden;
+              overflow-y: auto;
+              width: 300px;
+              height: 100%;
+              /*visibility: hidden;*/
+              -webkit-transition: visibility 0 ease .5s;
+              -moz-transition: visibility 0 ease .5s;
+              display: block;
+
+          }
+        }
+
+        #sidebar.open #toc {
+          overflow-y: auto;
+          visibility: visible;
+          -webkit-transition: visibility 0 ease 0;
+          -moz-transition: visibility 0 ease 0;
+        }
+
+       
+
+        #toclist > ul{
+          margin-top: 15px;
+          margin-bottom: 50px;
+          padding-left: 20px;
+          display: block;
+        }
+
+        #toclist li {
+          margin-bottom:10px;
+          width: 225px;
+          font-family: Georgia, "Times New Roman", Times, serif;
+          list-style: none;
+          text-transform: capitalize;
+        }
+
+        #toclist li:active,
+        #toclist li.currentChapter
+        {
+          list-style: none;
+        }
+
+        #toclist a {
+          color: #AAA;
+          text-decoration: none;
+        }
+
+        #toclist a.chapter {
+          font-size: 1em;
+        }
+
+        #toclist a.section {
+          font-size: .8em;
+        }
+
+        #toclist li.currentChapter > a,
+        #toclist li a:hover {
+          color: #f1f1f1
+        }
+
+        #toclist li.openChapter > a,
+        #toclist li a:hover {
+          color: #E2E2E2;
+        }
+
+        #toclist li ul {
+          padding-left:10px;
+          margin-top: 8px;
+          display: none;
+        }
+
+        #toclist li.currentChapter > ul,
+        #toclist li.openChapter > ul {
+          display: block;
+        }
+
+        #toclist h3 {
+          display: inline-block;
+          color: #ccc;
+          margin: 0;
+          padding: 0;
+          margin: 15px 0 0 20px;
+        }
+        
+      </style>
+      <div id="toclist">
+        <h3>Table of Contents</h3>
+        <ul>
+          <template id="tocTemplate" repeat="{{ items }}">
+            <li id="toc-{{ id }}">
+              <a href="#/{{ href }}" ref="{{ href }}" on-click="selectChapter" class="toc_link{{ type }}">{{ label }}</a>
+              <ul>
+                <template ref="tocTemplate" repeat="{{ subitems }}"></template>
+              </ul>
+            </li>
+          </template>
+        </ul>
+
+      </div>
+        
+    
+
+  </template>
+  <script>
+
+    Polymer('epub-toc', {
+      selectedItem: false,
+      ready: function() {
+        
+      },
+      itemsChanged: function() {
+        // console.log("toc", this.items)
+      },
+      selectChapter: function(e){
+
+        var selected = new CustomEvent('chapter-selected', { 
+            "bubbles" : true, 
+            "cancelable" : true, 
+            "detail": { 
+              "url" : e.toElement.getAttribute("ref") 
+            } 
+          });
+
+        this.dispatchEvent(selected);
+
+        if(this.selectedItem) {
+          this.selectedItem.classList.remove("currentChapter");
+          this.selectedItem = false;
+        }
+        
+      },
+      currentChanged: function() {
+        if(this.selectedItem) this.selectedItem.classList.remove("currentChapter");
+
+        this.selectedItem = this.shadowRoot.getElementById("toc-"+this.current);
+        if(this.selectedItem) this.selectedItem.classList.add("currentChapter");
+      }
+    });
+    
+  </script>
+</polymer-element>
+<polymer-element name="epub-sidebar" attributes="toc current" assetpath="epub-reader">
+  <template>
+      <style>
+      @host {
+         * {
+            display: block;
+            background: #6b6b6b;
+            position: absolute;
+            top: 0;
+            width: 300px;
+            height: 100%;
+            -webkit-transition: -webkit-transform .3s;
+            -moz-transition: -moz-transform .3s;
+            
+            overflow: hidden;
+         }
+      }
+
+      </style>
+
+      <!-- <epub-controls></epub-controls> -->
+      <epub-toc items="{{ toc }}" current="{{ current }}"></epub-toc>
+      <!-- <epub-setting></epub-setting>         -->
+  </template>
+  <script>
+
+    Polymer('epub-controls', {
+      ready: function() {
+        
+      }
+    });
+    
+  </script>
+</polymer-element>
+<polymer-element name="epub-titlebar" attributes="author title" assetpath="epub-reader">
+  <template>
+    <style>
+      @host {
+         * {
+            /*height: 8%;*/
+            min-height: 20px;
+            padding: 10px 0 10px 0;
+            margin: 0 50px 0 50px;
+            text-align: center;
+            color: #4f4f4f;
+            font-weight: 100;
+            font-family: Georgia, "Times New Roman", Times, serif;
+            opacity: .5;
+            -webkit-transition: opacity .5s;
+            -moz-transition: opacity .5s;
+            display: block;
+        }
+
+        *:hover {
+          opacity: 1;
+        }
+
+      }
+      
+      #book-title {
+        font-weight: 600;
+      }
+
+    </style>
+    <span id="book-title">{{ title }}</span>
+    <span id="title-seperator">&nbsp;&nbsp;–&nbsp;&nbsp;</span>
+    <span id="author">{{ author }}</span>
+  </template>
+  <script>
+
+    Polymer('epub-titlebar', {
+      ready: function() {
+        
+      }
+    });
+    
+  </script>
+</polymer-element>
+<script src="../../build/epub.min.js"></script>
+<polymer-element name="epub-js" attributes="src chapter width height restore spreads" assetpath="epub-reader">
+  <template>
+    <style>
+      @host {
+         * {
+           display: block;
+         }
+      }
+      #area {
+        width: 100%;
+        height: 100%;
+      }
+      iframe {
+        border: none;
+      }
+    </style>
+    <div id="area"></div>
+  </template>
+  <script>
+    Polymer('epub-js', {
+      src: '',
+      shown: false,
+      ready: function() {
+        
+      },
+      prevPage: function() {
+        if (this.Book) this.Book.prevPage();
+      },
+      nextPage: function() {
+        if (this.Book) this.Book.nextPage();
+      },
+      goto: function(url) {
+        if (this.Book) this.Book.goto(url);
+      },
+      srcChanged: function() {
+        
+        var src = this.src,
+            width = this.width || false,
+            height = this.height || false,
+            spreads = this.spreads != null ? true : false,
+            restore = this.restore != null ? true : false;
+
+        if(this.Book) this.Book.destroy();
+
+        this.Book = new EPUBJS.Book(src, {
+          width: width,
+          height: height,
+          spreads : spreads,
+          restore : restore
+        });
+
+        this.events();
+
+        this.Book.renderTo(this.$.area);
+
+      },
+      chapterChanged: function() {
+        if(this.Book) this.Book.goto(this.chapter);
+        console.log(this.chapter)
+      },
+      events: function() {
+        var element = this;
+
+
+        this.Book.on("book:ready", function() {
+          var ready = new CustomEvent('book-ready', { "bubbles" : true, "cancelable" : true });
+          element.dispatchEvent(ready);
+        });
+
+        this.Book.on("renderer:chapterDisplayed", function(e) {
+          
+          if(element.shown == false){
+            var bookdisplayed = new CustomEvent('book-displayed', { "bubbles" : true, "cancelable" : true });
+            element.dispatchEvent(bookdisplayed);
+            shown = true;
+          }
+          
+          var chapterdisplayed = new CustomEvent('chapter-displayed', { "bubbles" : true, "cancelable" : true, "detail" : {"chapter" : e} });
+          element.dispatchEvent(chapterdisplayed);
+
+        });
+
+        this.Book.on("renderer:chapterUnloaded", function(e) {
+          var unloaded = new CustomEvent('chapter-unloaded', { "bubbles" : true, "cancelable" : true });
+          element.dispatchEvent(unloaded);
+        });
+
+        this.Book.getMetadata().then(function(meta){
+          var metadata = new CustomEvent('book-metadata', { "bubbles" : true, "cancelable" : true, "detail" : {"meta" : meta} });
+          element.dispatchEvent(metadata);
+        });
+
+        this.Book.getToc().then(function(toc){
+          var toc = new CustomEvent('book-toc', { "bubbles" : true, "cancelable" : true, "detail": {"toc" : toc} });
+          element.dispatchEvent(toc);
+        });
+        
+      }
+      
+    });
+  </script>
+</polymer-element>
+<polymer-element name="epub-viewer" attributes="src" assetpath="epub-reader">
+  <template>
+    <style>
+      @host {
+         * {
+           display: block;
+         }
+      }
+
+      epub-js {
+        width: 100%;
+        height: 100%;
+      }
+
+      #prev {
+        left: 40px;
+      }
+
+      #next {  
+        right: 40px;
+      }
+
+      .arrow {
+        position: absolute;
+        top: 50%;
+        
+        font-size: 64px;
+        color: #E2E2E2;
+        font-family: arial, sans-serif;
+        font-weight: bold;
+        cursor: pointer;
+      }
+
+      .arrow:hover {
+        color: #777;
+      }
+      
+      .arrow.active, 
+      .arrow:active {
+        color: #000;
+      }
+
+      #divider {
+        position: absolute;
+        width: 1px;
+        border-right: 1px #000 solid;
+        height: 82%;
+        z-index: 1;
+        left: 50%;
+        top: 10%;
+        opacity: .15;
+        box-shadow: -2px 0 15px rgba(0, 0, 0, 1);
+        display: none;
+      }
+
+      #divider.show {
+        display: block;
+      }
+
+      #loader {
+        position: absolute;
+        z-index: 10;
+        left: 50%;
+        top: 50%;
+        margin: -33px 0 0 -33px;
+      }
+
+
+
+    </style>
+      <div id="divider"></div>
+
+      <div id="prev" on-click="prev" class="arrow">‹</div>
+
+      <epub-js id="book" restore="" spreads="" src="{{ src }}" chapter="{{ chapter }}" on-book-ready="bookReady" on-book-displayed="bookDisplayed" on-book-unloaded="bookUnloaded">
+        </epub-js>
+
+      <div id="next" on-click="next" class="arrow">›</div>
+
+      <div id="loader"><img src="../../demo/img/loader.gif"></div>
+  </template>
+  <script>
+    Polymer('epub-viewer', {
+      src: '',
+      ready: function() {
+        document.addEventListener('keydown', this.arrowKeys.bind(this), false);
+
+        // document.addEventListener('book-ready', this.bookReady.bind(this), false);
+        // document.addEventListener('book-displayed', this.bookDisplayed.bind(this), false);
+        
+      },
+      prev: function() {
+        this.$.book.prevPage();
+      },
+      next: function() {
+        this.$.book.nextPage();
+      },
+      bookReady: function() {
+        this.$.loader.style.display = "none";
+      },
+      bookDisplayed: function() {
+        this.$.divider.style.display = "block";
+      },
+      bookUnloaded: function() {
+        this.$.divider.style.display = "none";
+      },
+      srcChanged: function() {
+                
+      },
+      goto: function(url){
+        this.$.book.goto(url);
+      },
+      arrowKeys: function(e){
+
+        if (e.keyCode == 37) { 
+           this.$.book.prevPage();
+           this.$.prev.classList.add("active");
+           this.lock = true;
+           setTimeout(function(){
+             this.lock = false;
+             this.$.prev.classList.remove("active");
+           }.bind(this), 100);
+           return false;
+        }
+        if (e.keyCode == 39) { 
+           this.$.book.nextPage();
+           this.$.next.classList.add("active");
+           this.lock = true;
+           setTimeout(function(){
+            this.lock = false;
+            this.$.next.classList.remove("active");
+           }.bind(this), 100);
+           return false;
+        }
+      }
+      
+    });
+  </script>
+</polymer-element>
+<polymer-element name="polymer-ui-theme-aware" attributes="theme" assetpath="polymer-ui-elements/polymer-ui-theme-aware">
+  <script>
+    PolymerUI = { 
+      findTheme: function() {
+        var p = this, theme;
+        while (p && !theme) {
+          theme = p.getAttribute && p.getAttribute('theme');
+          p = p.parentNode || p.host;
+        }
+        this.theme = theme;
+      }
+    };
+    Polymer('polymer-ui-theme-aware', {
+      inserted: function() {
+        if (!this.theme) {
+          this.findTheme();
+        }
+      },
+      findTheme: PolymerUI.findTheme,
+      themeChanged: function(old) {
+        this.classList.switch(old, this.theme);
+      }
+    });
+  </script>
+</polymer-element>
+<polymer-element name="polymer-ui-icon" extends="polymer-ui-theme-aware" attributes="src size index icon" assetpath="polymer-ui-elements/polymer-ui-icon">
+  <template>
+    <link rel="stylesheet" href="polymer-ui-elements/polymer-ui-icon/polymer-ui-icon.css">
+  </template>
+  <script>
+    (function() {
+      Polymer('polymer-ui-icon', {
+        /**
+         * The URL of an image for the icon.
+         *
+         * @attribute src
+         * @type string
+         * @default ''
+         */
+        src: '',
+        /**
+         * Specifies the size of the icon.
+         *
+         * @attribute size
+         * @type string
+         * @default 24
+         */
+        size: 24,
+        /**
+         * Specifies the icon from the Polymer icon set.
+         *
+         * @attribute icon
+         * @type string
+         * @default ''
+         */
+        icon: '',
+        bx: 0,
+        by: 0,
+        ready: function() {
+          this.sizeChanged();
+        },
+        sizeChanged: function() {
+          this.style.width = this.style.height = this.size + 'px';
+        },
+        iconChanged: function() {
+          this.index = this.icon in icons ? icons[this.icon] : -1;
+        },
+        indexChanged: function() {
+          this.classList.add('polymer-ui-icons');
+          this.by = -this.size * this.index;
+          this.updateIcon();
+        },
+        srcChanged: function() {
+          this.classList.remove('polymer-ui-icons');
+          this.style.backgroundImage = 'url(' + this.src + ')';
+          this.updateIcon();
+        },
+        themeChanged: function(old) {
+          this.style.backgroundPosition = '';
+          this.classList.switch(old, this.theme);
+          this.asyncMethod('updateIcon');
+        },
+        updateIcon: function() {
+          if (this.src) {
+            this.style.backgroundPosition = 'center';
+          } else {
+            this.bx = parseFloat(getComputedStyle(this).backgroundPosition.split(' ').shift());
+            this.style.backgroundPosition = (this.bx + 'px') + ' ' + (this.by + 'px');
+          }
+        }
+      });
+      var icons = {
+        drawer: 0,
+        menu: 1,
+        search: 2,
+        dropdown: 3,
+        close: 4,
+        add: 5,
+        trash: 6,
+        refresh: 7,
+        settings: 8,
+        dialog: 9
+      };
+    })();
+  </script>
+</polymer-element>
+<polymer-element name="polymer-ui-icon-button" attributes="src index icon active" assetpath="polymer-ui-elements/polymer-ui-icon-button">
+  <template>
+    <link rel="stylesheet" href="polymer-ui-elements/polymer-ui-icon-button/polymer-ui-icon-button.css">
+    <polymer-ui-icon src="{{src}}" index="{{index}}" icon="{{icon}}"></polymer-ui-icon>
+  </template>
+  <script>
+    Polymer('polymer-ui-icon-button', {
+      /**
+       * The URL of an image for the icon.
+       *
+       * @attribute src
+       * @type string
+       * @default ''
+       */
+      src: '',
+      /**
+       * If true, border is placed around the button to indicate
+       * active state.
+       *
+       * @attribute active
+       * @type boolean
+       * @default false
+       */
+      active: false,
+      /**
+       * Specifies the icon from the Polymer icon set.
+       *
+       * @attribute icon
+       * @type string
+       * @default ''
+       */
+      icon: '',
+      /**
+       * If a theme is applied that includes an icon set, the index of the 
+       * icon to display.
+       *
+       * @attribute index
+       * @type number
+       * @default -1
+       */     
+      index: -1,
+      activeChanged: function() {
+        // TODO(sjmiles): sugar this common case
+        this.classList.toggle('selected', this.active);
+      }
+    });
+  </script>
+</polymer-element>
+<polymer-element name="polymer-media-query" attributes="query queryMatches" assetpath="polymer-elements/polymer-media-query">
+  <template>
+    <style>
+      @host {
+        * {
+          display: none;
+        }
+      }
+    </style>
+  </template>
+  <script>
+    Polymer('polymer-media-query', {
+      queryMatches: false,
+      query: '',
+      ready: function() {
+        this._mqHandler = this.queryHandler.bind(this);
+        this._mq = null;
+      },
+      queryChanged: function() {
+        if (this._mq) {
+          this._mq.removeListener(this._mqHandler);
+        }
+        this._mq = window.matchMedia('(' + this.query + ')');
+        this._mq.addListener(this._mqHandler);
+        this.queryHandler(this._mq);
+      },
+      queryHandler: function(mq) {
+        this.queryMatches = mq.matches;
+        this.asyncFire('polymer-mediachange', mq);
+      }
+    });
+  </script>
+</polymer-element>
+<polymer-element name="polymer-ui-toolbar" extends="polymer-ui-theme-aware" attributes="responsiveWidth" assetpath="polymer-ui-elements/polymer-ui-toolbar">
+  <template>
+    <link rel="stylesheet" href="polymer-elements/polymer-flex-layout/polymer-flex-layout.css">
+    <link rel="stylesheet" href="polymer-ui-elements/polymer-ui-toolbar/polymer-ui-toolbar.css">
+    <polymer-media-query query="max-width: {{responsiveWidth}}" queryMatches="{{mediaQueryMatches}}"></polymer-media-query>
+    <content></content>
+  </template>
+  <script>
+    Polymer('polymer-ui-toolbar', {
+      responsiveWidth: '800px',
+      mediaQueryMatches: false,
+      ready: function() {
+        this.classList.add('flexbox', 'align-center');
+        this.setAttribute('touch-action', 'none');
+      },
+      mediaQueryMatchesChanged: function() {
+        this.classList.toggle('narrow-layout', this.mediaQueryMatches);
+      }
+    });
+  </script>
+</polymer-element>
+<polymer-element name="g-icon" attributes="src size" assetpath="toolkit-ui/elements">
+  <template>
+    <style>
+      @host {
+        * {
+          display: inline-block;
+          vertical-align: middle;
+        }
+      }
+
+      #icon {
+        width: 24px;
+        height: 24px;
+        cursor: pointer;
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: 100% 100%;
+        opacity: .3;
+      }
+    </style>
+    <div id="icon" style="background-image:url({{src}}); width:{{size}}px; height:{{size}}px"></div>
+  </template>
+  <script>
+    Polymer('g-icon', {
+      /**
+       * The URL of an image for the icon.
+       *
+       * @attribute src
+       * @type string
+       * @default ''
+       */
+      src: '',
+      /**
+       * Specifies the size of the icon.
+       *
+       * @attribute size
+       * @type string
+       * @default 24
+       */
+      size: 24
+    });
+  </script>
+</polymer-element>
+<polymer-element name="g-menu-item" attributes="src label iconsize" assetpath="toolkit-ui/elements">
+  <template>
+    <style>
+      .label {
+        margin: 0 15px;
+      }
+
+      g-icon, .label, .label > * {
+        display: inline-block;
+        vertical-align: middle;
+      }
+    </style>
+    <g-icon src="{{src}}" size="{{iconsize}}"></g-icon>
+    <div class="label">
+      <span>{{label}}</span>
+      <content></content>
+    </div>
+  </template>
+  <script>
+    Polymer('g-menu-item', {
+      /**
+       * The URL of an image for the icon.
+       *
+       * @attribute src
+       * @type string
+       * @default ''
+       */
+      src: '',
+      /**
+       * Specifies the label for the menu item.
+       *
+       * @attribute label
+       * @type string
+       * @default ''
+       */
+      label: '',
+      /**
+       * Specifies the size of the icon.
+       *
+       * @attribute size
+       * @type string
+       * @default 24
+       */
+      iconsize: 24
+    });
+  </script>
+</polymer-element>
+<polymer-element name="g-selection" attributes="multi" assetpath="toolkit-ui/elements">
+  <template>
+    <style>
+      @host {
+        * {
+          display: none !important;
+        }
+      }
+    </style>
+  </template>
+  <script>
+    Polymer('g-selection', {
+      multi: false,
+      ready: function() {
+        this.clear();
+      },
+      clear: function() {
+        this.selection = [];
+      },
+      getSelection: function() {
+        return this.multi ? this.selection : this.selection[0];
+      },
+      isSelected: function(inItem) {
+        return this.selection.indexOf(inItem) >= 0;
+      },
+      setItemSelected: function(inItem, inIsSelected) {
+        if (inItem) {
+          if (inIsSelected) {
+            this.selection.push(inItem);
+          } else {
+            var i = this.selection.indexOf(inItem);
+            if (i >= 0) {
+              this.selection.splice(i, 1);
+            }
+          }
+          // TODO(sjmiles): consider replacing with summary
+          // notifications (asynchronous job)
+          this.asyncFire("select", {isSelected: inIsSelected, item: inItem});
+        }
+      },
+      select: function(inItem) {
+        if (this.multi) {
+          this.toggle(inItem);
+        } else if (this.getSelection() !== inItem) {
+          this.setItemSelected(this.getSelection(), false);
+          this.setItemSelected(inItem, true);
+        }
+      },
+      toggle: function(inItem) {
+        this.setItemSelected(inItem, !this.isSelected(inItem));
+      }
+    });
+  </script>
+</polymer-element>
+<polymer-element name="g-selector" on-tap="activateHandler" attributes="selected selectedClass selectedModel multi valueattr notap" assetpath="toolkit-ui/elements">
+  <template>
+    <g-selection id="selection" multi="{{multi}}" on-select="selectionSelect"></g-selection>
+    <content id="items" select="*"></content>
+  </template>
+  <script>
+    Polymer('g-selector', {
+      /**
+       * Gets or sets the selected element.  Default is to use the index
+       * of the currently selected element.
+       *
+       * If you want a specific attribute value of the selected element to be
+       * used instead of index, set "valueattr" to that attribute name.
+       *
+       * Example:
+       *
+       *     <g-selector valueattr="label" selected="foo">
+       *       <div label="foo"></div>
+       *       <div label="bar"></div>
+       *       <div label="zot"></div>
+       *     </g-selector>
+       *
+       * @attribute selected
+       * @type string
+       * @default null
+       */
+      selected: null,
+      /**
+       * If true, multiple selections are allowed.
+       *
+       * @attribute multi
+       * @type boolean
+       * @default false
+       */
+      multi: false,
+      /**
+       * Specifies the attribute to be used for "selected" attribute.
+       *
+       * @attribute valueattr
+       * @type string
+       * @default 'name'
+       */
+      valueattr: 'name',
+      /**
+       * Specifies the CSS class to be used to add to the selected element.
+       * 
+       * @attribute selectedClass
+       * @type string
+       * @default 'selected'
+       */
+      selectedClass: 'selected',
+      /**
+       * Returns the model associated with the selected element.
+       * 
+       * @attribute selectedModel
+       * @type Object
+       * @default null
+       */
+      selectedModel: null,
+      ready: function() {
+        this.setAttribute('touch-action', 'none');
+      },
+      get items() {
+        return this.$.items.getDistributedNodes();
+      },
+      get selection() {
+        return this.$.selection.getSelection();
+      },
+      selectedChanged: function() {
+        this.valueToSelection(this.selected);
+      },
+      valueToSelection: function(inValue) {
+        var item = this.items[this.valueToIndex(inValue)];
+        if (item) {
+          this.$.selection.select(item);
+          var t = item.templateInstance;
+          this.selectedModel = t ? t.model : undefined;
+        } else {
+          this.selectedModel = null;
+        }
+      },
+      valueToIndex: function(inValue) {
+        // find an item with value == inValue and return it's index
+        for (var i=0, items=this.items, c; (c=items[i]); i++) {
+          if (this.valueForNode(c) == inValue) {
+            return i;
+          }
+        }
+        // if no item found, the value itself is probably the index
+        return inValue;
+      },
+      valueForNode: function(inNode) {
+        return inNode[this.valueattr] || inNode.getAttribute(this.valueattr);
+      },
+      // events fired from <g-selection> object
+      selectionSelect: function(inEvent, inInfo) {
+        if (inInfo.item && this.selectedClass) {
+          inInfo.item.classList.toggle(this.selectedClass, inInfo.isSelected);
+        }
+      },
+      // event fired from host
+      activateHandler: function(inEvent) {
+        if (this.notap) {
+          return;
+        }
+        var items = this.items;
+        var i = this.findDistributedTarget(inEvent.target, items);
+        if (i >= 0) {
+          var selected = this.valueForNode(items[i]) || i;
+          if (this.multi) {
+            this.valueToSelection(selected);
+          } else {
+            this.selected = selected;
+          }
+          this.asyncFire('activate', {item: items[i]});
+        }
+      },
+      findDistributedTarget: function(target, nodes) {
+        // find first ancestor of target (including itself) that
+        // is in inNodes, if any
+        while (target && target != this) {
+          var i = Array.prototype.indexOf.call(nodes, target);
+          if (i >= 0) {
+            return i;
+          }
+          target = target.parentNode;
+        }
+      }
+    });
+  </script>
+</polymer-element>
+<polymer-element name="g-menu" extends="g-selector" assetpath="toolkit-ui/elements">
+  <template>
+    <style>
+      /*@polyfill g-menu-item */
+      shadow::-webkit-distributed(g-menu-item) {
+        display: block;
+        box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        height: 40px;
+        line-height: 35px;
+        padding: 0 10px;
+        margin: 10px;
+        -webkit-transform: translate3d(0, 0, 0);
+        border-radius: 3px;
+        border: 1px solid transparent;
+        font-weight: bold;
+        font-size: 15px;
+        cursor: pointer;
+        white-space: nowrap;
+        opacity: .5;
+      }
+      
+      /* TODO(sorvell): please note, styling broken due to:
+      https://code.google.com/p/chromium/issues/detail?id=229667
+      */
+      /*@polyfill g-menu-item.selected */
+      shadow::-webkit-distributed(g-menu-item.selected) {
+        background: #f2f2f2;
+        border: 1px solid rgba(0, 0, 0, 0.15);
+        opacity: 0.9;
+      }
+    </style>
+    <shadow></shadow>
+  </template>
+  <script>
+    Polymer('g-menu');
+  </script>
+</polymer-element>
+<polymer-element name="g-icon-button" attributes="src active" assetpath="toolkit-ui/elements">
+  <template>
+    <style>
+      @host {
+        * {
+          display: inline-block;
+          position: relative;
+          box-sizing: border-box;
+          -moz-box-sizing: border-box;
+          width: 44px;
+          height: 44px;
+          line-height: 24px;
+          padding: 10px;
+          cursor: pointer;
+          border: none;
+          background-color: rgba(0, 0, 0, 0);
+          background-position: top left;
+          background-size: cover;
+          background-repeat: no-repeat;
+          background-image: url(toolkit-ui/elements/images/btn_light.png);
+          background-position: 0 0;
+          vertical-align: middle;
+        }
+        
+        *:hover {
+          background-position: 0 -44px;
+        }
+        
+        *.selected {
+          background-position: 0 -88px;
+        }
+        
+        *:active, *.selected:active {
+          background-position: 0 -132px;
+        }
+      }
+    </style>
+    <g-icon src="{{src}}"></g-icon>
+  </template>
+  <script>
+    Polymer('g-icon-button', {
+      /**
+       * The URL of an image for the icon.
+       *
+       * @attribute src
+       * @type string
+       * @default ''
+       */
+      src: '',
+      /**
+       * If true, border is placed around the button to indicate
+       * active state.
+       *
+       * @attribute active
+       * @type boolean
+       * @default false
+       */
+      active: false,
+      activeChanged: function() {
+        // TODO(sjmiles): 'class' attributes should have special handling 
+        //   for this common use case
+        this.classList.toggle('selected', this.active);
+      }
+    });
+  </script>
+</polymer-element>
+<polymer-element name="g-overlay" attributes="opened autoCloseDisabled" on-webkitAnimationStart="openedAnimationStart" on-animationStart="openedAnimationStart" on-webkitAnimationEnd="openedAnimationEnd" on-animationEnd="openedAnimationEnd" on-webkitTransitionEnd="openedTransitionEnd" on-transitionEnd="openedTransitionEnd" on-tap="tapHandler" on-keydown="keydownHandler" assetpath="toolkit-ui/elements">
+
+<template>
+  <link rel="stylesheet" href="toolkit-ui/elements/css/g-overlay.css">
+  <link rel="stylesheet" polymer-scope="global" href="toolkit-ui/elements/css/g-overlay-global.css">
+  <content></content>
+</template>
+<script>
+  (function() {
+    // TODO(sorvell): need keyhelper component.
+    var ESCAPE_KEY = 27;
+    
+    // track overlays for z-index and focus managemant
+    var overlays = [];
+    var trackOverlays = function(inOverlay) {
+      if (inOverlay.opened) {
+        var z0 = currentOverlayZ();
+        overlays.push(inOverlay);
+        var z1 = currentOverlayZ();
+        if (z1 <= z0) {
+          applyOverlayZ(inOverlay, z0);
+        } 
+      } else {
+        var i = overlays.indexOf(inOverlay);
+        if (i >= 0) {
+          overlays.splice(i, 1);
+          setZ(inOverlay, null);
+        }
+      }
+    }
+    
+    var applyOverlayZ = function(inOverlay, inAboveZ) {
+      setZ(inOverlay, inAboveZ + 2);
+    }
+    
+    var setZ = function(inNode, inZ) {
+      inNode.style.zIndex = inZ;
+    }
+  
+    var currentOverlay = function() {
+      return overlays[overlays.length-1];
+    }
+    
+    var DEFAULT_Z = 10;
+    
+    var currentOverlayZ = function() {
+      var z;
+      var current = currentOverlay();
+      if (current) {
+        var z1 = window.getComputedStyle(current).zIndex;
+        if (!isNaN(z1)) {
+          z = Number(z1);
+        }
+      }
+      return z || DEFAULT_Z;
+    }
+    
+    var focusOverlay = function() {
+      var current = currentOverlay();
+      if (current) {
+        current.applyFocus();
+      }
+    }
+  
+    Polymer('g-overlay', {
+      /**
+       * Set opened to true to show an overlay and to false to hide it.
+       * A g-overlay may be made intially opened by setting its opened 
+       * attribute.
+       * @attribute opened
+       * @type boolean
+       * @default false
+       */
+      opened: 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,
+      timeout: 1000,
+      captureEventType: 'tap',
+      ready: function() {
+        if (this.tabIndex === undefined) {
+          this.tabIndex = -1;
+        }
+        this.setAttribute('touch-action', 'none');
+      },
+      /** 
+       * Toggle the opened state of the overlay.
+       * @method toggle
+       */
+      toggle: function() {
+        this.opened = !this.opened;
+      },
+      openedChanged: function() {
+        this.renderOpened();
+        trackOverlays(this);
+        if (!this.autoCloseDisabled) {
+          this.enableCaptureHandler(this.opened);
+        }
+        this.enableResizeHandler(this.opened);
+        this.fire('opened', this.opened);
+      },
+      enableHandler: function(inEnable, inMethodName, inNode, inEventName, inCapture) {
+        var m = 'bound' + inMethodName;
+        this[m] = this[m] || this[inMethodName].bind(this);
+        
+        inNode[inEnable ? 'addEventListener' : 'removeEventListener'](
+          inEventName, this[m], inCapture);
+      },
+      enableResizeHandler: function(inEnable) {
+        this.enableHandler(inEnable, 'resizeHandler', window, 
+          'resize');
+      },
+      enableCaptureHandler: function(inEnable) {
+        this.enableHandler(inEnable, 'captureHandler', document, 
+          this.captureEventType, true);
+      },
+      getFocusNode: function() {
+        return this.querySelector('[autofocus]') || this;
+      },
+      // TODO(sorvell): nodes stay focused when they become un-focusable due to
+      // an ancestory becoming display: none; file bug.
+      applyFocus: function() {
+        var focusNode = this.getFocusNode();
+        if (this.opened) {
+          focusNode.focus();
+        } else {
+          focusNode.blur();
+          focusOverlay();
+        }
+      },
+      renderOpened: function() {
+        this.classList.remove('closing');
+        this.classList.add('revealed');
+        // continue styling after delay so display state can change without
+        // aborting transitions
+        this.asyncMethod('continueRenderOpened');
+      },
+      continueRenderOpened: function() {
+        this.classList.toggle('opened', this.opened);
+        this.classList.toggle('closing', !this.opened);
+        //this.animating = this.asyncMethod('completeOpening', null, this.timeout);
+      },
+      completeOpening: function() {
+        //clearTimeout(this.animating);
+        this.animating = null;
+        this.classList.remove('closing');
+        this.classList.toggle('revealed', this.opened);
+        this.applyFocus();
+      },
+      openedAnimationEnd: function(e) {
+        if (!this.opened) {
+          this.classList.remove('animation');
+        }
+        // same steps as when a transition ends
+        this.openedTransitionEnd(e);
+      },
+      openedTransitionEnd: function(e) {
+        // TODO(sorvell): Necessary due to 
+        // https://bugs.webkit.org/show_bug.cgi?id=107892
+        // Remove when that bug is addressed.
+        if (e.target == this) {
+          this.completeOpening();
+          e.stopPropagation();
+          e.cancelBubble = true;
+        }
+      },
+      openedAnimationStart: function(e) {
+        this.classList.add('animation');
+        e.stopPropagation();
+        e.cancelBubble = true;
+      },
+      tapHandler: function(e) {
+        if (e.target && e.target.hasAttribute('overlay-toggle')) {
+          this.toggle();
+        } else {
+          if (this.autoCloseJob) {
+            this.autoCloseJob.stop();
+            this.autoCloseJob = null;
+          }
+        }
+      },
+      // TODO(sorvell): This approach will not work with modal. For this we need a
+      // scrim.
+      captureHandler: function(e) {
+        if (!this.autoCloseDisabled && (currentOverlay() == this) && (this 
+            != e.target) && !(this.contains(e.target))) {
+          this.autoCloseJob = this.job(this.autoCloseJob, function() {
+            this.opened = false;
+          });
+        }
+      },
+      keydownHandler: function(e) {
+        if (!this.autoCloseDisabled && (e.keyCode == ESCAPE_KEY)) {
+          this.opened = false;
+          e.stopPropagation();
+          e.cancelBubble = true;
+        }
+      },
+      /**
+       * Extensions of g-overlay should implement the resizeHandler
+       * method to adjust the size and position of the overlay when the 
+       * browser window resizes.
+       * @method resizeHandler
+       */
+      resizeHandler: function() {
+      }
+    });
+  })();
+</script>
+</polymer-element>
+<polymer-element name="g-menu-button" attributes="src selected opened responsive valign selectedClass" assetpath="toolkit-ui/elements">
+  <template>
+    <link rel="stylesheet" href="toolkit-ui/elements/css/g-menu-button.css">
+    <g-icon-button id="button" touch-action="none" on-tap="toggle" src="{{src}}" active="{{opened}}"></g-icon-button>
+    <div responsive="{{responsive}}" valign="{{valign}}">
+      <g-overlay id="overlay" class="slideup" opened="{{opened}}" modal="">
+        <div class="arrow"></div>
+        <div class="arrow arrow-inner"></div>
+        <g-menu id="overlayMenu" selected="{{selected}}" selectedClass="{{selectedClass}}" on-activate="toggle">
+          <content select="*"></content>
+        </g-menu>
+      </g-overlay>
+    </div>
+  </template>
+  <script>
+    Polymer('g-menu-button', {
+      src: '',
+      selected: '',
+      opened: false,
+      responsive: false,
+      valign: 'center',
+      //* Toggle the opened state of the dropdown.
+      toggle: function() {
+        this.opened = !this.opened;
+      },
+      //* Returns the selected item.
+      get selection() {
+        return this.$.overlayMenu.selection;
+      }
+    });
+  </script>
+</polymer-element>
+<polymer-element name="epub-reader" attributes="src" assetpath="epub-reader">
+  <template>
+    
+    <!-- <link rel="stylesheet" href="../../demo/css/main.css"> -->
+    <!-- <link rel="stylesheet" href="../ ../../demo/css/popup.css"> -->
+
+    <style>
+      @host {
+         * {
+            background: #6b6b6b;
+         }
+      }
+      epub-viewer {
+        width: 80%;
+        height: 80%;
+        margin: 2.5% auto;
+        max-width: 1250px;
+      }
+
+      #main {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        border-radius: 5px;
+        background: #fff;
+        overflow: hidden;
+        -webkit-transition: -webkit-transform .5s;
+        -moz-transition: -moz-transform .5s;
+        
+        -moz-box-shadow:    inset 0 0 50px rgba(0,0,0,.08);
+        -webkit-box-shadow: inset 0 0 50px rgba(0,0,0,.08);
+        box-shadow:         inset 0 0 50px rgba(0,0,0,.08);
+      } 
+
+      #main.closed {
+        -webkit-transform: translate(300px, 0);
+        -moz-transform: translate(300px, 0);
+      }
+
+      #opener {
+        padding: 10px 10px;
+        float: left;
+      }
+
+      #opener #open {
+        width: 25px;
+      }
+
+      polymer-ui-toolbar {
+        font-size: 16px !important;
+        background-color: none;
+        border: none !important;
+        padding: 0 6px;
+      }
+
+    </style>
+
+    <epub-sidebar id="sidebar" toc="{{ toc }}" current="{{ chapter }}" on-chapter-selected="chapterSelected">
+    </epub-sidebar>
+      
+    <div id="main">
+      
+      <polymer-ui-toolbar>
+        <!-- <polymer-ui-icon-button icon="drawer"></polymer-ui-icon-button> -->
+        <polymer-ui-icon-button icon="menu" on-click="toggleDrawer"></polymer-ui-icon-button>
+        <epub-titlebar flex="" author="{{ author }}" title="{{ title }}"></epub-titlebar>
+        <!-- <polymer-ui-icon-button icon="add"></polymer-ui-icon-button> -->
+        <!-- <polymer-ui-icon-button icon="settings"></polymer-ui-icon-button> -->
+
+        <g-menu-button responsive="true" selectedClass="" src="epub-reader/assets/settings.png" valign="right" on-activate="menuActivate">
+          <g-menu-item src="epub-reader/assets/add.png" on-tap="publishElement">Bookmark</g-menu-item>
+          <g-menu-item src="epub-reader/assets/fullscreen.png" on-tap="toggleFullscreen">Fullscreen</g-menu-item>
+        </g-menu-button>
+
+      
+      </polymer-ui-toolbar>
+
+      <!-- <polymer-ui-toggle-button></polymer-ui-toggle-button> -->
+      
+      <!-- <div id="opener"> -->
+        
+        
+        <!-- <a id="open"><img src="../../../demo/img/menu-icon.png" data-close="../../../demo/img/close.png" data-open="../../../demo/img/menu-icon.png"></a> -->
+      <!-- </div> -->
+            
+      
+      <epub-viewer id="viewer" src="{{ src }}" chapter="{{ chapter }}" on-book-ready="bookReady" on-book-metadata="bookMetadata" on-book-toc="bookToc" on-chapter-displayed="chapterDisplayed">
+      
+      </epub-viewer>
+
+    </div>
+
+  </template>
+  <script>
+
+    Polymer('epub-reader', {
+      src: '',
+      drawOpen: false,
+      ready: function() {
+
+      },
+      bookReady: function(e){
+        // console.log("book is ready")
+      },
+      bookMetadata: function(e){
+        this.meta = e.detail.meta;
+
+        this.title = this.meta.bookTitle;
+        this.author = this.meta.creator;
+
+        document.title = this.title+" – "+this.meta.creator;
+      },
+      bookToc: function(e){
+        this.toc = e.detail.toc;
+      },
+      toggleDrawer: function(e) {
+        this.drawOpen = !this.drawOpen;
+        this.$.main.classList.toggle("closed");
+      },
+      chapterSelected: function(e) {
+        // this.chapter = e.detail.url;
+        this.$.viewer.goto(e.detail.url);
+        this.$.main.classList.toggle("closed");
+      },
+      chapterDisplayed: function(e) {
+        this.chapter = e.detail.chapter.id;
+      },
+      toggleFullscreen: function() {
+        var docEl = document.documentElement,
+            requestFullScreen = docEl.requestFullScreen ||
+                                docEl.webkitRequestFullScreen ||
+                                docEl.mozRequestFullScreen;
+
+            requestFullScreen();
+      }
+
+    });
+    
+  </script>
+</polymer-element>
\ No newline at end of file
diff --git a/examples/polymer/epub-reader/epub-js.html b/examples/polymer/epub-reader/epub-js.html
index c10eca6..7055a60 100644
--- a/examples/polymer/epub-reader/epub-js.html
+++ b/examples/polymer/epub-reader/epub-js.html
@@ -1,8 +1,8 @@
 <script src="../../../build/epub.min.js"></script>
 
-<script type="text/javascript">
+<!-- <script type="text/javascript">
   //-- Setups
-</script>
+</script> -->
 
 <polymer-element name="epub-js" attributes="src chapter width height restore spreads">
   <template>
diff --git a/examples/polymer/index.html b/examples/polymer/index.html
index 544be0c..f250335 100644
--- a/examples/polymer/index.html
+++ b/examples/polymer/index.html
@@ -6,8 +6,10 @@
     <meta charset="UTF-8">
     <script src="../../libs/polymer/polymer.min.js"></script>
 
-    <link rel="import" href="epub-reader/epub-reader.html">
-    
+    <!-- // <script src="../../build/epub.min.js"></script> -->
+
+    <!-- <link rel="import" href="epub-reader/epub-reader.html"> -->
+    <link rel="import" href="epub-reader.html">
 
     <link rel="stylesheet" href="../../demo/css/normalize.css">
     <style>
diff --git a/examples/polymer/vulcanize/.gitignore b/examples/polymer/vulcanize/.gitignore
new file mode 100755
index 0000000..ad96abf
--- /dev/null
+++ b/examples/polymer/vulcanize/.gitignore
@@ -0,0 +1,2 @@
+output.html
+node_modules
diff --git a/examples/polymer/vulcanize/README.md b/examples/polymer/vulcanize/README.md
new file mode 100755
index 0000000..492005a
--- /dev/null
+++ b/examples/polymer/vulcanize/README.md
@@ -0,0 +1,86 @@
+# Vulcan
+
+### Concatenate a set of Web Components into one file
+
+>Named for the [Vulcanization](http://en.wikipedia.org/wiki/Vulcanization) process that turns polymers into more durable
+materials.
+
+## Getting Started
+- Install the node dependencies with `npm install`
+  - Depends on [cheerio](https://github.com/MatthewMueller/cheerio) and [nopt](https://github.com/isaacs/nopt)
+- Give some input html files with the `--input` or `-i` flags
+  - Input html should have `<link rel="import">` tags
+- Specify an output html file with `--output` or `-o`
+  - Defaults to `output.html` in the current directory
+- URL paths are adjusted for the new output location automatically (execpt ones set in Javascript)
+- Once finished, link the final output html into your app page with `<link rel="import">`.
+
+## Example
+
+Say we have three html files: `index.html`, `x-app.html`, and `x-dep.html`.
+
+index.html:
+
+```html
+<!DOCTYPE html>
+<link rel="import" href="app.html">
+<x-app></x-app>
+```
+
+app.html:
+
+```html
+<link rel="import" href="path/to/x-dep.html">
+<polymer-element name="x-app">
+  <template>
+    <x-dep></x-dep>
+  </template>
+  <script>Polymer('x-app')</script>
+</polymer-element>
+```
+
+x-dep.html:
+
+```html
+<polymer-element name="x-dep">
+  <template>
+    <img src="x-dep-icon.jpg">
+  </template>
+  <script>
+    Polymer('x-dep');
+  </script>
+</polymer-element>
+```
+
+Running vulcan on `index.html`, and specifying `build.html` as the output:
+
+    node vulcan.js -i index.html -o build.html
+
+Will result in `build.html` that appears as so:
+
+```html
+<polymer-element name="x-dep" assetpath="path/to/">
+  <template>
+    <img src="path/to/x-dep-icon.jpg">
+  </template>
+  <script>
+    Polymer('x-dep');
+  </script>
+</polymer-element>
+<polymer-element name="x-app" assetpath="">
+  <template>
+    <x-dep></x-dep>
+  </template>
+  <script>
+    Polymer('x-app');
+  </script>
+</polymer-element>
+```
+
+To use this, make `build.html` the only import in `index.html`:
+
+```html
+<!DOCTYPE html>
+<link rel="import" href="build.html">
+<x-app></x-app>
+```
diff --git a/examples/polymer/vulcanize/package.json b/examples/polymer/vulcanize/package.json
new file mode 100755
index 0000000..2d98ec9
--- /dev/null
+++ b/examples/polymer/vulcanize/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "vulcanize",
+  "version": "0.0.0",
+  "description": "Concat all the components into one output file, with dependencies in the proper order",
+  "main": "vulcan.js",
+  "dependencies": {
+    "cheerio": "~0.11.0",
+    "nopt": "~2.1.1"
+  },
+  "devDependencies": {},
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": "",
+  "author": "",
+  "license": "BSD",
+  "readmeFilename": "README.md"
+}
diff --git a/examples/polymer/vulcanize/vulcan.js b/examples/polymer/vulcanize/vulcan.js
new file mode 100755
index 0000000..a7f1e2c
--- /dev/null
+++ b/examples/polymer/vulcanize/vulcan.js
@@ -0,0 +1,183 @@
+var fs = require('fs');
+var path = require('path');
+var cheerio = require('cheerio');
+var nopt = require('nopt');
+
+var options = nopt(
+  {
+    'output': path,
+    'input': [path, Array],
+    'verbose': Boolean
+  },
+  {
+    'o': ['--output'],
+    'i': ['--input'],
+    'v': ['--verbose']
+  }
+);
+
+if (!options.input) {
+  console.error('No input files given');
+  process.exit(1);
+}
+
+if (!options.output) {
+  console.warn('Default output to output.html');
+  options.output = path.resolve('output.html');
+}
+
+var outputDir = path.dirname(options.output);
+
+var IMPORTS = 'link[rel="import"][href]';
+var ELEMENTS = 'polymer-element';
+var URL_ATTR = ['href', 'src', 'action', 'style'];
+var URL_ATTR_SEL = '[' + URL_ATTR.join('],[') + ']';
+var ABS_URL = /(^data:)|(^http[s]?:)|(^\/)/;
+var URL = /url\([^)]*\)/g;
+var URL_TEMPLATE = '{{.*}}';
+
+function concatElement(dir, output, e) {
+  e = resolveElementPaths(dir, output, e);
+  buffer.push(e);
+}
+
+function resolveElementPaths(input, output, element) {
+  var $ = cheerio.load(element);
+  resolvePaths(input, output, $);
+  return $.html(ELEMENTS);
+}
+
+function resolvePaths(input, output, $) {
+  // resolve attributes
+  $(URL_ATTR_SEL).each(function() {
+    var val;
+    URL_ATTR.forEach(function(a) {
+      if (val = this.attr(a)) {
+        if (val.search(URL_TEMPLATE) < 0) {
+          if (a === 'style') {
+            this.attr(a, rewriteURL(input, output, val));
+          } else {
+            this.attr(a, rewriteRelPath(input, output, val));
+          }
+        }
+      }
+    }, this);
+  });
+  // resolve style elements
+  $('style').each(function() {
+    var val = this.html();
+    this.html(rewriteURL(input, output, val));
+  });
+}
+
+function rewriteRelPath(inputPath, outputPath, rel) {
+  if (ABS_URL.test(rel)) {
+    return rel;
+  }
+  var abs = path.resolve(inputPath, rel);
+  return path.relative(outputPath, abs);
+}
+
+function rewriteURL(inputPath, outputPath, cssText) {
+  return cssText.replace(URL, function(match) {
+    var path = match.replace(/["']/g, "").slice(4, -1);
+    path = rewriteRelPath(inputPath, outputPath, path);
+    return 'url(' + path + ')';
+  });
+}
+
+function readDocument(docname) {
+  if (options.verbose) {
+    console.log('Reading:', docname);
+  }
+  var content = fs.readFileSync(docname, 'utf8');
+  return cheerio.load(content);
+}
+
+function extractImports($, dir) {
+  var hrefs = $(IMPORTS).map(function(){ return this.attr('href') });
+  return hrefs.map(function(h) { return path.resolve(dir, h) });
+}
+
+function extractScripts($, assetPath) {
+  var scripts = $.root().children('script');
+
+  scripts.each(function(){ 
+    var src = this.attr('src');
+    
+    if(src) {
+      this.attr('src', path.join(assetPath, src));
+    }
+
+  });
+
+  return scripts;
+}
+
+function extractElements($, assetPath) {
+  return $(ELEMENTS).map(function(i, e){ this.attr('assetpath', assetPath); return $.html(e) });
+}
+
+function concat(filename) {
+  if (!read[filename]) {
+    read[filename] = true;
+    var $ = readDocument(filename);
+    var dir = path.dirname(filename);
+    var assetPath = path.relative(outputDir, dir);
+    var links = extractImports($, dir);
+    resolve(filename, links);
+
+    var scripts = extractScripts($, assetPath);
+
+    scripts.each(function(){
+      buffer.push($.html(this));
+    });
+
+
+    var es = extractElements($, assetPath);
+    es.forEach(concatElement.bind(this, dir, outputDir));
+  } else {
+    if (options.verbose) {
+      console.log('Dependency deduplicated');
+    }
+  }
+}
+
+function resolve(inName, inDependencies) {
+  if (inDependencies.length > 0) {
+    if (options.verbose) {
+      console.log('Dependencies:', inDependencies);
+    }
+    inDependencies.forEach(concat);
+  }
+}
+
+// monkey patch addResolvePath for build
+var monkeyPatch = function(proto, element) {
+  var assetPath = element.getAttribute('assetpath');
+  var url = HTMLImports.getDocumentUrl(element.ownerDocument) || '';
+  if (url) {
+    var parts = url.split('/');
+    parts.pop();
+    if (assetPath) {
+      parts.push(assetPath);
+    }
+    parts.push('');
+    url = parts.join('/');
+  }
+  proto.resolvePath = function(path) {
+    return url + path;
+  }
+};
+
+var buffer = [
+  '<!-- Monkey Patch addResolvePath to use assetpath -->',
+  '<script>Polymer.addResolvePath = ' + monkeyPatch + '</script>'
+];
+var read = {};
+
+options.input.forEach(concat);
+
+if (buffer.length) {
+  fs.writeFileSync(options.output, buffer.join('\n'), 'utf8');
+}
diff --git a/libs/urljs/README.md b/libs/urljs/README.md
new file mode 100755
index 0000000..66f0542
--- /dev/null
+++ b/libs/urljs/README.md
@@ -0,0 +1,140 @@
+URL.js
+======
+
+**An API for working with URLs in JavaScript.**
+URL.js can be used in both **server-side** and **client-side** JavaScript environments,
+it has **no dependencies** on any other libraries, and is easy to use for common URL-related tasks.
+
+Oh and since I built this to use on [TipTheWeb](http://tiptheweb.org/),
+you should [**tip this project**](http://tiptheweb.org/tip/?link=https://github.com/ericf/urljs) if you find it useful! :-D
+
+Design & Approach
+-----------------
+
+I had some very specific URL-related programming tasks I needed to do:
+validate and normalize user input of URLs and URL-like strings within the browser,
+and resolve URLs against each other on the server (in a YQL table to be specific).
+Both of these tasks require a very good URL parser, so URL.js centers around parsing.
+The design of the API and features of URL.js center around these four main concepts:
+
+* Parsing
+* Normalization
+* Resolving
+* Mutating/Building
+
+**`URL` is both a namespace for utility methods and a constructor/factory to create instances of URL Objects.**
+
+The static utility methods make it convenient when you just want to work with Strings since they return Strings.
+When you want to retain a reference to a parsed URL you can easily create a URL instance;
+these instances have useful methods, most serve as both an accessor/mutator to a specific part of the URL.
+
+**Currently URL.js only works with HTTP URLs**, albiet the most popular type of URL; 
+I have plans to extend the functionality to include support [for all URL schemes](http://www.w3.org/Addressing/URL/url-spec.txt).
+Internal to the library is the distiction between absolute and relative URLs.
+Absolute URLs are ones which contain a scheme or are scheme-relative, and contain a host.
+Relative URLs have slightly looser contraints but the relavence is maintained, either host- or path- relative.
+
+Usage
+-----
+
+**`URL` is both a namespace for utility methods and a constructor/factory to create instances of URL Objects.**
+
+### Using Static Utilites
+
+There are two static methods: `normalize` and `resolve`
+
+#### `URL.normalize`:
+
+Takes in a dirty URL and makes it nice and clean.
+
+    URL.normalize('Http://Example.com');          // 'http://example.com/'
+    URL.normalize('Http://Example.com?foo=#bar'); // 'http://example.com/?foo#bar'
+
+This should be suffient to serve the use-case of want to clean up URLs,
+especially if were inputted by a user.
+
+#### `URL.resolve`:
+
+Given a base URL, this will resolve another URL against it; this method is inspired by what browsers do.
+Normalizing is part of resolving, so a normalized and resolved URL `String` is returned.
+
+    URL.resolve('http://example.com/foo/bar', 'baz/index.html');        // 'http://example.com/foo/baz/index.html'
+    URL.resolve('https://example.com/foo/, '//example.com/bar.css');    // 'https://example.com/bar.css'
+    URL.resolve('http://example.com/foo/bar/zee/', '../../crazy#whoa'); // 'http://example.com/foo/crazy#whoa'
+
+Resolving URLs is a pain in the ass, trust me, you don’t want to have to do this by hand.
+The implementation of `resolve` is using all parts of this library’s API to pull it off.
+
+### Using URL Instances
+
+The `URL` `Object` is also a constructor/factory for creating instances of `URL`s.
+When creating an instance, **the `new` keyword is optional**.
+
+    var url = URL('http://www.example.com');
+    
+    // Accessor/Mutator Methods
+    
+    url.scheme();      // 'http'
+    url.userInfo();    // undefined
+    url.host();        // 'www.example.com'
+    url.port();        // undefined
+    url.path();        // '/'
+    url.query();       // undefined
+    url.queryString(); // ''
+    url.fragment();    // undefined
+    
+    // Convenience Methods
+    
+    url.original();       // 'http://www.example.com'
+    url.isValid();        // true
+    url.isAbsolute();     // true
+    url.isRelative();     // false
+    url.isHostRelative(); // false
+    url.type();           // 'absolute' === URL.ABSOLUTE
+    url.domain();         // 'example.com'
+    url.authority();      // 'www.example.com'
+    
+    // Output Methods
+    
+    url.toString();                  // 'http://www.example.com'
+    url.resolve('/foo/').toString(); // 'http://www.example.com/foo/'
+
+**Yeah, `URL` instances are packed full of useful URL-ly jazz!**
+
+Here are a few more “complex” examples of what you can do with mutation, chaining, building, and resolving:
+
+    // switch the scheme, resolve a path with a fragment, and navigate to it
+    window.location = URL(window.location.toString()).scheme('https').resolve('/about/#people').toString();
+    
+    // turn 'http://example.com' -> 'http://example.com/?foo=bar#baz'
+    URL('http://example.com').query([['foo', 'bar']]).fragment('baz');
+    
+    // build up a URL to: http://tiptheweb.org/tip/?link=https://github.com/ericf/urljs
+    URL()
+        .scheme('http')
+        .host('tiptheweb.org')
+        .path('/tip/')
+        .query([['link', 'https://github.com/ericf/urljs']]);
+    
+License
+-------
+
+Copyright (c) 2011 Eric Ferraiuolo (http://eric.ferraiuolo.name/)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
diff --git a/libs/urljs/url-min.js b/libs/urljs/url-min.js
new file mode 100755
index 0000000..b494a85
--- /dev/null
+++ b/libs/urljs/url-min.js
@@ -0,0 +1,7 @@
+/*!
+ * URL.js
+ *
+ * Copyright 2011 Eric Ferraiuolo
+ * https://github.com/ericf/urljs
+ */
+var URL=function(){var u=this;if(!(u&&u.hasOwnProperty&&(u instanceof URL))){u=new URL()}return u._init.apply(u,arguments)};(function(){var ABSOLUTE="absolute",RELATIVE="relative",HTTP="http",HTTPS="https",COLON=":",SLASH_SLASH="//",AT="@",DOT=".",SLASH="/",DOT_DOT="..",DOT_DOT_SLASH="../",QUESTION="?",EQUALS="=",AMP="&",HASH="#",EMPTY_STRING="",TYPE="type",SCHEME="scheme",USER_INFO="userInfo",HOST="host",PORT="port",PATH="path",QUERY="query",FRAGMENT="fragment",URL_TYPE_REGEX=/^(?:(https?:\/\/|\/\/)|(\/|\?|#)|[^;:@=\.\s])/i,URL_ABSOLUTE_REGEX=/^(?:(https?):\/\/|\/\/)(?:([^:@\s]+:?[^:@\s]+?)@)?((?:[^;:@=\/\?\.\s]+\.)+[A-Za-z0-9\-]{2,})(?::(\d+))?(?=\/|\?|#|$)([^\?#]+)?(?:\?([^#]+))?(?:#(.+))?/i,URL_RELATIVE_REGEX=/^([^\?#]+)?(?:\?([^#]+))?(?:#(.+))?/i,OBJECT="object",STRING="string",TRIM_REGEX=/^\s+|\s+$/g,trim,isObject,isString;trim=String.prototype.trim?function(s){return(s&&s.trim?s.trim():s)}:function(s){try{return s.replace(TRIM_REGEX,EMPTY_STRING)}catch(e){return s}};isObject=function(o){return(o&&typeof o===OBJECT)};isString=function(o){return typeof o===STRING};URL.ABSOLUTE=ABSOLUTE;URL.RELATIVE=RELATIVE;URL.normalize=function(url){return new URL(url).toString()};URL.resolve=function(baseUrl,url){return new URL(baseUrl).resolve(url).toString()};URL.prototype={_init:function(url){this.constructor=URL;url=isString(url)?url:url instanceof URL?url.toString():null;this._original=url;this._url={};this._isValid=this._parse(url);return this},toString:function(){var url=this._url,urlParts=[],type=url[TYPE],scheme=url[SCHEME],path=url[PATH],query=url[QUERY],fragment=url[FRAGMENT];if(type===ABSOLUTE){urlParts.push(scheme?(scheme+COLON+SLASH_SLASH):SLASH_SLASH,this.authority());if(path&&path.indexOf(SLASH)!==0){path=SLASH+path}}urlParts.push(path,query?(QUESTION+this.queryString()):EMPTY_STRING,fragment?(HASH+fragment):EMPTY_STRING);return urlParts.join(EMPTY_STRING)},original:function(){return this._original},isValid:function(){return this._isValid},isAbsolute:function(){return this._url[TYPE]===ABSOLUTE},isRelative:function(){return this._url[TYPE]===RELATIVE},isHostRelative:function(){var path=this._url[PATH];return(this.isRelative()&&path&&path.indexOf(SLASH)===0)},type:function(){return this._url[TYPE]},scheme:function(scheme){return(arguments.length?this._set(SCHEME,scheme):this._url[SCHEME])},userInfo:function(userInfo){return(arguments.length?this._set(USER_INFO,userInfo):this._url[USER_INFO])},host:function(host){return(arguments.length?this._set(HOST,host):this._url[HOST])},domain:function(){var host=this._url[HOST];return(host?host.split(DOT).slice(-2).join(DOT):undefined)},port:function(port){return(arguments.length?this._set(PORT,port):this._url[PORT])},authority:function(){var url=this._url,userInfo=url[USER_INFO],host=url[HOST],port=url[PORT];return[userInfo?(userInfo+AT):EMPTY_STRING,host,port?(COLON+port):EMPTY_STRING,].join(EMPTY_STRING)},path:function(path){return(arguments.length?this._set(PATH,path):this._url[PATH])},query:function(query){return(arguments.length?this._set(QUERY,query):this._url[QUERY])},queryString:function(queryString){if(arguments.length){return this._set(QUERY,this._parseQuery(queryString))}queryString=EMPTY_STRING;var query=this._url[QUERY],i,len;if(query){for(i=0,len=query.length;i<len;i++){queryString+=query[i].join(EQUALS);if(i<len-1){queryString+=AMP}}}return queryString},fragment:function(fragment){return(arguments.length?this._set(FRAGMENT,fragment):this._url[FRAGMENT])},resolve:function(url){url=(url instanceof URL)?url:new URL(url);var resolved,path;if(!(this.isValid()&&url.isValid())){return this}if(url.isAbsolute()){return(this.isAbsolute()?url.scheme()?url:new URL(url).scheme(this.scheme()):url)}resolved=new URL(this.isAbsolute()?this:null);if(url.path()){if(url.isHostRelative()||!this.path()){path=url.path()}else{path=this.path().substring(0,this.path().lastIndexOf(SLASH)+1)+url.path()}resolved.path(this._normalizePath(path)).query(url.query()).fragment(url.fragment())}else{if(url.query()){resolved.query(url.query()).fragment(url.fragment())}else{if(url.fragment()){resolved.fragment(url.fragment())}}}return resolved},reduce:function(url){url=(url instanceof URL)?url:new URL(url);var reduced=this.resolve(url);if(this.isAbsolute()&&reduced.isAbsolute()){if(reduced.scheme()===this.scheme()&&reduced.authority()===this.authority()){reduced.scheme(null).userInfo(null).host(null).port(null)}}return reduced},_parse:function(url,type){url=trim(url);if(!(isString(url)&&url.length>0)){return false}var urlParts,parsed;if(!type){type=url.match(URL_TYPE_REGEX);type=type?type[1]?ABSOLUTE:type[2]?RELATIVE:null:null}switch(type){case ABSOLUTE:urlParts=url.match(URL_ABSOLUTE_REGEX);if(urlParts){parsed={};parsed[TYPE]=ABSOLUTE;parsed[SCHEME]=urlParts[1]?urlParts[1].toLowerCase():undefined;parsed[USER_INFO]=urlParts[2];parsed[HOST]=urlParts[3].toLowerCase();parsed[PORT]=urlParts[4]?parseInt(urlParts[4],10):undefined;parsed[PATH]=urlParts[5]||SLASH;parsed[QUERY]=this._parseQuery(urlParts[6]);parsed[FRAGMENT]=urlParts[7]}break;case RELATIVE:urlParts=url.match(URL_RELATIVE_REGEX);if(urlParts){parsed={};parsed[TYPE]=RELATIVE;parsed[PATH]=urlParts[1];parsed[QUERY]=this._parseQuery(urlParts[2]);parsed[FRAGMENT]=urlParts[3]}break;default:return(this._parse(url,ABSOLUTE)||this._parse(url,RELATIVE));break}if(parsed){this._url=parsed;return true}else{return false}},_parseQuery:function(queryString){if(!isString(queryString)){return}queryString=trim(queryString);var query=[],queryParts=queryString.split(AMP),queryPart,i,len;for(i=0,len=queryParts.length;i<len;i++){if(queryParts[i]){queryPart=queryParts[i].split(EQUALS);query.push(queryPart[1]?queryPart:[queryPart[0]])}}return query},_set:function(urlPart,val){this._url[urlPart]=val;if(val&&(urlPart===SCHEME||urlPart===USER_INFO||urlPart===HOST||urlPart===PORT)){this._url[TYPE]=ABSOLUTE}if(!val&&urlPart===HOST){this._url[TYPE]=RELATIVE}this._isValid=this._parse(this.toString());return this},_normalizePath:function(path){var pathParts,pathPart,pathStack,normalizedPath,i,len;if(path.indexOf(DOT_DOT_SLASH)>-1){pathParts=path.split(SLASH);pathStack=[];for(i=0,len=pathParts.length;i<len;i++){pathPart=pathParts[i];if(pathPart===DOT_DOT){pathStack.pop()}else{if(pathPart){pathStack.push(pathPart)}}}normalizedPath=pathStack.join(SLASH);if(path[0]===SLASH){normalizedPath=SLASH+normalizedPath}if(path[path.length-1]===SLASH&&normalizedPath.length>1){normalizedPath+=SLASH}}else{normalizedPath=path}return normalizedPath}}}());
\ No newline at end of file
diff --git a/libs/urljs/url.js b/libs/urljs/url.js
new file mode 100755
index 0000000..abfe048
--- /dev/null
+++ b/libs/urljs/url.js
@@ -0,0 +1,666 @@
+/*!
+ * URL.js
+ *
+ * Copyright 2011 Eric Ferraiuolo
+ * https://github.com/ericf/urljs
+ */
+
+/**
+ * URL constructor and utility.
+ * Provides support for validating whether something is a URL,
+ * formats and cleans up URL-like inputs into something nice and pretty,
+ * ability to resolve one URL against another and returned the formatted result,
+ * and is a convenient API for working with URL Objects and the various parts of URLs.
+ *
+ * @constructor URL
+ * @param       {String | URL}  url - the URL String to parse or URL instance to copy
+ * @return      {URL}           url - instance of a URL all nice and parsed
+ */
+var URL = function () {
+
+    var u = this;
+
+    if ( ! (u && u.hasOwnProperty && (u instanceof URL))) {
+        u = new URL();
+    }
+
+    return u._init.apply(u, arguments);
+};
+
+(function(){
+
+var ABSOLUTE            = 'absolute',
+    RELATIVE            = 'relative',
+
+    HTTP                = 'http',
+    HTTPS               = 'https',
+    COLON               = ':',
+    SLASH_SLASH         = '//',
+    AT                  = '@',
+    DOT                 = '.',
+    SLASH               = '/',
+    DOT_DOT             = '..',
+    DOT_DOT_SLASH       = '../',
+    QUESTION            = '?',
+    EQUALS              = '=',
+    AMP                 = '&',
+    HASH                = '#',
+    EMPTY_STRING        = '',
+
+    TYPE                = 'type',
+    SCHEME              = 'scheme',
+    USER_INFO           = 'userInfo',
+    HOST                = 'host',
+    PORT                = 'port',
+    PATH                = 'path',
+    QUERY               = 'query',
+    FRAGMENT            = 'fragment',
+
+    URL_TYPE_REGEX      = /^(?:(https?:\/\/|\/\/)|(\/|\?|#)|[^;:@=\.\s])/i,
+    URL_ABSOLUTE_REGEX  = /^(?:(https?):\/\/|\/\/)(?:([^:@\s]+:?[^:@\s]+?)@)?((?:[^;:@=\/\?\.\s]+\.)+[A-Za-z0-9\-]{2,})(?::(\d+))?(?=\/|\?|#|$)([^\?#]+)?(?:\?([^#]+))?(?:#(.+))?/i,
+    URL_RELATIVE_REGEX  = /^([^\?#]+)?(?:\?([^#]+))?(?:#(.+))?/i,
+
+    OBJECT              = 'object',
+    STRING              = 'string',
+    TRIM_REGEX          = /^\s+|\s+$/g,
+
+    trim, isObject, isString;
+
+
+// *** Utilities *** //
+
+trim = String.prototype.trim ? function (s) {
+    return ( s && s.trim ? s.trim() : s );
+} : function (s) {
+    try {
+        return s.replace(TRIM_REGEX, EMPTY_STRING);
+    } catch (e) { return s; }
+};
+
+isObject = function (o) {
+    return ( o && typeof o === OBJECT );
+};
+
+isString = function (o) {
+    return typeof o === STRING;
+};
+
+
+// *** Static *** //
+
+/**
+ *
+ */
+URL.ABSOLUTE = ABSOLUTE;
+
+/**
+ *
+ */
+URL.RELATIVE = RELATIVE;
+
+/**
+ *
+ */
+URL.normalize = function (url) {
+    return new URL(url).toString();
+};
+
+/**
+ * Returns a resolved URL String using the baseUrl to resolve the url against.
+ * This attempts to resolve URLs like a browser would on a web page.
+ *
+ * @static
+ * @method  resolve
+ * @param   {String | URL}  baseUrl     - the URL String, or URL instance as the resolving base
+ * @param   {String | URL}  url         - the URL String, or URL instance to resolve
+ * @return  {String}        resolvedUrl - a resolved URL String
+ */
+URL.resolve = function (baseUrl, url) {
+    return new URL(baseUrl).resolve(url).toString();
+};
+
+
+// *** Prototype *** //
+
+URL.prototype = {
+
+    // *** Lifecycle Methods *** //
+
+    /**
+     * Initializes a new URL instance, or re-initializes an existing one.
+     * The URL constructor delegates to this method to do the initializing,
+     * and the mutator instance methods call this to re-initialize when something changes.
+     *
+     * @protected
+     * @method  _init
+     * @param   {String | URL}  url - the URL String, or URL instance
+     * @return  {URL}           url - instance of a URL all nice and parsed/re-parsed
+     */
+    _init : function (url) {
+
+        this.constructor = URL;
+
+        url = isString(url) ? url : url instanceof URL ? url.toString() : null;
+
+        this._original  = url;
+        this._url       = {};
+        this._isValid   = this._parse(url);
+
+        return this;
+    },
+
+    // *** Object Methods *** //
+
+    /**
+     * Returns the formatted URL String.
+     * Overridden Object toString method to do something useful.
+     *
+     * @public
+     * @method  toString
+     * @return  {String}    url - formatted URL string
+     */
+    toString : function () {
+
+        var url         = this._url,
+            urlParts    = [],
+            type        = url[TYPE],
+            scheme      = url[SCHEME],
+            path        = url[PATH],
+            query       = url[QUERY],
+            fragment    = url[FRAGMENT];
+
+        if (type === ABSOLUTE) {
+            urlParts.push(
+                scheme ? (scheme + COLON + SLASH_SLASH) : SLASH_SLASH,
+                this.authority()
+            );
+            if (path && path.indexOf(SLASH) !== 0) {    // this should maybe go in _set
+                path = SLASH + path;
+            }
+        }
+
+        urlParts.push(
+            path,
+            query ? (QUESTION + this.queryString()) : EMPTY_STRING,
+            fragment ? (HASH + fragment) : EMPTY_STRING
+        );
+
+        return urlParts.join(EMPTY_STRING);
+    },
+
+    // *** Accessor/Mutator Methods *** //
+
+    original : function () {
+        return this._original;
+    },
+
+    /**
+     * Whether parsing from initialization or re-initialization produced something valid.
+     *
+     * @public
+     * @method  isValid
+     * @return  {Boolean}   valid   - whether the URL is valid
+     */
+    isValid : function () {
+        return this._isValid;
+    },
+
+    /**
+     * URL is absolute if it has a scheme or is scheme-relative (//).
+     *
+     * @public
+     * @method  isAbsolute
+     * @return  {Boolean}   absolute    - whether the URL is absolute
+     */
+    isAbsolute : function () {
+        return this._url[TYPE] === ABSOLUTE;
+    },
+
+    /**
+     * URL is relative if it host or path relative, i.e. doesn't contain a host.
+     *
+     * @public
+     * @method  isRelative
+     * @return  {Boolean}   relative    - whether the URL is relative
+     */
+    isRelative : function () {
+        return this._url[TYPE] === RELATIVE;
+    },
+
+    /**
+     * URL is host relative if it's relative and the path begins with '/'.
+     *
+     * @public
+     * @method  isHostRelative
+     * @return  {Boolean}   hostRelative    - whether the URL is host-relative
+     */
+     isHostRelative : function () {
+        var path = this._url[PATH];
+        return ( this.isRelative() && path && path.indexOf(SLASH) === 0 );
+     },
+
+    /**
+     * Returns the type of the URL, either: URL.ABSOLUTE or URL.RELATIVE.
+     *
+     * @public
+     * @method  type
+     * @return  {String}    type    - the type of the URL: URL.ABSOLUTE or URL.RELATIVE
+     */
+    type : function () {
+        return this._url[TYPE];
+    },
+
+    /**
+     * Returns or sets the scheme of the URL.
+     * If URL is determined to be absolute (i.e. contains a host) and no scheme is provided,
+     * the scheme will default to http.
+     *
+     * @public
+     * @method  scheme
+     * @param   {String}        scheme  - Optional scheme to set on the URL
+     * @return  {String | URL}  the URL scheme or the URL instance
+     */
+    scheme : function (scheme) {
+        return ( arguments.length ? this._set(SCHEME, scheme) : this._url[SCHEME] );
+    },
+
+    /**
+     * Returns or set the user info of the URL.
+     * The user info can optionally contain a password and is only valid for absolute URLs.
+     *
+     * @public
+     * @method  userInfo
+     * @param   {String}        userInfo    - Optional userInfo to set on the URL
+     * @return  {String | URL}  the URL userInfo or the URL instance
+     */
+    userInfo : function (userInfo) {
+        return ( arguments.length ? this._set(USER_INFO, userInfo) : this._url[USER_INFO] );
+    },
+
+    /**
+     * Returns or sets the host of the URL.
+     * The host name, if set, must be something valid otherwise the URL will become invalid.
+     *
+     * @public
+     * @method  host
+     * @param   {String}        host    - Optional host to set on the URL
+     * @return  {String | URL}  the URL host or the URL instance
+     */
+    host : function (host) {
+        return ( arguments.length ? this._set(HOST, host) : this._url[HOST] );
+    },
+
+    /**
+     * Returns the URL's domain, where the domain is the TLD and SLD of the host.
+     * e.g. foo.example.com -> example.com
+     *
+     * @public
+     * @method  domain
+     * @return  {String}    domain  - the URL domain
+     */
+    domain : function () {
+        var host = this._url[HOST];
+        return ( host ? host.split(DOT).slice(-2).join(DOT) : undefined );
+    },
+
+    /**
+     * Returns or sets the port of the URL.
+     *
+     * @public
+     * @method  port
+     * @param   {Number}        port    - Optional port to set on the URL
+     * @return  {Number | URL}  the URL port or the URL instance
+     */
+    port : function (port) {
+        return ( arguments.length ? this._set(PORT, port) : this._url[PORT] );
+    },
+
+    /**
+     * Returns the URL's authority which is the userInfo, host, and port combined.
+     * This only makes sense for absolute URLs
+     *
+     * @public
+     * @method  authority
+     * @return  {String}    authority   - the URL's authority (userInfo, host, and port)
+     */
+    authority : function () {
+
+        var url         = this._url,
+            userInfo    = url[USER_INFO],
+            host        = url[HOST],
+            port        = url[PORT];
+
+        return [
+
+            userInfo ? (userInfo + AT) : EMPTY_STRING,
+            host,
+            port ? (COLON + port) : EMPTY_STRING,
+
+        ].join(EMPTY_STRING);
+    },
+
+    /**
+     * Returns or sets the path of the URL.
+     *
+     * @public
+     * @method  path
+     * @param   {String}        path    - Optional path to set on the URL
+     * @return  {String | URL}  the URL path or the URL instance
+     */
+    path : function (path) {
+        return ( arguments.length ? this._set(PATH, path) : this._url[PATH] );
+    },
+
+    /**
+     * Returns or sets the query of the URL.
+     * This takes or returns the parsed query as an Array of Arrays.
+     *
+     * @public
+     * @method  query
+     * @param   {Array}         query   - Optional query to set on the URL
+     * @return  {Array | URL}   the URL query or the URL instance
+     */
+    query : function (query) {
+        return ( arguments.length ? this._set(QUERY, query) : this._url[QUERY] );
+    },
+
+    /**
+     * Returns or sets the query of the URL.
+     * This takes or returns the query as a String; doesn't include the '?'
+     *
+     * @public
+     * @method  queryString
+     * @param   {String}        queryString - Optional queryString to set on the URL
+     * @return  {String | URL}  the URL queryString or the URL instance
+     */
+    queryString : function (queryString) {
+
+        // parse and set queryString
+        if (arguments.length) {
+            return this._set(QUERY, this._parseQuery(queryString));
+        }
+
+        queryString = EMPTY_STRING;
+
+        var query = this._url[QUERY],
+            i, len;
+
+        if (query) {
+            for (i = 0, len = query.length; i < len; i++) {
+                queryString += query[i].join(EQUALS);
+                if (i < len - 1) {
+                    queryString += AMP;
+                }
+            }
+        }
+
+        return queryString;
+    },
+
+    /**
+     * Returns or sets the fragment on the URL.
+     * The fragment does not contain the '#'.
+     *
+     * @public
+     * @method  fragment
+     * @param   {String}        fragment    - Optional fragment to set on the URL
+     * @return  {String | URL}  the URL fragment or the URL instance
+     */
+    fragment : function (fragment) {
+        return ( arguments.length ? this._set(FRAGMENT, fragment) : this._url[FRAGMENT] );
+    },
+
+    /**
+     * Returns a new, resolved URL instance using this as the baseUrl.
+     * The URL passed in will be resolved against the baseUrl.
+     *
+     * @public
+     * @method  resolve
+     * @param   {String | URL}  url - the URL String, or URL instance to resolve
+     * @return  {URL}           url - a resolved URL instance
+     */
+    resolve : function (url) {
+
+        url = (url instanceof URL) ? url : new URL(url);
+
+        var resolved, path;
+
+        if ( ! (this.isValid() && url.isValid())) { return this; } // not sure what to do???
+
+        // the easy way
+        if (url.isAbsolute()) {
+            return ( this.isAbsolute() ? url.scheme() ? url : new URL(url).scheme(this.scheme()) : url );
+        }
+
+        // the hard way
+        resolved = new URL(this.isAbsolute() ? this : null);
+
+        if (url.path()) {
+
+            if (url.isHostRelative() || ! this.path()) {
+                path = url.path();
+            } else {
+                path = this.path().substring(0, this.path().lastIndexOf(SLASH) + 1) + url.path();
+            }
+
+            resolved.path(this._normalizePath(path)).query(url.query()).fragment(url.fragment());
+
+        } else if (url.query()) {
+            resolved.query(url.query()).fragment(url.fragment());
+        } else if (url.fragment()) {
+            resolved.fragment(url.fragment());
+        }
+
+        return resolved;
+    },
+
+    /**
+     * Returns a new, reduced relative URL instance using this as the baseUrl.
+     * The URL passed in will be compared to the baseUrl with the goal of
+     * returning a reduced-down URL to one that’s relative to the base (this).
+     * This method is basically the opposite of resolve.
+     *
+     * @public
+     * @method  reduce
+     * @param   {String | URL}  url - the URL String, or URL instance to resolve
+     * @return  {URL}           url - the reduced URL instance
+     */
+    reduce : function (url) {
+
+        url = (url instanceof URL) ? url : new URL(url);
+
+        var reduced = this.resolve(url);
+
+        if (this.isAbsolute() && reduced.isAbsolute()) {
+            if (reduced.scheme() === this.scheme() && reduced.authority() === this.authority()) {
+                reduced.scheme(null).userInfo(null).host(null).port(null);
+            }
+        }
+
+        return reduced;
+    },
+
+    // *** Private Methods *** //
+
+    /**
+     * Parses a URL into usable parts.
+     * Reasonable defaults are applied to parts of the URL which weren't present in the input,
+     * e.g. 'http://example.com' -> { type: 'absolute', scheme: 'http', host: 'example.com', path: '/' }
+     * If nothing or a falsy value is returned, the URL wasn't something valid.
+     *
+     * @private
+     * @method  _parse
+     * @param   {String}    url     - the URL string to parse
+     * @param   {String}    type    - Optional type to seed parsing: URL.ABSOLUTE or URL.RELATIVE
+     * @return  {Boolean}   parsed  - whether or not the URL string was parsed
+     */
+    _parse : function (url, type) {
+
+        // make sure we have a good string
+        url = trim(url);
+        if ( ! (isString(url) && url.length > 0)) {
+            return false;
+        }
+
+        var urlParts, parsed;
+
+        // figure out type, absolute or relative, or quit
+        if ( ! type) {
+            type = url.match(URL_TYPE_REGEX);
+            type = type ? type[1] ? ABSOLUTE : type[2] ? RELATIVE : null : null;
+        }
+
+        switch (type) {
+
+            case ABSOLUTE:
+                urlParts = url.match(URL_ABSOLUTE_REGEX);
+                if (urlParts) {
+                    parsed              = {};
+                    parsed[TYPE]        = ABSOLUTE;
+                    parsed[SCHEME]      = urlParts[1] ? urlParts[1].toLowerCase() : undefined;
+                    parsed[USER_INFO]   = urlParts[2];
+                    parsed[HOST]        = urlParts[3].toLowerCase();
+                    parsed[PORT]        = urlParts[4] ? parseInt(urlParts[4], 10) : undefined;
+                    parsed[PATH]        = urlParts[5] || SLASH;
+                    parsed[QUERY]       = this._parseQuery(urlParts[6]);
+                    parsed[FRAGMENT]    = urlParts[7];
+                }
+                break;
+
+            case RELATIVE:
+                urlParts = url.match(URL_RELATIVE_REGEX);
+                if (urlParts) {
+                    parsed              = {};
+                    parsed[TYPE]        = RELATIVE;
+                    parsed[PATH]        = urlParts[1];
+                    parsed[QUERY]       = this._parseQuery(urlParts[2]);
+                    parsed[FRAGMENT]    = urlParts[3];
+                }
+                break;
+
+            // try to parse as absolute, if that fails then as relative
+            default:
+                return ( this._parse(url, ABSOLUTE) || this._parse(url, RELATIVE) );
+                break;
+
+        }
+
+        if (parsed) {
+            this._url = parsed;
+            return true;
+        } else {
+            return false;
+        }
+    },
+
+    /**
+     * Helper to parse a URL query string into an array of arrays.
+     * Order of the query paramerters is maintained, an example structure would be:
+     * queryString: 'foo=bar&baz' -> [['foo', 'bar'], ['baz']]
+     *
+     * @private
+     * @method  _parseQuery
+     * @param   {String}    queryString - the query string to parse, should not include '?'
+     * @return  {Array}     parsedQuery - array of arrays representing the query parameters and values
+     */
+    _parseQuery : function (queryString) {
+
+        if ( ! isString(queryString)) { return; }
+
+        queryString = trim(queryString);
+
+        var query       = [],
+            queryParts  = queryString.split(AMP),
+            queryPart, i, len;
+
+        for (i = 0, len = queryParts.length; i < len; i++) {
+            if (queryParts[i]) {
+                queryPart = queryParts[i].split(EQUALS);
+                query.push(queryPart[1] ? queryPart : [queryPart[0]]);
+            }
+        }
+
+        return query;
+    },
+
+    /**
+     * Helper for mutators to set a new URL-part value.
+     * After the URL-part is updated, the URL will be toString'd and re-parsed.
+     * This is a brute, but will make sure the URL stays in sync and is re-validated.
+     *
+     * @private
+     * @method  _set
+     * @param   {String}    urlPart - the _url Object member String name
+     * @param   {Object}    val     - the new value for the URL-part, mixed type
+     * @return  {URL}       this    - returns this URL instance, chainable
+     */
+    _set : function (urlPart, val) {
+
+        this._url[urlPart] = val;
+
+        if (val                     && (
+            urlPart === SCHEME      ||
+            urlPart === USER_INFO   ||
+            urlPart === HOST        ||
+            urlPart === PORT        )){
+            this._url[TYPE] = ABSOLUTE; // temp, set this to help clue parsing
+        }
+        if ( ! val && urlPart === HOST) {
+            this._url[TYPE] = RELATIVE; // temp, no host means relative
+        }
+
+        this._isValid = this._parse(this.toString());
+
+        return this;
+    },
+
+    /**
+     * Returns a normalized path String, by removing ../'s.
+     *
+     * @private
+     * @method  _normalizePath
+     * @param   {String}    path            — the path String to normalize
+     * @return  {String}    normalizedPath  — the normalized path String
+     */
+    _normalizePath : function (path) {
+
+        var pathParts, pathPart, pathStack, normalizedPath, i, len;
+
+        if (path.indexOf(DOT_DOT_SLASH) > -1) {
+
+            pathParts = path.split(SLASH);
+            pathStack = [];
+
+            for ( i = 0, len = pathParts.length; i < len; i++ ) {
+                pathPart = pathParts[i];
+                if (pathPart === DOT_DOT) {
+                    pathStack.pop();
+                } else if (pathPart) {
+                    pathStack.push(pathPart);
+                }
+            }
+
+            normalizedPath = pathStack.join(SLASH);
+
+            // prepend slash if needed
+            if (path[0] === SLASH) {
+                normalizedPath = SLASH + normalizedPath;
+            }
+
+            // append slash if needed
+            if (path[path.length - 1] === SLASH && normalizedPath.length > 1) {
+                normalizedPath += SLASH;
+            }
+
+        } else {
+
+            normalizedPath = path;
+
+        }
+
+        return normalizedPath;
+    }
+
+};
+
+}());