<link rel="import" href="../../bower_components/polymer/polymer.html"/>
<link rel="import" href="../../bower_components/paper-material/paper-material.html"/>
<link rel="import" href="../../bower_components/paper-fab/paper-fab.html"/>
<link rel="import" href="../../bower_components/iron-icons/iron-icons.html"/>
<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html"/>
<link rel="import" href="../../bower_components/neon-animation/neon-animation.html"/>

<script src="../../locales/paper_card_controllet_ln.js"></script>

<dom-module id="paper-card-controllet">

    <template>
        <link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">
        <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
        <style>

            #paper_card_container {
                font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
                font-size: 16px;
                line-height: 16px;
            }

            #content {
                width: 100%;
                height: calc(100% - 64px);
                overflow: hidden;
            }

            #content.text {
                background-color: #FFFFCC;
                padding: 4px;
                width: calc(100% - 8px);
                height: calc(100% - 72px);
            }

            #paper_card_container .legend {
                position: relative;
                bottom: 48px;
                height: 32px;
                padding: 16px 0px 0px 8px;
                background-color: rgba(0, 0, 0, 0.8);
                color: white;
                font-weight: 700;
                word-wrap: break-word;
            }

            #paper_card_container .footer {
                height: 64px;
                width: 100%;
                position: relative;
                bottom: 48px;
                padding: 4px;
                font-size: 12px;
                word-wrap: break-word;
                overflow: hidden;
            }

            paper-fab {
                position: absolute;
                z-index: 10;
                --paper-fab-background:#2196F3;
            }

            paper-fab.open {
                bottom: -20px;
                right: 8px;
            }

            paper-fab.modify {
                top: -12px;
                right: 20px;
                --iron-icon-height: 18px;
                --iron-icon-width: 18px;
                width: 24px;
                height: 24px;
                --paper-fab-background:#B6B6B6;
            }

            paper-fab.delete {
                top: -12px;
                right: -12px;
                --iron-icon-height: 18px;
                --iron-icon-width: 18px;
                width: 24px;
                height: 24px;
                --paper-fab-background:#B6B6B6;
            }

            paper-dialog {
                margin: 0px;
                padding: 0px;
            }

            #fullscreen_container {
                display: inline;
                position: fixed;
                width: 80%;
                height: 70vh;
                right: 0;
                left: 0;
                top: 64px;
                margin-right: auto;
                margin-left: auto;
                z-index: 1100;
                padding: 8px;
                background-color: white;
            }

            #fullscreen_content {
                margin: 0px;
            }
        </style>


        <paper-material id="paper_card_container" elevation="3">

            <paper-fab id="card_modify" class="modify" mini icon="create" on-click="_handleModifyClick"></paper-fab>

            <paper-fab id="card_delete" class="delete" mini icon="delete" on-click="_handleDeleteClick"></paper-fab>

            <div id="content">
                <content></content>
            </div>

            <div class="legend">

                {{cardTitle}}

                <template is="dom-if" if="{{checkType(cardType, 'link')}}">

                    <paper-fab id="card_open_link" class="open" mini icon="link" on-click="_handleOpenClick"></paper-fab>

                </template>

                <template is="dom-if" if="{{checkType(cardType, 'text')}}">

                    <paper-fab id="card_open_text" class="open" mini icon="text-format" on-click="_handleOpenClick"></paper-fab>

                </template>

                <template is="dom-if" if="{{checkType(cardType, 'datalet')}}">

                    <paper-fab id="card_open_datalet" class="open" mini icon="assessment" on-click="_handleOpenClick"></paper-fab>

                </template>

            </div>

            <div class="footer">
                {{comment}}
            </div>

            <paper-dialog id="fullscreen_container" entry-animation="scale-up-animation" exit-animation="fade-out-animation">
                <!--with-backdrop-->
                <div id="fullscreen_content"></div>
            </paper-dialog>

        </paper-material>

    </template>

    <script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>

    <script>
        Polymer({
            is: "paper-card-controllet",
            properties: {

                width: {
                    type: Number,
                    value: 200
                },

                height: {
                    type: Number,
                    value: 250
                },

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

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

                comment:{//cardDescription
                    cardType: String,
                    value: ""
                }

            },

            ready: function(){
                this._resize();
            },

            attached: function(){
                if(this.cardType == "text")
                    this.$.content.className += this.$.content.className ? ' text' : 'text';

                $(this.$.fullscreen_container).perfectScrollbar();

                this._resize();
                this._translate();
            },

            _translate: function(){
                paper_ln["ln"] = ODE.user_language;

                this.$.card_modify.setAttribute("title", paper_ln["modify_"+paper_ln["ln"]]);
                this.$.card_delete.setAttribute("title", paper_ln["delete_"+paper_ln["ln"]]);
                if(this.checkType(this.cardType, 'link'))
                    if(this.$$("#card_open_link"))
                        this.$$("#card_open_link").setAttribute("title", paper_ln["open_"+paper_ln["ln"]]);
                if(this.checkType(this.cardType, 'text'))
                    if(this.$$("#card_open_text"))
                        this.$$("#card_open_text").setAttribute("title", paper_ln["open_"+paper_ln["ln"]]);
                if(this.checkType(this.cardType, 'datalet'))
                    if(this.$$("#card_open_datalet"))
                        this.$$("#card_open_datalet").setAttribute("title", paper_ln["open_"+paper_ln["ln"]]);
            },

            _resize: function(){
                $(this.$.paper_card_container).height(this.height);
                $(this.$.paper_card_container).width(this.width);
            },

            checkType: function(type, check){
                return (type == check);
            },

            _handleDeleteClick: function(){
                this.fire('paper-card-controllet_delete-clicked', {data : this});
            },

            _handleModifyClick: function(){
                this.fire('paper-card-controllet_details-clicked', {data : this});
            },

            _handleOpenClick: function(){
                var html;
                switch(this.cardType){
                    case 'text':
                        this.$.fullscreen_container.style.backgroundColor = "#ffc";
                        break;
                    case 'link':
                        window.open(this.getAttribute('card-link'), '_blank');
                        return;
                }

                var html = this.$.content.innerHTML;
                this.$.fullscreen_content.innerHTML = html;

                this.$.fullscreen_container.open();
                this.$.fullscreen_container.style.display = "inline";//datalet resize in chrome
            }

        })
    </script>

</dom-module>