<!--
    @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="nested-animated-pages.html" rel="import">

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

    nested-demo {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
    }
  </style>
</head>
<body>

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

    <style>

      core-animated-pages {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
      }

      section {
        text-align: center;
        padding-top: 250px;
      }

      .square {
        display: inline-block;
        margin: 8px;
        padding: 8px;
        width: 200px;
        height: 200px;
        background-color: orange;
        color: #fff;
      }
    </style>

    <core-animated-pages selected="{{page}}" transitions="hero-transition cross-fade">

      <section on-tap="{{transition}}" layout horizontal center-justified>

        <div class="square" id="thing1" hero-id="thing" hero?="{{subpage === 0}}" cross-fade?="{{subpage !== 0}}">thing 1</div>
        <div class="square" id="thing2" hero-id="thing" hero?="{{subpage === 1}}" cross-fade?="{{subpage !== 1}}">thing 2</div>

      </section>

      <nested-animated-pages page="{{subpage}}" on-nested-back="{{back}}"></nested-animated-pages>

    </core-animated-pages>
  </template>
  <script>

    Polymer('nested-demo', {

      page: 0,
      subpage: 0,

      transition: function(e) {

        var el = e.target;
        if (el.id === "thing1") {
          this.subpage = 0;
        } else {
          this.subpage = 1;
        }

        setTimeout(function() {
          this.page = 1;
        }.bind(this), 200);
      },

      back: function() {
        this.page = 0;
      }

    });

  </script>
  </polymer-element>

  <nested-demo></nested-demo>

</body>
</html>
