<html><head><link rel="import" href="bower_components/polymer/polymer.html">

<link rel="import" href="bower_components/iron-iconset-svg/iron-iconset-svg.html">

<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="bower_components/paper-checkbox/paper-checkbox.html">

<link rel="import" href="bower_components/app-layout/app-drawer-layout/app-drawer-layout.html">
<link rel="import" href="bower_components/app-layout/app-drawer/app-drawer.html">
<link rel="import" href="bower_components/app-layout/app-header-layout/app-header-layout.html">
<link rel="import" href="bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="bower_components/app-layout/app-scroll-effects/app-scroll-effects.html">
<link rel="import" href="bower_components/app-layout/app-toolbar/app-toolbar.html">

<link rel="import" href="bower_components/app-layout/demo/sample-content.html">

</head><body><iron-iconset-svg name="app" size="24">
<svg><defs>
<g id="menu"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path></g>
</defs></svg>
</iron-iconset-svg>

<dom-module id="test-app">

  <template>

    <style>app-drawer section{height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;}app-drawer h2{margin:8px 0 0;padding:18px;font-size:18px;}app-drawer paper-checkbox{display:block;padding:18px;}app-header{color:#fff;background-color:#C62828;--app-header-background-front-layer:{background-image:url(//app-layout-assets.appspot.com/assets/test-drive.jpg);background-position:50% 10%;};}div[title]{font-size:2em;}</style>

    <app-drawer-layout>

      <app-drawer swipe-open="">
        <section>
          <h2>app-header Properties</h2>
          <paper-checkbox checked="{{condenses}}">
            condenses
          </paper-checkbox>
          <paper-checkbox checked="{{fixed}}">
            fixed
          </paper-checkbox>
          <paper-checkbox checked="{{reveals}}">
            reveals
          </paper-checkbox>
          <paper-checkbox checked="{{shadow}}">
            shadow
          </paper-checkbox>

          <h2>app-header Effects</h2>
          <paper-checkbox checked="{{blendBackground}}">
            blend-background
          </paper-checkbox>
          <paper-checkbox checked="{{fadeBackground}}">
            fade-background
          </paper-checkbox>
          <paper-checkbox checked="{{parallaxBackground}}">
            parallax-background
          </paper-checkbox>
          <paper-checkbox checked="{{resizeSnappedTitle}}">
            resize-snapped-title
          </paper-checkbox>
          <paper-checkbox checked="{{resizeTitle}}">
            resize-title
          </paper-checkbox>
          <paper-checkbox checked="{{waterfall}}">
            waterfall
          </paper-checkbox>
        </section>
      </app-drawer>

      <app-header-layout>

        <app-header condenses="[[condenses]]" fixed="[[fixed]]" reveals="[[reveals]]" shadow="[[shadow]]" effects="[[_computeEffects(blendBackground, fadeBackground, parallaxBackground, resizeSnappedTitle, resizeTitle, waterfall)]]">

          <app-toolbar>
            <paper-icon-button icon="app:menu" drawer-toggle=""></paper-icon-button>
            <div condensed-title="">Test Drive app-header</div>
          </app-toolbar>

          <app-toolbar></app-toolbar>

          <app-toolbar>
            <div title="" spacer="">Test Drive</div>
          </app-toolbar>

        </app-header>

        <sample-content size="100"></sample-content>

      </app-header-layout>

    </app-drawer-layout>

  </template>

  <script>Polymer({is:"test-app",properties:{condenses:{type:Boolean,value:!0},fixed:{type:Boolean,value:!0},reveals:{type:Boolean,value:!1},shadow:{type:Boolean,value:!1},blendBackground:{type:Boolean,value:!0},fadeBackground:{type:Boolean,value:!1},parallaxBackground:{type:Boolean,value:!0},resizeSnappedTitle:{type:Boolean,value:!1},resizeTitle:{type:Boolean,value:!0},waterfall:{type:Boolean,value:!0}},observers:['_removeIf("fixed", reveals)','_removeIf("reveals", fixed)','_removeIf("shadow", waterfall)','_removeIf("blendBackground", fadeBackground)','_removeIf("fadeBackground", blendBackground)','_removeIf("resizeSnappedTitle", resizeTitle)','_removeIf("resizeTitle", resizeSnappedTitle)','_removeIf("waterfall", shadow)'],_computeEffects:function(){return[this.blendBackground?"blend-background ":"",this.fadeBackground?"fade-background ":"",this.parallaxBackground?"parallax-background ":"",this.resizeSnappedTitle?"resize-snapped-title ":"",this.resizeTitle?"resize-title ":"",this.waterfall?"waterfall ":""].join("")},_removeIf:function(e,a){this[e]&&a&&(this[e]=!1)}});</script>

</dom-module>
</body></html>