epub-reader.html

<!-- 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="libs/epubjs/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({
          width: width,
          height: height,
          spreads : spreads,
          restore : restore
        });

        this.Book.open(src);
        
        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>