diff --git a/controllets/document-card-controllet/document-card-controllet.html b/controllets/document-card-controllet/document-card-controllet.html
new file mode 100644
index 0000000..5cc9d72
--- /dev/null
+++ b/controllets/document-card-controllet/document-card-controllet.html
@@ -0,0 +1,215 @@
+<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="document-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;
+                background-color: white;
+            }
+
+            #content {
+                padding: 4px 4px 0px 4px;
+                position:relative;
+                width: 98%;
+                height: 90%;
+            }
+
+            .footer {
+                height: 16px;
+            }
+
+            .comment {
+                position: relative;
+                top: -50px;
+                height: 50px;
+                background-color: white;
+                padding: 8px;
+                font-size: small;
+                color: #727272;
+                word-wrap: break-word;
+                overflow: hidden;
+            }
+
+            paper-fab#fullscreen-button {
+                position: absolute;
+                /*z-index: 10;*/
+                top: 11px;
+                right: 15px;
+                --paper-fab-background:#FFFFFF;
+                padding : 0px;
+                margin: 0px;
+                height: 24px;
+                width: 24px;
+                color: #666666;
+            }
+
+            paper-dialog {
+                margin: 0px;
+                padding: 0px;
+                z-index: 1100;
+            }
+
+            #fullscreen_container {
+                display: inline;
+                position: fixed;
+                width: 90%;
+                height: 80vh;
+                right: 0;
+                left: 0;
+                top: 64px;
+                margin-right: auto;
+                margin-left: auto;
+                padding: 8px;
+                background-color: white;
+            }
+
+            #fullscreen_content {
+                margin: 0px;
+            }
+
+            #resource{
+                height: 100%;
+                width: 100%;
+            }
+
+            :host #docs-header{
+                display : none;
+            }
+
+            #info_close_button{
+                z-index: 1;
+                color: #666666;
+                box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
+                -webkit-transition: 0.2s ease-out;
+                -moz-transition: 0.2s ease-out;
+                -o-transition: 0.2s ease-out;
+                transition: 0.2s ease-out;
+                cursor: pointer;
+                background: linear-gradient(#f4f4f4,#e4e4e4);
+                float: right;
+                top: 11px;
+                right: 8px;
+                margin: 0px;
+                position: absolute;
+                height: 29px;
+                min-width: 30px;
+                padding: 5px;
+            }
+
+        </style>
+
+
+        <paper-material id="paper_card_container" elevation="{{elevation}}">
+
+            <div id="content">
+                <iframe id="resource" src="{{resourceUrl}}?userName={{userName}}"></iframe>
+                <!--<iframe id="resource" src="{{resourceUrl}}"></iframe>-->
+            </div>
+
+            <paper-fab id="fullscreen-button" class="open" mini icon="fullscreen" on-click="_handleOpenClick"></paper-fab>
+
+            <paper-dialog id="fullscreen_container" entry-animation="scale-up-animation" exit-animation="fade-out-animation">
+                <!--with-backdrop-->
+                <div id="fullscreen_content"></div>
+                <paper-button id="info_close_button" dialog-confirm autofocus>x</paper-button>
+            </paper-dialog>
+
+        </paper-material>
+
+    </template>
+
+    <script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>
+
+    <script>
+        _this = null;
+
+        Polymer({
+            is: "document-card-controllet",
+            properties: {
+
+                width: {
+                    type: Number,
+                    observer: "_changeWidth"
+                },
+
+                height: {
+                    type: Number,
+                    observer: "_changeHeight"
+                },
+
+                elevation:{
+                    type: Number,
+                    value: 3
+                },
+
+                createNewType : {
+                    type : String,
+                    value : undefined
+                },
+
+                comment:{
+                    cardType: String,
+                    value: ""
+                },
+
+                resourceUrl : {
+                    type : String,
+                    value : undefined
+                },
+
+                userName: {
+                    type: String,
+                    value: undefined
+                },
+                lang:{
+                    type: String,
+                    value: navigator.language
+                }
+            },
+
+            ready : function(){
+            },
+
+            attached: function(){
+                $(this.$.fullscreen_container).perfectScrollbar();
+            },
+
+
+            _changeWidth: function(){
+                //this.style.width = this.width + "px";
+                //this.$.paper_card_container.style.width = this.width + "px";
+                //this.$.content.style.width = this.width - 8 + "px";
+            },
+
+            _changeHeight: function(){
+                this.style.height = this.height +  "vh";
+                //this.$.content.width = this.width  - 4 + "vh";
+                this.$.paper_card_container.style.height = this.height + "vh";
+                this.$.content.style.height = this.height - 1 + "vh";
+                $(this.$.content).perfectScrollbar();
+            },
+
+            _handleOpenClick: function(){
+                this.$.fullscreen_content.style.height = "80vh";
+                this.$.fullscreen_content.innerHTML = this.$.content.innerHTML;
+                this.$.fullscreen_container.style.display = "inline";//datalet res
+                this.$.fullscreen_container.open();
+            }
+
+        })
+    </script>
+
+</dom-module>
\ No newline at end of file
diff --git a/controllets/select-dataset-controllet/select-dataset-controllet.html b/controllets/select-dataset-controllet/select-dataset-controllet.html
index ccf06f7..f2b387f 100755
--- a/controllets/select-dataset-controllet/select-dataset-controllet.html
+++ b/controllets/select-dataset-controllet/select-dataset-controllet.html
@@ -135,6 +135,11 @@
                 background-color: #E0E0E0;
             }
 
+            .item.expanded {
+                /*border: 2px solid #2196F3;*/
+                border-color: #2196F3;
+            }
+
             .pad {
                 @apply(--layout-flex);
                 /*@apply(--layout-vertical);*/
@@ -171,15 +176,37 @@
                 width: calc(100% - 8px);
             }
 
-            #select_dataset_container #list_container {
-                /*height: calc(100% - 244px);*/
-                /*width: calc(100% - 8px);*/
+            #select_dataset_container #list_info {
+                display: flex;
                 height: calc(100% - 48px);
-                width: 100%;
-                border: 4px solid #B6B6B6;
-                border-top: 0px;
-                border-bottom: 0px;
+                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;
+
+                /*background-color: red;*/
+            }
+
+            #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 {
@@ -264,6 +291,12 @@
             #suggested_div {
                 visibility: hidden;
             }
+
+            /*.info_resource_name {*/
+                /*color: #2196F3;*/
+                /*font-weight: bold;*/
+                /*line-height: 48px;*/
+            /*}*/
         </style>
 
         <paper-material id="select_dataset_container" elevation="5">
@@ -303,30 +336,32 @@
             <neon-animated-pages id="neon_container" selected="{{selected}}" entry-animation="fade-in-animation" exit-animation="fade-out-animation">
 
                 <neon-animatable>
-                    <div id="list_container">
-                        <iron-list id="list" items="{{shownDatasets}}" selection-enabled><!--multi-selection-->
-                            <template>
-                                <div>
-                                    <div class$="{{getClassForItem(selected)}}" on-tap="_selectDataUrl" style$="background: {{_getColorForItem(item)}};">
-                                    <!--<div class$="{{getClassForItem(selected)}}" on-tap="_selectDataUrl">-->
-                                        <span style="display:none;">{{item.url}}</span>
-                                        <div class="pad">
-                                            <div class="primary">{{item.resource_name}}</div>
-                                            <!--<div class="shortText" style="display:none;">{{item.url}}</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 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>
-                                        <!--<iron-icon icon$="[[iconForItem(item)]]"></iron-icon>-->
-                                        <!--<iron-icon icon="bookmark" style$="color: {{_getColorForItem(item)}};"></iron-icon>-->
-                                        <iron-icon icon$="{{_getIconForItem(item)}}" style$="color: {{_getColorForIcon(item)}};"></iron-icon>
                                     </div>
-                                </div>
-                            </template>
-                        </iron-list>
+                                </template>
+                            </iron-list>
+                        </div>
+                        <div id="info_container">
+                            <div id="info">
+                            </div>
+                        </div>
                     </div>
 
                     <div id="footer_list">
@@ -422,6 +457,7 @@
 
                 ready : function() {
                     $(this.$.list_container).perfectScrollbar();
+                    $(this.$.info).perfectScrollbar();
 
 //                    this.$.selected_url.invalid = true;
                 },
@@ -429,7 +465,7 @@
                 attached: function() {
                     this._resize();
                     var that = this;
-                    window.addEventListener("resize", function() { that._resize(); });
+                    window.addEventListener("resize", function() { that._resize(); that._loadTreeMap();});
 
                     this.providers = this.datasets["result"]["providers"];
                     this.datasets = this.datasets["result"]["datasets"];
@@ -667,6 +703,15 @@
                 _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;
+
                             var url = this.$.list.selectedItem.url;
 
                             // Check if CKAN
@@ -692,6 +737,7 @@
                         }
                         else {
                             this.dataUrl = "";
+                            this.$.info.innerHTML = "";
                         }
                     }, 0);
                 },
diff --git a/controllets/select-dataset-controllet/select-dataset-controllet_purelist.html b/controllets/select-dataset-controllet/select-dataset-controllet_purelist.html
new file mode 100755
index 0000000..434758f
--- /dev/null
+++ b/controllets/select-dataset-controllet/select-dataset-controllet_purelist.html
@@ -0,0 +1,728 @@
+<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="../../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;
+            }
+
+            .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_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 #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;
+            }
+        </style>
+
+        <paper-material id="select_dataset_container" elevation="5">
+
+            <paper-tabs selected="{{selected}}" no-bar>
+                <paper-tab noink on-tap="_refreshList"><span id="listView"></span></paper-tab>
+                <!--<paper-tab noink ><span id="listView"></span></paper-tab>-->
+                <paper-tab on-tap="_noShadow" noink><span id="treeMapView"></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_container">
+                        <iron-list id="list" items="{{shownDatasets}}" selection-enabled><!--multi-selection-->
+                            <template>
+                                <div>
+                                    <div class$="{{getClassForItem(selected)}}" on-tap="_selectDataUrl" style$="background: {{_getColorForItem(item)}};">
+                                    <!--<div class$="{{getClassForItem(selected)}}" on-tap="_selectDataUrl">-->
+                                        <span style="display:none;">{{item.url}}</span>
+                                        <div class="pad">
+                                            <div class="primary">{{item.resource_name}}</div>
+                                            <!--<div class="shortText" style="display:none;">{{item.url}}</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$="[[iconForItem(item)]]"></iron-icon>-->
+                                        <!--<iron-icon icon="bookmark" style$="color: {{_getColorForItem(item)}};"></iron-icon>-->
+                                        <iron-icon icon$="{{_getIconForItem(item)}}" style$="color: {{_getColorForIcon(item)}};"></iron-icon>
+                                    </div>
+                                </div>
+                            </template>
+                        </iron-list>
+                    </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-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.$.selected_url.invalid = true;
+                },
+
+                attached: function() {
+                    this._resize();
+                    var that = this;
+                    window.addEventListener("resize", function() { that._resize(); that._loadTreeMap();});
+
+                    this.providers = this.datasets["result"]["providers"];
+                    this.datasets = this.datasets["result"]["datasets"];
+
+                    if(this.suggestedDatasets) {
+                        this.tempDatasets = this.datasets;
+                        this.datasets = this.suggestedDatasets.concat(this.datasets);
+                        this.$.suggested_div.style.visibility = "visible";
+                    }
+
+                    this.filteredDatasets = this.datasets;
+
+                    this.prev = 1;
+                    this.next = this.step;
+                    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);
+
+                    this.$.list.scrollTarget = this.ownerDocument.documentElement;
+
+                    this._translate();
+
+                    this._loadTreeMap();
+                },
+
+                _translate : function(){
+                    this.$.listView.innerHTML    = ln["listView_" + ln["localization"]];
+                    this.$.treeMapView.innerHTML = ln["treeMapView_" + 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='[\"result,datasets,provider_name\",\"result,datasets,organization_name\",\"result,datasets,package_name\",\"result,datasets,resource_name\",\"result,datasets,url\",\"result,datasets,w\",\"result,datasets,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.className = this.$.header.className.replace(" noshadow", "");
+                },
+
+                _noShadow : function() {
+                    console.log(this.$.header);
+                    this.$.header.className += " noshadow";
+                },
+
+                _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 url = this.$.list.selectedItem.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);
+                        }
+                        else {
+                            this.dataUrl = "";
+                        }
+                    }, 0);
+                },
+
+                _selectDataUrl_treeMap : function(e) {
+                    this.dataUrl = this._addlimitUrl(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>
\ No newline at end of file