<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-styles/color.html">
<!--<link rel="import" href="../../bower_components/paper-styles/demo.css">-->

<link rel="import" href="../../bower_components/neon-animation/neon-animated-pages.html">
<link rel="import" href="../../bower_components/neon-animation/neon-animatable.html">
<link rel="import" href="../../bower_components/neon-animation/neon-animations.html">

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

<dom-module id="items-slider-controllet">
    <template>
        <link rel="stylesheet" type="text/css" href="css/style.css" />


        <style is="custom-style">
           /* body {
                margin: 0;
                padding: 3em;
                -webkit-tap-highlight-color: rgba(0,0,0,0);
                -webkit-touch-callout: none;
                line-height: 0;
                font-size: 1vw;
            }


            :host ::content .content{
                position: relative;
                float: left;
                margin : .5em;

                /!*height: 9em;
                width: 9em;*!/
                min-width: 80px;
                max-width: 115px;
                background: #fff;
                border-radius: 0.125rem;
                box-shadow: 0 0.625em 0.5125em 0 rgba(0, 0, 0, 0.25);
                padding: 1em;
            }

            :host ::content .content-selected{
                position: relative;
                float: left;
                top : .5em;
                margin : .5em;

                /!*height: 9em;
                width: 8em;*!/
                min-width: 80px;
                max-width: 115px;

                background: #fff;
                border-style: solid;
                border-width: 0.03em;
                border-radius: 0.125rem;
                box-shadow: 0 1.825em 1.7125em 0 rgba(0, 0, 0, 0.50);
                padding: 1em;
            }

           img .card-content{
                padding: 0.5px 0 0.5px;
           }

           .title {
                display: inline-block;
                position: relative;
                padding-left: .2em;
                padding-right: .2em;
                color: var(--paper-indigo-500);
           }

           .title .big {
                /!*font-size: 1.1em;*!/
                widht: 100%;
                font-size: 0.9em;
                color: var(--google-grey-500);
           }

            .toolbar_button{
                /!*height: 100%;
                display: inline-block;*!/
                float: left;
                margin-top: 3.5em;
                --iron-icon-height: 28px;
                --iron-icon-width: 28px;
            }

           #pages{
                position: relative;
                float:left;
                display: inline-block;
                height: 22vh;
                width: 80%;
                overflow: hidden;
                text-align: center;
                /!*margin-left: 3em;*!/
            }*/

           .ca-item-main-selected{
               padding:20px;
               position:absolute;
               top:5px;
               left:5px;
               right:5px;
               bottom:5px;
               border-radius: 4px;
               -webkit-box-shadow: 1px 0px 8px 0px rgba(50, 50, 50, 1);
               -moz-box-shadow:    1px 0px 8px 0px rgba(50, 50, 50, 1);
               box-shadow:         1px 0px 8px 0px rgba(50, 50, 50, 1);
           }

        </style>


        <div id="ca_container" class="ca-container">
            <div id="cards" class="ca-wrapper">
                <template is="dom-repeat" items="{{items}}" as="item" index-as="i">
                    <div class="ca-item" id="{{getName(i)}}" on-click="_cardClick">
                        <div class="ca-item-main">
                            <div class="card-content">
                                <div class="title">
                                    <div class="big">{{getName(i)}}</div>
                                    </div>
                                </div>
                            <br>
                            <div class="card-content">
                                <img width="75px" height="50px" src="{{getImage(i)}}" >
                            </div>
                        </div>
                    </div>
                </template>
            </div>
        </div>

    </template>

    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="js/jquery.mousewheel.js"></script>
    <script type="text/javascript" src="js/jquery.contentcarousel.js"></script>

    <script>

        Polymer({

           is : 'items-slider-controllet',

            properties : {

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

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

                selected : {
                    type  : Number,
                    value : 0
                },

                /**
                 * It stores all items to put in the slider
                 *
                 * @attribute tools
                 * @type array
                 * @default 'null'
                 */
                items : {
                    type: Array,
                    value: []
                },

                itemsPages : {
                   type : Array,
                   value : []
                },

                itemsPerPage : {
                    type : Array,
                    value : []
                },

                prevSelectedCard : {
                    type: Object,
                    value : null
                },

                numItemsPerPage : {
                    type: Number,
                    value : 4
                }

            },

            getName : function(index){
                return this.items[index].name.replace("-datalet","");
            },

            getImage : function(index){
                return this.items[index].image;
            },

            ready : function(){
               /* this.$.cards.innerHTML = '';
                for(var i = 0; i < this.items.length; i++){
                    this.$.cards.innerHTML += '<div class="ca-item">' +
                                                 '<div class="ca-item-main" on-click="_cardClick">' +
                                                    '<div class="card-content">' +
                                                       '<div class="title">' +
                                                          '<div class="big">' +this.items[i].name.replace("-datalet","") + '</div>' +
                                                       '</div>' +
                                                    '</div>' +
                                                    '<br>' +
                                                    '<div class="card-content">' +
                                                       '<img width="75px" height="50px" src="' + this.items[i].image + '" >' +
                                                    '</div>' +
                                                 '</div>' +
                                              '</div>';

                }*/

                this.async(function(){
                    $(this.$.ca_container).contentcarousel();
                },1000)

            },

            _cardClick : function(e){
                if(this.prevSelectedCard != null){
                    this.prevSelectedCard.children[0].className = "ca-item-main";

                }
                e.currentTarget.children[0].className = "ca-item-main-selected style-scope items-slider-controllet";
                this.prevSelectedCard = e.currentTarget;

                this.fire('items-slider-controllet_item-selected', {datalet: e.currentTarget.id + "-datalet"});

            }
        });

    </script>

</dom-module>