From 86acb79741b568816b3b22bbd0b52a61e803ef61 Mon Sep 17 00:00:00 2001
From: jsonlang <vito.minchilli@gmail.com>
Date: Wed, 4 Feb 2026 13:02:17 +0100
Subject: [PATCH] Version 1.1.3

---
 "Icon\r"                                      |     0
 app.css                                       |     4 +
 app.html                                      |     2 +-
 app.js                                        |   126 +-
 app.json                                      |   324 +-
 assets/.DS_Store                              |   Bin 6148 -> 6148 bytes
 "assets/Icon\r"                               |     0
 "assets/api/Icon\r"                           |     0
 assets/api/reslevis.api-1.0.5.json            |     6 +-
 "assets/fonts/Icon\r"                         |     0
 "assets/fonts/Quicksand/Icon\r"               |     0
 "assets/fonts/Quicksand/static/Icon\r"        |     0
 "assets/fonts/Titillium_Web/Icon\r"           |     0
 "assets/images/Icon\r"                        |     0
 assets/images/logo-reslevis-white.svg         |    72 +
 "assets/maps/Icon\r"                          |     0
 assets/maps/index.html                        |     2 +-
 "assets/modules/Icon\r"                       |     0
 assets/modules/reslevis.config.json           |   109 +
 assets/modules/reslevis.data.json             |    14 -
 "assets/plugins/Icon\r"                       |     0
 "assets/plugins/tablestack/Icon\r"            |     0
 assets/templates/Alarm.html                   |    51 +-
 assets/templates/Building.html                |    57 +-
 assets/templates/Gateway.html                 |    51 +-
 "assets/templates/Icon\r"                     |     0
 assets/templates/Info.html                    |    10 +-
 assets/templates/Menu.html                    |    55 +-
 assets/templates/Operator.html                |    53 +-
 assets/templates/Setting.html                 |    33 +-
 assets/templates/Subject.html                 |    53 +-
 assets/templates/Text.html                    |     4 +-
 assets/templates/Track.html                   |    53 +-
 assets/templates/Tracker.html                 |    53 +-
 assets/templates/Zone.html                    |    55 +-
 assets/templates/fingerprint.html             |     4 +-
 assets/templates/floor.html                   |    51 +-
 assets/templates/home.html                    |     8 +-
 assets/templates/menuleft.html                |   121 +
 assets/templates/trackerZone.html             |    48 +-
 db/.DS_Store                                  |   Bin 6148 -> 6148 bytes
 "db/Icon\r"                                   |     0
 "db/presence/Icon\r"                          |     0
 "db/reslevis/Icon\r"                          |     0
 db/reslevis/Setting.json                      |    13 +-
 "db/reslevis/Track/Icon\r"                    |     0
 err.json                                      |    22 +
 jsonic/.DS_Store                              |   Bin 6148 -> 6148 bytes
 "jsonic/Icon\r"                               |     0
 "jsonic/images/Icon\r"                        |     0
 "jsonic/images/flags/Icon\r"                  |     0
 "jsonic/images/langs/Icon\r"                  |     0
 "jsonic/js/Icon\r"                            |     0
 jsonic/js/jsonic.1.0.13 copia.js              | 16029 ++++++++++++++++
 jsonic/js/jsonic.1.0.13.js                    | 16029 ++++++++++++++++
 .../js/{jsonic-1.0.14.js => jsonic.1.0.14.js} |     0
 "jsonic/modules/Icon\r"                       |     0
 "jsonic/plugins/Icon\r"                       |     0
 uploads/.DS_Store                             |   Bin 6148 -> 0 bytes
 "uploads/Icon\r"                              |     0
 "uploads/plans/Icon\r"                        |     0
 61 files changed, 32849 insertions(+), 663 deletions(-)
 create mode 100644 "Icon\r"
 create mode 100644 "assets/Icon\r"
 create mode 100644 "assets/api/Icon\r"
 create mode 100644 "assets/fonts/Icon\r"
 create mode 100644 "assets/fonts/Quicksand/Icon\r"
 create mode 100644 "assets/fonts/Quicksand/static/Icon\r"
 create mode 100644 "assets/fonts/Titillium_Web/Icon\r"
 create mode 100644 "assets/images/Icon\r"
 create mode 100644 assets/images/logo-reslevis-white.svg
 create mode 100644 "assets/maps/Icon\r"
 create mode 100644 "assets/modules/Icon\r"
 create mode 100644 assets/modules/reslevis.config.json
 create mode 100644 "assets/plugins/Icon\r"
 create mode 100644 "assets/plugins/tablestack/Icon\r"
 create mode 100644 "assets/templates/Icon\r"
 create mode 100644 assets/templates/menuleft.html
 create mode 100644 "db/Icon\r"
 create mode 100644 "db/presence/Icon\r"
 create mode 100644 "db/reslevis/Icon\r"
 create mode 100644 "db/reslevis/Track/Icon\r"
 create mode 100644 err.json
 create mode 100644 "jsonic/Icon\r"
 create mode 100644 "jsonic/images/Icon\r"
 create mode 100644 "jsonic/images/flags/Icon\r"
 create mode 100644 "jsonic/images/langs/Icon\r"
 create mode 100644 "jsonic/js/Icon\r"
 create mode 100644 jsonic/js/jsonic.1.0.13 copia.js
 create mode 100644 jsonic/js/jsonic.1.0.13.js
 rename jsonic/js/{jsonic-1.0.14.js => jsonic.1.0.14.js} (100%)
 create mode 100644 "jsonic/modules/Icon\r"
 create mode 100644 "jsonic/plugins/Icon\r"
 delete mode 100644 uploads/.DS_Store
 create mode 100644 "uploads/Icon\r"
 create mode 100644 "uploads/plans/Icon\r"

diff --git "a/Icon\r" "b/Icon\r"
new file mode 100644
index 0000000..e69de29
diff --git a/app.css b/app.css
index 330b9d6..994e2c6 100644
--- a/app.css
+++ b/app.css
@@ -1,3 +1,7 @@
+.columnVisibility:last-child {
+    display: none;
+}
+
 /* FONT */
 
 /* latin */
diff --git a/app.html b/app.html
index c227324..803a221 100644
--- a/app.html
+++ b/app.html
@@ -16,7 +16,7 @@
 
 </head>
 
-<body>
+<body class="bg-white h-full">
 
        <script type="text/javascript" src="jsonic/js/jsonic.min.js"></script>
        <script>
diff --git a/app.js b/app.js
index e242e62..e8b7ce0 100644
--- a/app.js
+++ b/app.js
@@ -41,8 +41,8 @@ var UI = {
     apiPost: function (args) {
         if (!args.db) { console.log('apiPost requires db parameter'); }
         let methodName = this.apiMethodName(args);
-        
-        let item = js.replaceProperties('{formDataToJson:.form'+args.db+'}');
+
+        let item = js.replaceProperties('{formDataToJson:.form' + args.db + '}');
         console.log(item);
         //window.args = args;
         window[methodName](item)
@@ -63,6 +63,16 @@ var UI = {
             .catch(function (err) {
                 console.log('apiCall error');
                 console.log(err);
+                let apiCallback = [
+                    {
+                        "rl:apiPostCallback": {
+                            "db": args.db,
+                            "template": args.template,
+                            "data": err
+                        }
+                    }
+                ];
+                js.callback({ do: apiCallback });
             });
     },
 
@@ -121,6 +131,37 @@ var UI = {
         return String(val).charAt(0).toUpperCase() + String(val).slice(1);
     },
 
+    getVisibleColumns: function (db) {
+        if (window.table && window.table[db]) {
+            const visibility = {};
+            window.table[db].table.getAllLeafColumns().forEach(column => {
+                visibility[column.id] = column.getIsVisible();
+            });
+            return visibility;
+        }
+    },
+
+    setVisibleColumns: function (db, columns) {
+        if (window.table && window.table[db]) {
+            const table = window.table[db].table;
+            const visibility = {};
+            const pinning = { left: [], right: [] };
+
+            for (const [id, val] of Object.entries(columns)) {
+                if (val === 'left' || val === 'right') {
+                    visibility[id] = true;
+                    pinning[val].push(id);
+                } else {
+                    visibility[id] = !!val;
+                }
+            }
+
+            table.setColumnVisibility(visibility);
+            table.setColumnPinning(pinning);
+            window.table[db].render();
+        }
+    },
+
     getToken: function (args) {
         if (args.options.body && typeof args.options.body !== 'string') args.options.body = JSON.stringify(args.options.body);
         fetch(args.url, args.options).then(response => response.json()).then(data => {
@@ -158,27 +199,24 @@ var UI = {
             const label = prop.description || key;
             const required = params.schema.required && params.schema.required.includes(key) ? 'required' : '';
             const inputId = `input-${key}`; // Unique ID for accessibility
-
-            const hiddenId = (key == 'id' && jsonApp && jsonApp.json.data.settings && !jsonApp.json.data.settings.debug) ? ' hidden' : '';
+            // && jsonApp && jsonApp.json.data.settings && 
+            const hiddenId = ((key == 'id' || key == 'status') && !jsonApp.json.data.settings.debug) ? ' hidden' : '';
 
             // Create fieldset for each field
             const fieldsetChildren = [
                 {
                     "tag": "label",
                     "attr": {
-                        "class": "label text-primary" + hiddenId,
+                        "class": "label text-primary " + hiddenId,
                         "data-value": params.db + "/" + key,
                         "for": key
                     },
-                    "html": [
-                        {
-                            tag: 'span',
-                            text: label
-                        }
-                    ]
+                    text: label
                 }
             ];
 
+            console.log(fieldsetChildren);
+
             // Handle different input types
             let inputElement;
             switch (prop.type) {
@@ -310,7 +348,7 @@ var UI = {
                             type: 'number',
                             value: (params.fields && params.fields[key]) ? params.fields[key] : false,
                             placeholder: prop.description || ' ',
-                            class: 'field input w-full input-primary',
+                            class: 'field input w-full input-primary' + hiddenId,
                             ...(required && { required: '' })
                         }
                     };
@@ -324,7 +362,7 @@ var UI = {
                             "data-value": params.db + "/" + key,
                             "name": key,
                             type: 'checkbox',
-                            class: 'field toggle toggle-info',
+                            class: 'field toggle toggle-info' + hiddenId,
                             ...(required && { required: '' })
                         }
                     };
@@ -340,7 +378,7 @@ var UI = {
                             "name": key,
                             value: (params.fields && params.fields[key]) ? params.fields[key] : false,
                             placeholder: prop.description || 'Enter values separated by commas',
-                            class: 'field textarea w-full input-primary',
+                            class: 'field textarea w-full input-primary' + hiddenId,
                             ...(required && { required: '' })
                         }
                     };
@@ -354,7 +392,7 @@ var UI = {
                             "data-value": params.db + "/" + key,
                             "name": key,
                             placeholder: prop.description || 'Enter JSON object',
-                            class: 'field textarea w-full input-primary',
+                            class: 'field textarea w-full input-primary' + hiddenId,
                             ...(required && { required: '' })
                         }
                     };
@@ -370,7 +408,7 @@ var UI = {
                             type: 'text',
                             value: (params.fields && params.fields[key]) ? params.fields[key] : false,
                             placeholder: prop.description || ' ',
-                            class: 'field input w-full input-primary',
+                            class: 'field input w-full input-primary' + hiddenId,
                             ...(required && { required: '' })
                         }
                     };
@@ -433,6 +471,17 @@ var UI = {
         appForm.selector = params.selector;
         jsonApp.do(appForm);
     },
+    columnsFromApi: function (db) {
+        let dbFields = js.json.data.api.components.schemas[params.db].properties;
+        let columns = [];
+        for (let key in dbFields) {
+            columns.push({
+                "header": key,
+                "accessorKey": key
+            });
+        }
+        return columns;
+    },
     createTable: function (params) {
 
         /* console.log('createTable');
@@ -461,7 +510,14 @@ var UI = {
 
         let data = getTableData()
         let version = 0
-        let columns = js.json.data.ui.pages[params.db].columns;
+        let columns = JSON.parse(JSON.stringify(js.json.data.preferences.tables[params.db].columns));
+
+        /*         
+        let columns = this.columnsFromApi(params.db);
+        console.log('columns', JSON.stringify(columns));
+        let visibility = js.json.data.preferences.tables[params.db].columns;
+        console.log('visibility', JSON.stringify(visibility));
+         */
 
         const state = {
             columnPinning: { left: [], right: [] },
@@ -495,7 +551,7 @@ var UI = {
 
         if (!window.table) window.table = {};
 
-        window.table[params.db] = {
+        window.table[params.db] = Alpine.reactive({
             dbId: params.db,
             version,
             columns,
@@ -614,7 +670,10 @@ var UI = {
                 return column.getIsVisible()
             },
             toggleColumn(column) {
-                column.toggleVisibility()
+                column.toggleVisibility();
+                /* let preferences = JSON.parse(localStorage.getItem("preferences"));
+                preferences.tables[this.dbId].columns = this.getVisibleColumns(this.dbId);
+                localStorage.setItem("preferences", JSON.stringify(preferences)); */
                 this.render()
             },
             toggleSelectedRow(row) {
@@ -648,7 +707,7 @@ var UI = {
                 this.version++
             }
 
-        }
+        });
 
         return window.table[params.db]
     },
@@ -657,8 +716,33 @@ var UI = {
         console.log('loadTemplate', params);
         // add to html the parameters {url, to}
         var xmlhttp = new XMLHttpRequest();
+
+        xmlhttp.onreadystatechange = function () {
+            console.log('readyState', this.readyState, 'status', this.status);
+            //console.log(this);
+            if (this.readyState == 4 && this.status == 200) {
+                //console.log(this.responseText);
+            } else if (this.readyState == 4 && this.status == 401) {
+                // unauthenticated
+                window.location.reload();
+            } else {
+                if (this.status !== 0)
+                    console.log('Error loading ' + params.url);
+            }
+        };
+
         xmlhttp.open("GET", params.url, false);
-        xmlhttp.send();
+        xmlhttp.send();/* .then(function (data) {
+            console.log('loadTemplate success');
+            console.log(data);
+            //js.callback({ do: params.success });
+        }).catch((err) => {
+            console.log('loadTemplate error');
+            console.log(err);
+            window.location.reload();
+            //js.callback({ do: params.error });
+        }); */
+
         if (xmlhttp.responseText) {
             var responseText = xmlhttp.responseText;
             if (params.arguments) {
diff --git a/app.json b/app.json
index 2194b53..b1ce160 100644
--- a/app.json
+++ b/app.json
@@ -4,258 +4,6 @@
       "id": "",
       "name": "",
       "token": ""
-    },
-    "ui": {
-      "pages": {
-        "building": {
-          "columns": [
-            {
-              "accessorKey": "name",
-              "header": "Name"
-            },
-            {
-              "accessorKey": "city",
-              "header": "City"
-            },
-            {
-              "accessorKey": "actions",
-              "header": ""
-            }
-          ]
-        },
-        "floor": {
-          "columns": [
-            {
-              "accessorKey": "name",
-              "header": "Name"
-            },
-            {
-              "accessorKey": "BuildingName",
-              "header": "Building"
-            },
-            {
-              "accessorKey": "actions",
-              "header": ""
-            }
-          ]
-        },
-        "zone": {
-          "columns": [
-            {
-              "accessorKey": "name",
-              "header": "Name"
-            },
-            {
-              "accessorKey": "BuildingName",
-              "header": "Building"
-            },
-            {
-              "accessorKey": "FloorName",
-              "header": "Floor"
-            },
-            {
-              "accessorKey": "actions",
-              "header": ""
-            }
-          ]
-        },
-        "operator": {
-          "columns": [
-            {
-              "accessorKey": "name",
-              "header": "Name"
-            },
-            {
-              "accessorKey": "buildingName",
-              "header": "Building"
-            },
-            {
-              "accessorKey": "floorName",
-              "header": "Floor"
-            },
-            {
-              "accessorKey": "zones",
-              "header": "Zones"
-            },
-            {
-              "accessorKey": "actions",
-              "header": ""
-            }
-          ]
-        },
-        "subject": {
-          "columns": [
-            {
-              "accessorKey": "name",
-              "header": "Name"
-            },
-            {
-              "accessorKey": "buildingName",
-              "header": "Building"
-            },
-            {
-              "accessorKey": "floorName",
-              "header": "Floor"
-            },
-            {
-              "accessorKey": "actions",
-              "header": ""
-            }
-          ]
-        },
-        "home": {
-          "columns": [
-            {
-              "accessorKey": "timestamp",
-              "header": "Time"
-            },
-            {
-              "accessorKey": "subjectName",
-              "header": "Subject"
-            },
-            {
-              "accessorKey": "status",
-              "header": "Status"
-            },
-            {
-              "accessorKey": "actions",
-              "header": ""
-            }
-          ]
-        },
-        "alarm": {
-          "columns": [
-            {
-              "accessorKey": "timestamp",
-              "header": "Time"
-            },
-            {
-              "accessorKey": "subjectName",
-              "header": "Subject"
-            },
-            {
-              "accessorKey": "status",
-              "header": "Status"
-            },
-            {
-              "accessorKey": "actions",
-              "header": ""
-            }
-          ]
-        },
-        "gateway": {
-          "columns": [
-            {
-              "accessorKey": "name",
-              "header": "Name"
-            },
-            {
-              "accessorKey": "status",
-              "header": "Status"
-            },
-            {
-              "accessorKey": "model",
-              "header": "Model"
-            },
-            {
-              "accessorKey": "ip",
-              "header": "IP"
-            },
-            {
-              "accessorKey": "position",
-              "header": "Position"
-            },
-            {
-              "accessorKey": "actions",
-              "header": ""
-            }
-          ]
-        },
-        "tracker": {
-          "columns": [
-            {
-              "accessorKey": "name",
-              "header": "Name"
-            },
-            {
-              "accessorKey": "status",
-              "header": "Status"
-            },
-            {
-              "accessorKey": "model",
-              "header": "Model"
-            },
-            {
-              "accessorKey": "actions",
-              "header": ""
-            }
-          ]
-        },
-        "trackerZone": {
-          "columns": [
-            {
-              "accessorKey": "name",
-              "header": "Name"
-            },
-            {
-              "accessorKey": "days",
-              "header": "Days"
-            },
-            {
-              "accessorKey": "hours",
-              "header": "Hours"
-            },
-            {
-              "accessorKey": "actions",
-              "header": ""
-            }
-          ]
-        },
-        "track": {
-          "columns": [
-            {
-              "accessorKey": "timestamp",
-              "header": "Time"
-            },
-            {
-              "accessorKey": "subject",
-              "header": "Subject"
-            },
-            {
-              "accessorKey": "gateway",
-              "header": "Gateway"
-            },
-            {
-              "accessorKey": "status",
-              "header": "Status"
-            },
-            {
-              "accessorKey": "signal",
-              "header": "Signal"
-            },
-            {
-              "accessorKey": "actions",
-              "header": ""
-            }
-          ]
-        },
-        "setting": {
-          "columns": [
-            {
-              "accessorKey": "name",
-              "header": "Name"
-            },
-            {
-              "accessorKey": "role",
-              "header": "Role"
-            },
-            {
-              "accessorKey": "actions",
-              "header": ""
-            }
-          ]
-        }
-      }
     }
   },
   "on": {
@@ -272,6 +20,25 @@
       }
     ],
     "init": [
+      {
+        "if": {
+          "is": "{local:preferences}",
+          "then": [
+            {
+              "set": {
+                "data preferences": "{local:preferences}"
+              }
+            }
+          ],
+          "else": [
+            {
+              "local set": {
+                "preferences": "{data preferences}"
+              }
+            }
+          ]
+        }
+      },
       {
         "set": {
           "var saveMethod": "POST"
@@ -494,6 +261,10 @@
     "language": "en",
     "log": false,
     "modules": [
+      {
+        "name": "reslevisData",
+        "url": "assets/modules/reslevis.config.json"
+      },
       {
         "name": "reslevisIcons",
         "url": "assets/modules/reslevis.icons.json"
@@ -610,6 +381,7 @@
                 "tracker",
                 "trackerZone",
                 "track",
+                "fingerprint",
                 "setting"
               ],
               "do": [
@@ -844,12 +616,7 @@
         "do": [
           {
             "set": {
-              "var dbUrl": [
-                "{data api servers {arguments:localDb} url}/get{arguments:db}s",
-                "{arguments:localPath}/{arguments:db}.json"
-              ],
-              "var infoText": "{texts info{arguments:db}s}",
-              "var token": "{data user token}"
+              "var infoText": "{texts info{arguments:db}s}"
             }
           },
           {
@@ -858,7 +625,7 @@
           {
             "fetchJson": {
               "to": "var getResult",
-              "url": "{var dbUrl {arguments:localDb}}",
+              "url": "{arguments:localPath}/{arguments:db}.json",
               "options": {
                 "method": "GET",
                 "headers": {
@@ -903,6 +670,27 @@
       "openPage": {
         "arguments": "(page, path)",
         "do": [
+          {
+            "if2": {
+              "is": "'{arguments:page}' === 'home'",
+              "then": [
+                {
+                  "attr": {
+                    "selector": ".menuleft",
+                    "addClass": "hidden"
+                  }
+                }
+              ],
+              "else": [
+                {
+                  "attr": {
+                    "selector": ".menuleft",
+                    "removeClass": "hidden"
+                  }
+                }
+              ]
+            }
+          },
           {
             "if": {
               "is": "'{arguments:page}' === ''",
@@ -1201,7 +989,14 @@
                 "selector": "body",
                 "tag": "div",
                 "attr": {
-                  "class": "main w-full h-screen"
+                  "class": "menuleft float-left w-[200px] hidden lg:block"
+                }
+              },
+              {
+                "selector": "body",
+                "tag": "div",
+                "attr": {
+                  "class": "main h-screen h-full"
                 },
                 "comment": [
                   {
@@ -1294,6 +1089,15 @@
                 ]
               }
             ]
+          },
+          {
+            "loadTemplate": {
+              "selector": ".menuleft",
+              "url": "./assets/templates/menuleft.html",
+              "to": "template menuleft",
+              "arguments": {},
+              "callback": []
+            }
           }
         ]
       }
diff --git a/assets/.DS_Store b/assets/.DS_Store
index 190550528b56ffdd05c7d94a8fb5d2f2434ebef9..44352fd336241cb5f913f840675f1ec5f2d7d156 100644
GIT binary patch
delta 133
zcmZoMXfc=|&e%S&P;8=}q6iBE0|O%ig8)NvPEvk;4v@*fHgThdBS@T?A(5egAv2{I
zNsb|tAr~l|&XCGbj4Z(d7A`;tZtS*Z-^|V-z`@wQapQO9$^0U^j0~F{MGiAhY+wNZ
D3i2US

delta 72
zcmZoMXfc=|&e%4wP;8=}q9`K+0|O8XFfimWq%stz6es5-<xl*mzVVDT`y@uk&FmZk
Z9E@!nKYnMP%rBzL3Q~Sxv#rQsW&pqz6deEn

diff --git "a/assets/Icon\r" "b/assets/Icon\r"
new file mode 100644
index 0000000..e69de29
diff --git "a/assets/api/Icon\r" "b/assets/api/Icon\r"
new file mode 100644
index 0000000..e69de29
diff --git a/assets/api/reslevis.api-1.0.5.json b/assets/api/reslevis.api-1.0.5.json
index 945093c..a270655 100644
--- a/assets/api/reslevis.api-1.0.5.json
+++ b/assets/api/reslevis.api-1.0.5.json
@@ -1918,15 +1918,15 @@
                },
                "temperature": {
                   "type": "string",
-                  "description": "Battery"
+                  "description": "Temperature"
                },
                "acceleration": {
                   "type": "string",
-                  "description": "Battery"
+                  "description": "Acceleration"
                },
                "heartRate": {
                   "type": "string",
-                  "description": "Battery"
+                  "description": "HeartRate"
                },
                "building": {
                   "type": "string",
diff --git "a/assets/fonts/Icon\r" "b/assets/fonts/Icon\r"
new file mode 100644
index 0000000..e69de29
diff --git "a/assets/fonts/Quicksand/Icon\r" "b/assets/fonts/Quicksand/Icon\r"
new file mode 100644
index 0000000..e69de29
diff --git "a/assets/fonts/Quicksand/static/Icon\r" "b/assets/fonts/Quicksand/static/Icon\r"
new file mode 100644
index 0000000..e69de29
diff --git "a/assets/fonts/Titillium_Web/Icon\r" "b/assets/fonts/Titillium_Web/Icon\r"
new file mode 100644
index 0000000..e69de29
diff --git "a/assets/images/Icon\r" "b/assets/images/Icon\r"
new file mode 100644
index 0000000..e69de29
diff --git a/assets/images/logo-reslevis-white.svg b/assets/images/logo-reslevis-white.svg
new file mode 100644
index 0000000..b2a06c3
--- /dev/null
+++ b/assets/images/logo-reslevis-white.svg
@@ -0,0 +1,72 @@
+
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" x="0px" y="0px" width="500px" height="500px" viewBox="0 0 500 500">
+<defs>
+<g id="Layer0_0_FILL">
+<path fill="#ffffff" stroke="none" d="
+M 282.5 221.65
+L 271.5 221.65 250 278.3 228.5 221.65 217.5 221.65 244.55 292.75 244.55 292.8 250.1 307 282.5 221.65
+M 250.05 316.9
+L 250.05 316.95 250.1 316.95 250.05 316.9
+M 211.5 214.05
+L 211.5 204.7 172.55 204.7 172.55 289.45 211.5 289.45 211.5 280.15 184.1 280.15 184.1 251.2 205.3 251.2 205.3 242.25 184.1 242.25 184.1 214.05 211.5 214.05
+M 304.8 204.7
+L 293.25 204.7 293.25 289.45 304.8 289.45 304.8 204.7
+M 161.8 279.85
+L 130.45 279.85 130.45 204.7 118.9 204.7 118.9 289.45 161.8 289.45 161.8 279.85
+M 242.5 161
+L 242.5 132.8 269.85 132.8 269.85 123.45 230.95 123.45 230.95 208.2 269.85 208.2 269.85 198.9 242.5 198.9 242.5 169.95 263.65 169.95 263.65 161 242.5 161
+M 213.2 121.5
+Q 211.35 117.1 207.55 114.05 203.75 111 197.95 109.4 192.15 107.75 184 107.75
+L 160.05 107.75 160.05 192.5 171.5 192.5 171.5 157.2 180.2 157.2
+Q 182.6 157.2 183.7 157.75 184.9 158.4 185.95 159.8
+L 207.95 190.1
+Q 209.4 192.5 212.55 192.5
+L 222.7 192.5 197.95 158.85
+Q 196.3 156.45 194.25 155.25 199.05 154.05 203.05 151.95 206.9 149.8 209.5 146.65 212.3 143.5 213.65 139.65 215.05 135.75 215.05 131.2 215.05 125.85 213.2 121.5
+M 203.85 132.05
+Q 203.85 135.75 202.55 138.8 201.3 141.95 198.8 144.15 196.1 146.4 192.3 147.6 188.5 148.8 183.55 148.8
+L 171.5 148.8 171.5 116.8 184 116.8
+Q 193.9 116.8 198.85 120.7 203.85 124.5 203.85 132.05
+M 358.8 216.55
+L 359.95 217.3 369.4 212.1
+Q 365.2 208.1 359.7 206 353.8 203.8 346.75 203.8 340.4 203.8 335.5 205.7 330.6 207.65 327.35 210.9 323.95 214.15 322.25 218.4 320.5 222.55 320.5 227.05 320.5 232.7 322.25 236.5 323.95 240.3 326.8 242.9 329.65 245.35 333.35 247.05
+L 348.25 252.1
+Q 351.85 253.3 354.7 255 357.6 256.65 359.25 259.05 361 261.55 361 265.35 361 268.95 359.9 271.7 358.6 274.6 356.45 276.6 354.25 278.65 351 279.75 347.85 280.95 343.7 280.95 338.8 280.95 335.4 279.55
+L 329.65 276.6 326.35 274.1 316.8 279.4
+Q 321.6 284.45 328.45 287.45 335.2 290.4 343.35 290.4 350.2 290.4 355.45 288.35 360.7 286.3 364.35 282.6 368.05 279.1 369.9 274.1 371.8 269.3 371.8 263.75 371.8 258.4 370.05 254.9 368.3 251.3 365.45 248.7 362.55 246.3 358.95 244.65
+L 344 239.2
+Q 340.4 238 337.5 236.3 334.65 234.75 332.9 232.35 331.15 230.05 331.15 226.45 331.15 223.65 332.15 221.35 333.2 218.85 335.1 217.2 337.15 215.35 340.1 214.3 343.05 213.3 346.95 213.3 350.9 213.3 353.9 214.25
+L 358.8 216.55
+M 399.55 227.05
+L 389.95 232.35 455.75 268.5 249.9 381.7 44.15 268.55 99.05 238.35 89.4 233.1 25 268.55 249.9 392.25 475 268.5 399.55 227.05
+M 330.95 116.9
+L 331.1 116.55
+Q 326.75 112.2 320.9 109.95 315 107.75 308 107.75 301.6 107.75 296.7 109.7 291.8 111.65 288.55 114.85 285.15 118.1 283.5 122.35 281.7 126.5 281.7 131.05 281.7 136.7 283.5 140.45 285.15 144.25 288 146.85 290.9 149.35 294.55 151
+L 309.45 156.1
+Q 313.05 157.3 315.95 158.95 318.8 160.6 320.45 163 322.2 165.5 322.2 169.3 322.2 172.9 321.1 175.7 319.8 178.55 317.7 180.6 315.45 182.6 312.25 183.7 309.1 184.95 304.95 184.95 300.05 184.95 296.6 183.55
+L 290.9 180.6 287.55 178.1 278.05 183.35
+Q 282.85 188.45 289.65 191.4 296.4 194.35 304.55 194.35 311.4 194.35 316.65 192.3 321.95 190.3 325.55 186.6 329.25 183.1 331.1 178.1 333.05 173.3 333.05 167.75 333.05 162.35 331.25 158.85 329.5 155.25 326.65 152.65 323.8 150.25 320.2 148.6
+L 305.2 143.15
+Q 301.6 141.95 298.75 140.3 295.85 138.7 294.1 136.3 292.35 134 292.35 130.4 292.35 127.6 293.35 125.3 294.4 122.8 296.35 121.15 298.35 119.3 301.3 118.3 304.3 117.25 308.15 117.25 312.15 117.25 315.1 118.2
+L 320 120.5 322.05 121.85 330.95 116.9 Z"/>
+</g>
+
+<g id="Layer0_1_FILL">
+<path fill="#008EED" stroke="none" d="
+M 235.35 319.5
+Q 228.75 323.5 228.95 328.5 228.8 332.6 232.7 335.85 233.8 336.75 235.35 337.65 241.6 340.85 250 340.85 258.55 340.85 264.5 337.65 266.1 336.75 267.25 335.85 271.25 332.6 271.05 328.5 271.25 323.5 264.5 319.5 260.7 317.4 255.8 316.65 253.05 316.25 250 316.25 247 316.25 244.25 316.65 239.35 317.4 235.35 319.5
+M 239.7 335.85
+Q 238.3 335.3 237 334.65 232.45 331.95 232.35 328.5 232.45 325.15 237.05 322.4 242.45 319.55 250 319.55 257.55 319.55 262.85 322.45 267.55 325.15 267.75 328.5 267.55 331.95 262.85 334.65 261.65 335.3 260.3 335.85 255.8 337.45 250 337.45 244.2 337.45 239.7 335.85
+M 257.05 328.5
+Q 257.05 326.9 254.95 325.75 252.9 324.7 250 324.7 247.1 324.7 245 325.75 242.9 326.9 242.9 328.5 242.9 330.2 245 331.3 247.1 332.4 250 332.4 252.9 332.4 254.95 331.3 257.05 330.2 257.05 328.5 Z"/>
+</g>
+</defs>
+
+<g transform="matrix( 1, 0, 0, 1, 0,0) ">
+<use xlink:href="#Layer0_0_FILL"/>
+</g>
+
+<g transform="matrix( 1.39996337890625, 0, 0, 1.39996337890625, -99.95,-127) ">
+<use xlink:href="#Layer0_1_FILL"/>
+</g>
+</svg>
diff --git "a/assets/maps/Icon\r" "b/assets/maps/Icon\r"
new file mode 100644
index 0000000..e69de29
diff --git a/assets/maps/index.html b/assets/maps/index.html
index 91e696a..9ae5b52 100644
--- a/assets/maps/index.html
+++ b/assets/maps/index.html
@@ -25,7 +25,7 @@
 
 <body class="p-6 font-sans">
 
-   <div class=" w-full flex align-items-center justify-content-center text-center justify-between">
+   <div class="flex align-items-center justify-content-center text-center justify-between">
       <!-- Floor Selector -->
       <select id="floor-select" class="select select-bordered border-[#008EED] select-primary w-full max-w-xs">
          <option value="0" selected>Floor 0</option>
diff --git "a/assets/modules/Icon\r" "b/assets/modules/Icon\r"
new file mode 100644
index 0000000..e69de29
diff --git a/assets/modules/reslevis.config.json b/assets/modules/reslevis.config.json
new file mode 100644
index 0000000..7147eec
--- /dev/null
+++ b/assets/modules/reslevis.config.json
@@ -0,0 +1,109 @@
+{
+   "data": {
+      "settings": {
+         "version": "1.1.3",
+         "debug": false,
+         "unit": 1,
+         "authRequired": false,
+         "localDb": "0",
+         "localWebhook": "",
+         "localWebhookPlayground": "",
+         "localPath": "db/reslevis",
+         "serverUrl": "https://10.251.0.30:5050/frontend/api/reslevis",
+         "serverTokenUrl": "",
+         "serverClientSecret": "",
+         "updateInterval": 50000
+      },
+      "preferences": {
+         "tables": {
+            "building": {
+               "columns": {
+                  "name": true,
+                  "city": true,
+                  "address": true
+               }
+            },
+            "floor": {
+               "columns": {
+                  "name": true,
+                  "BuildingName": true
+               }
+            },
+            "zone": {
+               "columns": {
+                  "name": true,
+                  "BuildingName": true,
+                  "FloorName": true
+               }
+            },
+            "operator": {
+               "columns": {
+                  "name": true,
+                  "buildingName": true,
+                  "floorName": true,
+                  "zones": true
+               }
+            },
+            "subject": {
+               "columns": {
+                  "name": true,
+                  "buildingName": true,
+                  "floorName": true
+               }
+            },
+            "home": {
+               "columns": {
+                  "timestamp": true,
+                  "subjectName": true,
+                  "status": true
+               }
+            },
+            "alarm": {
+               "columns": {
+                  "timestamp": true,
+                  "subjectName": true,
+                  "status": true
+               }
+            },
+            "gateway": {
+               "columns": {
+                  "name": false,
+                  "status": true,
+                  "model": true,
+                  "ip": true,
+                  "position": true
+               }
+            },
+            "tracker": {
+               "columns": {
+                  "name": true,
+                  "status": true,
+                  "model": true
+               }
+            },
+            "trackerZone": {
+               "columns": {
+                  "name": true,
+                  "days": true,
+                  "hours": true
+               }
+            },
+            "track": {
+               "columns": {
+                  "timestamp": true,
+                  "subject": true,
+                  "gateway": true,
+                  "status": true,
+                  "signal": true
+               }
+            },
+            "setting": {
+               "columns": {
+                  "name": true,
+                  "role": true
+               }
+            }
+         }
+      }
+   }
+}
\ No newline at end of file
diff --git a/assets/modules/reslevis.data.json b/assets/modules/reslevis.data.json
index 25f9255..59fcbdc 100644
--- a/assets/modules/reslevis.data.json
+++ b/assets/modules/reslevis.data.json
@@ -1,19 +1,5 @@
 {
    "data": {
-      "settings": {
-         "version": "1.1.2",
-         "debug": true,
-         "unit": 1,
-         "authRequired": false,
-         "localDb": "1",
-         "localWebhook": "",
-         "localWebhookPlayground": "",
-         "localPath": "db/reslevis",
-         "serverUrl": "https://10.251.0.30:5050/frontend/api/reslevis",
-         "serverTokenUrl": "",
-         "serverClientSecret": "",
-         "updateInterval": 50000
-      },
       "db": {}
    }
 }
\ No newline at end of file
diff --git "a/assets/plugins/Icon\r" "b/assets/plugins/Icon\r"
new file mode 100644
index 0000000..e69de29
diff --git "a/assets/plugins/tablestack/Icon\r" "b/assets/plugins/tablestack/Icon\r"
new file mode 100644
index 0000000..e69de29
diff --git a/assets/templates/Alarm.html b/assets/templates/Alarm.html
index 39dc43b..21b06c8 100644
--- a/assets/templates/Alarm.html
+++ b/assets/templates/Alarm.html
@@ -1,4 +1,4 @@
-<div class="h-full lg:min-w-full xl:min-w-0" x-data="UI.createTable({db:'{arguments:db}'})">
+<div class="h-full xl:min-w-0" x-data="UI.createTable({db:'{arguments:db}'})">
 
    <div class="border-base-200 flex items-center justify-between px-5 mb-[10px] space-x-3">
 
@@ -14,37 +14,27 @@
                placeholder="Search" />
          </label>
 
-         <!-- <div class="dropdown dropdown-bottom dropdown-end">
-            <div
-                  tabindex="0"
-                  role="button"
-                  class="btn btn-outline btn-primary">
-                  <span
-                     class="iconify lucide--columns-3-cog size-4"></span>
+         <div class="columnsDropdown dropdown dropdown-bottom dropdown-end">
+            <div tabindex="0" role="button" class="btn btn-outline btn-primary">
+               <span class="iconify lucide--columns-3-cog size-4"></span>
 
             </div>
 
             <div tabindex="0" class="dropdown-content bg-base-100 rounded-box w-44 shadow">
-                  <ul class="menu w-full">
-                     <template
-                        x-for="column in allLeafColumns"
-                        :key="column.id">
-                        <li @click="toggleColumn(column)">
-                              <div
-                                 class="group gap-2.5"
-                                 :data-visible="isColumnVisible(column) ? true : null">
-                                 <span
-                                    class="iconify lucide--check size-4 scale-50 opacity-0 transition-all duration-300 group-data-visible:scale-100 group-data-visible:opacity-100"></span>
-
-                                 <span
-                                    class="font-medium"
-                                    x-text="column.columnDef.header"></span>
-                              </div>
-                        </li>
-                     </template>
-                  </ul>
+               <ul class="menu w-full">
+                  <template x-for="column in allLeafColumns" :key="column.id">
+                     <li @click="toggleColumn(column)" class="columnVisibility">
+                        <div class="group gap-2.5" :data-visible="isColumnVisible(column) ? true : null">
+                           <span
+                              class="iconify lucide--check size-4 scale-50 opacity-0 transition-all duration-300 group-data-visible:scale-100 group-data-visible:opacity-100"></span>
+
+                           <span class="font-medium" x-text="column.columnDef.header"></span>
+                        </div>
+                     </li>
+                  </template>
+               </ul>
             </div>
-         </div> -->
+         </div>
 
          <div class="dropdown dropdown-bottom dropdown-end">
             <div aria-label="More actions" tabindex="0" role="button" class="btn btn-outline btn-primary">
@@ -76,10 +66,9 @@
       </div>
    </div>
 
-   <div class="flex w-full px-[30px]">
+   <div class="flex px-[30px]">
 
-      <div
-         class=" max-h-[calc(100vh-260px)] overflow-y-scroll overflow-x-auto w-full border-solid border-1 border-[#008EED] rounded-none">
+      <div class=" overflow-x-auto w-full border-solid border-1 border-[#008EED] rounded-none">
 
          <div
             class="min-w-[480px] px-[20px] py-[20px] border-base-200 flex flex-wrap items-center justify-between gap-2">
@@ -234,7 +223,7 @@
       </div>
 
       <div
-         class="post min-w-[400px] max-w-[600px] max-h-[calc(100vh-260px)] overflow-y-scroll border-solid border-1 border-[#008EED] rounded-none post{arguments:id} ml-[30px] mb-[30px] hidden">
+         class="post min-w-[400px] max-w-[600px] border-solid border-1 border-[#008EED] rounded-none post{arguments:id} ml-[30px] mb-[30px] hidden">
       </div>
 
    </div>
diff --git a/assets/templates/Building.html b/assets/templates/Building.html
index 63af1cf..61be24f 100644
--- a/assets/templates/Building.html
+++ b/assets/templates/Building.html
@@ -1,6 +1,6 @@
-<div class="h-full lg:min-w-full xl:min-w-0" x-data="UI.createTable({db:'{arguments:db}'})">
+<div class="h-full xl:min-w-0" x-data="UI.createTable({db:'{arguments:db}'})">
 
-   <div class="border-base-200 flex items-center justify-between px-5 mb-[10px] space-x-3">
+   <div class="border-base-200 flex items-center justify-between px-5 space-x-3">
 
       <div>
          <span class="text-2xl text-[#008EED] leading-[80px] capitalize">{arguments:db}s</span>
@@ -14,37 +14,27 @@
                placeholder="Search" />
          </label>
 
-         <!-- <div class="dropdown dropdown-bottom dropdown-end">
-            <div
-                  tabindex="0"
-                  role="button"
-                  class="btn btn-outline btn-primary">
-                  <span
-                     class="iconify lucide--columns-3-cog size-4"></span>
+         <div class="columnsDropdown dropdown dropdown-bottom dropdown-end">
+            <div tabindex="0" role="button" class="btn btn-outline btn-primary">
+               <span class="iconify lucide--columns-3-cog size-4"></span>
 
             </div>
 
             <div tabindex="0" class="dropdown-content bg-base-100 rounded-box w-44 shadow">
-                  <ul class="menu w-full">
-                     <template
-                        x-for="column in allLeafColumns"
-                        :key="column.id">
-                        <li @click="toggleColumn(column)">
-                              <div
-                                 class="group gap-2.5"
-                                 :data-visible="isColumnVisible(column) ? true : null">
-                                 <span
-                                    class="iconify lucide--check size-4 scale-50 opacity-0 transition-all duration-300 group-data-visible:scale-100 group-data-visible:opacity-100"></span>
-
-                                 <span
-                                    class="font-medium"
-                                    x-text="column.columnDef.header"></span>
-                              </div>
-                        </li>
-                     </template>
-                  </ul>
+               <ul class="menu w-full">
+                  <template x-for="column in allLeafColumns" :key="column.id">
+                     <li @click="toggleColumn(column)" class="columnVisibility">
+                        <div class="group gap-2.5" :data-visible="isColumnVisible(column) ? true : null">
+                           <span
+                              class="iconify lucide--check size-4 scale-50 opacity-0 transition-all duration-300 group-data-visible:scale-100 group-data-visible:opacity-100"></span>
+
+                           <span class="font-medium" x-text="column.columnDef.header"></span>
+                        </div>
+                     </li>
+                  </template>
+               </ul>
             </div>
-         </div> -->
+         </div>
 
          <div class="dropdown dropdown-bottom dropdown-end">
             <div aria-label="More actions" tabindex="0" role="button" class="btn btn-outline btn-primary">
@@ -76,10 +66,9 @@
       </div>
    </div>
 
-   <div class="flex w-full px-[30px]">
+   <div class="flex px-[30px]">
 
-      <div
-         class=" max-h-[calc(100vh-260px)] overflow-y-scroll overflow-x-auto w-full border-solid border-1 border-[#008EED] rounded-none">
+      <div class="mb-[30px]  overflow-x-auto w-full border-solid border-1 border-[#008EED] rounded-none">
 
          <div
             class="min-w-[480px] px-[20px] py-[20px] border-base-200 flex flex-wrap items-center justify-between gap-2">
@@ -177,9 +166,7 @@
                                  </div>
                               </template>
 
-                              <template x-if="cell.column.id === 'city'">
-                                 <span class="text-base font-medium" x-text="cell.row.original.city"></span>
-                              </template>
+
 
                               <template x-if="cell.column.id === 'actions'">
                                  <div class="gap-2 text-right">
@@ -219,7 +206,7 @@
       </div>
 
       <div
-         class="post min-w-[400px] max-w-[600px] max-h-[calc(100vh-260px)] overflow-y-scroll border-solid border-1 border-[#008EED] rounded-none post{arguments:id} ml-[30px] mb-[30px] hidden">
+         class="post min-w-[400px] max-w-[600px] border-solid border-1 border-[#008EED] rounded-none post{arguments:id} ml-[30px] mb-[30px] hidden">
       </div>
 
    </div>
diff --git a/assets/templates/Gateway.html b/assets/templates/Gateway.html
index 0f30efb..359c2cb 100644
--- a/assets/templates/Gateway.html
+++ b/assets/templates/Gateway.html
@@ -1,4 +1,4 @@
-<div class="table{arguments:db} h-full lg:min-w-full xl:min-w-0" x-data="UI.createTable({db:'{arguments:db}'})">
+<div class="table{arguments:db} h-full xl:min-w-0" x-data="UI.createTable({db:'{arguments:db}'})">
    <div class="border-base-200 flex items-center justify-between px-5 mb-[10px] space-x-3">
 
       <div>
@@ -13,37 +13,27 @@
                placeholder="Search" />
          </label>
 
-         <!-- <div class="dropdown dropdown-bottom dropdown-end">
-            <div
-                  tabindex="0"
-                  role="button"
-                  class="btn btn-outline btn-primary">
-                  <span
-                     class="iconify lucide--columns-3-cog size-4"></span>
+         <div class="columnsDropdown dropdown dropdown-bottom dropdown-end">
+            <div tabindex="0" role="button" class="btn btn-outline btn-primary">
+               <span class="iconify lucide--columns-3-cog size-4"></span>
 
             </div>
 
             <div tabindex="0" class="dropdown-content bg-base-100 rounded-box w-44 shadow">
-                  <ul class="menu w-full">
-                     <template
-                        x-for="column in allLeafColumns"
-                        :key="column.id">
-                        <li @click="toggleColumn(column)">
-                              <div
-                                 class="group gap-2.5"
-                                 :data-visible="isColumnVisible(column) ? true : null">
-                                 <span
-                                    class="iconify lucide--check size-4 scale-50 opacity-0 transition-all duration-300 group-data-visible:scale-100 group-data-visible:opacity-100"></span>
-
-                                 <span
-                                    class="font-medium"
-                                    x-text="column.columnDef.header"></span>
-                              </div>
-                        </li>
-                     </template>
-                  </ul>
+               <ul class="menu w-full">
+                  <template x-for="column in allLeafColumns" :key="column.id">
+                     <li @click="toggleColumn(column)" class="columnVisibility">
+                        <div class="group gap-2.5" :data-visible="isColumnVisible(column) ? true : null">
+                           <span
+                              class="iconify lucide--check size-4 scale-50 opacity-0 transition-all duration-300 group-data-visible:scale-100 group-data-visible:opacity-100"></span>
+
+                           <span class="font-medium" x-text="column.columnDef.header"></span>
+                        </div>
+                     </li>
+                  </template>
+               </ul>
             </div>
-         </div> -->
+         </div>
 
          <div class="dropdown dropdown-bottom dropdown-end">
             <div aria-label="More actions" tabindex="0" role="button" class="btn btn-outline btn-primary">
@@ -75,10 +65,9 @@
       </div>
    </div>
 
-   <div class="flex w-full px-[30px]">
+   <div class="flex px-[30px]">
 
-      <div
-         class=" max-h-[calc(100vh-260px)] overflow-y-scroll overflow-x-auto w-full border-solid border-1 border-[#008EED] rounded-none">
+      <div class="mb-[30px]  overflow-x-auto w-full border-solid border-1 border-[#008EED] rounded-none">
 
          <div
             class="min-w-[480px] px-[20px] py-[20px] border-base-200 flex flex-wrap items-center justify-between gap-2">
@@ -237,7 +226,7 @@
       </div>
 
       <div
-         class="post min-w-[400px] max-w-[600px] max-h-[calc(100vh-260px)] overflow-y-scroll border-solid border-1 border-[#008EED] rounded-none post{arguments:id} ml-[30px] mb-[30px] hidden">
+         class="post min-w-[400px] max-w-[600px] border-solid border-1 border-[#008EED] rounded-none post{arguments:id} ml-[30px] mb-[30px] hidden">
       </div>
 
    </div>
diff --git "a/assets/templates/Icon\r" "b/assets/templates/Icon\r"
new file mode 100644
index 0000000..e69de29
diff --git a/assets/templates/Info.html b/assets/templates/Info.html
index c413f8d..9d3be37 100644
--- a/assets/templates/Info.html
+++ b/assets/templates/Info.html
@@ -1,9 +1,7 @@
+<div class="h-full xl:min-w-0">
 
-<div class="h-full lg:min-w-full xl:min-w-0">
-   
-<h1>RES LEVIS</h1>
+   <h1>RES LEVIS</h1>
 
-<p>Information</p>
-
-</div>
+   <p>Information</p>
 
+</div>
\ No newline at end of file
diff --git a/assets/templates/Menu.html b/assets/templates/Menu.html
index 1333c40..cb4c971 100644
--- a/assets/templates/Menu.html
+++ b/assets/templates/Menu.html
@@ -1,40 +1,51 @@
-<div class="header w-full flex align-items-center justify-content-center text-center justify-between">
+<div class="header sticky top-0 left-0 z-50">
+   <div class="w-full flex align-items-center justify-content-center text-center justify-between bg-[#fff]">
+      <div class="text-center">
+
+         <label class="myDrawerButton pointer" for="my-drawer" aria-label="open sidebar"
+            class="btn btn-square btn-ghost lg:hidden ">
+            <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
+               viewBox="-50 -50 100 100" data-icon="rl:menu"
+               class="iconify text-[60px] bg-[transparent] text-[#008EED] iconify--rl">
+               <path fill="currentColor"
+                  d="M-28.55 19.6q.434.4447 1.05.45h55q.616-.0053 1.05-.45.4447-.434.45-1.05-.0053-.616-.45-1.05-.434-.4447-1.05-.45h-55q-.616.0053-1.05.45-.4447.434-.45 1.05.0053.616.45 1.05m57.1-20.65q-.434-.4447-1.05-.45h-55q-.616.0053-1.05.45-.4447.434-.45 1.05.0053.616.45 1.05.434.4447 1.05.45h55q.616-.0053 1.05-.45Q28.9947.616 29 0q-.0053-.616-.45-1.05m0-18.55q-.434-.4447-1.05-.45h-55q-.616.0053-1.05.45-.4447.434-.45 1.05.0053.616.45 1.05.434.4447 1.05.45h55q.616-.0053 1.05-.45.4447-.434.45-1.05-.0053-.616-.45-1.05Z">
+               </path>
+            </svg>
+         </label>
+      </div>
 
-   <div class="logo m-[10px]">
-      <div class="w-[120px] float-left"><a href="#home"><img class="" src="./assets/images/logo-reslevis.svg"></a>
+      <div class="logo">
+         <div class="m-0 p-0 w-[80px] float-right"><a href="#home"><img class=""
+                  src="./assets/images/logo-reslevis.svg"></a>
+         </div>
       </div>
-   </div>
 
-   <div role="alert" class="alert alert-info alert-soft hidden sm:flex h-[60px] my-auto">
+
+      <div class="p-[20px] text-center">
+
+
+      </div>
+
+   </div>
+</div>
+<div role="alert" class="alert alert-info alert-soft h-[60px] w-full my-auto text-center rounded-none">
+   <div class="flex align-items-center justify-content-center gap-2 mx-auto">
       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
          class="stroke-info h-6 w-6 shrink-0 stroke-[#008EED]">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
             d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
       </svg>
-      <span class="text-[#008EED] infoText" js-data="texts tables info">Sustainable integrated nearby low energy
+      <span class="text-[#008EED] infoText" js-data="texts tables info">Sustainable integrated nearby low
+         energy
          networks and services</span>
    </div>
-
-   <div class="p-[20px] text-center">
-
-      <label for="my-drawer" aria-label="open sidebar" class="btn btn-square btn-ghost">
-         <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
-            viewBox="-50 -50 100 100" data-icon="rl:menu"
-            class="iconify text-[60px] bg-[transparent] text-[#008EED] iconify--rl">
-            <path fill="currentColor"
-               d="M-28.55 19.6q.434.4447 1.05.45h55q.616-.0053 1.05-.45.4447-.434.45-1.05-.0053-.616-.45-1.05-.434-.4447-1.05-.45h-55q-.616.0053-1.05.45-.4447.434-.45 1.05.0053.616.45 1.05m57.1-20.65q-.434-.4447-1.05-.45h-55q-.616.0053-1.05.45-.4447.434-.45 1.05.0053.616.45 1.05.434.4447 1.05.45h55q.616-.0053 1.05-.45Q28.9947.616 29 0q-.0053-.616-.45-1.05m0-18.55q-.434-.4447-1.05-.45h-55q-.616.0053-1.05.45-.4447.434-.45 1.05.0053.616.45 1.05.434.4447 1.05.45h55q.616-.0053 1.05-.45.4447-.434.45-1.05-.0053-.616-.45-1.05Z">
-            </path>
-         </svg>
-      </label>
-   </div>
-
 </div>
 
 
-<div class="drawer drawer-end">
+<div class="drawer drawer-start">
    <input id="my-drawer" type="checkbox" class="drawer-toggle" />
 
-   <div class="drawer-side">
+   <div class=" drawer-side">
       <label for="my-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
 
       <div class="w-[200px] p-[20px] h-[100vh] overflow-y-scroll bg-white">
diff --git a/assets/templates/Operator.html b/assets/templates/Operator.html
index af35db2..80dd1c6 100644
--- a/assets/templates/Operator.html
+++ b/assets/templates/Operator.html
@@ -1,4 +1,4 @@
-<div class="h-full lg:min-w-full xl:min-w-0" x-data="UI.createTable({db:'{arguments:db}'})">
+<div class="h-full xl:min-w-0" x-data="UI.createTable({db:'{arguments:db}'})">
 
    <div class="border-base-200 flex items-center justify-between px-5 mb-[10px] space-x-3">
 
@@ -13,37 +13,27 @@
                placeholder="Search" />
          </label>
 
-         <!-- <div class="dropdown dropdown-bottom dropdown-end">
-            <div
-                  tabindex="0"
-                  role="button"
-                  class="btn btn-outline btn-primary">
-                  <span
-                     class="iconify lucide--columns-3-cog size-4"></span>
+         <div class="columnsDropdown dropdown dropdown-bottom dropdown-end">
+            <div tabindex="0" role="button" class="btn btn-outline btn-primary">
+               <span class="iconify lucide--columns-3-cog size-4"></span>
 
             </div>
 
             <div tabindex="0" class="dropdown-content bg-base-100 rounded-box w-44 shadow">
-                  <ul class="menu w-full">
-                     <template
-                        x-for="column in allLeafColumns"
-                        :key="column.id">
-                        <li @click="toggleColumn(column)">
-                              <div
-                                 class="group gap-2.5"
-                                 :data-visible="isColumnVisible(column) ? true : null">
-                                 <span
-                                    class="iconify lucide--check size-4 scale-50 opacity-0 transition-all duration-300 group-data-visible:scale-100 group-data-visible:opacity-100"></span>
-
-                                 <span
-                                    class="font-medium"
-                                    x-text="column.columnDef.header"></span>
-                              </div>
-                        </li>
-                     </template>
-                  </ul>
+               <ul class="menu w-full">
+                  <template x-for="column in allLeafColumns" :key="column.id">
+                     <li @click="toggleColumn(column)" class="columnVisibility" :data-column="column.id">
+                        <div class="group gap-2.5" :data-visible="isColumnVisible(column) ? true : null">
+                           <span
+                              class="iconify lucide--check size-4 scale-50 opacity-0 transition-all duration-300 group-data-visible:scale-100 group-data-visible:opacity-100"></span>
+
+                           <span class="font-medium" x-text="column.columnDef.header"></span>
+                        </div>
+                     </li>
+                  </template>
+               </ul>
             </div>
-         </div> -->
+         </div>
 
          <div class="dropdown dropdown-bottom dropdown-end">
             <div aria-label="More actions" tabindex="0" role="button" class="btn btn-outline btn-primary">
@@ -75,10 +65,9 @@
       </div>
    </div>
 
-   <div class="flex w-full px-[30px]">
+   <div class="flex px-[30px]">
 
-      <div
-         class=" max-h-[calc(100vh-260px)] overflow-y-scroll overflow-x-auto w-full border-solid border-1 border-[#008EED] rounded-none">
+      <div class="overflow-x-auto w-full border-solid border-1 border-[#008EED] rounded-none">
 
          <div
             class="min-w-[480px] px-[20px] py-[20px] border-base-200 flex flex-wrap items-center justify-between gap-2">
@@ -183,7 +172,7 @@
                               <template x-if="cell.column.id === 'actions'">
                                  <div class="gap-2 text-right">
                                     <button aria-label="Show" class="saveButton btn btn-outline btn-primary"
-                                       @click="viewRow(cell.row)">Open</button>
+                                       @click="viewRow(cell.row)">Modify</button>
                                     <!-- <button
                                              aria-label="Show"
                                              class="btn btn-soft btn-xs btn-square"
@@ -218,7 +207,7 @@
       </div>
 
       <div
-         class="post min-w-[400px] max-w-[600px] max-h-[calc(100vh-260px)] overflow-y-scroll border-solid border-1 border-[#008EED] rounded-none post{arguments:id} ml-[30px] mb-[30px] hidden">
+         class="post min-w-[400px] max-w-[600px] border-solid border-1 border-[#008EED] rounded-none post{arguments:id} ml-[30px] mb-[30px] hidden">
       </div>
 
    </div>
diff --git a/assets/templates/Setting.html b/assets/templates/Setting.html
index dea8ce7..cb986b1 100644
--- a/assets/templates/Setting.html
+++ b/assets/templates/Setting.html
@@ -1,4 +1,4 @@
-<div class="h-full lg:min-w-full xl:min-w-0" x-data="UI.createTable({db:'{arguments:db}'})">
+<div class="h-full xl:min-w-0" x-data="UI.createTable({db:'{arguments:db}'})">
 
    <div class="border-base-200 flex items-center justify-between px-5 mb-[10px] space-x-3">
 
@@ -13,6 +13,28 @@
                placeholder="Search" />
          </label>
 
+         <div class="columnsDropdown dropdown dropdown-bottom dropdown-end">
+            <div tabindex="0" role="button" class="btn btn-outline btn-primary">
+               <span class="iconify lucide--columns-3-cog size-4"></span>
+
+            </div>
+
+            <div tabindex="0" class="dropdown-content bg-base-100 rounded-box w-44 shadow">
+               <ul class="menu w-full">
+                  <template x-for="column in allLeafColumns" :key="column.id">
+                     <li @click="toggleColumn(column)" class="columnVisibility">
+                        <div class="group gap-2.5" :data-visible="isColumnVisible(column) ? true : null">
+                           <span
+                              class="iconify lucide--check size-4 scale-50 opacity-0 transition-all duration-300 group-data-visible:scale-100 group-data-visible:opacity-100"></span>
+
+                           <span class="font-medium" x-text="column.columnDef.header"></span>
+                        </div>
+                     </li>
+                  </template>
+               </ul>
+            </div>
+         </div>
+
          <div class="dropdown dropdown-bottom dropdown-end">
             <div aria-label="More actions" tabindex="0" role="button" class="btn btn-outline btn-primary">
                <span class="iconify lucide--ellipsis-vertical size-4"></span>
@@ -43,10 +65,9 @@
       </div>
    </div>
 
-   <div class="flex w-full px-[30px]">
+   <div class="flex px-[30px]">
 
-      <div
-         class=" max-h-[calc(100vh-260px)] overflow-y-scroll overflow-x-auto w-full border-solid border-1 border-[#008EED] rounded-none">
+      <div class=" overflow-x-auto w-full border-solid border-1 border-[#008EED] rounded-none">
 
          <div
             class="min-w-[480px] px-[20px] py-[20px] border-base-200 flex flex-wrap items-center justify-between gap-2">
@@ -146,7 +167,7 @@
                               <template x-if="cell.column.id === 'actions'">
                                  <div class="gap-2 text-right">
                                     <button aria-label="Show" class="saveButton btn btn-outline btn-primary"
-                                       @click="viewRow(cell.row)">Open</button>
+                                       @click="viewRow(cell.row)">Modify</button>
                                  </div>
                               </template>
 
@@ -166,7 +187,7 @@
       </div>
 
       <div
-         class="post min-w-[400px] max-w-[600px] max-h-[calc(100vh-260px)] overflow-y-scroll border-solid border-1 border-[#008EED] rounded-none post{arguments:id} ml-[30px] mb-[30px] hidden">
+         class="post min-w-[400px] max-w-[600px] border-solid border-1 border-[#008EED] rounded-none post{arguments:id} ml-[30px] mb-[30px] hidden">
       </div>
 
    </div>
diff --git a/assets/templates/Subject.html b/assets/templates/Subject.html
index af35db2..ab02a03 100644
--- a/assets/templates/Subject.html
+++ b/assets/templates/Subject.html
@@ -1,4 +1,4 @@
-<div class="h-full lg:min-w-full xl:min-w-0" x-data="UI.createTable({db:'{arguments:db}'})">
+<div class="h-full  xl:min-w-0" x-data="UI.createTable({db:'{arguments:db}'})">
 
    <div class="border-base-200 flex items-center justify-between px-5 mb-[10px] space-x-3">
 
@@ -13,37 +13,27 @@
                placeholder="Search" />
          </label>
 
-         <!-- <div class="dropdown dropdown-bottom dropdown-end">
-            <div
-                  tabindex="0"
-                  role="button"
-                  class="btn btn-outline btn-primary">
-                  <span
-                     class="iconify lucide--columns-3-cog size-4"></span>
+         <div class="dropdown dropdown-bottom dropdown-end">
+            <div tabindex="0" role="button" class="btn btn-outline btn-primary">
+               <span class="iconify lucide--columns-3-cog size-4"></span>
 
             </div>
 
             <div tabindex="0" class="dropdown-content bg-base-100 rounded-box w-44 shadow">
-                  <ul class="menu w-full">
-                     <template
-                        x-for="column in allLeafColumns"
-                        :key="column.id">
-                        <li @click="toggleColumn(column)">
-                              <div
-                                 class="group gap-2.5"
-                                 :data-visible="isColumnVisible(column) ? true : null">
-                                 <span
-                                    class="iconify lucide--check size-4 scale-50 opacity-0 transition-all duration-300 group-data-visible:scale-100 group-data-visible:opacity-100"></span>
-
-                                 <span
-                                    class="font-medium"
-                                    x-text="column.columnDef.header"></span>
-                              </div>
-                        </li>
-                     </template>
-                  </ul>
+               <ul class="menu w-full">
+                  <template x-for="column in allLeafColumns" :key="column.id">
+                     <li @click="toggleColumn(column)" class="columnVisibility">
+                        <div class="group gap-2.5" :data-visible="isColumnVisible(column) ? true : null">
+                           <span
+                              class="iconify lucide--check size-4 scale-50 opacity-0 transition-all duration-300 group-data-visible:scale-100 group-data-visible:opacity-100"></span>
+
+                           <span class="font-medium" x-text="column.columnDef.header"></span>
+                        </div>
+                     </li>
+                  </template>
+               </ul>
             </div>
-         </div> -->
+         </div>
 
          <div class="dropdown dropdown-bottom dropdown-end">
             <div aria-label="More actions" tabindex="0" role="button" class="btn btn-outline btn-primary">
@@ -75,10 +65,9 @@
       </div>
    </div>
 
-   <div class="flex w-full px-[30px]">
+   <div class="flex px-[30px]">
 
-      <div
-         class=" max-h-[calc(100vh-260px)] overflow-y-scroll overflow-x-auto w-full border-solid border-1 border-[#008EED] rounded-none">
+      <div class="columnsDropdown overflow-x-auto w-full border-solid border-1 border-[#008EED] rounded-none">
 
          <div
             class="min-w-[480px] px-[20px] py-[20px] border-base-200 flex flex-wrap items-center justify-between gap-2">
@@ -183,7 +172,7 @@
                               <template x-if="cell.column.id === 'actions'">
                                  <div class="gap-2 text-right">
                                     <button aria-label="Show" class="saveButton btn btn-outline btn-primary"
-                                       @click="viewRow(cell.row)">Open</button>
+                                       @click="viewRow(cell.row)">Modify</button>
                                     <!-- <button
                                              aria-label="Show"
                                              class="btn btn-soft btn-xs btn-square"
@@ -218,7 +207,7 @@
       </div>
 
       <div
-         class="post min-w-[400px] max-w-[600px] max-h-[calc(100vh-260px)] overflow-y-scroll border-solid border-1 border-[#008EED] rounded-none post{arguments:id} ml-[30px] mb-[30px] hidden">
+         class="post min-w-[400px] max-w-[600px] border-solid border-1 border-[#008EED] rounded-none post{arguments:id} ml-[30px] mb-[30px] hidden">
       </div>
 
    </div>
diff --git a/assets/templates/Text.html b/assets/templates/Text.html
index fcb5e9f..2e7ca0d 100644
--- a/assets/templates/Text.html
+++ b/assets/templates/Text.html
@@ -13,7 +13,7 @@
                placeholder="Search" />
          </label>
 
-         <div class="dropdown dropdown-bottom dropdown-end">
+         <div class="columnsDropdown dropdown dropdown-bottom dropdown-end">
             <div aria-label="More actions" tabindex="0" role="button" class="btn btn-outline btn-primary">
                <span class="iconify lucide--ellipsis-vertical size-4"></span>
             </div>
@@ -138,7 +138,7 @@
                               <template x-if="cell.column.id === 'actions'">
                                  <div class="gap-2 text-right">
                                     <button aria-label="Show" class="saveButton btn btn-outline btn-primary"
-                                       @click="viewRow(cell.row)">Open</button>
+                                       @click="viewRow(cell.row)">Modify</button>
                                  </div>
                               </template>
 
diff --git a/assets/templates/Track.html b/assets/templates/Track.html
index 4de8b58..cc5aad5 100644
--- a/assets/templates/Track.html
+++ b/assets/templates/Track.html
@@ -1,4 +1,4 @@
-<div class="h-full lg:min-w-full xl:min-w-0" x-data="UI.createTable({db:'{arguments:db}'})">
+<div class="h-full xl:min-w-0" x-data="UI.createTable({db:'{arguments:db}'})">
 
    <div class="border-base-200 flex items-center justify-between px-5 mb-[10px] space-x-3">
 
@@ -13,37 +13,27 @@
                placeholder="Search" />
          </label>
 
-         <!-- <div class="dropdown dropdown-bottom dropdown-end">
-            <div
-                  tabindex="0"
-                  role="button"
-                  class="btn btn-outline btn-primary">
-                  <span
-                     class="iconify lucide--columns-3-cog size-4"></span>
+         <div class="columnsDropdown dropdown dropdown-bottom dropdown-end">
+            <div tabindex="0" role="button" class="btn btn-outline btn-primary">
+               <span class="iconify lucide--columns-3-cog size-4"></span>
 
             </div>
 
             <div tabindex="0" class="dropdown-content bg-base-100 rounded-box w-44 shadow">
-                  <ul class="menu w-full">
-                     <template
-                        x-for="column in allLeafColumns"
-                        :key="column.id">
-                        <li @click="toggleColumn(column)">
-                              <div
-                                 class="group gap-2.5"
-                                 :data-visible="isColumnVisible(column) ? true : null">
-                                 <span
-                                    class="iconify lucide--check size-4 scale-50 opacity-0 transition-all duration-300 group-data-visible:scale-100 group-data-visible:opacity-100"></span>
-
-                                 <span
-                                    class="font-medium"
-                                    x-text="column.columnDef.header"></span>
-                              </div>
-                        </li>
-                     </template>
-                  </ul>
+               <ul class="menu w-full">
+                  <template x-for="column in allLeafColumns" :key="column.id">
+                     <li @click="toggleColumn(column)" class="columnVisibility">
+                        <div class="group gap-2.5" :data-visible="isColumnVisible(column) ? true : null">
+                           <span
+                              class="iconify lucide--check size-4 scale-50 opacity-0 transition-all duration-300 group-data-visible:scale-100 group-data-visible:opacity-100"></span>
+
+                           <span class="font-medium" x-text="column.columnDef.header"></span>
+                        </div>
+                     </li>
+                  </template>
+               </ul>
             </div>
-         </div> -->
+         </div>
 
          <div class="dropdown dropdown-bottom dropdown-end">
             <div aria-label="More actions" tabindex="0" role="button" class="btn btn-outline btn-primary">
@@ -75,10 +65,9 @@
       </div>
    </div>
 
-   <div class="flex w-full px-[30px]">
+   <div class="flex px-[30px]">
 
-      <div
-         class=" max-h-[calc(100vh-260px)] overflow-y-scroll overflow-x-auto w-full border-solid border-1 border-[#008EED] rounded-none">
+      <div class="  overflow-x-auto w-full border-solid border-1 border-[#008EED] rounded-none">
 
          <div
             class="min-w-[480px] px-[20px] py-[20px] border-base-200 flex flex-wrap items-center justify-between gap-2">
@@ -205,7 +194,7 @@
                               <template x-if="cell.column.id === 'actions'">
                                  <div class="gap-2 text-right">
                                     <button aria-label="Show" class="saveButton btn btn-outline btn-primary"
-                                       @click="viewRow(cell.row)">Open</button>
+                                       @click="viewRow(cell.row)">Modify</button>
                                  </div>
                               </template>
 
@@ -226,7 +215,7 @@
       </div>
 
       <div
-         class="post min-w-[400px] max-w-[600px] max-h-[calc(100vh-260px)] overflow-y-scroll border-solid border-1 border-[#008EED] rounded-none post{arguments:id} ml-[30px] mb-[30px] hidden">
+         class="post min-w-[400px] max-w-[600px] border-solid border-1 border-[#008EED] rounded-none post{arguments:id} ml-[30px] mb-[30px] hidden">
       </div>
 
    </div>
diff --git a/assets/templates/Tracker.html b/assets/templates/Tracker.html
index 0984d96..c14e63d 100644
--- a/assets/templates/Tracker.html
+++ b/assets/templates/Tracker.html
@@ -1,4 +1,4 @@
-<div class="h-full lg:min-w-full xl:min-w-0" x-data="UI.createTable({db:'{arguments:db}'})">
+<div class="h-full xl:min-w-0" x-data="UI.createTable({db:'{arguments:db}'})">
 
    <div class="border-base-200 flex items-center justify-between px-5 mb-[10px] space-x-3">
 
@@ -13,37 +13,27 @@
                placeholder="Search" />
          </label>
 
-         <!-- <div class="dropdown dropdown-bottom dropdown-end">
-            <div
-                  tabindex="0"
-                  role="button"
-                  class="btn btn-outline btn-primary">
-                  <span
-                     class="iconify lucide--columns-3-cog size-4"></span>
+         <div class="columnsDropdown dropdown dropdown-bottom dropdown-end">
+            <div tabindex="0" role="button" class="btn btn-outline btn-primary">
+               <span class="iconify lucide--columns-3-cog size-4"></span>
 
             </div>
 
             <div tabindex="0" class="dropdown-content bg-base-100 rounded-box w-44 shadow">
-                  <ul class="menu w-full">
-                     <template
-                        x-for="column in allLeafColumns"
-                        :key="column.id">
-                        <li @click="toggleColumn(column)">
-                              <div
-                                 class="group gap-2.5"
-                                 :data-visible="isColumnVisible(column) ? true : null">
-                                 <span
-                                    class="iconify lucide--check size-4 scale-50 opacity-0 transition-all duration-300 group-data-visible:scale-100 group-data-visible:opacity-100"></span>
-
-                                 <span
-                                    class="font-medium"
-                                    x-text="column.columnDef.header"></span>
-                              </div>
-                        </li>
-                     </template>
-                  </ul>
+               <ul class="menu w-full">
+                  <template x-for="column in allLeafColumns" :key="column.id">
+                     <li @click="toggleColumn(column)" class="columnVisibility">
+                        <div class="group gap-2.5" :data-visible="isColumnVisible(column) ? true : null">
+                           <span
+                              class="iconify lucide--check size-4 scale-50 opacity-0 transition-all duration-300 group-data-visible:scale-100 group-data-visible:opacity-100"></span>
+
+                           <span class="font-medium" x-text="column.columnDef.header"></span>
+                        </div>
+                     </li>
+                  </template>
+               </ul>
             </div>
-         </div> -->
+         </div>
 
          <div class="dropdown dropdown-bottom dropdown-end">
             <div aria-label="More actions" tabindex="0" role="button" class="btn btn-outline btn-primary">
@@ -75,10 +65,9 @@
       </div>
    </div>
 
-   <div class="flex w-full px-[30px]">
+   <div class="flex px-[30px]">
 
-      <div
-         class=" max-h-[calc(100vh-260px)] overflow-y-scroll overflow-x-auto w-full border-solid border-1 border-[#008EED] rounded-none">
+      <div class=" overflow-x-auto w-full border-solid border-1 border-[#008EED] rounded-none">
 
          <div
             class="min-w-[480px] px-[20px] py-[20px] border-base-200 flex flex-wrap items-center justify-between gap-2">
@@ -202,7 +191,7 @@
                               <template x-if="cell.column.id === 'actions'">
                                  <div class="gap-2 text-right">
                                     <button aria-label="Show" class="saveButton btn btn-outline btn-primary"
-                                       @click="viewRow(cell.row)">Open</button>
+                                       @click="viewRow(cell.row)">Modify</button>
                                     <!-- <button
                                              aria-label="Show"
                                              class="btn btn-soft btn-xs btn-square"
@@ -237,7 +226,7 @@
       </div>
 
       <div
-         class="post min-w-[400px] max-w-[600px] max-h-[calc(100vh-260px)] overflow-y-scroll border-solid border-1 border-[#008EED] rounded-none post{arguments:id} ml-[30px] mb-[30px] hidden">
+         class="post min-w-[400px] max-w-[600px] border-solid border-1 border-[#008EED] rounded-none post{arguments:id} ml-[30px] mb-[30px] hidden">
       </div>
 
    </div>
diff --git a/assets/templates/Zone.html b/assets/templates/Zone.html
index af35db2..9a13b07 100644
--- a/assets/templates/Zone.html
+++ b/assets/templates/Zone.html
@@ -1,4 +1,4 @@
-<div class="h-full lg:min-w-full xl:min-w-0" x-data="UI.createTable({db:'{arguments:db}'})">
+<div class="h-full xl:min-w-0" x-data="UI.createTable({db:'{arguments:db}'})">
 
    <div class="border-base-200 flex items-center justify-between px-5 mb-[10px] space-x-3">
 
@@ -13,37 +13,27 @@
                placeholder="Search" />
          </label>
 
-         <!-- <div class="dropdown dropdown-bottom dropdown-end">
-            <div
-                  tabindex="0"
-                  role="button"
-                  class="btn btn-outline btn-primary">
-                  <span
-                     class="iconify lucide--columns-3-cog size-4"></span>
+         <div class="columnsDropdown dropdown dropdown-bottom dropdown-end">
+            <div tabindex="0" role="button" class="btn btn-outline btn-primary">
+               <span class="iconify lucide--columns-3-cog size-4"></span>
 
             </div>
 
             <div tabindex="0" class="dropdown-content bg-base-100 rounded-box w-44 shadow">
-                  <ul class="menu w-full">
-                     <template
-                        x-for="column in allLeafColumns"
-                        :key="column.id">
-                        <li @click="toggleColumn(column)">
-                              <div
-                                 class="group gap-2.5"
-                                 :data-visible="isColumnVisible(column) ? true : null">
-                                 <span
-                                    class="iconify lucide--check size-4 scale-50 opacity-0 transition-all duration-300 group-data-visible:scale-100 group-data-visible:opacity-100"></span>
-
-                                 <span
-                                    class="font-medium"
-                                    x-text="column.columnDef.header"></span>
-                              </div>
-                        </li>
-                     </template>
-                  </ul>
+               <ul class="menu w-full">
+                  <template x-for="column in allLeafColumns" :key="column.id">
+                     <li @click="toggleColumn(column)" class="columnVisibility">
+                        <div class="group gap-2.5" :data-visible="isColumnVisible(column) ? true : null">
+                           <span
+                              class="iconify lucide--check size-4 scale-50 opacity-0 transition-all duration-300 group-data-visible:scale-100 group-data-visible:opacity-100"></span>
+
+                           <span class="font-medium" x-text="column.columnDef.header"></span>
+                        </div>
+                     </li>
+                  </template>
+               </ul>
             </div>
-         </div> -->
+         </div>
 
          <div class="dropdown dropdown-bottom dropdown-end">
             <div aria-label="More actions" tabindex="0" role="button" class="btn btn-outline btn-primary">
@@ -55,7 +45,7 @@
                   <li class="update{arguments:db}" @click="updateData()">
                      <div>
                         <span class="iconify lucide--refresh-cw size-4"></span>
-                        Refresh Data
+                        Refresh
                      </div>
                   </li>
                   <li>
@@ -75,10 +65,9 @@
       </div>
    </div>
 
-   <div class="flex w-full px-[30px]">
+   <div class="flex px-[30px]">
 
-      <div
-         class=" max-h-[calc(100vh-260px)] overflow-y-scroll overflow-x-auto w-full border-solid border-1 border-[#008EED] rounded-none">
+      <div class=" overflow-x-auto w-full border-solid border-1 border-[#008EED] rounded-none">
 
          <div
             class="min-w-[480px] px-[20px] py-[20px] border-base-200 flex flex-wrap items-center justify-between gap-2">
@@ -183,7 +172,7 @@
                               <template x-if="cell.column.id === 'actions'">
                                  <div class="gap-2 text-right">
                                     <button aria-label="Show" class="saveButton btn btn-outline btn-primary"
-                                       @click="viewRow(cell.row)">Open</button>
+                                       @click="viewRow(cell.row)">Modify</button>
                                     <!-- <button
                                              aria-label="Show"
                                              class="btn btn-soft btn-xs btn-square"
@@ -218,7 +207,7 @@
       </div>
 
       <div
-         class="post min-w-[400px] max-w-[600px] max-h-[calc(100vh-260px)] overflow-y-scroll border-solid border-1 border-[#008EED] rounded-none post{arguments:id} ml-[30px] mb-[30px] hidden">
+         class="post min-w-[400px] max-w-[600px] border-solid border-1 border-[#008EED] rounded-none post{arguments:id} ml-[30px] mb-[30px] hidden">
       </div>
 
    </div>
diff --git a/assets/templates/fingerprint.html b/assets/templates/fingerprint.html
index 44933f7..f7c211d 100644
--- a/assets/templates/fingerprint.html
+++ b/assets/templates/fingerprint.html
@@ -1,6 +1,6 @@
-<div class="h-full w-full">
+<div class="h-full">
 
-   <iframe src="assets/maps/" width="100%" height="100%" class="h-[calc(100vh-170px)]">
+   <iframe src="assets/maps/" class="w-[calc(100vw-250px)] h-[calc(100vh-170px)]" class=" h-[calc(100vh-170px)]">
    </iframe>
 
 </div>
\ No newline at end of file
diff --git a/assets/templates/floor.html b/assets/templates/floor.html
index af35db2..6307a1c 100644
--- a/assets/templates/floor.html
+++ b/assets/templates/floor.html
@@ -1,4 +1,4 @@
-<div class="h-full lg:min-w-full xl:min-w-0" x-data="UI.createTable({db:'{arguments:db}'})">
+<div class="h-full xl:min-w-0" x-data="UI.createTable({db:'{arguments:db}'})">
 
    <div class="border-base-200 flex items-center justify-between px-5 mb-[10px] space-x-3">
 
@@ -13,37 +13,27 @@
                placeholder="Search" />
          </label>
 
-         <!-- <div class="dropdown dropdown-bottom dropdown-end">
-            <div
-                  tabindex="0"
-                  role="button"
-                  class="btn btn-outline btn-primary">
-                  <span
-                     class="iconify lucide--columns-3-cog size-4"></span>
+         <div class="columnsDropdown dropdown dropdown-bottom dropdown-end">
+            <div tabindex="0" role="button" class="btn btn-outline btn-primary">
+               <span class="iconify lucide--columns-3-cog size-4"></span>
 
             </div>
 
             <div tabindex="0" class="dropdown-content bg-base-100 rounded-box w-44 shadow">
-                  <ul class="menu w-full">
-                     <template
-                        x-for="column in allLeafColumns"
-                        :key="column.id">
-                        <li @click="toggleColumn(column)">
-                              <div
-                                 class="group gap-2.5"
-                                 :data-visible="isColumnVisible(column) ? true : null">
-                                 <span
-                                    class="iconify lucide--check size-4 scale-50 opacity-0 transition-all duration-300 group-data-visible:scale-100 group-data-visible:opacity-100"></span>
-
-                                 <span
-                                    class="font-medium"
-                                    x-text="column.columnDef.header"></span>
-                              </div>
-                        </li>
-                     </template>
-                  </ul>
+               <ul class="menu w-full">
+                  <template x-for="column in allLeafColumns" :key="column.id">
+                     <li @click="toggleColumn(column)" class="columnVisibility">
+                        <div class="group gap-2.5" :data-visible="isColumnVisible(column) ? true : null">
+                           <span
+                              class="iconify lucide--check size-4 scale-50 opacity-0 transition-all duration-300 group-data-visible:scale-100 group-data-visible:opacity-100"></span>
+
+                           <span class="font-medium" x-text="column.columnDef.header"></span>
+                        </div>
+                     </li>
+                  </template>
+               </ul>
             </div>
-         </div> -->
+         </div>
 
          <div class="dropdown dropdown-bottom dropdown-end">
             <div aria-label="More actions" tabindex="0" role="button" class="btn btn-outline btn-primary">
@@ -75,10 +65,9 @@
       </div>
    </div>
 
-   <div class="flex w-full px-[30px]">
+   <div class="flex px-[30px]">
 
-      <div
-         class=" max-h-[calc(100vh-260px)] overflow-y-scroll overflow-x-auto w-full border-solid border-1 border-[#008EED] rounded-none">
+      <div class=" overflow-x-auto w-full border-solid border-1 border-[#008EED] rounded-none">
 
          <div
             class="min-w-[480px] px-[20px] py-[20px] border-base-200 flex flex-wrap items-center justify-between gap-2">
@@ -218,7 +207,7 @@
       </div>
 
       <div
-         class="post min-w-[400px] max-w-[600px] max-h-[calc(100vh-260px)] overflow-y-scroll border-solid border-1 border-[#008EED] rounded-none post{arguments:id} ml-[30px] mb-[30px] hidden">
+         class="post min-w-[400px] max-w-[600px] border-solid border-1 border-[#008EED] rounded-none post{arguments:id} ml-[30px] mb-[30px] hidden">
       </div>
 
    </div>
diff --git a/assets/templates/home.html b/assets/templates/home.html
index 6f85a5e..fafc587 100644
--- a/assets/templates/home.html
+++ b/assets/templates/home.html
@@ -1,7 +1,7 @@
-<div class="h-full lg:min-w-full xl:min-w-0" x-data="UI.createTable({db:'{arguments:db}'})">
+<div class="mt-[30px] xl:min-w-0" x-data="UI.createTable({db:'{arguments:db}'})">
 
 
-   <div class="flex w-full px-[30px]">
+   <div class="flex px-[30px]">
 
       <div
          class="hidden lg:block mr-[30px] max-w-[400px] h-[calc(100vh-170px)] overflow-y-scroll overflow-x-auto w-full border-solid border-1 border-[#008EED] rounded-none">
@@ -118,7 +118,7 @@
       <div
          class="dashboard w-full min-w-[400px] h-[calc(100vh-170px)] overflow-y-scroll border-solid border-1 border-[#008EED] rounded-none mb-[30px] ">
 
-         <div class="w-full cursor-pointer p-2">
+         <!-- <div class="w-full cursor-pointer p-2">
             <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
                viewBox="-50 -50 100 100" data-icon="rl:menu"
                class="iconify text-[50px] bg-[transparent] text-[#008EED] iconify--rl">
@@ -126,7 +126,7 @@
                   d="M-28.55 19.6q.434.4447 1.05.45h55q.616-.0053 1.05-.45.4447-.434.45-1.05-.0053-.616-.45-1.05-.434-.4447-1.05-.45h-55q-.616.0053-1.05.45-.4447.434-.45 1.05.0053.616.45 1.05m57.1-20.65q-.434-.4447-1.05-.45h-55q-.616.0053-1.05.45-.4447.434-.45 1.05.0053.616.45 1.05.434.4447 1.05.45h55q.616-.0053 1.05-.45Q28.9947.616 29 0q-.0053-.616-.45-1.05m0-18.55q-.434-.4447-1.05-.45h-55q-.616.0053-1.05.45-.4447.434-.45 1.05.0053.616.45 1.05.434.4447 1.05.45h55q.616-.0053 1.05-.45.4447-.434.45-1.05-.0053-.616-.45-1.05Z">
                </path>
             </svg><span class="text-[#008EED] text-[18px] px-[0px] py-[10px]">Index</span>
-         </div>
+         </div> -->
 
          <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-1 p-1">
 
diff --git a/assets/templates/menuleft.html b/assets/templates/menuleft.html
new file mode 100644
index 0000000..c6f6030
--- /dev/null
+++ b/assets/templates/menuleft.html
@@ -0,0 +1,121 @@
+<div class="w-[200px] p-[20px] h-[100vh] bg-white">
+
+
+   <div class="p-1 hover:bg-primary/5 rounded-xl cursor-pointer">
+      <a href="#building"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
+            viewBox="-50 -50 100 100" data-icon="rl:buildings"
+            class="iconify text-[50px] bg-[transparent] text-[#008EED] iconify--rl">
+            <path fill="currentColor"
+               d="M24.3 32v-64h-48.6v64h48.6m-2.45-61.55v59.1h-43.7v-59.1h43.7m-36.15 40.7v11.7h11.7v-11.7h-11.7m2.45 9.2V13.6h6.75v6.75h-6.75M-2.6-5.5h-11.7V6.2h11.7V-5.5m-9.25 2.45h6.75V3.7h-6.75v-6.75m-2.45-8.1h11.7v-11.7h-11.7v11.7m9.2-9.25v6.75h-6.75v-6.75h6.75m7.75 31.55v11.7h11.7v-11.7H2.65m2.45 9.2V13.6h6.75v6.75H5.1M14.35-5.5H2.65V6.2h11.7V-5.5M5.1-3.05h6.75V3.7H5.1v-6.75m-2.45-8.1h11.7v-11.7H2.65v11.7m9.2-9.25v6.75H5.1v-6.75h6.75Z">
+            </path>
+         </svg></a><a href="#building"><span class="text-[#008EED] text-[15px] px-[0px] py-[0px]">Buildings</span></a>
+   </div>
+   <div class="p-1 hover:bg-primary/5 rounded-xl cursor-pointer">
+      <a href="#floor"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
+            viewBox="-50 -50 100 100" data-icon="rl:floors"
+            class="iconify text-[50px] bg-[transparent] text-[#008EED] iconify--rl">
+            <path fill="currentColor"
+               d="M14.7-13.95V-14l-2.15-1.2-.05.05L0-22l-12.45 6.85-.05-.05-2.15 1.2v.05l-4.6 2.5h-.05L-40-.05v.1l20.7 11.4h.05L0 22l17.7-9.7h.05l7.65-4.25h.05L40 .05 39.95 0 40-.05 25.4-8.1l-.05.05-7.6-4.25h-.05l-3-1.65M12.9-1.2 2.25-7.1l10.25-5.65 10.65 5.9L12.9-1.2m-2.6-12.75L.05-8.3l-10.3-5.65L0-19.65l10.3 5.7m-22.75 1.2 10.3 5.65-10.7 5.9-10.25-5.7 10.65-5.85m6.4 10.2H-6l6.05-3.3L10.7 0 .05 5.9-10.65 0l4.6-2.55m-.75 7.1h.05l4.6 2.55-10.3 5.65-10.7-5.85 10.3-5.7 6.05 3.35m-18.55 1.1L-35.65 0l10.35-5.65L-15.05 0l-10.3 5.65m61-5.65-10.3 5.65L15.1 0l10.25-5.65L35.65 0M2.25 7.1 6.8 4.55h.05L12.9 1.2l10.35 5.65-10.7 5.9L2.25 7.1m8.1 6.85L0 19.65l-10.3-5.7L.05 8.3l10.3 5.65Z">
+            </path>
+         </svg></a><a href="#floor"><span class="text-[#008EED] text-[15px] px-[0px] py-[0px]">Floors</span></a>
+   </div>
+   <div class="p-1 hover:bg-primary/5 rounded-xl cursor-pointer">
+      <a href="#zone"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
+            viewBox="-50 -50 100 100" data-icon="rl:zones"
+            class="iconify text-[50px] bg-[transparent] text-[#008EED] iconify--rl">
+            <path fill="currentColor"
+               d="m25.45-8.05-7.7-4.25v.05L.05-22l-17.75 9.75v-.05l-1.5.85h-.05L-40-.05l.05.05-.05.05 20.75 11.35h.05L.05 21.95l25.4-13.9h.05l14.5-8v-.1l-14.5-8h-.05M.05-19.6l11.4 6.25h-.05L35.7 0 11.4 13.35h.05L.05 19.6-17 10.2.9.35l9.2 5.05 2.2-1.2-20-11-2.2 1.2 8.65 4.8L-19.2 9l-16.4-9L.05-19.6Z">
+            </path>
+         </svg></a><a href="#zone"><span class="text-[#008EED] text-[15px] px-[0px] py-[0px]">Zones</span></a>
+   </div>
+   <div class="p-1 hover:bg-primary/5 rounded-xl cursor-pointer">
+      <a href="#operator"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
+            viewBox="-50 -50 100 100" data-icon="rl:operators"
+            class="iconify text-[50px] bg-[transparent] text-[#008EED] iconify--rl">
+            <path fill="currentColor"
+               d="M-24.9-9.1v-.05q2.3-1.65 5.05-1.65 2.85 0 5 1.65l.05.05q.35.25.65.55v-2.65q-2.55-1.7-5.7-1.7-3.55 0-6.3 2.15-3 2.45-3 5.65V-3.45q.1.8.35 1.35-.75 1.25-.75 2.65 0 1.75 1.2 3.45.75 3.2 2.75 6.25.25.95.2 1.8v.1q-.1 1.35-.95 2.3-4.5 1.25-8.4 5.3-.25.4-.25.8t.35.75q.2.2.7.2.45 0 .7-.2 3.6-3.8 7.75-4.9.15-.15.45-.35 1.5-1.55 1.7-3.85.1-1.2-.25-2.7-.05-.15-.2-.35-1.9-2.8-2.6-5.8-.05-.3-.15-.45-.9-1.1-.9-2.35 0-1.05.65-2.1.15-.2.15-.45 0-.3-.1-.55Q-27-3-27.1-3.6v-1.5q.1-2.25 2.2-4m41.35-1q1.55-.7 3.35-.7 1.05 0 2 .2 1.65.35 3.1 1.45v.05q2.15 1.75 2.2 4v1.5q-.1.6-.3 1.05-.15.25-.15.55 0 .25.15.45.7 1.05.7 2.1 0 1.25-.95 2.35-.1.15-.15.45-.65 3-2.6 5.8-.15.2-.15.35-.35 1.5-.3 2.7.2 2.3 1.7 3.85.3.2.5.35 4.1 1.1 7.75 4.9.2.2.6.2.55 0 .75-.2.35-.35.35-.75t-.3-.8q-3.85-4.05-8.35-5.3-.85-.95-.95-2.3v-.1q-.05-.85.2-1.8 2-3.05 2.7-6.25 1.25-1.7 1.25-3.45 0-1.4-.7-2.65.2-.55.3-1.35V-5.1q0-3.2-3-5.65-1.95-1.55-4.35-2-.95-.15-2-.15-3.3 0-5.85 1.85v2.7q.4-.35.85-.75l.05-.05q.75-.55 1.6-.95m-11.1-7.05.05.05q2.5 2.05 2.5 4.7v1.65q-.2.7-.35 1.2-.25.4-.25.7.1.35.25.6.8 1.2.8 2.35Q8.3-4.5 7.3-3.15q-.2.2-.3.5Q6.25.95 3.9 4.2q-.15.2-.15.45-.4 1.7-.25 3.25h.05q.35 2.55 2.2 4.35.15.25.5.3 4.75 1.35 9 5.7.35.35.85.35.55 0 .9-.35t.35-.8q0-.5-.35-.85-4.6-4.7-9.8-6.2-1.05-1.25-1.3-2.85-.1-1.05.15-2.1 2.4-3.5 3.25-7.35 1.45-1.85 1.45-4 0-1.6-.85-3.1.2-.65.4-1.45v-1.95q.05-3.75-3.45-6.65Q3.6-21.5-.5-21.5q-4.15 0-7.35 2.45h-.05q-3.45 2.9-3.45 6.65v1.95q.05.8.35 1.5-.8 1.45-.8 3.05 0 2.15 1.4 3.95.8 3.9 3.25 7.4.15 1.1.1 2.15-.1 1.65-1.1 2.8-5.2 1.4-9.75 6.2-.35.35-.35.85 0 .45.4.8.3.35.85.35.5 0 .8-.35 4.2-4.35 9.05-5.7.25-.05.5-.3 1.85-1.8 2-4.45.15-1.5-.3-3.15Q-5 4.4-5.1 4.2-7.35.9-8.2-2.65q-.05-.3-.2-.5-1-1.3-1-2.75 0-1.15.75-2.4.2-.25.2-.6 0-.3-.15-.65-.3-.5-.35-1.2v-1.65q0-2.65 2.5-4.7v-.05q2.6-2 5.95-2 3.25 0 5.85 2Z">
+            </path>
+         </svg></a><a href="#operator"><span class="text-[#008EED] text-[15px] px-[0px] py-[0px]">Operators</span></a>
+   </div>
+   <div class="p-1 hover:bg-primary/5 rounded-xl cursor-pointer">
+      <a href="#subject"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
+            viewBox="-50 -50 100 100" data-icon="rl:subjects"
+            class="iconify text-[50px] bg-[transparent] text-[#008EED] iconify--rl">
+            <path fill="currentColor"
+               d="M-24.9-12.2h-.05q-3.35 2.7-3.35 6.45v1.85q.05.85.35 1.5-.8 1.45-.8 3 0 2.05 1.3 3.9.85 3.65 3.15 7.15.35 1.1.2 2.05v.1q-.1 1.55-1.05 2.65-5.1 1.45-9.55 6.05-.3.4-.3.9 0 .45.4.8.25.3.8.3.5 0 .8-.3 4.1-4.3 8.8-5.6.25-.1.5-.3 1.75-1.8 1.95-4.35.1-1.4-.3-3.15-.05-.15-.2-.35-2.2-3.2-2.95-6.65-.05-.3-.2-.5-1-1.25-1-2.7 0-1.1.7-2.35.2-.25.2-.55 0-.35-.15-.6-.25-.55-.3-1.2v-1.65q.05-2.6 2.45-4.6v-.05q2.55-1.9 5.7-1.9 3.3 0 5.75 1.9l.05.05q.4.3.75.6v-3q-2.9-1.95-6.55-1.95-4 0-7.1 2.5M28.4-.7q0-4.6-3-8-.2-.9-1.45-.9-.55 0-.9.35-.4.35-.4.9 0 .5.4.85.1.2.35.35Q25.8-4.4 25.8-.7q0 3.75-2.55 6.6-.35.45-.35.9.1.6.45.95t.95.3q.5-.05.9-.4Q28.4 4 28.4-.7m1.95-12.55q-.4-.4-.9-.45-.5-.05-.85.35-.45.35-.5.8-.05.5.3.95 2 2.25 3.05 5.05Q32.5-3.8 32.5-.7q0 2.95-1.05 5.9Q30.4 8 28.4 10.25q-.35.4-.35.95.05.5.45.85.35.35.95.35.45-.1.8-.45Q32.6 9.3 33.8 6.1 35 2.75 35-.7q0-3.55-1.2-6.8-1.2-3.1-3.45-5.75m-19.4-6.2q2.85 2.3 2.85 5.35v1.9q-.2.8-.45 1.35-.2.4-.2.8.1.4.25.65.95 1.35.95 2.7-.05 1.6-1.25 3.1-.2.25-.3.55-.85 4.15-3.55 7.85-.15.2-.15.5-.45 1.9-.3 3.65l.05.05q.4 2.95 2.5 4.95.2.25.6.35 5.35 1.55 10.25 6.5.35.35.95.35t1.05-.35q.35-.4.35-.95 0-.55-.35-.95-5.25-5.35-11.2-7.1-1.2-1.35-1.45-3.25v.1q-.1-1.15.15-2.5 2.7-3.95 3.75-8.3Q17.1-4.3 17.1-6.7q0-1.8-1.05-3.5.3-.75.45-1.7v-.05q.05-.6.05-2.15.05-4.3-3.95-7.55-3.7-2.85-8.35-2.85-4.7 0-8.4 2.85Q-8.1-18.4-8.1-14.1v2.15q.1 1 .4 1.75-.9 1.7-.9 3.5 0 2.4 1.55 4.55.95 4.3 3.7 8.3.25 1.35.15 2.45v.05q-.1 1.85-1.2 3.15-5.95 1.65-11.15 7.1-.35.4-.35.95 0 .55.4.95.4.35 1 .35.55 0 .9-.35 4.8-4.95 10.3-6.5.25-.1.55-.35 2.1-2.05 2.3-5.1.15-1.7-.35-3.55-.05-.3-.2-.5Q-3.55 1-4.5-3.05l-.2-.5q-1.2-1.5-1.2-3.15 0-1.35.9-2.7.2-.35.2-.7t-.15-.75q-.35-.55-.45-1.35v-1.9q.05-3.05 2.9-5.35v-.1Q.45-21.8 4.25-21.8q3.75 0 6.65 2.25l.05.1Z">
+            </path>
+         </svg></a><a href="#subject"><span class="text-[#008EED] text-[15px] px-[0px] py-[0px]">Subjects</span></a>
+   </div>
+   <div class="p-1 hover:bg-primary/5 rounded-xl cursor-pointer">
+      <a href="#alarm"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
+            viewBox="-50 -50 100 100" data-icon="rl:alarms"
+            class="iconify text-[50px] bg-[transparent] text-[#008EED] iconify--rl">
+            <path fill="currentColor"
+               d="m3.8-31.9-.05-.05Q2.252-33.493.05-33.5q-2.212.002-3.8 1.6-1.539 1.528-1.55 3.75.004 1.587.8 2.85-5.24 1.194-9.25 5.2l-.05.05q-5.43 5.42-5.7 13V-7q-.045 18.564-4.65 23.35-3.124 3.122-2.95 5.35-.12 2.711 3.6 4.15.266.1.55.1H-8.4q.3 2.909 2.45 5.05 2.484 2.495 6 2.5 3.516-.005 6-2.5 2.15-2.141 2.45-5.05H23q.284 0 .55-.1 3.72-1.439 3.55-4.15.224-2.228-2.9-5.35Q19.595 11.564 19.55-7v-.05q-.275-7.584-5.7-13-4.047-4.051-9.3-5.25.849-1.264.85-2.85-.007-2.202-1.6-3.75m-2.1 5.45q-.632.609-1.55.65h-.2q-.911-.037-1.6-.65l-.05-.05q-.605-.683-.6-1.65-.012-.978.65-1.65.712-.702 1.7-.7.962-.007 1.6.65l.05.05q.707.688.7 1.65.002.987-.7 1.7M.2-22.8q6.753.059 11.55 4.85 4.575 4.584 4.8 11 .062 20.293 5.55 25.45 1.93 1.93 2.05 3.15-.188.764-1.45 1.3h-45.35q-1.262-.536-1.45-1.3.12-1.22 2.05-3.15 5.488-5.157 5.55-25.45V-7q.247-6.37 4.85-10.95Q-6.886-22.741-.1-22.8q.076.003.15 0 .05.002.1 0H.2m5.25 48.75q-.24 1.681-1.5 2.95-1.616 1.605-3.9 1.6-2.284.005-3.9-1.6-1.26-1.269-1.55-2.95H5.45Z">
+            </path>
+         </svg></a><a href="#alarm"><span class="text-[#008EED] text-[15px] px-[0px] py-[0px]">Alarms</span></a>
+   </div>
+   <div class="p-1 hover:bg-primary/5 rounded-xl cursor-pointer">
+      <a href="#gateway"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
+            viewBox="-50 -50 100 100" data-icon="rl:gateways"
+            class="iconify text-[50px] bg-[transparent] text-[#008EED] iconify--rl">
+            <path fill="currentColor"
+               d="M21.15-21.25Q12.35-30 0-30q-12.45 0-21.25 8.75Q-30-12.4-30 0q0 12.35 8.75 21.15Q-12.5 30 0 30q12.35 0 21.15-8.8l.05-.05Q30 12.35 30 0q0-12.4-8.85-21.25M0-27.3q11.3 0 19.25 7.95v-.05Q27.3-11.35 27.3 0q0 11.25-8.05 19.25-8 8.05-19.25 8.05-11.35 0-19.35-8.05Q-27.3 11.3-27.3 0t7.9-19.35l.05-.05q8-7.9 19.35-7.9m13.85 13.35Q8.1-19.7 0-19.7q-8.15 0-13.95 5.75Q-19.7-8.1-19.7 0q0 8.15 5.75 13.85v.05q5.8 5.8 13.95 5.8 8.1 0 13.85-5.8l.05-.05Q19.7 8.15 19.7 0q0-8.1-5.85-13.95M0-17q7.05 0 11.95 4.9Q17-7.05 17 0t-5.05 11.95Q7 17 0 17q-7.05 0-12.05-5.05h-.05Q-17 7.05-17 0q0-7 4.9-12.05l.05-.05Q-7.05-17 0-17M4.45-3.2Q2.85-4.75.65-4.75q-2.15 0-3.7 1.55-1.6 1.55-1.6 3.75 0 2.25 1.6 3.75Q-1.5 5.9.65 5.9q2.2 0 3.8-1.6Q6 2.8 6 .55q0-2.2-1.55-3.75Z">
+            </path>
+         </svg></a><a href="#gateway"><span class="text-[#008EED] text-[15px] px-[0px] py-[0px]">Gateways</span></a>
+   </div>
+   <div class="p-1 hover:bg-primary/5 rounded-xl cursor-pointer">
+      <a href="#tracker"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
+            viewBox="-50 -50 100 100" data-icon="rl:trackers"
+            class="iconify text-[50px] bg-[transparent] text-[#008EED] iconify--rl">
+            <path fill="currentColor"
+               d="M-10.55-10.35q0 .05-.05.05-3.9 4.55-3.9 10.45 0 6.1 4.15 10.8.35.45 1 .5h.05q.6.05 1.1-.4v.05q.35-.45.35-1.05V10q.15-.6-.25-1.05-3.45-3.8-3.45-8.8 0-4.95 3.35-8.6v-.05q.1-.15.25-.3h.05q.45-.5.45-1 0-.6-.45-1.05h-.05q-.35-.45-1-.45-1.3 0-1.6.95M-21.6-8.6q-.05.05-.05.1-1.6 4.1-1.6 8.65 0 4.5 1.65 8.8V9q1.5 4.2 4.55 7.6.4.45 1.05.5.55 0 1.05-.3v-.05q.4-.4.45-1.05.1-.6-.3-1h-.05q-2.65-3.15-4-6.75-1.4-3.8-1.4-7.8 0-3.95 1.4-7.7v-.05q1.35-3.65 3.95-6.6h.05q.35-.45.3-1.1-.05-.55-.45-1-.5-.4-1.05-.4-.65.1-1.05.6v.05q-3 3.35-4.5 7.45m.35-12.4q-.05-.6-.5-.95-.4-.5-1.05-.45-.6.05-1.05.55-4 4.5-6.05 10.1v.15Q-32-5.9-32 .15t2.05 11.65q0 .05.05.15 1.85 5.45 5.9 10l.3.3q.45.45 1.05.45.55 0 1-.45.5-.5.5-1.05 0-.6-.5-1-.05 0-.05-.1-.05-.05-.05-.15-3.55-4.05-5.3-8.9V11l-.05-.05q-1.95-5.2-1.95-10.8 0-5.3 1.9-10.35h-.05q.05-.2.15-.35 1.75-5.25 5.45-9.35.45-.45.35-1.1m42.45-.35q-.05.6.45 1.1 3.55 4.1 5.4 9.45v-.05q.1.15.1.2v.05q1.9 5.05 1.9 10.5 0 5.5-2 10.65-1.75 4.95-5.3 9.05-.1.1-.1.2v.05q-.5.45-.5 1.05 0 .6.5 1.05.4.4 1 .4.55 0 1-.4.15-.2.35-.35 3.9-4.4 5.85-9.9 0-.05.05-.1Q32 5.9 32-.1q0-6.1-2.1-11.8l-.05-.05q-.05-.1-.05-.2-2.2-5.65-6-10-.4-.55-1-.6-.6-.05-1.05.4-.5.45-.55 1M7.85-9.15q.15.2.4.4.05 0 .05.05 3.2 3.65 3.2 8.6 0 4.9-3.35 8.75-.45.45-.45 1.05.1.6.55 1.05.4.4 1.05.35.65-.05 1.1-.5h-.05Q14.5 5.9 14.5-.1q0-6-3.85-10.4-.05-.05-.05-.1-.25-1.05-1.75-1.05-.65 0-1 .45-.5.4-.5 1.05 0 .55.5 1m-4.3 5.8Q2.1-4.75 0-4.75q-2.1 0-3.45 1.4-1.6 1.45-1.6 3.5 0 2.15 1.6 3.65Q-2.1 5.15 0 5.15T3.55 3.8q1.4-1.5 1.4-3.65 0-2.05-1.4-3.5m11.5-13.2q-.55.35-.55.95-.1.55.35 1.05 2.6 3 3.95 6.7v-.05q1.4 3.65 1.4 7.8 0 3.9-1.4 7.7-1.35 3.7-3.95 6.7-.5.45-.45 1.1.1.6.55 1.05H15q.4.35 1.05.35.6-.1 1-.45H17q3.1-3.55 4.65-7.65 1.5-4.4 1.5-8.8 0-4.65-1.5-8.85-1.55-4.05-4.55-7.5h.05q-.5-.45-1.05-.5-.6-.1-1 .4h-.05Z">
+            </path>
+         </svg></a><a href="#tracker"><span class="text-[#008EED] text-[15px] px-[0px] py-[0px]">Trackers</span></a>
+   </div>
+
+   <div class="p-1 hover:bg-primary/5 rounded-xl cursor-pointer">
+      <a href="#trackerZone"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em"
+            height="1em" viewBox="-50 -50 100 100" data-icon="rl:trackerZone"
+            class="iconify text-[50px] bg-[transparent] text-[#008EED] iconify--rl">
+            <path fill="currentColor"
+               d="M23.7-23.7Q13.982-33.494 0-33.5q-13.813-.006-23.7 9.75l-.05.05Q-33.506-13.813-33.5 0q.006 13.917 9.8 23.7 9.887 9.806 23.7 9.8 13.982-.006 23.7-9.8 9.793-9.783 9.8-23.7.006-13.813-9.8-23.7M0-30.5q12.718-.007 21.55 8.9Q30.494-12.587 30.5 0q.006 12.683-8.9 21.6h-.05Q12.718 30.507 0 30.5q-12.587-.006-21.6-8.95v.05q-8.907-8.917-8.9-21.6.006-12.57 8.9-21.6 9.03-8.894 21.6-8.9m2.7 48.35v-25.9h-5.5v25.9h5.5M0-11.9q1.45 0 2.25-.8.8-.85.8-2.25 0-1.45-.8-2.25T0-18q-1.5 0-2.3.8-.85.8-.85 2.25 0 1.4.85 2.25.8.8 2.3.8Z">
+            </path>
+         </svg></a><a href="#trackerZone"><span class="text-[#008EED] text-[15px] px-[0px] py-[0px]">Limits</span></a>
+   </div>
+
+   <div class="p-1 hover:bg-primary/5 rounded-xl cursor-pointer">
+      <a href="#track"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
+            viewBox="-67 -67 100 100" data-icon="rl:tracks"
+            class="iconify text-[50px] bg-[transparent] text-[#008EED] iconify--rl">
+            <path fill="currentColor"
+               d="M-37.05-26.35q-.55.4-.65 1.1-.1.65.3 1.2.4.55 1.1.7.65.1 1.2-.3 1.65-1.25 2.75-2.5.45-.55.4-1.2 0-.7-.55-1.1-.5-.5-1.2-.45-.7.05-1.1.55-.9 1-2.25 2m2.1-13.25q-.55-.45-1.2-.35-.7.05-1.1.55-.5.55-.4 1.25.05.65.6 1.1 1.2 1 2.05 2.05.45.5 1.15.55.7.05 1.2-.4t.6-1.1q.05-.7-.4-1.2-1-1.2-2.5-2.45M-44.3-4.2q-.4.55-.25 1.25.1.7.65 1.1Q-42.5-1-40.95 0q.55.35 1.2.2.65-.15 1.05-.7.35-.6.2-1.3-.15-.65-.7-1-1.55-.95-2.8-1.8-.6-.4-1.25-.3-.7.15-1.05.7m-6.4-9.2q-.2-.7-.8-1-.65-.3-1.25-.1-.7.2-1 .85-.3.6-.1 1.25.5 1.65 1.95 3.5.4.5 1.1.6.7.05 1.25-.3.5-.45.6-1.15.1-.7-.3-1.2-1.05-1.3-1.45-2.45m7.2-7.6q.25-.6 0-1.25-.2-.65-.85-.9-.6-.3-1.25-.1-1.7.65-3.05 1.35-.6.35-.8.95-.2.7.1 1.3.3.6 1 .8.65.2 1.25-.1 1.15-.6 2.65-1.2.65-.2.95-.85m1.1-22.9q-.2-.65-.8-.95-1.4-.7-2.9-1.4-.65-.3-1.3-.1-.6.25-.9.9-.3.6-.05 1.25.2.65.85.95 1.45.65 2.75 1.35.65.3 1.3.1.65-.25.95-.8.3-.65.1-1.3m47.95 56q0-.5-.35-.9Q.25 6.15-5.35 4.5q-1.15-1.3-1.4-3.05v.1q-.1-1.1.15-2.35 2.55-3.75 3.55-7.85Q-1.5-10.7-1.5-13q0-1.65-1-3.3.3-.7.45-1.6v-.05q.05-.55.05-2 0-4.1-3.75-7.15-3.5-2.7-7.9-2.7-4.45 0-7.9 2.7h-.05q-3.75 3.05-3.7 7.15v2.05q.05.9.35 1.65-.85 1.6-.85 3.25 0 2.3 1.5 4.3.9 4.1 3.45 7.9.25 1.25.2 2.3v.05q-.1 1.75-1.15 2.95-5.65 1.6-10.55 6.7-.35.4-.35.9 0 .55.4.9.35.35.9.35.6 0 .9-.35 4.5-4.65 9.75-6.1.2-.1.5-.35 2-1.95 2.15-4.8.15-1.6-.3-3.4-.05-.25-.2-.45-2.4-3.6-3.3-7.4-.1-.3-.2-.5-1.1-1.45-1.1-3 0-1.25.8-2.55.2-.3.2-.65 0-.35-.15-.7-.3-.5-.4-1.3v-1.75q.05-2.9 2.75-5.1v-.05q2.8-2.15 6.35-2.15t6.3 2.15l.05.05q2.65 2.2 2.65 5.1v1.75q-.15.8-.35 1.3-.2.4-.2.75.05.4.2.65.9 1.25.9 2.5-.05 1.55-1.15 2.95-.2.25-.3.55-.85 3.9-3.35 7.4-.15.2-.15.45Q-9.5.2-9.3 1.85q.4 2.8 2.4 4.7.15.25.5.35 5.1 1.45 9.7 6.1.35.35.95.35.55 0 .95-.35.35-.35.35-.9m-.8-26q.15.15.35.3Q7.4-11 7.4-7.5q0 3.55-2.4 6.25-.35.4-.35.85.1.55.4.85.35.35.9.3.5-.05.85-.4 3-3.4 3-7.85 0-4.35-2.8-7.55-.2-.85-1.4-.85-.5 0-.85.35-.35.3-.35.8 0 .45.35.85m10.2 0q-1.15-2.95-3.3-5.45-.35-.4-.8-.4-.5-.1-.85.3-.4.3-.45.75-.05.5.3.9 1.85 2.15 2.85 4.8 1 2.55 1 5.5 0 2.8-1 5.55-1 2.65-2.9 4.8-.3.4-.3.9.05.5.4.8.4.35.9.3.5-.05.8-.35 2.2-2.55 3.35-5.6 1.1-3.15 1.1-6.4 0-3.35-1.1-6.4Z">
+            </path>
+         </svg></a><a href="#track"><span class="text-[#008EED] text-[15px] px-[0px] py-[0px]">Tracking</span></a>
+   </div>
+
+   <div class="p-1 hover:bg-primary/5 rounded-xl cursor-pointer">
+      <a href="#fingerprint"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em"
+            height="1em" viewBox="0 0 512 512" data-icon="rl:settings"
+            class="iconify text-[35px] m-[5px]  bg-[transparent] text-[#008EED] iconify--rl">
+            <path fill="currentColor"
+               d="M390.42,75.28a10.45,10.45,0,0,1-5.32-1.44C340.72,50.08,302.35,40,256.35,40c-45.77,0-89.23,11.28-128.76,33.84C122,77,115.11,74.8,111.87,69a12.4,12.4,0,0,1,4.63-16.32A281.81,281.81,0,0,1,256.35,16c49.23,0,92.23,11.28,139.39,36.48a12,12,0,0,1,4.85,16.08A11.3,11.3,0,0,1,390.42,75.28Zm-330.79,126a11.73,11.73,0,0,1-6.7-2.16,12.26,12.26,0,0,1-2.78-16.8c22.89-33.6,52-60,86.69-78.48C209.42,65,302.35,64.72,375.16,103.6c34.68,18.48,63.8,44.64,86.69,78a12.29,12.29,0,0,1-2.78,16.8,11.26,11.26,0,0,1-16.18-2.88c-20.8-30.24-47.15-54-78.36-70.56-66.34-35.28-151.18-35.28-217.29.24-31.44,16.8-57.79,40.8-78.59,71A10,10,0,0,1,59.63,201.28ZM204.1,491a10.66,10.66,0,0,1-8.09-3.6C175.9,466.48,165,453,149.55,424c-16-29.52-24.27-65.52-24.27-104.16,0-71.28,58.71-129.36,130.84-129.36S387,248.56,387,319.84a11.56,11.56,0,1,1-23.11,0c0-58.08-48.32-105.36-107.72-105.36S148.4,261.76,148.4,319.84c0,34.56,7.39,66.48,21.49,92.4,14.8,27.6,25,39.36,42.77,58.08a12.67,12.67,0,0,1,0,17A12.44,12.44,0,0,1,204.1,491Zm165.75-44.4c-27.51,0-51.78-7.2-71.66-21.36a129.1,129.1,0,0,1-55-105.36,11.57,11.57,0,1,1,23.12,0,104.28,104.28,0,0,0,44.84,85.44c16.41,11.52,35.6,17,58.72,17a147.41,147.41,0,0,0,24-2.4c6.24-1.2,12.25,3.12,13.4,9.84a11.92,11.92,0,0,1-9.47,13.92A152.28,152.28,0,0,1,369.85,446.56ZM323.38,496a13,13,0,0,1-3-.48c-36.76-10.56-60.8-24.72-86-50.4-32.37-33.36-50.16-77.76-50.16-125.28,0-38.88,31.9-70.56,71.19-70.56s71.2,31.68,71.2,70.56c0,25.68,21.5,46.56,48.08,46.56s48.08-20.88,48.08-46.56c0-90.48-75.13-163.92-167.59-163.92-65.65,0-125.75,37.92-152.79,96.72-9,19.44-13.64,42.24-13.64,67.2,0,18.72,1.61,48.24,15.48,86.64,2.32,6.24-.69,13.2-6.7,15.36a11.34,11.34,0,0,1-14.79-7,276.39,276.39,0,0,1-16.88-95c0-28.8,5.32-55,15.72-77.76,30.75-67,98.94-110.4,173.6-110.4,105.18,0,190.71,84.24,190.71,187.92,0,38.88-31.9,70.56-71.2,70.56s-71.2-31.68-71.2-70.56C303.5,293.92,282,273,255.42,273s-48.08,20.88-48.08,46.56c0,41,15.26,79.44,43.23,108.24,22,22.56,43,35,75.59,44.4,6.24,1.68,9.71,8.4,8.09,14.64A11.39,11.39,0,0,1,323.38,496Z">
+            </path>
+         </svg></a><a href="#fingerprint"><span
+            class="text-[#008EED] text-[15px] px-[0px] py-[0px]">Fingerprint</span></a>
+   </div>
+
+
+   <div class="p-1 hover:bg-primary/5 rounded-xl cursor-pointer">
+      <a href="#setting"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
+            viewBox="-50 -50 100 100" data-icon="rl:settings"
+            class="iconify text-[50px] bg-[transparent] text-[#008EED] iconify--rl">
+            <path fill="currentColor"
+               d="M5.7-29.9q-.05 0-.1.05-.05 0-.05.05v.1q-.05 0-.05.05l-2.75 6.4q-.05.15-.2.25-.1.05-.25.05-2.4-.3-4.55.1-.15 0-.3-.05-.15-.1-.15-.25l-2.55-6.3q-.05-.05-.05-.1-.05-.25-.15-.3-.1-.05-.15-.05-.15-.1-.35.1-.1.05-.2.05l-10.5 4.3q-.15.05-.25.1-.2.05-.25.1-.05.05-.05.1-.05.1.05.4v-.05l2.7 6.55q.05.15 0 .3-.1.15-.2.25-1.7 1.2-3.15 3.1-.1.15-.25.2-.15.05-.25 0l-6.4-2.55q-.1-.05-.1-.1-.1-.05-.15-.05-.1.05-.2.05-.15.05-.2.15-.05.1-.15.25l-4.4 10.5q0 .1-.05.2-.1.15 0 .35l.05.05q.15.15.35.25l.05.05 6.3 2.55q.15.05.25.15v.25q-.25 2.55 0 4.65v.25q-.1.15-.25.25l-6.5 2.55h-.05q-.1 0-.15.1v.2q-.1.15-.1.25.05 0 .05.05l4.65 11q.05.05.25.2H-24.6l6.25-2.6q.15-.05.3 0 .15 0 .25.15 1.25 1.6 3.2 3.2.1 0 .15.2.05.15 0 .25l-2.6 6.4-.1.1q-.05.1-.05.2.05.05.05.1.05.2.3.25.1 0 .2.1l10.45 4.4h.1q.3.05.65 0 .1-.05.15-.15v-.05l2.6-6.35q0-.2.15-.25.1-.05.25-.05 2.5.15 4.6 0 .15 0 .25.05.15.05.2.2l2.65 6.4q0 .05.05.1v.05h.15q.25.05.45.05h.15l10.7-4.5q.2-.05.3-.35v.05q.05-.1.05-.2l-.05-.05-2.65-6.5q-.05-.1 0-.25 0-.2.1-.25 1.75-1.4 3.35-3.25.05-.1.25-.1.1-.05.25 0l6.2 2.65H25.15q.2-.05.3-.3l4.5-10.8v.1q.05-.3 0-.55v-.1q-.05-.15-.15-.15h-.05l-6.4-2.55q-.15-.1-.2-.2-.1-.1-.1-.25.15-2.45 0-4.7 0-.1.1-.25.05-.1.2-.15l6.3-2.6h.1q.1-.2.2-.35.05-.2.05-.35v-.05l-4.45-10.6q-.1-.1-.1-.2-.1-.15-.3-.2-.1-.05-.15-.1-.1-.05-.2.1-.1.1-.3.1l-6.05 2.5q-.15.05-.25.05-.2-.05-.25-.15-1.5-1.8-3.35-3.1-.1-.1-.1-.25-.05-.15 0-.3l2.7-6.4v-.5q-.1-.2-.3-.25-.05 0-.1-.05L6.05-29.9q-.2-.1-.35 0M7-25.8q.05-.15.2-.2.2-.1.35 0l5.5 2.2q.1.05.2.2.1.2.05.35L11-17.4l-.1.1v.1q.05.05.1.15 0 .1.1.15h.1l1.55 1.3v.05q1.7 1.45 2.8 2.8l.05.05 1.15 1.7q.05.05.15.1.05 0 .15.1.05-.05.15-.1.1-.1.2-.1l5.8-2.25q.1-.1.3 0 .15.05.2.2l2.35 5.55q.1.2.05.35-.1.2-.3.25l-5.6 2.35q-.05.1-.25.1-.15 0-.15.1-.05.05-.1.15v.1l.35 1.8v.2q-.05.05-.1.15.25 1.75.1 4.15l-.25 1.9q0 .05-.05.15-.05.05-.05.15.15.1.4.3l5.7 2.45q.2.05.3.25.05.15 0 .35l-2.25 5.5q-.1.2-.3.2-.15.1-.35 0L17.35 11h-.05q-.1-.1-.25-.15-.05.1-.15.15-.05.05-.05.1l-.05.1-1.25 1.55v.05Q14 14.55 12.7 15.6l-1.55 1.2h-.05q-.1.05-.1.15-.05.1-.1.15-.05.1.1.2.1.1.1.25l2.3 5.75q.05.15-.05.3-.1.2-.25.3l-5.55 2.15q-.15.05-.35-.05-.15-.05-.2-.2l-2.5-5.7.05.05q-.1-.2-.15-.25l-.1-.05q-.15-.05-.25-.1L2.1 20h-.2q-1.45.25-3.85.1L-4 19.75q-.15 0-.2-.05v.1l-.3.2q-.05 0-.05.05v.05l-2.5 5.7q-.05.15-.2.25-.2.05-.3 0l-5.4-2.15q-.2-.1-.25-.3-.1-.15 0-.3l2.25-5.85q.05-.2.05-.35-.05-.25-.1-.3l-.05-.05-1.45-1.05q-.1-.1-.15-.2-1.95-1.45-2.95-2.8-.1-.15-.15-.2-.05 0-.05-.05l-.95-1.3-.2-.2h-.1q-.2-.05-.25.05h-.1l-5.7 2.45h-.2q-.15 0-.25-.05-.1-.1-.15-.2l-2.25-5.55q-.05-.2 0-.35.05-.2.25-.25l5.75-2.5.2-.2q.05-.25.2-.3l-.4-1.85q-.05-.1-.05-.25-.15-1.6 0-3.95v-.1l.35-1.9q0-.1.05-.15 0-.05-.05-.15-.05 0-.05-.05-.1-.1-.2-.1h-.05L-25.7-6.8q-.2-.05-.25-.25-.05-.15 0-.3l2.25-5.55q.05-.2.25-.25.15-.1.35 0l5.7 2.35h.05q.05.1.2.05.05-.05.1-.05l.3-.2 1.15-1.7q0-.05.05-.05 1.6-1.65 2.95-2.8v-.05l1.6-1.2h.05v-.6l-2.25-5.85q-.05-.15 0-.35.05-.15.25-.2l5.4-2.2q.2-.1.35 0 .2.05.25.2l2.4 5.7v.2q0 .1.1.2h.05q.1 0 .45.1h.05l1.95-.3q1.6-.2 4.15.05l1.65.15H4q.05 0 .1.05h.35v-.05q.1-.15.1-.2 0-.1.05-.2L7-25.8M4.75-11.3q-1.8-.75-3.7-.85-2.6-.35-5.1.7-.05.05-.1.05-.25.05-.5.15-.2.1-.3.2L-5-11q-2.7.95-4.35 3-1.1 1.3-1.95 3.3-1.1 2.7-.95 5.35.1 1.75.75 3.5.05.25.2.5 0 .05.05.1 1.8 4.7 6.65 6.7 4.6 1.9 9.35 0 4.7-1.95 6.65-6.7V4.7q1.9-4.65 0-9.35-2-4.75-6.6-6.6l-.05-.05m3.8 7.75v-.05q1.55 3.55.1 7.2H8.6Q7.15 7.15 3.5 8.65q-3.4 1.5-6.95 0-3.7-1.5-5.15-5-1.5-3.6 0-7.25v.05q.9-2.2 2.55-3.55 1.1-.85 2.55-1.35h-.05q1.6-.7 3.15-.8 1.9-.15 4 .8 3.55 1.35 4.95 4.9Z">
+            </path>
+         </svg></a><a href="#setting"><span class="text-[#008EED] text-[15px] px-[0px] py-[0px]">Settings</span></a>
+   </div>
+
+
+
+</div>
\ No newline at end of file
diff --git a/assets/templates/trackerZone.html b/assets/templates/trackerZone.html
index b6bd1bf..965cd1f 100644
--- a/assets/templates/trackerZone.html
+++ b/assets/templates/trackerZone.html
@@ -1,4 +1,4 @@
-<div class="h-full lg:min-w-full xl:min-w-0" x-data="UI.createTable({db:'{arguments:db}'})">
+<div class="h-full xl:min-w-0" x-data="UI.createTable({db:'{arguments:db}'})">
 
    <div class="border-base-200 flex items-center justify-between px-5 mb-[10px] space-x-3">
 
@@ -13,37 +13,27 @@
                placeholder="Search" />
          </label>
 
-         <!-- <div class="dropdown dropdown-bottom dropdown-end">
-            <div
-                  tabindex="0"
-                  role="button"
-                  class="btn btn-outline btn-primary">
-                  <span
-                     class="iconify lucide--columns-3-cog size-4"></span>
+         <div class="columnsDropdown dropdown dropdown-bottom dropdown-end">
+            <div tabindex="0" role="button" class="btn btn-outline btn-primary">
+               <span class="iconify lucide--columns-3-cog size-4"></span>
 
             </div>
 
             <div tabindex="0" class="dropdown-content bg-base-100 rounded-box w-44 shadow">
-                  <ul class="menu w-full">
-                     <template
-                        x-for="column in allLeafColumns"
-                        :key="column.id">
-                        <li @click="toggleColumn(column)">
-                              <div
-                                 class="group gap-2.5"
-                                 :data-visible="isColumnVisible(column) ? true : null">
-                                 <span
-                                    class="iconify lucide--check size-4 scale-50 opacity-0 transition-all duration-300 group-data-visible:scale-100 group-data-visible:opacity-100"></span>
-
-                                 <span
-                                    class="font-medium"
-                                    x-text="column.columnDef.header"></span>
-                              </div>
-                        </li>
-                     </template>
-                  </ul>
+               <ul class="menu w-full">
+                  <template x-for="column in allLeafColumns" :key="column.id">
+                     <li @click="toggleColumn(column)" class="columnVisibility">
+                        <div class="group gap-2.5" :data-visible="isColumnVisible(column) ? true : null">
+                           <span
+                              class="iconify lucide--check size-4 scale-50 opacity-0 transition-all duration-300 group-data-visible:scale-100 group-data-visible:opacity-100"></span>
+
+                           <span class="font-medium" x-text="column.columnDef.header"></span>
+                        </div>
+                     </li>
+                  </template>
+               </ul>
             </div>
-         </div> -->
+         </div>
 
          <div class="dropdown dropdown-bottom dropdown-end">
             <div aria-label="More actions" tabindex="0" role="button" class="btn btn-outline btn-primary">
@@ -75,7 +65,7 @@
       </div>
    </div>
 
-   <div class="flex w-full px-[30px]">
+   <div class="flex px-[30px]">
 
       <div
          class=" max-h-[calc(100vh-260px)] overflow-y-scroll overflow-x-auto w-full border-solid border-1 border-[#008EED] rounded-none">
@@ -176,7 +166,7 @@
                               <template x-if="cell.column.id === 'actions'">
                                  <div class="gap-2 text-right">
                                     <button aria-label="Show" class="saveButton btn btn-outline btn-primary"
-                                       @click="viewRow(cell.row)">Open</button>
+                                       @click="viewRow(cell.row)">Modify</button>
                                     <!-- <button
                                              aria-label="Show"
                                              class="btn btn-soft btn-xs btn-square"
diff --git a/db/.DS_Store b/db/.DS_Store
index d6826beb70771bf5033bada392f239b196384a35..a2059853a14a46e155f2e236d610613170e53186 100644
GIT binary patch
delta 18
acmZoMXfc?uV&ldz_K6Lgo7p-3@&f=#eg{YZ

delta 20
ccmZoMXfc?uf{}6K#xVAY4IG=<IsWnk08Z5hNdN!<

diff --git "a/db/Icon\r" "b/db/Icon\r"
new file mode 100644
index 0000000..e69de29
diff --git "a/db/presence/Icon\r" "b/db/presence/Icon\r"
new file mode 100644
index 0000000..e69de29
diff --git "a/db/reslevis/Icon\r" "b/db/reslevis/Icon\r"
new file mode 100644
index 0000000..e69de29
diff --git a/db/reslevis/Setting.json b/db/reslevis/Setting.json
index 1e7ace1..196cd40 100644
--- a/db/reslevis/Setting.json
+++ b/db/reslevis/Setting.json
@@ -5,20 +5,27 @@
       "role": "developer",
       "unit": 1,
       "update": 5000,
-      "debug": true
+      "debug": true,
+      "debugFields": [
+         "id",
+         "status"
+      ],
+      "language": "en"
    },
    {
       "id": "900000000002",
       "name": "Administrator settings",
       "role": "administrator",
       "unit": 1,
-      "debug": false
+      "debug": false,
+      "language": "en"
    },
    {
       "id": "900000000003",
       "name": "User settings",
       "role": "user",
       "unit": 1,
-      "debug": false
+      "debug": false,
+      "language": "en"
    }
 ]
\ No newline at end of file
diff --git "a/db/reslevis/Track/Icon\r" "b/db/reslevis/Track/Icon\r"
new file mode 100644
index 0000000..e69de29
diff --git a/err.json b/err.json
new file mode 100644
index 0000000..723a0d2
--- /dev/null
+++ b/err.json
@@ -0,0 +1,22 @@
+{
+   "detail": [
+      {
+         "type": "missing",
+         "loc": [
+            "body",
+            "tracker"
+         ],
+         "msg": "Field required",
+         "input": {
+            "id": "b77508ac-dfc7-4171-bae0-7a986cc8bb94",
+            "name": "SubjectTest",
+            "role": "",
+            "phone": "",
+            "zones": "",
+            "groups": "",
+            "building": "665267c5-b466-4351-a27f-044ee24c0ccb",
+            "notes": ""
+         }
+      }
+   ]
+}
\ No newline at end of file
diff --git a/jsonic/.DS_Store b/jsonic/.DS_Store
index ba3b77f6a8c3248a9cea646d67980a85d45fcca5..e861d1f3d33fc19417ad2cb4913e2f7f6095a495 100644
GIT binary patch
delta 350
zcmZoMXfc=|#>B)qF;R?_gMop8V`8F+EEA9c0?a_n$iN`Lkd%|31Z3|>D#*#)n7Ev=
z9wfuWki}4(R9;+wEL&V+U~r9*iJ66!jh&s7otr&2I3vG2xFoTpwAd-JC>q2I$<NP8
zg0T~m!ZK6K;{`;V^Ycm)GxJi5z#1}BQh`ch!ZY(y^2?p_OY>5S!Fq$i67@x#oE)6-
z0ut5LMi!Pj3Pu*SIttZ>h9-tO3YNy^wY8iaqRRT#LGjr+xq10rK*s_BBhV{gzzd~e
zR5y?T_DorDQC?1dUOJEuQp?Ve%aG5I!cfYP!;s2QoKl>elLT}+P-bJwKbFY`A}pJ^
gIk-81p|>&dJM(0I5k*!|$SF)V6p`K>AhLxS07x2DbN~PV

delta 109
zcmZoMXfc=|#>AjHu~68Ek%57Mi6M)jIHfo_Cn-Na2P6OmOi&sm1jGUiVEN60%->ix
nD==?i+RV<u&jB<CDDs_oGQWr-CrD)iNY`W&9_7t3A}g2yCoL0%

diff --git "a/jsonic/Icon\r" "b/jsonic/Icon\r"
new file mode 100644
index 0000000..e69de29
diff --git "a/jsonic/images/Icon\r" "b/jsonic/images/Icon\r"
new file mode 100644
index 0000000..e69de29
diff --git "a/jsonic/images/flags/Icon\r" "b/jsonic/images/flags/Icon\r"
new file mode 100644
index 0000000..e69de29
diff --git "a/jsonic/images/langs/Icon\r" "b/jsonic/images/langs/Icon\r"
new file mode 100644
index 0000000..e69de29
diff --git "a/jsonic/js/Icon\r" "b/jsonic/js/Icon\r"
new file mode 100644
index 0000000..e69de29
diff --git a/jsonic/js/jsonic.1.0.13 copia.js b/jsonic/js/jsonic.1.0.13 copia.js
new file mode 100644
index 0000000..d321526
--- /dev/null
+++ b/jsonic/js/jsonic.1.0.13 copia.js	
@@ -0,0 +1,16029 @@
+/*-----------------------------
+    JSONIC V. 1.0.13
+    jsonic.io  
+-------------------------------*/
+
+// CHANGELOG
+
+// 1.0.13 jsonApp removed; [replaceProperties: include event properties]
+// 1.0.12 jsonApp; if is array option
+// 1.0.11 block blocks -> parts
+// 1.0.10 for: {name} work also with {value:name with path} (function replaceValue)
+// 1.0.8 for: {name} replaced with {value:name} 
+// 1.0.5 set: if array of, the assignments follow the order
+// 1.0.4 deprecated: to assign without set (too ambiguous now that the key can be function, window.function, etc) 
+// 1.0.3 "x": "2*3" if the value is a string, -> self.js(value)
+// 1.0.2 plugins ondemand
+// 1.0.1 jsonc support
+// 1.0.0 FUNCTIONS
+// 0.9.9 RESOURCES: Inside modules (resources will be deprecated) 
+// 0.9.3 DEBUG: Rimosso break in docElement
+// 0.9.4 NOTE: In this.nested, commented and decommented nested.animate = partObj.animate; nested.if partObj.if, ...
+// 0.9.5 CLASS: "div btn": "content" = <div class="btn">content</div>
+// 0.9.6 DEBUG: in this.createElement newSelector (newSelector should be a dedicated function separated from selector)
+// 0.9.7 REMOVE: method to remove an element from the DOM / Restored html {attr} to set the attributes of an element
+
+// https://minify-js.com Input: 624.1 kB; Output: 95.46 kB; Compression: 84.7%, saving: 528.64 kB;
+
+// README
+
+// PRIORITY
+
+// in attr -> addStyle / removeStyle 
+// instead of shortcuts the user can use {data shortcuts}
+// {arguments:value|default} -> ({arguments:value}) ? {arguments:value} : default
+// use (typeof id == "undefined") to understand if id is defined and is = 0
+// css should call defineCss in any part of code
+// attr (addClass, removeClass, changeStyle direct methods?) can be changed (in element?) to avoid confusion with the use inside html
+// add remove element from array
+// debug of "set" key
+// can be useful to define pointers (shortcode/path of the objects)
+// https://dev.to/ternentdotdev/json-compression-in-the-browser-with-gzip-and-the-compression-streams-api-4135
+// a method to append an image to the DOM in base64 format <image xlink:href="data:image/png;base64,...
+// after (ms) can be a standard parameter (like selector) very useful
+// BUG: if {arguments:id} is undefined gives "undefined"
+// try to replace Snap.load with fetch
+// selctor, if string, should return querySelectorAll
+// find element.getAttribute('data-selector') and replace with self.elementToSelector(value). Then change queryAll
+// // it let to select more than one element cardColorDark
+// in self.pluginsLoadedQueue add the actions to do when the plugin is loaded
+// notUndefined può essere migliorato per "if" e per considerare vera la stringa se presente (ma va considerato '0' e 0)
+// for name=i, if i is an object, can use {i:node1} but not {i:node1.node2}ì. Workaround is to assign i to a var
+// so a possible solution is to use "var" parameter
+// functions (js like) -> methods? no
+// check this.html notes
+// anime can be a part/block/key function? called with "ui:anime" asking for the relative plugin?
+// if the name of the block/part includes ":" it is more explicit
+// blocks or parts or keys or nodes?
+// parts -> blocks considering jsblocks.com?
+// Dynamic modules loading? What if we ask for a node that is in the main modules?
+
+// remove console from methods and add log in browser functions
+
+// add log of the error if the app or json module is not in json format
+// init, run, start -> do
+// if selector is an array, repeat the action (do)
+// think about html/do. Is it possible to avoid html object? Any unknown object is an html tag
+// in parts, {setup:on.success} or {setup:config.color} doesn't work
+// setup -> arguments
+// part ui:icon: {selector:, config:} can be a js function () {var part = {}; self.run(config); }
+// {arguments[0] arguments[1]. {1.setup}   }
+// improve shortcuts (in extendJsonFromElement and in attr)
+// this.text -> this.content
+// html attribute of html method -> content (should be an html but can be multilingual)
+// property validation like the sintax (\w[\w+d+]) of the "name" in the "for" method )
+// default "html" al posto di "text": ogni contenuto testuale viene inserito con innerHTML anziché innerTEXT 
+// html [] tipo array e  "" stringa (innerHTML) ok, html {} deprecato
+// "p": "text" -> p.innerTHTML('text')
+// "p": [] -> se item è oggetto -> htmlTag, se stringa dovrebbe fare append della stringa html sempre nello p. Ora invece crea più p.innerText
+// ADD: append. empty true fixed on html
+/* 
+1 page -> url (method and property)
+2 dynamic class with ternary condition
+3 swal button style
+4 components copy bugs
+5 installation guide
+6 self.page -> not the variable but the real window path and window hash (can be jsonic.url)
+7 page -> url
+8 "roles" -> "only"
+9 add localStorage actions -> ANY WINDOW method
+10 add dataStorage
+10 in parts {string} instead of {value} ?
+11 on load image solution (should already work on: load -> animate -> fadein)
+ */
+
+// BUGS
+
+// BUG from Tailwind 3.3.2
+// Sembra richiesto tailwind nel plugin Jsonic e non caricato dinamicamente come su eliokit.com
+// Different rendering width or without spaces after commans "alert": " {js:(1 == 2) ? \"test\" : \"false condition\"} "
+
+
+
+// HOW IT WORKS
+// loadModules -> loadPlugins -> Run
+
+// KNOWN BUGS
+
+// in museomira.it cerca "socialIcons", rimuovendo data-value l'icona finisce dentro contatti perché il newSelector è a:eq(5) 
+// è necesario creare una funzione selector destinata ai nuovi elementi
+
+// PARTS
+
+// 1. Responsive header menu
+// 2. Alert
+// 3. Slide
+// 4. Form 
+// 5. Table
+
+// GOAL
+
+// Reduce custom js code in Jsonic and move the functions in modules
+// Requires an extension of js method to make it more flexible
+// js {function: String, params: Array}
+
+// TO DO
+
+// inline use: data-jsonic -> jsonic.run(data-jsonic, selector); (es. in body)
+// init = run (or play)
+// in parts {setup} should get subreferences link {setup:on.success}
+// i plugins possono includere direttamente l'url
+// la gestione dei plugin dovrebbe essere centralizzata (riferimento a jsonic e non all'oggetto)
+// si potrebbe definire la distinsione tra oggetti specifici e oggetti globali (jsonic)
+// verificare se oggetto function con {name: , params: []} è assegnabile a variabili
+// addClass, removeClass etc with array
+// change the behaviour of p: [] become a a list of content, not a list of p
+// to do it, search and change "div": [   "p": [   "span": [   "li": [   "button": [   
+// hypothesis (no, more complete with actions): class="ui:button{text:#333;bg:#fff}" -> bg-[white] text-[#333] hover:bg-[#fff] hover:text-[white]
+// OPTIMIZATION: pluginsRequiredByTag only for self.json.resources.pluginsFunctions keys or better only for parts that requires plugins. alert -> ui:alert
+// getJSON: load json (id: exampleApp, url: ...), success-> {getJSON:exampleApp}
+// Ajax: load ajax (id: exampleApp, url: ...), success-> {ajax:exampleApp}
+// DOM: queryAll(selector) -> value is string, el.before(value) and all the other methods of an element of the dom
+// properties {dom:title}
+// https://www.w3schools.com/jsref/dom_obj_all.asp
+// DOCUMENT
+// https://www.w3schools.com/jsref/dom_obj_document.asp
+// {document: {title: 'test'}}
+// properties {document:title}
+// ON: https://www.w3schools.com/jsref/dom_obj_event.asp
+// "selector" can be "query" / no selector recalls querySelector
+// or APPEND/PREPEND
+// https://registry.npmjs.com/-/v1/search?text=tailwindcss&size=1
+//https://api.npms.io/v2/package/tailwindcss
+// https://api-docs.npms.io
+
+/* 
+TO DO
+
+1. ajax call with an id to identify the data in case of simultaneous requests
+1. database path should be separated by spaces (or slashes)
+
+replaceProperties default:
+
+check if
+
+if p1 is a function, if p2 -> value = p1(p2), if p3 -> value = p1(p2(p3))
+if p1 is a value, and not p2, value = p1
+
+self.methods[p1] or... 
+p1 is a function
+
+
+{alert:string}
+{window.f}
+{window f1:window f2:window x}  = window.f1(window.f2(window.x))
+
+{querySelector:'.class':append} = window.f(jsonic.json.var.x)
+
+ESEMPI
+
+{new Date:'December 17, 1995 03:24:00'}
+{new Date().getDay}
+{console.log:'test'}
+{window.innerHeight} invece di {window:innerHeight} (specifica) o {js:window.innerHeight} 
+
+il vantaggio di questo schema è che si evita un livello di parentesi annidate
+quando sono coinvolte variabili jsonic:
+{querySelector:var obj x:append}
+che puo diventare
+{querySelector:var {item} x:append}
+LIMITE
+questo metodo preclude l'accesso ad eventuali oggetti javascript var o data
+SOLUZIONE
+in realtà, var e data devono essere elementi definiti nel json
+altrimenti non sono trovati dall'interprete che può vagliare l'esistenza
+di una funzione js
+
+{path to a data} is a reference to a value in the data node of the Jsonic app
+if the action context (do)
+{path to an action} is a reference to a method or a sub app in the "parts" node of the Jsonic app
+if the html rendering context (html)
+
+{window.f:var x} = window.f(jsonic.json.var.x)
+{window.f:num} if is number
+{window.f:array} if isArray (more than one parameter)
+{window.f:'string'}
+
+{jsonic.f:var x}
+
+do: [
+    "functionName": [] // parameters
+]
+
+check if functionName is a function
+html tags can't have a space or points...
+
+Align with ELIO Language: 
+1. "if": {"is": ["a", "=", "b","and"...] (retrocompatibile: se is è un array...)
+2. "set": ["a", "+=", "1","*", "3"...] (retrocompatibile: se set è un array...)
+3. "div classes": ...
+
+CODE REDUCING
+
+1. string in "html" object that starts with a tag and continue with classes
+
+"html": [
+    "span appsDeviceListName ms-2 me-2 text-[16px] text-left w-[80%] leading-tight|content"
+]
+
+NOTES
+
+// datapicker and other input fiels now are native https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date
+
+COMPONENTS
+
+MONACO TAILWINDCSS AUTOCOMPLETE (check Tailwindcss VS Code extensions)
+https://github.com/remcohaszing/monaco-tailwindcss
+
+
+FIREBASE STRUCTURE DATA
+
+If you create your own keys, they must be UTF-8 encoded, can be a maximum of 768 bytes, and cannot contain ., $, #, [, ], /, or ASCII control characters 0-31 or 127. You cannot use ASCII control characters in the values themselves, either.
+
+24.4KB gzipped (85.24KB minified)
+25.2KB minified + gzipped in 100ms
+
+65ms 3G 3 Mbps (375 KBs)
+10ms 4G 20 Mbps (2,5 MBs)
+<1ms 5G/Fiber 200 Mbps (25 MBs)
+
+TEST
+
+tailwindcss
+104 KB  105 ms
+
+INTEGRATIONS:
+https://b2bsaasleads.com
+
+NEW PLUGINS:
+
+http://jakim.me/Toasty.js/
+https://tingle.robinparisi.com
+
+GUIDE:
+
+COMPONENTS: reusable components / architectural philosophy
+ENGINE, (no hidden code) all the parts of the app is exposed to the developer / can set the layout and the behaviour
+JSON E' il modello di struttura ad albero usato da JSONIC per descrivere i dati, lo stile, e le azioni dell'applicazione
+SHORTCUTS: combinations of utility names (classes) to reuse in "class" property (from WindiCSS)
+ // preloaded js/css plugins
+
+{
+    "attr": {
+        "class": "py-2 text-center"
+    },
+    "subTitle": {
+        "lang": {
+            "it": "L'albero JSON dell'app può contenere i seguenti rami principali:",
+            "en": "The JSON app tree may contain the following main branches:",
+            "es": "El árbol de la aplicación JSON puede contener los siguientes ramas principales:"
+        }
+    }
+},		
+
+
+PROPERTIES
+
+With {property}, a string delimited by braces you can refer to any sub-branch the app tree and special properties.
+
+-----------------------
+HOME PARAGRAPHS
+-----------------------
+
+AUTO-LOADED PLUGINS
+
+NESTED CSS
+
+HTML has a clear nested and visual hierarchy but CSS doesn't. JSONIC let you nest your CSS definitions in a way that follows the same visual hierarchy of your HTML. It's similar to the SAAS extension but without the need to compile the code. In modo simile al linguaggio SAAS, è necessario compilare il codice
+
+
+ // BP
+ Questo dimostra che c'è bisogno di semplificazione più di quanto non si possa pensare
+
+IDE
+
+Special char (or shortener or autocomplete) with &lbrace; &rbrace; etcetera)
+
+ 
+PRIORITY: 
+
+tags:
+
+button: "title"
+or
+button: {
+    text: title
+    color: color
+    on: ...
+}
+
+buttonOutline: {
+    text: title
+    color: color
+    on: ...
+}
+
+------------------------
+qualunque metodo:
+[
+    {"path": args},
+    {"path": args}
+    {"path": args}
+]
+------------------------
+
+
+DEBUG
+class must be a string otherwise log error
+style in attr must work (now error)
+
+
+CONFIG (now setup)
+extend the main branch {b:config}
+
+ACTIONS (now parts)
+extend the main branch {b:actions}
+
+DO
+execute one or an array of functions
+"do": "actionID" (string) execute the actions.actionID function
+
+CONTAINER (now selector)
+change the context to the element {b:container}
+Can be an object like {id, class, data-value}
+or a string with a CSS selector like "body > div:nt-child(2)"
+or a jquery-like selector like "body > div:eq(2)"
+
+------------------------
+
+bootstrap menu -> tailwind
+
+------------------------
+
+
+IDEAS
+
+- share the modules in the object "jsonic" with the other jsonic objects in the page
+- jsonic.registerJsMethod(name, function) register new js method to be inserted in jsonic.methods and called with "method": {params}
+- choose can contain the methods "next":"1" / "previous":"1" or step "+1"/"-1"
+- calendar can return the object {lang: {...}}
+- self.js can be embedded in self.compile (if typeof params == 'string')
+- Page doesn't exist / if admin / want to create it?
+- if no jsonic file for the page, create it on save
+
+- AUTH (debug) + GITHUB
+
+- preload font flag
+- IDE: Wordpress API new page
+- window methods in (docs)
+- for -> addTag (?)
+- setup: form to set setup properties
+- Method ARRAY
+
+"array": {
+"push": "{var:num}" (pop, shift, unshift, length)
+
+DONE:
+
+remove JSONIC references: jsonic.firebaseEventAction / jsonic.resizeEvent
+- HOME: docs / examples / integrations
+- wordpress: access to media API
+- iconify
+- iconify remove SVG old
+- colors -> setup (mmm) (like logo)
+- styles -> css -> senza categorie, solo elements '#div'  -> https://transform.tools/css-to-js DONE
+}
+
+BUGS:
+- version è necessario in pluginsFunctions
+- shortcut as a node: attr / class values doesn't overwrite the shortcut
+
+WORDPRESS:
+
+(_embed to your URL will add the wp:featuremedia)
+https://jsonic.io/wp-json/wp/v2/media?&context=embed&per_page=100
+https://jsonic.io/wp-json/wp/v2/media?&context=embed&after=2017-11-07T00:00:00
+https://jsonic.io/wp-json/wp/v2/media?include=1681,491
+
+// https://github.com/schlosser/pig.js
+
+NOTE:
+
+- autoupdate only if the previous update is complete (we need a param in config complete:true/false)
+- Play (create your app!)
+- add a tag in menu buttons ?
+- inViewport -> 'enter'/'exit' ?
+- inViewport solo la prima volta?
+- ('on': 'in'/out NO) confirm 'init'? 
+- IDE: backup timeline
+- duplicato di this.selector dedicata a ottenere il selector di un nuovo elemento (su append e poco altro)
+- col: [1,2,3] -> row with col1 col2 col3 ? or tailwind grid solution (ragionare su soluzione di tag. esempio: flex: [])
+- in examples, test in posizione assoluta sul codice (utile su mobile)
+
+KEY BENEFITS
+
+- Integration (Jsonic code includes the logic, the layout and the style of the app on in one JSON object)
+- Accelerator
+
+*/
+
+// JQUERY to Vanilla: https://youmightnotneedjquery.com | http://vanilla-js.com
+// Jquery plus: https://atypiccraft.com/insights/reasons-why-we-still-use-jquery
+// https://cyrilletuzi.github.io/javascript-guides/jquery-to-javascript.html
+// Tools to integrate: https://bestofjs.org/tags
+// MINIFY: https://closure-compiler.appspot.com/home
+// https://api.giphy.com/v1/gifs/random?api_key=dc6zaTOxFJmzC&tag=cat
+
+// INTEGRATIONS
+
+// https://www.dropzone.dev/js/
+// uploadcare
+// zaiper
+
+// a graph js tool
+
+// anime.js
+// transition.style // analogo ad animate.style
+
+/* There were issues affecting this run of Lighthouse:
+
+There may be stored data affecting loading performance in this location: IndexedDB. Audit this page in an incognito window to prevent those resources from affecting your scores.
+
+// UI
+
+https://windicss.org/play.html
+https://basscss.com
+https://twind.dev
+https://emotion.sh/docs/introduction
+https://cssinjs.org/?v=v10.8.2
+
+https://picturepan2.github.io/spectre/
+https://get.foundation
+https://ant.design/
+https://purecss.io
+https://onsen.io/
+https://shuffle.dev/
+*/
+
+//{"type": "js", "url":"https://cdn.jsdelivr.net/npm/tailwindcss@{version}/lib/index.min.js"},
+
+
+//$.fn.jsonic = function(options) {return new jsonicObject(options);};
+//jsonicApp = function(options) {return new jsonicObject(options);};
+
+
+var jsonAppObj = function(options) {
+
+    var self = this;
+    console.log();
+
+    //this.options = options;
+    /* var json = {  // the jsonic app tree
+        setup: {},
+        blocks: {}, // to be removed
+        parts: {},
+        // plugins: {}, // TO DO: remove the error if included
+        // css: {},
+        do: {},
+        on: {},
+        shortcuts: {},
+        texts: {},
+        data: {},
+        var: {}
+    }; */
+    //var var = json.var;
+    //this.setup = json.setup;
+    // for external access
+    this.json = {
+        setup: {},
+        blocks: {}, // to be removed
+        parts: {},
+        // plugins: {}, // TO DO: remove the error if included
+        // css: {},
+        functions: {},
+        do: {},
+        on: {},
+        shortcuts: {},
+        texts: {},
+        data: {},
+        var: {}
+    };
+    this.app = this.json;
+
+    //var json = self.json; // TO DO: remove
+    var alertObj = {};
+    var alertValues = {};
+    this.params = {}; // maybe can be removed
+
+    this.javascriptReservedWord = ['abstract', 'arguments', 'await', 'boolean', 'break', 'byte', 'case', 'catch', 'char', 'class', 'const', 'continue', 'debugger', 'default', 'delete', 'do', 'double', 'else', 'enum', 'eval', 'export', 'extends', 'false', 'final', 'finally', 'float', 'for', 'function', 'goto', 'if', 'implements', 'import', 'in', 'instanceof', 'int', 'interface', 'let', 'long', 'native', 'new', 'null', 'package', 'private', 'protected', 'public', 'return', 'short', 'static', 'super', 'switch', 'synchronized', 'this', 'throw', 'throws', 'transient', 'true', 'try', 'typeof', 'var', 'void', 'volatile', 'while', 'with', 'yield', 'Array', 'Date', 'eval', 'function', 'hasOwnProperty', 'Infinity', 'isFinite', 'isNaN', 'isPrototypeOf', 'length', 'Math', 'NaN', 'name', 'Number', 'Object', 'prototype', 'String', 'toString', 'undefined', 'valueOf', 'getClass', 'java', 'JavaArray', 'javaClass', 'JavaObject', 'JavaPackage', 'alert', 'all', 'anchor', 'anchors', 'area', 'assign', 'blur', 'button', 'checkbox', 'clearInterval', 'clearTimeout', 'clientInformation', 'close', 'closed', 'confirm', 'constructor', 'crypto', 'decodeURI', 'decodeURIComponent', 'defaultStatus', 'document', 'element', 'elements', 'embed', 'embeds', 'encodeURI', 'encodeURIComponent', 'escape', 'event', 'fileUpload', 'focus', 'form', 'forms', 'frame', 'innerHeight', 'innerWidth', 'layer', 'layers', 'link', 'location', 'mimeTypes', 'navigate', 'navigator', 'frames', 'frameRate', 'hidden', 'history', 'image', 'images', 'offscreenBuffering', 'open', 'opener', 'option', 'outerHeight', 'outerWidth', 'packages', 'pageXOffset', 'pageYOffset', 'parent', 'parseFloat', 'parseInt', 'password', 'pkcs11', 'plugin', 'prompt', 'propertyIsEnum', 'radio', 'reset', 'screenX', 'screenY', 'scroll', 'secure', 'select', 'self', 'setInterval', 'setTimeout', 'status', 'submit', 'taint', 'text', 'textarea', 'top', 'unescape', 'untaint', 'window', 'onblur', 'onclick', 'onerror', 'onfocus', 'onkeydown', 'onkeypress', 'onkeyup', 'onmouseover', 'onload', 'onmouseup', 'onmousedown', 'onsubmit'];
+    // Source: https://www.w3schools.com/js/js_reserved.asp
+    var nodes = {
+        //parts: ['text', 'div', 'ul', 'p', 'a', 'button', 'input', 'span', 'img', 'video', 'audio', 'source', 'figure', 'figcaption', 'textarea', 'iframe', 'table', 'thead', 'tbody', 'tfoot', 'tr', 'th', 'td', 'svg', 'path', 'g', 'd', 'polygon', 'circle', 'small', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'form', 'form-group', 'label', 'select', 'option', 'optgroup', 'nav', 'tab', 'header', 'main', 'footer', 'ide', 'model-viewer', 'i', 'icon', 'pre', 'code','animateMotion','animateTransform','circle','clipPath','defs','desc','discard','ellipse','feBlend','feColorMatrix','feComponentTransfer','feComposite','feConvolveMatrix','feDiffuseLighting','feDisplacementMap','feDistantLight','feDropShadow','feFlood','feFuncA','feFuncB','feFuncG','feFuncR','feGaussianBlur','feImage','feMerge','feMergeNode','feMorphology','feOffset','fePointLight','feSpecularLighting','feSpotLight','feTile','feTurbulence','filter','foreignObject','g','hatch','hatchpath','image','line','linearGradient','marker','mask','metadata','mpath','path','pattern','polygon','polyline','radialGradient','rect','script','set','stop','switch','symbol','text','textPath','title','tspan','use','view'],
+        //functions: ['do', 'function', 'for', 'run', 'module', 'page', 'html', 'text', 'empty', 'alert', 'blocks', 'attr', 'color', 'set', 'array', 'replace', 'var', 'js', 'javascript', 'if', 'switch', 'choose', 'delay', 'ajax', 'hide', 'show', 'toggle', 'in', 'out', 'link', 'scroll', 'lang', 'find', 'data', 'reload', 'calendar', 'moment', 'dayjs', 'log', 'setInterval', 'clearInterval', 'offcanvas', 'firebase', 'database', 'qrcode', 'editor', 'ace', 'code', 'thunkable', 'animate', 'sortablejs', 'uiUpdate'], // 'String', 'Number', 'Math', 
+        //functionsWithContainer: ['for', 'editor', 'ace', 'code', 'qrcode', 'lottie', 'animate', 'html', 'hide', 'show', 'toggle', 'in', 'out', 'if', 'ajax', 'attr', 'run', 'delay'],
+        // not execute
+        extend: ['setup', 'blocks', 'parts', 'css', 'actions', 'texts', 'data', 'functions'], // also plugins? (TO DO: remove actions)
+        params: ['style', 'on', 'matchMedia', 'action', 'code', 'roles', 'plugins', 'css'], // 'if', 'attr', 'text'. 'html'
+        exclude: ['setup', 'container', 'selector', 'info', 'note', 'comment', 'lang', 'tag', 'plugins', 'template']
+    };
+
+    /*
+        * Converts a JSON object to a JSON Schema
+        * @param {any} json
+        * @param {object} options
+        * @returns {object} a json schema
+    */
+    // [{"name": "vito", "gallery": {"name":2, "date":"10-10-2012"}, "num":3, "bool":true, "color": "#ff0000"}]
+    const FORMAT_REGEX = {
+        email: /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/,
+        url: /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/,
+        ip: /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/,
+        // J. Meijer / Stackoverflow / 15491894
+        date: /^(?:(?:31(\/|-|\.)(?:0?[13578]|1[02]))\1|(?:(?:29|30)(\/|-|\.)(?:0?[13-9]|1[0-2])\2))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:29(\/|-|\.)0?2\3(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1\d|2[0-8])(\/|-|\.)(?:(?:0?[1-9])|(?:1[0-2]))\4(?:(?:1[6-9]|[2-9]\d)?\d{2})$/,
+        // Joey / Stackoverflow / 1636350
+        color: /^#(?:[0-9a-fA-F]{3}){1,2}$|#(?:[0-9a-fA-F]{3,4}){1,2}$/,
+    };
+
+    this.jsonToSchema = function (json, options = {}) {
+        // https://github.com/mohsen1/json-to-json-schema
+        if (typeof json === 'function') {
+            throw new TypeError('Can not convert a function');
+        }
+
+        if (json === undefined) {
+            return {};
+        }
+
+        // primitives
+        if (typeof json === 'string') {
+
+            if (FORMAT_REGEX.url.test(json)) return { type: 'string', format: 'url' };
+            else if (FORMAT_REGEX.email.test(json)) return { type: 'string', format: 'email' };
+            else if (FORMAT_REGEX.ip.test(json)) return { type: 'string', format: 'ip' };
+            else if (FORMAT_REGEX.date.test(json)) return { type: 'string', format: 'date' };
+            else if (FORMAT_REGEX.color.test(json)) return { type: 'string', format: 'color' };
+            else return { type: 'string' };
+        }
+
+        else if (typeof json === 'boolean') return { type: 'boolean' };
+
+        else if (typeof json === 'number') {
+            if (Number.isInteger(json)) {
+                return { type: 'integer' };
+            } else {
+                return { type: 'number' };
+            }
+        }
+
+        else if (Array.isArray(json)) {
+            let schema = { type: 'array' };
+
+            if (!json.length) {
+                schema.items = {};
+                return schema;
+            }
+
+            let schemas = json.map(self.jsonToSchema);
+
+            // if all schemas are the same use that schema for items
+            if (schemas.every(s => self.isEqual(s, schemas[0]))) {
+                schema.items = schemas[0];
+
+                // if there are multiple schemas use oneOf
+            } else {
+                schema.items = { oneOf: unique(schemas) };
+            }
+
+            return schema;
+        }
+
+        if (json === null) {
+            return { type: 'null' };
+        }
+
+        let schema = { type: 'object' };
+
+        if (!Object.keys(json).length) {
+            return schema;
+        }
+
+        schema.properties = Object.keys(json).reduce((properties, key) => {
+            properties[key] = self.jsonToSchema(json[key]);
+            return properties;
+        }, {});
+
+        return schema;
+    };
+
+    this.isEqual = function (a, b) {
+        return (JSON.stringify(a) == JSON.stringify(b));
+    };
+
+
+    //var canvasElement = document.getElementById("canvas");
+    // * this is not important for PDFMake, it's here just to render the result *
+    // It's a Mozilla lib called PDFjs that handles pdf rendering directly on the browser
+    /* this.pdfjs = function (params, selectorParams) {
+    
+        var url = params.url;
+        var options = params.options || { scale: 1.4 };
+        let container = self.selector(params.selector || params.container) || self.selector(selectorParams);
+        var canvasContainer = self.query(container);
+
+        function renderPage(page) {
+            var viewport = page.getViewport(options.scale);
+            var wrapper = document.createElement("div");
+            wrapper.className = "canvas-wrapper";
+            var canvas = document.createElement('canvas');
+            var ctx = canvas.getContext('2d');
+            var renderContext = {
+                canvasContext: ctx,
+                viewport: viewport
+            };
+            
+            canvas.height = viewport.height;
+            canvas.width = viewport.width;
+            wrapper.appendChild(canvas)
+            canvasContainer.appendChild(wrapper);
+            
+            page.render(renderContext);
+        }
+        
+        function renderPages(pdfDoc) {
+            for(var num = 1; num <= pdfDoc.numPages; num++)
+                pdfDoc.getPage(num).then(renderPage);
+        }
+    
+        PDFJS.disableWorker = true;
+        PDFJS.getDocument(url).then(renderPages);
+    
+    } */
+    //renderPDF('https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf', document.querySelector('#canvas'));
+    /* this.localStorage = function (params) {
+        // -> use self.method
+        if (params.getItem) return localStorage.getItem(params.get);
+        else if (params.setItem) return localStorage.setItem(params.setItem.name, params.setItem.value);
+    } */
+    // UTILITY
+    /** A storage solution aimed at replacing jQuerys data function.
+     * Implementation Note: Elements are stored in a (WeakMap)[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap].
+     * This makes sure the data is garbage collected when the node is removed.
+     */
+    this.dataStorage = {
+        _storage: new WeakMap(),
+        set: function (element, key, obj) {
+            if (!this._storage.has(element)) {
+                this._storage.set(element, new Map());
+            }
+            this._storage.get(element).set(key, obj);
+        },
+        get: function (element, key) {
+            return this._storage.get(element).get(key);
+        },
+        has: function (element, key) {
+            return this._storage.has(element) && this._storage.get(element).has(key);
+        },
+        remove: function (element, key) {
+            var ret = this._storage.get(element).delete(key);
+            if (!this._storage.get(element).size === 0) {
+                this._storage.delete(element);
+            }
+            return ret;
+        }
+    };
+
+    // JQUERY cross-over
+    this.extend = function (out) {
+
+        if (typeof arguments[0] == 'boolean' && arguments[0] == true)
+            return deepExtend(out);
+        else {
+            out = out || {};
+
+            for (var i = 1; i < arguments.length; i++) {
+                if (!arguments[i])
+                    continue;
+
+                for (var key in arguments[i]) {
+                    if (arguments[i].hasOwnProperty(key))
+                        out[key] = arguments[i][key];
+                }
+            }
+            return out;
+        }
+    };
+
+    var deepExtend = function (out) {
+        out = out || {};
+
+        for (var i = 1; i < arguments.length; i++) {
+            var obj = arguments[i];
+
+            if (!obj) continue;
+
+            for (var key in obj) {
+                if (obj.hasOwnProperty(key)) {
+                    if (typeof obj[key] === "object" && obj[key] !== null) {
+                        if (obj[key] instanceof Array) out[key] = obj[key].slice(0);
+                        else out[key] = deepExtend(out[key], obj[key]);
+                    } else out[key] = obj[key];
+                }
+            }
+        }
+
+        return out;
+    };
+
+    /*     this.actionResult = function(value, args) { // value -> params
+    
+            // Methods with a result
+        
+            if (value && typeof value == 'object') {
+    
+                    // jsonic methods
+                    if (value.js) {
+                        return self.js(value.js, args);
+                    } else if (value.array) {
+                        return self.array(value.array, args);
+                    } else if (value.calendar) {
+                        return self.calendar(value.calendar, args);
+                    } else if (value.data) {
+                        return self.data(value.data, args);
+                    } else if (value.var) {
+                        return self.var(value.var, args);
+                    } else if (value.module) {
+                        return self.module(value.module, args);
+                    } else if (value.color) {
+                        return self.color(value.color, args);
+                    } else if (value.css) {
+                        return self.css(value.css, undefined, args);
+                    } else if (value.if) {
+                        return self.if(value.if, undefined, args);
+                    } else if (value.switch) {
+                        return self.switch(value.switch, args);
+                    } else if (value.database) {
+                        return self.database(value.database, args);
+                    // js methods
+                    } else if (value.Math) {
+                        return self.Math(value.Math, args);
+                    } else if (value.Number) {
+                        return self.Number(value.Number, args);
+                    } else if (value.String) {
+                        return self.String(value.String, args);
+                    // plugin methods
+                    } else if (value.ace) {
+                        return self.ace(value.ace, args);
+                    // else if (value.code) {
+                    //    return self.code(value.code, args);
+                    } else if (value.moment) {
+                        return self.moment(value.moment, args);
+                    } else if (value.dayjs) {
+                        return self.dayjs(value.dayjs, args);
+                    } else if (value.function) { // TO DO: remove (replaced by do)
+                        return self.function(value.function, value.params);
+                    } else {
+                        return value;
+                    }
+            } else {
+                return value
+            }
+            //} else if (typeof value == 'string') {
+            //    return self.javascript(value, args);
+    
+        } */
+    this.var = function (params, args) {
+
+
+        if (Array.isArray(params)) {
+            for (var index in params)
+                self.var(params[index], args);
+        } else {
+
+            //self.log('var');
+            var name;
+            var value;
+            var varValue;
+
+            if (params.path && !params.name)
+                name = self.path(params.path, args, '.');
+
+            if (typeof params == 'string') {
+                // gives a variable value
+                name = self.replaceProperties(params, args);
+                /* self.log('name');
+                self.log(name); */
+                /* self.log('typeof params == string');
+                self.log('params');
+                self.log(params);
+                self.log('name');
+                self.log(params); */
+                varValue = self.docElement('self.json.var.' + name);
+
+                /* self.log('varValue');
+                self.log(varValue); */
+            } else {
+
+                /* self.log('var');
+                self.log('params');
+                self.log(params);
+                self.log('args');
+                self.log(args);  */
+                //self.log('params');
+                //self.log(params);
+                var paramsReplaced = self.replaceProperties(params, args);
+                //self.log('paramsReplaced');
+                //self.log(paramsReplaced);
+                name = paramsReplaced.name;
+                value = paramsReplaced.value;
+                var operator = paramsReplaced.operator;
+                var type = paramsReplaced.type;
+
+                /* self.log('extend');
+                self.log(extend); */
+                if (name) {
+                    var pathString = 'self.json.var.' + name;
+                    var pathLast = pathString.substr(pathString.lastIndexOf(".") + 1);
+                    var pathBase = pathString.substr(0, pathString.lastIndexOf("."));
+                    var varObj = self.docElement(pathBase);
+
+                    /* self.log('name');
+                    self.log(name);
+                    self.log('pathBase');
+                    self.log(pathBase);
+                    self.log('pathLast');
+                    self.log(pathLast);
+                    self.log('varObj');
+                    self.log(varObj); */
+                    if (value !== undefined) {
+
+                        //if (value == 'string')
+                        //    value = self.docElement('self.json.var.'+value); // todo
+                        //else
+                        value = self.actionResult(value, args);
+
+                        // typization
+                        switch (type) {
+                            case 'string': value = String(value); break;
+                            case 'number': value = Number(value); break;
+                            case 'boolean': value = Boolean(value); break;
+                            case 'array': value = JSON.parse(value); break;
+                            case 'object': value = JSON.parse(value); break;
+                        }
+
+                        //self.log('value');
+                        //self.log(value);
+                        /*
+                        // reset
+                        if (value == undefined && typeof value == 'string') value = '';
+                        if (value == undefined && typeof value == 'number') value = 0;
+                        if (value == undefined && typeof value == 'object') value = {}; */
+                        /* self.log('operator');
+                        self.log(operator);
+                        self.log('pathLast');
+                        self.log(pathLast);
+                        self.log('varObj[pathLast]');
+                        self.log(varObj[pathLast]); */
+                        if (varObj && pathLast) {
+                            switch (operator) {
+                                case '+=': varObj[pathLast] += value; break;
+                                case '-=': varObj[pathLast] -= value; break;
+                                case '/=': varObj[pathLast] /= value; break;
+                                case '*=': varObj[pathLast] *= value; break;
+                                default: varObj[pathLast] = value; break;
+                            }
+
+                            /* operators: [
+                                '=', '>', '<', '!', '~', '?', ':', '==', '<=', '>=', '!=',
+                                '&&', '||', '++', '--', '+', '-', '*', '/', '&', '|', '^', '%',
+                                '<<', '>>', '>>>', '+=', '-=', '*=', '/=', '&=', '|=', '^=',
+                                '%=', '<<=', '>>=', '>>>='
+                                ], */
+                            //self.log('varObj[pathLast]');
+                            varValue = varObj[pathLast];
+                        } else {
+                            /* self.log('pathString');
+                            self.log(pathString); */
+                            //varValue = self.docElement(pathString, value);
+                            //varValue = value;
+                            self.docElement(pathString, value);
+
+                            /* self.log('name');
+                            self.log(name);
+
+                            self.log('var '+name);
+                            self.log(self.var(name)); */
+                        }
+
+                        /* self.log('pathLast');
+                        self.log(pathLast);
+                        self.log('varObj[pathLast]');
+                        self.log(varObj[pathLast]); */
+                        /*  //alert(value);
+                        //value = self.replaceProperties(value, args);
+                        if (value == 'string') {
+                            //self.json.var[name] = self.docElement('self.json.var.'+value);
+                            varObj[pathLast] = self.docElement('self.json.var.'+value);
+                        } else {
+                            //self.json.var[name] = self.actionResult(value, args);
+                            varObj[pathLast] = self.actionResult(value, args);
+                        } */
+                        //self.log('varObj[pathLast]');
+                        //if (self.isJson(self.json.var[name])) 
+                        //    self.json.var[name] = self.parse(self.json.var[name]);
+                    } else if (paramsReplaced.push) {
+                        if (varObj && pathLast && varObj[pathLast]) {
+                            varObj[pathLast] = varObj[pathLast].push(paramsReplaced.push);
+                            varValue = varObj[pathLast];
+                        }
+                    } else if (paramsReplaced.extend) {
+                        if (varObj && pathLast && varObj[pathLast]) {
+                            varObj[pathLast] = self.extend({}, varObj[pathLast], paramsReplaced.extend);
+                            varValue = varObj[pathLast];
+                        }
+                    } else {
+                        // no "value" property: return the value of the var "name"
+                        varValue = varObj[pathLast];
+                        /* varValue = self.replaceProperties(varObj[pathLast], args);
+                        alert(JSON.stringify(varValue)); */
+                    }
+
+                    //varValue = self.json.var[name] || {}; // to check
+                } else {
+                    self.log('var name undefined');
+                    self.log(params);
+                    varValue = undefined;
+                }
+
+                if (params.do && params.do.length > 0) {
+                    self.log('this.var params.do');
+                    self.log(params.do);
+                    //alert(JSON.stringify(params.do));
+                    //self.do(params.do, args);
+                    self.do(params.do, undefined, args);
+                }
+
+            }
+
+            return varValue;
+
+        }
+    };
+
+    this.find = function (params, args) {
+        if (params.in) {
+            var list = self.replaceProperties(params.in, args);
+            return list.filter(function (item) {
+                if (params.value) {
+                    if (typeof params.value == 'string') {
+                        if (JSON.stringify(item).indexOf(params.value) >= 0)
+                            return item;
+                    } else { // if (typeof params.value == 'string') {
+                        for (var key in params.value) {
+                            if (params.value[key] == item[key])
+                                return item;
+                        }
+                    }
+                }
+            });
+        }
+    };
+
+    /* this.data = function (params, args) {
+        if (typeof params == 'string')
+            return self.db(params, args);
+        else
+            self.firebase(params, args);
+    } */
+    this.array = function (params, args) {
+        /* self.log("---- this.array ----");
+        self.log('params');
+        self.log(params);  */
+        if (args)
+            params = self.replacePropertyWithPrefix(params, 'result', args);
+
+        for (var par in params) {
+            var paramReplaced = self.replaceProperties(params[par], args);
+            //value[par](params[par]) // ipotesi di eseguire in automatico qualunque funzione js su stringhe
+            /* self.log("par");
+            self.log(par);
+            self.log("params[par]");
+            self.log(params[par]);
+            self.log("paramReplaced");
+            self.log(paramReplaced); */
+            params[par] = paramReplaced;
+        }
+
+        //self.log("params");
+        //self.log(params);
+        var value = self.element({ path: params.name }) || [];
+        /* self.log("value");
+        self.log(...value); */
+        if (params.push) {
+            if (Array.isArray(params.push))
+                value.push(...params.push);
+
+            else
+                value.push(params.push);
+
+        }
+        if (params.unshift) value.unshift(...params.unshift);
+        if (params.pop) return value.pop(params.pop);
+        if (params.shift) return value.shift(params.shift);
+
+        self.element({ path: params.name, value: value });
+
+    };
+
+    this.replace = function (params, args) {
+        // self.log("---- this.replace ----");
+        params = self.replacePropertyWithPrefix(params, 'result', args);
+        /* self.log("params");
+        self.log(params); */
+        var value = self.element({ path: params.path }) || [];
+        var to = params.to || '';
+
+        var type = typeof value;
+        /* self.log("type");
+        self.log(type); */
+        if (type !== "string") value = JSON.stringify(value);
+        /* self.log("value 1");
+        self.log(value); */
+        if (params.from) value = self.replaceAll(value, params.from, to);
+        /* self.log("value2 ");
+        self.log(value); */
+        switch (type) {
+            case "number":
+                value = Number(value);
+                break;
+            case "boolean":
+                value = Boolean(value);
+                break;
+            case "object":
+                value = JSON.parse(value);
+                break;
+        }
+        /* self.log("value 3");
+        self.log(value); */
+        //return value;
+        return self.element({ path: params.path, value: value });
+
+    };
+
+
+    this.unshift = function (params, args) {
+        for (var param in params) {
+            var path = self.replaceProperties(param, args);
+            var value = self.replaceProperties(params[param], args);
+            if (value) {
+                var obj = self.element({ path: path }) || [];
+                obj.unshift(value);
+                self.element({ path: path, value: obj });
+            }
+        }
+    };
+
+    this.set = function (params, args) {
+
+        if (Array.isArray(params)) { // 1.0.5
+            for (var obj of params)
+                self.set(obj, args);
+        } else {
+            for (var param in params) {
+
+                var value = params[param];
+
+                if (value) value = self.replaceProperties(value, args, false); // TO DO: check
+                if (value && args) value = self.replacePropertyWithPrefix(value, 'result', args); // backward compatibility TO DO: remove
+
+                self.element({ path: param, value: value });
+            }
+        }
+
+        //return true
+    };
+
+
+    this.get = function (element) {
+        //self.log('self.get');
+        if (element.startsWith('\''))
+            return String(element.match(/\'([^\']*)\'/)[1]); // stringa racchiusa tra apici (serve?)
+        else if (element.startsWith('Boolean'))
+            return Boolean(element.match(/Boolean\(([^\)]*)\)/)[0]); // Boolean(x)
+        else if (element.startsWith('Number'))
+            return Number(element.match(/Number\(([^\)]*)\)/)[0]); // Number(x)
+        else if (element.startsWith('String'))
+            return String(element.match(/String\(([^\)]*)\)/)[0]); // String(x)
+
+        else
+            return (self.docElement(element)); // ora le tipizzazioni sono già in docElement grazie a eval
+    };
+
+    this.getJSON = function (url, callback) {
+        var xhr = new XMLHttpRequest();
+        xhr.open('GET', url, true);
+        xhr.responseType = 'json';
+        xhr.onload = function () {
+            var status = xhr.status;
+            if (status === 200) {
+                callback(null, xhr.response);
+            } else {
+                callback(status, xhr.response);
+            }
+        };
+        xhr.send();
+    };
+
+    /*---------------------
+        var
+    ---------------------*/
+    var database, auth, storage;
+    this.listeners = {};
+    this.resizeActions = {};
+
+    /* var iconsFile;
+
+    this.device = false; // touch device
+    this.touch = 'mousedown'; if (this.device) {this.touch = 'touchstart';}
+
+    var animations = {};
+    var tweenLoading;
+
+    var tasksIntervals = {};
+    var timedTasks = {'yearly':{},'monthly':{},'daily':{},'hourly':{}, '10mins':{}, '5mins':{}, '30mins':{}, '1min':{}, '30sec': {}, '10sec': {}, '1sec': {}};  */
+    /* this.dateSelection; // = {day:0, month:0, year:0};
+    this.timeSelection = {hour:0, min:0, sec:0, ampm:'AM', allday:true};
+    this.timeSelectionCallback = null; */
+    /*--------------------
+        FIREBASE
+    --------------------*/
+    //var firebaseInitialized = false;
+    this.firebaseVerifyUser = function (data) {
+        self.log('firebaseVerifyUser');
+        //self.log(data);
+        //self.log(data.code);
+        if (self.params.oobCode) {
+            var oobCode = self.params.oobCode;
+
+            auth.applyActionCode(oobCode).then(function (resp) {
+                // self.log('resp');
+                // self.log(resp);
+                self.alert({
+                    //toast: true,
+                    icon: "success",
+                    title: "titVerifyEmail",
+                    html: "msgVerifyEmail",
+                    confirmButtonText: "btnOk",
+                    //showCancelButton: false,
+                    confirm: function () {
+                        //self.reload();
+                        // self.do(data);
+                        window.location.href = "/app/index.html";
+                    }
+                });
+            }).catch(function (error) {
+                self.log('error');
+                self.alert({
+                    icon: "error",
+                    title: "titWarning",
+                    html: error.code + " - " + error.message,
+                    confirmButtonText: "btnOk",
+                    //showCancelButton: false,
+                    confirm: function () {
+                        // self.reload();
+                        // self.do(data);
+                        window.location.href = "/app/index.html";
+                    }
+                });
+            });
+            // verifica su auth
+        }
+        //data.code / data.params.code
+        //self.do(data);
+        self.do(data);
+    };
+
+    /*     this.firebaseInit = function (data) {
+            self.log("firebaseInit");
+    
+            if (json.setup && json.setup.firebase) {
+                //var.databaseURL = json.setup.firebase.databaseURL;
+    
+                firebase.initializeApp(json.setup.firebase);
+                database = firebase.database();
+                auth = firebase.auth();
+                // if (self.json.plugins['firebase-storage'].active) OR find in self.json.plugins name: 'firebase-storage'
+                //storage = firebase.storage();
+    
+                auth.onAuthStateChanged(user => {
+                    self.json.var.user = user;
+                    if (!user) {
+                        // No user logged in
+                        self.log('onAuthStateChanged:GUEST\n');
+                        // non bisognerebbe chiedere sempre di fare login
+                    } else {
+                        // User logged in
+                        self.log('onAuthStateChanged:USER\n');
+                        self.log('name: '+self.user('displayName') + '\nemail: '+user.email + '\nuid: '+ user.uid);
+                    }
+                    //self.log('firebaseInitialized');
+                    //self.log(firebaseInitialized);
+                    if (!firebaseInitialized) {
+                        firebaseInitialized = true;
+                        self.do(data);
+                    }
+                });
+            } else {
+                self.do(data);
+            }
+        } */
+    this.sendMail = function (data) {
+        self.log('sendMail');
+
+        var emailParams = {
+            Host: "smtp.mailgun.com",
+            Username: "vito@nuvolaria.com",
+            Password: "bee02191be84c784a665fa98c61e03ce-915161b7-d32cb9d0",
+            From: data.from,
+            To: data.to,
+            Subject: data.subject,
+            Body: data.html
+        };
+
+        Email.send(emailParams).then(
+            message => self.alert({
+                icon: 'success',
+                title: 'titEmailSuccess',
+                confirmButtonText: 'btnClose'
+            })
+        );
+
+        /*
+        "from": "gianfrancoguglielmi@gmail.com",
+        "to": "vito.minchilli@gmail.com",
+        "subject": "Prova oggetto",
+        "html": "Prova testo",
+        "text": "Prova testo"
+*/
+        /*
+                var SERVER_NODEJS_BASEURL='https://app.fixo.io:4002';
+        
+                var params = {
+                    rom: data.from,
+                    to: data.to,
+                    subject: data.subject,
+                    html: data.html,
+                    text: data.text
+                };
+        
+                $.ajax({
+                    type: "POST",
+                    'beforeSend': function(xhr) {
+                        xhr.setRequestHeader('Accept', 'application/json');
+                        xhr.setRequestHeader('Content-Type', 'application/json');
+                    },
+                    data: JSON.stringify(params),
+                    url: SERVER_NODEJS_BASEURL + '/sendMail',
+                    success: function(data) {
+                        self.log('sendMail SUCCESS');
+                        self.log(data);
+                        self.do(data);
+                    },
+                    error: function(error) {
+                        self.log('sendMail ERROR');
+                        self.log(error);
+                        self.do(data);
+                    }
+                });
+        */
+    };
+
+    //var multipleFiles = [];
+    /*     this.fileDownload = function (url) {
+            self.log('fileDownload');
+            self.log(url);
+    
+            var fileArr = url.split('?');
+            self.log(fileArr);
+            //var file = fileArr[0];
+            var urlArr = fileArr[0].split('/');
+            self.log(urlArr);
+            var name = urlArr[urlArr.length-1];
+            self.log(name);
+            var token = self.getParameterByName('token', url);
+            self.log(token);
+    
+            window.location.href = '/app/php/proxy.php?name='+ name + '&url='+ url;
+    
+        }  */
+    /*     this.fileUrl = function (params) {
+            // da nome file a l'url Firebase Storage inclusiva del token
+            self.log('fileUrl');
+            self.log(params);
+            // self.log('storage');
+            // self.log(storage);
+            if (storage) {
+                var storageRef = storage.ref();
+                var pathReference = storageRef.child(params.user+'/'+params.name);
+                
+                pathReference.getDownloadURL().then(function(url) {
+                    if (params.callback) params.callback(url);
+                }).catch(function(error) {
+                    if (error && error.code && params.error) {
+                        self.log(self.firebaseStorageError(error.code));
+                        params.error(error.code);
+                    }
+                    // A full list of error codes is available at
+                    // https://firebase.google.com/docs/storage/web/handle-errors
+                });
+            } else {
+                self.log('storage undefined');
+            }
+        } */
+    /*     this.firebaseStorageError = function (errorCode) {
+            switch (errorCode) {
+                case 'storage/object-not-found':
+                    // File doesn\'t exist
+                    return 'File doesn\'t exist';
+                case 'storage/unauthorized':
+                    // User doesn\'t have permission to access the object
+                    return 'User doesn\'t have permission to access the object';
+                case 'storage/canceled':
+                    // User canceled the upload
+                    return 'User canceled the upload';
+                case 'storage/unknown':
+                    // Unknown error occurred, inspect the server response
+                    return 'Unknown error occurred, inspect the server response';
+                default:
+                    return 'No error'
+            }
+        } */
+    var x = [{ if: 3 }, function () { }, 3, []];
+
+    this.firebaseAddListener = function (params) {
+        /* self.log('firebaseAddListener');
+        self.log(params); */
+        // {path, orderByChild, equalTo}
+        //self.log(params.path);
+        if (database) {
+            // Aggiunge listener in ascolto su params.path che esegue params.action
+            if (params.action) {
+                if (!self.listeners[params.path]) self.listeners[params.path] = [];
+                /* alert('params.action:'+params.action);
+                alert('type params.action:' + typeof params.action);
+                alert(params.path+':'+JSON.stringify({
+                    action: params.action
+                })); */
+                //if (Array.isArray(params.action))
+                //    self.listeners[params.path].concat(params.action);
+                //else
+                self.listeners[params.path].push(params.action);
+            }
+            /* if (params.success !== undefined) {
+                alert('params.success:'+params.success);
+                alert('type params.success:' + typeof params.success);
+                alert(params.path+':'+JSON.stringify({
+                    success: params.success
+                }));
+                self.listeners[params.path].push(params.success);
+            } */
+            //self.log('params.path: '+ params.path);
+            //self.listeners[params.path] = params.action;
+            //alert(self.listeners[params.path]);
+            /*
+            
+            limitToFirst()	Sets the maximum number of items to return from the beginning of the ordered list of results.
+            limitToLast()	Sets the maximum number of items to return from the end of the ordered list of results.
+            
+            startAt()	Return items greater than or equal to the specified key or value, depending on the order-by method chosen.
+            startAfter()	Return items greater than the specified key or value depending on the order-by method chosen.
+            endAt()	Return items less than or equal to the specified key or value, depending on the order-by method chosen.
+            endBefore() endBefore()	Return items less than the specified key or value depending on the order-by method chosen.
+            equalTo()	Return items equal to the specified key or value, depending on the order-by method chosen.
+            
+            orderByChild()	Order results by the value of a specified child key or nested child path.
+            orderByKey()	Order results by child keys.
+            orderByValue()	Order results by child values.
+            orderByPriority() Order results by priority
+
+            https://firebase.google.com/docs/reference/js/v8/firebase.database.Query
+
+            */
+            //Firestore.collection(collectionName).orderBy(field).where(field, ">=", keyword.toUpperCase()).where(field, "<=", keyword.toUpperCase() + "\uf8ff").get() 
+            // https://medium.com/feedflood/filter-by-search-keyword-in-cloud-firestore-query-638377bf0123
+            // https://firebase.google.com/docs/database/rest/retrieve-data?hl=it#range-queries
+            // startAt , endAt , limitToFirst , limitToLast o equalTo
+            //databaseReference.orderByChild('_searchLastName').startAt(queryText).endAt(queryText+"\uf8ff")
+            // where ("string, "in"/"not-in", array)
+            // https://firebase.google.com/docs/firestore/query-data/queries?hl=it#in_and_array-contains-any
+            var dbRef = database.ref(params.path);
+            dbRef.off();
+            if (params.orderByChild) dbRef = dbRef.orderByChild(params.orderByChild);
+            if (params.orderByKey) dbRef = dbRef.orderByKey(params.orderByKey);
+            if (params.orderByValue) dbRef = dbRef.orderByValue(params.orderByValue);
+            if (params.equalTo) dbRef = dbRef.equalTo(params.equalTo);
+            if (params.startAt) dbRef = dbRef.startAt(params.startAt);
+            if (params.startAfter) dbRef = dbRef.startAfter(params.startAfter);
+            if (params.endAt) dbRef = dbRef.endAt(params.endAt);
+            if (params.endBefore) dbRef = dbRef.endBefore(params.endBefore);
+            if (params.limitToFirst) dbRef = dbRef.limitToFirst(params.limitToFirst);
+            if (params.limitToLast) dbRef = dbRef.limitToLast(params.limitToLast);
+            if (params.where) dbRef = dbRef.where(params.where[0], params.where[1], params.where[2]); // maybe params.where in enough
+
+            var feedback = dbRef.on('value', firebaseEvent);
+            //console.log(feedback);
+            /* console.log('dbRef');
+            console.log(dbRef);
+    */
+            /* if (params.orderByChild && params.equalTo)
+                dbRef.orderByChild(params.orderByChild).equalTo(params.equalTo).on('value', firebaseEvent);
+            else
+                dbRef.on('value', firebaseEvent); */
+        } else {
+            self.log('database undefined');
+            // Restart the db
+        }
+    };
+
+    var firebaseEvent = function (snapshot) {
+        console.log(snapshot.val());
+        var ref = snapshot.ref;
+        if (snapshot.val() !== undefined) {
+            var dbVal = snapshot.val();
+            var path = snapshot.ref.toString();
+            //if (!dbVal) dbVal = {};
+            var pathArr = path.split(/\.\w+\//);
+            var dbPath = pathArr[1];
+            self.log('firebaseEvent: ' + dbPath);
+            //if (var.databaseURL) dbPath = path.substr(var.databaseURL.length+1);
+            //else dbPath = path;
+            /* self.log('path: '+ path);
+            //self.log('var.databaseURL: '+ var.databaseURL);
+            self.log('dbPath: '+ dbPath); */
+            if (dbVal)
+                self.localDbUpdate(dbVal, dbPath);
+            else {
+                var dbObj = self.element({ path: 'self.json.var.db.' + self.replaceAll(dbPath, '/', '.') });
+                if (dbObj)
+                    dbObj = null;
+                //delete dbObj;
+            }
+
+
+            //self.do(self.listeners[dbPath], dbVal);
+        }
+    };
+
+    this.localDbUpdate = function (newObj, dbPath) {
+        /* self.log('localDbUpdate');
+        self.log(newObj);
+        self.log(dbPath); */
+        //var path = newObj.path;
+        //delete newObj.path;
+        /* self.do(
+            {
+                var: {
+                    name: "db."+self.replaceAll(dbPath, '/', '.'),
+                    value: newObj,
+                    //success: function () {
+                    //    self.do(self.listeners[dbPath], newObj);
+                    //}
+                }
+            }
+        ); */
+        //alert('db.'+self.replaceAll(dbPath, '/', '.'));
+        /* var dbUpdateAction = {
+            var: {
+                name: 'db.'+self.replaceAll(dbPath, '/', '.'),
+                value: newObj
+                //do: (self.listeners[dbPath] && self.listeners[dbPath].length > 0) ? self.listeners[dbPath] : undefined
+            }
+        };
+            if (self.listeners[dbPath] !== undefined && self.listeners[dbPath] !== null && self.listeners[dbPath].length > 0)
+            dbUpdateAction.var.do = self.listeners[dbPath];
+        
+        newObj.path = dbPath;
+
+        self.do(dbUpdateAction, newObj); */
+        // TO DO: decide l'utente dove salvare i dati 
+        newObj = Object.fromEntries(Object.entries(newObj).reverse());
+
+        //newObj = Object.keys(newObj).reverse();
+        self.element({ path: 'self.json.var.db.' + self.replaceAll(dbPath, '/', '.'), value: newObj });
+        if (self.listeners[dbPath] !== undefined && self.listeners[dbPath] !== null && self.listeners[dbPath].length > 0) {
+            newObj.path = dbPath;
+            if (self.listeners[dbPath]) {
+                self.methods.firebaseEvent.action(newObj);
+                //self.do(self.listeners[dbPath], newObj);
+                self.do(self.listeners[dbPath], undefined, newObj);
+            }
+        }
+
+
+    };
+
+
+
+    this.firebaseRemoveListener = function (params) {
+        // Rimuove listener in ascolto su data.path
+        self.log('firebaseRemoveListener');
+        if (self.listeners[params.path]) {
+            delete self.listeners[params.path];
+            var dbRef = database.ref(params.path);
+            dbRef.off();
+        }
+    };
+
+    // Rimuove un elemento del database
+    this.firebaseRemove = function (path, callback) {
+        self.log('firebaseRemove');
+        self.log(path);
+        if (database) {
+            var result, dbRef;
+            if (path) {
+                dbRef = database.ref().child(path);
+            } else {
+                dbRef = database.ref();
+            }
+            return dbRef.remove(function (error) {
+                //Dati impostati con successo
+                if (error == null) {
+                    self.log('set SUCCESS');
+                    result = { success: true };
+                } else {
+                    self.log('set ERROR');
+                    //Errore inserimento dati
+                    result = { success: false, error: error };
+                }
+                if (callback) callback(result);
+            });
+        } else {
+            self.log('database not initialized');
+        }
+    };
+
+    // Write or replace data to a defined path
+    this.firebaseSet = function (path, value, callback) {
+        /*
+        set	Write or replace data to a defined path, like messages/users/<username>
+        update	Update some of the keys for a defined path without replacing all of the data
+        push	Add to a list of data in the database. Every time you push a new node onto a list, your database generates a unique key, like messages/users/<unique-user-id>/<username>
+        transaction	Use transactions when working with complex data that could be corrupted by concurrent updates
+        */
+        if (database) {
+            var result, dbRef;
+            if (path) {
+                dbRef = database.ref().child(path);
+            } else {
+                dbRef = database.ref();
+            }
+            return dbRef.set(value, function (error) {
+                //Dati impostati con successo
+                if (error == null) {
+                    self.log('set SUCCESS');
+                    result = { success: true };
+                } else {
+                    self.log('set ERROR');
+                    //Errore inserimento dati
+                    result = { success: false, error: error };
+                }
+                if (callback) callback(result);
+            });
+        } else {
+            self.log('database not initialized');
+        }
+    };
+
+    // Update some of the keys for a defined path without replacing all of the data
+    this.firebaseUpdate = function (path, value, callback) {
+        self.log('firebaseUpdate');
+        self.log('path');
+        self.log(path);
+        self.log('value');
+        self.log(value);
+
+        if (database) {
+            var result, dbRef;
+            if (path) {
+                dbRef = database.ref().child(path);
+            } else {
+                dbRef = database.ref();
+            }
+            return dbRef.update(value, function (error) {
+                //Dati impostati con successo
+                if (error == null) {
+                    self.log('update SUCCESS');
+                    result = { success: true };
+                } else {
+                    self.log('update ERROR');
+                    //Errore inserimento dati
+                    result = { success: false, error: error };
+                }
+                if (callback) callback(result);
+            });
+        } else {
+            self.log('database not initialized');
+        }
+    };
+
+    // Add to a list of data in the database. Every time you push a new node onto a list, your database generates a unique key, like messages/users/<unique-user-id>/<username>
+    this.firebasePush = function (path, value, callback) {
+        self.log('firebasePush');
+        self.log(path);
+
+        if (database) {
+            var result, dbRef;
+            if (path) {
+                dbRef = database.ref().child(path);
+            } else {
+                dbRef = database.ref();
+            }
+            return dbRef.push(value, function (error) {
+                //Dati impostati con successo
+                if (error == null) {
+                    self.log('push SUCCESS');
+                    result = { success: true };
+                } else {
+                    self.log('push ERROR');
+                    //Errore inserimento dati
+                    result = { success: false, error: error };
+                }
+                if (callback) callback(result);
+            });
+        } else {
+            self.log('database not initialized');
+        }
+    };
+
+
+
+    // https://firebase.google.com/docs/database/security/rules-conditions
+    // tutte le get / o listeners / potrebbero essere basate su orderByChild("owner")
+    /*
+            rooms": {
+                // this rule applies to any child of /rooms/, the key for each room id
+                // is stored inside $room_id variable for reference
+                "$room_id": {
+                    "topic": {
+                    // the room's topic can be changed if the room id has "public" in it
+                    ".write": "$room_id.contains('public')"
+                    }
+                }
+                }
+    */
+    /*        this.firebaseQuery  = function(params) {
+            self.log('firebaseQuery');
+            self.log(params);
+            // path = 'users/'+self.user('email')
+            // value = 'guest'
+            var dbRef = database.ref(params.path);
+    
+            if (!params.result) params.result = {};
+            if (params.value && !Array.isArray(params.value)) {
+                var buffer = params.value;
+                params.value = [];
+                params.value[0] = buffer;
+            }
+            //self.log('params.value');
+            //self.log(params.value);
+            if (params.value && params.value.length > 0) {
+                var value = params.value.shift();
+                //self.log('value');
+                //self.log(value);
+                //self.log('params.key');
+                //self.log(params.key);
+                dbRef.orderByChild(params.key).equalTo(value).once('value',  (object) => {
+                    self.log('object');
+                    self.log(object);
+                    if(object) {
+                        params.result = self.extend(params.result, object.val());
+                        if (params.value.length > 0)
+                            self.firebaseQuery(params);
+                        else
+                            params.callback({
+                                success: true,
+                                error: null,
+                                data: params.result
+                            });
+                    } else {
+                        //self.log('firebaseQuery ERROR');
+                        //result = {success:false, error:8};
+                        params.callback({
+                            success:true,
+                            error:null,
+                            data: params.result
+                        });
+                    }
+                });
+            } else {
+                params.callback({success:false, error:null});
+            }
+        } */
+    this.firebaseGetPart = function (params) {
+        self.log('firebaseGetPart');
+        let remotePath = self.replaceAll(params.localPath, '.', '/');
+
+        self.log('localPath:' + params.localPath);
+        //self.log('remotePath:'+remotePath);
+        if (self.partContainers[params.localPath]) {
+            self.partContainers[params.localPath].push(params);
+        } else {
+            self.partContainers[params.localPath] = [];
+            self.partContainers[params.localPath].push(params);
+
+            dbRef = database.ref().child(remotePath);
+
+            return dbRef.once('value').then(function (object) {
+                //Dati recuperati con successo
+                if (object) {
+                    self.log('firebaseGetPart SUCCESS');
+                    self.log(object);
+                    // local db update
+                    if (object.val() !== undefined) {
+                        window.dbVal = object.val();
+                        var dbVal = object.val();
+                        self.log('dbVal');
+                        self.log(dbVal);
+                        if (dbVal !== null) {
+                            let fullPath = object.ref.toString();
+                            let pathArr = fullPath.split(/\.\w+\//); // split on the domain extension
+                            let dbPath = pathArr[1]; // path after the domain extension
+                            let localPath = self.replaceAll(dbPath, '/', '.');
+                            //var dbPath = path.substr(var.databaseURL.length+1);
+                            self.log('dbPath: ' + dbPath);
+                            self.log('localPath: ' + localPath);
+                            //self.log('self.partContainers[localPath]');
+                            //self.log(self.partContainers[localPath]);
+                            self.element({ path: localPath, value: dbVal });
+                            for (partObj of self.partContainers[localPath]) {
+                                /* self.log('partObj');
+                                self.log(partObj); */
+                                let part = self.replacePropertyWithPrefix(dbVal, 'setup', partObj.setup);
+                                part = self.replacePropertyWithPrefix(part, 'arg', partObj.arg);
+                                self.extendJsonFromElement(part); // or selectorParams
+
+
+                                /* self.log('part');
+                                self.log(part); */
+                                self.html(part, partObj.container);
+                                //self.run(part, partObj.container);
+                                //self.run(dbVal, container);
+                            }
+                        }
+                    }
+                } else {
+                    self.log('firebaseGetPart ERROR');
+                    result = { success: false, error: 8 };
+                }
+                //self.log(result);
+                //callback(result);
+            });
+        }
+    };
+
+
+    /* {
+        "database": {
+            "do": "get",
+            "path": "apps/dev/{setup:key}",
+            "on": {
+                "success": [
+                    { */
+    this.firebaseIncrease = function (params) {
+        console.log('firebaseIncrease');
+        self.firebaseGet(params.path, function (result) {
+            console.log(result);
+            if (result.success) {
+                if (result.data === null || result.data === undefined || typeof result.data == 'number') {
+                    var counter = Number(result.data) + 1;
+                    console.log('counter:' + counter);
+                    self.firebaseSet(params.path, counter, function (result) {
+                        if (result.success) {
+                            self.log('firebaseIncrease SUCCESS');
+                            if (params.on && params.on.success) self.do(params.on.success, undefined, result);
+                        } else {
+                            if (params.on && params.on.error) self.do(params.on.error, undefined, result);
+                        }
+                    });
+                } else {
+                    if (params.on && params.on.error) self.do(params.on.error, undefined, result);
+                }
+            } else {
+                if (params.on && params.on.error) self.do(params.on.error, undefined, result);
+            }
+        });
+    };
+
+    this.firebaseGet = function (path, callback) {
+        self.log('firebaseGet:' + path);
+        var result = { success: false, error: 7 };
+        if (path) {
+            // try, if path is wrong "Uncaught TypeError: Cannot read properties of undefined (reading 'ref')"
+            dbRef = database.ref().child(path);
+        } else {
+            dbRef = database.ref();
+        }
+
+        /* if (false) { //path == 'files') {
+            //alert(self.user('email'));
+            return dbRef.orderByChild('users/'+self.user('email')).equalTo('guest').on('value',  (object) => {
+            //return dbRef.orderByChild('prefs/authorId').equalTo(self.user('uuid')).on('value',  (object) => {
+            //return dbRef.orderByChild('users').equalTo(self.user('email')).on('value', (object) => {
+                //self.log(object);
+                //var user = object.val();
+                //Dati recuperati con successo
+                if(object) {
+                    result = {success:true, error:null, data: object.val()};
+                } else {
+                    self.log('get ERROR');
+                    //Errore recupero dati
+                    result = {success:false, error:8};
+                }
+                //self.log(result);
+                callback(result);
+            });
+        } else { */
+        // ATTENZIONE: va intercettato e loggato l'errore di accesso negato dalle regole
+        return dbRef.once('value').then(function (object) {
+            //Dati recuperati con successo
+            if (object) {
+                self.log('get SUCCESS');
+                result = { success: true, error: null, data: object.val() };
+
+                // local db update
+                if (object.val() !== undefined) {
+                    var dbVal = object.val();
+                    var path = object.ref.toString();
+                    if (!dbVal) dbVal = {};
+                    var pathArr = path.split(/\.\w+\//); // split on the domain extension
+                    var dbPath = pathArr[1]; // path after the domain extension
+
+                    //var dbPath = path.substr(var.databaseURL.length+1);
+                    self.log('dbPath: ' + dbPath);
+                    self.localDbUpdate(dbVal, dbPath);
+                }
+            } else {
+                self.log('get ERROR');
+                //Errore recupero dati
+                result = { success: false, error: 8 };
+            }
+            //self.log(result);
+            callback(result);
+        });
+
+        //}
+    };
+
+    this.stringToKey = function (str) {
+        return str.replace(/\./g, '%2E');
+    };
+
+    this.keyToString = function (key) {
+        return key.replace(/%2E/g, '.');
+    };
+
+    this.firebaseKey = this.getKey = function (path) {
+        var dbRef = database.ref(path);
+        return dbRef.child(path).push().getKey();
+    };
+
+    // --------------
+    //  SELECTOR
+    // --------------
+    this.exist = function (selector) {
+        console.log('selector');
+        console.log(selector);
+        console.log(Boolean(self.query(selector)));
+        return Boolean(self.query(selector));
+    };
+
+    this.count = function (selector) {
+        //self.log('count:'+selector+ '='+ self.queryAll(selector).length);
+        return self.queryAll(selector).length;
+
+        /* if (selector) {
+            var routes = selector.split(/[ >]+/);
+            if (!element) element = document;
+            
+            for (var index in routes) {
+                var route = routes[index];
+
+                //onsole.log('route');
+                //self.log(route);
+
+                var routeParts = route.match(/(.*):eq\((\d*)\)/);
+
+                //self.log('routeParts');
+                //self.log(routeParts);
+
+                if (routeParts) {
+                    var routeElement = String(routeParts[1]);
+                    var routeIndex = Number(routeParts[2]);
+                    element = element.querySelectorAll(routeElement)[routeIndex];
+
+
+                } else {
+                    element = element.querySelectorAll(route)[0];
+                }
+            } */
+        /* var elements = self.query(selector);
+        if (elements)
+            return elements.querySelectorAll().length;
+        else
+            return 0 */
+        /* if (self.exist(selector))
+            return document.querySelectorAll(selector).length;
+        else
+            return 0 */
+    };
+
+    var log = function (id, value) {
+        self.log(id);
+        self.log(value);
+    };
+
+    this.classSelector = function (selClass) {
+        if (selClass.indexOf('.') == 0) { selClass = String(selClass).substr(1); } // backward compatibility
+        let classes = selClass.split(' ');
+        selClass = classes[0];
+        /* self.log('selClass');
+        self.log(selClass); */
+        // avoid dynamic classes as selector
+        var regex = new RegExp('[\-][\[]');
+        if (selClass && selClass.match(regex)) selClass = classes[1];
+        if (selClass && selClass.match(regex)) selClass = classes[2];
+        return selClass;
+    };
+
+    this.selector = function (params, containerParams, selectAll) {
+        // {container, class, value, id}
+        var selector;
+
+        if (params) {
+
+            if (typeof params == 'string') {
+                /* self.log('this.selector');
+                self.log(params); */
+                return params;
+            } else if (Array.isArray(params)) {
+                return params;
+            } else {
+                var selContainer;
+
+                if (params.selector || params.container)
+                    selContainer = params.selector || params.container;
+
+                else if (containerParams)
+                    selContainer = containerParams.selector || containerParams.container;
+
+                //var selContainer = container; //data.container;
+                var attr = (params.attr) ? params.attr : {};
+                var selId = (attr.id) ? attr.id : params.id;
+                var selClass = (attr.class) ? attr.class : params.class;
+                var selValue = (attr.value) ? attr.value : params.value;
+                var selDataValue = (attr['data-value']) ? attr['data-value'] : params['data-value'];
+                selValue = selDataValue || selValue;
+                if (selId) selId = self.replaceProperties(selId);
+                if (selValue) selValue = self.replaceProperties(selValue);
+                if (selClass) selClass = self.replaceProperties(selClass);
+                /* if (selId) selId = self.compile(selId);
+                if (selValue) selValue = self.compile(selValue);
+                if (selClass) selClass = self.compile(selClass); */
+                // use the first class as selector
+                if (selClass)
+                    selClass = self.classSelector(selClass);
+
+                //if (!selectAll) selClass = undefined;
+                if (selId) {
+                    selector = '#' + selId;
+                } else if (selValue && selClass) {
+                    selector = '.' + selClass + '[data-value="' + selValue + '"]';
+                } else if (selValue && params.tag) {
+                    selector = params.tag + '[data-value="' + selValue + '"]';
+                } else if (selClass && selectAll) {
+                    selector = '.' + selClass;
+
+                    //if (!selectAll) 
+                    //    selector += ':eq(' + self.count(selector) + ')';
+                    // qui c'è / c'era un baco:
+                    // quando proviamo a eseguire un'azione su un elemento esistente
+                    // usando solo la classe come selector, $(selector).length = 1
+                    // quindi prova a selezionare il secondo elemento eq(1), non il primo eq(0)
+                } else if (params.tag) {
+                    //if (selContainer) selector = selContainer;
+                    selector = params.tag;
+                    if (selContainer) {
+                        selector = selContainer + ' > ' + params.tag;
+                        if (!selectAll) {
+
+                            //if (count !== $(selector).length) self.log('>> '+ selector + ' count:'+ self.count(selector) + ' !== ' + $(selector).length );
+                            selector += ':eq(' + self.count(selector) + ')';
+                            //selector += '[' + self.count(selector) + ']';
+                            //selector += ':eq(' + $(selector).length + ')';
+                        }
+                    } else {
+                        if (!selectAll) {
+                            selector += ':eq(' + self.count(selector) + ')';
+                            //selector += '[' + self.count(selector) + ']';
+                        }
+                    }
+                } else {
+                    selector = selContainer;
+                };
+
+            }
+            return selector;
+        }
+    };
+
+    // --------------
+    //  TEXTS
+    // --------------
+    this.stringify = function (obj) {
+        if (typeof obj == 'object')
+            try {
+                return JSON.stringify(obj);
+            } catch (error) {
+                return obj;
+            }
+
+        else
+            return obj;
+
+    };
+
+    this.parse = function (str) {
+        if (typeof str == 'string')
+            try {
+                return JSON.parse(str); // json
+            } catch (error) {
+                return str; // non json
+            }
+
+        else
+            return str;
+    };
+
+  /*   this.removeEventProperties = function (params) {
+        var paramsObj = self.cloneObject(params);
+        if (paramsObj && paramsObj.on) {
+            paramOn = self.cloneObject(paramsObj.on);
+            delete paramsObj.on;
+        }
+        if (paramsObj && paramsObj.success) {
+            paramSuccess = self.cloneObject(paramsObj.success);
+            delete paramsObj.success;
+        }
+        return paramsObj;
+    }; */
+
+
+    self.setupId = 0;
+
+    this.replacePropertyWithPrefix = function (params, prefix, args) {
+
+        var paramsString;
+
+        if (typeof params == 'object')
+            paramsString = self.stringify(params);
+
+        else
+            paramsString = String(params);
+
+        /* let argsWithProperties = (args) ? JSON.stringify(args) : '';
+        paramsString = self.replaceAll(paramsString, '"{'+prefix+'}"', argsWithProperties); // obsolete */
+        //if (typeof args == undefined)
+        //    self.log('replacePropertyWithPrefix args is undefined', 'yellow'); 
+        if (paramsString && paramsString.indexOf('{' + prefix) >= 0) {
+            paramsString = paramsString.replace(new RegExp('"{' + prefix + '[:\\s]?([\\w\\d\\s\\.\\|]*)}"', 'g'), function (match, path) {
+                if (path) {
+                    let value = self.replaceUndefined({ match: match, path: path, root: args, removeUndefined: true });
+                    //let value = self.element({path:path, root: args});
+                    /* if (typeof value == undefined) {
+                        self.log(match + ' not found', 'orange');
+                        value = '';
+                    } else  */
+                    if (value === undefined) {
+                        return '""';
+                    } else if (typeof value == 'object')
+                        return JSON.stringify(value);
+                    else if (typeof value == 'string')
+                        return '"' + value + '"';
+
+                    else
+                        return value;
+                } else {
+                    if (typeof args == 'object')
+                        return JSON.stringify(args);
+                    else if (typeof args == 'string')
+                        return '"' + args + '"';
+
+                    else
+                        return args;
+                }
+            });
+
+            /* if (paramsString && paramsString.indexOf('Contacts')>= 0) {
+                self.log(paramsString, 'green');
+            } */
+            paramsString = paramsString.replace(new RegExp('{' + prefix + '[:\\s]?([\\w\\d\\s\\.]*)}', 'g'), function (match, path) {
+                if (path) {
+                    let value = self.replaceUndefined({ match: match, path: path, root: args, removeUndefined: true });
+                    //let value = self.element({path:path, root: args});
+                    /* if (typeof value == undefined) {
+                        self.log(match + ' not found', 'orange');
+                        value = '';
+                    } else  */
+                    if (value === undefined)
+                        return '';
+                    else if (typeof value == 'object') // when object inside a string?
+                        return JSON.stringify(value);
+
+                    else
+                        return value;
+                } else {
+                    if (typeof args == 'object')
+                        return JSON.stringify(args);
+
+                    else
+                        return args;
+                }
+            });
+
+            if (self.isJsonString(paramsString)) {
+                var paramsObj = self.parse(paramsString);
+                return paramsObj;
+            } else {
+                return paramsString;
+            }
+        } else {
+            return params;
+        }
+
+    };
+
+    /*     this.replaceProperty = function (params, name, args) { // TO DO: change name in replaceArguments
+            //console.log('replaceProperty:'+name);
+            //var actions = {};
+    
+            if (typeof params == 'object') {
+    
+                params = self.stringify(params);
+            }
+    
+            if (typeof args !== 'string') {
+    
+                let argsWithProperties = (args) ? JSON.stringify(args) : '';
+                params = self.replaceAll(params, '"{'+name+'}"', argsWithProperties); // obsolete
+    
+                // TO DO: get self.element({path:key, root: args});
+    
+                for (let key in args) {
+                    if (typeof args[key] !== undefined) {
+                        if (typeof args[key] == 'object')
+                            params = self.replaceAll(params, '"{'+name+' '+key+'}"', JSON.stringify(args[key]));
+                        else
+                            params = self.replaceAll(params, '{'+name+' '+key+'}', args[key]);
+                    } else {
+                        params = self.replaceAll(params, '{'+name+' '+key+'}', '');
+                        self.log('{'+name+' '+key+'}' + ' not found', 'yellow');
+                    }
+                }
+    
+                for (let key in args) {
+                    if (args[key]) {
+                        if (typeof args[key] == 'object')
+                            params = self.replaceAll(params, '"{'+name+':'+key+'}"', JSON.stringify(args[key]));
+                        else
+                            params = self.replaceAll(params, '{'+name+':'+key+'}', args[key]);
+                    } else {
+                        params = self.replaceAll(params, '{'+name+':'+key+'}', '');
+                    }
+                }
+    
+            } else {
+                //console.log('args STRINGA');
+    
+                params = self.replaceAll(params, '{'+name+'}', args);
+    
+            }
+    
+            if (self.isJson(params)) {// (typeof params == 'object')
+                var paramsObj = self.parse(params);
+                return paramsObj;
+            } else {
+                //alert(paramsString);
+                return params;
+            }
+    
+        }
+        */
+    this.replaceResult = function (params, args) {
+
+        var paramOn, paramSuccess, paramError;
+
+        if (typeof params == 'object') {
+            var paramsObj = self.cloneObject(params);
+            if (paramsObj && paramsObj.on) {
+                paramOn = self.cloneObject(paramsObj.on);
+                delete paramsObj.on;
+            }
+            if (paramsObj && paramsObj.success) {
+                paramSuccess = self.cloneObject(paramsObj.success);
+                delete paramsObj.success;
+            }
+
+            params = self.stringify(params);
+        }
+
+        if (typeof args !== 'string') {
+            params = self.replaceAll(params, '"{result}"', JSON.stringify(args));
+        } else {
+            params = self.replaceAll(params, '{result}', args);
+        }
+
+        /* self.log('replaceResult');
+        self.log('params');
+        self.log(params); */
+        if (self.isJson(params)) { // (typeof params == 'object')  
+            var paramsObj = self.parse(params);
+            if (paramOn) paramsObj.on = paramOn;
+            if (paramSuccess) paramsObj.success = paramSuccess;
+            if (paramError) paramsObj.error = paramError;
+            return paramsObj;
+        } else {
+            //alert(paramsString);
+            return params;
+        }
+
+    };
+
+    /*
+    this.replaceTags = function (params, selectorParams) {
+        self.log('replaceTags');
+        var undef = false;
+
+        if (params.text && (typeof params.text == 'string' || typeof params.text == 'object')) {
+            //alert(params.text);
+
+            params.text = self.stringify(params.text);
+
+            // i tag speciali sono contenuti tra i caratteri { e }
+            if (params.text.indexOf('{') >= 0) {
+                // alert(params.text.indexOf('{'));
+
+                // <{visible:element}>
+                params.text = params.text.replace(/\<\{visible\:([^\}]*)\}\>/g, function(match, p1, offset, string) {
+                    var value = ($(p1).is(':visible'));
+                    return value;
+                });
+
+                // <{var:var.object}>
+                params.text = params.text.replace(/\<\{this\:([^\}]*)\}\>/g, function(match, p1, offset, string) {
+                    var value = self.json[p1];
+                    if (!value) undef = true;
+                    return self.stringify(value);
+                });
+
+                // <{data:value}>
+                    params.text = params.text.replace(/\<\{data\:([^\}]*)\}\>/g, function(match, p1, offset, string) {
+                    var value = self.json.var[p1];
+                    if (!value) undef = true;
+                    return self.stringify(value);
+                });
+
+                params.text = params.text.replace(/\<\{var\:([^\}]*)\}\>/g, function(match, p1, offset, string) {
+                    var value = self.get(p1);
+                    if (!value) undef = true;
+                    return self.stringify(value);
+                });
+
+                params.text = params.text.replace(/\<\{param\:([^\}]*)\}\>/g, function(match, p1, offset, string) {
+                    var value = self.params[p2];
+                    if (!value) undef = true;
+                    return value;
+                });
+
+                // <{value:[id]}>
+                params.text = params.text.replace(/\<\{value\:([^\}]*)\}\>/g, function(match, p1, offset, string) {
+                    var value = $('#'+p1).val();
+                    // https://www.geeksforgeeks.org/html-value-attribute/
+                    if (!value) undef = true;
+                    return value;
+                });
+
+                // <{user:[fieldName]}>
+                params.text = params.text.replace(/\<\{user\:([^\}]*)\}\>/g, function(match, p1, offset, string) {
+                    var value = self.user(p1);
+                    if (!value) undef = true;
+                    return self.stringify(value);
+                });
+
+                // <{time:timestamp}>
+                params.text = params.text.replace(/\<\{time\:timestamp\}\>/g, self.getTimestamp());
+
+                // <{result}>
+                if (params.args) {
+                    params.args = self.stringify(params.args);
+                    params.text = params.text.replace(/\<\{result\}\>/g, params.args);
+                }
+
+                // <{function:app.mac}>
+                params.text = params.text.replace(/\<?\{function:([^\}]*)\}\>?/g, function(match, p1, offset, string) {
+                    var functionName = self.docElement(p1);
+                    return functionName(selectorParams);
+                });
+
+                // <{random}>
+                params.text = params.text.replace(/\<\{random\:([^\-]+)\-([^\}]+)\}\>/g, function(match, p1, p2, offset, string) {
+                    return Number(p1)+Math.round((p2-p1)*Math.random());
+                });
+
+                // <{firebaseKey:path}>
+                params.text = params.text.replace(/\<\{firebaseKey\:([^\}]*)\}\>/g, function(match, p1, offset, string) {
+                    return  self.firebaseKey(p1);
+                });
+
+            }
+            if (undef) return undefined
+            else return self.parse(params.text);
+            
+        } else {
+            //self.log('params.text undefined or number or boolean');
+            return params.text;
+        }
+    } */
+    this.langText = function (textId) {
+        // find text in language and follow the capitalization of textId
+        // we could need text in langId language
+
+        if (textId) {
+            var textValue = textId;
+            if (typeof textId == 'string') {
+                if (self.json.texts[textId]) {
+                    textValue = self.json.texts[textId];
+                    if (typeof textValue == 'object')
+                        textValue = textValue[self.json.setup.language] || textValue['en'] || textValue[Object.keys[0]];
+                }
+                else
+                    textValue = textId;
+            } else if (typeof textId == 'object') {
+                textValue = textId[self.json.setup.language] || textId['en'] || textId[Object.keys[0]];
+                //textValue = textObj[langId] || textObj[self.json.setup.language] || textObj['en'];
+            }
+            return textValue;
+        } else {
+            return textId;
+        }
+
+        /*  if (self.json.texts[textId])
+            textObj = self.json.texts[textId];
+        else if (self.json.texts[textId.toLowerCase()])
+            textObj = self.json.texts[textId.toLowerCase()];
+        //else if (self.json.texts[textId.toUpperCase()])
+        //    textObj = self.json.texts[textId.toUpperCase()];
+        if (textObj) {
+            var textValue = textObj[self.json.setup.language] || textObj['en'] || textId;
+            if (textId.charAt(0) == textId.charAt(0).toUpperCase()) // first char uppercase
+                if (textId.charAt(1) == textId.charAt(1).toUpperCase())
+                    return textValue.toUpperCase();
+                else
+                    return textValue.replace(/\b\w/, l => l.toUpperCase()); // capitalize
+                    // textValue = textValue.charAt(0).toUpperCase() + name.slice(1)
+                    // style: text-transform: capitalize;
+            else
+                return textValue.toLowerCase();
+        } else {
+            return textId;
+        } */
+        /*  } else {
+                self.log('textId undefined in langText');
+            } */
+    };
+
+    this.lang = function (params, args) {
+        if (args) {
+            var value = self.replaceProperties(params, args);
+            self.json.setup.language = value;
+            //alert(value);
+            self.log('lang');
+            self.log(value);
+
+            document.querySelectorAll('[data-text]').forEach(function (element, index) {
+                //$('*[data-text]').each(function( index ) {
+                var dataParams = self.dataStorage.get(element, 'params');
+                var selector = self.dataStorage.get(element, 'selector');
+                /* self.log('index');
+                self.log(index);
+                self.log('dataParams');
+                self.log(dataParams);
+                */
+                //alert(JSON.stringify(dataParams));
+                self.html(dataParams, { selector: selector });
+                //self.text($(this).data('params'), {container: this});
+            });
+
+            /*
+                        var elements = document.querySelectorAll('[data-text]');
+                        self.log('elements');
+                        self.log(elements);
+                        //var elements = document.querySelectorAll(selector);
+                        if (elements)
+                            elements.forEach(function (element, index) {
+                                self.log(index);
+                                //var dataParams = self.dataStorage.get(element, 'params');
+                                var dataSelector = self.attribute(element, 'data-selector');
+                                //self.text(dataParams, {container: dataSelector});
+                                self.text($(dataSelector).data('params'), {container: dataSelector});
+            
+                            });
+                                */
+        } else {
+            return self.json.setup.language;
+        }
+    };
+    // Determine whether is possible to write an image/text to the clipboard.
+    var isClipboardWritingAllowed = function () {
+        return new Promise(function (resolve, reject) {
+            try {
+                navigator.permissions.query({ name: "clipboard-write" }).then(function (status) {
+                    // PermissionStatus object
+                    // {
+                    //  onchange: null,
+                    //  state: "granted" (it could be as well `denied` or `prompt`)
+                    // }
+                    self.log(status);
+
+                    resolve((status.state == "granted"));
+                });
+            } catch (error) {
+                // This could be caused because of a Browser incompatibility or security error
+                // Remember that this feature works only through HTTPS
+                reject(error);
+            }
+        });
+    };
+
+    this.codeSearch = function (params) {
+        let selector = params.selector || params.container;
+        // {container, word}
+        if (selector && params.word) {
+            var element = self.query(selector);
+            var editor = ace.edit(element);
+
+            var range = editor.find(params.word, {
+                wrap: true,
+                caseSensitive: true,
+                wholeWord: true,
+                regExp: false,
+                preventScroll: false // do not change selection
+            });
+            editor.session.selection.clearSelection();
+            editor.setOption("highlightActiveLine", true);
+
+
+            /* range.start.column = 0;
+            range.end.column = Number.MAX_VALUE;
+            //editor.session.replace(range, "x" + editor.session.getLine(range.start.row) + "x");
+            editor.selection.setRange(range); */
+        }
+    };
+
+
+    this.ace = function (params, selectorParams) {
+        // https://codepen.io/zymawy/pen/XwbxoJ
+        //self.log('code');
+        //self.log(params);
+        var selector = params.selector || params.container;
+        var container = selector || self.selector(selectorParams);
+
+        //paramsReplaced = self.cloneObject(params);
+        //paramsReplaced.value = self.actionResult(paramsReplaced.value);
+        var value = params.value;
+
+        // item from library
+        if (params.blocks && self.json.blocks)
+            if (self.json.blocks[params.blocks])
+                value = self.json.blocks[params.blocks];
+
+            else
+                self.log('"code" method can\'t find in "blocks" the element ' + params.blocks);
+        // json file
+        if (params.module) {
+            let moduleName = self.replaceProperties(params.module);
+            if (moduleName && self.modules[moduleName] !== undefined) {
+                value = self.modules[moduleName];
+
+                /* self.log('value');
+                self.log(value);
+                self.log(value); */
+            }
+            else
+                self.log('"code" method can\'t find the file ' + params.file);
+        }
+        if (params.var)
+            if (self.json.var)
+                value = self.var(params.var);
+
+            else
+                self.log('"code" method can\'t find the variable ' + params.blocks);
+
+        var element = self.query(container);
+        //var containerId = $(container).attr('id');
+        //self.log('containerId');
+        //self.log(containerId);
+        //var containerId = $(container).attr('id');
+        if (element) {
+
+            //var containerId = self.attribute(element, 'id'); // or assign a random unique id
+            var editor = ace.edit(element);
+
+            /* var keywordMapper = this.createKeywordMapper({
+                "tag" : 'div|ul|p|a|button|input|span|img|video|audio|source|figure|figcaption|textarea|iframe|table|thead|tbody|tfoot|tr|th|td|svg|small|h1|h2|h3|h4|h5|h6|form|form-group|label|select|option|optgroup|nav|lottie-player|qrcode|tab|model-viewer'
+            }, "identifier"); */
+            /*   var staticWordCompleter = {
+                    getCompletions: function(editor, session, pos, prefix, callback) {
+                        var wordList = ['div', 'ul', 'p', 'a', 'button', 'input', 'span', 'img', 'video', 'audio', 'source', 'figure', 'figcaption', 'textarea', 'iframe', 'table', 'thead', 'tbody', 'tfoot', 'tr', 'th', 'td', 'svg', 'small', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'form', 'form-group', 'label', 'select', 'option', 'optgroup', 'nav', 'lottie-player', 'qrcode', 'tab', 'model-viewer'];
+                        callback(null, wordList.map(function(word) {
+                            return {
+                                caption: word,
+                                value: word,
+                                meta: "static"
+                            };
+                        }));
+                
+                    }
+                }
+                
+                //langTools.setCompleters([staticWordCompleter])
+                // or
+                editor.completers = [staticWordCompleter] */
+            /* if (editor)
+                AceColorPicker.load(ace, editor); */
+            //var value = paramsReplaced.value; // else value = params;
+            if (!params.do || (params.do == 'set')) {
+
+                //var langTools = ace.require('ace/ext/language_tools');
+                if (params.theme)
+                    editor.setTheme(params.theme); // "ace/theme/monokai"
+                var editorMode = params.mode || "ace/mode/json";
+                editor.getSession().setMode(editorMode);
+
+                if (params.options)
+                    editor.setOptions(params.options);
+                //AceColorPicker.load(ace, editor, {hideDelay: 1000});
+                //import AceColorPicker from 'ace-colorpicker'; 
+                /* editor.getSession().setMode(editorMode, () => {
+                    AceColorPicker.load(ace); // , {hideDelay: 1000}
+                }); */
+                var editorStyle = self.extend({
+                    //background: "rgba(255,255,255,0)"
+                }, params.style);
+                //$(container).css(editorStyle); //editor.container.style
+                self.css({
+                    style: editorStyle
+                }, {
+                    selector: container
+                });
+
+                //var aceOptions = params.options;
+                /* var aceOptions = self.extend({
+                    fontSize: "12pt",
+                    selectionStyle: "line",
+                    //showGutter: false,
+                    highlightGutterLine: false,
+                    fixedWidthGutter: false,
+                    //vScrollBarAlwaysVisible: true,
+                    tabSize: 3,
+                    //readOnly: true,
+                    //enableBasicAutocompletion: false,
+                    //enableSnippets: false,
+                    //enableLiveAutocompletion: false,
+                }, params.options); */
+                // https://github.com/ajaxorg/ace/wiki/Configuring-Ace
+                var codeString;
+                if (typeof value == 'string')
+                    if (editorMode == "ace/mode/json")
+                        codeString = JSON.stringify(JSON.parse(value), null, '\t'); // json formatting
+
+                    else
+                        codeString = value;
+                else {
+                    if (editorMode == "ace/mode/json")
+                        codeString = JSON.stringify(value, null, '\t');
+                    else {
+                        var functionObj = self.docElement(value.function); //?
+                        var functionParams = value.params;
+                        codeString = functionObj(functionParams);
+                    }
+                }
+
+                // should be {lines:dividcode}
+                if (codeString) {
+                    var codeRows = codeString.split(/\r\n|\r|\n/).length;
+                    /* $(container).css({
+                        height: Number(21 * (codeRows)) + 'px'
+                    }); */
+                    /* self.log('element');
+                    self.log(element);
+                    self.log('container');
+                    self.log(container);
+                    self.log('codeRows');
+                    self.log(codeRows); */
+                    element.style.height = Number(21 * codeRows) + 'px';
+
+
+                    //element.querySelector('.ace_scroller').querySelector('.ace_content').height = Number(21 * codeRows) + 'px';
+                    /* self.css({
+                        style: {
+                            height: Number(21 * codeRows) + 'px'
+                        }
+                    }, {
+                        container: container
+                    }); */
+                    editor.setValue(codeString, -1); // -1 unselect the code
+
+
+
+                    //editor.renderer.updateFull(true);
+                    //AceColorPicker.load(ace, ace.edit(containerId));
+                    self.uiUpdate(); // resize event trigger
+
+
+                    // workaround known ACE bug (.ace_content element doesn't follow the height until window resize)
+                }
+
+                if (params.on) {
+
+                    var containerId = self.attribute(element, 'id'); // or assign a random unique id
+                    self.codeChangeFunctions[containerId] = params.on;
+                    //self.editorChangeFunctions[editor.id] = params.on;
+                    if (params.on.change) {
+                        editor.on('change', function (event, obj) {
+                            /* self.log('event');
+                            self.log(event);
+                            self.log('obj');
+                            self.log(obj); */
+                            if (self.isJson(obj.getValue())) {
+                                var code = JSON.parse(obj.getValue());
+                                var action = self.codeChangeFunctions[obj.container.id].change;
+                                //var methods = self.replaceResult(action, code);
+                                var methods = self.replaceResult(action, code);
+
+                                //var methods = self.replaceProperties(action, code); 
+                                // check on jsonic.io/play (methods is string instead of object)
+                                /* self.log('code');
+                                self.log(code);
+                                self.log('method');
+                                self.log(method);
+                                self.log('-------------'); */
+                                //self.do(methods);
+                                self.do(methods);
+                                //self.do(code, self.editorChangeFunctions[obj.id]);
+                                //var container = self.editorChangeFunctions[obj.id].change.container;
+                            } else {
+                                // syntax error
+                            }
+                            //self.do(self.editorChangeFunctions[obj.id].change, JSON.parse(obj.getValue()));
+                            //self.log(obj);
+                            //self.blocks(JSON.parse(obj.getValue()), {container: });
+                        });
+                    }
+
+                    // save key
+                    // https://michilehr.de/overwrite-cmds-and-ctrls-in-javascript
+                }
+
+
+            } else if (params.do == 'get') {
+                return JSON.parse(editor.getValue());
+
+            } else if (params.do == 'update') {
+
+                self.uiUpdate(); // resize event trigger
+
+
+                // workaround known ACE bug (.ace_content element doesn't follow the height until window resize)
+            } else if (params.do == 'search') {
+                if (params.word) {
+                    var range = editor.find(params.word, {
+                        wrap: true,
+                        caseSensitive: true,
+                        wholeWord: true,
+                        regExp: false,
+                        preventScroll: false // do not change selection
+                    });
+                    editor.session.selection.clearSelection();
+                    editor.setOption("highlightActiveLine", true);
+                    /* range.start.column = 0;
+                    range.end.column = Number.MAX_VALUE;
+                    //editor.session.replace(range, "x" + editor.session.getLine(range.start.row) + "x");
+                    editor.selection.setRange(range); */
+                }
+            } else if (params.do == 'find') {
+                // toggle
+                editor.execCommand('find');
+                //editor.searchBox.show();
+            } else if (params.do == 'copy') {
+                // Select the whole content of the editor
+                editor.selectAll();
+                // Store text that will be copied to clipboard
+                let copyText = editor.getCopyText();
+                // Verify if clipboard writing is allowed
+                isClipboardWritingAllowed().then(function (allowed) {
+                    // Write to clipboard if allowed
+                    if (allowed) {
+                        navigator.clipboard.writeText(copyText).then(function () {
+                            editor.getSession().selection.clearSelection();
+                            //self.log("Code copied!");
+                        });
+                    }
+                }).catch(function (err) {
+                    self.log("Cannot copy to clipboard", err);
+                });
+            } else {
+                self.log('"code" function requires value param');
+            }
+        } else {
+            self.log('"code" method can\'t select the container');
+            self.log('container');
+            self.log(container);
+            self.log('element');
+            self.log(element);
+        }
+
+    };
+
+    // TO DO: should be in the app var and reset on a new execution 
+    this.codeChangeFunctions = {};
+    this.editorChangeFunctions = {};
+    this.quillElements = {};
+
+    this.text = function (params, selectorParams, args) {
+        /*
+            {
+                "text": / "string": / textId -> textId   "{text:textId}"
+                "case": [up, down, capitalize]
+            }
+            */
+
+
+        /* if (Array.isArray(params)) {
+            for (var obj of params)
+                self.text(obj, selectorParams, args);
+        } else { */
+        var textKey;
+        var textCase;
+        var textArgs;
+        var textLang;
+        var langId;
+        var selector, element;
+        //var textAction;
+        if (typeof params == 'object') {
+
+            if (selectorParams && selectorParams.isConnected) { // Check if an element is attached to DOM
+                element = selectorParams;
+                //selector = self.dataStorage.get(element, 'selector');
+                //selector = element.getAttribute('data-selector');
+                selector = self.elementToSelector(element); // 1.0.12
+            } else {
+                selector = self.selector(self.extend({}, params, selectorParams));
+                element = self.query(selector);
+            }
+
+            // todo: REMOVE (check the menu)
+            //textAction = self.actionResult(params, textArgs);
+            //textAction = params;
+            //textKey = params.string; //  || params.text || params.title; // params.key to be removed?
+            textCase = params.case; // use text-transform uppercase lowercase capitalize
+            textArgs = params.args; // deve diventare args (secondo parametro) al posto di caseFunction
+
+
+            //langId = params.langId;
+            if (typeof params == 'object') {
+
+                textKey = params.key || params.string || params; //  || params.text || params.title; // params.key to be removed?
+
+
+
+
+
+
+                //textCase = params.case; // use text-transform uppercase lowercase capitalize
+                //textArgs = params.args; // deve diventare args (secondo parametro) al posto di caseFunction
+                //langId = params.langId;
+            } else {
+                textKey = params;
+            }
+
+            /* self.log('textKey');
+            self.log(textKey); */
+        } else if (typeof params == 'string') {
+            textKey = params;
+
+            /* self.log('textKey');
+            self.log(textKey); */
+            //textCase = caseFunction;
+            if (selectorParams) {
+                if (selectorParams.isConnected) { // Check if an element is attached to DOM
+                    element = selectorParams;
+                    selector = self.dataStorage.get(element, 'selector');
+                } else {
+                    selector = self.selector(selectorParams);
+                    element = self.query(selector);
+                }
+            } else {
+                // here when windowTitle += ' ' + self.text(page.title); // window title
+            }
+        }
+
+        if (typeof textKey == 'string') {
+
+            /* // TO DO: remove
+            if (textKey.startsWith('js:')) textKey = self.js(textKey.substr(3));
+            else if (textKey.startsWith('db:')) textKey = self.element({path: 'var.db.'+textKey.substr(3)});
+            else if (textKey.startsWith('var:')) textKey = self.element({path: 'var.'+textKey.substr(4)});
+            else if (textKey.startsWith('data:')) textKey = self.element({path: 'data.'+textKey.substr(5)});
+                else
+                // ----- */
+            /* console.log('textKey');
+            console.log(textKey); */
+            textKey = self.replaceProperties(textKey, textArgs);
+            /* console.log('textKey');
+            console.log(textKey); */
+        }
+
+        //self.log('selector');
+        //self.log(selector);
+        //self.log(selector.isConnected);
+        /* self.log('HOTSPOT');
+        self.log(params);
+        self.log(self.json.setup.language); */
+        if (params && params.lang) { // multi-language text
+
+            //self.log('params.lang definito');
+            textLang = self.langText(params.lang); // , langId
+
+            //textLang = params.lang[self.json.setup.language] || params.lang['en'] || params.lang[Object.keys[0]];
+            textLang = self.replaceProperties(textLang, textArgs);
+
+            /* self.log('textLang');
+            self.log(textLang);
+            self.log('element');
+            self.log(element); */
+            if (textCase) textLang = self.textCase(textLang, textCase);
+
+            //self.log('textLang');
+            //self.log(textLang);
+            if (element) {
+                element.textContent = textLang;
+                self.attribute(element, 'data-text', true); // textKey instead of lang?
+                self.dataStorage.set(element, 'params', params);
+                //$(selector).data('params', params);
+            }
+
+        } else {
+            //self.log('params.lang non definito');
+            //if (!textKey) textKey = params;
+            if (textKey) {
+                //textKey = self.compile(textKey, textArgs); // TO DO: verify
+                /* self.log('textKey');
+                self.log(textKey); */
+                //if (!textKey) alert(JSON.stringify(params));
+                //if (typeof textKey == 'object') {
+                //    textLang = JSON.stringify(textKey, null, '\t');
+                //} else {
+                //textLang = params.lang[self.json.setup.language] || params.lang['en'] || params.lang[Object.keys[0]];
+                if (textKey.lang) // multi-language text
+                    textLang = self.langText(textKey.lang); // , langId
+
+                else
+                    textLang = textKey;
+
+                /* self.log('textLang1');
+                self.log(textLang); */
+                textLang = self.replaceProperties(textLang, textArgs); // move after textLang = self.langText(textKey.lang);
+                if (textCase) textLang = self.textCase(textLang, textCase);
+
+                //}
+                /* self.log('textLang2');
+                self.log(textLang); */
+                //if (selector) { // set
+                if (element) { // set
+
+                    if (self.json.texts[textKey]) {
+                        // save data-text for lang change
+                        //$(selector).data('params', params);
+                        //$(selector).attr('data-text', textKey);
+                        self.attribute(element, 'data-text', true);
+                        self.dataStorage.set(element, 'params', params);
+                    }
+
+                    // obsolete      
+                    /* if (params.background) $(selector).css({'background': params.background});
+                    if (params.color) $(selector).css({'color': params.color});
+                    if (params.size) $(selector).css({'font-size': params.size}); */
+                    if (params.style)
+                        self.css({
+                            style: params.style
+                        }, {
+                            selector: selector
+                        });
+                    //$(selector).css(params.style);
+                    element.textContent = textLang; // put text in element
+
+
+                    //$(selector).text(textLang);
+                } else { // get
+                    return textLang;
+                }
+
+            } else {
+                /* self.log('"string" parameter required in text object');
+                self.log(params); */
+                return params;
+            }
+
+        }
+
+    };
+
+    var caseUp = function (string) {
+        return string.toUpperCase();
+    };
+
+    var caseDown = function (string) {
+        return string.toLowerCase();
+    };
+
+    var capitalize = function (string) {
+        return self.capitalize(string);
+    };
+
+    this.textCase = function (textParam, caseParam) {
+        if (textParam) {
+            var text = textParam;
+            switch (caseParam) {
+                case 'up':
+                    text = text.toUpperCase();
+                    break;
+
+                case 'down':
+                    text = text.toLowerCase();
+                    break;
+
+                case 'capitalize':
+                    text = self.capitalize(text);
+                    break;
+            }
+            return text;
+        } else {
+            self.log('textParam undefined in textCase');
+        }
+    };
+
+    /* this.textFit = function (selector,params) {
+        if (params.alignHoriz == undefined) {
+            params.alignHoriz = true;
+        }
+        if (params.alignVert == undefined) {
+            params.alignVert = true;
+        }
+        if (params.minFontSize) {
+            params.minFontSize = parseInt(params.minFontSize, 10); // remove px
+        }
+        if (params.maxFontSize) {
+            params.maxFontSize = parseInt(params.maxFontSize, 10); // remove px
+        }
+
+        // textFit va in errore se l'oggetto diventa invisibile
+        // mentre sta elaborando la dimensione del testo
+        if (!$(selector).children('span').hasClass('textFitted')) {
+            $(selector).each(function(i, obj) {
+                if ($(obj).is(":visible")
+                    && ($(obj).css("display") !== 'none')
+                    && ($(obj).css('width'))
+                    && ($(obj).css('height'))) {
+                    textFit($(obj), params);
+                }
+            });
+        }
+    } */
+    /*  this.data = function (path, value) {
+        if (!value) return self.json.var;
+    }
+
+    this.setvar = function (data) {
+        var = self.data();
+        self.data(data);
+    } */
+    // --------------
+    //  PAGES
+    // --------------
+    /* this.lastInteraction = function () {
+        // uso: self.lastInteraction().asMinutes()
+        var lastInteraction = 0;
+        if (var.touchTime) lastInteraction = moment(var.touchTime);
+        var thisMoment = moment();
+        var duration = moment.duration(thisMoment.diff(lastInteraction));
+        return duration
+    } */
+    // --------------
+    //  icons e
+    // --------------
+    /*         this.icons = this.icon = function (params, selectorParams, args) {
+            // { [container, class, value, id]
+            // [html, text, append, prepend] }
+    
+            if (Array.isArray(params)) {
+                    for (var index in params)
+                    {self.icons(params[index], selectorParams);}
+            } else {
+                if (params.items) {
+                    var itemsArray = params.items;
+                    delete params.items;
+                    for (var index in itemsArray) {
+                        self.icons(self.replaceItems(params, itemsArray[index]), selectorParams);
+                    }
+                } else {
+    
+                    //if (selectorParams) params = self.extend(params, selectorParams);
+    
+                    var paramsReplaced = self.replaceProperties(params, args);
+    
+                    self.log('icons');
+                    self.log('paramsReplaced');
+                    self.log(paramsReplaced);
+    
+                    if (paramsReplaced) {
+                        if (paramsReplaced.disabled == true)
+                            self.disableIcon(paramsReplaced, selectorParams);
+                        else if (paramsReplaced.disabled == false)
+                            self.enableIcon(paramsReplaced, selectorParams);
+                        else if (paramsReplaced.change)
+                            self.changeItem(paramsReplaced, selectorParams);
+                        else
+                            self.addItem(paramsReplaced, selectorParams);
+                    }
+    
+                    if (paramsReplaced.firebase) self.addFirebaseTag(paramsReplaced);
+    
+                    var selector = self.selector(self.extend(paramsReplaced, selectorParams));
+    
+                    if (paramsReplaced.span) // text near icon
+                        self.addTag(paramsReplaced, {container: selector});
+    
+                }
+            }
+        } */
+    /*         this.buttons = this.tab = function (params, selectorParams) {
+    
+            // { [container, class, value, id]
+            // [html, text, append, prepend] }
+            if (Array.isArray(params)) {
+                    for (var index in params)
+                        self.tab(params[index], selectorParams);
+            } else {
+                if (params.items) {
+                    var itemsArray = params.items;
+                    delete params.items;
+                    for (var index in itemsArray) {
+                        self.tab(self.replaceItems(params, itemsArray[index]), selectorParams);
+                    }
+                } else {
+    
+                    // se necessario, replaceProperties dovrebbe escludere il contenuto di events/action
+                    // in quanto verrà ripetuto sulle azioni in tempo reale solo dove necessario
+                    //params = self.replaceProperties(params);
+    
+                    if (!params.class) params.class = '';
+                    var classes = params.class.split(' ');
+                    
+                    if (params.change) {
+                        if (classes.includes('icon'))
+                            self.changeItem(params, selectorParams);
+                        else // if (classes.includes('tabs'))
+                            self.changeTab(params, selectorParams);
+                    } else {
+                        if (classes.includes('icon'))
+                            self.addItem(params, selectorParams);
+                        else // if (classes.includes('tabs'))
+                            self.addTab(params, selectorParams);
+                    }
+    
+                    if (params.firebase) self.addFirebaseTag(params);
+    
+                }
+            }
+        }
+    */
+    /*
+    this.replacePropertyNew = function (params, name, args) {
+        console.log('replacePropertyNew');
+        // like replaceProperties but only for {name:...} property
+        var paramsString;
+
+        if (typeof paramsString !== 'string') {paramsString = JSON.stringify(self.cloneObject(params));}
+        
+        // remove string quotes for object property
+        if (args && paramsString && paramsString.indexOf('{')>= 0) {
+        //if (args && paramsString && /{\w/.test(paramsString)) {
+            paramsString = paramsString.replace(/\"\{(\w+\:)?([\w\s\.\:]+)\}\"/g, function(match, p1, p2, offset, string) {
+                var value;
+                if (p1 && p1.endsWith(':')) {p1 = p1.slice(0, -1);}
+                console.log('match:'+match);
+                console.log('p1:'+p1);
+                console.log('p2:'+p2);
+                if (p1 == name || (!p1 && p2 == name)) {
+                    let nameFound = p1 || p2;
+                    let pathFound = (p1) ? p2 : undefined;
+                    console.log(nameFound+':'+pathFound);
+                    if (typeof args !== 'string') {
+                        //return self.replaceAll(self.stringify(args), '\"', '\'');
+                        return self.stringify(args);
+                    } else {
+                        return '"' + args + '"';
+                    }
+                } else
+                    return match;
+            });
+            //console.log('paramsString without quotes');
+            //console.log(paramsString);
+            paramsString = paramsString.replace(/\{(\w+\:)?([\w\s\.\:]+)\}/g, function(match, p1, p2, offset, string) {
+                var value;
+                if (p1 && p1.endsWith(':')) {p1 = p1.slice(0, -1);}
+                if (p1 == name || (!p1 && p2 == name)) {
+                    let nameFound = p1 || p2;
+                    let pathFound = (p1) ? p2 : undefined;
+                    console.log(nameFound+':'+pathFound);
+                    self.partSetup = args;
+                    if (pathFound) {
+                        value = self.docElement('self.partSetup.'+pathFound);
+                    } else {
+                        value = args;
+                    }
+                    console.log('value:'+value);
+                    delete self.partSetup;
+                } else {
+                    value = match
+                }
+                if (typeof value !== 'string') value = self.stringify(value);
+                return value;
+            });
+            if (self.isJsonString(paramsString)) {// (typeof params == 'object')
+                console.log('isJsonString');
+                var paramsObj = self.parse(paramsString);
+                return paramsObj;
+            } else {
+                console.log('NOT isJsonString');
+                console.log(paramsString);
+                // TO DO: log of wrong json string
+                return paramsString;
+            }
+        } else {
+            return params
+        }
+    }
+    */
+    this.replaceUndefined = function (params) {
+        let value, defaultValue;
+        //if (params.path == 'badge') alert();
+        if (typeof params.path !== undefined) {
+            if (params.path.indexOf('|') > 0)
+                [params.path, defaultValue] = params.path.split('|');
+            value = self.element({ path: params.path, root: params.root });
+        }
+        if (value == undefined || value == null) { // empty string is false
+            if (typeof defaultValue !== undefined)
+                value = defaultValue;
+            else {
+                if (params.removeUndefined) { //p1 == 'args' || p1 == 'selector') {
+                    value = ''; // remove undefined values
+                } else {
+                    value = params.match;
+                    self.log(value + ' not found', 'yellow');
+                }
+            }
+        } else {
+            //console.log('match:'+params.match);
+            //if (params.removeUndefined) value = '';
+        }
+        return value;
+    };
+    //value = self.replaceUndefined({match: '{'+match+'}', id:p1, removeUndefined: removeUndefined});
+    this.replaceProperties = function (params, args, removeUndefined) {
+        // TO DO: remove fieldsObj. can't find replaceProperties with 3 args
+        // the third parameter can be removeUndefined
+        // test with a firebase app like elio
+
+        var paramsString;
+        var paramOn, paramDo, paramSuccess, paramError, paramEvents, paramConfirm;
+        if (typeof params == 'string') {
+            paramsString = params;
+        } else {
+            //paramsString = JSON.stringify(params);
+            var paramsObj = self.cloneObject(params);
+            if (paramsObj) {
+                if (paramsObj.on) { paramOn = paramsObj.on; delete paramsObj.on; }
+                if (paramsObj.success) { paramSuccess = paramsObj.success; delete paramsObj.success; }
+                if (paramsObj.error) { paramError = paramsObj.error; delete paramsObj.error; }
+                if (paramsObj.events) { paramEvents = paramsObj.events; delete paramsObj.events; } // TO DO: remove
+                if (paramsObj.confirm) { paramConfirm = paramsObj.confirm; delete paramsObj.confirm; } // TO DO: check it
+                if (paramsObj.do) { paramDo = paramsObj.do; delete paramsObj.do; }
+            }
+            paramsString = JSON.stringify(paramsObj);
+        }
+        /* self.log("paramsString");
+        self.log(paramsString); */
+        if (paramsString && paramsString.indexOf('{') >= 0) {
+
+            paramsString = paramsString.replace(/\"\{([\w\s\.]+)\}\"/g, function (match, p1, offset, string) {
+                var value;
+                if (p1) {
+                    //self.log('p1:' + p1);
+                    //value = self.element({path: p1}); // || match;
+                    value = self.replaceUndefined({ match: '{' + match + '}', path: p1, removeUndefined: removeUndefined });
+                    if (value) {
+                        if (value.isConnected) return self.elementToSelector(value); // DOM element to CSS selector
+                        if (typeof value !== 'string')
+                            return self.stringify(value); // object or array to string (TO DO: check numbers)
+                        else {
+                            //console.warn('we are here');
+                            return '"' + value + '"';
+                        }
+                    }
+                    else
+                        return '""';
+                } else {
+                    return '""';
+                }
+            });
+
+            paramsString = paramsString.replace(/\{(\w+\:)?([\w\s\->|\/=\.:#&;,\[\]\']+)\}/g, function (match, p1, p2, offset, string) {
+                /*
+                        Firebase references may contain any unicode characters except:
+                        . (period)
+                        $ (dollar sign)
+                        [ (left square bracket)
+                        ] (right square bracket)
+                        # (hash or pound sign)
+                        / (forward slash)
+                    */
+
+                /* self.log("paramstring");
+                self.log(match, p1, p2); */
+                // self.log(match, p1, p2);
+                var value;
+                if (p1) {
+                    if (p1.endsWith(':')) {
+                        p1 = p1.slice(0, -1); // remove the final ":"
+
+
+                        // check if is a function name (in this.json.functions)
+                        if (self.functions[p1]) {
+                            //value = self.functions[p1](JSON.parse(p2));
+                            let funcArgs = p2.split('|');
+                            /* console.warn('p2');
+                            console.warn(p2);
+                            console.warn('funcArgs');
+                            console.warn(funcArgs); */
+                            // if Number(funcArgs[i]) == funcArgs[i] -> funcArgs[i] = Number(funcArgs[i]);
+                            value = self.function({ name: p1, arguments: [funcArgs] });
+                        } else {
+                            switch (p1) {
+
+                                /* case 'hasClass':
+                                    var element = document.querySelector(p2);
+                                    if (p3)
+                                        value = self.hasClass(el,p3);
+                                    else
+                                        value = false; el:selector.class (esiste l'elemento selector.class o l'elemento selector ha la classe class)
+                                break; */
+                                // 'isVisible', 'isHidden', 'isDisplay', 'inViewport', 'outViewport', 'notClass', 'hasClass'
+                                // hasClass da aggiungere come funzione css
+                                // html markups
+                                // 'b:string' 'i:string' 'u:string' 'a:STRING|URL'
+                                /* case 'i': case 'b': case 'u': case 'strong': case 'em': case 'mark': case 'del': case 'ins': case 'sub': case 'sup':
+                                    value = '<'+p1+'>'+p2+'</'+p1+'>';
+                                break;
+                                
+                                case 'a':
+                                // example: "{a:text|href:....|target:_blank}"
+                                    let props = p2.split('|'); // or indexOf(':') prima occorrenza
+                                    let string = props.shift();
+                                    var propsString = '';
+                                    for (var prop of props) {
+                                        //let propArr = prop.split(':'), propName = propArr[0], propValue = propArr[1];
+                                        propsString += ' ' + prop;
+                                    }
+                                    if (propsString == '') propsString = ' href="'+string+'"';
+                                    value = '<a'+propsString+'>'+string+'</a>';
+
+                                    // https://stackoverflow.com/questions/1547899/which-characters-make-a-url-invalid
+                                    // https://www.w3schools.com/tags/tag_a.asp
+                                break;
+                                */
+                                // DOM properties
+                                case 'visible':
+                                    var element = document.querySelector(p2); // self.query(p2);
+                                    value = (element && self.isVisible(element));
+                                    //value = ($(p2).is(':visible'));
+                                    break;
+
+                                case 'number':
+                                    value = Number(p2);
+                                    break;
+
+                                case 'string':
+                                    value = String(p2);
+                                    break;
+
+                                case 'js': // deprecated (too much special characters like {})
+                                    try {
+                                        value = eval(p2);
+                                    } catch (error) {
+                                        value = '';
+                                        self.log('javascript error on ' + p2);
+                                        self.log(error);
+                                    }
+                                    break;
+
+                                /* case 'item':
+                                    if (fieldsObj) {
+                                        //self.log('fieldsObj['+p2+']:'+fieldsObj[p2]);
+                                        value = fieldsObj[p2] || ''; //|| p2+'=NULL';
+                                    } else {
+                                        //self.log('p2:'+p2);
+                                        //self.log('fieldsObj == undefined');
+                                        value = '{'+p1+':'+p2+'}';
+                                    }
+                                break; */
+                                /* case 'item':
+                                case 'items':
+                                    value = self.docElement('self.json.items.'+p2);
+                                break; */
+                                /*  case 'frame':
+                                        var element = self.query(p2);
+                                        element.contentWindow
+                                    break; */
+                                /* case 'field':
+                                    if (fieldsObj) {
+                                        //self.log('fieldsObj['+p2+']:'+fieldsObj[p2]);
+                                        value = fieldsObj[p2] || ''; // || p2+'=NULL';
+                                    } else {
+                                        //self.log('p2:'+p2);
+                                        //self.log('fieldsObj == undefined');
+                                        value = '';
+                                    }
+                                break; */
+                                /* case 'setup':
+                                value = self.docElement('self.json.setup.'+p2) || match;
+                                break; */
+                                /*
+                                                            case 'setup':
+                                                                if (args) {
+                                                                    self.partSetup = args;
+                                                                    value = self.docElement('self.partSetup.'+p2);
+                                                                    delete self)Setup;
+                                                                } else {
+                                                                    value = '';
+                                                                }
+                                                            break; */
+                                case 'wp':
+                                case 'wordpress':
+                                    // TO DO: should get/set data with jsonic.get/setWordpressData
+                                    // setWordpressData can be done automatically in the init
+                                    value = self.docElement('self.json.setup.wordpress.' + p2) ?? match;
+                                    //alert(value);
+                                    //if (value.indexOf('"') >= 0) 
+                                    //    value = self.replaceAll(value, '"', '\\"');
+                                    // the first should replace only " and not \" but it doesn't works
+                                    //value = value.replaceAll(/([^\\\"])\"/g, '$1\\"');
+                                    break;
+
+                                case 'plugins':
+                                    value = self.json.resources.pluginsFunctions[p2];
+                                    if (value && !Array.isArray(value)) value = [value];
+                                    else value = [];
+                                    /* self.log('plugins');
+                                    self.log('value');
+                                    self.log(value); */
+                                    /* value = plugins;
+                                    for (plugin of plugins) {
+                                        value = self.json.resources.pluginsFunctions[p2].name || 'unknown plugin required';
+                                    } */
+                                    break;
+
+                                case 'database':
+                                case 'db':
+                                    value = self.docElement('self.json.var.db.' + self.replaceProperties(p2, args));
+                                    break;
+
+                                // shorteners (useful?)
+                                case 'media': // or m or src
+                                    if (self.json.setup && self.json.data.media)
+                                        value = self.docElement('self.json.data.media.' + p2) || match;
+
+                                    else
+                                        value = match;
+                                    break;
+
+                                case 'color': // or col
+                                    if (self.json.data && self.json.data.colors)
+                                        value = self.docElement('self.json.data.colors.' + p2) || match;
+
+                                    else
+                                        value = match;
+                                    break;
+
+                                case 'class': // or cla
+                                    if (self.json.data && self.json.data.class)
+                                        value = self.docElement('self.json.data.class.' + p2) || match;
+
+                                    else
+                                        value = match;
+                                    break;
+
+                                case 'text':
+                                    value = self.langText(p2);
+                                    break;
+
+                                case 'param':
+                                    value = self.params[p2] || ''; // || p2+'=NULL';
+                                    break;
+
+                                case 'height':
+                                    /* self.log('{height:p2}');
+                                    self.log('p2');
+                                    self.log(p2); */
+                                    var element = document.querySelector(p2); // self.query(p2);
+                                    if (element) // && self.isVisible(element)
+                                        //value = getComputedStyle(element, null).height;
+                                        value = element.offsetHeight + 'px';
+
+
+
+                                    //if ($(p2).is(':visible'))
+                                    //value = $(p2).height() + 'px'
+                                    else
+                                        value = '0px';
+                                    break;
+
+                                case 'offsetWidth':
+                                    var element = document.querySelector(p2); // self.query(p2);
+                                    if (element) // && self.isVisible(element)
+                                        //value = getComputedStyle(element, null).height;
+                                        value = element.offsetWidth;
+
+
+
+                                    //if ($(p2).is(':visible'))
+                                    //value = $(p2).height() + 'px'
+                                    else
+                                        value = '0';
+                                    break;
+
+                                case 'width':
+                                    var element = document.querySelector(p2); // self.query(p2);
+                                    if (element) // && self.isVisible(element)
+                                        //value = getComputedStyle(element, null).height;
+                                        value = element.offsetWidth + 'px';
+
+
+
+                                    //if ($(p2).is(':visible'))
+                                    //value = $(p2).height() + 'px'
+                                    else
+                                        value = '0px';
+                                    break;
+
+                                case 'local':
+                                    value = self.methods.local.get(p2);
+                                    //self.log('{localStorage:cart}');
+                                    //self.log(value);
+                                    break;
+
+                                case 'ace':
+                                    var element = document.querySelector(p2);
+                                    if (element) {
+                                        var editor = ace.edit(element);
+                                        value = JSON.parse(editor.getValue());
+                                    }
+                                    //self.log('{localStorage:cart}');
+                                    //self.log(value);
+                                    break;
+
+                                /* case 'innerText':
+                                    var element = document.querySelector(p2);
+                                    value = (element) ? element.innerText : undefined;
+                                    self.log('p1:'+p1);
+                                    self.log('p2:'+p2);
+                                    self.log('value:'+value);
+                                    //.trisBox[data-value="0"]
+                                break;
+
+                                case 'innerHtml':
+                                    var element = document.querySelector(p2);
+                                    value = (element) ? element.innerHTML : undefined;
+                                break; */
+                                case 'shuffle':
+                                    value = self.element({ path: p2 });
+                                    value = self.methods.shuffle(value);
+                                    break;
+
+                                case 'select':
+                                case 'input':
+                                case 'value': // deprecated
+
+                                    var element = document.querySelector(p2); // self.query(p2);
+                                    value = (element) ? String(element.value || '') : '';
+
+                                    //value = $('#'+p2).val() || ''; //|| p2+'=NULL';
+                                    // input field value
+                                    // https://www.geeksforgeeks.org/html-value-attribute/
+                                    break;
+
+                                case 'user':
+                                    if (p2 == 'in') {
+                                        value = self.userIn();
+                                    } else if (p2 == 'out')
+                                        value = self.userOut();
+
+                                    else
+                                        value = self.user(p2) || match; //|| p2+'=NULL';
+                                    break;
+
+                                // can go in objects
+                                case 'length':
+                                    var varObj = self.element({ path: p2 }); // to get also js objects length
+
+                                    //var varObj = self.docElement('self.json.'+p2);
+                                    if (varObj)
+                                        if (typeof varObj == 'object')
+                                            value = Object.keys(varObj).length;
+
+                                        else
+                                            value = varObj.length;
+
+                                    else
+                                        self.log('' + p2 + ' is undefined');
+                                    break;
+
+                                case 'Date':
+                                case 'time':
+                                    if (p2 == 'timeZone') value = new Intl.DateTimeFormat().resolvedOptions().timeZone;
+                                    else if (p2 == 'weekday') value = self.weekday();
+                                    else if (p2 == 'stamp') value = self.getTimestamp();
+                                    else if (p2 == 'timestamp') value = self.getTimestamp();
+                                    else if (p2 == 'getTimestamp') value = self.getTimestamp();
+                                    else if (p2 == 'getDay') value = new Date().getDay();
+                                    else if (p2 == 'getDate') value = new Date().getDate();
+                                    else if (p2 == 'getMonth') value = new Date().getMonth();
+                                    else if (p2 == 'getFullYear') value = new Date().getFullYear();
+                                    else if (p2 == 'getTime') value = new Date().getTime(); // timestamp
+                                    else if (p2 == 'getSeconds') value = new Date().getSeconds();
+                                    else if (p2 == 'getMinutes') value = new Date().getMinutes();
+                                    else if (p2 == 'getHours') value = new Date().getHours();
+
+                                    // second, minute, hour, weekday, day, month, year
+                                    else value = p2 + '=NULL';
+                                    break;
+
+                                case 'now':
+                                    // ...
+                                    break;
+
+                                case 'month':
+                                    var month = (p2 == 'today' || p2 == undefined) ? new Date().getMonth() : Number(p2);
+                                    value = self.month(month);
+                                    break;
+
+                                case 'weekday': // format: long, short, narrow
+                                    var day = (p2 == 'today' || p2 == undefined) ? new Date().getDay() : Number(p2);
+                                    value = self.calendar({ index: Number(day), unit: 'weekday', format: 'long' });
+                                    break;
+
+                                case 'weekdayNarrow': // format: long, short, narrow
+                                    var day = (p2 == 'today' || p2 == undefined) ? new Date().getDay() : Number(p2);
+                                    value = self.calendar({ index: Number(day), unit: 'weekday', format: 'narrow' });
+                                    break;
+
+                                case 'weekdayShort': // format: long, short, narrow
+                                    var day = (p2 == 'today' || p2 == undefined) ? new Date().getDay() : Number(p2);
+                                    value = self.calendar({ index: Number(day), unit: 'weekday', format: 'short' });
+                                    break;
+
+                                case 'moment':
+                                    var timeFormat = (p2) ? p2 : '';
+                                    value = moment().format(timeFormat);
+                                    break;
+
+                                case 'dayjs': // TO DO: check
+                                    var timeFormat = (p2) ? p2 : '';
+                                    value = dayjs().format(timeFormat);
+                                    break;
+
+                                case 'Math':
+                                    value = self.Math(p2);
+                                    break;
+
+
+                                case 'action':
+                                case 'do':
+                                    self.log('do');
+                                    self.log('p2');
+                                    self.log(p2);
+                                    //value = self.do(p2); // || match; // TO DO: log error
+                                    value = self.do(p2); // || match; // TO DO: log error
+
+
+
+
+                                    //var functionName = self.docElement(p2);
+                                    //value = (functionName) ? functionName(functionName) : p2+'=NULL'
+                                    break;
+
+                                /* WITH ARGS */
+                                case 'method':
+                                    var method = self.element({ path: p2, root: self.methods });
+                                    if (method) {
+                                        value = method(args); // how to pass args? needs p3
+                                    } else {
+                                        value = match;
+                                    }
+                                    break;
+
+                                case 'function': // TO DO: remove
+                                    var func = self.element({ path: p2, root: self.functions });
+                                    if (func) {
+                                        value = func(args); // how to pass args? needs p3
+                                    } else {
+                                        value = match;
+                                    }
+                                    break;
+
+                                case 'on':
+                                    /* self.log('args');
+                                    self.log(args); */
+                                    if (args) {
+                                        self.onResult = args;
+                                        value = self.docElement('self.onResult.' + p2);
+                                        //alert(JSON.stringify(value));
+                                        delete self.onResult;
+                                    } else {
+                                        //alert(JSON.stringify(value));
+                                        value = match;
+                                    }
+                                    //value = ($(p2).is(':visible'));
+                                    break;
+
+                                case 'ajax':
+                                    if (args) {
+                                        self.ajaxResult = args; // -> self.json.var.ajaxData[self.json.var.ajaxId] = args.response
+
+                                        //alert(JSON.stringify(args));
+                                        value = self.docElement('self.ajaxResult.' + p2);
+
+                                        delete self.ajaxResult;
+                                    } else {
+                                        //alert(JSON.stringify(value));
+                                        value = match;
+                                    }
+                                    //value = ($(p2).is(':visible'));
+                                    break;
+
+                                /*   case 'function': // TO DO: remove
+                                    //self.log('function');
+                                    //self.log('p2');
+                                    //self.log(p2); // app.mac
+                                    value = self.function(p2) || match; // TO DO: log error
+
+                                    //var functionName = self.docElement(p2);
+                                    //value = (functionName) ? functionName(functionName) : p2+'=NULL'
+
+                                break; */
+                                case 'if': // TO DO: remove (can't manage spacial characters !<>'' etc)
+                                    p2 = self.replaceProperties(p2);
+                                    var ifArr = p2.split('|');
+                                    if (self.js(ifArr[0])) value = true;
+                                    if (ifArr.length > 1 && value) value = ifArr[1];
+                                    if (ifArr.length > 2 && !value) value = ifArr[2];
+                                    break;
+                                case 'random':
+                                    /* var random = p2.replace(/([^\-]+)\-([^\}]+)/g, function(match, n1, n2, offset, string) {
+                                        return Number(n1)+Math.round((n2-n1)*Math.random());
+                                    }); */
+                                    value = String(Math.floor(Number(p2) * Math.random()));
+                                    //self.log('random value: '+value);
+                                    //value = random; //p2+' format is wrong'
+                                    // CHANGE TO {math.random:max}
+                                    break;
+
+                                case 'getKey':
+                                case 'firebaseKey':
+                                    value = self.firebaseKey(p2);
+                                    // https://firebase.google.com/docs/reference/android/com/google/firebase/database/DataSnapshot
+                                    // CHANGE TO {data.exists:path/to/record}
+                                    //"alert.close" functions(alert, do:close)
+                                    break;
+
+                                case 'window':
+                                    /* try {
+                                        value = eval('window.'.p2);
+                                    } catch (error) {
+                                        self.log('javascript error on '+ p2);
+                                        value = match;
+                                    } */
+                                    //value = self.js('window.'.p2) || match;
+                                    value = self.docElement(p2) || match;
+                                    break;
+
+
+                                /* case 'args':
+                                    // often replaceProperties is called without args
+                                    value = match;
+                                break;  */
+                                default:
+                                    // ci finiamo dentro con {setup:value}
+                                    /* var element = document.querySelector(p2);
+                                    value = (element) ? element[p1] : '';
+                                    self.log('p1 ' + p1);
+                                    self.log('p2 ' + p2);
+                                    self.log('value ' + value);
+                                    if (!element)
+                                        self.log('can\'t match ' + match, 'color:red'); */
+                                    break;
+
+
+                                /*                         default:
+                                                        
+                                                        var node = self.docElement('self.json.'+p1);
+                                                        self.log('node');
+                                                        self.log(node);
+                                                        if (node) value = node[p2] // example: p1 = styles.colors p2 = colorName
+                                                        else value = '<{'+p1+':'+p2+'}>';
+                                                    break;
+                                */
+                            }
+                        } // not self.functions[p1]
+                    }
+                } else if (p2) {
+
+                    // can be a FUNCTION: from modules
+                    let keyPrefix = p2.split(' ')[0]; // /\s\./
+                    if (self.functions[keyPrefix]) {
+                        value = self.function({ name: keyPrefix });
+                        value = self.element({ path: p2, root: value }); // example: {pathFromHash 0}
+                        console.log(keyPrefix);
+                        console.log(value);
+                    }
+                    else
+                        value = self.replaceUndefined({ match: match, path: p2, removeUndefined: removeUndefined });
+                    //value = self.element({path: p2});
+                }
+
+                // value is a DOM element
+                if (value && value.isConnected) value = self.elementToSelector(value); // DOM element to CSS selector
+
+                if (!value) {
+                    // TO DO: should be (typeof value == undefined)
+                    // t's a critical change. It changes the result of "is": "'{data id}' !== ''"
+                    if (removeUndefined)
+                        value = '';
+                    else {
+                        if (typeof value == undefined)
+                            self.log(match + ' is undefined', 'yellow');
+                    }
+                }
+                if (typeof value !== 'string') value = self.stringify(value); // object or array to string (TO DO: check numbers)
+
+                return value;
+            });
+
+
+            // js property TO DO: check it
+            if (paramsString.startsWith('{js:') && paramsString.endsWith('}'))
+                paramsString = self.js(paramsString.substr(4, paramsString.length - 1 - 4));
+
+            //if (self.isJson(paramsString)) {// (typeof params == 'object')  
+            if (self.isJsonString(paramsString)) { // (typeof params == 'object')  
+                var paramsObj = self.parse(paramsString);
+
+                // restore event nodes
+                if (paramOn) paramsObj.on = paramOn;
+                if (paramDo) paramsObj.do = paramDo;
+                if (paramConfirm) paramsObj.confirm = paramConfirm;
+                if (paramSuccess) paramsObj.success = paramSuccess;
+                if (paramError) paramsObj.success = paramError;
+                if (paramEvents) paramsObj.events = paramEvents; // obsolete
+                return paramsObj;
+            } else {
+                // TO DO: log of wrong json string
+                //alert(paramsString);
+                /*  if (Array.isArray(self.parse(paramsString)))
+                        return self.parse(paramsString)
+                    else  */
+                return paramsString;
+            }
+        } else {
+            // restore event nodes
+            if (paramOn) params.on = paramOn;
+            if (paramDo) params.do = paramDo;
+            if (paramConfirm) params.confirm = paramConfirm;
+            if (paramSuccess) params.success = paramSuccess;
+            if (paramError) params.error = paramError;
+            if (paramEvents) params.events = paramEvents; // obsolete
+            return params;
+        }
+
+    };
+
+    /*      if (!value) undef = true;
+            if (undef) return undefined
+            else return params;
+    */
+    this.isJsonString = function (str) {
+        try {
+            JSON.parse(str);
+        } catch (e) {
+            return false;
+        }
+        return true;
+    };
+
+    this.isJson = function (item) {
+        item = typeof item !== "string" ? JSON.stringify(item) : item;
+        try {
+            item = JSON.parse(item);
+        } catch (e) {
+            return false;
+        }
+
+        if (typeof item === "object" && item !== null) {
+            return true;
+        }
+
+        return false;
+    };
+
+    this.replaceStringInObject = function (obj, stringToReplace, value) {
+        var paramsString, valueString;
+        if (typeof obj == 'string') paramsString = obj; else paramsString = JSON.stringify(obj);
+        if (typeof value == 'string') valueString = value; else valueString = JSON.stringify(value);
+        paramsString = self.replaceAll(paramsString, stringToReplace, valueString);
+        if (self.isJson(paramsString))
+            return self.parse(paramsString);
+
+        else
+            return paramsString;
+    };
+
+    /* this.replaceResult = function (params, args) {
+
+        paramsString = paramsString.replace(/(\"\s*)\{[result]\:(\w+)\}(\s*\")/g, function(match, p1, p2, p3, offset, string) {
+        });
+    }
+    */
+    this.replaceItems = function (params, item, name) {
+        // check this: http://mir.aculo.us/2011/03/09/little-helpers-a-tweet-sized-javascript-templating-engine/
+        // params: <li><{item:name}></li>, item: Vito or item: {name: Vito}
+        //var paramString = self.replaceProperties(params, undefined, item);
+        var paramsString;
+        var specialPattern;
+        var itemName = name || 'item';
+        /*  if (name) {
+                self.log('replaceItems');
+                self.log('params');
+                self.log(params);
+                self.log('item');
+                self.log(item);
+                self.log('name');
+                self.log(name);
+            }  */
+        if (typeof params == 'string') paramsString = params; else paramsString = JSON.stringify(params);
+
+        /* paramsString = paramsString.replace(/\{item\}/g, function(match, p1, offset, string) {
+
+            var value;
+        
+            if (item) {
+                value = item;
+            } else {
+                value = '';
+            }
+        
+            if (typeof value == 'object') value = self.stringify(value);
+            return value;
+        }); */
+        if (typeof item == 'object' || Array.isArray(item)) { //  || Array.isArray(item) not needed
+            paramsString = self.replaceAll(paramsString, '"{' + itemName + '}"', JSON.stringify(item));
+            for (let key in item) {
+                if (typeof item[key] == 'object')
+                    paramsString = self.replaceAll(paramsString, '"{' + itemName + ':' + key + '}"', JSON.stringify(item[key]));
+
+                else
+                    paramsString = self.replaceAll(paramsString, '{' + itemName + ':' + key + '}', item[key]);
+            }
+        } else {
+            paramsString = self.replaceAll(paramsString, '{' + itemName + '}', String(item));
+        }
+        //if (itemName == 'hour') alert(paramsString);
+        /* if (itemName !== 'item') { // TO DO: remove
+            var propertyPattern = new RegExp('\{'+itemName+'\:([^\}]+)\}', 'g');
+            paramsString = paramsString.replace(propertyPattern, function(match, p1, p2, p3, offset, string) {
+
+
+                var value = self.docElement(p1, undefined, item);
+                if (value)
+                    return value
+                else
+                    return match;
+
+            });
+        } */
+        //specialPattern = new RegExp(/\"\{(\w+)\}\"/, "g"); 
+        // item: inside double quotes (to manage objects inside double string)
+        //specialPattern = new RegExp(`(\")\{${itemName}\:(\w+)\}(\")`, 'g');
+        //paramsString = paramsString.replace(specialPattern, function(match, p1, p2, p3, offset, string) {
+        //specialPattern = new RegExp('(\"\s*)\{'+itemName+'\:(\w+)\}(\s*\")', 'g');
+        paramsString = paramsString.replace(/(\"\s*)\{item\:(\w+)\}(\s*\")/g, function (match, p1, p2, p3, offset, string) {
+
+            var value;
+
+            if (item)
+                value = item[p2] || '';
+
+            else
+                value = '';
+
+            if (typeof value == 'object')
+                value = self.stringify(value);
+            else if (Array.isArray(value))
+                value = value;
+
+            else
+                value = p1 + value + p3; // p1 and p3 are the " matched by (\"\s*) and (\s*\")
+
+            return value;
+        });
+
+        /*
+        specialPattern = new RegExp('\{'+itemName+'\:([^\}]*)\}', 'g');
+        paramsString = paramsString.replace(specialPattern, function(match, p2, offset, string) {
+        //paramsString = paramsString.replace(/\{item\:([^\}]*)\}/g, function(match, p2, offset, string) {
+
+            var value;
+        
+            if (item)
+                value = item[p2] || '';
+            else
+                value = '';
+        
+            if (typeof value == 'object')
+                value = self.stringify(value);
+
+            return value;
+        }); */
+        if (self.isJson(paramsString))
+            return self.parse(paramsString);
+
+        else
+            return paramsString;
+        //if (typeof params == 'object') return self.parse(paramsString); else return paramsString;
+    };
+
+    /* this.replaceItems = function (objWithNames, name) {
+        //self.log('replaceItems');
+        var paramString = self.stringify(objWithNames);
+        //self.log(paramString);
+        if (!name) name = '';
+        paramString = self.replaceAll(paramString, '{item}', name);
+        //self.log(paramString);
+        //paramString = self.replaceTags({text:paramString});
+        //self.log(paramString);
+        //paramString = self.replaceProperties(paramString);
+        //self.log(paramString);
+        if (typeof objWithNames == 'object') return self.parse(paramString); else return paramString;
+    } */
+    this.color = function (params, args) {
+        var paramsReplaced = self.replaceProperties(params, args);
+        //if (self.json.styles.colors)
+        //    return self.json.styles.colors[paramsReplaced];
+        if (self.json.data && self.json.data.colors)
+            return self.json.data.colors[paramsReplaced];
+    };
+
+    // ----------------------------
+    // ELEMENT METHODS
+    // ----------------------------
+    this.empty = function (params) {
+        /* self.log('empty');
+        self.log(params); */
+        var el = self.query(params);
+        if (el) {
+            while (el.firstChild)
+                el.removeChild(el.firstChild);
+        } else {
+            self.log('"empty" is unable to select element');
+            self.log(params);
+        }
+    };
+
+    this.isArray = function (value) {
+        return Array.isArray(self.js(value));
+    };
+
+    this.isVisible = function (el) {
+        return (el.style.display !== 'none' && !self.hasClass(el, 'd-none'));
+    };
+
+    this.isHidden = function (el) {
+        return (el.offsetParent === null);
+    };
+
+    this.isDisplay = function (el, displayValue) {
+        //var style = window.getComputedStyle(el);
+        /* self.log('isDisplay');
+        self.log('el.style');
+        self.log(el.style);
+        self.log('displayValue');
+        self.log(displayValue); */
+        return (el.style.display === displayValue);
+    };
+
+    this.inViewport = function (el) {
+        const rect = el.getBoundingClientRect();
+        return (
+            rect.top >= 0 &&
+            rect.left >= 0 &&
+            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+            rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+
+        );
+    };
+
+    this.outViewport = function (el) {
+        return !self.outViewport(el);
+    };
+
+    this.notClass = function (el, className) {
+        return !self.hasClass(el, className);
+    };
+
+    this.hasClass = function (el, className) {
+        if (el.classList)
+            return el.classList.contains(className);
+
+        else
+            return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'));
+    };
+
+    this.addClass = function (el, className) {
+        if (el.classList)
+            el.classList.add(className);
+        else if (!self.hasClass(el, className)) el.className += " " + className;
+    };
+
+    this.removeClass = function (el, className) {
+        if (el.classList)
+            el.classList.remove(className);
+        else if (self.hasClass(el, className)) {
+            var reg = new RegExp('(\\s|^)' + className + '(\\s|$)');
+            el.className = el.className.replace(reg, ' ');
+        }
+    };
+
+    this.toggleClass = function (el, className) {
+        if (self.hasClass(el, className))
+            self.removeClass(el, className);
+
+        else
+            self.addClass(el, className);
+    };
+
+    this.choose = this.select = function (params, selectorParams, args) {
+        // "choose OR options / "select" is deprecated because select is an html tag
+        // {selection: selection class, id: selected id}
+        // or: choosed, choosable, selection
+        // or: selector, selectable, selection
+        // or: opted, options, selection
+        /* self.log('select');
+        self.log('params');
+        self.log(params);
+        self.log('args');
+        self.log(args);  */
+        if (Array.isArray(params)) {
+            for (var obj of params)
+                self.choose(obj, args);
+        } else {
+
+            //if (selectorParams) params = self.extend({}, selectorParams, params);
+            var selId, selClass, selValue;
+
+            selValue = params['data-value']; // || params.value
+            if (params.id) selId = self.replaceProperties(params.id, args);
+            if (params.class) selClass = self.replaceProperties(params.class, args);
+            if (selValue) selValue = self.replaceProperties(selValue, args);
+
+            //var selector = self.selector(params.selector, undefined, true) || self.selector(selectorParams, undefined, true);
+            if (params.selection) {
+
+                var selectionClass = params.selection;
+                /* self.log('selClass');
+                self.log(selClass);
+                self.log('selValue');
+                self.log(selValue);
+                self.log('selectionClass');
+                self.log(selectionClass); */
+                var selector = self.selector({ class: selClass });
+                var elements = document.querySelectorAll('.' + selClass); // convert to any string selector (move the point to the code)
+                elements.forEach(function (element, index) {
+                    self.removeClass(element, selectionClass);
+                });
+
+                //$(selector).removeClass(selectionClass);
+                if (selId || selValue) {
+                    var selector = self.selector({ id: selId, class: selClass, 'data-value': selValue });
+
+                    //self.log('selector');
+                    //self.log(selector);
+                    //var elements = self.query(selector);
+                    //self.log('elements');
+                    //self.log(elements);
+                    //if (elements)
+                    //self.addClass(elements, selectedIconClass);
+                    var elements = document.querySelectorAll(selector);
+                    elements.forEach(function (element, index) {
+                        self.addClass(element, selectionClass);
+                    });
+                }
+            } else {
+                /* self.log('select');
+                self.log('selClass');
+                self.log(selClass);
+                self.log('selValue');
+                self.log(selValue);
+                self.log('selectionClass');
+                self.log(selectionClass); */
+                self.hide({
+                    "selector": {
+                        "class": selClass
+                    }
+                });
+                self.show({
+                    "selector": {
+                        "id": selId,
+                        "class": selClass,
+                        "data-value": selValue
+                    }
+                });
+
+                //self.log('selectselection" class parameter is required in "select" object');
+            }
+
+            //self.updateCodeEditors(); // workaround known ACE bug
+            self.uiUpdate(); // resize event trigger
+
+        }
+
+    };
+
+    /* this.select = function (params, selectorParams) {
+        // { [container, class, value, id]
+        self.log('self.select');
+        if (Array.isArray(params)) {
+                for (var index in params)
+                self.choose(params[index], selectorParams);
+        } else {
+
+            if (selectorParams) params = self.extend({}, selectorParams, params);
+
+            params = self.replaceProperties(params);
+            //params = self.replaceTags({text:params});
+            
+            self.selectItem(params);
+        }
+    }
+*/
+    this.toggle = function (params, selectorParams, args) {
+        self.log('toggle');
+        self.log(params);
+        if (Array.isArray(params)) {
+            for (var index in params)
+                self.toggle(params[index], selectorParams, args);
+        } else {
+            var selector;
+            if (typeof params == 'string')
+                selector = params;
+
+            else
+                selector = self.selector(params.selector || params.container, undefined, true) || self.selector(selectorParams, undefined, true);
+            var element = self.query(selector);
+            /* self.log('selector');
+            self.log(selector);
+            self.log('element');
+            self.log(element);
+            self.log('self.isVisible(element)');
+            self.log(self.isVisible(element)); */
+            //if ($(selector).is(":visible"))
+            if (self.isVisible(element))
+                //self.fadeOut(params, selectorParams);
+                self.out(params, selectorParams, args);
+
+            else
+                //self.fadeIn(params, selectorParams);
+                self.in(params, selectorParams, args);
+            //$(selector).toggle(500); // jquery bugs // , self.resizeEvent
+        }
+    };
+
+    this.in = function (params, selectorParams, args) {
+
+        if (Array.isArray(params)) {
+            for (var index in params)
+                self.in(params[index], selectorParams, args);
+        } else {
+            var selector;
+            if (typeof params == 'string')
+                selector = params;
+
+            else
+                selector = self.selector(params.selector || params.container, undefined, true) || self.selector(selectorParams, undefined, true);
+
+            var transition = params.transition || 'fadeIn';
+            var duration = params.duration || '500ms';
+
+            //self.log('selector');
+            //self.log(selector);
+            var start = [{
+                "show": {
+                    "selector": selector,
+                }
+            }];
+            var end = [
+                {
+                    "do": self.resizeEvent
+                }
+            ];
+            if (params.on && params.on.start)
+                start.push(params.on.start);
+            if (params.on && params.on.end)
+                end.push(params.on.end);
+
+            var animation = {
+                "animate": {
+                    "selector": selector,
+                    "transition": transition,
+                    "duration": duration,
+                    "on": {
+                        "start": start,
+                        "end": end
+                    }
+                }
+            };
+            //self.do(animation, args);
+            self.do(animation, undefined, args);
+            //self.resizeEvent();
+        }
+
+    };
+
+    this.out = function (params, selectorParams, args) {
+
+        if (Array.isArray(params)) {
+            for (var index in params)
+                self.out(params[index], selectorParams);
+        } else {
+
+            var selector;
+            if (typeof params == 'string')
+                selector = params;
+
+            else
+                selector = self.selector(params.selector || params.container, undefined, true) || self.selector(selectorParams, undefined, true);
+
+            var transition = params.transition || 'fadeOut';
+            var duration = params.duration || '500ms';
+
+            var start = [];
+            var end = [
+                {
+                    "hide": {
+                        "selector": selector,
+                    }
+                },
+                {
+                    "do": self.resizeEvent
+                }
+            ];
+            if (params.on && params.on.start)
+                start.push(params.on.start);
+            if (params.on && params.on.end)
+                end.push(params.on.end);
+
+            var animation = {
+                "animate": {
+                    "selector": selector,
+                    "transition": transition,
+                    "duration": duration,
+                    "on": {
+                        "start": start,
+                        "end": end
+                    }
+                }
+            };
+            //self.do(animation, args);
+            self.do(animation, undefined, args);
+        }
+    };
+
+    this.show = function (params, selectorParams, args) {
+        if (Array.isArray(params)) {
+            for (var index in params)
+                self.show(params[index], selectorParams);
+        } else {
+            var selector;
+            if (typeof params == 'string')
+                selector = params;
+
+            else
+                selector = self.selector(params.selector || params.container, undefined, true) || self.selector(selectorParams, undefined, true);
+            var elements = self.queryAll(selector);
+            elements.forEach(function (element, index) {
+                self.removeClass(element, 'hidden');
+                self.removeClass(element, 'opacity-0');
+                self.removeClass(element, 'invisible');
+                self.removeClass(element, 'd-none'); // bootstrap
+
+                //element.style.display = 'block';
+                element.style.visibility = 'visible';
+                /*
+                container = element.getAttribute('data-selector');
+                //container = self.dataStorage.get(element, 'selector');
+                var action = [
+                    {
+                        "if": {
+                            "container": container,
+                            "hasClass": "opacity-0",
+                            "then": {
+                                "attr": {
+                                    "container": container,
+                                    "removeClass": "opacity-0"
+                                }
+                            }
+                        }
+                    },
+                    {
+                        "if": {
+                            "container": container,
+                            "hasClass": "invisible",
+                            "then": {
+                                "attr": {
+                                    "container": container,
+                                    "removeClass": "invisible" // bootstrap & tailwind
+                                }
+                            }
+                        }
+                    },
+                    {
+                        "if": {
+                            "container": container,
+                            "hasClass": "d-none",
+                            "then": {
+                                "attr": {
+                                    "container": container,
+                                    "removeClass": "d-none" // bootstrap
+                                }
+                            }
+                        }
+                    },
+                    {
+                        "if": {
+                            "container": container,
+                            "hasClass": "hidden",
+                            "then": {
+                                "attr": {
+                                    "container": container,
+                                    "removeClass": "hidden" // taliwind
+                                }
+                            }
+                        }
+                    },
+                    {
+                        "if": { // should be if style.display == none
+                            "container": container,
+                            "isDisplay": "none",
+                            "then": {
+                                "attr": {
+                                    "container": container,
+                                    "style": {
+                                        "display": ""
+                                    }
+                                }
+                            }
+                        }
+                    }
+                ];
+                //element.style.display = ' ';
+                //alert(JSON.stringify(element.style));
+                if (element.style.visibility && element.style.visibility !== 'visible')
+                    element.style.visibility = 'visible';
+                //self.do(action, args);
+                //self.do(action, undefined, args);
+                self.do(action, undefined, args); */
+            });
+        }
+    };
+
+    this.hide = function (params, selectorParams, args) {
+        if (Array.isArray(params)) {
+            for (var index in params)
+                self.hide(params[index], selectorParams);
+        } else {
+            var selector;
+            if (typeof params == 'string')
+                selector = params;
+
+            else
+                selector = self.selector(params.selector || params.container, undefined, true) || self.selector(selectorParams, undefined, true);
+            var elements = self.queryAll(selector);
+            elements.forEach(function (element, index) {
+                self.addClass(element, 'hidden');
+
+                /* container = element.getAttribute('data-selector');
+                var action = [
+                    {
+                        "attr": {
+                            "container": container,
+                            "addClass": "d-none" // bootstrap (to be removed)
+                        }
+                    },
+                    {
+                        "attr": {
+                            "container": container,
+                            "addClass": "hidden" // tailwind
+                        }
+                    }
+                ];
+                //self.do(action, args);
+                self.do(action, undefined, args); */
+            });
+        }
+    };
+
+
+    /* this.fadeIn = function (params, selectorParams, args) {
+        //self.log('fadeIn');
+        //self.log(params);
+        if (Array.isArray(params)) {
+                for (var index in params)
+                self.fadeIn(params[index], selectorParams);
+        } else {
+            //params.container = params.container || self.selector(selectorParams);
+            //var selector = self.selector(params);
+            var selector = self.selector(self.extend({}, params, selectorParams), {}, true);
+            var duration = params.duration || 500;
+            var done = (params.done) ? function  () {
+                self.resizeEvent();
+                self.do(params.done);
+            } : null;
+            $(selector).stop().fadeIn(duration, done);
+        }
+    }
+
+    this.fadeOut = function (params, selectorParams, args) {
+        //self.log('fadeOut');
+        //self.log(params);
+        // add onComplete and duration
+        if (Array.isArray(params)) {
+                for (var index in params)
+                self.fadeOut(params[index], selectorParams);
+        } else {
+            //params.container = params.container || self.selector(selectorParams);
+            //var selector = self.selector(params);
+            var selector = self.selector(self.extend({}, params, selectorParams), {}, true);
+            var duration = params.duration || 500;
+            var done = (params.done) ? function  () {
+                self.do(params.done);
+            } : null;
+            $(selector).stop().fadeOut({
+                duration: duration,
+                done: function  () {
+                    self.resizeEvent();
+                    self.do(params.done);
+                }
+            });
+        }
+    } */
+    /*     this.show = function (params, selectorParams, args) {
+            //self.log('show');
+            //self.log(JSON.stringify(params));
+            if (Array.isArray(params)) {
+                    for (var index in params)
+                    self.show(params[index], selectorParams);
+            } else {
+                //params.container = params.container || self.selector(selectorParams);
+                //var selector = self.selector(params);
+                var selector = self.selector(self.extend({}, params, selectorParams), {}, true);
+                //self.log('selector');
+                //self.log(selector);
+                $(selector).show();
+                self.resizeEvent();
+            }
+        }
+    
+        this.hide = function (params, selectorParams, args) {
+            //self.log('hide');
+            //self.log(JSON.stringify(params));
+            if (Array.isArray(params)) {
+                    for (var index in params)
+                    self.hide(params[index], selectorParams);
+            } else {
+                //params.container = params.container || self.selector(selectorParams);
+                //var selector = self.selector(params);
+                var selector = self.selector(self.extend({}, params, selectorParams), {}, true);
+                //self.log('selector');
+                //self.log(selector);
+                $(selector).hide();
+                self.resizeEvent();
+            }
+        } */
+    this.matchMedia = function (mediaAction, mediaEvent) {
+        const mediaQuery = window.matchMedia(mediaEvent);
+        mediaQuery.addListener(function (e) {
+            /*  self.log('matchMedia');
+                self.log('e');
+                self.log(e); */
+            if (e.matches) {
+                self.do(mediaAction);
+                //self.do(mediaAction);
+            }
+        });
+        //self.do(mediaAction);
+    };
+
+
+    /*     this.firebaseEventAction = function (newObj) {
+    
+            var path = newObj.path;
+            delete newObj.path;
+    
+            document.querySelectorAll('[data-firebase="'+path+'"]').forEach(function (element, index) {
+    
+                var pathString = 'self.json.var.db.' + self.replaceAll(element.getAttribute('data-firebase'), '/', '.'); // data('firebase')
+                var dbObj = self.docElement(pathString);
+    
+                var firebaseValue = newObj[element.getAttribute('data-value')]; // TODO: not works for nested nodes
+                var container = element.getAttribute('data-selector');
+                //var template = element.getAttribute('data-template');
+                var template = self.dataStorage.get(element, 'data-template');
+    
+                if (element.tagName == 'UL') { // se $(this) è un ul
+    
+                    var liTemplate = template.li;
+                    //$(container).empty();
+                    element.innerHTML = '';
+                    
+                    var items = newObj;
+                    for (itemKey in items) {
+                        var item = items[itemKey];
+                        item.key = itemKey;
+                        //if (dbPath == 'lessons')
+                        //prompt(JSON.stringify(liTemplate));
+                        var dbParams = self.replaceItems(liTemplate, item, 'item') || '';
+                        // var dbParams = self.replaceProperties(liTemplate, undefined, item) || '';
+                        self.li(dbParams, {container: container});
+                    }
+    
+                //} else if ( $(element).is('span') || $(element).is('p')) {
+                } else if (element.tagName == 'SPAN' || element.tagName == 'P') {
+    
+                    //$(element).text(firebaseValue);
+                    element.textContent = firebaseValue;
+                        
+                } else { // se $(this) non è un ul
+    
+                    if (template.blocks || template.html) {
+                        var blocksTemplate = template.html || template.blocks;
+                        
+                        //$(container).empty();
+                        element.innerHTML = '';
+                        
+                        var items = newObj;
+                        self.log('newObj');
+                        self.log(newObj);
+                        for (itemKey in items) {
+                            var item = items[itemKey];
+                            item.key = itemKey;
+                            var dbParams = self.replaceProperties(blocksTemplate, undefined, item) || '';
+    
+                            self.html(dbParams, {container: container});
+                        }
+                    }
+    
+                    if (template.init) self.do(template.init);
+    
+                }
+    
+    
+            });
+        }; */
+    /*     self.jsonic = function () {
+        } */
+    this.addFirebaseTag = function (params) {
+        // self.log('addFirebaseTag');
+        var dataObj = params.database;
+
+        if (dataObj) {
+
+            dataObj = self.replaceProperties(dataObj);
+            /* self.log('dataObj');
+            self.log(dataObj); */
+            //var path = self.replaceTags({text:params.firebase});
+            var path, success;
+            if (typeof dataObj == 'string') {
+                path = dataObj;
+            } else {
+                path = dataObj.path;
+                success = dataObj.success;
+            }
+
+            if (path) {
+                var selector = self.selector(params, undefined, false);
+                //var element = self.query(selector);
+                var elements = self.queryAll(selector);
+                //var elements = document.querySelectorAll(selector);
+                if (elements)
+                    elements.forEach(function (element, index) {
+
+                        var listenerObj = {
+                            path: path
+                            //success: dataObj.success
+                        };
+
+                        var elementsDataPath = document.querySelectorAll('[data-firebase="' + path + '"]');
+
+                        //if ($('[data-firebase="'+path+'"]').length == 0) {
+                        if (elementsDataPath.length == 0) {
+                            listenerObj.action = [
+                                /*  {
+                                        "firebaseEvent.action": {}  // should use self.get function to parse "self"
+                                        // todo: remove "jsonic". The function firebaseEventAction can be stored in self.do (or?)
+                                    } */
+                            ];
+
+                            if (dataObj.success)
+                                listenerObj.action.push(dataObj.success);
+
+                        }
+
+                        //$(selector).attr('data-firebase', path);
+                        //$(selector).data('data-template', params);
+                        if (element) {
+                            element.setAttribute('data-firebase', path);
+                            self.dataStorage.set(element, 'data-template', params);
+                        } else {
+                            self.log('!element selector:' + selector + ' / firebase path:' + path);
+                            self.log('params');
+                            self.log(params);
+                        }
+
+                        //if (params.on && params.on.data) $(selector).data('ondata', params.on.data); // maestry
+                        if (dataObj.orderByChild !== undefined) listenerObj.orderByChild = dataObj.orderByChild;
+                        if (dataObj.equalTo !== undefined) listenerObj.equalTo = dataObj.equalTo;
+
+                        self.firebaseAddListener(listenerObj);
+                    });
+
+            } else {
+                self.log('data object requires path parameter');
+                self.log(params);
+            }
+        }
+    };
+
+    this.dbObject = function (path) {
+        var pathString = 'self.json.var.db.' + self.replaceAll(path, '/', '.');
+        return self.docElement(pathString);
+    };
+
+    this.only = function (permissions, user) {
+        // "visitor" or "only" 
+        if (user) {
+            return (user == self.user('uid'));
+        } else {
+            var permission = (permissions) ? String(permissions).split(',') : false;
+            return (!permission || (permissions.indexOf(self.userRole()) >= 0));
+        }
+    };
+
+    this.extendJsonFromElement = function (p) {
+        /* self.log('extendJsonFromElement');
+        self.log(p); */
+
+        var params = self.cloneObject(p);
+
+        // properties
+        if (params.resources) self.extendJson(self.json, { "resources": params.resources });
+        if (params.plugins) self.extendJson(self.json, { "plugins": params.plugins });
+        if (params.parts) self.extendJson(self.json, { "parts": params.parts });
+        if (params.blocks) self.extendJson(self.json, { "blocks": params.parts }); // obsolete
+        if (params.shortcuts) self.extendJson(self.json, { "shortcuts": params.shortcuts });
+        if (params.css) self.extendJson(self.json, { "css": params.css });
+        if (params.setup) self.extendJson(self.json, { "setup": params.setup });
+        if (params.data) self.extendJson(self.json, { "data": params.data });
+        if (params.var) self.extendJson(self.json, { "var": params.var });
+        if (params.texts) self.extendJson(self.json, { "texts": params.texts }); // maybe used in self.text
+
+
+        // can't be extended "setup" (is relative to the full app) and "on" (is relative to the element)
+    };
+
+
+    this.query = function (selector, element) {
+        //self.log('query: '+selector);
+        if (selector) {
+            if (typeof selector == 'object')
+                selector = self.selector(selector, undefined, true);
+
+            var routes = selector.split(/[ >]+/);
+            if (!element) element = document;
+
+            for (var index in routes) {
+
+                if (element && element[0]) element = element[0];
+
+                if (element && element.isConnected) {
+
+                    var route = routes[index];
+
+
+
+                    /* route.replace(/([^\s])\[/g, function(match, p1) { // -> .class [data-value=...]
+                        return p1 + ' ['
+                    }); */
+                    //self.log('route');
+                    //self.log(route);
+                    var routeParts = route.match(/(.*):eq\((\d*)\)/);
+
+                    //self.log('routeParts');
+                    //self.log(routeParts);
+                    if (routeParts) {
+                        var routeElement = String(routeParts[1]);
+                        var routeIndex = Number(routeParts[2]);
+
+                        if (routeElement.startsWith('.'))
+                            routeElement = '.' + self.classSelector(routeElement);
+
+                        //if (self.exist(routeElement))
+                        element = element.querySelectorAll(routeElement)[routeIndex];
+
+                        /* self.log('routeElement');
+                        self.log(routeElement);
+                        self.log('routeIndex');
+                        self.log(routeIndex); */
+                    } else {
+                        //if (self.exist(route))
+                        if (route.startsWith('.'))
+                            route = '.' + self.classSelector(route);
+                        element = element.querySelectorAll(route)[0];
+                    }
+                } else {
+                    element = undefined;
+                }
+            }
+            //element.innerHTML = 'test';
+            //element.style.display = 'none';
+            //self.log(element);
+            //if (element && !Array.isArray(element)) element = [element];
+            if (!element)
+                self.log('can\'t find the element "' + selector + '" ("query" function)');
+
+            return element;
+        } else {
+            //self.log('function "query" without selector parameters');
+            // BUG: many calls from addtag
+        }
+    };
+
+    /*     this.queryAllTest = function (selector, element) {
+            //self.log('query: '+selector);
+            if (selector) {
+    
+                //route = self.replaceAll(route, '[', ' [');
+                selector.replace(/([^\s])\[/g, function(match, p1) { // -> .class [data-value=...]
+                    return p1 + '['
+                });
+    
+    
+                var routes = selector.split(/[ >]+/);
+                if (!element) element = document;
+    
+                self.log('routes');
+                self.log(routes);
+                
+                for (var index in routes) {
+                    self.log('index');
+                    self.log(index);
+    
+                    if (element.isConnected) {
+        
+                        var route = routes[index];
+    
+                        var routeParts = route.match(/([^:]*):eq\((\d*)\)/);
+    
+                        self.log('routeParts');
+                        self.log(routeParts);
+    
+                        if (routeParts) {
+                            var routeElement = String(routeParts[1]);
+                            var routeIndex = Number(routeParts[2]);
+                            //if (self.exist(routeElement))
+                            element = element.querySelectorAll(routeElement)[routeIndex];
+    
+                            self.log('routeElement');
+                            self.log(routeElement);
+                            self.log('routeIndex');
+                            self.log(routeIndex);
+        
+                        } else {
+                            //if (self.exist(route))
+                            self.log('route');
+                            self.log(route);
+                            element = element.querySelectorAll(route);
+                        }
+                    } else {
+                        self.log('Not in the DOM '+ selector);
+                        self.log('route');
+                        self.log(route);
+                        element = [];
+                    }
+                }
+                //element.innerHTML = 'test';
+                //element.style.display = 'none';
+                //if (element && !Array.isArray(element)) element = [element];
+                //self.log(element);
+    
+                return element;
+            } else {
+                self.log('DOM "query" without selector parameters');
+            }
+        } */
+    /*     this.convertRoute = function (route) {
+            var routeElement, routeValue;
+            
+            route = route.replace(/([^\s])\[/g, function(match, p1) { // -> .class [data-value=...]
+                return p1 + ' ['
+            });
+    
+            if (route.indexOf(' ')) {
+                var parts = route.split(' ');
+                routeElement = parts[0];
+                routeValue = parts[1];
+            } else {
+                routeElement = route
+            }
+            self.log(routeElement);
+            self.log(routeValue);
+    
+            if (routeElement.startsWith('.'))
+                routeQuery = '[class='+routeElement+']';
+            else if (routeElement.startsWith('#'))
+                routeQuery = '[id='+routeElement+']';
+            else
+                routeQuery = routeElement + routeValue;
+    
+            if (routeValue)
+                routeQuery += ' ' + routeValue;
+    
+            return routeQuery;
+        } */
+    /*
+        // https://www.examplefiles.net/cs/1222124
+        var querySelectorAllWithEq = function(selector, document) {
+            var remainingSelector = selector;
+            var baseElement = document;
+            var firstEqIndex = remainingSelector.indexOf(':eq(');
+        
+            while (firstEqIndex !== -1) {
+            var leftSelector = remainingSelector.substring(0, firstEqIndex);
+            var rightBracketIndex = remainingSelector.indexOf(')', firstEqIndex);
+            var eqNum = remainingSelector.substring(firstEqIndex + 4, rightBracketIndex);
+            eqNum = parseInt(eqNum, 10);
+        
+            var selectedElements = baseElement.querySelectorAll(leftSelector);
+            if (eqNum >= selectedElements.length) {
+                return [];
+            }
+            baseElement = selectedElements[eqNum];
+        
+            remainingSelector = remainingSelector.substring(rightBracketIndex + 1).trim();
+            // Note - for now we just ignore direct descendants:
+            // 'a:eq(0) > i' gets transformed into 'a:eq(0) i'; we could maybe use :scope
+            // to fix this later but support is iffy
+            if (remainingSelector.charAt(0) === '>') {
+                remainingSelector = remainingSelector.substring(1).trim();
+            }
+        
+            firstEqIndex = remainingSelector.indexOf(':eq(');
+            }
+        
+            if (remainingSelector !== '') {
+            return Array.from(baseElement.querySelectorAll(remainingSelector));
+            }
+        
+            return [baseElement];
+        }; */
+    this.queryAll = function (selector, element) {
+        //self.log('queryAll: '+selector);
+        if (selector) {
+
+            if (Array.isArray(selector)) {
+                let elements = self.queryAll(selector[0]);
+                selector.shift();
+                for (let str of selector) {
+                    elements = Array.prototype.slice.call(elements).concat(Array.prototype.slice.call(self.queryAll(str)));
+
+                    //elements = elements.concat(self.queryAll(str));
+                }
+                /* console.log('queryAll');
+                console.log(elements); */
+                return elements;
+
+            } else {
+
+                /*
+                if (selector.indexOf(',')>= 0) {
+                    return element.querySelectorAll(selector)
+                }
+                // TO DO: check why all the rest
+                */
+                var routes = selector.split(/[ >]+/);
+                if (!element) element = document;
+
+                /* self.log('routes');
+                self.log(routes); */
+                /* self.log('element[0]');
+                self.log(element[0]); */
+                for (var index in routes) {
+
+                    if (element && element[0]) element = element[0];
+
+                    /* self.log('element');
+                    self.log(element); */
+                    if (element && element.isConnected) {
+
+                        var route = routes[index];
+
+                        var routeParts = route.match(/([^:]*):eq\((\d*)\)/);
+
+                        /* self.log('route');
+                        self.log(route);
+                        self.log('routeParts');
+                        self.log(routeParts); */
+                        if (routeParts) {
+                            var routeElement = String(routeParts[1]);
+                            var routeIndex = Number(routeParts[2]);
+                            /* self.log('routeElement');
+                            self.log(routeElement);
+                            self.log('routeIndex');
+                            self.log(routeIndex);  */
+                            if (routeElement.startsWith('.'))
+                                routeElement = '.' + self.classSelector(routeElement);
+
+                            //if (self.exist(routeElement))
+                            element = element.querySelectorAll(routeElement)[routeIndex];
+
+                            if (index == (routes.length - 1) && element) {
+                                /* console.log('index:'+index);
+                                console.log('routes.length:'+routes.length); */
+                                element = [element];
+                            }
+
+                        } else {
+                            //if (self.exist(route))
+                            if (route.startsWith('.'))
+                                routeElement = '.' + self.classSelector(route);
+
+                            /* self.log('route');
+                            self.log(route); */
+                            element = element.querySelectorAll(route);
+                        }
+                    } else {
+                        //self.log('!element.isConnected');
+                        element = [];
+                    }
+                }
+
+                //if (element && !Array.isArray(element)) element = [element];
+                //if (element && !element.length) element = [element];
+                if (!element)
+                    self.log('No element selected by ' + selector);
+                //else
+                //    if (!Array.isArray(element))
+                //        element = [element];
+                return element;
+            }
+        } else {
+            console.log('%cDOM queryAll requires selector argument', 'color: orange');
+            //self.log('DOM "query" without selector parameters');
+        }
+    };
+
+    /* this.queryAll = function (selector, element) {
+        //self.log('query: '+selector);
+        if (selector) {
+            var routes = selector.split(/[ >]+/);
+            if (!element) element = document;
+            
+            for (var index in routes) {
+                var route = routes[index];
+
+                //onsole.log('route');
+                //self.log(route);
+
+                var routeParts = route.match(/(.*):eq\((\d*)\)/);
+
+                //self.log('routeParts');
+                //self.log(routeParts);
+
+                if (routeParts) {
+                    var routeElement = String(routeParts[1]);
+                    var routeIndex = Number(routeParts[2]);
+                    //if (self.exist(routeElement))
+                        element = [element.querySelectorAll(routeElement)[routeIndex]];
+                } else {
+                    //if (self.exist(route))
+                        element = element.querySelectorAll(route);
+                }
+            }
+            //element.innerHTML = 'test';
+            //element.style.display = 'none';
+            //if (element && !Array.isArray(element)) element = [element];
+            //self.log(element);
+
+            return element;
+        } else {
+            self.log('DOM "query" without selector parameters');
+        }
+    } */
+    /* var querySelectorAllWithEq = function(selector, document) {
+        var remainingSelector = selector;
+        var baseElement = document;
+        var firstEqIndex = remainingSelector.indexOf(':eq(');
+        
+        while (firstEqIndex !== -1) {
+            var leftSelector = remainingSelector.substring(0, firstEqIndex);
+            var rightBracketIndex = remainingSelector.indexOf(')', firstEqIndex);
+            var eqNum = remainingSelector.substring(firstEqIndex + 4, rightBracketIndex);
+            eqNum = parseInt(eqNum, 10);
+        
+            var selectedElements = baseElement.querySelectorAll(leftSelector);
+            if (eqNum >= selectedElements.length) {
+            return [];
+            }
+            baseElement = selectedElements[eqNum];
+        
+            remainingSelector = remainingSelector.substring(rightBracketIndex + 1).trim();
+            // Note - for now we just ignore direct descendants:
+            // 'a:eq(0) > i' gets transformed into 'a:eq(0) i'; we could maybe use :scope
+            // to fix this later but support is iffy
+            if (remainingSelector.charAt(0) === '>') {
+            remainingSelector = remainingSelector.substring(1).trim();
+            }
+        
+            firstEqIndex = remainingSelector.indexOf(':eq(');
+        }
+        
+        if (remainingSelector !== '') {
+            return Array.from(baseElement.querySelectorAll(remainingSelector));
+        }
+        
+        return [baseElement];
+        }; */
+    this.jitcss = function (classes) {
+        // https://tailwindcss.com/docs/just-in-time-mode
+        if (classes.indexOf('-[') > -1) {
+            let classesArr = classes.split(' '); // change to one or more spaces
+
+            // (sm\:|md\:|lg\:|xl\:|2xl\:)?
+            self.log('jitcss');
+
+            for (cl of classesArr) {
+                self.log(cl);
+                let par = [...cl.matchAll(new RegExp('([^-]+)[\-][\[](.+)\]', 'g'))];
+                self.log('jitcss');
+                self.log(par);
+            }
+        }
+
+        /* sm:w-1
+        
+        .w-1 {
+            width: 1em;
+        }
+        
+        @media (min-width: 640px) {
+            .sm\:w-1 { width: 1em }
+        }
+            */
+    };
+
+    this.compileClasses = function (string) {
+
+        var classesString = string;
+
+        // classes shortcuts
+        if (self.json.shortcuts && self.json.shortcuts.class) {
+            for (shortcut in self.json.shortcuts.class) {
+                if (string.indexOf(shortcut) > -1) {
+                    classesString = self.replaceAll(string, shortcut, self.json.shortcuts.class[shortcut]);
+                }
+            }
+        }
+
+        // dynamic classes
+        if (string.indexOf('(') >= 0) {
+            //self.log('compileClasses');
+            classesString = '';
+            let classesArr = string.split(' ');
+            for (cl of classesArr) {
+                /* self.log('cl');
+                self.log(cl); */
+                if (cl.indexOf('(') >= 0 && cl.endsWith(')')) {
+                    let classArr = cl.split('(');
+                    classArr[1] = classArr[1].slice(0, -1); // remove )
+
+
+
+
+
+
+
+                    //let par = [...cl.match(new RegExp('([^\(]+)\(([^\)]+)\)$'))]; // doesn't work
+                    /* self.log('classArr');
+                    self.log(classArr);
+                    self.log('classArr[1]');
+                    self.log(classArr[1]);
+                    self.log('self.js(classArr[1])');
+                    self.log(self.js(classArr[1])); */
+                    if (Boolean(self.js(classArr[1]))) {
+                        if (classesString !== '') classesString += ' ';
+                        classesString += classArr[0];
+                    }
+
+                } else {
+                    if (classesString !== '') classesString += ' ';
+                    classesString += cl;
+                }
+            }
+
+            if (string == classesString) {
+                self.log('wrong dynamic class syntax');
+                self.log(string);
+            }
+
+        }
+
+        return classesString;
+
+    };
+
+    this.createElement = function (params, selectorParams) {
+
+        let selector = params.selector || params.container;
+        var container = selector || self.selector(selectorParams);
+        var containerElement = self.query(container);
+        var newSelector = self.selector(params, selectorParams); // from 0.9.6: must stay before document.createElement
+
+
+
+
+
+
+        /* console.log('append');
+        console.log('selector:'+selector);
+        console.log('container:'+container);
+        console.log('newSelector:'+newSelector); */
+        var newElements = [];
+
+        //if (containerElement)
+        //containerElements.forEach(function (containerElement, index) {
+        if (containerElement) {
+
+            if (!params) params = {};
+
+            var element = document.createElement(params.tag);
+
+            containerElement.appendChild(element);
+
+            if (params.attr) {
+                // shortcuts (windy property not in twind) and dynamic classes with js condition
+                if (params.attr.class) {
+                    // replace shortcuts and dynamic classes: class(condition)
+                    params.attr.class = self.compileClasses(params.attr.class);
+                }
+            }
+
+            //if (container) element.setAttribute('data-selector', self.selector(params, selectorParams));
+            //if (container) element.setAttribute('data-selector', newSelector); // from 0.9.6. removed 1.0.12
+            // for IDE
+            self.dataStorage.set(element, 'code', params);
+            self.dataStorage.set(element, 'key', params.key);
+
+            /*  if (params.attr && params.attr.class)
+                    self.jitcss(params.attr.class); */
+            newElements.push(element);
+
+            if (params.attr) self.setAttributes(newElements, params.attr);
+            if (params.style) self.css(params, newSelector); // TO DO: deprecated / to be removed;
+
+
+
+
+
+
+
+
+            /* // attributes TO DO: move up / call self.attr
+            if (params.attr)
+                for (var attrId in params.attr)
+                    self.attribute(newElements, attrId, self.replaceProperties(params.attr[attrId]));
+                    //self.log(self.replaceProperties(params.attr[attrId]));
+                    //$(selector).attr(attrId, params.attr[attrId]); */
+        }
+
+        //});
+        return newElements;
+
+        /* for (let element of elements) {
+            element.appendChild(string);
+        } */
+    };
+
+    /* this.newSelector = function (params, selectorParams) {
+        var container = self.selector(self.extend({}, params, selectorParams), undefined, true);
+        if (container) {
+            var selectorObj = {
+                container: container,
+                //class: params.class,
+                //value: params.value,
+                //'data-value': params['data-value']
+            }; // , selectorParams);
+            self.log('container');
+            self.log(container);
+            var index = document.querySelectorAll(container).length;
+            if (index > 1) selectorObj.index = index-1;
+            self.log('newSelector');
+            self.log(selectorObj);
+            return selectorObj;
+        } else {
+            self.log('container undefine in newSelector');
+            self.log('params');
+            self.log(params);
+            self.log('selectorParams');
+            self.log(selectorParams);
+        }
+    }
+*/
+    /*
+        this.editor = function (params, selectorParams, args) {
+            self.log('editor');
+            self.log('params');
+            self.log(params);
+            var selector = self.selector(selectorParams, undefined, true); // self.selector(params, undefined, true) ||
+            if (selector) {
+            var element = self.query(selector);
+    
+                if (element) {
+            
+                    if (!self.quillElements[selector]) {
+                        self.quillElements[selector] = new Quill(element, {
+                            modules: params.modules || { // or default modules
+                                toolbar: [
+                                [{ header: [1, 2, false] }],
+                                ['bold', 'italic', 'underline'],
+                                ['image', 'code-block']
+                                ]
+                            },
+                            // scrollingContainer: '#scrolling-container',
+                            placeholder: params.placeholder || 'Write here',
+                            theme: params.theme || 'bubble'
+                        });
+                    }
+    
+                    if (self.quillElements[selector]) {
+    
+                        if (params.setContents) {
+                            var contents = self.replaceProperties(params.setContents, args);
+                            self.quillElements[selector].setContents(contents);
+                        }
+    
+                        if (params.getContents) {
+                            self.quillElements[params.getContents].getContents();
+                        }
+    
+                        if (params.on) {
+    
+                            for (var eventId in params.on) {
+                                self.editorChangeFunctions[selector] = params.on;
+    
+                                if (params.on[eventId]) {
+    
+                                    self.quillElements[selector].on(eventId, function(delta, oldDelta, source) {
+                                        var action = self.editorChangeFunctions[selector][eventId];
+                                        var actionWithResult = self.replaceResult(action, delta);
+                                        //self.do(actionWithResult);
+                                        self.do(actionWithResult);
+                        
+                                    });
+                                }
+                            }
+                        }
+                    }
+                } else {
+                    self.log('can\'t find the element "'+ selector + '" ("editor" function)');
+                    self.log(params);
+                }
+            } else {
+                self.log('the "editor" function has a wrong selector');
+                self.log(params);
+            }
+    
+        }
+    */
+    this.do = this.action = this.execute = function (params, selectorParams, args) {
+        /* self.log('params');
+        self.log(params);
+        self.log('selectorParams');
+        self.log(selectorParams);
+        self.log('args');
+        self.log(args); */
+
+        if (params !== undefined && params !== null) { // empty string is ok
+
+            /*
+            // problematic for nested {args} / {selector}
+            if (selectorParams && typeof selectorParams == 'string') {
+                params = self.replaceProperty(params, 'selector', selectorParams);
+            }
+            if (args) {
+                params = self.replaceProperty(params, 'args', args);
+            }
+            */
+            if (typeof params == 'string')
+                params = self.replaceProperties(params, args);
+
+            let pluginsRequired = self.pluginsRequired(params);
+            /* self.log('pluginsRequired');
+            self.log(pluginsRequired); */
+            if (pluginsRequired.length > 0)
+                //let params = [params, args, selectorParams];
+                self.pluginsLoader(pluginsRequired, self.do, [params, selectorParams, args]);
+            else {
+
+                if (Array.isArray(params))
+                    for (var obj of params)
+                        self.do(obj, selectorParams, args); // -> execute dopo aver portato qui pluginsLoaded
+                else if (typeof params == 'object') {
+
+                    /* if (params.after) {
+                        let paramsAfter = params.after;
+                        let paramsWithoutAfter = self.cloneObject(params);
+                        delete paramsWithoutAfter.after;
+                        self.timer({
+                            after: paramsAfter,
+                            do: paramsWithoutAfter
+                        });
+                    } else {
+    */
+                    if (params.if == undefined || self.if(params.if)) { // || Boolean(self.js(params.if))) { // , args
+                        /* console.log('IF---------------');
+                        console.log(params.if);
+                        console.log(params); */
+                        if (self.only(params.roles, params.user)) {
+
+                            //if (!params) params = {};
+                            //var newContainer; //self.newSelector(params, selectorParams); // {container: selector}
+                            // Add an element in the DOM
+                            if (params.tag) {
+
+                                var selector = self.selector(params, selectorParams);
+
+                                /* self.log('selector');
+                                self.log(selector); */
+                                self.extendJsonFromElement(params); // or selectorParams
+
+
+
+
+
+                                //newContainer = {selector: selector};
+                                //if (1) //self.user('uid') == 'L0y20rjPp6a6ejqVuDXuTWCU2rH3') //'ocXuFBV4aWcy7KZMAmi6mICFi872')
+                                // create new html element
+                                var newElements = self.createElement(params, selectorParams);
+
+                                /* if (params.key == 'text')
+                                    //let element = self.query(self.selector(params.selector));
+                                    newElements.innerText = self.text(nested); */
+                                if (params.matchMedia) {
+                                    for (var mediaEvent in params.matchMedia) {
+                                        self.matchMedia(params.matchMedia[mediaEvent], mediaEvent);
+                                    }
+                                }
+
+                                if (params.html) {
+
+                                    self.html(params.html, selector, args);
+
+                                } else {
+
+                                    // nested html tags as property
+                                    for (var par in params) //  && (par !== 'attr')
+                                        if ((nodes.exclude.indexOf(par) < 0) && (nodes.params.indexOf(par) < 0))
+                                            self.nested({ key: par, obj: params[par], selector: { selector: selector }, args: args });
+
+                                }
+
+                                self.on(params.on, { selector: selector });
+
+
+                            } else {
+
+                                var selector = self.selector(params, selectorParams);
+
+                                for (var par in params)
+                                    if ((nodes.exclude.indexOf(par) < 0) && (nodes.params.indexOf(par) < 0))
+                                        self.nested({ key: par, obj: params[par], selector: selector, args: args });
+
+                                if (params.on)
+                                    self.on(params.on, { selector: selector });
+
+                            }
+
+
+                        } // end of self.only
+
+                    }
+                    //}
+                } else if (typeof params == 'function')
+                    return params(selectorParams);
+
+                else
+                    self.log('can\'t execute: ' + params);
+            }
+
+        }
+    };
+
+    this.callback = function (params) {
+        /* console.log('callback');
+        console.log(params); */
+        // {do, find, replace}
+        if (params) {
+            var path = params.to;
+            if (params.var) path = 'var ' + params.var; // TO DO: remove
+            let selector;
+            let element = params.element; // elementToSelector ?
+            if (element && element.isConnected) params.value = self.elementToSelector(element);
+            if (path) {
+                var context = self.context(path);
+                self.element({ path: path, value: params.value, root: context });
+            }
+            if (params.do)
+                self.do(params.do, selector);
+        }
+    };
+
+    this.nested = function (params) {
+        /* console.log('nested');
+        console.log(params); */
+        // check plugins required
+        let pluginsRequired = self.pluginsRequired(params.key);
+        if (pluginsRequired.length > 0) {
+            self.pluginsLoader(pluginsRequired, self.nested, [params]);
+        } else {
+
+
+
+            // TO DO: regular expression like in this.element (should include setup and also :)
+            if (params.key.startsWith('set ')) {
+                self.setData({ key: params.key.substr(4), value: params.obj });
+            } else if (params.key.startsWith('var ') || params.key.startsWith('data ') || params.key.startsWith('set ')) {
+                // TO DO: remove this option. Is too ambiguous for debug -> use set
+                // deprecated from 1.0.4
+                console.log('%cdeprecated key: "' + params.key + '". Use "set key": "value"}', 'color:orange');
+
+                // Data setting prefix
+                // should be removed and replaced with the method "set" to improve the compatibility
+                // with the other possible keys (js functions, jsonic methods, html tags ex. <data class=""></data>)
+                // https://www.w3schools.com/tags/tag_data.asp
+                self.setData({ key: params.key, value: params.obj });
+
+            } else {
+
+                // CHECK IF KEY IS METHOD
+                //console.log('check if is a method');
+                var method = self.element({ path: params.key, root: self.methods });
+
+                if (method) { // search in jsonic.methods
+                    self.log('METHOD: ' + params.key, 'grey');
+                    var methodArgs = params.obj;
+
+                    /* if (params.key == 'swiper init') {
+                        self.log('method: ' + params.key);
+                        self.log('methodArgs');
+                        self.log(methodArgs);
+                        self.log('params.selector');
+                        self.log(params.selector);
+                        self.log('-----------');
+                    } */
+                    //methodArgs = self.replaceProperty(methodArgs, 'selector', params.selector);
+                    method(methodArgs, params.selector, params.args);
+
+
+                    /* } else if (params.key == 'set') { // TO DO: REMOVE
+    
+                        // JS METHOD (old)
+    
+                        var actionObj = {};
+                        actionObj[params.key] = params.obj;
+                        self.do(actionObj, params.selector); */
+                    /* } else if (nodes.functions.indexOf(params.key) >= 0) { // TO DO: REMOVE
+    
+                        // JS METHOD (old)
+    
+                        var actionObj = {};
+                        actionObj[params.key] = params.obj;
+                        //self.do(actionObj, undefined, params.selector);
+                        self.do(actionObj, params.selector); */
+                } else {
+
+                    // CHECK IF KEY IS A PARTS
+                    //console.log('check if is a part');
+                    // shortcut: content
+                    let nested;
+                    let part;
+
+                    var jsonicPart = false;
+                    if (self.json.parts) { // && par.match(/[.>]+/)) 
+                        part = self.element({ path: self.replaceAll(params.key, ':', '.'), root: self.json.parts });
+                        /* if (par.indexOf(':')>0 && !part) {
+                            jsonicPart = true;
+                            self.firebaseGetPart({localPath:localPath, container: params.selector, arg:params.obj});
+                        } */
+                    }
+
+                    if (part) {
+                        self.log('PART: ' + params.key, 'grey');
+
+                        /* console.log('params');
+                        console.log(params); */
+                        var partObj = params.obj;
+                        //nested = self.replaceProperty(part, 'value', params.obj); // obsolete?
+                        //nested = self.replaceProperty(part, 'arg', partObj); // obsolete
+                        //if (typeof partObj == 'string' && partObj.indexOf('{') >= 0) { // obsolete?
+                        // TO DO: this should be already inside self.do
+                        partObj = self.replaceProperties(partObj);
+                        // for backward compatibility can be partObj, null, true) // true is removeUndefined
+                        //}
+                        /* console.log('partObj');
+                        console.log(partObj);
+                            */
+                        //var partSelector = params.selector || partObj.selector;
+                        // TO DO: Check this
+                        // seems a workaround for fantacards/ui:qrcode
+                        // parts can receive the parameters {selector:..., setup:...}
+                        partObj.selector = partObj.selector || params.selector;
+
+                        // TO DO: deprecated fantacards:setPlayer
+                        if (partObj.setup) partObj = partObj.setup;
+                        // overwrites partObj.selector but execute receive params.selector
+                        // TO DO: replaceProperty should be improved to get also sub values like {arguments:on.success}
+                        //nested = self.replaceProperty(part, 'setup', partObj); // {setup} -> {arguments}
+                        //nested = self.replaceProperty(nested, 'arguments', partObj);
+                        //nested = self.replacePropertyWithPrefix(part, 'setup:', partObj); // {setup} -> {arguments}
+                        //nested = self.replacePropertyWithPrefix(nested, 'arguments:', partObj);// to tix
+                        nested = self.replacePropertyWithPrefix(part, 'setup', partObj); // {setup} -> {arguments}
+                        nested = self.replacePropertyWithPrefix(nested, 'arguments', partObj); // to tix
+
+
+                        self.extendJsonFromElement(nested); // or selectorParams
+
+                        //self.do(nested, partSelector, partObj);
+                        self.do(nested, params.selector, partObj);
+
+                        /*
+                        self.log('nested');
+                        self.log(nested);
+                        
+                        self.log('part key');
+                        self.log(params.key);
+                        self.log('part obj');
+                        self.log(part);
+                        */
+                    } else { // if (!jsonicPart) {  // should be if (par !== 'on', 'attr', 'style', 'items/data')
+                        // params.key is not var/data, a method, a part
+                        //var jsFunction = self.element({path: params.key, root: self.functions});
+                        if (self.json && self.json.functions && params.key && self.json.functions[params.key]) {
+                            //if (self.json.functions[params.key]) {
+                            self.log('FUNCTION: ' + params.key, 'grey');
+
+
+                            /* self.log('pluginsRequired');
+                            self.log(pluginsRequired); */
+                            let args = self.replaceProperties(params.obj, undefined, true); // undefined properties -> ''
+
+
+
+
+                            /* console.log('%cargs', 'color:red');
+                            console.log(args); */
+                            if (!args || !Array.isArray(args)) args = [args];
+
+                            if (self.json.functions[params.key].requires) {
+                                let pluginsRequired = [];
+                                for (let plugin of self.json.functions[params.key].requires) {
+                                    if (!self.pluginsLoaded[plugin])
+                                        pluginsRequired.push({ "name": plugin, version: "" });
+                                }
+
+                                if (pluginsRequired.length > 0)
+                                    //self.pluginsLoader(pluginsRequired, self.functions[params.key], args);
+                                    self.pluginsLoader(pluginsRequired, self.function, [{ name: params.key, arguments: args }]);
+                                else {
+                                    self.log('Plugins already loaded: ' + params.key, 'grey');
+                                    self.function({ name: params.key, arguments: args });
+                                    //self.functions[params.key](...args);
+                                }
+                            } else {
+                                /* let args = self.replaceProperties(params.obj);
+                                if (!args || !Array.isArray(args)) args = [args]; */
+                                self.log('Function without plugin required: ' + params.key, 'grey');
+                                self.function({ name: params.key, arguments: args }); // TO DO: check why here it can't have []
+
+                                //self.functions[params.key](...args);
+                            }
+
+                        } else {
+                            var windowFunction = self.element({ path: params.key, root: window });
+                            if (typeof windowFunction === 'function') {
+                                self.log('WINDOW function: ' + params.key, 'grey');
+                                windowFunction(self.replaceProperties(params.obj, undefined, true)); // undefined properties -> ''
+
+                                //windowFunction(self.replaceProperties(params.obj));
+                            } else if (windowFunction !== undefined) {
+                                self.log('window.' + params.key + ' is not a function', 'red');
+                                //self.log(params.key + ' not found', 'red');
+                                // use set for window assignment
+                                /*
+                                self.element({path: params.key, value:params.obj, root: window}); */
+                            } else {
+                                // NESTED HTML
+                                // Need to be improved. with nestedAction and nestedTag
+                                // here we can search only nestedAction
+                                // and from html we can search only for nestedTag's
+                                //nested = params.obj; // removed in 1.0.1
+                                // if is a nested html params.selector is required
+                                // impossible to understand if we are inside an html method
+                                // because the html tags can be nested and with any name
+                                if (params.selector) { // added in 1.0.1
+                                    self.log('TAG: ' + params.key, 'grey');
+                                    // should be also in this.html function if params is an array
+                                    let pluginsRequired = self.pluginsRequiredByTag(params.obj, params.key);
+                                    if (pluginsRequired.length > 0) {
+                                        let htmlTagParams = [params.obj, params.selector, params.key];
+                                        self.pluginsLoader(pluginsRequired, self.htmlTag, htmlTagParams);
+                                    } else {
+                                        self.htmlTag(params.obj, params.selector, params.key); // tagParam = params.key
+
+                                        //if (nested.database) self.addFirebaseTag(self.extend({}, nested, params.selector));
+                                    }
+                                } else {
+                                    self.log(params.key + ' not found', 'red');
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+
+        }
+    };
+
+    this.setData = function (params) {
+        //self.log('setData');
+        let setObj = {};
+        setObj[params.key] = params.value;
+        self.set(setObj);
+
+        /* if (params.path.indexOf('{') >= 0)
+            params.path = self.replaceProperties(params.path);
+
+        if (typeof params.value == 'string' && params.value.indexOf('{') >= 0)
+            params.value = self.replaceProperties(params.value);
+
+        self.element({path: params.path, value: params.value}); */
+        /* self.log(params.path);
+        self.log(self.element({path: params.path})); */
+    };
+
+    this.partContainers = {};
+
+
+
+    this.pluginsRequiredByTag = function (params, tagKey) {
+        // self.log('pluginsRequiredByTag');
+        /* self.log('params');
+        self.log(params);
+        self.log('par');
+        self.log(par);  */
+
+        if (self.json.resources) {
+
+            // analize function object or array of objects
+            const pluginsTags = self.json.resources.pluginsTags;
+            const pluginsAttr = self.json.resources.pluginsAttr;
+            var pluginsRequired = [];
+
+            if (pluginsTags[tagKey] && !self.pluginsLoaded[pluginsTags[tagKey].name])
+                pluginsRequired.push(pluginsTags[tagKey]);
+
+
+
+            if (typeof params == 'string') {
+                // for example: "tagName": "string" where tagName requires a plugin
+            } else if (typeof params == 'object') {
+
+                var objArray;
+                if (Array.isArray(params)) objArray = params; else objArray = [params];
+
+                for (var obj of objArray) {
+                    if (obj.attr) { // attr
+                        var attr = 'data-icon';
+                        if (obj.attr[attr]) {
+                            if (pluginsAttr[attr] && !self.pluginsLoaded[pluginsAttr[attr].name])
+                                pluginsRequired.push(pluginsAttr[attr]);
+                        }
+                    }
+                }
+            }
+            return pluginsRequired;
+        } else {
+            // should load resources
+            return false;
+        }
+    };
+
+    /*
+        
+        'locale': {
+            unit: month, weekday
+            format: long, short, narrow
+            index: 1,
+            lang: page:language
+    */
+    this.calendar = function (params, args) {
+        const localeName = (self.json.setup.language !== 'en') ? self.json.setup.language : 'en-US';
+        let calendarArr, todayIndex;
+
+        if (params.unit) {
+            switch (params.unit) {
+                case 'month':
+                    const monthFormat = params.format || 'long';
+                    var format = new Intl.DateTimeFormat(localeName, { month: monthFormat }).format;
+                    calendarArr = [...Array(12).keys()].map((m) => format(new Date(Date.UTC(2021, m))));
+                    todayIndex = new Date().getMonth();
+                    break;
+                case 'weekday':
+                    const weekdayFormat = params.format || 'long';
+                    var format = new Intl.DateTimeFormat(localeName, { weekday: weekdayFormat }).format;
+                    calendarArr = [...Array(7).keys()].map((day) => format(new Date(Date.UTC(2021, 5, day))));
+                    todayIndex = self.weekday();
+                    break;
+                default:
+                    self.log('"calendar" function can\'t recognize "unit" parameter');
+                    self.log(params.unit);
+                    break;
+            }
+
+            if (calendarArr) {
+                if (params.index !== undefined) {
+                    params.index = self.js(params.index);
+                    let index = Number(self.replaceProperties(params.index, args));
+                    return calendarArr[index];
+                } else {
+                    return calendarArr[todayIndex];
+                }
+            } else {
+                self.log('"calendar" function can\'t recognize "unit" or "format" parameters');
+            }
+
+        } else {
+            self.log('"calendar" function requires "unit" parameter');
+        }
+
+    };
+
+
+
+    this.month = function (params, monthFormat = 'long') {
+        const localeName = (self.json.setup.language !== 'en') ? self.json.setup.language : 'en-GB';
+        const format = new Intl.DateTimeFormat(localeName, { month: monthFormat }).format;
+        const weekdayArr = [...Array(12).keys()].map((m) => format(new Date(Date.UTC(2021, m))));
+        if (params !== undefined) {
+            var index = Number(self.replaceProperties(params));
+            return weekdayArr[index];
+        }
+        else
+            return weekdayArr;
+    };
+
+    this.weekday = function (params, weekdayFormat) {
+        //weekdayFormat = weekdayFormat || 'long';
+        const localeName = (self.json.setup.language !== 'en') ? self.json.setup.language : 'en-GB';
+        const format = new Intl.DateTimeFormat(localeName, { weekday: weekdayFormat }).format;
+        const weekdayArr = [...Array(7).keys()].map((day) => format(new Date(Date.UTC(2021, 5, day))));
+        var result;
+        if (params !== undefined) {
+            var index = Number(self.replaceProperties(params));
+            result = weekdayArr[index];
+        }
+        else
+            result = weekdayArr;
+
+        //if (weekdayFormat == 'short') result = result.substring(0,3);
+        return result;
+
+    };
+
+    /*     this.array = function (params, args) { // TO DO: to be removed
+            self.log('array');
+            self.log(params);
+    
+            if (Array.isArray(params))
+                return params;
+            else if (typeof params == 'string')
+                return self.docElement(params);
+            else if (typeof params == 'object') {
+                if (params && Object.keys(params).length > 0) { // actionObj !== {}
+                    var actionKey = Object.keys(params)[0]; // -> for
+                    var actionFunction = self.docElement('Array.prototype.' + actionKey); // method in window
+                    var actionValue = params[actionKey];
+    
+                    //actionValue = self.compile(actionValue, args); // array -> undefined
+                    if (!Array.isArray(actionValue))
+                        actionValue = [actionValue];
+    
+                    if (actionFunction) {
+                        if (typeof actionFunction == 'function')
+                            return actionFunction.call(actionValue);
+                        else
+                            return actionFunction;
+                    } else {
+                        self.log('unknown window function');
+                        return params; // return the same object
+                    }
+                } else {
+                    self.log('empty function');
+                    //self.log(actionObj);
+                    return undefined
+                }
+            }
+        } */
+    this.method = function (params, args) {
+
+        var value;
+
+        if (typeof params == 'string') {
+            return self.docElement(params);
+        } else {
+
+            if ((params.if == undefined) || self.if(params.if, undefined, args)) {
+
+                if (self.notEmptyObject(params)) {
+                    var actionKey = Object.keys(params)[0]; // -> for 
+                    var actionFunction = self.docElement(actionKey); // method in window
+                    var actionValue = params[actionKey];
+                    //actionValue = self.compile(actionValue, args);
+                    if (!Array.isArray(actionValue))
+                        actionValue = [actionValue];
+                    if (actionFunction) {
+                        if (typeof actionFunction == 'function')
+                            return actionFunction(...actionValue);
+
+                        else
+                            return actionFunction;
+                    } else {
+                        self.log('unknown function');
+                        self.log(params);
+                        return params; // return the same object
+                    }
+                } else {
+                    //self.log('empty function');
+                    //self.log(params);
+                    return undefined;
+                }
+            }
+        }
+
+        /*
+        var methodArgs = self.compile(actionValue, args);
+
+        if (value !== undefined) {
+        
+            if (!Array.isArray(methodArgs))
+                methodArgs = [methodArgs];
+
+            self.log('params');
+            self.log(params);
+
+            for (let method of methodArgs) {
+                for (let key in method) {
+                    if (key !== 'args') {
+                        self.log('key');
+                        self.log(key);
+                        if (value[key])
+                            if (method[key] && method[key] !== '') { // va aggiunto? ->  && value[key](method[key]) method[key] !== undefined &&
+                                methodArgs = method[key];
+                                self.log('methodArgs');
+                                self.log(methodArgs);
+
+                                if (!Array.isArray(methodArgs))
+                                    methodArgs = [methodArgs];
+                                for (let index in methodArgs) {
+                                    let methodArg = self.compile(methodArgs[index], args);
+                                    //if (typeof methodArg == 'string' && methodArg !== '' && methodArg == Number(methodArg)) // can be in compile
+                                    methodArgs[index] = methodArg; // Number(methodArg)
+                                }
+                                //try {
+                                //} catch (error) {
+                                //    self.log('Dayjs function error');
+                                if (typeof value[key] == 'function')
+                                    value = value[key](...methodArgs); // ES6 way
+                            } else
+                                if (typeof value[key] == 'function')
+                                    value = value[key]();
+                                else
+                                    value = value[key];
+                    } else {
+                        self.log('Method ' + key + ' in ' + methodName + ' not exist');
+                    }
+                }
+            }
+
+        } else {
+            self.log('method '+ methodName +' undefined');
+
+        }
+        */
+    };
+
+    this.Number = function (params, args) {
+        self.log('Number');
+        return self.method({ "Number": params }, args);
+    };
+
+    this.String = function (params, args) {
+        self.log('String');
+        return self.method({ "String": params }, args);
+
+        // jsonic.compile({String:{args:'1',padStart:[2, '0']}})
+        /*
+                "text": {
+                    "String": {
+                        "args": "{hour}",
+                        "padStart": [
+                            "0",
+                            2
+                        ]
+                    }
+                }
+        */
+    };
+
+    this.Math = function (params, args) {
+        return self.method(params, args, 'Math');
+
+        /* if (!Array.isArray(params))
+            params = [params];
+
+        for (let method of params) {
+            for (let key in method) {
+                self.log(key);
+                if (method[key] && method[key] !== '' && value[key](method[key])) {
+                    //methodArgs = self.compile(method[key]);
+                    methodArgs = method[key];
+                    if (!Array.isArray(methodArgs))
+                        methodArgs = [methodArgs];
+                    for (let index in methodArgs) {
+                        let methodArg = self.compile(methodArgs[index]);
+                        if (typeof methodArg == 'string' && methodArg !== '' && methodArg == Number(methodArg)) // can be in compile
+                            methodArgs[index] = Number(methodArg);
+                    }
+                    value = value[key](...methodArgs); // ES6 way
+                } else
+                    value = value[key]();
+            }
+        }
+
+        return value; */
+    };
+
+
+    this.dayjs = function (params, args) {
+
+        return self.method(params, args, 'dayjs');
+
+        /* self.log('dayjs');
+
+        var value = dayjs();
+        if (params.time)
+            value = dayjs(params.time);
+        //value = self.compile(value);
+
+        if (!Array.isArray(params))
+            params = [params];
+
+
+        for (let method of params) {
+            for (let key in method) {
+
+                if (key == 'time') {
+                } else if (value[key]) {
+                    if (method[key] && method[key] !== '' && value[key](method[key])) {
+                        //methodArgs = self.compile(method[key]);
+                        methodArgs = method[key];
+                        if (!Array.isArray(methodArgs))
+                            methodArgs = [methodArgs];
+                        for (let index in methodArgs) {
+                            let methodArg = self.compile(methodArgs[index]);
+                            if (typeof methodArg == 'string' && methodArg !== '' && methodArg == Number(methodArg)) // can be in compile
+                                methodArgs[index] = Number(methodArg);
+                        }
+                        value = value[key](...methodArgs); // ES6 way
+                    } else
+                        value = value[key]();
+                } else {
+                    try {
+                    } catch (error) {
+                        self.log('Dayjs function error');
+                        self.log(error);
+                        self.log('key');
+                        self.log(key);
+                        self.log('method[key]');
+                        self.log(method[key]);
+                    }
+
+                }
+            }
+            self.log('value');
+            self.log(value);
+        }
+        return value; */
+    };
+
+    this.moment = function (params, args) {
+
+        return self.method(params, args, 'moment');
+
+        /* self.log('moment');
+
+        var value = moment();
+        if (params.time)
+            value = moment(params.time);
+
+        if (!Array.isArray(params))
+            params = [params];
+
+        for (let method of params) {
+            for (let key in method) {
+                if (key !== 'time') {
+                    if (key == 'add') {
+                        value = value.add(Number(method[key].value), method[key].unit);
+                    } else if (key == 'subtract') {
+                        value = value.add(Number(method[key].value), method[key].unit);
+                    } else if (method[key] && method[key] !== '' && value[key](method[key])) {
+                        value = value[key](method[key]);
+                    } else {
+                        self.log('Moment function error: ');
+                        self.log('key');
+                        self.log(key);
+                        self.log('method[key]');
+                        self.log(method[key]);
+                    }
+                }
+            }
+            self.log('value');
+            self.log(value);
+    
+        }
+        return value;
+    */
+    };
+
+
+    /* const methodsList = ['day, format', 'year', 'years', 'quarter', 'dayOfYear', 'month', 'months', 'date', 'minute', 'minutes', 'hour', 'hours', 'second', 'seconds', 'millisecond', 'milliseconds', 'weekday', 'weekdays', 'isoWeekday', 'weekYear', 'isoWeekYear', 'weeksInYear', 'week', 'isoWeek', 'set', 'max', 'min', 'local', 'parseZone', 'unix', 'utc', 'utcOffset', 'zone', 'isValid', 'invalid', 'valueOf', 'startOf', 'endOf', 'fromNow', 'toNow', 'from', 'to', 'calendar', 'diff', 'daysInMonth', 'toDate', 'toArray', 'toJSON', 'toString', 'toISOString', 'toObject', 'inspect', 'isBefore', 'isSame', 'isAfter', 'isSameOrBefore', 'isSameOrAfter', 'isBetween', 'isDST', 'isLeapYear', 'isDate', 'locale', 'localeData', 'lang', 'monthsShort', 'weekdaysShort', 'weekdaysMin', 'defineLocale', 'updateLocale', 'monthsParse', 'weekdaysParse', 'longDateFormat', 'isPM', 'meridiem', 'relativeTime', 'pastFuture', 'ordinal', 'preparse', 'postformat', 'invalidDate', 'firstDayOfWeek', 'firstDayOfYear', 'duration', 'clone', 'humanize', 'asMilliseconds'];
+    for (var method in methodsList) {
+        if (params[method]) value = value[method](params[method]);
+    } */
+    /*  for (let param in params) {
+            if (param !== 'time') {
+                if (typeof value == 'object') {
+                    //if (param == 'day') value = value.day(Number(params[param]));
+                    if (param == 'add') {
+                        self.log('params.add.value');
+                        self.log(params.add.value);
+                        self.log('params.add.unit');
+                        self.log(params.add.unit);
+                        self.log('value');
+                        self.log(value);
+                        value.add(Number(5), params.add.unit);
+                        self.log('value.format(H)');
+                        self.log(value.format('H'));
+                    }
+                    else if (param == 'subtract') value.add(Number(params.subtract.value), params.subtract.unit);
+                    else if (value[param] && value[param](params[param]))
+                        value = value[param](params[param]);
+                    else
+                        self.log('Moment function error: '+ params[param]);
+                }
+                self.log('value');
+                self.log(value);
+            }
+        }
+*/
+    /* this.addNestedTag = function (params, selectorParams) {
+        var selector = self.selector(self.extend({}, params, selectorParams));
+        // remove tag params
+        var nestedParams = self.cloneObject(params);
+        var tagParams = ['tag', 'container', 'id', 'class', 'value', 'data-value', 'style', 'attr', 'title', 'text', 'animation', 'action', 'on', 'src', 'media', 'color', 'background', 'width', 'height', 'margin', 'padding', 'firebase'];
+        for (var par in nestedParams) {
+            if (tagParams.indexOf(par) >= 0)
+                delete nestedParams[par]
+        }
+
+        // serach for nested params
+        var mainTags = ['div', 'ul', 'p', 'span', 'a', 'button', 'input', 'textarea', 'iframe', 'table', 'thead', 'tbody', 'tfoot', 'tr', 'th', 'td', 'figure', 'figcaption', 'svg', 'small', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'icons'];
+        for (var par in nestedParams) {
+            self.log(par + ' NESTED IN ' + selector);
+            if (mainTags.indexOf(par) >= 0) {
+                self.htmlTag(nestedParams[par], {container: selector}, mainTags[mainTags.indexOf(par)]);
+            }
+        }
+    } */
+    this.dynamicCss = function (selector, property, value) {
+        if (value.indexOf('{') >= 0) {
+            var resizeData = self.dataStorage.get(element, "resize");
+            //var resizeData = $(selector).data('resize');
+            if (!resizeData) resizeData = {};
+            resizeData[property] = value;
+            var resizeData = self.dataStorage.set(element, "resize", resizeData);
+            //$(selector).data('resize', resizeData);
+            if (!self.resizeActions[selector]) self.resizeActions[selector] = {};
+            self.resizeActions[selector][property] = value;
+            var result = self.replaceProperties(value) || '';
+            //$(selector).css(property, result); // al cambio di pagina su this.page applichiamo self.resizeEvent()
+            /*                     self.log('----------------------');
+                        self.log('dynamicCss');
+                        self.log('selector');
+                        self.log(selector);
+                        self.log('property');
+                        self.log(property);
+                        self.log('value');
+                        self.log(value);
+                        self.log('result');
+                        self.log(result);
+                        self.log('----------------------');
+            */
+        } else {
+            var style = {};
+            style[property] = value;
+            self.css({
+                style: style
+            });
+            //$(selector).css(property, value);
+        }
+    };
+
+    /*  this.calc = function (selector, property, value) {
+        if (value.indexOf('{')>= 0) {
+            //var calcFunction = String(element.match(/calc\(([^\)]*)\)/)[0]);
+            var result = self.replaceProperties(value) || '';
+            return result;
+        } else {
+            return value;
+        }
+    } */
+    /* this.hTag = function (params, selectorParams, index) { // this.img already exist
+        if (Array.isArray(params)) {
+                for (var index in params)
+                self.hTag(params[index], selectorParams);
+        } else {
+            if (params.items) {
+                var itemsArray = params.items;
+                delete params.items;
+                for (var index in itemsArray) {
+                    self.hTag(self.replaceItems(params, itemsArray[index]), selectorParams);
+                }
+            } else {
+                if (typeof params == 'string') {params = {text: params}};
+                params.tag = 'h'+index;
+                var paramsReplaced = self.replaceProperties(params);
+                self.addTag(paramsReplaced, selectorParams);
+            }
+        }
+    } */
+    /* this.img = function (params, selectorParams, args) {
+        //self.log('img');
+        var tagParam = 'img';
+        var mainParam = 'src';
+
+        if (Array.isArray(params)) {
+                for (var index in params)
+                self.img(params[index], selectorParams);
+        } else {
+            if (params.items) {
+                var itemsArray = params.items;
+                delete params.items;
+                for (var index in itemsArray) {
+                    self.img(self.replaceItems(params, itemsArray[index]), selectorParams);
+                }
+            } else {
+                if (typeof params == 'string') {params = {src: params}};
+                params.tag = 'img';
+                //if (params.media) params.src = '{media:' + params.media + '}'; // can go under replaceProperties
+                var paramsReplaced = self.replaceProperties(params, args);
+                //var container = params.container || self.selector(selectorParams);
+
+                self.addTag(paramsReplaced, selectorParams);
+            }
+        }
+    } */
+    /* this.small = function (params, selectorParams) { // bootstrap
+        var mainParam = 'text';
+        if (Array.isArray(params)) {
+                for (var index in params)
+                self.small(params[index], selectorParams);
+        } else {
+            if (params.items) {
+                var itemsArray = params.items;
+                delete params.items;
+                for (var index in itemsArray) {
+                    self.small(self.replaceItems(params, itemsArray[index]), selectorParams);
+                }
+            } else {
+                if (typeof params == 'string') {params = {text: params}};
+                params.tag = 'small';
+                self.addTag(params, selectorParams);
+                if (params.firebase) self.addFirebaseTag(self.extend({}, params, selectorParams));
+            }
+        }
+    } */
+    /* this.button = function (params, selectorParams) { // bootstrap
+        var mainParam = 'text';
+        if (Array.isArray(params)) {
+                for (var index in params)
+                self.button(params[index], selectorParams);
+        } else {
+            if (params.items) {
+                var itemsArray = params.items;
+                delete params.items;
+                for (var index in itemsArray) {
+                    self.button(self.replaceItems(params, itemsArray[index]), selectorParams);
+                }
+            } else {
+                if (typeof params == 'string') {params = {text: params}};
+                params.tag = 'button';
+                self.addTag(params, selectorParams);
+                if (params.firebase) self.addFirebaseTag(self.extend({}, params, selectorParams));
+            }
+        }
+    } */
+    /*
+        this.input = function (params, selectorParams) {
+            var tagParam = 'input';
+            var mainParam = 'text';
+            if (Array.isArray(params)) {
+                    for (var index in params)
+                    self.input(params[index], selectorParams);
+            } else {
+                if (params.items) {
+                    var itemsArray = params.items;
+                    delete params.items;
+                    for (var index in itemsArray) {
+                        self.input(self.replaceItems(params, itemsArray[index]), selectorParams);
+                    }
+                } else {
+                    self.addTag(self.createTagParams(params, tagParam, mainParam), selectorParams);
+                    if (params.firebase) self.addFirebaseTag(self.extend({}, params, selectorParams));
+                }
+            }
+        }
+    
+        this.span = function (params, selectorParams) {
+            var mainParam = 'text';
+            if (Array.isArray(params)) {
+                    for (var index in params)
+                    self.span(params[index], selectorParams);
+            } else {
+                if (params.items) {
+                    var itemsArray = params.items;
+                    delete params.items;
+                    for (var index in itemsArray) {
+                        self.span(self.replaceItems(params, itemsArray[index]), selectorParams);
+                    }
+                } else {
+                    params.tag = 'span';
+                    // qui ci andrebbe replaceProperties
+                    if (typeof params == 'string') {params = {text: params}};
+                    self.addTag(params, selectorParams);
+                    if (params.firebase) self.addFirebaseTag(self.extend({}, params, selectorParams));
+                }
+            }
+        }
+            */
+    /*  this.a = function (params, selectorParams) {
+        var mainParam = 'text';
+        var tagParam = 'a';
+        if (Array.isArray(params)) {
+                for (var index in params)
+                self.a(params[index], selectorParams);
+        } else {
+            if (params.items) {
+                var itemsArray = params.items;
+                delete params.items;
+                for (var index in itemsArray) {
+                    self.a(self.replaceItems(params, itemsArray[index]), selectorParams);
+                }
+            } else {
+                if (typeof params == 'string') {params = {text: params}};
+                params.tag = 'a';
+                self.addTag(params, selectorParams);
+                if (params.firebase) self.addFirebaseTag(self.extend({}, params, selectorParams));
+            }
+        }
+    } */
+    /* this.p = function (params, selectorParams) {
+        var mainParam = 'html';
+        if (Array.isArray(params)) {
+                for (var index in params)
+                self.p(params[index], selectorParams);
+        } else {
+            if (params.items) {
+                var itemsArray = params.items;
+                delete params.items;
+                for (var index in itemsArray) {
+                    self.p(self.replaceItems(params, itemsArray[index]), selectorParams);
+                }
+            } else {
+                if (typeof params == 'string') {params = {html: params}};
+                params.tag = 'p';
+                self.addTag(params, selectorParams);
+                if (params.firebase) self.addFirebaseTag(self.extend({}, params, selectorParams));
+            }
+        }
+    } */
+    /* this.lottie = function (params, selectorParams, args) {
+        self.htmlTag(params, selectorParams, 'lottie-player', 'src');
+    } */
+    //this.lottie = function (params, selectorParams, args) {
+    //    self.htmlTag(params, selectorParams, 'lottie-player', 'src');
+    /* self.log('lottie');
+    var mainParam = 'src';
+    var tagParam = 'lottie-player';
+    if (Array.isArray(params)) {
+            for (var index in params)
+            self.lottie(params[index], selectorParams);
+    } else {
+        if (params.items) {
+            var itemsArray = params.items;
+            delete params.items;
+            for (var index in itemsArray) {
+                self.lottie(self.replaceItems(params, itemsArray[index]), selectorParams);
+            }
+        } else {
+            var container = params.container || self.selector(selectorParams);
+            // qui ci andrebbe replaceProperties
+            //this.alert(self.selector(self.extend({}, params, selectorParams)));
+            self.addTag(self.createTagParams(params, tagParam, mainParam), {container: container});
+            //if (params.firebase) self.addFirebaseTag(self.extend({}, params, selectorParams));
+        }
+    } */
+    //}
+    /* this.iframe = function (params, selectorParams) {
+        var mainParam = 'src';
+        if (Array.isArray(params)) {
+                for (var index in params)
+                self.iframe(params[index], selectorParams);
+        } else {
+            if (params.items) {
+                var itemsArray = params.items;
+                delete params.items;
+                for (var index in itemsArray) {
+                    self.iframe(self.replaceItems(params, itemsArray[index]), selectorParams);
+                }
+            } else {
+                if (typeof params == 'string') {params = {src: params}};
+                params.tag = 'iframe';
+                var paramsReplaced = self.replaceProperties(params);
+                self.addTag(paramsReplaced, selectorParams);
+            }
+        }
+    } */
+    /*  this.textarea = function (params, selectorParams) {
+        if (Array.isArray(params)) {
+                for (var index in params)
+                self.textarea(params[index], selectorParams);
+        } else {
+            if (params.items) {
+                var itemsArray = params.items;
+                delete params.items;
+                for (var index in itemsArray) {
+                    self.textarea(self.replaceItems(params, itemsArray[index]), selectorParams);
+                }
+            } else {
+                if (!params.tag) params.tag = 'textarea';
+                //params.container = params.container || self.selector(selectorParams);
+                self.addTag(params, selectorParams);
+            }
+        }
+    } */
+    /*
+    this.div = function (params, selectorParams) {
+        if (params.firebase) {
+            self.log('==========');
+            self.log('div');
+            self.log(params);
+            self.log('==========');
+        }
+
+        var tagParam = 'div';
+        var mainParam = 'text';
+        if (Array.isArray(params)) {
+                for (var index in params)
+                self.div(params[index], selectorParams);
+        } else {
+            if (params.items) {
+                var itemsArray = params.items;
+                delete params.items;
+                for (var index in itemsArray) {
+                    self.div(self.replaceItems(params, itemsArray[index]), selectorParams);
+                }
+            } else {
+                self.addTag(self.createTagParams(params, tagParam, mainParam), selectorParams);
+                if (params.firebase) self.addFirebaseTag(self.extend({}, params, selectorParams));
+            }
+        }
+    }
+
+    this.ul = function (params, selectorParams) {
+        if (Array.isArray(params)) {
+                for (var index in params)
+                self.ul(params[index], selectorParams);
+        } else {
+            if (params.items) {
+                var itemsArray = params.items;
+                delete params.items;
+                for (var index in itemsArray) {
+                    self.ul(self.replaceItems(params, itemsArray[index]), selectorParams);
+                }
+            } else {
+                params.tag = 'ul';
+                    
+                var paramsReplaced = self.replaceProperties(params);
+                self.addTag(paramsReplaced, selectorParams);
+                if (params.firebase) self.addFirebaseTag(params);
+            }
+        }
+    }
+    */
+    this.li = function (params, selectorParams) {
+        if (Array.isArray(params)) {
+            for (var index in params)
+                self.li(params[index], selectorParams);
+        } else {
+            if (params.items) {
+                var itemsArray = (typeof params.items == 'string') ? self.json.items[params.items] : params.items;
+                //var itemsArray = params.items;
+                delete params.items;
+                for (var index in itemsArray) {
+                    if (self.only(itemsArray[index].roles))
+                        self.li(self.replaceItems(params, itemsArray[index]), selectorParams);
+                }
+            } else {
+                if (typeof params == 'string') { params = { html: params }; };
+                params.tag = 'li';
+                //params.container = params.container || self.selector(selectorParams);
+                self.do(params, selectorParams);
+            }
+        }
+    };
+
+    this.remove = function (params, selectorParams, args) {
+        var selector = self.selector(params.selector || self.selector(selectorParams));
+        if (selector) {
+            var elements = self.queryAll(selector);
+            if (elements) {
+                elements.forEach(function (element, index) {
+                    element.remove();
+                });
+            }
+        }
+    };
+
+    this.dispatchEvent = function (params, selectorParams, args) {
+        var selector = self.selector(params.selector || self.selector(selectorParams));
+        if (selector) {
+            var elements = self.queryAll(selector);
+            if (elements) {
+                elements.forEach(function (element, index) {
+                    element.dispatchEvent(new Event(params.name));
+                });
+            }
+        }
+    };
+
+    /* this.element with "selector" and "method": (remove/dispatchEvent) */
+    this.html = function (params, selectorParams, args) {
+        /* self.log('html');
+        self.log('params');
+        self.log(params);
+        self.log('selectorParams');
+        self.log(selectorParams);   */
+
+        // TO DO: update
+        // html properties can be only:
+        // selector, attr, html, on, for, if
+        // can't be:
+        // animate (should go inside on: init?) 
+        // tags (div etc) because it should go inside html
+        // do
+        // functions, window functions...
+        // text should be alternative to html tag. if inside html, it should give an error
+        // TO DO: verificare se args viene portato agli elementi annidati (non andava con svg) 
+        if (params) {
+
+            if (Array.isArray(params)) {
+
+                // TO DO: shoud check if params require plugins
+                for (var obj of params)
+                    self.html(obj, selectorParams, args);
+            } else {
+
+                //if (params.container == '#weatherReport') alert()
+                //var container = (selectorParams) ? self.selector(selectorParams) : params.container; // unused
+                //var selector = self.selector(self.extend({}, params, selectorParams), undefined, true); //), undefined, true);
+                /*
+                            self.log('selector');
+                            self.log(selector); */
+                var container = self.selector(params.selector || params.container) || self.selector(selectorParams);
+                //var container = self.selector(selectorParams, undefined, true) || self.selector(params, selectorParams, true);
+                /* self.log('container');
+                self.log(container); */
+                /*                 var element = self.query(container);
+                                self.log('element');
+                                self.log(element);
+                    */
+                if (container) {
+                    var element = self.query(container);
+
+                    // empty or not? probably yes (like jquery) but we need append/prepend method
+                    // append only all the items in the array
+                    // TO DO: queryAll -> elements
+                    if (element) {
+
+                        if (typeof params == 'string') {
+
+                            //var paramsCompiled = self.compile(params, args);
+                            var paramsCompiled = self.replaceProperties(params, args);
+
+                            //$(container).append(paramsCompiled); // should be .html not append
+                            //element.appendChild(paramsCompiled);
+                            if (paramsCompiled) {
+                                if (typeof paramsCompiled == 'object') {
+                                    // should be a nested tag or actions on,for,if,empty
+                                    self.do(paramsCompiled, { selector: container }, args);
+
+                                } else if (typeof paramsCompiled == 'string') {
+                                    element.innerHTML += paramsCompiled; // TO DO: now is like append. Is it correct?
+                                }
+                            }
+
+                        } else {
+
+                            if (params.empty || params.do == 'empty') {
+                                element.innerHTML = '';
+                                delete params.empty;
+                            }
+
+                            if (params.tag) {
+                                self.do(params, container, args);
+                                //self.nested({key: params.tag, obj: params[par], selector: {selector: container}, args: args});
+                            }
+                            else if (params.html) {
+                                // replace \" to "
+                                //var htmlCompiled = self.compile(params.html, args); // is undefined
+                                // TO DO: replace all the following "compile" with replaceProperties?
+                                /* self.log('params.html');
+                                self.log(params.html); */
+                                var htmlCompiled = self.replaceProperties(params.html, args);
+                                /* self.log('htmlCompiled');
+                                self.log(htmlCompiled); */
+                                self.html(htmlCompiled, { selector: container });
+                            } else if (params.lang) {
+                                //alert(self.json.setup.language);
+                                var textLang = params.lang[self.json.setup.language] || params.lang['en'] || params.lang[Object.keys[0]];
+                                if (Array.isArray(textLang)) {
+                                    var paragraphs = [];
+                                    for (var paragraph of textLang)
+                                        paragraphs.push({ p: paragraph });
+                                    self.html(paragraphs, selectorParams, args);
+                                }
+                                else
+                                    element.innerHTML = self.replaceProperties(textLang, args);
+
+                                if (element) {
+                                    self.attribute(element, 'data-text', true); // textKey instead of lang?
+                                    self.dataStorage.set(element, 'params', params);
+                                }
+
+                            } else if (params.text) { // string
+                                //params.text = self.replaceTags({text:params.text});
+                                //params.text = self.text(params.text);  // verifica presenza di tags e traduzioni
+                                //$(selector).text(self.compile(params.text, args));
+                                element.textContent = self.replaceProperties(params.text, args);
+                                //} else if (params.empty || params.do == 'empty') {
+                                //    element.innerHTML = '';
+                            } else if (params.append) { // string
+                                //params.append = self.replaceTags({text:params.append});
+                                //$(selector).append(self.compile(params.append, args));
+                                //element.appendChild(self.compile(params.append, args));
+                                element.innerHTML += self.replaceProperties(params.append, args);
+
+                            } else if (params.prepend) { // string
+                                //params.prepend = self.replaceTags({text:params.prepend});
+                                //$(selector).prepend(self.compile(params.prepend, args));
+                                //element.insertBefore(self.compile(params.prepend, args));
+                                element.innerHTML = self.replaceProperties(params.prepend, args) + element.innerHTML;
+
+                            } else if (params.blocks) { // obsolete
+                                self.blocks(params.blocks, { selector: container }, args);
+                            } else {
+
+                                let nestedParams = self.cloneObject(params);
+                                if (nestedParams.style) delete nestedParams.style;
+                                if (nestedParams.attr) delete nestedParams.attr;
+
+                                console.warn('UNKNOWN TAG');
+                                console.warn(params);
+                                // on, for, if... (can be changed to include also html)
+                                self.do(nestedParams, { selector: container }, args);
+
+
+                                if (element.isConnected) {
+                                    // case "html":{selector:... attr: }
+                                    // the wrong use "html":{selector, attr, html:...}
+                                    // now doesn't work (because is inside the last else)
+                                    /* if (params.on) {
+                                        alert(container);
+                                        self.on(params.on, { selector: container }, args);
+                                    } */
+                                        
+                                    if (params.attr) self.setAttributes(element, params.attr, args);
+                                    if (params.style) self.css(params, selectorParams, args); //  to be removed
+
+                                    // TO DO: params.style is deprecated (now in attr or css)
+                                }
+                                //self.blocks(params, selectorParams, args);
+                            }
+
+
+
+                        }
+                    } else { // !element
+                    }
+                } else {
+                    self.log('"html" object requires selector property', 'red');
+                    self.log(params);
+                    //self.log(selectorParams);
+                }
+
+                //}
+                //}
+            }
+        } else {
+            self.log('"html" object without params');
+        }
+
+    };
+
+    /* this.add = function (params) { // obsoleto, sostituito da html
+        var selector = self.selector(params);
+        if (params.inverse)
+            $(selector).append(params.html);
+        else
+            $(selector).prepend(params.html);
+    } */
+    /*    this.attr = function (params, selectorParams, args) {
+            var selector = self.selector(params);
+            var element = self.query(selector);
+            for (var attribute in params.attr)
+            elements.forEach(function (element, index) {
+                element.setAttribute(attrId, attrValue);
+            });
+        }
+        */
+    /* this.empty = function (params) {
+        // { [container, class, value, id] }
+        var selector = self.selector(params);
+        $(selector).empty();
+    } */
+    /* this.addClass  = function (params) {
+        var selector = self.selector(params);
+        $(selector).addClass(params);
+    }
+
+    this.removeClass  = function (params) {
+        self.log('removeClass');
+        var selector = self.selector(params);
+        $(selector).removeClass(params);
+    } */
+    /* this.toggleClass  = function (params) {
+        var selector = self.selector(params);
+        $(selector).toggleClass(params);
+    } */
+    //"#wifi > ul > li > span[data-field=share]:contains('Private')"
+    this.setAttributes = function (elements, attrs, args) {
+        for (var attribute in attrs)
+            if (attrs[attribute])
+                self.attribute(elements, attribute, self.replaceResult(attrs[attribute], args));
+            else
+                self.attribute(elements, attribute, "");
+            //self.attribute(elements, attribute, attrs[attribute]);
+            //self.attribute(elements, attribute, self.replaceWithPrefix(attrs[attribute], 'result', args)); // TO DO: check
+        // before remove and check all the {result} occurrence (result excludes do/then/success etc.)
+        // replaceResult replace {result} from Alert (should be obsolete)
+        // check in the actual apps if {result} is used
+    };
+
+/*     this.setAttributes = function (elements, attrs, args) {
+            if (!Array.isArray(elements)) elements = [elements];
+            elements.forEach(function (element, index) {
+                for (var attribute in attrs) {
+                    if (typeof attrs[attribute] == 'boolean' && attrs[attribute]) { // it consider also firebase (empty values are removed)
+                        element.setAttribute(attribute, "");
+                    } else {
+                        //if (attrs[attribute] == undefined) attrs[attribute] = '';
+                        element.setAttribute(attribute, self.replaceProperties(attrs[attribute]));
+                    }
+                }
+            });
+            self.attribute(elements, attribute, self.replaceResult(attrs[attribute], args));
+    }; */
+
+    // TO DO: distinguish setAttribute from getAttribute
+    // because we need to set attribute empty
+    this.attribute = function (elements, attrId, attrValue) {
+        if (typeof attrValue !== undefined) {
+            if (!Array.isArray(elements)) elements = [elements];
+            elements.forEach(function (element, index) {
+                if (typeof attrValue == 'boolean' && attrValue) { // it consider also firebase (empty values are removed)
+                    element.setAttribute(attrId, "");
+                } else {
+                    element.setAttribute(attrId, self.replaceProperties(attrValue));
+                }
+            });
+        } else {
+            if (!Array.isArray(elements))
+                return elements.getAttribute(attrId); // todo: intercept the error "Cannot read properties of undefined (reading 'getAttribute"
+
+            else
+                return elements[0].getAttribute(attrId);
+        }
+    };
+
+    this.attr = function (params, selectorParams, args) {
+        // deprecated. to be replaced with "css" {selector, style, addClass, removeClass, toggleClass}
+        // css is used as an action to apply addClass removeClass toggleClass
+        // and to apply style: {...}
+        //params = self.replaceProperties(params);
+        self.css(self.replaceProperties(params), selectorParams, args);
+    };
+
+    this.styleElement = function (params, element, args) {
+        for (var styleName in params) {
+            if (styleName.startsWith('--'))
+                element.style.setProperty(styleName, self.replaceProperties(params[styleName], args));
+
+            else
+                element.style[styleName] = self.replaceProperties(params[styleName], args);
+        }
+    };
+
+    this.css = function (params, selectorParams, args) {
+        // {selector, style, addClass, removeClass, toggleClass}
+
+        /* console.log('selectorParams');
+        console.log(selectorParams);
+        console.log('css');
+        console.log(params); */
+        if (Array.isArray(params)) {
+            for (var obj of params)
+                self.css(obj, selectorParams, args);
+            /* } else if (params.selector && Array.isArray(params.selector)) {
+                for (let selector of params.selector) {
+                    let obj = self.cloneObject(params);
+                    obj.selector = selector;
+                    self.css(obj, selectorParams, args); */
+        } else {
+
+            var selector = self.selector(params.selector || params.container, undefined, true) || self.selector(selectorParams, undefined, true);
+            var elements = self.queryAll(selector);
+
+            //var selector = params.selector || selectorParams;
+            //var elements = document.querySelectorAll(selector);
+            //console.log(elements);
+            if (elements) {
+                elements.forEach(function (element, index) {
+
+                    if (element) {
+
+                        if (typeof params.style == 'object') {
+                            self.styleElement(params.style, element, args);
+                        }
+
+                        if (params.addClass)
+                            self.addClass(element, params.addClass);
+                        if (params.removeClass)
+                            self.removeClass(element, params.removeClass);
+                        if (params.toggleClass)
+                            self.toggleClass(element, params.toggleClass);
+
+                    } else {
+                        self.log('the function "css" can\'t find the selector ' + selector);
+                        self.log(params);
+                        self.log(selectorParams);
+                    }
+                });
+            } else {
+                self.log('"css" function is unable to select: ' + selector);
+                self.log('params');
+                self.log(params);
+                self.log('selectorParams');
+                self.log(selectorParams);
+            }
+        }
+    };
+
+    /* this.class = function (params) { // obsolete -> css
+        self.log('self.class');
+        self.log(params);
+        // { [container, class, value, id]
+        // [style, addClass, removeClass] }
+        var selector = self.selector(params);
+        if (params.style)
+            $(selector).css(params.style);
+        if (params.add)
+            $(selector).addClass(params.add);
+        if (params.remove)
+            $(selector).removeClass(params.remove);
+        if (params.toggle)
+            $(selector).toggleClass(params.toggle);
+    } */
+    /* this.createPage = function (data) {
+        // SPOSTATA SOTTO fixo.pages.js
+        
+        //self.log('createPage');
+        //self.log(data);
+        if (!$('#'+data.id).length) {
+            $(data.container).append('<div id="'+data.id+'" class="fixoPage"></div>');
+            if (data.background) {
+                $('#'+data.id).css({
+                    'background-color': data.background
+                });
+            }
+        }
+    } */
+    /*     this.iconPng = function(icon) {
+            return 'https://'+self.domain+'/app/files/icons/100white/'+icon+'.png';
+        } */
+    /*     this.imgTag = function (data) {
+            // DIPENDENZA CON iconPng
+            
+            var imgId = data.id || '';
+            var imgClass = data.class || '';
+            var imgValue = data.value || '';
+            var imgStyle = data.style || ''; // || 'width: 84px; margin:6px 10px;'; // ATTENZIONE: stile predefinito da rimuovere
+            var onClick = (data.action) ? 'onclick="javascript:self.do(\''+data.action+'\',\''+imgValue+'\')" ' : '';
+            return '<img src="'+self.iconPng(data.icon)+'" id="'+imgId+'" class="'+imgClass+'" data-value="'+imgValue+'" style="'+data.style+'" '+onClick+'/>';
+        } */
+    /*     this.setImg = function (data) {
+            // Sembra inutilizzata
+            // DIPENDENZA CON iconPng
+    
+            // data = {icon, style}
+            var selector = self.selector(data);
+            var imgValue = data.value || '';
+            $(selector).attr('src', self.iconPng(data.icon));
+            if (data.style) $(selector).css(style);
+            if (data.action) {
+                $(selector).attr('onclick', 'javascript:self.do(\''+data.action+'\',\''+imgValue+'\')');
+            }
+        } */
+    // --------------
+    //  SVG
+    // --------------
+    /*     this.svgSet = function (params) {
+            //self.log('svgSet');
+            //self.log(params);
+            if (self.json && self.json.icons) {
+            //if (self.json.setup && self.json.setup.icons) {
+    
+                if (params.icon) {
+                    var iconObj = {};
+                    iconObj.icon = (params.icon.indexOf(':')) ? params.icon.split(/:/)[1] : string;
+                    iconObj.set = (params.icon.indexOf(':')) ? params.icon.split(/:/)[0] : undefined;
+    
+                    var svgIcons = self.json.icons || {}; // {src, prefix, suffix}
+                    //var svgIcons = self.json.setup.icons || {}; // {src, prefix, suffix}
+                    if (iconObj.set)
+                        if (svgIcons[iconObj.set])
+                            svgIcons = svgIcons[iconObj.set];
+                        else
+                            self.log('Can\'t find the icons set "'+iconObj.set+'" in "icons"');
+                    iconObj.src = svgIcons.src || ''; // serve?
+                    var svgPrefix = svgIcons.prefix || '';
+                    var svgSuffix = svgIcons.suffix || '';
+                    //if (iconObj.src !== '' && iconObj.icon) iconObj.src = '#' + svgPrefix + iconObj.icon + svgSuffix;
+                    if (iconObj.icon) {
+                        
+                        if (!svgIcons.preload)
+                            // siamo vicini
+                            iconObj.src = svgIcons.src + '#' + svgPrefix + iconObj.icon + svgSuffix;
+                        else
+                            iconObj.src = '#' + iconObj.set + '_' + svgPrefix + iconObj.icon + svgSuffix;
+                    }
+                    iconObj.viewbox = svgIcons.viewbox; //  || '0 0 25 25';
+                    return iconObj; // {src, set, name, viewbox}
+                } else {
+                    self.log('icon "name" parameter undefined');
+                }
+            } else {
+                self.log('Can\'t find "icons" in "setup"');
+            }
+        }
+        
+        this.svgChange = function (data) {
+            self.log('svgChange');
+            self.log(data);
+    
+            var selector = self.selector(data); //), undefined, true);
+            var containerElement = self.query(selector);
+    
+            var elementSvg = containerElement.querySelectorAll('svg')[0];
+            var elementSvgUse = elementSvg.querySelectorAll('use')[0];
+            var elementSvgText = elementSvg.querySelectorAll('text')[0];
+            var elementSvgCircle = elementSvg.querySelectorAll('circle')[0];
+    
+            var iconObj = self.svgSet(data);  // {src, set, name, viewbox}
+    
+            if (iconObj.src)
+                elementSvgUse.setAttribute('xlink:href', iconObj.src);
+                //$(data.container + ' > svg > use').attr('xlink:href', iconObj.src);
+    
+            if (data.text !== undefined) {
+                elementSvgText.textContent = data.text;
+                // $(data.container + ' > svg > text').text(data.text);
+    
+                var textY = 6.5; // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor
+                if (data.textSize !== undefined) {textY = data.textSize/2;}
+    
+                if (data.textPosition == 'bottom') { // textPosition should be removed
+                    elementSvgUse.setAttribute('transform', 'translate(0, -20) scale(0.80)');
+                    //$(data.container + ' > svg > use').attr("transform", "translate(0, -20) scale(0.80)");
+                    textY += 26;
+                }
+    
+                elementSvgText.setAttribute('y', textY);
+                //$(data.container + ' > svg > text').attr('y',textY);
+                elementSvgText.style['font-size'] = data.textSize+'px';
+                //$(data.container + ' > svg > text').css('font-size',data.textSize+'px');
+    
+            } else {
+                elementSvgText.textContent = '';
+                //$(data.container + ' > svg > text').text('');
+    
+            }
+            if (data.background !== undefined){
+    
+                elementSvgCircle.setAttribute('fill', data.background);
+                elementSvgCircle.setAttribute('fill-opacity', 1);
+                elementSvgCircle.style['stroke'] = data.background;
+            }
+            if (data.border !== undefined) {
+                elementSvgCircle.setAttribute('stroke-opacity', 1);
+                elementSvgCircle.style['stroke'] = data.border;
+            }
+    
+            if (data.color !== undefined && data.color !== 'colored') {
+                elementSvgUse.style['fill'] = data.color;
+            }
+            if (data.textColor !== undefined){
+                elementSvgText.style['fill'] = data.textColor;
+            } else if (data.color) {
+                elementSvgText.style['fill'] = data.color;
+            }
+    
+        }
+    
+        this.svgImage = function (data) {
+            //$(data.container).hide();
+            //$(data.container).css({opacity:0});
+    
+            var selector = self.selector(data); //), undefined, true);
+            var containerElement = self.query(selector);
+            //var containerElement = self.query(data.container);
+    
+            //if (data.value !== undefined) $(data.container).data('value', data.value);
+    
+            var iconObj = self.svgSet(data); // {src, set, name, viewbox}
+            var viewBox = iconObj.viewbox || '-50 -50 100 100';
+            var htmlString = '<svg viewBox="'+viewBox+'"><circle cx="0" cy="0" r="46" fill-opacity="0"></circle><use xlink:href=""></use><text x="0" y="0" text-anchor="middle" fill=""></text></svg>';
+    
+            if (containerElement) {
+                containerElement.innerHTML = htmlString;
+    
+                //$(data.container).append('<svg viewBox="'+viewBox+'"><circle cx="0" cy="0" r="46" fill-opacity="0"></circle><use xlink:href=""></use><text x="0" y="0" text-anchor="middle" fill=""></text></svg>');
+    
+                var elementSvg = containerElement.querySelectorAll('svg')[0];
+                var elementSvgUse = elementSvg.querySelectorAll('use')[0];
+                var elementSvgText = elementSvg.querySelectorAll('text')[0];
+                var elementSvgCircle = elementSvg.querySelectorAll('circle')[0];
+    
+                elementSvgUse.setAttribute('xlink:href', iconObj.src);
+                //$(data.container + ' > svg > use').attr('xlink:href', iconObj.src);
+    
+                if (data.text !== undefined) {
+    
+                    elementSvgText.textContent = data.text;
+                    // $(data.container + ' > svg > text').text(data.text);
+    
+                    var textY = 6.5; // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor
+                    if (data.textSize !== undefined) {textY = data.textSize/2;}
+    
+                    if (data.textPosition == 'bottom') { // textPosition should be removed
+                        elementSvgUse.setAttribute('transform', 'translate(0, -20) scale(0.80)');
+                        //$(data.container + ' > svg > use').attr("transform", "translate(0, -20) scale(0.80)");
+                        textY += 26;
+                    }
+    
+                    elementSvgText.setAttribute('y', textY);
+                    //$(data.container + ' > svg > text').attr('y',textY);
+                    elementSvgText.style['font-size'] = data.textSize+'px';
+                    //$(data.container + ' > svg > text').css('font-size',data.textSize+'px');
+                }
+    
+    
+                if (data.background !== undefined) {
+    
+                    elementSvgCircle.setAttribute('fill', data.background);
+                    elementSvgCircle.setAttribute('fill-opacity', 1);
+                    elementSvgCircle.style['stroke'] = data.background;
+                }
+                if (data.border !== undefined){
+                    elementSvgCircle.setAttribute('stroke-opacity', 1);
+                    elementSvgCircle.style['stroke'] = data.border;
+    
+                    //$(data.container + ' > svg > circle').attr('stroke-opacity', 1);
+                    // FORSE DEVE DIVENTARE attr ANZICHE' css
+                    //$(data.container + ' > svg > circle').css({'stroke': data.border});
+                }
+                
+                //if ((data.color === undefined) && (data.color !== 'colored')) {data.color = '#fff';}
+                if (data.color !== undefined && data.color !== 'colored') {
+                    elementSvgUse.style['fill'] = data.color;
+                    //$(data.container + ' > svg > use').css({'fill': data.color});
+                    //$(data.container + ' > svg > text').css({'fill': data.color});
+                }
+                if (data.textColor !== undefined){
+                    elementSvgText.style['fill'] = data.textColor;
+                    //$(data.container + ' > svg > text').css({'fill': data.textColor});
+                } else {
+                    elementSvgText.style['fill'] = data.color;
+                    //$(data.container + ' > svg > text').css({'fill': data.color});
+                }
+    
+    
+    
+                self.css({style: data.style}, {container: data.container + ' > svg'});
+            }
+    
+        }
+        
+        this.svg = function (params, selectorParams, args) {
+            var paramsReplaced = self.replaceProperties(params, args);
+    
+            //var container = self.selector(self.extend({}, params, selectorParams));
+    
+            var container = self.selector(paramsReplaced, undefined, true) || self.selector(selectorParams, undefined, true);
+    
+            var element = self.query(container);
+            var color = paramsReplaced.color || getComputedStyle(element).color;
+            //if (element.getElementsByTagName('SVG').length == 0) {
+            //if (element.querySelectorAll('svg').length == 0) {
+    
+                self.svgImage({
+                    container: container,
+    
+                    // special param
+                    icon: paramsReplaced.icon,
+                    text: paramsReplaced.text,
+                    textSize: paramsReplaced.textSize, // verify (obsolete when span will be nested)
+                    textPosition: paramsReplaced.textPosition, // verify (obsolete when span will be nested)
+                    textColor: paramsReplaced.textColor, // verify (obsolete when span will be nested)
+                    background: paramsReplaced.background,
+                    border: paramsReplaced.border,
+                    color: paramsReplaced.color || color, // $(container).css("color"),
+                    style: paramsReplaced.style, // da fare css in svgImage
+                    class: paramsReplaced.class
+                    //hoverBackground: data.hoverBackground, // verify
+                    //hoverBorder: data.hoverBorder, // verify
+                    //hoverColor: data.hoverColor, // verify
+                });
+    
+        } */
+    // --------------
+    //  ITEM
+    // --------------
+    /*
+            this.checkItem = function (data) {
+    
+            var selectedIconClass = data.selection || 'selectedIcon'; // self.json.setup.classes.selectedIcon;
+    
+            //self.log('checkItem');
+            //self.log(data);
+            var checked = 0;
+            // var selector = '';
+            var selector = self.selector(data);
+    
+            if (data.style === undefined) {data.style = selectedIconClass;}
+            if (data.checked !== undefined) {
+                checked = self.replaceProperties(data.checked);
+                //checked = self.replaceTags({text:data.checked});
+                checked = data.checked;
+                if (data.checked) {
+                    $(selector).addClass(data.style);
+                } else {
+                    $(selector).removeClass(data.style);
+                }
+            } else {
+                checked = $(selector).hasClass( data.style );
+            }
+            return checked;
+        } */
+    /*
+        this.toggleItem = function (data) { // modificato 20180709 da changeCheckItem in toggleItem
+            self.log('toggleItem');
+            //self.log(data);
+            var checked;
+            checked = self.checkItem({
+                id: data.id,
+                class: data.class,
+                value: data.value
+                //style: data.style
+            });
+            checked = !checked; // inverte il valore
+            self.checkItem({
+                id: data.id,
+                class: data.class,
+                value: data.value,
+                checked: checked
+                //style: data.style,
+            });
+            return checked;
+        }
+        */
+    /*     this.selectItem = function (data) {
+    
+            var selectedIconClass = self.json.setup.classes.selectedIcon;
+    
+        
+            var selector = self.selector({container: data.container, class: data.class});
+            if (data.style === undefined) {data.style = selectedIconClass;}
+            $(selector).removeClass(data.style);
+    
+            self.log('selector');
+            self.log(selector);
+    
+    
+            if (data.value || data.id) {
+                selector = self.selector(data);
+                
+                $(selector).addClass(data.style);
+            }
+    
+        }
+        
+        this.unselectItems = function (data) {
+            var selectedIconClass = self.json.setup.classes.selectedIcon;
+            //if (data.style)
+            if (data.style === undefined) {data.style = selectedIconClass;}
+            if (data.class.indexOf('.') < 0) {data.class = '.' + data.class}
+            $(data.class).removeClass(data.style);
+        }
+            */
+    /*     this.removeImage = function (data) {
+            var selector = self.selector(data);
+            $(selector).css({'background-image':'url()'});
+        }
+    
+        this.loadImage = function (data) {
+            var selector = self.selector(data);
+            //if (!data.style) data.style = {};
+            //if (data.background) data.style['background-color'] = data.background;
+            if (data.image || data.image === '') {
+                self.getImage({ // ex fixo.loadImage
+                    object: selector,
+                    url: data.image
+                    //style: data.style,
+                    //animation: data.animation,
+                });
+            } else {
+                self.removeImage(data);
+            }
+        } */
+    /*         this.changeItem = function (data, selectorParams, args) {
+            self.log('changeItem');
+            self.log(data);
+            var container = (selectorParams) ? self.selector(selectorParams) : data.container;
+            var selector = self.selector(self.extend({}, data, selectorParams));
+    
+            var iconClass = ''; //self.json.setup.classes.icon || '';
+            var badgeClass = 'iconBadge'; //self.json.setup.classes.badge || '';
+    
+            if (data.svg || data.text || data.background || data.border || data.color) {
+                $(selector + ' > svg').css({opacity:1});
+                self.svgChange({
+                    container: selector,
+                    name: data.svg,
+                    text: data.text,
+                    background: data.background,
+                    border: data.border,
+                    color: data.color,
+                });
+            } else {
+                $(selector + ' > svg').css({opacity:0});
+            }
+    
+            // IMMAGINE
+            if (data.image && data.image !== '') {
+                var imgData = data;
+                imgData.style = {
+                    width: '82px',
+                    height: '82px',
+                    'margin-bottom': '27px'
+                };
+                if (data.background) imgData.style['background-color'] = data.background;
+                self.loadImage(imgData);
+                $(selector + ' > svg').css({opacity:0});
+            } else {
+                self.removeImage(data);
+                $(selector + ' > svg').css({opacity:1});
+            }
+            
+            if (data.badgeIcon || data.badgeText) {
+                if (!$('.'+badgeClass).length)
+                    $(selector).append('<div class="'+badgeClass+'"></div>');
+                self.svgImage({
+                    container: selector + ' > .'+badgeClass,
+                    icon: data.badgeIcon,
+                    text: data.badgeText,
+                    background: data.badgeBackground,
+                    border: data.badgeBorder,
+                    color: data.badgeColor,
+                });
+            } else {
+                $(selector + ' > .'+badgeClass).remove();
+            }
+    
+    
+            if (data.titleColor)
+                $(selector + ' > span').css({'color':data.titleColor});
+            else if (data.color)
+                $(selector + ' > span').css({'color':data.color});
+            
+            if (data.titleSize) $(selector + ' > span').css({'font-size':data.titleSize});
+            if (data.title) {
+                $(selector+' > span').text(data.title);
+                if ($(selector+' > span').hasClass('textFitted')) {
+                    self.textFit($(selector+' > span'), {
+                        alignHoriz: false,
+                        multiLine: false,
+                        alignVert: false,
+                        minFontSize: 10,
+                        maxFontSize: data.titleSize || 12,
+                    });
+                }
+            }
+    
+            if (data.checked !== undefined) {
+                self.checkItem({
+                    container: data.container,
+                    class: data.class,
+                    value: data.value,
+                    id: data.id,
+                    checked: data.checked
+                    //style: data.style,
+                });
+            }
+    
+            // action (obsolete)
+            if (data.action) {
+                var onData = $(selector).data('onData');
+                onData.action = data.action;
+                $(selector).data('onData', onData); // nuova versione
+            }
+            // events
+            if (data.on) self.on(data.on, {container: selector});
+    
+        } */
+    /*     this.enableIcon = function (params, selectorParams) {
+            var container = (selectorParams) ? self.selector(selectorParams) : params.container;
+            var selector = self.selector(self.extend({}, params, selectorParams));
+    
+            $(selector).css({'opacity':'1'});
+            $(selector).off().on(self.touch, function(event){
+                event.stopPropagation();
+                self.onEvent(this, event);
+            });
+        }
+        
+        this.disableIcon = function (params, selectorParams) {
+            var badgeClass = self.json.setup.classes.badge || '';
+    
+            var container = (selectorParams) ? self.selector(selectorParams) : params.container;
+            var selector = self.selector(self.extend({}, params, selectorParams));
+    
+            $(selector + ' > .'+badgeClass).remove();
+            $(selector).css({'opacity':'0.5'});
+            $(selector).off();
+        }
+            */
+    /*     this.getFileExtension = function (path) {
+            var dotPosition=path.lastIndexOf(".");
+            var stringLength=path.length;
+            var extensionFile=path.substring(dotPosition+1,stringLength);
+            return extensionFile;
+        } */
+    // --------------------
+    // SLIDER
+    // --------------------
+    /*         var slides = {};
+        
+        var sliderLib = 'fixoSlider';
+        var sliderWrapperClass = 'fixoSlider';
+        //var sliderSlideClass = 'fixoSlidez';
+        var sliderSelectedClass = 'slideSelected'; */
+    /*
+        var sliderLib = 'flickity';
+        var sliderWrapperClass = 'fixoSlider';
+        var sliderSlideClass = 'fixoSlide';
+        var sliderSelectedClass = 'is-selected';
+    */
+    /*
+        var sliderLib = 'sliderpro';
+        var sliderWrapperClass = 'sp-slides';
+        var sliderSlideClass = 'sp-slide';
+        var sliderSelectedClass = 'sp-selected';
+    */
+    /*
+    var sliderLib = 'swiper';
+    var sliderWrapperClass = 'swiper-wrapper';
+    var sliderSlideClass = 'swiper-slide';
+    var sliderSelectedClass = 'swiper-slide-active';
+    */
+    /*
+    this.sliderResume = function (data) {
+        var selector = self.selector(data);
+        if (slides[selector]) slides[selector].object.resume();
+    }
+        
+    this.sliderFreeze = function (data) {
+        var selector = self.selector(data);
+        if (slides[selector]) slides[selector].object.freeze();
+    }
+        
+    this.sliderNext = function(data) {
+        var selector = self.selector(data);
+        if (sliderLib == 'fixoSlider') slides[selector].object.next();
+        //if (sliderLib == 'flickity') slides[selector].object.flickity('next');
+    }
+
+    this.sliderPrev = function(data) {
+        var selector = self.selector(data);
+        if (sliderLib == 'fixoSlider') slides[selector].object.prev();
+        //if (sliderLib == 'flickity') slides[selector].object.flickity('previous');
+    }
+
+    this.autoSliderEvent = function() {
+        var selector = self.selector(data);
+        if (self.sliderSelected)
+            slides[self.sliderSelected].object.autoSliderEvent();
+    }
+
+    this.addSlideIcon = function(data) {
+        // creata per rendere più leggibile createSlide
+        var selector = self.selector(data);
+        var isImage = self.getFileExtension(data.icon);
+        if (isImage == 'gif' || isImage == 'jpg' || isImage == 'jpeg' || isImage == 'png')
+            fixo.loadImage({
+                object: selector + ' > .slideIcon',
+                url: data.icon,
+                style: {height: '150px',
+                    width: '150px',
+                    marginTop: '25px',
+                    marginLeft: '-75px',
+                    backgroundSize: 'cover'
+                }
+            });
+        else
+        //if (data.icon)
+            self.svgImage({
+                container: selector + ' > .slideIcon',
+                icon: data.icon,
+                color: '#fff',
+                });
+        if (data.iconName)
+            $(selector + ' > .slideIconName').html(data.iconName); // da cancellare?
+        if (data.iconAction) {
+            var value = data.iconValue || '';
+            $(selector + ' > .slideIcon').attr('onclick', 'javascript:self.do(\''+data.iconAction+'\', \''+value+'\')');
+        }
+    }
+
+    this.changeSlideIcon = function(data) {
+        var selector = self.selector(data);
+        // verificare se si può usare changeItem
+        if (data.icon)
+            self.svgChange({
+                container: selector + ' > .slideIcon',
+                name: data.icon,
+                color: '#fff',
+                });
+        if (data.iconName)
+            $(selector + ' > .slideIconName').html(data.iconName);
+    }
+
+    this.updateSlide = function(data) {
+        self.log('updateSlide');
+        if (!data.class) data.class = 'fixoSlide';
+        var selector = self.selector(data);
+        // ICONA
+        self.changeSlideIcon(data);
+        // BACKGROUND
+        if (data.background) $(selector).css({'background-color':data.background});
+        // TITOLO E TESTO
+        var alertTitleObj = $(selector).children('.slideTitle');
+        var alertTextObj = $(selector).children('.slideText');
+        var titleAndText = (alertTitleObj.text() !== '' && alertTextObj.text() !== '');
+        if (titleAndText) {
+            alertTitleObj.css({'margin-top':'-225px'});
+        }  else {
+            alertTitleObj.css({'margin-top':'-60px'});
+        }
+        if (data.title !== undefined) {
+            alertTitleObj.html(data.title);
+            self.textFit(titleObj, {alignHoriz: true, multiLine: false, alignVert: true, minFontSize: 40, maxFontSize: 56});
+        }
+        if (data.text !== undefined) {
+            alertTextObj.html(data.text);
+            self.textFit(textObj, {alignHoriz: true, multiLine: false, alignVert: !titleAndText, minFontSize: 17, maxFontSize: 40});
+        }
+        // BOTTONE
+        if (data.button !== undefined) {
+            if (data.button) {
+                if (data.buttonLabel) {
+                    $(selector + ' > .slideButton').html(data.buttonLabel);
+                }
+                if (data.buttonAction) {
+                    $(selector + ' > .slideButton').data('action', data.buttonAction);
+                    $(selector + ' > .slideButton').data('value', data.value);
+                    $(selector + ' > .slideButton').attr('onclick', 'javascript:self.do(\'' + data.buttonAction + '\',\''+data.value+'\')');
+                }
+                $(selector + ' > .slideButton').show();
+            } else {
+                $(selector + ' > .slideButton').hide();
+            }
+            // aggiungere changeItem dell'icona
+        }
+    }
+
+    this.slideTextFit = function() {
+        //self.log('slideTextFit');
+
+        //if (!data.class) data.class = 'fixoSlide';
+        //var selector = self.selector(data);
+        var slideSelector = self.sliderSelected + ' > .' + sliderSelectedClass;
+
+        titleObj = $(slideSelector).children('.slideTitle');
+        textObj = $(slideSelector).children('.slideText');
+
+        var titleAndText = (titleObj.text() !== '' && textObj.text() !== '');
+        if (titleAndText) {
+            titleObj.css({'margin-top':'-225px'});
+            //textObj.css({'top':(384+125-30)+'px'});
+        } else {
+            titleObj.css({'margin-top':'-60px'});
+        }
+        self.textFit(titleObj, {alignHoriz: true, multiLine: false, alignVert: true, minFontSize: 40, maxFontSize: 56});
+
+        self.textFit(textObj, {alignHoriz: true, multiLine: false, alignVert: !titleAndText, minFontSize: 17, maxFontSize: 40});
+
+    }
+
+    this.sliderTo = function(data) {
+        // apre la slide data.index
+        self.log('sliderTo');
+        var selector = self.selector(data);
+        if (data.index !== undefined) // comprende il caso = 0
+            if (slides[selector] && slides[selector].object)
+                slides[selector].object.to(data.index);
+
+            //if (sliderLib == 'swiper')
+            //    slides[selector].object.slideToLoop(data.index); // slideToLoop
+            //if (sliderLib == 'flickity')
+            //    slides[selector].object.flickity('select', data.index);
+            //if (sliderLib == 'extraslider')
+            //    $(selector+' > .extra-slider').trigger('extra:slider:goto', data.index);
+
+        if (data.value !== undefined) { // comprende il caso = 0
+            self.log(self.selector(data));
+            if (!data.class) data.class = 'fixoSlide';
+            var slideToSelect = self.selector(data);
+            var index = $(slideToSelect).index();
+            if (index > -1) slides[selector].object.to(index);
+            //var slideToSelect = '.' + sliderSlideClass + '[data-value="' + data.prefix + data.value + '"]';
+        }
+
+            //if (sliderLib == 'flickity')
+            //    slides[selector].object.flickity('selectCell', slideToSelect);
+    }
+    
+    this.sliderExist = function(data) { // si può cancellare?
+        var selector = self.selector(data);
+        //alert(($(selector + ' > .extra-slider').length > 0));
+        return ($(selector + ' > .extra-slider').length > 0)
+        // return (slides[selector])
+    }
+    
+    this.createSlide = function(data) {
+        self.log('createSlide');
+        //if (!data.prefix) data.prefix = "";
+        if (!data.class) data.class = "fixoSlide";
+        //var containerSelector = self.selector(data);
+        var slideContent = '<div class="' + data.class + '" data-value="'+ data.value + '"></div>';
+
+        if (data.inverse) {
+            $(data.container).prepend(slideContent);
+        } else {
+            $(data.container).append(slideContent);
+        }
+        var selector = self.selector(data);
+        var infoButtons = data.infoButtons || {};
+
+        // STORE DATA
+        $(selector).data('container', data.container);
+        if (data.value) $(selector).data('value', data.value);
+        //if (data.id) $(selector).data('id', data.id);
+        //if (data.prefix) $(selector).data('prefix', data.prefix);
+
+        var textHtml =  (data.text) ? data.text.replace(/\r?\n/g, '<br/>') : '';
+
+        // PRICE
+        //if(data.price && data.price !== '') textHtml += '<br/>€ '+data.price;
+
+        // BACKGROUND
+        if (data.background) $(selector).css({'background-color':data.background});
+
+        // IMAGE
+        if (data.image && data.image !== '') {
+            if (data.title !== '' || textHtml !== '' )
+                {
+                    //$(selector).css({'background-image':'linear-gradient(to right,rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('+data.image+')'});
+                    //} else {
+                    //$(selector).css({'background-image':'url('+data.image+')'});
+                    $(selector).append('<div class="fixoImgOverlay"></div>')
+                }
+            
+            if (sliderLib == 'fixoSlider') {
+                $(selector).css({'background-image':'url('+data.image+')'});
+                // DA GESTIRE INTERNAMENTE A fixo.slider.js
+                // DOVRA' CARICARE SOLO SLIDE ATTUALE, PREC. E SUCC
+
+                //fixo.loadImage({
+                //    object: selector,
+                //    url: data.image,
+                //    animation: 'fadeIn',
+                //});
+
+            }
+
+            //if (sliderLib == 'swiper') {
+            //    $(selector).addClass('swiper-lazy');
+            //    $(selector).attr('data-background', data.image);
+            //}
+            //if (sliderLib == 'flickity') {
+            //    $(selector).attr('data-flickity-bg-lazyload', data.image);
+            //}
+
+        } else {
+
+            $(selector).css({'background-image':'none'});
+            // SERVICE ICON
+            //$(selector).append('<div class="slideIcon"></div><div class="slideIconName" style="display:none"></div></div>');
+            //self.addSlideIcon(data);
+
+            // if (data.icon)
+            //     self.svgImage({
+            //         container: selector + ' > .slideIcon',
+            //         icon: data.icon,
+            //         color: '#fff',
+            //         });
+            // if (data.iconName)
+            //     $(selector + ' > .slideIconName').html(data.iconName);
+
+            // if (data.icon)
+            //     self.svgImage({
+            //         container: selector + ' > .slideIcon',
+            //         icon: data.icon,
+            //         color: '#fff',
+            //         });
+            // if (data.iconName)
+            //     $(selector + ' > .slideIconName').html(data.iconName);
+        }
+        
+        // ICONA
+        $(selector).append('<div class="slideIcon"></div><div class="slideIconName" style="display:none"></div></div>');
+        self.addSlideIcon(data);
+
+        // TITLE & TEXT
+        $(selector).append('<div class="slideTitle"></div><div class="slideText"></div><div class="slideInfo"></div>');
+
+        var alertTitleObj = $(selector + ' > .slideTitle');
+        var alertTextObj = $(selector + ' > .slideText');
+        var alertInfoObj = $(selector + ' > .slideInfo');
+
+        // BOTTONI INFO
+
+        var btnInfo = '';
+        for (var i in infoButtons) {
+            if (infoButtons[i].icon !== '')
+                btnInfo += self.imgTag({
+                    icon: infoButtons[i].icon,
+                    action: infoButtons[i].action,
+                    class: infoButtons[i].class,
+                    value: infoButtons[i].value,
+                    //style: 'width: 84px; margin:6px 10px;'
+                });
+            //alertInfoObj.html(btnInfo);
+        }
+        alertInfoObj.html(btnInfo);
+
+        // TESTO
+        
+        if (data.title && data.title !== '') {
+            alertTitleObj.html(data.title);
+        } else {
+            alertTitleObj.html(data.iconName);
+        }
+        alertTextObj.html(textHtml);
+        
+        //alertInfoObj.html()
+        
+
+        // if (data.link && data.link !== '') { // serviva a costruire il div con il qrcode, sostituito dal link per aprire lo swal alert
+        //     var link = data.link;
+        
+        //     self.log('DATALINK: '+link);
+
+        //     if (link.indexOf('musement.com') || link.indexOf('booking.com')) {
+        //         link = link.replace(/^https?:\/\//,''); //rimuovo https dal link
+        //         self.log('link: '+link);
+        //         link = 'https://c83.travelpayouts.com/click?shmarker=219111&promo_id=2015&source_type=customlink&type=click&custom_url=' + link;
+        //     }
+            
+        //     self.log('DATALINK1: '+link);
+            
+        //     $(selector).append('<div class="slideQrCode"></div>');
+        //     self.qrCode({
+        //         container: selector,
+        //         class: 'slideQrCode',
+        //         text: link,
+        //         size: 100
+        //     });
+        //     // attributo sul Codice QR per la visualizzazione dell'alert
+        //     $('.slideQrCode > img').attr('onclick','javascript:self.do(\'app.hot.alertQRCode\')');
+        // } else {
+
+            
+            $(selector).append('<div class="slideButton" style="display:none"></div>');
+            if (data.button) {
+                if (data.buttonLabel) {
+                    $(selector + ' > .slideButton').html(data.buttonLabel);
+                }
+                if (data.buttonAction) {
+                    $(selector + ' > .slideButton').data('action', data.buttonAction);
+                    $(selector + ' > .slideButton').data('value', data.value);
+                    $(selector + ' > .slideButton').attr('onclick', 'javascript:self.do(\'' + data.buttonAction + '\',\''+data.value+'\')');
+                }
+                $(selector + ' > .slideButton').show();
+
+                // $(selector + ' > .slideButton').off().on(self.touch, function(){
+                //     var action = $(this).data('action');
+                //     var key = $(this).data('value');
+                //     self.do(action, value);
+                // });
+
+            } else {
+                $(selector + ' > .slideButton').hide();
+            }
+        //} chiude l'IF del data.link
+        var titleAndText = (alertTitleObj.text() !== '' && alertTextObj.text() !== '');
+
+        // POSIZIONE TITOLO
+        var titleTop = -70 -170 * (titleAndText);
+        alertTitleObj.css({'margin-top': titleTop + 'px'});
+        self.textFit(alertTitleObj, {alignHoriz: true, multiLine: false, alignVert: true, minFontSize: 30, maxFontSize: 56});
+        
+        // ALTEZZA TESTO
+        var textHeight = 340 - 100 * (infoButtons.length > 0);
+        alertTextObj.css({'height': textHeight + 'px'});
+        
+        
+        //self.textFit(alertTitleObj, {alignHoriz: true, multiLine: false, alignVert: true, minFontSize: 30, maxFontSize: 56});
+
+        //self.textFit(alertTextObj, {alignHoriz: true, multiLine: false, alignVert: !titleAndText, minFontSize: 15, maxFontSize: 45});
+        //self.log('END createSLIDE');
+
+
+    }
+    
+    this.createSlider = function (data) {
+        self.log('createSlider');
+        //if (!data.prefix) data.prefix = "";
+        var selector = self.selector(data);
+        var startIndex = data.index || 0;
+        //self.log('pre DATAINDEX: '+data.index);
+        
+        // RIMUOVE ISTANZA PRECEDENTE
+
+        if (slides[selector] && slides[selector].object) {
+            // Memorizza posizione
+            var slideSelector = selector + ' > .' + sliderSelectedClass;
+            //self.log('slideSelector di self.createSlider: '+slideSelector);
+            startIndex = data.index || $(slideSelector).index();
+            // Rimuove slider precedente
+            //self.log('startIndex: di '+data.index+' .index() '+$(slideSelector).index());
+            $(selector).empty();
+            delete slides[selector].object;
+        }
+
+        slides[selector] = {};
+
+
+        // FRECCE
+        // if (data.buttons) {
+        //     if (sliderLib == 'swiper') {
+        //         $(selector).append('<div class="swiper-button-next swiper-button-white"></div>');
+        //         $(selector).append('<div class="swiper-button-prev swiper-button-white"></div>');
+        //     }
+        // }
+        
+        for (var key in data.slides) {
+            var slide = data.slides[key];
+            slide.inverse = data.inverse;
+            //slide.container = selector; //+' > .' + sliderWrapperClass;
+            slide = self.extend({
+                container: selector,
+                class: 'fixoSlide', //sliderSlideClass,
+                value: data.value, //data.prefix + data.value
+            }, slide);
+            self.createSlide(slide);
+            
+        }
+
+        // CREAZIONE OGGETTO SLIDER
+        
+        if (sliderLib == 'fixoSlider') {
+
+            var params = {
+                container: selector, //+' > .' + sliderWrapperClass,
+                play: data.play,
+                interval: data.interval,    // ms
+                onChange: data.onChange,
+                onChangeStart: self.slideTextFit,
+                    index: startIndex         // prima slide
+                // direction: 1,            // from right to left
+                // opts.swipeDuration: 0.6, // sec
+                // opts.swipeTreshold: 0.2, // Swipe from +/-20%
+            };
+
+            slides[selector].object = $.fn.slide(params);
+        }
+        //self.log('END createSlider');
+    }
+*/
+    /*
+        this.getSelectedSlide = function (data) {
+            self.log('getSelectedSlide');
+            //self.log(data);
+            var selector = self.selector(data);
+            if (sliderLib == 'fixoSlider') {
+                var slideSelector = selector + ' > .' + sliderSelectedClass;
+                
+                self.log($(slideSelector).data('value'));
+                return $(slideSelector).data('value');
+            }
+    
+        }
+    
+        var sliderSelect = function (currentItem, currentIndex) { //si può cancellare?
+            var id = $(currentItem).parent().parent().parent().attr('id');
+            self.log('slideId:'+id);
+            self.log('currentItem:'+currentItem);
+            self.log('currentIndex:'+currentIndex);
+            slides[id].currentItem = currentItem;
+            slides[id].currentIndex = currentIndex;
+        }
+    
+        var sliderPause = function (currentItem, currentIndex) { // si può cancellare?
+            $(currentItem).parent().parent().trigger('extra:slider:pause');
+            var id = $(currentItem).parent().parent().parent().attr('id');
+            self.log('slideId:'+id);
+            self.log('currentItem:'+currentItem);
+            self.log('currentIndex:'+currentIndex);
+            slides[id].currentItem = currentItem;
+            slides[id].currentIndex = currentIndex;
+        }
+    
+        var sliderPlay = function (currentItem, currentIndex) { // si può cancellare?
+            $(currentItem).parent().parent().trigger('extra:slider:pause');
+            $(currentItem).parent().parent().trigger('extra:slider:resume');
+            var id = $(currentItem).parent().parent().parent().attr('id');
+            self.log('slideId:'+id);
+            self.log('currentItem:'+currentItem);
+            self.log('currentIndex:'+currentIndex);
+            slides[id].currentItem = currentItem;
+            slides[id].currentIndex = currentIndex;
+        }
+    
+        var sliderResume = function (currentItem, currentIndex) { //si può cancellare?
+            var id = $(currentItem).parent().parent().parent().attr('id');
+            if (slides[id].active) {
+                sliderPlay(currentItem, currentIndex);
+            } else {
+                sliderPause(currentItem, currentIndex);
+            }
+        }
+    
+        var sliderClick = function (currentItem, currentIndex) { // si può cancellare ?
+            var id = $(currentItem).parent().parent().parent().attr('id');
+            if (slides[id].active) {
+                slides[id].active = false;
+            } else {
+                slides[id].active = true;
+            }
+        } */
+    /*         this.addItem = function (data, selectorParams) { // obsolete
+    
+            var container = (selectorParams) ? self.selector(selectorParams) : data.container;
+            var selector = self.selector(self.extend({}, data, selectorParams));
+    
+            // app default
+            // aggiungere anche dimensione di default
+    
+            var iconClass = self.json.setup.classes.icon || '';
+            var badgeClass = self.json.setup.classes.badge || '';
+    
+            var style = (data.style) ? data.style : {};
+    
+            // retro-compatibility
+            if (data.size) {
+                if (data.size == 'small')
+                    style.width = '50px';
+                else if (data.size == 'medium')
+                    style.width = '80px';
+                else if (data.size == 'big')
+                    style.width = '120px';
+                else if (data.size)
+                    style.width = data.size;
+            }
+    
+            style = self.extend({}, style, { // retrocompatibilità / obsoleto
+                color: data.color,
+                background: data.background,
+                border: data.border,
+                display: data.display,
+                margin: data.margin,
+                padding: data.padding,
+                width: data.width,
+                height: data.height
+            });
+    
+    
+            // Create
+            if (data.id === undefined) {data.id = '';}
+            if (data.value === undefined) {data.value = data.id};
+            if (data.class === undefined) {data.class = iconClass} else if (data.class !== iconClass) {data.class += ' ' + iconClass};
+    
+            var itemDiv = '<div id="'+data.id+'" class="'+data.class+'" data-value="'+data.value+'" data-selector="'+selector+'"></div>';
+            
+            if (data.prepend) {
+                $(data.container).prepend(itemDiv);
+            } else {
+                $(data.container).append(itemDiv);
+            }
+    
+            self.css({style: {
+                width: style.width,
+                display: style.display,
+                padding: style.padding,
+                margin: style.margin
+            }}, {container: selector});
+    
+            // SVG
+    
+            if (data.svg || data.text) {
+                self.svgImage({
+                    container: selector,
+                    icon: data.svg,
+                    text: data.text,
+                    textSize: data.textSize, // verify (obsolete when span will be nested)
+                    textPosition: data.textPosition, // verify (obsolete when span will be nested)
+                    textColor: data.textColor, // verify (obsolete when span will be nested)
+                    background: style.background,
+                    border: style.border,
+                    color: style.color
+                    //hoverBackground: data.hoverBackground, // verify
+                    //hoverBorder: data.hoverBorder, // verify
+                    //hoverColor: data.hoverColor, // verify
+                });
+            } else {
+                
+            }
+    
+            // image
+    
+            if (data.image) {
+                var imgData = data;
+                imgData.style = {
+                    width:'82px',
+                    height:'82px',
+                    'margin-bottom':'27px'
+                };
+                if (style.background) imgData.style['background-color'] = style.background;
+                self.loadImage(imgData);
+            }
+            
+            // badge
+            
+            if (data.badgeIcon || data.badgeText) {
+                $(selector).append('<div class="'+badgeClass+'"></div>');
+                self.svgImage({
+                    container: selector + ' > .'+badgeClass,
+                    icon: data.badgeIcon,
+                    text: data.badgeText,
+                    background: data.badgeBackground,
+                    border: data.badgeBorder,
+                    color: data.badgeColor,
+                });
+            }
+    
+    
+            if (data.title) {
+                //data.title = self.text(data.title);
+                data.titleColor = data.titleColor || style.color;
+                if (data.titleColor == undefined) {data.titleColor = ''}
+                if (data.titleSize == undefined) {data.titleSize = ''}
+                //if (data.titleSizeMin == undefined) {data.titleSize = '7px'}
+    
+                $(selector).append('<span></span>');
+                $(selector + ' > span').css({
+                    color: data.titleColor,
+                    'font-size': data.titleSize
+                });
+                //if (typeof data.title == 'object') alert(data.title.text);
+                self.text(data.title, {container: selector + ' > span'});
+                //var title = self.text(data.title);
+                //$(selector + ' > span').text(title);
+    
+                //self.text(data.title);
+    
+                // itemSelectedBorderWhite GESTITO IN INDEX.CSS
+    
+                // questo stile dovrebbe essere fisso e con posizione assoluta
+                if (data.image)
+                    $(selector + ' > span').css({
+                        'margin-top':'89px',
+                        position: 'absolute'
+                    });
+    
+    
+                if (data.textFit !== false) {
+                    self.textFit($(selector+' > span'), {
+                        alignHoriz: false,
+                        multiLine: false,
+                        alignVert: false,
+                        minFontSize: 10,
+                        maxFontSize: data.titleSize,
+                    });
+                }
+            }
+    
+            // action (obsolete)
+            if (data.action || data.functions) {
+                var.functions[selector] = data.functions || data.action; // obsoleto
+                $(selector).data('onData', data); // nuova versione
+                $(selector).off().on(self.touch, function(event){
+                    event.stopPropagation();
+                    self.onEvent(this, event);
+                });
+            }
+            
+            // matchMedia
+            if (data.matchMedia) {
+                for (var mediaEvent in data.matchMedia) {
+                    self.matchMedia(data.matchMedia[mediaEvent], mediaEvent);
+                }
+            }
+    
+            // events
+            if (data.on) self.on(data.on, {container: selector});
+    
+            if (data.checked !== undefined) {
+                self.checkItem({
+                    container: data.container,
+                    class: data.class,
+                    value: data.value,
+                    id: data.id,
+                    checked: data.checked
+                    //style: data.style,
+                });
+            }
+        } */
+    // --------------
+    //  TABS
+    // --------------
+    /*         this.addTab = function (data, selectorParams) {
+            //self.log('addTab');
+            //self.log(data);
+    
+            var containerParams = self.cloneObject(selectorParams);
+    
+            data.container  = containerParams.container;
+            var selector = self.selector(data);
+    
+            var tabClass = ''; //self.json.setup.classes.button || '';
+            var badgeClass = 'iconBadge'; //self.json.setup.classes.badge || '';
+    
+            var style = (data.style) ? data.style : {};
+    
+            // span height
+            //style["line-height"] = (style.height) ? style.height : '42px';
+    
+            style = self.extend({}, style, {
+                color: data.color,
+                background: data.background,
+                border: data.border,
+                display: data.display,
+                margin: data.margin,
+                padding: data.padding,
+                width: data.width,
+                height: data.height
+            });
+    
+            if (data.id === undefined) {data.id = '';}
+            if (data.value === undefined) {data.value = data.id};
+            if (data.class === undefined) {data.class = tabClass} else if (data.class !== tabClass) {data.class += ' ' + tabClass};
+    
+            var tabDiv = '<div id="'+data.id+'" class="'+data.class+'" data-value="'+data.value+'" data-selector="'+selector+'"></div>';
+    
+            $(data.container).append(tabDiv);
+            
+            self.css({style: style}, {container: selector});
+    
+            //if (data.key) {$(selector).data('key', data.key);}
+    
+            //var iconColor = style.color || $(selector).css("color");
+    
+            // ICON
+            if (data.icon) {
+                self.addItem({
+                    class: 'icon',
+                    value: data.value,
+                    svg: data.icon,
+                    image: data.image,
+                    style: {
+                        color: style.color || $(selector).css("color"),
+                        width: style.height
+                    }
+                }, {container: selector});
+            }
+    
+            // TEXT
+            if (data.text !== undefined) {
+                //alert(JSON.stringify(data.text));
+    
+                $(selector).append('<span></span>');
+    
+                self.text(data.text, {container: selector + ' > span'});
+    
+    
+            } else {
+                //alert(JSON.stringify(data.text));
+            }
+    
+            if (data.icon) $(selector + ' > span').css({'padding-left': '0px'});
+    
+            // SPAN
+            if(style.color) $(selector + ' > span').css({'color':style.color});
+    
+            // BADGE
+            if (data.badgeIcon || data.badgeText) {
+                if (!$('.'+badgeClass).length)
+                    $(selector).append('<div class="'+badgeClass+'"></div>');
+                self.svgImage({
+                    container: selector + ' > .'+badgeClass,
+                    icon: data.badgeIcon,
+                    text: data.badgeText,
+                    background: data.badgeBackground,
+                    border: data.badgeBorder,
+                    color: data.badgeColor,
+                });
+            } else {
+                $(selector + ' > .'+badgeClass).remove();
+            }
+    
+            // data
+            if (data.action || data.functions){
+                var.functions[selector] = data.functions || data.action; // obsoleto
+                $(selector).data('onData', data); // nuova versione
+                $(selector).off().on(self.touch, function(event){
+                    event.stopPropagation();
+                    self.onEvent(this, event);
+                    //$(this).data('value')
+                    //var selector = $(this).data('selector');
+                    //var action = var.functions[selector];
+                    //self.do($(this).data('onData').action, $(this).data('value'));
+                });
+            }
+    
+            // matchMedia
+            if (data.matchMedia) {
+                for (var mediaEvent in data.matchMedia) {
+                    self.matchMedia(data.matchMedia[mediaEvent], mediaEvent);
+                }
+            }
+    
+            // events
+            if (data.on) self.on(data.on, {container: selector});
+    
+            if (data.selected) self.selectTab(data);
+            
+        } */
+    /*         this.changeTab = function (data, selectorParams) {
+    
+            var container = (selectorParams) ? self.selector(selectorParams) : data.container;
+            var selector = self.selector(self.extend({}, data, selectorParams));
+    
+            if (data.icon && data.value) {
+                self.changeItem({
+                    container: selector,
+                    class: 'icon',
+                    value: data.value,
+                    svg: data.icon,
+                    color: data.color,
+                    background: data.background
+                });
+            }
+    
+            if(data.background) $(selector).css({'background':data.background});
+            if(data.color) $(selector + ' > span').css({'color':data.color});
+    
+            if (data.text) {
+                //$(selector + ' > span').text(self.text(data.text));
+                self.text(data.text, {container: selector + ' > span'});
+            }
+    
+            if (data.action){
+                $(selector).off().on(self.touch, function(){
+                    data.action(data.value)
+                });
+            }
+            // events
+            if (data.on) self.on(data.on, {container: selector});
+    
+            if (data.selected) self.selectTab(data);
+        } */
+    /*         this.unselectTabs = function (data) {
+    
+            var selectionClass = data.selection || 'selectedButton';
+            //var selectionClass = self.json.setup.classes.selectedButton;
+            if (data.style) selectionClass = data.style;
+            $(data.class).removeClass(selectionClass);
+        }
+    
+        this.toggleTab = function (data) {
+            data.toggle = true;
+            return self.selectTab(data);
+        }
+    
+        this.selectTab = function (data) {
+            var selectionClass = data.selection || 'selectedButton';
+            //var selectionClass = self.json.setup.classes.selectedButton;
+            if (data.style) selectionClass = data.style;
+            var selector = self.selector(data);
+    
+            if (data.deselectClass)
+                if (data.class) $('.'+data.class).removeClass(selectionClass);
+                
+            if (data.checked !== undefined) {
+                if (data.checked == false) $(selector).removeClass(selectionClass);
+                else $(selector).addClass(selectionClass);
+            } else if (data.toggle !== undefined) {
+                // da toggleTab
+                if ($(selector).hasClass(selectionClass)) {
+                    $(selector).removeClass(selectionClass);
+                    return false;
+                } else {
+                    //if (data.class) $('.'+data.class).removeClass(selectionClass);
+                    $(selector).addClass(selectionClass);
+                    return true;
+                }
+            } else {
+                //if (data.class) $('.'+data.class).removeClass(selectionClass);
+                $(selector).addClass(selectionClass);
+            }
+        } */
+    // ---------------------------
+    // FUNZIONI DATEPICKER
+    // ---------------------------
+    /*
+        // basato su: http://www.daterangepicker.com/#options
+        
+        this.createDatePicker = function (data) {
+            self.log('createDatePicker');
+            var calendarVisible = false;
+            if (!data.field) data.field = data.container + ' > .daterange';
+            
+            if (!$(data.field).length) {
+                calendarVisible = true;  // Crea e nasconde campo testo e mostra calendario
+                $(data.container).html('<input type="text" class="form-control daterange" style="display:none"/>');
+            }
+            
+            var weekD = self.weekdaysShort(1, capitalize);
+            weekD = weekD.unshift(weekD[6]);
+            var monthsOfYear = ["January","February","March","April","May","June","July","August","September","October","November","December"];
+            if (data.language) {
+                monthsOfYear = moment.localeData(data.language).months();
+                for (var index in monthsOfYear) {
+                    monthsOfYear[index] =
+                        monthsOfYear[index].substr(0,1).toUpperCase()
+                        + monthsOfYear[index].substr(1);
+                }
+            }
+            //var datarange = $('#daterange');
+            
+            $(data.field).daterangepicker({
+                singleDatePicker: data.single,
+                parentEl: data.container,
+                startDate: data.start,
+                endDate: data.end,
+                autoApply: true,
+                autoUpdateInput: false,
+                locale: {
+                    format: 'DD/MM/YYYY',
+                    daysOfWeek: weekD,
+                    monthNames: monthsOfYear,
+                    firstDay: 1 // monday
+                }
+            });
+            
+            
+            $(data.field).on('cancel.daterangepicker', function(ev, picker) {
+                data.onCancel();
+            });
+    
+            $(data.field).on('apply.daterangepicker', function(ev, picker) {
+                data.onChange({
+                    start: picker.startDate.format('YYYYMMDD'),
+                    end: picker.endDate.format('YYYYMMDD')
+                });
+                if (picker.startDate && picker.endDate && picker.startDate !== picker.endDate) {
+                    $(data.field).val(picker.startDate.format('DD/MM/YYYY') + '-' + picker.endDate.format('DD/MM/YYYY'));
+                } else {
+                    $(data.field).val(picker.startDate.format('DD/MM/YYYY'));
+                }
+            });
+    
+            self.unselectDatePicker({container: data.container});
+    
+    
+        }
+    
+        var disableDates = [];
+        this.updateDatePicker = function(data) {
+            var datePicker = $(data.container + ' > .daterange').data('daterangepicker');
+            if (data.disableDates) {disableDates = data.disableDates;}
+    //             alert(datePicker+'-'+data.container);
+            datePicker.isInvalidDate = function(date) {
+                return (disableDates.indexOf(date.format('YYYYMMDD')) >= 0)
+            }
+            datePicker.updateView();
+            if (data.start && data.end) {
+                self.setDatePicker({
+                    container: data.container,
+                    start: data.start,
+                    end: data.end,
+                });
+            } else {
+                self.unselectDatePicker({container: data.container});
+            }
+        }
+    
+        this.unselectDatePicker = function(data) {
+            $(data.container).find('.start-date').removeClass('start-date active');
+            $(data.container).find('.end-date').removeClass('end-date active');
+            $(data.container).find('.in-range').removeClass('in-range');
+    
+        }
+            
+        this.setDatePicker = function (data) {
+            var datePicker = $(data.container + ' > .daterange').data('daterangepicker');
+            datePicker.setStartDate(data.start);
+            datePicker.setEndDate(data.end);
+            datePicker.updateView();
+        }
+    
+        this.getDatePicker = function (data) {
+            var start = $(data.container + ' > .daterange').data('daterangepicker').startDate(data.start);
+            var end = $(data.container + ' > .daterange').data('daterangepicker').endDate(data.end);
+            //alert('ok: '+data.container);
+            return {start: start, end: end}
+        }
+    
+        // ---------------------------
+        // FUNZIONI TIMEPICKER
+        // ---------------------------
+    
+        this.createTimePicker = function (data) {
+            $(data.container).html('<div class="datetimepicker" data-value="'+data.value+'"></div>');
+    
+            $(data.container + ' > .datetimepicker').datetimepicker({
+                icons: {
+                    up: "fixoNavUp",
+                    down: "fixoNavDown",
+                    previous: "fixoNavBackward",
+                    next: "fixoNavForward"
+                },
+                inline: true,
+                sideBySide: true,
+                //locale: 'it'
+                locale: {
+                    format: 'DD/MM/YYYY',
+                    daysOfWeek: weekD,
+                    monthNames: monthsOfYear,
+                    firstDay: 1 // monday
+                }
+            });
+    
+            //self.log('now: '+Date.now()+' moment: '+moment());
+    
+            self.setTimePicker({
+                container: data.container,
+                time: data.time
+            });
+    
+    
+            $(data.container + ' > .datetimepicker').off().on('dp.change', function(event) {
+                var datePicked = moment(event.date).unix();
+                //alert(datePicked);
+                data.onChange(datePicked);
+            });
+    
+        }
+    
+        this.setTimePicker = function (data) {
+            //self.log('>>> setTimePicker --> data container: '+data.container+' data time: '+data.time+' moment: '+moment.unix(data.time).calendar());
+            $(data.container + ' > .datetimepicker').data('DateTimePicker').date(moment.unix(data.time));//.format('LLL'));
+        }
+    
+        this.getTimePicker = function (data) {
+            //alert('ok: '+data.container);
+            $(data.container + ' > .datetimepicker').data('DateTimePicker').date();
+        }
+    */
+    // ---------------------------
+    // TIME SLIDER
+    // ---------------------------
+    /*
+        this.createTimeSlider = function(data){
+            var container = data.container;
+            var id = data.id;
+    
+            // c'è un'anomalia nella libreria bootstrap-slider
+            // crea il contenitore dello slider con lo stesso id del campo input
+            // va verificata la possibilità di configurazione della funzione .slider
+            
+            $('#'+data.container).append('<input id="'+id+'" data-slider-id="'+id+'" type="text" class="span2" value="" data-slider-min="0" data-slider-max="48" data-slider-step="1" data-slider-value="[0,48]" data-slider-tooltip="hide"/>');
+            $('#'+id).slider();
+            $('#'+id).off().on("slide slideStop", function(event) {
+    
+                self.log(event);
+                self.changeItem({
+                    id:'stepbackwardSlider'+id,
+                    text: self.numberToHour({value: event.value[0], max: 48})
+                });
+                self.changeItem({
+                    id:'stepforwardSlider'+id,
+                    text: self.numberToHour({value: event.value[1], max: 48})
+                });
+                
+                if (data.onChange) {
+                    data.onChange({
+                        start: self.numberToHour({value: event.value[0], max: 48}),
+                        end: self.numberToHour({value: event.value[1], max: 48})
+                    })
+                }
+    
+            });
+    
+            // ICONS Slider
+            self.addItem({
+                container:'#'+id+' > .min-slider-handle',
+                class: 'sliderIconLeft',
+                id: 'stepbackwardSlider'+id,
+                background: '#fff',
+                color: 'black',
+                border: 1,
+                text: '00:00'
+            });
+            self.addItem({
+                container:'#'+id+' > .max-slider-handle',
+                class: 'sliderIconRight',
+                id: 'stepforwardSlider'+id,
+                background: '#fff',
+                color: 'black',
+                border: 1,
+                text: '24:00'
+            });
+            //$('#'+sliderId+' .slider-selection').css({'background': '#fff'});
+    
+        }
+    
+        this.setTimeSlider = function(data){
+            //Change value on slider left/right icon
+            self.changeItem({
+                    id:'stepbackwardSlider'+data.id,
+                    text: data.start
+                });
+            self.changeItem({
+                id:'stepforwardSlider'+data.id,
+                text: data.end
+            });
+            //Convert value in 0-48 format
+            var start = self.hourToNumber({value: data.start, max: 48});
+            var end = self.hourToNumber({value: data.end, max: 48});
+            // Set value on slider
+            $('input[id="'+data.id+'"]').slider('setValue',[start,end]);
+    
+        }
+    
+        this.getTimeSlider = function(data){
+            var slideStart = $('input[id="'+data.id+'"]').slider('getValue')[0] || 0;
+            var slideEnd = $('input[id="'+data.id+'"]').slider('getValue')[1] || 48;
+            var start = self.numberToHour({value: slideStart, max: 48});
+            var end = self.numberToHour({value: slideEnd, max: 48});
+            if (start == '24:00') {start = '00:00'}
+            var timetable = {
+                start: start || '00:00',
+                end: end || '24:00'
+            }
+            return timetable;
+        }
+    */
+    this.numberToHour = function (data) {
+        var fraction = data.value / data.max;
+        var dayMin = Math.round(24 * 60 * fraction);
+        var hour = parseInt(dayMin / 60);
+        var min = dayMin - hour * 60;
+        var hourString = String(hour < 10 ? '0' : '') + String(hour);
+        var minString = String(min < 10 ? '0' : '') + String(min);
+        return hourString + ':' + minString;
+    };
+
+    this.hourToNumber = function (data) {
+        var timeArr = data.value.split(':');
+        var dayMin = (60 * Number(timeArr[0])) + Number(timeArr[1]);
+        var fraction = dayMin / (24 * 60);
+        return Math.round(fraction * data.max);
+    };
+
+    this.pannellum = function (params, selectorParams, args) {
+        self.log('pannellum');
+        var container = params.selector || params.container;
+        var selector = self.selector(container) || self.selector(selectorParams);
+        var element = self.query(selector);
+        pannellum.viewer(element, params);
+    };
+
+    this.qrcode = function (params, selectorParams, args) {
+        self.log('qrcode');
+        var container = params.selector || params.container;
+        var selector = self.selector(container) || self.selector(selectorParams);
+        var element = self.query(selector);
+        // var obj = self.compile(data);
+        self.log(selector);
+        self.log('element');
+        self.log(element);
+
+        var QRCodeOptions = {
+            text: self.replaceProperties(params.text, args) || 'jsonic.io',
+            width: params.size || 128,
+            height: params.size || 128,
+            useSVG: true,
+            colorDark: params.colorDark || '#000000',
+            colorLight: params.colorLight || '#ffffff',
+            correctLevel: QRCode.CorrectLevel.H
+        };
+        self.log('QRCodeOptions');
+        self.log(QRCodeOptions);
+
+        element.textContent = '';
+        var qrcode = new QRCode(element, QRCodeOptions);
+        self.log('qrcode');
+        self.log(qrcode);
+        return qrcode;
+        //qrcode.clear(); // clear the code.
+        //qrcode.makeCode(text); // make another code
+    };
+
+    /*     this.qrcode = function (data) {
+            self.log('qrcode');
+            var selector = self.selector(data);
+    
+            var options = {
+                // render method: 'canvas', 'image' or 'div'
+                render: 'image',
+    
+                // version range somewhere in 1 .. 40
+                minVersion: 1,
+                maxVersion: 40,
+    
+                // error correction level: 'L', 'M', 'Q' or 'H'
+                ecLevel: 'L',
+    
+                // offset in pixel if drawn onto existing canvas
+                left: 0,
+                top: 0,
+    
+                // size in pixel
+                size: data.size || 200,
+    
+                // code color or image element
+                fill: data.color || '#000',
+    
+                // background color or image element, null for transparent background
+                background: data.background || null,
+    
+                // content
+                text: self.replaceProperties(data.text) || 'no text',
+    
+                // corner radius relative to module width: 0.0 .. 0.5
+                radius: 0,
+    
+                // quiet zone in modules
+                quiet: 0,
+    
+                // modes
+                // 0: normal
+                // 1: label strip
+                // 2: label box
+                // 3: image strip
+                // 4: image box
+                mode: 0,
+    
+                mSize: 0.1,
+                mPosX: 0.5,
+                mPosY: 0.5,
+    
+                label: data.label || 'no label',
+                fontname: data.fontname || 'sans',
+                fontcolor: data.fontcolor || '#000',
+    
+                image: null
+            }
+            $(selector).empty().qrcode(options);
+        }   */
+    this.weekdaysShort = function (length, caseFunction) {
+        if (!caseFunction) caseFunction = caseUp;
+        var language = 'en';
+        var fixoLang = fixo.getFixoLanguage();
+        var userLang = fixo.getUserLanguage();
+        if (fixo.device) language = fixoLang; else language = userLang;
+        var weekDays = self.cloneObject(moment.localeData(language).weekdays());
+
+        weekDays[7] = weekDays[0];
+        weekDays.shift();
+
+        for (var i = 0; i < 7; i++) {
+            if (length) weekDays[i] = weekDays[i].substr(0, length);
+            if (caseFunction) weekDays[i] = caseFunction(weekDays[i]);
+        }
+        return weekDays;
+    };
+
+
+    this.weekDaysToString = function (days) {
+        var text = '';
+        for (var i in days) {
+            if (days[i]) {
+                if (text !== '') text += '/';
+                text += self.weekdaysShort(3, capitalize)[i];
+            }
+        }
+        return text;
+    };
+
+    // -----------
+    // DRAG
+    // -----------
+    /*
+        var draggingData;
+    
+        this.sortable = function (data) {
+            var rootEl = $(data.container)[ 0 ];
+            var dragEl;
+            
+            draggingData = data;
+            var selector = self.selector(data);
+            $(selector).attr('draggable', 'true');
+            $(data.exclude).attr('draggable', 'false');
+            
+            // Function responsible for sorting
+            function onDragOver(event) {
+                event.preventDefault();
+                event.dataTransfer.dropEffect = 'move';
+    
+                var dragTarget = event.target; // target.nextSibling ||
+                if ($(dragTarget).hasClass(draggingData.class))
+                    $( dragEl ).insertAfter( $(dragTarget) );
+                if ($(dragTarget).parent().hasClass(draggingData.class))
+                    $( dragEl ).insertAfter( $(dragTarget).parent() );
+            }
+    
+            // End of sorting
+            function onDragEnd(event){
+                event.preventDefault();
+    
+                $(dragEl).css({'opacity':'100%'});
+                rootEl.removeEventListener('dragover', onDragOver, false);
+                rootEl.removeEventListener('dragend', onDragEnd, false);
+    
+                // Notification about the end of sorting
+                draggingData.target = dragEl;
+                draggingData.onDragEnd(draggingData);
+            }
+    
+            // Sorting starts
+            rootEl.addEventListener('dragstart', function (event){
+                dragEl = event.target; // Remembering an element that will be moved
+                
+                $(dragEl).css({'opacity':'50%'});
+    
+                // Limiting the movement type
+                event.dataTransfer.effectAllowed = 'move';
+                event.dataTransfer.setData('Text', dragEl.textContent);
+    
+    
+                // Subscribing to the events at dnd
+                rootEl.addEventListener('dragover', onDragOver, false);
+                rootEl.addEventListener('dragend', onDragEnd, false);
+    
+    
+                setTimeout(function () {
+                    // If this action is performed without setTimeout, then
+                    // the moved object will be of this class.
+                    $(dragEl).css({'opacity':'100%'});
+                }, 0)
+            }, false);
+        }
+    
+            */
+    /*
+        this.setWeekDays = function(data){
+    
+            if (!data.days) data.days = {};
+    
+            for (var i=1; i<7; i++){
+                self.selectTab({
+                    container: data.container,
+                    class: 'fixoTabsWeekDays',
+                    value: String(i),
+                    checked: data.days[String(i)] || false
+                });
+            }
+        }
+        
+        this.createWeekDays = function(data){
+            //var selector = self.selector(data);
+            var weekDays = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];
+            self.log('data.language '+data.language);
+            if (data.language) weekDays=moment.localeData(data.language).weekdaysShort();
+            for (var i=0; i<7; i++){
+                var weekDay = weekDays[i];
+                self.addTab({
+                    container: data.container,
+                    class: data.class,
+                    value: String(i),
+                    id: data.container + i,
+                    background: 'black',
+                    color: 'white',
+                    border: '1px solid rgba(0, 0, 0, 1)',
+                    text: weekDay,
+                    action: function(value){
+                        //alert($(this).attr(id));
+                        // il toggleTab deselezionava sempre gli altri giorni
+                        // risolto usando il selectTab col parametro checked
+                        // va sistemato toggleTab
+                        if (!data.days) data.days = {};
+                        var checked = !Boolean(data.days[value]);
+                        self.selectTab({
+                            container: data.container,
+                            class: 'fixoTabsWeekDays',
+                            value: value,
+                            checked: checked
+                        });
+                        data.days[value] = checked;
+                    }
+                });
+            }
+        }
+    */
+    //--------------------------
+    // DA FIXO.JS
+    //--------------------------
+    /*---------------------
+        UTILS
+    ---------------------*/
+    var sortField;
+
+    var dynamicSort = function (data) {
+        var sortOrder = 1;
+        if (data.reverse) { sortOrder = -1; }
+        sortField = data.field;
+        return function (a, b) {
+            var result = (a[sortField] < b[sortField]) ? -1 : (a[sortField] > b[sortField]) ? 1 : 0;
+            return result * sortOrder;
+        };
+    };
+
+    this.sort = function (data) {
+        // fixo.sort({object:{}, add: {}, field:'time', reverse:true})
+        if (data.object !== undefined) {
+            if (Array.isArray(data.object)) {
+                return data.object.sort(dynamicSort({
+                    field: data.field,
+                    reverse: data.reverse
+                }));
+            } else {
+                var arr = self.objectToArray({
+                    object: data.object,
+                    add: data.add,
+                });
+                return arr.sort(dynamicSort({
+                    field: data.field,
+                    reverse: data.reverse
+                }));
+            }
+        } else {
+            self.log('sort of undefined');
+            return [];
+        }
+    };
+
+    this.objectToArray = function (data) {
+        // data: {object:{}, add: {}}
+        var arr = [];
+        var obj = data.object;
+        if (obj !== undefined) {
+            for (var key in obj) {
+                obj[key].id = key; // aggiunge la chiave dell'oggetto come proprietà
+                if (data.add) obj[key] = Object.assign(obj[key], data.add);
+                arr.push(obj[key]);
+            }
+        }
+        return arr;
+    };
+
+
+
+    /*
+        this.itemsFound = function(items, field, value) {
+                return $.grep(items, function(e){ return e.name == value; });
+        }
+    
+    */
+    /*     this.itemFound = function(items, field, value) {
+            var itemFound = false;
+            for (var i=0; i<items.length; i++) {
+                if (items[i][field] == value) {
+                        itemFound = true;
+                }
+            }
+            return itemFound;
+        }  */
+    /*     this.itemExist = function(data) {
+            if (data.value) {
+                return ($(data.class + '[data-value='+data.value+']').length > 0);
+            } else {
+                return ($(data.class).length > 0);
+            }
+        } */
+    this.equal = function (obj1, obj2) {
+        if (obj1 && obj2) {
+            return (JSON.stringify(obj1).replace('"', '') == JSON.stringify(obj2).replace('"', ''));
+        } else {
+            return (obj1 == obj2);
+        }
+    };
+
+    /*     this.arraysEquals = function(arr1,arr2) {
+            return ($(arr1).not(arr2).length === 0 && $(arr2).not(arr1).length === 0);
+        } */
+    var escapeRegExp = function (str) {
+        return str.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
+    };
+    this.replaceAll = function (str, find, replace) {
+
+        if (str !== undefined) {
+            let result;
+            if (typeof str == 'string') result = str; else result = JSON.stringify(str);
+
+            if (str) {
+                if (find) { //  && replace
+                    //if (typeof str !== 'string') self.log(str);
+                    result = String(str).replace(new RegExp(escapeRegExp(find), 'g'), replace);
+                    //if (typeof str == 'string') return result; else return JSON.parse(result);
+                    if (typeof str == 'object' && result) return JSON.parse(result);
+                    else
+                        return result;
+                } else {
+                    /* self.log('str:'+str);
+                    self.log('find:'+find);
+                    self.log('replace:'+replace); */
+                    return str;
+                }
+            }
+        } else {
+            return str;
+        }
+    };
+
+    this.capitalize = function (str) {
+        return str.replace(/\b\w/g, l => l.toUpperCase());
+    };
+
+
+    /*---------------------
+    URL UTILS
+---------------------*/
+    this.getPageName = function (url) {
+        var index = url.lastIndexOf("/") + 1;
+        var filenameWithExtension = url.substr(index);
+        var filename = filenameWithExtension.split(".")[0]; // <-- added this line
+        return filename; // <-- added this line
+    };
+
+    this.goToMainUrl = function () {
+        window.location = self.mainUrl;
+    };
+
+    this.getParameterByName = function (name, url) {
+        if (!url) url = window.location.href;
+        name = name.replace(/[\[\]]/g, "\\$&");
+        var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"), results = regex.exec(url);
+        if (!results) return null;
+        if (!results[2]) return '';
+        return decodeURIComponent(results[2].replace(/\+/g, " "));
+    };
+
+    var paramsToObject = function (params) {
+        params = params.split('#')[0];
+        return JSON.parse('{"' + params.replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') + '"}');
+    };
+
+    var objectToParams = function (object) {
+        var str = '';
+        for (var key in object) str += '&' + key + '=' + object[key];
+        if (str) str = str.substr(1);
+        return encodeURI(str);
+    };
+
+    this.getParams = function () {
+        var params = {};
+        var url = window.location.href.split('#')[0];
+        if (url.indexOf('?') > -1) {
+            var urlParams = decodeURI(url.split('?')[1]);
+            self.log(urlParams);
+            if (urlParams) {
+                var k = self.getParameterByName('k', url);
+                //self.log(k);
+                if (k) {
+                    params = self.atob(k);
+                } else {
+                    params = paramsToObject(urlParams);
+                }
+            }
+        }
+        return params;
+    };
+
+    this.atob = function (k) {
+        self.log('atob');
+        var params = paramsToObject(atob(k)); // base64 -> query -> object
+
+        // decompress params
+        if (params.h) // hotel
+            params.h = String(parseInt(String(params.h), 36)); // base36
+        if (params.c) // customer
+            params.c = String(parseInt(String(params.c), 36)); // base36
+        if (params.n) { // phone
+            params.n = String(parseInt(String(params.n), 36)); // base36
+            params.n = '+' + params.n;
+        }
+        //if (params.s) params.s  = var.services.id[params.s];
+        self.log(params);
+        return params;
+    };
+
+    this.btoa = function (params) {
+        self.log('btoa');
+        //if (params.s) params.s = var.services.id.indexOf(params.s);
+        if (params.h) // hotel
+            params.h = Number(params.h).toString(36); // base36
+        if (params.c) // customer
+            params.c = Number(params.c).toString(36); // base36
+
+        if (params.n) { // phone
+            if (params.n.startsWith('+')) params.n = params.n.substr(1);
+            params.n = params.n.replace(/ /g, '');
+            params.n = params.n.replace(/-/g, '');
+            params.n = Number(params.n).toString(36); // base36
+        }
+        self.log(params);
+        return btoa(objectToParams(params)); // query -> base64
+    };
+
+    /*
+        var encodeNum = function(num) { // 0..1296 es:customer
+            var hex = c.toString(36);
+            return c.toString(36);
+        }
+    
+        var decodeNum = function(str) {
+            return str.parseInt(36); // .length == 1 ? "0" + hex : hex
+        }
+    */
+    this.colorToRgba = function (hex, opacity) {
+        if (hex == 'white') { hex = '#fff'; }
+        if (hex == 'black') { hex = '#000'; }
+        var c;
+        if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
+            c = hex.substring(1).split('');
+            if (c.length == 3) {
+                c = [c[0], c[0], c[1], c[1], c[2], c[2]];
+            }
+            c = '0x' + c.join('');
+            return 'rgba(' + [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(',') + ',' + opacity + ')';
+        } else {
+            self.log('Bad Hex:' + hex);
+        }
+    };
+    var hueToRGB = function (m1, m2, h) {
+        h = (h < 0) ? h + 1 : ((h > 1) ? h - 1 : h);
+        if (h * 6 < 1) return m1 + (m2 - m1) * h * 6;
+        if (h * 2 < 1) return m2;
+        if (h * 3 < 2) return m1 + (m2 - m1) * (0.66666 - h) * 6;
+        return m1;
+    };
+
+    var HSLToRGB = function (hsl) {
+        var m1, m2, r, g, b;
+        var h = hsl[0], s = hsl[1], l = hsl[2];
+        m2 = (l <= 0.5) ? l * (s + 1) : l + s - l * s;
+        m1 = l * 2 - m2;
+        return [hueToRGB(m1, m2, h + 0.33333),
+        hueToRGB(m1, m2, h),
+        hueToRGB(m1, m2, h - 0.33333)];
+    };
+
+    var packRGB = function (rgb) {
+        var r = Math.round(rgb[0] * 255);
+        var g = Math.round(rgb[1] * 255);
+        var b = Math.round(rgb[2] * 255);
+        // '#' + 
+        return (r < 16 ? '0' : '') + r.toString(16) +
+            (g < 16 ? '0' : '') + g.toString(16) +
+            (b < 16 ? '0' : '') + b.toString(16);
+    };
+
+    this.degToRGB = function (deg) {
+        return packRGB(HSLToRGB([deg / 360, 1, 0.5]));
+    };
+
+    this.stripHtml = function (html) {
+        var tmp = document.createElement("DIV");
+        tmp.innerHTML = html;
+        return tmp.textContent || tmp.innerText || "";
+    };
+
+    //--------------------------
+    // TASK MANAGER
+    //--------------------------
+    this.log = function (value, color) {
+        if (self.json.setup && self.json.setup.log) { // log enabled
+            if (typeof value === 'string')
+                console.log('%c' + value, 'color:' + color);
+
+            else
+                console.log(value);
+        }
+    };
+
+    var varlog = function (str) {
+        self.log(str);
+        self.log(window[str]); // 'var' -> var
+    };
+
+    this.logJson = function (jsonPar) { self.log(JSON.stringify(jsonPar)); };
+
+    this.getTimestamp = function () {
+        // we need also an API to get the time
+        // like .getTime()?
+        return Math.floor(Date.now());
+    };
+
+    this.cloneObject = function (obj) {
+        var newObj = JSON.stringify(obj);
+        return self.parse(newObj);
+    };
+
+
+    /*------------------------
+        TEXT
+    ------------------------*/
+    /* var caseUp = function (string) {
+        if (!string) string = '';
+        return string.toUpperCase();
+    }
+    
+    var caseDown = function (string) {
+        if (!string) string = '';
+        return string.toLowerCase();
+    }
+    
+    var capitalize = function(string) {
+        if (!string) string = '';
+        return self.capitalize(string);
+    }
+            
+    var text = function (key, caseFunction) {
+        var t = self.json.text[key] || '';
+        if (caseFunction) return caseFunction(t); else return t;
+    } */
+    this.setElement = function (elementString, elementValue) {
+        var context = window;
+        var namespaces = elementString.split(".");
+        var func = namespaces.pop();
+
+        if (namespaces[0] == 'frame') {
+            namespaces.shift();
+            var frameName = namespaces.shift();
+            if (frameName && document.getElementById(frameName) !== null)
+                context = document.getElementById(frameName).contentWindow;
+        } else if (namespaces[0] == 'admin') { // fixo
+            namespaces.shift();
+            context = fixoAdmin;
+        }
+
+
+        for (var i = 0; i < namespaces.length; i++) {
+            if (context[namespaces[i]]) { // var
+                context = context[namespaces[i]];
+            } else {
+                if (elementValue) // scrittura
+                    context[namespaces[i]] = {}; // crea contesto inesistente
+            }
+        }
+
+        context[func] = elementValue;
+    };
+
+    this.context = function (path) {
+        const re = /^(setup|var|data|texts|parts)[\.\s]/; // reserved namespaces
+        if (re.test(path)) {
+            /* self.log('MATCHED setup|var|data|parts');
+            console.log(params); */
+            return self.json;
+        } else {
+            return window;
+        }
+    };
+
+    this.element = function (params) {
+        // {root, path, value} 
+        // in respect to docElement, it includes replaceProperties for path and value
+        // but only if value is a string. TO DO: check it 
+        let context;
+        let path = self.replaceProperties(params.path, params.args);
+        let value = (params.value && typeof params.value == 'string') ? self.replaceProperties(params.value, params.args) : params.value;
+
+        // NOTE: log error if the params.root is equal to the first element of the path? (window.window works)
+        if (!params.root) {
+            context = self.context(path);
+        } else {
+            context = params.root;
+        }
+
+        return self.docElement(path, value, context, params.delete);
+
+        //self.log(value);
+        /* if (value && typeof value == 'string') {
+            if (value.startsWith('js:')) value = self.js(value.substr(3));
+            else if (value.startsWith('+=')) value = self.element({path: path}) + self.js(value.substr(2));
+            else if (value.startsWith('-=')) value = self.element({path: path}) - self.js(value.substr(2));
+            else if (value.startsWith('/=')) value = self.element({path: path}) / self.js(value.substr(2));
+            else if (value.startsWith('*=')) value = self.element({path: path}) / self.js(value.substr(2))
+        } */
+        // self.log(value);
+        /* if (value.startsWith('number:')) value = Number(self.js(value.substr(6)));
+        alert('dopo number:'+value);
+        if (value.startsWith('boolean:')) value = Boolean(self.js(value.substr(7)));
+        if (value.startsWith('string:')) value = String(self.js(value.substr(6)));
+        if (value.startsWith('+:')) value = self.element({path: path}) + self.js(value.substr(2));
+        if (value.startsWith('-:')) value = self.element({path: path}) - self.js(value.substr(2));
+        if (value.startsWith('/:')) value = self.element({path: path}) / self.js(value.substr(2));
+        if (value.startsWith('*:')) value = self.element({path: path}) / self.js(value.substr(2)); */
+        /* // verificare...
+        if (value.startsWith('push:')) {var obj = self.docElement(path, undefined, root); return obj.push(value.substr(3));}
+        if (value.startsWith('unshift:')) {var obj = self.docElement(path, undefined, root); return obj.unshift(value.substr(3));}
+        if (value.startsWith('pop:')) {var obj = self.docElement(path, undefined, root); return obj.pop(value.substr(3));}
+        if (value.startsWith('shift:')) {var obj = self.docElement(path, undefined, root); return obj.shift(value.substr(3));} */
+    };
+
+    this.docElement = function (elementString, elementValue, context, elementDelete) {
+
+        if (!context) context = window; // TO DO: remove
+        var namespaces = elementString.split(/[.\s]+/); // path nodes separed by dot or spaces
+
+
+
+
+
+
+
+
+
+
+        /* console.log('<-------');
+        console.log('context');
+            console.log(context);
+            console.log('path');
+            console.log(elementString);
+            console.log('value');
+            console.log(elementValue);
+            console.log('------>');
+*/
+        var lastElement = namespaces.pop();
+
+        /* if (namespaces[0] == 'self') {
+            namespaces.shift();
+            context = self;
+        } else if (namespaces[0] == 'frame') {
+            namespaces.shift();
+            var frameName = namespaces.shift();
+            if (frameName && document.getElementById(frameName) !== null)
+                context = document.getElementById(frameName).contentWindow;
+        } */
+        /* console.log('namespaces');
+        console.log(namespaces); */
+        for (var i = 0; i < namespaces.length; i++) {
+            if (context[namespaces[i]]) { // var
+                context = context[namespaces[i]];
+            } else {
+                if (elementValue !== undefined && elementValue !== null) { // wants to assign a value
+                    context[namespaces[i]] = {}; // it create the context context[namespaces[i]] if it doesn't exist 
+                    context = context[namespaces[i]];
+                    /* self.log('crea context inesistente');
+                    self.log('namespaces[i]: '+namespaces[i]); */
+                    /* self.log('elementValue');
+                    self.log(elementValue);
+                    self.log('context[namespaces[i]]');
+                    self.log(context[namespaces[i]]); */
+                } else {
+                    /* self.log(elementString + ' undefined');
+                    self.log('lastElement:' + lastElement);
+                    self.log(elementValue); */
+                }
+                //break; // perché? rendeva impossibile creare un listener su un nodo secondario (solo su app e non su app/dev)
+            }
+        }
+
+        if (elementValue !== undefined) { // write
+
+            //self.log(lastElement+'='+elementValue);
+            if (typeof elementValue == 'string') elementValue = self.js(elementValue); // 1.0.3
+            context[lastElement] = elementValue;
+
+            // elementValue can be a js function
+            /* self.log('context');
+            self.log(context);
+            self.log('context[lastElement]');
+            self.log(context[lastElement]);
+            self.log('====='); */
+        }
+
+        if (elementDelete) delete context[lastElement];
+
+        /* self.log('context');
+        self.log(context); */
+        /* console.log('namespaces');
+        console.log(namespaces);
+        self.log('lastElement');
+        self.log(lastElement);
+        self.log('context[lastElement]');
+        self.log(context[lastElement]); */
+        if (context[lastElement] && context[lastElement].isConnected)
+            return self.elementToSelector(context[lastElement]);
+
+        else
+            return context[lastElement];
+    };
+
+    /*    this.openCloseDropdown = function(key) {
+            self.log('openCloseDropdown');
+            self.log("key");
+            self.log(key);
+            //$('.dropdown-menu').css('display','none');
+            var selector = self.selector({
+                "id": "dropdown" +key,
+                "class": 'points',
+                "value": key,
+            });
+            self.log("selector");
+            self.log(selector);
+            if ($(selector + ' > .dropdown-menu').css('display') == 'none') {
+                $(selector + ' > .dropdown-menu').css('display', 'block');
+            } else {
+                $(selector + ' > .dropdown-menu').css('display', 'none');
+            }
+        }  */
+    this.timeToMs = function (string) {
+        // bug
+        var timeArray = string.match(/(\d+)(\w+)/); // es: 1s / 100ms
+        if (timeArray) {
+            var value = Number(timeArray[0]);
+            var unit = timeArray[1];
+            var unitInMs = {
+                ms: 1,
+                s: 1000,
+                m: 1000 * 60,
+                h: 1000 * 60 * 60,
+                d: 1000 * 60 * 60 * 24,
+                milliseconds: 1,
+                seconds: 1000,
+                minutes: 1000 * 60,
+                hours: 1000 * 60 * 60,
+                days: 1000 * 60 * 60 * 24
+            };
+            if (value)
+                if (unitInMs[unit])
+                    return value * unitInMs[unit];
+
+                else
+                    self.log('wrong unit in the time string [value][unit]: ' + string);
+
+            else
+                self.log('wrong value in the time string [value][unit]: ' + string);
+        }
+        else
+            return Number(string);
+    };
+
+    this.intervals = {};
+
+    this.timer = function (params, args) {
+        // can go in "browser.json / functions (JS Browser BOM)
+        // https://www.w3schools.com/js/js_window.asp
+        let name = self.replaceProperties(params.name);
+        if (!name)
+            name = self.getTimestamp() + Math.random(1000);
+
+        if (params.play !== undefined && params.play == 0) {
+            if (self.intervals[name]) {
+                self.clearInterval({
+                    name: name
+                }, args);
+            }
+            if (self.timeouts[name]) {
+                self.clearTimeout({
+                    name: name
+                }, args);
+            }
+        }
+        else if (params.every !== undefined) {
+            let every = self.replaceProperties(params.every);
+            if (every) {
+                self.setInterval({
+                    name: name,
+                    duration: every,
+                    do: params.do
+                }, args);
+            }
+        }
+        else if (params.after !== undefined) {
+            let after = self.replaceProperties(params.after);
+            if (after) {
+                self.setTimeout({
+                    name: name,
+                    duration: after,
+                    do: params.do
+                }, args);
+            } else {
+                self.do(params.do, null, args);
+            }
+        }
+    };
+
+    this.setInterval = function (params, args) {
+        // could include the param "fromNow": true to execute the function
+        /* self.log('setInterval');
+        self.log(params); */
+        if (params.name && params.duration) {
+            if (self.intervals[params.name])
+                clearInterval(self.intervals[params.name]);
+
+            //self.do(params.do);
+            self.do(params.do);
+            self.intervals[params.name] = setInterval(function () {
+                //self.do(params.do);
+                self.do(params.do);
+                return params.name;
+            }, Number(params.duration)); // self.timeToMs
+        }
+        else
+            self.log('"setInterval" function requires "name" and "duration" parameters');
+    };
+
+    this.clearInterval = function (params, args) {
+        /* self.log('params');
+        self.log(params);
+        self.log('self.intervals[params.name]');
+        self.log(self.intervals[params.name]); */
+        if (self.intervals[params.name]) {
+            clearInterval(self.intervals[params.name]);
+            delete self.intervals[params.name];
+        }
+        // else
+        //    self.log('"clearInterval" name not found: ' + params.name);
+    };
+
+    this.timeouts = {};
+
+    this.setTimeout = function (params, args) {
+        // could include the param "fromNow": true to execute the function
+        /* self.log('setTimeout');
+        self.log(params); */
+        if (params.name && params.duration) {
+            if (self.timeouts[params.name])
+                clearInterval(self.timeouts[params.name]);
+
+            //self.do(params.do);
+            //self.do(params.do);
+            self.timeouts[params.name] = setTimeout(function () {
+                //self.do(params.do);
+                self.do(params.do);
+                return params.name;
+            }, Number(params.duration)); // self.timeToMs
+        }
+        else
+            self.log('"setTimeout" function requires "name" and "duration" parameters');
+    };
+
+    this.clearTimeout = function (params, args) {
+        /* self.log('params');
+        self.log(params);
+        self.log('self.timeouts[params.name]');
+        self.log(self.timeouts[params.name]); */
+        if (self.timeouts[params.name]) {
+            clearTimeout(self.timeouts[params.name]);
+            delete self.timeouts[params.name];
+        }
+        //else
+        //    self.log('"clearInterval" name not found: ' + params.name);
+    };
+
+
+
+
+    this.on = function (params, selectorParams) {
+        //let selector = params.selector || params.container;
+
+        var container = (selectorParams) ? self.selector(selectorParams) : params.selector; // 1.0.9 instead of params.container
+
+
+
+
+
+
+
+
+
+
+        /* self.log('on');
+        self.log(params);
+        self.log('container');
+        self.log(container); */
+        //var selector = self.selector(self.extend({}, params, selectorParams));
+        //$(container).data('onData', {events: params, container: container});
+        var element;
+
+        if (container) {
+            element = self.query(container); // shoud be foreach elements...
+            if (element)
+                self.dataStorage.set(element, "onData", { on: params, selector: container });
+            else {
+                self.log('can\'t find the element "' + container + '" ("on" function)');
+                self.log('params');
+                self.log(params);
+                self.log('selectorParams');
+                self.log(selectorParams);
+            }
+        } /*  else {
+            self.log('"on" function with selector undefined');
+            self.log('params');
+            self.log(params);
+            self.log('selectorParams');
+            self.log(selectorParams);
+        } */
+
+
+
+
+
+
+
+        for (var eventId in params) {
+            //var eventAction = params[eventId];
+            //$(selector).data('onData').action = eventAction;
+            /* if (eventId == 'thunkable') {
+                self.thunkable(params[eventId]);
+            } else  */
+            if (eventId == 'init') {
+                //self.log(params.init);
+                //self.do(params.init, undefined, selectorParams);
+                self.do(params.init, selectorParams);
+            } else if (eventId == 'hashchange') {
+                self.onHashChange.push(params.hashchange);
+                window.addEventListener('hashchange', function () {
+                    self.json.setup.page.hash = window.location.hash.substr(1); // potrebbe essere esplicitato sulla app
+
+
+
+                    //var action = self.cloneObject(params.app.on.hashchange);
+                    //self.replaceAll("{result}", window.location.hash);
+                    //self.do(self.onHashChange);
+                    self.do(self.onHashChange);
+                    self.uiUpdate();
+                });
+            } else if (eventId == 'scroll') {
+                self.onScroll.push(params.scroll);
+                window.addEventListener('scroll', function () {
+                    //self.do(self.onScroll);
+                    self.do(self.onScroll);
+                });
+            } else if (eventId == 'resize') {
+                self.onResize.push(params.resize);
+                window.addEventListener('resize', function () {
+                    //self.do(self.onResize);
+                    self.do(self.onResize);
+                });
+            } else if (eventId == 'in') { // like inViewport but only one time
+                if (container) {
+                    const observer = new IntersectionObserver((entries, observer) => {
+                        entries.forEach(function (entry) {
+                            /* self.log('entry');
+                            self.log(entry);
+                            self.log('entry.target');
+                            self.log(entry.target); */
+                            /* self.log(entry);
+                            self.log(entry.intersectionRatio);
+                            self.log(entry.isIntersecting);
+                            self.log(entry.isVisible); */
+                            // isIntersecting, isVisible
+                            //var element = self.query(entry.target);
+                            //self.log(entry.intersectionRatio);
+                            if (entry.intersectionRatio == 1) { // .isIntersecting?
+                                var el = entry.target;
+                                if (el.getAttribute('in') !== 'true') {
+                                    el.setAttribute('in', 'true'); // change with dataStorage
+                                    self.onEvent(entry.target, { type: 'in' });
+                                }
+                            }
+                        });
+                    }, {
+                        rootMargin: '0px',
+                        threshold: [0, 1] // if 0.5 is the half-height of the elmement
+                    });
+                    //const element = self.query(container);
+                    observer.observe(self.query(container));
+                }
+            } else if (eventId == 'inViewport') {
+                if (container) {
+                    const observer = new IntersectionObserver((entries, observer) => {
+                        entries.forEach(function (entry) {
+                            /* self.log('entry');
+                            self.log(entry);
+                            self.log('entry.target');
+                            self.log(entry.target); */
+                            /*
+                            self.log(entry.intersectionRatio);
+                            self.log(entry.isIntersecting);
+                            self.log(entry.isVisible); */
+                            // isIntersecting, isVisible
+                            //var element = self.query(entry.target);
+                            //self.log(entry.intersectionRatio);
+                            if (entry.intersectionRatio > 0) {
+                                self.onEvent(entry.target, { type: 'inViewport' });
+                            }
+                        });
+                    }, {
+                        rootMargin: '0px',
+                        threshold: [0, 1] // if 0.5 is the half-height of the elmement
+                    });
+                    //const element = self.query(container);
+                    observer.observe(self.query(container));
+                }
+            } else if (eventId == 'outViewport') {
+                const observer = new IntersectionObserver((entries, observer) => {
+                    entries.forEach(function (entry) {
+                        /* self.log(entry);
+                        self.log(entry.isIntersecting);
+                        self.log(entry.isVisible); */
+                        // isIntersecting, isVisible
+                        //var element = self.query(entry.target);
+                        //self.log(entry.intersectionRatio);
+                        if (entry.intersectionRatio == 0) {
+                            self.onEvent(entry.target, { type: 'outViewport' });
+                            /* var el = entry.target;
+                            if (el.getAttribute('in') == 'true') {
+                                el.setAttribute('in', 'false');
+                                self.onEvent(entry.target, {type: 'out'});
+                            } */
+                        }
+                    });
+                }, {
+                    rootMargin: '0px',
+                    threshold: [0, 1] // if 0.5 is the half-height of the elmement
+                });
+                const element = self.query(container);
+                observer.observe(element);
+
+
+            } else if (eventId !== 'selector') {
+
+                /* if (container == '.nav-link[data-value="docs"]') {
+                    alert(JSON.stringify(params));
+                    //element = element[0];
+                    $(element).hide();
+                } */
+                //element.removeEventListener(eventId);
+                // $(container).off(eventId);
+                if (element) {
+
+                    // TO DO: verify
+                    //if (element.getAttribute('listener') !== 'true') { // only one mouse event
+                    //self.log('addEventListener: ' + eventId); 
+                    element.addEventListener(eventId, function (event) {
+                        //$(container).off(eventId).on(eventId, function (event) {
+                        /* self.log('event');
+                        self.log(event); */
+                        element.setAttribute('listener', 'true');
+                        //event.preventDefault();
+                        //event.stopPropagation();
+                        self.onEvent(this, event);
+                    });
+                    //} 
+                    if (eventId == 'mousedown' || eventId == 'mouseup' || eventId == 'click')
+                        element.style.cursor = 'pointer';
+                }
+
+                /* $(container).off(eventId).on(eventId, function (event) {
+                //$(container).off(eventId).on(eventId, function (event) {
+                    self.log('event');
+                    self.log(event);
+                    event.preventDefault();
+                    event.stopPropagation();
+                    self.onEvent(this, event);
+                }); */
+                //$(container).css({cursor: 'pointer'});
+            }
+        }
+
+    };
+
+    /* this.addAction = function (params, selectorParams) {
+        var container = (selectorParams) ? self.selector(selectorParams) : params.container;
+        var selector = self.selector(self.extend({}, params, selectorParams));
+
+        $(selector).data('onData', params);
+        //$(selector).data('onData', {action: params.action, params: params.args});
+        $(selector).off().on(this.touch, function (event) {
+            event.stopPropagation();
+            self.onEvent(this, event);
+        });
+        $(selector).css({cursor: 'pointer'});
+    } */
+    /*     this.ace = function (params) {
+            params.container = 'blockCode';
+            var editor = ace.edit("blockCode");
+            var langTools = ace.require('ace/ext/language_tools');
+            editor.setTheme("ace/theme/monokai"); // ambiance
+            editor.getSession().setMode("ace/mode/json");
+            //editor.renderer.setOption('showLineNumbers', false);
+            editor.container.style.background="rgba(255,255,255,0)";
+    
+            var staticWordCompleter = {
+                getCompletions: function(editor, session, pos, prefix, callback) {
+                    var wordList = ["app", "setup", "pages"];
+                    callback(null, wordList.map(function(word) {
+                        return {
+                            caption: word,
+                            value: word,
+                            meta: "static"
+                        };
+                    }));
+            
+                }
+            }
+            editor.completers = [staticWordCompleter];
+    
+            // https://github.com/ajaxorg/ace/wiki/Configuring-Ace
+            editor.setOptions({
+                fontSize: "11pt",
+                selectionStyle: "text",
+                highlightActiveLine: true,
+                wrap: true,
+                showLineNumbers: false,
+                showGutter: false,
+                fixedWidthGutter: false,
+                readOnly: true,
+                //enableBasicAutocompletion: true,
+                //enableSnippets: true,
+                //enableLiveAutocompletion: true,
+            });
+            editor.setValue(var.code, -1);
+        } */
+    /*     this.edit = function (item) {
+            //var.code = JSON.stringify(item, null, '\t');
+    
+            self.do( {
+                "alert": {
+                    "background": "rgba(255,255,255,0.9)",
+                    "width": "93%",
+                    "showCancelButton": true,
+                    "cancelButtonText": 'Cancel',
+                    "confirmButtonText": 'Save',
+                    "html": '<div id="blockCode" align="left" style="background: transparent; margin: 0; width: 93%; height:86vh"></div>'
+                }
+            });
+            //self.code(JSON.stringify(item, null, '\t'),);
+            self.code(item, {container: '#blockCode'});
+    
+            //setTimeout(function () {
+                
+                //alert(var.blockCode);
+                // https://codepen.io/jjsjjja/pen/VoGYRB
+            //}, 100);
+        } */
+    this.money = function (value) {
+        /* if (value && value.indexOf(',') == -1 && value.indexOf('.') == -1) {
+            value = value + '.00';
+        } */
+        var rounded = Math.round(Number(value) * 100) / 100;
+        var string = String(rounded);
+        if (rounded == Math.floor(rounded))
+            string += ',00';
+        string = String(string).replace('.', ',');
+        return string;
+    };
+
+
+    this.offcanvas = function (params) {
+        self.log('offcanvas');
+        self.log('params');
+        self.log(params);
+        // https://getbootstrap.com/docs/5.0/components/offcanvas/
+        // to add: toggle, getInstance, getOrCreateInstance
+        var container = params.selector || params.container;
+        var selector = self.selector(container);
+        var element = self.query(selector);
+        self.log('offcanvas');
+        self.log(params);
+        self.log('selector');
+        self.log(selector);
+        self.log('element');
+        self.log(element);
+        // do: show (default) / hide (see boostrap Offcanvas docs)
+        if (element) {
+            if (params.do == 'hide') {
+                self.css({
+                    removeClass: 'show'
+                }, params);
+                //new bootstrap.Offcanvas(element).hide(); // doesn't work
+            } else {
+                new bootstrap.Offcanvas(element).show();
+            }
+        } else {
+            self.log('"offcanvas" method can\'t find the selected element');
+        }
+    };
+
+    /**
+     * Converts a DOM element to its CSS selector string representation
+     * @param {HTMLElement} element - The DOM element to convert
+     * @returns {string} The CSS selector string that uniquely identifies the element
+     */
+    this.elementToSelector = function (element) {
+        // 1. Use ID if available
+        if (element.id) {
+            return '#' + element.id;
+        }
+
+        // 2. Use data-value if unique
+        if (element.dataset?.value) {
+            const sameDataValue = document.querySelectorAll(`[data-value="${element.dataset.value}"]`);
+            if (sameDataValue.length === 1) {
+                return `[data-value="${element.dataset.value}"]`;
+            }
+        }
+
+        // 3. Use class if unique
+        if (element.classList && element.classList.length > 0) {
+            for (const className of element.classList) {
+                if (className) {
+                    const sameClass = document.querySelectorAll('.' + className);
+                    if (sameClass.length === 1) {
+                        return '.' + className;
+                    }
+                }
+            }
+        }
+
+        // 4. Use tag if unique
+        const tagName = element.tagName.toLowerCase();
+        const sameTag = document.querySelectorAll(tagName);
+        if (sameTag.length === 1) {
+            return tagName;
+        }
+
+        // 5. Fallback to tag + nth-child path
+        let path = [];
+        while (element.parentNode) {
+            let selector = element.tagName.toLowerCase();
+            const index = Array.from(element.parentNode.children).indexOf(element) + 1;
+            selector += `:nth-child(${index})`;
+
+            path.unshift(selector);
+            element = element.parentNode;
+        }
+        return path.join(' > ');
+    };
+
+
+    this.onEvent = function (element, event) {
+        //self.log('element');
+        //self.log(element);
+        /* self.log('event');
+        self.log(event); */
+        /* if (event) {
+            event.preventDefault(); // verify
+            event.stopPropagation();
+        } */
+        /* var item = {};
+        if (self.dataStorage.has(element, 'onData'))
+            item = self.dataStorage.get(element, 'onData'); */
+        var item = self.dataStorage.get(element, 'onData');
+        var code = self.dataStorage.get(element, 'code') || '';
+        //var item = $(element).data('onData');
+        //var code = $(element).data('code');
+        //var value = String($(element).data('value'));
+        //var selector = $(element).data('selector');
+        //var value = String(self.dataStorage.get(element, 'value'));
+        var value = element.getAttribute('data-value');
+        //var selector = element.getAttribute('data-selector');
+        var selector = self.elementToSelector(element); // 1.0.12
+
+
+
+
+
+
+
+
+        /* self.log('value');
+        self.log(value);
+        self.log('args');
+        self.log(args); */
+        var eventType = (event.type && item.on) ? item.on[event.type] : undefined;
+
+        /* self.log('onEvent');
+        self.log('item');
+        self.log(item);
+        self.log('selector');
+        self.log(selector);
+        self.log('event.type');
+        self.log(event.type); */
+        /*
+        if (event) {
+            args = {
+                value: value,
+                event: eventType
+            }
+        }
+        */
+        /*  self.log('event.type');
+            self.log(event.type);
+            self.log('event');
+            self.log(event);  */
+        var action, specialKey;
+
+        if (item.on) {
+
+            if (event.button == '2' && event.type == 'mousedown') { // right click / long touch
+
+                if (item.on['contextmenu'])
+                    action = item.on['contextmenu'];
+
+            } else if (event.type && item.on[event.type]) {
+
+                var eventAction = item.on[event.type];
+
+                //const specialKeys = ['shiftKey', 'altKey', 'cmdKey'];
+                if (eventAction) {
+                    if (eventAction.shiftKey && event.shiftKey) {
+                        specialKey = 'shiftKey';
+                        action = eventAction.shiftKey;
+                    } else if (eventAction.altKey && event.altKey) {
+                        specialKey = 'altKey';
+                        action = eventAction.altKey;
+                    } else if (eventAction.cmdKey && event.cmdKey) {
+                        specialKey = 'cmdKey';
+                        action = eventAction.cmdKey;
+                    } else if (!eventAction.shiftKey && !eventAction.altKey && !eventAction.cmdKey) {
+                        action = item.on[event.type];
+                    }
+                }
+            }
+        }
+
+        if (action) {
+            //console.dir(action);
+            //action = self.replaceProperty(action, '{on:target}', targetId);
+            if (event.target) {
+                //self.log(event);
+                var actionString;
+                var targetId = event.target.id;
+                var targetClass = event.target.className;
+                var targetValue = event.target.dataset.value;
+                var targetSelector = event.target.dataset.selector; // deprecated
+
+
+
+                /* self.log('event');
+                self.log(event); */
+                //if (targetValue) alert(targetValue);
+                targetSelector = self.replaceAll(targetSelector, '"', '\''); // TO DO: if JSON5?
+                action = self.stringify(action);
+                if (typeof targetId !== 'string') targetId = '';
+                if (typeof targetClass !== 'string') targetClass = '';
+
+                /* actionString = self.replaceAll(action, '{event.target.id}', targetId);
+                actionString = self.replaceAll(actionString, '{event.altKey}', event.altKey);
+                actionString = self.replaceAll(actionString, '{event.target.className}', targetClass);
+                actionString = self.replaceAll(actionString, '{event.target.data-value}', targetValue); // obsolete
+                actionString = self.replaceAll(actionString, '{event.target.dataset.value}', targetValue);
+                actionString = self.replaceAll(actionString, '{event.target.dataset.selector}', targetSelector); */
+                actionString = self.replaceAll(action, '{on:target.id}', targetId);
+                actionString = self.replaceAll(actionString, '{on:altKey}', event.altKey);
+                actionString = self.replaceAll(actionString, '{on:target.className}', targetClass);
+                actionString = self.replaceAll(actionString, '{on:target.data-value}', targetValue); // obsolete
+                actionString = self.replaceAll(actionString, '{on:target.dataset.value}', targetValue);
+                actionString = self.replaceAll(actionString, '{on:target.dataset.selector}', targetSelector); // deprecated
+                actionString = self.replaceAll(actionString, '{on:which}', event.which);
+                actionString = self.replaceAll(actionString, '{on:clientY}', event.clientY);
+                actionString = self.replaceAll(actionString, '{on:clientX}', event.clientX);
+
+                // custom
+                actionString = self.replaceAll(actionString, '{on:value}', targetValue);
+                actionString = self.replaceAll(actionString, '{on:dragging}', (event.which > 0));
+                //actionString = self.replaceProperty(actionString, 'on', event);
+                if (this.isJson(actionString))
+                    action = self.parse(actionString);
+
+                else
+                    action = actionString;
+            }
+
+            // TODO: let decide to the user the parameter to pass
+            var args = item.args; // || item.params || item.value || value;
+
+
+
+
+            //args.event = event;
+            //if (args)
+            //    action = self.replaceResult(action, args);
+            let specialKeyLog = (specialKey) ? ' + ' + specialKey : '';
+            //self.log('event ' + event.type + specialKeyLog);
+            //self.log('action');
+            //self.log(action);
+            /* self.log('args');
+            self.log(args);
+            self.log('{container: selector}');
+            self.log({container: selector}); */
+            //self.do(action, args, {selector: selector}); // TO DO: only if mouse over or
+            self.do(action, { selector: selector }, args);
+        } // (action)
+
+    };
+
+    this.pluginsFunctionAvailable = []; // should use pluginsLoaded
+
+    self.pluginsLoader = function (packs, callback, params) {
+        /* self.log('pluginsLoader');
+        self.log('packs');
+        self.log(packs);
+        self.log('callback');
+        self.log(callback);
+        self.log('params');
+        self.log(params);  */
+        //self.pluginsFunctionAvailable.push(name); // posizione giusta
+        var filesToLoad = [];
+
+        for (pack of packs) {
+            /* self.log('pack');
+            self.log(pack); */
+            if (self.pluginsLoaded[pack.name] == undefined) {
+
+                self.log('require plugin ' + pack.name, 'grey');
+                var plugin = self.findPlugin(pack.name);
+                let version;
+                var pluginsFiles;
+                if (plugin) {
+                    pluginsFiles = plugin.files || plugin;
+                    version = plugin.version;
+                } else {
+                    pluginsFiles = self.json.resources.pluginsFiles[pack.name]; // TO DO: obsolete, remove
+                    version = pack.version;
+                }
+
+                /* if (params) {
+                    if (!Array.isArray(params[0])) params[0] = [params[0]];
+                    if (!self.pluginsCallbacks[pack.name]) self.pluginsCallbacks[pack.name] = [];
+                    self.pluginsCallbacks[pack.name].concat(params[0]);
+                } */
+                self.pluginsLoaded[pack.name] = version; // should contain the queue of actions to do after the plugin loads
+
+
+
+
+                // TO DO: move in Promise.all(promises).then(function() { 
+                // it needs to feed a queue of actions to do after the plugin loads
+                if (!Array.isArray(pluginsFiles)) // multi-file plugin
+                    pluginsFiles = [pluginsFiles];
+
+                /* self.log('pluginsFiles');
+                self.log(pluginsFiles);  */
+                for (item of pluginsFiles) {
+                    var url = self.replaceAll(item.url, '{version}', version);
+                    if (!self.findUrl(filesToLoad, url)) // not included yet
+                        filesToLoad.push({ name: item.name, url: url, type: item.type });
+                }
+            }
+
+        }
+
+        //self.log(filesToLoad);
+        if (filesToLoad.length > 0) {
+
+            let promises = [];
+
+            filesToLoad.forEach(function (item) {
+                promises.push(loadPlugin({ name: item.name, url: item.url, type: item.type, rel: item.rel, as: item.as, content: item.content }));
+                //promises.push(loadPlugin(url));
+            });
+
+            Promise.all(promises).then(function (files) {
+                // all filesToLoad are loaded (all the Promise in loadPlugin are solved)
+                /* self.log('all plugin files are loaded');
+                self.log(files);
+                self.log(params); */
+                callback(...params); // change with ...
+
+
+                //callback(params[0], params[1], params[2]); // change with ...
+            }).catch(function (script) {
+                self.log('failed to load error');
+                self.log(item);
+                self.log(script);
+            });
+        }
+    };
+
+
+    this.pluginsRequired = function (params) {
+        /* self.log('pluginsRequired');
+        self.log(params); */
+        // analize function object or array of objects
+        if (self.json.resources) {
+            const pluginsFunctions = self.json.resources.pluginsFunctions;
+            var pluginsRequired = [];
+            if (typeof params == 'string') {
+                /* self.log('params');
+                self.log(params); */
+                if (pluginsFunctions[params]) {
+                    if (!self.pluginsLoaded[pluginsFunctions[params].name])
+                        pluginsRequired.push(pluginsFunctions[params]);
+                }
+            } else if (typeof params == 'object') {
+                var objArray;
+                if (Array.isArray(params)) objArray = params; else objArray = [params];
+                /* self.log('objArray');
+                self.log(objArray); */
+                for (var obj of objArray) {
+                    /* self.log('obj');
+                    self.log(obj); */
+                    for (var key in obj) {
+                        var mainFunction = (key.indexOf('.') >= 0) ? key.substr(0, key.indexOf('.')) : key;
+                        //self.log('mainFunction');
+                        //self.log(mainFunction);
+                        if (pluginsFunctions[mainFunction]) {
+                            if (!self.pluginsLoaded[pluginsFunctions[mainFunction].name])
+                                pluginsRequired.push(pluginsFunctions[mainFunction]);
+                        } /*  else if (key == 'var') {
+                            const functionName = self.functionName(obj.var.value);
+                            if (functionName) {
+                                if (!self.pluginsLoaded[pluginsFunctions[functionName].name])
+                                    pluginsRequired.push(pluginsFunctions[functionName]);
+                            }
+                        } */
+
+
+
+
+
+
+                    }
+                }
+            }
+            return pluginsRequired;
+        } else {
+            return [];
+        }
+    };
+
+    this.functionName = function (obj) {
+        if (obj == 'object') {
+            const name = Object.keys(obj)[0];
+            const pluginFunctions = ['database', 'ace', 'moment', 'dayjs'];
+            if (pluginFunctions.indexOf(name) >= 0)
+                return name;
+        }
+    };
+
+    /*
+    this.runParts = function (actionObj, container, argumentsPar, handleOtherActions) {
+        console.log('runParts');
+        console.log(actionObj);
+        if (Array.isArray(actionObj)) {
+                for (var action in actionObj)
+                    self.runParts(action);
+        } else {
+            var otherMethods = false;
+            var otherActions = {};
+            for (var partKey in actionObj) {
+
+                if (partKey.startsWith('var ') || partKey.startsWith('data ') || partKey.startsWith('set '))
+                    self.setData({path: partKey, value: actionObj[partKey]});
+                else {
+                    var methodOrPart = false;
+                    var method = self.element({path: partKey, root: self.methods});
+                    if (method) { // search in jsonic.methods
+                        methodOrPart = true;
+                        if (typeof method == 'function') {
+                            //self.docElement(actionObj[partKey]);
+                            self.log('method: ' + partKey);
+                            method(actionObj[partKey], container, argumentsPar);
+                        }
+                    } else if (self.json.parts) {  // search in self.json.parts
+                        var part = self.element({path: 'parts.'+self.replaceAll(partKey,':','.')});
+                        if (part) {
+                            part = self.replaceProperty(part, 'arg', actionObj[partKey]);
+                            if (actionObj[partKey].setup)
+                                part = self.replaceProperty(part, 'setup', actionObj[partKey].setup);
+                            console.log('part');
+                            console.log(part);
+                            self.run(part, container);
+                            methodOrPart = true; // if (!actionFound) { will go in the else (!part)
+                        }
+                    }
+                    if (!methodOrPart) otherActions[partKey] = actionObj[partKey];
+                    else otherMethods = true;
+                }
+            }
+
+            //if (handleOtherActions) handleOtherActions(otherActions, container, argumentsPar);
+            return otherMethods;
+        }
+    }
+    */
+    /* this.jsonicMethods = function (actions, container, argumentsPar) {
+
+        // 'icons' should be removed from the json files
+
+        var withContainer;
+        var functionFound = false;
+
+        for (var actionKey in actions) {
+
+            //if (nodes.functions.indexOf(actionKey) >=  0) {
+
+            switch (actionKey) {
+
+                case 'for':
+                case 'editor':
+                case 'ace':
+                case 'code':
+                case 'qrcode':
+                case 'lottie':
+                case 'animate':
+                case 'html':
+                case 'hide':
+                case 'show':
+                case 'toggle':
+                case 'in':
+                case 'out':
+                case 'if':
+                case 'ajax':
+                case 'attr':
+                case 'run':
+                case 'delay':
+                case 'css': withContainer = true; break;
+                default: withContainer = false;
+            }
+            var functionObj = actions[actionKey];
+            if (functionObj) {
+                functionFound = true;
+                if ((functionObj.if == undefined) || self.if(functionObj.if, container, argumentsPar)) {
+                    return self.doFunction({
+                        name: nodes.functions[actionKey],
+                        function: functionObj,
+                        args: argumentsPar,
+                        selector: container,
+                        withContainer: withContainer
+                    });
+                } else {
+                    if (functionObj.if !== undefined) {
+                        self.log(self.js(functionObj.if, argumentsPar));
+                    }
+                }
+            } else if (nodes.params.indexOf(actionKey) < 0)
+                return self.method(actions[actionKey], argumentsPar);
+
+        }
+
+                
+    } */
+    /*    this.do = function (actionPar, argumentsPar, selectorParams) { // ex this.action
+    
+            if (actionPar !== undefined && actionPar !== null) { //  !== undefined
+    
+                // check plugins required
+                let pluginsRequired = self.pluginsRequired(actionPar);
+                if (pluginsRequired.length > 0) {
+                    let params = [actionPar, argumentsPar, selectorParams];
+                    self.pluginsLoader(pluginsRequired, self.do, params);
+                
+                } else {
+    
+                    if (Array.isArray(actionPar)) {
+    
+                        if (actionPar.length > 0) {
+                            var actionArray = [];
+                            for (var index in actionPar)
+                                if (typeof actionPar[index] == 'object')
+                                    actionArray[index] = self.cloneObject(actionPar[index]);
+                                else
+                                    actionArray[index] = actionPar[index];
+                            //actionArray = actionArray.concat(actionPar);
+                            //actionArray = self.cloneObject(actionPar);
+                            var actionFunction = actionArray.shift();
+                            self.do(actionFunction, argumentsPar, selectorParams);
+                            if (actionArray.length > 0)
+                                self.do(actionArray, argumentsPar, selectorParams);
+                        }
+                    } else {
+    
+                        if (typeof actionPar == 'function') {
+    
+                            return actionPar(argumentsPar);
+    
+                        } else if (typeof actionPar == 'string') {
+    
+                            var actionPart = self.element({path: 'parts.' + actionPar}); // it includes replaceProperties
+                            self.log('actionPar stringa');
+                            self.log(actionPar);
+                            if (actionPart)
+                                return self.do(actionPart, argumentsPar);
+                            //else if (json.actions[actionPar]) // obsolete
+                            //    return self.do(json.actions[actionPar], argumentsPar);
+                            else
+                                return actionPar; //return self.js(actionPar); // TO DO: finisce qui anche una stringa di un tag p ("p": "string")
+    
+    
+                        } else if (typeof actionPar == "object") {
+    
+                            var actionObj = actionPar;
+                            var container = actionObj.selector || actionObj.container || selectorParams;
+    
+                            // events
+                            if (actionObj.on) {self.on(actionObj.on, container);}
+    
+    
+                            if (self.notEmptyObject(actionObj)) {
+    
+    
+                                var actionFound = self.runParts(actionObj, container, argumentsPar, self.jsonicMethods);
+    
+    
+                                if (!actionFound) {
+    
+                                    var functionFound = false;
+    
+                                    for (var index in nodes.functions) {
+                                        //if (nodes.params.indexOf(actionKey) < 0)
+    
+                                        //var action = Object.keys(actionObj)[0];
+                                        var withContainer = (nodes.functionsWithContainer.indexOf(nodes.functions[index]) >=0 );
+                                        var functionObj = actionObj[nodes.functions[index]];
+                                        if (functionObj) {
+                                            functionFound = true;
+                                            if ((functionObj.if == undefined) || self.if(functionObj.if, container, argumentsPar)) {
+                                            //if ((functionObj.if == undefined) || Boolean(self.js(functionObj.if, argumentsPar))) {
+                                                return self.doFunction({
+                                                    name: nodes.functions[index],
+                                                    function: functionObj,
+                                                    args: argumentsPar,
+                                                    selector: selectorParams,
+                                                    withContainer: withContainer
+                                                });
+                                            } else {
+                                                if (functionObj.if !== undefined) {
+    
+                                                    self.log(self.js(functionObj.if, argumentsPar));
+                                                }
+                                            }
+                                        }
+                                    }
+    
+                                    if (!functionFound) {
+                                        self.log('actionPar');
+                                        self.log(actionPar);
+                                        self.log('!functionFound');
+                                        self.log(actionObj);
+                                        return self.method(actionObj, argumentsPar);
+                                    }
+                                    
+                                }
+                            }
+                            
+                        } else {
+                            //self.log('Function not found');
+                            //self.log(actionPar);
+                            //self.log(argumentsPar);
+                            return actionPar;
+                            // functions from this.do
+                            //actionPar(argumentsPar);
+                        }
+                    }
+                }
+            } else {
+                // TO DO: check
+                //self.log('function with actionPar undefined');
+            }
+    
+        }
+    */
+    /*    this.jsonicMethod2 = function (actionObj, selectorParams, argumentsPar) {
+    
+            var functionFound = false;
+    
+            for (var action in actionObj) {
+                var functionObj = actionObj[action];
+                if (functionObj) {
+                    var withContainer = (nodes.functionsWithContainer.indexOf(action) >=0 );
+                    functionFound = true;
+                    if ((functionObj.if == undefined) || Boolean(self.js(functionObj.if, argumentsPar))) {
+                        return self.doFunction({
+                            name: action,
+                            function: functionObj,
+                            args: argumentsPar,
+                            selector: selectorParams,
+                            withContainer: withContainer
+                        });
+                    }
+                }
+    
+                if (!functionFound) {
+                    self.log('!functionFound');
+                    self.log('actionObj');
+                    self.log(actionObj);
+                    return self.method(actionObj, argumentsPar);
+                }
+            }
+    
+        
+        } */
+    this.for = function (params, selectorParams, args) {
+        /* self.log('for');
+        self.log(params); */
+        let container = self.selector(params.selector || params.container) || self.selector(selectorParams);
+
+        // TO DO: doesn't go as an automous function (needs to be inside a div)
+        /* self.log('for');
+        self.log('container');
+        self.log(container); */
+        //if (params.html) { // new version
+        let itemsName = params.id || params.name;
+        //self.log('itemsArray');
+        //self.log(itemsArray);
+        /* if (params.reverse) {
+            var itemsReversed = {};
+            for (var key in Object(itemsArray).keys().reverse()) {
+                itemsReversed[key] = itemsArray[key];
+            }
+            itemsArray = itemsReversed;
+        } */
+        if (params.of) {
+            //var itemsArray = self.cloneObject(params.of); // value is the previous array id
+            //if (typeof itemsArray == 'string')
+            //itemsArray = self.compile(itemsArray, args); // compile includes functions and create bugs
+            //self.log('params.of');
+            //self.log(params.of);
+            var itemsArray = self.replaceProperties(params.of, args);
+
+
+            /* self.log('itemsArray');
+                self.log(itemsArray);  */
+            /* if (typeof itemsArray == 'string') {
+                itemsArray = self.js(itemsArray); // TO DO: check
+            } */
+            if (itemsArray) {
+
+                /* if (typeof itemsArray == 'string') {
+                    if (itemsArray.startsWith('js:')) itemsArray = self.js(itemsArray.substr(3));
+                    //else itemsArray = self.replaceProperties(itemsArray, args);
+                } */
+                /*  else {
+                    itemsArray = self.actionResult(itemsArray, args);
+                    itemsArray = self.replaceProperties(itemsArray, args);
+                } */
+                /* self.log('itemsArray replaced');
+                self.log(itemsArray); */
+                /* self.log('for'); */
+                /* self.log(itemsName); */
+                /* self.log(itemsArray); */
+                if (params.html) { // 1.0.6 html in for is deprecated
+                    if (!params.do) params.do = [];
+                    else if (!Array.isArray(params.do)) params.do = [params.do];
+                    params.do.push({ html: params.html });
+                }
+
+
+                //delete params; // needed to avoid infinite loop
+                if (typeof itemsArray == 'object') {
+
+                    let indexNum = 0;
+
+                    for (var index in itemsArray) {
+
+                        var item = itemsArray[index];
+
+                        if (typeof item == 'object') {
+                            item.key = index; // obsolete
+                            item.index = index; // obsolete
+                        }
+
+                        if (typeof item.output == 'object') { // TO DO: obsolete
+
+                            /* self.log('item.for.output');
+                            self.log(item.for.output); */
+                            for (let key in item.output) {
+
+                                var output = item.output[key];
+                                if (typeof output == 'string') {
+                                    output = self.js(output, args);
+                                } else if (typeof output == 'object') {
+                                    //output = self.compile(output, args); 
+                                    output = self.replaceProperties(output, args);
+                                }
+
+                                item = self.replaceItems(item, output, key); // replace 
+
+
+
+                                //item = self.replaceProperty(item, key, output);
+                            }
+                        }
+
+                        if (params.do.length > 0) {
+
+                            //alert(JSON.stringify(params.do));
+                            //self.do(self.replaceProperty(params.do, itemsName, item), undefined, {selector: container});
+                            //let objWithIndex = self.replaceStringInObject(params.do, '{' + params.index + '}', index);
+                            let objWithIndex = params.do;
+
+                            if (params.var) { // TO DO: obsolete (remove when used)
+                                self.element({ path: params.var, value: item, root: self.json.var });
+                                objWithIndex = self.replacePropertyWithPrefix(objWithIndex, 'index:' + params.var, index);
+                                //objWithIndex = self.replaceStringInObject(objWithIndex, '{index:'+params.var+'}', index);
+                            }
+
+                            if (itemsName) {
+                                //objWithIndex = self.replaceStringInObject(objWithIndex, '{index:'+itemsName+'}', index);
+                                objWithIndex = self.replacePropertyWithPrefix(objWithIndex, 'index:' + itemsName, index);
+                                objWithIndex = self.replacePropertyWithPrefix(objWithIndex, itemsName, item);
+                                //objWithIndex = self.replaceProperty(objWithIndex, 'value:'+itemsName, item);
+                                //objWithIndex = self.replaceProperty(objWithIndex, itemsName, item); // obsolete
+                            }
+
+                            if (params.delay) {
+                                params.delay = self.replaceProperties(params.delay);
+
+                                let forId = params.var || itemsName;
+                                self.timer({
+                                    name: 't' + forId + index,
+                                    after: indexNum * params.delay,
+                                    do: objWithIndex
+                                });
+                            } else {
+                                self.do(objWithIndex, { selector: container });
+                            }
+                        }
+
+                        /* if (params.html) { // should be inside a do // commented from 1.0.6
+                            let indexName = params.index || 'index';
+                            let objWithIndex = self.replaceStringInObject(params.html, '{'+indexName+':'+itemsName+'}', index);
+                            objWithIndex = self.replaceProperty(objWithIndex, itemsName, item);
+                            self.do(objWithIndex, {selector: container});
+                        } */
+                        indexNum += 1;
+
+                    }
+                }
+            }
+
+        } else if (params.from !== undefined && params.to !== undefined) {
+
+            /* var step = Number(params.step) || 1;
+            var from = Number(params.from) || 0;
+            var to = Number(params.to); */
+            var step = self.js(self.replaceProperties(params.step)) || 1;
+            var from = self.js(self.replaceProperties(params.from)) || 0;
+            var to = self.js(self.replaceProperties(params.to));
+            /* var step = Number(self.replaceProperties(params.step)) || 1;
+            var from = Number(self.replaceProperties(params.from)) || 0;
+            var to = Number(self.replaceProperties(params.to)); */
+            /* self.log('from');
+            self.log(from);
+            self.log('to');
+            self.log(to);
+            self.log('step');
+            self.log(step); */
+            if (to !== undefined) {
+
+                for (var index = Number(from); index <= Number(to); index += Number(step)) {
+
+                    if (params.var)
+                        self.element({ path: params.var, value: index, root: self.json.var });
+
+                    // TO DO: find "if (params.html) { // 1.0.6" and modify also the following code 
+                    var item = self.replaceItems(params, String(index), itemsName); // obsolete: replaced with {index:itemsName}
+
+
+
+
+
+
+
+
+
+
+                    //var item = self.replaceProperty(params, itemsName, String(index));
+                    /* self.log('itemsName');
+                    self.log(itemsName);
+                    self.log('index');
+                    self.log(index);
+                    self.log('item');
+                    self.log(item); */
+                    if (item.output && typeof item.output == 'object') { //} !== undefined) {
+
+                        /* self.log('item.for.output');
+                        self.log(item.for.output); */
+                        for (let key in item.output) {
+
+                            var output = item.output[key];
+                            if (typeof output == 'string') {
+                                output = self.js(output, args);
+                            } else if (typeof output == 'object') {
+                                //output = self.compile(output, args); 
+                                output = self.replaceProperties(output, args);
+                            }
+
+                            item = self.replaceItems(item, output, key);
+                            //item = self.replaceProperty(item, key, output);
+                        }
+                    }
+
+                    // item = self.replaceItems(item, itemValue, itemsName); old version
+                    //delete item.for; // needed to avoid infinite loop
+                    if (item.do) {
+                        params.do = self.replacePropertyWithPrefix(item.do, 'index:' + itemsName, index);
+                        //params.do = self.replaceStringInObject(item.do, '{index:'+itemsName+'}', index);
+                        self.do(item.do, selectorParams, args); // return?
+
+                        //self.do(item.do, args, selectorParams); // return?
+                    }
+                    if (item.html) {
+                        //params.html = self.replaceStringInObject(item.html, '{index:'+itemsName+'}', index);
+                        params.html = self.replacePropertyWithPrefix(item.html, 'index:' + itemsName, index);
+                        self.html(item.html, selectorParams);
+                    }
+                }
+            }
+        } else {
+            self.log('"for" element requires "value" or "from" and "to" parameters'); // link to see the documentation
+            self.log(params);
+        }
+        //}
+        // }
+    };
+
+    this.htmlTag = function (params, selectorParams, tagParam, mainParam) {
+        /* self.log('htmlTag');
+        self.log(tagParam); */
+        if (Array.isArray(params)) {
+            for (var index in params)
+                self.htmlTag(params[index], selectorParams, tagParam, mainParam);
+        } else {
+
+            //----------------------------------
+            // attributes of the tag in the key
+            // example: "div id=btn btn"
+            // (classes are without identifier)
+            //---------------------------------- 
+            let htmlTagSplitter = tagParam.indexOf(' ');
+            if (htmlTagSplitter > 0) {
+                let tagClass = tagParam.substr(htmlTagSplitter + 1);
+                tagParam = tagParam.slice(0, htmlTagSplitter);
+                if (tagClass) {
+                    if (typeof params !== 'object') params = { 'text': String(params) };
+                    if (!params.attr) params.attr = {};
+
+                    // attributes in key: attribute=value
+                    let tagArr = tagClass.split(' ');
+                    var attrClass = '';
+                    for (let tagProp of tagArr) {
+                        let tagAttr = new RegExp("([_a-zA-Z]+[_a-zA-Z0-9-]*)=(.+)"); // [_a-zA-Z0-9-/]
+                        if (tagAttr.test(tagProp)) {
+                            //console.log('attribute found '+tagProp);
+                            let tagPropArr = tagProp.split('=');
+                            params.attr[tagPropArr[0]] = tagPropArr[1];
+                        } else {
+                            attrClass += ' ' + tagProp;
+                        }
+                    }
+
+                    // classes
+                    if (params.attr.class)
+                        params.attr.class = params.attr.class + attrClass;
+                    else {
+                        params.attr.class = attrClass;
+                    }
+                    //alert(tagParam + '/'+ tagClass+ '#');
+                }
+            }
+
+            let htmlTagObj = self.createTagParams(params, tagParam, mainParam);
+
+            self.do(htmlTagObj, selectorParams);
+
+            if (params.database) self.addFirebaseTag(self.extend({}, params, selectorParams));
+
+        }
+    };
+
+    this.createTagParams = function (params, tagParam, mainParam) {
+        if (!mainParam) {
+            switch (tagParam) {
+                case 'header':
+                case 'main':
+                case 'footer':
+                case 'div':
+                case 'p':
+                    mainParam = 'html';
+                    break;
+                case 'img':
+                    mainParam = 'src';
+                    break;
+                default:
+                    mainParam = 'text'; // TO DO: -> html (to test with actual apps)
+                    break;
+            }
+        }
+        var paramsObj = {};
+        if (typeof params == 'string') paramsObj[mainParam] = params; else paramsObj = params;
+        paramsObj.tag = tagParam;
+        return paramsObj;
+    };
+
+
+
+    this.onResize = [];
+    this.onHashChange = [];
+    this.onScroll = [];
+    //let swup;
+    this.notEmptyObject = function (obj) {
+        return (obj // null and undefined check
+            && Object.keys(obj).length > 0);
+        // && Object.getPrototypeOf(obj) === Object.prototype
+        // https://stackoverflow.com/questions/679915/how-do-i-test-for-an-empty-javascript-object
+    };
+
+    this.run = function (params, selectorParams, args) {
+        /* self.log('run');
+        self.log(params); */
+        if (Array.isArray(params)) {
+            for (var index in params)
+                self.run(params[index], selectorParams, args);
+        } else {
+
+
+            var codeToRun;
+            if (typeof params == 'object')
+                codeToRun = self.cloneObject(params);
+            else if (typeof params == 'string')
+                codeToRun = self.replaceProperties(params);
+            else if (typeof params == 'function')
+                return params(args);
+
+            else
+                return params;
+
+            /*  self.log('codeToRun');
+                self.log(codeToRun); */
+            if (typeof codeToRun == 'object') {
+                var selector = codeToRun.selector || codeToRun.container;
+                if (!selector) selector = selectorParams;
+                if (typeof selector == 'string') selector = { selector: selector };
+
+
+
+                var actions = {};
+                for (key in codeToRun) {
+
+                    if (nodes.extend.indexOf(key) >= 0) {
+                        var obj = {};
+                        obj[key] = codeToRun[key];
+                        self.extendJson(self.json, obj);
+                    } else if (['setup', 'container', 'selector', 'resources', 'on', 'do'].indexOf(key) < 0)
+                        actions[key] = codeToRun[key];
+                }
+
+                /*  self.log('codeToRun.on');
+                    self.log(codeToRun.on);
+    
+                    self.log('selector');
+                    self.log(selector); */
+                // actions
+                //if (codeToRun.container) {self.empty(codeToRun.container);} // reset
+                // .in SIGNIFICA CONTENITORE (select)
+                if (codeToRun.on) { self.on(codeToRun.on, selector); }
+                if (codeToRun.do) { self.do(codeToRun.do, selector, args); }
+
+                if (self.notEmptyObject(actions)) {
+                    /* self.log('notEmptyObject actions');
+                    self.log(actions);
+                    self.log('selector');
+                    self.log(selector); */
+                    return self.do(actions, selector, args);
+                    //return self.do(actions, args, codeToRun.in);
+                }
+            }
+        }
+
+        //self.extendJsonFromElement(codeToRun); // style, actions, texts, data, var. no setup, on, do, blocks, container
+    };
+    /*
+        this.execute = function (params, selectorParams, args) { // obsolete
+    
+            // should create a new jsonicApp instance and assign it to jsonic[id]
+            // jsonicApp should load the plugins required and not are already loaded
+            // jsonicApp should import the json not already imported
+            // jsonicApp should load the icons not already loaded
+    
+            // jsonicApp should init the database if not already initialized
+            // otherwise should copy the db object from window.jsonic?
+            
+            // to have app relative var and data these should be called as var:clock.... / var:calendar....
+    
+            // or each app should have an ID (without id the ID is "app")
+    
+            // to have exclusive setup, var, data/items, pages and to reset var on the second execution
+            // for example: window.jsonic['container'] = new jsonicObject(options);
+            self.log('execute');
+    
+            if (params) {
+    
+                if (params.do == 'init') {
+    
+                    self.log('init');
+                    window.removeEventListener('hashchange');
+                    window.removeEventListener('resize');
+                    window.removeEventListener('beforeinstallprompt');
+    
+                    // PWA
+                    if ('serviceWorker' in navigator) {
+                        // Register a service worker hosted at the root of the
+                        // site using the default scope.
+                        navigator.serviceWorker.register('/app/assets/pwa/sw.js').then(function(registration) {
+                            self.log('Service worker registration succeeded:', registration);
+                        }, function(error) {
+                            self.log('Service worker registration failed:', error);
+                        });
+                    } else {
+                        self.log('Service workers are not supported.');
+                    }
+                        
+                    let deferredPrompt;
+    
+                    window.addEventListener('beforeinstallprompt', (e) => {
+                        // Prevent Chrome 67 and earlier from automatically showing the prompt
+                        e.preventDefault();
+                        // Stash the event so it can be triggered later.
+                        deferredPrompt = e;
+                    });
+    
+                    self.json.setup.page.hash = window.location.hash.substr(1);
+    
+                    // we consider json.setup.modules instead of self.modules
+                    // to be sure to follow the right order of execution
+    
+                    var modules = []; // we need it to keep the order of the modules given in the setup
+                    for (key in json.setup.modules) {
+                        var mod = self.replaceProperties(json.setup.modules[key]);
+                        modules = modules.concat(self.cloneObject(mod));
+                    }
+                    
+                    //modules.push({name: 'ide', url: 'https://jsonic.io/app/modules/ide.json'}); // TO DO if admin
+                    // or can execute global before all the rest
+                    // modules can contain {libs and apps}
+                    // ide module can be loaded only if required
+                    
+                    for (var mod of modules) {
+                        //self.log(mod.name);
+                        var params = self.modules[mod.name];
+                        //self.log(params);
+    
+                        if (params.html) {
+    
+                            var container = selectorParams || 'body';
+    
+                            //if (params.app.html) {
+    
+                                //var documentTitle = self.json.setup.title;
+                                //if (documentTitle)
+                                //    document.title = documentTitle;
+                                //if (document.querySelector('meta[name="description"]'))
+                                //    document.querySelector('meta[name="description"]').setAttribute("content", documentDescription);
+    
+                                self.html(params.html, {container: container});
+    
+                                // window events
+    
+                            //}
+                        }
+    
+                        if (params.on) { // -> this.on
+    
+                            // hashchange
+    
+                            if (params.on.hashchange) {
+                                self.onHashChange.push(params.on.hashchange);
+                                window.addEventListener('hashchange', function() {
+                                    self.json.setup.page.hash = window.location.hash.substr(1); // potrebbe essere esplicitato sulla app
+                                    //var action = self.cloneObject(params.app.on.hashchange);
+                                    //self.replaceAll("{result}", window.location.hash);
+                                    self.do(self.onHashChange);
+                                    self.uiUpdate();
+                                });
+                            }
+    
+                            // resize
+    
+                            window.addEventListener('resize', self.resizeEvent);
+                            if (params.on.resize) {
+                                self.onResize.push(params.on.resize);
+                                window.addEventListener('resize', function () {
+                                    self.do(self.onResize);
+                                });
+                            }
+    
+    
+                            // receiveMessage
+    
+                            if (params.on.thunkable && params.on.thunkable.receiveMessage)
+                                window.receiveMessage(function (message) {
+                                    //document.querySelector('#message').value = message;
+                                    jsonic.functions(params.on.thunkable.receiveMessage, message, undefined);
+                                });
+    
+    
+                            self.on(params.on, {container: container}); // init included
+                        }
+    
+                        //else
+                        //self.log('The node "app" requires "container" and "html" properties');
+                    }
+            
+    
+                } else {
+    
+                    //if (params.setup) args = self.extend(args, params.setup); // or params.args?
+                    if (params.blocks) self.extendJson(json, {blocks: params.blocks});
+                    //if (params.library) self.extendJson(json, {library: params.library}); // obsolete
+                    if (params.media) self.extendJson(json, {media: params.media}); // obsolete
+                    if (params.functions) self.extendJson(json, {functions: params.functions}); // obsolete
+                    if (params.actions) self.extendJson(json, {actions: params.actions});
+                    if (params.css) self.extendJson(json, {css: params.css});
+                    //if (params.styles) self.extendJson(json, {styles: params.styles});
+                    //if (params.iconset) self.extendJson(json, {iconset: params.iconset});
+                    if (params.data) self.extendJson(json, {data: params.data});
+                    if (params.items) self.extendJson(json, {items: params.items});
+                    if (params.var) self.extendJson(json, {var: params.var});
+    
+                    if (params.html) {
+                        var container = selectorParams || 'body'; // is an object
+                        if (typeof container == 'string')
+                            container = {container: container};
+    
+    
+                        //if (self.inputValue({id: 'module'}) == 'base') {
+                                // icons will be obsolete
+    
+                        //} else {
+                            //var setup = extendParams.setup || params.setup;
+                            //if (container || html.container) {
+    
+    
+                                //if (params.app.html) {
+                                    var code = self.cloneObject(params.html);
+                                    //self.log('code');
+                                    //self.log(code);
+                                    //self.log(JSON.stringify(code));
+    
+                                    self.html(code, container);
+                                //}
+                            //} else {
+                            //    self.log('execute method requires container parameter');
+                            //}
+    
+                            if (params.on && params.on.init) {
+                                self.do(params.on.init, undefined, container);
+                            }
+                                // args can be params.setup
+                        //}
+                    } else if (params.module) {
+                        var moduleId = self.replaceProperties(params.module);
+                        return self.do(self.modules[moduleId]);
+                    }
+    
+    
+                }
+    
+            }
+        } */
+    /*     this.createApp = function (data) {
+            self.log('createApp');
+            //self.log(self.modules);
+                
+            let deferredPrompt;
+    
+            window.addEventListener('beforeinstallprompt', (e) => {
+                // Prevent Chrome 67 and earlier from automatically showing the prompt
+                e.preventDefault();
+                // Stash the event so it can be triggered later.
+                deferredPrompt = e;
+            });
+    
+            self.json.setup.page.hash = window.location.hash.substr(1);
+    
+            for (var file in self.modules) {
+                var params = self.modules[file];
+    
+                //if (params.on) self.extendJson(json, {media: params.media});
+                // if (params.icons) self.extendJson(json, {icons: params.icons});
+                //if (params.functions) self.extendJson(json, {functions: params.functions});
+                //if (params.styles) self.extendJson(json, {styles: params.styles});
+                //if (params.items) self.extendJson(json, {items: params.items});
+                //if (params.var) self.extendJson(json, {var: params.var});
+                //if (params.library) self.extendJson(json, {library: params.library});
+                
+                if (params.app && params.app.container) {
+    
+                    //var documentTitle = self.json.setup.title;
+                    //if (documentTitle)
+                    //    document.title = documentTitle;
+                    //if (document.querySelector('meta[name="description"]'))
+                    //    document.querySelector('meta[name="description"]').setAttribute("content", documentDescription);
+    
+                    //alert(document.querySelector(params.app.container).isConnected);
+                    self.html(params.app.html, {container: params.app.container});
+    
+                    // window events
+    
+                    if (params.app.on) { // -> this.on
+    
+                        // hashchange
+    
+                        if (params.app.on.hashchange) {
+                            self.onHashChange.push(params.app.on.hashchange);
+                            window.addEventListener('hashchange', function() {
+                                self.json.setup.page.hash = window.location.hash.substr(1); // potrebbe essere esplicitato sulla app
+                                //var action = self.cloneObject(params.app.on.hashchange);
+                                //self.replaceAll("{result}", window.location.hash);
+                                self.do(self.onHashChange);
+                                self.uiUpdate();
+                            });
+                        }
+    
+                        // resize
+    
+                        window.addEventListener('resize', self.resizeEvent);
+                        if (params.app.on.resize) {
+                            self.onResize.push(params.app.on.resize);
+                            window.addEventListener('resize', function () {
+                                self.do(self.onResize);
+                            });
+                        }
+    
+                        // receiveMessage
+    
+                        if (params.app.on.thunkable && params.app.on.thunkable.receiveMessage)
+                            window.receiveMessage(function (message) {
+                                //document.querySelector('#message').value = message;
+                                jsonic.functions(params.app.on.thunkable.receiveMessage, message, undefined);
+                            });
+    
+                        // init
+                        self.log('params.app.on');
+                        self.log(params.app.on);
+                        self.log('params.app.container');
+                        self.log(params.app.container);
+    
+                        self.on(params.app.on, {container: params.app.container});
+                    }
+    
+                }
+                //else
+                //self.log('The node "app" requires the "container" property');
+            }
+    
+            
+            if (self.pluginsLoaded['swup'] && self.json.setup.swup) {
+                let swup = new Swup(self.json.setup.swup);
+            }
+            
+    
+            self.do(data);
+        } */
+    /* this.menuToggle = function () {
+        self.log('menuToggle');
+        //$('.offcanvas-collapse').toggleClass('open');
+        $('#header').toggleClass('headerMenuOpen');
+        var.menuOpen = (!var.menuOpen);
+        self.log(var.menuOpen);
+    }
+
+    this.menuOpen = function () {
+        self.log('menuOpen');
+        $('#menu').addClass('menuOpen');
+        var.menuOpen = true;
+        self.log(var.menuOpen);
+    }
+
+    this.menuClose = function () {
+        self.log('menuClose');
+        $('#menu').removeClass('menuOpen');
+        var.menuOpen = false;
+        self.log(var.menuOpen);
+    } */
+    /*         this.createMenu = function (data) {
+            self.log('createMenu');
+            // self.userRole
+            var menuId = (typeof data.id == 'function') ? data.id() : data.id;
+            var container = data.container || '#header > ul';
+            $(container).empty();
+    
+            for (var index in self.json.menu[menuId]) {
+                var selector = container + ' > li:eq(' + index + ')'; // > span';
+                var item = self.json.menu[menuId][index];
+                // action
+                //if (item.page && !item.action) item.action = {page: item.page};
+                if (!var.functions[container])
+                    var.functions[container] = {};
+                var.functions[container][index] = item;
+    
+                $(container).append('<li id="item'+index+'"></li>');
+                item.color = item.color || 'inherit';
+                item.background = item.background || 'transparent';
+                item.border = item.border || 'transparent';
+                
+                self.tab(item, {container: selector});
+    
+            }
+            self.do(data);
+        } */
+    /* this.changeMenu = function (menuId) {
+    }
+    */
+    /*  this.form = function (params, selectorParams) {
+            // replaceProperties può essere passato all'inizio di ogni costruttore
+            //params.container = params.container || self.selector(selectorParams);
+            //var selector = self.selector(params);
+            var container = params.container || self.selector(selectorParams);
+            //var elementContainer = self.query(container);
+            //var selector = self.selector(self.extend({}, params, selectorParams));
+            //var element = self.query(selector);
+    
+            //params.tag = 'form';
+            //if (params.id === undefined) {params.id = '';}
+            //if (params.value === undefined) {params.value = ''};
+            //if (params.class === undefined) {params.class = ''};
+    
+            //$(container).append('<'+params.tag+' id="'+params.id+'" class="'+params.class+'" data-value="'+params.value+'" data-selector="'+selector+'"></'+params.tag+'>');
+            for (var itemKey in params.items) {
+                var item = params.items[itemKey];
+    
+                self.html({
+                    "form": {
+                        "attr": {
+                            "id": params.id,
+                            "class": params.class,
+                            "data-value": params.data-value || params.value
+                        },
+                        "div": [
+                            {
+                                "attr": {
+                                    "class": "form-group",
+                                    "data-value": itemKey
+                                },
+                                "html": [
+                                    {
+                                        "label": {
+                                            "attr": {
+                                                "for": itemKey,
+                                                "text": item.title
+                                            }
+                                        }
+                                    },
+                                    {
+                                        "input": {
+                                            "attr": {
+                                                "id": itemKey,
+                                                "class": "form-control",
+                                                "data-value": "formInput" + itemKey,
+                                                "value": item.inputValue,
+                                                "type": item.type,
+                                                "text": item.title,
+                                                "aria-describedby": "note"+itemKey,
+                                                "placeholder": "",
+                                                "disabled": disabled
+                                            }
+                                        }
+                                    },
+                                    {
+                                        "small": {
+                                            "attr": {
+                                                "class": "form-text text-muted",
+                                                "data-value": "formNote"+itemKey,
+                                                "text": item.note
+                                            }
+                                        }
+                                    },
+                                ]
+                            }
+                        ]
+                    }
+                }, {
+                    container: container
+                });
+    
+            }
+    
+        } */
+    /*    this.addList = function (params, selectorParams) {
+            var container = (selectorParams) ? self.selector(selectorParams) : params.container;
+            var selector = self.selector(self.extend({}, params, selectorParams));
+    
+            if (params.id === undefined) {params.id = '';}
+            if (params.value === undefined) {params.value = ''};
+            if (params.class === undefined) {params.class = ''};
+            $(container).append('<ul id="'+params.id+'" class="'+params.class+' list-group" data-value="'+params.value+'"></ul>');
+    
+            self.list(params, {container: container});
+        
+        } */
+    /*
+            this.addBlock = function (params, selectorParams) {
+    
+            if (params.icons) self.icons(params.icons, selectorParams);
+            if (params.tab) self.tab(params.tab, selectorParams);
+            if (params.html) self.html(params.html, selectorParams);
+            if (params.div) self.div(params.div, selectorParams);
+            if (params.ul) self.ul(params.ul, selectorParams);
+            if (params.li) self.li(params.li, selectorParams);
+            if (params.span) self.span(params.span, selectorParams);
+            if (params.img) self.img(params.img, selectorParams);
+            if (params.form) self.form(params.form, selectorParams);
+            if (params.list) self.addList(params.list, selectorParams);
+            //if (params.img) alert(JSON.stringify(params.img.src));
+        }
+    */
+    /*     this.blocks = function (params, selectorParams, args) {
+            if (Array.isArray(params)) {
+                for (var index in params)
+                    self.blocks(params[index], selectorParams, args);
+            } else {
+                if (typeof params == 'string') {
+                    var blocksObj = self.get('self.json.library.'+params);
+                    if (blocksObj)
+                        self.blocks(blocksObj.blocks, selectorParams);
+                } else {
+                    if (params.library) {
+                        self.library(params.library, selectorParams, args); // {container: container}
+                    } else {
+                        self.addTag(params, selectorParams, args); // {container: container}
+                    }
+                }
+            }
+        }
+        */
+    this.inputValue = function (params) {
+        var selector = self.selector(params.selector || params.container);
+        var element = document.querySelector(selector); // self.query(p2);
+        return element.value;
+    };
+
+
+    /*     this.layout = function (params, selectorParams, args) {
+            if (Array.isArray(params)) {
+                for (var index in params)
+                    self.layout(params[index], selectorParams, args);
+            } else {
+                if (typeof params == 'string') {
+                    var libraryObj = self.get('self.json.layouts.'+params); // todo: get?
+                    //var libraryHtml = libraryObj.html || libraryObj.blocks;
+                    if (libraryObj)
+                        self.layout(libraryObj, selectorParams, args); // TODO warning potential infinite loop (if string)
+                    else
+                        self.log('"theme" not found: ' + params);
+                } else {
+                    var libraryHtml = params.html;
+                    // can a library component be an object?
+                    if (params.setup) args = self.extend(args, params.setup); // or params.args?
+                    if (params.functions) self.extendJson(json, {functions: params.functions});
+                    if (params.css) self.extendJson(json, {css: params.css});
+                    //if (params.styles) self.extendJson(json, {styles: params.styles});
+                    if (params.items) self.extendJson(json, {items: params.items});
+                    if (params.var) self.extendJson(json, {var: params.var});
+                    self.html(libraryHtml, selectorParams, args); // {container: container}
+                    //self.(params, selectorParams, args);
+                }
+            }
+        } */
+    this.part = this.block = function (params, selectorParams, args) {
+
+        let nested;
+        let part;
+        let partArguments;
+
+        if (typeof params.do == 'string' && self.json.parts) { // && par.match(/[.>]+/)) 
+
+            self.log('PART: ' + params.do, 'brown');
+
+            params.do = self.replaceProperties(params.do);
+
+            if (typeof params.do == 'object')
+                part = params.do;
+
+            else
+                part = self.element({ path: self.replaceAll(params.do, ':', '.'), root: self.json.parts }); // TO DO: . -> space?
+
+
+
+            /* if (par.indexOf(':')>0 && !part) {
+                self.firebaseGetPart({localPath:localPath, container: params.selector, arg:params.obj});
+            } */
+        } else if (typeof params.do == 'object')
+            part = params.do;
+
+        if (part) {
+            //if (!params.arguments) params.arguments = {};
+            // TO DO: Check this. seems a workaround for fantacards/ui:qrcode
+            if (params.arguments)
+                partArguments = self.replaceProperties(params.arguments);
+
+            if (typeof params.arguments == 'object') {
+                partArguments = (params.arguments.setup) ? params.arguments.setup : params.arguments; // compatibility
+                partArguments.selector = partArguments.selector || params.selector;
+            }
+
+            nested = self.replacePropertyWithPrefix(part, 'setup', partArguments); // {setup} -> {arguments}
+            nested = self.replacePropertyWithPrefix(nested, 'arguments', partArguments); // to tix
+
+            self.extendJsonFromElement(nested);
+            self.do(nested, params.selector, partArguments);
+        }
+    };
+
+    this.blocks = function (params, selectorParams, args) {
+        if (Array.isArray(params)) {
+            for (var index in params)
+                self.blocks(params[index], selectorParams, args);
+        } else {
+            //self.log('blocks');
+            //self.log(params);
+            if (typeof params == 'string') {
+
+                var blockName = self.replaceProperties(params, args); // self.compile(params, args);
+
+
+
+                //self.log('blockName');
+                //self.log(blockName);
+                var libraryObj = self.element({ path: 'self.json.blocks.' + blockName }); // todo: get?
+
+
+
+
+
+                //self.log('libraryObj');
+                //self.log(libraryObj);
+                //var libraryHtml = libraryObj.html || libraryObj.blocks;
+                if (libraryObj)
+                    //self.html(libraryObj, selectorParams, args);
+                    self.run(libraryObj, selectorParams, args);
+
+
+                //self.blocks(libraryObj, selectorParams, args); // TODO warning potential infinite loop (if string)
+                else
+                    self.log('library component not found: ' + params);
+            } else {
+                self.run(params, selectorParams, args);
+                //self.run(params, selectorParams, args);
+                //var libraryHtml = params.html || params.app.html;
+                /* // can a library component be an object?
+                if (params.setup) args = self.extend(args, params.setup); // or params.args?
+                if (params.parts) self.extendJson(json, {parts: params.parts});
+                if (params.actions) self.extendJson(json, {actions: params.actions});
+                if (params.css) self.extendJson(json, {css: params.css});
+                if (params.data) self.extendJson(json, {data: params.data});
+                if (params.var) self.extendJson(json, {var: params.var});
+                if (params.texts) self.extendJson(json, {texts: params.texts});
+
+                self.html(params.html, selectorParams, args); // {container: container}
+                //self.do(params, selectorParams, args); */
+            }
+        }
+    };
+
+    this.uiUpdate = function (option) {
+        window.dispatchEvent(new Event('resize')); // workaround known ACE bug
+
+        //self.updateCodeEditors(); // workaround known ACE bug
+    };
+
+    this.resizeEvent = function (event) {
+        //self.log('resizeEvent');
+        for (var selector in self.resizeActions) {
+            var element = self.query(selector);
+            for (var property in self.resizeActions[selector]) {
+                if (property == 'action') {
+                    self.do(self.resizeActions[element].action, { selector: selector });
+                    //self.do(self.resizeActions[element].action, {selector: selector});
+                } else {
+                    var value = self.resizeActions[selector][property];
+                    var result = self.replaceProperties(value) || '';
+                    //$(selector).css(property, result);
+                    element.style[property] = result;
+                }
+            }
+        }
+    };
+
+
+
+    /*  var pages = {};
+        var pagesSlider;
+        
+        this.createPages = function (data) {
+            self.log('createPages');
+    
+            //backLink = (self.json.setup && self.json.setup.home && self.json.setup.home[var.mode]) ? self.json.setup.home[var.mode] : '';
+            //  class="container-fluid px-0" style="margin-top:'+self.json.setup.main.top+'"
+    
+            var pageContainer = '#pages'; // 'main > div'
+    
+            for (var pageKey in self.json.pages) {
+                params = self.json.pages[pageKey];
+                var pageRoles = (params.roles) ? String(params.roles).split(',') : undefined;
+    
+                // se il ruolo dell'utente permette la vista della pagina e se non è stata già creata
+                if (!params.roles || (pageRoles.indexOf(self.userRole()) >= 0 && document.querySelectorAll('#'+pageKey).length == 0)) { // $('#'+pageKey).length == '#'+pageKey doesn't exist
+                    
+                    //if (params.preload) {
+    
+                        params.tag = 'div';
+                        //params.id = pageKey;
+                        params.class = 'page';
+                        params.value = pageKey;
+    
+                        // the previous definition should be in layout.page
+    
+                        self.addTag(params, {container: pageContainer});
+                    //}
+    
+    
+                } else {
+                    self.log('' + self.userRole() + ' users can\'t access to the page '+pageKey);
+                }
+            }
+            
+            self.do(data);
+        }  */
+    this.pageFullScreen = function (onOff) {
+        self.log('pageFullScreen');
+        if (onOff)
+            self.addClass(document.querySelector('body'), 'fullscreen');
+
+        else
+            self.removeClass(document.querySelector('body'), 'fullscreen');
+    };
+
+    //var backLink = 'stage';
+    /* this.pageBack = function () {
+        self.gotoPage(backLink);
+        //window.location.href = '?p='+backLink;
+        //$('body').removeClass('nav-open'); // chiude menu
+    } */
+    this.link = function (link, args) {
+        /* function link() {
+            [native code]
+        } */
+        //alert(link);
+        link = self.replaceProperties(link, args);
+        window.location.href = link;
+    };
+
+    this.reload = function () {
+        location.reload();
+    };
+
+    this.gotoHomePage = function () {
+        self.gotoPage(self.homePage());
+    };
+
+    this.homePage = function () {
+        //alert('homePage');
+        if (self.json.pages) {
+            if (Object.keys(self.json.pages).length > 0) {
+                //var homeKey = Object.keys(self.json.pages).find(key => self.json.pages[key] === 'home');
+                if (self.json.pages.home)
+                    return 'home';
+
+                else
+                    return Object.keys(self.json.pages)[0];
+            } else {
+                self.log('No pages in "pages" node');
+            }
+        } else {
+            self.log('Can\'t find the "pages" node');
+        }
+    };
+
+    /*  this.activePage = function () { // to check if obsolete
+            return var.page;
+        } */
+    /*         this.slideIndex = function (id) {
+            return $('#'+id).index()+1;
+        } */
+    /*         this.slideTo = function (params) {
+            if (pagesSlider) pagesSlider.goTo(self.slideIndex(params.id));
+            $('#pages > .seq-canvas > .seq-in').addClass(params.transition);
+        } */
+    this.updateCodeEditors = function () {
+        // workaround known ACE bug:
+        // setValue doesn't work if editor is hidden
+        // http://jsfiddle.net/e4r7byLn/
+        var elements = document.querySelectorAll('.ace_editor');
+        if (elements) {
+            elements.forEach(function (element, index) {
+                var editor = ace.edit(element);
+                editor.renderer.updateFull(true);
+                //AceColorPicker.load(ace, editor);
+                //AceColorPicker.load(ace, editor); // works after some ms
+            });
+        }
+    };
+
+    this.gotoPage = function (pageId, fromHash) {
+        self.log('page'); // changePage
+        self.log('pageId');
+        self.log(pageId);
+        self.log('fromHash');
+        self.log(fromHash);
+        //self.log("var.page");
+        //self.log(var.page);
+        if (pageId) {
+
+            if (self.json.pages) {
+                if (self.json.pages[pageId]) {
+                    var page = self.json.pages[pageId];
+
+                    if (pageId !== self.json.setup.page.id || fromHash !== self.json.setup.page.hash) {
+
+                        if (fromHash) {
+                            //var.pagePath = fromHash; // obsolete
+                            self.json.setup.page.hash = fromHash;
+                        } else {
+                            //delete var.pagePath;
+                            delete self.json.setup.page.hash;
+                        }
+
+                        //var.page = pageId; // activePage
+                        //var newHash = pageId;
+                        //if (!fromHash) window.location.hash = newHash;
+                        var fullScreen = self.json.pages[pageId].fullscreen || false;
+                        //self.pageFullScreen(fullScreen);
+                        var pageRoles = (page.roles) ? String(page.roles).split(',') : undefined;
+
+                        if (self.params.d || !page.roles || pageRoles.indexOf(self.userRole()) >= 0) {
+
+                            if (pageId !== self.json.setup.page.id) {
+
+                                /* self.out({
+                                    "class": "page",
+                                    "data-value": self.json.setup.page.id,
+                                    "transition": "fadeOutLeft"
+                                }); */
+                                self.json.setup.page.id = pageId;
+                                self.json.setup.page.title = page.title;
+                                self.json.setup.page.roles = page.roles;
+
+                                /*                                 // TO DO: don't change document title and description
+                                
+                                                                // window title
+                                                                var documentTitle = self.json.setup.title;
+                                                                if (page.title)
+                                                                    documentTitle += ' ' + self.text(page.title);
+                                                                var documentDescription = self.json.setup.description || '';
+                                                                if (documentTitle)
+                                                                    document.title = documentTitle;
+                                                                if (document.querySelector('meta[name="description"]'))
+                                                                    document.querySelector('meta[name="description"]').setAttribute("content", documentDescription); */
+                                //$('title').text(windowTitle);
+                                // change page
+                                self.hide({
+                                    "class": "page"
+                                });
+                                self.in({
+                                    "class": "page",
+                                    "data-value": pageId,
+                                    "transition": "fadeIn"
+                                });
+
+                                /* $('.page').hide();
+                                $('.page[data-value='+pageId+']').fadeIn(); */
+                                //self.resizeEvent();
+                                self.uiUpdate(); // resize event trigger
+
+
+
+
+
+
+
+
+
+                                /* // page back icon
+                                    if (page.back) {
+                                    backLink = page.back;
+                                    $('#headerLeftIcons').show((page.back));
+                                } else {
+                                    $('#headerLeftIcons').hide();
+                                } */
+                            }
+
+                            if (page.update) { // obsolete
+                                self.do(page.update); //, {container: '.page[data-value='+pageId+']'}); 
+
+                                //self.do(page.update); //, {container: '.page[data-value='+pageId+']'}); 
+                            }
+
+                            if (page.init) self.do(page.init);
+
+                            self.log(page);
+                            if (page.on)
+                                self.on(page.on, { selector: '.page[data-value=' + pageId + ']' });
+
+                            //$('body').removeClass('nav-open'); // chiude menu
+                            //$('.offcanvas-collapse').removeClass('open');   
+                        } else {
+                            if (self.userRole() == 'guest') {
+                                /* self.do({
+                                    "login": {
+                                        "success": {
+                                        "reload": true
+                                        }
+                                    }
+                                }); */
+                            } else {
+                                self.alert('Non hai i privilegi per accedere a questa pagina');
+                            }
+
+                        }
+                    } else {
+                        // pagina non trovata
+                    }
+                } else {
+                    self.log('Can\'t find the page "' + pageId + '"');
+                }
+            } else {
+                self.log('Can\'t find the main node "pages"');
+            }
+        } else {
+            return self.json.setup.page;
+        }
+    };
+
+    var alertInterval;
+
+    this.getTime = function (ms) {
+        var sec = parseInt(ms / 1000);
+        var min = parseInt(sec / 60);
+        sec = sec - min * 60;
+        if (min < 10) min = '0' + min;
+        if (sec < 10) sec = '0' + sec;
+        return min + ':' + sec;
+    };
+
+    this.sortablejs = function (params, selectorParams, args) {
+        let container = self.selector(params.selector || params.container, undefined, true) || self.selector(selectorParams, undefined, true);
+        let query = self.query(container);
+        self.log('container');
+        self.log(container);
+        self.log('query');
+        self.log(query);
+        var sortable = Sortable.create(query);
+    };
+
+    this.alert = function (params, args) {
+        /* self.log('alert');
+        self.log('params');
+        self.log(params);
+        self.log('args');
+        self.log(args); */
+        var paramsReplaced = self.cloneObject(params);
+
+        //paramsReplaced = self.replaceProperties(paramsReplaced, args);
+        //self.log('paramsReplaced');
+        //self.log(paramsReplaced);
+        if (paramsReplaced) {
+            if (paramsReplaced.do && paramsReplaced.do !== 'fire') {
+                return Swal[paramsReplaced.do](params);
+                // more info on https://sweetalert2.github.io/#methods
+            } else {
+                if (typeof paramsReplaced == 'string') paramsReplaced = self.text({ string: paramsReplaced, args: args }); // verify
+
+
+
+                //self.log('paramsReplaced string replaced');
+                //self.log(paramsReplaced);
+                if (typeof paramsReplaced == 'number') paramsReplaced = String(paramsReplaced); // avoid bug
+                if (paramsReplaced.title !== undefined) paramsReplaced.title = self.text({ string: paramsReplaced.title, args: args });
+
+                //self.log('paramsReplaced2');
+                //self.log(paramsReplaced);
+                if (paramsReplaced.html && typeof paramsReplaced.html == 'string') paramsReplaced.html = self.replaceProperties(paramsReplaced.html, args);
+                if (paramsReplaced.text !== undefined) paramsReplaced.text = self.text({ string: paramsReplaced.text, args: args });
+                //self.log('paramsReplaced string replaced 2');
+                if (paramsReplaced.inputValue) paramsReplaced.inputValue = self.text({ string: paramsReplaced.inputValue, args: args });
+
+                //if (paramsReplaced.html) paramsReplaced.html = self.text({string: paramsReplaced.html, args: args}); // verify
+                if (paramsReplaced.cancelButtonText) paramsReplaced.cancelButtonText = self.text({ string: paramsReplaced.cancelButtonText, args: args });
+                if (paramsReplaced.confirmButtonText) paramsReplaced.confirmButtonText = self.text({ string: paramsReplaced.confirmButtonText, args: args });
+                if (paramsReplaced.denyButtonText) paramsReplaced.denyButtonText = self.text({ string: paramsReplaced.denyButtonText, args: args });
+                //if (paramsReplaced.showConfirmButton) paramsReplaced.showConfirmButton = self.text({string: paramsReplaced.showConfirmButton, args: args});
+                if (paramsReplaced.inputPlaceholder) paramsReplaced.inputPlaceholder = self.text({ string: paramsReplaced.inputPlaceholder, args: args });
+                if (paramsReplaced.validationMessage) paramsReplaced.validationMessage = self.text({ string: paramsReplaced.validationMessage, args: args });
+                //if (paramsReplaced.inputOptions) paramsReplaced.inputOptions = self.text({string: paramsReplaced.inputOptions, args: args});
+                if (paramsReplaced.footer) {
+                    paramsReplaced.footer = self.text({ string: paramsReplaced.footer, args: args });
+                }
+
+                //if (paramsReplaced.upload) alert('paramsReplaced.upload: '+paramsReplaced.upload);
+                if (paramsReplaced.upload) {
+                    paramsReplaced.html = '<form class="box" method="post" action="" enctype="multipart/form-data"><div class="drop-zone"><div class="drop-zone-caption">' + self.text('dragAndDropFiles') + '</div><span class="btn btn-primary btn-file" style="position: relative"><span>' + self.text('chooseFiles') + '</span><input type="file" accept=".ply, .obj, .stl" class="drop-zone-file" name="files[]"></span></div></form> ';
+                    // <img src="" alt="" style="background:#333" width="100" height="100" id="hidden-img" />
+                    //if (paramsReplaced.onUpload) var.onUpload = paramsReplaced.onUpload;
+                    //var.uploadingTarget = paramsReplaced.uploadingTarget;
+                }
+
+                //self.log('paramsReplaced3');
+                //self.log(paramsReplaced);
+                alertObj.confirm = paramsReplaced.confirm; // deprecated
+                alertObj.cancel = paramsReplaced.cancel; // deprecated
+                alertObj.deny = paramsReplaced.deny; // deprecated
+                alertObj.on = paramsReplaced.on;
+                alertObj.id = paramsReplaced.id;
+                delete paramsReplaced.on;
+
+
+
+                var alertHtml = paramsReplaced.html || paramsReplaced.blocks;
+                if (alertHtml)
+                    paramsReplaced.html = " ";
+
+                var swalParams = self.replaceProperties(paramsReplaced, args);
+
+                // animate
+                if (paramsReplaced.animate) {
+                    var animationIn = paramsReplaced.animate.in || paramsReplaced.animate;
+                    var animationOut = paramsReplaced.animate.out || paramsReplaced.animate;
+                    if (paramsReplaced.animate.in)
+                        animationIn = paramsReplaced.animate.in.transition || paramsReplaced.animate.in;
+                    if (paramsReplaced.animate.out)
+                        animationOut = paramsReplaced.animate.out.transition || paramsReplaced.animate.out;
+                    swalParams.showClass = {
+                        popup: 'animate__animated animate__faster animate__animated animate__' + animationIn
+                    };
+                    swalParams.hideClass = {
+                        popup: 'animate__animated animate__faster animate__animated animate__' + animationOut
+                    };
+                }
+
+                var customIcon;
+                if (swalParams.icon) {
+                    //swalParams.icon = self.replaceProperties(swalParams.icon, args);
+                    if (typeof swalParams.icon !== 'string') {
+                        customIcon = self.cloneObject(swalParams.icon);
+                        delete swalParams.icon;
+                    }
+                    /* var swalIcons = []; //"warning", "error", "success", "info", "question"];
+                    if (swalIcons.indexOf(params.icon)<0) {
+                        customIcon = params.icon;
+                        
+                        //if (!params.customClass) params.customClass = {};
+                        //params.customClass.icon = "customIcon";
+                    } */
+                }
+
+
+
+                //if (swalParams.showConfirmButton) delete swalParams.showConfirmButton;
+                // swalParams.update = function() {
+                //     self.log('swalParams.update');
+                //     self.log(var.updateSwal);
+                // }
+                // onRender is obsolete
+                /* swalParams.onRender = function () {
+                    startUploadListeners({
+                        container: '.drop-zone',
+                        onUpload: params.onUpload,
+                        path: params.path
+                        //uploadingTarget: var.uploadingTarget
+                        //onError:
+                    });
+                }
+*/
+                delete swalParams.blocks;
+                delete swalParams.onUpload;
+                delete swalParams.upload;
+
+                if (swalParams.confirm) delete swalParams.confirm;
+                if (swalParams.cancel) delete swalParams.cancel;
+                if (swalParams.timerProgressBar) {
+                    swalParams.onBeforeOpen = function () {
+                        //Swal.showLoading(); // rimuove i bottoni
+                        alertInterval = setInterval(() => {
+                            const content = Swal.getContent();
+                            if (content) {
+                                const b = content.querySelector('b');
+                                if (b) {
+                                    b.textContent = self.getTime(Swal.getTimerLeft());
+                                }
+                            }
+                        }, 100);
+                    };
+                    swalParams.onClose = function () {
+                        clearInterval(alertInterval);
+                    };
+                }
+
+                //self.log('swalParams');
+                //self.log(swalParams);
+                Swal.fire(swalParams).then((result) => {
+                    //self.log('alert result');
+                    //self.log(result);
+                    // TO DO: if (!result) result = {} to avoid errors  
+                    var alertResult = result.value;
+
+                    if (alertObj.on) {
+                        if (alertObj.on.value && result.value) {
+                            //if (alertObj.id) alertObj.values[alertObj.id] = result.value;
+                            if (alertObj.id) alertValues[alertObj.id] = result.value;
+                            alertValues.value = result.value;
+                            setTimeout(function () {
+                                alertObj.on.value = self.replacePropertyWithPrefix(alertObj.on.value, 'alert', alertValues);
+                                //alertObj.on.value = self.replaceProperty(alertObj.on.value, 'alert', result);
+                                self.do(alertObj.on.value, undefined, result.value); // TO DO: remove result.value once removed all {result}
+
+                                //self.do(alertObj.on.value, result.value); // TO DO: remove result.value once removed all {result}
+                            }, 500);
+                        }
+                        if (alertObj.on.isConfirmed && result.isConfirmed) {
+                            if (alertObj.id) alertValues[alertObj.id] = result.isConfirmed;
+                            alertObj.on.isConfirmed = self.replacePropertyWithPrefix(alertObj.on.isConfirmed, 'alert', alertValues);
+                            alertObj.on.isConfirmed = self.replacePropertyWithPrefix(alertObj.on.isConfirmed, 'alert', result);
+                            self.do(alertObj.on.isConfirmed, undefined, result.value); // TO DO: remove result.value once removed all {result}
+
+                            //self.do(alertObj.on.isConfirmed, result.value); // TO DO: remove result.value once removed all {result}
+                        }
+                        if (alertObj.on.isDenied && result.isDenied) {
+                            alertObj.on.isDenied = self.replacePropertyWithPrefix(alertObj.on.isDenied, 'alert', result);
+                            self.do(alertObj.on.isDenied, undefined, result.value); // TO DO: remove result.value once removed all {result}
+
+                            //self.do(alertObj.on.isDenied, result.value); // TO DO: remove result.value once removed all {result}
+                        }
+                        if (alertObj.on.isDismissed && result.isDismissed) {
+                            alertObj.on.isDismissed = self.replacePropertyWithPrefix(alertObj.on.isDismissed, 'alert', result);
+                            self.do(alertObj.on.isDismissed, undefined, result.dismiss); // TO DO: remove result.value once removed all {result}
+
+                            //self.do(alertObj.on.isDismissed, result.dismiss); // TO DO: remove result.value once removed all {result}
+                        }
+
+                        console.log('alertValues');
+                        console.log(alertValues);
+
+
+                    } else {
+                        /* if (result.isConfirmed) {
+                            self.do(alertObj.confirm, result.value);
+                        } else if (result.isDenied) {
+                            self.do(alertObj.deny, result.value);
+                        } else if (result.dismiss === Swal.DismissReason.cancel) {
+                            self.do(alertObj.cancel, result.value);
+                        } else if (result.dismiss === Swal.DismissReason.timer) {
+                            self.log('Alert closed by the timer');
+                        } */
+                    }
+
+                    /*
+
+                    Reason	Description	Related configuration
+                    Swal.DismissReason.backdrop	The user clicked the backdrop.	allowOutsideClick
+                    Swal.DismissReason.cancel	The user clicked the cancel button.	showCancelButton
+                    Swal.DismissReason.close	The user clicked the close button.	showCloseButton
+                    Swal.DismissReason.esc	The user clicked the Esc key.	allowEscapeKey
+                    Swal.DismissReason.timer	The timer ran out, and the alert closed automatically.	timer
+
+                    */
+                });
+
+                if (alertHtml)
+                    self.do(alertHtml, { selector: '#swal2-html-container' });
+
+                //self.log('customIcon');
+                //self.log(customIcon);
+                if (customIcon) {
+                    /* self.icons({
+                        "class": "icon",
+                        "svg": customIcon
+                    }, {container: '.swal2-icon'}); */
+                    self.do(customIcon, { selector: '.swal2-icon' });
+                    //self.addTag(customIcon, {container: '.swal2-icon'}); // check
+                    self.css({
+                        selector: '.swal2-icon',
+                        style: {
+                            'border': '0px solid transparent'
+                        }
+                    });
+                    self.show({
+                        selector: '.swal2-icon'
+                    });
+                    /* $('.swal2-icon').css({
+                        'border': '0px solid transparent'
+                    });
+                    $('.swal2-icon').show(); */
+                }
+
+                if (swalParams.on && swalParams.on.init) // to be repeated in each function
+                    self.do(swalParams.on.init);
+                //self.do(swalParams.on.init);
+            }
+        }
+    };
+
+    /*   var startUploadListeners = function (params) { // da FIXO
+            self.log('startUploadListeners');
+            var.upload = params;
+            var obj = $(params.container);
+            self.log(params);
+            obj.on('dragenter', function (e) {
+                e.stopPropagation();
+                e.preventDefault();
+                $(this).css('border', '2px solid #0B85A1');
+            });
+            obj.on('dragover', function (e) {
+                    e.stopPropagation();
+                    e.preventDefault();
+            });
+            
+            $(document).on('dragenter', function (e) {
+                e.stopPropagation();
+                e.preventDefault();
+            });
+            $(document).on('dragover', function (e) {
+                e.stopPropagation();
+                e.preventDefault();
+                obj.css('border', '2px dotted #0B85A1');
+            });
+            $(document).on('drop', function (e) {
+                e.stopPropagation();
+                e.preventDefault();
+            });
+            // automatically submit the form on file select
+    
+            obj.on('drop', function (e) {
+                    $(this).css('border', '2px dotted #0B85A1');
+                    e.preventDefault();
+                    var files = e.originalEvent.dataTransfer.files;
+                
+                    //We need to send dropped files to firebase
+                    handleFileUpload(files);
+            });
+            $(params.container+'-file').on('change', function (e) {
+                var files = $(params.container+'-file')[0].files;
+                self.log(params.container+'-file');
+                self.log(files)
+                handleFileUpload(files);
+            });
+    
+        } */
+    /*     this.uploadFileNameAndType = function(params){
+            self.log('uploadFileNameAndType');
+            self.log(params);
+            
+            var fileArr = params.fileName.split('.');
+            var.upload.fileName = params;
+            var.upload.fileType = fileArr[1].toLowerCase();
+            if (!$('.swal2-act').length) $('.swal2-modal').append('<div class="swal2-act"></div>');
+            if (var.upload.fileType == 'ply') {
+                $('.swal2-act').css({'display':'none'});
+            } else {
+                $('.swal2-act').css({'display':'block'});
+                $('.swal2-act').append('<button onclick=\"app.onUploadConfirm()\" type=\"button\" class=\"swal2-confirm swal2-styled\" aria-label=\"\" style=\"display: inline-block; border-left-color: rgb(48, 133, 214); border-right-color: rgb(48, 133, 214);\">'+self.text('btnImport')+'</button>');
+            }
+        } */
+    /*     var handleFileUpload = function(files) {
+            self.log('handleFileUpload');
+            self.log(files);
+            self.log('var.upload');
+            self.log(var.upload);
+            //var auth0Id = fixo.getAuth0Id();
+            // Swal.close(); // chiusura popup
+            for (var i = 0; i < files.length; i++) {
+                var fd = new FormData();
+                fd.append('file', files[i]);
+                if (!files[i].name.endsWith('png')) var.upload.fileTimestamp = self.getTimestamp();
+    
+                self.fireBaseUpload({
+                    'file': files[i], //base64toBlob(files),
+                    'timestamp': var.upload.fileTimestamp,
+                    'path': var.user.uid+'/' || '' //auth0Id+'/files/images' //path_to_where_you_to_store_the_file
+                }, function (data) {
+                    self.log('data');
+                    self.log(data);
+                    if (!data.error) {
+                        //if (data.progress && data.progress == 0) $('.swal2-actions').append('<span class="prog" style="font-size:48px;font-weight:bolder"></span>');
+                        if (data.progress >= 0 && data.progress <= 100) {
+                            //progress update to view here
+                            // self.log('Uploading file');
+                            // self.log(var.uploadingTarget);
+                            $('#msgFooter').html('<span>'+data.progress+'%</span>')
+                        }
+                        if (data.progress == 100) {
+                            //$(var.uploadingTarget).removeClass('pulseFade');
+                            // Swal.close();
+    
+                            if (data.fileExt !== 'png'){
+                                self.log('diverso da png');
+                                $('.drop-zone-file').attr('accept','.png');
+                                var.upload.data = data;
+                            }
+    
+                            if (var.upload.onUpload) self.do(var.upload.onUpload, data);
+                        }
+                    } else {
+                        //$(var.uploadingTarget).removeClass('pulseFade');
+                        self.log(data.error + ' Firebase image upload error');
+                    }
+                });
+            }
+        }; */
+    /*     var uploadDone = function (data) {
+            self.log('uploadDone');
+            // download URL here "data.downloadURL"
+            var auth0Id = fixo.getAuth0Id();
+            var storageRef = firebase.storage().ref();
+            var imageRef = storageRef.child(auth0Id+'/files/images/'+data.fileName);
+            // Get the download URL
+            imageRef.getDownloadURL().then(function(url) {
+                self.do(var.onUpload, url);
+                // Insert url into an <img> tag to "download"
+            }).catch(function(error) {
+                self.log(error.code);
+                // A full list of error codes is available at
+                // https://firebase.google.com/docs/storage/web/handle-errors
+    
+                switch (error.code) {
+                case 'storage/object_not_found':
+                    // File doesn't exist
+                    break;
+    
+                case 'storage/unauthorized':
+                    // User doesn't have permission to access the object
+                    break;
+    
+                case 'storage/canceled':
+                    // User canceled the upload
+                    break;
+    
+                case 'storage/unknown':
+                    // Unknown error occurred, inspect the server response
+                    break;
+                }
+            });
+        } */
+    this.findKey = function (obj, key) {
+        return obj.filter(function (item) {
+            return Boolean(item[key]);
+        });
+    };
+
+    /*     this.fireBaseUpload = function(parameters, callBackData) {
+            self.log('fireBaseUpload');
+            self.log('parameters');
+            self.log(parameters);
+            
+            // Get a reference to the storage service, which is used to create references in your storage bucket
+            var storageRef = firebase.storage().ref();
+            
+            
+            var file = parameters.file;
+            var path = parameters.path;
+            var timestamp = parameters.timestamp;
+            //var path = var.user.uid; // non riesco a passare la path come parametro da olo.app.json così come l'errore funzione onUpload
+    
+            
+            self.log('file');
+            self.log(file);
+            self.log('timestamp');
+            self.log(timestamp);
+            self.log('path');
+            self.log(path);
+    
+            //Riga originale pre-modifica nome file
+    // 		    var fullPath = path + '/' + file.name;
+    
+            // expected parameters to start storage upload
+            var metaData = {'contentType': file.type};
+            var fileSize = formatBytes(file.size); // get clean file size
+            var fileType = file.type;
+            var fileName = file.name;
+            var fileExt = fileName.split('.')[1];
+            
+            self.log(metaData);
+            self.log(fileSize);
+            self.log(fileType);
+            self.log(fileName);
+            self.log(fileExt);
+            var modFileName = timestamp+'.'+fileExt;
+    
+            //var fullFilePath = storageRef.child(path+timestamp+'-'+fileName);
+            var fullFilePath = storageRef.child(path+modFileName);
+            self.log('fullFilePath');
+            self.log(fullFilePath);
+    
+            var nm = fileName.split('.');
+            var name = nm[0];
+    
+            self.log('nm');
+            self.log(nm);
+            self.log('name');
+            self.log(name);
+            
+    
+            
+            // Modifica file name generato
+            // var name = generateRandomString(16); //(location function below)
+            // var n = name+'.'+file.type.replace('image/','');
+            // var fullPath = path + '/' + n;
+            
+            
+            //Riga originale pre-modifica nome file
+    // 		    var n = file.name;
+            
+            
+            // generate random string to identify each upload instance
+            //name = generateRandomString(12); //(location function below)
+            
+    //		    var uploadFile = storageRef.child(parameters.path).put(file, metaData);
+            var uploadFile = fullFilePath.put(file, metaData);
+        
+            // first instance identifier
+            //callBackData({id: name, fileSize: fileSize, fileType: fileType, fileName: n}); 20200724
+            callBackData({id: timestamp.toString(), fileSize: fileSize, fileType: fileType, fileName: modFileName, fileExt: fileExt}); // fileName: fileName //id: name
+        
+            uploadFile.on('state_changed', function (snapshot) {
+                var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
+                progress = Math.floor(progress);
+                self.log('progress');
+                self.log(progress);
+                callBackData({
+                        progress: progress,
+                        element: timestamp.toString(),
+                        //element: name,
+                        fileSize: fileSize,
+                        fileType: fileType,
+                        fileName: modFileName,
+                        fileExt: fileExt});
+                        //fileName: fileName
+            }, function (error) {
+                callBackData({error: error});
+            }, function () {
+                var downloadURL = uploadFile.snapshot.downloadURL;
+                callBackData({
+                        downloadURL: downloadURL,
+                        element: timestamp.toString(),
+                        //element: name,
+                        fileSize: fileSize,
+                        fileType: fileType,
+                        fileName: modFileName,
+                        fileExt: fileExt});
+                        //fileName: fileName
+            });
+        } */
+    var formatBytes = function (bytes, decimals) {
+        if (bytes == 0) return '0 Byte';
+        var k = 1000;
+        var dm = decimals + 1 || 3;
+        var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+        var i = Math.floor(Math.log(bytes) / Math.log(k));
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+    };
+
+    this.userRole = function () {
+        switch (Boolean(self.user('uid'))) {
+            case true:
+                return 'user'; // user logged in
+                break;
+            case false:
+                return 'guest';
+                break;
+        }
+    };
+
+    this.userIn = function () {
+        //var user = firebase.auth().currentUser;
+        //if (user.emailVerified) {
+        return Boolean(self.user('uid'));
+    };
+
+    this.userOut = function () {
+        return (!self.user('uid'));
+    };
+
+    this.user = function (param) {
+        /*         self.log('user');
+                self.log(auth); */
+        if (auth && auth.currentUser)
+            if (param == 'firstName')
+                return self.firstName(auth.currentUser['displayName']);
+            else if (auth.currentUser[param])
+                return auth.currentUser[param];
+            else if (!param)
+                return auth.currentUser;
+
+            else
+                return undefined;
+
+        else
+            return undefined;
+    };
+
+    this.firstName = function (nameParam) {
+        var firstNameStr = (nameParam) ? nameParam.split(' ')[0] : '';
+        return firstNameStr;
+    };
+
+    this.userUid = function () {
+        if (auth) return auth.currentUser.uid;
+        else return undefined;
+    };
+
+    this.userVerified = function () {
+        if (auth) return auth.currentUser.emailVerified;
+        else return undefined;
+    };
+
+    /*         this.value = function (valueParams) {
+            if (valueParams.string)
+                return valueParams.string
+            else if (valueParams.function)
+                //return self.doFunctionByName(valueParams.function, window, '');
+        }
+    */
+    this.thunkableMessage = function (message, callback) {
+        if (callback) callback(message);
+    };
+
+    this.onMessage = {
+        alert: "test"
+    };
+
+    this.processMessage = function (message) {
+        self.alert('processMessage');
+        self.do(self.onMessage, message);
+        //self.do(self.onMessage, undefined, message);
+    };
+
+    this.thunkable = function (params, args) {
+        if (params.postMessage) {
+            var message = self.replaceProperties(params.postMessage, args);
+            if (message) {
+                try {
+                    ThunkableWebviewerExtension.postMessage(message);
+                } catch (error) {
+                }
+            }
+            else
+                self.log('in function "thunkable" "postMessage" parameter is wrong');
+        }
+        if (params.receiveMessage) {
+            self.onMessage = params.receiveMessage;
+            try {
+                ThunkableWebviewerExtension.receiveMessage(self.processMessage);
+            } catch (error) {
+            }
+        }
+
+    };
+
+    /*     var ThunkableWebviewerExtension = (function () {
+            const postMessageToWebview = (message) => {
+                if (window.ReactNativeWebView) {
+                    window.ReactNativeWebView.postMessage(message);
+                } else {
+                    window.parent.postMessage(message, '*');
+                }
+            };
+    
+            const getReceiveMessageCallback = (fxn, hasReturnValue) => (event) => {
+                if (typeof fxn === 'function') {
+                    if (event.data) {
+                        let dataObject;
+                        try {
+                            dataObject = JSON.parse(event.data);
+                        } catch (e) {
+                            // message is not valid json
+                        }
+                        if (dataObject && dataObject.type === 'ThunkablePostMessage' && hasReturnValue) {
+                            fxn(dataObject.message, (returnValue) => {
+                                const returnMessageObject = { type: 'ThunkablePostMessageReturnValue', uuid: dataObject.uuid, returnValue };
+                                postMessageToWebview(JSON.stringify(returnMessageObject));
+                            });
+                        } else if (!hasReturnValue && (!dataObject || dataObject.type !== 'ThunkablePostMessage')) {
+                            fxn(event.data);
+                        }
+                    }
+                }
+            };
+    
+            return {
+                postMessage: postMessageToWebview,
+                receiveMessage: function (fxn) {
+                    const callbackFunction = getReceiveMessageCallback(fxn, false);
+                    document.addEventListener('message', callbackFunction, false);
+                    window.addEventListener('message', callbackFunction, false);
+                },
+                receiveMessageWithReturnValue: function (fxn) {
+                    const callbackFunction = getReceiveMessageCallback(fxn, true);
+                    document.addEventListener('message', callbackFunction, false);
+                    window.addEventListener('message', callbackFunction, false);
+                },
+            };
+        })(); */
+    this.extendFunctions = function (functions) {
+        // change it. don't call self.function
+        for (var name in functions) {
+            if (functions[name].js) {
+                try {
+                    // create or override function
+                    self.functions[name] = new Function(functions[name].js);
+                } catch (error) {
+                    console.log('ERROR creating function %c' + name, 'color:orange;');
+                    self.log(functions[name].js);
+                    self.log(error.message);
+                    // error.column is wrong
+                    /* let col = error.column -17;
+                    console.log(
+                        functions[name].js.substring(0,col)
+                        + '%c' + functions[name].js.substring(col, col+1)
+                        + '%c' + functions[name].js.substring(col+1), 'color:orange; font-weight:bold', 'color:#ddd')
+                    console.log('%c' + error.message, 'color:orange;'); */
+                    // since the script is in one row, error.columns is the exact position of the error
+                }
+            } else {
+                self.log(name + ' function requires js property');
+            }
+        }
+    };
+
+
+    this.function = function (obj, args) {
+        /* console.log('function');
+        console.log(params);
+        console.log('args');
+        console.log(args); */
+        // TO DO: add "name" parameter to make the js function permanently available in self.methods[name]
+        // https://stackoverflow.com/questions/49125059/how-to-pass-parameters-to-an-eval-based-function-injavascript
+        //app[func].apply( this, args ); // or app[func]( ...args ); // ES6 (2015)
+        // https://stackoverflow.com/questions/1316371/converting-an-array-to-a-function-arguments-list
+        //args = self.replaceProperties(args); // needed?
+        //try {
+        if (obj.name && obj.js) {
+            // create or replace function
+            self.functions[obj.name] = new Function(obj.js);
+        } else if (obj.name && !obj.js) {
+            if (self.functions[obj.name]) {
+                // execute function
+                if (!obj.arguments || !Array.isArray(obj.arguments)) obj.arguments = [obj.arguments];
+                try {
+                    return self.functions[obj.name](...obj.arguments);
+                    //return self.functions[obj.name].apply(null, obj.arguments);
+                } catch (error) {
+                    console.log('ERROR in function %c' + obj.name, 'color:orange;');
+                    console.log('obj');
+                    console.log(obj);
+                    console.log('function');
+                    console.log(self.json.functions[obj.name]);
+                    console.log(error.message);
+                }
+            } else {
+                console.log('ERROR function undefined %c' + obj.name, 'color:orange;');
+            }
+            //return self.functions[obj.name](...obj.arguments); // also args?
+        } else if (obj.js) {
+            // execute js code as a function
+            if (obj.arguments && Array.isArray(obj.arguments)) {
+                return new Function(obj.js).call(null, obj.arguments);
+                //return new Function( obj.js ).apply(this, obj.arguments );
+            } else {
+                return new Function(obj.js).call(null, obj.arguments);
+            }
+        }
+        /* } catch (error) {
+            self.log('function ERROR');
+            self.log(error);
+            self.log(obj);
+            return false
+        } */
+    };
+
+
+    this.eval = this.js = function (code, args) {
+        /* self.log('js');
+        self.log(code);
+        self.log(args); */
+        /* if (Array.isArray(code)) {
+            let codeCombined = '';
+            for (var codePart of code) codeCombined += self.replaceProperties(codePart, args);
+            try {
+                return eval(code);
+            } catch (error) {
+                self.log('JS error');
+                self.log(error);
+                return code;
+            } */
+        /*  if (typeof code == 'object') {
+    
+            } else { */
+
+        code = self.replaceProperties(code, args);
+        /* self.log('args');
+        self.log(args); */
+        try {
+            //return new Function( code ).call(null, args);
+            return eval(code);
+        } catch (error) {
+            /* self.log('javascript catch on "'+ codeString + '"');
+            self.log('error');
+            self.log(error);
+            self.log('codeString');
+            self.log(codeString);
+            self.log('args');
+            self.log(args);
+            return false */
+            return code;
+        }
+        //}
+    };
+
+    /*    this.compile = function (obj, args) {
+            // functions e addTag potrebbero essere eseguiti da una stessa funzione
+            // in reatà addTag è la funzione che andrebbe lanciata quando la chiave
+            // dell'azione è tra i tag html
+    
+            if (obj !== undefined) {
+                var result;
+                if (typeof obj == 'object')
+                    result = self.actionResult(obj, args);
+                result = self.replaceProperties(obj, args);
+                if (result == 'undefined')
+                    return undefined;
+                else if (typeof result == 'object') // Array is also an object type
+                    return self.do(result, args);
+                else if (typeof result == 'function')
+                    return result(args);
+                else {
+                    return result;
+                }
+            } else {
+                return undefined;
+            }
+        } */
+    this.if = function (params, selectorParams, args) {
+
+        // add array
+        if (typeof params == 'object') {
+
+            var conditionString = 'if';
+            var condition;
+
+            if (params.is !== undefined) {
+                if (typeof params.is == 'string') {
+                    let isReplaced = self.replaceProperties(params.is, args, true);
+                    self.log(isReplaced, 'grey');
+                    try {
+                        condition = Boolean(eval(isReplaced)); // remove undefined values
+                        self.log(isReplaced + ' is ' + condition, 'grey');
+                    } catch (error) {
+                        self.log(isReplaced, 'red');
+                        self.log('"if" condition wrong', 'red');
+                        self.log(error, 'red');
+                    }
+                    conditionString += ' is ' + params.is;
+                } else if (Array.isArray(params.is)) {
+                    let i = 0;
+                    params.is[i];
+                    switch (params.is[i + 1]) {
+                        case '=': condition = Boolean(eval(params.is[i] + '===' + params.is[i + 2])); break;
+                    }
+                }
+            } else if (params.not !== undefined) {
+                condition = (!Boolean(eval(self.replaceProperties(params.not, args, true)))); // remove undefined values
+                if (typeof params.not == 'string') conditionString += ' not ' + params.not;
+            } else if (params.regexp) {
+                const regex = new RegExp(params.regexp);
+                condition = Boolean(regex.test(params.string));
+            } else if (params.isArray) {
+                condition = self.isArray(params.isArray);
+                conditionString += 'isArray ' + params.isArray;
+            } else if (params.exist) {
+                let elementExist = self.element({ path: params.exist });
+                condition = (elementExist);
+                self.log('"if" exist ' + params.exist, 'grey');
+            } else if (params.value && params.in) {
+                //let arr = self.replaceProperties(params.in, args, true);
+                //condition = (arr.indexOf(self.replaceProperties(params.value)) >= 0);
+                condition = self.valueInJson(self.replaceProperties(params.in, args, true), self.replaceProperties(params.value));
+
+                self.log('"if" value ' + self.replaceProperties(params.value) + ' in array is ' + condition, 'grey');
+            } else if (params.key && params.in) {
+                condition = self.keyInJson(self.replaceProperties(params.in, args, true), self.replaceProperties(params.key));
+                self.log('"if" key ' + self.replaceProperties(params.key) + ' in object is ' + condition, 'grey');
+            } else {
+                let selector = self.selector(params.selector || params.container, undefined) || self.selector(selectorParams, undefined);
+                //var selector = self.selector(params.selector || params.container, selectorParams);
+                if (selector) {
+                    if (params.exist) {
+                        //var element = self.query(params.exist);
+                        //condition = Boolean(self.query(selector));
+                        condition = Boolean(self.exist(selector));
+                        conditionString += ' ' + selector + ' exist ' + params.exist;
+                    }
+                    if (params.hasClass) { // to be reviewed (self.hasClass need 1 parameter)
+                        var element = self.query(selector);
+                        condition = Boolean(self.hasClass(element, params.hasClass));
+                        conditionString += ' ' + selector + ' hasClass ' + params.hasClass;
+                    }
+                    if (params.isVisible) {
+                        var element = self.query(selector);
+                        condition = Boolean(self.isVisible(element, params.isVisible));
+                        conditionString += ' ' + selector + ' isVisible';
+                    }
+                    if (params.isHidden) {
+                        var element = self.query(selector);
+                        condition = Boolean(self.isHidden(element, params.isHidden));
+                        conditionString += ' ' + selector + ' isHidden';
+                    }
+                    if (params.inViewport) {
+                        var element = self.query(selector);
+                        condition = Boolean(self.inViewport(element, params.inViewport));
+                        conditionString += ' ' + selector + ' inViewport';
+                    }
+                    if (params.outViewport) {
+                        var element = self.query(selector);
+                        condition = Boolean(self.outViewport(element, params.outViewport));
+                        conditionString += ' ' + selector + ' outViewport';
+                    }
+                    if (params.isDisplay) {
+                        var element = self.query(selector);
+                        /* self.log('element');
+                        self.log(element); */
+                        condition = Boolean(self.isDisplay(element, params.isDisplay));
+                        conditionString += ' ' + selector + ' isDisplay ' + params.isDisplay;
+                    }
+                } else {
+                    self.log('the "if" function requires "is" or "not" parameter');
+                }
+            }
+
+            /* conditionString += ': ' + condition;
+            self.log(condition, 'grey'); */
+            if (condition)
+                if (params.then) {
+                    // self.console dovrebbe diventare così
+                    if (typeof params.then == 'object') {
+                        return self.do(params.then);
+                        //return self.do(params.then);
+                    } if (typeof params.then == 'string') {
+                        return self.replaceProperties(params.then);
+                    } else {
+                        return params.then;
+                    }
+
+                }
+                else
+                    self.log('the "if" function requires "then" parameter');
+            else if (params.else) {
+                if (typeof params.else == 'object') {
+                    return self.do(params.else);
+                    //return self.do(params.else);
+                } if (typeof params.else == 'string') {
+                    return self.replaceProperties(params.else);
+                } else {
+                    return params.else;
+                }
+            }
+        } else {
+            //self.log(Boolean(params) && params !== 'false');
+            return Boolean(self.js(params, args)); // 0.9.7
+
+            //return Boolean(eval(self.replaceProperties(params, args))) // need try
+        }
+    };
+
+    this.switch = function (params, args) {
+        //self.log('switch');
+        //self.log(params);
+        var value;
+        var answer;
+        if (params.expression)
+            value = String(self.js(params.expression, args));
+
+        else
+            self.log('"switch" function requires "expression" parameter');
+        //self.log(value);
+        if (params.cases) {
+            //self.log('params.cases[value]');
+            //self.log(params.cases[value]);
+            if (value !== undefined && params.cases[value]) {
+                if (typeof params.cases[value] == 'object')
+                    answer = self.do(params.cases[value], undefined, args);
+
+
+                //answer = self.do(params.cases[value], args);
+                else
+                    answer = params.cases[value];
+
+            } else if (params.cases['default']) {
+                self.log('default');
+                self.log(params.cases['default']);
+                if (typeof params.cases['default'] == 'object')
+                    answer = self.do(params.cases['default'], undefined, args);
+
+
+                //answer = self.do(params.cases['default'], args);
+                else
+                    answer = params.cases['default'];
+            }
+        } else {
+            self.log('"switch" function requires "cases" parameter');
+            self.log('answer');
+            self.log(answer);
+        }
+        return answer;
+    };
+
+
+    /*
+        this.varAction = this.set = function (params, args) {
+            // {name, value, operator}
+    
+            var value;
+            var operator = params.operator;
+    
+            //self.log('operator');
+            //self.log(operator);
+    
+            if (operator && args) operator = self.replaceProperties(operator, args);
+    
+    
+            //self.log('operator');
+            //self.log(operator);
+    
+            if (params.value !== undefined) { // set
+                value = self.js(params.value, args);
+                if (params.var) {
+                    self.docElement('self.json.var.'+params.var, value);
+                } else if (params.name) {
+                    var actualValue = self.docElement('self.json.var.'+params.name);
+                    if (actualValue == undefined && typeof value == 'string') actualValue = '';
+                    if (actualValue == undefined && typeof value == 'number') actualValue = 0;
+                    if (actualValue == undefined && typeof value == 'object') actualValue = {};
+                    if (operator) {
+    
+                        if (operator == '+=') actualValue += value;
+                        if (operator == '-=') actualValue -= value;
+                        if (operator == '/=') actualValue /= value;
+                        if (operator == '*=') actualValue *= value;
+                        value = actualValue;
+                                            }
+                    self.docElement('self.json.var.'+params.name, value);
+                    //self.log('self.json.var[params.name]');
+                    //self.log(self.json.var[params.name]);
+                } else {
+                    self.log('set command requires "var" parameter');
+                }
+            } else { // get
+                if (params.var) {
+                    return self.docElement('self.json.var.'+params.var);
+                } else if (params.name) {
+                    return self.docElement('self.json.var.'+params.name);
+                } else {
+                    self.log('set command requires "value" parameter');
+                }
+            }
+            //self.log('value');
+            //self.log(value);
+            self.log('var ' + params.name + ' = ' + value);
+    
+        } */
+    this.delay = function (params, selector, args) {
+        self.log('delay');
+        self.log('selector');
+        self.log(selector);
+        var duration = params.duration || 1000;
+        duration = Number(self.replaceProperties(duration, args));
+        self.log(duration);
+        if (params.do) {
+            setTimeout(function () {
+                self.do(params.do, selector, args);
+                //self.do(params.do, args, container)
+            }, duration);
+        }
+    };
+
+    this.firebasePasswordReset = function (paramEmail, paramSuccess, paramError) {
+        //firebase.auth().languageCode = 'it';
+        firebase.auth().useDeviceLanguage();
+        auth.sendPasswordResetEmail(paramEmail).then(function () {
+            // Email sent.
+            if (paramSuccess) self.do(paramSuccess);
+            //if (paramSuccess) self.do(paramSuccess);
+        }).catch(function (error) {
+            // An error happened.
+            if (paramError) self.do(paramError, undefined, error.message);
+            //if (paramError) self.do(paramError, error.message);
+        });
+    };
+
+    this.firebaseUpdateProfile = function (params, paramSuccess, paramError) {
+        self.log('firebaseUpdateProfile');
+        self.log(params);
+        auth.currentUser.updateProfile(params).then(function () {
+            // Update successful.
+            self.log('User Profile Updated Successfully');
+            if (paramSuccess) self.do(paramSuccess);
+            //if (paramSuccess) self.do(paramSuccess);
+        }).catch(function (error) {
+            // An error happened.
+            if (paramError) self.do(paramError, undefined, error.message);
+            //if (paramError) self.do(paramError, error.message);
+        });
+    };
+
+    this.firebaseRegister = function (params, success, error) {
+        if (params.email && params.password) {
+            // log the user in
+            auth.createUserWithEmailAndPassword(params.email, params.password).then(cred => {
+                self.log(cred.user);
+                //var.auth.cred = cred;
+                var user = firebase.auth().currentUser;
+                /* if (user.emailVerified) {
+                } else {
+                    self.sendEmailVerification(params);
+                } */
+                //if (params.success) self.do(params.success);
+                if (params.success) self.do(params.success);
+            }).catch(error => {
+                // Handle Errors here.
+                //if (params.error) self.do(params.error, error.message);
+                if (params.error) self.do(params.error, undefined, error.message);
+            });
+        }
+    };
+
+    this.firebaseLogin = function (params) {
+        self.log('firebaseLogin');
+        self.log(params);
+
+        if (auth) {
+            auth.signInWithEmailAndPassword(String(params.email), String(params.password)).then(cred => {
+                //var.auth.cred = cred;
+                var user = firebase.auth().currentUser;
+                //firebase.auth().languageCode = 'it';
+                if (user.emailVerified) {
+                    if (params.success) self.do(self.replaceResult(params, undefined, cred));
+                    //if (params.success) self.do(self.replaceResult(params, cred));
+                } else {
+                    self.sendEmailVerification(params);
+                }
+            }).catch(error => {
+                self.log('error.code');
+                self.log(error.code);
+                if (params.error) self.do(self.replaceResult(params, undefined, error.message));
+                //if (params.error) self.do(self.replaceResult(params, error.message));
+            });
+        } else {
+            // firebase auth non inizializzato
+        }
+    };
+
+    this.firebaseLogout = function (params) {
+        self.log('firebaseLogout');
+        firebase.auth().signOut().then(function () {
+            self.log('firebaseLogout SUCCESS');
+            self.log(params.success);
+            if (params.success) {
+                //app.stopMeeting();
+                localStorage.clear();
+                //self.do(params.success);
+                self.do(params.success);
+            }
+        }).catch(function (error) {
+            self.log('firebaseLogout ERROR');
+            self.log(error);
+            //if (params.error) self.do(params.error);
+            if (params.error) self.do(params.error);
+        });
+    };
+
+    // this.firebaseUserVerify = function (params) {
+    //     self.log('firebaseUserVerify');
+    //     self.log(params);
+    //     self.log(params.oobCode);
+    //     if (params.oobCode) self.params.codeMail = params.oobCode
+    //     self.log(self.params.codeMail);            
+    //     //self.do(data);
+    //     // inviare mail di verifica            
+    // }
+    this.sendEmailVerification = function (params) {
+        self.log('sendEmailVerification');
+        var user = firebase.auth().currentUser;
+        firebase.auth().languageCode = 'it';
+        var successAction = params.success || self.reload;
+        user.sendEmailVerification().then(function () {
+            firebase.auth().signOut();
+            self.alert({
+                //toast: true,
+                icon: "success",
+                title: "verifyingemail", // all\'indirizzo "+params.email+"
+                html: "msgverifyingemail",
+                //confirmButtonText: "Ok",
+                //showCancelButton: false,
+                showConfirmButton: false,
+                confirm: successAction
+            });
+
+        });
+    };
+
+    /*         //self.log('function');
+            params = self.replaceProperties(params, args); // -> compile
+    
+            if (typeof params == 'object') {
+                // jsonic function
+                //return self.do(params, args);
+                return self.do(params, args);
+            } else if (typeof params == 'function') {
+                // javascript function
+                return params(args);
+            } else if (typeof params == 'string') {
+                if (json.actions[params]) {
+                    var functionCompiled = self.replaceResult(json.actions[params], args); // replace {result}
+                    //functionCompiled = self.replaceProperties(functionCompiled, args);
+                    // jsonic predefined function
+                    //return self.do(functionCompiled);
+                    return self.do(functionCompiled);
+                    //return self.actionResult(json.actions[params], args);
+                } else {
+                    // javascript function name
+                    var functionName = self.docElement(params);
+                    if (functionName)
+                        if (typeof functionName == 'function') {
+                            // javascript function
+                            return functionName(args)
+                        } else {
+                            // javascript object
+                            return functionName;
+                        }
+                    else
+                        self.log('function undefined: '+ params);
+                }
+            } */
+    this.path = function (pathParams, args, separatorParam) {
+        var pathString = '';
+        var separator = separatorParam || '/';
+
+        /*  self.log('this.path');
+            self.log(pathParams);
+            self.log(args); */
+        if (typeof pathParams == 'string') {
+            pathString = self.replaceProperties(pathParams, args);
+        } else {
+            for (var index in pathParams) {
+                pathObj = pathParams[index];
+                if (pathString !== '') pathString += separator;
+                if (pathObj.string)
+                    pathString += String(pathObj.string);
+                else if (pathObj.number)
+                    pathString += Number(pathObj.number);
+                else if (pathObj.function)
+                    pathString += self.doFunctionByName(pathObj.function, window, '');
+            }
+        }
+        return pathString;
+    };
+
+
+    this.executeFunctionByName = function (functionName, context /*, arguments */) {
+        //self.log('executeFunctionByName');
+        //self.log(functionName);
+        if (functionName) {
+            var args = [].slice.call(arguments).splice(2);
+            var namespaces = functionName.split(".");
+            var func = namespaces.pop();
+            for (var i = 0; i < namespaces.length; i++) {
+                context = context[namespaces[i]];
+            }
+            if (context[func] !== undefined) {
+                return context[func].apply(context, args);
+            } else {
+                //self.log('Error: executeFunctionByName');
+                //if (functionName !== undefined) {self.log('functionName:'+functionName);}
+            }
+        } else {
+            self.log('executeFunctionByName');
+            self.log('functionName undefined');
+        }
+
+    };
+
+    this.functions = {};
+
+    this.methods = {
+        // main methods
+        run: function (params, container, args) { self.run(params, container, args); },
+        delay: function (params, container, args) { self.delay(params, container, args); },
+        ajax: function (params, container, args) { self.ajax(params, container, args); },
+        do: function (params, container, args) { self.do(params, container, args); },
+        module: function (params, container, args) { self.module(params, args); },
+        js: function (params, container, args) { self.js(params, args); },
+        function: function (params, container, args) { self.function(params, args); },
+        dispatchEvent: function (params, container, args) { self.dispatchEvent(params, args); },
+
+        // TO DO: check
+        lang: function (params, container, args) { self.lang(params, args); },
+        find: function (params, container, args) { self.find(params, args); },
+        page: function (params, container, args) { self.page(params, args); },
+
+        // DA VERIFICARE
+        //dayjs: function (params, args) {self.dayjs(params, args)},
+        //moment: function (params, args) {self.moment(params, args)},
+        //data: function (params, args) {self.data(params, args)},
+        //var: function (params, args) {self.var(params, args)},
+        //javascript: function (params, args) {self.javascript(params, args)},
+        //color: function (params, args) {self.color(params, args)},
+        //select: function (params, args) {self.select(params, args)}, 
+        // LOGIC & DATA     
+        for: function (params, container, args) { self.for(params, container, args); },
+        if: function (params, container, args) { self.if(params, container, args); },
+        switch: function (params, container, args) { self.switch(params, args); },
+        set: function (params, container, args) { self.set(params, args); },
+
+        // TO DO: check is needs to be renamed to avoid confusion with self.json.data
+        data: {
+            set: function (params, args) {
+                for (var param in params) {
+
+                    var value = params[param];
+
+                    if (value) value = self.replaceProperties(value, args);
+                    if (value && args) value = self.replacePropertyWithPrefix(value, 'result', args); // backward compatibility TO DO: remove
+
+                    self.element({ path: param, value: value });
+                }
+            },
+            get: function (params) {
+                return self.element(params);
+            },
+            delete: function (params, args) {
+                var path = self.replaceProperties(params, args);
+                alert(path);
+                self.objToDelete = self.element({ path: path });
+                delete self.objToDelete;
+            },
+            add: function (params, args) {
+                for (var param in params) {
+                    var path = self.replaceProperties(param, args);
+                    var value = self.replaceProperties(params[param], args);
+                    if (value) {
+                        var obj = self.element({ path: path }) || '';
+                        obj += String(value);
+                        self.element({ path: path, value: obj });
+                    }
+                }
+            },
+            sum: function (params, args) {
+                console.log('%cdeprecated key "sum". Use set{x: "{x}+1"}', 'color:orange');
+                console.log(params);
+                console.log(args);
+                for (var param in params) {
+                    var path = self.replaceProperties(param, args);
+                    var value = self.replaceProperties(params[param], args);
+                    if (value) {
+                        var obj = self.element({ path: path }) || 0;
+                        obj += Number(value);
+                        self.element({ path: path, value: obj });
+                    }
+                }
+            },
+            sub: function (params, args) {
+                console.log('%cdeprecated key "sub". Use set{x: "{x}+1"}', 'color:orange');
+                console.log(params);
+                console.log(args);
+                for (var param in params) {
+                    var path = self.replaceProperties(param, args);
+                    var value = self.replaceProperties(params[param], args);
+                    if (value) {
+                        var obj = self.element({ path: path }) || 0;
+                        obj -= Number(value);
+                        self.element({ path: path, value: obj });
+                    }
+                }
+            },
+            push: function (params, args) {
+                for (var param in params) {
+                    var path = self.replaceProperties(param, args);
+                    var value = self.replaceProperties(params[param], args);
+                    if (value) {
+                        var obj = self.element({ path: path }) || [];
+                        obj.push(value);
+                        self.element({ path: path, value: obj });
+                    }
+                }
+            }
+        },
+
+        // DOM
+        text: function (params, container, args) { self.text(params, container, args); }, // TO DO: -> html
+        html: function (params, container, args) { self.html(params, container, args); },
+        attr: function (params, container, args) { self.attr(params, container, args); },
+        empty: function (params, container, args) { self.empty(params, args); },
+        delete: function (params, args) {
+            var path = self.replaceProperties(params, args);
+
+            var obj = self.element({ path: path });
+            self.log(JSON.stringify(obj));
+            self.element({ path: path, delete: true });
+            // NOTE: obj = self.element non prende l'oggetto effettivo. quindi element deve contenere tutte le funzioni
+            //self.element({path: path, delete: true});
+            self.log(obj);
+        },
+        add: function (params, container, args) {
+            for (var param in params) {
+                var path = self.replaceProperties(param, args);
+                var value = self.replaceProperties(params[param], args);
+                /* self.log('value');
+                self.log(value); */
+                if (value) {
+                    var obj = self.element({ path: path }) || '';
+                    obj += String(value);
+                    self.element({ path: path, value: obj });
+                }
+            }
+        },
+        sum: function (params, container, args) {
+            for (var param in params) {
+                var path = self.replaceProperties(param, args);
+                var value = self.replaceProperties(params[param], args);
+                if (value) {
+                    var obj = self.element({ path: path }) || 0;
+                    obj += Number(value);
+                    self.element({ path: path, value: obj });
+                }
+            }
+        },
+        sub: function (params, container, args) {
+            for (var param in params) {
+                var path = self.replaceProperties(param, args);
+                var value = self.replaceProperties(params[param], args);
+                if (value) {
+                    var obj = self.element({ path: path }) || 0;
+                    obj -= Number(value);
+                    self.element({ path: path, value: obj });
+                }
+            }
+        },
+        push: function (params, container, args) {
+            for (var param in params) {
+                var path = self.replaceProperties(param, args);
+                var value = self.replaceProperties(params[param], args);
+                if (value) {
+                    var obj = self.element({ path: path }) || [];
+                    obj.push(value);
+                    self.element({ path: path, value: obj });
+                    self.log('push obj');
+                    self.log(obj);
+                }
+            }
+        },
+
+        // should go in utils.json
+        calendar: function (params, container, args) { self.calendar(params, args); }, // to check
+        array: function (params, container, args) { self.array(params, args); },
+        replace: function (params, container, args) { self.replace(params, args); },
+        shuffle: function (array) {
+            let currentIndex = array.length, randomIndex;
+            // While there remain elements to shuffle.
+            while (currentIndex != 0) {
+                // Pick a remaining element.
+                randomIndex = Math.floor(Math.random() * currentIndex);
+                currentIndex--;
+                // And swap it with the current element.
+                [array[currentIndex], array[randomIndex]] = [
+                    array[randomIndex], array[currentIndex]
+                ];
+            }
+            return array;
+        },
+
+        // should go in ui.json (or ux) module
+        alert: function (params, container, args) { self.alert(params, args); }, // change in swal2
+        offcanvas: function (params, container, args) { self.offcanvas(params, args); }, // bootstrap / obsolete
+
+        //in: function (params, container, args) {self.in(params, container, args)},  // bootstrap TO DO: replace in code with ui:in
+        out: function (params, container, args) { self.out(params, container, args); }, // bootstrap TO DO: replace in code with ui:out
+        qrcode: function (params, container, args) { self.qrcode(params, container, args); }, // obsolete TO DO: replace in code with ui:qrcode
+        hide: function (params, container, args) { self.hide(params, container, args); }, // TO DO: replace in code with ui:hide
+        show: function (params, container, args) { self.show(params, container, args); }, // TO DO: replace in code with ui:show
+        toggle: function (params, container, args) { self.toggle(params, container, args); }, // TO DO: replace in code with ui:toggle
+        sortablejs: function (params, container, args) { self.sortablejs(params, args); }, // TO DO: replace in code with ui:sortable
+        lottie: function (params, container, args) { self.lottie(params, container, args); }, // TO DO: replace in code with ui:lottie
+        chart: function (params, container, args) {
+            var selector = self.selector(container);
+            var element = self.query(selector);
+            element.innerHTML = '<canvas width="100%" height="100%"></canvas>';
+            const ctx = element.querySelector('canvas');
+            const myChart = new Chart(ctx, self.replaceProperties(params));
+        },
+
+        animate: function (params, container, args) { self.animate(params, container, args); },
+        //editor: function (params, container, args) {self.editor(params, container, args)}, // quill
+        // window.dispatchEvent(new Event('resize')); // workaround known ACE bug
+        uiUpdate: function (params, container, args) { self.uiUpdate(params, args); },
+        swiper: {
+            data: {},
+            init: function (params, selector, args) {
+                //swiperConfig.on = {};
+                setTimeout(function () {
+                    // waits the plugin... TO DO: add this function to a promise
+                    console.log('swiper inited');
+                    console.log(selector || params.selector);
+                    console.log(params.options);
+                    var swiperConfig = params.options;
+                    self.methods.swiper.data[params.name] = new Swiper(self.selector(selector || params.selector), swiperConfig);
+                    console.log(self.methods.swiper.data[params.name]);
+                }, 1000);
+            }
+        },
+
+        // should go in browser.json module
+        //export: function (params, container, args) {self.export(params, container, args)}, -> browser
+        //console: function (params, container, args) {self.console(params, args)},  // obsolete, changed in log
+        link: function (params, container, args) { self.link(params, args); },
+        scroll: function (params, container, args) { self.scroll(params, args); },
+        reload: function (params, container, args) { self.reload(params, args); },
+        timer: function (params, container, args) { self.timer(params, args); },
+        setInterval: function (params, container, args) { self.setInterval(params, args); },
+        clearInterval: function (params, container, args) { self.clearInterval(params, args); },
+        setTimeout: function (params, container, args) { self.setTimeout(params, args); },
+        clearTimeout: function (params, container, args) { self.clearTimeout(params, args); },
+        local: {
+            set: function (params) {
+                for (var param in params) {
+                    var value = params[param];
+                    if (value) value = self.replaceProperties(value);
+                    if (typeof value == 'object') value = JSON.stringify(value);
+                    localStorage.setItem(param, value);
+                }
+            },
+            get: function (key) {
+                var localValue = localStorage.getItem(key);
+                if (localValue && self.isJsonString(localValue))
+                    localValue = JSON.parse(localValue);
+                return localValue;
+            },
+            remove: function (key) {
+                localStorage.removeItem(key);
+            },
+            clear: function () {
+                localStorage.clear();
+            }
+        },
+        storage: {
+            _storage: new WeakMap(),
+            set: function (element, key, obj) {
+                if (!self.methods.storage._storage.has(element)) {
+                    self.methods.storage._storage.set(element, new Map());
+                }
+                self.methods.storage._storage.get(element).set(key, obj);
+            },
+            get: function (element, key) {
+                return self.methods.storage._storage.get(element).get(key);
+            },
+            has: function (element, key) {
+                return self.methods.storage._storage.has(element) && self.methods.storage._storage.get(element).has(key);
+            },
+            remove: function (element, key) {
+                var ret = self.methods.storage._storage.get(element).delete(key);
+                if (!self.methods.storage._storage.get(element).size === 0) {
+                    self.methods.storage._storage.delete(element);
+                }
+                return ret;
+            }
+        },
+
+        choose: function (params, container, args) { self.choose(params, container, args); },
+        remove: function (params, container, args) { self.remove(params, container, args); },
+        part: function (params, container, args) { self.part(params, container, args); },
+        blocks: function (params, container, args) { self.part(params, container, args); }, // obsolete
+        block: function (params, container, args) { self.part(params, container, args); },
+        ace: function (params, container, args) { self.ace(params, container, args); },
+        code: function (params, container, args) { self.code(params, container, args); },
+
+        // should go in firebase.json module
+        database: function (params, container, args) { self.database(params, args); }, // obsolete (check) 
+        firebase: function (params, container, args) { self.firebase(params, args); },
+
+        firebaseEvent: {
+            action: function (newObj) {
+                /* self.logdbRef('firebaseEvent.action');
+                self.log('newObj');
+                self.log(newObj); */
+                /* var path = newObj.path;
+                delete newObj.path;
+                var pathString = 'self.json.var.db.' + self.replaceAll(path, '/', '.');
+                self.log('pathString:'+pathString);
+                var dbObj = self.docElement(pathString);
+                dbObj = newObj; // update local db */
+                var path = newObj.path;
+                delete newObj.path;
+                //alert(path);
+                document.querySelectorAll('[data-firebase="' + path + '"]').forEach(function (element, index) {
+                    //$('[data-firebase="'+path+'"]').each(function (index) {
+                    // var element = this;
+                    var pathString = 'self.json.var.db.' + self.replaceAll(element.getAttribute('data-firebase'), '/', '.'); // data('firebase')
+                    var dbObj = self.docElement(pathString);
+
+                    var firebaseValue = newObj[element.getAttribute('data-value')]; // TODO: not works for nested nodes
+
+                    //var template = element.getAttribute('data-template');
+                    var template = self.dataStorage.get(element, 'data-template');
+
+                    //if ($(element).is('ul')) {
+                    if (element.tagName == 'UL') { // se $(this) è un ul
+
+                        //var dbObj = self.docElement(pathString);
+                        // se il percorso ha più nodi e il dato non è presente nel db locale,
+                        // va creato un oggetto vuoto per ogni nodo 
+                        //var context = element.getAttribute('data-firebase');
+                        //self.var.db[context] = newObj; // update local db
+                        var liTemplate = template.li || template.template; // template.li retro-compatibility
+
+
+
+
+
+
+
+                        /* self.log('liTemplate');
+                        self.log(liTemplate);
+                        self.log('newObj');
+                        self.log(newObj); */
+                        //$(container).empty();
+                        element.innerHTML = '';
+
+                        var items = newObj;
+                        for (itemKey in items) {
+                            var item = items[itemKey];
+                            item.key = itemKey;
+
+                            /* if (params.li.class == "deviceItem d-flex flex-wrap align-items-center list-group-item list-group-item-action d-flex align-items-center justify-content-between") {
+                            alert(JSON.stringify(params.li));
+                        } */
+                            //if (dbPath == 'lessons')
+                            //prompt(JSON.stringify(liTemplate));
+                            // TO DO: replace with replaceProperty
+                            var dbParams = self.replaceItems(liTemplate, item, 'item') || '';
+
+                            // var dbParams = self.replaceProperties(liTemplate, undefined, item) || '';
+                            // -> TO DO container = self.elementToSelector(element);
+                            var container = element.getAttribute('data-selector');
+
+                            self.li(dbParams, { selector: container });
+                        }
+
+                        //} else if ( $(element).is('span') || $(element).is('p')) {
+                    } else if (element.tagName == 'SPAN' || element.tagName == 'P') {
+
+                        //$(element).text(firebaseValue);
+                        element.textContent = firebaseValue;
+
+                    } else if (element.tagName == 'SVG') {
+                        // TODO without JQUERY 
+                        //$(element).children('text').text(firebaseValue);
+                    } else { // se $(this) non è un ul
+
+                        //var dbObj = self.docElement(pathString);
+                        // se il percorso ha più nodi e il dato non è presente nel db locale,
+                        // va creato un oggetto vuoto per ogni nodo 
+                        //var context = element.getAttribute('data-firebase');
+                        //self.var.db[context] = newObj; // update local db
+                        if (template.blocks || template.html) {
+                            var blocksTemplate = template.html || template.blocks;
+
+                            //$(container).empty();
+                            element.innerHTML = '';
+
+                            var items = newObj;
+                            self.log('newObj');
+                            self.log(newObj);
+                            for (itemKey in items) {
+                                var item = items[itemKey];
+                                item.key = itemKey;
+                                var dbParams = self.replaceProperties(blocksTemplate, undefined, item) || '';
+                                /* self.log('container');
+                                self.log(container);
+                                self.log('dbParams');
+                                self.log(dbParams); */
+                                self.html(dbParams, { selector: container });
+                            }
+                        }
+
+                        if (template.init) self.do(template.init); //self.do(template.init);
+
+                    }
+
+
+                });
+            }
+        },
+
+        auth: {
+            init: function (params, container, args) {
+                self.log("auth init");
+                auth = firebase.auth();
+                auth.onAuthStateChanged(user => {
+                    self.json.var.user = user;
+                    if (!user) {
+                        // No user logged in
+                        self.log('authStateChanged: GUEST\n');
+                        // non bisognerebbe chiedere sempre di fare login 
+                    } else {
+                        // User logged in
+                        self.log('authStateChanged: USER\n');
+                        self.log('name: ' + self.user('displayName') + '\nemail: ' + user.email + '\nuid:' + user.uid);
+                        //self.log('email verificata');
+                        //self.log(self.userVerified()); 
+                    }
+                    /* self.log('params');
+                    self.log(params); */
+                    //self.do(params.onAuthStateChanged);
+                    self.do(params.onAuthStateChanged);
+
+                    //if (!firebaseInitialized) {
+                    // firebaseInitialized = true;
+                    //self.do(data);
+                    //}
+                });
+            },
+
+            sendEmailVerification: function (params, container, args) {
+                self.sendEmailVerification(params);
+            },
+
+            login: function (params, container, args) {
+                self.log('params.auth');
+                self.log(params.auth); // QUESTO E' {var:auth} MA SEMBRA NON RIMPIAZZARLO
+                self.log(args); // QUI MI RIPORTA LA PWD, ma perché ultimo args
+                var fba = self.replaceProperties(params.auth, args);
+                self.log('fba');
+                self.log(fba);
+                var fbAuth = self.cloneObject(fba);
+                self.log('fbAuth');
+                self.log(fbAuth);
+                if (params.success) fbAuth.success = params.success;
+                if (params.error) fbAuth.error = params.error;
+                self.firebaseLogin(fbAuth, params.success, params.error);
+            },
+
+            register: function (params, container, args) {
+                //var fbAuth = self.replaceTags({text: params.auth, args: args});
+                //var fbAuth = self.replaceResult(params.auth, args);
+                var fbAuth = self.replaceProperties(params.auth, args);
+                fbAuth.success = params.success;
+                fbAuth.error = params.error;
+                //alert(JSON.stringify(fbAuth))
+                self.firebaseRegister(fbAuth, params.success, params.error);
+            },
+
+            updateProfile: function (params, container, args) {
+                //params.profile = self.replaceTags({text: params.profile, args: args});
+                //params.profile = self.replaceResult(params.profile, args);
+                params.profile = self.replaceProperties(params.profile, args);
+                self.firebaseUpdateProfile(params.profile, params.success, params.error);
+            },
+
+            passwordReset: function (params, container, args) {
+                //params.email = self.replaceTags({text: params.email, args: args});
+                //params.email = self.replaceResult(params.email, args);
+                params.email = self.replaceProperties(params.email, args);
+                self.firebasePasswordReset(params.email, params.success, params.error);
+            },
+
+            logout: function (params, container, args) {
+                self.firebaseLogout(params);
+            }
+        },
+
+        // should go in mobile.json module
+        thunkable: function (params, container, args) { self.thunkable(params, args); },
+
+        // should go in 3d.json module
+        modelViewer: {
+            events: {},
+            on: function (params) {
+                let container = self.selector(params.selector || params.container);
+                let element = self.query(container);
+                self.log('modelViewer on');
+                self.log('container');
+                self.log(container);
+                self.log('element');
+                self.log(element);
+                if (element) {
+                    self.methods.modelViewer.events[container] = {}; // use self.element
+
+
+                    //let events = ['load', 'preload'];
+                    //for (var event in events) {
+                    var event = 'load';
+                    if (params[event]) {
+                        //self.element({root: 'self.methods.modelViewer.events', path: container+'.'+event, value: params[event]})
+                        self.methods.modelViewer.events[container][event] = params[event];
+                        self.log('modelViewer element');
+                        self.log(element);
+                        element.addEventListener(event, (e) => {
+                            self.log('modelViewer event');
+                            self.log(e);
+                            let container = e.path[0].getAttribute('data-selector');
+                            self.log(container);
+                            //self.do(self.methods.modelViewer.events[container][e.type]);
+                            self.do(self.methods.modelViewer.events[container][e.type]);
+                        });
+                    }
+                }
+            },
+            set: function (params) {
+                let element = self.query(self.selector(params.selector || params.container));
+                if (element) {
+                    if (params.color) {
+                        let color = params.color.split(',').map(numberString => parseFloat(numberString));
+                        self.log('Changing color to: ', color);
+                        const [material] = element.model.materials;
+                        material.pbrMetallicRoughness.setBaseColorFactor(color);
+                    }
+                    if (params.exposure) element.exposure = params.exposure;
+                    if (params.shadow) element.shadowIntensity = params.shadow;
+                    if (params.orientation) element.orientation = params.orientation;
+
+                }
+            }
+        }
+    };
+
+
+    this.googleSignInPopup = function () {
+        self.log('googleSignInPopup');
+        var provider = new firebase.auth.GoogleAuthProvider();
+
+        firebase.auth().useDeviceLanguage(); // lingua del dispositivo
+
+        firebase.auth()
+            .signInWithPopup(provider)
+            .then((result) => {
+                // @type {firebase.auth.OAuthCredential} 
+                var credential = result.credential;
+                // This gives you a Google Access Token. You can use it to access the Google API.
+                var token = credential.accessToken;
+                // The signed-in user info.
+                var user = result.user;
+                window.location.reload();
+                // ...
+            }).catch((error) => {
+                // Handle Errors here.
+                var errorCode = error.code;
+                var errorMessage = error.message;
+                // The email of the user's account used.
+                var email = error.email;
+                // The firebase.auth.AuthCredential type that was used.
+                var credential = error.credential;
+            });
+    };
+
+
+    /* this.googleSignInPopup = function () {
+        // [START auth_google_signin_popup]
+        self.log('googleSignInPopup');
+        var provider = new firebase.auth.GoogleAuthProvider();
+        //provider.addScope('https://www.googleapis.com/auth/contacts.readonly'); //check security
+        //provider.addScope('https://www.googleapis.com/auth/calendar');
+        //var languageApp = jsonic.var.language || 'en';
+        //firebase.auth().languageCode = 'it';//languageApp;
+        //self.log(provider);
+        //return;
+        firebase.auth()
+            .signInWithPopup(provider)
+            .then((result) => {
+                // @type {firebase.auth.OAuthCredential}
+                var credential = result.credential;
+                // This gives you a Google Access Token. You can use it to access the Google API.
+                var token = credential.accessToken;
+                // The signed-in user info.
+                var user = result.user;
+                //######### result ########//
+                self.log("credential");
+                self.log(credential);
+                self.log("token");
+                self.log(token);
+                self.log("user");
+                self.log(user);
+                window.location.reload();
+                // ...
+            }).catch((error) => {
+                // Handle Errors here.
+                var errorCode = error.code;
+                self.log('errorCode');
+                self.log(errorCode);
+                var errorMessage = error.message;
+                self.log('errorMessage');
+                self.log(errorMessage);
+                // The email of the user's account used.
+                var email = error.email;
+                self.log('email');
+                self.log(email);
+                // The firebase.auth.AuthCredential type that was used.
+                var credential = error.credential;
+                self.log('credential');
+                self.log(credential);
+                // ...
+            });
+        // [END auth_google_signin_popup]
+    } */
+    /*     this.auth = function (params, args) {
+            self.log('auth');
+            self.log(params);
+            if (params.do == 'init') {
+                auth = firebase.auth();
+                auth.onAuthStateChanged(user => {
+                    self.json.var.user = user;
+                    if (!user) {
+                        // No user logged in
+                        self.log('authStateChanged: GUEST\n');
+                        // non bisognerebbe chiedere sempre di fare login
+                    } else {
+                        // User logged in
+                        self.log('authStateChanged: USER\n');
+                        self.log('name: '+self.user('displayName') + '\nemail: '+user.email + '\nuid:'+ user.uid);
+                        //self.log('email verificata');
+                        //self.log(self.userVerified());
+                    }
+    
+                    //self.log('params.onAuthStateChanged');
+                    //self.log(params.onAuthStateChanged);
+    
+                    self.do(params.onAuthStateChanged);
+    
+                    //if (!firebaseInitialized) {
+                    // firebaseInitialized = true;
+                    //self.do(data);
+                    //}
+                });
+            } else if (params.do == 'sendEmailVerification') {
+    
+                self.sendEmailVerification(params);
+    
+            } else if (params.do == 'login') {
+    
+                self.log('params.auth');
+                self.log(params.auth);
+                var fba = self.replaceProperties(params.auth, args);
+                self.log('fba');
+                self.log(fba);
+                var fbAuth = self.cloneObject(fba);
+                self.log('fbAuth');
+                self.log(fbAuth);
+                if (params.success) fbAuth.success = params.success;
+                if (params.error) fbAuth.error = params.error;
+                self.firebaseLogin(fbAuth, params.success, params.error);
+    
+            } else if (params.do == 'register') {
+    
+                //var fbAuth = self.replaceTags({text: params.auth, args: args});
+                //var fbAuth = self.replaceResult(params.auth, args);
+                var fbAuth = self.replaceProperties(params.auth, args);
+    
+                fbAuth.success = params.success;
+                fbAuth.error = params.error;
+                //alert(JSON.stringify(fbAuth))
+                self.firebaseRegister(fbAuth, params.success, params.error);
+                
+            } else if (params.do == 'updateProfile') {
+    
+                //params.profile = self.replaceTags({text: params.profile, args: args});
+                //params.profile = self.replaceResult(params.profile, args);
+                params.profile = self.replaceProperties(params.profile, args);
+                self.firebaseUpdateProfile(params.profile, params.success, params.error);
+    
+            } else if (params.do == 'passwordReset') {
+    
+                //params.email = self.replaceTags({text: params.email, args: args});
+                //params.email = self.replaceResult(params.email, args);
+                params.email = self.replaceProperties(params.email, args);
+                self.firebasePasswordReset(params.email, params.success, params.error);
+    
+            } else if (params.do == 'logout') {
+    
+                self.firebaseLogout(params);
+            }
+                // else
+                //self.database(params, args);
+                
+        }
+        */
+    /*     this.db = function (params, args) {
+            if (typeof params == 'string')
+                return self.db(params, args);
+            else
+                self.firebase(params, args);
+        } */
+    this.console = function (params, args) {
+
+        //value = self.replaceProperties(params);
+        //console.log('JSONIC: '+value, 'color:pink');
+        if (typeof params.log == 'string' && params.color) {
+            var color = params.color || 'white';
+            console.log('%c' + self.replaceProperties(params.log), 'color:' + color);
+        } else {
+            console.log(self.replaceProperties(params.log || params));
+        }
+    };
+
+    this.module = function (params, args) {
+        if (typeof params == 'string') {
+            var nameReplaced = self.replaceProperties(params, args);
+            return self.element({ root: self.modules, path: nameReplaced });
+        } else {
+            if (params.name) {
+                if (params.value) {
+                    var name = self.replaceProperties(params.name, args);
+                    //var value = self.actionResult(params.value, args);
+                    var value = self.replaceProperties(value, args);
+                    self.log('module');
+                    self.log(name);
+                    self.log('value');
+                    self.log(value);
+                    self.log(value.app.html.div.div[0].text.lang.en);
+                    self.modules[name] = value;
+                } else if (params.url) {
+                    self.addModule(params); // TO DO: return?
+                }
+            }
+        }
+    };
+
+    this.db = function (params, args) {
+        self.log('db');
+        if (typeof params == 'string') {
+            var paramsReplaced = self.replaceProperties(params, args);
+            self.log('paramsReplaced');
+            self.log(paramsReplaced);
+            self.log(self.var('db.' + paramsReplaced, args));
+            //var varValue = self.docElement('self.json.var.db.'+name);
+            return self.var('db.' + paramsReplaced, args); // to do: change with self.element({path: 'db.'+paramsReplaced}})
+
+
+
+
+
+
+
+
+
+            /*
+            // questa versione non funzionava. vuol dire che this.var ha un errore nel caso di oggetto
+            return self.var({
+                name: 'db.'+paramsReplaced
+            }, args);
+
+            */
+        } /*  else {
+            return self.actionResult(params, args);
+        } */
+
+
+    };
+
+    this.firebase = function (params, args) {
+        if (params.initializeApp) {
+            var firebaseConfig = self.replaceProperties(params.initializeApp);
+            firebase.initializeApp(firebaseConfig);
+        } else {
+            self.database(params, args);
+        }
+    };
+
+    this.database = function (params, args) {
+        //console.log('database');
+
+        if (params.do == 'init') {
+            database = firebase.database();
+            self.log('database');
+            self.log(database);
+        } else {
+            if (database) {
+
+                if (typeof params == 'string') {
+
+                    return self.db(params, args); // local db
+
+                } else {
+
+                    if (params) {
+                        if (params.path) {
+                            params.path = self.path(params.path, args);
+                        }
+                        /*  console.log('params.path');
+                            console.log(params.path); */
+                        /* if (params.value)
+                            params.value = params.value; */ //self.value({string: params.value});
+                        if (params.value) {
+
+                            /* self.log("params.value pre replace");
+                            self.log(params.value); */
+                            //params.value = self.replaceTags({text: params.value, args: args});
+                            //params.value = self.replaceResult(params.value, args);
+                            //params.value = self.replaceProperties(params.value, args);
+                            //params.value = self.actionResult(params.value, args);
+                            params.value = self.replaceProperties(params.value, args);
+
+                            self.log("params.value post replace");
+                            self.log(params.value);
+                        }
+
+
+                        /* self.log('params to FIREBASE');
+                        self.log(params); */
+                        // params.value = "${var.newDevice}"
+                        //var newDevice = `${params.value}`;
+                        //var newDevice = `${var.newDevice}`;
+                        if (params.do == 'init') {
+                        } else if (params.do == 'increase') {
+
+                            self.firebaseIncrease(params);
+
+                        } else if (params.do == 'get') {
+
+                            self.firebaseGet(params.path, function (result) {
+                                if (result.success) {
+                                    if (result.data) {
+                                        self.log('firebase get SUCCESS');
+                                        self.log(params.success);
+                                        if (params.on && params.on.success) self.do(params.on.success, undefined, result);
+                                        //if (params.on && params.on.success) self.do(params.on.success, result);
+                                    } else {
+                                        self.log('firebase get no result.data ERROR');
+                                        //if (params.on && params.on.error) self.do(params.on.error);
+                                        if (params.on && params.on.error) self.do(params.on.error);
+                                    }
+                                } else {
+                                    self.log('firebase get ERROR');
+                                    //if (params.on && params.on.error) self.do(params.on.error, result);
+                                    if (params.on && params.on.error) self.do(params.on.error, undefined, result);
+                                    // alert errore di connessione. alert riprova
+                                }
+                            });
+                        } else if (params.do == 'new' && params.value) {
+                            var newKey = self.getKey(params.path);
+                            self.firebaseSet(params.path + '/' + newKey, params.value, function (result) {
+                                if (result.success) {
+                                    self.log('firebase set SUCCESS');
+                                    if (params.on && params.on.success) self.do(params.on.success, undefined, result);
+                                    //if (params.on && params.on.success) self.do(params.on.success, result);
+                                } else {
+                                    self.log('firebase set ERROR');
+                                    if (params.on && params.on.error) self.do(params.on.error, undefined, result);
+                                    //if (params.on && params.on.error) self.do(params.on.error, result);
+                                    // alert errore di connessione. alert riprova
+                                }
+                            });
+                        } else if (params.do == 'remove' && params.path) {
+                            self.firebaseRemove(params.path, function (result) {
+                                if (result.success) {
+                                    self.log('firebase set SUCCESS');
+                                    //if (params.on && params.on.success) self.do(params.on.success, result);
+                                    if (params.on && params.on.success) self.do(params.on.success, undefined, result);
+                                } else {
+                                    self.log('firebase set ERROR');
+                                    if (params.on && params.on.error) self.do(params.on.error, undefined, result);
+                                    //if (params.on && params.on.success) self.do(params.on.success, result);
+                                    // alert errore di connessione. alert riprova
+                                }
+                            });
+                        } else if (params.do == 'addListener') {
+                            self.firebaseAddListener(params);
+                        } else if (params.do == 'removeListener') {
+                            self.firebaseRemoveListener(params);
+                        } else if (params.do == 'update') {
+                            if (params.value) { // 'set' is the default action with 'value' param
+                                self.firebaseUpdate(params.path, params.value, function (result) {
+                                    if (result.success) {
+                                        self.log('firebase update SUCCESS');
+                                        if (params.on && params.on.success) self.do(params.on.success, undefined, result);
+                                        //if (params.on && params.on.success) self.do(params.on.success, result);
+                                    } else {
+                                        self.log('firebase update ERROR');
+                                        if (params.on && params.on.error) self.do(params.on.error, undefined, result);
+                                        //if (params.on && params.on.error) self.do(params.on.error, result);
+                                        // alert errore di connessione. alert riprova
+                                    }
+                                });
+                            } else {
+                                self.log('data update requires value param');
+                            }
+                        } else if (params.do == 'push') {
+                            if (params.value) { // 'set' is the default action with 'value' param
+                                self.firebasePush(params.path, params.value, function (result) {
+                                    if (result.success) {
+                                        self.log('firebase push SUCCESS');
+                                        if (params.on && params.on.success) self.do(params.on.success, undefined, result);
+                                        //if (params.on && params.on.success) self.do(params.on.success,result);
+                                    } else {
+                                        self.log('firebase push ERROR');
+                                        if (params.on && params.on.error) self.do(params.on.error, undefined, result);
+                                        //if (params.on && params.on.error) self.do(params.on.error, result);
+                                        // alert errore di connessione. alert riprova
+                                    }
+                                });
+                            } else {
+                                self.log('data push requires value param');
+                            }
+                        } else {
+                            if (params.value) { // 'set' is the default action with 'value' param
+                                self.firebaseSet(params.path, params.value, function (result) {
+                                    if (result.success) {
+                                        self.log('firebase set SUCCESS');
+                                        if (params.on && params.on.success) self.do(params.on.success, undefined, result);
+                                        //if (params.on && params.on.success) self.do(params.on.success,result);
+                                    } else {
+                                        self.log('firebase set ERROR');
+                                        if (params.on && params.on.error) self.do(params.on.error, undefined, result);
+                                        //if (params.on && params.on.error) self.do(params.on.error, result);
+                                        // alert errore di connessione. alert riprova
+                                    }
+                                });
+                            }
+                        }
+
+
+                    }
+                }
+            } else {
+                self.log('"database" function needs to be initialised');
+            }
+        }
+    };
+
+    this.ajax = function (params, selectorParams, args) {
+        /* self.log('ajax');
+        // TO DO: selectorParams
+        self.log('ajax');
+        self.log('params');
+        self.log(params);
+        self.log('args');
+        self.log(args);  */
+        if (params.url) {
+            //var url = self.compile(params.url, args);
+            var url = self.replaceProperties(params.url, args);
+            var data;
+            if (params.data)
+                data = JSON.stringify(self.replaceProperties(params.data, args));
+            //data = JSON.stringify(self.compile(params.data, args));
+            /* self.log('data');
+            self.log(data); */
+            var type = params.type || 'POST';
+            var request = new XMLHttpRequest();
+            request.open(type, url, true);
+            //request.setRequestHeader("Accept", "application/json");
+            //request.setRequestHeader('Content-Type', 'application/json');
+            /* request.onreadystatechange = function () {
+                if (r.readyState != 4 || r.status != 200) return;
+                alert("Success: " + r.responseText);
+            } */
+            request.onload = function () {
+                self.log('onload');
+                self.log(this);
+                if (this.status >= 200 && this.status < 400) {
+                    // Success!
+                    var result = {};
+
+                    //try {
+                    var response = this.response;
+                    response = response.replace(/(\\\")/g, '&quot;');
+                    try {
+                        response = decodeURI(response);
+                    } catch (error) {
+                        /* console.log('response');
+                        console.log(response); */
+                        console.log('decodeURI error');
+                        console.log(error);
+                    }
+                    result.response = self.parse(response);
+                    result.status = this.status;
+                    result.header = this.getAllResponseHeaders().split('\r\n').reduce((resultHeader, current) => {
+                        let [name, value] = current.split(': ');
+                        resultHeader[name] = value;
+                        return resultHeader;
+                    }, {});
+                    //} catch (e) {
+                    //}
+                    self.log('result');
+                    self.log(result);
+                    if (params.success)
+                        self.do(params.success, undefined, result);
+                    //self.do(params.success, result);
+                    //self.do(self.replaceProperty(params.success, 'result', result), result);
+                } else {
+                    // We reached our target server, but it returned an error
+                    if (params.error)
+                        self.do(params.error, undefined, 'Server error');
+                    //self.do(params.error, 'Server error');
+                }
+            };
+            request.onerror = function (error) {
+                // There was a connection error of some sort
+                self.log('error');
+                self.log(error);
+                self.log('this');
+                self.log(this);
+                if (params.error)
+                    self.do(params.error, undefined, 'Server unavailable');
+                //self.do(params.error, 'Server unavailable');
+            };
+            //request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
+            if (data)
+                request.send(data);
+
+            else
+                request.send();
+        } else {
+            self.log('ajax method requires url parameter');
+        }
+
+
+        /*  $.ajax({
+            url: paramsReplaced.url,
+            type: params.type || 'post',
+            //dataType: 'json', // questo dovrebbe evitare JSON.parse
+            //dataType: 'text', // verificare se necessario
+            data: paramsReplaced.data || {},
+            success: function (result) {
+                self.log('ajax');
+                self.log('result');
+                self.log(result);
+                self.do(params.success, result);
+                //self.do(data); // in .params dovrebbe andare il resto
+            },
+            error: function (error) {
+                var errorText = error.responseText || error;
+                self.do(params.error, errorText);
+                //self.do(data); // in .params dovrebbe andare il resto
+            }
+        }); */
+    };
+
+    /* View in fullscreen */
+    this.openFullscreen = function (id) {
+        var element = document.getElementById(id);
+
+        if (screenfull.isEnabled) {
+            screenfull.request(element);
+        }
+
+    };
+
+    /*    this.addListener = function(params) {
+            var selector = self.selector(params);
+            if (selector)
+                $(selector).on(params.event, self.do(params.action));
+                //event.stopPropagation();
+        } */
+    /* Close fullscreen */
+    this.closeFullscreen = function () {
+
+        //document.exitFullscreen();
+        screenfull.off('change'); // callback
+    };
+
+    /*         this.list = function (params, selectorParams) {
+    
+            var container = (selectorParams) ? self.selector(selectorParams) : params.container;
+            var selector = self.selector(self.extend({}, params, selectorParams));
+    
+            if (selector) {
+    
+                if (params.list) params.items = params.list; // retro-compatibilità
+    
+                if (params.listAction) $(selector).data('listAction', params.listAction);
+                if (params.listClass) $(selector).data('listClass', params.listClass); // ul
+    
+                if (params.items) {
+    
+                    $(selector).empty();
+                    var index = 0;
+    
+                    //params.items = self.replaceTags({text:params.items, args:selectorParams});
+                    //params.items = self.replaceResult(params.items, selectorParams);
+                    params.items = self.replaceProperties(params.items, selectorParams);
+                    
+                    for (var itemKey in params.items) {
+                        // da rimuovere id="item'+itemKey+'" href=""
+                        //self.log('PARAMETRI');
+                        //self.log(itemKey);
+                        //self.log(params.items);
+    
+    
+                        $(selector).append('<li data-index="'+itemKey+'" class="list-group-item"></li>');
+                        var item = params.items[itemKey];
+                        //var itemSelector = selector + ' li:eq(' + index + ')';
+                        var itemSelector = selector + ' li:eq(' + itemKey + ')';
+    
+                        // Item action
+                        var itemAction;
+                        if (item.action)
+                            itemAction = item.action;
+                        else if (params.action)
+                            itemAction = params.action;
+                        else if ($(selector).data('listAction'))
+                            itemAction = $(selector).data('listAction');
+                        item.action = itemAction;
+    
+                        if (item.action) {
+                            $(itemSelector).addClass('list-group-item-action');
+                            $(itemSelector).css('cursor', 'pointer');
+                        }
+                        if (item.color) $(itemSelector).css('color', item.color);
+                        if (item.background) $(itemSelector).css('background', item.background);
+    
+                        //$(itemSelector).append('<div></div>');
+    
+                        var itemFields = params.items[itemKey].fields || params.items[itemKey];  // retro-compatibilità
+                        //self.log('itemFields');
+                        //self.log(itemFields);
+        
+                        for (var itemField in itemFields) {
+                            var field = itemFields[itemField];
+                            //self.log(field);
+                            if (itemField == 'icons') {
+    
+                                self.icons(field, {container: itemSelector});
+    
+    
+                            } else if ((itemField != 'params') && (itemField != 'action')) { // retro-compatibilità
+                                    $(itemSelector).append('<span data-field="'+itemField+'">'+self.text(itemFields[itemField])+'</span>');
+                            }
+                        }
+    
+                        // action
+                        if (item.action) {
+                            $(itemSelector).data('onData', item);
+                            $(itemSelector).on(self.touch, function (event) {
+                                event.stopPropagation();
+                                self.onEvent(this, event);
+                            });
+                        }
+                        // events
+                        if (item.on) self.on(item.on, {container: selector});
+    
+                        index++;
+                    }
+                } else if (params.append) {
+                    // aggiunge una riga alla fine (calcolare path)
+                } else if (params.prepend) {
+                    // aggiunge una riga all'inizio (calcolare path)
+                    // sballa tutti i dati presenti in var.functions
+                    // sarebbe meglio mem in data value tutto il json
+                    // azione
+                }
+    
+                // List classes
+    
+                //if (params.id) $(selector).attr('id', params.id);
+                var listClass = $(selector).data('listClass');
+    
+    
+                if (listClass) {
+                    var ulClass = listClass.ul || '';
+                    var liClass = listClass.li || '';
+        
+                    $(selector).addClass(ulClass);
+                    $(selector + ' > li').addClass(liClass);
+    
+                    var index = 0;
+                    for (var field in listClass.fields) {
+                        var fieldClass = listClass.fields[field] || '';
+                        $(selector + ' > li > span[data-field='+field+']').addClass(fieldClass);
+                        index++;
+                    }
+                }
+            }
+        } */
+    this.scroll = function (params) {
+        // https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
+        // {id, class, value}
+        var selector = self.selector(params.selector || params.container);
+        var block = document.querySelector(selector);
+        //var offset = elem.dataset.offset ? parseInt(elem.dataset.offset) : 0;
+        if (block) {
+            var bodyOffset = document.body.getBoundingClientRect().top;
+            window.scrollTo({
+                top: block.getBoundingClientRect().top - bodyOffset, // + offset,
+                behavior: 'smooth'
+            });
+        } else {
+            self.log('scroll to unknown element: ' + selector);
+        }
+    };
+
+    /*         this.scroll = function (params) {
+    //                var selector = self.selector(params);
+            //var obj = $(selector).get(0);
+    
+            var selector = "g."+params.class+".myLabelStyle."+params.value;
+    
+    
+            //var parent = $(selector).parent().get(0);
+    
+            //document.querySelector(selector).scrollIntoView();
+            //self.resizeEvent(); // bug workaround
+            //$(selector).parent().scrollTop($(selector).position().top);
+                $(selector).parent().animate({
+                //scrollTop: $(selector).position().top
+                //scrollTop: $(selector).position().top,
+                transform: 'translate(0,-'+$(selector).position().top+'), scale(1)'
+            });
+        }
+    */
+    //------------------------
+    /* this.do = function (data, args) {
+        if (data) {
+            if (typeof data == 'string' && self.json.actions[data]) {
+                self.do(self.json.actions[data], args);
+            } else {
+                if (!data.index) data.index = 0;
+                if (!data.tasks) {
+                    if (Array.isArray(data)) {
+
+                        if (data.index < data.length) {
+                            self.do(data[data.index]);
+                            data.index = data.index +1;
+                            self.do(data);
+                        } else {
+                            delete data.index;
+                        }
+                    } else {
+                        self.do(data);
+                    }
+                //} else if (data.tasks.length > 0) {
+                } else {
+                    if (data.index < data.tasks.length) {
+                        var currentTask = data.tasks[data.index];
+                        //var currentTask = data.tasks.shift();
+                        if (currentTask.params == undefined) {currentTask.params = {}}
+                        if (data.params == undefined) {data.params = {}}
+                        if (currentTask.if == undefined) {currentTask.if = true}
+                        var taskParams = currentTask.params; // parametri specifici del task
+                        taskParams.params = data.params;
+                        taskParams.index = data.index+1;
+                        //for (var param in data.params) {taskParams[param] = data.params[param]; } // merge
+                        taskParams.tasks = data.tasks;
+                        var taskIf = (typeof currentTask.if == "function") ? currentTask.if() : currentTask.if;
+
+                        if (taskIf) {
+                            if (currentTask.delay !== undefined) {
+                                setTimeout(function () {
+                                    self.do(currentTask.task, taskParams);
+
+                                }, currentTask.delay);
+                            } else if (currentTask.interval !== undefined) {
+                                self.createTaskInterval(currentTask);
+                            } else {
+                                self.do(currentTask.task,taskParams);
+
+                            }
+                        } else {
+                            self.do(taskParams);
+                        }
+                    }
+                }
+            }
+        }
+    } */
+    /*     this.playTaskInterval = function (taskFunction) {
+            self.log('playTaskInterval');
+            var taskName = taskFunction.name;
+            if (tasksIntervals[taskName]) {
+                clearInterval(tasksIntervals[taskName].id);
+                tasksIntervals[taskName].id = setInterval(function () {
+                    tasksIntervals[taskName].task(tasksIntervals[taskName].params);
+                }, tasksIntervals[taskName].interval);
+            } else {
+                self.log('taskName: '+taskName);
+            }
+        }
+    
+        this.stopTaskInterval = function (taskFunction) {
+            self.log('stopTaskInterval');
+            var taskName = taskFunction.name;
+            if (tasksIntervals[taskFunction.name]) {
+                clearInterval(tasksIntervals[taskFunction.name].id);
+            } else {
+                self.log('taskName: '+taskName);
+            }
+        }
+    
+        this.createTaskInterval = function (myTask) {
+            tasksIntervals[myTask.task.name] = {};
+            tasksIntervals[myTask.task.name].task = myTask.task;
+            tasksIntervals[myTask.task.name].params = myTask.params;
+            tasksIntervals[myTask.task.name].interval = myTask.interval;
+            self.playTaskInterval(myTask.task.name);
+        }
+    
+        this.addTimedTask = function (data) {
+            self.log('addTimedTask');
+            if (data.frequence && data.task) {
+                if (!data.active) {data.active = true;}
+                if (!timedTasks[data.frequence]) {timedTasks[data.frequence] = {}}
+                timedTasks[data.frequence][data.task] = {active:data.active, params:{}};
+                if (data.params) {
+                    timedTasks[data.frequence][id].params = data.params;
+                }
+            }
+        }
+    
+        this.removeTimedTask  = function (data) {
+            self.log('removeTimedTask');
+            if (data.frequence && data.task) {
+                delete timedTasks[data.frequence][data.task];
+            }
+        }
+    
+        this.doTimedTask = function (data) {
+            self.log('doTimedTask');
+            self.log(data);
+            for (var task in timedTasks[data.frequence]) {
+                var taskObj = timedTasks[data.frequence][task];
+                if (taskObj.active) {
+                    self.do(task, taskObj.params);
+                }
+            }
+        } */
+    //------------------------
+    // CSS METHODS
+    //------------------------
+    /*        // SELETTORI
+        var previewPanel = '.appPanel[data-value="pnlPreview"]';
+        var toolsPanel = '.appPanel[data-value="pnlTools"]';
+    
+        var stagePanel = '.framePanel[data-value="pnlStage"]';
+        var devicePanel = '.framePanel[data-value="pnlDevice"]';
+    
+        this.closePanel = function(value) {
+            self.log(value);
+    
+            switch (value) {
+                case 'closePanelTools':
+                    $(toolsPanel).fadeOut();
+                    $(previewPanel).fadeIn();
+                case 'closePanelFrame':
+                    $(devicePanel).fadeOut();
+                    $(stagePanel).fadeIn();
+            }
+            }
+    */
+    //------------------------
+    // CSS METHODS
+    //------------------------
+    /*     this.cssProp = function (propPar) {
+            var cssObj = {transform: ''};
+            if ((propPar.x) && (propPar.y)) {cssObj.transform += ' translate('+propPar.x+'px,'+propPar.y+'px)'; }
+            if (propPar.rotateY) {cssObj.transform += ' rotateY('+propPar.rotateY+'deg)'; }
+            if (propPar.rotateX) {cssObj.transform += ' rotateX('+propPar.rotateX+'deg)'; }
+            if (propPar.scale) {cssObj.transform += ' scale('+propPar.scale+','+propPar.scale+')'; }
+            if (propPar.deg) {cssObj.transform += ' rotate('+propPar.deg+'deg)'; }
+            if (propPar.opacity) {cssObj.opacity = propPar.opacity;}
+            return cssObj;
+        } */
+    /*     this.getCSS = function (data) {
+            var $inspector = $("<div>").css('display', 'none').addClass(data.class);
+            $("body").append($inspector); // add to DOM, in order to read the CSS property
+            try {
+                var props = [];
+                for (i=0; i<data.properties.length; i++) {props.push($inspector.css(data.properties[i]))}
+                return props;
+            } finally {
+                $inspector.remove(); // and remove from DOM
+            }
+        }
+    
+            this.getTransform = function (object) {
+            var transformArray = $(object).css('transform').match(/(-?[0-9\.]+)/g);
+            var objTransform = {x:0,y:0};
+            objTransform.x = transformArray[4];
+            objTransform.y = transformArray[5];
+            return objTransform;
+        } */
+    var getClickPosition = function (e) {
+        var parentPosition = getPosition(e.currentTarget);
+        var xPosition = e.clientX - parentPosition.x;
+        var yPosition = e.clientY - parentPosition.y;
+    };
+
+    function getPosition(element) {
+        var xPosition = 0;
+        var yPosition = 0;
+
+        while (element) {
+            xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
+            yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
+            element = element.offsetParent;
+        }
+        return { x: xPosition, y: yPosition };
+    }
+
+    /*     var cssTransform = function (namePar, fromPar, toPar) {
+            var sdDefineFrom = {transform: ''};
+            var sdDefineTo = {transform: ''};
+            if ((fromPar.x) && (fromPar.y)) {sdDefineFrom.transform += ' translate('+fromPar.x+'px,'+fromPar.y+'px)'; }
+            if ((toPar.x) && (toPar.y)) {sdDefineTo.transform += ' translate('+toPar.x+'px,'+toPar.y+'px)'; }
+            if (fromPar.scale) {sdDefineFrom.transform += ' scale('+fromPar.scale+','+fromPar.scale+')'; }
+            if (toPar.scale) {sdDefineTo.transform += ' scale('+toPar.scale+','+toPar.scale+')'; }
+            if (fromPar.deg !== undefined) {sdDefineFrom.transform += ' rotate('+fromPar.deg+'deg)'; }
+            if (toPar.deg !== undefined) {sdDefineTo.transform += ' rotate('+toPar.deg+'deg)';}
+            if (fromPar.opacity) {sdDefineFrom.transform += ' opacity'; sdDefineFrom.opacity = String(fromPar.opacity); }
+            if (toPar.opacity) {sdDefineTo.transform += ' opacity'; sdDefineTo.opacity = String(toPar.opacity); }
+            $.keyframe.define({name: namePar, from: sdDefineFrom, to: sdDefineTo});
+        }
+    
+        this.defineTransform = function (data) {
+            cssTransform(data.name, data.from, data.to);
+            cssTransform(data.name+'Reverse', data.to, data.from);
+            animations[data.name] = {name: data.name, duration:data.duration, timingFunction: data.ease, fillMode:'both'};
+        } */
+    /*     this.defineAnimations = function (data) {
+            self.log('defineAnimations');
+    
+            for (var name in self.json.styles.animations) {
+                self.json.styles.animations[name].name = name;
+                self.defineTransform(self.json.styles.animations[name]);
+            }
+            
+            self.do(data);
+        }
+            */
+    /* this.styleToAnimation = function (obj, style) {
+        // inutilizzata
+        $(obj).addClass('resetAnimation'); // Disable transitions
+        $(obj).css(style);
+        $(obj).eq(0).offsetHeight; // Trigger a reflow, flushing the CSS changes
+        $(obj).removeClass('resetAnimation'); // Re-enable transitions
+        // https://stackoverflow.com/questions/11131875/what-is-the-cleanest-way-to-disable-css-transition-effects-temporarily
+    } */
+    //------------------------
+    // DIPENDENZE TWEENMAX
+    //------------------------
+    /*  this.getImage = function (data) {
+            // corrisponde al metodo fixo.loadImage
+            // ma senza la dipendenza con fixo.iconUrl
+            // che aggiunge il dominio ai nomi di file senza url
+            // se si vuole utilizzare al posto di fixo.loadImage
+            // data.url = fixo.iconUrl(data.url); va fatta in fixo.js
+            // fixo.loadImage è usato sicuramente in hom.js / spo.js
+            // e in fixo.items.js
+            
+            if (data.style)
+                $(data.object).css(data.style);
+            //if (data.animation == undefined) {TweenMax.to(data.object,0,{opacity:0,display:'block'});}
+            if (data.animation !== undefined)
+                $(data.object).css({opacity:0, display:'none'});
+            if (TweenMax) TweenMax.set(data.object,{backgroundImage:'url('+data.url+')'});
+            $(data.object).waitForImages({
+                each: function(loaded, count, success) {if(!success) {log('error loadImage id:'+this.id);}},
+                eachError: function() {
+                    // http://stackoverflow.com/questions/6137934/how-should-i-handle-a-missing-image-in-my-plugin
+                    self.log('error:'+urlPar);
+                },
+                finished: function () {
+                    if (data.animation !== undefined) {
+                        self.animation({object:data.object, animation:data.animation});
+                    } else {
+                        if (TweenMax) TweenMax.to(data.object,1,{autoAlpha:1,display:'block',float:'left'});
+                        else $(data.object).css({display: 'block', opacity: '1'});
+                    }
+                    if (data.move != undefined) {
+                        self.move({object:data.object, move:data.move, target:data.target});
+                    }
+                    if (data.action) {self.setAction({object:data.object, action:data.action});} // obsolete
+                    if (data.on) {self.on(data.on, {container: data.object});}
+                    if (data.onComplete) {self.do(data.onComplete)};
+                },
+                waitForAll: true
+            });
+            //$(objPar).waitForImages.progress(function(loaded, count, success) {alert(loaded + ' of ' + count + ' images has ' + (success ? 'loaded' : 'failed to load') +  '.');});
+        } */
+    /*     this.setAction = function (data) {
+            $(data.object).off().on(self.touch, function () {
+                var.touchTime = self.getTimestamp();
+                self.do(data.action, data.value);
+            });
+        } */
+    this.animate = function (params, selectorParams, args) {
+        // We create a Promise and return it
+        new Promise((resolve, reject) => {
+            /* self.log('animate');
+            self.log('params');
+            self.log(params);
+
+            self.log('selectorParams');
+            self.log(selectorParams); */
+
+            /* selectorParams.container = (params.container) ? params.container : selectorParams.container;
+            selectorParams.id = (params.id) ? params.id : selectorParams.id ;
+            selectorParams.class = (params.class) ? params.class : selectorParams.class;
+            selectorParams.value = (params.value) ? params.value : selectorParams.value; */
+            const prefix = 'animate__';
+            //var selector = self.selector(self.extend({}, params, selectorParams), undefined, true); // selectAll
+            let selector = self.selector(params.selector || params.container, undefined, true) || self.selector(selectorParams, undefined, true);
+            //var selector = self.selector(params.selector || params.container, selectorParams, true); // selectAll
+            /* self.log('animate');
+            self.log('selector');
+            self.log(selector); */
+            var transition = params.transition || params;
+            transition = self.replaceProperties(transition, args);
+
+            const duration = params.duration || '0.5s';
+
+            const animationName = `${prefix}${transition}`;
+
+            if (!selector) {
+                self.log('animate function without selector');
+                self.log(params);
+                self.log(selectorParams);
+            } else {
+
+                var elements = self.queryAll(selector);
+                /* console.log('elements');
+                console.log(elements); */
+                //var elements = document.querySelectorAll(selector);
+                if (elements)
+                    elements.forEach(function (element, index) {
+                        if (element) {
+                            //element.classList.add(`${prefix}animated`, animationName);
+                            //console.log(element.classList);
+                            element.classList.add('animate__animated', animationName);
+                            element.style.setProperty('--animate-duration', duration);
+                        } else {
+                            console.log('element');
+                            console.log(element);
+                        }
+                    });
+
+
+                if (params.on && params.on.start)
+                    self.do(params.on.start, { selector: selector });
+                //self.do(params.on.start, undefined, {selector: selector});
+                if (params.style) self.css(params, selectorParams); // TO DO: deprecated / to be removed
+
+
+
+
+
+                //if (params.infinite)
+                //    node.style.setProperty('--animate-infinite', 'infinite');
+                // When the animation ends, we clean the classes and resolve the Promise
+                function handleAnimationEnd(event) {
+                    if (params.on && params.on.end) {
+                        self.do(params.on.end, { selector: selector });
+                        //self.do(params.on.end, undefined, {selector: selector});
+                        /* self.log('handleAnimationEnd');
+                        self.log('params.on.end');
+                        self.log(params.on.end); */
+                    }
+
+
+                    event.stopPropagation();
+
+                    if (elements)
+                        elements.forEach(function (element, index) {
+                            if (element)
+                                element.classList.remove('animate__animated', animationName);
+                        });
+                    resolve('Animation ended');
+                }
+
+                if (elements)
+                    elements.forEach(function (element, index) {
+                        if (element)
+                            element.addEventListener('animationend', handleAnimationEnd, { once: true });
+                    });
+            }
+        });
+    };
+
+    /*
+        this.animation = function (data) { // deprecated
+            
+            if (data.animation != undefined) {
+                if (data.animation == 'show') {
+                    $(data.object).css({'display':'block', opacity:1});
+                } else if (data.animation == 'hide') {
+                    $(data.object).css({'display':'none'});
+                } else {
+                    //if (data.autoDisplay == undefined) {data.autoDisplay = true};
+                    //var animationObject = self.cloneObject(animations[data.animation]);
+                    var animationObject = jQuery.extend({}, animations[data.animation]);
+                    //if (data.autoDisplay)
+                    //    if (data.animation == 'fadeIn') $(data.object).css({'display':'block'});
+                    if (data.reverse) {animationObject.name += 'Reverse'}
+                    if (data.duration !== undefined) {animationObject.duration = data.duration}
+    
+                    animationObject.complete = function () {
+                        if (data.autoDisplay) {
+                            if ((data.animation == 'fadeOut') || (data.animation == 'hide')) {
+                                $('data.object').css({'display':'none'});
+                            }
+                        }
+                        if (data.onComplete !== undefined) {
+                            self.do(data.onComplete);
+                        }
+                    }
+                    self.log('animationObject.name');
+                    self.log(animationObject.name);
+                    self.log('animationObject');
+                    self.log(animationObject);
+    
+                    // playKeyframe va aggiornato con
+                    // animate({from, to, ease, type, stiffness, dumping, mass, velocity, duration})
+                    // https://popmotion.io/#quick-start-animation-animate-keyframes-options
+                    //var obj = popmotion.styler($(data.object));
+                    //popmotion.animate(animationObject).start(obj.set); // $(data.object).css
+                    
+                    $(data.object).playKeyframe(animationObject);
+                }
+            } else {
+                $(data.object).resetKeyframe();
+                $(data.object).css({'opacity':1,'display':'block'});
+                self.log('ANIMATION UNDEFINED');
+                self.log(data);
+            }
+        }
+    
+        this.move = function (data) { // deprecated
+            var targetPos = {x:0,y:0};
+            if (data.target != 'center') { targetPos = {x:384,y:384}; }
+            else if (data.target !== undefined) {targetPos = self.getTransform(data.target);}
+            else {self.log(data);}
+            if (data.move == 'toTarget') {
+                    TweenMax.to(data.object, self.TweenMaxDuration(data.duration), { x: targetPos.x, y: targetPos.y});
+            } else if (data.move == 'fromTarget') {
+                TweenMax.from(this, self.TweenMaxDuration(data.duration), { x: targetPos.x, y: targetPos.y});
+            }
+            if (data.animation !== undefined) {
+                self.animation({object:data.object, animation:data.animation});
+            }
+        }
+    
+        this.TweenMaxDuration = function (duration) {
+            if (duration != undefined) {return Number(duration)/1000} else {return 0.667;}
+        }
+        */
+    // CSS CLASSES
+    this.addClassRule = function (ruleName, ruleParams) {
+        //self.log('addClassRule');
+        var ruleProperties = '{';
+        for (var property in ruleParams) {
+            if (typeof ruleParams[property] == 'object') {
+                self.addClassRule(ruleName + ' ' + property, ruleParams[property]);
+            } else {
+                ruleProperties += property + ':' + ruleParams[property] + ';';
+            }
+        }
+        ruleProperties += '}';
+        self.styleObj.sheet.insertRule(ruleName + ' ' + ruleProperties);
+    };
+
+    this.addApplyRule = function (ruleName, ruleParams) {
+        // Use @apply to inline any existing utility classes into your own custom CSS
+        // https://tailwindcss.com/docs/functions-and-directives#apply
+        self.styleObj.sheet.insertRule(ruleName + ' {@apply ' + ruleParams + '}');
+    };
+
+    this.findPlugin = function (name) {
+        if (self.json.plugins) {
+            for (var plugin of self.json.plugins) {
+                if (plugin.name == name) return plugin;
+            }
+        } else {
+            return false;
+        }
+    };
+
+    this.defineCss = function (cssObj) {
+        self.log('defineCss');
+
+        self.styleObj = document.createElement("style");
+
+        document.head.appendChild(self.styleObj);
+        self.styleObj.appendChild(document.createTextNode(""));
+
+        /*  self.styleObj.sheet.insertRule('@tailwind base;');
+            self.styleObj.sheet.insertRule('@tailwind components;');
+            self.styleObj.sheet.insertRule('@tailwind utilities;'); */
+        // shortcuts (must be improved / can't be extended)
+        /* if (self.json.shortcuts && self.json.shortcuts.class)
+            shortcuts = self.json.shortcuts.class; */
+        if (cssObj) {
+            if (Array.isArray(cssObj)) {
+                for (var cssElement of cssObj) {
+                    //console.log(cssElement);
+                    for (var elementName in cssElement) {
+                        //console.log(elementName);
+                        let valueWithData = self.replaceProperties(cssElement[elementName]);
+                        self.addClassRule(elementName, valueWithData);
+                    }
+                }
+            } else {
+                for (var elementName in cssObj) {
+                    let valueWithData = self.replaceProperties(cssObj[elementName]);
+                    self.addClassRule(elementName, valueWithData);
+                }
+            }
+        }
+
+        if (self.pluginsLoaded.tailwindcss) {
+            var plugin = self.findPlugin('tailwindcss');
+            //var config = (plugin) ? plugin.config : {preflight: false};
+            var config = (self.json.setup.config.tailwindcss) ? self.json.setup.config.tailwindcss : { preflight: false };
+            //if (self.json.style.theme) setup.theme = self.json.style.theme;
+            //loadPlugin(undefined, 'tailwind-config', undefined, undefined, JSON.stringify(config)) // version 2.2.0
+            if (tailwind)
+                tailwind.config = config;
+
+            else
+                console.log('tailwind object is undefined');
+        }
+
+        /*         // OBSOLETE
+                if (self.pluginsLoaded.twind && window.twind) {
+                    var plugin = self.findPlugin('twind');
+                    var config = (plugin) ? plugin.config : {preflight: false, mode:'silent'};
+                    //if (self.json.setup.target) setup.target = self.query(self.json.setup.target);
+                    //if (self.json.style.theme) setup.theme = self.json.style.theme;
+        
+                    window.twind.setup(config);
+        
+        
+                } */
+        /* if (self.pluginsLoaded.windicss && window.windicssRuntimeOptions) {
+
+            var config = self.json.style.windi || {
+                // enabled preflight
+                preflight: false,
+                // scan the entire dom tree to infer the classnames on page loaded
+                extractInitial: false,
+                // generate mock classes for browser to do the auto-completeion
+                mockClasses: false,
+                // the windi config you are used to put in `windi.setup.js`
+                setup: {},
+                theme: {extend: {}}
+            };
+            if (self.json.style.theme) setup.theme.extend = self.json.style.theme;
+            window.windicssRuntimeOptions = config;
+        } */
+        /* if (self.pluginsLoaded.unocss) {
+
+            var config = self.json.style.unocss || {  // -> self.json.plugins[].setup
+                rules: [
+                    // custom rules...
+                ],
+                presets: [
+                    // custom presets...
+                ],
+                // ...
+                };
+                if (self.json.style.theme) setup.theme = self.json.style.theme;
+                if (self.json.shortcuts) setup.shortcuts = self.json.shortcuts;
+
+                window.__unocss = config;
+                //alert(JSON.stringify(config));
+        } */
+        //self.do(data);
+    };
+
+    /*    this.createLoader = function (data) {
+            // !--<div class="preloader-wrapper"><div class="preloader"><img alt="Loading..."/></div></div>-->
+    
+            if (self.json.loader) $('.preloader img').attr('src', self.json.loader);
+            self.do(data);
+        } */
+    /*     this.preloadIcons = function (data) {
+            self.log('preloadIcons');
+            // to do: check for duplicated ids
+    
+            if (self.json.icons) {
+                if (!data.icons && self.json.icons) data.icons = self.cloneObject(self.json.icons);
+                if (data.icons) {
+                    var iconSet = Object.keys(data.icons)[0];
+                    var icons = data.icons[iconSet];
+                    delete data.icons[iconSet];
+                    if (icons.preload) {
+    
+    
+                        var ajax = new XMLHttpRequest();
+                        ajax.open("GET", icons.src, true);
+                        ajax.onload = function(e) {
+    
+                            if (this.status >= 200 && this.status < 400) {
+    
+                                self.log('Icon set loaded ' + iconSet);
+    
+                                var result = this.response; // responseText
+                                //self.log(result);
+                                var div = document.createElement("div");
+                                //var iconsHtml = new XMLSerializer().serializeToString(result);
+                                var iconsHtml = result;
+                                iconsHtml = self.replaceAll(iconsHtml, 'id="', 'id="' + iconSet + '_');
+                                div.innerHTML = iconsHtml;
+                                div.setAttribute("style", "display: none");
+                                //div.setAttribute("aria-hidden", "true");
+                                //document.getElementbyId('preloadIcons').appendChild(element);
+                                document.body.insertBefore(div, null);
+                                if (Object.keys(data.icons).length > 0)
+                                    self.preloadIcons(data);
+                                else
+                                    self.do(data);
+                            }
+                        }
+                        ajax.send();
+    
+                    } else {
+                        if (Object.keys(data.icons).length > 0)
+                                self.preloadIcons(data);
+                            else
+                                self.do(data);
+                    }
+                } else
+                    self.do(data);
+            } else {
+                self.do(data);
+            }
+        } */
+    /* this.initApp = function (data) {
+        self.log('initApp');
+
+        self.defineCss();
+
+        window.addEventListener('resize', self.resizeEvent);
+
+        if (self.json) { // can be self.json.init
+            //if (self.json.on.init)
+            if (self.json.on)
+                self.on(self.json.on);
+            
+            //else
+            //    self.log('no on init functions');
+        }
+        //self.do(data);
+    }
+    */
+    /* this.createUI = function (data) {
+        jsonic.do({
+            tasks:[
+                {task: self.firebaseInit},
+                {
+                    task: self.firebaseVerifyUser,
+                    params: {
+                        code: self.params.oobCode
+                    }
+                },
+                {task: self.getDevices, if: jsonic.userIn},
+                {task: self.defineCss},
+                {task: self.defineAnimations},   // animazioni css predefinite
+                {task: self.createHeader},
+                {task: self.createMenu, params: {
+                    container: '#menu',
+                    id: data.params.mode || 'guest'
+                }},
+                {task: jsonic.createPages}
+            ]
+        });
+    } */
+    /* this.openPageFromUrl = function(data){
+        jsonic.log('openPageFromUrl');
+        jsonic.log('self.params');
+        jsonic.log(self.params);
+
+        var pageId = '';
+
+        //if (localStorage.getItem('scanning')) {
+        //    self.hashopenTask({id:localStorage.getItem('scanningFile')});
+        //} else {
+
+        //self.disableFileIcons();
+
+        //var noDevices = (jsonic.userIn() && (!var.db.devices || Object.keys(var.db.devices).length == 0));
+        //if (noDevices && !self.params.d && !self.params.m) {
+        //    jsonic.gotoPage('devices');
+        //} else {
+
+        if (window.location.hash && window.location.hash !== '') {
+            //pageId = window.location.hash.substr(1);
+            self.hash();
+        } else {
+            if (self.params.p) // retro-compatibilità
+                pageId = self.params.p;
+            else
+                pageId = self.homePage();
+                self.gotoPage(pageId);
+        }
+
+        //}
+            self.do(data);
+    }
+*/
+    /*
+    // Load a script from given `url`
+    var loadPlugin = function(url) {
+        return new Promise(function(resolve, reject) {
+            const script = document.createElement('script');
+            script.src = url;
+
+            script.addEventListener('load', function() {
+                // The script is loaded completely
+                resolve(true);
+            });
+
+            document.head.appendChild(script);
+        });
+    };
+
+    // Perform all promises in the order
+    var waterfall = function(promises) {
+        return promises.reduce(
+            function(p, c) {
+                // Waiting for `p` completed
+                return p.then(function() {
+                    // and then `c`
+                    return c().then(function(result) {
+                        return true;
+                    });
+                });
+            },
+            // The initial value passed to the reduce method
+            Promise.resolve([])
+        );
+    };
+
+    // Load an array of scripts in order
+    var loadScriptsInOrder = function(arrayOfJs) {
+        self.log('loadScriptsInOrder');
+        self.log(arrayOfJs);
+        const promises = arrayOfJs.map(function(url) {
+            self.log(url);
+            return loadScript(url);
+        });
+        return waterfall(promises);
+    };
+    */
+    this.hash = function (path, args) {
+        self.log('hash');
+        var path = self.replaceProperties(path, args);
+        self.log(path);
+        window.location.hash = path;
+    };
+
+    this.page = function (path, args) {
+        self.log('page');
+        var path = self.replaceProperties(path, args);
+        self.log(path);
+        if (path.startsWith('#'))
+            window.location.hash = path;
+
+        else
+            window.location.href = path;
+        //window.location.hash = path;
+    };
+
+    this.hashChangeEvent = function () {
+        self.log('hashChangeEvent');
+        self.log(window.location.hash);
+
+
+        /* if (window.location.hash && window.location.hash !== '') {
+            var hashParams = window.location.hash.substr(1).split('/');
+            self.gotoPage(hashParams[0], hashParams[1]);
+        } else {
+            //pageId = self.homePage();
+            if (self.json.setup && self.json.setup.wordpress && self.json.setup.wordpress.slug)
+                self.gotoPage(self.json.setup.wordpress.slug);
+            else
+                self.gotoPage(self.homePage());
+        }
+
+        if (json && json.app && json.app.on && json.app.on.page) { // page event
+            self.do(json.app.on.page);
+        }
+        
+        if (json && json.actions && json.actions.init) { // obsolete
+            self.do(json.actions.init);
+        } */
+    };
+
+    /*     this.addPageListeners = function (data) {
+            self.log('addPageListeners');
+            
+            // Resize event
+            window.addEventListener('resize', self.resizeEvent);
+    
+            // Location hash (url) event
+            window.addEventListener('hashchange', self.hashChangeEvent);
+            //$(window).on('hashchange', self.hashChangeEvent);
+    
+            self.hashChangeEvent();
+    
+            self.do(data);
+    
+        } */
+    /* // testing
+    let findValues = function(obj, key, found) {
+        for (let localKey in obj) {
+            if (obj.hasOwnProperty(localKey)) {
+            let val = obj[localKey];
+            //self.log(localKey)
+            if (localKey === key) {
+                found.add(val)
+            } else {
+                if (typeof val === 'object') {
+                findValues(val, key, found)
+                }
+            }
+            }
+        }
+    }
+    function uniqueValue(obj, key, value) {
+        let found = new Set()
+        findValues(object, key, found)
+        return found.size === 1 && found.has(value);
+    } */
+    this.lookup = function (obj, k) {
+        for (var key in obj) {
+            var value = obj[key];
+
+            if (k == key) {
+                return [k, value];
+            }
+
+            if (typeof (value) === "object" && !Array.isArray(value)) {
+                var y = lookup(value, k);
+                if (y && y[0] == k) return y;
+            }
+            if (Array.isArray(value)) {
+                // for..in doesn't work the way you want on arrays in some browsers
+                //
+                for (var i = 0; i < value.length; ++i) {
+                    var x = lookup(value[i], k);
+                    if (x && x[0] == k) return x;
+                }
+            }
+        }
+
+        return null;
+    };
+
+    this.findValues = function (obj, key) {
+        //return Boolean(JSON.stringify(obj).indexOf('"' + string + '":') >= 0)
+        let matrix = [...JSON.stringify(obj).matchAll(new RegExp('\"?' + key + '\"?\:\s*\"([^,\"]+)', 'gi'))];
+        var results = [];
+        for (var element of matrix)
+            results.push(element[1]);
+        return results;
+        //return Boolean(JSON.stringify(obj).match(new RegExp('\"?' + key + '\"?\:\s+\"' + value + '\"'))) // JSON5 compatible
+    };
+
+    // testing
+    function findKey(obj, key) {
+        for ([k, v] of Object.entries(obj)) {
+            if (k == key) return v;
+            if (typeof v === 'object' && v !== null) {
+                let found = findKey(v, key);
+                if (found) return found;
+            }
+        }
+    }
+
+
+    // lookup in json
+    this.keyInJson = function (obj, string) {
+        //return Boolean(JSON.stringify(obj).indexOf('"' + string + '":') >= 0)
+        return Boolean(JSON.stringify(obj).match(new RegExp('\"?' + string + '\"?\:'))); // JSON5 compatible
+    };
+
+    // lookup in json
+    this.valueInJson = function (obj, string) {
+        //return Boolean(JSON.stringify(obj).indexOf('"' + string + '":') >= 0)
+        return Boolean(JSON.stringify(obj).match(new RegExp('\"?' + string + '\"?'))); // JSON5 compatible
+    };
+
+    /* this.keyInFiles = function (string) {
+        var found = self.keyInJson(self.options, string); // in main app options: jsonic = jsonicApp(options)
+        for (fileName in self.modules) {
+            if (fileName !== 'resources' && self.keyInJson(self.modules[fileName], string))
+                found = true;
+        }
+        return found;
+    } */
+    /*     this.openPageFromUrl = function (data) {
+            self.log('openPageFromUrl');
+            self.hashChangeEvent();
+            self.do(data);
+        }; */
+    /*     this.addEventListeners = function (data) {
+            self.log('addEventListeners');
+    
+            // Resize event
+            window.addEventListener('resize', self.resizeEvent);
+    
+            // Location hash (url) event
+            window.addEventListener('hashchange', self.hashChangeEvent);
+            $(window).on('hashchange', self.hashChangeEvent);
+    
+            self.hashChangeEvent(); // add here on.hashchange
+    
+            // Fullscreen event
+            if (screenfull && screenfull.isEnabled) {
+                screenfull.on('change', () => {
+                    self.log('Am I fullscreen?', screenfull.isFullscreen ? 'Yes' : 'No');
+                    if (screenfull.isFullscreen) {
+                        var.fullscreen = true;
+                        if (var.onFullScreenOpen) self.do(var.onFullScreenOpen);
+                    } else {
+                        var.fullscreen = false;
+                        if (var.onFullScreenClose) self.do(var.onFullScreenClose);
+                    }
+                });
+            }
+    
+            if (json && json.app && json.app.on) {
+    
+                if (json.app.on.thunkable && json.app.on.thunkable.receiveMessage)
+                    window.receiveMessage(function (message) {
+                        //document.querySelector('#message').value = message;
+                        jsonic.functions(json.app.on.thunkable.receiveMessage, message, undefined);
+                    });
+                    
+                var container = json.app.container || 'body';
+                self.on(json.app.on, {container: container});
+                self.do(data);
+            } else {
+                self.do(data);
+            }
+        } */
+    /* this.loadIconset = function (data) {
+        self.log('loadIconset');
+
+
+        if (self.json.iconset) {
+            if (!self.pluginsLoaded['iconify']) {
+                let plugin = self.json.resources.pluginsFunctions['iconify'];
+                self.pluginsLoader([plugin], self.loadIconset, [data]);
+            } else {
+                var iconset;
+
+                if (!self.json.iconset[0])
+                    iconset = [self.json.iconset];
+                else
+                    iconset = self.json.iconset;
+
+                for (var index in iconset) {
+                    
+                    if (Iconify.addCollection(iconset[index]))
+                        self.log('added iconset '+ iconset[index].prefix);
+                    else
+                        self.log('can\t add iconset '+ iconset[index].prefix);
+                    //alert(x);
+                }
+                self.do(data);
+
+            }
+            
+        } else {
+            self.do(data);
+        }
+
+    } */
+    // Si potrebbe creare una nuova istanza di jsonicApp
+    this.start = function () {
+
+        self.log('start');
+
+        //if (params.onFullScreenOpen) var.onFullScreenOpen = params.onFullScreenOpen;
+        //if (params.onFullScreenClose) var.onFullScreenClose = params.onFullScreenClose;
+        // PWA
+        /* if ('serviceWorker' in navigator) {
+            // Register a service worker hosted at the root of the
+            // site using the default scope.
+            navigator.serviceWorker.register('/app/assets/pwa/sw.js').then(function(registration) {
+                self.log('Service worker registration succeeded:', registration);
+            }, function(error) {
+                self.log('Service worker registration failed:', error);
+            });
+        } else {
+            self.log('Service workers are not supported.');
+        } */
+        let deferredPrompt;
+
+        window.addEventListener('beforeinstallprompt', (e) => {
+            // Prevent Chrome 67 and earlier from automatically showing the prompt
+            e.preventDefault();
+            // Stash the event so it can be triggered later.
+            deferredPrompt = e;
+        });
+
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
+            self.json.setup.darkMode = e.matches ? "dark" : false;
+        });
+
+        // DEFINE ICONSET (iconify)
+        if (self.json.iconset) {
+            if (!self.pluginsLoaded['iconify']) {
+                let plugin = self.json.resources.pluginsFunctions['iconify'];
+                self.pluginsLoader([plugin], self.start);
+                return false;
+            } else {
+                var iconset;
+
+                if (!self.json.iconset[0])
+                    iconset = [self.json.iconset];
+
+                else
+                    iconset = self.json.iconset;
+
+                for (var index in iconset) {
+
+                    if (Iconify.addCollection(iconset[index]))
+                        self.log('added iconset ' + iconset[index].prefix);
+
+                    else
+                        self.log('can\t add iconset ' + iconset[index].prefix);
+                    //alert(x);
+                }
+
+            }
+
+        }
+
+        // DEFINE CSS
+        //self.defineCss(); // TO DO: only additional css (do it on load module success)
+        // ADD RESIZE LISTENER (for dynamic styles) TO DO: check it
+        window.addEventListener('resize', self.resizeEvent);
+
+        // PAGE
+        if (!self.json.setup.page) self.json.setup.page = {};
+        self.json.setup.page.hash = window.location.hash.substr(1);
+
+        // DO / ON
+        /* if (self.json) {
+            if (self.json.do)
+                self.do(self.json.do, undefined, self.json.container);
+
+            if (self.json.on)
+                self.on(self.json.on, self.json.container);
+        } */
+        var selector = self.json.selector || self.json.container;
+
+        /* if (self.json.do)
+            self.do(self.json.do, undefined, selector); */
+        // should go action/run
+        if (self.json.on)
+            self.on(self.json.on, selector);
+
+    };
+
+    this.extendJson = function (jsonBase, jsonExtension) {
+        // TO DO: should be renamed in extendApp (or executeModule) because extend self.json and add CSS style
+        if (jsonExtension.css) self.defineCss(jsonExtension.css);
+        if (jsonExtension.functions) self.extendFunctions(jsonExtension.functions);
+
+        for (var key in jsonExtension) {
+            // AGGIUNGERE ALL'ARRAY DELLE AZIONI ON.INIT...
+            if (key == 'on') {
+                for (var subKey in jsonExtension[key]) {
+                    if (typeof jsonExtension[key][subKey] !== 'string') {
+                        //jsonBase[key][subKey] = self.extend({}, jsonBase[key][subKey], jsonExtension[key][subKey]);
+                        if (!jsonBase[key][subKey]) jsonBase[key][subKey] = [];
+                        jsonBase[key][subKey].push(jsonExtension[key][subKey]);
+                    } else {
+                        jsonBase[key][subKey] = jsonExtension[key][subKey];
+                    }
+                }
+            } else if (key == 'parts' || key == 'shortcuts') { // combine subelements
+                for (var subKey in jsonExtension[key]) {
+                    if (typeof jsonExtension[key][subKey] !== 'string')
+                        jsonBase[key][subKey] = self.extend({}, jsonBase[key][subKey], jsonExtension[key][subKey]);
+
+                    else
+                        jsonBase[key][subKey] = jsonExtension[key][subKey];
+                }
+                /* } else if (key == 'css') {
+                    for (var subKey in jsonExtension[key]) {
+                        if (typeof jsonExtension[key][subKey] !== 'string')
+                            jsonBase[key][subKey] = self.extend({}, jsonBase[key][subKey], jsonExtension[key][subKey]);
+                        else
+                            jsonBase[key][subKey] = jsonExtension[key][subKey];
+                    } */
+                /* } else if (key == 'app') { // to do: obsolete
+                    for (var subKey in jsonExtension[key]) {
+                        if (typeof jsonExtension[key][subKey] !== 'string')
+                            jsonBase[key][subKey] = self.extend({}, jsonBase[key][subKey], jsonExtension[key][subKey]);
+                        else
+                            jsonBase[key][subKey] = jsonExtension[key][subKey];
+                    } */
+            } else if (key == 'iconset' || key == 'plugins') { // combine arrays
+                if (!jsonBase[key]) jsonBase[key] = [];
+                jsonBase[key] = jsonBase[key].concat(jsonExtension[key]);
+            } else {
+                if (key == 'css') {
+                } else {
+                    jsonBase[key] = self.extend({}, jsonBase[key], jsonExtension[key]);
+                }
+            }
+        }
+        return jsonBase;
+    };
+
+    this.loadModuleFromDb = function (data) {
+        self.log('loadModuleFromDb');
+        self.firebaseGet('jsonic', function (result) {
+            if (result.success) {
+                self.log('firebase get SUCCESS');
+                for (codeKey in result.data)
+                    if (result.data[codeKey].code)
+                        self.extendJson(json, result.data[codeKey].code);
+                //self.log('json');
+                //self.log(json);
+                //if (params.success) self.do(params.success,result.data);
+            } else {
+                self.log('firebase get ERROR');
+                //if (params.error) self.do(params.error, result.error);
+                // alert errore di connessione. alert riprova
+            }
+            self.do(data);
+            //self.do(data);
+        });
+    };
+
+    this.modules = {};
+    this.modulesLoading = {};
+
+    this.fileType = function (fileName) {
+        return /(?:\.([^.]+))?$/.exec(fileName)[1];
+    };
+
+    this.jsoncToJson = function (jsoncText) {
+        return jsoncText.replace(/\/\*[\s\S]*?\*\/|([^\\:]|^)\/\/.*$/gm, '$1').replace(/\r/, "\n").replace(/\n[\n]+/, "\n");
+        // https://stackoverflow.com/questions/244777/can-comments-be-used-in-json/24545329
+    };
+    //var json = jsoncToJson('https://fantacards.com/app/data.jsonc');
+    //console.log(json);
+    this.loadModule = function (mod) {
+        /* self.log('loadModule');
+        self.log(mod); */
+        // params: {files, onComplete}
+        // self.cloneObject(params.json) to avoid to remove from initial params
+        //if (typeof setup.modules == 'string') setup.modules = [setup.modules];
+        if (!self.modulesLoading[mod.name] && !self.modules[mod.name]) {
+            self.modulesLoading[mod.name] = true;
+
+            return new Promise(function (resolve, reject) {
+                //mod = self.replaceProperties(mod);
+                //self.log(mod);
+
+                const getAPIData = new XMLHttpRequest();
+                getAPIData.open("GET", mod.url);
+                getAPIData.onload = function () {
+                    self.modulesLoading[mod.name] = false;
+                    //console.log(getAPIData);
+                    let responseText = getAPIData.responseText;
+                    if (self.fileType(getAPIData.responseURL) == 'jsonc')
+                        responseText = self.jsoncToJson(responseText);
+                    // try
+                    const result = JSON.parse(responseText);
+                    // error self.log('Wrong JSON in module '+ mod.name);
+                    if (self.isJson(result)) {
+                        self.modules[mod.name] = result;
+                        self.extendJson(self.json, result);
+                        self.log('Loaded module ' + mod.name, 'grey');
+                    } else {
+                        self.log('Wrong JSON in module ' + mod.name, 'red');
+                    }
+                    resolve();
+                };
+                getAPIData.onerror = function () {
+                    self.modulesLoading[mod.name] = false;
+                };
+                getAPIData.send();
+            });
+
+        } else {
+            self.log('Module ' + mod.name + ' already loaded', 'orange');
+        }
+
+
+    };
+
+    /*   var loadPlugin = function (url) {
+            //self.log('loading ' + url);
+    
+            return new Promise(function(resolve, reject) {
+                var type = 'script';
+                if (url.endsWith('.css')) type = 'link';
+    
+                let obj = document.createElement(type);
+    
+                // obj.src = url;
+                obj.async = false;
+                obj.onload = function() {
+                    resolve(url);
+                };
+                obj.onerror = function() {
+                    self.log('error loading: '+url);
+                    reject(url);
+                };
+    
+                if (type === 'script') {
+                    if (url) obj.src = url;
+                    //if (code) obj.text = code;
+                    obj.location = document.body;
+                    document.body.appendChild(obj);
+                } else {
+                    obj.href = url;
+                    obj.rel = 'stylesheet';
+                    obj.type  = 'text/css';
+                    obj.location = document.head;
+                    document.head.appendChild(obj);
+                }
+    
+                //self.log('obj');
+                //self.log(obj);
+            });
+        }  */
+    var loadPlugin = function (params) {
+        //self.log('loading ' + url);
+
+        return new Promise(function (resolve, reject) {
+            var tag = 'script', type = 'text/javascript';
+            if (params.type == 'script') { tag = 'script'; type = 'text/javascript'; }
+            else if (params.type == 'module') { tag = 'script'; type = 'module'; }
+            else if (params.type == 'tailwind-config') { tag = 'script'; type = 'tailwind-config'; }
+            else if (params.type == 'link') { tag = 'link'; type = 'text/css'; }
+            else if (params.type == 'font') { tag = 'link'; type = undefined; }
+            //if (!tag)
+            //    tag = (url.endsWith('.js')) ? 'script' : 'link';
+            let obj = document.createElement(tag);
+            if (params.content)
+                obj.appendChild(document.createTextNode(params.content));
+
+            obj.async = false;
+            obj.onload = function () {
+                self.pluginsLoaded[params.name] = { version: "1.0.0" };
+                self.log('Loaded plugin ' + params.name, 'grey');
+                resolve(params.url);
+            };
+            obj.onerror = function () {
+                self.log('Error loading plugin ' + params.url, 'red');
+                reject(params.url);
+            };
+
+            if (tag === 'script') {
+                if (params.url) obj.src = params.url;
+                //if (code) obj.text = code;
+                obj.location = document.body;
+                obj.type = type || 'text/javascript';
+                /* if (type == 'tailwind-config') {
+                    self.log('obj');
+                    self.log(obj);
+                } */
+                document.body.appendChild(obj);
+            } else if (tag === 'link') {
+                obj.rel = params.rel || 'stylesheet';
+                obj.location = document.head;
+                if (params.url) obj.href = params.url;
+                if (type) obj.type = type;
+                if (params.as) obj.as = params.as;
+                document.head.appendChild(obj);
+            }
+        });
+    };
+
+
+    /*     var loadPlugin = function (url, tag, rel, as) {
+            //self.log('loading ' + url);
+    
+            //alert(url);
+    
+            return new Promise(function(resolve, reject) {
+                if (tag == 'js') tag = 'script';
+                if (tag == 'css') tag = 'link';
+                if (!tag)
+                    tag = (url.endsWith('.js')) ? 'script' : 'link';
+    
+                let obj = document.createElement(tag);
+    
+                obj.async = false;
+                obj.onload = function() {
+                    self.log('loaded plugin: '+url);
+                    resolve(url);
+                };
+                obj.onerror = function() {
+                    self.log('error loading: '+url);
+                    reject(url);
+                };
+    
+                if (tag === 'script') {
+                    if (url) obj.src = url;
+                    //if (code) obj.text = code;
+                    obj.location = document.body;
+                    document.body.appendChild(obj);
+                } else {
+                    obj.href = url;
+                    obj.rel = rel || 'stylesheet';
+                    if (obj.rel == 'stylesheet')
+                        obj.type = 'text/css';
+                    if (as)
+                        obj.as = as;
+                    obj.location = document.head;
+                    document.head.appendChild(obj);
+                }
+            });
+        }
+    */
+    this.uiLoaded = {};
+    this.pluginsLoaded = {};
+
+    //The Firebase Realtime Database lets you store and query user data, and makes it available between users in realtime
+    this.findUrl = function (array, url) {
+        for (var item of array) {
+            if (item.url == url)
+                return true;
+        }
+    };
+
+    /*     this.export = function (params) {
+            // {name, data}
+            if (params && params.name && params.data) {
+                let element = document.createElement('a');
+                element.style.display = 'none';
+                element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(JSON.stringify(params.data)));
+                element.setAttribute('download', params.name);
+                document.body.appendChild(element);
+                element.click();
+                document.body.removeChild(element);
+            } else {
+                self.log('"export" requires name and data attributes');
+            }
+        } */
+    /*     this.exportData = function (path) {
+            // data
+            const fileName = self.replaceAll(path, ' ', '.') + '.json';
+            const jsonData = self.element({path: path, root: params.root});
+            self.export({name: fileName, data: jsonData});
+        }
+            */
+    this.loadPlugins = function () {
+        //self.log('loadPlugins');
+        //var setup = json.setup;
+        // TEMPORAL API
+        // https://cdn.jsdelivr.net/npm/@cogitatio/tc39-temporal@0.0.12-alpha.2/index.js
+        // https://cdn.jsdelivr.net/npm/cogitatio-tc39-temporal@1.0.2/index.js
+        /* <!-- <script type="module">
+        import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.0.2/firebase-app.js'
+        
+        // If you enabled Analytics in your project, add the Firebase SDK for Google Analytics
+        import { analytics } from 'https://www.gstatic.com/firebasejs/9.0.2/firebase-analytics.js'
+        
+        // Add Firebase products that you want to use
+        import { auth } from 'https://www.gstatic.com/firebasejs/9.0.2/firebase-auth.js'
+        import { firestore } from 'https://www.gstatic.com/firebasejs/9.0.2/firebase-firestore.js'
+        </script> --> */
+        var filesToLoad = [];
+
+        // plugins
+        if (self.json.plugins) {
+            for (var index in self.json.plugins) {
+
+                var plugin = self.json.plugins[index];
+
+                //self.log('loading ' + plugin.name + '...');
+                var version = plugin.version || '';
+
+                if (!plugin.ondemand) { // V. >= 1.0.2
+
+                    if (plugin.url) { // directly loaded
+                        // plugin.name and version are needed?
+                        if (!self.findUrl(filesToLoad, plugin.url)) { // not included yet
+                            filesToLoad.push({ name: plugin.name, url: plugin.url, type: plugin.type });
+                        }
+
+                    } else { // from resources (TO DO: remove)
+
+                        var pluginsFiles = plugin.files || self.json.resources.pluginsFiles[plugin.name];
+
+                        // moved in loadPlugin =   ... onload
+                        /* self.pluginsLoaded[plugin.name] = {
+                            version: version
+                        }; */
+                        if (!Array.isArray(pluginsFiles))
+                            pluginsFiles = [pluginsFiles];
+
+                        for (item of pluginsFiles) {
+                            var url = self.replaceAll(item.url, '{version}', version);
+                            if (plugin.params) url += '?' + plugin.params;
+                            let pluginName = plugin.name || item.name;
+                            if (!url || !self.findUrl(filesToLoad, url)) // not included yet
+                                filesToLoad.push({ name: pluginName, url: url, type: item.type, content: item.content });
+                        }
+
+                    }
+                }
+            }
+        }
+
+        // ui
+        /* for (var index in config.ui) {
+
+            var configUI = config.ui[index];
+            
+            //self.log('loading ' + configUI.name + '...');
+
+            var version = configUI.version || '';
+            var uiFiles = self.json.resources.uiFiles[configUI.name];
+
+            if (!Array.isArray(uiFiles))
+                uiFiles = [uiFiles];
+
+            for (item of uiFiles) {
+                var url = self.replaceAll(item.url, '{version}', version);
+                if (!self.findUrl(filesToLoad, url)) // not included yet
+                    filesToLoad.push({url: url, type: item.type, content: item.content});
+            }
+        } */
+        // Auto load Google Fonts
+        // TO DO: comment
+        for (fontName of self.findValues(self.json, 'font-family')) {
+            if (self.json.resources.googleFonts.indexOf(fontName) >= 0) {
+                //alert(fontName);
+                fontName = self.replaceAll(fontName, ' ', '+');
+                //filesToLoad.push({type: 'font', url:'https://fonts.googleapis.com/css2?family='+fontName+'&display=swap', rel:'preload',  as:'font'});
+                filesToLoad.push({ type: 'link', url: 'https://fonts.googleapis.com/css2?family=' + fontName });
+                // +'&display=swap' // https://css-tricks.com/almanac/properties/f/font-display/
+            }
+        }
+
+        // Auto load plugins (firebase only)
+        /* if (config.plugins && config.plugins.autoload) {
+            self.log('plugins autoload');
+            //for (var index in self.json.resources.pluginsFunctions) {
+            var pluginFunctions =  self.json.resources.pluginsFirebase; // pluginFunctions
+            for (var index in self.json.resources.pluginsFirebase) {
+                //self.log(index + ':' + self.keyInFiles(index));
+                if (self.keyInFiles(index)) {
+                    if (pluginFunctions[index]) {
+
+                        var plugins = [];
+                        if (Array.isArray(pluginFunctions[index]))
+                            plugins = pluginFunctions[index];
+                        else
+                            plugins = [pluginFunctions[index]];
+
+                        for (plugin of plugins) {
+
+                            self.log('loading ' + plugin.name + '...');
+                            self.pluginsLoaded[plugin.name] = version;
+
+                            var version = plugin.version || '';
+                            var pluginsFiles = self.json.resources.pluginsFiles[plugin.name];
+
+                            if (!Array.isArray(pluginsFiles))
+                                pluginsFiles = [pluginsFiles];
+
+                            for (item of pluginsFiles) {
+                                var url = self.replaceAll(item.url, '{version}', version);
+                                if (!self.findUrl(filesToLoad, url)) // not included yet
+                                    filesToLoad.push({url: url, type: item.type, content: item.content});
+                            }
+                        }
+                    }
+                }
+            }
+        } */
+        // load multiple scripts in sequence
+        // https://bit.ly/3nT5Ky1
+        // one after another
+        // https://medium.com/@asimmittal/sequential-script-loading-in-javascript-a0b77ca9467c
+        // load multi js and css
+        // https://sphacks.io/load-multiple-js-scripts-dynamically-without-jquery/
+        // save all Promises as array
+        let promises = [];
+
+        //promises.push(loadPlugin("https://fonts.googleapis.com", 'link', 'preconnect'));
+        //promises.push(loadPlugin("https://fonts.gstatic.com", 'link', 'preconnect'));
+        filesToLoad.forEach(function (item) {
+            if (item.url)
+                promises.push(loadPlugin({ name: item.name, url: item.url, type: item.type, rel: item.rel, as: item.as, content: item.content }));
+
+            else
+                loadPlugin({ name: item.name, url: item.url, type: item.type, rel: item.rel, as: item.as, content: item.content });
+            //promises.push(loadPlugin(url));
+        });
+
+
+        //self.log(filesToLoad);
+        Promise.all(promises).then(function () {
+
+            self.start();
+
+        }).catch(function (script) {
+            self.log('Failed to load');
+            self.log(script);
+        });
+
+    };
+
+    this.modulesList = function (modulesObj) {
+        /*         self.log('modulesList');
+                self.log('modulesObj');
+                self.log(modulesObj);
+            */
+        var modulesList = [];
+        if (modulesObj) {
+            for (key in modulesObj) {
+                var mod = self.replaceProperties(modulesObj[key]);
+                modulesList = modulesList.concat(mod);
+            }
+        }
+        return self.replaceProperties(modulesObj);
+    };
+
+    this.loadModules = function () {
+        //self.log('loadModules');
+        if (self.json.setup.modules) {
+            var modules = self.replaceProperties(self.json.setup.modules); // replace {page:id}
+
+
+            /* self.log('modules');
+            self.log(modules); */
+            var promises = [];
+            modules.forEach(function (item) {
+                if (!self.modulesLoading[item.name] && !self.modules[item.name]) {
+                    promises.push(self.loadModule(item));
+                }
+            });
+
+            Promise.all(promises).then(function () {
+
+                self.loadPlugins();
+
+            }).catch(function (file) {
+                self.log('Failed to load');
+                self.log(file);
+            });
+
+        } else {
+            self.loadPlugins();
+        }
+
+    };
+
+    this.moduleExecuted = {};
+
+    this.addModule = function (params) {
+
+        if (!self.modules[params.name]) {
+
+            var promises = [];
+            //var ideModule = {name: 'ide', url: 'https://jsonic.io/app/modules/ide.json'};
+            promises.push(self.loadModule(params));
+
+            Promise.all(promises).then(function () {
+
+                if (!self.moduleExecuted[params.name]) {
+                    //self.log('all modules loaded');
+                    var module = self.modules[params.name];
+
+                    if (module.html) {
+                        self.moduleExecuted[params.name] = true;
+                        self.html(module.html);
+                        // TO DO: add also on, funcions ...
+                    }
+                }
+                if (params.success)
+                    self.do(params.success);
+                //self.do(params.success);
+            }).catch(function (file) {
+                self.log('Failed to load');
+                self.log(file);
+                if (params.error)
+                    self.do(params.error);
+                //self.do(params.error);
+            });
+        } else {
+            if (params.success)
+                self.do(params.success);
+            //self.do(params.success);
+        }
+    };
+
+    this.loadModuleGlobal = function () {
+        self.log('loadModuleGlobal');
+
+        var promises = [];
+
+        var modules = []; // we need it to keep the order of the modules given in the config
+        for (let key in self.json.setup.modules) {
+            var mod = self.replaceProperties(self.json.setup.modules[key]);
+            modules = modules.concat(self.cloneObject(mod));
+        }
+        /* self.log('modules');
+        self.log(modules); */
+        for (let mod of modules)
+            promises.push(self.loadModule(mod));
+        //var pageModule = {name: 'global', url: '/app/modules/global.json'};
+        //var ideModule = {name: 'ide', url: '/app/modules/ide.json'};
+        //promises.push(self.loadModule(ideModule)); // if admin
+        Promise.all(promises).then(function () {
+            //self.log('page module loaded');
+            //if (self.json.modules) {
+            //self.json.setup.modules = self.cloneObject(self.json.modules); // required modules
+            //self.json.setup.modules.app.push(pageModule); // page module
+            //self.json.setup.modules.app.push(ideModule); // ide module if admin
+            self.loadModules();
+            //}
+        }).catch(function (file) {
+            self.log('Failed to load');
+            self.log(file);
+        });
+    };
+
+    /*     this.extendJsonFromModules = function () {
+            self.log('extendJsonFromModules');
+            for (var mod in self.modules) {
+                //self.extendJsonFromElement(self.modules[mod.name]);
+                self.extendJson(json, self.modules[mod]);
+            }
+        } */
+    /* DA SISTEMARE - TEMPORANEO */
+    this.code = function (params, selectorParams) {
+        /* self.log("params");
+        self.log(params);
+        self.log("selectorParams");
+        self.log(selectorParams); */
+
+        let container = self.selector(params.selector || params.container) || self.selector(selectorParams);
+        //var container = self.selector(params) || self.selector(selectorParams);
+        self.log("this.code");
+        self.log("container");
+        self.log(container);
+
+        var editorContainer = container.slice(1);
+        //if (editorContainer.startsWith('#')) {editorContainer.slice(1);} // remove #
+        var editor = ace.edit(editorContainer);
+
+        var value = params.value; // else value = params;
+        if (!params.do || (params.do == 'set')) {
+
+            //var langTools = ace.require('ace/ext/language_tools');
+            if (params.theme) editor.setTheme(params.theme); // "ace/theme/monokai"
+            var editorMode = params.mode || "ace/mode/json";
+            editor.getSession().setMode(editorMode);
+
+            var editorStyle = self.extend({
+                background: "rgba(255,255,255,0)"
+            }, params.style);
+
+            //$(container).css(editorStyle); //editor.container.style
+            /* self.css({
+                style: editorStyle
+            }, {
+                container: container
+            }); */ // Eventualmente
+            var codeOptions = self.extend({
+                fontSize: "11pt",
+                selectionStyle: "line",
+                highlightActiveLine: false,
+                wrap: true,
+                showLineNumbers: false,
+                showGutter: false,
+                fixedWidthGutter: false,
+                readOnly: true,
+                //enableBasicAutocompletion: false,
+                //enableSnippets: false,
+                //enableLiveAutocompletion: false,
+            }, params.options);
+
+            // https://github.com/ajaxorg/ace/wiki/Configuring-Ace
+            editor.setOptions(codeOptions);
+
+            var codeString;
+            if (typeof value == 'string')
+                if (editorMode == "ace/mode/json")
+                    codeString = JSON.stringify(JSON.parse(value), null, '\t'); // json formatting
+
+                else
+                    codeString = value;
+            else {
+                if (editorMode == "ace/mode/json")
+                    codeString = JSON.stringify(value, null, '\t');
+                else {
+                    var functionObj = self.docElement(value.function);
+                    var functionParams = value.params;
+                    codeString = functionObj(functionParams);
+                }
+            }
+
+            var codeRows = codeString.split(/\r\n|\r|\n/).length;
+            // $(container).css({
+            //     height: Number(21 * codeRows) + 'px'
+            // });
+            /* self.css({
+                style: {
+                    height: Number(21*codeRows)+"px"
+                }
+            }, {
+                container: container
+            }); */ // Eventualmente
+            editor.setValue(codeString, -1);
+        } else if (params.do == 'get') {
+            return editor.getValue();
+        } else {
+            self.log('"code" function requires value param');
+        }
+
+    };
+
+    this.init = function (appString, modulesString) {
+        console.log('init');
+        // app(String: app url) (Object = json app)
+        // modules(String): modules "ui,daisyui,svg"
+        /* json = {  // the jsonic app tree
+            blocks: {},
+            parts: {},
+            css: {},
+            do: {},
+            on: {},
+            texts: {},
+            data: {},
+            var: {}
+        }; */
+        //self.app = self.getParams(); // from url
+        if (typeof appString == 'string') {
+
+            let modules = [{ "name": "app", "url": appString }];
+            let modulesNames = (modulesString) ? modulesString.split(",") : [];
+            for (let modName of modulesNames) {
+                modules.push({ "name": modName, "url": "jsonic/modules/" + modName + ".json" });
+            }
+
+            self.json.setup = { "modules": modules };
+
+        } else {
+
+            if (appString) self.extendJson(self.json, appString);
+
+            /* // TO DO: remove the requirement of resources.json
+            if (!self.json.setup || !self.json.setup.modules) {
+                self.json.setup = {
+                    "modules": [
+                        {
+                            "name": "resources",
+                            "url": "https://jsonic.io/app/modules/lib/resources.json"
+                        }
+                    ]
+                }
+            } */
+            if (appString.css) self.defineCss(appString.css); // can be removed?
+
+        }
+
+        self.loadModuleGlobal();
+    };
+
+    function toJsonNode(xml) {
+        let obj = {};
+        if (xml.nodeType == 1) {
+            if (xml.attributes.length > 0) {
+                obj["attr"] = {};
+                for (let j = 0; j < xml.attributes.length; j++) {
+                    let attribute = xml.attributes.item(j);
+                    obj["attr"][attribute.nodeName] = attribute.nodeValue;
+                }
+            }
+        }
+        if (xml.hasChildNodes()) {
+            for (let i = 0; i < xml.childNodes.length; i++) {
+                let item = xml.childNodes.item(i);
+                let nodeName = item.nodeName;
+                if (item.nodeType == 3 && nodeName == "#text") {
+                    if (/^\s+$/.test(item.nodeValue)) {
+                    } else obj.text = item.nodeValue;
+                } else {
+                    if (typeof obj[nodeName] == "undefined") {
+                        obj[nodeName] = toJsonNode(item);
+                    } else {
+                        if (!Array.isArray(obj[nodeName]))
+                            obj[nodeName] = [obj[nodeName]];
+                        obj[nodeName].push(toJsonNode(item));
+                    }
+                }
+            }
+        }
+        return obj;
+    }
+
+    this.htmlToJson = function (text) {
+        let xmlDoc = new DOMParser().parseFromString(text, "text/xml");
+        return JSON.stringify(toJsonNode(xmlDoc), null, "\t");
+    };
+
+    this.elementToJson = function (selector) {
+        let el = document.querySelector(selector);
+        return self.htmlToJson(el.getHTML());
+    };
+
+    function clearSelection() {
+        if (window.getSelection) { window.getSelection().removeAllRanges(); }
+        else if (document.selection) { document.selection.empty(); }
+    }
+
+    this.importHtml = function (htmlText) {
+        // use modal and monaco js
+        if (!htmlText)
+            htmlText = prompt("html/xml");
+        if (htmlText) {
+            let jsonDoc = self.htmlToJson(htmlText);
+            let textarea = document.createElement("textarea");
+            textarea.value = jsonDoc;
+            textarea.style = "position: absolute; z-index: 999999; background: white; width:100vw; height:100vh";
+            //document.body.innerHTML = '';
+            document.body.appendChild(textarea);
+            //document.execCommand("copy");
+            textarea.addEventListener('click', function () {
+                textarea.remove();
+                navigator.clipboard.writeText(textarea.value).then(() => console.log('copied!'));
+            });
+            //console.log(JSON.parse(jsonDoc));
+        }
+    };
+
+    // https://github.com/ktskts/html2json/blob/master/src/html2json.js
+    /*
+        var Util = {
+            div : null,
+            attrs: "id,name,style,class,value,src,href,width,height,title,type".split(","),
+            getJson: function(childNodes, attrs, length) {
+                var result = [];
+                for ( var i = 0, len = childNodes.length; i < len; i++) {
+                    var item = childNodes[i];
+                    if (item.nodeType == 3) { // textual content in an element or attribute
+                        result.push({
+                            text : item.nodeValue
+                        })
+                    } else if (item.nodeType == 1) { // element
+                        var obj = {
+                            //tag : item.nodeName.toLowerCase(),
+                            attr : {}
+                        };
+                        var flag = false;
+                        //for ie6
+                        if (attrs) {
+                            for (var j = 0; j < length; j++){
+                                if (attrs[j] == 'style'){
+                                    var sStyle = item.getAttribute('style').cssText;
+                                    if(sStyle){
+                                        obj.attr["style"] = sStyle;
+                                        flag = true;
+                                    }
+                                } else {
+                                    var attrNode = item.attributes[attrs[j]];
+                                    if(attrNode && attrNode.nodeType === 2){
+                                        var value = attrNode.value;
+                                        if(value && value != 'null'){
+                                            obj.attr[attrs[j]] = value;
+                                            flag = true;
+                                        }
+                                    }
+                                }
+                            }
+                        } else {
+                            if (item.attributes.length) {
+                                for ( var n = 0, l = item.attributes.length; n < l; n++) {
+                                    var value = item.attributes[n].value;
+                                    if(value){
+                                        flag = true;
+                                        obj.attr[item.attributes[n].name] = value;
+                                    }
+                                }
+                            }
+                        }
+    
+                        let nodeOut = {};
+                        let nodeTag = item.nodeName.toLowerCase();
+                        let nodeChild = Util.getJson(item.childNodes, attrs, length);
+                        nodeOut[nodeTag] = {};
+                        
+    
+                        self.log( 'item.childNodes');
+                        self.log( item.childNodes);
+                        self.log( 'nodeChild');
+                        self.log( nodeChild);
+                        //self.log( item.textContent);
+        
+    
+                        nodeOut[nodeTag].html = nodeChild;
+                        if (flag) nodeOut[nodeTag].attr = obj.attr;
+                        result.push(nodeOut);
+                
+                    } else {
+                        // do nothing
+                    }
+                }
+                if (result.length == 1) return result[0]
+                else if (result.length > 1) return result;
+            }
+        }
+    
+        this.html2json = function(text) {
+            if (!Util.div) Util.div = document.createElement('div');
+            Util.div.innerHTML = text;
+            return  {html: Util.getJson(Util.div.childNodes)};
+        };
+        */
+    /* var jsonicOptions = self.extend({
+    }, options); */
+    if (typeof options == 'object') {
+    } else if (options)
+        self.init(arguments[0], arguments[1]);
+
+
+} // of jsonicObject
+
+//var jsonicApp = jsonApp;
+var jsonApp = new jsonAppObj();
+var js = jsonApp;
+var jsonic = jsonApp;
+
+//window.jsonic = new jsonicObject();
+
+/* var receiveMessage = function (process) {
+    if (ThunkableWebviewerExtension)
+        ThunkableWebviewerExtension.receiveMessage(process);
+}
+
+var postMessage = function (message) {
+    if (ThunkableWebviewerExtension)
+        ThunkableWebviewerExtension.postMessage(message);
+} */
+
+/* "on": {
+    "init": [
+        {
+            "thunkable": {
+                "postMessage": "Hi Rick!"
+            }
+        },
+        {
+            "thunkable": {
+                "receiveMessage": {
+                    "alert": "message: {result}"
+                }
+            }
+        }
+    ]
+}
+ */
diff --git a/jsonic/js/jsonic.1.0.13.js b/jsonic/js/jsonic.1.0.13.js
new file mode 100644
index 0000000..d321526
--- /dev/null
+++ b/jsonic/js/jsonic.1.0.13.js
@@ -0,0 +1,16029 @@
+/*-----------------------------
+    JSONIC V. 1.0.13
+    jsonic.io  
+-------------------------------*/
+
+// CHANGELOG
+
+// 1.0.13 jsonApp removed; [replaceProperties: include event properties]
+// 1.0.12 jsonApp; if is array option
+// 1.0.11 block blocks -> parts
+// 1.0.10 for: {name} work also with {value:name with path} (function replaceValue)
+// 1.0.8 for: {name} replaced with {value:name} 
+// 1.0.5 set: if array of, the assignments follow the order
+// 1.0.4 deprecated: to assign without set (too ambiguous now that the key can be function, window.function, etc) 
+// 1.0.3 "x": "2*3" if the value is a string, -> self.js(value)
+// 1.0.2 plugins ondemand
+// 1.0.1 jsonc support
+// 1.0.0 FUNCTIONS
+// 0.9.9 RESOURCES: Inside modules (resources will be deprecated) 
+// 0.9.3 DEBUG: Rimosso break in docElement
+// 0.9.4 NOTE: In this.nested, commented and decommented nested.animate = partObj.animate; nested.if partObj.if, ...
+// 0.9.5 CLASS: "div btn": "content" = <div class="btn">content</div>
+// 0.9.6 DEBUG: in this.createElement newSelector (newSelector should be a dedicated function separated from selector)
+// 0.9.7 REMOVE: method to remove an element from the DOM / Restored html {attr} to set the attributes of an element
+
+// https://minify-js.com Input: 624.1 kB; Output: 95.46 kB; Compression: 84.7%, saving: 528.64 kB;
+
+// README
+
+// PRIORITY
+
+// in attr -> addStyle / removeStyle 
+// instead of shortcuts the user can use {data shortcuts}
+// {arguments:value|default} -> ({arguments:value}) ? {arguments:value} : default
+// use (typeof id == "undefined") to understand if id is defined and is = 0
+// css should call defineCss in any part of code
+// attr (addClass, removeClass, changeStyle direct methods?) can be changed (in element?) to avoid confusion with the use inside html
+// add remove element from array
+// debug of "set" key
+// can be useful to define pointers (shortcode/path of the objects)
+// https://dev.to/ternentdotdev/json-compression-in-the-browser-with-gzip-and-the-compression-streams-api-4135
+// a method to append an image to the DOM in base64 format <image xlink:href="data:image/png;base64,...
+// after (ms) can be a standard parameter (like selector) very useful
+// BUG: if {arguments:id} is undefined gives "undefined"
+// try to replace Snap.load with fetch
+// selctor, if string, should return querySelectorAll
+// find element.getAttribute('data-selector') and replace with self.elementToSelector(value). Then change queryAll
+// // it let to select more than one element cardColorDark
+// in self.pluginsLoadedQueue add the actions to do when the plugin is loaded
+// notUndefined può essere migliorato per "if" e per considerare vera la stringa se presente (ma va considerato '0' e 0)
+// for name=i, if i is an object, can use {i:node1} but not {i:node1.node2}ì. Workaround is to assign i to a var
+// so a possible solution is to use "var" parameter
+// functions (js like) -> methods? no
+// check this.html notes
+// anime can be a part/block/key function? called with "ui:anime" asking for the relative plugin?
+// if the name of the block/part includes ":" it is more explicit
+// blocks or parts or keys or nodes?
+// parts -> blocks considering jsblocks.com?
+// Dynamic modules loading? What if we ask for a node that is in the main modules?
+
+// remove console from methods and add log in browser functions
+
+// add log of the error if the app or json module is not in json format
+// init, run, start -> do
+// if selector is an array, repeat the action (do)
+// think about html/do. Is it possible to avoid html object? Any unknown object is an html tag
+// in parts, {setup:on.success} or {setup:config.color} doesn't work
+// setup -> arguments
+// part ui:icon: {selector:, config:} can be a js function () {var part = {}; self.run(config); }
+// {arguments[0] arguments[1]. {1.setup}   }
+// improve shortcuts (in extendJsonFromElement and in attr)
+// this.text -> this.content
+// html attribute of html method -> content (should be an html but can be multilingual)
+// property validation like the sintax (\w[\w+d+]) of the "name" in the "for" method )
+// default "html" al posto di "text": ogni contenuto testuale viene inserito con innerHTML anziché innerTEXT 
+// html [] tipo array e  "" stringa (innerHTML) ok, html {} deprecato
+// "p": "text" -> p.innerTHTML('text')
+// "p": [] -> se item è oggetto -> htmlTag, se stringa dovrebbe fare append della stringa html sempre nello p. Ora invece crea più p.innerText
+// ADD: append. empty true fixed on html
+/* 
+1 page -> url (method and property)
+2 dynamic class with ternary condition
+3 swal button style
+4 components copy bugs
+5 installation guide
+6 self.page -> not the variable but the real window path and window hash (can be jsonic.url)
+7 page -> url
+8 "roles" -> "only"
+9 add localStorage actions -> ANY WINDOW method
+10 add dataStorage
+10 in parts {string} instead of {value} ?
+11 on load image solution (should already work on: load -> animate -> fadein)
+ */
+
+// BUGS
+
+// BUG from Tailwind 3.3.2
+// Sembra richiesto tailwind nel plugin Jsonic e non caricato dinamicamente come su eliokit.com
+// Different rendering width or without spaces after commans "alert": " {js:(1 == 2) ? \"test\" : \"false condition\"} "
+
+
+
+// HOW IT WORKS
+// loadModules -> loadPlugins -> Run
+
+// KNOWN BUGS
+
+// in museomira.it cerca "socialIcons", rimuovendo data-value l'icona finisce dentro contatti perché il newSelector è a:eq(5) 
+// è necesario creare una funzione selector destinata ai nuovi elementi
+
+// PARTS
+
+// 1. Responsive header menu
+// 2. Alert
+// 3. Slide
+// 4. Form 
+// 5. Table
+
+// GOAL
+
+// Reduce custom js code in Jsonic and move the functions in modules
+// Requires an extension of js method to make it more flexible
+// js {function: String, params: Array}
+
+// TO DO
+
+// inline use: data-jsonic -> jsonic.run(data-jsonic, selector); (es. in body)
+// init = run (or play)
+// in parts {setup} should get subreferences link {setup:on.success}
+// i plugins possono includere direttamente l'url
+// la gestione dei plugin dovrebbe essere centralizzata (riferimento a jsonic e non all'oggetto)
+// si potrebbe definire la distinsione tra oggetti specifici e oggetti globali (jsonic)
+// verificare se oggetto function con {name: , params: []} è assegnabile a variabili
+// addClass, removeClass etc with array
+// change the behaviour of p: [] become a a list of content, not a list of p
+// to do it, search and change "div": [   "p": [   "span": [   "li": [   "button": [   
+// hypothesis (no, more complete with actions): class="ui:button{text:#333;bg:#fff}" -> bg-[white] text-[#333] hover:bg-[#fff] hover:text-[white]
+// OPTIMIZATION: pluginsRequiredByTag only for self.json.resources.pluginsFunctions keys or better only for parts that requires plugins. alert -> ui:alert
+// getJSON: load json (id: exampleApp, url: ...), success-> {getJSON:exampleApp}
+// Ajax: load ajax (id: exampleApp, url: ...), success-> {ajax:exampleApp}
+// DOM: queryAll(selector) -> value is string, el.before(value) and all the other methods of an element of the dom
+// properties {dom:title}
+// https://www.w3schools.com/jsref/dom_obj_all.asp
+// DOCUMENT
+// https://www.w3schools.com/jsref/dom_obj_document.asp
+// {document: {title: 'test'}}
+// properties {document:title}
+// ON: https://www.w3schools.com/jsref/dom_obj_event.asp
+// "selector" can be "query" / no selector recalls querySelector
+// or APPEND/PREPEND
+// https://registry.npmjs.com/-/v1/search?text=tailwindcss&size=1
+//https://api.npms.io/v2/package/tailwindcss
+// https://api-docs.npms.io
+
+/* 
+TO DO
+
+1. ajax call with an id to identify the data in case of simultaneous requests
+1. database path should be separated by spaces (or slashes)
+
+replaceProperties default:
+
+check if
+
+if p1 is a function, if p2 -> value = p1(p2), if p3 -> value = p1(p2(p3))
+if p1 is a value, and not p2, value = p1
+
+self.methods[p1] or... 
+p1 is a function
+
+
+{alert:string}
+{window.f}
+{window f1:window f2:window x}  = window.f1(window.f2(window.x))
+
+{querySelector:'.class':append} = window.f(jsonic.json.var.x)
+
+ESEMPI
+
+{new Date:'December 17, 1995 03:24:00'}
+{new Date().getDay}
+{console.log:'test'}
+{window.innerHeight} invece di {window:innerHeight} (specifica) o {js:window.innerHeight} 
+
+il vantaggio di questo schema è che si evita un livello di parentesi annidate
+quando sono coinvolte variabili jsonic:
+{querySelector:var obj x:append}
+che puo diventare
+{querySelector:var {item} x:append}
+LIMITE
+questo metodo preclude l'accesso ad eventuali oggetti javascript var o data
+SOLUZIONE
+in realtà, var e data devono essere elementi definiti nel json
+altrimenti non sono trovati dall'interprete che può vagliare l'esistenza
+di una funzione js
+
+{path to a data} is a reference to a value in the data node of the Jsonic app
+if the action context (do)
+{path to an action} is a reference to a method or a sub app in the "parts" node of the Jsonic app
+if the html rendering context (html)
+
+{window.f:var x} = window.f(jsonic.json.var.x)
+{window.f:num} if is number
+{window.f:array} if isArray (more than one parameter)
+{window.f:'string'}
+
+{jsonic.f:var x}
+
+do: [
+    "functionName": [] // parameters
+]
+
+check if functionName is a function
+html tags can't have a space or points...
+
+Align with ELIO Language: 
+1. "if": {"is": ["a", "=", "b","and"...] (retrocompatibile: se is è un array...)
+2. "set": ["a", "+=", "1","*", "3"...] (retrocompatibile: se set è un array...)
+3. "div classes": ...
+
+CODE REDUCING
+
+1. string in "html" object that starts with a tag and continue with classes
+
+"html": [
+    "span appsDeviceListName ms-2 me-2 text-[16px] text-left w-[80%] leading-tight|content"
+]
+
+NOTES
+
+// datapicker and other input fiels now are native https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date
+
+COMPONENTS
+
+MONACO TAILWINDCSS AUTOCOMPLETE (check Tailwindcss VS Code extensions)
+https://github.com/remcohaszing/monaco-tailwindcss
+
+
+FIREBASE STRUCTURE DATA
+
+If you create your own keys, they must be UTF-8 encoded, can be a maximum of 768 bytes, and cannot contain ., $, #, [, ], /, or ASCII control characters 0-31 or 127. You cannot use ASCII control characters in the values themselves, either.
+
+24.4KB gzipped (85.24KB minified)
+25.2KB minified + gzipped in 100ms
+
+65ms 3G 3 Mbps (375 KBs)
+10ms 4G 20 Mbps (2,5 MBs)
+<1ms 5G/Fiber 200 Mbps (25 MBs)
+
+TEST
+
+tailwindcss
+104 KB  105 ms
+
+INTEGRATIONS:
+https://b2bsaasleads.com
+
+NEW PLUGINS:
+
+http://jakim.me/Toasty.js/
+https://tingle.robinparisi.com
+
+GUIDE:
+
+COMPONENTS: reusable components / architectural philosophy
+ENGINE, (no hidden code) all the parts of the app is exposed to the developer / can set the layout and the behaviour
+JSON E' il modello di struttura ad albero usato da JSONIC per descrivere i dati, lo stile, e le azioni dell'applicazione
+SHORTCUTS: combinations of utility names (classes) to reuse in "class" property (from WindiCSS)
+ // preloaded js/css plugins
+
+{
+    "attr": {
+        "class": "py-2 text-center"
+    },
+    "subTitle": {
+        "lang": {
+            "it": "L'albero JSON dell'app può contenere i seguenti rami principali:",
+            "en": "The JSON app tree may contain the following main branches:",
+            "es": "El árbol de la aplicación JSON puede contener los siguientes ramas principales:"
+        }
+    }
+},		
+
+
+PROPERTIES
+
+With {property}, a string delimited by braces you can refer to any sub-branch the app tree and special properties.
+
+-----------------------
+HOME PARAGRAPHS
+-----------------------
+
+AUTO-LOADED PLUGINS
+
+NESTED CSS
+
+HTML has a clear nested and visual hierarchy but CSS doesn't. JSONIC let you nest your CSS definitions in a way that follows the same visual hierarchy of your HTML. It's similar to the SAAS extension but without the need to compile the code. In modo simile al linguaggio SAAS, è necessario compilare il codice
+
+
+ // BP
+ Questo dimostra che c'è bisogno di semplificazione più di quanto non si possa pensare
+
+IDE
+
+Special char (or shortener or autocomplete) with &lbrace; &rbrace; etcetera)
+
+ 
+PRIORITY: 
+
+tags:
+
+button: "title"
+or
+button: {
+    text: title
+    color: color
+    on: ...
+}
+
+buttonOutline: {
+    text: title
+    color: color
+    on: ...
+}
+
+------------------------
+qualunque metodo:
+[
+    {"path": args},
+    {"path": args}
+    {"path": args}
+]
+------------------------
+
+
+DEBUG
+class must be a string otherwise log error
+style in attr must work (now error)
+
+
+CONFIG (now setup)
+extend the main branch {b:config}
+
+ACTIONS (now parts)
+extend the main branch {b:actions}
+
+DO
+execute one or an array of functions
+"do": "actionID" (string) execute the actions.actionID function
+
+CONTAINER (now selector)
+change the context to the element {b:container}
+Can be an object like {id, class, data-value}
+or a string with a CSS selector like "body > div:nt-child(2)"
+or a jquery-like selector like "body > div:eq(2)"
+
+------------------------
+
+bootstrap menu -> tailwind
+
+------------------------
+
+
+IDEAS
+
+- share the modules in the object "jsonic" with the other jsonic objects in the page
+- jsonic.registerJsMethod(name, function) register new js method to be inserted in jsonic.methods and called with "method": {params}
+- choose can contain the methods "next":"1" / "previous":"1" or step "+1"/"-1"
+- calendar can return the object {lang: {...}}
+- self.js can be embedded in self.compile (if typeof params == 'string')
+- Page doesn't exist / if admin / want to create it?
+- if no jsonic file for the page, create it on save
+
+- AUTH (debug) + GITHUB
+
+- preload font flag
+- IDE: Wordpress API new page
+- window methods in (docs)
+- for -> addTag (?)
+- setup: form to set setup properties
+- Method ARRAY
+
+"array": {
+"push": "{var:num}" (pop, shift, unshift, length)
+
+DONE:
+
+remove JSONIC references: jsonic.firebaseEventAction / jsonic.resizeEvent
+- HOME: docs / examples / integrations
+- wordpress: access to media API
+- iconify
+- iconify remove SVG old
+- colors -> setup (mmm) (like logo)
+- styles -> css -> senza categorie, solo elements '#div'  -> https://transform.tools/css-to-js DONE
+}
+
+BUGS:
+- version è necessario in pluginsFunctions
+- shortcut as a node: attr / class values doesn't overwrite the shortcut
+
+WORDPRESS:
+
+(_embed to your URL will add the wp:featuremedia)
+https://jsonic.io/wp-json/wp/v2/media?&context=embed&per_page=100
+https://jsonic.io/wp-json/wp/v2/media?&context=embed&after=2017-11-07T00:00:00
+https://jsonic.io/wp-json/wp/v2/media?include=1681,491
+
+// https://github.com/schlosser/pig.js
+
+NOTE:
+
+- autoupdate only if the previous update is complete (we need a param in config complete:true/false)
+- Play (create your app!)
+- add a tag in menu buttons ?
+- inViewport -> 'enter'/'exit' ?
+- inViewport solo la prima volta?
+- ('on': 'in'/out NO) confirm 'init'? 
+- IDE: backup timeline
+- duplicato di this.selector dedicata a ottenere il selector di un nuovo elemento (su append e poco altro)
+- col: [1,2,3] -> row with col1 col2 col3 ? or tailwind grid solution (ragionare su soluzione di tag. esempio: flex: [])
+- in examples, test in posizione assoluta sul codice (utile su mobile)
+
+KEY BENEFITS
+
+- Integration (Jsonic code includes the logic, the layout and the style of the app on in one JSON object)
+- Accelerator
+
+*/
+
+// JQUERY to Vanilla: https://youmightnotneedjquery.com | http://vanilla-js.com
+// Jquery plus: https://atypiccraft.com/insights/reasons-why-we-still-use-jquery
+// https://cyrilletuzi.github.io/javascript-guides/jquery-to-javascript.html
+// Tools to integrate: https://bestofjs.org/tags
+// MINIFY: https://closure-compiler.appspot.com/home
+// https://api.giphy.com/v1/gifs/random?api_key=dc6zaTOxFJmzC&tag=cat
+
+// INTEGRATIONS
+
+// https://www.dropzone.dev/js/
+// uploadcare
+// zaiper
+
+// a graph js tool
+
+// anime.js
+// transition.style // analogo ad animate.style
+
+/* There were issues affecting this run of Lighthouse:
+
+There may be stored data affecting loading performance in this location: IndexedDB. Audit this page in an incognito window to prevent those resources from affecting your scores.
+
+// UI
+
+https://windicss.org/play.html
+https://basscss.com
+https://twind.dev
+https://emotion.sh/docs/introduction
+https://cssinjs.org/?v=v10.8.2
+
+https://picturepan2.github.io/spectre/
+https://get.foundation
+https://ant.design/
+https://purecss.io
+https://onsen.io/
+https://shuffle.dev/
+*/
+
+//{"type": "js", "url":"https://cdn.jsdelivr.net/npm/tailwindcss@{version}/lib/index.min.js"},
+
+
+//$.fn.jsonic = function(options) {return new jsonicObject(options);};
+//jsonicApp = function(options) {return new jsonicObject(options);};
+
+
+var jsonAppObj = function(options) {
+
+    var self = this;
+    console.log();
+
+    //this.options = options;
+    /* var json = {  // the jsonic app tree
+        setup: {},
+        blocks: {}, // to be removed
+        parts: {},
+        // plugins: {}, // TO DO: remove the error if included
+        // css: {},
+        do: {},
+        on: {},
+        shortcuts: {},
+        texts: {},
+        data: {},
+        var: {}
+    }; */
+    //var var = json.var;
+    //this.setup = json.setup;
+    // for external access
+    this.json = {
+        setup: {},
+        blocks: {}, // to be removed
+        parts: {},
+        // plugins: {}, // TO DO: remove the error if included
+        // css: {},
+        functions: {},
+        do: {},
+        on: {},
+        shortcuts: {},
+        texts: {},
+        data: {},
+        var: {}
+    };
+    this.app = this.json;
+
+    //var json = self.json; // TO DO: remove
+    var alertObj = {};
+    var alertValues = {};
+    this.params = {}; // maybe can be removed
+
+    this.javascriptReservedWord = ['abstract', 'arguments', 'await', 'boolean', 'break', 'byte', 'case', 'catch', 'char', 'class', 'const', 'continue', 'debugger', 'default', 'delete', 'do', 'double', 'else', 'enum', 'eval', 'export', 'extends', 'false', 'final', 'finally', 'float', 'for', 'function', 'goto', 'if', 'implements', 'import', 'in', 'instanceof', 'int', 'interface', 'let', 'long', 'native', 'new', 'null', 'package', 'private', 'protected', 'public', 'return', 'short', 'static', 'super', 'switch', 'synchronized', 'this', 'throw', 'throws', 'transient', 'true', 'try', 'typeof', 'var', 'void', 'volatile', 'while', 'with', 'yield', 'Array', 'Date', 'eval', 'function', 'hasOwnProperty', 'Infinity', 'isFinite', 'isNaN', 'isPrototypeOf', 'length', 'Math', 'NaN', 'name', 'Number', 'Object', 'prototype', 'String', 'toString', 'undefined', 'valueOf', 'getClass', 'java', 'JavaArray', 'javaClass', 'JavaObject', 'JavaPackage', 'alert', 'all', 'anchor', 'anchors', 'area', 'assign', 'blur', 'button', 'checkbox', 'clearInterval', 'clearTimeout', 'clientInformation', 'close', 'closed', 'confirm', 'constructor', 'crypto', 'decodeURI', 'decodeURIComponent', 'defaultStatus', 'document', 'element', 'elements', 'embed', 'embeds', 'encodeURI', 'encodeURIComponent', 'escape', 'event', 'fileUpload', 'focus', 'form', 'forms', 'frame', 'innerHeight', 'innerWidth', 'layer', 'layers', 'link', 'location', 'mimeTypes', 'navigate', 'navigator', 'frames', 'frameRate', 'hidden', 'history', 'image', 'images', 'offscreenBuffering', 'open', 'opener', 'option', 'outerHeight', 'outerWidth', 'packages', 'pageXOffset', 'pageYOffset', 'parent', 'parseFloat', 'parseInt', 'password', 'pkcs11', 'plugin', 'prompt', 'propertyIsEnum', 'radio', 'reset', 'screenX', 'screenY', 'scroll', 'secure', 'select', 'self', 'setInterval', 'setTimeout', 'status', 'submit', 'taint', 'text', 'textarea', 'top', 'unescape', 'untaint', 'window', 'onblur', 'onclick', 'onerror', 'onfocus', 'onkeydown', 'onkeypress', 'onkeyup', 'onmouseover', 'onload', 'onmouseup', 'onmousedown', 'onsubmit'];
+    // Source: https://www.w3schools.com/js/js_reserved.asp
+    var nodes = {
+        //parts: ['text', 'div', 'ul', 'p', 'a', 'button', 'input', 'span', 'img', 'video', 'audio', 'source', 'figure', 'figcaption', 'textarea', 'iframe', 'table', 'thead', 'tbody', 'tfoot', 'tr', 'th', 'td', 'svg', 'path', 'g', 'd', 'polygon', 'circle', 'small', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'form', 'form-group', 'label', 'select', 'option', 'optgroup', 'nav', 'tab', 'header', 'main', 'footer', 'ide', 'model-viewer', 'i', 'icon', 'pre', 'code','animateMotion','animateTransform','circle','clipPath','defs','desc','discard','ellipse','feBlend','feColorMatrix','feComponentTransfer','feComposite','feConvolveMatrix','feDiffuseLighting','feDisplacementMap','feDistantLight','feDropShadow','feFlood','feFuncA','feFuncB','feFuncG','feFuncR','feGaussianBlur','feImage','feMerge','feMergeNode','feMorphology','feOffset','fePointLight','feSpecularLighting','feSpotLight','feTile','feTurbulence','filter','foreignObject','g','hatch','hatchpath','image','line','linearGradient','marker','mask','metadata','mpath','path','pattern','polygon','polyline','radialGradient','rect','script','set','stop','switch','symbol','text','textPath','title','tspan','use','view'],
+        //functions: ['do', 'function', 'for', 'run', 'module', 'page', 'html', 'text', 'empty', 'alert', 'blocks', 'attr', 'color', 'set', 'array', 'replace', 'var', 'js', 'javascript', 'if', 'switch', 'choose', 'delay', 'ajax', 'hide', 'show', 'toggle', 'in', 'out', 'link', 'scroll', 'lang', 'find', 'data', 'reload', 'calendar', 'moment', 'dayjs', 'log', 'setInterval', 'clearInterval', 'offcanvas', 'firebase', 'database', 'qrcode', 'editor', 'ace', 'code', 'thunkable', 'animate', 'sortablejs', 'uiUpdate'], // 'String', 'Number', 'Math', 
+        //functionsWithContainer: ['for', 'editor', 'ace', 'code', 'qrcode', 'lottie', 'animate', 'html', 'hide', 'show', 'toggle', 'in', 'out', 'if', 'ajax', 'attr', 'run', 'delay'],
+        // not execute
+        extend: ['setup', 'blocks', 'parts', 'css', 'actions', 'texts', 'data', 'functions'], // also plugins? (TO DO: remove actions)
+        params: ['style', 'on', 'matchMedia', 'action', 'code', 'roles', 'plugins', 'css'], // 'if', 'attr', 'text'. 'html'
+        exclude: ['setup', 'container', 'selector', 'info', 'note', 'comment', 'lang', 'tag', 'plugins', 'template']
+    };
+
+    /*
+        * Converts a JSON object to a JSON Schema
+        * @param {any} json
+        * @param {object} options
+        * @returns {object} a json schema
+    */
+    // [{"name": "vito", "gallery": {"name":2, "date":"10-10-2012"}, "num":3, "bool":true, "color": "#ff0000"}]
+    const FORMAT_REGEX = {
+        email: /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/,
+        url: /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/,
+        ip: /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/,
+        // J. Meijer / Stackoverflow / 15491894
+        date: /^(?:(?:31(\/|-|\.)(?:0?[13578]|1[02]))\1|(?:(?:29|30)(\/|-|\.)(?:0?[13-9]|1[0-2])\2))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:29(\/|-|\.)0?2\3(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1\d|2[0-8])(\/|-|\.)(?:(?:0?[1-9])|(?:1[0-2]))\4(?:(?:1[6-9]|[2-9]\d)?\d{2})$/,
+        // Joey / Stackoverflow / 1636350
+        color: /^#(?:[0-9a-fA-F]{3}){1,2}$|#(?:[0-9a-fA-F]{3,4}){1,2}$/,
+    };
+
+    this.jsonToSchema = function (json, options = {}) {
+        // https://github.com/mohsen1/json-to-json-schema
+        if (typeof json === 'function') {
+            throw new TypeError('Can not convert a function');
+        }
+
+        if (json === undefined) {
+            return {};
+        }
+
+        // primitives
+        if (typeof json === 'string') {
+
+            if (FORMAT_REGEX.url.test(json)) return { type: 'string', format: 'url' };
+            else if (FORMAT_REGEX.email.test(json)) return { type: 'string', format: 'email' };
+            else if (FORMAT_REGEX.ip.test(json)) return { type: 'string', format: 'ip' };
+            else if (FORMAT_REGEX.date.test(json)) return { type: 'string', format: 'date' };
+            else if (FORMAT_REGEX.color.test(json)) return { type: 'string', format: 'color' };
+            else return { type: 'string' };
+        }
+
+        else if (typeof json === 'boolean') return { type: 'boolean' };
+
+        else if (typeof json === 'number') {
+            if (Number.isInteger(json)) {
+                return { type: 'integer' };
+            } else {
+                return { type: 'number' };
+            }
+        }
+
+        else if (Array.isArray(json)) {
+            let schema = { type: 'array' };
+
+            if (!json.length) {
+                schema.items = {};
+                return schema;
+            }
+
+            let schemas = json.map(self.jsonToSchema);
+
+            // if all schemas are the same use that schema for items
+            if (schemas.every(s => self.isEqual(s, schemas[0]))) {
+                schema.items = schemas[0];
+
+                // if there are multiple schemas use oneOf
+            } else {
+                schema.items = { oneOf: unique(schemas) };
+            }
+
+            return schema;
+        }
+
+        if (json === null) {
+            return { type: 'null' };
+        }
+
+        let schema = { type: 'object' };
+
+        if (!Object.keys(json).length) {
+            return schema;
+        }
+
+        schema.properties = Object.keys(json).reduce((properties, key) => {
+            properties[key] = self.jsonToSchema(json[key]);
+            return properties;
+        }, {});
+
+        return schema;
+    };
+
+    this.isEqual = function (a, b) {
+        return (JSON.stringify(a) == JSON.stringify(b));
+    };
+
+
+    //var canvasElement = document.getElementById("canvas");
+    // * this is not important for PDFMake, it's here just to render the result *
+    // It's a Mozilla lib called PDFjs that handles pdf rendering directly on the browser
+    /* this.pdfjs = function (params, selectorParams) {
+    
+        var url = params.url;
+        var options = params.options || { scale: 1.4 };
+        let container = self.selector(params.selector || params.container) || self.selector(selectorParams);
+        var canvasContainer = self.query(container);
+
+        function renderPage(page) {
+            var viewport = page.getViewport(options.scale);
+            var wrapper = document.createElement("div");
+            wrapper.className = "canvas-wrapper";
+            var canvas = document.createElement('canvas');
+            var ctx = canvas.getContext('2d');
+            var renderContext = {
+                canvasContext: ctx,
+                viewport: viewport
+            };
+            
+            canvas.height = viewport.height;
+            canvas.width = viewport.width;
+            wrapper.appendChild(canvas)
+            canvasContainer.appendChild(wrapper);
+            
+            page.render(renderContext);
+        }
+        
+        function renderPages(pdfDoc) {
+            for(var num = 1; num <= pdfDoc.numPages; num++)
+                pdfDoc.getPage(num).then(renderPage);
+        }
+    
+        PDFJS.disableWorker = true;
+        PDFJS.getDocument(url).then(renderPages);
+    
+    } */
+    //renderPDF('https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf', document.querySelector('#canvas'));
+    /* this.localStorage = function (params) {
+        // -> use self.method
+        if (params.getItem) return localStorage.getItem(params.get);
+        else if (params.setItem) return localStorage.setItem(params.setItem.name, params.setItem.value);
+    } */
+    // UTILITY
+    /** A storage solution aimed at replacing jQuerys data function.
+     * Implementation Note: Elements are stored in a (WeakMap)[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap].
+     * This makes sure the data is garbage collected when the node is removed.
+     */
+    this.dataStorage = {
+        _storage: new WeakMap(),
+        set: function (element, key, obj) {
+            if (!this._storage.has(element)) {
+                this._storage.set(element, new Map());
+            }
+            this._storage.get(element).set(key, obj);
+        },
+        get: function (element, key) {
+            return this._storage.get(element).get(key);
+        },
+        has: function (element, key) {
+            return this._storage.has(element) && this._storage.get(element).has(key);
+        },
+        remove: function (element, key) {
+            var ret = this._storage.get(element).delete(key);
+            if (!this._storage.get(element).size === 0) {
+                this._storage.delete(element);
+            }
+            return ret;
+        }
+    };
+
+    // JQUERY cross-over
+    this.extend = function (out) {
+
+        if (typeof arguments[0] == 'boolean' && arguments[0] == true)
+            return deepExtend(out);
+        else {
+            out = out || {};
+
+            for (var i = 1; i < arguments.length; i++) {
+                if (!arguments[i])
+                    continue;
+
+                for (var key in arguments[i]) {
+                    if (arguments[i].hasOwnProperty(key))
+                        out[key] = arguments[i][key];
+                }
+            }
+            return out;
+        }
+    };
+
+    var deepExtend = function (out) {
+        out = out || {};
+
+        for (var i = 1; i < arguments.length; i++) {
+            var obj = arguments[i];
+
+            if (!obj) continue;
+
+            for (var key in obj) {
+                if (obj.hasOwnProperty(key)) {
+                    if (typeof obj[key] === "object" && obj[key] !== null) {
+                        if (obj[key] instanceof Array) out[key] = obj[key].slice(0);
+                        else out[key] = deepExtend(out[key], obj[key]);
+                    } else out[key] = obj[key];
+                }
+            }
+        }
+
+        return out;
+    };
+
+    /*     this.actionResult = function(value, args) { // value -> params
+    
+            // Methods with a result
+        
+            if (value && typeof value == 'object') {
+    
+                    // jsonic methods
+                    if (value.js) {
+                        return self.js(value.js, args);
+                    } else if (value.array) {
+                        return self.array(value.array, args);
+                    } else if (value.calendar) {
+                        return self.calendar(value.calendar, args);
+                    } else if (value.data) {
+                        return self.data(value.data, args);
+                    } else if (value.var) {
+                        return self.var(value.var, args);
+                    } else if (value.module) {
+                        return self.module(value.module, args);
+                    } else if (value.color) {
+                        return self.color(value.color, args);
+                    } else if (value.css) {
+                        return self.css(value.css, undefined, args);
+                    } else if (value.if) {
+                        return self.if(value.if, undefined, args);
+                    } else if (value.switch) {
+                        return self.switch(value.switch, args);
+                    } else if (value.database) {
+                        return self.database(value.database, args);
+                    // js methods
+                    } else if (value.Math) {
+                        return self.Math(value.Math, args);
+                    } else if (value.Number) {
+                        return self.Number(value.Number, args);
+                    } else if (value.String) {
+                        return self.String(value.String, args);
+                    // plugin methods
+                    } else if (value.ace) {
+                        return self.ace(value.ace, args);
+                    // else if (value.code) {
+                    //    return self.code(value.code, args);
+                    } else if (value.moment) {
+                        return self.moment(value.moment, args);
+                    } else if (value.dayjs) {
+                        return self.dayjs(value.dayjs, args);
+                    } else if (value.function) { // TO DO: remove (replaced by do)
+                        return self.function(value.function, value.params);
+                    } else {
+                        return value;
+                    }
+            } else {
+                return value
+            }
+            //} else if (typeof value == 'string') {
+            //    return self.javascript(value, args);
+    
+        } */
+    this.var = function (params, args) {
+
+
+        if (Array.isArray(params)) {
+            for (var index in params)
+                self.var(params[index], args);
+        } else {
+
+            //self.log('var');
+            var name;
+            var value;
+            var varValue;
+
+            if (params.path && !params.name)
+                name = self.path(params.path, args, '.');
+
+            if (typeof params == 'string') {
+                // gives a variable value
+                name = self.replaceProperties(params, args);
+                /* self.log('name');
+                self.log(name); */
+                /* self.log('typeof params == string');
+                self.log('params');
+                self.log(params);
+                self.log('name');
+                self.log(params); */
+                varValue = self.docElement('self.json.var.' + name);
+
+                /* self.log('varValue');
+                self.log(varValue); */
+            } else {
+
+                /* self.log('var');
+                self.log('params');
+                self.log(params);
+                self.log('args');
+                self.log(args);  */
+                //self.log('params');
+                //self.log(params);
+                var paramsReplaced = self.replaceProperties(params, args);
+                //self.log('paramsReplaced');
+                //self.log(paramsReplaced);
+                name = paramsReplaced.name;
+                value = paramsReplaced.value;
+                var operator = paramsReplaced.operator;
+                var type = paramsReplaced.type;
+
+                /* self.log('extend');
+                self.log(extend); */
+                if (name) {
+                    var pathString = 'self.json.var.' + name;
+                    var pathLast = pathString.substr(pathString.lastIndexOf(".") + 1);
+                    var pathBase = pathString.substr(0, pathString.lastIndexOf("."));
+                    var varObj = self.docElement(pathBase);
+
+                    /* self.log('name');
+                    self.log(name);
+                    self.log('pathBase');
+                    self.log(pathBase);
+                    self.log('pathLast');
+                    self.log(pathLast);
+                    self.log('varObj');
+                    self.log(varObj); */
+                    if (value !== undefined) {
+
+                        //if (value == 'string')
+                        //    value = self.docElement('self.json.var.'+value); // todo
+                        //else
+                        value = self.actionResult(value, args);
+
+                        // typization
+                        switch (type) {
+                            case 'string': value = String(value); break;
+                            case 'number': value = Number(value); break;
+                            case 'boolean': value = Boolean(value); break;
+                            case 'array': value = JSON.parse(value); break;
+                            case 'object': value = JSON.parse(value); break;
+                        }
+
+                        //self.log('value');
+                        //self.log(value);
+                        /*
+                        // reset
+                        if (value == undefined && typeof value == 'string') value = '';
+                        if (value == undefined && typeof value == 'number') value = 0;
+                        if (value == undefined && typeof value == 'object') value = {}; */
+                        /* self.log('operator');
+                        self.log(operator);
+                        self.log('pathLast');
+                        self.log(pathLast);
+                        self.log('varObj[pathLast]');
+                        self.log(varObj[pathLast]); */
+                        if (varObj && pathLast) {
+                            switch (operator) {
+                                case '+=': varObj[pathLast] += value; break;
+                                case '-=': varObj[pathLast] -= value; break;
+                                case '/=': varObj[pathLast] /= value; break;
+                                case '*=': varObj[pathLast] *= value; break;
+                                default: varObj[pathLast] = value; break;
+                            }
+
+                            /* operators: [
+                                '=', '>', '<', '!', '~', '?', ':', '==', '<=', '>=', '!=',
+                                '&&', '||', '++', '--', '+', '-', '*', '/', '&', '|', '^', '%',
+                                '<<', '>>', '>>>', '+=', '-=', '*=', '/=', '&=', '|=', '^=',
+                                '%=', '<<=', '>>=', '>>>='
+                                ], */
+                            //self.log('varObj[pathLast]');
+                            varValue = varObj[pathLast];
+                        } else {
+                            /* self.log('pathString');
+                            self.log(pathString); */
+                            //varValue = self.docElement(pathString, value);
+                            //varValue = value;
+                            self.docElement(pathString, value);
+
+                            /* self.log('name');
+                            self.log(name);
+
+                            self.log('var '+name);
+                            self.log(self.var(name)); */
+                        }
+
+                        /* self.log('pathLast');
+                        self.log(pathLast);
+                        self.log('varObj[pathLast]');
+                        self.log(varObj[pathLast]); */
+                        /*  //alert(value);
+                        //value = self.replaceProperties(value, args);
+                        if (value == 'string') {
+                            //self.json.var[name] = self.docElement('self.json.var.'+value);
+                            varObj[pathLast] = self.docElement('self.json.var.'+value);
+                        } else {
+                            //self.json.var[name] = self.actionResult(value, args);
+                            varObj[pathLast] = self.actionResult(value, args);
+                        } */
+                        //self.log('varObj[pathLast]');
+                        //if (self.isJson(self.json.var[name])) 
+                        //    self.json.var[name] = self.parse(self.json.var[name]);
+                    } else if (paramsReplaced.push) {
+                        if (varObj && pathLast && varObj[pathLast]) {
+                            varObj[pathLast] = varObj[pathLast].push(paramsReplaced.push);
+                            varValue = varObj[pathLast];
+                        }
+                    } else if (paramsReplaced.extend) {
+                        if (varObj && pathLast && varObj[pathLast]) {
+                            varObj[pathLast] = self.extend({}, varObj[pathLast], paramsReplaced.extend);
+                            varValue = varObj[pathLast];
+                        }
+                    } else {
+                        // no "value" property: return the value of the var "name"
+                        varValue = varObj[pathLast];
+                        /* varValue = self.replaceProperties(varObj[pathLast], args);
+                        alert(JSON.stringify(varValue)); */
+                    }
+
+                    //varValue = self.json.var[name] || {}; // to check
+                } else {
+                    self.log('var name undefined');
+                    self.log(params);
+                    varValue = undefined;
+                }
+
+                if (params.do && params.do.length > 0) {
+                    self.log('this.var params.do');
+                    self.log(params.do);
+                    //alert(JSON.stringify(params.do));
+                    //self.do(params.do, args);
+                    self.do(params.do, undefined, args);
+                }
+
+            }
+
+            return varValue;
+
+        }
+    };
+
+    this.find = function (params, args) {
+        if (params.in) {
+            var list = self.replaceProperties(params.in, args);
+            return list.filter(function (item) {
+                if (params.value) {
+                    if (typeof params.value == 'string') {
+                        if (JSON.stringify(item).indexOf(params.value) >= 0)
+                            return item;
+                    } else { // if (typeof params.value == 'string') {
+                        for (var key in params.value) {
+                            if (params.value[key] == item[key])
+                                return item;
+                        }
+                    }
+                }
+            });
+        }
+    };
+
+    /* this.data = function (params, args) {
+        if (typeof params == 'string')
+            return self.db(params, args);
+        else
+            self.firebase(params, args);
+    } */
+    this.array = function (params, args) {
+        /* self.log("---- this.array ----");
+        self.log('params');
+        self.log(params);  */
+        if (args)
+            params = self.replacePropertyWithPrefix(params, 'result', args);
+
+        for (var par in params) {
+            var paramReplaced = self.replaceProperties(params[par], args);
+            //value[par](params[par]) // ipotesi di eseguire in automatico qualunque funzione js su stringhe
+            /* self.log("par");
+            self.log(par);
+            self.log("params[par]");
+            self.log(params[par]);
+            self.log("paramReplaced");
+            self.log(paramReplaced); */
+            params[par] = paramReplaced;
+        }
+
+        //self.log("params");
+        //self.log(params);
+        var value = self.element({ path: params.name }) || [];
+        /* self.log("value");
+        self.log(...value); */
+        if (params.push) {
+            if (Array.isArray(params.push))
+                value.push(...params.push);
+
+            else
+                value.push(params.push);
+
+        }
+        if (params.unshift) value.unshift(...params.unshift);
+        if (params.pop) return value.pop(params.pop);
+        if (params.shift) return value.shift(params.shift);
+
+        self.element({ path: params.name, value: value });
+
+    };
+
+    this.replace = function (params, args) {
+        // self.log("---- this.replace ----");
+        params = self.replacePropertyWithPrefix(params, 'result', args);
+        /* self.log("params");
+        self.log(params); */
+        var value = self.element({ path: params.path }) || [];
+        var to = params.to || '';
+
+        var type = typeof value;
+        /* self.log("type");
+        self.log(type); */
+        if (type !== "string") value = JSON.stringify(value);
+        /* self.log("value 1");
+        self.log(value); */
+        if (params.from) value = self.replaceAll(value, params.from, to);
+        /* self.log("value2 ");
+        self.log(value); */
+        switch (type) {
+            case "number":
+                value = Number(value);
+                break;
+            case "boolean":
+                value = Boolean(value);
+                break;
+            case "object":
+                value = JSON.parse(value);
+                break;
+        }
+        /* self.log("value 3");
+        self.log(value); */
+        //return value;
+        return self.element({ path: params.path, value: value });
+
+    };
+
+
+    this.unshift = function (params, args) {
+        for (var param in params) {
+            var path = self.replaceProperties(param, args);
+            var value = self.replaceProperties(params[param], args);
+            if (value) {
+                var obj = self.element({ path: path }) || [];
+                obj.unshift(value);
+                self.element({ path: path, value: obj });
+            }
+        }
+    };
+
+    this.set = function (params, args) {
+
+        if (Array.isArray(params)) { // 1.0.5
+            for (var obj of params)
+                self.set(obj, args);
+        } else {
+            for (var param in params) {
+
+                var value = params[param];
+
+                if (value) value = self.replaceProperties(value, args, false); // TO DO: check
+                if (value && args) value = self.replacePropertyWithPrefix(value, 'result', args); // backward compatibility TO DO: remove
+
+                self.element({ path: param, value: value });
+            }
+        }
+
+        //return true
+    };
+
+
+    this.get = function (element) {
+        //self.log('self.get');
+        if (element.startsWith('\''))
+            return String(element.match(/\'([^\']*)\'/)[1]); // stringa racchiusa tra apici (serve?)
+        else if (element.startsWith('Boolean'))
+            return Boolean(element.match(/Boolean\(([^\)]*)\)/)[0]); // Boolean(x)
+        else if (element.startsWith('Number'))
+            return Number(element.match(/Number\(([^\)]*)\)/)[0]); // Number(x)
+        else if (element.startsWith('String'))
+            return String(element.match(/String\(([^\)]*)\)/)[0]); // String(x)
+
+        else
+            return (self.docElement(element)); // ora le tipizzazioni sono già in docElement grazie a eval
+    };
+
+    this.getJSON = function (url, callback) {
+        var xhr = new XMLHttpRequest();
+        xhr.open('GET', url, true);
+        xhr.responseType = 'json';
+        xhr.onload = function () {
+            var status = xhr.status;
+            if (status === 200) {
+                callback(null, xhr.response);
+            } else {
+                callback(status, xhr.response);
+            }
+        };
+        xhr.send();
+    };
+
+    /*---------------------
+        var
+    ---------------------*/
+    var database, auth, storage;
+    this.listeners = {};
+    this.resizeActions = {};
+
+    /* var iconsFile;
+
+    this.device = false; // touch device
+    this.touch = 'mousedown'; if (this.device) {this.touch = 'touchstart';}
+
+    var animations = {};
+    var tweenLoading;
+
+    var tasksIntervals = {};
+    var timedTasks = {'yearly':{},'monthly':{},'daily':{},'hourly':{}, '10mins':{}, '5mins':{}, '30mins':{}, '1min':{}, '30sec': {}, '10sec': {}, '1sec': {}};  */
+    /* this.dateSelection; // = {day:0, month:0, year:0};
+    this.timeSelection = {hour:0, min:0, sec:0, ampm:'AM', allday:true};
+    this.timeSelectionCallback = null; */
+    /*--------------------
+        FIREBASE
+    --------------------*/
+    //var firebaseInitialized = false;
+    this.firebaseVerifyUser = function (data) {
+        self.log('firebaseVerifyUser');
+        //self.log(data);
+        //self.log(data.code);
+        if (self.params.oobCode) {
+            var oobCode = self.params.oobCode;
+
+            auth.applyActionCode(oobCode).then(function (resp) {
+                // self.log('resp');
+                // self.log(resp);
+                self.alert({
+                    //toast: true,
+                    icon: "success",
+                    title: "titVerifyEmail",
+                    html: "msgVerifyEmail",
+                    confirmButtonText: "btnOk",
+                    //showCancelButton: false,
+                    confirm: function () {
+                        //self.reload();
+                        // self.do(data);
+                        window.location.href = "/app/index.html";
+                    }
+                });
+            }).catch(function (error) {
+                self.log('error');
+                self.alert({
+                    icon: "error",
+                    title: "titWarning",
+                    html: error.code + " - " + error.message,
+                    confirmButtonText: "btnOk",
+                    //showCancelButton: false,
+                    confirm: function () {
+                        // self.reload();
+                        // self.do(data);
+                        window.location.href = "/app/index.html";
+                    }
+                });
+            });
+            // verifica su auth
+        }
+        //data.code / data.params.code
+        //self.do(data);
+        self.do(data);
+    };
+
+    /*     this.firebaseInit = function (data) {
+            self.log("firebaseInit");
+    
+            if (json.setup && json.setup.firebase) {
+                //var.databaseURL = json.setup.firebase.databaseURL;
+    
+                firebase.initializeApp(json.setup.firebase);
+                database = firebase.database();
+                auth = firebase.auth();
+                // if (self.json.plugins['firebase-storage'].active) OR find in self.json.plugins name: 'firebase-storage'
+                //storage = firebase.storage();
+    
+                auth.onAuthStateChanged(user => {
+                    self.json.var.user = user;
+                    if (!user) {
+                        // No user logged in
+                        self.log('onAuthStateChanged:GUEST\n');
+                        // non bisognerebbe chiedere sempre di fare login
+                    } else {
+                        // User logged in
+                        self.log('onAuthStateChanged:USER\n');
+                        self.log('name: '+self.user('displayName') + '\nemail: '+user.email + '\nuid: '+ user.uid);
+                    }
+                    //self.log('firebaseInitialized');
+                    //self.log(firebaseInitialized);
+                    if (!firebaseInitialized) {
+                        firebaseInitialized = true;
+                        self.do(data);
+                    }
+                });
+            } else {
+                self.do(data);
+            }
+        } */
+    this.sendMail = function (data) {
+        self.log('sendMail');
+
+        var emailParams = {
+            Host: "smtp.mailgun.com",
+            Username: "vito@nuvolaria.com",
+            Password: "bee02191be84c784a665fa98c61e03ce-915161b7-d32cb9d0",
+            From: data.from,
+            To: data.to,
+            Subject: data.subject,
+            Body: data.html
+        };
+
+        Email.send(emailParams).then(
+            message => self.alert({
+                icon: 'success',
+                title: 'titEmailSuccess',
+                confirmButtonText: 'btnClose'
+            })
+        );
+
+        /*
+        "from": "gianfrancoguglielmi@gmail.com",
+        "to": "vito.minchilli@gmail.com",
+        "subject": "Prova oggetto",
+        "html": "Prova testo",
+        "text": "Prova testo"
+*/
+        /*
+                var SERVER_NODEJS_BASEURL='https://app.fixo.io:4002';
+        
+                var params = {
+                    rom: data.from,
+                    to: data.to,
+                    subject: data.subject,
+                    html: data.html,
+                    text: data.text
+                };
+        
+                $.ajax({
+                    type: "POST",
+                    'beforeSend': function(xhr) {
+                        xhr.setRequestHeader('Accept', 'application/json');
+                        xhr.setRequestHeader('Content-Type', 'application/json');
+                    },
+                    data: JSON.stringify(params),
+                    url: SERVER_NODEJS_BASEURL + '/sendMail',
+                    success: function(data) {
+                        self.log('sendMail SUCCESS');
+                        self.log(data);
+                        self.do(data);
+                    },
+                    error: function(error) {
+                        self.log('sendMail ERROR');
+                        self.log(error);
+                        self.do(data);
+                    }
+                });
+        */
+    };
+
+    //var multipleFiles = [];
+    /*     this.fileDownload = function (url) {
+            self.log('fileDownload');
+            self.log(url);
+    
+            var fileArr = url.split('?');
+            self.log(fileArr);
+            //var file = fileArr[0];
+            var urlArr = fileArr[0].split('/');
+            self.log(urlArr);
+            var name = urlArr[urlArr.length-1];
+            self.log(name);
+            var token = self.getParameterByName('token', url);
+            self.log(token);
+    
+            window.location.href = '/app/php/proxy.php?name='+ name + '&url='+ url;
+    
+        }  */
+    /*     this.fileUrl = function (params) {
+            // da nome file a l'url Firebase Storage inclusiva del token
+            self.log('fileUrl');
+            self.log(params);
+            // self.log('storage');
+            // self.log(storage);
+            if (storage) {
+                var storageRef = storage.ref();
+                var pathReference = storageRef.child(params.user+'/'+params.name);
+                
+                pathReference.getDownloadURL().then(function(url) {
+                    if (params.callback) params.callback(url);
+                }).catch(function(error) {
+                    if (error && error.code && params.error) {
+                        self.log(self.firebaseStorageError(error.code));
+                        params.error(error.code);
+                    }
+                    // A full list of error codes is available at
+                    // https://firebase.google.com/docs/storage/web/handle-errors
+                });
+            } else {
+                self.log('storage undefined');
+            }
+        } */
+    /*     this.firebaseStorageError = function (errorCode) {
+            switch (errorCode) {
+                case 'storage/object-not-found':
+                    // File doesn\'t exist
+                    return 'File doesn\'t exist';
+                case 'storage/unauthorized':
+                    // User doesn\'t have permission to access the object
+                    return 'User doesn\'t have permission to access the object';
+                case 'storage/canceled':
+                    // User canceled the upload
+                    return 'User canceled the upload';
+                case 'storage/unknown':
+                    // Unknown error occurred, inspect the server response
+                    return 'Unknown error occurred, inspect the server response';
+                default:
+                    return 'No error'
+            }
+        } */
+    var x = [{ if: 3 }, function () { }, 3, []];
+
+    this.firebaseAddListener = function (params) {
+        /* self.log('firebaseAddListener');
+        self.log(params); */
+        // {path, orderByChild, equalTo}
+        //self.log(params.path);
+        if (database) {
+            // Aggiunge listener in ascolto su params.path che esegue params.action
+            if (params.action) {
+                if (!self.listeners[params.path]) self.listeners[params.path] = [];
+                /* alert('params.action:'+params.action);
+                alert('type params.action:' + typeof params.action);
+                alert(params.path+':'+JSON.stringify({
+                    action: params.action
+                })); */
+                //if (Array.isArray(params.action))
+                //    self.listeners[params.path].concat(params.action);
+                //else
+                self.listeners[params.path].push(params.action);
+            }
+            /* if (params.success !== undefined) {
+                alert('params.success:'+params.success);
+                alert('type params.success:' + typeof params.success);
+                alert(params.path+':'+JSON.stringify({
+                    success: params.success
+                }));
+                self.listeners[params.path].push(params.success);
+            } */
+            //self.log('params.path: '+ params.path);
+            //self.listeners[params.path] = params.action;
+            //alert(self.listeners[params.path]);
+            /*
+            
+            limitToFirst()	Sets the maximum number of items to return from the beginning of the ordered list of results.
+            limitToLast()	Sets the maximum number of items to return from the end of the ordered list of results.
+            
+            startAt()	Return items greater than or equal to the specified key or value, depending on the order-by method chosen.
+            startAfter()	Return items greater than the specified key or value depending on the order-by method chosen.
+            endAt()	Return items less than or equal to the specified key or value, depending on the order-by method chosen.
+            endBefore() endBefore()	Return items less than the specified key or value depending on the order-by method chosen.
+            equalTo()	Return items equal to the specified key or value, depending on the order-by method chosen.
+            
+            orderByChild()	Order results by the value of a specified child key or nested child path.
+            orderByKey()	Order results by child keys.
+            orderByValue()	Order results by child values.
+            orderByPriority() Order results by priority
+
+            https://firebase.google.com/docs/reference/js/v8/firebase.database.Query
+
+            */
+            //Firestore.collection(collectionName).orderBy(field).where(field, ">=", keyword.toUpperCase()).where(field, "<=", keyword.toUpperCase() + "\uf8ff").get() 
+            // https://medium.com/feedflood/filter-by-search-keyword-in-cloud-firestore-query-638377bf0123
+            // https://firebase.google.com/docs/database/rest/retrieve-data?hl=it#range-queries
+            // startAt , endAt , limitToFirst , limitToLast o equalTo
+            //databaseReference.orderByChild('_searchLastName').startAt(queryText).endAt(queryText+"\uf8ff")
+            // where ("string, "in"/"not-in", array)
+            // https://firebase.google.com/docs/firestore/query-data/queries?hl=it#in_and_array-contains-any
+            var dbRef = database.ref(params.path);
+            dbRef.off();
+            if (params.orderByChild) dbRef = dbRef.orderByChild(params.orderByChild);
+            if (params.orderByKey) dbRef = dbRef.orderByKey(params.orderByKey);
+            if (params.orderByValue) dbRef = dbRef.orderByValue(params.orderByValue);
+            if (params.equalTo) dbRef = dbRef.equalTo(params.equalTo);
+            if (params.startAt) dbRef = dbRef.startAt(params.startAt);
+            if (params.startAfter) dbRef = dbRef.startAfter(params.startAfter);
+            if (params.endAt) dbRef = dbRef.endAt(params.endAt);
+            if (params.endBefore) dbRef = dbRef.endBefore(params.endBefore);
+            if (params.limitToFirst) dbRef = dbRef.limitToFirst(params.limitToFirst);
+            if (params.limitToLast) dbRef = dbRef.limitToLast(params.limitToLast);
+            if (params.where) dbRef = dbRef.where(params.where[0], params.where[1], params.where[2]); // maybe params.where in enough
+
+            var feedback = dbRef.on('value', firebaseEvent);
+            //console.log(feedback);
+            /* console.log('dbRef');
+            console.log(dbRef);
+    */
+            /* if (params.orderByChild && params.equalTo)
+                dbRef.orderByChild(params.orderByChild).equalTo(params.equalTo).on('value', firebaseEvent);
+            else
+                dbRef.on('value', firebaseEvent); */
+        } else {
+            self.log('database undefined');
+            // Restart the db
+        }
+    };
+
+    var firebaseEvent = function (snapshot) {
+        console.log(snapshot.val());
+        var ref = snapshot.ref;
+        if (snapshot.val() !== undefined) {
+            var dbVal = snapshot.val();
+            var path = snapshot.ref.toString();
+            //if (!dbVal) dbVal = {};
+            var pathArr = path.split(/\.\w+\//);
+            var dbPath = pathArr[1];
+            self.log('firebaseEvent: ' + dbPath);
+            //if (var.databaseURL) dbPath = path.substr(var.databaseURL.length+1);
+            //else dbPath = path;
+            /* self.log('path: '+ path);
+            //self.log('var.databaseURL: '+ var.databaseURL);
+            self.log('dbPath: '+ dbPath); */
+            if (dbVal)
+                self.localDbUpdate(dbVal, dbPath);
+            else {
+                var dbObj = self.element({ path: 'self.json.var.db.' + self.replaceAll(dbPath, '/', '.') });
+                if (dbObj)
+                    dbObj = null;
+                //delete dbObj;
+            }
+
+
+            //self.do(self.listeners[dbPath], dbVal);
+        }
+    };
+
+    this.localDbUpdate = function (newObj, dbPath) {
+        /* self.log('localDbUpdate');
+        self.log(newObj);
+        self.log(dbPath); */
+        //var path = newObj.path;
+        //delete newObj.path;
+        /* self.do(
+            {
+                var: {
+                    name: "db."+self.replaceAll(dbPath, '/', '.'),
+                    value: newObj,
+                    //success: function () {
+                    //    self.do(self.listeners[dbPath], newObj);
+                    //}
+                }
+            }
+        ); */
+        //alert('db.'+self.replaceAll(dbPath, '/', '.'));
+        /* var dbUpdateAction = {
+            var: {
+                name: 'db.'+self.replaceAll(dbPath, '/', '.'),
+                value: newObj
+                //do: (self.listeners[dbPath] && self.listeners[dbPath].length > 0) ? self.listeners[dbPath] : undefined
+            }
+        };
+            if (self.listeners[dbPath] !== undefined && self.listeners[dbPath] !== null && self.listeners[dbPath].length > 0)
+            dbUpdateAction.var.do = self.listeners[dbPath];
+        
+        newObj.path = dbPath;
+
+        self.do(dbUpdateAction, newObj); */
+        // TO DO: decide l'utente dove salvare i dati 
+        newObj = Object.fromEntries(Object.entries(newObj).reverse());
+
+        //newObj = Object.keys(newObj).reverse();
+        self.element({ path: 'self.json.var.db.' + self.replaceAll(dbPath, '/', '.'), value: newObj });
+        if (self.listeners[dbPath] !== undefined && self.listeners[dbPath] !== null && self.listeners[dbPath].length > 0) {
+            newObj.path = dbPath;
+            if (self.listeners[dbPath]) {
+                self.methods.firebaseEvent.action(newObj);
+                //self.do(self.listeners[dbPath], newObj);
+                self.do(self.listeners[dbPath], undefined, newObj);
+            }
+        }
+
+
+    };
+
+
+
+    this.firebaseRemoveListener = function (params) {
+        // Rimuove listener in ascolto su data.path
+        self.log('firebaseRemoveListener');
+        if (self.listeners[params.path]) {
+            delete self.listeners[params.path];
+            var dbRef = database.ref(params.path);
+            dbRef.off();
+        }
+    };
+
+    // Rimuove un elemento del database
+    this.firebaseRemove = function (path, callback) {
+        self.log('firebaseRemove');
+        self.log(path);
+        if (database) {
+            var result, dbRef;
+            if (path) {
+                dbRef = database.ref().child(path);
+            } else {
+                dbRef = database.ref();
+            }
+            return dbRef.remove(function (error) {
+                //Dati impostati con successo
+                if (error == null) {
+                    self.log('set SUCCESS');
+                    result = { success: true };
+                } else {
+                    self.log('set ERROR');
+                    //Errore inserimento dati
+                    result = { success: false, error: error };
+                }
+                if (callback) callback(result);
+            });
+        } else {
+            self.log('database not initialized');
+        }
+    };
+
+    // Write or replace data to a defined path
+    this.firebaseSet = function (path, value, callback) {
+        /*
+        set	Write or replace data to a defined path, like messages/users/<username>
+        update	Update some of the keys for a defined path without replacing all of the data
+        push	Add to a list of data in the database. Every time you push a new node onto a list, your database generates a unique key, like messages/users/<unique-user-id>/<username>
+        transaction	Use transactions when working with complex data that could be corrupted by concurrent updates
+        */
+        if (database) {
+            var result, dbRef;
+            if (path) {
+                dbRef = database.ref().child(path);
+            } else {
+                dbRef = database.ref();
+            }
+            return dbRef.set(value, function (error) {
+                //Dati impostati con successo
+                if (error == null) {
+                    self.log('set SUCCESS');
+                    result = { success: true };
+                } else {
+                    self.log('set ERROR');
+                    //Errore inserimento dati
+                    result = { success: false, error: error };
+                }
+                if (callback) callback(result);
+            });
+        } else {
+            self.log('database not initialized');
+        }
+    };
+
+    // Update some of the keys for a defined path without replacing all of the data
+    this.firebaseUpdate = function (path, value, callback) {
+        self.log('firebaseUpdate');
+        self.log('path');
+        self.log(path);
+        self.log('value');
+        self.log(value);
+
+        if (database) {
+            var result, dbRef;
+            if (path) {
+                dbRef = database.ref().child(path);
+            } else {
+                dbRef = database.ref();
+            }
+            return dbRef.update(value, function (error) {
+                //Dati impostati con successo
+                if (error == null) {
+                    self.log('update SUCCESS');
+                    result = { success: true };
+                } else {
+                    self.log('update ERROR');
+                    //Errore inserimento dati
+                    result = { success: false, error: error };
+                }
+                if (callback) callback(result);
+            });
+        } else {
+            self.log('database not initialized');
+        }
+    };
+
+    // Add to a list of data in the database. Every time you push a new node onto a list, your database generates a unique key, like messages/users/<unique-user-id>/<username>
+    this.firebasePush = function (path, value, callback) {
+        self.log('firebasePush');
+        self.log(path);
+
+        if (database) {
+            var result, dbRef;
+            if (path) {
+                dbRef = database.ref().child(path);
+            } else {
+                dbRef = database.ref();
+            }
+            return dbRef.push(value, function (error) {
+                //Dati impostati con successo
+                if (error == null) {
+                    self.log('push SUCCESS');
+                    result = { success: true };
+                } else {
+                    self.log('push ERROR');
+                    //Errore inserimento dati
+                    result = { success: false, error: error };
+                }
+                if (callback) callback(result);
+            });
+        } else {
+            self.log('database not initialized');
+        }
+    };
+
+
+
+    // https://firebase.google.com/docs/database/security/rules-conditions
+    // tutte le get / o listeners / potrebbero essere basate su orderByChild("owner")
+    /*
+            rooms": {
+                // this rule applies to any child of /rooms/, the key for each room id
+                // is stored inside $room_id variable for reference
+                "$room_id": {
+                    "topic": {
+                    // the room's topic can be changed if the room id has "public" in it
+                    ".write": "$room_id.contains('public')"
+                    }
+                }
+                }
+    */
+    /*        this.firebaseQuery  = function(params) {
+            self.log('firebaseQuery');
+            self.log(params);
+            // path = 'users/'+self.user('email')
+            // value = 'guest'
+            var dbRef = database.ref(params.path);
+    
+            if (!params.result) params.result = {};
+            if (params.value && !Array.isArray(params.value)) {
+                var buffer = params.value;
+                params.value = [];
+                params.value[0] = buffer;
+            }
+            //self.log('params.value');
+            //self.log(params.value);
+            if (params.value && params.value.length > 0) {
+                var value = params.value.shift();
+                //self.log('value');
+                //self.log(value);
+                //self.log('params.key');
+                //self.log(params.key);
+                dbRef.orderByChild(params.key).equalTo(value).once('value',  (object) => {
+                    self.log('object');
+                    self.log(object);
+                    if(object) {
+                        params.result = self.extend(params.result, object.val());
+                        if (params.value.length > 0)
+                            self.firebaseQuery(params);
+                        else
+                            params.callback({
+                                success: true,
+                                error: null,
+                                data: params.result
+                            });
+                    } else {
+                        //self.log('firebaseQuery ERROR');
+                        //result = {success:false, error:8};
+                        params.callback({
+                            success:true,
+                            error:null,
+                            data: params.result
+                        });
+                    }
+                });
+            } else {
+                params.callback({success:false, error:null});
+            }
+        } */
+    this.firebaseGetPart = function (params) {
+        self.log('firebaseGetPart');
+        let remotePath = self.replaceAll(params.localPath, '.', '/');
+
+        self.log('localPath:' + params.localPath);
+        //self.log('remotePath:'+remotePath);
+        if (self.partContainers[params.localPath]) {
+            self.partContainers[params.localPath].push(params);
+        } else {
+            self.partContainers[params.localPath] = [];
+            self.partContainers[params.localPath].push(params);
+
+            dbRef = database.ref().child(remotePath);
+
+            return dbRef.once('value').then(function (object) {
+                //Dati recuperati con successo
+                if (object) {
+                    self.log('firebaseGetPart SUCCESS');
+                    self.log(object);
+                    // local db update
+                    if (object.val() !== undefined) {
+                        window.dbVal = object.val();
+                        var dbVal = object.val();
+                        self.log('dbVal');
+                        self.log(dbVal);
+                        if (dbVal !== null) {
+                            let fullPath = object.ref.toString();
+                            let pathArr = fullPath.split(/\.\w+\//); // split on the domain extension
+                            let dbPath = pathArr[1]; // path after the domain extension
+                            let localPath = self.replaceAll(dbPath, '/', '.');
+                            //var dbPath = path.substr(var.databaseURL.length+1);
+                            self.log('dbPath: ' + dbPath);
+                            self.log('localPath: ' + localPath);
+                            //self.log('self.partContainers[localPath]');
+                            //self.log(self.partContainers[localPath]);
+                            self.element({ path: localPath, value: dbVal });
+                            for (partObj of self.partContainers[localPath]) {
+                                /* self.log('partObj');
+                                self.log(partObj); */
+                                let part = self.replacePropertyWithPrefix(dbVal, 'setup', partObj.setup);
+                                part = self.replacePropertyWithPrefix(part, 'arg', partObj.arg);
+                                self.extendJsonFromElement(part); // or selectorParams
+
+
+                                /* self.log('part');
+                                self.log(part); */
+                                self.html(part, partObj.container);
+                                //self.run(part, partObj.container);
+                                //self.run(dbVal, container);
+                            }
+                        }
+                    }
+                } else {
+                    self.log('firebaseGetPart ERROR');
+                    result = { success: false, error: 8 };
+                }
+                //self.log(result);
+                //callback(result);
+            });
+        }
+    };
+
+
+    /* {
+        "database": {
+            "do": "get",
+            "path": "apps/dev/{setup:key}",
+            "on": {
+                "success": [
+                    { */
+    this.firebaseIncrease = function (params) {
+        console.log('firebaseIncrease');
+        self.firebaseGet(params.path, function (result) {
+            console.log(result);
+            if (result.success) {
+                if (result.data === null || result.data === undefined || typeof result.data == 'number') {
+                    var counter = Number(result.data) + 1;
+                    console.log('counter:' + counter);
+                    self.firebaseSet(params.path, counter, function (result) {
+                        if (result.success) {
+                            self.log('firebaseIncrease SUCCESS');
+                            if (params.on && params.on.success) self.do(params.on.success, undefined, result);
+                        } else {
+                            if (params.on && params.on.error) self.do(params.on.error, undefined, result);
+                        }
+                    });
+                } else {
+                    if (params.on && params.on.error) self.do(params.on.error, undefined, result);
+                }
+            } else {
+                if (params.on && params.on.error) self.do(params.on.error, undefined, result);
+            }
+        });
+    };
+
+    this.firebaseGet = function (path, callback) {
+        self.log('firebaseGet:' + path);
+        var result = { success: false, error: 7 };
+        if (path) {
+            // try, if path is wrong "Uncaught TypeError: Cannot read properties of undefined (reading 'ref')"
+            dbRef = database.ref().child(path);
+        } else {
+            dbRef = database.ref();
+        }
+
+        /* if (false) { //path == 'files') {
+            //alert(self.user('email'));
+            return dbRef.orderByChild('users/'+self.user('email')).equalTo('guest').on('value',  (object) => {
+            //return dbRef.orderByChild('prefs/authorId').equalTo(self.user('uuid')).on('value',  (object) => {
+            //return dbRef.orderByChild('users').equalTo(self.user('email')).on('value', (object) => {
+                //self.log(object);
+                //var user = object.val();
+                //Dati recuperati con successo
+                if(object) {
+                    result = {success:true, error:null, data: object.val()};
+                } else {
+                    self.log('get ERROR');
+                    //Errore recupero dati
+                    result = {success:false, error:8};
+                }
+                //self.log(result);
+                callback(result);
+            });
+        } else { */
+        // ATTENZIONE: va intercettato e loggato l'errore di accesso negato dalle regole
+        return dbRef.once('value').then(function (object) {
+            //Dati recuperati con successo
+            if (object) {
+                self.log('get SUCCESS');
+                result = { success: true, error: null, data: object.val() };
+
+                // local db update
+                if (object.val() !== undefined) {
+                    var dbVal = object.val();
+                    var path = object.ref.toString();
+                    if (!dbVal) dbVal = {};
+                    var pathArr = path.split(/\.\w+\//); // split on the domain extension
+                    var dbPath = pathArr[1]; // path after the domain extension
+
+                    //var dbPath = path.substr(var.databaseURL.length+1);
+                    self.log('dbPath: ' + dbPath);
+                    self.localDbUpdate(dbVal, dbPath);
+                }
+            } else {
+                self.log('get ERROR');
+                //Errore recupero dati
+                result = { success: false, error: 8 };
+            }
+            //self.log(result);
+            callback(result);
+        });
+
+        //}
+    };
+
+    this.stringToKey = function (str) {
+        return str.replace(/\./g, '%2E');
+    };
+
+    this.keyToString = function (key) {
+        return key.replace(/%2E/g, '.');
+    };
+
+    this.firebaseKey = this.getKey = function (path) {
+        var dbRef = database.ref(path);
+        return dbRef.child(path).push().getKey();
+    };
+
+    // --------------
+    //  SELECTOR
+    // --------------
+    this.exist = function (selector) {
+        console.log('selector');
+        console.log(selector);
+        console.log(Boolean(self.query(selector)));
+        return Boolean(self.query(selector));
+    };
+
+    this.count = function (selector) {
+        //self.log('count:'+selector+ '='+ self.queryAll(selector).length);
+        return self.queryAll(selector).length;
+
+        /* if (selector) {
+            var routes = selector.split(/[ >]+/);
+            if (!element) element = document;
+            
+            for (var index in routes) {
+                var route = routes[index];
+
+                //onsole.log('route');
+                //self.log(route);
+
+                var routeParts = route.match(/(.*):eq\((\d*)\)/);
+
+                //self.log('routeParts');
+                //self.log(routeParts);
+
+                if (routeParts) {
+                    var routeElement = String(routeParts[1]);
+                    var routeIndex = Number(routeParts[2]);
+                    element = element.querySelectorAll(routeElement)[routeIndex];
+
+
+                } else {
+                    element = element.querySelectorAll(route)[0];
+                }
+            } */
+        /* var elements = self.query(selector);
+        if (elements)
+            return elements.querySelectorAll().length;
+        else
+            return 0 */
+        /* if (self.exist(selector))
+            return document.querySelectorAll(selector).length;
+        else
+            return 0 */
+    };
+
+    var log = function (id, value) {
+        self.log(id);
+        self.log(value);
+    };
+
+    this.classSelector = function (selClass) {
+        if (selClass.indexOf('.') == 0) { selClass = String(selClass).substr(1); } // backward compatibility
+        let classes = selClass.split(' ');
+        selClass = classes[0];
+        /* self.log('selClass');
+        self.log(selClass); */
+        // avoid dynamic classes as selector
+        var regex = new RegExp('[\-][\[]');
+        if (selClass && selClass.match(regex)) selClass = classes[1];
+        if (selClass && selClass.match(regex)) selClass = classes[2];
+        return selClass;
+    };
+
+    this.selector = function (params, containerParams, selectAll) {
+        // {container, class, value, id}
+        var selector;
+
+        if (params) {
+
+            if (typeof params == 'string') {
+                /* self.log('this.selector');
+                self.log(params); */
+                return params;
+            } else if (Array.isArray(params)) {
+                return params;
+            } else {
+                var selContainer;
+
+                if (params.selector || params.container)
+                    selContainer = params.selector || params.container;
+
+                else if (containerParams)
+                    selContainer = containerParams.selector || containerParams.container;
+
+                //var selContainer = container; //data.container;
+                var attr = (params.attr) ? params.attr : {};
+                var selId = (attr.id) ? attr.id : params.id;
+                var selClass = (attr.class) ? attr.class : params.class;
+                var selValue = (attr.value) ? attr.value : params.value;
+                var selDataValue = (attr['data-value']) ? attr['data-value'] : params['data-value'];
+                selValue = selDataValue || selValue;
+                if (selId) selId = self.replaceProperties(selId);
+                if (selValue) selValue = self.replaceProperties(selValue);
+                if (selClass) selClass = self.replaceProperties(selClass);
+                /* if (selId) selId = self.compile(selId);
+                if (selValue) selValue = self.compile(selValue);
+                if (selClass) selClass = self.compile(selClass); */
+                // use the first class as selector
+                if (selClass)
+                    selClass = self.classSelector(selClass);
+
+                //if (!selectAll) selClass = undefined;
+                if (selId) {
+                    selector = '#' + selId;
+                } else if (selValue && selClass) {
+                    selector = '.' + selClass + '[data-value="' + selValue + '"]';
+                } else if (selValue && params.tag) {
+                    selector = params.tag + '[data-value="' + selValue + '"]';
+                } else if (selClass && selectAll) {
+                    selector = '.' + selClass;
+
+                    //if (!selectAll) 
+                    //    selector += ':eq(' + self.count(selector) + ')';
+                    // qui c'è / c'era un baco:
+                    // quando proviamo a eseguire un'azione su un elemento esistente
+                    // usando solo la classe come selector, $(selector).length = 1
+                    // quindi prova a selezionare il secondo elemento eq(1), non il primo eq(0)
+                } else if (params.tag) {
+                    //if (selContainer) selector = selContainer;
+                    selector = params.tag;
+                    if (selContainer) {
+                        selector = selContainer + ' > ' + params.tag;
+                        if (!selectAll) {
+
+                            //if (count !== $(selector).length) self.log('>> '+ selector + ' count:'+ self.count(selector) + ' !== ' + $(selector).length );
+                            selector += ':eq(' + self.count(selector) + ')';
+                            //selector += '[' + self.count(selector) + ']';
+                            //selector += ':eq(' + $(selector).length + ')';
+                        }
+                    } else {
+                        if (!selectAll) {
+                            selector += ':eq(' + self.count(selector) + ')';
+                            //selector += '[' + self.count(selector) + ']';
+                        }
+                    }
+                } else {
+                    selector = selContainer;
+                };
+
+            }
+            return selector;
+        }
+    };
+
+    // --------------
+    //  TEXTS
+    // --------------
+    this.stringify = function (obj) {
+        if (typeof obj == 'object')
+            try {
+                return JSON.stringify(obj);
+            } catch (error) {
+                return obj;
+            }
+
+        else
+            return obj;
+
+    };
+
+    this.parse = function (str) {
+        if (typeof str == 'string')
+            try {
+                return JSON.parse(str); // json
+            } catch (error) {
+                return str; // non json
+            }
+
+        else
+            return str;
+    };
+
+  /*   this.removeEventProperties = function (params) {
+        var paramsObj = self.cloneObject(params);
+        if (paramsObj && paramsObj.on) {
+            paramOn = self.cloneObject(paramsObj.on);
+            delete paramsObj.on;
+        }
+        if (paramsObj && paramsObj.success) {
+            paramSuccess = self.cloneObject(paramsObj.success);
+            delete paramsObj.success;
+        }
+        return paramsObj;
+    }; */
+
+
+    self.setupId = 0;
+
+    this.replacePropertyWithPrefix = function (params, prefix, args) {
+
+        var paramsString;
+
+        if (typeof params == 'object')
+            paramsString = self.stringify(params);
+
+        else
+            paramsString = String(params);
+
+        /* let argsWithProperties = (args) ? JSON.stringify(args) : '';
+        paramsString = self.replaceAll(paramsString, '"{'+prefix+'}"', argsWithProperties); // obsolete */
+        //if (typeof args == undefined)
+        //    self.log('replacePropertyWithPrefix args is undefined', 'yellow'); 
+        if (paramsString && paramsString.indexOf('{' + prefix) >= 0) {
+            paramsString = paramsString.replace(new RegExp('"{' + prefix + '[:\\s]?([\\w\\d\\s\\.\\|]*)}"', 'g'), function (match, path) {
+                if (path) {
+                    let value = self.replaceUndefined({ match: match, path: path, root: args, removeUndefined: true });
+                    //let value = self.element({path:path, root: args});
+                    /* if (typeof value == undefined) {
+                        self.log(match + ' not found', 'orange');
+                        value = '';
+                    } else  */
+                    if (value === undefined) {
+                        return '""';
+                    } else if (typeof value == 'object')
+                        return JSON.stringify(value);
+                    else if (typeof value == 'string')
+                        return '"' + value + '"';
+
+                    else
+                        return value;
+                } else {
+                    if (typeof args == 'object')
+                        return JSON.stringify(args);
+                    else if (typeof args == 'string')
+                        return '"' + args + '"';
+
+                    else
+                        return args;
+                }
+            });
+
+            /* if (paramsString && paramsString.indexOf('Contacts')>= 0) {
+                self.log(paramsString, 'green');
+            } */
+            paramsString = paramsString.replace(new RegExp('{' + prefix + '[:\\s]?([\\w\\d\\s\\.]*)}', 'g'), function (match, path) {
+                if (path) {
+                    let value = self.replaceUndefined({ match: match, path: path, root: args, removeUndefined: true });
+                    //let value = self.element({path:path, root: args});
+                    /* if (typeof value == undefined) {
+                        self.log(match + ' not found', 'orange');
+                        value = '';
+                    } else  */
+                    if (value === undefined)
+                        return '';
+                    else if (typeof value == 'object') // when object inside a string?
+                        return JSON.stringify(value);
+
+                    else
+                        return value;
+                } else {
+                    if (typeof args == 'object')
+                        return JSON.stringify(args);
+
+                    else
+                        return args;
+                }
+            });
+
+            if (self.isJsonString(paramsString)) {
+                var paramsObj = self.parse(paramsString);
+                return paramsObj;
+            } else {
+                return paramsString;
+            }
+        } else {
+            return params;
+        }
+
+    };
+
+    /*     this.replaceProperty = function (params, name, args) { // TO DO: change name in replaceArguments
+            //console.log('replaceProperty:'+name);
+            //var actions = {};
+    
+            if (typeof params == 'object') {
+    
+                params = self.stringify(params);
+            }
+    
+            if (typeof args !== 'string') {
+    
+                let argsWithProperties = (args) ? JSON.stringify(args) : '';
+                params = self.replaceAll(params, '"{'+name+'}"', argsWithProperties); // obsolete
+    
+                // TO DO: get self.element({path:key, root: args});
+    
+                for (let key in args) {
+                    if (typeof args[key] !== undefined) {
+                        if (typeof args[key] == 'object')
+                            params = self.replaceAll(params, '"{'+name+' '+key+'}"', JSON.stringify(args[key]));
+                        else
+                            params = self.replaceAll(params, '{'+name+' '+key+'}', args[key]);
+                    } else {
+                        params = self.replaceAll(params, '{'+name+' '+key+'}', '');
+                        self.log('{'+name+' '+key+'}' + ' not found', 'yellow');
+                    }
+                }
+    
+                for (let key in args) {
+                    if (args[key]) {
+                        if (typeof args[key] == 'object')
+                            params = self.replaceAll(params, '"{'+name+':'+key+'}"', JSON.stringify(args[key]));
+                        else
+                            params = self.replaceAll(params, '{'+name+':'+key+'}', args[key]);
+                    } else {
+                        params = self.replaceAll(params, '{'+name+':'+key+'}', '');
+                    }
+                }
+    
+            } else {
+                //console.log('args STRINGA');
+    
+                params = self.replaceAll(params, '{'+name+'}', args);
+    
+            }
+    
+            if (self.isJson(params)) {// (typeof params == 'object')
+                var paramsObj = self.parse(params);
+                return paramsObj;
+            } else {
+                //alert(paramsString);
+                return params;
+            }
+    
+        }
+        */
+    this.replaceResult = function (params, args) {
+
+        var paramOn, paramSuccess, paramError;
+
+        if (typeof params == 'object') {
+            var paramsObj = self.cloneObject(params);
+            if (paramsObj && paramsObj.on) {
+                paramOn = self.cloneObject(paramsObj.on);
+                delete paramsObj.on;
+            }
+            if (paramsObj && paramsObj.success) {
+                paramSuccess = self.cloneObject(paramsObj.success);
+                delete paramsObj.success;
+            }
+
+            params = self.stringify(params);
+        }
+
+        if (typeof args !== 'string') {
+            params = self.replaceAll(params, '"{result}"', JSON.stringify(args));
+        } else {
+            params = self.replaceAll(params, '{result}', args);
+        }
+
+        /* self.log('replaceResult');
+        self.log('params');
+        self.log(params); */
+        if (self.isJson(params)) { // (typeof params == 'object')  
+            var paramsObj = self.parse(params);
+            if (paramOn) paramsObj.on = paramOn;
+            if (paramSuccess) paramsObj.success = paramSuccess;
+            if (paramError) paramsObj.error = paramError;
+            return paramsObj;
+        } else {
+            //alert(paramsString);
+            return params;
+        }
+
+    };
+
+    /*
+    this.replaceTags = function (params, selectorParams) {
+        self.log('replaceTags');
+        var undef = false;
+
+        if (params.text && (typeof params.text == 'string' || typeof params.text == 'object')) {
+            //alert(params.text);
+
+            params.text = self.stringify(params.text);
+
+            // i tag speciali sono contenuti tra i caratteri { e }
+            if (params.text.indexOf('{') >= 0) {
+                // alert(params.text.indexOf('{'));
+
+                // <{visible:element}>
+                params.text = params.text.replace(/\<\{visible\:([^\}]*)\}\>/g, function(match, p1, offset, string) {
+                    var value = ($(p1).is(':visible'));
+                    return value;
+                });
+
+                // <{var:var.object}>
+                params.text = params.text.replace(/\<\{this\:([^\}]*)\}\>/g, function(match, p1, offset, string) {
+                    var value = self.json[p1];
+                    if (!value) undef = true;
+                    return self.stringify(value);
+                });
+
+                // <{data:value}>
+                    params.text = params.text.replace(/\<\{data\:([^\}]*)\}\>/g, function(match, p1, offset, string) {
+                    var value = self.json.var[p1];
+                    if (!value) undef = true;
+                    return self.stringify(value);
+                });
+
+                params.text = params.text.replace(/\<\{var\:([^\}]*)\}\>/g, function(match, p1, offset, string) {
+                    var value = self.get(p1);
+                    if (!value) undef = true;
+                    return self.stringify(value);
+                });
+
+                params.text = params.text.replace(/\<\{param\:([^\}]*)\}\>/g, function(match, p1, offset, string) {
+                    var value = self.params[p2];
+                    if (!value) undef = true;
+                    return value;
+                });
+
+                // <{value:[id]}>
+                params.text = params.text.replace(/\<\{value\:([^\}]*)\}\>/g, function(match, p1, offset, string) {
+                    var value = $('#'+p1).val();
+                    // https://www.geeksforgeeks.org/html-value-attribute/
+                    if (!value) undef = true;
+                    return value;
+                });
+
+                // <{user:[fieldName]}>
+                params.text = params.text.replace(/\<\{user\:([^\}]*)\}\>/g, function(match, p1, offset, string) {
+                    var value = self.user(p1);
+                    if (!value) undef = true;
+                    return self.stringify(value);
+                });
+
+                // <{time:timestamp}>
+                params.text = params.text.replace(/\<\{time\:timestamp\}\>/g, self.getTimestamp());
+
+                // <{result}>
+                if (params.args) {
+                    params.args = self.stringify(params.args);
+                    params.text = params.text.replace(/\<\{result\}\>/g, params.args);
+                }
+
+                // <{function:app.mac}>
+                params.text = params.text.replace(/\<?\{function:([^\}]*)\}\>?/g, function(match, p1, offset, string) {
+                    var functionName = self.docElement(p1);
+                    return functionName(selectorParams);
+                });
+
+                // <{random}>
+                params.text = params.text.replace(/\<\{random\:([^\-]+)\-([^\}]+)\}\>/g, function(match, p1, p2, offset, string) {
+                    return Number(p1)+Math.round((p2-p1)*Math.random());
+                });
+
+                // <{firebaseKey:path}>
+                params.text = params.text.replace(/\<\{firebaseKey\:([^\}]*)\}\>/g, function(match, p1, offset, string) {
+                    return  self.firebaseKey(p1);
+                });
+
+            }
+            if (undef) return undefined
+            else return self.parse(params.text);
+            
+        } else {
+            //self.log('params.text undefined or number or boolean');
+            return params.text;
+        }
+    } */
+    this.langText = function (textId) {
+        // find text in language and follow the capitalization of textId
+        // we could need text in langId language
+
+        if (textId) {
+            var textValue = textId;
+            if (typeof textId == 'string') {
+                if (self.json.texts[textId]) {
+                    textValue = self.json.texts[textId];
+                    if (typeof textValue == 'object')
+                        textValue = textValue[self.json.setup.language] || textValue['en'] || textValue[Object.keys[0]];
+                }
+                else
+                    textValue = textId;
+            } else if (typeof textId == 'object') {
+                textValue = textId[self.json.setup.language] || textId['en'] || textId[Object.keys[0]];
+                //textValue = textObj[langId] || textObj[self.json.setup.language] || textObj['en'];
+            }
+            return textValue;
+        } else {
+            return textId;
+        }
+
+        /*  if (self.json.texts[textId])
+            textObj = self.json.texts[textId];
+        else if (self.json.texts[textId.toLowerCase()])
+            textObj = self.json.texts[textId.toLowerCase()];
+        //else if (self.json.texts[textId.toUpperCase()])
+        //    textObj = self.json.texts[textId.toUpperCase()];
+        if (textObj) {
+            var textValue = textObj[self.json.setup.language] || textObj['en'] || textId;
+            if (textId.charAt(0) == textId.charAt(0).toUpperCase()) // first char uppercase
+                if (textId.charAt(1) == textId.charAt(1).toUpperCase())
+                    return textValue.toUpperCase();
+                else
+                    return textValue.replace(/\b\w/, l => l.toUpperCase()); // capitalize
+                    // textValue = textValue.charAt(0).toUpperCase() + name.slice(1)
+                    // style: text-transform: capitalize;
+            else
+                return textValue.toLowerCase();
+        } else {
+            return textId;
+        } */
+        /*  } else {
+                self.log('textId undefined in langText');
+            } */
+    };
+
+    this.lang = function (params, args) {
+        if (args) {
+            var value = self.replaceProperties(params, args);
+            self.json.setup.language = value;
+            //alert(value);
+            self.log('lang');
+            self.log(value);
+
+            document.querySelectorAll('[data-text]').forEach(function (element, index) {
+                //$('*[data-text]').each(function( index ) {
+                var dataParams = self.dataStorage.get(element, 'params');
+                var selector = self.dataStorage.get(element, 'selector');
+                /* self.log('index');
+                self.log(index);
+                self.log('dataParams');
+                self.log(dataParams);
+                */
+                //alert(JSON.stringify(dataParams));
+                self.html(dataParams, { selector: selector });
+                //self.text($(this).data('params'), {container: this});
+            });
+
+            /*
+                        var elements = document.querySelectorAll('[data-text]');
+                        self.log('elements');
+                        self.log(elements);
+                        //var elements = document.querySelectorAll(selector);
+                        if (elements)
+                            elements.forEach(function (element, index) {
+                                self.log(index);
+                                //var dataParams = self.dataStorage.get(element, 'params');
+                                var dataSelector = self.attribute(element, 'data-selector');
+                                //self.text(dataParams, {container: dataSelector});
+                                self.text($(dataSelector).data('params'), {container: dataSelector});
+            
+                            });
+                                */
+        } else {
+            return self.json.setup.language;
+        }
+    };
+    // Determine whether is possible to write an image/text to the clipboard.
+    var isClipboardWritingAllowed = function () {
+        return new Promise(function (resolve, reject) {
+            try {
+                navigator.permissions.query({ name: "clipboard-write" }).then(function (status) {
+                    // PermissionStatus object
+                    // {
+                    //  onchange: null,
+                    //  state: "granted" (it could be as well `denied` or `prompt`)
+                    // }
+                    self.log(status);
+
+                    resolve((status.state == "granted"));
+                });
+            } catch (error) {
+                // This could be caused because of a Browser incompatibility or security error
+                // Remember that this feature works only through HTTPS
+                reject(error);
+            }
+        });
+    };
+
+    this.codeSearch = function (params) {
+        let selector = params.selector || params.container;
+        // {container, word}
+        if (selector && params.word) {
+            var element = self.query(selector);
+            var editor = ace.edit(element);
+
+            var range = editor.find(params.word, {
+                wrap: true,
+                caseSensitive: true,
+                wholeWord: true,
+                regExp: false,
+                preventScroll: false // do not change selection
+            });
+            editor.session.selection.clearSelection();
+            editor.setOption("highlightActiveLine", true);
+
+
+            /* range.start.column = 0;
+            range.end.column = Number.MAX_VALUE;
+            //editor.session.replace(range, "x" + editor.session.getLine(range.start.row) + "x");
+            editor.selection.setRange(range); */
+        }
+    };
+
+
+    this.ace = function (params, selectorParams) {
+        // https://codepen.io/zymawy/pen/XwbxoJ
+        //self.log('code');
+        //self.log(params);
+        var selector = params.selector || params.container;
+        var container = selector || self.selector(selectorParams);
+
+        //paramsReplaced = self.cloneObject(params);
+        //paramsReplaced.value = self.actionResult(paramsReplaced.value);
+        var value = params.value;
+
+        // item from library
+        if (params.blocks && self.json.blocks)
+            if (self.json.blocks[params.blocks])
+                value = self.json.blocks[params.blocks];
+
+            else
+                self.log('"code" method can\'t find in "blocks" the element ' + params.blocks);
+        // json file
+        if (params.module) {
+            let moduleName = self.replaceProperties(params.module);
+            if (moduleName && self.modules[moduleName] !== undefined) {
+                value = self.modules[moduleName];
+
+                /* self.log('value');
+                self.log(value);
+                self.log(value); */
+            }
+            else
+                self.log('"code" method can\'t find the file ' + params.file);
+        }
+        if (params.var)
+            if (self.json.var)
+                value = self.var(params.var);
+
+            else
+                self.log('"code" method can\'t find the variable ' + params.blocks);
+
+        var element = self.query(container);
+        //var containerId = $(container).attr('id');
+        //self.log('containerId');
+        //self.log(containerId);
+        //var containerId = $(container).attr('id');
+        if (element) {
+
+            //var containerId = self.attribute(element, 'id'); // or assign a random unique id
+            var editor = ace.edit(element);
+
+            /* var keywordMapper = this.createKeywordMapper({
+                "tag" : 'div|ul|p|a|button|input|span|img|video|audio|source|figure|figcaption|textarea|iframe|table|thead|tbody|tfoot|tr|th|td|svg|small|h1|h2|h3|h4|h5|h6|form|form-group|label|select|option|optgroup|nav|lottie-player|qrcode|tab|model-viewer'
+            }, "identifier"); */
+            /*   var staticWordCompleter = {
+                    getCompletions: function(editor, session, pos, prefix, callback) {
+                        var wordList = ['div', 'ul', 'p', 'a', 'button', 'input', 'span', 'img', 'video', 'audio', 'source', 'figure', 'figcaption', 'textarea', 'iframe', 'table', 'thead', 'tbody', 'tfoot', 'tr', 'th', 'td', 'svg', 'small', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'form', 'form-group', 'label', 'select', 'option', 'optgroup', 'nav', 'lottie-player', 'qrcode', 'tab', 'model-viewer'];
+                        callback(null, wordList.map(function(word) {
+                            return {
+                                caption: word,
+                                value: word,
+                                meta: "static"
+                            };
+                        }));
+                
+                    }
+                }
+                
+                //langTools.setCompleters([staticWordCompleter])
+                // or
+                editor.completers = [staticWordCompleter] */
+            /* if (editor)
+                AceColorPicker.load(ace, editor); */
+            //var value = paramsReplaced.value; // else value = params;
+            if (!params.do || (params.do == 'set')) {
+
+                //var langTools = ace.require('ace/ext/language_tools');
+                if (params.theme)
+                    editor.setTheme(params.theme); // "ace/theme/monokai"
+                var editorMode = params.mode || "ace/mode/json";
+                editor.getSession().setMode(editorMode);
+
+                if (params.options)
+                    editor.setOptions(params.options);
+                //AceColorPicker.load(ace, editor, {hideDelay: 1000});
+                //import AceColorPicker from 'ace-colorpicker'; 
+                /* editor.getSession().setMode(editorMode, () => {
+                    AceColorPicker.load(ace); // , {hideDelay: 1000}
+                }); */
+                var editorStyle = self.extend({
+                    //background: "rgba(255,255,255,0)"
+                }, params.style);
+                //$(container).css(editorStyle); //editor.container.style
+                self.css({
+                    style: editorStyle
+                }, {
+                    selector: container
+                });
+
+                //var aceOptions = params.options;
+                /* var aceOptions = self.extend({
+                    fontSize: "12pt",
+                    selectionStyle: "line",
+                    //showGutter: false,
+                    highlightGutterLine: false,
+                    fixedWidthGutter: false,
+                    //vScrollBarAlwaysVisible: true,
+                    tabSize: 3,
+                    //readOnly: true,
+                    //enableBasicAutocompletion: false,
+                    //enableSnippets: false,
+                    //enableLiveAutocompletion: false,
+                }, params.options); */
+                // https://github.com/ajaxorg/ace/wiki/Configuring-Ace
+                var codeString;
+                if (typeof value == 'string')
+                    if (editorMode == "ace/mode/json")
+                        codeString = JSON.stringify(JSON.parse(value), null, '\t'); // json formatting
+
+                    else
+                        codeString = value;
+                else {
+                    if (editorMode == "ace/mode/json")
+                        codeString = JSON.stringify(value, null, '\t');
+                    else {
+                        var functionObj = self.docElement(value.function); //?
+                        var functionParams = value.params;
+                        codeString = functionObj(functionParams);
+                    }
+                }
+
+                // should be {lines:dividcode}
+                if (codeString) {
+                    var codeRows = codeString.split(/\r\n|\r|\n/).length;
+                    /* $(container).css({
+                        height: Number(21 * (codeRows)) + 'px'
+                    }); */
+                    /* self.log('element');
+                    self.log(element);
+                    self.log('container');
+                    self.log(container);
+                    self.log('codeRows');
+                    self.log(codeRows); */
+                    element.style.height = Number(21 * codeRows) + 'px';
+
+
+                    //element.querySelector('.ace_scroller').querySelector('.ace_content').height = Number(21 * codeRows) + 'px';
+                    /* self.css({
+                        style: {
+                            height: Number(21 * codeRows) + 'px'
+                        }
+                    }, {
+                        container: container
+                    }); */
+                    editor.setValue(codeString, -1); // -1 unselect the code
+
+
+
+                    //editor.renderer.updateFull(true);
+                    //AceColorPicker.load(ace, ace.edit(containerId));
+                    self.uiUpdate(); // resize event trigger
+
+
+                    // workaround known ACE bug (.ace_content element doesn't follow the height until window resize)
+                }
+
+                if (params.on) {
+
+                    var containerId = self.attribute(element, 'id'); // or assign a random unique id
+                    self.codeChangeFunctions[containerId] = params.on;
+                    //self.editorChangeFunctions[editor.id] = params.on;
+                    if (params.on.change) {
+                        editor.on('change', function (event, obj) {
+                            /* self.log('event');
+                            self.log(event);
+                            self.log('obj');
+                            self.log(obj); */
+                            if (self.isJson(obj.getValue())) {
+                                var code = JSON.parse(obj.getValue());
+                                var action = self.codeChangeFunctions[obj.container.id].change;
+                                //var methods = self.replaceResult(action, code);
+                                var methods = self.replaceResult(action, code);
+
+                                //var methods = self.replaceProperties(action, code); 
+                                // check on jsonic.io/play (methods is string instead of object)
+                                /* self.log('code');
+                                self.log(code);
+                                self.log('method');
+                                self.log(method);
+                                self.log('-------------'); */
+                                //self.do(methods);
+                                self.do(methods);
+                                //self.do(code, self.editorChangeFunctions[obj.id]);
+                                //var container = self.editorChangeFunctions[obj.id].change.container;
+                            } else {
+                                // syntax error
+                            }
+                            //self.do(self.editorChangeFunctions[obj.id].change, JSON.parse(obj.getValue()));
+                            //self.log(obj);
+                            //self.blocks(JSON.parse(obj.getValue()), {container: });
+                        });
+                    }
+
+                    // save key
+                    // https://michilehr.de/overwrite-cmds-and-ctrls-in-javascript
+                }
+
+
+            } else if (params.do == 'get') {
+                return JSON.parse(editor.getValue());
+
+            } else if (params.do == 'update') {
+
+                self.uiUpdate(); // resize event trigger
+
+
+                // workaround known ACE bug (.ace_content element doesn't follow the height until window resize)
+            } else if (params.do == 'search') {
+                if (params.word) {
+                    var range = editor.find(params.word, {
+                        wrap: true,
+                        caseSensitive: true,
+                        wholeWord: true,
+                        regExp: false,
+                        preventScroll: false // do not change selection
+                    });
+                    editor.session.selection.clearSelection();
+                    editor.setOption("highlightActiveLine", true);
+                    /* range.start.column = 0;
+                    range.end.column = Number.MAX_VALUE;
+                    //editor.session.replace(range, "x" + editor.session.getLine(range.start.row) + "x");
+                    editor.selection.setRange(range); */
+                }
+            } else if (params.do == 'find') {
+                // toggle
+                editor.execCommand('find');
+                //editor.searchBox.show();
+            } else if (params.do == 'copy') {
+                // Select the whole content of the editor
+                editor.selectAll();
+                // Store text that will be copied to clipboard
+                let copyText = editor.getCopyText();
+                // Verify if clipboard writing is allowed
+                isClipboardWritingAllowed().then(function (allowed) {
+                    // Write to clipboard if allowed
+                    if (allowed) {
+                        navigator.clipboard.writeText(copyText).then(function () {
+                            editor.getSession().selection.clearSelection();
+                            //self.log("Code copied!");
+                        });
+                    }
+                }).catch(function (err) {
+                    self.log("Cannot copy to clipboard", err);
+                });
+            } else {
+                self.log('"code" function requires value param');
+            }
+        } else {
+            self.log('"code" method can\'t select the container');
+            self.log('container');
+            self.log(container);
+            self.log('element');
+            self.log(element);
+        }
+
+    };
+
+    // TO DO: should be in the app var and reset on a new execution 
+    this.codeChangeFunctions = {};
+    this.editorChangeFunctions = {};
+    this.quillElements = {};
+
+    this.text = function (params, selectorParams, args) {
+        /*
+            {
+                "text": / "string": / textId -> textId   "{text:textId}"
+                "case": [up, down, capitalize]
+            }
+            */
+
+
+        /* if (Array.isArray(params)) {
+            for (var obj of params)
+                self.text(obj, selectorParams, args);
+        } else { */
+        var textKey;
+        var textCase;
+        var textArgs;
+        var textLang;
+        var langId;
+        var selector, element;
+        //var textAction;
+        if (typeof params == 'object') {
+
+            if (selectorParams && selectorParams.isConnected) { // Check if an element is attached to DOM
+                element = selectorParams;
+                //selector = self.dataStorage.get(element, 'selector');
+                //selector = element.getAttribute('data-selector');
+                selector = self.elementToSelector(element); // 1.0.12
+            } else {
+                selector = self.selector(self.extend({}, params, selectorParams));
+                element = self.query(selector);
+            }
+
+            // todo: REMOVE (check the menu)
+            //textAction = self.actionResult(params, textArgs);
+            //textAction = params;
+            //textKey = params.string; //  || params.text || params.title; // params.key to be removed?
+            textCase = params.case; // use text-transform uppercase lowercase capitalize
+            textArgs = params.args; // deve diventare args (secondo parametro) al posto di caseFunction
+
+
+            //langId = params.langId;
+            if (typeof params == 'object') {
+
+                textKey = params.key || params.string || params; //  || params.text || params.title; // params.key to be removed?
+
+
+
+
+
+
+                //textCase = params.case; // use text-transform uppercase lowercase capitalize
+                //textArgs = params.args; // deve diventare args (secondo parametro) al posto di caseFunction
+                //langId = params.langId;
+            } else {
+                textKey = params;
+            }
+
+            /* self.log('textKey');
+            self.log(textKey); */
+        } else if (typeof params == 'string') {
+            textKey = params;
+
+            /* self.log('textKey');
+            self.log(textKey); */
+            //textCase = caseFunction;
+            if (selectorParams) {
+                if (selectorParams.isConnected) { // Check if an element is attached to DOM
+                    element = selectorParams;
+                    selector = self.dataStorage.get(element, 'selector');
+                } else {
+                    selector = self.selector(selectorParams);
+                    element = self.query(selector);
+                }
+            } else {
+                // here when windowTitle += ' ' + self.text(page.title); // window title
+            }
+        }
+
+        if (typeof textKey == 'string') {
+
+            /* // TO DO: remove
+            if (textKey.startsWith('js:')) textKey = self.js(textKey.substr(3));
+            else if (textKey.startsWith('db:')) textKey = self.element({path: 'var.db.'+textKey.substr(3)});
+            else if (textKey.startsWith('var:')) textKey = self.element({path: 'var.'+textKey.substr(4)});
+            else if (textKey.startsWith('data:')) textKey = self.element({path: 'data.'+textKey.substr(5)});
+                else
+                // ----- */
+            /* console.log('textKey');
+            console.log(textKey); */
+            textKey = self.replaceProperties(textKey, textArgs);
+            /* console.log('textKey');
+            console.log(textKey); */
+        }
+
+        //self.log('selector');
+        //self.log(selector);
+        //self.log(selector.isConnected);
+        /* self.log('HOTSPOT');
+        self.log(params);
+        self.log(self.json.setup.language); */
+        if (params && params.lang) { // multi-language text
+
+            //self.log('params.lang definito');
+            textLang = self.langText(params.lang); // , langId
+
+            //textLang = params.lang[self.json.setup.language] || params.lang['en'] || params.lang[Object.keys[0]];
+            textLang = self.replaceProperties(textLang, textArgs);
+
+            /* self.log('textLang');
+            self.log(textLang);
+            self.log('element');
+            self.log(element); */
+            if (textCase) textLang = self.textCase(textLang, textCase);
+
+            //self.log('textLang');
+            //self.log(textLang);
+            if (element) {
+                element.textContent = textLang;
+                self.attribute(element, 'data-text', true); // textKey instead of lang?
+                self.dataStorage.set(element, 'params', params);
+                //$(selector).data('params', params);
+            }
+
+        } else {
+            //self.log('params.lang non definito');
+            //if (!textKey) textKey = params;
+            if (textKey) {
+                //textKey = self.compile(textKey, textArgs); // TO DO: verify
+                /* self.log('textKey');
+                self.log(textKey); */
+                //if (!textKey) alert(JSON.stringify(params));
+                //if (typeof textKey == 'object') {
+                //    textLang = JSON.stringify(textKey, null, '\t');
+                //} else {
+                //textLang = params.lang[self.json.setup.language] || params.lang['en'] || params.lang[Object.keys[0]];
+                if (textKey.lang) // multi-language text
+                    textLang = self.langText(textKey.lang); // , langId
+
+                else
+                    textLang = textKey;
+
+                /* self.log('textLang1');
+                self.log(textLang); */
+                textLang = self.replaceProperties(textLang, textArgs); // move after textLang = self.langText(textKey.lang);
+                if (textCase) textLang = self.textCase(textLang, textCase);
+
+                //}
+                /* self.log('textLang2');
+                self.log(textLang); */
+                //if (selector) { // set
+                if (element) { // set
+
+                    if (self.json.texts[textKey]) {
+                        // save data-text for lang change
+                        //$(selector).data('params', params);
+                        //$(selector).attr('data-text', textKey);
+                        self.attribute(element, 'data-text', true);
+                        self.dataStorage.set(element, 'params', params);
+                    }
+
+                    // obsolete      
+                    /* if (params.background) $(selector).css({'background': params.background});
+                    if (params.color) $(selector).css({'color': params.color});
+                    if (params.size) $(selector).css({'font-size': params.size}); */
+                    if (params.style)
+                        self.css({
+                            style: params.style
+                        }, {
+                            selector: selector
+                        });
+                    //$(selector).css(params.style);
+                    element.textContent = textLang; // put text in element
+
+
+                    //$(selector).text(textLang);
+                } else { // get
+                    return textLang;
+                }
+
+            } else {
+                /* self.log('"string" parameter required in text object');
+                self.log(params); */
+                return params;
+            }
+
+        }
+
+    };
+
+    var caseUp = function (string) {
+        return string.toUpperCase();
+    };
+
+    var caseDown = function (string) {
+        return string.toLowerCase();
+    };
+
+    var capitalize = function (string) {
+        return self.capitalize(string);
+    };
+
+    this.textCase = function (textParam, caseParam) {
+        if (textParam) {
+            var text = textParam;
+            switch (caseParam) {
+                case 'up':
+                    text = text.toUpperCase();
+                    break;
+
+                case 'down':
+                    text = text.toLowerCase();
+                    break;
+
+                case 'capitalize':
+                    text = self.capitalize(text);
+                    break;
+            }
+            return text;
+        } else {
+            self.log('textParam undefined in textCase');
+        }
+    };
+
+    /* this.textFit = function (selector,params) {
+        if (params.alignHoriz == undefined) {
+            params.alignHoriz = true;
+        }
+        if (params.alignVert == undefined) {
+            params.alignVert = true;
+        }
+        if (params.minFontSize) {
+            params.minFontSize = parseInt(params.minFontSize, 10); // remove px
+        }
+        if (params.maxFontSize) {
+            params.maxFontSize = parseInt(params.maxFontSize, 10); // remove px
+        }
+
+        // textFit va in errore se l'oggetto diventa invisibile
+        // mentre sta elaborando la dimensione del testo
+        if (!$(selector).children('span').hasClass('textFitted')) {
+            $(selector).each(function(i, obj) {
+                if ($(obj).is(":visible")
+                    && ($(obj).css("display") !== 'none')
+                    && ($(obj).css('width'))
+                    && ($(obj).css('height'))) {
+                    textFit($(obj), params);
+                }
+            });
+        }
+    } */
+    /*  this.data = function (path, value) {
+        if (!value) return self.json.var;
+    }
+
+    this.setvar = function (data) {
+        var = self.data();
+        self.data(data);
+    } */
+    // --------------
+    //  PAGES
+    // --------------
+    /* this.lastInteraction = function () {
+        // uso: self.lastInteraction().asMinutes()
+        var lastInteraction = 0;
+        if (var.touchTime) lastInteraction = moment(var.touchTime);
+        var thisMoment = moment();
+        var duration = moment.duration(thisMoment.diff(lastInteraction));
+        return duration
+    } */
+    // --------------
+    //  icons e
+    // --------------
+    /*         this.icons = this.icon = function (params, selectorParams, args) {
+            // { [container, class, value, id]
+            // [html, text, append, prepend] }
+    
+            if (Array.isArray(params)) {
+                    for (var index in params)
+                    {self.icons(params[index], selectorParams);}
+            } else {
+                if (params.items) {
+                    var itemsArray = params.items;
+                    delete params.items;
+                    for (var index in itemsArray) {
+                        self.icons(self.replaceItems(params, itemsArray[index]), selectorParams);
+                    }
+                } else {
+    
+                    //if (selectorParams) params = self.extend(params, selectorParams);
+    
+                    var paramsReplaced = self.replaceProperties(params, args);
+    
+                    self.log('icons');
+                    self.log('paramsReplaced');
+                    self.log(paramsReplaced);
+    
+                    if (paramsReplaced) {
+                        if (paramsReplaced.disabled == true)
+                            self.disableIcon(paramsReplaced, selectorParams);
+                        else if (paramsReplaced.disabled == false)
+                            self.enableIcon(paramsReplaced, selectorParams);
+                        else if (paramsReplaced.change)
+                            self.changeItem(paramsReplaced, selectorParams);
+                        else
+                            self.addItem(paramsReplaced, selectorParams);
+                    }
+    
+                    if (paramsReplaced.firebase) self.addFirebaseTag(paramsReplaced);
+    
+                    var selector = self.selector(self.extend(paramsReplaced, selectorParams));
+    
+                    if (paramsReplaced.span) // text near icon
+                        self.addTag(paramsReplaced, {container: selector});
+    
+                }
+            }
+        } */
+    /*         this.buttons = this.tab = function (params, selectorParams) {
+    
+            // { [container, class, value, id]
+            // [html, text, append, prepend] }
+            if (Array.isArray(params)) {
+                    for (var index in params)
+                        self.tab(params[index], selectorParams);
+            } else {
+                if (params.items) {
+                    var itemsArray = params.items;
+                    delete params.items;
+                    for (var index in itemsArray) {
+                        self.tab(self.replaceItems(params, itemsArray[index]), selectorParams);
+                    }
+                } else {
+    
+                    // se necessario, replaceProperties dovrebbe escludere il contenuto di events/action
+                    // in quanto verrà ripetuto sulle azioni in tempo reale solo dove necessario
+                    //params = self.replaceProperties(params);
+    
+                    if (!params.class) params.class = '';
+                    var classes = params.class.split(' ');
+                    
+                    if (params.change) {
+                        if (classes.includes('icon'))
+                            self.changeItem(params, selectorParams);
+                        else // if (classes.includes('tabs'))
+                            self.changeTab(params, selectorParams);
+                    } else {
+                        if (classes.includes('icon'))
+                            self.addItem(params, selectorParams);
+                        else // if (classes.includes('tabs'))
+                            self.addTab(params, selectorParams);
+                    }
+    
+                    if (params.firebase) self.addFirebaseTag(params);
+    
+                }
+            }
+        }
+    */
+    /*
+    this.replacePropertyNew = function (params, name, args) {
+        console.log('replacePropertyNew');
+        // like replaceProperties but only for {name:...} property
+        var paramsString;
+
+        if (typeof paramsString !== 'string') {paramsString = JSON.stringify(self.cloneObject(params));}
+        
+        // remove string quotes for object property
+        if (args && paramsString && paramsString.indexOf('{')>= 0) {
+        //if (args && paramsString && /{\w/.test(paramsString)) {
+            paramsString = paramsString.replace(/\"\{(\w+\:)?([\w\s\.\:]+)\}\"/g, function(match, p1, p2, offset, string) {
+                var value;
+                if (p1 && p1.endsWith(':')) {p1 = p1.slice(0, -1);}
+                console.log('match:'+match);
+                console.log('p1:'+p1);
+                console.log('p2:'+p2);
+                if (p1 == name || (!p1 && p2 == name)) {
+                    let nameFound = p1 || p2;
+                    let pathFound = (p1) ? p2 : undefined;
+                    console.log(nameFound+':'+pathFound);
+                    if (typeof args !== 'string') {
+                        //return self.replaceAll(self.stringify(args), '\"', '\'');
+                        return self.stringify(args);
+                    } else {
+                        return '"' + args + '"';
+                    }
+                } else
+                    return match;
+            });
+            //console.log('paramsString without quotes');
+            //console.log(paramsString);
+            paramsString = paramsString.replace(/\{(\w+\:)?([\w\s\.\:]+)\}/g, function(match, p1, p2, offset, string) {
+                var value;
+                if (p1 && p1.endsWith(':')) {p1 = p1.slice(0, -1);}
+                if (p1 == name || (!p1 && p2 == name)) {
+                    let nameFound = p1 || p2;
+                    let pathFound = (p1) ? p2 : undefined;
+                    console.log(nameFound+':'+pathFound);
+                    self.partSetup = args;
+                    if (pathFound) {
+                        value = self.docElement('self.partSetup.'+pathFound);
+                    } else {
+                        value = args;
+                    }
+                    console.log('value:'+value);
+                    delete self.partSetup;
+                } else {
+                    value = match
+                }
+                if (typeof value !== 'string') value = self.stringify(value);
+                return value;
+            });
+            if (self.isJsonString(paramsString)) {// (typeof params == 'object')
+                console.log('isJsonString');
+                var paramsObj = self.parse(paramsString);
+                return paramsObj;
+            } else {
+                console.log('NOT isJsonString');
+                console.log(paramsString);
+                // TO DO: log of wrong json string
+                return paramsString;
+            }
+        } else {
+            return params
+        }
+    }
+    */
+    this.replaceUndefined = function (params) {
+        let value, defaultValue;
+        //if (params.path == 'badge') alert();
+        if (typeof params.path !== undefined) {
+            if (params.path.indexOf('|') > 0)
+                [params.path, defaultValue] = params.path.split('|');
+            value = self.element({ path: params.path, root: params.root });
+        }
+        if (value == undefined || value == null) { // empty string is false
+            if (typeof defaultValue !== undefined)
+                value = defaultValue;
+            else {
+                if (params.removeUndefined) { //p1 == 'args' || p1 == 'selector') {
+                    value = ''; // remove undefined values
+                } else {
+                    value = params.match;
+                    self.log(value + ' not found', 'yellow');
+                }
+            }
+        } else {
+            //console.log('match:'+params.match);
+            //if (params.removeUndefined) value = '';
+        }
+        return value;
+    };
+    //value = self.replaceUndefined({match: '{'+match+'}', id:p1, removeUndefined: removeUndefined});
+    this.replaceProperties = function (params, args, removeUndefined) {
+        // TO DO: remove fieldsObj. can't find replaceProperties with 3 args
+        // the third parameter can be removeUndefined
+        // test with a firebase app like elio
+
+        var paramsString;
+        var paramOn, paramDo, paramSuccess, paramError, paramEvents, paramConfirm;
+        if (typeof params == 'string') {
+            paramsString = params;
+        } else {
+            //paramsString = JSON.stringify(params);
+            var paramsObj = self.cloneObject(params);
+            if (paramsObj) {
+                if (paramsObj.on) { paramOn = paramsObj.on; delete paramsObj.on; }
+                if (paramsObj.success) { paramSuccess = paramsObj.success; delete paramsObj.success; }
+                if (paramsObj.error) { paramError = paramsObj.error; delete paramsObj.error; }
+                if (paramsObj.events) { paramEvents = paramsObj.events; delete paramsObj.events; } // TO DO: remove
+                if (paramsObj.confirm) { paramConfirm = paramsObj.confirm; delete paramsObj.confirm; } // TO DO: check it
+                if (paramsObj.do) { paramDo = paramsObj.do; delete paramsObj.do; }
+            }
+            paramsString = JSON.stringify(paramsObj);
+        }
+        /* self.log("paramsString");
+        self.log(paramsString); */
+        if (paramsString && paramsString.indexOf('{') >= 0) {
+
+            paramsString = paramsString.replace(/\"\{([\w\s\.]+)\}\"/g, function (match, p1, offset, string) {
+                var value;
+                if (p1) {
+                    //self.log('p1:' + p1);
+                    //value = self.element({path: p1}); // || match;
+                    value = self.replaceUndefined({ match: '{' + match + '}', path: p1, removeUndefined: removeUndefined });
+                    if (value) {
+                        if (value.isConnected) return self.elementToSelector(value); // DOM element to CSS selector
+                        if (typeof value !== 'string')
+                            return self.stringify(value); // object or array to string (TO DO: check numbers)
+                        else {
+                            //console.warn('we are here');
+                            return '"' + value + '"';
+                        }
+                    }
+                    else
+                        return '""';
+                } else {
+                    return '""';
+                }
+            });
+
+            paramsString = paramsString.replace(/\{(\w+\:)?([\w\s\->|\/=\.:#&;,\[\]\']+)\}/g, function (match, p1, p2, offset, string) {
+                /*
+                        Firebase references may contain any unicode characters except:
+                        . (period)
+                        $ (dollar sign)
+                        [ (left square bracket)
+                        ] (right square bracket)
+                        # (hash or pound sign)
+                        / (forward slash)
+                    */
+
+                /* self.log("paramstring");
+                self.log(match, p1, p2); */
+                // self.log(match, p1, p2);
+                var value;
+                if (p1) {
+                    if (p1.endsWith(':')) {
+                        p1 = p1.slice(0, -1); // remove the final ":"
+
+
+                        // check if is a function name (in this.json.functions)
+                        if (self.functions[p1]) {
+                            //value = self.functions[p1](JSON.parse(p2));
+                            let funcArgs = p2.split('|');
+                            /* console.warn('p2');
+                            console.warn(p2);
+                            console.warn('funcArgs');
+                            console.warn(funcArgs); */
+                            // if Number(funcArgs[i]) == funcArgs[i] -> funcArgs[i] = Number(funcArgs[i]);
+                            value = self.function({ name: p1, arguments: [funcArgs] });
+                        } else {
+                            switch (p1) {
+
+                                /* case 'hasClass':
+                                    var element = document.querySelector(p2);
+                                    if (p3)
+                                        value = self.hasClass(el,p3);
+                                    else
+                                        value = false; el:selector.class (esiste l'elemento selector.class o l'elemento selector ha la classe class)
+                                break; */
+                                // 'isVisible', 'isHidden', 'isDisplay', 'inViewport', 'outViewport', 'notClass', 'hasClass'
+                                // hasClass da aggiungere come funzione css
+                                // html markups
+                                // 'b:string' 'i:string' 'u:string' 'a:STRING|URL'
+                                /* case 'i': case 'b': case 'u': case 'strong': case 'em': case 'mark': case 'del': case 'ins': case 'sub': case 'sup':
+                                    value = '<'+p1+'>'+p2+'</'+p1+'>';
+                                break;
+                                
+                                case 'a':
+                                // example: "{a:text|href:....|target:_blank}"
+                                    let props = p2.split('|'); // or indexOf(':') prima occorrenza
+                                    let string = props.shift();
+                                    var propsString = '';
+                                    for (var prop of props) {
+                                        //let propArr = prop.split(':'), propName = propArr[0], propValue = propArr[1];
+                                        propsString += ' ' + prop;
+                                    }
+                                    if (propsString == '') propsString = ' href="'+string+'"';
+                                    value = '<a'+propsString+'>'+string+'</a>';
+
+                                    // https://stackoverflow.com/questions/1547899/which-characters-make-a-url-invalid
+                                    // https://www.w3schools.com/tags/tag_a.asp
+                                break;
+                                */
+                                // DOM properties
+                                case 'visible':
+                                    var element = document.querySelector(p2); // self.query(p2);
+                                    value = (element && self.isVisible(element));
+                                    //value = ($(p2).is(':visible'));
+                                    break;
+
+                                case 'number':
+                                    value = Number(p2);
+                                    break;
+
+                                case 'string':
+                                    value = String(p2);
+                                    break;
+
+                                case 'js': // deprecated (too much special characters like {})
+                                    try {
+                                        value = eval(p2);
+                                    } catch (error) {
+                                        value = '';
+                                        self.log('javascript error on ' + p2);
+                                        self.log(error);
+                                    }
+                                    break;
+
+                                /* case 'item':
+                                    if (fieldsObj) {
+                                        //self.log('fieldsObj['+p2+']:'+fieldsObj[p2]);
+                                        value = fieldsObj[p2] || ''; //|| p2+'=NULL';
+                                    } else {
+                                        //self.log('p2:'+p2);
+                                        //self.log('fieldsObj == undefined');
+                                        value = '{'+p1+':'+p2+'}';
+                                    }
+                                break; */
+                                /* case 'item':
+                                case 'items':
+                                    value = self.docElement('self.json.items.'+p2);
+                                break; */
+                                /*  case 'frame':
+                                        var element = self.query(p2);
+                                        element.contentWindow
+                                    break; */
+                                /* case 'field':
+                                    if (fieldsObj) {
+                                        //self.log('fieldsObj['+p2+']:'+fieldsObj[p2]);
+                                        value = fieldsObj[p2] || ''; // || p2+'=NULL';
+                                    } else {
+                                        //self.log('p2:'+p2);
+                                        //self.log('fieldsObj == undefined');
+                                        value = '';
+                                    }
+                                break; */
+                                /* case 'setup':
+                                value = self.docElement('self.json.setup.'+p2) || match;
+                                break; */
+                                /*
+                                                            case 'setup':
+                                                                if (args) {
+                                                                    self.partSetup = args;
+                                                                    value = self.docElement('self.partSetup.'+p2);
+                                                                    delete self)Setup;
+                                                                } else {
+                                                                    value = '';
+                                                                }
+                                                            break; */
+                                case 'wp':
+                                case 'wordpress':
+                                    // TO DO: should get/set data with jsonic.get/setWordpressData
+                                    // setWordpressData can be done automatically in the init
+                                    value = self.docElement('self.json.setup.wordpress.' + p2) ?? match;
+                                    //alert(value);
+                                    //if (value.indexOf('"') >= 0) 
+                                    //    value = self.replaceAll(value, '"', '\\"');
+                                    // the first should replace only " and not \" but it doesn't works
+                                    //value = value.replaceAll(/([^\\\"])\"/g, '$1\\"');
+                                    break;
+
+                                case 'plugins':
+                                    value = self.json.resources.pluginsFunctions[p2];
+                                    if (value && !Array.isArray(value)) value = [value];
+                                    else value = [];
+                                    /* self.log('plugins');
+                                    self.log('value');
+                                    self.log(value); */
+                                    /* value = plugins;
+                                    for (plugin of plugins) {
+                                        value = self.json.resources.pluginsFunctions[p2].name || 'unknown plugin required';
+                                    } */
+                                    break;
+
+                                case 'database':
+                                case 'db':
+                                    value = self.docElement('self.json.var.db.' + self.replaceProperties(p2, args));
+                                    break;
+
+                                // shorteners (useful?)
+                                case 'media': // or m or src
+                                    if (self.json.setup && self.json.data.media)
+                                        value = self.docElement('self.json.data.media.' + p2) || match;
+
+                                    else
+                                        value = match;
+                                    break;
+
+                                case 'color': // or col
+                                    if (self.json.data && self.json.data.colors)
+                                        value = self.docElement('self.json.data.colors.' + p2) || match;
+
+                                    else
+                                        value = match;
+                                    break;
+
+                                case 'class': // or cla
+                                    if (self.json.data && self.json.data.class)
+                                        value = self.docElement('self.json.data.class.' + p2) || match;
+
+                                    else
+                                        value = match;
+                                    break;
+
+                                case 'text':
+                                    value = self.langText(p2);
+                                    break;
+
+                                case 'param':
+                                    value = self.params[p2] || ''; // || p2+'=NULL';
+                                    break;
+
+                                case 'height':
+                                    /* self.log('{height:p2}');
+                                    self.log('p2');
+                                    self.log(p2); */
+                                    var element = document.querySelector(p2); // self.query(p2);
+                                    if (element) // && self.isVisible(element)
+                                        //value = getComputedStyle(element, null).height;
+                                        value = element.offsetHeight + 'px';
+
+
+
+                                    //if ($(p2).is(':visible'))
+                                    //value = $(p2).height() + 'px'
+                                    else
+                                        value = '0px';
+                                    break;
+
+                                case 'offsetWidth':
+                                    var element = document.querySelector(p2); // self.query(p2);
+                                    if (element) // && self.isVisible(element)
+                                        //value = getComputedStyle(element, null).height;
+                                        value = element.offsetWidth;
+
+
+
+                                    //if ($(p2).is(':visible'))
+                                    //value = $(p2).height() + 'px'
+                                    else
+                                        value = '0';
+                                    break;
+
+                                case 'width':
+                                    var element = document.querySelector(p2); // self.query(p2);
+                                    if (element) // && self.isVisible(element)
+                                        //value = getComputedStyle(element, null).height;
+                                        value = element.offsetWidth + 'px';
+
+
+
+                                    //if ($(p2).is(':visible'))
+                                    //value = $(p2).height() + 'px'
+                                    else
+                                        value = '0px';
+                                    break;
+
+                                case 'local':
+                                    value = self.methods.local.get(p2);
+                                    //self.log('{localStorage:cart}');
+                                    //self.log(value);
+                                    break;
+
+                                case 'ace':
+                                    var element = document.querySelector(p2);
+                                    if (element) {
+                                        var editor = ace.edit(element);
+                                        value = JSON.parse(editor.getValue());
+                                    }
+                                    //self.log('{localStorage:cart}');
+                                    //self.log(value);
+                                    break;
+
+                                /* case 'innerText':
+                                    var element = document.querySelector(p2);
+                                    value = (element) ? element.innerText : undefined;
+                                    self.log('p1:'+p1);
+                                    self.log('p2:'+p2);
+                                    self.log('value:'+value);
+                                    //.trisBox[data-value="0"]
+                                break;
+
+                                case 'innerHtml':
+                                    var element = document.querySelector(p2);
+                                    value = (element) ? element.innerHTML : undefined;
+                                break; */
+                                case 'shuffle':
+                                    value = self.element({ path: p2 });
+                                    value = self.methods.shuffle(value);
+                                    break;
+
+                                case 'select':
+                                case 'input':
+                                case 'value': // deprecated
+
+                                    var element = document.querySelector(p2); // self.query(p2);
+                                    value = (element) ? String(element.value || '') : '';
+
+                                    //value = $('#'+p2).val() || ''; //|| p2+'=NULL';
+                                    // input field value
+                                    // https://www.geeksforgeeks.org/html-value-attribute/
+                                    break;
+
+                                case 'user':
+                                    if (p2 == 'in') {
+                                        value = self.userIn();
+                                    } else if (p2 == 'out')
+                                        value = self.userOut();
+
+                                    else
+                                        value = self.user(p2) || match; //|| p2+'=NULL';
+                                    break;
+
+                                // can go in objects
+                                case 'length':
+                                    var varObj = self.element({ path: p2 }); // to get also js objects length
+
+                                    //var varObj = self.docElement('self.json.'+p2);
+                                    if (varObj)
+                                        if (typeof varObj == 'object')
+                                            value = Object.keys(varObj).length;
+
+                                        else
+                                            value = varObj.length;
+
+                                    else
+                                        self.log('' + p2 + ' is undefined');
+                                    break;
+
+                                case 'Date':
+                                case 'time':
+                                    if (p2 == 'timeZone') value = new Intl.DateTimeFormat().resolvedOptions().timeZone;
+                                    else if (p2 == 'weekday') value = self.weekday();
+                                    else if (p2 == 'stamp') value = self.getTimestamp();
+                                    else if (p2 == 'timestamp') value = self.getTimestamp();
+                                    else if (p2 == 'getTimestamp') value = self.getTimestamp();
+                                    else if (p2 == 'getDay') value = new Date().getDay();
+                                    else if (p2 == 'getDate') value = new Date().getDate();
+                                    else if (p2 == 'getMonth') value = new Date().getMonth();
+                                    else if (p2 == 'getFullYear') value = new Date().getFullYear();
+                                    else if (p2 == 'getTime') value = new Date().getTime(); // timestamp
+                                    else if (p2 == 'getSeconds') value = new Date().getSeconds();
+                                    else if (p2 == 'getMinutes') value = new Date().getMinutes();
+                                    else if (p2 == 'getHours') value = new Date().getHours();
+
+                                    // second, minute, hour, weekday, day, month, year
+                                    else value = p2 + '=NULL';
+                                    break;
+
+                                case 'now':
+                                    // ...
+                                    break;
+
+                                case 'month':
+                                    var month = (p2 == 'today' || p2 == undefined) ? new Date().getMonth() : Number(p2);
+                                    value = self.month(month);
+                                    break;
+
+                                case 'weekday': // format: long, short, narrow
+                                    var day = (p2 == 'today' || p2 == undefined) ? new Date().getDay() : Number(p2);
+                                    value = self.calendar({ index: Number(day), unit: 'weekday', format: 'long' });
+                                    break;
+
+                                case 'weekdayNarrow': // format: long, short, narrow
+                                    var day = (p2 == 'today' || p2 == undefined) ? new Date().getDay() : Number(p2);
+                                    value = self.calendar({ index: Number(day), unit: 'weekday', format: 'narrow' });
+                                    break;
+
+                                case 'weekdayShort': // format: long, short, narrow
+                                    var day = (p2 == 'today' || p2 == undefined) ? new Date().getDay() : Number(p2);
+                                    value = self.calendar({ index: Number(day), unit: 'weekday', format: 'short' });
+                                    break;
+
+                                case 'moment':
+                                    var timeFormat = (p2) ? p2 : '';
+                                    value = moment().format(timeFormat);
+                                    break;
+
+                                case 'dayjs': // TO DO: check
+                                    var timeFormat = (p2) ? p2 : '';
+                                    value = dayjs().format(timeFormat);
+                                    break;
+
+                                case 'Math':
+                                    value = self.Math(p2);
+                                    break;
+
+
+                                case 'action':
+                                case 'do':
+                                    self.log('do');
+                                    self.log('p2');
+                                    self.log(p2);
+                                    //value = self.do(p2); // || match; // TO DO: log error
+                                    value = self.do(p2); // || match; // TO DO: log error
+
+
+
+
+                                    //var functionName = self.docElement(p2);
+                                    //value = (functionName) ? functionName(functionName) : p2+'=NULL'
+                                    break;
+
+                                /* WITH ARGS */
+                                case 'method':
+                                    var method = self.element({ path: p2, root: self.methods });
+                                    if (method) {
+                                        value = method(args); // how to pass args? needs p3
+                                    } else {
+                                        value = match;
+                                    }
+                                    break;
+
+                                case 'function': // TO DO: remove
+                                    var func = self.element({ path: p2, root: self.functions });
+                                    if (func) {
+                                        value = func(args); // how to pass args? needs p3
+                                    } else {
+                                        value = match;
+                                    }
+                                    break;
+
+                                case 'on':
+                                    /* self.log('args');
+                                    self.log(args); */
+                                    if (args) {
+                                        self.onResult = args;
+                                        value = self.docElement('self.onResult.' + p2);
+                                        //alert(JSON.stringify(value));
+                                        delete self.onResult;
+                                    } else {
+                                        //alert(JSON.stringify(value));
+                                        value = match;
+                                    }
+                                    //value = ($(p2).is(':visible'));
+                                    break;
+
+                                case 'ajax':
+                                    if (args) {
+                                        self.ajaxResult = args; // -> self.json.var.ajaxData[self.json.var.ajaxId] = args.response
+
+                                        //alert(JSON.stringify(args));
+                                        value = self.docElement('self.ajaxResult.' + p2);
+
+                                        delete self.ajaxResult;
+                                    } else {
+                                        //alert(JSON.stringify(value));
+                                        value = match;
+                                    }
+                                    //value = ($(p2).is(':visible'));
+                                    break;
+
+                                /*   case 'function': // TO DO: remove
+                                    //self.log('function');
+                                    //self.log('p2');
+                                    //self.log(p2); // app.mac
+                                    value = self.function(p2) || match; // TO DO: log error
+
+                                    //var functionName = self.docElement(p2);
+                                    //value = (functionName) ? functionName(functionName) : p2+'=NULL'
+
+                                break; */
+                                case 'if': // TO DO: remove (can't manage spacial characters !<>'' etc)
+                                    p2 = self.replaceProperties(p2);
+                                    var ifArr = p2.split('|');
+                                    if (self.js(ifArr[0])) value = true;
+                                    if (ifArr.length > 1 && value) value = ifArr[1];
+                                    if (ifArr.length > 2 && !value) value = ifArr[2];
+                                    break;
+                                case 'random':
+                                    /* var random = p2.replace(/([^\-]+)\-([^\}]+)/g, function(match, n1, n2, offset, string) {
+                                        return Number(n1)+Math.round((n2-n1)*Math.random());
+                                    }); */
+                                    value = String(Math.floor(Number(p2) * Math.random()));
+                                    //self.log('random value: '+value);
+                                    //value = random; //p2+' format is wrong'
+                                    // CHANGE TO {math.random:max}
+                                    break;
+
+                                case 'getKey':
+                                case 'firebaseKey':
+                                    value = self.firebaseKey(p2);
+                                    // https://firebase.google.com/docs/reference/android/com/google/firebase/database/DataSnapshot
+                                    // CHANGE TO {data.exists:path/to/record}
+                                    //"alert.close" functions(alert, do:close)
+                                    break;
+
+                                case 'window':
+                                    /* try {
+                                        value = eval('window.'.p2);
+                                    } catch (error) {
+                                        self.log('javascript error on '+ p2);
+                                        value = match;
+                                    } */
+                                    //value = self.js('window.'.p2) || match;
+                                    value = self.docElement(p2) || match;
+                                    break;
+
+
+                                /* case 'args':
+                                    // often replaceProperties is called without args
+                                    value = match;
+                                break;  */
+                                default:
+                                    // ci finiamo dentro con {setup:value}
+                                    /* var element = document.querySelector(p2);
+                                    value = (element) ? element[p1] : '';
+                                    self.log('p1 ' + p1);
+                                    self.log('p2 ' + p2);
+                                    self.log('value ' + value);
+                                    if (!element)
+                                        self.log('can\'t match ' + match, 'color:red'); */
+                                    break;
+
+
+                                /*                         default:
+                                                        
+                                                        var node = self.docElement('self.json.'+p1);
+                                                        self.log('node');
+                                                        self.log(node);
+                                                        if (node) value = node[p2] // example: p1 = styles.colors p2 = colorName
+                                                        else value = '<{'+p1+':'+p2+'}>';
+                                                    break;
+                                */
+                            }
+                        } // not self.functions[p1]
+                    }
+                } else if (p2) {
+
+                    // can be a FUNCTION: from modules
+                    let keyPrefix = p2.split(' ')[0]; // /\s\./
+                    if (self.functions[keyPrefix]) {
+                        value = self.function({ name: keyPrefix });
+                        value = self.element({ path: p2, root: value }); // example: {pathFromHash 0}
+                        console.log(keyPrefix);
+                        console.log(value);
+                    }
+                    else
+                        value = self.replaceUndefined({ match: match, path: p2, removeUndefined: removeUndefined });
+                    //value = self.element({path: p2});
+                }
+
+                // value is a DOM element
+                if (value && value.isConnected) value = self.elementToSelector(value); // DOM element to CSS selector
+
+                if (!value) {
+                    // TO DO: should be (typeof value == undefined)
+                    // t's a critical change. It changes the result of "is": "'{data id}' !== ''"
+                    if (removeUndefined)
+                        value = '';
+                    else {
+                        if (typeof value == undefined)
+                            self.log(match + ' is undefined', 'yellow');
+                    }
+                }
+                if (typeof value !== 'string') value = self.stringify(value); // object or array to string (TO DO: check numbers)
+
+                return value;
+            });
+
+
+            // js property TO DO: check it
+            if (paramsString.startsWith('{js:') && paramsString.endsWith('}'))
+                paramsString = self.js(paramsString.substr(4, paramsString.length - 1 - 4));
+
+            //if (self.isJson(paramsString)) {// (typeof params == 'object')  
+            if (self.isJsonString(paramsString)) { // (typeof params == 'object')  
+                var paramsObj = self.parse(paramsString);
+
+                // restore event nodes
+                if (paramOn) paramsObj.on = paramOn;
+                if (paramDo) paramsObj.do = paramDo;
+                if (paramConfirm) paramsObj.confirm = paramConfirm;
+                if (paramSuccess) paramsObj.success = paramSuccess;
+                if (paramError) paramsObj.success = paramError;
+                if (paramEvents) paramsObj.events = paramEvents; // obsolete
+                return paramsObj;
+            } else {
+                // TO DO: log of wrong json string
+                //alert(paramsString);
+                /*  if (Array.isArray(self.parse(paramsString)))
+                        return self.parse(paramsString)
+                    else  */
+                return paramsString;
+            }
+        } else {
+            // restore event nodes
+            if (paramOn) params.on = paramOn;
+            if (paramDo) params.do = paramDo;
+            if (paramConfirm) params.confirm = paramConfirm;
+            if (paramSuccess) params.success = paramSuccess;
+            if (paramError) params.error = paramError;
+            if (paramEvents) params.events = paramEvents; // obsolete
+            return params;
+        }
+
+    };
+
+    /*      if (!value) undef = true;
+            if (undef) return undefined
+            else return params;
+    */
+    this.isJsonString = function (str) {
+        try {
+            JSON.parse(str);
+        } catch (e) {
+            return false;
+        }
+        return true;
+    };
+
+    this.isJson = function (item) {
+        item = typeof item !== "string" ? JSON.stringify(item) : item;
+        try {
+            item = JSON.parse(item);
+        } catch (e) {
+            return false;
+        }
+
+        if (typeof item === "object" && item !== null) {
+            return true;
+        }
+
+        return false;
+    };
+
+    this.replaceStringInObject = function (obj, stringToReplace, value) {
+        var paramsString, valueString;
+        if (typeof obj == 'string') paramsString = obj; else paramsString = JSON.stringify(obj);
+        if (typeof value == 'string') valueString = value; else valueString = JSON.stringify(value);
+        paramsString = self.replaceAll(paramsString, stringToReplace, valueString);
+        if (self.isJson(paramsString))
+            return self.parse(paramsString);
+
+        else
+            return paramsString;
+    };
+
+    /* this.replaceResult = function (params, args) {
+
+        paramsString = paramsString.replace(/(\"\s*)\{[result]\:(\w+)\}(\s*\")/g, function(match, p1, p2, p3, offset, string) {
+        });
+    }
+    */
+    this.replaceItems = function (params, item, name) {
+        // check this: http://mir.aculo.us/2011/03/09/little-helpers-a-tweet-sized-javascript-templating-engine/
+        // params: <li><{item:name}></li>, item: Vito or item: {name: Vito}
+        //var paramString = self.replaceProperties(params, undefined, item);
+        var paramsString;
+        var specialPattern;
+        var itemName = name || 'item';
+        /*  if (name) {
+                self.log('replaceItems');
+                self.log('params');
+                self.log(params);
+                self.log('item');
+                self.log(item);
+                self.log('name');
+                self.log(name);
+            }  */
+        if (typeof params == 'string') paramsString = params; else paramsString = JSON.stringify(params);
+
+        /* paramsString = paramsString.replace(/\{item\}/g, function(match, p1, offset, string) {
+
+            var value;
+        
+            if (item) {
+                value = item;
+            } else {
+                value = '';
+            }
+        
+            if (typeof value == 'object') value = self.stringify(value);
+            return value;
+        }); */
+        if (typeof item == 'object' || Array.isArray(item)) { //  || Array.isArray(item) not needed
+            paramsString = self.replaceAll(paramsString, '"{' + itemName + '}"', JSON.stringify(item));
+            for (let key in item) {
+                if (typeof item[key] == 'object')
+                    paramsString = self.replaceAll(paramsString, '"{' + itemName + ':' + key + '}"', JSON.stringify(item[key]));
+
+                else
+                    paramsString = self.replaceAll(paramsString, '{' + itemName + ':' + key + '}', item[key]);
+            }
+        } else {
+            paramsString = self.replaceAll(paramsString, '{' + itemName + '}', String(item));
+        }
+        //if (itemName == 'hour') alert(paramsString);
+        /* if (itemName !== 'item') { // TO DO: remove
+            var propertyPattern = new RegExp('\{'+itemName+'\:([^\}]+)\}', 'g');
+            paramsString = paramsString.replace(propertyPattern, function(match, p1, p2, p3, offset, string) {
+
+
+                var value = self.docElement(p1, undefined, item);
+                if (value)
+                    return value
+                else
+                    return match;
+
+            });
+        } */
+        //specialPattern = new RegExp(/\"\{(\w+)\}\"/, "g"); 
+        // item: inside double quotes (to manage objects inside double string)
+        //specialPattern = new RegExp(`(\")\{${itemName}\:(\w+)\}(\")`, 'g');
+        //paramsString = paramsString.replace(specialPattern, function(match, p1, p2, p3, offset, string) {
+        //specialPattern = new RegExp('(\"\s*)\{'+itemName+'\:(\w+)\}(\s*\")', 'g');
+        paramsString = paramsString.replace(/(\"\s*)\{item\:(\w+)\}(\s*\")/g, function (match, p1, p2, p3, offset, string) {
+
+            var value;
+
+            if (item)
+                value = item[p2] || '';
+
+            else
+                value = '';
+
+            if (typeof value == 'object')
+                value = self.stringify(value);
+            else if (Array.isArray(value))
+                value = value;
+
+            else
+                value = p1 + value + p3; // p1 and p3 are the " matched by (\"\s*) and (\s*\")
+
+            return value;
+        });
+
+        /*
+        specialPattern = new RegExp('\{'+itemName+'\:([^\}]*)\}', 'g');
+        paramsString = paramsString.replace(specialPattern, function(match, p2, offset, string) {
+        //paramsString = paramsString.replace(/\{item\:([^\}]*)\}/g, function(match, p2, offset, string) {
+
+            var value;
+        
+            if (item)
+                value = item[p2] || '';
+            else
+                value = '';
+        
+            if (typeof value == 'object')
+                value = self.stringify(value);
+
+            return value;
+        }); */
+        if (self.isJson(paramsString))
+            return self.parse(paramsString);
+
+        else
+            return paramsString;
+        //if (typeof params == 'object') return self.parse(paramsString); else return paramsString;
+    };
+
+    /* this.replaceItems = function (objWithNames, name) {
+        //self.log('replaceItems');
+        var paramString = self.stringify(objWithNames);
+        //self.log(paramString);
+        if (!name) name = '';
+        paramString = self.replaceAll(paramString, '{item}', name);
+        //self.log(paramString);
+        //paramString = self.replaceTags({text:paramString});
+        //self.log(paramString);
+        //paramString = self.replaceProperties(paramString);
+        //self.log(paramString);
+        if (typeof objWithNames == 'object') return self.parse(paramString); else return paramString;
+    } */
+    this.color = function (params, args) {
+        var paramsReplaced = self.replaceProperties(params, args);
+        //if (self.json.styles.colors)
+        //    return self.json.styles.colors[paramsReplaced];
+        if (self.json.data && self.json.data.colors)
+            return self.json.data.colors[paramsReplaced];
+    };
+
+    // ----------------------------
+    // ELEMENT METHODS
+    // ----------------------------
+    this.empty = function (params) {
+        /* self.log('empty');
+        self.log(params); */
+        var el = self.query(params);
+        if (el) {
+            while (el.firstChild)
+                el.removeChild(el.firstChild);
+        } else {
+            self.log('"empty" is unable to select element');
+            self.log(params);
+        }
+    };
+
+    this.isArray = function (value) {
+        return Array.isArray(self.js(value));
+    };
+
+    this.isVisible = function (el) {
+        return (el.style.display !== 'none' && !self.hasClass(el, 'd-none'));
+    };
+
+    this.isHidden = function (el) {
+        return (el.offsetParent === null);
+    };
+
+    this.isDisplay = function (el, displayValue) {
+        //var style = window.getComputedStyle(el);
+        /* self.log('isDisplay');
+        self.log('el.style');
+        self.log(el.style);
+        self.log('displayValue');
+        self.log(displayValue); */
+        return (el.style.display === displayValue);
+    };
+
+    this.inViewport = function (el) {
+        const rect = el.getBoundingClientRect();
+        return (
+            rect.top >= 0 &&
+            rect.left >= 0 &&
+            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+            rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+
+        );
+    };
+
+    this.outViewport = function (el) {
+        return !self.outViewport(el);
+    };
+
+    this.notClass = function (el, className) {
+        return !self.hasClass(el, className);
+    };
+
+    this.hasClass = function (el, className) {
+        if (el.classList)
+            return el.classList.contains(className);
+
+        else
+            return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'));
+    };
+
+    this.addClass = function (el, className) {
+        if (el.classList)
+            el.classList.add(className);
+        else if (!self.hasClass(el, className)) el.className += " " + className;
+    };
+
+    this.removeClass = function (el, className) {
+        if (el.classList)
+            el.classList.remove(className);
+        else if (self.hasClass(el, className)) {
+            var reg = new RegExp('(\\s|^)' + className + '(\\s|$)');
+            el.className = el.className.replace(reg, ' ');
+        }
+    };
+
+    this.toggleClass = function (el, className) {
+        if (self.hasClass(el, className))
+            self.removeClass(el, className);
+
+        else
+            self.addClass(el, className);
+    };
+
+    this.choose = this.select = function (params, selectorParams, args) {
+        // "choose OR options / "select" is deprecated because select is an html tag
+        // {selection: selection class, id: selected id}
+        // or: choosed, choosable, selection
+        // or: selector, selectable, selection
+        // or: opted, options, selection
+        /* self.log('select');
+        self.log('params');
+        self.log(params);
+        self.log('args');
+        self.log(args);  */
+        if (Array.isArray(params)) {
+            for (var obj of params)
+                self.choose(obj, args);
+        } else {
+
+            //if (selectorParams) params = self.extend({}, selectorParams, params);
+            var selId, selClass, selValue;
+
+            selValue = params['data-value']; // || params.value
+            if (params.id) selId = self.replaceProperties(params.id, args);
+            if (params.class) selClass = self.replaceProperties(params.class, args);
+            if (selValue) selValue = self.replaceProperties(selValue, args);
+
+            //var selector = self.selector(params.selector, undefined, true) || self.selector(selectorParams, undefined, true);
+            if (params.selection) {
+
+                var selectionClass = params.selection;
+                /* self.log('selClass');
+                self.log(selClass);
+                self.log('selValue');
+                self.log(selValue);
+                self.log('selectionClass');
+                self.log(selectionClass); */
+                var selector = self.selector({ class: selClass });
+                var elements = document.querySelectorAll('.' + selClass); // convert to any string selector (move the point to the code)
+                elements.forEach(function (element, index) {
+                    self.removeClass(element, selectionClass);
+                });
+
+                //$(selector).removeClass(selectionClass);
+                if (selId || selValue) {
+                    var selector = self.selector({ id: selId, class: selClass, 'data-value': selValue });
+
+                    //self.log('selector');
+                    //self.log(selector);
+                    //var elements = self.query(selector);
+                    //self.log('elements');
+                    //self.log(elements);
+                    //if (elements)
+                    //self.addClass(elements, selectedIconClass);
+                    var elements = document.querySelectorAll(selector);
+                    elements.forEach(function (element, index) {
+                        self.addClass(element, selectionClass);
+                    });
+                }
+            } else {
+                /* self.log('select');
+                self.log('selClass');
+                self.log(selClass);
+                self.log('selValue');
+                self.log(selValue);
+                self.log('selectionClass');
+                self.log(selectionClass); */
+                self.hide({
+                    "selector": {
+                        "class": selClass
+                    }
+                });
+                self.show({
+                    "selector": {
+                        "id": selId,
+                        "class": selClass,
+                        "data-value": selValue
+                    }
+                });
+
+                //self.log('selectselection" class parameter is required in "select" object');
+            }
+
+            //self.updateCodeEditors(); // workaround known ACE bug
+            self.uiUpdate(); // resize event trigger
+
+        }
+
+    };
+
+    /* this.select = function (params, selectorParams) {
+        // { [container, class, value, id]
+        self.log('self.select');
+        if (Array.isArray(params)) {
+                for (var index in params)
+                self.choose(params[index], selectorParams);
+        } else {
+
+            if (selectorParams) params = self.extend({}, selectorParams, params);
+
+            params = self.replaceProperties(params);
+            //params = self.replaceTags({text:params});
+            
+            self.selectItem(params);
+        }
+    }
+*/
+    this.toggle = function (params, selectorParams, args) {
+        self.log('toggle');
+        self.log(params);
+        if (Array.isArray(params)) {
+            for (var index in params)
+                self.toggle(params[index], selectorParams, args);
+        } else {
+            var selector;
+            if (typeof params == 'string')
+                selector = params;
+
+            else
+                selector = self.selector(params.selector || params.container, undefined, true) || self.selector(selectorParams, undefined, true);
+            var element = self.query(selector);
+            /* self.log('selector');
+            self.log(selector);
+            self.log('element');
+            self.log(element);
+            self.log('self.isVisible(element)');
+            self.log(self.isVisible(element)); */
+            //if ($(selector).is(":visible"))
+            if (self.isVisible(element))
+                //self.fadeOut(params, selectorParams);
+                self.out(params, selectorParams, args);
+
+            else
+                //self.fadeIn(params, selectorParams);
+                self.in(params, selectorParams, args);
+            //$(selector).toggle(500); // jquery bugs // , self.resizeEvent
+        }
+    };
+
+    this.in = function (params, selectorParams, args) {
+
+        if (Array.isArray(params)) {
+            for (var index in params)
+                self.in(params[index], selectorParams, args);
+        } else {
+            var selector;
+            if (typeof params == 'string')
+                selector = params;
+
+            else
+                selector = self.selector(params.selector || params.container, undefined, true) || self.selector(selectorParams, undefined, true);
+
+            var transition = params.transition || 'fadeIn';
+            var duration = params.duration || '500ms';
+
+            //self.log('selector');
+            //self.log(selector);
+            var start = [{
+                "show": {
+                    "selector": selector,
+                }
+            }];
+            var end = [
+                {
+                    "do": self.resizeEvent
+                }
+            ];
+            if (params.on && params.on.start)
+                start.push(params.on.start);
+            if (params.on && params.on.end)
+                end.push(params.on.end);
+
+            var animation = {
+                "animate": {
+                    "selector": selector,
+                    "transition": transition,
+                    "duration": duration,
+                    "on": {
+                        "start": start,
+                        "end": end
+                    }
+                }
+            };
+            //self.do(animation, args);
+            self.do(animation, undefined, args);
+            //self.resizeEvent();
+        }
+
+    };
+
+    this.out = function (params, selectorParams, args) {
+
+        if (Array.isArray(params)) {
+            for (var index in params)
+                self.out(params[index], selectorParams);
+        } else {
+
+            var selector;
+            if (typeof params == 'string')
+                selector = params;
+
+            else
+                selector = self.selector(params.selector || params.container, undefined, true) || self.selector(selectorParams, undefined, true);
+
+            var transition = params.transition || 'fadeOut';
+            var duration = params.duration || '500ms';
+
+            var start = [];
+            var end = [
+                {
+                    "hide": {
+                        "selector": selector,
+                    }
+                },
+                {
+                    "do": self.resizeEvent
+                }
+            ];
+            if (params.on && params.on.start)
+                start.push(params.on.start);
+            if (params.on && params.on.end)
+                end.push(params.on.end);
+
+            var animation = {
+                "animate": {
+                    "selector": selector,
+                    "transition": transition,
+                    "duration": duration,
+                    "on": {
+                        "start": start,
+                        "end": end
+                    }
+                }
+            };
+            //self.do(animation, args);
+            self.do(animation, undefined, args);
+        }
+    };
+
+    this.show = function (params, selectorParams, args) {
+        if (Array.isArray(params)) {
+            for (var index in params)
+                self.show(params[index], selectorParams);
+        } else {
+            var selector;
+            if (typeof params == 'string')
+                selector = params;
+
+            else
+                selector = self.selector(params.selector || params.container, undefined, true) || self.selector(selectorParams, undefined, true);
+            var elements = self.queryAll(selector);
+            elements.forEach(function (element, index) {
+                self.removeClass(element, 'hidden');
+                self.removeClass(element, 'opacity-0');
+                self.removeClass(element, 'invisible');
+                self.removeClass(element, 'd-none'); // bootstrap
+
+                //element.style.display = 'block';
+                element.style.visibility = 'visible';
+                /*
+                container = element.getAttribute('data-selector');
+                //container = self.dataStorage.get(element, 'selector');
+                var action = [
+                    {
+                        "if": {
+                            "container": container,
+                            "hasClass": "opacity-0",
+                            "then": {
+                                "attr": {
+                                    "container": container,
+                                    "removeClass": "opacity-0"
+                                }
+                            }
+                        }
+                    },
+                    {
+                        "if": {
+                            "container": container,
+                            "hasClass": "invisible",
+                            "then": {
+                                "attr": {
+                                    "container": container,
+                                    "removeClass": "invisible" // bootstrap & tailwind
+                                }
+                            }
+                        }
+                    },
+                    {
+                        "if": {
+                            "container": container,
+                            "hasClass": "d-none",
+                            "then": {
+                                "attr": {
+                                    "container": container,
+                                    "removeClass": "d-none" // bootstrap
+                                }
+                            }
+                        }
+                    },
+                    {
+                        "if": {
+                            "container": container,
+                            "hasClass": "hidden",
+                            "then": {
+                                "attr": {
+                                    "container": container,
+                                    "removeClass": "hidden" // taliwind
+                                }
+                            }
+                        }
+                    },
+                    {
+                        "if": { // should be if style.display == none
+                            "container": container,
+                            "isDisplay": "none",
+                            "then": {
+                                "attr": {
+                                    "container": container,
+                                    "style": {
+                                        "display": ""
+                                    }
+                                }
+                            }
+                        }
+                    }
+                ];
+                //element.style.display = ' ';
+                //alert(JSON.stringify(element.style));
+                if (element.style.visibility && element.style.visibility !== 'visible')
+                    element.style.visibility = 'visible';
+                //self.do(action, args);
+                //self.do(action, undefined, args);
+                self.do(action, undefined, args); */
+            });
+        }
+    };
+
+    this.hide = function (params, selectorParams, args) {
+        if (Array.isArray(params)) {
+            for (var index in params)
+                self.hide(params[index], selectorParams);
+        } else {
+            var selector;
+            if (typeof params == 'string')
+                selector = params;
+
+            else
+                selector = self.selector(params.selector || params.container, undefined, true) || self.selector(selectorParams, undefined, true);
+            var elements = self.queryAll(selector);
+            elements.forEach(function (element, index) {
+                self.addClass(element, 'hidden');
+
+                /* container = element.getAttribute('data-selector');
+                var action = [
+                    {
+                        "attr": {
+                            "container": container,
+                            "addClass": "d-none" // bootstrap (to be removed)
+                        }
+                    },
+                    {
+                        "attr": {
+                            "container": container,
+                            "addClass": "hidden" // tailwind
+                        }
+                    }
+                ];
+                //self.do(action, args);
+                self.do(action, undefined, args); */
+            });
+        }
+    };
+
+
+    /* this.fadeIn = function (params, selectorParams, args) {
+        //self.log('fadeIn');
+        //self.log(params);
+        if (Array.isArray(params)) {
+                for (var index in params)
+                self.fadeIn(params[index], selectorParams);
+        } else {
+            //params.container = params.container || self.selector(selectorParams);
+            //var selector = self.selector(params);
+            var selector = self.selector(self.extend({}, params, selectorParams), {}, true);
+            var duration = params.duration || 500;
+            var done = (params.done) ? function  () {
+                self.resizeEvent();
+                self.do(params.done);
+            } : null;
+            $(selector).stop().fadeIn(duration, done);
+        }
+    }
+
+    this.fadeOut = function (params, selectorParams, args) {
+        //self.log('fadeOut');
+        //self.log(params);
+        // add onComplete and duration
+        if (Array.isArray(params)) {
+                for (var index in params)
+                self.fadeOut(params[index], selectorParams);
+        } else {
+            //params.container = params.container || self.selector(selectorParams);
+            //var selector = self.selector(params);
+            var selector = self.selector(self.extend({}, params, selectorParams), {}, true);
+            var duration = params.duration || 500;
+            var done = (params.done) ? function  () {
+                self.do(params.done);
+            } : null;
+            $(selector).stop().fadeOut({
+                duration: duration,
+                done: function  () {
+                    self.resizeEvent();
+                    self.do(params.done);
+                }
+            });
+        }
+    } */
+    /*     this.show = function (params, selectorParams, args) {
+            //self.log('show');
+            //self.log(JSON.stringify(params));
+            if (Array.isArray(params)) {
+                    for (var index in params)
+                    self.show(params[index], selectorParams);
+            } else {
+                //params.container = params.container || self.selector(selectorParams);
+                //var selector = self.selector(params);
+                var selector = self.selector(self.extend({}, params, selectorParams), {}, true);
+                //self.log('selector');
+                //self.log(selector);
+                $(selector).show();
+                self.resizeEvent();
+            }
+        }
+    
+        this.hide = function (params, selectorParams, args) {
+            //self.log('hide');
+            //self.log(JSON.stringify(params));
+            if (Array.isArray(params)) {
+                    for (var index in params)
+                    self.hide(params[index], selectorParams);
+            } else {
+                //params.container = params.container || self.selector(selectorParams);
+                //var selector = self.selector(params);
+                var selector = self.selector(self.extend({}, params, selectorParams), {}, true);
+                //self.log('selector');
+                //self.log(selector);
+                $(selector).hide();
+                self.resizeEvent();
+            }
+        } */
+    this.matchMedia = function (mediaAction, mediaEvent) {
+        const mediaQuery = window.matchMedia(mediaEvent);
+        mediaQuery.addListener(function (e) {
+            /*  self.log('matchMedia');
+                self.log('e');
+                self.log(e); */
+            if (e.matches) {
+                self.do(mediaAction);
+                //self.do(mediaAction);
+            }
+        });
+        //self.do(mediaAction);
+    };
+
+
+    /*     this.firebaseEventAction = function (newObj) {
+    
+            var path = newObj.path;
+            delete newObj.path;
+    
+            document.querySelectorAll('[data-firebase="'+path+'"]').forEach(function (element, index) {
+    
+                var pathString = 'self.json.var.db.' + self.replaceAll(element.getAttribute('data-firebase'), '/', '.'); // data('firebase')
+                var dbObj = self.docElement(pathString);
+    
+                var firebaseValue = newObj[element.getAttribute('data-value')]; // TODO: not works for nested nodes
+                var container = element.getAttribute('data-selector');
+                //var template = element.getAttribute('data-template');
+                var template = self.dataStorage.get(element, 'data-template');
+    
+                if (element.tagName == 'UL') { // se $(this) è un ul
+    
+                    var liTemplate = template.li;
+                    //$(container).empty();
+                    element.innerHTML = '';
+                    
+                    var items = newObj;
+                    for (itemKey in items) {
+                        var item = items[itemKey];
+                        item.key = itemKey;
+                        //if (dbPath == 'lessons')
+                        //prompt(JSON.stringify(liTemplate));
+                        var dbParams = self.replaceItems(liTemplate, item, 'item') || '';
+                        // var dbParams = self.replaceProperties(liTemplate, undefined, item) || '';
+                        self.li(dbParams, {container: container});
+                    }
+    
+                //} else if ( $(element).is('span') || $(element).is('p')) {
+                } else if (element.tagName == 'SPAN' || element.tagName == 'P') {
+    
+                    //$(element).text(firebaseValue);
+                    element.textContent = firebaseValue;
+                        
+                } else { // se $(this) non è un ul
+    
+                    if (template.blocks || template.html) {
+                        var blocksTemplate = template.html || template.blocks;
+                        
+                        //$(container).empty();
+                        element.innerHTML = '';
+                        
+                        var items = newObj;
+                        self.log('newObj');
+                        self.log(newObj);
+                        for (itemKey in items) {
+                            var item = items[itemKey];
+                            item.key = itemKey;
+                            var dbParams = self.replaceProperties(blocksTemplate, undefined, item) || '';
+    
+                            self.html(dbParams, {container: container});
+                        }
+                    }
+    
+                    if (template.init) self.do(template.init);
+    
+                }
+    
+    
+            });
+        }; */
+    /*     self.jsonic = function () {
+        } */
+    this.addFirebaseTag = function (params) {
+        // self.log('addFirebaseTag');
+        var dataObj = params.database;
+
+        if (dataObj) {
+
+            dataObj = self.replaceProperties(dataObj);
+            /* self.log('dataObj');
+            self.log(dataObj); */
+            //var path = self.replaceTags({text:params.firebase});
+            var path, success;
+            if (typeof dataObj == 'string') {
+                path = dataObj;
+            } else {
+                path = dataObj.path;
+                success = dataObj.success;
+            }
+
+            if (path) {
+                var selector = self.selector(params, undefined, false);
+                //var element = self.query(selector);
+                var elements = self.queryAll(selector);
+                //var elements = document.querySelectorAll(selector);
+                if (elements)
+                    elements.forEach(function (element, index) {
+
+                        var listenerObj = {
+                            path: path
+                            //success: dataObj.success
+                        };
+
+                        var elementsDataPath = document.querySelectorAll('[data-firebase="' + path + '"]');
+
+                        //if ($('[data-firebase="'+path+'"]').length == 0) {
+                        if (elementsDataPath.length == 0) {
+                            listenerObj.action = [
+                                /*  {
+                                        "firebaseEvent.action": {}  // should use self.get function to parse "self"
+                                        // todo: remove "jsonic". The function firebaseEventAction can be stored in self.do (or?)
+                                    } */
+                            ];
+
+                            if (dataObj.success)
+                                listenerObj.action.push(dataObj.success);
+
+                        }
+
+                        //$(selector).attr('data-firebase', path);
+                        //$(selector).data('data-template', params);
+                        if (element) {
+                            element.setAttribute('data-firebase', path);
+                            self.dataStorage.set(element, 'data-template', params);
+                        } else {
+                            self.log('!element selector:' + selector + ' / firebase path:' + path);
+                            self.log('params');
+                            self.log(params);
+                        }
+
+                        //if (params.on && params.on.data) $(selector).data('ondata', params.on.data); // maestry
+                        if (dataObj.orderByChild !== undefined) listenerObj.orderByChild = dataObj.orderByChild;
+                        if (dataObj.equalTo !== undefined) listenerObj.equalTo = dataObj.equalTo;
+
+                        self.firebaseAddListener(listenerObj);
+                    });
+
+            } else {
+                self.log('data object requires path parameter');
+                self.log(params);
+            }
+        }
+    };
+
+    this.dbObject = function (path) {
+        var pathString = 'self.json.var.db.' + self.replaceAll(path, '/', '.');
+        return self.docElement(pathString);
+    };
+
+    this.only = function (permissions, user) {
+        // "visitor" or "only" 
+        if (user) {
+            return (user == self.user('uid'));
+        } else {
+            var permission = (permissions) ? String(permissions).split(',') : false;
+            return (!permission || (permissions.indexOf(self.userRole()) >= 0));
+        }
+    };
+
+    this.extendJsonFromElement = function (p) {
+        /* self.log('extendJsonFromElement');
+        self.log(p); */
+
+        var params = self.cloneObject(p);
+
+        // properties
+        if (params.resources) self.extendJson(self.json, { "resources": params.resources });
+        if (params.plugins) self.extendJson(self.json, { "plugins": params.plugins });
+        if (params.parts) self.extendJson(self.json, { "parts": params.parts });
+        if (params.blocks) self.extendJson(self.json, { "blocks": params.parts }); // obsolete
+        if (params.shortcuts) self.extendJson(self.json, { "shortcuts": params.shortcuts });
+        if (params.css) self.extendJson(self.json, { "css": params.css });
+        if (params.setup) self.extendJson(self.json, { "setup": params.setup });
+        if (params.data) self.extendJson(self.json, { "data": params.data });
+        if (params.var) self.extendJson(self.json, { "var": params.var });
+        if (params.texts) self.extendJson(self.json, { "texts": params.texts }); // maybe used in self.text
+
+
+        // can't be extended "setup" (is relative to the full app) and "on" (is relative to the element)
+    };
+
+
+    this.query = function (selector, element) {
+        //self.log('query: '+selector);
+        if (selector) {
+            if (typeof selector == 'object')
+                selector = self.selector(selector, undefined, true);
+
+            var routes = selector.split(/[ >]+/);
+            if (!element) element = document;
+
+            for (var index in routes) {
+
+                if (element && element[0]) element = element[0];
+
+                if (element && element.isConnected) {
+
+                    var route = routes[index];
+
+
+
+                    /* route.replace(/([^\s])\[/g, function(match, p1) { // -> .class [data-value=...]
+                        return p1 + ' ['
+                    }); */
+                    //self.log('route');
+                    //self.log(route);
+                    var routeParts = route.match(/(.*):eq\((\d*)\)/);
+
+                    //self.log('routeParts');
+                    //self.log(routeParts);
+                    if (routeParts) {
+                        var routeElement = String(routeParts[1]);
+                        var routeIndex = Number(routeParts[2]);
+
+                        if (routeElement.startsWith('.'))
+                            routeElement = '.' + self.classSelector(routeElement);
+
+                        //if (self.exist(routeElement))
+                        element = element.querySelectorAll(routeElement)[routeIndex];
+
+                        /* self.log('routeElement');
+                        self.log(routeElement);
+                        self.log('routeIndex');
+                        self.log(routeIndex); */
+                    } else {
+                        //if (self.exist(route))
+                        if (route.startsWith('.'))
+                            route = '.' + self.classSelector(route);
+                        element = element.querySelectorAll(route)[0];
+                    }
+                } else {
+                    element = undefined;
+                }
+            }
+            //element.innerHTML = 'test';
+            //element.style.display = 'none';
+            //self.log(element);
+            //if (element && !Array.isArray(element)) element = [element];
+            if (!element)
+                self.log('can\'t find the element "' + selector + '" ("query" function)');
+
+            return element;
+        } else {
+            //self.log('function "query" without selector parameters');
+            // BUG: many calls from addtag
+        }
+    };
+
+    /*     this.queryAllTest = function (selector, element) {
+            //self.log('query: '+selector);
+            if (selector) {
+    
+                //route = self.replaceAll(route, '[', ' [');
+                selector.replace(/([^\s])\[/g, function(match, p1) { // -> .class [data-value=...]
+                    return p1 + '['
+                });
+    
+    
+                var routes = selector.split(/[ >]+/);
+                if (!element) element = document;
+    
+                self.log('routes');
+                self.log(routes);
+                
+                for (var index in routes) {
+                    self.log('index');
+                    self.log(index);
+    
+                    if (element.isConnected) {
+        
+                        var route = routes[index];
+    
+                        var routeParts = route.match(/([^:]*):eq\((\d*)\)/);
+    
+                        self.log('routeParts');
+                        self.log(routeParts);
+    
+                        if (routeParts) {
+                            var routeElement = String(routeParts[1]);
+                            var routeIndex = Number(routeParts[2]);
+                            //if (self.exist(routeElement))
+                            element = element.querySelectorAll(routeElement)[routeIndex];
+    
+                            self.log('routeElement');
+                            self.log(routeElement);
+                            self.log('routeIndex');
+                            self.log(routeIndex);
+        
+                        } else {
+                            //if (self.exist(route))
+                            self.log('route');
+                            self.log(route);
+                            element = element.querySelectorAll(route);
+                        }
+                    } else {
+                        self.log('Not in the DOM '+ selector);
+                        self.log('route');
+                        self.log(route);
+                        element = [];
+                    }
+                }
+                //element.innerHTML = 'test';
+                //element.style.display = 'none';
+                //if (element && !Array.isArray(element)) element = [element];
+                //self.log(element);
+    
+                return element;
+            } else {
+                self.log('DOM "query" without selector parameters');
+            }
+        } */
+    /*     this.convertRoute = function (route) {
+            var routeElement, routeValue;
+            
+            route = route.replace(/([^\s])\[/g, function(match, p1) { // -> .class [data-value=...]
+                return p1 + ' ['
+            });
+    
+            if (route.indexOf(' ')) {
+                var parts = route.split(' ');
+                routeElement = parts[0];
+                routeValue = parts[1];
+            } else {
+                routeElement = route
+            }
+            self.log(routeElement);
+            self.log(routeValue);
+    
+            if (routeElement.startsWith('.'))
+                routeQuery = '[class='+routeElement+']';
+            else if (routeElement.startsWith('#'))
+                routeQuery = '[id='+routeElement+']';
+            else
+                routeQuery = routeElement + routeValue;
+    
+            if (routeValue)
+                routeQuery += ' ' + routeValue;
+    
+            return routeQuery;
+        } */
+    /*
+        // https://www.examplefiles.net/cs/1222124
+        var querySelectorAllWithEq = function(selector, document) {
+            var remainingSelector = selector;
+            var baseElement = document;
+            var firstEqIndex = remainingSelector.indexOf(':eq(');
+        
+            while (firstEqIndex !== -1) {
+            var leftSelector = remainingSelector.substring(0, firstEqIndex);
+            var rightBracketIndex = remainingSelector.indexOf(')', firstEqIndex);
+            var eqNum = remainingSelector.substring(firstEqIndex + 4, rightBracketIndex);
+            eqNum = parseInt(eqNum, 10);
+        
+            var selectedElements = baseElement.querySelectorAll(leftSelector);
+            if (eqNum >= selectedElements.length) {
+                return [];
+            }
+            baseElement = selectedElements[eqNum];
+        
+            remainingSelector = remainingSelector.substring(rightBracketIndex + 1).trim();
+            // Note - for now we just ignore direct descendants:
+            // 'a:eq(0) > i' gets transformed into 'a:eq(0) i'; we could maybe use :scope
+            // to fix this later but support is iffy
+            if (remainingSelector.charAt(0) === '>') {
+                remainingSelector = remainingSelector.substring(1).trim();
+            }
+        
+            firstEqIndex = remainingSelector.indexOf(':eq(');
+            }
+        
+            if (remainingSelector !== '') {
+            return Array.from(baseElement.querySelectorAll(remainingSelector));
+            }
+        
+            return [baseElement];
+        }; */
+    this.queryAll = function (selector, element) {
+        //self.log('queryAll: '+selector);
+        if (selector) {
+
+            if (Array.isArray(selector)) {
+                let elements = self.queryAll(selector[0]);
+                selector.shift();
+                for (let str of selector) {
+                    elements = Array.prototype.slice.call(elements).concat(Array.prototype.slice.call(self.queryAll(str)));
+
+                    //elements = elements.concat(self.queryAll(str));
+                }
+                /* console.log('queryAll');
+                console.log(elements); */
+                return elements;
+
+            } else {
+
+                /*
+                if (selector.indexOf(',')>= 0) {
+                    return element.querySelectorAll(selector)
+                }
+                // TO DO: check why all the rest
+                */
+                var routes = selector.split(/[ >]+/);
+                if (!element) element = document;
+
+                /* self.log('routes');
+                self.log(routes); */
+                /* self.log('element[0]');
+                self.log(element[0]); */
+                for (var index in routes) {
+
+                    if (element && element[0]) element = element[0];
+
+                    /* self.log('element');
+                    self.log(element); */
+                    if (element && element.isConnected) {
+
+                        var route = routes[index];
+
+                        var routeParts = route.match(/([^:]*):eq\((\d*)\)/);
+
+                        /* self.log('route');
+                        self.log(route);
+                        self.log('routeParts');
+                        self.log(routeParts); */
+                        if (routeParts) {
+                            var routeElement = String(routeParts[1]);
+                            var routeIndex = Number(routeParts[2]);
+                            /* self.log('routeElement');
+                            self.log(routeElement);
+                            self.log('routeIndex');
+                            self.log(routeIndex);  */
+                            if (routeElement.startsWith('.'))
+                                routeElement = '.' + self.classSelector(routeElement);
+
+                            //if (self.exist(routeElement))
+                            element = element.querySelectorAll(routeElement)[routeIndex];
+
+                            if (index == (routes.length - 1) && element) {
+                                /* console.log('index:'+index);
+                                console.log('routes.length:'+routes.length); */
+                                element = [element];
+                            }
+
+                        } else {
+                            //if (self.exist(route))
+                            if (route.startsWith('.'))
+                                routeElement = '.' + self.classSelector(route);
+
+                            /* self.log('route');
+                            self.log(route); */
+                            element = element.querySelectorAll(route);
+                        }
+                    } else {
+                        //self.log('!element.isConnected');
+                        element = [];
+                    }
+                }
+
+                //if (element && !Array.isArray(element)) element = [element];
+                //if (element && !element.length) element = [element];
+                if (!element)
+                    self.log('No element selected by ' + selector);
+                //else
+                //    if (!Array.isArray(element))
+                //        element = [element];
+                return element;
+            }
+        } else {
+            console.log('%cDOM queryAll requires selector argument', 'color: orange');
+            //self.log('DOM "query" without selector parameters');
+        }
+    };
+
+    /* this.queryAll = function (selector, element) {
+        //self.log('query: '+selector);
+        if (selector) {
+            var routes = selector.split(/[ >]+/);
+            if (!element) element = document;
+            
+            for (var index in routes) {
+                var route = routes[index];
+
+                //onsole.log('route');
+                //self.log(route);
+
+                var routeParts = route.match(/(.*):eq\((\d*)\)/);
+
+                //self.log('routeParts');
+                //self.log(routeParts);
+
+                if (routeParts) {
+                    var routeElement = String(routeParts[1]);
+                    var routeIndex = Number(routeParts[2]);
+                    //if (self.exist(routeElement))
+                        element = [element.querySelectorAll(routeElement)[routeIndex]];
+                } else {
+                    //if (self.exist(route))
+                        element = element.querySelectorAll(route);
+                }
+            }
+            //element.innerHTML = 'test';
+            //element.style.display = 'none';
+            //if (element && !Array.isArray(element)) element = [element];
+            //self.log(element);
+
+            return element;
+        } else {
+            self.log('DOM "query" without selector parameters');
+        }
+    } */
+    /* var querySelectorAllWithEq = function(selector, document) {
+        var remainingSelector = selector;
+        var baseElement = document;
+        var firstEqIndex = remainingSelector.indexOf(':eq(');
+        
+        while (firstEqIndex !== -1) {
+            var leftSelector = remainingSelector.substring(0, firstEqIndex);
+            var rightBracketIndex = remainingSelector.indexOf(')', firstEqIndex);
+            var eqNum = remainingSelector.substring(firstEqIndex + 4, rightBracketIndex);
+            eqNum = parseInt(eqNum, 10);
+        
+            var selectedElements = baseElement.querySelectorAll(leftSelector);
+            if (eqNum >= selectedElements.length) {
+            return [];
+            }
+            baseElement = selectedElements[eqNum];
+        
+            remainingSelector = remainingSelector.substring(rightBracketIndex + 1).trim();
+            // Note - for now we just ignore direct descendants:
+            // 'a:eq(0) > i' gets transformed into 'a:eq(0) i'; we could maybe use :scope
+            // to fix this later but support is iffy
+            if (remainingSelector.charAt(0) === '>') {
+            remainingSelector = remainingSelector.substring(1).trim();
+            }
+        
+            firstEqIndex = remainingSelector.indexOf(':eq(');
+        }
+        
+        if (remainingSelector !== '') {
+            return Array.from(baseElement.querySelectorAll(remainingSelector));
+        }
+        
+        return [baseElement];
+        }; */
+    this.jitcss = function (classes) {
+        // https://tailwindcss.com/docs/just-in-time-mode
+        if (classes.indexOf('-[') > -1) {
+            let classesArr = classes.split(' '); // change to one or more spaces
+
+            // (sm\:|md\:|lg\:|xl\:|2xl\:)?
+            self.log('jitcss');
+
+            for (cl of classesArr) {
+                self.log(cl);
+                let par = [...cl.matchAll(new RegExp('([^-]+)[\-][\[](.+)\]', 'g'))];
+                self.log('jitcss');
+                self.log(par);
+            }
+        }
+
+        /* sm:w-1
+        
+        .w-1 {
+            width: 1em;
+        }
+        
+        @media (min-width: 640px) {
+            .sm\:w-1 { width: 1em }
+        }
+            */
+    };
+
+    this.compileClasses = function (string) {
+
+        var classesString = string;
+
+        // classes shortcuts
+        if (self.json.shortcuts && self.json.shortcuts.class) {
+            for (shortcut in self.json.shortcuts.class) {
+                if (string.indexOf(shortcut) > -1) {
+                    classesString = self.replaceAll(string, shortcut, self.json.shortcuts.class[shortcut]);
+                }
+            }
+        }
+
+        // dynamic classes
+        if (string.indexOf('(') >= 0) {
+            //self.log('compileClasses');
+            classesString = '';
+            let classesArr = string.split(' ');
+            for (cl of classesArr) {
+                /* self.log('cl');
+                self.log(cl); */
+                if (cl.indexOf('(') >= 0 && cl.endsWith(')')) {
+                    let classArr = cl.split('(');
+                    classArr[1] = classArr[1].slice(0, -1); // remove )
+
+
+
+
+
+
+
+                    //let par = [...cl.match(new RegExp('([^\(]+)\(([^\)]+)\)$'))]; // doesn't work
+                    /* self.log('classArr');
+                    self.log(classArr);
+                    self.log('classArr[1]');
+                    self.log(classArr[1]);
+                    self.log('self.js(classArr[1])');
+                    self.log(self.js(classArr[1])); */
+                    if (Boolean(self.js(classArr[1]))) {
+                        if (classesString !== '') classesString += ' ';
+                        classesString += classArr[0];
+                    }
+
+                } else {
+                    if (classesString !== '') classesString += ' ';
+                    classesString += cl;
+                }
+            }
+
+            if (string == classesString) {
+                self.log('wrong dynamic class syntax');
+                self.log(string);
+            }
+
+        }
+
+        return classesString;
+
+    };
+
+    this.createElement = function (params, selectorParams) {
+
+        let selector = params.selector || params.container;
+        var container = selector || self.selector(selectorParams);
+        var containerElement = self.query(container);
+        var newSelector = self.selector(params, selectorParams); // from 0.9.6: must stay before document.createElement
+
+
+
+
+
+
+        /* console.log('append');
+        console.log('selector:'+selector);
+        console.log('container:'+container);
+        console.log('newSelector:'+newSelector); */
+        var newElements = [];
+
+        //if (containerElement)
+        //containerElements.forEach(function (containerElement, index) {
+        if (containerElement) {
+
+            if (!params) params = {};
+
+            var element = document.createElement(params.tag);
+
+            containerElement.appendChild(element);
+
+            if (params.attr) {
+                // shortcuts (windy property not in twind) and dynamic classes with js condition
+                if (params.attr.class) {
+                    // replace shortcuts and dynamic classes: class(condition)
+                    params.attr.class = self.compileClasses(params.attr.class);
+                }
+            }
+
+            //if (container) element.setAttribute('data-selector', self.selector(params, selectorParams));
+            //if (container) element.setAttribute('data-selector', newSelector); // from 0.9.6. removed 1.0.12
+            // for IDE
+            self.dataStorage.set(element, 'code', params);
+            self.dataStorage.set(element, 'key', params.key);
+
+            /*  if (params.attr && params.attr.class)
+                    self.jitcss(params.attr.class); */
+            newElements.push(element);
+
+            if (params.attr) self.setAttributes(newElements, params.attr);
+            if (params.style) self.css(params, newSelector); // TO DO: deprecated / to be removed;
+
+
+
+
+
+
+
+
+            /* // attributes TO DO: move up / call self.attr
+            if (params.attr)
+                for (var attrId in params.attr)
+                    self.attribute(newElements, attrId, self.replaceProperties(params.attr[attrId]));
+                    //self.log(self.replaceProperties(params.attr[attrId]));
+                    //$(selector).attr(attrId, params.attr[attrId]); */
+        }
+
+        //});
+        return newElements;
+
+        /* for (let element of elements) {
+            element.appendChild(string);
+        } */
+    };
+
+    /* this.newSelector = function (params, selectorParams) {
+        var container = self.selector(self.extend({}, params, selectorParams), undefined, true);
+        if (container) {
+            var selectorObj = {
+                container: container,
+                //class: params.class,
+                //value: params.value,
+                //'data-value': params['data-value']
+            }; // , selectorParams);
+            self.log('container');
+            self.log(container);
+            var index = document.querySelectorAll(container).length;
+            if (index > 1) selectorObj.index = index-1;
+            self.log('newSelector');
+            self.log(selectorObj);
+            return selectorObj;
+        } else {
+            self.log('container undefine in newSelector');
+            self.log('params');
+            self.log(params);
+            self.log('selectorParams');
+            self.log(selectorParams);
+        }
+    }
+*/
+    /*
+        this.editor = function (params, selectorParams, args) {
+            self.log('editor');
+            self.log('params');
+            self.log(params);
+            var selector = self.selector(selectorParams, undefined, true); // self.selector(params, undefined, true) ||
+            if (selector) {
+            var element = self.query(selector);
+    
+                if (element) {
+            
+                    if (!self.quillElements[selector]) {
+                        self.quillElements[selector] = new Quill(element, {
+                            modules: params.modules || { // or default modules
+                                toolbar: [
+                                [{ header: [1, 2, false] }],
+                                ['bold', 'italic', 'underline'],
+                                ['image', 'code-block']
+                                ]
+                            },
+                            // scrollingContainer: '#scrolling-container',
+                            placeholder: params.placeholder || 'Write here',
+                            theme: params.theme || 'bubble'
+                        });
+                    }
+    
+                    if (self.quillElements[selector]) {
+    
+                        if (params.setContents) {
+                            var contents = self.replaceProperties(params.setContents, args);
+                            self.quillElements[selector].setContents(contents);
+                        }
+    
+                        if (params.getContents) {
+                            self.quillElements[params.getContents].getContents();
+                        }
+    
+                        if (params.on) {
+    
+                            for (var eventId in params.on) {
+                                self.editorChangeFunctions[selector] = params.on;
+    
+                                if (params.on[eventId]) {
+    
+                                    self.quillElements[selector].on(eventId, function(delta, oldDelta, source) {
+                                        var action = self.editorChangeFunctions[selector][eventId];
+                                        var actionWithResult = self.replaceResult(action, delta);
+                                        //self.do(actionWithResult);
+                                        self.do(actionWithResult);
+                        
+                                    });
+                                }
+                            }
+                        }
+                    }
+                } else {
+                    self.log('can\'t find the element "'+ selector + '" ("editor" function)');
+                    self.log(params);
+                }
+            } else {
+                self.log('the "editor" function has a wrong selector');
+                self.log(params);
+            }
+    
+        }
+    */
+    this.do = this.action = this.execute = function (params, selectorParams, args) {
+        /* self.log('params');
+        self.log(params);
+        self.log('selectorParams');
+        self.log(selectorParams);
+        self.log('args');
+        self.log(args); */
+
+        if (params !== undefined && params !== null) { // empty string is ok
+
+            /*
+            // problematic for nested {args} / {selector}
+            if (selectorParams && typeof selectorParams == 'string') {
+                params = self.replaceProperty(params, 'selector', selectorParams);
+            }
+            if (args) {
+                params = self.replaceProperty(params, 'args', args);
+            }
+            */
+            if (typeof params == 'string')
+                params = self.replaceProperties(params, args);
+
+            let pluginsRequired = self.pluginsRequired(params);
+            /* self.log('pluginsRequired');
+            self.log(pluginsRequired); */
+            if (pluginsRequired.length > 0)
+                //let params = [params, args, selectorParams];
+                self.pluginsLoader(pluginsRequired, self.do, [params, selectorParams, args]);
+            else {
+
+                if (Array.isArray(params))
+                    for (var obj of params)
+                        self.do(obj, selectorParams, args); // -> execute dopo aver portato qui pluginsLoaded
+                else if (typeof params == 'object') {
+
+                    /* if (params.after) {
+                        let paramsAfter = params.after;
+                        let paramsWithoutAfter = self.cloneObject(params);
+                        delete paramsWithoutAfter.after;
+                        self.timer({
+                            after: paramsAfter,
+                            do: paramsWithoutAfter
+                        });
+                    } else {
+    */
+                    if (params.if == undefined || self.if(params.if)) { // || Boolean(self.js(params.if))) { // , args
+                        /* console.log('IF---------------');
+                        console.log(params.if);
+                        console.log(params); */
+                        if (self.only(params.roles, params.user)) {
+
+                            //if (!params) params = {};
+                            //var newContainer; //self.newSelector(params, selectorParams); // {container: selector}
+                            // Add an element in the DOM
+                            if (params.tag) {
+
+                                var selector = self.selector(params, selectorParams);
+
+                                /* self.log('selector');
+                                self.log(selector); */
+                                self.extendJsonFromElement(params); // or selectorParams
+
+
+
+
+
+                                //newContainer = {selector: selector};
+                                //if (1) //self.user('uid') == 'L0y20rjPp6a6ejqVuDXuTWCU2rH3') //'ocXuFBV4aWcy7KZMAmi6mICFi872')
+                                // create new html element
+                                var newElements = self.createElement(params, selectorParams);
+
+                                /* if (params.key == 'text')
+                                    //let element = self.query(self.selector(params.selector));
+                                    newElements.innerText = self.text(nested); */
+                                if (params.matchMedia) {
+                                    for (var mediaEvent in params.matchMedia) {
+                                        self.matchMedia(params.matchMedia[mediaEvent], mediaEvent);
+                                    }
+                                }
+
+                                if (params.html) {
+
+                                    self.html(params.html, selector, args);
+
+                                } else {
+
+                                    // nested html tags as property
+                                    for (var par in params) //  && (par !== 'attr')
+                                        if ((nodes.exclude.indexOf(par) < 0) && (nodes.params.indexOf(par) < 0))
+                                            self.nested({ key: par, obj: params[par], selector: { selector: selector }, args: args });
+
+                                }
+
+                                self.on(params.on, { selector: selector });
+
+
+                            } else {
+
+                                var selector = self.selector(params, selectorParams);
+
+                                for (var par in params)
+                                    if ((nodes.exclude.indexOf(par) < 0) && (nodes.params.indexOf(par) < 0))
+                                        self.nested({ key: par, obj: params[par], selector: selector, args: args });
+
+                                if (params.on)
+                                    self.on(params.on, { selector: selector });
+
+                            }
+
+
+                        } // end of self.only
+
+                    }
+                    //}
+                } else if (typeof params == 'function')
+                    return params(selectorParams);
+
+                else
+                    self.log('can\'t execute: ' + params);
+            }
+
+        }
+    };
+
+    this.callback = function (params) {
+        /* console.log('callback');
+        console.log(params); */
+        // {do, find, replace}
+        if (params) {
+            var path = params.to;
+            if (params.var) path = 'var ' + params.var; // TO DO: remove
+            let selector;
+            let element = params.element; // elementToSelector ?
+            if (element && element.isConnected) params.value = self.elementToSelector(element);
+            if (path) {
+                var context = self.context(path);
+                self.element({ path: path, value: params.value, root: context });
+            }
+            if (params.do)
+                self.do(params.do, selector);
+        }
+    };
+
+    this.nested = function (params) {
+        /* console.log('nested');
+        console.log(params); */
+        // check plugins required
+        let pluginsRequired = self.pluginsRequired(params.key);
+        if (pluginsRequired.length > 0) {
+            self.pluginsLoader(pluginsRequired, self.nested, [params]);
+        } else {
+
+
+
+            // TO DO: regular expression like in this.element (should include setup and also :)
+            if (params.key.startsWith('set ')) {
+                self.setData({ key: params.key.substr(4), value: params.obj });
+            } else if (params.key.startsWith('var ') || params.key.startsWith('data ') || params.key.startsWith('set ')) {
+                // TO DO: remove this option. Is too ambiguous for debug -> use set
+                // deprecated from 1.0.4
+                console.log('%cdeprecated key: "' + params.key + '". Use "set key": "value"}', 'color:orange');
+
+                // Data setting prefix
+                // should be removed and replaced with the method "set" to improve the compatibility
+                // with the other possible keys (js functions, jsonic methods, html tags ex. <data class=""></data>)
+                // https://www.w3schools.com/tags/tag_data.asp
+                self.setData({ key: params.key, value: params.obj });
+
+            } else {
+
+                // CHECK IF KEY IS METHOD
+                //console.log('check if is a method');
+                var method = self.element({ path: params.key, root: self.methods });
+
+                if (method) { // search in jsonic.methods
+                    self.log('METHOD: ' + params.key, 'grey');
+                    var methodArgs = params.obj;
+
+                    /* if (params.key == 'swiper init') {
+                        self.log('method: ' + params.key);
+                        self.log('methodArgs');
+                        self.log(methodArgs);
+                        self.log('params.selector');
+                        self.log(params.selector);
+                        self.log('-----------');
+                    } */
+                    //methodArgs = self.replaceProperty(methodArgs, 'selector', params.selector);
+                    method(methodArgs, params.selector, params.args);
+
+
+                    /* } else if (params.key == 'set') { // TO DO: REMOVE
+    
+                        // JS METHOD (old)
+    
+                        var actionObj = {};
+                        actionObj[params.key] = params.obj;
+                        self.do(actionObj, params.selector); */
+                    /* } else if (nodes.functions.indexOf(params.key) >= 0) { // TO DO: REMOVE
+    
+                        // JS METHOD (old)
+    
+                        var actionObj = {};
+                        actionObj[params.key] = params.obj;
+                        //self.do(actionObj, undefined, params.selector);
+                        self.do(actionObj, params.selector); */
+                } else {
+
+                    // CHECK IF KEY IS A PARTS
+                    //console.log('check if is a part');
+                    // shortcut: content
+                    let nested;
+                    let part;
+
+                    var jsonicPart = false;
+                    if (self.json.parts) { // && par.match(/[.>]+/)) 
+                        part = self.element({ path: self.replaceAll(params.key, ':', '.'), root: self.json.parts });
+                        /* if (par.indexOf(':')>0 && !part) {
+                            jsonicPart = true;
+                            self.firebaseGetPart({localPath:localPath, container: params.selector, arg:params.obj});
+                        } */
+                    }
+
+                    if (part) {
+                        self.log('PART: ' + params.key, 'grey');
+
+                        /* console.log('params');
+                        console.log(params); */
+                        var partObj = params.obj;
+                        //nested = self.replaceProperty(part, 'value', params.obj); // obsolete?
+                        //nested = self.replaceProperty(part, 'arg', partObj); // obsolete
+                        //if (typeof partObj == 'string' && partObj.indexOf('{') >= 0) { // obsolete?
+                        // TO DO: this should be already inside self.do
+                        partObj = self.replaceProperties(partObj);
+                        // for backward compatibility can be partObj, null, true) // true is removeUndefined
+                        //}
+                        /* console.log('partObj');
+                        console.log(partObj);
+                            */
+                        //var partSelector = params.selector || partObj.selector;
+                        // TO DO: Check this
+                        // seems a workaround for fantacards/ui:qrcode
+                        // parts can receive the parameters {selector:..., setup:...}
+                        partObj.selector = partObj.selector || params.selector;
+
+                        // TO DO: deprecated fantacards:setPlayer
+                        if (partObj.setup) partObj = partObj.setup;
+                        // overwrites partObj.selector but execute receive params.selector
+                        // TO DO: replaceProperty should be improved to get also sub values like {arguments:on.success}
+                        //nested = self.replaceProperty(part, 'setup', partObj); // {setup} -> {arguments}
+                        //nested = self.replaceProperty(nested, 'arguments', partObj);
+                        //nested = self.replacePropertyWithPrefix(part, 'setup:', partObj); // {setup} -> {arguments}
+                        //nested = self.replacePropertyWithPrefix(nested, 'arguments:', partObj);// to tix
+                        nested = self.replacePropertyWithPrefix(part, 'setup', partObj); // {setup} -> {arguments}
+                        nested = self.replacePropertyWithPrefix(nested, 'arguments', partObj); // to tix
+
+
+                        self.extendJsonFromElement(nested); // or selectorParams
+
+                        //self.do(nested, partSelector, partObj);
+                        self.do(nested, params.selector, partObj);
+
+                        /*
+                        self.log('nested');
+                        self.log(nested);
+                        
+                        self.log('part key');
+                        self.log(params.key);
+                        self.log('part obj');
+                        self.log(part);
+                        */
+                    } else { // if (!jsonicPart) {  // should be if (par !== 'on', 'attr', 'style', 'items/data')
+                        // params.key is not var/data, a method, a part
+                        //var jsFunction = self.element({path: params.key, root: self.functions});
+                        if (self.json && self.json.functions && params.key && self.json.functions[params.key]) {
+                            //if (self.json.functions[params.key]) {
+                            self.log('FUNCTION: ' + params.key, 'grey');
+
+
+                            /* self.log('pluginsRequired');
+                            self.log(pluginsRequired); */
+                            let args = self.replaceProperties(params.obj, undefined, true); // undefined properties -> ''
+
+
+
+
+                            /* console.log('%cargs', 'color:red');
+                            console.log(args); */
+                            if (!args || !Array.isArray(args)) args = [args];
+
+                            if (self.json.functions[params.key].requires) {
+                                let pluginsRequired = [];
+                                for (let plugin of self.json.functions[params.key].requires) {
+                                    if (!self.pluginsLoaded[plugin])
+                                        pluginsRequired.push({ "name": plugin, version: "" });
+                                }
+
+                                if (pluginsRequired.length > 0)
+                                    //self.pluginsLoader(pluginsRequired, self.functions[params.key], args);
+                                    self.pluginsLoader(pluginsRequired, self.function, [{ name: params.key, arguments: args }]);
+                                else {
+                                    self.log('Plugins already loaded: ' + params.key, 'grey');
+                                    self.function({ name: params.key, arguments: args });
+                                    //self.functions[params.key](...args);
+                                }
+                            } else {
+                                /* let args = self.replaceProperties(params.obj);
+                                if (!args || !Array.isArray(args)) args = [args]; */
+                                self.log('Function without plugin required: ' + params.key, 'grey');
+                                self.function({ name: params.key, arguments: args }); // TO DO: check why here it can't have []
+
+                                //self.functions[params.key](...args);
+                            }
+
+                        } else {
+                            var windowFunction = self.element({ path: params.key, root: window });
+                            if (typeof windowFunction === 'function') {
+                                self.log('WINDOW function: ' + params.key, 'grey');
+                                windowFunction(self.replaceProperties(params.obj, undefined, true)); // undefined properties -> ''
+
+                                //windowFunction(self.replaceProperties(params.obj));
+                            } else if (windowFunction !== undefined) {
+                                self.log('window.' + params.key + ' is not a function', 'red');
+                                //self.log(params.key + ' not found', 'red');
+                                // use set for window assignment
+                                /*
+                                self.element({path: params.key, value:params.obj, root: window}); */
+                            } else {
+                                // NESTED HTML
+                                // Need to be improved. with nestedAction and nestedTag
+                                // here we can search only nestedAction
+                                // and from html we can search only for nestedTag's
+                                //nested = params.obj; // removed in 1.0.1
+                                // if is a nested html params.selector is required
+                                // impossible to understand if we are inside an html method
+                                // because the html tags can be nested and with any name
+                                if (params.selector) { // added in 1.0.1
+                                    self.log('TAG: ' + params.key, 'grey');
+                                    // should be also in this.html function if params is an array
+                                    let pluginsRequired = self.pluginsRequiredByTag(params.obj, params.key);
+                                    if (pluginsRequired.length > 0) {
+                                        let htmlTagParams = [params.obj, params.selector, params.key];
+                                        self.pluginsLoader(pluginsRequired, self.htmlTag, htmlTagParams);
+                                    } else {
+                                        self.htmlTag(params.obj, params.selector, params.key); // tagParam = params.key
+
+                                        //if (nested.database) self.addFirebaseTag(self.extend({}, nested, params.selector));
+                                    }
+                                } else {
+                                    self.log(params.key + ' not found', 'red');
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+
+        }
+    };
+
+    this.setData = function (params) {
+        //self.log('setData');
+        let setObj = {};
+        setObj[params.key] = params.value;
+        self.set(setObj);
+
+        /* if (params.path.indexOf('{') >= 0)
+            params.path = self.replaceProperties(params.path);
+
+        if (typeof params.value == 'string' && params.value.indexOf('{') >= 0)
+            params.value = self.replaceProperties(params.value);
+
+        self.element({path: params.path, value: params.value}); */
+        /* self.log(params.path);
+        self.log(self.element({path: params.path})); */
+    };
+
+    this.partContainers = {};
+
+
+
+    this.pluginsRequiredByTag = function (params, tagKey) {
+        // self.log('pluginsRequiredByTag');
+        /* self.log('params');
+        self.log(params);
+        self.log('par');
+        self.log(par);  */
+
+        if (self.json.resources) {
+
+            // analize function object or array of objects
+            const pluginsTags = self.json.resources.pluginsTags;
+            const pluginsAttr = self.json.resources.pluginsAttr;
+            var pluginsRequired = [];
+
+            if (pluginsTags[tagKey] && !self.pluginsLoaded[pluginsTags[tagKey].name])
+                pluginsRequired.push(pluginsTags[tagKey]);
+
+
+
+            if (typeof params == 'string') {
+                // for example: "tagName": "string" where tagName requires a plugin
+            } else if (typeof params == 'object') {
+
+                var objArray;
+                if (Array.isArray(params)) objArray = params; else objArray = [params];
+
+                for (var obj of objArray) {
+                    if (obj.attr) { // attr
+                        var attr = 'data-icon';
+                        if (obj.attr[attr]) {
+                            if (pluginsAttr[attr] && !self.pluginsLoaded[pluginsAttr[attr].name])
+                                pluginsRequired.push(pluginsAttr[attr]);
+                        }
+                    }
+                }
+            }
+            return pluginsRequired;
+        } else {
+            // should load resources
+            return false;
+        }
+    };
+
+    /*
+        
+        'locale': {
+            unit: month, weekday
+            format: long, short, narrow
+            index: 1,
+            lang: page:language
+    */
+    this.calendar = function (params, args) {
+        const localeName = (self.json.setup.language !== 'en') ? self.json.setup.language : 'en-US';
+        let calendarArr, todayIndex;
+
+        if (params.unit) {
+            switch (params.unit) {
+                case 'month':
+                    const monthFormat = params.format || 'long';
+                    var format = new Intl.DateTimeFormat(localeName, { month: monthFormat }).format;
+                    calendarArr = [...Array(12).keys()].map((m) => format(new Date(Date.UTC(2021, m))));
+                    todayIndex = new Date().getMonth();
+                    break;
+                case 'weekday':
+                    const weekdayFormat = params.format || 'long';
+                    var format = new Intl.DateTimeFormat(localeName, { weekday: weekdayFormat }).format;
+                    calendarArr = [...Array(7).keys()].map((day) => format(new Date(Date.UTC(2021, 5, day))));
+                    todayIndex = self.weekday();
+                    break;
+                default:
+                    self.log('"calendar" function can\'t recognize "unit" parameter');
+                    self.log(params.unit);
+                    break;
+            }
+
+            if (calendarArr) {
+                if (params.index !== undefined) {
+                    params.index = self.js(params.index);
+                    let index = Number(self.replaceProperties(params.index, args));
+                    return calendarArr[index];
+                } else {
+                    return calendarArr[todayIndex];
+                }
+            } else {
+                self.log('"calendar" function can\'t recognize "unit" or "format" parameters');
+            }
+
+        } else {
+            self.log('"calendar" function requires "unit" parameter');
+        }
+
+    };
+
+
+
+    this.month = function (params, monthFormat = 'long') {
+        const localeName = (self.json.setup.language !== 'en') ? self.json.setup.language : 'en-GB';
+        const format = new Intl.DateTimeFormat(localeName, { month: monthFormat }).format;
+        const weekdayArr = [...Array(12).keys()].map((m) => format(new Date(Date.UTC(2021, m))));
+        if (params !== undefined) {
+            var index = Number(self.replaceProperties(params));
+            return weekdayArr[index];
+        }
+        else
+            return weekdayArr;
+    };
+
+    this.weekday = function (params, weekdayFormat) {
+        //weekdayFormat = weekdayFormat || 'long';
+        const localeName = (self.json.setup.language !== 'en') ? self.json.setup.language : 'en-GB';
+        const format = new Intl.DateTimeFormat(localeName, { weekday: weekdayFormat }).format;
+        const weekdayArr = [...Array(7).keys()].map((day) => format(new Date(Date.UTC(2021, 5, day))));
+        var result;
+        if (params !== undefined) {
+            var index = Number(self.replaceProperties(params));
+            result = weekdayArr[index];
+        }
+        else
+            result = weekdayArr;
+
+        //if (weekdayFormat == 'short') result = result.substring(0,3);
+        return result;
+
+    };
+
+    /*     this.array = function (params, args) { // TO DO: to be removed
+            self.log('array');
+            self.log(params);
+    
+            if (Array.isArray(params))
+                return params;
+            else if (typeof params == 'string')
+                return self.docElement(params);
+            else if (typeof params == 'object') {
+                if (params && Object.keys(params).length > 0) { // actionObj !== {}
+                    var actionKey = Object.keys(params)[0]; // -> for
+                    var actionFunction = self.docElement('Array.prototype.' + actionKey); // method in window
+                    var actionValue = params[actionKey];
+    
+                    //actionValue = self.compile(actionValue, args); // array -> undefined
+                    if (!Array.isArray(actionValue))
+                        actionValue = [actionValue];
+    
+                    if (actionFunction) {
+                        if (typeof actionFunction == 'function')
+                            return actionFunction.call(actionValue);
+                        else
+                            return actionFunction;
+                    } else {
+                        self.log('unknown window function');
+                        return params; // return the same object
+                    }
+                } else {
+                    self.log('empty function');
+                    //self.log(actionObj);
+                    return undefined
+                }
+            }
+        } */
+    this.method = function (params, args) {
+
+        var value;
+
+        if (typeof params == 'string') {
+            return self.docElement(params);
+        } else {
+
+            if ((params.if == undefined) || self.if(params.if, undefined, args)) {
+
+                if (self.notEmptyObject(params)) {
+                    var actionKey = Object.keys(params)[0]; // -> for 
+                    var actionFunction = self.docElement(actionKey); // method in window
+                    var actionValue = params[actionKey];
+                    //actionValue = self.compile(actionValue, args);
+                    if (!Array.isArray(actionValue))
+                        actionValue = [actionValue];
+                    if (actionFunction) {
+                        if (typeof actionFunction == 'function')
+                            return actionFunction(...actionValue);
+
+                        else
+                            return actionFunction;
+                    } else {
+                        self.log('unknown function');
+                        self.log(params);
+                        return params; // return the same object
+                    }
+                } else {
+                    //self.log('empty function');
+                    //self.log(params);
+                    return undefined;
+                }
+            }
+        }
+
+        /*
+        var methodArgs = self.compile(actionValue, args);
+
+        if (value !== undefined) {
+        
+            if (!Array.isArray(methodArgs))
+                methodArgs = [methodArgs];
+
+            self.log('params');
+            self.log(params);
+
+            for (let method of methodArgs) {
+                for (let key in method) {
+                    if (key !== 'args') {
+                        self.log('key');
+                        self.log(key);
+                        if (value[key])
+                            if (method[key] && method[key] !== '') { // va aggiunto? ->  && value[key](method[key]) method[key] !== undefined &&
+                                methodArgs = method[key];
+                                self.log('methodArgs');
+                                self.log(methodArgs);
+
+                                if (!Array.isArray(methodArgs))
+                                    methodArgs = [methodArgs];
+                                for (let index in methodArgs) {
+                                    let methodArg = self.compile(methodArgs[index], args);
+                                    //if (typeof methodArg == 'string' && methodArg !== '' && methodArg == Number(methodArg)) // can be in compile
+                                    methodArgs[index] = methodArg; // Number(methodArg)
+                                }
+                                //try {
+                                //} catch (error) {
+                                //    self.log('Dayjs function error');
+                                if (typeof value[key] == 'function')
+                                    value = value[key](...methodArgs); // ES6 way
+                            } else
+                                if (typeof value[key] == 'function')
+                                    value = value[key]();
+                                else
+                                    value = value[key];
+                    } else {
+                        self.log('Method ' + key + ' in ' + methodName + ' not exist');
+                    }
+                }
+            }
+
+        } else {
+            self.log('method '+ methodName +' undefined');
+
+        }
+        */
+    };
+
+    this.Number = function (params, args) {
+        self.log('Number');
+        return self.method({ "Number": params }, args);
+    };
+
+    this.String = function (params, args) {
+        self.log('String');
+        return self.method({ "String": params }, args);
+
+        // jsonic.compile({String:{args:'1',padStart:[2, '0']}})
+        /*
+                "text": {
+                    "String": {
+                        "args": "{hour}",
+                        "padStart": [
+                            "0",
+                            2
+                        ]
+                    }
+                }
+        */
+    };
+
+    this.Math = function (params, args) {
+        return self.method(params, args, 'Math');
+
+        /* if (!Array.isArray(params))
+            params = [params];
+
+        for (let method of params) {
+            for (let key in method) {
+                self.log(key);
+                if (method[key] && method[key] !== '' && value[key](method[key])) {
+                    //methodArgs = self.compile(method[key]);
+                    methodArgs = method[key];
+                    if (!Array.isArray(methodArgs))
+                        methodArgs = [methodArgs];
+                    for (let index in methodArgs) {
+                        let methodArg = self.compile(methodArgs[index]);
+                        if (typeof methodArg == 'string' && methodArg !== '' && methodArg == Number(methodArg)) // can be in compile
+                            methodArgs[index] = Number(methodArg);
+                    }
+                    value = value[key](...methodArgs); // ES6 way
+                } else
+                    value = value[key]();
+            }
+        }
+
+        return value; */
+    };
+
+
+    this.dayjs = function (params, args) {
+
+        return self.method(params, args, 'dayjs');
+
+        /* self.log('dayjs');
+
+        var value = dayjs();
+        if (params.time)
+            value = dayjs(params.time);
+        //value = self.compile(value);
+
+        if (!Array.isArray(params))
+            params = [params];
+
+
+        for (let method of params) {
+            for (let key in method) {
+
+                if (key == 'time') {
+                } else if (value[key]) {
+                    if (method[key] && method[key] !== '' && value[key](method[key])) {
+                        //methodArgs = self.compile(method[key]);
+                        methodArgs = method[key];
+                        if (!Array.isArray(methodArgs))
+                            methodArgs = [methodArgs];
+                        for (let index in methodArgs) {
+                            let methodArg = self.compile(methodArgs[index]);
+                            if (typeof methodArg == 'string' && methodArg !== '' && methodArg == Number(methodArg)) // can be in compile
+                                methodArgs[index] = Number(methodArg);
+                        }
+                        value = value[key](...methodArgs); // ES6 way
+                    } else
+                        value = value[key]();
+                } else {
+                    try {
+                    } catch (error) {
+                        self.log('Dayjs function error');
+                        self.log(error);
+                        self.log('key');
+                        self.log(key);
+                        self.log('method[key]');
+                        self.log(method[key]);
+                    }
+
+                }
+            }
+            self.log('value');
+            self.log(value);
+        }
+        return value; */
+    };
+
+    this.moment = function (params, args) {
+
+        return self.method(params, args, 'moment');
+
+        /* self.log('moment');
+
+        var value = moment();
+        if (params.time)
+            value = moment(params.time);
+
+        if (!Array.isArray(params))
+            params = [params];
+
+        for (let method of params) {
+            for (let key in method) {
+                if (key !== 'time') {
+                    if (key == 'add') {
+                        value = value.add(Number(method[key].value), method[key].unit);
+                    } else if (key == 'subtract') {
+                        value = value.add(Number(method[key].value), method[key].unit);
+                    } else if (method[key] && method[key] !== '' && value[key](method[key])) {
+                        value = value[key](method[key]);
+                    } else {
+                        self.log('Moment function error: ');
+                        self.log('key');
+                        self.log(key);
+                        self.log('method[key]');
+                        self.log(method[key]);
+                    }
+                }
+            }
+            self.log('value');
+            self.log(value);
+    
+        }
+        return value;
+    */
+    };
+
+
+    /* const methodsList = ['day, format', 'year', 'years', 'quarter', 'dayOfYear', 'month', 'months', 'date', 'minute', 'minutes', 'hour', 'hours', 'second', 'seconds', 'millisecond', 'milliseconds', 'weekday', 'weekdays', 'isoWeekday', 'weekYear', 'isoWeekYear', 'weeksInYear', 'week', 'isoWeek', 'set', 'max', 'min', 'local', 'parseZone', 'unix', 'utc', 'utcOffset', 'zone', 'isValid', 'invalid', 'valueOf', 'startOf', 'endOf', 'fromNow', 'toNow', 'from', 'to', 'calendar', 'diff', 'daysInMonth', 'toDate', 'toArray', 'toJSON', 'toString', 'toISOString', 'toObject', 'inspect', 'isBefore', 'isSame', 'isAfter', 'isSameOrBefore', 'isSameOrAfter', 'isBetween', 'isDST', 'isLeapYear', 'isDate', 'locale', 'localeData', 'lang', 'monthsShort', 'weekdaysShort', 'weekdaysMin', 'defineLocale', 'updateLocale', 'monthsParse', 'weekdaysParse', 'longDateFormat', 'isPM', 'meridiem', 'relativeTime', 'pastFuture', 'ordinal', 'preparse', 'postformat', 'invalidDate', 'firstDayOfWeek', 'firstDayOfYear', 'duration', 'clone', 'humanize', 'asMilliseconds'];
+    for (var method in methodsList) {
+        if (params[method]) value = value[method](params[method]);
+    } */
+    /*  for (let param in params) {
+            if (param !== 'time') {
+                if (typeof value == 'object') {
+                    //if (param == 'day') value = value.day(Number(params[param]));
+                    if (param == 'add') {
+                        self.log('params.add.value');
+                        self.log(params.add.value);
+                        self.log('params.add.unit');
+                        self.log(params.add.unit);
+                        self.log('value');
+                        self.log(value);
+                        value.add(Number(5), params.add.unit);
+                        self.log('value.format(H)');
+                        self.log(value.format('H'));
+                    }
+                    else if (param == 'subtract') value.add(Number(params.subtract.value), params.subtract.unit);
+                    else if (value[param] && value[param](params[param]))
+                        value = value[param](params[param]);
+                    else
+                        self.log('Moment function error: '+ params[param]);
+                }
+                self.log('value');
+                self.log(value);
+            }
+        }
+*/
+    /* this.addNestedTag = function (params, selectorParams) {
+        var selector = self.selector(self.extend({}, params, selectorParams));
+        // remove tag params
+        var nestedParams = self.cloneObject(params);
+        var tagParams = ['tag', 'container', 'id', 'class', 'value', 'data-value', 'style', 'attr', 'title', 'text', 'animation', 'action', 'on', 'src', 'media', 'color', 'background', 'width', 'height', 'margin', 'padding', 'firebase'];
+        for (var par in nestedParams) {
+            if (tagParams.indexOf(par) >= 0)
+                delete nestedParams[par]
+        }
+
+        // serach for nested params
+        var mainTags = ['div', 'ul', 'p', 'span', 'a', 'button', 'input', 'textarea', 'iframe', 'table', 'thead', 'tbody', 'tfoot', 'tr', 'th', 'td', 'figure', 'figcaption', 'svg', 'small', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'icons'];
+        for (var par in nestedParams) {
+            self.log(par + ' NESTED IN ' + selector);
+            if (mainTags.indexOf(par) >= 0) {
+                self.htmlTag(nestedParams[par], {container: selector}, mainTags[mainTags.indexOf(par)]);
+            }
+        }
+    } */
+    this.dynamicCss = function (selector, property, value) {
+        if (value.indexOf('{') >= 0) {
+            var resizeData = self.dataStorage.get(element, "resize");
+            //var resizeData = $(selector).data('resize');
+            if (!resizeData) resizeData = {};
+            resizeData[property] = value;
+            var resizeData = self.dataStorage.set(element, "resize", resizeData);
+            //$(selector).data('resize', resizeData);
+            if (!self.resizeActions[selector]) self.resizeActions[selector] = {};
+            self.resizeActions[selector][property] = value;
+            var result = self.replaceProperties(value) || '';
+            //$(selector).css(property, result); // al cambio di pagina su this.page applichiamo self.resizeEvent()
+            /*                     self.log('----------------------');
+                        self.log('dynamicCss');
+                        self.log('selector');
+                        self.log(selector);
+                        self.log('property');
+                        self.log(property);
+                        self.log('value');
+                        self.log(value);
+                        self.log('result');
+                        self.log(result);
+                        self.log('----------------------');
+            */
+        } else {
+            var style = {};
+            style[property] = value;
+            self.css({
+                style: style
+            });
+            //$(selector).css(property, value);
+        }
+    };
+
+    /*  this.calc = function (selector, property, value) {
+        if (value.indexOf('{')>= 0) {
+            //var calcFunction = String(element.match(/calc\(([^\)]*)\)/)[0]);
+            var result = self.replaceProperties(value) || '';
+            return result;
+        } else {
+            return value;
+        }
+    } */
+    /* this.hTag = function (params, selectorParams, index) { // this.img already exist
+        if (Array.isArray(params)) {
+                for (var index in params)
+                self.hTag(params[index], selectorParams);
+        } else {
+            if (params.items) {
+                var itemsArray = params.items;
+                delete params.items;
+                for (var index in itemsArray) {
+                    self.hTag(self.replaceItems(params, itemsArray[index]), selectorParams);
+                }
+            } else {
+                if (typeof params == 'string') {params = {text: params}};
+                params.tag = 'h'+index;
+                var paramsReplaced = self.replaceProperties(params);
+                self.addTag(paramsReplaced, selectorParams);
+            }
+        }
+    } */
+    /* this.img = function (params, selectorParams, args) {
+        //self.log('img');
+        var tagParam = 'img';
+        var mainParam = 'src';
+
+        if (Array.isArray(params)) {
+                for (var index in params)
+                self.img(params[index], selectorParams);
+        } else {
+            if (params.items) {
+                var itemsArray = params.items;
+                delete params.items;
+                for (var index in itemsArray) {
+                    self.img(self.replaceItems(params, itemsArray[index]), selectorParams);
+                }
+            } else {
+                if (typeof params == 'string') {params = {src: params}};
+                params.tag = 'img';
+                //if (params.media) params.src = '{media:' + params.media + '}'; // can go under replaceProperties
+                var paramsReplaced = self.replaceProperties(params, args);
+                //var container = params.container || self.selector(selectorParams);
+
+                self.addTag(paramsReplaced, selectorParams);
+            }
+        }
+    } */
+    /* this.small = function (params, selectorParams) { // bootstrap
+        var mainParam = 'text';
+        if (Array.isArray(params)) {
+                for (var index in params)
+                self.small(params[index], selectorParams);
+        } else {
+            if (params.items) {
+                var itemsArray = params.items;
+                delete params.items;
+                for (var index in itemsArray) {
+                    self.small(self.replaceItems(params, itemsArray[index]), selectorParams);
+                }
+            } else {
+                if (typeof params == 'string') {params = {text: params}};
+                params.tag = 'small';
+                self.addTag(params, selectorParams);
+                if (params.firebase) self.addFirebaseTag(self.extend({}, params, selectorParams));
+            }
+        }
+    } */
+    /* this.button = function (params, selectorParams) { // bootstrap
+        var mainParam = 'text';
+        if (Array.isArray(params)) {
+                for (var index in params)
+                self.button(params[index], selectorParams);
+        } else {
+            if (params.items) {
+                var itemsArray = params.items;
+                delete params.items;
+                for (var index in itemsArray) {
+                    self.button(self.replaceItems(params, itemsArray[index]), selectorParams);
+                }
+            } else {
+                if (typeof params == 'string') {params = {text: params}};
+                params.tag = 'button';
+                self.addTag(params, selectorParams);
+                if (params.firebase) self.addFirebaseTag(self.extend({}, params, selectorParams));
+            }
+        }
+    } */
+    /*
+        this.input = function (params, selectorParams) {
+            var tagParam = 'input';
+            var mainParam = 'text';
+            if (Array.isArray(params)) {
+                    for (var index in params)
+                    self.input(params[index], selectorParams);
+            } else {
+                if (params.items) {
+                    var itemsArray = params.items;
+                    delete params.items;
+                    for (var index in itemsArray) {
+                        self.input(self.replaceItems(params, itemsArray[index]), selectorParams);
+                    }
+                } else {
+                    self.addTag(self.createTagParams(params, tagParam, mainParam), selectorParams);
+                    if (params.firebase) self.addFirebaseTag(self.extend({}, params, selectorParams));
+                }
+            }
+        }
+    
+        this.span = function (params, selectorParams) {
+            var mainParam = 'text';
+            if (Array.isArray(params)) {
+                    for (var index in params)
+                    self.span(params[index], selectorParams);
+            } else {
+                if (params.items) {
+                    var itemsArray = params.items;
+                    delete params.items;
+                    for (var index in itemsArray) {
+                        self.span(self.replaceItems(params, itemsArray[index]), selectorParams);
+                    }
+                } else {
+                    params.tag = 'span';
+                    // qui ci andrebbe replaceProperties
+                    if (typeof params == 'string') {params = {text: params}};
+                    self.addTag(params, selectorParams);
+                    if (params.firebase) self.addFirebaseTag(self.extend({}, params, selectorParams));
+                }
+            }
+        }
+            */
+    /*  this.a = function (params, selectorParams) {
+        var mainParam = 'text';
+        var tagParam = 'a';
+        if (Array.isArray(params)) {
+                for (var index in params)
+                self.a(params[index], selectorParams);
+        } else {
+            if (params.items) {
+                var itemsArray = params.items;
+                delete params.items;
+                for (var index in itemsArray) {
+                    self.a(self.replaceItems(params, itemsArray[index]), selectorParams);
+                }
+            } else {
+                if (typeof params == 'string') {params = {text: params}};
+                params.tag = 'a';
+                self.addTag(params, selectorParams);
+                if (params.firebase) self.addFirebaseTag(self.extend({}, params, selectorParams));
+            }
+        }
+    } */
+    /* this.p = function (params, selectorParams) {
+        var mainParam = 'html';
+        if (Array.isArray(params)) {
+                for (var index in params)
+                self.p(params[index], selectorParams);
+        } else {
+            if (params.items) {
+                var itemsArray = params.items;
+                delete params.items;
+                for (var index in itemsArray) {
+                    self.p(self.replaceItems(params, itemsArray[index]), selectorParams);
+                }
+            } else {
+                if (typeof params == 'string') {params = {html: params}};
+                params.tag = 'p';
+                self.addTag(params, selectorParams);
+                if (params.firebase) self.addFirebaseTag(self.extend({}, params, selectorParams));
+            }
+        }
+    } */
+    /* this.lottie = function (params, selectorParams, args) {
+        self.htmlTag(params, selectorParams, 'lottie-player', 'src');
+    } */
+    //this.lottie = function (params, selectorParams, args) {
+    //    self.htmlTag(params, selectorParams, 'lottie-player', 'src');
+    /* self.log('lottie');
+    var mainParam = 'src';
+    var tagParam = 'lottie-player';
+    if (Array.isArray(params)) {
+            for (var index in params)
+            self.lottie(params[index], selectorParams);
+    } else {
+        if (params.items) {
+            var itemsArray = params.items;
+            delete params.items;
+            for (var index in itemsArray) {
+                self.lottie(self.replaceItems(params, itemsArray[index]), selectorParams);
+            }
+        } else {
+            var container = params.container || self.selector(selectorParams);
+            // qui ci andrebbe replaceProperties
+            //this.alert(self.selector(self.extend({}, params, selectorParams)));
+            self.addTag(self.createTagParams(params, tagParam, mainParam), {container: container});
+            //if (params.firebase) self.addFirebaseTag(self.extend({}, params, selectorParams));
+        }
+    } */
+    //}
+    /* this.iframe = function (params, selectorParams) {
+        var mainParam = 'src';
+        if (Array.isArray(params)) {
+                for (var index in params)
+                self.iframe(params[index], selectorParams);
+        } else {
+            if (params.items) {
+                var itemsArray = params.items;
+                delete params.items;
+                for (var index in itemsArray) {
+                    self.iframe(self.replaceItems(params, itemsArray[index]), selectorParams);
+                }
+            } else {
+                if (typeof params == 'string') {params = {src: params}};
+                params.tag = 'iframe';
+                var paramsReplaced = self.replaceProperties(params);
+                self.addTag(paramsReplaced, selectorParams);
+            }
+        }
+    } */
+    /*  this.textarea = function (params, selectorParams) {
+        if (Array.isArray(params)) {
+                for (var index in params)
+                self.textarea(params[index], selectorParams);
+        } else {
+            if (params.items) {
+                var itemsArray = params.items;
+                delete params.items;
+                for (var index in itemsArray) {
+                    self.textarea(self.replaceItems(params, itemsArray[index]), selectorParams);
+                }
+            } else {
+                if (!params.tag) params.tag = 'textarea';
+                //params.container = params.container || self.selector(selectorParams);
+                self.addTag(params, selectorParams);
+            }
+        }
+    } */
+    /*
+    this.div = function (params, selectorParams) {
+        if (params.firebase) {
+            self.log('==========');
+            self.log('div');
+            self.log(params);
+            self.log('==========');
+        }
+
+        var tagParam = 'div';
+        var mainParam = 'text';
+        if (Array.isArray(params)) {
+                for (var index in params)
+                self.div(params[index], selectorParams);
+        } else {
+            if (params.items) {
+                var itemsArray = params.items;
+                delete params.items;
+                for (var index in itemsArray) {
+                    self.div(self.replaceItems(params, itemsArray[index]), selectorParams);
+                }
+            } else {
+                self.addTag(self.createTagParams(params, tagParam, mainParam), selectorParams);
+                if (params.firebase) self.addFirebaseTag(self.extend({}, params, selectorParams));
+            }
+        }
+    }
+
+    this.ul = function (params, selectorParams) {
+        if (Array.isArray(params)) {
+                for (var index in params)
+                self.ul(params[index], selectorParams);
+        } else {
+            if (params.items) {
+                var itemsArray = params.items;
+                delete params.items;
+                for (var index in itemsArray) {
+                    self.ul(self.replaceItems(params, itemsArray[index]), selectorParams);
+                }
+            } else {
+                params.tag = 'ul';
+                    
+                var paramsReplaced = self.replaceProperties(params);
+                self.addTag(paramsReplaced, selectorParams);
+                if (params.firebase) self.addFirebaseTag(params);
+            }
+        }
+    }
+    */
+    this.li = function (params, selectorParams) {
+        if (Array.isArray(params)) {
+            for (var index in params)
+                self.li(params[index], selectorParams);
+        } else {
+            if (params.items) {
+                var itemsArray = (typeof params.items == 'string') ? self.json.items[params.items] : params.items;
+                //var itemsArray = params.items;
+                delete params.items;
+                for (var index in itemsArray) {
+                    if (self.only(itemsArray[index].roles))
+                        self.li(self.replaceItems(params, itemsArray[index]), selectorParams);
+                }
+            } else {
+                if (typeof params == 'string') { params = { html: params }; };
+                params.tag = 'li';
+                //params.container = params.container || self.selector(selectorParams);
+                self.do(params, selectorParams);
+            }
+        }
+    };
+
+    this.remove = function (params, selectorParams, args) {
+        var selector = self.selector(params.selector || self.selector(selectorParams));
+        if (selector) {
+            var elements = self.queryAll(selector);
+            if (elements) {
+                elements.forEach(function (element, index) {
+                    element.remove();
+                });
+            }
+        }
+    };
+
+    this.dispatchEvent = function (params, selectorParams, args) {
+        var selector = self.selector(params.selector || self.selector(selectorParams));
+        if (selector) {
+            var elements = self.queryAll(selector);
+            if (elements) {
+                elements.forEach(function (element, index) {
+                    element.dispatchEvent(new Event(params.name));
+                });
+            }
+        }
+    };
+
+    /* this.element with "selector" and "method": (remove/dispatchEvent) */
+    this.html = function (params, selectorParams, args) {
+        /* self.log('html');
+        self.log('params');
+        self.log(params);
+        self.log('selectorParams');
+        self.log(selectorParams);   */
+
+        // TO DO: update
+        // html properties can be only:
+        // selector, attr, html, on, for, if
+        // can't be:
+        // animate (should go inside on: init?) 
+        // tags (div etc) because it should go inside html
+        // do
+        // functions, window functions...
+        // text should be alternative to html tag. if inside html, it should give an error
+        // TO DO: verificare se args viene portato agli elementi annidati (non andava con svg) 
+        if (params) {
+
+            if (Array.isArray(params)) {
+
+                // TO DO: shoud check if params require plugins
+                for (var obj of params)
+                    self.html(obj, selectorParams, args);
+            } else {
+
+                //if (params.container == '#weatherReport') alert()
+                //var container = (selectorParams) ? self.selector(selectorParams) : params.container; // unused
+                //var selector = self.selector(self.extend({}, params, selectorParams), undefined, true); //), undefined, true);
+                /*
+                            self.log('selector');
+                            self.log(selector); */
+                var container = self.selector(params.selector || params.container) || self.selector(selectorParams);
+                //var container = self.selector(selectorParams, undefined, true) || self.selector(params, selectorParams, true);
+                /* self.log('container');
+                self.log(container); */
+                /*                 var element = self.query(container);
+                                self.log('element');
+                                self.log(element);
+                    */
+                if (container) {
+                    var element = self.query(container);
+
+                    // empty or not? probably yes (like jquery) but we need append/prepend method
+                    // append only all the items in the array
+                    // TO DO: queryAll -> elements
+                    if (element) {
+
+                        if (typeof params == 'string') {
+
+                            //var paramsCompiled = self.compile(params, args);
+                            var paramsCompiled = self.replaceProperties(params, args);
+
+                            //$(container).append(paramsCompiled); // should be .html not append
+                            //element.appendChild(paramsCompiled);
+                            if (paramsCompiled) {
+                                if (typeof paramsCompiled == 'object') {
+                                    // should be a nested tag or actions on,for,if,empty
+                                    self.do(paramsCompiled, { selector: container }, args);
+
+                                } else if (typeof paramsCompiled == 'string') {
+                                    element.innerHTML += paramsCompiled; // TO DO: now is like append. Is it correct?
+                                }
+                            }
+
+                        } else {
+
+                            if (params.empty || params.do == 'empty') {
+                                element.innerHTML = '';
+                                delete params.empty;
+                            }
+
+                            if (params.tag) {
+                                self.do(params, container, args);
+                                //self.nested({key: params.tag, obj: params[par], selector: {selector: container}, args: args});
+                            }
+                            else if (params.html) {
+                                // replace \" to "
+                                //var htmlCompiled = self.compile(params.html, args); // is undefined
+                                // TO DO: replace all the following "compile" with replaceProperties?
+                                /* self.log('params.html');
+                                self.log(params.html); */
+                                var htmlCompiled = self.replaceProperties(params.html, args);
+                                /* self.log('htmlCompiled');
+                                self.log(htmlCompiled); */
+                                self.html(htmlCompiled, { selector: container });
+                            } else if (params.lang) {
+                                //alert(self.json.setup.language);
+                                var textLang = params.lang[self.json.setup.language] || params.lang['en'] || params.lang[Object.keys[0]];
+                                if (Array.isArray(textLang)) {
+                                    var paragraphs = [];
+                                    for (var paragraph of textLang)
+                                        paragraphs.push({ p: paragraph });
+                                    self.html(paragraphs, selectorParams, args);
+                                }
+                                else
+                                    element.innerHTML = self.replaceProperties(textLang, args);
+
+                                if (element) {
+                                    self.attribute(element, 'data-text', true); // textKey instead of lang?
+                                    self.dataStorage.set(element, 'params', params);
+                                }
+
+                            } else if (params.text) { // string
+                                //params.text = self.replaceTags({text:params.text});
+                                //params.text = self.text(params.text);  // verifica presenza di tags e traduzioni
+                                //$(selector).text(self.compile(params.text, args));
+                                element.textContent = self.replaceProperties(params.text, args);
+                                //} else if (params.empty || params.do == 'empty') {
+                                //    element.innerHTML = '';
+                            } else if (params.append) { // string
+                                //params.append = self.replaceTags({text:params.append});
+                                //$(selector).append(self.compile(params.append, args));
+                                //element.appendChild(self.compile(params.append, args));
+                                element.innerHTML += self.replaceProperties(params.append, args);
+
+                            } else if (params.prepend) { // string
+                                //params.prepend = self.replaceTags({text:params.prepend});
+                                //$(selector).prepend(self.compile(params.prepend, args));
+                                //element.insertBefore(self.compile(params.prepend, args));
+                                element.innerHTML = self.replaceProperties(params.prepend, args) + element.innerHTML;
+
+                            } else if (params.blocks) { // obsolete
+                                self.blocks(params.blocks, { selector: container }, args);
+                            } else {
+
+                                let nestedParams = self.cloneObject(params);
+                                if (nestedParams.style) delete nestedParams.style;
+                                if (nestedParams.attr) delete nestedParams.attr;
+
+                                console.warn('UNKNOWN TAG');
+                                console.warn(params);
+                                // on, for, if... (can be changed to include also html)
+                                self.do(nestedParams, { selector: container }, args);
+
+
+                                if (element.isConnected) {
+                                    // case "html":{selector:... attr: }
+                                    // the wrong use "html":{selector, attr, html:...}
+                                    // now doesn't work (because is inside the last else)
+                                    /* if (params.on) {
+                                        alert(container);
+                                        self.on(params.on, { selector: container }, args);
+                                    } */
+                                        
+                                    if (params.attr) self.setAttributes(element, params.attr, args);
+                                    if (params.style) self.css(params, selectorParams, args); //  to be removed
+
+                                    // TO DO: params.style is deprecated (now in attr or css)
+                                }
+                                //self.blocks(params, selectorParams, args);
+                            }
+
+
+
+                        }
+                    } else { // !element
+                    }
+                } else {
+                    self.log('"html" object requires selector property', 'red');
+                    self.log(params);
+                    //self.log(selectorParams);
+                }
+
+                //}
+                //}
+            }
+        } else {
+            self.log('"html" object without params');
+        }
+
+    };
+
+    /* this.add = function (params) { // obsoleto, sostituito da html
+        var selector = self.selector(params);
+        if (params.inverse)
+            $(selector).append(params.html);
+        else
+            $(selector).prepend(params.html);
+    } */
+    /*    this.attr = function (params, selectorParams, args) {
+            var selector = self.selector(params);
+            var element = self.query(selector);
+            for (var attribute in params.attr)
+            elements.forEach(function (element, index) {
+                element.setAttribute(attrId, attrValue);
+            });
+        }
+        */
+    /* this.empty = function (params) {
+        // { [container, class, value, id] }
+        var selector = self.selector(params);
+        $(selector).empty();
+    } */
+    /* this.addClass  = function (params) {
+        var selector = self.selector(params);
+        $(selector).addClass(params);
+    }
+
+    this.removeClass  = function (params) {
+        self.log('removeClass');
+        var selector = self.selector(params);
+        $(selector).removeClass(params);
+    } */
+    /* this.toggleClass  = function (params) {
+        var selector = self.selector(params);
+        $(selector).toggleClass(params);
+    } */
+    //"#wifi > ul > li > span[data-field=share]:contains('Private')"
+    this.setAttributes = function (elements, attrs, args) {
+        for (var attribute in attrs)
+            if (attrs[attribute])
+                self.attribute(elements, attribute, self.replaceResult(attrs[attribute], args));
+            else
+                self.attribute(elements, attribute, "");
+            //self.attribute(elements, attribute, attrs[attribute]);
+            //self.attribute(elements, attribute, self.replaceWithPrefix(attrs[attribute], 'result', args)); // TO DO: check
+        // before remove and check all the {result} occurrence (result excludes do/then/success etc.)
+        // replaceResult replace {result} from Alert (should be obsolete)
+        // check in the actual apps if {result} is used
+    };
+
+/*     this.setAttributes = function (elements, attrs, args) {
+            if (!Array.isArray(elements)) elements = [elements];
+            elements.forEach(function (element, index) {
+                for (var attribute in attrs) {
+                    if (typeof attrs[attribute] == 'boolean' && attrs[attribute]) { // it consider also firebase (empty values are removed)
+                        element.setAttribute(attribute, "");
+                    } else {
+                        //if (attrs[attribute] == undefined) attrs[attribute] = '';
+                        element.setAttribute(attribute, self.replaceProperties(attrs[attribute]));
+                    }
+                }
+            });
+            self.attribute(elements, attribute, self.replaceResult(attrs[attribute], args));
+    }; */
+
+    // TO DO: distinguish setAttribute from getAttribute
+    // because we need to set attribute empty
+    this.attribute = function (elements, attrId, attrValue) {
+        if (typeof attrValue !== undefined) {
+            if (!Array.isArray(elements)) elements = [elements];
+            elements.forEach(function (element, index) {
+                if (typeof attrValue == 'boolean' && attrValue) { // it consider also firebase (empty values are removed)
+                    element.setAttribute(attrId, "");
+                } else {
+                    element.setAttribute(attrId, self.replaceProperties(attrValue));
+                }
+            });
+        } else {
+            if (!Array.isArray(elements))
+                return elements.getAttribute(attrId); // todo: intercept the error "Cannot read properties of undefined (reading 'getAttribute"
+
+            else
+                return elements[0].getAttribute(attrId);
+        }
+    };
+
+    this.attr = function (params, selectorParams, args) {
+        // deprecated. to be replaced with "css" {selector, style, addClass, removeClass, toggleClass}
+        // css is used as an action to apply addClass removeClass toggleClass
+        // and to apply style: {...}
+        //params = self.replaceProperties(params);
+        self.css(self.replaceProperties(params), selectorParams, args);
+    };
+
+    this.styleElement = function (params, element, args) {
+        for (var styleName in params) {
+            if (styleName.startsWith('--'))
+                element.style.setProperty(styleName, self.replaceProperties(params[styleName], args));
+
+            else
+                element.style[styleName] = self.replaceProperties(params[styleName], args);
+        }
+    };
+
+    this.css = function (params, selectorParams, args) {
+        // {selector, style, addClass, removeClass, toggleClass}
+
+        /* console.log('selectorParams');
+        console.log(selectorParams);
+        console.log('css');
+        console.log(params); */
+        if (Array.isArray(params)) {
+            for (var obj of params)
+                self.css(obj, selectorParams, args);
+            /* } else if (params.selector && Array.isArray(params.selector)) {
+                for (let selector of params.selector) {
+                    let obj = self.cloneObject(params);
+                    obj.selector = selector;
+                    self.css(obj, selectorParams, args); */
+        } else {
+
+            var selector = self.selector(params.selector || params.container, undefined, true) || self.selector(selectorParams, undefined, true);
+            var elements = self.queryAll(selector);
+
+            //var selector = params.selector || selectorParams;
+            //var elements = document.querySelectorAll(selector);
+            //console.log(elements);
+            if (elements) {
+                elements.forEach(function (element, index) {
+
+                    if (element) {
+
+                        if (typeof params.style == 'object') {
+                            self.styleElement(params.style, element, args);
+                        }
+
+                        if (params.addClass)
+                            self.addClass(element, params.addClass);
+                        if (params.removeClass)
+                            self.removeClass(element, params.removeClass);
+                        if (params.toggleClass)
+                            self.toggleClass(element, params.toggleClass);
+
+                    } else {
+                        self.log('the function "css" can\'t find the selector ' + selector);
+                        self.log(params);
+                        self.log(selectorParams);
+                    }
+                });
+            } else {
+                self.log('"css" function is unable to select: ' + selector);
+                self.log('params');
+                self.log(params);
+                self.log('selectorParams');
+                self.log(selectorParams);
+            }
+        }
+    };
+
+    /* this.class = function (params) { // obsolete -> css
+        self.log('self.class');
+        self.log(params);
+        // { [container, class, value, id]
+        // [style, addClass, removeClass] }
+        var selector = self.selector(params);
+        if (params.style)
+            $(selector).css(params.style);
+        if (params.add)
+            $(selector).addClass(params.add);
+        if (params.remove)
+            $(selector).removeClass(params.remove);
+        if (params.toggle)
+            $(selector).toggleClass(params.toggle);
+    } */
+    /* this.createPage = function (data) {
+        // SPOSTATA SOTTO fixo.pages.js
+        
+        //self.log('createPage');
+        //self.log(data);
+        if (!$('#'+data.id).length) {
+            $(data.container).append('<div id="'+data.id+'" class="fixoPage"></div>');
+            if (data.background) {
+                $('#'+data.id).css({
+                    'background-color': data.background
+                });
+            }
+        }
+    } */
+    /*     this.iconPng = function(icon) {
+            return 'https://'+self.domain+'/app/files/icons/100white/'+icon+'.png';
+        } */
+    /*     this.imgTag = function (data) {
+            // DIPENDENZA CON iconPng
+            
+            var imgId = data.id || '';
+            var imgClass = data.class || '';
+            var imgValue = data.value || '';
+            var imgStyle = data.style || ''; // || 'width: 84px; margin:6px 10px;'; // ATTENZIONE: stile predefinito da rimuovere
+            var onClick = (data.action) ? 'onclick="javascript:self.do(\''+data.action+'\',\''+imgValue+'\')" ' : '';
+            return '<img src="'+self.iconPng(data.icon)+'" id="'+imgId+'" class="'+imgClass+'" data-value="'+imgValue+'" style="'+data.style+'" '+onClick+'/>';
+        } */
+    /*     this.setImg = function (data) {
+            // Sembra inutilizzata
+            // DIPENDENZA CON iconPng
+    
+            // data = {icon, style}
+            var selector = self.selector(data);
+            var imgValue = data.value || '';
+            $(selector).attr('src', self.iconPng(data.icon));
+            if (data.style) $(selector).css(style);
+            if (data.action) {
+                $(selector).attr('onclick', 'javascript:self.do(\''+data.action+'\',\''+imgValue+'\')');
+            }
+        } */
+    // --------------
+    //  SVG
+    // --------------
+    /*     this.svgSet = function (params) {
+            //self.log('svgSet');
+            //self.log(params);
+            if (self.json && self.json.icons) {
+            //if (self.json.setup && self.json.setup.icons) {
+    
+                if (params.icon) {
+                    var iconObj = {};
+                    iconObj.icon = (params.icon.indexOf(':')) ? params.icon.split(/:/)[1] : string;
+                    iconObj.set = (params.icon.indexOf(':')) ? params.icon.split(/:/)[0] : undefined;
+    
+                    var svgIcons = self.json.icons || {}; // {src, prefix, suffix}
+                    //var svgIcons = self.json.setup.icons || {}; // {src, prefix, suffix}
+                    if (iconObj.set)
+                        if (svgIcons[iconObj.set])
+                            svgIcons = svgIcons[iconObj.set];
+                        else
+                            self.log('Can\'t find the icons set "'+iconObj.set+'" in "icons"');
+                    iconObj.src = svgIcons.src || ''; // serve?
+                    var svgPrefix = svgIcons.prefix || '';
+                    var svgSuffix = svgIcons.suffix || '';
+                    //if (iconObj.src !== '' && iconObj.icon) iconObj.src = '#' + svgPrefix + iconObj.icon + svgSuffix;
+                    if (iconObj.icon) {
+                        
+                        if (!svgIcons.preload)
+                            // siamo vicini
+                            iconObj.src = svgIcons.src + '#' + svgPrefix + iconObj.icon + svgSuffix;
+                        else
+                            iconObj.src = '#' + iconObj.set + '_' + svgPrefix + iconObj.icon + svgSuffix;
+                    }
+                    iconObj.viewbox = svgIcons.viewbox; //  || '0 0 25 25';
+                    return iconObj; // {src, set, name, viewbox}
+                } else {
+                    self.log('icon "name" parameter undefined');
+                }
+            } else {
+                self.log('Can\'t find "icons" in "setup"');
+            }
+        }
+        
+        this.svgChange = function (data) {
+            self.log('svgChange');
+            self.log(data);
+    
+            var selector = self.selector(data); //), undefined, true);
+            var containerElement = self.query(selector);
+    
+            var elementSvg = containerElement.querySelectorAll('svg')[0];
+            var elementSvgUse = elementSvg.querySelectorAll('use')[0];
+            var elementSvgText = elementSvg.querySelectorAll('text')[0];
+            var elementSvgCircle = elementSvg.querySelectorAll('circle')[0];
+    
+            var iconObj = self.svgSet(data);  // {src, set, name, viewbox}
+    
+            if (iconObj.src)
+                elementSvgUse.setAttribute('xlink:href', iconObj.src);
+                //$(data.container + ' > svg > use').attr('xlink:href', iconObj.src);
+    
+            if (data.text !== undefined) {
+                elementSvgText.textContent = data.text;
+                // $(data.container + ' > svg > text').text(data.text);
+    
+                var textY = 6.5; // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor
+                if (data.textSize !== undefined) {textY = data.textSize/2;}
+    
+                if (data.textPosition == 'bottom') { // textPosition should be removed
+                    elementSvgUse.setAttribute('transform', 'translate(0, -20) scale(0.80)');
+                    //$(data.container + ' > svg > use').attr("transform", "translate(0, -20) scale(0.80)");
+                    textY += 26;
+                }
+    
+                elementSvgText.setAttribute('y', textY);
+                //$(data.container + ' > svg > text').attr('y',textY);
+                elementSvgText.style['font-size'] = data.textSize+'px';
+                //$(data.container + ' > svg > text').css('font-size',data.textSize+'px');
+    
+            } else {
+                elementSvgText.textContent = '';
+                //$(data.container + ' > svg > text').text('');
+    
+            }
+            if (data.background !== undefined){
+    
+                elementSvgCircle.setAttribute('fill', data.background);
+                elementSvgCircle.setAttribute('fill-opacity', 1);
+                elementSvgCircle.style['stroke'] = data.background;
+            }
+            if (data.border !== undefined) {
+                elementSvgCircle.setAttribute('stroke-opacity', 1);
+                elementSvgCircle.style['stroke'] = data.border;
+            }
+    
+            if (data.color !== undefined && data.color !== 'colored') {
+                elementSvgUse.style['fill'] = data.color;
+            }
+            if (data.textColor !== undefined){
+                elementSvgText.style['fill'] = data.textColor;
+            } else if (data.color) {
+                elementSvgText.style['fill'] = data.color;
+            }
+    
+        }
+    
+        this.svgImage = function (data) {
+            //$(data.container).hide();
+            //$(data.container).css({opacity:0});
+    
+            var selector = self.selector(data); //), undefined, true);
+            var containerElement = self.query(selector);
+            //var containerElement = self.query(data.container);
+    
+            //if (data.value !== undefined) $(data.container).data('value', data.value);
+    
+            var iconObj = self.svgSet(data); // {src, set, name, viewbox}
+            var viewBox = iconObj.viewbox || '-50 -50 100 100';
+            var htmlString = '<svg viewBox="'+viewBox+'"><circle cx="0" cy="0" r="46" fill-opacity="0"></circle><use xlink:href=""></use><text x="0" y="0" text-anchor="middle" fill=""></text></svg>';
+    
+            if (containerElement) {
+                containerElement.innerHTML = htmlString;
+    
+                //$(data.container).append('<svg viewBox="'+viewBox+'"><circle cx="0" cy="0" r="46" fill-opacity="0"></circle><use xlink:href=""></use><text x="0" y="0" text-anchor="middle" fill=""></text></svg>');
+    
+                var elementSvg = containerElement.querySelectorAll('svg')[0];
+                var elementSvgUse = elementSvg.querySelectorAll('use')[0];
+                var elementSvgText = elementSvg.querySelectorAll('text')[0];
+                var elementSvgCircle = elementSvg.querySelectorAll('circle')[0];
+    
+                elementSvgUse.setAttribute('xlink:href', iconObj.src);
+                //$(data.container + ' > svg > use').attr('xlink:href', iconObj.src);
+    
+                if (data.text !== undefined) {
+    
+                    elementSvgText.textContent = data.text;
+                    // $(data.container + ' > svg > text').text(data.text);
+    
+                    var textY = 6.5; // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor
+                    if (data.textSize !== undefined) {textY = data.textSize/2;}
+    
+                    if (data.textPosition == 'bottom') { // textPosition should be removed
+                        elementSvgUse.setAttribute('transform', 'translate(0, -20) scale(0.80)');
+                        //$(data.container + ' > svg > use').attr("transform", "translate(0, -20) scale(0.80)");
+                        textY += 26;
+                    }
+    
+                    elementSvgText.setAttribute('y', textY);
+                    //$(data.container + ' > svg > text').attr('y',textY);
+                    elementSvgText.style['font-size'] = data.textSize+'px';
+                    //$(data.container + ' > svg > text').css('font-size',data.textSize+'px');
+                }
+    
+    
+                if (data.background !== undefined) {
+    
+                    elementSvgCircle.setAttribute('fill', data.background);
+                    elementSvgCircle.setAttribute('fill-opacity', 1);
+                    elementSvgCircle.style['stroke'] = data.background;
+                }
+                if (data.border !== undefined){
+                    elementSvgCircle.setAttribute('stroke-opacity', 1);
+                    elementSvgCircle.style['stroke'] = data.border;
+    
+                    //$(data.container + ' > svg > circle').attr('stroke-opacity', 1);
+                    // FORSE DEVE DIVENTARE attr ANZICHE' css
+                    //$(data.container + ' > svg > circle').css({'stroke': data.border});
+                }
+                
+                //if ((data.color === undefined) && (data.color !== 'colored')) {data.color = '#fff';}
+                if (data.color !== undefined && data.color !== 'colored') {
+                    elementSvgUse.style['fill'] = data.color;
+                    //$(data.container + ' > svg > use').css({'fill': data.color});
+                    //$(data.container + ' > svg > text').css({'fill': data.color});
+                }
+                if (data.textColor !== undefined){
+                    elementSvgText.style['fill'] = data.textColor;
+                    //$(data.container + ' > svg > text').css({'fill': data.textColor});
+                } else {
+                    elementSvgText.style['fill'] = data.color;
+                    //$(data.container + ' > svg > text').css({'fill': data.color});
+                }
+    
+    
+    
+                self.css({style: data.style}, {container: data.container + ' > svg'});
+            }
+    
+        }
+        
+        this.svg = function (params, selectorParams, args) {
+            var paramsReplaced = self.replaceProperties(params, args);
+    
+            //var container = self.selector(self.extend({}, params, selectorParams));
+    
+            var container = self.selector(paramsReplaced, undefined, true) || self.selector(selectorParams, undefined, true);
+    
+            var element = self.query(container);
+            var color = paramsReplaced.color || getComputedStyle(element).color;
+            //if (element.getElementsByTagName('SVG').length == 0) {
+            //if (element.querySelectorAll('svg').length == 0) {
+    
+                self.svgImage({
+                    container: container,
+    
+                    // special param
+                    icon: paramsReplaced.icon,
+                    text: paramsReplaced.text,
+                    textSize: paramsReplaced.textSize, // verify (obsolete when span will be nested)
+                    textPosition: paramsReplaced.textPosition, // verify (obsolete when span will be nested)
+                    textColor: paramsReplaced.textColor, // verify (obsolete when span will be nested)
+                    background: paramsReplaced.background,
+                    border: paramsReplaced.border,
+                    color: paramsReplaced.color || color, // $(container).css("color"),
+                    style: paramsReplaced.style, // da fare css in svgImage
+                    class: paramsReplaced.class
+                    //hoverBackground: data.hoverBackground, // verify
+                    //hoverBorder: data.hoverBorder, // verify
+                    //hoverColor: data.hoverColor, // verify
+                });
+    
+        } */
+    // --------------
+    //  ITEM
+    // --------------
+    /*
+            this.checkItem = function (data) {
+    
+            var selectedIconClass = data.selection || 'selectedIcon'; // self.json.setup.classes.selectedIcon;
+    
+            //self.log('checkItem');
+            //self.log(data);
+            var checked = 0;
+            // var selector = '';
+            var selector = self.selector(data);
+    
+            if (data.style === undefined) {data.style = selectedIconClass;}
+            if (data.checked !== undefined) {
+                checked = self.replaceProperties(data.checked);
+                //checked = self.replaceTags({text:data.checked});
+                checked = data.checked;
+                if (data.checked) {
+                    $(selector).addClass(data.style);
+                } else {
+                    $(selector).removeClass(data.style);
+                }
+            } else {
+                checked = $(selector).hasClass( data.style );
+            }
+            return checked;
+        } */
+    /*
+        this.toggleItem = function (data) { // modificato 20180709 da changeCheckItem in toggleItem
+            self.log('toggleItem');
+            //self.log(data);
+            var checked;
+            checked = self.checkItem({
+                id: data.id,
+                class: data.class,
+                value: data.value
+                //style: data.style
+            });
+            checked = !checked; // inverte il valore
+            self.checkItem({
+                id: data.id,
+                class: data.class,
+                value: data.value,
+                checked: checked
+                //style: data.style,
+            });
+            return checked;
+        }
+        */
+    /*     this.selectItem = function (data) {
+    
+            var selectedIconClass = self.json.setup.classes.selectedIcon;
+    
+        
+            var selector = self.selector({container: data.container, class: data.class});
+            if (data.style === undefined) {data.style = selectedIconClass;}
+            $(selector).removeClass(data.style);
+    
+            self.log('selector');
+            self.log(selector);
+    
+    
+            if (data.value || data.id) {
+                selector = self.selector(data);
+                
+                $(selector).addClass(data.style);
+            }
+    
+        }
+        
+        this.unselectItems = function (data) {
+            var selectedIconClass = self.json.setup.classes.selectedIcon;
+            //if (data.style)
+            if (data.style === undefined) {data.style = selectedIconClass;}
+            if (data.class.indexOf('.') < 0) {data.class = '.' + data.class}
+            $(data.class).removeClass(data.style);
+        }
+            */
+    /*     this.removeImage = function (data) {
+            var selector = self.selector(data);
+            $(selector).css({'background-image':'url()'});
+        }
+    
+        this.loadImage = function (data) {
+            var selector = self.selector(data);
+            //if (!data.style) data.style = {};
+            //if (data.background) data.style['background-color'] = data.background;
+            if (data.image || data.image === '') {
+                self.getImage({ // ex fixo.loadImage
+                    object: selector,
+                    url: data.image
+                    //style: data.style,
+                    //animation: data.animation,
+                });
+            } else {
+                self.removeImage(data);
+            }
+        } */
+    /*         this.changeItem = function (data, selectorParams, args) {
+            self.log('changeItem');
+            self.log(data);
+            var container = (selectorParams) ? self.selector(selectorParams) : data.container;
+            var selector = self.selector(self.extend({}, data, selectorParams));
+    
+            var iconClass = ''; //self.json.setup.classes.icon || '';
+            var badgeClass = 'iconBadge'; //self.json.setup.classes.badge || '';
+    
+            if (data.svg || data.text || data.background || data.border || data.color) {
+                $(selector + ' > svg').css({opacity:1});
+                self.svgChange({
+                    container: selector,
+                    name: data.svg,
+                    text: data.text,
+                    background: data.background,
+                    border: data.border,
+                    color: data.color,
+                });
+            } else {
+                $(selector + ' > svg').css({opacity:0});
+            }
+    
+            // IMMAGINE
+            if (data.image && data.image !== '') {
+                var imgData = data;
+                imgData.style = {
+                    width: '82px',
+                    height: '82px',
+                    'margin-bottom': '27px'
+                };
+                if (data.background) imgData.style['background-color'] = data.background;
+                self.loadImage(imgData);
+                $(selector + ' > svg').css({opacity:0});
+            } else {
+                self.removeImage(data);
+                $(selector + ' > svg').css({opacity:1});
+            }
+            
+            if (data.badgeIcon || data.badgeText) {
+                if (!$('.'+badgeClass).length)
+                    $(selector).append('<div class="'+badgeClass+'"></div>');
+                self.svgImage({
+                    container: selector + ' > .'+badgeClass,
+                    icon: data.badgeIcon,
+                    text: data.badgeText,
+                    background: data.badgeBackground,
+                    border: data.badgeBorder,
+                    color: data.badgeColor,
+                });
+            } else {
+                $(selector + ' > .'+badgeClass).remove();
+            }
+    
+    
+            if (data.titleColor)
+                $(selector + ' > span').css({'color':data.titleColor});
+            else if (data.color)
+                $(selector + ' > span').css({'color':data.color});
+            
+            if (data.titleSize) $(selector + ' > span').css({'font-size':data.titleSize});
+            if (data.title) {
+                $(selector+' > span').text(data.title);
+                if ($(selector+' > span').hasClass('textFitted')) {
+                    self.textFit($(selector+' > span'), {
+                        alignHoriz: false,
+                        multiLine: false,
+                        alignVert: false,
+                        minFontSize: 10,
+                        maxFontSize: data.titleSize || 12,
+                    });
+                }
+            }
+    
+            if (data.checked !== undefined) {
+                self.checkItem({
+                    container: data.container,
+                    class: data.class,
+                    value: data.value,
+                    id: data.id,
+                    checked: data.checked
+                    //style: data.style,
+                });
+            }
+    
+            // action (obsolete)
+            if (data.action) {
+                var onData = $(selector).data('onData');
+                onData.action = data.action;
+                $(selector).data('onData', onData); // nuova versione
+            }
+            // events
+            if (data.on) self.on(data.on, {container: selector});
+    
+        } */
+    /*     this.enableIcon = function (params, selectorParams) {
+            var container = (selectorParams) ? self.selector(selectorParams) : params.container;
+            var selector = self.selector(self.extend({}, params, selectorParams));
+    
+            $(selector).css({'opacity':'1'});
+            $(selector).off().on(self.touch, function(event){
+                event.stopPropagation();
+                self.onEvent(this, event);
+            });
+        }
+        
+        this.disableIcon = function (params, selectorParams) {
+            var badgeClass = self.json.setup.classes.badge || '';
+    
+            var container = (selectorParams) ? self.selector(selectorParams) : params.container;
+            var selector = self.selector(self.extend({}, params, selectorParams));
+    
+            $(selector + ' > .'+badgeClass).remove();
+            $(selector).css({'opacity':'0.5'});
+            $(selector).off();
+        }
+            */
+    /*     this.getFileExtension = function (path) {
+            var dotPosition=path.lastIndexOf(".");
+            var stringLength=path.length;
+            var extensionFile=path.substring(dotPosition+1,stringLength);
+            return extensionFile;
+        } */
+    // --------------------
+    // SLIDER
+    // --------------------
+    /*         var slides = {};
+        
+        var sliderLib = 'fixoSlider';
+        var sliderWrapperClass = 'fixoSlider';
+        //var sliderSlideClass = 'fixoSlidez';
+        var sliderSelectedClass = 'slideSelected'; */
+    /*
+        var sliderLib = 'flickity';
+        var sliderWrapperClass = 'fixoSlider';
+        var sliderSlideClass = 'fixoSlide';
+        var sliderSelectedClass = 'is-selected';
+    */
+    /*
+        var sliderLib = 'sliderpro';
+        var sliderWrapperClass = 'sp-slides';
+        var sliderSlideClass = 'sp-slide';
+        var sliderSelectedClass = 'sp-selected';
+    */
+    /*
+    var sliderLib = 'swiper';
+    var sliderWrapperClass = 'swiper-wrapper';
+    var sliderSlideClass = 'swiper-slide';
+    var sliderSelectedClass = 'swiper-slide-active';
+    */
+    /*
+    this.sliderResume = function (data) {
+        var selector = self.selector(data);
+        if (slides[selector]) slides[selector].object.resume();
+    }
+        
+    this.sliderFreeze = function (data) {
+        var selector = self.selector(data);
+        if (slides[selector]) slides[selector].object.freeze();
+    }
+        
+    this.sliderNext = function(data) {
+        var selector = self.selector(data);
+        if (sliderLib == 'fixoSlider') slides[selector].object.next();
+        //if (sliderLib == 'flickity') slides[selector].object.flickity('next');
+    }
+
+    this.sliderPrev = function(data) {
+        var selector = self.selector(data);
+        if (sliderLib == 'fixoSlider') slides[selector].object.prev();
+        //if (sliderLib == 'flickity') slides[selector].object.flickity('previous');
+    }
+
+    this.autoSliderEvent = function() {
+        var selector = self.selector(data);
+        if (self.sliderSelected)
+            slides[self.sliderSelected].object.autoSliderEvent();
+    }
+
+    this.addSlideIcon = function(data) {
+        // creata per rendere più leggibile createSlide
+        var selector = self.selector(data);
+        var isImage = self.getFileExtension(data.icon);
+        if (isImage == 'gif' || isImage == 'jpg' || isImage == 'jpeg' || isImage == 'png')
+            fixo.loadImage({
+                object: selector + ' > .slideIcon',
+                url: data.icon,
+                style: {height: '150px',
+                    width: '150px',
+                    marginTop: '25px',
+                    marginLeft: '-75px',
+                    backgroundSize: 'cover'
+                }
+            });
+        else
+        //if (data.icon)
+            self.svgImage({
+                container: selector + ' > .slideIcon',
+                icon: data.icon,
+                color: '#fff',
+                });
+        if (data.iconName)
+            $(selector + ' > .slideIconName').html(data.iconName); // da cancellare?
+        if (data.iconAction) {
+            var value = data.iconValue || '';
+            $(selector + ' > .slideIcon').attr('onclick', 'javascript:self.do(\''+data.iconAction+'\', \''+value+'\')');
+        }
+    }
+
+    this.changeSlideIcon = function(data) {
+        var selector = self.selector(data);
+        // verificare se si può usare changeItem
+        if (data.icon)
+            self.svgChange({
+                container: selector + ' > .slideIcon',
+                name: data.icon,
+                color: '#fff',
+                });
+        if (data.iconName)
+            $(selector + ' > .slideIconName').html(data.iconName);
+    }
+
+    this.updateSlide = function(data) {
+        self.log('updateSlide');
+        if (!data.class) data.class = 'fixoSlide';
+        var selector = self.selector(data);
+        // ICONA
+        self.changeSlideIcon(data);
+        // BACKGROUND
+        if (data.background) $(selector).css({'background-color':data.background});
+        // TITOLO E TESTO
+        var alertTitleObj = $(selector).children('.slideTitle');
+        var alertTextObj = $(selector).children('.slideText');
+        var titleAndText = (alertTitleObj.text() !== '' && alertTextObj.text() !== '');
+        if (titleAndText) {
+            alertTitleObj.css({'margin-top':'-225px'});
+        }  else {
+            alertTitleObj.css({'margin-top':'-60px'});
+        }
+        if (data.title !== undefined) {
+            alertTitleObj.html(data.title);
+            self.textFit(titleObj, {alignHoriz: true, multiLine: false, alignVert: true, minFontSize: 40, maxFontSize: 56});
+        }
+        if (data.text !== undefined) {
+            alertTextObj.html(data.text);
+            self.textFit(textObj, {alignHoriz: true, multiLine: false, alignVert: !titleAndText, minFontSize: 17, maxFontSize: 40});
+        }
+        // BOTTONE
+        if (data.button !== undefined) {
+            if (data.button) {
+                if (data.buttonLabel) {
+                    $(selector + ' > .slideButton').html(data.buttonLabel);
+                }
+                if (data.buttonAction) {
+                    $(selector + ' > .slideButton').data('action', data.buttonAction);
+                    $(selector + ' > .slideButton').data('value', data.value);
+                    $(selector + ' > .slideButton').attr('onclick', 'javascript:self.do(\'' + data.buttonAction + '\',\''+data.value+'\')');
+                }
+                $(selector + ' > .slideButton').show();
+            } else {
+                $(selector + ' > .slideButton').hide();
+            }
+            // aggiungere changeItem dell'icona
+        }
+    }
+
+    this.slideTextFit = function() {
+        //self.log('slideTextFit');
+
+        //if (!data.class) data.class = 'fixoSlide';
+        //var selector = self.selector(data);
+        var slideSelector = self.sliderSelected + ' > .' + sliderSelectedClass;
+
+        titleObj = $(slideSelector).children('.slideTitle');
+        textObj = $(slideSelector).children('.slideText');
+
+        var titleAndText = (titleObj.text() !== '' && textObj.text() !== '');
+        if (titleAndText) {
+            titleObj.css({'margin-top':'-225px'});
+            //textObj.css({'top':(384+125-30)+'px'});
+        } else {
+            titleObj.css({'margin-top':'-60px'});
+        }
+        self.textFit(titleObj, {alignHoriz: true, multiLine: false, alignVert: true, minFontSize: 40, maxFontSize: 56});
+
+        self.textFit(textObj, {alignHoriz: true, multiLine: false, alignVert: !titleAndText, minFontSize: 17, maxFontSize: 40});
+
+    }
+
+    this.sliderTo = function(data) {
+        // apre la slide data.index
+        self.log('sliderTo');
+        var selector = self.selector(data);
+        if (data.index !== undefined) // comprende il caso = 0
+            if (slides[selector] && slides[selector].object)
+                slides[selector].object.to(data.index);
+
+            //if (sliderLib == 'swiper')
+            //    slides[selector].object.slideToLoop(data.index); // slideToLoop
+            //if (sliderLib == 'flickity')
+            //    slides[selector].object.flickity('select', data.index);
+            //if (sliderLib == 'extraslider')
+            //    $(selector+' > .extra-slider').trigger('extra:slider:goto', data.index);
+
+        if (data.value !== undefined) { // comprende il caso = 0
+            self.log(self.selector(data));
+            if (!data.class) data.class = 'fixoSlide';
+            var slideToSelect = self.selector(data);
+            var index = $(slideToSelect).index();
+            if (index > -1) slides[selector].object.to(index);
+            //var slideToSelect = '.' + sliderSlideClass + '[data-value="' + data.prefix + data.value + '"]';
+        }
+
+            //if (sliderLib == 'flickity')
+            //    slides[selector].object.flickity('selectCell', slideToSelect);
+    }
+    
+    this.sliderExist = function(data) { // si può cancellare?
+        var selector = self.selector(data);
+        //alert(($(selector + ' > .extra-slider').length > 0));
+        return ($(selector + ' > .extra-slider').length > 0)
+        // return (slides[selector])
+    }
+    
+    this.createSlide = function(data) {
+        self.log('createSlide');
+        //if (!data.prefix) data.prefix = "";
+        if (!data.class) data.class = "fixoSlide";
+        //var containerSelector = self.selector(data);
+        var slideContent = '<div class="' + data.class + '" data-value="'+ data.value + '"></div>';
+
+        if (data.inverse) {
+            $(data.container).prepend(slideContent);
+        } else {
+            $(data.container).append(slideContent);
+        }
+        var selector = self.selector(data);
+        var infoButtons = data.infoButtons || {};
+
+        // STORE DATA
+        $(selector).data('container', data.container);
+        if (data.value) $(selector).data('value', data.value);
+        //if (data.id) $(selector).data('id', data.id);
+        //if (data.prefix) $(selector).data('prefix', data.prefix);
+
+        var textHtml =  (data.text) ? data.text.replace(/\r?\n/g, '<br/>') : '';
+
+        // PRICE
+        //if(data.price && data.price !== '') textHtml += '<br/>€ '+data.price;
+
+        // BACKGROUND
+        if (data.background) $(selector).css({'background-color':data.background});
+
+        // IMAGE
+        if (data.image && data.image !== '') {
+            if (data.title !== '' || textHtml !== '' )
+                {
+                    //$(selector).css({'background-image':'linear-gradient(to right,rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('+data.image+')'});
+                    //} else {
+                    //$(selector).css({'background-image':'url('+data.image+')'});
+                    $(selector).append('<div class="fixoImgOverlay"></div>')
+                }
+            
+            if (sliderLib == 'fixoSlider') {
+                $(selector).css({'background-image':'url('+data.image+')'});
+                // DA GESTIRE INTERNAMENTE A fixo.slider.js
+                // DOVRA' CARICARE SOLO SLIDE ATTUALE, PREC. E SUCC
+
+                //fixo.loadImage({
+                //    object: selector,
+                //    url: data.image,
+                //    animation: 'fadeIn',
+                //});
+
+            }
+
+            //if (sliderLib == 'swiper') {
+            //    $(selector).addClass('swiper-lazy');
+            //    $(selector).attr('data-background', data.image);
+            //}
+            //if (sliderLib == 'flickity') {
+            //    $(selector).attr('data-flickity-bg-lazyload', data.image);
+            //}
+
+        } else {
+
+            $(selector).css({'background-image':'none'});
+            // SERVICE ICON
+            //$(selector).append('<div class="slideIcon"></div><div class="slideIconName" style="display:none"></div></div>');
+            //self.addSlideIcon(data);
+
+            // if (data.icon)
+            //     self.svgImage({
+            //         container: selector + ' > .slideIcon',
+            //         icon: data.icon,
+            //         color: '#fff',
+            //         });
+            // if (data.iconName)
+            //     $(selector + ' > .slideIconName').html(data.iconName);
+
+            // if (data.icon)
+            //     self.svgImage({
+            //         container: selector + ' > .slideIcon',
+            //         icon: data.icon,
+            //         color: '#fff',
+            //         });
+            // if (data.iconName)
+            //     $(selector + ' > .slideIconName').html(data.iconName);
+        }
+        
+        // ICONA
+        $(selector).append('<div class="slideIcon"></div><div class="slideIconName" style="display:none"></div></div>');
+        self.addSlideIcon(data);
+
+        // TITLE & TEXT
+        $(selector).append('<div class="slideTitle"></div><div class="slideText"></div><div class="slideInfo"></div>');
+
+        var alertTitleObj = $(selector + ' > .slideTitle');
+        var alertTextObj = $(selector + ' > .slideText');
+        var alertInfoObj = $(selector + ' > .slideInfo');
+
+        // BOTTONI INFO
+
+        var btnInfo = '';
+        for (var i in infoButtons) {
+            if (infoButtons[i].icon !== '')
+                btnInfo += self.imgTag({
+                    icon: infoButtons[i].icon,
+                    action: infoButtons[i].action,
+                    class: infoButtons[i].class,
+                    value: infoButtons[i].value,
+                    //style: 'width: 84px; margin:6px 10px;'
+                });
+            //alertInfoObj.html(btnInfo);
+        }
+        alertInfoObj.html(btnInfo);
+
+        // TESTO
+        
+        if (data.title && data.title !== '') {
+            alertTitleObj.html(data.title);
+        } else {
+            alertTitleObj.html(data.iconName);
+        }
+        alertTextObj.html(textHtml);
+        
+        //alertInfoObj.html()
+        
+
+        // if (data.link && data.link !== '') { // serviva a costruire il div con il qrcode, sostituito dal link per aprire lo swal alert
+        //     var link = data.link;
+        
+        //     self.log('DATALINK: '+link);
+
+        //     if (link.indexOf('musement.com') || link.indexOf('booking.com')) {
+        //         link = link.replace(/^https?:\/\//,''); //rimuovo https dal link
+        //         self.log('link: '+link);
+        //         link = 'https://c83.travelpayouts.com/click?shmarker=219111&promo_id=2015&source_type=customlink&type=click&custom_url=' + link;
+        //     }
+            
+        //     self.log('DATALINK1: '+link);
+            
+        //     $(selector).append('<div class="slideQrCode"></div>');
+        //     self.qrCode({
+        //         container: selector,
+        //         class: 'slideQrCode',
+        //         text: link,
+        //         size: 100
+        //     });
+        //     // attributo sul Codice QR per la visualizzazione dell'alert
+        //     $('.slideQrCode > img').attr('onclick','javascript:self.do(\'app.hot.alertQRCode\')');
+        // } else {
+
+            
+            $(selector).append('<div class="slideButton" style="display:none"></div>');
+            if (data.button) {
+                if (data.buttonLabel) {
+                    $(selector + ' > .slideButton').html(data.buttonLabel);
+                }
+                if (data.buttonAction) {
+                    $(selector + ' > .slideButton').data('action', data.buttonAction);
+                    $(selector + ' > .slideButton').data('value', data.value);
+                    $(selector + ' > .slideButton').attr('onclick', 'javascript:self.do(\'' + data.buttonAction + '\',\''+data.value+'\')');
+                }
+                $(selector + ' > .slideButton').show();
+
+                // $(selector + ' > .slideButton').off().on(self.touch, function(){
+                //     var action = $(this).data('action');
+                //     var key = $(this).data('value');
+                //     self.do(action, value);
+                // });
+
+            } else {
+                $(selector + ' > .slideButton').hide();
+            }
+        //} chiude l'IF del data.link
+        var titleAndText = (alertTitleObj.text() !== '' && alertTextObj.text() !== '');
+
+        // POSIZIONE TITOLO
+        var titleTop = -70 -170 * (titleAndText);
+        alertTitleObj.css({'margin-top': titleTop + 'px'});
+        self.textFit(alertTitleObj, {alignHoriz: true, multiLine: false, alignVert: true, minFontSize: 30, maxFontSize: 56});
+        
+        // ALTEZZA TESTO
+        var textHeight = 340 - 100 * (infoButtons.length > 0);
+        alertTextObj.css({'height': textHeight + 'px'});
+        
+        
+        //self.textFit(alertTitleObj, {alignHoriz: true, multiLine: false, alignVert: true, minFontSize: 30, maxFontSize: 56});
+
+        //self.textFit(alertTextObj, {alignHoriz: true, multiLine: false, alignVert: !titleAndText, minFontSize: 15, maxFontSize: 45});
+        //self.log('END createSLIDE');
+
+
+    }
+    
+    this.createSlider = function (data) {
+        self.log('createSlider');
+        //if (!data.prefix) data.prefix = "";
+        var selector = self.selector(data);
+        var startIndex = data.index || 0;
+        //self.log('pre DATAINDEX: '+data.index);
+        
+        // RIMUOVE ISTANZA PRECEDENTE
+
+        if (slides[selector] && slides[selector].object) {
+            // Memorizza posizione
+            var slideSelector = selector + ' > .' + sliderSelectedClass;
+            //self.log('slideSelector di self.createSlider: '+slideSelector);
+            startIndex = data.index || $(slideSelector).index();
+            // Rimuove slider precedente
+            //self.log('startIndex: di '+data.index+' .index() '+$(slideSelector).index());
+            $(selector).empty();
+            delete slides[selector].object;
+        }
+
+        slides[selector] = {};
+
+
+        // FRECCE
+        // if (data.buttons) {
+        //     if (sliderLib == 'swiper') {
+        //         $(selector).append('<div class="swiper-button-next swiper-button-white"></div>');
+        //         $(selector).append('<div class="swiper-button-prev swiper-button-white"></div>');
+        //     }
+        // }
+        
+        for (var key in data.slides) {
+            var slide = data.slides[key];
+            slide.inverse = data.inverse;
+            //slide.container = selector; //+' > .' + sliderWrapperClass;
+            slide = self.extend({
+                container: selector,
+                class: 'fixoSlide', //sliderSlideClass,
+                value: data.value, //data.prefix + data.value
+            }, slide);
+            self.createSlide(slide);
+            
+        }
+
+        // CREAZIONE OGGETTO SLIDER
+        
+        if (sliderLib == 'fixoSlider') {
+
+            var params = {
+                container: selector, //+' > .' + sliderWrapperClass,
+                play: data.play,
+                interval: data.interval,    // ms
+                onChange: data.onChange,
+                onChangeStart: self.slideTextFit,
+                    index: startIndex         // prima slide
+                // direction: 1,            // from right to left
+                // opts.swipeDuration: 0.6, // sec
+                // opts.swipeTreshold: 0.2, // Swipe from +/-20%
+            };
+
+            slides[selector].object = $.fn.slide(params);
+        }
+        //self.log('END createSlider');
+    }
+*/
+    /*
+        this.getSelectedSlide = function (data) {
+            self.log('getSelectedSlide');
+            //self.log(data);
+            var selector = self.selector(data);
+            if (sliderLib == 'fixoSlider') {
+                var slideSelector = selector + ' > .' + sliderSelectedClass;
+                
+                self.log($(slideSelector).data('value'));
+                return $(slideSelector).data('value');
+            }
+    
+        }
+    
+        var sliderSelect = function (currentItem, currentIndex) { //si può cancellare?
+            var id = $(currentItem).parent().parent().parent().attr('id');
+            self.log('slideId:'+id);
+            self.log('currentItem:'+currentItem);
+            self.log('currentIndex:'+currentIndex);
+            slides[id].currentItem = currentItem;
+            slides[id].currentIndex = currentIndex;
+        }
+    
+        var sliderPause = function (currentItem, currentIndex) { // si può cancellare?
+            $(currentItem).parent().parent().trigger('extra:slider:pause');
+            var id = $(currentItem).parent().parent().parent().attr('id');
+            self.log('slideId:'+id);
+            self.log('currentItem:'+currentItem);
+            self.log('currentIndex:'+currentIndex);
+            slides[id].currentItem = currentItem;
+            slides[id].currentIndex = currentIndex;
+        }
+    
+        var sliderPlay = function (currentItem, currentIndex) { // si può cancellare?
+            $(currentItem).parent().parent().trigger('extra:slider:pause');
+            $(currentItem).parent().parent().trigger('extra:slider:resume');
+            var id = $(currentItem).parent().parent().parent().attr('id');
+            self.log('slideId:'+id);
+            self.log('currentItem:'+currentItem);
+            self.log('currentIndex:'+currentIndex);
+            slides[id].currentItem = currentItem;
+            slides[id].currentIndex = currentIndex;
+        }
+    
+        var sliderResume = function (currentItem, currentIndex) { //si può cancellare?
+            var id = $(currentItem).parent().parent().parent().attr('id');
+            if (slides[id].active) {
+                sliderPlay(currentItem, currentIndex);
+            } else {
+                sliderPause(currentItem, currentIndex);
+            }
+        }
+    
+        var sliderClick = function (currentItem, currentIndex) { // si può cancellare ?
+            var id = $(currentItem).parent().parent().parent().attr('id');
+            if (slides[id].active) {
+                slides[id].active = false;
+            } else {
+                slides[id].active = true;
+            }
+        } */
+    /*         this.addItem = function (data, selectorParams) { // obsolete
+    
+            var container = (selectorParams) ? self.selector(selectorParams) : data.container;
+            var selector = self.selector(self.extend({}, data, selectorParams));
+    
+            // app default
+            // aggiungere anche dimensione di default
+    
+            var iconClass = self.json.setup.classes.icon || '';
+            var badgeClass = self.json.setup.classes.badge || '';
+    
+            var style = (data.style) ? data.style : {};
+    
+            // retro-compatibility
+            if (data.size) {
+                if (data.size == 'small')
+                    style.width = '50px';
+                else if (data.size == 'medium')
+                    style.width = '80px';
+                else if (data.size == 'big')
+                    style.width = '120px';
+                else if (data.size)
+                    style.width = data.size;
+            }
+    
+            style = self.extend({}, style, { // retrocompatibilità / obsoleto
+                color: data.color,
+                background: data.background,
+                border: data.border,
+                display: data.display,
+                margin: data.margin,
+                padding: data.padding,
+                width: data.width,
+                height: data.height
+            });
+    
+    
+            // Create
+            if (data.id === undefined) {data.id = '';}
+            if (data.value === undefined) {data.value = data.id};
+            if (data.class === undefined) {data.class = iconClass} else if (data.class !== iconClass) {data.class += ' ' + iconClass};
+    
+            var itemDiv = '<div id="'+data.id+'" class="'+data.class+'" data-value="'+data.value+'" data-selector="'+selector+'"></div>';
+            
+            if (data.prepend) {
+                $(data.container).prepend(itemDiv);
+            } else {
+                $(data.container).append(itemDiv);
+            }
+    
+            self.css({style: {
+                width: style.width,
+                display: style.display,
+                padding: style.padding,
+                margin: style.margin
+            }}, {container: selector});
+    
+            // SVG
+    
+            if (data.svg || data.text) {
+                self.svgImage({
+                    container: selector,
+                    icon: data.svg,
+                    text: data.text,
+                    textSize: data.textSize, // verify (obsolete when span will be nested)
+                    textPosition: data.textPosition, // verify (obsolete when span will be nested)
+                    textColor: data.textColor, // verify (obsolete when span will be nested)
+                    background: style.background,
+                    border: style.border,
+                    color: style.color
+                    //hoverBackground: data.hoverBackground, // verify
+                    //hoverBorder: data.hoverBorder, // verify
+                    //hoverColor: data.hoverColor, // verify
+                });
+            } else {
+                
+            }
+    
+            // image
+    
+            if (data.image) {
+                var imgData = data;
+                imgData.style = {
+                    width:'82px',
+                    height:'82px',
+                    'margin-bottom':'27px'
+                };
+                if (style.background) imgData.style['background-color'] = style.background;
+                self.loadImage(imgData);
+            }
+            
+            // badge
+            
+            if (data.badgeIcon || data.badgeText) {
+                $(selector).append('<div class="'+badgeClass+'"></div>');
+                self.svgImage({
+                    container: selector + ' > .'+badgeClass,
+                    icon: data.badgeIcon,
+                    text: data.badgeText,
+                    background: data.badgeBackground,
+                    border: data.badgeBorder,
+                    color: data.badgeColor,
+                });
+            }
+    
+    
+            if (data.title) {
+                //data.title = self.text(data.title);
+                data.titleColor = data.titleColor || style.color;
+                if (data.titleColor == undefined) {data.titleColor = ''}
+                if (data.titleSize == undefined) {data.titleSize = ''}
+                //if (data.titleSizeMin == undefined) {data.titleSize = '7px'}
+    
+                $(selector).append('<span></span>');
+                $(selector + ' > span').css({
+                    color: data.titleColor,
+                    'font-size': data.titleSize
+                });
+                //if (typeof data.title == 'object') alert(data.title.text);
+                self.text(data.title, {container: selector + ' > span'});
+                //var title = self.text(data.title);
+                //$(selector + ' > span').text(title);
+    
+                //self.text(data.title);
+    
+                // itemSelectedBorderWhite GESTITO IN INDEX.CSS
+    
+                // questo stile dovrebbe essere fisso e con posizione assoluta
+                if (data.image)
+                    $(selector + ' > span').css({
+                        'margin-top':'89px',
+                        position: 'absolute'
+                    });
+    
+    
+                if (data.textFit !== false) {
+                    self.textFit($(selector+' > span'), {
+                        alignHoriz: false,
+                        multiLine: false,
+                        alignVert: false,
+                        minFontSize: 10,
+                        maxFontSize: data.titleSize,
+                    });
+                }
+            }
+    
+            // action (obsolete)
+            if (data.action || data.functions) {
+                var.functions[selector] = data.functions || data.action; // obsoleto
+                $(selector).data('onData', data); // nuova versione
+                $(selector).off().on(self.touch, function(event){
+                    event.stopPropagation();
+                    self.onEvent(this, event);
+                });
+            }
+            
+            // matchMedia
+            if (data.matchMedia) {
+                for (var mediaEvent in data.matchMedia) {
+                    self.matchMedia(data.matchMedia[mediaEvent], mediaEvent);
+                }
+            }
+    
+            // events
+            if (data.on) self.on(data.on, {container: selector});
+    
+            if (data.checked !== undefined) {
+                self.checkItem({
+                    container: data.container,
+                    class: data.class,
+                    value: data.value,
+                    id: data.id,
+                    checked: data.checked
+                    //style: data.style,
+                });
+            }
+        } */
+    // --------------
+    //  TABS
+    // --------------
+    /*         this.addTab = function (data, selectorParams) {
+            //self.log('addTab');
+            //self.log(data);
+    
+            var containerParams = self.cloneObject(selectorParams);
+    
+            data.container  = containerParams.container;
+            var selector = self.selector(data);
+    
+            var tabClass = ''; //self.json.setup.classes.button || '';
+            var badgeClass = 'iconBadge'; //self.json.setup.classes.badge || '';
+    
+            var style = (data.style) ? data.style : {};
+    
+            // span height
+            //style["line-height"] = (style.height) ? style.height : '42px';
+    
+            style = self.extend({}, style, {
+                color: data.color,
+                background: data.background,
+                border: data.border,
+                display: data.display,
+                margin: data.margin,
+                padding: data.padding,
+                width: data.width,
+                height: data.height
+            });
+    
+            if (data.id === undefined) {data.id = '';}
+            if (data.value === undefined) {data.value = data.id};
+            if (data.class === undefined) {data.class = tabClass} else if (data.class !== tabClass) {data.class += ' ' + tabClass};
+    
+            var tabDiv = '<div id="'+data.id+'" class="'+data.class+'" data-value="'+data.value+'" data-selector="'+selector+'"></div>';
+    
+            $(data.container).append(tabDiv);
+            
+            self.css({style: style}, {container: selector});
+    
+            //if (data.key) {$(selector).data('key', data.key);}
+    
+            //var iconColor = style.color || $(selector).css("color");
+    
+            // ICON
+            if (data.icon) {
+                self.addItem({
+                    class: 'icon',
+                    value: data.value,
+                    svg: data.icon,
+                    image: data.image,
+                    style: {
+                        color: style.color || $(selector).css("color"),
+                        width: style.height
+                    }
+                }, {container: selector});
+            }
+    
+            // TEXT
+            if (data.text !== undefined) {
+                //alert(JSON.stringify(data.text));
+    
+                $(selector).append('<span></span>');
+    
+                self.text(data.text, {container: selector + ' > span'});
+    
+    
+            } else {
+                //alert(JSON.stringify(data.text));
+            }
+    
+            if (data.icon) $(selector + ' > span').css({'padding-left': '0px'});
+    
+            // SPAN
+            if(style.color) $(selector + ' > span').css({'color':style.color});
+    
+            // BADGE
+            if (data.badgeIcon || data.badgeText) {
+                if (!$('.'+badgeClass).length)
+                    $(selector).append('<div class="'+badgeClass+'"></div>');
+                self.svgImage({
+                    container: selector + ' > .'+badgeClass,
+                    icon: data.badgeIcon,
+                    text: data.badgeText,
+                    background: data.badgeBackground,
+                    border: data.badgeBorder,
+                    color: data.badgeColor,
+                });
+            } else {
+                $(selector + ' > .'+badgeClass).remove();
+            }
+    
+            // data
+            if (data.action || data.functions){
+                var.functions[selector] = data.functions || data.action; // obsoleto
+                $(selector).data('onData', data); // nuova versione
+                $(selector).off().on(self.touch, function(event){
+                    event.stopPropagation();
+                    self.onEvent(this, event);
+                    //$(this).data('value')
+                    //var selector = $(this).data('selector');
+                    //var action = var.functions[selector];
+                    //self.do($(this).data('onData').action, $(this).data('value'));
+                });
+            }
+    
+            // matchMedia
+            if (data.matchMedia) {
+                for (var mediaEvent in data.matchMedia) {
+                    self.matchMedia(data.matchMedia[mediaEvent], mediaEvent);
+                }
+            }
+    
+            // events
+            if (data.on) self.on(data.on, {container: selector});
+    
+            if (data.selected) self.selectTab(data);
+            
+        } */
+    /*         this.changeTab = function (data, selectorParams) {
+    
+            var container = (selectorParams) ? self.selector(selectorParams) : data.container;
+            var selector = self.selector(self.extend({}, data, selectorParams));
+    
+            if (data.icon && data.value) {
+                self.changeItem({
+                    container: selector,
+                    class: 'icon',
+                    value: data.value,
+                    svg: data.icon,
+                    color: data.color,
+                    background: data.background
+                });
+            }
+    
+            if(data.background) $(selector).css({'background':data.background});
+            if(data.color) $(selector + ' > span').css({'color':data.color});
+    
+            if (data.text) {
+                //$(selector + ' > span').text(self.text(data.text));
+                self.text(data.text, {container: selector + ' > span'});
+            }
+    
+            if (data.action){
+                $(selector).off().on(self.touch, function(){
+                    data.action(data.value)
+                });
+            }
+            // events
+            if (data.on) self.on(data.on, {container: selector});
+    
+            if (data.selected) self.selectTab(data);
+        } */
+    /*         this.unselectTabs = function (data) {
+    
+            var selectionClass = data.selection || 'selectedButton';
+            //var selectionClass = self.json.setup.classes.selectedButton;
+            if (data.style) selectionClass = data.style;
+            $(data.class).removeClass(selectionClass);
+        }
+    
+        this.toggleTab = function (data) {
+            data.toggle = true;
+            return self.selectTab(data);
+        }
+    
+        this.selectTab = function (data) {
+            var selectionClass = data.selection || 'selectedButton';
+            //var selectionClass = self.json.setup.classes.selectedButton;
+            if (data.style) selectionClass = data.style;
+            var selector = self.selector(data);
+    
+            if (data.deselectClass)
+                if (data.class) $('.'+data.class).removeClass(selectionClass);
+                
+            if (data.checked !== undefined) {
+                if (data.checked == false) $(selector).removeClass(selectionClass);
+                else $(selector).addClass(selectionClass);
+            } else if (data.toggle !== undefined) {
+                // da toggleTab
+                if ($(selector).hasClass(selectionClass)) {
+                    $(selector).removeClass(selectionClass);
+                    return false;
+                } else {
+                    //if (data.class) $('.'+data.class).removeClass(selectionClass);
+                    $(selector).addClass(selectionClass);
+                    return true;
+                }
+            } else {
+                //if (data.class) $('.'+data.class).removeClass(selectionClass);
+                $(selector).addClass(selectionClass);
+            }
+        } */
+    // ---------------------------
+    // FUNZIONI DATEPICKER
+    // ---------------------------
+    /*
+        // basato su: http://www.daterangepicker.com/#options
+        
+        this.createDatePicker = function (data) {
+            self.log('createDatePicker');
+            var calendarVisible = false;
+            if (!data.field) data.field = data.container + ' > .daterange';
+            
+            if (!$(data.field).length) {
+                calendarVisible = true;  // Crea e nasconde campo testo e mostra calendario
+                $(data.container).html('<input type="text" class="form-control daterange" style="display:none"/>');
+            }
+            
+            var weekD = self.weekdaysShort(1, capitalize);
+            weekD = weekD.unshift(weekD[6]);
+            var monthsOfYear = ["January","February","March","April","May","June","July","August","September","October","November","December"];
+            if (data.language) {
+                monthsOfYear = moment.localeData(data.language).months();
+                for (var index in monthsOfYear) {
+                    monthsOfYear[index] =
+                        monthsOfYear[index].substr(0,1).toUpperCase()
+                        + monthsOfYear[index].substr(1);
+                }
+            }
+            //var datarange = $('#daterange');
+            
+            $(data.field).daterangepicker({
+                singleDatePicker: data.single,
+                parentEl: data.container,
+                startDate: data.start,
+                endDate: data.end,
+                autoApply: true,
+                autoUpdateInput: false,
+                locale: {
+                    format: 'DD/MM/YYYY',
+                    daysOfWeek: weekD,
+                    monthNames: monthsOfYear,
+                    firstDay: 1 // monday
+                }
+            });
+            
+            
+            $(data.field).on('cancel.daterangepicker', function(ev, picker) {
+                data.onCancel();
+            });
+    
+            $(data.field).on('apply.daterangepicker', function(ev, picker) {
+                data.onChange({
+                    start: picker.startDate.format('YYYYMMDD'),
+                    end: picker.endDate.format('YYYYMMDD')
+                });
+                if (picker.startDate && picker.endDate && picker.startDate !== picker.endDate) {
+                    $(data.field).val(picker.startDate.format('DD/MM/YYYY') + '-' + picker.endDate.format('DD/MM/YYYY'));
+                } else {
+                    $(data.field).val(picker.startDate.format('DD/MM/YYYY'));
+                }
+            });
+    
+            self.unselectDatePicker({container: data.container});
+    
+    
+        }
+    
+        var disableDates = [];
+        this.updateDatePicker = function(data) {
+            var datePicker = $(data.container + ' > .daterange').data('daterangepicker');
+            if (data.disableDates) {disableDates = data.disableDates;}
+    //             alert(datePicker+'-'+data.container);
+            datePicker.isInvalidDate = function(date) {
+                return (disableDates.indexOf(date.format('YYYYMMDD')) >= 0)
+            }
+            datePicker.updateView();
+            if (data.start && data.end) {
+                self.setDatePicker({
+                    container: data.container,
+                    start: data.start,
+                    end: data.end,
+                });
+            } else {
+                self.unselectDatePicker({container: data.container});
+            }
+        }
+    
+        this.unselectDatePicker = function(data) {
+            $(data.container).find('.start-date').removeClass('start-date active');
+            $(data.container).find('.end-date').removeClass('end-date active');
+            $(data.container).find('.in-range').removeClass('in-range');
+    
+        }
+            
+        this.setDatePicker = function (data) {
+            var datePicker = $(data.container + ' > .daterange').data('daterangepicker');
+            datePicker.setStartDate(data.start);
+            datePicker.setEndDate(data.end);
+            datePicker.updateView();
+        }
+    
+        this.getDatePicker = function (data) {
+            var start = $(data.container + ' > .daterange').data('daterangepicker').startDate(data.start);
+            var end = $(data.container + ' > .daterange').data('daterangepicker').endDate(data.end);
+            //alert('ok: '+data.container);
+            return {start: start, end: end}
+        }
+    
+        // ---------------------------
+        // FUNZIONI TIMEPICKER
+        // ---------------------------
+    
+        this.createTimePicker = function (data) {
+            $(data.container).html('<div class="datetimepicker" data-value="'+data.value+'"></div>');
+    
+            $(data.container + ' > .datetimepicker').datetimepicker({
+                icons: {
+                    up: "fixoNavUp",
+                    down: "fixoNavDown",
+                    previous: "fixoNavBackward",
+                    next: "fixoNavForward"
+                },
+                inline: true,
+                sideBySide: true,
+                //locale: 'it'
+                locale: {
+                    format: 'DD/MM/YYYY',
+                    daysOfWeek: weekD,
+                    monthNames: monthsOfYear,
+                    firstDay: 1 // monday
+                }
+            });
+    
+            //self.log('now: '+Date.now()+' moment: '+moment());
+    
+            self.setTimePicker({
+                container: data.container,
+                time: data.time
+            });
+    
+    
+            $(data.container + ' > .datetimepicker').off().on('dp.change', function(event) {
+                var datePicked = moment(event.date).unix();
+                //alert(datePicked);
+                data.onChange(datePicked);
+            });
+    
+        }
+    
+        this.setTimePicker = function (data) {
+            //self.log('>>> setTimePicker --> data container: '+data.container+' data time: '+data.time+' moment: '+moment.unix(data.time).calendar());
+            $(data.container + ' > .datetimepicker').data('DateTimePicker').date(moment.unix(data.time));//.format('LLL'));
+        }
+    
+        this.getTimePicker = function (data) {
+            //alert('ok: '+data.container);
+            $(data.container + ' > .datetimepicker').data('DateTimePicker').date();
+        }
+    */
+    // ---------------------------
+    // TIME SLIDER
+    // ---------------------------
+    /*
+        this.createTimeSlider = function(data){
+            var container = data.container;
+            var id = data.id;
+    
+            // c'è un'anomalia nella libreria bootstrap-slider
+            // crea il contenitore dello slider con lo stesso id del campo input
+            // va verificata la possibilità di configurazione della funzione .slider
+            
+            $('#'+data.container).append('<input id="'+id+'" data-slider-id="'+id+'" type="text" class="span2" value="" data-slider-min="0" data-slider-max="48" data-slider-step="1" data-slider-value="[0,48]" data-slider-tooltip="hide"/>');
+            $('#'+id).slider();
+            $('#'+id).off().on("slide slideStop", function(event) {
+    
+                self.log(event);
+                self.changeItem({
+                    id:'stepbackwardSlider'+id,
+                    text: self.numberToHour({value: event.value[0], max: 48})
+                });
+                self.changeItem({
+                    id:'stepforwardSlider'+id,
+                    text: self.numberToHour({value: event.value[1], max: 48})
+                });
+                
+                if (data.onChange) {
+                    data.onChange({
+                        start: self.numberToHour({value: event.value[0], max: 48}),
+                        end: self.numberToHour({value: event.value[1], max: 48})
+                    })
+                }
+    
+            });
+    
+            // ICONS Slider
+            self.addItem({
+                container:'#'+id+' > .min-slider-handle',
+                class: 'sliderIconLeft',
+                id: 'stepbackwardSlider'+id,
+                background: '#fff',
+                color: 'black',
+                border: 1,
+                text: '00:00'
+            });
+            self.addItem({
+                container:'#'+id+' > .max-slider-handle',
+                class: 'sliderIconRight',
+                id: 'stepforwardSlider'+id,
+                background: '#fff',
+                color: 'black',
+                border: 1,
+                text: '24:00'
+            });
+            //$('#'+sliderId+' .slider-selection').css({'background': '#fff'});
+    
+        }
+    
+        this.setTimeSlider = function(data){
+            //Change value on slider left/right icon
+            self.changeItem({
+                    id:'stepbackwardSlider'+data.id,
+                    text: data.start
+                });
+            self.changeItem({
+                id:'stepforwardSlider'+data.id,
+                text: data.end
+            });
+            //Convert value in 0-48 format
+            var start = self.hourToNumber({value: data.start, max: 48});
+            var end = self.hourToNumber({value: data.end, max: 48});
+            // Set value on slider
+            $('input[id="'+data.id+'"]').slider('setValue',[start,end]);
+    
+        }
+    
+        this.getTimeSlider = function(data){
+            var slideStart = $('input[id="'+data.id+'"]').slider('getValue')[0] || 0;
+            var slideEnd = $('input[id="'+data.id+'"]').slider('getValue')[1] || 48;
+            var start = self.numberToHour({value: slideStart, max: 48});
+            var end = self.numberToHour({value: slideEnd, max: 48});
+            if (start == '24:00') {start = '00:00'}
+            var timetable = {
+                start: start || '00:00',
+                end: end || '24:00'
+            }
+            return timetable;
+        }
+    */
+    this.numberToHour = function (data) {
+        var fraction = data.value / data.max;
+        var dayMin = Math.round(24 * 60 * fraction);
+        var hour = parseInt(dayMin / 60);
+        var min = dayMin - hour * 60;
+        var hourString = String(hour < 10 ? '0' : '') + String(hour);
+        var minString = String(min < 10 ? '0' : '') + String(min);
+        return hourString + ':' + minString;
+    };
+
+    this.hourToNumber = function (data) {
+        var timeArr = data.value.split(':');
+        var dayMin = (60 * Number(timeArr[0])) + Number(timeArr[1]);
+        var fraction = dayMin / (24 * 60);
+        return Math.round(fraction * data.max);
+    };
+
+    this.pannellum = function (params, selectorParams, args) {
+        self.log('pannellum');
+        var container = params.selector || params.container;
+        var selector = self.selector(container) || self.selector(selectorParams);
+        var element = self.query(selector);
+        pannellum.viewer(element, params);
+    };
+
+    this.qrcode = function (params, selectorParams, args) {
+        self.log('qrcode');
+        var container = params.selector || params.container;
+        var selector = self.selector(container) || self.selector(selectorParams);
+        var element = self.query(selector);
+        // var obj = self.compile(data);
+        self.log(selector);
+        self.log('element');
+        self.log(element);
+
+        var QRCodeOptions = {
+            text: self.replaceProperties(params.text, args) || 'jsonic.io',
+            width: params.size || 128,
+            height: params.size || 128,
+            useSVG: true,
+            colorDark: params.colorDark || '#000000',
+            colorLight: params.colorLight || '#ffffff',
+            correctLevel: QRCode.CorrectLevel.H
+        };
+        self.log('QRCodeOptions');
+        self.log(QRCodeOptions);
+
+        element.textContent = '';
+        var qrcode = new QRCode(element, QRCodeOptions);
+        self.log('qrcode');
+        self.log(qrcode);
+        return qrcode;
+        //qrcode.clear(); // clear the code.
+        //qrcode.makeCode(text); // make another code
+    };
+
+    /*     this.qrcode = function (data) {
+            self.log('qrcode');
+            var selector = self.selector(data);
+    
+            var options = {
+                // render method: 'canvas', 'image' or 'div'
+                render: 'image',
+    
+                // version range somewhere in 1 .. 40
+                minVersion: 1,
+                maxVersion: 40,
+    
+                // error correction level: 'L', 'M', 'Q' or 'H'
+                ecLevel: 'L',
+    
+                // offset in pixel if drawn onto existing canvas
+                left: 0,
+                top: 0,
+    
+                // size in pixel
+                size: data.size || 200,
+    
+                // code color or image element
+                fill: data.color || '#000',
+    
+                // background color or image element, null for transparent background
+                background: data.background || null,
+    
+                // content
+                text: self.replaceProperties(data.text) || 'no text',
+    
+                // corner radius relative to module width: 0.0 .. 0.5
+                radius: 0,
+    
+                // quiet zone in modules
+                quiet: 0,
+    
+                // modes
+                // 0: normal
+                // 1: label strip
+                // 2: label box
+                // 3: image strip
+                // 4: image box
+                mode: 0,
+    
+                mSize: 0.1,
+                mPosX: 0.5,
+                mPosY: 0.5,
+    
+                label: data.label || 'no label',
+                fontname: data.fontname || 'sans',
+                fontcolor: data.fontcolor || '#000',
+    
+                image: null
+            }
+            $(selector).empty().qrcode(options);
+        }   */
+    this.weekdaysShort = function (length, caseFunction) {
+        if (!caseFunction) caseFunction = caseUp;
+        var language = 'en';
+        var fixoLang = fixo.getFixoLanguage();
+        var userLang = fixo.getUserLanguage();
+        if (fixo.device) language = fixoLang; else language = userLang;
+        var weekDays = self.cloneObject(moment.localeData(language).weekdays());
+
+        weekDays[7] = weekDays[0];
+        weekDays.shift();
+
+        for (var i = 0; i < 7; i++) {
+            if (length) weekDays[i] = weekDays[i].substr(0, length);
+            if (caseFunction) weekDays[i] = caseFunction(weekDays[i]);
+        }
+        return weekDays;
+    };
+
+
+    this.weekDaysToString = function (days) {
+        var text = '';
+        for (var i in days) {
+            if (days[i]) {
+                if (text !== '') text += '/';
+                text += self.weekdaysShort(3, capitalize)[i];
+            }
+        }
+        return text;
+    };
+
+    // -----------
+    // DRAG
+    // -----------
+    /*
+        var draggingData;
+    
+        this.sortable = function (data) {
+            var rootEl = $(data.container)[ 0 ];
+            var dragEl;
+            
+            draggingData = data;
+            var selector = self.selector(data);
+            $(selector).attr('draggable', 'true');
+            $(data.exclude).attr('draggable', 'false');
+            
+            // Function responsible for sorting
+            function onDragOver(event) {
+                event.preventDefault();
+                event.dataTransfer.dropEffect = 'move';
+    
+                var dragTarget = event.target; // target.nextSibling ||
+                if ($(dragTarget).hasClass(draggingData.class))
+                    $( dragEl ).insertAfter( $(dragTarget) );
+                if ($(dragTarget).parent().hasClass(draggingData.class))
+                    $( dragEl ).insertAfter( $(dragTarget).parent() );
+            }
+    
+            // End of sorting
+            function onDragEnd(event){
+                event.preventDefault();
+    
+                $(dragEl).css({'opacity':'100%'});
+                rootEl.removeEventListener('dragover', onDragOver, false);
+                rootEl.removeEventListener('dragend', onDragEnd, false);
+    
+                // Notification about the end of sorting
+                draggingData.target = dragEl;
+                draggingData.onDragEnd(draggingData);
+            }
+    
+            // Sorting starts
+            rootEl.addEventListener('dragstart', function (event){
+                dragEl = event.target; // Remembering an element that will be moved
+                
+                $(dragEl).css({'opacity':'50%'});
+    
+                // Limiting the movement type
+                event.dataTransfer.effectAllowed = 'move';
+                event.dataTransfer.setData('Text', dragEl.textContent);
+    
+    
+                // Subscribing to the events at dnd
+                rootEl.addEventListener('dragover', onDragOver, false);
+                rootEl.addEventListener('dragend', onDragEnd, false);
+    
+    
+                setTimeout(function () {
+                    // If this action is performed without setTimeout, then
+                    // the moved object will be of this class.
+                    $(dragEl).css({'opacity':'100%'});
+                }, 0)
+            }, false);
+        }
+    
+            */
+    /*
+        this.setWeekDays = function(data){
+    
+            if (!data.days) data.days = {};
+    
+            for (var i=1; i<7; i++){
+                self.selectTab({
+                    container: data.container,
+                    class: 'fixoTabsWeekDays',
+                    value: String(i),
+                    checked: data.days[String(i)] || false
+                });
+            }
+        }
+        
+        this.createWeekDays = function(data){
+            //var selector = self.selector(data);
+            var weekDays = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];
+            self.log('data.language '+data.language);
+            if (data.language) weekDays=moment.localeData(data.language).weekdaysShort();
+            for (var i=0; i<7; i++){
+                var weekDay = weekDays[i];
+                self.addTab({
+                    container: data.container,
+                    class: data.class,
+                    value: String(i),
+                    id: data.container + i,
+                    background: 'black',
+                    color: 'white',
+                    border: '1px solid rgba(0, 0, 0, 1)',
+                    text: weekDay,
+                    action: function(value){
+                        //alert($(this).attr(id));
+                        // il toggleTab deselezionava sempre gli altri giorni
+                        // risolto usando il selectTab col parametro checked
+                        // va sistemato toggleTab
+                        if (!data.days) data.days = {};
+                        var checked = !Boolean(data.days[value]);
+                        self.selectTab({
+                            container: data.container,
+                            class: 'fixoTabsWeekDays',
+                            value: value,
+                            checked: checked
+                        });
+                        data.days[value] = checked;
+                    }
+                });
+            }
+        }
+    */
+    //--------------------------
+    // DA FIXO.JS
+    //--------------------------
+    /*---------------------
+        UTILS
+    ---------------------*/
+    var sortField;
+
+    var dynamicSort = function (data) {
+        var sortOrder = 1;
+        if (data.reverse) { sortOrder = -1; }
+        sortField = data.field;
+        return function (a, b) {
+            var result = (a[sortField] < b[sortField]) ? -1 : (a[sortField] > b[sortField]) ? 1 : 0;
+            return result * sortOrder;
+        };
+    };
+
+    this.sort = function (data) {
+        // fixo.sort({object:{}, add: {}, field:'time', reverse:true})
+        if (data.object !== undefined) {
+            if (Array.isArray(data.object)) {
+                return data.object.sort(dynamicSort({
+                    field: data.field,
+                    reverse: data.reverse
+                }));
+            } else {
+                var arr = self.objectToArray({
+                    object: data.object,
+                    add: data.add,
+                });
+                return arr.sort(dynamicSort({
+                    field: data.field,
+                    reverse: data.reverse
+                }));
+            }
+        } else {
+            self.log('sort of undefined');
+            return [];
+        }
+    };
+
+    this.objectToArray = function (data) {
+        // data: {object:{}, add: {}}
+        var arr = [];
+        var obj = data.object;
+        if (obj !== undefined) {
+            for (var key in obj) {
+                obj[key].id = key; // aggiunge la chiave dell'oggetto come proprietà
+                if (data.add) obj[key] = Object.assign(obj[key], data.add);
+                arr.push(obj[key]);
+            }
+        }
+        return arr;
+    };
+
+
+
+    /*
+        this.itemsFound = function(items, field, value) {
+                return $.grep(items, function(e){ return e.name == value; });
+        }
+    
+    */
+    /*     this.itemFound = function(items, field, value) {
+            var itemFound = false;
+            for (var i=0; i<items.length; i++) {
+                if (items[i][field] == value) {
+                        itemFound = true;
+                }
+            }
+            return itemFound;
+        }  */
+    /*     this.itemExist = function(data) {
+            if (data.value) {
+                return ($(data.class + '[data-value='+data.value+']').length > 0);
+            } else {
+                return ($(data.class).length > 0);
+            }
+        } */
+    this.equal = function (obj1, obj2) {
+        if (obj1 && obj2) {
+            return (JSON.stringify(obj1).replace('"', '') == JSON.stringify(obj2).replace('"', ''));
+        } else {
+            return (obj1 == obj2);
+        }
+    };
+
+    /*     this.arraysEquals = function(arr1,arr2) {
+            return ($(arr1).not(arr2).length === 0 && $(arr2).not(arr1).length === 0);
+        } */
+    var escapeRegExp = function (str) {
+        return str.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
+    };
+    this.replaceAll = function (str, find, replace) {
+
+        if (str !== undefined) {
+            let result;
+            if (typeof str == 'string') result = str; else result = JSON.stringify(str);
+
+            if (str) {
+                if (find) { //  && replace
+                    //if (typeof str !== 'string') self.log(str);
+                    result = String(str).replace(new RegExp(escapeRegExp(find), 'g'), replace);
+                    //if (typeof str == 'string') return result; else return JSON.parse(result);
+                    if (typeof str == 'object' && result) return JSON.parse(result);
+                    else
+                        return result;
+                } else {
+                    /* self.log('str:'+str);
+                    self.log('find:'+find);
+                    self.log('replace:'+replace); */
+                    return str;
+                }
+            }
+        } else {
+            return str;
+        }
+    };
+
+    this.capitalize = function (str) {
+        return str.replace(/\b\w/g, l => l.toUpperCase());
+    };
+
+
+    /*---------------------
+    URL UTILS
+---------------------*/
+    this.getPageName = function (url) {
+        var index = url.lastIndexOf("/") + 1;
+        var filenameWithExtension = url.substr(index);
+        var filename = filenameWithExtension.split(".")[0]; // <-- added this line
+        return filename; // <-- added this line
+    };
+
+    this.goToMainUrl = function () {
+        window.location = self.mainUrl;
+    };
+
+    this.getParameterByName = function (name, url) {
+        if (!url) url = window.location.href;
+        name = name.replace(/[\[\]]/g, "\\$&");
+        var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"), results = regex.exec(url);
+        if (!results) return null;
+        if (!results[2]) return '';
+        return decodeURIComponent(results[2].replace(/\+/g, " "));
+    };
+
+    var paramsToObject = function (params) {
+        params = params.split('#')[0];
+        return JSON.parse('{"' + params.replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') + '"}');
+    };
+
+    var objectToParams = function (object) {
+        var str = '';
+        for (var key in object) str += '&' + key + '=' + object[key];
+        if (str) str = str.substr(1);
+        return encodeURI(str);
+    };
+
+    this.getParams = function () {
+        var params = {};
+        var url = window.location.href.split('#')[0];
+        if (url.indexOf('?') > -1) {
+            var urlParams = decodeURI(url.split('?')[1]);
+            self.log(urlParams);
+            if (urlParams) {
+                var k = self.getParameterByName('k', url);
+                //self.log(k);
+                if (k) {
+                    params = self.atob(k);
+                } else {
+                    params = paramsToObject(urlParams);
+                }
+            }
+        }
+        return params;
+    };
+
+    this.atob = function (k) {
+        self.log('atob');
+        var params = paramsToObject(atob(k)); // base64 -> query -> object
+
+        // decompress params
+        if (params.h) // hotel
+            params.h = String(parseInt(String(params.h), 36)); // base36
+        if (params.c) // customer
+            params.c = String(parseInt(String(params.c), 36)); // base36
+        if (params.n) { // phone
+            params.n = String(parseInt(String(params.n), 36)); // base36
+            params.n = '+' + params.n;
+        }
+        //if (params.s) params.s  = var.services.id[params.s];
+        self.log(params);
+        return params;
+    };
+
+    this.btoa = function (params) {
+        self.log('btoa');
+        //if (params.s) params.s = var.services.id.indexOf(params.s);
+        if (params.h) // hotel
+            params.h = Number(params.h).toString(36); // base36
+        if (params.c) // customer
+            params.c = Number(params.c).toString(36); // base36
+
+        if (params.n) { // phone
+            if (params.n.startsWith('+')) params.n = params.n.substr(1);
+            params.n = params.n.replace(/ /g, '');
+            params.n = params.n.replace(/-/g, '');
+            params.n = Number(params.n).toString(36); // base36
+        }
+        self.log(params);
+        return btoa(objectToParams(params)); // query -> base64
+    };
+
+    /*
+        var encodeNum = function(num) { // 0..1296 es:customer
+            var hex = c.toString(36);
+            return c.toString(36);
+        }
+    
+        var decodeNum = function(str) {
+            return str.parseInt(36); // .length == 1 ? "0" + hex : hex
+        }
+    */
+    this.colorToRgba = function (hex, opacity) {
+        if (hex == 'white') { hex = '#fff'; }
+        if (hex == 'black') { hex = '#000'; }
+        var c;
+        if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
+            c = hex.substring(1).split('');
+            if (c.length == 3) {
+                c = [c[0], c[0], c[1], c[1], c[2], c[2]];
+            }
+            c = '0x' + c.join('');
+            return 'rgba(' + [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(',') + ',' + opacity + ')';
+        } else {
+            self.log('Bad Hex:' + hex);
+        }
+    };
+    var hueToRGB = function (m1, m2, h) {
+        h = (h < 0) ? h + 1 : ((h > 1) ? h - 1 : h);
+        if (h * 6 < 1) return m1 + (m2 - m1) * h * 6;
+        if (h * 2 < 1) return m2;
+        if (h * 3 < 2) return m1 + (m2 - m1) * (0.66666 - h) * 6;
+        return m1;
+    };
+
+    var HSLToRGB = function (hsl) {
+        var m1, m2, r, g, b;
+        var h = hsl[0], s = hsl[1], l = hsl[2];
+        m2 = (l <= 0.5) ? l * (s + 1) : l + s - l * s;
+        m1 = l * 2 - m2;
+        return [hueToRGB(m1, m2, h + 0.33333),
+        hueToRGB(m1, m2, h),
+        hueToRGB(m1, m2, h - 0.33333)];
+    };
+
+    var packRGB = function (rgb) {
+        var r = Math.round(rgb[0] * 255);
+        var g = Math.round(rgb[1] * 255);
+        var b = Math.round(rgb[2] * 255);
+        // '#' + 
+        return (r < 16 ? '0' : '') + r.toString(16) +
+            (g < 16 ? '0' : '') + g.toString(16) +
+            (b < 16 ? '0' : '') + b.toString(16);
+    };
+
+    this.degToRGB = function (deg) {
+        return packRGB(HSLToRGB([deg / 360, 1, 0.5]));
+    };
+
+    this.stripHtml = function (html) {
+        var tmp = document.createElement("DIV");
+        tmp.innerHTML = html;
+        return tmp.textContent || tmp.innerText || "";
+    };
+
+    //--------------------------
+    // TASK MANAGER
+    //--------------------------
+    this.log = function (value, color) {
+        if (self.json.setup && self.json.setup.log) { // log enabled
+            if (typeof value === 'string')
+                console.log('%c' + value, 'color:' + color);
+
+            else
+                console.log(value);
+        }
+    };
+
+    var varlog = function (str) {
+        self.log(str);
+        self.log(window[str]); // 'var' -> var
+    };
+
+    this.logJson = function (jsonPar) { self.log(JSON.stringify(jsonPar)); };
+
+    this.getTimestamp = function () {
+        // we need also an API to get the time
+        // like .getTime()?
+        return Math.floor(Date.now());
+    };
+
+    this.cloneObject = function (obj) {
+        var newObj = JSON.stringify(obj);
+        return self.parse(newObj);
+    };
+
+
+    /*------------------------
+        TEXT
+    ------------------------*/
+    /* var caseUp = function (string) {
+        if (!string) string = '';
+        return string.toUpperCase();
+    }
+    
+    var caseDown = function (string) {
+        if (!string) string = '';
+        return string.toLowerCase();
+    }
+    
+    var capitalize = function(string) {
+        if (!string) string = '';
+        return self.capitalize(string);
+    }
+            
+    var text = function (key, caseFunction) {
+        var t = self.json.text[key] || '';
+        if (caseFunction) return caseFunction(t); else return t;
+    } */
+    this.setElement = function (elementString, elementValue) {
+        var context = window;
+        var namespaces = elementString.split(".");
+        var func = namespaces.pop();
+
+        if (namespaces[0] == 'frame') {
+            namespaces.shift();
+            var frameName = namespaces.shift();
+            if (frameName && document.getElementById(frameName) !== null)
+                context = document.getElementById(frameName).contentWindow;
+        } else if (namespaces[0] == 'admin') { // fixo
+            namespaces.shift();
+            context = fixoAdmin;
+        }
+
+
+        for (var i = 0; i < namespaces.length; i++) {
+            if (context[namespaces[i]]) { // var
+                context = context[namespaces[i]];
+            } else {
+                if (elementValue) // scrittura
+                    context[namespaces[i]] = {}; // crea contesto inesistente
+            }
+        }
+
+        context[func] = elementValue;
+    };
+
+    this.context = function (path) {
+        const re = /^(setup|var|data|texts|parts)[\.\s]/; // reserved namespaces
+        if (re.test(path)) {
+            /* self.log('MATCHED setup|var|data|parts');
+            console.log(params); */
+            return self.json;
+        } else {
+            return window;
+        }
+    };
+
+    this.element = function (params) {
+        // {root, path, value} 
+        // in respect to docElement, it includes replaceProperties for path and value
+        // but only if value is a string. TO DO: check it 
+        let context;
+        let path = self.replaceProperties(params.path, params.args);
+        let value = (params.value && typeof params.value == 'string') ? self.replaceProperties(params.value, params.args) : params.value;
+
+        // NOTE: log error if the params.root is equal to the first element of the path? (window.window works)
+        if (!params.root) {
+            context = self.context(path);
+        } else {
+            context = params.root;
+        }
+
+        return self.docElement(path, value, context, params.delete);
+
+        //self.log(value);
+        /* if (value && typeof value == 'string') {
+            if (value.startsWith('js:')) value = self.js(value.substr(3));
+            else if (value.startsWith('+=')) value = self.element({path: path}) + self.js(value.substr(2));
+            else if (value.startsWith('-=')) value = self.element({path: path}) - self.js(value.substr(2));
+            else if (value.startsWith('/=')) value = self.element({path: path}) / self.js(value.substr(2));
+            else if (value.startsWith('*=')) value = self.element({path: path}) / self.js(value.substr(2))
+        } */
+        // self.log(value);
+        /* if (value.startsWith('number:')) value = Number(self.js(value.substr(6)));
+        alert('dopo number:'+value);
+        if (value.startsWith('boolean:')) value = Boolean(self.js(value.substr(7)));
+        if (value.startsWith('string:')) value = String(self.js(value.substr(6)));
+        if (value.startsWith('+:')) value = self.element({path: path}) + self.js(value.substr(2));
+        if (value.startsWith('-:')) value = self.element({path: path}) - self.js(value.substr(2));
+        if (value.startsWith('/:')) value = self.element({path: path}) / self.js(value.substr(2));
+        if (value.startsWith('*:')) value = self.element({path: path}) / self.js(value.substr(2)); */
+        /* // verificare...
+        if (value.startsWith('push:')) {var obj = self.docElement(path, undefined, root); return obj.push(value.substr(3));}
+        if (value.startsWith('unshift:')) {var obj = self.docElement(path, undefined, root); return obj.unshift(value.substr(3));}
+        if (value.startsWith('pop:')) {var obj = self.docElement(path, undefined, root); return obj.pop(value.substr(3));}
+        if (value.startsWith('shift:')) {var obj = self.docElement(path, undefined, root); return obj.shift(value.substr(3));} */
+    };
+
+    this.docElement = function (elementString, elementValue, context, elementDelete) {
+
+        if (!context) context = window; // TO DO: remove
+        var namespaces = elementString.split(/[.\s]+/); // path nodes separed by dot or spaces
+
+
+
+
+
+
+
+
+
+
+        /* console.log('<-------');
+        console.log('context');
+            console.log(context);
+            console.log('path');
+            console.log(elementString);
+            console.log('value');
+            console.log(elementValue);
+            console.log('------>');
+*/
+        var lastElement = namespaces.pop();
+
+        /* if (namespaces[0] == 'self') {
+            namespaces.shift();
+            context = self;
+        } else if (namespaces[0] == 'frame') {
+            namespaces.shift();
+            var frameName = namespaces.shift();
+            if (frameName && document.getElementById(frameName) !== null)
+                context = document.getElementById(frameName).contentWindow;
+        } */
+        /* console.log('namespaces');
+        console.log(namespaces); */
+        for (var i = 0; i < namespaces.length; i++) {
+            if (context[namespaces[i]]) { // var
+                context = context[namespaces[i]];
+            } else {
+                if (elementValue !== undefined && elementValue !== null) { // wants to assign a value
+                    context[namespaces[i]] = {}; // it create the context context[namespaces[i]] if it doesn't exist 
+                    context = context[namespaces[i]];
+                    /* self.log('crea context inesistente');
+                    self.log('namespaces[i]: '+namespaces[i]); */
+                    /* self.log('elementValue');
+                    self.log(elementValue);
+                    self.log('context[namespaces[i]]');
+                    self.log(context[namespaces[i]]); */
+                } else {
+                    /* self.log(elementString + ' undefined');
+                    self.log('lastElement:' + lastElement);
+                    self.log(elementValue); */
+                }
+                //break; // perché? rendeva impossibile creare un listener su un nodo secondario (solo su app e non su app/dev)
+            }
+        }
+
+        if (elementValue !== undefined) { // write
+
+            //self.log(lastElement+'='+elementValue);
+            if (typeof elementValue == 'string') elementValue = self.js(elementValue); // 1.0.3
+            context[lastElement] = elementValue;
+
+            // elementValue can be a js function
+            /* self.log('context');
+            self.log(context);
+            self.log('context[lastElement]');
+            self.log(context[lastElement]);
+            self.log('====='); */
+        }
+
+        if (elementDelete) delete context[lastElement];
+
+        /* self.log('context');
+        self.log(context); */
+        /* console.log('namespaces');
+        console.log(namespaces);
+        self.log('lastElement');
+        self.log(lastElement);
+        self.log('context[lastElement]');
+        self.log(context[lastElement]); */
+        if (context[lastElement] && context[lastElement].isConnected)
+            return self.elementToSelector(context[lastElement]);
+
+        else
+            return context[lastElement];
+    };
+
+    /*    this.openCloseDropdown = function(key) {
+            self.log('openCloseDropdown');
+            self.log("key");
+            self.log(key);
+            //$('.dropdown-menu').css('display','none');
+            var selector = self.selector({
+                "id": "dropdown" +key,
+                "class": 'points',
+                "value": key,
+            });
+            self.log("selector");
+            self.log(selector);
+            if ($(selector + ' > .dropdown-menu').css('display') == 'none') {
+                $(selector + ' > .dropdown-menu').css('display', 'block');
+            } else {
+                $(selector + ' > .dropdown-menu').css('display', 'none');
+            }
+        }  */
+    this.timeToMs = function (string) {
+        // bug
+        var timeArray = string.match(/(\d+)(\w+)/); // es: 1s / 100ms
+        if (timeArray) {
+            var value = Number(timeArray[0]);
+            var unit = timeArray[1];
+            var unitInMs = {
+                ms: 1,
+                s: 1000,
+                m: 1000 * 60,
+                h: 1000 * 60 * 60,
+                d: 1000 * 60 * 60 * 24,
+                milliseconds: 1,
+                seconds: 1000,
+                minutes: 1000 * 60,
+                hours: 1000 * 60 * 60,
+                days: 1000 * 60 * 60 * 24
+            };
+            if (value)
+                if (unitInMs[unit])
+                    return value * unitInMs[unit];
+
+                else
+                    self.log('wrong unit in the time string [value][unit]: ' + string);
+
+            else
+                self.log('wrong value in the time string [value][unit]: ' + string);
+        }
+        else
+            return Number(string);
+    };
+
+    this.intervals = {};
+
+    this.timer = function (params, args) {
+        // can go in "browser.json / functions (JS Browser BOM)
+        // https://www.w3schools.com/js/js_window.asp
+        let name = self.replaceProperties(params.name);
+        if (!name)
+            name = self.getTimestamp() + Math.random(1000);
+
+        if (params.play !== undefined && params.play == 0) {
+            if (self.intervals[name]) {
+                self.clearInterval({
+                    name: name
+                }, args);
+            }
+            if (self.timeouts[name]) {
+                self.clearTimeout({
+                    name: name
+                }, args);
+            }
+        }
+        else if (params.every !== undefined) {
+            let every = self.replaceProperties(params.every);
+            if (every) {
+                self.setInterval({
+                    name: name,
+                    duration: every,
+                    do: params.do
+                }, args);
+            }
+        }
+        else if (params.after !== undefined) {
+            let after = self.replaceProperties(params.after);
+            if (after) {
+                self.setTimeout({
+                    name: name,
+                    duration: after,
+                    do: params.do
+                }, args);
+            } else {
+                self.do(params.do, null, args);
+            }
+        }
+    };
+
+    this.setInterval = function (params, args) {
+        // could include the param "fromNow": true to execute the function
+        /* self.log('setInterval');
+        self.log(params); */
+        if (params.name && params.duration) {
+            if (self.intervals[params.name])
+                clearInterval(self.intervals[params.name]);
+
+            //self.do(params.do);
+            self.do(params.do);
+            self.intervals[params.name] = setInterval(function () {
+                //self.do(params.do);
+                self.do(params.do);
+                return params.name;
+            }, Number(params.duration)); // self.timeToMs
+        }
+        else
+            self.log('"setInterval" function requires "name" and "duration" parameters');
+    };
+
+    this.clearInterval = function (params, args) {
+        /* self.log('params');
+        self.log(params);
+        self.log('self.intervals[params.name]');
+        self.log(self.intervals[params.name]); */
+        if (self.intervals[params.name]) {
+            clearInterval(self.intervals[params.name]);
+            delete self.intervals[params.name];
+        }
+        // else
+        //    self.log('"clearInterval" name not found: ' + params.name);
+    };
+
+    this.timeouts = {};
+
+    this.setTimeout = function (params, args) {
+        // could include the param "fromNow": true to execute the function
+        /* self.log('setTimeout');
+        self.log(params); */
+        if (params.name && params.duration) {
+            if (self.timeouts[params.name])
+                clearInterval(self.timeouts[params.name]);
+
+            //self.do(params.do);
+            //self.do(params.do);
+            self.timeouts[params.name] = setTimeout(function () {
+                //self.do(params.do);
+                self.do(params.do);
+                return params.name;
+            }, Number(params.duration)); // self.timeToMs
+        }
+        else
+            self.log('"setTimeout" function requires "name" and "duration" parameters');
+    };
+
+    this.clearTimeout = function (params, args) {
+        /* self.log('params');
+        self.log(params);
+        self.log('self.timeouts[params.name]');
+        self.log(self.timeouts[params.name]); */
+        if (self.timeouts[params.name]) {
+            clearTimeout(self.timeouts[params.name]);
+            delete self.timeouts[params.name];
+        }
+        //else
+        //    self.log('"clearInterval" name not found: ' + params.name);
+    };
+
+
+
+
+    this.on = function (params, selectorParams) {
+        //let selector = params.selector || params.container;
+
+        var container = (selectorParams) ? self.selector(selectorParams) : params.selector; // 1.0.9 instead of params.container
+
+
+
+
+
+
+
+
+
+
+        /* self.log('on');
+        self.log(params);
+        self.log('container');
+        self.log(container); */
+        //var selector = self.selector(self.extend({}, params, selectorParams));
+        //$(container).data('onData', {events: params, container: container});
+        var element;
+
+        if (container) {
+            element = self.query(container); // shoud be foreach elements...
+            if (element)
+                self.dataStorage.set(element, "onData", { on: params, selector: container });
+            else {
+                self.log('can\'t find the element "' + container + '" ("on" function)');
+                self.log('params');
+                self.log(params);
+                self.log('selectorParams');
+                self.log(selectorParams);
+            }
+        } /*  else {
+            self.log('"on" function with selector undefined');
+            self.log('params');
+            self.log(params);
+            self.log('selectorParams');
+            self.log(selectorParams);
+        } */
+
+
+
+
+
+
+
+        for (var eventId in params) {
+            //var eventAction = params[eventId];
+            //$(selector).data('onData').action = eventAction;
+            /* if (eventId == 'thunkable') {
+                self.thunkable(params[eventId]);
+            } else  */
+            if (eventId == 'init') {
+                //self.log(params.init);
+                //self.do(params.init, undefined, selectorParams);
+                self.do(params.init, selectorParams);
+            } else if (eventId == 'hashchange') {
+                self.onHashChange.push(params.hashchange);
+                window.addEventListener('hashchange', function () {
+                    self.json.setup.page.hash = window.location.hash.substr(1); // potrebbe essere esplicitato sulla app
+
+
+
+                    //var action = self.cloneObject(params.app.on.hashchange);
+                    //self.replaceAll("{result}", window.location.hash);
+                    //self.do(self.onHashChange);
+                    self.do(self.onHashChange);
+                    self.uiUpdate();
+                });
+            } else if (eventId == 'scroll') {
+                self.onScroll.push(params.scroll);
+                window.addEventListener('scroll', function () {
+                    //self.do(self.onScroll);
+                    self.do(self.onScroll);
+                });
+            } else if (eventId == 'resize') {
+                self.onResize.push(params.resize);
+                window.addEventListener('resize', function () {
+                    //self.do(self.onResize);
+                    self.do(self.onResize);
+                });
+            } else if (eventId == 'in') { // like inViewport but only one time
+                if (container) {
+                    const observer = new IntersectionObserver((entries, observer) => {
+                        entries.forEach(function (entry) {
+                            /* self.log('entry');
+                            self.log(entry);
+                            self.log('entry.target');
+                            self.log(entry.target); */
+                            /* self.log(entry);
+                            self.log(entry.intersectionRatio);
+                            self.log(entry.isIntersecting);
+                            self.log(entry.isVisible); */
+                            // isIntersecting, isVisible
+                            //var element = self.query(entry.target);
+                            //self.log(entry.intersectionRatio);
+                            if (entry.intersectionRatio == 1) { // .isIntersecting?
+                                var el = entry.target;
+                                if (el.getAttribute('in') !== 'true') {
+                                    el.setAttribute('in', 'true'); // change with dataStorage
+                                    self.onEvent(entry.target, { type: 'in' });
+                                }
+                            }
+                        });
+                    }, {
+                        rootMargin: '0px',
+                        threshold: [0, 1] // if 0.5 is the half-height of the elmement
+                    });
+                    //const element = self.query(container);
+                    observer.observe(self.query(container));
+                }
+            } else if (eventId == 'inViewport') {
+                if (container) {
+                    const observer = new IntersectionObserver((entries, observer) => {
+                        entries.forEach(function (entry) {
+                            /* self.log('entry');
+                            self.log(entry);
+                            self.log('entry.target');
+                            self.log(entry.target); */
+                            /*
+                            self.log(entry.intersectionRatio);
+                            self.log(entry.isIntersecting);
+                            self.log(entry.isVisible); */
+                            // isIntersecting, isVisible
+                            //var element = self.query(entry.target);
+                            //self.log(entry.intersectionRatio);
+                            if (entry.intersectionRatio > 0) {
+                                self.onEvent(entry.target, { type: 'inViewport' });
+                            }
+                        });
+                    }, {
+                        rootMargin: '0px',
+                        threshold: [0, 1] // if 0.5 is the half-height of the elmement
+                    });
+                    //const element = self.query(container);
+                    observer.observe(self.query(container));
+                }
+            } else if (eventId == 'outViewport') {
+                const observer = new IntersectionObserver((entries, observer) => {
+                    entries.forEach(function (entry) {
+                        /* self.log(entry);
+                        self.log(entry.isIntersecting);
+                        self.log(entry.isVisible); */
+                        // isIntersecting, isVisible
+                        //var element = self.query(entry.target);
+                        //self.log(entry.intersectionRatio);
+                        if (entry.intersectionRatio == 0) {
+                            self.onEvent(entry.target, { type: 'outViewport' });
+                            /* var el = entry.target;
+                            if (el.getAttribute('in') == 'true') {
+                                el.setAttribute('in', 'false');
+                                self.onEvent(entry.target, {type: 'out'});
+                            } */
+                        }
+                    });
+                }, {
+                    rootMargin: '0px',
+                    threshold: [0, 1] // if 0.5 is the half-height of the elmement
+                });
+                const element = self.query(container);
+                observer.observe(element);
+
+
+            } else if (eventId !== 'selector') {
+
+                /* if (container == '.nav-link[data-value="docs"]') {
+                    alert(JSON.stringify(params));
+                    //element = element[0];
+                    $(element).hide();
+                } */
+                //element.removeEventListener(eventId);
+                // $(container).off(eventId);
+                if (element) {
+
+                    // TO DO: verify
+                    //if (element.getAttribute('listener') !== 'true') { // only one mouse event
+                    //self.log('addEventListener: ' + eventId); 
+                    element.addEventListener(eventId, function (event) {
+                        //$(container).off(eventId).on(eventId, function (event) {
+                        /* self.log('event');
+                        self.log(event); */
+                        element.setAttribute('listener', 'true');
+                        //event.preventDefault();
+                        //event.stopPropagation();
+                        self.onEvent(this, event);
+                    });
+                    //} 
+                    if (eventId == 'mousedown' || eventId == 'mouseup' || eventId == 'click')
+                        element.style.cursor = 'pointer';
+                }
+
+                /* $(container).off(eventId).on(eventId, function (event) {
+                //$(container).off(eventId).on(eventId, function (event) {
+                    self.log('event');
+                    self.log(event);
+                    event.preventDefault();
+                    event.stopPropagation();
+                    self.onEvent(this, event);
+                }); */
+                //$(container).css({cursor: 'pointer'});
+            }
+        }
+
+    };
+
+    /* this.addAction = function (params, selectorParams) {
+        var container = (selectorParams) ? self.selector(selectorParams) : params.container;
+        var selector = self.selector(self.extend({}, params, selectorParams));
+
+        $(selector).data('onData', params);
+        //$(selector).data('onData', {action: params.action, params: params.args});
+        $(selector).off().on(this.touch, function (event) {
+            event.stopPropagation();
+            self.onEvent(this, event);
+        });
+        $(selector).css({cursor: 'pointer'});
+    } */
+    /*     this.ace = function (params) {
+            params.container = 'blockCode';
+            var editor = ace.edit("blockCode");
+            var langTools = ace.require('ace/ext/language_tools');
+            editor.setTheme("ace/theme/monokai"); // ambiance
+            editor.getSession().setMode("ace/mode/json");
+            //editor.renderer.setOption('showLineNumbers', false);
+            editor.container.style.background="rgba(255,255,255,0)";
+    
+            var staticWordCompleter = {
+                getCompletions: function(editor, session, pos, prefix, callback) {
+                    var wordList = ["app", "setup", "pages"];
+                    callback(null, wordList.map(function(word) {
+                        return {
+                            caption: word,
+                            value: word,
+                            meta: "static"
+                        };
+                    }));
+            
+                }
+            }
+            editor.completers = [staticWordCompleter];
+    
+            // https://github.com/ajaxorg/ace/wiki/Configuring-Ace
+            editor.setOptions({
+                fontSize: "11pt",
+                selectionStyle: "text",
+                highlightActiveLine: true,
+                wrap: true,
+                showLineNumbers: false,
+                showGutter: false,
+                fixedWidthGutter: false,
+                readOnly: true,
+                //enableBasicAutocompletion: true,
+                //enableSnippets: true,
+                //enableLiveAutocompletion: true,
+            });
+            editor.setValue(var.code, -1);
+        } */
+    /*     this.edit = function (item) {
+            //var.code = JSON.stringify(item, null, '\t');
+    
+            self.do( {
+                "alert": {
+                    "background": "rgba(255,255,255,0.9)",
+                    "width": "93%",
+                    "showCancelButton": true,
+                    "cancelButtonText": 'Cancel',
+                    "confirmButtonText": 'Save',
+                    "html": '<div id="blockCode" align="left" style="background: transparent; margin: 0; width: 93%; height:86vh"></div>'
+                }
+            });
+            //self.code(JSON.stringify(item, null, '\t'),);
+            self.code(item, {container: '#blockCode'});
+    
+            //setTimeout(function () {
+                
+                //alert(var.blockCode);
+                // https://codepen.io/jjsjjja/pen/VoGYRB
+            //}, 100);
+        } */
+    this.money = function (value) {
+        /* if (value && value.indexOf(',') == -1 && value.indexOf('.') == -1) {
+            value = value + '.00';
+        } */
+        var rounded = Math.round(Number(value) * 100) / 100;
+        var string = String(rounded);
+        if (rounded == Math.floor(rounded))
+            string += ',00';
+        string = String(string).replace('.', ',');
+        return string;
+    };
+
+
+    this.offcanvas = function (params) {
+        self.log('offcanvas');
+        self.log('params');
+        self.log(params);
+        // https://getbootstrap.com/docs/5.0/components/offcanvas/
+        // to add: toggle, getInstance, getOrCreateInstance
+        var container = params.selector || params.container;
+        var selector = self.selector(container);
+        var element = self.query(selector);
+        self.log('offcanvas');
+        self.log(params);
+        self.log('selector');
+        self.log(selector);
+        self.log('element');
+        self.log(element);
+        // do: show (default) / hide (see boostrap Offcanvas docs)
+        if (element) {
+            if (params.do == 'hide') {
+                self.css({
+                    removeClass: 'show'
+                }, params);
+                //new bootstrap.Offcanvas(element).hide(); // doesn't work
+            } else {
+                new bootstrap.Offcanvas(element).show();
+            }
+        } else {
+            self.log('"offcanvas" method can\'t find the selected element');
+        }
+    };
+
+    /**
+     * Converts a DOM element to its CSS selector string representation
+     * @param {HTMLElement} element - The DOM element to convert
+     * @returns {string} The CSS selector string that uniquely identifies the element
+     */
+    this.elementToSelector = function (element) {
+        // 1. Use ID if available
+        if (element.id) {
+            return '#' + element.id;
+        }
+
+        // 2. Use data-value if unique
+        if (element.dataset?.value) {
+            const sameDataValue = document.querySelectorAll(`[data-value="${element.dataset.value}"]`);
+            if (sameDataValue.length === 1) {
+                return `[data-value="${element.dataset.value}"]`;
+            }
+        }
+
+        // 3. Use class if unique
+        if (element.classList && element.classList.length > 0) {
+            for (const className of element.classList) {
+                if (className) {
+                    const sameClass = document.querySelectorAll('.' + className);
+                    if (sameClass.length === 1) {
+                        return '.' + className;
+                    }
+                }
+            }
+        }
+
+        // 4. Use tag if unique
+        const tagName = element.tagName.toLowerCase();
+        const sameTag = document.querySelectorAll(tagName);
+        if (sameTag.length === 1) {
+            return tagName;
+        }
+
+        // 5. Fallback to tag + nth-child path
+        let path = [];
+        while (element.parentNode) {
+            let selector = element.tagName.toLowerCase();
+            const index = Array.from(element.parentNode.children).indexOf(element) + 1;
+            selector += `:nth-child(${index})`;
+
+            path.unshift(selector);
+            element = element.parentNode;
+        }
+        return path.join(' > ');
+    };
+
+
+    this.onEvent = function (element, event) {
+        //self.log('element');
+        //self.log(element);
+        /* self.log('event');
+        self.log(event); */
+        /* if (event) {
+            event.preventDefault(); // verify
+            event.stopPropagation();
+        } */
+        /* var item = {};
+        if (self.dataStorage.has(element, 'onData'))
+            item = self.dataStorage.get(element, 'onData'); */
+        var item = self.dataStorage.get(element, 'onData');
+        var code = self.dataStorage.get(element, 'code') || '';
+        //var item = $(element).data('onData');
+        //var code = $(element).data('code');
+        //var value = String($(element).data('value'));
+        //var selector = $(element).data('selector');
+        //var value = String(self.dataStorage.get(element, 'value'));
+        var value = element.getAttribute('data-value');
+        //var selector = element.getAttribute('data-selector');
+        var selector = self.elementToSelector(element); // 1.0.12
+
+
+
+
+
+
+
+
+        /* self.log('value');
+        self.log(value);
+        self.log('args');
+        self.log(args); */
+        var eventType = (event.type && item.on) ? item.on[event.type] : undefined;
+
+        /* self.log('onEvent');
+        self.log('item');
+        self.log(item);
+        self.log('selector');
+        self.log(selector);
+        self.log('event.type');
+        self.log(event.type); */
+        /*
+        if (event) {
+            args = {
+                value: value,
+                event: eventType
+            }
+        }
+        */
+        /*  self.log('event.type');
+            self.log(event.type);
+            self.log('event');
+            self.log(event);  */
+        var action, specialKey;
+
+        if (item.on) {
+
+            if (event.button == '2' && event.type == 'mousedown') { // right click / long touch
+
+                if (item.on['contextmenu'])
+                    action = item.on['contextmenu'];
+
+            } else if (event.type && item.on[event.type]) {
+
+                var eventAction = item.on[event.type];
+
+                //const specialKeys = ['shiftKey', 'altKey', 'cmdKey'];
+                if (eventAction) {
+                    if (eventAction.shiftKey && event.shiftKey) {
+                        specialKey = 'shiftKey';
+                        action = eventAction.shiftKey;
+                    } else if (eventAction.altKey && event.altKey) {
+                        specialKey = 'altKey';
+                        action = eventAction.altKey;
+                    } else if (eventAction.cmdKey && event.cmdKey) {
+                        specialKey = 'cmdKey';
+                        action = eventAction.cmdKey;
+                    } else if (!eventAction.shiftKey && !eventAction.altKey && !eventAction.cmdKey) {
+                        action = item.on[event.type];
+                    }
+                }
+            }
+        }
+
+        if (action) {
+            //console.dir(action);
+            //action = self.replaceProperty(action, '{on:target}', targetId);
+            if (event.target) {
+                //self.log(event);
+                var actionString;
+                var targetId = event.target.id;
+                var targetClass = event.target.className;
+                var targetValue = event.target.dataset.value;
+                var targetSelector = event.target.dataset.selector; // deprecated
+
+
+
+                /* self.log('event');
+                self.log(event); */
+                //if (targetValue) alert(targetValue);
+                targetSelector = self.replaceAll(targetSelector, '"', '\''); // TO DO: if JSON5?
+                action = self.stringify(action);
+                if (typeof targetId !== 'string') targetId = '';
+                if (typeof targetClass !== 'string') targetClass = '';
+
+                /* actionString = self.replaceAll(action, '{event.target.id}', targetId);
+                actionString = self.replaceAll(actionString, '{event.altKey}', event.altKey);
+                actionString = self.replaceAll(actionString, '{event.target.className}', targetClass);
+                actionString = self.replaceAll(actionString, '{event.target.data-value}', targetValue); // obsolete
+                actionString = self.replaceAll(actionString, '{event.target.dataset.value}', targetValue);
+                actionString = self.replaceAll(actionString, '{event.target.dataset.selector}', targetSelector); */
+                actionString = self.replaceAll(action, '{on:target.id}', targetId);
+                actionString = self.replaceAll(actionString, '{on:altKey}', event.altKey);
+                actionString = self.replaceAll(actionString, '{on:target.className}', targetClass);
+                actionString = self.replaceAll(actionString, '{on:target.data-value}', targetValue); // obsolete
+                actionString = self.replaceAll(actionString, '{on:target.dataset.value}', targetValue);
+                actionString = self.replaceAll(actionString, '{on:target.dataset.selector}', targetSelector); // deprecated
+                actionString = self.replaceAll(actionString, '{on:which}', event.which);
+                actionString = self.replaceAll(actionString, '{on:clientY}', event.clientY);
+                actionString = self.replaceAll(actionString, '{on:clientX}', event.clientX);
+
+                // custom
+                actionString = self.replaceAll(actionString, '{on:value}', targetValue);
+                actionString = self.replaceAll(actionString, '{on:dragging}', (event.which > 0));
+                //actionString = self.replaceProperty(actionString, 'on', event);
+                if (this.isJson(actionString))
+                    action = self.parse(actionString);
+
+                else
+                    action = actionString;
+            }
+
+            // TODO: let decide to the user the parameter to pass
+            var args = item.args; // || item.params || item.value || value;
+
+
+
+
+            //args.event = event;
+            //if (args)
+            //    action = self.replaceResult(action, args);
+            let specialKeyLog = (specialKey) ? ' + ' + specialKey : '';
+            //self.log('event ' + event.type + specialKeyLog);
+            //self.log('action');
+            //self.log(action);
+            /* self.log('args');
+            self.log(args);
+            self.log('{container: selector}');
+            self.log({container: selector}); */
+            //self.do(action, args, {selector: selector}); // TO DO: only if mouse over or
+            self.do(action, { selector: selector }, args);
+        } // (action)
+
+    };
+
+    this.pluginsFunctionAvailable = []; // should use pluginsLoaded
+
+    self.pluginsLoader = function (packs, callback, params) {
+        /* self.log('pluginsLoader');
+        self.log('packs');
+        self.log(packs);
+        self.log('callback');
+        self.log(callback);
+        self.log('params');
+        self.log(params);  */
+        //self.pluginsFunctionAvailable.push(name); // posizione giusta
+        var filesToLoad = [];
+
+        for (pack of packs) {
+            /* self.log('pack');
+            self.log(pack); */
+            if (self.pluginsLoaded[pack.name] == undefined) {
+
+                self.log('require plugin ' + pack.name, 'grey');
+                var plugin = self.findPlugin(pack.name);
+                let version;
+                var pluginsFiles;
+                if (plugin) {
+                    pluginsFiles = plugin.files || plugin;
+                    version = plugin.version;
+                } else {
+                    pluginsFiles = self.json.resources.pluginsFiles[pack.name]; // TO DO: obsolete, remove
+                    version = pack.version;
+                }
+
+                /* if (params) {
+                    if (!Array.isArray(params[0])) params[0] = [params[0]];
+                    if (!self.pluginsCallbacks[pack.name]) self.pluginsCallbacks[pack.name] = [];
+                    self.pluginsCallbacks[pack.name].concat(params[0]);
+                } */
+                self.pluginsLoaded[pack.name] = version; // should contain the queue of actions to do after the plugin loads
+
+
+
+
+                // TO DO: move in Promise.all(promises).then(function() { 
+                // it needs to feed a queue of actions to do after the plugin loads
+                if (!Array.isArray(pluginsFiles)) // multi-file plugin
+                    pluginsFiles = [pluginsFiles];
+
+                /* self.log('pluginsFiles');
+                self.log(pluginsFiles);  */
+                for (item of pluginsFiles) {
+                    var url = self.replaceAll(item.url, '{version}', version);
+                    if (!self.findUrl(filesToLoad, url)) // not included yet
+                        filesToLoad.push({ name: item.name, url: url, type: item.type });
+                }
+            }
+
+        }
+
+        //self.log(filesToLoad);
+        if (filesToLoad.length > 0) {
+
+            let promises = [];
+
+            filesToLoad.forEach(function (item) {
+                promises.push(loadPlugin({ name: item.name, url: item.url, type: item.type, rel: item.rel, as: item.as, content: item.content }));
+                //promises.push(loadPlugin(url));
+            });
+
+            Promise.all(promises).then(function (files) {
+                // all filesToLoad are loaded (all the Promise in loadPlugin are solved)
+                /* self.log('all plugin files are loaded');
+                self.log(files);
+                self.log(params); */
+                callback(...params); // change with ...
+
+
+                //callback(params[0], params[1], params[2]); // change with ...
+            }).catch(function (script) {
+                self.log('failed to load error');
+                self.log(item);
+                self.log(script);
+            });
+        }
+    };
+
+
+    this.pluginsRequired = function (params) {
+        /* self.log('pluginsRequired');
+        self.log(params); */
+        // analize function object or array of objects
+        if (self.json.resources) {
+            const pluginsFunctions = self.json.resources.pluginsFunctions;
+            var pluginsRequired = [];
+            if (typeof params == 'string') {
+                /* self.log('params');
+                self.log(params); */
+                if (pluginsFunctions[params]) {
+                    if (!self.pluginsLoaded[pluginsFunctions[params].name])
+                        pluginsRequired.push(pluginsFunctions[params]);
+                }
+            } else if (typeof params == 'object') {
+                var objArray;
+                if (Array.isArray(params)) objArray = params; else objArray = [params];
+                /* self.log('objArray');
+                self.log(objArray); */
+                for (var obj of objArray) {
+                    /* self.log('obj');
+                    self.log(obj); */
+                    for (var key in obj) {
+                        var mainFunction = (key.indexOf('.') >= 0) ? key.substr(0, key.indexOf('.')) : key;
+                        //self.log('mainFunction');
+                        //self.log(mainFunction);
+                        if (pluginsFunctions[mainFunction]) {
+                            if (!self.pluginsLoaded[pluginsFunctions[mainFunction].name])
+                                pluginsRequired.push(pluginsFunctions[mainFunction]);
+                        } /*  else if (key == 'var') {
+                            const functionName = self.functionName(obj.var.value);
+                            if (functionName) {
+                                if (!self.pluginsLoaded[pluginsFunctions[functionName].name])
+                                    pluginsRequired.push(pluginsFunctions[functionName]);
+                            }
+                        } */
+
+
+
+
+
+
+                    }
+                }
+            }
+            return pluginsRequired;
+        } else {
+            return [];
+        }
+    };
+
+    this.functionName = function (obj) {
+        if (obj == 'object') {
+            const name = Object.keys(obj)[0];
+            const pluginFunctions = ['database', 'ace', 'moment', 'dayjs'];
+            if (pluginFunctions.indexOf(name) >= 0)
+                return name;
+        }
+    };
+
+    /*
+    this.runParts = function (actionObj, container, argumentsPar, handleOtherActions) {
+        console.log('runParts');
+        console.log(actionObj);
+        if (Array.isArray(actionObj)) {
+                for (var action in actionObj)
+                    self.runParts(action);
+        } else {
+            var otherMethods = false;
+            var otherActions = {};
+            for (var partKey in actionObj) {
+
+                if (partKey.startsWith('var ') || partKey.startsWith('data ') || partKey.startsWith('set '))
+                    self.setData({path: partKey, value: actionObj[partKey]});
+                else {
+                    var methodOrPart = false;
+                    var method = self.element({path: partKey, root: self.methods});
+                    if (method) { // search in jsonic.methods
+                        methodOrPart = true;
+                        if (typeof method == 'function') {
+                            //self.docElement(actionObj[partKey]);
+                            self.log('method: ' + partKey);
+                            method(actionObj[partKey], container, argumentsPar);
+                        }
+                    } else if (self.json.parts) {  // search in self.json.parts
+                        var part = self.element({path: 'parts.'+self.replaceAll(partKey,':','.')});
+                        if (part) {
+                            part = self.replaceProperty(part, 'arg', actionObj[partKey]);
+                            if (actionObj[partKey].setup)
+                                part = self.replaceProperty(part, 'setup', actionObj[partKey].setup);
+                            console.log('part');
+                            console.log(part);
+                            self.run(part, container);
+                            methodOrPart = true; // if (!actionFound) { will go in the else (!part)
+                        }
+                    }
+                    if (!methodOrPart) otherActions[partKey] = actionObj[partKey];
+                    else otherMethods = true;
+                }
+            }
+
+            //if (handleOtherActions) handleOtherActions(otherActions, container, argumentsPar);
+            return otherMethods;
+        }
+    }
+    */
+    /* this.jsonicMethods = function (actions, container, argumentsPar) {
+
+        // 'icons' should be removed from the json files
+
+        var withContainer;
+        var functionFound = false;
+
+        for (var actionKey in actions) {
+
+            //if (nodes.functions.indexOf(actionKey) >=  0) {
+
+            switch (actionKey) {
+
+                case 'for':
+                case 'editor':
+                case 'ace':
+                case 'code':
+                case 'qrcode':
+                case 'lottie':
+                case 'animate':
+                case 'html':
+                case 'hide':
+                case 'show':
+                case 'toggle':
+                case 'in':
+                case 'out':
+                case 'if':
+                case 'ajax':
+                case 'attr':
+                case 'run':
+                case 'delay':
+                case 'css': withContainer = true; break;
+                default: withContainer = false;
+            }
+            var functionObj = actions[actionKey];
+            if (functionObj) {
+                functionFound = true;
+                if ((functionObj.if == undefined) || self.if(functionObj.if, container, argumentsPar)) {
+                    return self.doFunction({
+                        name: nodes.functions[actionKey],
+                        function: functionObj,
+                        args: argumentsPar,
+                        selector: container,
+                        withContainer: withContainer
+                    });
+                } else {
+                    if (functionObj.if !== undefined) {
+                        self.log(self.js(functionObj.if, argumentsPar));
+                    }
+                }
+            } else if (nodes.params.indexOf(actionKey) < 0)
+                return self.method(actions[actionKey], argumentsPar);
+
+        }
+
+                
+    } */
+    /*    this.do = function (actionPar, argumentsPar, selectorParams) { // ex this.action
+    
+            if (actionPar !== undefined && actionPar !== null) { //  !== undefined
+    
+                // check plugins required
+                let pluginsRequired = self.pluginsRequired(actionPar);
+                if (pluginsRequired.length > 0) {
+                    let params = [actionPar, argumentsPar, selectorParams];
+                    self.pluginsLoader(pluginsRequired, self.do, params);
+                
+                } else {
+    
+                    if (Array.isArray(actionPar)) {
+    
+                        if (actionPar.length > 0) {
+                            var actionArray = [];
+                            for (var index in actionPar)
+                                if (typeof actionPar[index] == 'object')
+                                    actionArray[index] = self.cloneObject(actionPar[index]);
+                                else
+                                    actionArray[index] = actionPar[index];
+                            //actionArray = actionArray.concat(actionPar);
+                            //actionArray = self.cloneObject(actionPar);
+                            var actionFunction = actionArray.shift();
+                            self.do(actionFunction, argumentsPar, selectorParams);
+                            if (actionArray.length > 0)
+                                self.do(actionArray, argumentsPar, selectorParams);
+                        }
+                    } else {
+    
+                        if (typeof actionPar == 'function') {
+    
+                            return actionPar(argumentsPar);
+    
+                        } else if (typeof actionPar == 'string') {
+    
+                            var actionPart = self.element({path: 'parts.' + actionPar}); // it includes replaceProperties
+                            self.log('actionPar stringa');
+                            self.log(actionPar);
+                            if (actionPart)
+                                return self.do(actionPart, argumentsPar);
+                            //else if (json.actions[actionPar]) // obsolete
+                            //    return self.do(json.actions[actionPar], argumentsPar);
+                            else
+                                return actionPar; //return self.js(actionPar); // TO DO: finisce qui anche una stringa di un tag p ("p": "string")
+    
+    
+                        } else if (typeof actionPar == "object") {
+    
+                            var actionObj = actionPar;
+                            var container = actionObj.selector || actionObj.container || selectorParams;
+    
+                            // events
+                            if (actionObj.on) {self.on(actionObj.on, container);}
+    
+    
+                            if (self.notEmptyObject(actionObj)) {
+    
+    
+                                var actionFound = self.runParts(actionObj, container, argumentsPar, self.jsonicMethods);
+    
+    
+                                if (!actionFound) {
+    
+                                    var functionFound = false;
+    
+                                    for (var index in nodes.functions) {
+                                        //if (nodes.params.indexOf(actionKey) < 0)
+    
+                                        //var action = Object.keys(actionObj)[0];
+                                        var withContainer = (nodes.functionsWithContainer.indexOf(nodes.functions[index]) >=0 );
+                                        var functionObj = actionObj[nodes.functions[index]];
+                                        if (functionObj) {
+                                            functionFound = true;
+                                            if ((functionObj.if == undefined) || self.if(functionObj.if, container, argumentsPar)) {
+                                            //if ((functionObj.if == undefined) || Boolean(self.js(functionObj.if, argumentsPar))) {
+                                                return self.doFunction({
+                                                    name: nodes.functions[index],
+                                                    function: functionObj,
+                                                    args: argumentsPar,
+                                                    selector: selectorParams,
+                                                    withContainer: withContainer
+                                                });
+                                            } else {
+                                                if (functionObj.if !== undefined) {
+    
+                                                    self.log(self.js(functionObj.if, argumentsPar));
+                                                }
+                                            }
+                                        }
+                                    }
+    
+                                    if (!functionFound) {
+                                        self.log('actionPar');
+                                        self.log(actionPar);
+                                        self.log('!functionFound');
+                                        self.log(actionObj);
+                                        return self.method(actionObj, argumentsPar);
+                                    }
+                                    
+                                }
+                            }
+                            
+                        } else {
+                            //self.log('Function not found');
+                            //self.log(actionPar);
+                            //self.log(argumentsPar);
+                            return actionPar;
+                            // functions from this.do
+                            //actionPar(argumentsPar);
+                        }
+                    }
+                }
+            } else {
+                // TO DO: check
+                //self.log('function with actionPar undefined');
+            }
+    
+        }
+    */
+    /*    this.jsonicMethod2 = function (actionObj, selectorParams, argumentsPar) {
+    
+            var functionFound = false;
+    
+            for (var action in actionObj) {
+                var functionObj = actionObj[action];
+                if (functionObj) {
+                    var withContainer = (nodes.functionsWithContainer.indexOf(action) >=0 );
+                    functionFound = true;
+                    if ((functionObj.if == undefined) || Boolean(self.js(functionObj.if, argumentsPar))) {
+                        return self.doFunction({
+                            name: action,
+                            function: functionObj,
+                            args: argumentsPar,
+                            selector: selectorParams,
+                            withContainer: withContainer
+                        });
+                    }
+                }
+    
+                if (!functionFound) {
+                    self.log('!functionFound');
+                    self.log('actionObj');
+                    self.log(actionObj);
+                    return self.method(actionObj, argumentsPar);
+                }
+            }
+    
+        
+        } */
+    this.for = function (params, selectorParams, args) {
+        /* self.log('for');
+        self.log(params); */
+        let container = self.selector(params.selector || params.container) || self.selector(selectorParams);
+
+        // TO DO: doesn't go as an automous function (needs to be inside a div)
+        /* self.log('for');
+        self.log('container');
+        self.log(container); */
+        //if (params.html) { // new version
+        let itemsName = params.id || params.name;
+        //self.log('itemsArray');
+        //self.log(itemsArray);
+        /* if (params.reverse) {
+            var itemsReversed = {};
+            for (var key in Object(itemsArray).keys().reverse()) {
+                itemsReversed[key] = itemsArray[key];
+            }
+            itemsArray = itemsReversed;
+        } */
+        if (params.of) {
+            //var itemsArray = self.cloneObject(params.of); // value is the previous array id
+            //if (typeof itemsArray == 'string')
+            //itemsArray = self.compile(itemsArray, args); // compile includes functions and create bugs
+            //self.log('params.of');
+            //self.log(params.of);
+            var itemsArray = self.replaceProperties(params.of, args);
+
+
+            /* self.log('itemsArray');
+                self.log(itemsArray);  */
+            /* if (typeof itemsArray == 'string') {
+                itemsArray = self.js(itemsArray); // TO DO: check
+            } */
+            if (itemsArray) {
+
+                /* if (typeof itemsArray == 'string') {
+                    if (itemsArray.startsWith('js:')) itemsArray = self.js(itemsArray.substr(3));
+                    //else itemsArray = self.replaceProperties(itemsArray, args);
+                } */
+                /*  else {
+                    itemsArray = self.actionResult(itemsArray, args);
+                    itemsArray = self.replaceProperties(itemsArray, args);
+                } */
+                /* self.log('itemsArray replaced');
+                self.log(itemsArray); */
+                /* self.log('for'); */
+                /* self.log(itemsName); */
+                /* self.log(itemsArray); */
+                if (params.html) { // 1.0.6 html in for is deprecated
+                    if (!params.do) params.do = [];
+                    else if (!Array.isArray(params.do)) params.do = [params.do];
+                    params.do.push({ html: params.html });
+                }
+
+
+                //delete params; // needed to avoid infinite loop
+                if (typeof itemsArray == 'object') {
+
+                    let indexNum = 0;
+
+                    for (var index in itemsArray) {
+
+                        var item = itemsArray[index];
+
+                        if (typeof item == 'object') {
+                            item.key = index; // obsolete
+                            item.index = index; // obsolete
+                        }
+
+                        if (typeof item.output == 'object') { // TO DO: obsolete
+
+                            /* self.log('item.for.output');
+                            self.log(item.for.output); */
+                            for (let key in item.output) {
+
+                                var output = item.output[key];
+                                if (typeof output == 'string') {
+                                    output = self.js(output, args);
+                                } else if (typeof output == 'object') {
+                                    //output = self.compile(output, args); 
+                                    output = self.replaceProperties(output, args);
+                                }
+
+                                item = self.replaceItems(item, output, key); // replace 
+
+
+
+                                //item = self.replaceProperty(item, key, output);
+                            }
+                        }
+
+                        if (params.do.length > 0) {
+
+                            //alert(JSON.stringify(params.do));
+                            //self.do(self.replaceProperty(params.do, itemsName, item), undefined, {selector: container});
+                            //let objWithIndex = self.replaceStringInObject(params.do, '{' + params.index + '}', index);
+                            let objWithIndex = params.do;
+
+                            if (params.var) { // TO DO: obsolete (remove when used)
+                                self.element({ path: params.var, value: item, root: self.json.var });
+                                objWithIndex = self.replacePropertyWithPrefix(objWithIndex, 'index:' + params.var, index);
+                                //objWithIndex = self.replaceStringInObject(objWithIndex, '{index:'+params.var+'}', index);
+                            }
+
+                            if (itemsName) {
+                                //objWithIndex = self.replaceStringInObject(objWithIndex, '{index:'+itemsName+'}', index);
+                                objWithIndex = self.replacePropertyWithPrefix(objWithIndex, 'index:' + itemsName, index);
+                                objWithIndex = self.replacePropertyWithPrefix(objWithIndex, itemsName, item);
+                                //objWithIndex = self.replaceProperty(objWithIndex, 'value:'+itemsName, item);
+                                //objWithIndex = self.replaceProperty(objWithIndex, itemsName, item); // obsolete
+                            }
+
+                            if (params.delay) {
+                                params.delay = self.replaceProperties(params.delay);
+
+                                let forId = params.var || itemsName;
+                                self.timer({
+                                    name: 't' + forId + index,
+                                    after: indexNum * params.delay,
+                                    do: objWithIndex
+                                });
+                            } else {
+                                self.do(objWithIndex, { selector: container });
+                            }
+                        }
+
+                        /* if (params.html) { // should be inside a do // commented from 1.0.6
+                            let indexName = params.index || 'index';
+                            let objWithIndex = self.replaceStringInObject(params.html, '{'+indexName+':'+itemsName+'}', index);
+                            objWithIndex = self.replaceProperty(objWithIndex, itemsName, item);
+                            self.do(objWithIndex, {selector: container});
+                        } */
+                        indexNum += 1;
+
+                    }
+                }
+            }
+
+        } else if (params.from !== undefined && params.to !== undefined) {
+
+            /* var step = Number(params.step) || 1;
+            var from = Number(params.from) || 0;
+            var to = Number(params.to); */
+            var step = self.js(self.replaceProperties(params.step)) || 1;
+            var from = self.js(self.replaceProperties(params.from)) || 0;
+            var to = self.js(self.replaceProperties(params.to));
+            /* var step = Number(self.replaceProperties(params.step)) || 1;
+            var from = Number(self.replaceProperties(params.from)) || 0;
+            var to = Number(self.replaceProperties(params.to)); */
+            /* self.log('from');
+            self.log(from);
+            self.log('to');
+            self.log(to);
+            self.log('step');
+            self.log(step); */
+            if (to !== undefined) {
+
+                for (var index = Number(from); index <= Number(to); index += Number(step)) {
+
+                    if (params.var)
+                        self.element({ path: params.var, value: index, root: self.json.var });
+
+                    // TO DO: find "if (params.html) { // 1.0.6" and modify also the following code 
+                    var item = self.replaceItems(params, String(index), itemsName); // obsolete: replaced with {index:itemsName}
+
+
+
+
+
+
+
+
+
+
+                    //var item = self.replaceProperty(params, itemsName, String(index));
+                    /* self.log('itemsName');
+                    self.log(itemsName);
+                    self.log('index');
+                    self.log(index);
+                    self.log('item');
+                    self.log(item); */
+                    if (item.output && typeof item.output == 'object') { //} !== undefined) {
+
+                        /* self.log('item.for.output');
+                        self.log(item.for.output); */
+                        for (let key in item.output) {
+
+                            var output = item.output[key];
+                            if (typeof output == 'string') {
+                                output = self.js(output, args);
+                            } else if (typeof output == 'object') {
+                                //output = self.compile(output, args); 
+                                output = self.replaceProperties(output, args);
+                            }
+
+                            item = self.replaceItems(item, output, key);
+                            //item = self.replaceProperty(item, key, output);
+                        }
+                    }
+
+                    // item = self.replaceItems(item, itemValue, itemsName); old version
+                    //delete item.for; // needed to avoid infinite loop
+                    if (item.do) {
+                        params.do = self.replacePropertyWithPrefix(item.do, 'index:' + itemsName, index);
+                        //params.do = self.replaceStringInObject(item.do, '{index:'+itemsName+'}', index);
+                        self.do(item.do, selectorParams, args); // return?
+
+                        //self.do(item.do, args, selectorParams); // return?
+                    }
+                    if (item.html) {
+                        //params.html = self.replaceStringInObject(item.html, '{index:'+itemsName+'}', index);
+                        params.html = self.replacePropertyWithPrefix(item.html, 'index:' + itemsName, index);
+                        self.html(item.html, selectorParams);
+                    }
+                }
+            }
+        } else {
+            self.log('"for" element requires "value" or "from" and "to" parameters'); // link to see the documentation
+            self.log(params);
+        }
+        //}
+        // }
+    };
+
+    this.htmlTag = function (params, selectorParams, tagParam, mainParam) {
+        /* self.log('htmlTag');
+        self.log(tagParam); */
+        if (Array.isArray(params)) {
+            for (var index in params)
+                self.htmlTag(params[index], selectorParams, tagParam, mainParam);
+        } else {
+
+            //----------------------------------
+            // attributes of the tag in the key
+            // example: "div id=btn btn"
+            // (classes are without identifier)
+            //---------------------------------- 
+            let htmlTagSplitter = tagParam.indexOf(' ');
+            if (htmlTagSplitter > 0) {
+                let tagClass = tagParam.substr(htmlTagSplitter + 1);
+                tagParam = tagParam.slice(0, htmlTagSplitter);
+                if (tagClass) {
+                    if (typeof params !== 'object') params = { 'text': String(params) };
+                    if (!params.attr) params.attr = {};
+
+                    // attributes in key: attribute=value
+                    let tagArr = tagClass.split(' ');
+                    var attrClass = '';
+                    for (let tagProp of tagArr) {
+                        let tagAttr = new RegExp("([_a-zA-Z]+[_a-zA-Z0-9-]*)=(.+)"); // [_a-zA-Z0-9-/]
+                        if (tagAttr.test(tagProp)) {
+                            //console.log('attribute found '+tagProp);
+                            let tagPropArr = tagProp.split('=');
+                            params.attr[tagPropArr[0]] = tagPropArr[1];
+                        } else {
+                            attrClass += ' ' + tagProp;
+                        }
+                    }
+
+                    // classes
+                    if (params.attr.class)
+                        params.attr.class = params.attr.class + attrClass;
+                    else {
+                        params.attr.class = attrClass;
+                    }
+                    //alert(tagParam + '/'+ tagClass+ '#');
+                }
+            }
+
+            let htmlTagObj = self.createTagParams(params, tagParam, mainParam);
+
+            self.do(htmlTagObj, selectorParams);
+
+            if (params.database) self.addFirebaseTag(self.extend({}, params, selectorParams));
+
+        }
+    };
+
+    this.createTagParams = function (params, tagParam, mainParam) {
+        if (!mainParam) {
+            switch (tagParam) {
+                case 'header':
+                case 'main':
+                case 'footer':
+                case 'div':
+                case 'p':
+                    mainParam = 'html';
+                    break;
+                case 'img':
+                    mainParam = 'src';
+                    break;
+                default:
+                    mainParam = 'text'; // TO DO: -> html (to test with actual apps)
+                    break;
+            }
+        }
+        var paramsObj = {};
+        if (typeof params == 'string') paramsObj[mainParam] = params; else paramsObj = params;
+        paramsObj.tag = tagParam;
+        return paramsObj;
+    };
+
+
+
+    this.onResize = [];
+    this.onHashChange = [];
+    this.onScroll = [];
+    //let swup;
+    this.notEmptyObject = function (obj) {
+        return (obj // null and undefined check
+            && Object.keys(obj).length > 0);
+        // && Object.getPrototypeOf(obj) === Object.prototype
+        // https://stackoverflow.com/questions/679915/how-do-i-test-for-an-empty-javascript-object
+    };
+
+    this.run = function (params, selectorParams, args) {
+        /* self.log('run');
+        self.log(params); */
+        if (Array.isArray(params)) {
+            for (var index in params)
+                self.run(params[index], selectorParams, args);
+        } else {
+
+
+            var codeToRun;
+            if (typeof params == 'object')
+                codeToRun = self.cloneObject(params);
+            else if (typeof params == 'string')
+                codeToRun = self.replaceProperties(params);
+            else if (typeof params == 'function')
+                return params(args);
+
+            else
+                return params;
+
+            /*  self.log('codeToRun');
+                self.log(codeToRun); */
+            if (typeof codeToRun == 'object') {
+                var selector = codeToRun.selector || codeToRun.container;
+                if (!selector) selector = selectorParams;
+                if (typeof selector == 'string') selector = { selector: selector };
+
+
+
+                var actions = {};
+                for (key in codeToRun) {
+
+                    if (nodes.extend.indexOf(key) >= 0) {
+                        var obj = {};
+                        obj[key] = codeToRun[key];
+                        self.extendJson(self.json, obj);
+                    } else if (['setup', 'container', 'selector', 'resources', 'on', 'do'].indexOf(key) < 0)
+                        actions[key] = codeToRun[key];
+                }
+
+                /*  self.log('codeToRun.on');
+                    self.log(codeToRun.on);
+    
+                    self.log('selector');
+                    self.log(selector); */
+                // actions
+                //if (codeToRun.container) {self.empty(codeToRun.container);} // reset
+                // .in SIGNIFICA CONTENITORE (select)
+                if (codeToRun.on) { self.on(codeToRun.on, selector); }
+                if (codeToRun.do) { self.do(codeToRun.do, selector, args); }
+
+                if (self.notEmptyObject(actions)) {
+                    /* self.log('notEmptyObject actions');
+                    self.log(actions);
+                    self.log('selector');
+                    self.log(selector); */
+                    return self.do(actions, selector, args);
+                    //return self.do(actions, args, codeToRun.in);
+                }
+            }
+        }
+
+        //self.extendJsonFromElement(codeToRun); // style, actions, texts, data, var. no setup, on, do, blocks, container
+    };
+    /*
+        this.execute = function (params, selectorParams, args) { // obsolete
+    
+            // should create a new jsonicApp instance and assign it to jsonic[id]
+            // jsonicApp should load the plugins required and not are already loaded
+            // jsonicApp should import the json not already imported
+            // jsonicApp should load the icons not already loaded
+    
+            // jsonicApp should init the database if not already initialized
+            // otherwise should copy the db object from window.jsonic?
+            
+            // to have app relative var and data these should be called as var:clock.... / var:calendar....
+    
+            // or each app should have an ID (without id the ID is "app")
+    
+            // to have exclusive setup, var, data/items, pages and to reset var on the second execution
+            // for example: window.jsonic['container'] = new jsonicObject(options);
+            self.log('execute');
+    
+            if (params) {
+    
+                if (params.do == 'init') {
+    
+                    self.log('init');
+                    window.removeEventListener('hashchange');
+                    window.removeEventListener('resize');
+                    window.removeEventListener('beforeinstallprompt');
+    
+                    // PWA
+                    if ('serviceWorker' in navigator) {
+                        // Register a service worker hosted at the root of the
+                        // site using the default scope.
+                        navigator.serviceWorker.register('/app/assets/pwa/sw.js').then(function(registration) {
+                            self.log('Service worker registration succeeded:', registration);
+                        }, function(error) {
+                            self.log('Service worker registration failed:', error);
+                        });
+                    } else {
+                        self.log('Service workers are not supported.');
+                    }
+                        
+                    let deferredPrompt;
+    
+                    window.addEventListener('beforeinstallprompt', (e) => {
+                        // Prevent Chrome 67 and earlier from automatically showing the prompt
+                        e.preventDefault();
+                        // Stash the event so it can be triggered later.
+                        deferredPrompt = e;
+                    });
+    
+                    self.json.setup.page.hash = window.location.hash.substr(1);
+    
+                    // we consider json.setup.modules instead of self.modules
+                    // to be sure to follow the right order of execution
+    
+                    var modules = []; // we need it to keep the order of the modules given in the setup
+                    for (key in json.setup.modules) {
+                        var mod = self.replaceProperties(json.setup.modules[key]);
+                        modules = modules.concat(self.cloneObject(mod));
+                    }
+                    
+                    //modules.push({name: 'ide', url: 'https://jsonic.io/app/modules/ide.json'}); // TO DO if admin
+                    // or can execute global before all the rest
+                    // modules can contain {libs and apps}
+                    // ide module can be loaded only if required
+                    
+                    for (var mod of modules) {
+                        //self.log(mod.name);
+                        var params = self.modules[mod.name];
+                        //self.log(params);
+    
+                        if (params.html) {
+    
+                            var container = selectorParams || 'body';
+    
+                            //if (params.app.html) {
+    
+                                //var documentTitle = self.json.setup.title;
+                                //if (documentTitle)
+                                //    document.title = documentTitle;
+                                //if (document.querySelector('meta[name="description"]'))
+                                //    document.querySelector('meta[name="description"]').setAttribute("content", documentDescription);
+    
+                                self.html(params.html, {container: container});
+    
+                                // window events
+    
+                            //}
+                        }
+    
+                        if (params.on) { // -> this.on
+    
+                            // hashchange
+    
+                            if (params.on.hashchange) {
+                                self.onHashChange.push(params.on.hashchange);
+                                window.addEventListener('hashchange', function() {
+                                    self.json.setup.page.hash = window.location.hash.substr(1); // potrebbe essere esplicitato sulla app
+                                    //var action = self.cloneObject(params.app.on.hashchange);
+                                    //self.replaceAll("{result}", window.location.hash);
+                                    self.do(self.onHashChange);
+                                    self.uiUpdate();
+                                });
+                            }
+    
+                            // resize
+    
+                            window.addEventListener('resize', self.resizeEvent);
+                            if (params.on.resize) {
+                                self.onResize.push(params.on.resize);
+                                window.addEventListener('resize', function () {
+                                    self.do(self.onResize);
+                                });
+                            }
+    
+    
+                            // receiveMessage
+    
+                            if (params.on.thunkable && params.on.thunkable.receiveMessage)
+                                window.receiveMessage(function (message) {
+                                    //document.querySelector('#message').value = message;
+                                    jsonic.functions(params.on.thunkable.receiveMessage, message, undefined);
+                                });
+    
+    
+                            self.on(params.on, {container: container}); // init included
+                        }
+    
+                        //else
+                        //self.log('The node "app" requires "container" and "html" properties');
+                    }
+            
+    
+                } else {
+    
+                    //if (params.setup) args = self.extend(args, params.setup); // or params.args?
+                    if (params.blocks) self.extendJson(json, {blocks: params.blocks});
+                    //if (params.library) self.extendJson(json, {library: params.library}); // obsolete
+                    if (params.media) self.extendJson(json, {media: params.media}); // obsolete
+                    if (params.functions) self.extendJson(json, {functions: params.functions}); // obsolete
+                    if (params.actions) self.extendJson(json, {actions: params.actions});
+                    if (params.css) self.extendJson(json, {css: params.css});
+                    //if (params.styles) self.extendJson(json, {styles: params.styles});
+                    //if (params.iconset) self.extendJson(json, {iconset: params.iconset});
+                    if (params.data) self.extendJson(json, {data: params.data});
+                    if (params.items) self.extendJson(json, {items: params.items});
+                    if (params.var) self.extendJson(json, {var: params.var});
+    
+                    if (params.html) {
+                        var container = selectorParams || 'body'; // is an object
+                        if (typeof container == 'string')
+                            container = {container: container};
+    
+    
+                        //if (self.inputValue({id: 'module'}) == 'base') {
+                                // icons will be obsolete
+    
+                        //} else {
+                            //var setup = extendParams.setup || params.setup;
+                            //if (container || html.container) {
+    
+    
+                                //if (params.app.html) {
+                                    var code = self.cloneObject(params.html);
+                                    //self.log('code');
+                                    //self.log(code);
+                                    //self.log(JSON.stringify(code));
+    
+                                    self.html(code, container);
+                                //}
+                            //} else {
+                            //    self.log('execute method requires container parameter');
+                            //}
+    
+                            if (params.on && params.on.init) {
+                                self.do(params.on.init, undefined, container);
+                            }
+                                // args can be params.setup
+                        //}
+                    } else if (params.module) {
+                        var moduleId = self.replaceProperties(params.module);
+                        return self.do(self.modules[moduleId]);
+                    }
+    
+    
+                }
+    
+            }
+        } */
+    /*     this.createApp = function (data) {
+            self.log('createApp');
+            //self.log(self.modules);
+                
+            let deferredPrompt;
+    
+            window.addEventListener('beforeinstallprompt', (e) => {
+                // Prevent Chrome 67 and earlier from automatically showing the prompt
+                e.preventDefault();
+                // Stash the event so it can be triggered later.
+                deferredPrompt = e;
+            });
+    
+            self.json.setup.page.hash = window.location.hash.substr(1);
+    
+            for (var file in self.modules) {
+                var params = self.modules[file];
+    
+                //if (params.on) self.extendJson(json, {media: params.media});
+                // if (params.icons) self.extendJson(json, {icons: params.icons});
+                //if (params.functions) self.extendJson(json, {functions: params.functions});
+                //if (params.styles) self.extendJson(json, {styles: params.styles});
+                //if (params.items) self.extendJson(json, {items: params.items});
+                //if (params.var) self.extendJson(json, {var: params.var});
+                //if (params.library) self.extendJson(json, {library: params.library});
+                
+                if (params.app && params.app.container) {
+    
+                    //var documentTitle = self.json.setup.title;
+                    //if (documentTitle)
+                    //    document.title = documentTitle;
+                    //if (document.querySelector('meta[name="description"]'))
+                    //    document.querySelector('meta[name="description"]').setAttribute("content", documentDescription);
+    
+                    //alert(document.querySelector(params.app.container).isConnected);
+                    self.html(params.app.html, {container: params.app.container});
+    
+                    // window events
+    
+                    if (params.app.on) { // -> this.on
+    
+                        // hashchange
+    
+                        if (params.app.on.hashchange) {
+                            self.onHashChange.push(params.app.on.hashchange);
+                            window.addEventListener('hashchange', function() {
+                                self.json.setup.page.hash = window.location.hash.substr(1); // potrebbe essere esplicitato sulla app
+                                //var action = self.cloneObject(params.app.on.hashchange);
+                                //self.replaceAll("{result}", window.location.hash);
+                                self.do(self.onHashChange);
+                                self.uiUpdate();
+                            });
+                        }
+    
+                        // resize
+    
+                        window.addEventListener('resize', self.resizeEvent);
+                        if (params.app.on.resize) {
+                            self.onResize.push(params.app.on.resize);
+                            window.addEventListener('resize', function () {
+                                self.do(self.onResize);
+                            });
+                        }
+    
+                        // receiveMessage
+    
+                        if (params.app.on.thunkable && params.app.on.thunkable.receiveMessage)
+                            window.receiveMessage(function (message) {
+                                //document.querySelector('#message').value = message;
+                                jsonic.functions(params.app.on.thunkable.receiveMessage, message, undefined);
+                            });
+    
+                        // init
+                        self.log('params.app.on');
+                        self.log(params.app.on);
+                        self.log('params.app.container');
+                        self.log(params.app.container);
+    
+                        self.on(params.app.on, {container: params.app.container});
+                    }
+    
+                }
+                //else
+                //self.log('The node "app" requires the "container" property');
+            }
+    
+            
+            if (self.pluginsLoaded['swup'] && self.json.setup.swup) {
+                let swup = new Swup(self.json.setup.swup);
+            }
+            
+    
+            self.do(data);
+        } */
+    /* this.menuToggle = function () {
+        self.log('menuToggle');
+        //$('.offcanvas-collapse').toggleClass('open');
+        $('#header').toggleClass('headerMenuOpen');
+        var.menuOpen = (!var.menuOpen);
+        self.log(var.menuOpen);
+    }
+
+    this.menuOpen = function () {
+        self.log('menuOpen');
+        $('#menu').addClass('menuOpen');
+        var.menuOpen = true;
+        self.log(var.menuOpen);
+    }
+
+    this.menuClose = function () {
+        self.log('menuClose');
+        $('#menu').removeClass('menuOpen');
+        var.menuOpen = false;
+        self.log(var.menuOpen);
+    } */
+    /*         this.createMenu = function (data) {
+            self.log('createMenu');
+            // self.userRole
+            var menuId = (typeof data.id == 'function') ? data.id() : data.id;
+            var container = data.container || '#header > ul';
+            $(container).empty();
+    
+            for (var index in self.json.menu[menuId]) {
+                var selector = container + ' > li:eq(' + index + ')'; // > span';
+                var item = self.json.menu[menuId][index];
+                // action
+                //if (item.page && !item.action) item.action = {page: item.page};
+                if (!var.functions[container])
+                    var.functions[container] = {};
+                var.functions[container][index] = item;
+    
+                $(container).append('<li id="item'+index+'"></li>');
+                item.color = item.color || 'inherit';
+                item.background = item.background || 'transparent';
+                item.border = item.border || 'transparent';
+                
+                self.tab(item, {container: selector});
+    
+            }
+            self.do(data);
+        } */
+    /* this.changeMenu = function (menuId) {
+    }
+    */
+    /*  this.form = function (params, selectorParams) {
+            // replaceProperties può essere passato all'inizio di ogni costruttore
+            //params.container = params.container || self.selector(selectorParams);
+            //var selector = self.selector(params);
+            var container = params.container || self.selector(selectorParams);
+            //var elementContainer = self.query(container);
+            //var selector = self.selector(self.extend({}, params, selectorParams));
+            //var element = self.query(selector);
+    
+            //params.tag = 'form';
+            //if (params.id === undefined) {params.id = '';}
+            //if (params.value === undefined) {params.value = ''};
+            //if (params.class === undefined) {params.class = ''};
+    
+            //$(container).append('<'+params.tag+' id="'+params.id+'" class="'+params.class+'" data-value="'+params.value+'" data-selector="'+selector+'"></'+params.tag+'>');
+            for (var itemKey in params.items) {
+                var item = params.items[itemKey];
+    
+                self.html({
+                    "form": {
+                        "attr": {
+                            "id": params.id,
+                            "class": params.class,
+                            "data-value": params.data-value || params.value
+                        },
+                        "div": [
+                            {
+                                "attr": {
+                                    "class": "form-group",
+                                    "data-value": itemKey
+                                },
+                                "html": [
+                                    {
+                                        "label": {
+                                            "attr": {
+                                                "for": itemKey,
+                                                "text": item.title
+                                            }
+                                        }
+                                    },
+                                    {
+                                        "input": {
+                                            "attr": {
+                                                "id": itemKey,
+                                                "class": "form-control",
+                                                "data-value": "formInput" + itemKey,
+                                                "value": item.inputValue,
+                                                "type": item.type,
+                                                "text": item.title,
+                                                "aria-describedby": "note"+itemKey,
+                                                "placeholder": "",
+                                                "disabled": disabled
+                                            }
+                                        }
+                                    },
+                                    {
+                                        "small": {
+                                            "attr": {
+                                                "class": "form-text text-muted",
+                                                "data-value": "formNote"+itemKey,
+                                                "text": item.note
+                                            }
+                                        }
+                                    },
+                                ]
+                            }
+                        ]
+                    }
+                }, {
+                    container: container
+                });
+    
+            }
+    
+        } */
+    /*    this.addList = function (params, selectorParams) {
+            var container = (selectorParams) ? self.selector(selectorParams) : params.container;
+            var selector = self.selector(self.extend({}, params, selectorParams));
+    
+            if (params.id === undefined) {params.id = '';}
+            if (params.value === undefined) {params.value = ''};
+            if (params.class === undefined) {params.class = ''};
+            $(container).append('<ul id="'+params.id+'" class="'+params.class+' list-group" data-value="'+params.value+'"></ul>');
+    
+            self.list(params, {container: container});
+        
+        } */
+    /*
+            this.addBlock = function (params, selectorParams) {
+    
+            if (params.icons) self.icons(params.icons, selectorParams);
+            if (params.tab) self.tab(params.tab, selectorParams);
+            if (params.html) self.html(params.html, selectorParams);
+            if (params.div) self.div(params.div, selectorParams);
+            if (params.ul) self.ul(params.ul, selectorParams);
+            if (params.li) self.li(params.li, selectorParams);
+            if (params.span) self.span(params.span, selectorParams);
+            if (params.img) self.img(params.img, selectorParams);
+            if (params.form) self.form(params.form, selectorParams);
+            if (params.list) self.addList(params.list, selectorParams);
+            //if (params.img) alert(JSON.stringify(params.img.src));
+        }
+    */
+    /*     this.blocks = function (params, selectorParams, args) {
+            if (Array.isArray(params)) {
+                for (var index in params)
+                    self.blocks(params[index], selectorParams, args);
+            } else {
+                if (typeof params == 'string') {
+                    var blocksObj = self.get('self.json.library.'+params);
+                    if (blocksObj)
+                        self.blocks(blocksObj.blocks, selectorParams);
+                } else {
+                    if (params.library) {
+                        self.library(params.library, selectorParams, args); // {container: container}
+                    } else {
+                        self.addTag(params, selectorParams, args); // {container: container}
+                    }
+                }
+            }
+        }
+        */
+    this.inputValue = function (params) {
+        var selector = self.selector(params.selector || params.container);
+        var element = document.querySelector(selector); // self.query(p2);
+        return element.value;
+    };
+
+
+    /*     this.layout = function (params, selectorParams, args) {
+            if (Array.isArray(params)) {
+                for (var index in params)
+                    self.layout(params[index], selectorParams, args);
+            } else {
+                if (typeof params == 'string') {
+                    var libraryObj = self.get('self.json.layouts.'+params); // todo: get?
+                    //var libraryHtml = libraryObj.html || libraryObj.blocks;
+                    if (libraryObj)
+                        self.layout(libraryObj, selectorParams, args); // TODO warning potential infinite loop (if string)
+                    else
+                        self.log('"theme" not found: ' + params);
+                } else {
+                    var libraryHtml = params.html;
+                    // can a library component be an object?
+                    if (params.setup) args = self.extend(args, params.setup); // or params.args?
+                    if (params.functions) self.extendJson(json, {functions: params.functions});
+                    if (params.css) self.extendJson(json, {css: params.css});
+                    //if (params.styles) self.extendJson(json, {styles: params.styles});
+                    if (params.items) self.extendJson(json, {items: params.items});
+                    if (params.var) self.extendJson(json, {var: params.var});
+                    self.html(libraryHtml, selectorParams, args); // {container: container}
+                    //self.(params, selectorParams, args);
+                }
+            }
+        } */
+    this.part = this.block = function (params, selectorParams, args) {
+
+        let nested;
+        let part;
+        let partArguments;
+
+        if (typeof params.do == 'string' && self.json.parts) { // && par.match(/[.>]+/)) 
+
+            self.log('PART: ' + params.do, 'brown');
+
+            params.do = self.replaceProperties(params.do);
+
+            if (typeof params.do == 'object')
+                part = params.do;
+
+            else
+                part = self.element({ path: self.replaceAll(params.do, ':', '.'), root: self.json.parts }); // TO DO: . -> space?
+
+
+
+            /* if (par.indexOf(':')>0 && !part) {
+                self.firebaseGetPart({localPath:localPath, container: params.selector, arg:params.obj});
+            } */
+        } else if (typeof params.do == 'object')
+            part = params.do;
+
+        if (part) {
+            //if (!params.arguments) params.arguments = {};
+            // TO DO: Check this. seems a workaround for fantacards/ui:qrcode
+            if (params.arguments)
+                partArguments = self.replaceProperties(params.arguments);
+
+            if (typeof params.arguments == 'object') {
+                partArguments = (params.arguments.setup) ? params.arguments.setup : params.arguments; // compatibility
+                partArguments.selector = partArguments.selector || params.selector;
+            }
+
+            nested = self.replacePropertyWithPrefix(part, 'setup', partArguments); // {setup} -> {arguments}
+            nested = self.replacePropertyWithPrefix(nested, 'arguments', partArguments); // to tix
+
+            self.extendJsonFromElement(nested);
+            self.do(nested, params.selector, partArguments);
+        }
+    };
+
+    this.blocks = function (params, selectorParams, args) {
+        if (Array.isArray(params)) {
+            for (var index in params)
+                self.blocks(params[index], selectorParams, args);
+        } else {
+            //self.log('blocks');
+            //self.log(params);
+            if (typeof params == 'string') {
+
+                var blockName = self.replaceProperties(params, args); // self.compile(params, args);
+
+
+
+                //self.log('blockName');
+                //self.log(blockName);
+                var libraryObj = self.element({ path: 'self.json.blocks.' + blockName }); // todo: get?
+
+
+
+
+
+                //self.log('libraryObj');
+                //self.log(libraryObj);
+                //var libraryHtml = libraryObj.html || libraryObj.blocks;
+                if (libraryObj)
+                    //self.html(libraryObj, selectorParams, args);
+                    self.run(libraryObj, selectorParams, args);
+
+
+                //self.blocks(libraryObj, selectorParams, args); // TODO warning potential infinite loop (if string)
+                else
+                    self.log('library component not found: ' + params);
+            } else {
+                self.run(params, selectorParams, args);
+                //self.run(params, selectorParams, args);
+                //var libraryHtml = params.html || params.app.html;
+                /* // can a library component be an object?
+                if (params.setup) args = self.extend(args, params.setup); // or params.args?
+                if (params.parts) self.extendJson(json, {parts: params.parts});
+                if (params.actions) self.extendJson(json, {actions: params.actions});
+                if (params.css) self.extendJson(json, {css: params.css});
+                if (params.data) self.extendJson(json, {data: params.data});
+                if (params.var) self.extendJson(json, {var: params.var});
+                if (params.texts) self.extendJson(json, {texts: params.texts});
+
+                self.html(params.html, selectorParams, args); // {container: container}
+                //self.do(params, selectorParams, args); */
+            }
+        }
+    };
+
+    this.uiUpdate = function (option) {
+        window.dispatchEvent(new Event('resize')); // workaround known ACE bug
+
+        //self.updateCodeEditors(); // workaround known ACE bug
+    };
+
+    this.resizeEvent = function (event) {
+        //self.log('resizeEvent');
+        for (var selector in self.resizeActions) {
+            var element = self.query(selector);
+            for (var property in self.resizeActions[selector]) {
+                if (property == 'action') {
+                    self.do(self.resizeActions[element].action, { selector: selector });
+                    //self.do(self.resizeActions[element].action, {selector: selector});
+                } else {
+                    var value = self.resizeActions[selector][property];
+                    var result = self.replaceProperties(value) || '';
+                    //$(selector).css(property, result);
+                    element.style[property] = result;
+                }
+            }
+        }
+    };
+
+
+
+    /*  var pages = {};
+        var pagesSlider;
+        
+        this.createPages = function (data) {
+            self.log('createPages');
+    
+            //backLink = (self.json.setup && self.json.setup.home && self.json.setup.home[var.mode]) ? self.json.setup.home[var.mode] : '';
+            //  class="container-fluid px-0" style="margin-top:'+self.json.setup.main.top+'"
+    
+            var pageContainer = '#pages'; // 'main > div'
+    
+            for (var pageKey in self.json.pages) {
+                params = self.json.pages[pageKey];
+                var pageRoles = (params.roles) ? String(params.roles).split(',') : undefined;
+    
+                // se il ruolo dell'utente permette la vista della pagina e se non è stata già creata
+                if (!params.roles || (pageRoles.indexOf(self.userRole()) >= 0 && document.querySelectorAll('#'+pageKey).length == 0)) { // $('#'+pageKey).length == '#'+pageKey doesn't exist
+                    
+                    //if (params.preload) {
+    
+                        params.tag = 'div';
+                        //params.id = pageKey;
+                        params.class = 'page';
+                        params.value = pageKey;
+    
+                        // the previous definition should be in layout.page
+    
+                        self.addTag(params, {container: pageContainer});
+                    //}
+    
+    
+                } else {
+                    self.log('' + self.userRole() + ' users can\'t access to the page '+pageKey);
+                }
+            }
+            
+            self.do(data);
+        }  */
+    this.pageFullScreen = function (onOff) {
+        self.log('pageFullScreen');
+        if (onOff)
+            self.addClass(document.querySelector('body'), 'fullscreen');
+
+        else
+            self.removeClass(document.querySelector('body'), 'fullscreen');
+    };
+
+    //var backLink = 'stage';
+    /* this.pageBack = function () {
+        self.gotoPage(backLink);
+        //window.location.href = '?p='+backLink;
+        //$('body').removeClass('nav-open'); // chiude menu
+    } */
+    this.link = function (link, args) {
+        /* function link() {
+            [native code]
+        } */
+        //alert(link);
+        link = self.replaceProperties(link, args);
+        window.location.href = link;
+    };
+
+    this.reload = function () {
+        location.reload();
+    };
+
+    this.gotoHomePage = function () {
+        self.gotoPage(self.homePage());
+    };
+
+    this.homePage = function () {
+        //alert('homePage');
+        if (self.json.pages) {
+            if (Object.keys(self.json.pages).length > 0) {
+                //var homeKey = Object.keys(self.json.pages).find(key => self.json.pages[key] === 'home');
+                if (self.json.pages.home)
+                    return 'home';
+
+                else
+                    return Object.keys(self.json.pages)[0];
+            } else {
+                self.log('No pages in "pages" node');
+            }
+        } else {
+            self.log('Can\'t find the "pages" node');
+        }
+    };
+
+    /*  this.activePage = function () { // to check if obsolete
+            return var.page;
+        } */
+    /*         this.slideIndex = function (id) {
+            return $('#'+id).index()+1;
+        } */
+    /*         this.slideTo = function (params) {
+            if (pagesSlider) pagesSlider.goTo(self.slideIndex(params.id));
+            $('#pages > .seq-canvas > .seq-in').addClass(params.transition);
+        } */
+    this.updateCodeEditors = function () {
+        // workaround known ACE bug:
+        // setValue doesn't work if editor is hidden
+        // http://jsfiddle.net/e4r7byLn/
+        var elements = document.querySelectorAll('.ace_editor');
+        if (elements) {
+            elements.forEach(function (element, index) {
+                var editor = ace.edit(element);
+                editor.renderer.updateFull(true);
+                //AceColorPicker.load(ace, editor);
+                //AceColorPicker.load(ace, editor); // works after some ms
+            });
+        }
+    };
+
+    this.gotoPage = function (pageId, fromHash) {
+        self.log('page'); // changePage
+        self.log('pageId');
+        self.log(pageId);
+        self.log('fromHash');
+        self.log(fromHash);
+        //self.log("var.page");
+        //self.log(var.page);
+        if (pageId) {
+
+            if (self.json.pages) {
+                if (self.json.pages[pageId]) {
+                    var page = self.json.pages[pageId];
+
+                    if (pageId !== self.json.setup.page.id || fromHash !== self.json.setup.page.hash) {
+
+                        if (fromHash) {
+                            //var.pagePath = fromHash; // obsolete
+                            self.json.setup.page.hash = fromHash;
+                        } else {
+                            //delete var.pagePath;
+                            delete self.json.setup.page.hash;
+                        }
+
+                        //var.page = pageId; // activePage
+                        //var newHash = pageId;
+                        //if (!fromHash) window.location.hash = newHash;
+                        var fullScreen = self.json.pages[pageId].fullscreen || false;
+                        //self.pageFullScreen(fullScreen);
+                        var pageRoles = (page.roles) ? String(page.roles).split(',') : undefined;
+
+                        if (self.params.d || !page.roles || pageRoles.indexOf(self.userRole()) >= 0) {
+
+                            if (pageId !== self.json.setup.page.id) {
+
+                                /* self.out({
+                                    "class": "page",
+                                    "data-value": self.json.setup.page.id,
+                                    "transition": "fadeOutLeft"
+                                }); */
+                                self.json.setup.page.id = pageId;
+                                self.json.setup.page.title = page.title;
+                                self.json.setup.page.roles = page.roles;
+
+                                /*                                 // TO DO: don't change document title and description
+                                
+                                                                // window title
+                                                                var documentTitle = self.json.setup.title;
+                                                                if (page.title)
+                                                                    documentTitle += ' ' + self.text(page.title);
+                                                                var documentDescription = self.json.setup.description || '';
+                                                                if (documentTitle)
+                                                                    document.title = documentTitle;
+                                                                if (document.querySelector('meta[name="description"]'))
+                                                                    document.querySelector('meta[name="description"]').setAttribute("content", documentDescription); */
+                                //$('title').text(windowTitle);
+                                // change page
+                                self.hide({
+                                    "class": "page"
+                                });
+                                self.in({
+                                    "class": "page",
+                                    "data-value": pageId,
+                                    "transition": "fadeIn"
+                                });
+
+                                /* $('.page').hide();
+                                $('.page[data-value='+pageId+']').fadeIn(); */
+                                //self.resizeEvent();
+                                self.uiUpdate(); // resize event trigger
+
+
+
+
+
+
+
+
+
+                                /* // page back icon
+                                    if (page.back) {
+                                    backLink = page.back;
+                                    $('#headerLeftIcons').show((page.back));
+                                } else {
+                                    $('#headerLeftIcons').hide();
+                                } */
+                            }
+
+                            if (page.update) { // obsolete
+                                self.do(page.update); //, {container: '.page[data-value='+pageId+']'}); 
+
+                                //self.do(page.update); //, {container: '.page[data-value='+pageId+']'}); 
+                            }
+
+                            if (page.init) self.do(page.init);
+
+                            self.log(page);
+                            if (page.on)
+                                self.on(page.on, { selector: '.page[data-value=' + pageId + ']' });
+
+                            //$('body').removeClass('nav-open'); // chiude menu
+                            //$('.offcanvas-collapse').removeClass('open');   
+                        } else {
+                            if (self.userRole() == 'guest') {
+                                /* self.do({
+                                    "login": {
+                                        "success": {
+                                        "reload": true
+                                        }
+                                    }
+                                }); */
+                            } else {
+                                self.alert('Non hai i privilegi per accedere a questa pagina');
+                            }
+
+                        }
+                    } else {
+                        // pagina non trovata
+                    }
+                } else {
+                    self.log('Can\'t find the page "' + pageId + '"');
+                }
+            } else {
+                self.log('Can\'t find the main node "pages"');
+            }
+        } else {
+            return self.json.setup.page;
+        }
+    };
+
+    var alertInterval;
+
+    this.getTime = function (ms) {
+        var sec = parseInt(ms / 1000);
+        var min = parseInt(sec / 60);
+        sec = sec - min * 60;
+        if (min < 10) min = '0' + min;
+        if (sec < 10) sec = '0' + sec;
+        return min + ':' + sec;
+    };
+
+    this.sortablejs = function (params, selectorParams, args) {
+        let container = self.selector(params.selector || params.container, undefined, true) || self.selector(selectorParams, undefined, true);
+        let query = self.query(container);
+        self.log('container');
+        self.log(container);
+        self.log('query');
+        self.log(query);
+        var sortable = Sortable.create(query);
+    };
+
+    this.alert = function (params, args) {
+        /* self.log('alert');
+        self.log('params');
+        self.log(params);
+        self.log('args');
+        self.log(args); */
+        var paramsReplaced = self.cloneObject(params);
+
+        //paramsReplaced = self.replaceProperties(paramsReplaced, args);
+        //self.log('paramsReplaced');
+        //self.log(paramsReplaced);
+        if (paramsReplaced) {
+            if (paramsReplaced.do && paramsReplaced.do !== 'fire') {
+                return Swal[paramsReplaced.do](params);
+                // more info on https://sweetalert2.github.io/#methods
+            } else {
+                if (typeof paramsReplaced == 'string') paramsReplaced = self.text({ string: paramsReplaced, args: args }); // verify
+
+
+
+                //self.log('paramsReplaced string replaced');
+                //self.log(paramsReplaced);
+                if (typeof paramsReplaced == 'number') paramsReplaced = String(paramsReplaced); // avoid bug
+                if (paramsReplaced.title !== undefined) paramsReplaced.title = self.text({ string: paramsReplaced.title, args: args });
+
+                //self.log('paramsReplaced2');
+                //self.log(paramsReplaced);
+                if (paramsReplaced.html && typeof paramsReplaced.html == 'string') paramsReplaced.html = self.replaceProperties(paramsReplaced.html, args);
+                if (paramsReplaced.text !== undefined) paramsReplaced.text = self.text({ string: paramsReplaced.text, args: args });
+                //self.log('paramsReplaced string replaced 2');
+                if (paramsReplaced.inputValue) paramsReplaced.inputValue = self.text({ string: paramsReplaced.inputValue, args: args });
+
+                //if (paramsReplaced.html) paramsReplaced.html = self.text({string: paramsReplaced.html, args: args}); // verify
+                if (paramsReplaced.cancelButtonText) paramsReplaced.cancelButtonText = self.text({ string: paramsReplaced.cancelButtonText, args: args });
+                if (paramsReplaced.confirmButtonText) paramsReplaced.confirmButtonText = self.text({ string: paramsReplaced.confirmButtonText, args: args });
+                if (paramsReplaced.denyButtonText) paramsReplaced.denyButtonText = self.text({ string: paramsReplaced.denyButtonText, args: args });
+                //if (paramsReplaced.showConfirmButton) paramsReplaced.showConfirmButton = self.text({string: paramsReplaced.showConfirmButton, args: args});
+                if (paramsReplaced.inputPlaceholder) paramsReplaced.inputPlaceholder = self.text({ string: paramsReplaced.inputPlaceholder, args: args });
+                if (paramsReplaced.validationMessage) paramsReplaced.validationMessage = self.text({ string: paramsReplaced.validationMessage, args: args });
+                //if (paramsReplaced.inputOptions) paramsReplaced.inputOptions = self.text({string: paramsReplaced.inputOptions, args: args});
+                if (paramsReplaced.footer) {
+                    paramsReplaced.footer = self.text({ string: paramsReplaced.footer, args: args });
+                }
+
+                //if (paramsReplaced.upload) alert('paramsReplaced.upload: '+paramsReplaced.upload);
+                if (paramsReplaced.upload) {
+                    paramsReplaced.html = '<form class="box" method="post" action="" enctype="multipart/form-data"><div class="drop-zone"><div class="drop-zone-caption">' + self.text('dragAndDropFiles') + '</div><span class="btn btn-primary btn-file" style="position: relative"><span>' + self.text('chooseFiles') + '</span><input type="file" accept=".ply, .obj, .stl" class="drop-zone-file" name="files[]"></span></div></form> ';
+                    // <img src="" alt="" style="background:#333" width="100" height="100" id="hidden-img" />
+                    //if (paramsReplaced.onUpload) var.onUpload = paramsReplaced.onUpload;
+                    //var.uploadingTarget = paramsReplaced.uploadingTarget;
+                }
+
+                //self.log('paramsReplaced3');
+                //self.log(paramsReplaced);
+                alertObj.confirm = paramsReplaced.confirm; // deprecated
+                alertObj.cancel = paramsReplaced.cancel; // deprecated
+                alertObj.deny = paramsReplaced.deny; // deprecated
+                alertObj.on = paramsReplaced.on;
+                alertObj.id = paramsReplaced.id;
+                delete paramsReplaced.on;
+
+
+
+                var alertHtml = paramsReplaced.html || paramsReplaced.blocks;
+                if (alertHtml)
+                    paramsReplaced.html = " ";
+
+                var swalParams = self.replaceProperties(paramsReplaced, args);
+
+                // animate
+                if (paramsReplaced.animate) {
+                    var animationIn = paramsReplaced.animate.in || paramsReplaced.animate;
+                    var animationOut = paramsReplaced.animate.out || paramsReplaced.animate;
+                    if (paramsReplaced.animate.in)
+                        animationIn = paramsReplaced.animate.in.transition || paramsReplaced.animate.in;
+                    if (paramsReplaced.animate.out)
+                        animationOut = paramsReplaced.animate.out.transition || paramsReplaced.animate.out;
+                    swalParams.showClass = {
+                        popup: 'animate__animated animate__faster animate__animated animate__' + animationIn
+                    };
+                    swalParams.hideClass = {
+                        popup: 'animate__animated animate__faster animate__animated animate__' + animationOut
+                    };
+                }
+
+                var customIcon;
+                if (swalParams.icon) {
+                    //swalParams.icon = self.replaceProperties(swalParams.icon, args);
+                    if (typeof swalParams.icon !== 'string') {
+                        customIcon = self.cloneObject(swalParams.icon);
+                        delete swalParams.icon;
+                    }
+                    /* var swalIcons = []; //"warning", "error", "success", "info", "question"];
+                    if (swalIcons.indexOf(params.icon)<0) {
+                        customIcon = params.icon;
+                        
+                        //if (!params.customClass) params.customClass = {};
+                        //params.customClass.icon = "customIcon";
+                    } */
+                }
+
+
+
+                //if (swalParams.showConfirmButton) delete swalParams.showConfirmButton;
+                // swalParams.update = function() {
+                //     self.log('swalParams.update');
+                //     self.log(var.updateSwal);
+                // }
+                // onRender is obsolete
+                /* swalParams.onRender = function () {
+                    startUploadListeners({
+                        container: '.drop-zone',
+                        onUpload: params.onUpload,
+                        path: params.path
+                        //uploadingTarget: var.uploadingTarget
+                        //onError:
+                    });
+                }
+*/
+                delete swalParams.blocks;
+                delete swalParams.onUpload;
+                delete swalParams.upload;
+
+                if (swalParams.confirm) delete swalParams.confirm;
+                if (swalParams.cancel) delete swalParams.cancel;
+                if (swalParams.timerProgressBar) {
+                    swalParams.onBeforeOpen = function () {
+                        //Swal.showLoading(); // rimuove i bottoni
+                        alertInterval = setInterval(() => {
+                            const content = Swal.getContent();
+                            if (content) {
+                                const b = content.querySelector('b');
+                                if (b) {
+                                    b.textContent = self.getTime(Swal.getTimerLeft());
+                                }
+                            }
+                        }, 100);
+                    };
+                    swalParams.onClose = function () {
+                        clearInterval(alertInterval);
+                    };
+                }
+
+                //self.log('swalParams');
+                //self.log(swalParams);
+                Swal.fire(swalParams).then((result) => {
+                    //self.log('alert result');
+                    //self.log(result);
+                    // TO DO: if (!result) result = {} to avoid errors  
+                    var alertResult = result.value;
+
+                    if (alertObj.on) {
+                        if (alertObj.on.value && result.value) {
+                            //if (alertObj.id) alertObj.values[alertObj.id] = result.value;
+                            if (alertObj.id) alertValues[alertObj.id] = result.value;
+                            alertValues.value = result.value;
+                            setTimeout(function () {
+                                alertObj.on.value = self.replacePropertyWithPrefix(alertObj.on.value, 'alert', alertValues);
+                                //alertObj.on.value = self.replaceProperty(alertObj.on.value, 'alert', result);
+                                self.do(alertObj.on.value, undefined, result.value); // TO DO: remove result.value once removed all {result}
+
+                                //self.do(alertObj.on.value, result.value); // TO DO: remove result.value once removed all {result}
+                            }, 500);
+                        }
+                        if (alertObj.on.isConfirmed && result.isConfirmed) {
+                            if (alertObj.id) alertValues[alertObj.id] = result.isConfirmed;
+                            alertObj.on.isConfirmed = self.replacePropertyWithPrefix(alertObj.on.isConfirmed, 'alert', alertValues);
+                            alertObj.on.isConfirmed = self.replacePropertyWithPrefix(alertObj.on.isConfirmed, 'alert', result);
+                            self.do(alertObj.on.isConfirmed, undefined, result.value); // TO DO: remove result.value once removed all {result}
+
+                            //self.do(alertObj.on.isConfirmed, result.value); // TO DO: remove result.value once removed all {result}
+                        }
+                        if (alertObj.on.isDenied && result.isDenied) {
+                            alertObj.on.isDenied = self.replacePropertyWithPrefix(alertObj.on.isDenied, 'alert', result);
+                            self.do(alertObj.on.isDenied, undefined, result.value); // TO DO: remove result.value once removed all {result}
+
+                            //self.do(alertObj.on.isDenied, result.value); // TO DO: remove result.value once removed all {result}
+                        }
+                        if (alertObj.on.isDismissed && result.isDismissed) {
+                            alertObj.on.isDismissed = self.replacePropertyWithPrefix(alertObj.on.isDismissed, 'alert', result);
+                            self.do(alertObj.on.isDismissed, undefined, result.dismiss); // TO DO: remove result.value once removed all {result}
+
+                            //self.do(alertObj.on.isDismissed, result.dismiss); // TO DO: remove result.value once removed all {result}
+                        }
+
+                        console.log('alertValues');
+                        console.log(alertValues);
+
+
+                    } else {
+                        /* if (result.isConfirmed) {
+                            self.do(alertObj.confirm, result.value);
+                        } else if (result.isDenied) {
+                            self.do(alertObj.deny, result.value);
+                        } else if (result.dismiss === Swal.DismissReason.cancel) {
+                            self.do(alertObj.cancel, result.value);
+                        } else if (result.dismiss === Swal.DismissReason.timer) {
+                            self.log('Alert closed by the timer');
+                        } */
+                    }
+
+                    /*
+
+                    Reason	Description	Related configuration
+                    Swal.DismissReason.backdrop	The user clicked the backdrop.	allowOutsideClick
+                    Swal.DismissReason.cancel	The user clicked the cancel button.	showCancelButton
+                    Swal.DismissReason.close	The user clicked the close button.	showCloseButton
+                    Swal.DismissReason.esc	The user clicked the Esc key.	allowEscapeKey
+                    Swal.DismissReason.timer	The timer ran out, and the alert closed automatically.	timer
+
+                    */
+                });
+
+                if (alertHtml)
+                    self.do(alertHtml, { selector: '#swal2-html-container' });
+
+                //self.log('customIcon');
+                //self.log(customIcon);
+                if (customIcon) {
+                    /* self.icons({
+                        "class": "icon",
+                        "svg": customIcon
+                    }, {container: '.swal2-icon'}); */
+                    self.do(customIcon, { selector: '.swal2-icon' });
+                    //self.addTag(customIcon, {container: '.swal2-icon'}); // check
+                    self.css({
+                        selector: '.swal2-icon',
+                        style: {
+                            'border': '0px solid transparent'
+                        }
+                    });
+                    self.show({
+                        selector: '.swal2-icon'
+                    });
+                    /* $('.swal2-icon').css({
+                        'border': '0px solid transparent'
+                    });
+                    $('.swal2-icon').show(); */
+                }
+
+                if (swalParams.on && swalParams.on.init) // to be repeated in each function
+                    self.do(swalParams.on.init);
+                //self.do(swalParams.on.init);
+            }
+        }
+    };
+
+    /*   var startUploadListeners = function (params) { // da FIXO
+            self.log('startUploadListeners');
+            var.upload = params;
+            var obj = $(params.container);
+            self.log(params);
+            obj.on('dragenter', function (e) {
+                e.stopPropagation();
+                e.preventDefault();
+                $(this).css('border', '2px solid #0B85A1');
+            });
+            obj.on('dragover', function (e) {
+                    e.stopPropagation();
+                    e.preventDefault();
+            });
+            
+            $(document).on('dragenter', function (e) {
+                e.stopPropagation();
+                e.preventDefault();
+            });
+            $(document).on('dragover', function (e) {
+                e.stopPropagation();
+                e.preventDefault();
+                obj.css('border', '2px dotted #0B85A1');
+            });
+            $(document).on('drop', function (e) {
+                e.stopPropagation();
+                e.preventDefault();
+            });
+            // automatically submit the form on file select
+    
+            obj.on('drop', function (e) {
+                    $(this).css('border', '2px dotted #0B85A1');
+                    e.preventDefault();
+                    var files = e.originalEvent.dataTransfer.files;
+                
+                    //We need to send dropped files to firebase
+                    handleFileUpload(files);
+            });
+            $(params.container+'-file').on('change', function (e) {
+                var files = $(params.container+'-file')[0].files;
+                self.log(params.container+'-file');
+                self.log(files)
+                handleFileUpload(files);
+            });
+    
+        } */
+    /*     this.uploadFileNameAndType = function(params){
+            self.log('uploadFileNameAndType');
+            self.log(params);
+            
+            var fileArr = params.fileName.split('.');
+            var.upload.fileName = params;
+            var.upload.fileType = fileArr[1].toLowerCase();
+            if (!$('.swal2-act').length) $('.swal2-modal').append('<div class="swal2-act"></div>');
+            if (var.upload.fileType == 'ply') {
+                $('.swal2-act').css({'display':'none'});
+            } else {
+                $('.swal2-act').css({'display':'block'});
+                $('.swal2-act').append('<button onclick=\"app.onUploadConfirm()\" type=\"button\" class=\"swal2-confirm swal2-styled\" aria-label=\"\" style=\"display: inline-block; border-left-color: rgb(48, 133, 214); border-right-color: rgb(48, 133, 214);\">'+self.text('btnImport')+'</button>');
+            }
+        } */
+    /*     var handleFileUpload = function(files) {
+            self.log('handleFileUpload');
+            self.log(files);
+            self.log('var.upload');
+            self.log(var.upload);
+            //var auth0Id = fixo.getAuth0Id();
+            // Swal.close(); // chiusura popup
+            for (var i = 0; i < files.length; i++) {
+                var fd = new FormData();
+                fd.append('file', files[i]);
+                if (!files[i].name.endsWith('png')) var.upload.fileTimestamp = self.getTimestamp();
+    
+                self.fireBaseUpload({
+                    'file': files[i], //base64toBlob(files),
+                    'timestamp': var.upload.fileTimestamp,
+                    'path': var.user.uid+'/' || '' //auth0Id+'/files/images' //path_to_where_you_to_store_the_file
+                }, function (data) {
+                    self.log('data');
+                    self.log(data);
+                    if (!data.error) {
+                        //if (data.progress && data.progress == 0) $('.swal2-actions').append('<span class="prog" style="font-size:48px;font-weight:bolder"></span>');
+                        if (data.progress >= 0 && data.progress <= 100) {
+                            //progress update to view here
+                            // self.log('Uploading file');
+                            // self.log(var.uploadingTarget);
+                            $('#msgFooter').html('<span>'+data.progress+'%</span>')
+                        }
+                        if (data.progress == 100) {
+                            //$(var.uploadingTarget).removeClass('pulseFade');
+                            // Swal.close();
+    
+                            if (data.fileExt !== 'png'){
+                                self.log('diverso da png');
+                                $('.drop-zone-file').attr('accept','.png');
+                                var.upload.data = data;
+                            }
+    
+                            if (var.upload.onUpload) self.do(var.upload.onUpload, data);
+                        }
+                    } else {
+                        //$(var.uploadingTarget).removeClass('pulseFade');
+                        self.log(data.error + ' Firebase image upload error');
+                    }
+                });
+            }
+        }; */
+    /*     var uploadDone = function (data) {
+            self.log('uploadDone');
+            // download URL here "data.downloadURL"
+            var auth0Id = fixo.getAuth0Id();
+            var storageRef = firebase.storage().ref();
+            var imageRef = storageRef.child(auth0Id+'/files/images/'+data.fileName);
+            // Get the download URL
+            imageRef.getDownloadURL().then(function(url) {
+                self.do(var.onUpload, url);
+                // Insert url into an <img> tag to "download"
+            }).catch(function(error) {
+                self.log(error.code);
+                // A full list of error codes is available at
+                // https://firebase.google.com/docs/storage/web/handle-errors
+    
+                switch (error.code) {
+                case 'storage/object_not_found':
+                    // File doesn't exist
+                    break;
+    
+                case 'storage/unauthorized':
+                    // User doesn't have permission to access the object
+                    break;
+    
+                case 'storage/canceled':
+                    // User canceled the upload
+                    break;
+    
+                case 'storage/unknown':
+                    // Unknown error occurred, inspect the server response
+                    break;
+                }
+            });
+        } */
+    this.findKey = function (obj, key) {
+        return obj.filter(function (item) {
+            return Boolean(item[key]);
+        });
+    };
+
+    /*     this.fireBaseUpload = function(parameters, callBackData) {
+            self.log('fireBaseUpload');
+            self.log('parameters');
+            self.log(parameters);
+            
+            // Get a reference to the storage service, which is used to create references in your storage bucket
+            var storageRef = firebase.storage().ref();
+            
+            
+            var file = parameters.file;
+            var path = parameters.path;
+            var timestamp = parameters.timestamp;
+            //var path = var.user.uid; // non riesco a passare la path come parametro da olo.app.json così come l'errore funzione onUpload
+    
+            
+            self.log('file');
+            self.log(file);
+            self.log('timestamp');
+            self.log(timestamp);
+            self.log('path');
+            self.log(path);
+    
+            //Riga originale pre-modifica nome file
+    // 		    var fullPath = path + '/' + file.name;
+    
+            // expected parameters to start storage upload
+            var metaData = {'contentType': file.type};
+            var fileSize = formatBytes(file.size); // get clean file size
+            var fileType = file.type;
+            var fileName = file.name;
+            var fileExt = fileName.split('.')[1];
+            
+            self.log(metaData);
+            self.log(fileSize);
+            self.log(fileType);
+            self.log(fileName);
+            self.log(fileExt);
+            var modFileName = timestamp+'.'+fileExt;
+    
+            //var fullFilePath = storageRef.child(path+timestamp+'-'+fileName);
+            var fullFilePath = storageRef.child(path+modFileName);
+            self.log('fullFilePath');
+            self.log(fullFilePath);
+    
+            var nm = fileName.split('.');
+            var name = nm[0];
+    
+            self.log('nm');
+            self.log(nm);
+            self.log('name');
+            self.log(name);
+            
+    
+            
+            // Modifica file name generato
+            // var name = generateRandomString(16); //(location function below)
+            // var n = name+'.'+file.type.replace('image/','');
+            // var fullPath = path + '/' + n;
+            
+            
+            //Riga originale pre-modifica nome file
+    // 		    var n = file.name;
+            
+            
+            // generate random string to identify each upload instance
+            //name = generateRandomString(12); //(location function below)
+            
+    //		    var uploadFile = storageRef.child(parameters.path).put(file, metaData);
+            var uploadFile = fullFilePath.put(file, metaData);
+        
+            // first instance identifier
+            //callBackData({id: name, fileSize: fileSize, fileType: fileType, fileName: n}); 20200724
+            callBackData({id: timestamp.toString(), fileSize: fileSize, fileType: fileType, fileName: modFileName, fileExt: fileExt}); // fileName: fileName //id: name
+        
+            uploadFile.on('state_changed', function (snapshot) {
+                var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
+                progress = Math.floor(progress);
+                self.log('progress');
+                self.log(progress);
+                callBackData({
+                        progress: progress,
+                        element: timestamp.toString(),
+                        //element: name,
+                        fileSize: fileSize,
+                        fileType: fileType,
+                        fileName: modFileName,
+                        fileExt: fileExt});
+                        //fileName: fileName
+            }, function (error) {
+                callBackData({error: error});
+            }, function () {
+                var downloadURL = uploadFile.snapshot.downloadURL;
+                callBackData({
+                        downloadURL: downloadURL,
+                        element: timestamp.toString(),
+                        //element: name,
+                        fileSize: fileSize,
+                        fileType: fileType,
+                        fileName: modFileName,
+                        fileExt: fileExt});
+                        //fileName: fileName
+            });
+        } */
+    var formatBytes = function (bytes, decimals) {
+        if (bytes == 0) return '0 Byte';
+        var k = 1000;
+        var dm = decimals + 1 || 3;
+        var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+        var i = Math.floor(Math.log(bytes) / Math.log(k));
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+    };
+
+    this.userRole = function () {
+        switch (Boolean(self.user('uid'))) {
+            case true:
+                return 'user'; // user logged in
+                break;
+            case false:
+                return 'guest';
+                break;
+        }
+    };
+
+    this.userIn = function () {
+        //var user = firebase.auth().currentUser;
+        //if (user.emailVerified) {
+        return Boolean(self.user('uid'));
+    };
+
+    this.userOut = function () {
+        return (!self.user('uid'));
+    };
+
+    this.user = function (param) {
+        /*         self.log('user');
+                self.log(auth); */
+        if (auth && auth.currentUser)
+            if (param == 'firstName')
+                return self.firstName(auth.currentUser['displayName']);
+            else if (auth.currentUser[param])
+                return auth.currentUser[param];
+            else if (!param)
+                return auth.currentUser;
+
+            else
+                return undefined;
+
+        else
+            return undefined;
+    };
+
+    this.firstName = function (nameParam) {
+        var firstNameStr = (nameParam) ? nameParam.split(' ')[0] : '';
+        return firstNameStr;
+    };
+
+    this.userUid = function () {
+        if (auth) return auth.currentUser.uid;
+        else return undefined;
+    };
+
+    this.userVerified = function () {
+        if (auth) return auth.currentUser.emailVerified;
+        else return undefined;
+    };
+
+    /*         this.value = function (valueParams) {
+            if (valueParams.string)
+                return valueParams.string
+            else if (valueParams.function)
+                //return self.doFunctionByName(valueParams.function, window, '');
+        }
+    */
+    this.thunkableMessage = function (message, callback) {
+        if (callback) callback(message);
+    };
+
+    this.onMessage = {
+        alert: "test"
+    };
+
+    this.processMessage = function (message) {
+        self.alert('processMessage');
+        self.do(self.onMessage, message);
+        //self.do(self.onMessage, undefined, message);
+    };
+
+    this.thunkable = function (params, args) {
+        if (params.postMessage) {
+            var message = self.replaceProperties(params.postMessage, args);
+            if (message) {
+                try {
+                    ThunkableWebviewerExtension.postMessage(message);
+                } catch (error) {
+                }
+            }
+            else
+                self.log('in function "thunkable" "postMessage" parameter is wrong');
+        }
+        if (params.receiveMessage) {
+            self.onMessage = params.receiveMessage;
+            try {
+                ThunkableWebviewerExtension.receiveMessage(self.processMessage);
+            } catch (error) {
+            }
+        }
+
+    };
+
+    /*     var ThunkableWebviewerExtension = (function () {
+            const postMessageToWebview = (message) => {
+                if (window.ReactNativeWebView) {
+                    window.ReactNativeWebView.postMessage(message);
+                } else {
+                    window.parent.postMessage(message, '*');
+                }
+            };
+    
+            const getReceiveMessageCallback = (fxn, hasReturnValue) => (event) => {
+                if (typeof fxn === 'function') {
+                    if (event.data) {
+                        let dataObject;
+                        try {
+                            dataObject = JSON.parse(event.data);
+                        } catch (e) {
+                            // message is not valid json
+                        }
+                        if (dataObject && dataObject.type === 'ThunkablePostMessage' && hasReturnValue) {
+                            fxn(dataObject.message, (returnValue) => {
+                                const returnMessageObject = { type: 'ThunkablePostMessageReturnValue', uuid: dataObject.uuid, returnValue };
+                                postMessageToWebview(JSON.stringify(returnMessageObject));
+                            });
+                        } else if (!hasReturnValue && (!dataObject || dataObject.type !== 'ThunkablePostMessage')) {
+                            fxn(event.data);
+                        }
+                    }
+                }
+            };
+    
+            return {
+                postMessage: postMessageToWebview,
+                receiveMessage: function (fxn) {
+                    const callbackFunction = getReceiveMessageCallback(fxn, false);
+                    document.addEventListener('message', callbackFunction, false);
+                    window.addEventListener('message', callbackFunction, false);
+                },
+                receiveMessageWithReturnValue: function (fxn) {
+                    const callbackFunction = getReceiveMessageCallback(fxn, true);
+                    document.addEventListener('message', callbackFunction, false);
+                    window.addEventListener('message', callbackFunction, false);
+                },
+            };
+        })(); */
+    this.extendFunctions = function (functions) {
+        // change it. don't call self.function
+        for (var name in functions) {
+            if (functions[name].js) {
+                try {
+                    // create or override function
+                    self.functions[name] = new Function(functions[name].js);
+                } catch (error) {
+                    console.log('ERROR creating function %c' + name, 'color:orange;');
+                    self.log(functions[name].js);
+                    self.log(error.message);
+                    // error.column is wrong
+                    /* let col = error.column -17;
+                    console.log(
+                        functions[name].js.substring(0,col)
+                        + '%c' + functions[name].js.substring(col, col+1)
+                        + '%c' + functions[name].js.substring(col+1), 'color:orange; font-weight:bold', 'color:#ddd')
+                    console.log('%c' + error.message, 'color:orange;'); */
+                    // since the script is in one row, error.columns is the exact position of the error
+                }
+            } else {
+                self.log(name + ' function requires js property');
+            }
+        }
+    };
+
+
+    this.function = function (obj, args) {
+        /* console.log('function');
+        console.log(params);
+        console.log('args');
+        console.log(args); */
+        // TO DO: add "name" parameter to make the js function permanently available in self.methods[name]
+        // https://stackoverflow.com/questions/49125059/how-to-pass-parameters-to-an-eval-based-function-injavascript
+        //app[func].apply( this, args ); // or app[func]( ...args ); // ES6 (2015)
+        // https://stackoverflow.com/questions/1316371/converting-an-array-to-a-function-arguments-list
+        //args = self.replaceProperties(args); // needed?
+        //try {
+        if (obj.name && obj.js) {
+            // create or replace function
+            self.functions[obj.name] = new Function(obj.js);
+        } else if (obj.name && !obj.js) {
+            if (self.functions[obj.name]) {
+                // execute function
+                if (!obj.arguments || !Array.isArray(obj.arguments)) obj.arguments = [obj.arguments];
+                try {
+                    return self.functions[obj.name](...obj.arguments);
+                    //return self.functions[obj.name].apply(null, obj.arguments);
+                } catch (error) {
+                    console.log('ERROR in function %c' + obj.name, 'color:orange;');
+                    console.log('obj');
+                    console.log(obj);
+                    console.log('function');
+                    console.log(self.json.functions[obj.name]);
+                    console.log(error.message);
+                }
+            } else {
+                console.log('ERROR function undefined %c' + obj.name, 'color:orange;');
+            }
+            //return self.functions[obj.name](...obj.arguments); // also args?
+        } else if (obj.js) {
+            // execute js code as a function
+            if (obj.arguments && Array.isArray(obj.arguments)) {
+                return new Function(obj.js).call(null, obj.arguments);
+                //return new Function( obj.js ).apply(this, obj.arguments );
+            } else {
+                return new Function(obj.js).call(null, obj.arguments);
+            }
+        }
+        /* } catch (error) {
+            self.log('function ERROR');
+            self.log(error);
+            self.log(obj);
+            return false
+        } */
+    };
+
+
+    this.eval = this.js = function (code, args) {
+        /* self.log('js');
+        self.log(code);
+        self.log(args); */
+        /* if (Array.isArray(code)) {
+            let codeCombined = '';
+            for (var codePart of code) codeCombined += self.replaceProperties(codePart, args);
+            try {
+                return eval(code);
+            } catch (error) {
+                self.log('JS error');
+                self.log(error);
+                return code;
+            } */
+        /*  if (typeof code == 'object') {
+    
+            } else { */
+
+        code = self.replaceProperties(code, args);
+        /* self.log('args');
+        self.log(args); */
+        try {
+            //return new Function( code ).call(null, args);
+            return eval(code);
+        } catch (error) {
+            /* self.log('javascript catch on "'+ codeString + '"');
+            self.log('error');
+            self.log(error);
+            self.log('codeString');
+            self.log(codeString);
+            self.log('args');
+            self.log(args);
+            return false */
+            return code;
+        }
+        //}
+    };
+
+    /*    this.compile = function (obj, args) {
+            // functions e addTag potrebbero essere eseguiti da una stessa funzione
+            // in reatà addTag è la funzione che andrebbe lanciata quando la chiave
+            // dell'azione è tra i tag html
+    
+            if (obj !== undefined) {
+                var result;
+                if (typeof obj == 'object')
+                    result = self.actionResult(obj, args);
+                result = self.replaceProperties(obj, args);
+                if (result == 'undefined')
+                    return undefined;
+                else if (typeof result == 'object') // Array is also an object type
+                    return self.do(result, args);
+                else if (typeof result == 'function')
+                    return result(args);
+                else {
+                    return result;
+                }
+            } else {
+                return undefined;
+            }
+        } */
+    this.if = function (params, selectorParams, args) {
+
+        // add array
+        if (typeof params == 'object') {
+
+            var conditionString = 'if';
+            var condition;
+
+            if (params.is !== undefined) {
+                if (typeof params.is == 'string') {
+                    let isReplaced = self.replaceProperties(params.is, args, true);
+                    self.log(isReplaced, 'grey');
+                    try {
+                        condition = Boolean(eval(isReplaced)); // remove undefined values
+                        self.log(isReplaced + ' is ' + condition, 'grey');
+                    } catch (error) {
+                        self.log(isReplaced, 'red');
+                        self.log('"if" condition wrong', 'red');
+                        self.log(error, 'red');
+                    }
+                    conditionString += ' is ' + params.is;
+                } else if (Array.isArray(params.is)) {
+                    let i = 0;
+                    params.is[i];
+                    switch (params.is[i + 1]) {
+                        case '=': condition = Boolean(eval(params.is[i] + '===' + params.is[i + 2])); break;
+                    }
+                }
+            } else if (params.not !== undefined) {
+                condition = (!Boolean(eval(self.replaceProperties(params.not, args, true)))); // remove undefined values
+                if (typeof params.not == 'string') conditionString += ' not ' + params.not;
+            } else if (params.regexp) {
+                const regex = new RegExp(params.regexp);
+                condition = Boolean(regex.test(params.string));
+            } else if (params.isArray) {
+                condition = self.isArray(params.isArray);
+                conditionString += 'isArray ' + params.isArray;
+            } else if (params.exist) {
+                let elementExist = self.element({ path: params.exist });
+                condition = (elementExist);
+                self.log('"if" exist ' + params.exist, 'grey');
+            } else if (params.value && params.in) {
+                //let arr = self.replaceProperties(params.in, args, true);
+                //condition = (arr.indexOf(self.replaceProperties(params.value)) >= 0);
+                condition = self.valueInJson(self.replaceProperties(params.in, args, true), self.replaceProperties(params.value));
+
+                self.log('"if" value ' + self.replaceProperties(params.value) + ' in array is ' + condition, 'grey');
+            } else if (params.key && params.in) {
+                condition = self.keyInJson(self.replaceProperties(params.in, args, true), self.replaceProperties(params.key));
+                self.log('"if" key ' + self.replaceProperties(params.key) + ' in object is ' + condition, 'grey');
+            } else {
+                let selector = self.selector(params.selector || params.container, undefined) || self.selector(selectorParams, undefined);
+                //var selector = self.selector(params.selector || params.container, selectorParams);
+                if (selector) {
+                    if (params.exist) {
+                        //var element = self.query(params.exist);
+                        //condition = Boolean(self.query(selector));
+                        condition = Boolean(self.exist(selector));
+                        conditionString += ' ' + selector + ' exist ' + params.exist;
+                    }
+                    if (params.hasClass) { // to be reviewed (self.hasClass need 1 parameter)
+                        var element = self.query(selector);
+                        condition = Boolean(self.hasClass(element, params.hasClass));
+                        conditionString += ' ' + selector + ' hasClass ' + params.hasClass;
+                    }
+                    if (params.isVisible) {
+                        var element = self.query(selector);
+                        condition = Boolean(self.isVisible(element, params.isVisible));
+                        conditionString += ' ' + selector + ' isVisible';
+                    }
+                    if (params.isHidden) {
+                        var element = self.query(selector);
+                        condition = Boolean(self.isHidden(element, params.isHidden));
+                        conditionString += ' ' + selector + ' isHidden';
+                    }
+                    if (params.inViewport) {
+                        var element = self.query(selector);
+                        condition = Boolean(self.inViewport(element, params.inViewport));
+                        conditionString += ' ' + selector + ' inViewport';
+                    }
+                    if (params.outViewport) {
+                        var element = self.query(selector);
+                        condition = Boolean(self.outViewport(element, params.outViewport));
+                        conditionString += ' ' + selector + ' outViewport';
+                    }
+                    if (params.isDisplay) {
+                        var element = self.query(selector);
+                        /* self.log('element');
+                        self.log(element); */
+                        condition = Boolean(self.isDisplay(element, params.isDisplay));
+                        conditionString += ' ' + selector + ' isDisplay ' + params.isDisplay;
+                    }
+                } else {
+                    self.log('the "if" function requires "is" or "not" parameter');
+                }
+            }
+
+            /* conditionString += ': ' + condition;
+            self.log(condition, 'grey'); */
+            if (condition)
+                if (params.then) {
+                    // self.console dovrebbe diventare così
+                    if (typeof params.then == 'object') {
+                        return self.do(params.then);
+                        //return self.do(params.then);
+                    } if (typeof params.then == 'string') {
+                        return self.replaceProperties(params.then);
+                    } else {
+                        return params.then;
+                    }
+
+                }
+                else
+                    self.log('the "if" function requires "then" parameter');
+            else if (params.else) {
+                if (typeof params.else == 'object') {
+                    return self.do(params.else);
+                    //return self.do(params.else);
+                } if (typeof params.else == 'string') {
+                    return self.replaceProperties(params.else);
+                } else {
+                    return params.else;
+                }
+            }
+        } else {
+            //self.log(Boolean(params) && params !== 'false');
+            return Boolean(self.js(params, args)); // 0.9.7
+
+            //return Boolean(eval(self.replaceProperties(params, args))) // need try
+        }
+    };
+
+    this.switch = function (params, args) {
+        //self.log('switch');
+        //self.log(params);
+        var value;
+        var answer;
+        if (params.expression)
+            value = String(self.js(params.expression, args));
+
+        else
+            self.log('"switch" function requires "expression" parameter');
+        //self.log(value);
+        if (params.cases) {
+            //self.log('params.cases[value]');
+            //self.log(params.cases[value]);
+            if (value !== undefined && params.cases[value]) {
+                if (typeof params.cases[value] == 'object')
+                    answer = self.do(params.cases[value], undefined, args);
+
+
+                //answer = self.do(params.cases[value], args);
+                else
+                    answer = params.cases[value];
+
+            } else if (params.cases['default']) {
+                self.log('default');
+                self.log(params.cases['default']);
+                if (typeof params.cases['default'] == 'object')
+                    answer = self.do(params.cases['default'], undefined, args);
+
+
+                //answer = self.do(params.cases['default'], args);
+                else
+                    answer = params.cases['default'];
+            }
+        } else {
+            self.log('"switch" function requires "cases" parameter');
+            self.log('answer');
+            self.log(answer);
+        }
+        return answer;
+    };
+
+
+    /*
+        this.varAction = this.set = function (params, args) {
+            // {name, value, operator}
+    
+            var value;
+            var operator = params.operator;
+    
+            //self.log('operator');
+            //self.log(operator);
+    
+            if (operator && args) operator = self.replaceProperties(operator, args);
+    
+    
+            //self.log('operator');
+            //self.log(operator);
+    
+            if (params.value !== undefined) { // set
+                value = self.js(params.value, args);
+                if (params.var) {
+                    self.docElement('self.json.var.'+params.var, value);
+                } else if (params.name) {
+                    var actualValue = self.docElement('self.json.var.'+params.name);
+                    if (actualValue == undefined && typeof value == 'string') actualValue = '';
+                    if (actualValue == undefined && typeof value == 'number') actualValue = 0;
+                    if (actualValue == undefined && typeof value == 'object') actualValue = {};
+                    if (operator) {
+    
+                        if (operator == '+=') actualValue += value;
+                        if (operator == '-=') actualValue -= value;
+                        if (operator == '/=') actualValue /= value;
+                        if (operator == '*=') actualValue *= value;
+                        value = actualValue;
+                                            }
+                    self.docElement('self.json.var.'+params.name, value);
+                    //self.log('self.json.var[params.name]');
+                    //self.log(self.json.var[params.name]);
+                } else {
+                    self.log('set command requires "var" parameter');
+                }
+            } else { // get
+                if (params.var) {
+                    return self.docElement('self.json.var.'+params.var);
+                } else if (params.name) {
+                    return self.docElement('self.json.var.'+params.name);
+                } else {
+                    self.log('set command requires "value" parameter');
+                }
+            }
+            //self.log('value');
+            //self.log(value);
+            self.log('var ' + params.name + ' = ' + value);
+    
+        } */
+    this.delay = function (params, selector, args) {
+        self.log('delay');
+        self.log('selector');
+        self.log(selector);
+        var duration = params.duration || 1000;
+        duration = Number(self.replaceProperties(duration, args));
+        self.log(duration);
+        if (params.do) {
+            setTimeout(function () {
+                self.do(params.do, selector, args);
+                //self.do(params.do, args, container)
+            }, duration);
+        }
+    };
+
+    this.firebasePasswordReset = function (paramEmail, paramSuccess, paramError) {
+        //firebase.auth().languageCode = 'it';
+        firebase.auth().useDeviceLanguage();
+        auth.sendPasswordResetEmail(paramEmail).then(function () {
+            // Email sent.
+            if (paramSuccess) self.do(paramSuccess);
+            //if (paramSuccess) self.do(paramSuccess);
+        }).catch(function (error) {
+            // An error happened.
+            if (paramError) self.do(paramError, undefined, error.message);
+            //if (paramError) self.do(paramError, error.message);
+        });
+    };
+
+    this.firebaseUpdateProfile = function (params, paramSuccess, paramError) {
+        self.log('firebaseUpdateProfile');
+        self.log(params);
+        auth.currentUser.updateProfile(params).then(function () {
+            // Update successful.
+            self.log('User Profile Updated Successfully');
+            if (paramSuccess) self.do(paramSuccess);
+            //if (paramSuccess) self.do(paramSuccess);
+        }).catch(function (error) {
+            // An error happened.
+            if (paramError) self.do(paramError, undefined, error.message);
+            //if (paramError) self.do(paramError, error.message);
+        });
+    };
+
+    this.firebaseRegister = function (params, success, error) {
+        if (params.email && params.password) {
+            // log the user in
+            auth.createUserWithEmailAndPassword(params.email, params.password).then(cred => {
+                self.log(cred.user);
+                //var.auth.cred = cred;
+                var user = firebase.auth().currentUser;
+                /* if (user.emailVerified) {
+                } else {
+                    self.sendEmailVerification(params);
+                } */
+                //if (params.success) self.do(params.success);
+                if (params.success) self.do(params.success);
+            }).catch(error => {
+                // Handle Errors here.
+                //if (params.error) self.do(params.error, error.message);
+                if (params.error) self.do(params.error, undefined, error.message);
+            });
+        }
+    };
+
+    this.firebaseLogin = function (params) {
+        self.log('firebaseLogin');
+        self.log(params);
+
+        if (auth) {
+            auth.signInWithEmailAndPassword(String(params.email), String(params.password)).then(cred => {
+                //var.auth.cred = cred;
+                var user = firebase.auth().currentUser;
+                //firebase.auth().languageCode = 'it';
+                if (user.emailVerified) {
+                    if (params.success) self.do(self.replaceResult(params, undefined, cred));
+                    //if (params.success) self.do(self.replaceResult(params, cred));
+                } else {
+                    self.sendEmailVerification(params);
+                }
+            }).catch(error => {
+                self.log('error.code');
+                self.log(error.code);
+                if (params.error) self.do(self.replaceResult(params, undefined, error.message));
+                //if (params.error) self.do(self.replaceResult(params, error.message));
+            });
+        } else {
+            // firebase auth non inizializzato
+        }
+    };
+
+    this.firebaseLogout = function (params) {
+        self.log('firebaseLogout');
+        firebase.auth().signOut().then(function () {
+            self.log('firebaseLogout SUCCESS');
+            self.log(params.success);
+            if (params.success) {
+                //app.stopMeeting();
+                localStorage.clear();
+                //self.do(params.success);
+                self.do(params.success);
+            }
+        }).catch(function (error) {
+            self.log('firebaseLogout ERROR');
+            self.log(error);
+            //if (params.error) self.do(params.error);
+            if (params.error) self.do(params.error);
+        });
+    };
+
+    // this.firebaseUserVerify = function (params) {
+    //     self.log('firebaseUserVerify');
+    //     self.log(params);
+    //     self.log(params.oobCode);
+    //     if (params.oobCode) self.params.codeMail = params.oobCode
+    //     self.log(self.params.codeMail);            
+    //     //self.do(data);
+    //     // inviare mail di verifica            
+    // }
+    this.sendEmailVerification = function (params) {
+        self.log('sendEmailVerification');
+        var user = firebase.auth().currentUser;
+        firebase.auth().languageCode = 'it';
+        var successAction = params.success || self.reload;
+        user.sendEmailVerification().then(function () {
+            firebase.auth().signOut();
+            self.alert({
+                //toast: true,
+                icon: "success",
+                title: "verifyingemail", // all\'indirizzo "+params.email+"
+                html: "msgverifyingemail",
+                //confirmButtonText: "Ok",
+                //showCancelButton: false,
+                showConfirmButton: false,
+                confirm: successAction
+            });
+
+        });
+    };
+
+    /*         //self.log('function');
+            params = self.replaceProperties(params, args); // -> compile
+    
+            if (typeof params == 'object') {
+                // jsonic function
+                //return self.do(params, args);
+                return self.do(params, args);
+            } else if (typeof params == 'function') {
+                // javascript function
+                return params(args);
+            } else if (typeof params == 'string') {
+                if (json.actions[params]) {
+                    var functionCompiled = self.replaceResult(json.actions[params], args); // replace {result}
+                    //functionCompiled = self.replaceProperties(functionCompiled, args);
+                    // jsonic predefined function
+                    //return self.do(functionCompiled);
+                    return self.do(functionCompiled);
+                    //return self.actionResult(json.actions[params], args);
+                } else {
+                    // javascript function name
+                    var functionName = self.docElement(params);
+                    if (functionName)
+                        if (typeof functionName == 'function') {
+                            // javascript function
+                            return functionName(args)
+                        } else {
+                            // javascript object
+                            return functionName;
+                        }
+                    else
+                        self.log('function undefined: '+ params);
+                }
+            } */
+    this.path = function (pathParams, args, separatorParam) {
+        var pathString = '';
+        var separator = separatorParam || '/';
+
+        /*  self.log('this.path');
+            self.log(pathParams);
+            self.log(args); */
+        if (typeof pathParams == 'string') {
+            pathString = self.replaceProperties(pathParams, args);
+        } else {
+            for (var index in pathParams) {
+                pathObj = pathParams[index];
+                if (pathString !== '') pathString += separator;
+                if (pathObj.string)
+                    pathString += String(pathObj.string);
+                else if (pathObj.number)
+                    pathString += Number(pathObj.number);
+                else if (pathObj.function)
+                    pathString += self.doFunctionByName(pathObj.function, window, '');
+            }
+        }
+        return pathString;
+    };
+
+
+    this.executeFunctionByName = function (functionName, context /*, arguments */) {
+        //self.log('executeFunctionByName');
+        //self.log(functionName);
+        if (functionName) {
+            var args = [].slice.call(arguments).splice(2);
+            var namespaces = functionName.split(".");
+            var func = namespaces.pop();
+            for (var i = 0; i < namespaces.length; i++) {
+                context = context[namespaces[i]];
+            }
+            if (context[func] !== undefined) {
+                return context[func].apply(context, args);
+            } else {
+                //self.log('Error: executeFunctionByName');
+                //if (functionName !== undefined) {self.log('functionName:'+functionName);}
+            }
+        } else {
+            self.log('executeFunctionByName');
+            self.log('functionName undefined');
+        }
+
+    };
+
+    this.functions = {};
+
+    this.methods = {
+        // main methods
+        run: function (params, container, args) { self.run(params, container, args); },
+        delay: function (params, container, args) { self.delay(params, container, args); },
+        ajax: function (params, container, args) { self.ajax(params, container, args); },
+        do: function (params, container, args) { self.do(params, container, args); },
+        module: function (params, container, args) { self.module(params, args); },
+        js: function (params, container, args) { self.js(params, args); },
+        function: function (params, container, args) { self.function(params, args); },
+        dispatchEvent: function (params, container, args) { self.dispatchEvent(params, args); },
+
+        // TO DO: check
+        lang: function (params, container, args) { self.lang(params, args); },
+        find: function (params, container, args) { self.find(params, args); },
+        page: function (params, container, args) { self.page(params, args); },
+
+        // DA VERIFICARE
+        //dayjs: function (params, args) {self.dayjs(params, args)},
+        //moment: function (params, args) {self.moment(params, args)},
+        //data: function (params, args) {self.data(params, args)},
+        //var: function (params, args) {self.var(params, args)},
+        //javascript: function (params, args) {self.javascript(params, args)},
+        //color: function (params, args) {self.color(params, args)},
+        //select: function (params, args) {self.select(params, args)}, 
+        // LOGIC & DATA     
+        for: function (params, container, args) { self.for(params, container, args); },
+        if: function (params, container, args) { self.if(params, container, args); },
+        switch: function (params, container, args) { self.switch(params, args); },
+        set: function (params, container, args) { self.set(params, args); },
+
+        // TO DO: check is needs to be renamed to avoid confusion with self.json.data
+        data: {
+            set: function (params, args) {
+                for (var param in params) {
+
+                    var value = params[param];
+
+                    if (value) value = self.replaceProperties(value, args);
+                    if (value && args) value = self.replacePropertyWithPrefix(value, 'result', args); // backward compatibility TO DO: remove
+
+                    self.element({ path: param, value: value });
+                }
+            },
+            get: function (params) {
+                return self.element(params);
+            },
+            delete: function (params, args) {
+                var path = self.replaceProperties(params, args);
+                alert(path);
+                self.objToDelete = self.element({ path: path });
+                delete self.objToDelete;
+            },
+            add: function (params, args) {
+                for (var param in params) {
+                    var path = self.replaceProperties(param, args);
+                    var value = self.replaceProperties(params[param], args);
+                    if (value) {
+                        var obj = self.element({ path: path }) || '';
+                        obj += String(value);
+                        self.element({ path: path, value: obj });
+                    }
+                }
+            },
+            sum: function (params, args) {
+                console.log('%cdeprecated key "sum". Use set{x: "{x}+1"}', 'color:orange');
+                console.log(params);
+                console.log(args);
+                for (var param in params) {
+                    var path = self.replaceProperties(param, args);
+                    var value = self.replaceProperties(params[param], args);
+                    if (value) {
+                        var obj = self.element({ path: path }) || 0;
+                        obj += Number(value);
+                        self.element({ path: path, value: obj });
+                    }
+                }
+            },
+            sub: function (params, args) {
+                console.log('%cdeprecated key "sub". Use set{x: "{x}+1"}', 'color:orange');
+                console.log(params);
+                console.log(args);
+                for (var param in params) {
+                    var path = self.replaceProperties(param, args);
+                    var value = self.replaceProperties(params[param], args);
+                    if (value) {
+                        var obj = self.element({ path: path }) || 0;
+                        obj -= Number(value);
+                        self.element({ path: path, value: obj });
+                    }
+                }
+            },
+            push: function (params, args) {
+                for (var param in params) {
+                    var path = self.replaceProperties(param, args);
+                    var value = self.replaceProperties(params[param], args);
+                    if (value) {
+                        var obj = self.element({ path: path }) || [];
+                        obj.push(value);
+                        self.element({ path: path, value: obj });
+                    }
+                }
+            }
+        },
+
+        // DOM
+        text: function (params, container, args) { self.text(params, container, args); }, // TO DO: -> html
+        html: function (params, container, args) { self.html(params, container, args); },
+        attr: function (params, container, args) { self.attr(params, container, args); },
+        empty: function (params, container, args) { self.empty(params, args); },
+        delete: function (params, args) {
+            var path = self.replaceProperties(params, args);
+
+            var obj = self.element({ path: path });
+            self.log(JSON.stringify(obj));
+            self.element({ path: path, delete: true });
+            // NOTE: obj = self.element non prende l'oggetto effettivo. quindi element deve contenere tutte le funzioni
+            //self.element({path: path, delete: true});
+            self.log(obj);
+        },
+        add: function (params, container, args) {
+            for (var param in params) {
+                var path = self.replaceProperties(param, args);
+                var value = self.replaceProperties(params[param], args);
+                /* self.log('value');
+                self.log(value); */
+                if (value) {
+                    var obj = self.element({ path: path }) || '';
+                    obj += String(value);
+                    self.element({ path: path, value: obj });
+                }
+            }
+        },
+        sum: function (params, container, args) {
+            for (var param in params) {
+                var path = self.replaceProperties(param, args);
+                var value = self.replaceProperties(params[param], args);
+                if (value) {
+                    var obj = self.element({ path: path }) || 0;
+                    obj += Number(value);
+                    self.element({ path: path, value: obj });
+                }
+            }
+        },
+        sub: function (params, container, args) {
+            for (var param in params) {
+                var path = self.replaceProperties(param, args);
+                var value = self.replaceProperties(params[param], args);
+                if (value) {
+                    var obj = self.element({ path: path }) || 0;
+                    obj -= Number(value);
+                    self.element({ path: path, value: obj });
+                }
+            }
+        },
+        push: function (params, container, args) {
+            for (var param in params) {
+                var path = self.replaceProperties(param, args);
+                var value = self.replaceProperties(params[param], args);
+                if (value) {
+                    var obj = self.element({ path: path }) || [];
+                    obj.push(value);
+                    self.element({ path: path, value: obj });
+                    self.log('push obj');
+                    self.log(obj);
+                }
+            }
+        },
+
+        // should go in utils.json
+        calendar: function (params, container, args) { self.calendar(params, args); }, // to check
+        array: function (params, container, args) { self.array(params, args); },
+        replace: function (params, container, args) { self.replace(params, args); },
+        shuffle: function (array) {
+            let currentIndex = array.length, randomIndex;
+            // While there remain elements to shuffle.
+            while (currentIndex != 0) {
+                // Pick a remaining element.
+                randomIndex = Math.floor(Math.random() * currentIndex);
+                currentIndex--;
+                // And swap it with the current element.
+                [array[currentIndex], array[randomIndex]] = [
+                    array[randomIndex], array[currentIndex]
+                ];
+            }
+            return array;
+        },
+
+        // should go in ui.json (or ux) module
+        alert: function (params, container, args) { self.alert(params, args); }, // change in swal2
+        offcanvas: function (params, container, args) { self.offcanvas(params, args); }, // bootstrap / obsolete
+
+        //in: function (params, container, args) {self.in(params, container, args)},  // bootstrap TO DO: replace in code with ui:in
+        out: function (params, container, args) { self.out(params, container, args); }, // bootstrap TO DO: replace in code with ui:out
+        qrcode: function (params, container, args) { self.qrcode(params, container, args); }, // obsolete TO DO: replace in code with ui:qrcode
+        hide: function (params, container, args) { self.hide(params, container, args); }, // TO DO: replace in code with ui:hide
+        show: function (params, container, args) { self.show(params, container, args); }, // TO DO: replace in code with ui:show
+        toggle: function (params, container, args) { self.toggle(params, container, args); }, // TO DO: replace in code with ui:toggle
+        sortablejs: function (params, container, args) { self.sortablejs(params, args); }, // TO DO: replace in code with ui:sortable
+        lottie: function (params, container, args) { self.lottie(params, container, args); }, // TO DO: replace in code with ui:lottie
+        chart: function (params, container, args) {
+            var selector = self.selector(container);
+            var element = self.query(selector);
+            element.innerHTML = '<canvas width="100%" height="100%"></canvas>';
+            const ctx = element.querySelector('canvas');
+            const myChart = new Chart(ctx, self.replaceProperties(params));
+        },
+
+        animate: function (params, container, args) { self.animate(params, container, args); },
+        //editor: function (params, container, args) {self.editor(params, container, args)}, // quill
+        // window.dispatchEvent(new Event('resize')); // workaround known ACE bug
+        uiUpdate: function (params, container, args) { self.uiUpdate(params, args); },
+        swiper: {
+            data: {},
+            init: function (params, selector, args) {
+                //swiperConfig.on = {};
+                setTimeout(function () {
+                    // waits the plugin... TO DO: add this function to a promise
+                    console.log('swiper inited');
+                    console.log(selector || params.selector);
+                    console.log(params.options);
+                    var swiperConfig = params.options;
+                    self.methods.swiper.data[params.name] = new Swiper(self.selector(selector || params.selector), swiperConfig);
+                    console.log(self.methods.swiper.data[params.name]);
+                }, 1000);
+            }
+        },
+
+        // should go in browser.json module
+        //export: function (params, container, args) {self.export(params, container, args)}, -> browser
+        //console: function (params, container, args) {self.console(params, args)},  // obsolete, changed in log
+        link: function (params, container, args) { self.link(params, args); },
+        scroll: function (params, container, args) { self.scroll(params, args); },
+        reload: function (params, container, args) { self.reload(params, args); },
+        timer: function (params, container, args) { self.timer(params, args); },
+        setInterval: function (params, container, args) { self.setInterval(params, args); },
+        clearInterval: function (params, container, args) { self.clearInterval(params, args); },
+        setTimeout: function (params, container, args) { self.setTimeout(params, args); },
+        clearTimeout: function (params, container, args) { self.clearTimeout(params, args); },
+        local: {
+            set: function (params) {
+                for (var param in params) {
+                    var value = params[param];
+                    if (value) value = self.replaceProperties(value);
+                    if (typeof value == 'object') value = JSON.stringify(value);
+                    localStorage.setItem(param, value);
+                }
+            },
+            get: function (key) {
+                var localValue = localStorage.getItem(key);
+                if (localValue && self.isJsonString(localValue))
+                    localValue = JSON.parse(localValue);
+                return localValue;
+            },
+            remove: function (key) {
+                localStorage.removeItem(key);
+            },
+            clear: function () {
+                localStorage.clear();
+            }
+        },
+        storage: {
+            _storage: new WeakMap(),
+            set: function (element, key, obj) {
+                if (!self.methods.storage._storage.has(element)) {
+                    self.methods.storage._storage.set(element, new Map());
+                }
+                self.methods.storage._storage.get(element).set(key, obj);
+            },
+            get: function (element, key) {
+                return self.methods.storage._storage.get(element).get(key);
+            },
+            has: function (element, key) {
+                return self.methods.storage._storage.has(element) && self.methods.storage._storage.get(element).has(key);
+            },
+            remove: function (element, key) {
+                var ret = self.methods.storage._storage.get(element).delete(key);
+                if (!self.methods.storage._storage.get(element).size === 0) {
+                    self.methods.storage._storage.delete(element);
+                }
+                return ret;
+            }
+        },
+
+        choose: function (params, container, args) { self.choose(params, container, args); },
+        remove: function (params, container, args) { self.remove(params, container, args); },
+        part: function (params, container, args) { self.part(params, container, args); },
+        blocks: function (params, container, args) { self.part(params, container, args); }, // obsolete
+        block: function (params, container, args) { self.part(params, container, args); },
+        ace: function (params, container, args) { self.ace(params, container, args); },
+        code: function (params, container, args) { self.code(params, container, args); },
+
+        // should go in firebase.json module
+        database: function (params, container, args) { self.database(params, args); }, // obsolete (check) 
+        firebase: function (params, container, args) { self.firebase(params, args); },
+
+        firebaseEvent: {
+            action: function (newObj) {
+                /* self.logdbRef('firebaseEvent.action');
+                self.log('newObj');
+                self.log(newObj); */
+                /* var path = newObj.path;
+                delete newObj.path;
+                var pathString = 'self.json.var.db.' + self.replaceAll(path, '/', '.');
+                self.log('pathString:'+pathString);
+                var dbObj = self.docElement(pathString);
+                dbObj = newObj; // update local db */
+                var path = newObj.path;
+                delete newObj.path;
+                //alert(path);
+                document.querySelectorAll('[data-firebase="' + path + '"]').forEach(function (element, index) {
+                    //$('[data-firebase="'+path+'"]').each(function (index) {
+                    // var element = this;
+                    var pathString = 'self.json.var.db.' + self.replaceAll(element.getAttribute('data-firebase'), '/', '.'); // data('firebase')
+                    var dbObj = self.docElement(pathString);
+
+                    var firebaseValue = newObj[element.getAttribute('data-value')]; // TODO: not works for nested nodes
+
+                    //var template = element.getAttribute('data-template');
+                    var template = self.dataStorage.get(element, 'data-template');
+
+                    //if ($(element).is('ul')) {
+                    if (element.tagName == 'UL') { // se $(this) è un ul
+
+                        //var dbObj = self.docElement(pathString);
+                        // se il percorso ha più nodi e il dato non è presente nel db locale,
+                        // va creato un oggetto vuoto per ogni nodo 
+                        //var context = element.getAttribute('data-firebase');
+                        //self.var.db[context] = newObj; // update local db
+                        var liTemplate = template.li || template.template; // template.li retro-compatibility
+
+
+
+
+
+
+
+                        /* self.log('liTemplate');
+                        self.log(liTemplate);
+                        self.log('newObj');
+                        self.log(newObj); */
+                        //$(container).empty();
+                        element.innerHTML = '';
+
+                        var items = newObj;
+                        for (itemKey in items) {
+                            var item = items[itemKey];
+                            item.key = itemKey;
+
+                            /* if (params.li.class == "deviceItem d-flex flex-wrap align-items-center list-group-item list-group-item-action d-flex align-items-center justify-content-between") {
+                            alert(JSON.stringify(params.li));
+                        } */
+                            //if (dbPath == 'lessons')
+                            //prompt(JSON.stringify(liTemplate));
+                            // TO DO: replace with replaceProperty
+                            var dbParams = self.replaceItems(liTemplate, item, 'item') || '';
+
+                            // var dbParams = self.replaceProperties(liTemplate, undefined, item) || '';
+                            // -> TO DO container = self.elementToSelector(element);
+                            var container = element.getAttribute('data-selector');
+
+                            self.li(dbParams, { selector: container });
+                        }
+
+                        //} else if ( $(element).is('span') || $(element).is('p')) {
+                    } else if (element.tagName == 'SPAN' || element.tagName == 'P') {
+
+                        //$(element).text(firebaseValue);
+                        element.textContent = firebaseValue;
+
+                    } else if (element.tagName == 'SVG') {
+                        // TODO without JQUERY 
+                        //$(element).children('text').text(firebaseValue);
+                    } else { // se $(this) non è un ul
+
+                        //var dbObj = self.docElement(pathString);
+                        // se il percorso ha più nodi e il dato non è presente nel db locale,
+                        // va creato un oggetto vuoto per ogni nodo 
+                        //var context = element.getAttribute('data-firebase');
+                        //self.var.db[context] = newObj; // update local db
+                        if (template.blocks || template.html) {
+                            var blocksTemplate = template.html || template.blocks;
+
+                            //$(container).empty();
+                            element.innerHTML = '';
+
+                            var items = newObj;
+                            self.log('newObj');
+                            self.log(newObj);
+                            for (itemKey in items) {
+                                var item = items[itemKey];
+                                item.key = itemKey;
+                                var dbParams = self.replaceProperties(blocksTemplate, undefined, item) || '';
+                                /* self.log('container');
+                                self.log(container);
+                                self.log('dbParams');
+                                self.log(dbParams); */
+                                self.html(dbParams, { selector: container });
+                            }
+                        }
+
+                        if (template.init) self.do(template.init); //self.do(template.init);
+
+                    }
+
+
+                });
+            }
+        },
+
+        auth: {
+            init: function (params, container, args) {
+                self.log("auth init");
+                auth = firebase.auth();
+                auth.onAuthStateChanged(user => {
+                    self.json.var.user = user;
+                    if (!user) {
+                        // No user logged in
+                        self.log('authStateChanged: GUEST\n');
+                        // non bisognerebbe chiedere sempre di fare login 
+                    } else {
+                        // User logged in
+                        self.log('authStateChanged: USER\n');
+                        self.log('name: ' + self.user('displayName') + '\nemail: ' + user.email + '\nuid:' + user.uid);
+                        //self.log('email verificata');
+                        //self.log(self.userVerified()); 
+                    }
+                    /* self.log('params');
+                    self.log(params); */
+                    //self.do(params.onAuthStateChanged);
+                    self.do(params.onAuthStateChanged);
+
+                    //if (!firebaseInitialized) {
+                    // firebaseInitialized = true;
+                    //self.do(data);
+                    //}
+                });
+            },
+
+            sendEmailVerification: function (params, container, args) {
+                self.sendEmailVerification(params);
+            },
+
+            login: function (params, container, args) {
+                self.log('params.auth');
+                self.log(params.auth); // QUESTO E' {var:auth} MA SEMBRA NON RIMPIAZZARLO
+                self.log(args); // QUI MI RIPORTA LA PWD, ma perché ultimo args
+                var fba = self.replaceProperties(params.auth, args);
+                self.log('fba');
+                self.log(fba);
+                var fbAuth = self.cloneObject(fba);
+                self.log('fbAuth');
+                self.log(fbAuth);
+                if (params.success) fbAuth.success = params.success;
+                if (params.error) fbAuth.error = params.error;
+                self.firebaseLogin(fbAuth, params.success, params.error);
+            },
+
+            register: function (params, container, args) {
+                //var fbAuth = self.replaceTags({text: params.auth, args: args});
+                //var fbAuth = self.replaceResult(params.auth, args);
+                var fbAuth = self.replaceProperties(params.auth, args);
+                fbAuth.success = params.success;
+                fbAuth.error = params.error;
+                //alert(JSON.stringify(fbAuth))
+                self.firebaseRegister(fbAuth, params.success, params.error);
+            },
+
+            updateProfile: function (params, container, args) {
+                //params.profile = self.replaceTags({text: params.profile, args: args});
+                //params.profile = self.replaceResult(params.profile, args);
+                params.profile = self.replaceProperties(params.profile, args);
+                self.firebaseUpdateProfile(params.profile, params.success, params.error);
+            },
+
+            passwordReset: function (params, container, args) {
+                //params.email = self.replaceTags({text: params.email, args: args});
+                //params.email = self.replaceResult(params.email, args);
+                params.email = self.replaceProperties(params.email, args);
+                self.firebasePasswordReset(params.email, params.success, params.error);
+            },
+
+            logout: function (params, container, args) {
+                self.firebaseLogout(params);
+            }
+        },
+
+        // should go in mobile.json module
+        thunkable: function (params, container, args) { self.thunkable(params, args); },
+
+        // should go in 3d.json module
+        modelViewer: {
+            events: {},
+            on: function (params) {
+                let container = self.selector(params.selector || params.container);
+                let element = self.query(container);
+                self.log('modelViewer on');
+                self.log('container');
+                self.log(container);
+                self.log('element');
+                self.log(element);
+                if (element) {
+                    self.methods.modelViewer.events[container] = {}; // use self.element
+
+
+                    //let events = ['load', 'preload'];
+                    //for (var event in events) {
+                    var event = 'load';
+                    if (params[event]) {
+                        //self.element({root: 'self.methods.modelViewer.events', path: container+'.'+event, value: params[event]})
+                        self.methods.modelViewer.events[container][event] = params[event];
+                        self.log('modelViewer element');
+                        self.log(element);
+                        element.addEventListener(event, (e) => {
+                            self.log('modelViewer event');
+                            self.log(e);
+                            let container = e.path[0].getAttribute('data-selector');
+                            self.log(container);
+                            //self.do(self.methods.modelViewer.events[container][e.type]);
+                            self.do(self.methods.modelViewer.events[container][e.type]);
+                        });
+                    }
+                }
+            },
+            set: function (params) {
+                let element = self.query(self.selector(params.selector || params.container));
+                if (element) {
+                    if (params.color) {
+                        let color = params.color.split(',').map(numberString => parseFloat(numberString));
+                        self.log('Changing color to: ', color);
+                        const [material] = element.model.materials;
+                        material.pbrMetallicRoughness.setBaseColorFactor(color);
+                    }
+                    if (params.exposure) element.exposure = params.exposure;
+                    if (params.shadow) element.shadowIntensity = params.shadow;
+                    if (params.orientation) element.orientation = params.orientation;
+
+                }
+            }
+        }
+    };
+
+
+    this.googleSignInPopup = function () {
+        self.log('googleSignInPopup');
+        var provider = new firebase.auth.GoogleAuthProvider();
+
+        firebase.auth().useDeviceLanguage(); // lingua del dispositivo
+
+        firebase.auth()
+            .signInWithPopup(provider)
+            .then((result) => {
+                // @type {firebase.auth.OAuthCredential} 
+                var credential = result.credential;
+                // This gives you a Google Access Token. You can use it to access the Google API.
+                var token = credential.accessToken;
+                // The signed-in user info.
+                var user = result.user;
+                window.location.reload();
+                // ...
+            }).catch((error) => {
+                // Handle Errors here.
+                var errorCode = error.code;
+                var errorMessage = error.message;
+                // The email of the user's account used.
+                var email = error.email;
+                // The firebase.auth.AuthCredential type that was used.
+                var credential = error.credential;
+            });
+    };
+
+
+    /* this.googleSignInPopup = function () {
+        // [START auth_google_signin_popup]
+        self.log('googleSignInPopup');
+        var provider = new firebase.auth.GoogleAuthProvider();
+        //provider.addScope('https://www.googleapis.com/auth/contacts.readonly'); //check security
+        //provider.addScope('https://www.googleapis.com/auth/calendar');
+        //var languageApp = jsonic.var.language || 'en';
+        //firebase.auth().languageCode = 'it';//languageApp;
+        //self.log(provider);
+        //return;
+        firebase.auth()
+            .signInWithPopup(provider)
+            .then((result) => {
+                // @type {firebase.auth.OAuthCredential}
+                var credential = result.credential;
+                // This gives you a Google Access Token. You can use it to access the Google API.
+                var token = credential.accessToken;
+                // The signed-in user info.
+                var user = result.user;
+                //######### result ########//
+                self.log("credential");
+                self.log(credential);
+                self.log("token");
+                self.log(token);
+                self.log("user");
+                self.log(user);
+                window.location.reload();
+                // ...
+            }).catch((error) => {
+                // Handle Errors here.
+                var errorCode = error.code;
+                self.log('errorCode');
+                self.log(errorCode);
+                var errorMessage = error.message;
+                self.log('errorMessage');
+                self.log(errorMessage);
+                // The email of the user's account used.
+                var email = error.email;
+                self.log('email');
+                self.log(email);
+                // The firebase.auth.AuthCredential type that was used.
+                var credential = error.credential;
+                self.log('credential');
+                self.log(credential);
+                // ...
+            });
+        // [END auth_google_signin_popup]
+    } */
+    /*     this.auth = function (params, args) {
+            self.log('auth');
+            self.log(params);
+            if (params.do == 'init') {
+                auth = firebase.auth();
+                auth.onAuthStateChanged(user => {
+                    self.json.var.user = user;
+                    if (!user) {
+                        // No user logged in
+                        self.log('authStateChanged: GUEST\n');
+                        // non bisognerebbe chiedere sempre di fare login
+                    } else {
+                        // User logged in
+                        self.log('authStateChanged: USER\n');
+                        self.log('name: '+self.user('displayName') + '\nemail: '+user.email + '\nuid:'+ user.uid);
+                        //self.log('email verificata');
+                        //self.log(self.userVerified());
+                    }
+    
+                    //self.log('params.onAuthStateChanged');
+                    //self.log(params.onAuthStateChanged);
+    
+                    self.do(params.onAuthStateChanged);
+    
+                    //if (!firebaseInitialized) {
+                    // firebaseInitialized = true;
+                    //self.do(data);
+                    //}
+                });
+            } else if (params.do == 'sendEmailVerification') {
+    
+                self.sendEmailVerification(params);
+    
+            } else if (params.do == 'login') {
+    
+                self.log('params.auth');
+                self.log(params.auth);
+                var fba = self.replaceProperties(params.auth, args);
+                self.log('fba');
+                self.log(fba);
+                var fbAuth = self.cloneObject(fba);
+                self.log('fbAuth');
+                self.log(fbAuth);
+                if (params.success) fbAuth.success = params.success;
+                if (params.error) fbAuth.error = params.error;
+                self.firebaseLogin(fbAuth, params.success, params.error);
+    
+            } else if (params.do == 'register') {
+    
+                //var fbAuth = self.replaceTags({text: params.auth, args: args});
+                //var fbAuth = self.replaceResult(params.auth, args);
+                var fbAuth = self.replaceProperties(params.auth, args);
+    
+                fbAuth.success = params.success;
+                fbAuth.error = params.error;
+                //alert(JSON.stringify(fbAuth))
+                self.firebaseRegister(fbAuth, params.success, params.error);
+                
+            } else if (params.do == 'updateProfile') {
+    
+                //params.profile = self.replaceTags({text: params.profile, args: args});
+                //params.profile = self.replaceResult(params.profile, args);
+                params.profile = self.replaceProperties(params.profile, args);
+                self.firebaseUpdateProfile(params.profile, params.success, params.error);
+    
+            } else if (params.do == 'passwordReset') {
+    
+                //params.email = self.replaceTags({text: params.email, args: args});
+                //params.email = self.replaceResult(params.email, args);
+                params.email = self.replaceProperties(params.email, args);
+                self.firebasePasswordReset(params.email, params.success, params.error);
+    
+            } else if (params.do == 'logout') {
+    
+                self.firebaseLogout(params);
+            }
+                // else
+                //self.database(params, args);
+                
+        }
+        */
+    /*     this.db = function (params, args) {
+            if (typeof params == 'string')
+                return self.db(params, args);
+            else
+                self.firebase(params, args);
+        } */
+    this.console = function (params, args) {
+
+        //value = self.replaceProperties(params);
+        //console.log('JSONIC: '+value, 'color:pink');
+        if (typeof params.log == 'string' && params.color) {
+            var color = params.color || 'white';
+            console.log('%c' + self.replaceProperties(params.log), 'color:' + color);
+        } else {
+            console.log(self.replaceProperties(params.log || params));
+        }
+    };
+
+    this.module = function (params, args) {
+        if (typeof params == 'string') {
+            var nameReplaced = self.replaceProperties(params, args);
+            return self.element({ root: self.modules, path: nameReplaced });
+        } else {
+            if (params.name) {
+                if (params.value) {
+                    var name = self.replaceProperties(params.name, args);
+                    //var value = self.actionResult(params.value, args);
+                    var value = self.replaceProperties(value, args);
+                    self.log('module');
+                    self.log(name);
+                    self.log('value');
+                    self.log(value);
+                    self.log(value.app.html.div.div[0].text.lang.en);
+                    self.modules[name] = value;
+                } else if (params.url) {
+                    self.addModule(params); // TO DO: return?
+                }
+            }
+        }
+    };
+
+    this.db = function (params, args) {
+        self.log('db');
+        if (typeof params == 'string') {
+            var paramsReplaced = self.replaceProperties(params, args);
+            self.log('paramsReplaced');
+            self.log(paramsReplaced);
+            self.log(self.var('db.' + paramsReplaced, args));
+            //var varValue = self.docElement('self.json.var.db.'+name);
+            return self.var('db.' + paramsReplaced, args); // to do: change with self.element({path: 'db.'+paramsReplaced}})
+
+
+
+
+
+
+
+
+
+            /*
+            // questa versione non funzionava. vuol dire che this.var ha un errore nel caso di oggetto
+            return self.var({
+                name: 'db.'+paramsReplaced
+            }, args);
+
+            */
+        } /*  else {
+            return self.actionResult(params, args);
+        } */
+
+
+    };
+
+    this.firebase = function (params, args) {
+        if (params.initializeApp) {
+            var firebaseConfig = self.replaceProperties(params.initializeApp);
+            firebase.initializeApp(firebaseConfig);
+        } else {
+            self.database(params, args);
+        }
+    };
+
+    this.database = function (params, args) {
+        //console.log('database');
+
+        if (params.do == 'init') {
+            database = firebase.database();
+            self.log('database');
+            self.log(database);
+        } else {
+            if (database) {
+
+                if (typeof params == 'string') {
+
+                    return self.db(params, args); // local db
+
+                } else {
+
+                    if (params) {
+                        if (params.path) {
+                            params.path = self.path(params.path, args);
+                        }
+                        /*  console.log('params.path');
+                            console.log(params.path); */
+                        /* if (params.value)
+                            params.value = params.value; */ //self.value({string: params.value});
+                        if (params.value) {
+
+                            /* self.log("params.value pre replace");
+                            self.log(params.value); */
+                            //params.value = self.replaceTags({text: params.value, args: args});
+                            //params.value = self.replaceResult(params.value, args);
+                            //params.value = self.replaceProperties(params.value, args);
+                            //params.value = self.actionResult(params.value, args);
+                            params.value = self.replaceProperties(params.value, args);
+
+                            self.log("params.value post replace");
+                            self.log(params.value);
+                        }
+
+
+                        /* self.log('params to FIREBASE');
+                        self.log(params); */
+                        // params.value = "${var.newDevice}"
+                        //var newDevice = `${params.value}`;
+                        //var newDevice = `${var.newDevice}`;
+                        if (params.do == 'init') {
+                        } else if (params.do == 'increase') {
+
+                            self.firebaseIncrease(params);
+
+                        } else if (params.do == 'get') {
+
+                            self.firebaseGet(params.path, function (result) {
+                                if (result.success) {
+                                    if (result.data) {
+                                        self.log('firebase get SUCCESS');
+                                        self.log(params.success);
+                                        if (params.on && params.on.success) self.do(params.on.success, undefined, result);
+                                        //if (params.on && params.on.success) self.do(params.on.success, result);
+                                    } else {
+                                        self.log('firebase get no result.data ERROR');
+                                        //if (params.on && params.on.error) self.do(params.on.error);
+                                        if (params.on && params.on.error) self.do(params.on.error);
+                                    }
+                                } else {
+                                    self.log('firebase get ERROR');
+                                    //if (params.on && params.on.error) self.do(params.on.error, result);
+                                    if (params.on && params.on.error) self.do(params.on.error, undefined, result);
+                                    // alert errore di connessione. alert riprova
+                                }
+                            });
+                        } else if (params.do == 'new' && params.value) {
+                            var newKey = self.getKey(params.path);
+                            self.firebaseSet(params.path + '/' + newKey, params.value, function (result) {
+                                if (result.success) {
+                                    self.log('firebase set SUCCESS');
+                                    if (params.on && params.on.success) self.do(params.on.success, undefined, result);
+                                    //if (params.on && params.on.success) self.do(params.on.success, result);
+                                } else {
+                                    self.log('firebase set ERROR');
+                                    if (params.on && params.on.error) self.do(params.on.error, undefined, result);
+                                    //if (params.on && params.on.error) self.do(params.on.error, result);
+                                    // alert errore di connessione. alert riprova
+                                }
+                            });
+                        } else if (params.do == 'remove' && params.path) {
+                            self.firebaseRemove(params.path, function (result) {
+                                if (result.success) {
+                                    self.log('firebase set SUCCESS');
+                                    //if (params.on && params.on.success) self.do(params.on.success, result);
+                                    if (params.on && params.on.success) self.do(params.on.success, undefined, result);
+                                } else {
+                                    self.log('firebase set ERROR');
+                                    if (params.on && params.on.error) self.do(params.on.error, undefined, result);
+                                    //if (params.on && params.on.success) self.do(params.on.success, result);
+                                    // alert errore di connessione. alert riprova
+                                }
+                            });
+                        } else if (params.do == 'addListener') {
+                            self.firebaseAddListener(params);
+                        } else if (params.do == 'removeListener') {
+                            self.firebaseRemoveListener(params);
+                        } else if (params.do == 'update') {
+                            if (params.value) { // 'set' is the default action with 'value' param
+                                self.firebaseUpdate(params.path, params.value, function (result) {
+                                    if (result.success) {
+                                        self.log('firebase update SUCCESS');
+                                        if (params.on && params.on.success) self.do(params.on.success, undefined, result);
+                                        //if (params.on && params.on.success) self.do(params.on.success, result);
+                                    } else {
+                                        self.log('firebase update ERROR');
+                                        if (params.on && params.on.error) self.do(params.on.error, undefined, result);
+                                        //if (params.on && params.on.error) self.do(params.on.error, result);
+                                        // alert errore di connessione. alert riprova
+                                    }
+                                });
+                            } else {
+                                self.log('data update requires value param');
+                            }
+                        } else if (params.do == 'push') {
+                            if (params.value) { // 'set' is the default action with 'value' param
+                                self.firebasePush(params.path, params.value, function (result) {
+                                    if (result.success) {
+                                        self.log('firebase push SUCCESS');
+                                        if (params.on && params.on.success) self.do(params.on.success, undefined, result);
+                                        //if (params.on && params.on.success) self.do(params.on.success,result);
+                                    } else {
+                                        self.log('firebase push ERROR');
+                                        if (params.on && params.on.error) self.do(params.on.error, undefined, result);
+                                        //if (params.on && params.on.error) self.do(params.on.error, result);
+                                        // alert errore di connessione. alert riprova
+                                    }
+                                });
+                            } else {
+                                self.log('data push requires value param');
+                            }
+                        } else {
+                            if (params.value) { // 'set' is the default action with 'value' param
+                                self.firebaseSet(params.path, params.value, function (result) {
+                                    if (result.success) {
+                                        self.log('firebase set SUCCESS');
+                                        if (params.on && params.on.success) self.do(params.on.success, undefined, result);
+                                        //if (params.on && params.on.success) self.do(params.on.success,result);
+                                    } else {
+                                        self.log('firebase set ERROR');
+                                        if (params.on && params.on.error) self.do(params.on.error, undefined, result);
+                                        //if (params.on && params.on.error) self.do(params.on.error, result);
+                                        // alert errore di connessione. alert riprova
+                                    }
+                                });
+                            }
+                        }
+
+
+                    }
+                }
+            } else {
+                self.log('"database" function needs to be initialised');
+            }
+        }
+    };
+
+    this.ajax = function (params, selectorParams, args) {
+        /* self.log('ajax');
+        // TO DO: selectorParams
+        self.log('ajax');
+        self.log('params');
+        self.log(params);
+        self.log('args');
+        self.log(args);  */
+        if (params.url) {
+            //var url = self.compile(params.url, args);
+            var url = self.replaceProperties(params.url, args);
+            var data;
+            if (params.data)
+                data = JSON.stringify(self.replaceProperties(params.data, args));
+            //data = JSON.stringify(self.compile(params.data, args));
+            /* self.log('data');
+            self.log(data); */
+            var type = params.type || 'POST';
+            var request = new XMLHttpRequest();
+            request.open(type, url, true);
+            //request.setRequestHeader("Accept", "application/json");
+            //request.setRequestHeader('Content-Type', 'application/json');
+            /* request.onreadystatechange = function () {
+                if (r.readyState != 4 || r.status != 200) return;
+                alert("Success: " + r.responseText);
+            } */
+            request.onload = function () {
+                self.log('onload');
+                self.log(this);
+                if (this.status >= 200 && this.status < 400) {
+                    // Success!
+                    var result = {};
+
+                    //try {
+                    var response = this.response;
+                    response = response.replace(/(\\\")/g, '&quot;');
+                    try {
+                        response = decodeURI(response);
+                    } catch (error) {
+                        /* console.log('response');
+                        console.log(response); */
+                        console.log('decodeURI error');
+                        console.log(error);
+                    }
+                    result.response = self.parse(response);
+                    result.status = this.status;
+                    result.header = this.getAllResponseHeaders().split('\r\n').reduce((resultHeader, current) => {
+                        let [name, value] = current.split(': ');
+                        resultHeader[name] = value;
+                        return resultHeader;
+                    }, {});
+                    //} catch (e) {
+                    //}
+                    self.log('result');
+                    self.log(result);
+                    if (params.success)
+                        self.do(params.success, undefined, result);
+                    //self.do(params.success, result);
+                    //self.do(self.replaceProperty(params.success, 'result', result), result);
+                } else {
+                    // We reached our target server, but it returned an error
+                    if (params.error)
+                        self.do(params.error, undefined, 'Server error');
+                    //self.do(params.error, 'Server error');
+                }
+            };
+            request.onerror = function (error) {
+                // There was a connection error of some sort
+                self.log('error');
+                self.log(error);
+                self.log('this');
+                self.log(this);
+                if (params.error)
+                    self.do(params.error, undefined, 'Server unavailable');
+                //self.do(params.error, 'Server unavailable');
+            };
+            //request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
+            if (data)
+                request.send(data);
+
+            else
+                request.send();
+        } else {
+            self.log('ajax method requires url parameter');
+        }
+
+
+        /*  $.ajax({
+            url: paramsReplaced.url,
+            type: params.type || 'post',
+            //dataType: 'json', // questo dovrebbe evitare JSON.parse
+            //dataType: 'text', // verificare se necessario
+            data: paramsReplaced.data || {},
+            success: function (result) {
+                self.log('ajax');
+                self.log('result');
+                self.log(result);
+                self.do(params.success, result);
+                //self.do(data); // in .params dovrebbe andare il resto
+            },
+            error: function (error) {
+                var errorText = error.responseText || error;
+                self.do(params.error, errorText);
+                //self.do(data); // in .params dovrebbe andare il resto
+            }
+        }); */
+    };
+
+    /* View in fullscreen */
+    this.openFullscreen = function (id) {
+        var element = document.getElementById(id);
+
+        if (screenfull.isEnabled) {
+            screenfull.request(element);
+        }
+
+    };
+
+    /*    this.addListener = function(params) {
+            var selector = self.selector(params);
+            if (selector)
+                $(selector).on(params.event, self.do(params.action));
+                //event.stopPropagation();
+        } */
+    /* Close fullscreen */
+    this.closeFullscreen = function () {
+
+        //document.exitFullscreen();
+        screenfull.off('change'); // callback
+    };
+
+    /*         this.list = function (params, selectorParams) {
+    
+            var container = (selectorParams) ? self.selector(selectorParams) : params.container;
+            var selector = self.selector(self.extend({}, params, selectorParams));
+    
+            if (selector) {
+    
+                if (params.list) params.items = params.list; // retro-compatibilità
+    
+                if (params.listAction) $(selector).data('listAction', params.listAction);
+                if (params.listClass) $(selector).data('listClass', params.listClass); // ul
+    
+                if (params.items) {
+    
+                    $(selector).empty();
+                    var index = 0;
+    
+                    //params.items = self.replaceTags({text:params.items, args:selectorParams});
+                    //params.items = self.replaceResult(params.items, selectorParams);
+                    params.items = self.replaceProperties(params.items, selectorParams);
+                    
+                    for (var itemKey in params.items) {
+                        // da rimuovere id="item'+itemKey+'" href=""
+                        //self.log('PARAMETRI');
+                        //self.log(itemKey);
+                        //self.log(params.items);
+    
+    
+                        $(selector).append('<li data-index="'+itemKey+'" class="list-group-item"></li>');
+                        var item = params.items[itemKey];
+                        //var itemSelector = selector + ' li:eq(' + index + ')';
+                        var itemSelector = selector + ' li:eq(' + itemKey + ')';
+    
+                        // Item action
+                        var itemAction;
+                        if (item.action)
+                            itemAction = item.action;
+                        else if (params.action)
+                            itemAction = params.action;
+                        else if ($(selector).data('listAction'))
+                            itemAction = $(selector).data('listAction');
+                        item.action = itemAction;
+    
+                        if (item.action) {
+                            $(itemSelector).addClass('list-group-item-action');
+                            $(itemSelector).css('cursor', 'pointer');
+                        }
+                        if (item.color) $(itemSelector).css('color', item.color);
+                        if (item.background) $(itemSelector).css('background', item.background);
+    
+                        //$(itemSelector).append('<div></div>');
+    
+                        var itemFields = params.items[itemKey].fields || params.items[itemKey];  // retro-compatibilità
+                        //self.log('itemFields');
+                        //self.log(itemFields);
+        
+                        for (var itemField in itemFields) {
+                            var field = itemFields[itemField];
+                            //self.log(field);
+                            if (itemField == 'icons') {
+    
+                                self.icons(field, {container: itemSelector});
+    
+    
+                            } else if ((itemField != 'params') && (itemField != 'action')) { // retro-compatibilità
+                                    $(itemSelector).append('<span data-field="'+itemField+'">'+self.text(itemFields[itemField])+'</span>');
+                            }
+                        }
+    
+                        // action
+                        if (item.action) {
+                            $(itemSelector).data('onData', item);
+                            $(itemSelector).on(self.touch, function (event) {
+                                event.stopPropagation();
+                                self.onEvent(this, event);
+                            });
+                        }
+                        // events
+                        if (item.on) self.on(item.on, {container: selector});
+    
+                        index++;
+                    }
+                } else if (params.append) {
+                    // aggiunge una riga alla fine (calcolare path)
+                } else if (params.prepend) {
+                    // aggiunge una riga all'inizio (calcolare path)
+                    // sballa tutti i dati presenti in var.functions
+                    // sarebbe meglio mem in data value tutto il json
+                    // azione
+                }
+    
+                // List classes
+    
+                //if (params.id) $(selector).attr('id', params.id);
+                var listClass = $(selector).data('listClass');
+    
+    
+                if (listClass) {
+                    var ulClass = listClass.ul || '';
+                    var liClass = listClass.li || '';
+        
+                    $(selector).addClass(ulClass);
+                    $(selector + ' > li').addClass(liClass);
+    
+                    var index = 0;
+                    for (var field in listClass.fields) {
+                        var fieldClass = listClass.fields[field] || '';
+                        $(selector + ' > li > span[data-field='+field+']').addClass(fieldClass);
+                        index++;
+                    }
+                }
+            }
+        } */
+    this.scroll = function (params) {
+        // https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
+        // {id, class, value}
+        var selector = self.selector(params.selector || params.container);
+        var block = document.querySelector(selector);
+        //var offset = elem.dataset.offset ? parseInt(elem.dataset.offset) : 0;
+        if (block) {
+            var bodyOffset = document.body.getBoundingClientRect().top;
+            window.scrollTo({
+                top: block.getBoundingClientRect().top - bodyOffset, // + offset,
+                behavior: 'smooth'
+            });
+        } else {
+            self.log('scroll to unknown element: ' + selector);
+        }
+    };
+
+    /*         this.scroll = function (params) {
+    //                var selector = self.selector(params);
+            //var obj = $(selector).get(0);
+    
+            var selector = "g."+params.class+".myLabelStyle."+params.value;
+    
+    
+            //var parent = $(selector).parent().get(0);
+    
+            //document.querySelector(selector).scrollIntoView();
+            //self.resizeEvent(); // bug workaround
+            //$(selector).parent().scrollTop($(selector).position().top);
+                $(selector).parent().animate({
+                //scrollTop: $(selector).position().top
+                //scrollTop: $(selector).position().top,
+                transform: 'translate(0,-'+$(selector).position().top+'), scale(1)'
+            });
+        }
+    */
+    //------------------------
+    /* this.do = function (data, args) {
+        if (data) {
+            if (typeof data == 'string' && self.json.actions[data]) {
+                self.do(self.json.actions[data], args);
+            } else {
+                if (!data.index) data.index = 0;
+                if (!data.tasks) {
+                    if (Array.isArray(data)) {
+
+                        if (data.index < data.length) {
+                            self.do(data[data.index]);
+                            data.index = data.index +1;
+                            self.do(data);
+                        } else {
+                            delete data.index;
+                        }
+                    } else {
+                        self.do(data);
+                    }
+                //} else if (data.tasks.length > 0) {
+                } else {
+                    if (data.index < data.tasks.length) {
+                        var currentTask = data.tasks[data.index];
+                        //var currentTask = data.tasks.shift();
+                        if (currentTask.params == undefined) {currentTask.params = {}}
+                        if (data.params == undefined) {data.params = {}}
+                        if (currentTask.if == undefined) {currentTask.if = true}
+                        var taskParams = currentTask.params; // parametri specifici del task
+                        taskParams.params = data.params;
+                        taskParams.index = data.index+1;
+                        //for (var param in data.params) {taskParams[param] = data.params[param]; } // merge
+                        taskParams.tasks = data.tasks;
+                        var taskIf = (typeof currentTask.if == "function") ? currentTask.if() : currentTask.if;
+
+                        if (taskIf) {
+                            if (currentTask.delay !== undefined) {
+                                setTimeout(function () {
+                                    self.do(currentTask.task, taskParams);
+
+                                }, currentTask.delay);
+                            } else if (currentTask.interval !== undefined) {
+                                self.createTaskInterval(currentTask);
+                            } else {
+                                self.do(currentTask.task,taskParams);
+
+                            }
+                        } else {
+                            self.do(taskParams);
+                        }
+                    }
+                }
+            }
+        }
+    } */
+    /*     this.playTaskInterval = function (taskFunction) {
+            self.log('playTaskInterval');
+            var taskName = taskFunction.name;
+            if (tasksIntervals[taskName]) {
+                clearInterval(tasksIntervals[taskName].id);
+                tasksIntervals[taskName].id = setInterval(function () {
+                    tasksIntervals[taskName].task(tasksIntervals[taskName].params);
+                }, tasksIntervals[taskName].interval);
+            } else {
+                self.log('taskName: '+taskName);
+            }
+        }
+    
+        this.stopTaskInterval = function (taskFunction) {
+            self.log('stopTaskInterval');
+            var taskName = taskFunction.name;
+            if (tasksIntervals[taskFunction.name]) {
+                clearInterval(tasksIntervals[taskFunction.name].id);
+            } else {
+                self.log('taskName: '+taskName);
+            }
+        }
+    
+        this.createTaskInterval = function (myTask) {
+            tasksIntervals[myTask.task.name] = {};
+            tasksIntervals[myTask.task.name].task = myTask.task;
+            tasksIntervals[myTask.task.name].params = myTask.params;
+            tasksIntervals[myTask.task.name].interval = myTask.interval;
+            self.playTaskInterval(myTask.task.name);
+        }
+    
+        this.addTimedTask = function (data) {
+            self.log('addTimedTask');
+            if (data.frequence && data.task) {
+                if (!data.active) {data.active = true;}
+                if (!timedTasks[data.frequence]) {timedTasks[data.frequence] = {}}
+                timedTasks[data.frequence][data.task] = {active:data.active, params:{}};
+                if (data.params) {
+                    timedTasks[data.frequence][id].params = data.params;
+                }
+            }
+        }
+    
+        this.removeTimedTask  = function (data) {
+            self.log('removeTimedTask');
+            if (data.frequence && data.task) {
+                delete timedTasks[data.frequence][data.task];
+            }
+        }
+    
+        this.doTimedTask = function (data) {
+            self.log('doTimedTask');
+            self.log(data);
+            for (var task in timedTasks[data.frequence]) {
+                var taskObj = timedTasks[data.frequence][task];
+                if (taskObj.active) {
+                    self.do(task, taskObj.params);
+                }
+            }
+        } */
+    //------------------------
+    // CSS METHODS
+    //------------------------
+    /*        // SELETTORI
+        var previewPanel = '.appPanel[data-value="pnlPreview"]';
+        var toolsPanel = '.appPanel[data-value="pnlTools"]';
+    
+        var stagePanel = '.framePanel[data-value="pnlStage"]';
+        var devicePanel = '.framePanel[data-value="pnlDevice"]';
+    
+        this.closePanel = function(value) {
+            self.log(value);
+    
+            switch (value) {
+                case 'closePanelTools':
+                    $(toolsPanel).fadeOut();
+                    $(previewPanel).fadeIn();
+                case 'closePanelFrame':
+                    $(devicePanel).fadeOut();
+                    $(stagePanel).fadeIn();
+            }
+            }
+    */
+    //------------------------
+    // CSS METHODS
+    //------------------------
+    /*     this.cssProp = function (propPar) {
+            var cssObj = {transform: ''};
+            if ((propPar.x) && (propPar.y)) {cssObj.transform += ' translate('+propPar.x+'px,'+propPar.y+'px)'; }
+            if (propPar.rotateY) {cssObj.transform += ' rotateY('+propPar.rotateY+'deg)'; }
+            if (propPar.rotateX) {cssObj.transform += ' rotateX('+propPar.rotateX+'deg)'; }
+            if (propPar.scale) {cssObj.transform += ' scale('+propPar.scale+','+propPar.scale+')'; }
+            if (propPar.deg) {cssObj.transform += ' rotate('+propPar.deg+'deg)'; }
+            if (propPar.opacity) {cssObj.opacity = propPar.opacity;}
+            return cssObj;
+        } */
+    /*     this.getCSS = function (data) {
+            var $inspector = $("<div>").css('display', 'none').addClass(data.class);
+            $("body").append($inspector); // add to DOM, in order to read the CSS property
+            try {
+                var props = [];
+                for (i=0; i<data.properties.length; i++) {props.push($inspector.css(data.properties[i]))}
+                return props;
+            } finally {
+                $inspector.remove(); // and remove from DOM
+            }
+        }
+    
+            this.getTransform = function (object) {
+            var transformArray = $(object).css('transform').match(/(-?[0-9\.]+)/g);
+            var objTransform = {x:0,y:0};
+            objTransform.x = transformArray[4];
+            objTransform.y = transformArray[5];
+            return objTransform;
+        } */
+    var getClickPosition = function (e) {
+        var parentPosition = getPosition(e.currentTarget);
+        var xPosition = e.clientX - parentPosition.x;
+        var yPosition = e.clientY - parentPosition.y;
+    };
+
+    function getPosition(element) {
+        var xPosition = 0;
+        var yPosition = 0;
+
+        while (element) {
+            xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
+            yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
+            element = element.offsetParent;
+        }
+        return { x: xPosition, y: yPosition };
+    }
+
+    /*     var cssTransform = function (namePar, fromPar, toPar) {
+            var sdDefineFrom = {transform: ''};
+            var sdDefineTo = {transform: ''};
+            if ((fromPar.x) && (fromPar.y)) {sdDefineFrom.transform += ' translate('+fromPar.x+'px,'+fromPar.y+'px)'; }
+            if ((toPar.x) && (toPar.y)) {sdDefineTo.transform += ' translate('+toPar.x+'px,'+toPar.y+'px)'; }
+            if (fromPar.scale) {sdDefineFrom.transform += ' scale('+fromPar.scale+','+fromPar.scale+')'; }
+            if (toPar.scale) {sdDefineTo.transform += ' scale('+toPar.scale+','+toPar.scale+')'; }
+            if (fromPar.deg !== undefined) {sdDefineFrom.transform += ' rotate('+fromPar.deg+'deg)'; }
+            if (toPar.deg !== undefined) {sdDefineTo.transform += ' rotate('+toPar.deg+'deg)';}
+            if (fromPar.opacity) {sdDefineFrom.transform += ' opacity'; sdDefineFrom.opacity = String(fromPar.opacity); }
+            if (toPar.opacity) {sdDefineTo.transform += ' opacity'; sdDefineTo.opacity = String(toPar.opacity); }
+            $.keyframe.define({name: namePar, from: sdDefineFrom, to: sdDefineTo});
+        }
+    
+        this.defineTransform = function (data) {
+            cssTransform(data.name, data.from, data.to);
+            cssTransform(data.name+'Reverse', data.to, data.from);
+            animations[data.name] = {name: data.name, duration:data.duration, timingFunction: data.ease, fillMode:'both'};
+        } */
+    /*     this.defineAnimations = function (data) {
+            self.log('defineAnimations');
+    
+            for (var name in self.json.styles.animations) {
+                self.json.styles.animations[name].name = name;
+                self.defineTransform(self.json.styles.animations[name]);
+            }
+            
+            self.do(data);
+        }
+            */
+    /* this.styleToAnimation = function (obj, style) {
+        // inutilizzata
+        $(obj).addClass('resetAnimation'); // Disable transitions
+        $(obj).css(style);
+        $(obj).eq(0).offsetHeight; // Trigger a reflow, flushing the CSS changes
+        $(obj).removeClass('resetAnimation'); // Re-enable transitions
+        // https://stackoverflow.com/questions/11131875/what-is-the-cleanest-way-to-disable-css-transition-effects-temporarily
+    } */
+    //------------------------
+    // DIPENDENZE TWEENMAX
+    //------------------------
+    /*  this.getImage = function (data) {
+            // corrisponde al metodo fixo.loadImage
+            // ma senza la dipendenza con fixo.iconUrl
+            // che aggiunge il dominio ai nomi di file senza url
+            // se si vuole utilizzare al posto di fixo.loadImage
+            // data.url = fixo.iconUrl(data.url); va fatta in fixo.js
+            // fixo.loadImage è usato sicuramente in hom.js / spo.js
+            // e in fixo.items.js
+            
+            if (data.style)
+                $(data.object).css(data.style);
+            //if (data.animation == undefined) {TweenMax.to(data.object,0,{opacity:0,display:'block'});}
+            if (data.animation !== undefined)
+                $(data.object).css({opacity:0, display:'none'});
+            if (TweenMax) TweenMax.set(data.object,{backgroundImage:'url('+data.url+')'});
+            $(data.object).waitForImages({
+                each: function(loaded, count, success) {if(!success) {log('error loadImage id:'+this.id);}},
+                eachError: function() {
+                    // http://stackoverflow.com/questions/6137934/how-should-i-handle-a-missing-image-in-my-plugin
+                    self.log('error:'+urlPar);
+                },
+                finished: function () {
+                    if (data.animation !== undefined) {
+                        self.animation({object:data.object, animation:data.animation});
+                    } else {
+                        if (TweenMax) TweenMax.to(data.object,1,{autoAlpha:1,display:'block',float:'left'});
+                        else $(data.object).css({display: 'block', opacity: '1'});
+                    }
+                    if (data.move != undefined) {
+                        self.move({object:data.object, move:data.move, target:data.target});
+                    }
+                    if (data.action) {self.setAction({object:data.object, action:data.action});} // obsolete
+                    if (data.on) {self.on(data.on, {container: data.object});}
+                    if (data.onComplete) {self.do(data.onComplete)};
+                },
+                waitForAll: true
+            });
+            //$(objPar).waitForImages.progress(function(loaded, count, success) {alert(loaded + ' of ' + count + ' images has ' + (success ? 'loaded' : 'failed to load') +  '.');});
+        } */
+    /*     this.setAction = function (data) {
+            $(data.object).off().on(self.touch, function () {
+                var.touchTime = self.getTimestamp();
+                self.do(data.action, data.value);
+            });
+        } */
+    this.animate = function (params, selectorParams, args) {
+        // We create a Promise and return it
+        new Promise((resolve, reject) => {
+            /* self.log('animate');
+            self.log('params');
+            self.log(params);
+
+            self.log('selectorParams');
+            self.log(selectorParams); */
+
+            /* selectorParams.container = (params.container) ? params.container : selectorParams.container;
+            selectorParams.id = (params.id) ? params.id : selectorParams.id ;
+            selectorParams.class = (params.class) ? params.class : selectorParams.class;
+            selectorParams.value = (params.value) ? params.value : selectorParams.value; */
+            const prefix = 'animate__';
+            //var selector = self.selector(self.extend({}, params, selectorParams), undefined, true); // selectAll
+            let selector = self.selector(params.selector || params.container, undefined, true) || self.selector(selectorParams, undefined, true);
+            //var selector = self.selector(params.selector || params.container, selectorParams, true); // selectAll
+            /* self.log('animate');
+            self.log('selector');
+            self.log(selector); */
+            var transition = params.transition || params;
+            transition = self.replaceProperties(transition, args);
+
+            const duration = params.duration || '0.5s';
+
+            const animationName = `${prefix}${transition}`;
+
+            if (!selector) {
+                self.log('animate function without selector');
+                self.log(params);
+                self.log(selectorParams);
+            } else {
+
+                var elements = self.queryAll(selector);
+                /* console.log('elements');
+                console.log(elements); */
+                //var elements = document.querySelectorAll(selector);
+                if (elements)
+                    elements.forEach(function (element, index) {
+                        if (element) {
+                            //element.classList.add(`${prefix}animated`, animationName);
+                            //console.log(element.classList);
+                            element.classList.add('animate__animated', animationName);
+                            element.style.setProperty('--animate-duration', duration);
+                        } else {
+                            console.log('element');
+                            console.log(element);
+                        }
+                    });
+
+
+                if (params.on && params.on.start)
+                    self.do(params.on.start, { selector: selector });
+                //self.do(params.on.start, undefined, {selector: selector});
+                if (params.style) self.css(params, selectorParams); // TO DO: deprecated / to be removed
+
+
+
+
+
+                //if (params.infinite)
+                //    node.style.setProperty('--animate-infinite', 'infinite');
+                // When the animation ends, we clean the classes and resolve the Promise
+                function handleAnimationEnd(event) {
+                    if (params.on && params.on.end) {
+                        self.do(params.on.end, { selector: selector });
+                        //self.do(params.on.end, undefined, {selector: selector});
+                        /* self.log('handleAnimationEnd');
+                        self.log('params.on.end');
+                        self.log(params.on.end); */
+                    }
+
+
+                    event.stopPropagation();
+
+                    if (elements)
+                        elements.forEach(function (element, index) {
+                            if (element)
+                                element.classList.remove('animate__animated', animationName);
+                        });
+                    resolve('Animation ended');
+                }
+
+                if (elements)
+                    elements.forEach(function (element, index) {
+                        if (element)
+                            element.addEventListener('animationend', handleAnimationEnd, { once: true });
+                    });
+            }
+        });
+    };
+
+    /*
+        this.animation = function (data) { // deprecated
+            
+            if (data.animation != undefined) {
+                if (data.animation == 'show') {
+                    $(data.object).css({'display':'block', opacity:1});
+                } else if (data.animation == 'hide') {
+                    $(data.object).css({'display':'none'});
+                } else {
+                    //if (data.autoDisplay == undefined) {data.autoDisplay = true};
+                    //var animationObject = self.cloneObject(animations[data.animation]);
+                    var animationObject = jQuery.extend({}, animations[data.animation]);
+                    //if (data.autoDisplay)
+                    //    if (data.animation == 'fadeIn') $(data.object).css({'display':'block'});
+                    if (data.reverse) {animationObject.name += 'Reverse'}
+                    if (data.duration !== undefined) {animationObject.duration = data.duration}
+    
+                    animationObject.complete = function () {
+                        if (data.autoDisplay) {
+                            if ((data.animation == 'fadeOut') || (data.animation == 'hide')) {
+                                $('data.object').css({'display':'none'});
+                            }
+                        }
+                        if (data.onComplete !== undefined) {
+                            self.do(data.onComplete);
+                        }
+                    }
+                    self.log('animationObject.name');
+                    self.log(animationObject.name);
+                    self.log('animationObject');
+                    self.log(animationObject);
+    
+                    // playKeyframe va aggiornato con
+                    // animate({from, to, ease, type, stiffness, dumping, mass, velocity, duration})
+                    // https://popmotion.io/#quick-start-animation-animate-keyframes-options
+                    //var obj = popmotion.styler($(data.object));
+                    //popmotion.animate(animationObject).start(obj.set); // $(data.object).css
+                    
+                    $(data.object).playKeyframe(animationObject);
+                }
+            } else {
+                $(data.object).resetKeyframe();
+                $(data.object).css({'opacity':1,'display':'block'});
+                self.log('ANIMATION UNDEFINED');
+                self.log(data);
+            }
+        }
+    
+        this.move = function (data) { // deprecated
+            var targetPos = {x:0,y:0};
+            if (data.target != 'center') { targetPos = {x:384,y:384}; }
+            else if (data.target !== undefined) {targetPos = self.getTransform(data.target);}
+            else {self.log(data);}
+            if (data.move == 'toTarget') {
+                    TweenMax.to(data.object, self.TweenMaxDuration(data.duration), { x: targetPos.x, y: targetPos.y});
+            } else if (data.move == 'fromTarget') {
+                TweenMax.from(this, self.TweenMaxDuration(data.duration), { x: targetPos.x, y: targetPos.y});
+            }
+            if (data.animation !== undefined) {
+                self.animation({object:data.object, animation:data.animation});
+            }
+        }
+    
+        this.TweenMaxDuration = function (duration) {
+            if (duration != undefined) {return Number(duration)/1000} else {return 0.667;}
+        }
+        */
+    // CSS CLASSES
+    this.addClassRule = function (ruleName, ruleParams) {
+        //self.log('addClassRule');
+        var ruleProperties = '{';
+        for (var property in ruleParams) {
+            if (typeof ruleParams[property] == 'object') {
+                self.addClassRule(ruleName + ' ' + property, ruleParams[property]);
+            } else {
+                ruleProperties += property + ':' + ruleParams[property] + ';';
+            }
+        }
+        ruleProperties += '}';
+        self.styleObj.sheet.insertRule(ruleName + ' ' + ruleProperties);
+    };
+
+    this.addApplyRule = function (ruleName, ruleParams) {
+        // Use @apply to inline any existing utility classes into your own custom CSS
+        // https://tailwindcss.com/docs/functions-and-directives#apply
+        self.styleObj.sheet.insertRule(ruleName + ' {@apply ' + ruleParams + '}');
+    };
+
+    this.findPlugin = function (name) {
+        if (self.json.plugins) {
+            for (var plugin of self.json.plugins) {
+                if (plugin.name == name) return plugin;
+            }
+        } else {
+            return false;
+        }
+    };
+
+    this.defineCss = function (cssObj) {
+        self.log('defineCss');
+
+        self.styleObj = document.createElement("style");
+
+        document.head.appendChild(self.styleObj);
+        self.styleObj.appendChild(document.createTextNode(""));
+
+        /*  self.styleObj.sheet.insertRule('@tailwind base;');
+            self.styleObj.sheet.insertRule('@tailwind components;');
+            self.styleObj.sheet.insertRule('@tailwind utilities;'); */
+        // shortcuts (must be improved / can't be extended)
+        /* if (self.json.shortcuts && self.json.shortcuts.class)
+            shortcuts = self.json.shortcuts.class; */
+        if (cssObj) {
+            if (Array.isArray(cssObj)) {
+                for (var cssElement of cssObj) {
+                    //console.log(cssElement);
+                    for (var elementName in cssElement) {
+                        //console.log(elementName);
+                        let valueWithData = self.replaceProperties(cssElement[elementName]);
+                        self.addClassRule(elementName, valueWithData);
+                    }
+                }
+            } else {
+                for (var elementName in cssObj) {
+                    let valueWithData = self.replaceProperties(cssObj[elementName]);
+                    self.addClassRule(elementName, valueWithData);
+                }
+            }
+        }
+
+        if (self.pluginsLoaded.tailwindcss) {
+            var plugin = self.findPlugin('tailwindcss');
+            //var config = (plugin) ? plugin.config : {preflight: false};
+            var config = (self.json.setup.config.tailwindcss) ? self.json.setup.config.tailwindcss : { preflight: false };
+            //if (self.json.style.theme) setup.theme = self.json.style.theme;
+            //loadPlugin(undefined, 'tailwind-config', undefined, undefined, JSON.stringify(config)) // version 2.2.0
+            if (tailwind)
+                tailwind.config = config;
+
+            else
+                console.log('tailwind object is undefined');
+        }
+
+        /*         // OBSOLETE
+                if (self.pluginsLoaded.twind && window.twind) {
+                    var plugin = self.findPlugin('twind');
+                    var config = (plugin) ? plugin.config : {preflight: false, mode:'silent'};
+                    //if (self.json.setup.target) setup.target = self.query(self.json.setup.target);
+                    //if (self.json.style.theme) setup.theme = self.json.style.theme;
+        
+                    window.twind.setup(config);
+        
+        
+                } */
+        /* if (self.pluginsLoaded.windicss && window.windicssRuntimeOptions) {
+
+            var config = self.json.style.windi || {
+                // enabled preflight
+                preflight: false,
+                // scan the entire dom tree to infer the classnames on page loaded
+                extractInitial: false,
+                // generate mock classes for browser to do the auto-completeion
+                mockClasses: false,
+                // the windi config you are used to put in `windi.setup.js`
+                setup: {},
+                theme: {extend: {}}
+            };
+            if (self.json.style.theme) setup.theme.extend = self.json.style.theme;
+            window.windicssRuntimeOptions = config;
+        } */
+        /* if (self.pluginsLoaded.unocss) {
+
+            var config = self.json.style.unocss || {  // -> self.json.plugins[].setup
+                rules: [
+                    // custom rules...
+                ],
+                presets: [
+                    // custom presets...
+                ],
+                // ...
+                };
+                if (self.json.style.theme) setup.theme = self.json.style.theme;
+                if (self.json.shortcuts) setup.shortcuts = self.json.shortcuts;
+
+                window.__unocss = config;
+                //alert(JSON.stringify(config));
+        } */
+        //self.do(data);
+    };
+
+    /*    this.createLoader = function (data) {
+            // !--<div class="preloader-wrapper"><div class="preloader"><img alt="Loading..."/></div></div>-->
+    
+            if (self.json.loader) $('.preloader img').attr('src', self.json.loader);
+            self.do(data);
+        } */
+    /*     this.preloadIcons = function (data) {
+            self.log('preloadIcons');
+            // to do: check for duplicated ids
+    
+            if (self.json.icons) {
+                if (!data.icons && self.json.icons) data.icons = self.cloneObject(self.json.icons);
+                if (data.icons) {
+                    var iconSet = Object.keys(data.icons)[0];
+                    var icons = data.icons[iconSet];
+                    delete data.icons[iconSet];
+                    if (icons.preload) {
+    
+    
+                        var ajax = new XMLHttpRequest();
+                        ajax.open("GET", icons.src, true);
+                        ajax.onload = function(e) {
+    
+                            if (this.status >= 200 && this.status < 400) {
+    
+                                self.log('Icon set loaded ' + iconSet);
+    
+                                var result = this.response; // responseText
+                                //self.log(result);
+                                var div = document.createElement("div");
+                                //var iconsHtml = new XMLSerializer().serializeToString(result);
+                                var iconsHtml = result;
+                                iconsHtml = self.replaceAll(iconsHtml, 'id="', 'id="' + iconSet + '_');
+                                div.innerHTML = iconsHtml;
+                                div.setAttribute("style", "display: none");
+                                //div.setAttribute("aria-hidden", "true");
+                                //document.getElementbyId('preloadIcons').appendChild(element);
+                                document.body.insertBefore(div, null);
+                                if (Object.keys(data.icons).length > 0)
+                                    self.preloadIcons(data);
+                                else
+                                    self.do(data);
+                            }
+                        }
+                        ajax.send();
+    
+                    } else {
+                        if (Object.keys(data.icons).length > 0)
+                                self.preloadIcons(data);
+                            else
+                                self.do(data);
+                    }
+                } else
+                    self.do(data);
+            } else {
+                self.do(data);
+            }
+        } */
+    /* this.initApp = function (data) {
+        self.log('initApp');
+
+        self.defineCss();
+
+        window.addEventListener('resize', self.resizeEvent);
+
+        if (self.json) { // can be self.json.init
+            //if (self.json.on.init)
+            if (self.json.on)
+                self.on(self.json.on);
+            
+            //else
+            //    self.log('no on init functions');
+        }
+        //self.do(data);
+    }
+    */
+    /* this.createUI = function (data) {
+        jsonic.do({
+            tasks:[
+                {task: self.firebaseInit},
+                {
+                    task: self.firebaseVerifyUser,
+                    params: {
+                        code: self.params.oobCode
+                    }
+                },
+                {task: self.getDevices, if: jsonic.userIn},
+                {task: self.defineCss},
+                {task: self.defineAnimations},   // animazioni css predefinite
+                {task: self.createHeader},
+                {task: self.createMenu, params: {
+                    container: '#menu',
+                    id: data.params.mode || 'guest'
+                }},
+                {task: jsonic.createPages}
+            ]
+        });
+    } */
+    /* this.openPageFromUrl = function(data){
+        jsonic.log('openPageFromUrl');
+        jsonic.log('self.params');
+        jsonic.log(self.params);
+
+        var pageId = '';
+
+        //if (localStorage.getItem('scanning')) {
+        //    self.hashopenTask({id:localStorage.getItem('scanningFile')});
+        //} else {
+
+        //self.disableFileIcons();
+
+        //var noDevices = (jsonic.userIn() && (!var.db.devices || Object.keys(var.db.devices).length == 0));
+        //if (noDevices && !self.params.d && !self.params.m) {
+        //    jsonic.gotoPage('devices');
+        //} else {
+
+        if (window.location.hash && window.location.hash !== '') {
+            //pageId = window.location.hash.substr(1);
+            self.hash();
+        } else {
+            if (self.params.p) // retro-compatibilità
+                pageId = self.params.p;
+            else
+                pageId = self.homePage();
+                self.gotoPage(pageId);
+        }
+
+        //}
+            self.do(data);
+    }
+*/
+    /*
+    // Load a script from given `url`
+    var loadPlugin = function(url) {
+        return new Promise(function(resolve, reject) {
+            const script = document.createElement('script');
+            script.src = url;
+
+            script.addEventListener('load', function() {
+                // The script is loaded completely
+                resolve(true);
+            });
+
+            document.head.appendChild(script);
+        });
+    };
+
+    // Perform all promises in the order
+    var waterfall = function(promises) {
+        return promises.reduce(
+            function(p, c) {
+                // Waiting for `p` completed
+                return p.then(function() {
+                    // and then `c`
+                    return c().then(function(result) {
+                        return true;
+                    });
+                });
+            },
+            // The initial value passed to the reduce method
+            Promise.resolve([])
+        );
+    };
+
+    // Load an array of scripts in order
+    var loadScriptsInOrder = function(arrayOfJs) {
+        self.log('loadScriptsInOrder');
+        self.log(arrayOfJs);
+        const promises = arrayOfJs.map(function(url) {
+            self.log(url);
+            return loadScript(url);
+        });
+        return waterfall(promises);
+    };
+    */
+    this.hash = function (path, args) {
+        self.log('hash');
+        var path = self.replaceProperties(path, args);
+        self.log(path);
+        window.location.hash = path;
+    };
+
+    this.page = function (path, args) {
+        self.log('page');
+        var path = self.replaceProperties(path, args);
+        self.log(path);
+        if (path.startsWith('#'))
+            window.location.hash = path;
+
+        else
+            window.location.href = path;
+        //window.location.hash = path;
+    };
+
+    this.hashChangeEvent = function () {
+        self.log('hashChangeEvent');
+        self.log(window.location.hash);
+
+
+        /* if (window.location.hash && window.location.hash !== '') {
+            var hashParams = window.location.hash.substr(1).split('/');
+            self.gotoPage(hashParams[0], hashParams[1]);
+        } else {
+            //pageId = self.homePage();
+            if (self.json.setup && self.json.setup.wordpress && self.json.setup.wordpress.slug)
+                self.gotoPage(self.json.setup.wordpress.slug);
+            else
+                self.gotoPage(self.homePage());
+        }
+
+        if (json && json.app && json.app.on && json.app.on.page) { // page event
+            self.do(json.app.on.page);
+        }
+        
+        if (json && json.actions && json.actions.init) { // obsolete
+            self.do(json.actions.init);
+        } */
+    };
+
+    /*     this.addPageListeners = function (data) {
+            self.log('addPageListeners');
+            
+            // Resize event
+            window.addEventListener('resize', self.resizeEvent);
+    
+            // Location hash (url) event
+            window.addEventListener('hashchange', self.hashChangeEvent);
+            //$(window).on('hashchange', self.hashChangeEvent);
+    
+            self.hashChangeEvent();
+    
+            self.do(data);
+    
+        } */
+    /* // testing
+    let findValues = function(obj, key, found) {
+        for (let localKey in obj) {
+            if (obj.hasOwnProperty(localKey)) {
+            let val = obj[localKey];
+            //self.log(localKey)
+            if (localKey === key) {
+                found.add(val)
+            } else {
+                if (typeof val === 'object') {
+                findValues(val, key, found)
+                }
+            }
+            }
+        }
+    }
+    function uniqueValue(obj, key, value) {
+        let found = new Set()
+        findValues(object, key, found)
+        return found.size === 1 && found.has(value);
+    } */
+    this.lookup = function (obj, k) {
+        for (var key in obj) {
+            var value = obj[key];
+
+            if (k == key) {
+                return [k, value];
+            }
+
+            if (typeof (value) === "object" && !Array.isArray(value)) {
+                var y = lookup(value, k);
+                if (y && y[0] == k) return y;
+            }
+            if (Array.isArray(value)) {
+                // for..in doesn't work the way you want on arrays in some browsers
+                //
+                for (var i = 0; i < value.length; ++i) {
+                    var x = lookup(value[i], k);
+                    if (x && x[0] == k) return x;
+                }
+            }
+        }
+
+        return null;
+    };
+
+    this.findValues = function (obj, key) {
+        //return Boolean(JSON.stringify(obj).indexOf('"' + string + '":') >= 0)
+        let matrix = [...JSON.stringify(obj).matchAll(new RegExp('\"?' + key + '\"?\:\s*\"([^,\"]+)', 'gi'))];
+        var results = [];
+        for (var element of matrix)
+            results.push(element[1]);
+        return results;
+        //return Boolean(JSON.stringify(obj).match(new RegExp('\"?' + key + '\"?\:\s+\"' + value + '\"'))) // JSON5 compatible
+    };
+
+    // testing
+    function findKey(obj, key) {
+        for ([k, v] of Object.entries(obj)) {
+            if (k == key) return v;
+            if (typeof v === 'object' && v !== null) {
+                let found = findKey(v, key);
+                if (found) return found;
+            }
+        }
+    }
+
+
+    // lookup in json
+    this.keyInJson = function (obj, string) {
+        //return Boolean(JSON.stringify(obj).indexOf('"' + string + '":') >= 0)
+        return Boolean(JSON.stringify(obj).match(new RegExp('\"?' + string + '\"?\:'))); // JSON5 compatible
+    };
+
+    // lookup in json
+    this.valueInJson = function (obj, string) {
+        //return Boolean(JSON.stringify(obj).indexOf('"' + string + '":') >= 0)
+        return Boolean(JSON.stringify(obj).match(new RegExp('\"?' + string + '\"?'))); // JSON5 compatible
+    };
+
+    /* this.keyInFiles = function (string) {
+        var found = self.keyInJson(self.options, string); // in main app options: jsonic = jsonicApp(options)
+        for (fileName in self.modules) {
+            if (fileName !== 'resources' && self.keyInJson(self.modules[fileName], string))
+                found = true;
+        }
+        return found;
+    } */
+    /*     this.openPageFromUrl = function (data) {
+            self.log('openPageFromUrl');
+            self.hashChangeEvent();
+            self.do(data);
+        }; */
+    /*     this.addEventListeners = function (data) {
+            self.log('addEventListeners');
+    
+            // Resize event
+            window.addEventListener('resize', self.resizeEvent);
+    
+            // Location hash (url) event
+            window.addEventListener('hashchange', self.hashChangeEvent);
+            $(window).on('hashchange', self.hashChangeEvent);
+    
+            self.hashChangeEvent(); // add here on.hashchange
+    
+            // Fullscreen event
+            if (screenfull && screenfull.isEnabled) {
+                screenfull.on('change', () => {
+                    self.log('Am I fullscreen?', screenfull.isFullscreen ? 'Yes' : 'No');
+                    if (screenfull.isFullscreen) {
+                        var.fullscreen = true;
+                        if (var.onFullScreenOpen) self.do(var.onFullScreenOpen);
+                    } else {
+                        var.fullscreen = false;
+                        if (var.onFullScreenClose) self.do(var.onFullScreenClose);
+                    }
+                });
+            }
+    
+            if (json && json.app && json.app.on) {
+    
+                if (json.app.on.thunkable && json.app.on.thunkable.receiveMessage)
+                    window.receiveMessage(function (message) {
+                        //document.querySelector('#message').value = message;
+                        jsonic.functions(json.app.on.thunkable.receiveMessage, message, undefined);
+                    });
+                    
+                var container = json.app.container || 'body';
+                self.on(json.app.on, {container: container});
+                self.do(data);
+            } else {
+                self.do(data);
+            }
+        } */
+    /* this.loadIconset = function (data) {
+        self.log('loadIconset');
+
+
+        if (self.json.iconset) {
+            if (!self.pluginsLoaded['iconify']) {
+                let plugin = self.json.resources.pluginsFunctions['iconify'];
+                self.pluginsLoader([plugin], self.loadIconset, [data]);
+            } else {
+                var iconset;
+
+                if (!self.json.iconset[0])
+                    iconset = [self.json.iconset];
+                else
+                    iconset = self.json.iconset;
+
+                for (var index in iconset) {
+                    
+                    if (Iconify.addCollection(iconset[index]))
+                        self.log('added iconset '+ iconset[index].prefix);
+                    else
+                        self.log('can\t add iconset '+ iconset[index].prefix);
+                    //alert(x);
+                }
+                self.do(data);
+
+            }
+            
+        } else {
+            self.do(data);
+        }
+
+    } */
+    // Si potrebbe creare una nuova istanza di jsonicApp
+    this.start = function () {
+
+        self.log('start');
+
+        //if (params.onFullScreenOpen) var.onFullScreenOpen = params.onFullScreenOpen;
+        //if (params.onFullScreenClose) var.onFullScreenClose = params.onFullScreenClose;
+        // PWA
+        /* if ('serviceWorker' in navigator) {
+            // Register a service worker hosted at the root of the
+            // site using the default scope.
+            navigator.serviceWorker.register('/app/assets/pwa/sw.js').then(function(registration) {
+                self.log('Service worker registration succeeded:', registration);
+            }, function(error) {
+                self.log('Service worker registration failed:', error);
+            });
+        } else {
+            self.log('Service workers are not supported.');
+        } */
+        let deferredPrompt;
+
+        window.addEventListener('beforeinstallprompt', (e) => {
+            // Prevent Chrome 67 and earlier from automatically showing the prompt
+            e.preventDefault();
+            // Stash the event so it can be triggered later.
+            deferredPrompt = e;
+        });
+
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
+            self.json.setup.darkMode = e.matches ? "dark" : false;
+        });
+
+        // DEFINE ICONSET (iconify)
+        if (self.json.iconset) {
+            if (!self.pluginsLoaded['iconify']) {
+                let plugin = self.json.resources.pluginsFunctions['iconify'];
+                self.pluginsLoader([plugin], self.start);
+                return false;
+            } else {
+                var iconset;
+
+                if (!self.json.iconset[0])
+                    iconset = [self.json.iconset];
+
+                else
+                    iconset = self.json.iconset;
+
+                for (var index in iconset) {
+
+                    if (Iconify.addCollection(iconset[index]))
+                        self.log('added iconset ' + iconset[index].prefix);
+
+                    else
+                        self.log('can\t add iconset ' + iconset[index].prefix);
+                    //alert(x);
+                }
+
+            }
+
+        }
+
+        // DEFINE CSS
+        //self.defineCss(); // TO DO: only additional css (do it on load module success)
+        // ADD RESIZE LISTENER (for dynamic styles) TO DO: check it
+        window.addEventListener('resize', self.resizeEvent);
+
+        // PAGE
+        if (!self.json.setup.page) self.json.setup.page = {};
+        self.json.setup.page.hash = window.location.hash.substr(1);
+
+        // DO / ON
+        /* if (self.json) {
+            if (self.json.do)
+                self.do(self.json.do, undefined, self.json.container);
+
+            if (self.json.on)
+                self.on(self.json.on, self.json.container);
+        } */
+        var selector = self.json.selector || self.json.container;
+
+        /* if (self.json.do)
+            self.do(self.json.do, undefined, selector); */
+        // should go action/run
+        if (self.json.on)
+            self.on(self.json.on, selector);
+
+    };
+
+    this.extendJson = function (jsonBase, jsonExtension) {
+        // TO DO: should be renamed in extendApp (or executeModule) because extend self.json and add CSS style
+        if (jsonExtension.css) self.defineCss(jsonExtension.css);
+        if (jsonExtension.functions) self.extendFunctions(jsonExtension.functions);
+
+        for (var key in jsonExtension) {
+            // AGGIUNGERE ALL'ARRAY DELLE AZIONI ON.INIT...
+            if (key == 'on') {
+                for (var subKey in jsonExtension[key]) {
+                    if (typeof jsonExtension[key][subKey] !== 'string') {
+                        //jsonBase[key][subKey] = self.extend({}, jsonBase[key][subKey], jsonExtension[key][subKey]);
+                        if (!jsonBase[key][subKey]) jsonBase[key][subKey] = [];
+                        jsonBase[key][subKey].push(jsonExtension[key][subKey]);
+                    } else {
+                        jsonBase[key][subKey] = jsonExtension[key][subKey];
+                    }
+                }
+            } else if (key == 'parts' || key == 'shortcuts') { // combine subelements
+                for (var subKey in jsonExtension[key]) {
+                    if (typeof jsonExtension[key][subKey] !== 'string')
+                        jsonBase[key][subKey] = self.extend({}, jsonBase[key][subKey], jsonExtension[key][subKey]);
+
+                    else
+                        jsonBase[key][subKey] = jsonExtension[key][subKey];
+                }
+                /* } else if (key == 'css') {
+                    for (var subKey in jsonExtension[key]) {
+                        if (typeof jsonExtension[key][subKey] !== 'string')
+                            jsonBase[key][subKey] = self.extend({}, jsonBase[key][subKey], jsonExtension[key][subKey]);
+                        else
+                            jsonBase[key][subKey] = jsonExtension[key][subKey];
+                    } */
+                /* } else if (key == 'app') { // to do: obsolete
+                    for (var subKey in jsonExtension[key]) {
+                        if (typeof jsonExtension[key][subKey] !== 'string')
+                            jsonBase[key][subKey] = self.extend({}, jsonBase[key][subKey], jsonExtension[key][subKey]);
+                        else
+                            jsonBase[key][subKey] = jsonExtension[key][subKey];
+                    } */
+            } else if (key == 'iconset' || key == 'plugins') { // combine arrays
+                if (!jsonBase[key]) jsonBase[key] = [];
+                jsonBase[key] = jsonBase[key].concat(jsonExtension[key]);
+            } else {
+                if (key == 'css') {
+                } else {
+                    jsonBase[key] = self.extend({}, jsonBase[key], jsonExtension[key]);
+                }
+            }
+        }
+        return jsonBase;
+    };
+
+    this.loadModuleFromDb = function (data) {
+        self.log('loadModuleFromDb');
+        self.firebaseGet('jsonic', function (result) {
+            if (result.success) {
+                self.log('firebase get SUCCESS');
+                for (codeKey in result.data)
+                    if (result.data[codeKey].code)
+                        self.extendJson(json, result.data[codeKey].code);
+                //self.log('json');
+                //self.log(json);
+                //if (params.success) self.do(params.success,result.data);
+            } else {
+                self.log('firebase get ERROR');
+                //if (params.error) self.do(params.error, result.error);
+                // alert errore di connessione. alert riprova
+            }
+            self.do(data);
+            //self.do(data);
+        });
+    };
+
+    this.modules = {};
+    this.modulesLoading = {};
+
+    this.fileType = function (fileName) {
+        return /(?:\.([^.]+))?$/.exec(fileName)[1];
+    };
+
+    this.jsoncToJson = function (jsoncText) {
+        return jsoncText.replace(/\/\*[\s\S]*?\*\/|([^\\:]|^)\/\/.*$/gm, '$1').replace(/\r/, "\n").replace(/\n[\n]+/, "\n");
+        // https://stackoverflow.com/questions/244777/can-comments-be-used-in-json/24545329
+    };
+    //var json = jsoncToJson('https://fantacards.com/app/data.jsonc');
+    //console.log(json);
+    this.loadModule = function (mod) {
+        /* self.log('loadModule');
+        self.log(mod); */
+        // params: {files, onComplete}
+        // self.cloneObject(params.json) to avoid to remove from initial params
+        //if (typeof setup.modules == 'string') setup.modules = [setup.modules];
+        if (!self.modulesLoading[mod.name] && !self.modules[mod.name]) {
+            self.modulesLoading[mod.name] = true;
+
+            return new Promise(function (resolve, reject) {
+                //mod = self.replaceProperties(mod);
+                //self.log(mod);
+
+                const getAPIData = new XMLHttpRequest();
+                getAPIData.open("GET", mod.url);
+                getAPIData.onload = function () {
+                    self.modulesLoading[mod.name] = false;
+                    //console.log(getAPIData);
+                    let responseText = getAPIData.responseText;
+                    if (self.fileType(getAPIData.responseURL) == 'jsonc')
+                        responseText = self.jsoncToJson(responseText);
+                    // try
+                    const result = JSON.parse(responseText);
+                    // error self.log('Wrong JSON in module '+ mod.name);
+                    if (self.isJson(result)) {
+                        self.modules[mod.name] = result;
+                        self.extendJson(self.json, result);
+                        self.log('Loaded module ' + mod.name, 'grey');
+                    } else {
+                        self.log('Wrong JSON in module ' + mod.name, 'red');
+                    }
+                    resolve();
+                };
+                getAPIData.onerror = function () {
+                    self.modulesLoading[mod.name] = false;
+                };
+                getAPIData.send();
+            });
+
+        } else {
+            self.log('Module ' + mod.name + ' already loaded', 'orange');
+        }
+
+
+    };
+
+    /*   var loadPlugin = function (url) {
+            //self.log('loading ' + url);
+    
+            return new Promise(function(resolve, reject) {
+                var type = 'script';
+                if (url.endsWith('.css')) type = 'link';
+    
+                let obj = document.createElement(type);
+    
+                // obj.src = url;
+                obj.async = false;
+                obj.onload = function() {
+                    resolve(url);
+                };
+                obj.onerror = function() {
+                    self.log('error loading: '+url);
+                    reject(url);
+                };
+    
+                if (type === 'script') {
+                    if (url) obj.src = url;
+                    //if (code) obj.text = code;
+                    obj.location = document.body;
+                    document.body.appendChild(obj);
+                } else {
+                    obj.href = url;
+                    obj.rel = 'stylesheet';
+                    obj.type  = 'text/css';
+                    obj.location = document.head;
+                    document.head.appendChild(obj);
+                }
+    
+                //self.log('obj');
+                //self.log(obj);
+            });
+        }  */
+    var loadPlugin = function (params) {
+        //self.log('loading ' + url);
+
+        return new Promise(function (resolve, reject) {
+            var tag = 'script', type = 'text/javascript';
+            if (params.type == 'script') { tag = 'script'; type = 'text/javascript'; }
+            else if (params.type == 'module') { tag = 'script'; type = 'module'; }
+            else if (params.type == 'tailwind-config') { tag = 'script'; type = 'tailwind-config'; }
+            else if (params.type == 'link') { tag = 'link'; type = 'text/css'; }
+            else if (params.type == 'font') { tag = 'link'; type = undefined; }
+            //if (!tag)
+            //    tag = (url.endsWith('.js')) ? 'script' : 'link';
+            let obj = document.createElement(tag);
+            if (params.content)
+                obj.appendChild(document.createTextNode(params.content));
+
+            obj.async = false;
+            obj.onload = function () {
+                self.pluginsLoaded[params.name] = { version: "1.0.0" };
+                self.log('Loaded plugin ' + params.name, 'grey');
+                resolve(params.url);
+            };
+            obj.onerror = function () {
+                self.log('Error loading plugin ' + params.url, 'red');
+                reject(params.url);
+            };
+
+            if (tag === 'script') {
+                if (params.url) obj.src = params.url;
+                //if (code) obj.text = code;
+                obj.location = document.body;
+                obj.type = type || 'text/javascript';
+                /* if (type == 'tailwind-config') {
+                    self.log('obj');
+                    self.log(obj);
+                } */
+                document.body.appendChild(obj);
+            } else if (tag === 'link') {
+                obj.rel = params.rel || 'stylesheet';
+                obj.location = document.head;
+                if (params.url) obj.href = params.url;
+                if (type) obj.type = type;
+                if (params.as) obj.as = params.as;
+                document.head.appendChild(obj);
+            }
+        });
+    };
+
+
+    /*     var loadPlugin = function (url, tag, rel, as) {
+            //self.log('loading ' + url);
+    
+            //alert(url);
+    
+            return new Promise(function(resolve, reject) {
+                if (tag == 'js') tag = 'script';
+                if (tag == 'css') tag = 'link';
+                if (!tag)
+                    tag = (url.endsWith('.js')) ? 'script' : 'link';
+    
+                let obj = document.createElement(tag);
+    
+                obj.async = false;
+                obj.onload = function() {
+                    self.log('loaded plugin: '+url);
+                    resolve(url);
+                };
+                obj.onerror = function() {
+                    self.log('error loading: '+url);
+                    reject(url);
+                };
+    
+                if (tag === 'script') {
+                    if (url) obj.src = url;
+                    //if (code) obj.text = code;
+                    obj.location = document.body;
+                    document.body.appendChild(obj);
+                } else {
+                    obj.href = url;
+                    obj.rel = rel || 'stylesheet';
+                    if (obj.rel == 'stylesheet')
+                        obj.type = 'text/css';
+                    if (as)
+                        obj.as = as;
+                    obj.location = document.head;
+                    document.head.appendChild(obj);
+                }
+            });
+        }
+    */
+    this.uiLoaded = {};
+    this.pluginsLoaded = {};
+
+    //The Firebase Realtime Database lets you store and query user data, and makes it available between users in realtime
+    this.findUrl = function (array, url) {
+        for (var item of array) {
+            if (item.url == url)
+                return true;
+        }
+    };
+
+    /*     this.export = function (params) {
+            // {name, data}
+            if (params && params.name && params.data) {
+                let element = document.createElement('a');
+                element.style.display = 'none';
+                element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(JSON.stringify(params.data)));
+                element.setAttribute('download', params.name);
+                document.body.appendChild(element);
+                element.click();
+                document.body.removeChild(element);
+            } else {
+                self.log('"export" requires name and data attributes');
+            }
+        } */
+    /*     this.exportData = function (path) {
+            // data
+            const fileName = self.replaceAll(path, ' ', '.') + '.json';
+            const jsonData = self.element({path: path, root: params.root});
+            self.export({name: fileName, data: jsonData});
+        }
+            */
+    this.loadPlugins = function () {
+        //self.log('loadPlugins');
+        //var setup = json.setup;
+        // TEMPORAL API
+        // https://cdn.jsdelivr.net/npm/@cogitatio/tc39-temporal@0.0.12-alpha.2/index.js
+        // https://cdn.jsdelivr.net/npm/cogitatio-tc39-temporal@1.0.2/index.js
+        /* <!-- <script type="module">
+        import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.0.2/firebase-app.js'
+        
+        // If you enabled Analytics in your project, add the Firebase SDK for Google Analytics
+        import { analytics } from 'https://www.gstatic.com/firebasejs/9.0.2/firebase-analytics.js'
+        
+        // Add Firebase products that you want to use
+        import { auth } from 'https://www.gstatic.com/firebasejs/9.0.2/firebase-auth.js'
+        import { firestore } from 'https://www.gstatic.com/firebasejs/9.0.2/firebase-firestore.js'
+        </script> --> */
+        var filesToLoad = [];
+
+        // plugins
+        if (self.json.plugins) {
+            for (var index in self.json.plugins) {
+
+                var plugin = self.json.plugins[index];
+
+                //self.log('loading ' + plugin.name + '...');
+                var version = plugin.version || '';
+
+                if (!plugin.ondemand) { // V. >= 1.0.2
+
+                    if (plugin.url) { // directly loaded
+                        // plugin.name and version are needed?
+                        if (!self.findUrl(filesToLoad, plugin.url)) { // not included yet
+                            filesToLoad.push({ name: plugin.name, url: plugin.url, type: plugin.type });
+                        }
+
+                    } else { // from resources (TO DO: remove)
+
+                        var pluginsFiles = plugin.files || self.json.resources.pluginsFiles[plugin.name];
+
+                        // moved in loadPlugin =   ... onload
+                        /* self.pluginsLoaded[plugin.name] = {
+                            version: version
+                        }; */
+                        if (!Array.isArray(pluginsFiles))
+                            pluginsFiles = [pluginsFiles];
+
+                        for (item of pluginsFiles) {
+                            var url = self.replaceAll(item.url, '{version}', version);
+                            if (plugin.params) url += '?' + plugin.params;
+                            let pluginName = plugin.name || item.name;
+                            if (!url || !self.findUrl(filesToLoad, url)) // not included yet
+                                filesToLoad.push({ name: pluginName, url: url, type: item.type, content: item.content });
+                        }
+
+                    }
+                }
+            }
+        }
+
+        // ui
+        /* for (var index in config.ui) {
+
+            var configUI = config.ui[index];
+            
+            //self.log('loading ' + configUI.name + '...');
+
+            var version = configUI.version || '';
+            var uiFiles = self.json.resources.uiFiles[configUI.name];
+
+            if (!Array.isArray(uiFiles))
+                uiFiles = [uiFiles];
+
+            for (item of uiFiles) {
+                var url = self.replaceAll(item.url, '{version}', version);
+                if (!self.findUrl(filesToLoad, url)) // not included yet
+                    filesToLoad.push({url: url, type: item.type, content: item.content});
+            }
+        } */
+        // Auto load Google Fonts
+        // TO DO: comment
+        for (fontName of self.findValues(self.json, 'font-family')) {
+            if (self.json.resources.googleFonts.indexOf(fontName) >= 0) {
+                //alert(fontName);
+                fontName = self.replaceAll(fontName, ' ', '+');
+                //filesToLoad.push({type: 'font', url:'https://fonts.googleapis.com/css2?family='+fontName+'&display=swap', rel:'preload',  as:'font'});
+                filesToLoad.push({ type: 'link', url: 'https://fonts.googleapis.com/css2?family=' + fontName });
+                // +'&display=swap' // https://css-tricks.com/almanac/properties/f/font-display/
+            }
+        }
+
+        // Auto load plugins (firebase only)
+        /* if (config.plugins && config.plugins.autoload) {
+            self.log('plugins autoload');
+            //for (var index in self.json.resources.pluginsFunctions) {
+            var pluginFunctions =  self.json.resources.pluginsFirebase; // pluginFunctions
+            for (var index in self.json.resources.pluginsFirebase) {
+                //self.log(index + ':' + self.keyInFiles(index));
+                if (self.keyInFiles(index)) {
+                    if (pluginFunctions[index]) {
+
+                        var plugins = [];
+                        if (Array.isArray(pluginFunctions[index]))
+                            plugins = pluginFunctions[index];
+                        else
+                            plugins = [pluginFunctions[index]];
+
+                        for (plugin of plugins) {
+
+                            self.log('loading ' + plugin.name + '...');
+                            self.pluginsLoaded[plugin.name] = version;
+
+                            var version = plugin.version || '';
+                            var pluginsFiles = self.json.resources.pluginsFiles[plugin.name];
+
+                            if (!Array.isArray(pluginsFiles))
+                                pluginsFiles = [pluginsFiles];
+
+                            for (item of pluginsFiles) {
+                                var url = self.replaceAll(item.url, '{version}', version);
+                                if (!self.findUrl(filesToLoad, url)) // not included yet
+                                    filesToLoad.push({url: url, type: item.type, content: item.content});
+                            }
+                        }
+                    }
+                }
+            }
+        } */
+        // load multiple scripts in sequence
+        // https://bit.ly/3nT5Ky1
+        // one after another
+        // https://medium.com/@asimmittal/sequential-script-loading-in-javascript-a0b77ca9467c
+        // load multi js and css
+        // https://sphacks.io/load-multiple-js-scripts-dynamically-without-jquery/
+        // save all Promises as array
+        let promises = [];
+
+        //promises.push(loadPlugin("https://fonts.googleapis.com", 'link', 'preconnect'));
+        //promises.push(loadPlugin("https://fonts.gstatic.com", 'link', 'preconnect'));
+        filesToLoad.forEach(function (item) {
+            if (item.url)
+                promises.push(loadPlugin({ name: item.name, url: item.url, type: item.type, rel: item.rel, as: item.as, content: item.content }));
+
+            else
+                loadPlugin({ name: item.name, url: item.url, type: item.type, rel: item.rel, as: item.as, content: item.content });
+            //promises.push(loadPlugin(url));
+        });
+
+
+        //self.log(filesToLoad);
+        Promise.all(promises).then(function () {
+
+            self.start();
+
+        }).catch(function (script) {
+            self.log('Failed to load');
+            self.log(script);
+        });
+
+    };
+
+    this.modulesList = function (modulesObj) {
+        /*         self.log('modulesList');
+                self.log('modulesObj');
+                self.log(modulesObj);
+            */
+        var modulesList = [];
+        if (modulesObj) {
+            for (key in modulesObj) {
+                var mod = self.replaceProperties(modulesObj[key]);
+                modulesList = modulesList.concat(mod);
+            }
+        }
+        return self.replaceProperties(modulesObj);
+    };
+
+    this.loadModules = function () {
+        //self.log('loadModules');
+        if (self.json.setup.modules) {
+            var modules = self.replaceProperties(self.json.setup.modules); // replace {page:id}
+
+
+            /* self.log('modules');
+            self.log(modules); */
+            var promises = [];
+            modules.forEach(function (item) {
+                if (!self.modulesLoading[item.name] && !self.modules[item.name]) {
+                    promises.push(self.loadModule(item));
+                }
+            });
+
+            Promise.all(promises).then(function () {
+
+                self.loadPlugins();
+
+            }).catch(function (file) {
+                self.log('Failed to load');
+                self.log(file);
+            });
+
+        } else {
+            self.loadPlugins();
+        }
+
+    };
+
+    this.moduleExecuted = {};
+
+    this.addModule = function (params) {
+
+        if (!self.modules[params.name]) {
+
+            var promises = [];
+            //var ideModule = {name: 'ide', url: 'https://jsonic.io/app/modules/ide.json'};
+            promises.push(self.loadModule(params));
+
+            Promise.all(promises).then(function () {
+
+                if (!self.moduleExecuted[params.name]) {
+                    //self.log('all modules loaded');
+                    var module = self.modules[params.name];
+
+                    if (module.html) {
+                        self.moduleExecuted[params.name] = true;
+                        self.html(module.html);
+                        // TO DO: add also on, funcions ...
+                    }
+                }
+                if (params.success)
+                    self.do(params.success);
+                //self.do(params.success);
+            }).catch(function (file) {
+                self.log('Failed to load');
+                self.log(file);
+                if (params.error)
+                    self.do(params.error);
+                //self.do(params.error);
+            });
+        } else {
+            if (params.success)
+                self.do(params.success);
+            //self.do(params.success);
+        }
+    };
+
+    this.loadModuleGlobal = function () {
+        self.log('loadModuleGlobal');
+
+        var promises = [];
+
+        var modules = []; // we need it to keep the order of the modules given in the config
+        for (let key in self.json.setup.modules) {
+            var mod = self.replaceProperties(self.json.setup.modules[key]);
+            modules = modules.concat(self.cloneObject(mod));
+        }
+        /* self.log('modules');
+        self.log(modules); */
+        for (let mod of modules)
+            promises.push(self.loadModule(mod));
+        //var pageModule = {name: 'global', url: '/app/modules/global.json'};
+        //var ideModule = {name: 'ide', url: '/app/modules/ide.json'};
+        //promises.push(self.loadModule(ideModule)); // if admin
+        Promise.all(promises).then(function () {
+            //self.log('page module loaded');
+            //if (self.json.modules) {
+            //self.json.setup.modules = self.cloneObject(self.json.modules); // required modules
+            //self.json.setup.modules.app.push(pageModule); // page module
+            //self.json.setup.modules.app.push(ideModule); // ide module if admin
+            self.loadModules();
+            //}
+        }).catch(function (file) {
+            self.log('Failed to load');
+            self.log(file);
+        });
+    };
+
+    /*     this.extendJsonFromModules = function () {
+            self.log('extendJsonFromModules');
+            for (var mod in self.modules) {
+                //self.extendJsonFromElement(self.modules[mod.name]);
+                self.extendJson(json, self.modules[mod]);
+            }
+        } */
+    /* DA SISTEMARE - TEMPORANEO */
+    this.code = function (params, selectorParams) {
+        /* self.log("params");
+        self.log(params);
+        self.log("selectorParams");
+        self.log(selectorParams); */
+
+        let container = self.selector(params.selector || params.container) || self.selector(selectorParams);
+        //var container = self.selector(params) || self.selector(selectorParams);
+        self.log("this.code");
+        self.log("container");
+        self.log(container);
+
+        var editorContainer = container.slice(1);
+        //if (editorContainer.startsWith('#')) {editorContainer.slice(1);} // remove #
+        var editor = ace.edit(editorContainer);
+
+        var value = params.value; // else value = params;
+        if (!params.do || (params.do == 'set')) {
+
+            //var langTools = ace.require('ace/ext/language_tools');
+            if (params.theme) editor.setTheme(params.theme); // "ace/theme/monokai"
+            var editorMode = params.mode || "ace/mode/json";
+            editor.getSession().setMode(editorMode);
+
+            var editorStyle = self.extend({
+                background: "rgba(255,255,255,0)"
+            }, params.style);
+
+            //$(container).css(editorStyle); //editor.container.style
+            /* self.css({
+                style: editorStyle
+            }, {
+                container: container
+            }); */ // Eventualmente
+            var codeOptions = self.extend({
+                fontSize: "11pt",
+                selectionStyle: "line",
+                highlightActiveLine: false,
+                wrap: true,
+                showLineNumbers: false,
+                showGutter: false,
+                fixedWidthGutter: false,
+                readOnly: true,
+                //enableBasicAutocompletion: false,
+                //enableSnippets: false,
+                //enableLiveAutocompletion: false,
+            }, params.options);
+
+            // https://github.com/ajaxorg/ace/wiki/Configuring-Ace
+            editor.setOptions(codeOptions);
+
+            var codeString;
+            if (typeof value == 'string')
+                if (editorMode == "ace/mode/json")
+                    codeString = JSON.stringify(JSON.parse(value), null, '\t'); // json formatting
+
+                else
+                    codeString = value;
+            else {
+                if (editorMode == "ace/mode/json")
+                    codeString = JSON.stringify(value, null, '\t');
+                else {
+                    var functionObj = self.docElement(value.function);
+                    var functionParams = value.params;
+                    codeString = functionObj(functionParams);
+                }
+            }
+
+            var codeRows = codeString.split(/\r\n|\r|\n/).length;
+            // $(container).css({
+            //     height: Number(21 * codeRows) + 'px'
+            // });
+            /* self.css({
+                style: {
+                    height: Number(21*codeRows)+"px"
+                }
+            }, {
+                container: container
+            }); */ // Eventualmente
+            editor.setValue(codeString, -1);
+        } else if (params.do == 'get') {
+            return editor.getValue();
+        } else {
+            self.log('"code" function requires value param');
+        }
+
+    };
+
+    this.init = function (appString, modulesString) {
+        console.log('init');
+        // app(String: app url) (Object = json app)
+        // modules(String): modules "ui,daisyui,svg"
+        /* json = {  // the jsonic app tree
+            blocks: {},
+            parts: {},
+            css: {},
+            do: {},
+            on: {},
+            texts: {},
+            data: {},
+            var: {}
+        }; */
+        //self.app = self.getParams(); // from url
+        if (typeof appString == 'string') {
+
+            let modules = [{ "name": "app", "url": appString }];
+            let modulesNames = (modulesString) ? modulesString.split(",") : [];
+            for (let modName of modulesNames) {
+                modules.push({ "name": modName, "url": "jsonic/modules/" + modName + ".json" });
+            }
+
+            self.json.setup = { "modules": modules };
+
+        } else {
+
+            if (appString) self.extendJson(self.json, appString);
+
+            /* // TO DO: remove the requirement of resources.json
+            if (!self.json.setup || !self.json.setup.modules) {
+                self.json.setup = {
+                    "modules": [
+                        {
+                            "name": "resources",
+                            "url": "https://jsonic.io/app/modules/lib/resources.json"
+                        }
+                    ]
+                }
+            } */
+            if (appString.css) self.defineCss(appString.css); // can be removed?
+
+        }
+
+        self.loadModuleGlobal();
+    };
+
+    function toJsonNode(xml) {
+        let obj = {};
+        if (xml.nodeType == 1) {
+            if (xml.attributes.length > 0) {
+                obj["attr"] = {};
+                for (let j = 0; j < xml.attributes.length; j++) {
+                    let attribute = xml.attributes.item(j);
+                    obj["attr"][attribute.nodeName] = attribute.nodeValue;
+                }
+            }
+        }
+        if (xml.hasChildNodes()) {
+            for (let i = 0; i < xml.childNodes.length; i++) {
+                let item = xml.childNodes.item(i);
+                let nodeName = item.nodeName;
+                if (item.nodeType == 3 && nodeName == "#text") {
+                    if (/^\s+$/.test(item.nodeValue)) {
+                    } else obj.text = item.nodeValue;
+                } else {
+                    if (typeof obj[nodeName] == "undefined") {
+                        obj[nodeName] = toJsonNode(item);
+                    } else {
+                        if (!Array.isArray(obj[nodeName]))
+                            obj[nodeName] = [obj[nodeName]];
+                        obj[nodeName].push(toJsonNode(item));
+                    }
+                }
+            }
+        }
+        return obj;
+    }
+
+    this.htmlToJson = function (text) {
+        let xmlDoc = new DOMParser().parseFromString(text, "text/xml");
+        return JSON.stringify(toJsonNode(xmlDoc), null, "\t");
+    };
+
+    this.elementToJson = function (selector) {
+        let el = document.querySelector(selector);
+        return self.htmlToJson(el.getHTML());
+    };
+
+    function clearSelection() {
+        if (window.getSelection) { window.getSelection().removeAllRanges(); }
+        else if (document.selection) { document.selection.empty(); }
+    }
+
+    this.importHtml = function (htmlText) {
+        // use modal and monaco js
+        if (!htmlText)
+            htmlText = prompt("html/xml");
+        if (htmlText) {
+            let jsonDoc = self.htmlToJson(htmlText);
+            let textarea = document.createElement("textarea");
+            textarea.value = jsonDoc;
+            textarea.style = "position: absolute; z-index: 999999; background: white; width:100vw; height:100vh";
+            //document.body.innerHTML = '';
+            document.body.appendChild(textarea);
+            //document.execCommand("copy");
+            textarea.addEventListener('click', function () {
+                textarea.remove();
+                navigator.clipboard.writeText(textarea.value).then(() => console.log('copied!'));
+            });
+            //console.log(JSON.parse(jsonDoc));
+        }
+    };
+
+    // https://github.com/ktskts/html2json/blob/master/src/html2json.js
+    /*
+        var Util = {
+            div : null,
+            attrs: "id,name,style,class,value,src,href,width,height,title,type".split(","),
+            getJson: function(childNodes, attrs, length) {
+                var result = [];
+                for ( var i = 0, len = childNodes.length; i < len; i++) {
+                    var item = childNodes[i];
+                    if (item.nodeType == 3) { // textual content in an element or attribute
+                        result.push({
+                            text : item.nodeValue
+                        })
+                    } else if (item.nodeType == 1) { // element
+                        var obj = {
+                            //tag : item.nodeName.toLowerCase(),
+                            attr : {}
+                        };
+                        var flag = false;
+                        //for ie6
+                        if (attrs) {
+                            for (var j = 0; j < length; j++){
+                                if (attrs[j] == 'style'){
+                                    var sStyle = item.getAttribute('style').cssText;
+                                    if(sStyle){
+                                        obj.attr["style"] = sStyle;
+                                        flag = true;
+                                    }
+                                } else {
+                                    var attrNode = item.attributes[attrs[j]];
+                                    if(attrNode && attrNode.nodeType === 2){
+                                        var value = attrNode.value;
+                                        if(value && value != 'null'){
+                                            obj.attr[attrs[j]] = value;
+                                            flag = true;
+                                        }
+                                    }
+                                }
+                            }
+                        } else {
+                            if (item.attributes.length) {
+                                for ( var n = 0, l = item.attributes.length; n < l; n++) {
+                                    var value = item.attributes[n].value;
+                                    if(value){
+                                        flag = true;
+                                        obj.attr[item.attributes[n].name] = value;
+                                    }
+                                }
+                            }
+                        }
+    
+                        let nodeOut = {};
+                        let nodeTag = item.nodeName.toLowerCase();
+                        let nodeChild = Util.getJson(item.childNodes, attrs, length);
+                        nodeOut[nodeTag] = {};
+                        
+    
+                        self.log( 'item.childNodes');
+                        self.log( item.childNodes);
+                        self.log( 'nodeChild');
+                        self.log( nodeChild);
+                        //self.log( item.textContent);
+        
+    
+                        nodeOut[nodeTag].html = nodeChild;
+                        if (flag) nodeOut[nodeTag].attr = obj.attr;
+                        result.push(nodeOut);
+                
+                    } else {
+                        // do nothing
+                    }
+                }
+                if (result.length == 1) return result[0]
+                else if (result.length > 1) return result;
+            }
+        }
+    
+        this.html2json = function(text) {
+            if (!Util.div) Util.div = document.createElement('div');
+            Util.div.innerHTML = text;
+            return  {html: Util.getJson(Util.div.childNodes)};
+        };
+        */
+    /* var jsonicOptions = self.extend({
+    }, options); */
+    if (typeof options == 'object') {
+    } else if (options)
+        self.init(arguments[0], arguments[1]);
+
+
+} // of jsonicObject
+
+//var jsonicApp = jsonApp;
+var jsonApp = new jsonAppObj();
+var js = jsonApp;
+var jsonic = jsonApp;
+
+//window.jsonic = new jsonicObject();
+
+/* var receiveMessage = function (process) {
+    if (ThunkableWebviewerExtension)
+        ThunkableWebviewerExtension.receiveMessage(process);
+}
+
+var postMessage = function (message) {
+    if (ThunkableWebviewerExtension)
+        ThunkableWebviewerExtension.postMessage(message);
+} */
+
+/* "on": {
+    "init": [
+        {
+            "thunkable": {
+                "postMessage": "Hi Rick!"
+            }
+        },
+        {
+            "thunkable": {
+                "receiveMessage": {
+                    "alert": "message: {result}"
+                }
+            }
+        }
+    ]
+}
+ */
diff --git a/jsonic/js/jsonic-1.0.14.js b/jsonic/js/jsonic.1.0.14.js
similarity index 100%
rename from jsonic/js/jsonic-1.0.14.js
rename to jsonic/js/jsonic.1.0.14.js
diff --git "a/jsonic/modules/Icon\r" "b/jsonic/modules/Icon\r"
new file mode 100644
index 0000000..e69de29
diff --git "a/jsonic/plugins/Icon\r" "b/jsonic/plugins/Icon\r"
new file mode 100644
index 0000000..e69de29
diff --git a/uploads/.DS_Store b/uploads/.DS_Store
deleted file mode 100644
index 662daafe0a06cf8720e0cddda662cad6b7aa301a..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 6148
zcmeH~I|>3p42BaQAlO)1PU8W*!6149FW{?OR1o_)x_=%BuGS**2a<m#lPLQYI~x(v
z)%~;-nTf~*ZYm24JyYz*a+OZ@a+cfacI*z9OXpRCthE|Ae&h8#k0~TT0wh2JBtQZ`
zM8NKC*kl^YNCG540#5?=ekgF$n%YAB)q&t60Ca@38`eHcK#L`yHMNBz1Jh`QMyvW5
zVtH?emaMC(Ei~FibNJBwXSFE?rqM21uz_iHVITn#=n)vkerEUo2L5UO@3nAC0wnNf
z1a!3Cu2*=dyj$NM&+@y>+PcA^UXJkc5rB<d#dEkD&WkOeHMNBz1LKE)V_+bGuM&6w
D0GAV$

diff --git "a/uploads/Icon\r" "b/uploads/Icon\r"
new file mode 100644
index 0000000..e69de29
diff --git "a/uploads/plans/Icon\r" "b/uploads/plans/Icon\r"
new file mode 100644
index 0000000..e69de29