<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-styles/paper-styles.html">
<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../../bower_components/paper-fab/paper-fab.html">
<link rel="import" href="../../bower_components/paper-material/paper-material.html">
<link rel="import" href="../../bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="../../bower_components/neon-animation/neon-animatable.html">
<link rel="import" href="../../bower_components/neon-animation/neon-animated-pages.html">
<link rel="import" href="../../bower_components/neon-animation/neon-animations.html">

<link rel="import" href="../../controllets/items-list-controllet/item-list-controllet.html">
<link rel="import" href="../../controllets/search-panel-controllet/search-panel-controllet.html">

<dom-module id="animated-button-container-controllet">

    <style>

        :host {
        @apply(--layout-horizontal);
        @apply(--layout-center-center);
        }
        #pages{
            position: absolute;
            top: -38px;
            left: 113px;
        }

        .window {
            width: 30vw;
            height: 50vh;
            background: #e8e8e8;
            position: absolute;
            top: 64px;
            left: 0px;
            z-index: 1000;
        }

        .hidden{
            display: none;
        }

        #close{
            position: absolute;
            top: 8px;
            left: 28.5vw;
            --iron-icon-height: 24px;
            --iron-icon-width: 24px;
            width: 32px;
            height: 32px;
            --paper-fab-background:#9e9e9e;
            z-index: 1001;
        }

        #open{
            --iron-icon-height: 48px;
            --iron-icon-width: 48px;
            width: 64px;
            height: 64px;
            --paper-fab-background:#2196f3;
        }

        #selected_item{
            margin-left: 25px;
            padding: 0;
            ms-transform: scale(0.60);
            -moz-transform: scale(0.60);
            -o-transform: scale(0.60);
            -webkit-transform: scale(0.60);
            transform: scale(0.60);
            -ms-transform-origin: 0 0;
            -moz-transform-origin: 0 0;
            -o-transform-origin: 0 0;
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;"
        }

        #container_content{
            z-index: 1000;
        }
        #toolbar{
            background: #2196F3 ;
            height: 45px;
        }

        search-panel-controllet{
            position: relative;
            top: -5px;
            left: 80px;
        }



    </style>

    <template>
        <neon-animated-pages id="pages" selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]">
            <neon-animatable><div id="hidden"></div></neon-animatable>
            <neon-animatable>
                <paper-material elevation="3" id="window" class="window">
                   <paper-fab id="close" mini icon="close" on-click="_onCloseClick"></paper-fab>
                    <paper-toolbar id="toolbar">
                        <search-panel-controllet></search-panel-controllet>
                    </paper-toolbar>
                   <div id="container_content"><content></content></div>
                </paper-material>
            </neon-animatable>
        </neon-animated-pages>

        <div class="horizontal layout" style="height: 64px;">
           <paper-fab mini icon="assessment" id="open" on-click="_onOpenClick"></paper-fab>
           <div id="selected_item"></div>
        </div>

    </template>

    <script>

        Polymer({

            is: 'animated-button-container-controllet',

            listeners:{
                'items-list-controllet_item-selected' : '_elementSelected',
                'search-panel-controllet_content-changed' : '_handleSearch'
            },

            properties: {
                selected : {
                    type  : Number,
                    value : 0
                },
                height:{
                    type: String,
                    value: "30vh"
                },
                width:{
                    type: String,
                    value: "30vh"
                },
                entryAnimation : {
                    type  : String,
                    value : ""
                },

                exitAnimation  : {
                    type  : String,
                    value : ""
                }
            },

            ready: function(){
                this.$.window.style.height = this.height + "vh";
                this.$.window.style.width  = (this.width - 0.5) + "vw";
                this.$.close.style.left    = (this.width - 3.5) + "vw";
            },

            _onOpenClick: function() {
                this.entryAnimation = 'fade-in-animation';
                this.exitAnimation  = 'fade-out-animation';
                this.selected = 1;
            },

            _onCloseClick: function(){
                /*this.entryAnimation = 'fade-out-animation';
                this.exitAnimation  = 'fade-in-animation';*/
                this.selected = 0;
            },

            _elementSelected: function(e){
                this.$.selected_item.innerHTML = "";
                this.$.selected_item.appendChild(e.detail.selectedElement);
            },
            _handleSearch: function(e){
                if(this.$.container_content.children[0]._handleSearch != undefined)
                   this.$.container_content.children[0]._handleSearch(e);

            }

        });

    </script>
</dom-module>