<!--
    @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
-->
<!doctype html>
<html>
<head>
  <title>core-animated-pages</title>

  <script src="../../webcomponentsjs/webcomponents.js"></script>
  <link href="../core-animated-pages.html" rel="import">

  <style>
    body {
      font-family: 'Roboto 2', 'Helvetica Neue', Helvetica, Arial, sans-serif;
      margin: 0;
      background: #f1f1f1;
    }

    .green {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      height: 350px;
      background: #70c26f;
    }
  </style>
</head>
<body>

  <polymer-element name="music-demo">
  <template>

    <style>
      .chip-container {
        position: absolute;
        top: 275px;
        right: 0;
        left: 0;
        text-align: center;
      }

      .chip {
        display: inline-block;
        position: relative;
        border-radius: 3px;
        margin: 4px;
        overflow: hidden;
        text-align: start;
        background-color: #fff;
        box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16);
      }

      .chip-top {
        width: 200px;
        height: 200px;
      }

      .chip-bottom {
        padding: 8px;
        line-height: 1.5;
      }

      .chip-album-title {
        font-weight: bold;
      }

      #details {
        padding: 200px 10% 0;
      }

      .card {
        height: 400px;
        border-radius: 3px;
        text-align: start;
        overflow: hidden;
        background: #fff;
        box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      }

      .card-left {
        width: 400px;
      }

      .card-right {
        padding: 24px;
      }

      .card-icon {
        border-radius: 50%;
        width: 60px;
        height: 60px;
        margin-right: 16px;
      }

      .card-album-title {
        font-size: 2em;
      }
    </style>

    <core-animated-pages selected="{{page}}" transitions="hero-transition" on-core-animated-pages-transition-end="{{complete}}">

      <section>

        <div class="chip-container" hero-p on-tap="{{transition}}">

          <template repeat="{{items as item}}">

            <div class="chip" hero-id="{{item.artist}}-{{item.album}}" hero?="{{selectedAlbum === item }}">
              <div class="chip-top" style="background:{{item.color}};" hero-id="{{item.artist}}-{{item.album}}-art" hero?="{{selectedAlbum === item}}"></div>
              <div class="chip-bottom">
                <div class="chip-album-title">{{item.album}}</div>
                <div class="chip-artist">{{item.artist}}</div>
              </div>
            </div>

          </template>

        </div>
      </section>

      <section id="details">

        <div class="card" layout horizontal hero-id="{{selectedAlbum.artist}}-{{selectedAlbum.album}}" hero on-tap="{{transition}}">
          <div class="card-left" style="background:{{selectedAlbum.color}};" hero-id="{{selectedAlbum.artist}}-{{selectedAlbum.album}}-art" hero></div>
          <div class="card-right" flex>
            <div layout horizontal center>
              <div>
                <div class="card-icon" style="background:{{selectedAlbum.color}};"></div>
              </div>
              <div flex>
                <div class="card-album-title">{{selectedAlbum.album}}</div>
                <div class="card-album-artist">{{selectedAlbum.artist}}</div>
              </div>
            </div>
          </div>
        </div>

      </section>

    </core-animated-pages>

  </template>
  <script>

    Polymer('music-demo', {

      page: 0,

      items: [
        { artist: 'Tycho', album: 'Fragments', color: '#f4db33' },
        { artist: 'Tycho', album: 'Past Prologue', color: '#972ff8' },
        { artist: 'Tycho', album: 'Spectre', color: '#7dd6fe' },
        { artist: 'Tycho', album: 'Awake', color: '#dc3c84' }
      ],

      selectedAlbum: null,

      transition: function(e) {
        if (this.page === 0 && e.target.templateInstance.model.item) {
          this.selectedAlbum = e.target.templateInstance.model.item;
          this.page = 1;
        } else {
          this.page = 0;
        }
      }
    });

  </script>
  </polymer-element>

  <div class="green"></div>

  <music-demo></music-demo>
</body>
</html>
