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

<link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="../../bower_components/paper-tabs/paper-tab.html">

<link rel="import" href="../../bower_components/neon-animation/neon-animation.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/iron-flex-layout/iron-flex-layout.html">
<!--<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">-->
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../bower_components/paper-styles/color.html">
<link rel="import" href="../../bower_components/paper-styles/typography.html">
<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../../bower_components/iron-image/iron-image.html">
<link rel="import" href="../../bower_components/iron-list/iron-list.html">

<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../../bower_components/paper-menu/paper-menu.html">
<link rel="import" href="../../bower_components/paper-item/paper-item.html">

<link rel="import" href="../../bower_components/paper-input/paper-input.html">

<link rel="import" href="../../bower_components/paper-input/paper-textarea.html">

<link rel="import" href="../../bower_components/paper-material/paper-material.html" />

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

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

<link rel="import" href="../providers-utility-controllet/providers-utility-controllet.html">
<link rel="import" href="ortelio-controllet.html">
<link rel="import" href="../../datalets/datasetexplorer-datalet/datasetexplorer-datalet.html">

<dom-module id="select-dataset-controllet">
    <template>
        <style>
            :host {
            --paper-dropdown-menu-icon: {
                 color: #000000;
             };
            --paper-dropdown-menu-ripple: {
                 color: #FFFFFF;
             };
            /*--paper-tab-ink: {*/
                 /*color: #FFFFFF;*/
             /*};*/
            }

            iron-list {
            --iron-list-items-container: {
                margin:16px 16px 8px 16px;
             };
            }

            paper-textarea {
                width: 100%;
                --paper-input-container-focus-color: #2196F3;
            }

            paper-input {
                --paper-input-container-focus-color: #2196F3;
            }
            paper-dropdown-menu {
                width: 100%;
                --paper-input-container-focus-color: #2196F3;
            }

            paper-item.iron-selected {
                background-color: #2196F3;
                color: #FFFFFF;
            }

            paper-checkbox {
                height: 24px;
                /*margin-top: 8px*/
                --paper-checkbox-checked-color: #2196F3;
                --paper-checkbox-checked-ink-color: #FFFFFF;
                --paper-checkbox-unchecked-color: #000000;
                --paper-checkbox-unchecked-ink-color: #FFFFFF;
                --paper-checkbox-label-color: #000000;
            }

            paper-icon-button{
                height: 48px;
                width: 48px;
                padding: 0px;
                --paper-icon-button-ink-color: #FFFFFF;
            }

            paper-icon-button:hover{
                color: #2196F3;
            }

            paper-icon-button[disabled]{
                color: #B6B6B6;
            }

            paper-icon-button.clear {
                width: 24px;
                height: 24px;
                padding: 0px 4px;
                color: #F44336;
                --paper-icon-button-ink-color: #FFFFFF;
            }

            paper-tabs {
                font-weight: bold;
            }

            paper-tab {
                transition: all 1.0s;
            }

            paper-tab.iron-selected {
                background-color: #2196F3;
                color: #FFFFFF;
            }

            paper-tab:not(.iron-selected):hover {
                color: #2196F3;
            }

            .item {
                /*@apply(--layout-horizontal);*/
                display: flex;
                padding: 11px;
                border: 1px solid #B6B6B6;
                border-radius: 4px;
                cursor: pointer;
                margin-bottom: 8px;
                background-color: #E0E0E0;
            }

            .item.expanded {
                /*border: 2px solid #2196F3;*/
                border-color: #2196F3;
            }

            .pad {
                @apply(--layout-flex);
                /*@apply(--layout-vertical);*/
            }

            .primary {
                font-weight: bold;
            }

            .item.expanded .primary {
                color: #2196F3;
            }

            .longText {
                display: none;
            }

            .item.expanded .longText {
                display: block;
            }

            #select_dataset_container {
                margin-top: 8px;
            }

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

            #select_dataset_container #neon_container {
                height: calc(100% - 172px);
                width: calc(100% - 8px);
            }

            #select_dataset_container #list_info {
                display: flex;
                height: calc(100% - 48px);
                width: calc(100% + 8px);/*bad*/
            }

            #select_dataset_container #list_container {
                position: relative;
                height: 100%;
                width: 50%;
                border-left: 4px solid #B6B6B6;
            }

            #select_dataset_container #info_container {
                position: relative;
                height: 100%;
                width: 50%;
                border-right: 4px solid #B6B6B6;
            }

            #select_dataset_container #info {
                position: relative;
                height: calc(100% - 56px);
                width: calc(100% - 56px);
                padding: 11px;
                border: 1px solid #B6B6B6;
                border-radius: 4px;
                background-color: #E0E0E0;
                margin: 16px;
            }

            #select_dataset_container #treemap_container {
                /*height: calc(100% - 244px);*/
                /*width: calc(100% - 8px);*/
                height: calc(100% - 48px);
                width: 100%;
                border: 4px solid #B6B6B6;
                border-top: 0px;
                border-bottom: 0px;
                position: relative;
            }

            #select_dataset_container #header {
                position: relative;
                z-index: 1;
                -webkit-box-shadow: 0 30px 24px -12px rgba(0, 0, 0, 0.14), 0 20px 30px -9px rgba(0, 0, 0, 0.12), 0 20px 10px -19px rgba(0, 0, 0, 0.4);
                -moz-box-shadow: 0 30px 24px -12px rgba(0, 0, 0, 0.14), 0 20px 30px -9px rgba(0, 0, 0, 0.12), 0 20px 10px -19px rgba(0, 0, 0, 0.4);
                box-shadow: 0 30px 24px -12px rgba(0, 0, 0, 0.14), 0 20px 30px -9px rgba(0, 0, 0, 0.12), 0 20px 10px -19px rgba(0, 0, 0, 0.4);

                background-color: #B6B6B6;
                display: flex;
                padding: 0px 4px;
            }

            #select_dataset_container #footer_list {
                position: relative;
                z-index: 1;
                -webkit-box-shadow: 0 -30px 24px -12px rgba(0, 0, 0, 0.14), 0 -20px 30px -9px rgba(0, 0, 0, 0.12), 0 -20px 10px -19px rgba(0, 0, 0, 0.4);
                -moz-box-shadow: 0 -30px 24px -12px rgba(0, 0, 0, 0.14), 0 -20px 30px -9px rgba(0, 0, 0, 0.12), 0 -20px 10px -19px rgba(0, 0, 0, 0.4);
                box-shadow: 0 -30px 24px -12px rgba(0, 0, 0, 0.14), 0 -20px 30px -9px rgba(0, 0, 0, 0.12), 0 -20px 10px -19px rgba(0, 0, 0, 0.4);
            }

            .noshadow {
                -webkit-box-shadow: none !important;
                -moz-box-shadow: none !important;
                box-shadow: none !important;
            }

            #select_dataset_container #footer_list,
            #select_dataset_container #footer_treemap {
                width: 100%;
                background-color: #B6B6B6;
                display: flex;
                padding: 0px 4px;
            }

            #select_dataset_container #url {
                height: 76px;/*100*/
                border: 4px solid #B6B6B6;
                border-top: 0px;
                padding: 0px 16px;
                margin-top: -4px;
            }

            #header .header_block {
                width: 20%;
                height: 40px;
                padding: 4px 16px 4px 16px;
            }

            /*.header_block:nth-child(2), .header_block:nth-child(3), .header_block:nth-child(3), .header_block:nth-child(4){*/
                /*visibility: hidden;*/
            /*}*/

            #header .header_block:nth-child(4) {
                text-align: center;
            }

            .footer_block {
                width: calc((100% - 0px) / 3);
                height: 24px;
                padding: 12px 8px 12px 8px;
                text-align: center;
            }

            .footer_block:nth-child(2) {
                height: 48px;
                padding: 0px 8px;
            }

            #suggested_div {
                visibility: hidden;
            }

            /*.info_resource_name {*/
                /*color: #2196F3;*/
                /*font-weight: bold;*/
                /*line-height: 48px;*/
            /*}*/

            /*#ortelio {*/
                /*/!*height: calc(100% - 172px);*!/*/
                /*/!*width: calc(100% - 8px);*!/*/
                /*height: 100%;*/
                /*width: 100%;*/
                /*background-color: red;*/
            /*}*/
        </style>

        <paper-material id="select_dataset_container" elevation="5">

            <paper-tabs selected="{{selected}}" no-bar>
                <paper-tab on-tap="_refreshList" noink><span id="listView"></span></paper-tab>
                <paper-tab on-tap="_noShadow" noink><span id="treeMapView"></span></paper-tab>
                <paper-tab on-tap="_hideSearch" noink><span id="extendedSearch"></span></paper-tab>
            </paper-tabs>

            <div id="header">
                <div class="header_block">
                    <paper-dropdown-menu id="ddl_provider" label="" no-label-float>
                        <paper-menu class="dropdown-content" selected="0">
                            <paper-item id="0" on-tap="_filter"></paper-item>
                            <template is="dom-repeat" items={{_toArray(providers)}} as="provider">
                                <!--<paper-item id={{provider.value.id}} style$="background: {{_getProviderColor(provider.value.id)}};">{{provider.value.title}}</paper-item>-->
                                <paper-item id={{provider.value.id}} on-tap="_filter">{{provider.value.title}}</paper-item>
                            </template>
                        </paper-menu>
                    </paper-dropdown-menu>
                </div>
                <div class="header_block">
                </div>
                <div class="header_block">
                </div>
                <div class="header_block">
                </div>
                <div class="header_block">
                    <paper-input id="datasets_filter" value={{filter}} no-label-float label="">
                        <iron-icon class="search" icon="search" prefix></iron-icon>
                        <paper-icon-button class="clear" suffix on-click="_clearInput" icon="clear" tabindex="0"></paper-icon-button>
                    </paper-input>
                </div>
            </div>

            <neon-animated-pages id="neon_container" selected="{{selected}}" entry-animation="fade-in-animation" exit-animation="fade-out-animation">

                <neon-animatable>
                    <div id="list_info">
                        <div id="list_container">
                            <iron-list id="list" items="{{shownDatasets}}" selection-enabled>
                                <template>
                                    <div>
                                        <div class$="{{getClassForItem(selected)}}" on-tap="_selectDataUrl" style$="background: {{_getColorForItem(item)}};">
                                            <span style="display:none;">{{item.url}}</span>
                                            <div class="pad">
                                                <div class="primary">{{item.resource_name}}</div>
                                                <!--<div class="longText">-->
                                                    <!--<template is="dom-repeat" items="{{_stringToArray(item.metas)}}" as="mata">-->
                                                        <!--<b>{{mata.name}}:</b>-->
                                                        <!--<span inner-h-t-m-l="{{mata.value}}"></span> <br>-->
                                                    <!--</template>-->
                                                <!--</div>-->
                                            </div>
                                            <iron-icon icon$="{{_getIconForItem(item)}}" style$="color: {{_getColorForIcon(item)}};"></iron-icon>
                                        </div>
                                    </div>
                                </template>
                            </iron-list>
                        </div>
                        <div id="info_container">
                            <div id="info">
                            </div>
                        </div>
                    </div>

                    <div id="footer_list">
                        <div class="footer_block"><span id="showing"></span> {{shownPrev}} <span id="to"></span> {{shownNext}} <span id="of"></span> {{length}} <span id="datasets"></span></div>
                        <div class="footer_block">
                            <paper-icon-button id="slider_chevron_left" class="chevron-left" on-click="_onPrevClick" icon="chevron-left"></paper-icon-button>
                            <paper-icon-button id="slider_chevron_right" class="chevron-right" on-click="_onNextClick" icon="chevron-right"></paper-icon-button>
                        </div>
                        <div id="suggested_div" class="footer_block">
                            <!--<template is="dom-if" if={{suggestedDatasets}}>-->
                                <paper-checkbox checked on-change="showSuggested"><span id="suggested_datasets"></span></paper-checkbox>
                            <!--</template>-->
                        </div>
                    </div>
                </neon-animatable>

                <neon-animatable>
                    <div id="treemap_container"></div>

                    <div id="footer_treemap">
                        <div class="footer_block"><span id="showing2"></span> {{tLength}} <span id="datasets2"></span></div>
                        <div class="footer_block"></div>
                        <div class="footer_block"></div>
                    </div>
                </neon-animatable>

                <neon-animatable>
                    <!--<div id="ortelio">-->
                        <ortelio-controllet datasets={{datasets}}></ortelio-controllet>
                    <!--</div>-->
                </neon-animatable>

            </neon-animated-pages>

            <div id="url">
                <paper-textarea id="selected_url" label="" value={{dataUrl}} error-message={{errorMessage}}></paper-textarea>
            </div>

        </paper-material>

    </template>

    <script>
        HTMLImports.whenReady(function() {
            Polymer({
                is: 'select-dataset-controllet',
                properties: {
                    datasets: {
                        type: Object,
                        value: undefined
                    },
                    filteredDatasets : {
                        type : Array,
                        value : undefined
                    },
                    shownDatasets : {
                        type : Array,
                        value : undefined
                    },
                    suggestedDatasets : {
                        type : Array,
                        value : undefined
                    },

                    providers : {
                        type : Array,
                        value : undefined
                    },
                    dataUrl : {
                        type  : String,
                        value : undefined,
                        observer : '_fireDataUrl'
                    },
                    filter : {
                        type  : String,
                        value : "",
                        observer : '_filter'
                    },
                    selected : {
                        type  : Number,
                        value : 0
                    },
                    prev : {type  : Number, value : undefined},
                    next : {type  : Number, value : undefined},
                    shownPrev : {type  : Number, value : undefined},
                    shownNext : {type  : Number, value : undefined},
                    length : {type  : Number, value : undefined},
                    tLength : {type  : Number, computed : 'treemapLength(length)'},
                    step : {type  : Number, value : 20},
                    colors : {
                        type : Array,
                        value : ["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69","#fccde5","#d9d9d9","#bc80bd","#ccebc5","#ffed6f"]
                    }
                },

                listeners: {
                    'datasetexplorer-datalet_data-url': '_selectDataUrl_treeMap'
                },

                ready : function() {
                    $(this.$.list_container).perfectScrollbar();
                    $(this.$.info).perfectScrollbar();

//                    this.$.selected_url.invalid = true;
                },

                attached: function() {
                    this._resize();
                    var that = this;
                    window.addEventListener("resize", function() { that._resize(); that._loadTreeMap();});

//                    this.providers = that.datasets["result"]["providers"];
//                    this.datasets = that.datasets["result"]["datasets"];

                    $.ajax({
                        url: "/cocreation/ajax/get-all-dataset",
                        dataType: "json",
                        success: function(spodDatasets){

                            that.providers = $.extend(that.datasets["result"]["providers"], {99: {api_url: "/cocreation/ajax/get-all-dataset", id: "99", image_hash: "SPOD", title: "SPOD"}});
                            that.datasets = $.merge(spodDatasets, that.datasets["result"]["datasets"]);

                            if(that.suggestedDatasets) {
                                that.tempDatasets = that.datasets;
                                that.datasets = that.suggestedDatasets.concat(that.datasets);
                                that.$.suggested_div.style.visibility = "visible";
                            }

                            that.filteredDatasets = that.datasets;

                            that.prev = 1;
                            that.next = that.step;
                            that.length = that.filteredDatasets.length;

                            that.shownPrev = Math.min(that.prev, that.length);
                            that.shownNext = Math.min(that.next, that.length);
                            that.shownDatasets = that.filteredDatasets.slice(that.prev-1, that.next);

                            that.$.list.scrollTarget = that.ownerDocument.documentElement;

                            that._translate();

                            that._loadTreeMap();
                        }
                    });
                },

                _translate : function(){
                    this.$.listView.innerHTML    = ln["listView_" + ln["localization"]];
                    this.$.treeMapView.innerHTML = ln["treeMapView_" + ln["localization"]];
                    this.$.extendedSearch.innerHTML = ln["extendedSearch_" + ln["localization"]];

                    this.$.ddl_provider.setAttribute("label", ln["provider_" + ln["localization"]]);
                    this.$.datasets_filter.setAttribute("label", ln["search_" + ln["localization"]]);

                    this.$.suggested_datasets.innerHTML = ln["suggestedDatasets_" + ln["localization"]];

                    this.$.showing.innerHTML = ln["showing_" + ln["localization"]];
                    this.$.showing2.innerHTML = ln["showing_" + ln["localization"]];
                    this.$.to.innerHTML = ln["to_" + ln["localization"]];
                    this.$.of.innerHTML = ln["of_" + ln["localization"]];
                    this.$.datasets.innerHTML = ln["datasets_" + ln["localization"]];
                    this.$.datasets2.innerHTML = ln["datasets_" + ln["localization"]];

                    this.$.selected_url.setAttribute("label", ln["selectedUrl_" + ln["localization"]]);
                    this.errorMessage = ln["wrongUrl_" + ln["localization"]];
                },

                showSuggested : function(e) {
                    if(e.target.checked)
                        this.datasets = this.suggestedDatasets.concat(this.tempDatasets);
                    else
                        this.datasets = this.tempDatasets;
                    this._filter();
                },

                _loadTreeMap : function(){
                    var h = $("#neon_container").height() - 48;
                    var w = $("#neon_container").width();

                    var data = JSON.stringify({result : {providers: this.providers, datasets: this.filteredDatasets}}).replace(/'/g, "");

                    if(this.filteredDatasets.length > 0)
                        this.$.treemap_container.innerHTML = "<datasetexplorer-datalet data='"+data+"' width=\""+w+"\" height=\""+h+"\" fields='[\"provider_name\",\"organization_name\",\"package_name\",\"resource_name\",\"url\",\"w\",\"metas\"]'></datasetexplorer-datalet>";
                    else
                        this.$.treemap_container.innerHTML = "";
                },

                _filter : function() {
                    if(this.filteredDatasets) {
                        this.async(function () {
                            var ddl_provider = $(this.$.ddl_provider).find("paper-menu")[0].selectedItem;
                            var name = ddl_provider.innerHTML.trim();
                            var id = this._getIdByProviderName(name);
                            this.prev = 1;
                            this.next = this.step;
                            if (id) {
                                //filtered by provider name
                                this.filteredDatasets = this.datasets.filter(function (el) {
                                    return el.provider_name == "p:" + id;
                                });
                            }
                            else {
                                this.filteredDatasets = this.datasets;
                            }

                            //filtered by filter
                            var filter = this.filter;
                            this.filteredDatasets = this.filteredDatasets.filter(function (el) {
                                return el.resource_name.toLowerCase().indexOf(filter.toLowerCase()) > -1;
                            });

                            this.length = this.filteredDatasets.length;

                            this.shownPrev = Math.min(this.prev, this.length);
                            this.shownNext = Math.min(this.next, this.length);
                            this.shownDatasets = this.filteredDatasets.slice(this.prev - 1, this.next);

                            $("#list_container").animate({scrollTop: 0}, 0);

                            this._loadTreeMap();
                        }, 0);
                    }
                },

                _refreshList : function() {
                    this.shownDatasets = this.filteredDatasets.slice(this.prev - 1, this.next);

                    this.$.header.style.display = "flex";
                    this.$.header.style.visibility = "visible";
//                    this.$.url.style.marginTop = "-4px";

                    this.$.header.className = this.$.header.className.replace(" noshadow", "");
                },

                _noShadow : function() {
                    this.$.header.style.display = "flex";
                    this.$.header.style.visibility = "visible";
//                    this.$.url.style.marginTop = "-4px";

                    this.$.header.className += " noshadow";
                },

                _hideSearch : function() {
//                    this.$.header.style.display = "none";
                    this.$.header.style.visibility = "hidden";
//                    this.$.url.style.marginTop = "44px";
                },

                _clearInput : function() {
                    this.$.datasets_filter.value = "";
                },

                _getIdByProviderName : function(name) {
                    for(var id in this.providers) {
                        if (this.providers[id].title == name)
                            return this.providers[id].id;
                    }
                },

//                iconForItem: function(item) {
//                    return item ? (item.integer < 50 ? 'star-border' : 'info-outline') : '';
//                },

                treemapLength : function(length) {
                    var ddl_provider = $(this.$.ddl_provider).find("paper-menu")[0].selectedItem;
                    var name = ddl_provider.innerHTML.trim();
                    var id = this._getIdByProviderName(name);

                    if(this.suggestedDatasets && !id)
                        return Math.max(length - this.suggestedDatasets.length, 0);
                    return length;
                },

                _getColorForIcon : function(item) {
                    var ddl_provider = $(this.$.ddl_provider).find("paper-menu")[0].selectedItem;
                    var name = ddl_provider.innerHTML.trim();
                    var id = this._getIdByProviderName(name);
                    if (id) {
                        return this.colors[0];
                    }
                    if(!item.provider_name) {
                        return "#00BCD4";
                    }
                    var id = item.provider_name.substring(2, item.provider_name.length);
                    var i = this.getProviderById(id) % this.colors.length;
                    return this.colors[i];
                },

                _getColorForItem : function(item) {
//                    var ddl_provider = $(this.$.ddl_provider).find("paper-menu")[0].selectedItem;
//                    var name = ddl_provider.innerHTML.trim();
//                    var id = this._getIdByProviderName(name);
//                    if (id) {
//                        return this.colors[0];
//                    }
                    if(!item.provider_name) {
                        return "#FFEB3B";
                    }
//                    var id = item.provider_name.substring(2, item.provider_name.length);
//                    var i = this.getProviderById(id) % this.colors.length;
//                    return this.colors[i];
                },

                _getIconForItem : function(item) {
                    return item.provider_name ? 'bookmark' : 'star';
                },

//                _getProviderColor: function(id) {
//                    var i = this.getProviderById(id) % this.colors.length;
//                    return this.colors[i];
//                },

                getClassForItem: function(selected) {
                    return selected ? 'item expanded' : 'item';
                },

                getProviderById: function(providerId) {
                    var i = 0;
                    for(var id in this.providers){
                        if(this.providers[id].id == providerId)
                            return i;
                        i++;
                    }
                },

                _onPrevClick : function(){
                    if(this.prev != 1) {
                        this.prev -= this.step;
                        this.next -= this.step;

                        this.shownPrev = Math.min(this.prev, this.length);
                        this.shownNext = Math.min(this.next, this.length);
                        this.shownDatasets = this.filteredDatasets.slice(this.prev - 1, this.next);
                    }
                    $("#list_container").animate({ scrollTop: 0}, 0);
                },

                _onNextClick : function(){
                    if(this.next < this.length) {
                        this.prev += this.step;
                        this.next += this.step;

                        this.shownPrev = Math.min(this.prev, this.length);
                        this.shownNext = Math.min(this.next, this.length);
                        this.shownDatasets = this.filteredDatasets.slice(this.prev - 1, this.next);
                    }
                    $("#list_container").animate({ scrollTop: 0}, 0);
                },

                _stringToArray: function(obj) {
                    obj = JSON.parse(obj);
                    return Object.keys(obj).map(function(key) {
                        return {
                            name: key,
                            value: obj[key]
                        };
                    });
                },

                _toArray: function(obj) {
                    return Object.keys(obj).map(function(key) {
                        return {
                            name: key,
                            value: obj[key]
                        };
                    });
                },

                _selectDataUrl : function(){
                    this.async(function () {
                        if(this.$.list.selectedItem) {

                            var metas = JSON.parse(this.$.list.selectedItem.metas);
                            var html = "<span style=\"color: #2196F3; font-weight: bold;\">" + this.$.list.selectedItem.resource_name + "</span><br><br>";
                            /*font-weight: bold;*/
                            /*line-height: 48px;*/
                            for(var i in metas)
                                html += "<b>" + i + ":</b> " + metas[i] + "<br>";
                            this.$.info.innerHTML = html;

                            this.dataUrl = this.$.list.selectedItem.url;
//                            var url = this.$.list.selectedItem.url;

//                            url = utility_getResourceUrl(url);

//                            // Check if CKAN
//                            var strDatasetPos = url.indexOf('/dataset/');
//                            var strResourcePos = (strDatasetPos >= 0) ? url.indexOf('/resource/') : -1;
//                            if (strDatasetPos >= 0 && strResourcePos > strDatasetPos) {
//                                var urlSegment1 = url.substring(0, strDatasetPos);
//                                var urlResourceEnd = url.indexOf('/', strResourcePos + 10);
//                                var resourceId = url.substring(strResourcePos + 10, urlResourceEnd);
//                                url = urlSegment1 + "/api/action/datastore_search?resource_id=" + resourceId;
//                            }
//
//                            // Check if OPENDATASOFT
//                            var strExploreDatasetPos = url.indexOf('/explore/dataset/');
//                            if (strExploreDatasetPos >= 0) {
//                                var urlSegment1 = url.substring(0, strExploreDatasetPos);
//                                var datasetEnd = url.indexOf(strExploreDatasetPos + 17, '/');
//                                var datasetId = url.substring(strExploreDatasetPos + 17, datasetEnd >= 0 ? datasetEnd : url.length);
//                                url = urlSegment1 + '/api/records/1.0/search?dataset=' + datasetId;
//                            }

//                            this.dataUrl = this._addlimitUrl(url);
//                            this.dataUrl = url;
                        }
                        else {
                            this.dataUrl = "";
                            this.$.info.innerHTML = "";
                        }
                    }, 0);
                },

                _selectDataUrl_treeMap : function(e) {
//                    this.dataUrl = this._addlimitUrl(e.detail.url);
                    this.dataUrl = e.detail.url;
                },

                _fireDataUrl : function(){
                    this.fire('dataset-selection-controllet_data-url', {url: this.dataUrl});
                },

//                _addlimitUrl : function(url){
//                    //CKAN --> action no limit
//                    if((url.indexOf("api/action") > -1) && !(url.indexOf("limit") > -1))
//                    {
//                        url += "&limit=99999";
//                    }
//                    //OpenDataSoft --> action no limit
//                    if((url.indexOf("api/records") > -1) && !(url.indexOf("rows") > -1)){
//                        url += "&rows=10000";
//                    }
//                    return url;
//                },

                _resize : function(){
                    var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 16;
                    h = h - 64 - 8; //height with page scroller
                    $("#select_dataset_container").height(h);
                }
            });
        });
    </script>
</dom-module>