<!--
Copyright (c) 2015 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="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/neon-animation/neon-shared-element-animatable-behavior.html">

<dom-module id="fullsize-page-with-card-controllet">

    <style>

        :host {
            display: block;
        }

        .fixed {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100vw;
        }

        .card {
            position: relative;
            margin: 20px 20px 20px 20px;
            height: 90%;
        }

        .grid-item-c0 {background-color: #0D47A1;}
        .grid-item-c1 {background-color: #1976D2;}
        .grid-item-c2 {background-color: #2196F3;}
        .grid-item-c3 {background-color: #64B5F6;}
        .grid-item-c4 {background-color: #BBDEFB;}

        .grid-item-c0-l {background-color: #1565C0;}
        .grid-item-c1-l {background-color: #1E88E5;}
        .grid-item-c2-l {background-color: #42A5F5;}
        .grid-item-c3-l {background-color: #90CAF9;}
        .grid-item-c4-l {background-color: #E3F2FD;}

    </style>

    <template>

        <div id="fixed" class$="[[_computeFixedBackgroundClass(color)]]"></div>
        <div id="card" class$="[[_computeCardClass(color)]]">
            <template is="dom-if" if="{{_checkUndefined(publicRoom)}}">
                <iframe src="/public-room/{{publicRoom}}" width="100%" height="100%"></iframe>
            </template>
        </div>

    </template>

</dom-module>

<script>

    Polymer({

        is: 'fullsize-page-with-card-controllet',

        behaviors: [
            Polymer.NeonSharedElementAnimatableBehavior
        ],

        properties: {

            publicRoom : {
              type: String
            },

            color: {
                type: String
            },

            sharedElements: {
                type: Object,
                value: function() {
                    return {
                        'hero': this.$.card,
                        'ripple': this.$.fixed
                    }
                }
            },

            animationConfig: {
                type: Object,
                value: function() {
                    return {
                        'entry': [{
                            name: 'ripple-animation',
                            id: 'ripple',
                            toPage: this,
                        }, {
                            name: 'hero-animation',
                            id: 'hero',
                            toPage: this,
                            timing: {
                                delay: 150
                            }
                        }],
                        'exit': [{
                            name: 'fade-out-animation',
                            node: this.$.fixed
                        }, {
                            name: 'transform-animation',
                            transformFrom: 'none',
                            transformTo: 'translate(0px,-200vh) scale(0.9,1)',
                            node: this.$.card
                        }]
                    }
                }
            }

        },

        _checkUndefined: function(variable)
        {
          if(typeof variable === 'undefined')
              return false;
          return true;
        },

        _computeCardClass: function(color) {
            var cls = 'card';
            return cls + ' ' + color;
        },

        _computeFixedBackgroundClass: function(color) {
            var cls = 'fixed';
            return cls + ' ' + color + '-l';
        }

    });

</script>