<!--
    @license
    Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
    This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
    The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
    The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
    Code distributed by Google as part of the polymer project is also
    subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../../core-toolbar/core-toolbar.html">
<link rel="import" href="../../core-header-panel/core-header-panel.html">
<link rel="import" href="../../core-icon-button/core-icon-button.html">
<link rel="import" href="../../core-menu/core-menu.html">
<link rel="import" href="../../core-item/core-item.html">

<!--
@class core-doc-toc
-->

<polymer-element name="core-doc-toc" attributes="data selected">

  <template>

    <link rel="stylesheet" href="core-doc-toc.css">

    <core-header-panel mode="waterfall">

<!--      <core-toolbar theme="core-light-theme">
        <core-icon-button icon="menu"></core-icon-button>
        <span core-flex>Topics</span>
        <core-icon-button icon="search" on-tap="{{searchAction}}"></core-icon-button>
      </core-toolbar>

      <core-toolbar id="searchBar" style="background-color: #C2185B; position: absolute; top: 0; left: 0; right: 0; opacity: 0; display: none;" class="seamed" theme="core-dark-theme">
        <core-icon-button icon="search"></core-icon-button>
        <core-icon-button icon="close" on-tap="{{closeSearchAction}}"></core-icon-button>
      </core-toolbar>-->

      <core-menu selected="{{selected}}">
        <template repeat="{{data}}">
          <core-item><a href="#{{name}}">{{name}}</a></core-item>
        </template>
      </core-menu>

    </core-header-panel>

  </template>

  <script>

    Polymer('core-doc-toc', {

      searchAction: function() {
        this.$.searchBar.style.opacity = 1;
        this.$.searchBar.style.display = '';
      },

      closeSearchAction: function() {
        this.$.searchBar.style.opacity = 0;
        this.$.searchBar.style.display = 'none';
      }

    });

  </script>

</polymer-element>
