diff --git a/example.conf b/example.conf
index ddb27e0..94232d0 100644
--- a/example.conf
+++ b/example.conf
@@ -9,6 +9,7 @@
     username = password			# Add users for Domoboard here. In this case login with username "username" and password "password"
   [[domoboard]]
     time = False			# True/False: show time in top bar
+    date = False			# True/False: show date in top bar
     google_maps_api_key = X		# Google Maps Embed API key
 
 # Add Navbar items here. The key is the navbar link name. The first value is the URI name, second value can be any font awesome logo to be displayed.
@@ -32,11 +33,11 @@
   [[top_tiles]]
     Temperatuur tuin = 31, fire
     Temperatuur auto = 22, car
-    Stroomverbruik TV = 13, plug
+    Stroomverbruik TV = 13, plug, Usage
     Temperatuur Eindhoven = 54, fire
     Temperatuur tuin BMP = 55, fire
-    Totaal Playstation = 25, plug
-    Totaal slaapkamer lamp = 12, plug
+    Totaal Playstation = 25, plug, Usage
+    Totaal slaapkamer lamp = 12, plug, CounterToday
     Temperatuur raspberry = 1, car
   [[line_charts]]
     Temperatuur Slaapkamer = 14, month, temp
diff --git a/modules/api.py b/modules/api.py
index 969b8ab..08fc453 100644
--- a/modules/api.py
+++ b/modules/api.py
@@ -79,6 +79,8 @@ def gateway():
         writeToConfig(idx, page, component, description, extra)
     elif custom == 'indexPlugins':
         result = json.dumps(indexPlugins(request.args))
+    elif custom == "performUpgrade":
+        result = json.dumps(performUpgrade())
     elif custom in apiDict:
         module = apiDict.get(custom)[0]
         function = apiDict.get(custom)[1]
@@ -163,6 +165,10 @@ def getPluginVersion(loc):
                 c += 1
     return float(_version)
 
+def performUpgrade():
+    git.cmd.Git('.').pull("https://github.com/wez3/domoboard.git")
+    return "Upgrade completed."
+
 def indexPlugins(params={}):
     tmpFolder = 'static/tmp'
     indexFolderPath = 'static/tmp/pluginsIndex/'
diff --git a/server.py b/server.py
index e5a28cb..f83da6e 100755
--- a/server.py
+++ b/server.py
@@ -25,9 +25,9 @@ def init():
 def generatePage():
     requestedRoute = str(request.url_rule)[1:]
     if configValueExists(requestedRoute):
-        blockValues = {}
+        blockValues = OrderedDict()
         blockArray = []
-        configValues = {}
+        configValues = OrderedDict()
         configValues["navbar"] = config["navbar"]["menu"]
         configValues["server_location"] = config["general_settings"]["server"].get("url")
         configValues["flask_server_location"] = config["general_settings"]["server"].get("flask_url")
@@ -45,7 +45,9 @@ def generatePage():
         return render_template('index.html',
                                 configValues = configValues,
                                 blockArray = blockArray,
-                                _csrf_token = session['_csrf_token'])
+                                _csrf_token = session['_csrf_token'],
+                                version = getVersion(),
+                                debug = app.debug)
     else:
         abort(404)
 
@@ -55,18 +57,19 @@ def index():
 
 @login_required()
 def retrieveValue(page, component):
-    dict = {}
+    dict = OrderedDict()
     try:
         match = re.search("^(.+)\[(.+)\]$", component)
         if not match:
             for k, v in config[page][component].iteritems():
-                v = strToList(v)
-                dict[k] = v
+                l = [None]
+                l.extend(strToList(v))
+                dict[k] = l
         else:
             for sk, sv in config[page][match.group(1)][match.group(2)].iteritems():
-                sv = strToList(sv)
-                sv.append(match.group(2))
-                dict[sk] = sv
+                l = [match.group(2)]
+                l.extend(strToList(sv))
+                dict[sk] = l
     except:
         dict = {}
     return dict
@@ -109,7 +112,7 @@ def configValueExists(value):
 
 def validateConfigFormat(config):
     requiredSettings = {"general_settings/server": ["url", "flask_url", "user", "password", "secret_key"],
-                        "general_settings/domoboard": ["time"],
+                        "general_settings/domoboard": ["time", "date"],
                         "navbar/menu": [None] }
     for sect, fields in requiredSettings.iteritems():
         section = sect.split('/')
@@ -128,6 +131,12 @@ def appendDefaultPages(config):
     config['log'] =  {'display_components': {'components': 'serverlog'}}
     return config
 
+def getVersion():
+    f = open('VERSION.md', 'r')
+    version = f.read().rstrip()
+    f.close()
+    return version
+
 if __name__ == '__main__':
     parser = argparse.ArgumentParser()
     parser.add_argument("-c", "--config", dest="configfile",
@@ -166,6 +175,6 @@ if __name__ == '__main__':
     app.add_url_rule('/logout/', 'logout', logout_view, methods=['GET'])
     app.add_url_rule('/api', 'api', api.gateway, methods=['POST'])
     try:
-        app.run(host=flask_server_location.split(":")[0],port=int(flask_server_location.split(":")[1]),threaded=True, extra_files=watchfiles, debug=args.debug)
+        app.run(host=flask_server_location.split(":")[0],port=int(flask_server_location.split(":")[1]), threaded=True, extra_files=watchfiles, debug=args.debug)
     except socket.error, exc:
-        sys.exit("Error when starting the Flask server: %s" % exc)
+        sys.exit("Error when starting the Flask server: {}".format(exc))
diff --git a/static/css/bootstrap-slider.css b/static/css/bootstrap-slider.css
index c53983d..d31b14b 100644
--- a/static/css/bootstrap-slider.css
+++ b/static/css/bootstrap-slider.css
@@ -152,9 +152,6 @@
 }
 .slider-selection {
   position: absolute;
-  background-image: -webkit-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%);
-  background-image: -o-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%);
-  background-image: linear-gradient(to bottom, #f9f9f9 0%, #f5f5f5 100%);
   background-repeat: repeat-x;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff9f9f9', endColorstr='#fff5f5f5', GradientType=0);
   -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
diff --git a/static/css/custom.css b/static/css/custom.css
index 6db7cf9..913eb92 100755
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -39,7 +39,7 @@ body.nav-sm .main_container .top_nav {
 }
 
 body.nav-sm .nav.side-menu li a {
-    text-align: left !important;
+    text-align: center !important;
     font-weight: 400;
     font-size: 13px;
     padding: 10px 5px;
@@ -6383,12 +6383,17 @@ ul.notifications {
     overflow: visible;
 }
 #time-part {
-        padding-top: 16px;
-        padding-bottom: 16px;
+  padding-top: 16px;
+  padding-bottom: 16px;
 }
 #date-part {
-        padding-top: 16px;
-        padding-bottom: 16px;
+  padding-top: 16px;
+  padding-bottom: 16px;
+}
+#version_div {
+  float: right;
+  margin-top:15px;
+  margin-right:10px;
 }
 .show_date {
     display: inline-block;
@@ -6396,3 +6401,20 @@ ul.notifications {
 .hide_date {
     display: None;
 }
+.show_update {
+    display: inline-block;
+}
+.hide_update {
+    display: None;
+}
+
+.slider_on {
+  background-image: -webkit-linear-gradient(top, #f9f9f9 0%, green 100%);
+  background-image: -o-linear-gradient(top, #f9f9f9 0%, green 100%);
+  background-image: linear-gradient(to bottom, #f9f9f9 0%, green 100%);
+}
+.slider_off {
+  background-image: -webkit-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%);
+  background-image: -o-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%);
+  background-image: linear-gradient(to bottom, #f9f9f9 0%, #f5f5f5 100%);
+}
diff --git a/static/js/bootstrap-slider.js b/static/js/bootstrap-slider.js
index f9f3fdd..6ce0596 100755
--- a/static/js/bootstrap-slider.js
+++ b/static/js/bootstrap-slider.js
@@ -410,8 +410,9 @@
 				sliderTrackLow.className = "slider-track-low";
 
 				sliderTrackSelection = document.createElement("div");
-				sliderTrackSelection.className = "slider-selection";
-
+				//sliderTrackSelection.className = "slider-selection";
+				sliderTrackSelection.id = this.options.id + "_track";
+				sliderTrackSelection.className = "slider-selection slider_" + this.options.state
 				sliderTrackHigh = document.createElement("div");
 				sliderTrackHigh.className = "slider-track-high";
 
@@ -766,7 +767,8 @@
 				scale: 'linear',
 				focus: false,
 				tooltip_position: null,
-				labelledby: null
+				labelledby: null,
+				state: 'off'
 			},
 
 			getElement: function() {
diff --git a/static/js/domoboard.js b/static/js/domoboard.js
index 4c54582..4f987b6 100644
--- a/static/js/domoboard.js
+++ b/static/js/domoboard.js
@@ -21,6 +21,31 @@ function changeSwitch(checkboxElem, idx) {
     requestAPI(flask_server + "/api?type=command&param=switchlight&idx=" + idx + "&switchcmd=Off"  );
   }
 }
+// Dimmer functions
+function changeDimmer(checkboxElem, idx) {
+  var chkurl = "/api?type=devices&rid=" + idx;
+  requestAPI(flask_server + chkurl, function(d) {
+    _json = JSON.parse(d);
+    if (_json['result'][0]['Data'] != 'Off') {
+      requestAPI(flask_server + "/api?type=command&param=switchlight&idx=" + idx + "&switchcmd=Off&level=0");
+    } else {
+      requestAPI(flask_server + "/api?type=command&param=switchlight&idx=" + idx + "&switchcmd=On&level=0");
+    }
+    setDimmerState(checkboxElem, idx);
+  });
+}
+
+function setDimmerState(id, idx) {
+  var url = "/api?type=devices&rid=" + idx;
+  requestAPI(flask_server + url, function(d) {
+    _json = JSON.parse(d);
+    if (_json['result'][0]['Data'] != 'Off') {
+      $('#' + id).css({'background-image': '-webkit-linear-gradient(top, #f9f9f9 0%, green 100%)', 'background-image': '-o-linear-gradient(top, #f9f9f9 0%, green 100%)', 'background-image': 'linear-gradient(to bottom, #f9f9f9 0%, green 100%)'});
+    } else {
+      $('#' + id).css({'background-image': '-webkit-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%)', 'background-image': '-o-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%)', 'background-image': 'linear-gradient(to bottom, #f9f9f9 0%, #f5f5f5 100%)'});
+    }
+  });
+}
 
 // Switch functions
 function changePush(idx, action) {
@@ -57,7 +82,7 @@ function refreshSwitches(updateSwitches, block) {
 }
 
 // Top tiles functions
-function refreshTopTiles(updateDivs, block, tilesPreviousArray) {
+function refreshTopTiles(updateDivs, block, tilesPreviousArray, updateDivsTypeArray) {
   if (tilesPreviousArray.length == 0) {
     for(var i = 0; i < updateDivs.length; i++){
       tilesPreviousArray.push(-1);
@@ -69,7 +94,7 @@ function refreshTopTiles(updateDivs, block, tilesPreviousArray) {
     requestAPI(url, function(d) {
 		var obj = JSON.parse(d);
 		if (obj.result != undefined) {
-			var data = obj.result[0].Data;
+			var data = obj.result[0][updateDivsTypeArray[i]];
 		} else {
 			var data = "-";
 		}
@@ -137,9 +162,12 @@ function dimmerSlider(updateDimmers, block) {
     url = "/api?type=devices&rid=" + dimmerID;
     requestAPI(url, function(d) {
   		var percentage = JSON.parse(d).result[0].Level;
-  		$('#dimmer_' + dimmerID + "_block_" + block).slider({min:0, max:100, value: percentage}).on('slideStop', function(ev) { changeDimmerSlider($(this).attr('id'), ev.value) } ).data('slider');
-  		$('#dimmer_' + dimmerID + "_block_" + block).slider().on('slideStop', function(ev) { changeDimmerSlider($(this).attr('id'), ev.value) } ).data('slider');
-	   });
+  		$('#dimmer_' + dimmerID + "_block_" + block).slider({min:0, max:100, value: percentage}).on('slideStop', function(ev) {
+        setDimmerState('dim_' + dimmerID + "_block_" + block + "_track", dimmerID);
+        changeDimmerSlider($(this).attr('id'), ev.value)
+      } ).data('slider');
+      setDimmerState('dim_' + dimmerID + "_block_" + block + "_track", dimmerID);
+     });
   });
 }
 
@@ -169,10 +197,15 @@ function redrawLineChart(sensor, idx, range, block) {
   });
 }
 
-function redrawBarChart(idxs, block) {
+function redrawBarChart(idxs, block, barChartElementsNames) {
   var url = "/api?custom=bar_chart&idxs=" + idxs.join();
+  var i = 0;
   requestAPI(url, function(d){
 	  var data = JSON.parse(d);
+    for (var key in data) {
+      data[key]["l"] = barChartElementsNames[i];
+      i++;
+    }
   block.setData(data);
   });
 }
@@ -341,3 +374,53 @@ function changeDown(idx, block) {
         changeSetpoint(idx, newVal);
     }, 400);
 }
+
+// Update functions
+function performUpgrade() {
+  requestAPI('/api?custom=performUpgrade');
+  $( "#version_div" ).removeClass("show_update");
+  $( "#version_div" ).addClass("hide_update");
+  $( "#updateView_available" ).removeClass("show_update");
+  $( "#updateView_available" ).addClass("hide_update");
+  $( "#updateView_not_available" ).removeClass("hide_update");
+  $( "#updateView_not_available" ).addClass("show_update");
+}
+
+function checkVersion() {
+  $.ajax({
+    url: "https://domoboard.nl/version.md",
+    cache: false,
+    success: function( data ) {
+    dataFloat = parseFloat(data);
+    versionFloat = parseFloat(version);
+    if (dataFloat > versionFloat) {
+      document.getElementById('curver').innerHTML = version;
+      document.getElementById('newver').innerHTML = data;
+      $( "#version_div" ).removeClass("hide_update");
+      $( "#version_div" ).addClass("show_update");
+      }
+    },
+    async:true
+    });
+  }
+
+function checkVersionSettings() {
+  $.ajax({
+    url: "https://domoboard.nl/version.md",
+    cache: false,
+    success: function( data ) {
+    dataFloat = parseFloat(data);
+    versionFloat = parseFloat(version);
+      if (dataFloat > versionFloat) {
+        $( "#updateView_available" ).removeClass("hide_update");
+        $( "#updateView_available" ).addClass("show_update");
+        document.getElementById('curver_settings').innerHTML = version;
+        document.getElementById('newver_settings').innerHTML = data;
+      } else {
+        $( "#updateView_not_available" ).removeClass("hide_update");
+        $( "#updateView_not_available" ).addClass("show_update");
+      }
+    },
+    async:true
+    });
+  }
diff --git a/static/js/domoticz.js b/static/js/domoticz.js
index b4f9cf1..160700b 100644
--- a/static/js/domoticz.js
+++ b/static/js/domoticz.js
@@ -602,7 +602,6 @@ if (period == "day") {
 							var minValue = 10000000;
 
 							$.each(data.result, function (i, item) {
-								console.log(item)
 								datatable1.push([GetDateFromString(item.d), parseFloat(item.v_max)]);
 								datatable2.push([GetDateFromString(item.d), parseFloat(item.v_min)]);
 								if (typeof item.v_avg != 'undefined') {
diff --git a/templates/area_charts.html b/templates/area_charts.html
index 145d5dd..9db18d1 100644
--- a/templates/area_charts.html
+++ b/templates/area_charts.html
@@ -27,9 +27,9 @@ var area_chart_block_{{count}} = Morris.Area({
 
 $(document).ready(function() {
   {% for k, v in blockArray[count]["area_charts"].iteritems() %}
-  redrawAreaChart("{{v[2]}}",{{v[0]}},"{{v[1]}}", area_chart_block_{{count}});
+  redrawAreaChart("{{v[3]}}",{{v[1]}},"{{v[2]}}", area_chart_block_{{count}});
   $("div#title_block_{{count}} h2").html("{{k}}");
-  setInterval(redrawAreaChart,9000,"{{v[2]}}",{{v[0]}},"{{v[1]}}", area_chart_block_{{count}});
+  setInterval(redrawAreaChart,9000,"{{v[3]}}",{{v[1]}},"{{v[2]}}", area_chart_block_{{count}});
 });
 {% endfor %}
 </script>
diff --git a/templates/bar_charts.html b/templates/bar_charts.html
index 1b2da23..d3b90e5 100644
--- a/templates/bar_charts.html
+++ b/templates/bar_charts.html
@@ -15,22 +15,27 @@
 </div>
 <script type="text/javascript" charset="utf-8">
 
-var bar_chart_block_{{count}} = Morris.Bar({
-  element: 'morris-bar-chart-{{count}}',
-  data: [],
-  xkey: 'y',
-  ykeys: ['a'],
-  labels: ['y'],
-  smooth: true,
-  resize: true
-});
+
 
 $(document).ready(function() {
   var barChartElements=[];
+  var barChartElementsNames=[];
+
   {% for k, v in blockArray[count]["bar_charts"].iteritems() %}
-  barChartElements.push("{{v[0]}}");
+  barChartElements.push("{{v[1]}}");
+  barChartElementsNames.push("{{k}}");
   {% endfor %}
-  redrawBarChart(barChartElements, bar_chart_block_{{count}});
-  setInterval(redrawBarChart,9000,barChartElements,bar_chart_block_{{count}});
+  var bar_chart_block_{{count}} = Morris.Bar({
+    element: 'morris-bar-chart-{{count}}',
+    data: [],
+    xkey: 'l',
+    ykeys: ['a'],
+    labels: ['y'],
+    smooth: true,
+    resize: true
+  });
+
+  redrawBarChart(barChartElements, bar_chart_block_{{count}}, barChartElementsNames);
+  setInterval(redrawBarChart,9000,barChartElements,bar_chart_block_{{count}}, barChartElementsNames);
 });
 </script>
diff --git a/templates/camera.html b/templates/camera.html
index d0e63fb..693a5ad 100644
--- a/templates/camera.html
+++ b/templates/camera.html
@@ -11,12 +11,12 @@
     <div style=";overflow: hidden">
       <br>
       {% for k, v in blockArray[count]["camera"].iteritems() %}
-        {% if v[1] %}
-          <script> $('#s_title_{{ count }}').html("{{ v[1] }}");</script>
+        {% if v[0] %}
+          <script> $('#s_title_{{ count }}').html("{{ v[0] }}");</script>
         {% endif %}
       <form class="form-horizontal form-label-left" style="width: 80%; height: 80%; ">
         <div class="form-group" style="">
-	       <img id="cam_{{ count }}" style="-webkit-user-select: none; width: 100%; height: 100%; " src="{{v[0]|replace('&amp;', '&')}}" >
+	       <img id="cam_{{ count }}" style="-webkit-user-select: none; width: 100%; height: 100%; " src="{{v[1]|replace('&amp;', '&')}}" >
         </div>
       </form>
       {% endfor %}
diff --git a/templates/domoticz_counter_charts.html b/templates/domoticz_counter_charts.html
index 09c5f51..c6629f2 100644
--- a/templates/domoticz_counter_charts.html
+++ b/templates/domoticz_counter_charts.html
@@ -17,9 +17,9 @@
 
 $(document).ready(function() {
   {% for k, v in blockArray[count]["domoticz_counter_charts"].iteritems() %}
-  ShowGeneralGraph("domoticz-chart-block-{{count}}",{{v[0]}},"{{k}}", 1, "{{v[2]}}", "{{v[1]}}");
+  ShowGeneralGraph("domoticz-chart-block-{{count}}",{{v[1]}},"{{k}}", 1, "{{v[3]}}", "{{v[2]}}");
   $("div#title_block_{{count}} h2").html("{{k}}");
-  setInterval(ShowGeneralGraph,60000,"domoticz-chart-block-{{count}}",{{v[0]}},"{{k}}", 1, "{{v[2]}}", "{{v[1]}}");
+  setInterval(ShowGeneralGraph,60000,"domoticz-chart-block-{{count}}",{{v[1]}},"{{k}}", 1, "{{v[3]}}", "{{v[2]}}");
 {% endfor %}
 });
 </script>
diff --git a/templates/domoticz_percentage_charts.html b/templates/domoticz_percentage_charts.html
index 366d8c0..eca234c 100644
--- a/templates/domoticz_percentage_charts.html
+++ b/templates/domoticz_percentage_charts.html
@@ -17,9 +17,9 @@
 
 $(document).ready(function() {
   {% for k, v in blockArray[count]["domoticz_percentage_charts"].iteritems() %}
-  ShowPercentageLog("domoticz-chart-block-{{count}}",{{v[0]}},"{{k}}", "{{v[1]}}");
+  ShowPercentageLog("domoticz-chart-block-{{count}}",{{v[1]}},"{{k}}", "{{v[2]}}");
   $("div#title_block_{{count}} h2").html("{{k}}");
-  setInterval(ShowPercentageLog,60000,"domoticz-chart-block-{{count}}",{{v[0]}},"{{k}}", "{{v[1]}}");
+  setInterval(ShowPercentageLog,60000,"domoticz-chart-block-{{count}}",{{v[1]}},"{{k}}", "{{v[2]}}");
 {% endfor %}
 });
 </script>
diff --git a/templates/domoticz_smart_charts.html b/templates/domoticz_smart_charts.html
index eeac38c..c590fb9 100644
--- a/templates/domoticz_smart_charts.html
+++ b/templates/domoticz_smart_charts.html
@@ -17,9 +17,9 @@
 
 $(document).ready(function() {
   {% for k, v in blockArray[count]["domoticz_smart_charts"].iteritems() %}
-  ShowSmartLog("domoticz-chart-block-{{count}}",{{v[0]}},"{{k}}", "{{v[2]}}", "{{v[1]}}");
+  ShowSmartLog("domoticz-chart-block-{{count}}",{{v[1]}},"{{k}}", "{{v[3]}}", "{{v[2]}}");
   $("div#title_block_{{count}} h2").html("{{k}}");
-  setInterval(ShowSmartLog,60000,"domoticz-chart-block-{{count}}",{{v[0]}},"{{k}}", "{{v[2]}}", "{{v[1]}}");
+  setInterval(ShowSmartLog,60000,"domoticz-chart-block-{{count}}",{{v[1]}},"{{k}}", "{{v[3]}}", "{{v[2]}}");
 {% endfor %}
 });
 </script>
diff --git a/templates/domoticz_temp_charts.html b/templates/domoticz_temp_charts.html
index c53559e..81cca1d 100644
--- a/templates/domoticz_temp_charts.html
+++ b/templates/domoticz_temp_charts.html
@@ -17,9 +17,9 @@
 
 $(document).ready(function() {
   {% for k, v in blockArray[count]["domoticz_temp_charts"].iteritems() %}
-  ShowTempLog("domoticz-chart-block-{{count}}",{{v[0]}},"{{k}}", "{{v[1]}}");
+  ShowTempLog("domoticz-chart-block-{{count}}",{{v[1]}},"{{k}}", "{{v[2]}}");
   $("div#title_block_{{count}} h2").html("{{k}}");
-  setInterval(ShowGeneralGraph,60000,"domoticz-chart-block-{{count}}",{{v[0]}},"{{k}}", "{{v[1]}}");
+  setInterval(ShowGeneralGraph,60000,"domoticz-chart-block-{{count}}",{{v[1]}},"{{k}}", "{{v[2]}}");
 {% endfor %}
 });
 </script>
diff --git a/templates/donut_charts.html b/templates/donut_charts.html
index b216877..5c5fa3d 100644
--- a/templates/donut_charts.html
+++ b/templates/donut_charts.html
@@ -22,7 +22,7 @@ var donut_chart_block_{{count}} = Morris.Donut({
 $(document).ready(function() {
   var donutChartElements=[];
   {% for k, v in blockArray[count]["donut_charts"].iteritems() %}
-  donutChartElements.push("{{v[0]}}");
+  donutChartElements.push("{{v[1]}}");
   {% endfor %}
   redrawDonutChart(donutChartElements, donut_chart_block_{{count}});
   setInterval(redrawDonutChart,9000,donutChartElements, donut_chart_block_{{count}});
diff --git a/templates/footer.html b/templates/footer.html
index cccf9dd..95ee215 100644
--- a/templates/footer.html
+++ b/templates/footer.html
@@ -9,7 +9,6 @@
 <!-- Domoboard -->
 <script src="/static/js/custom.js"></script>
 <!-- bootstrap-slider -->
-<link href="/static/css/bootstrap-slider.css" rel="stylesheet">
 <script type="text/javascript" src="/static/js/bootstrap-slider.js"></script>
 <script type="text/javascript" src="static/js/moment.min.js"></script>
 {% if configValues["domoboard"].get("time") == "True" %}
@@ -21,6 +20,10 @@
 
         $('#time-part').html(momentNow.format('HH:mm'));
     }, 100);
+  {% if configValues["domoboard"].get("date") == "True" %}
+    $('#date-part').removeClass('hide_date');
+    $('#date-part').addClass('show_date');
+  {% endif %}
 
     $( "#date-part" ).click(function() {
         $('#date-part').removeClass('show_date');
@@ -36,7 +39,12 @@
        }
     });
     });
+</script>
 {% endif %}
+<script>
+$(document).ready(function() {
+  setInterval(checkVersion, 43200000);
+});
 </script>
 </body>
 </html>
diff --git a/templates/header.html b/templates/header.html
index e9b9c3b..5c254fd 100644
--- a/templates/header.html
+++ b/templates/header.html
@@ -32,7 +32,7 @@
   <link href="/static/images/icons/logo-114x114.png" sizes="114x114" rel="apple-touch-icon-precomposed">
   <!-- iPhone non-retina icon (iOS < 7) -->
   <link href="/static/images/icons/logo-57x57.png" sizes="57x57" rel="apple-touch-icon-precomposed">
- 
+
   <title>Domoboard</title>
   <!-- Bootstrap core CSS  -->
   <script src="/static/js/jquery-2.2.3.min.js"></script>
@@ -43,6 +43,7 @@
 
   <!-- Custom styling plus plugins  -->
   <script src="/static/js/jquery.nicescroll.min.js"></script>
+
   <script src="/static/js/bootstrap-switch.js"></script>
   <script src="/static/js/bootstrap.min.js"></script>
   <script src="/static/js/colorpicker/bootstrap-colorpicker.min.js"></script>
@@ -61,6 +62,7 @@
   var flask_server = "{{ request.url_root[:-1] }}";
   var csrf_token = "{{ _csrf_token }}";
   var googleMapEmbedKey = "{{ configValues["domoboard"].get("google_maps_api_key") }}"
+  var version = "{{ version }}";
   </script>
   <script type="text/javascript" src="/static/js/domoboard.js"></script>
 
diff --git a/templates/line_charts.html b/templates/line_charts.html
index 04605a2..0f983ac 100644
--- a/templates/line_charts.html
+++ b/templates/line_charts.html
@@ -27,9 +27,9 @@ var line_chart_block_{{count}} = Morris.Line({
 
 $(document).ready(function() {
   {% for k, v in blockArray[count]["line_charts"].iteritems() %}
-  redrawLineChart("{{v[2]}}",{{v[0]}},"{{v[1]}}", line_chart_block_{{count}});
+  redrawLineChart("{{v[3]}}",{{v[1]}},"{{v[2]}}", line_chart_block_{{count}});
   $("div#title_block_{{count}} h2").html("{{k}}");
-  setInterval(redrawLineChart,9000,"{{v[2]}}",{{v[0]}},"{{v[1]}}",line_chart_block_{{count}});
+  setInterval(redrawLineChart,9000,"{{v[3]}}",{{v[1]}},"{{v[2]}}",line_chart_block_{{count}});
 });
 {% endfor %}
 </script>
diff --git a/templates/map.html b/templates/map.html
index 35f74be..24ed1e2 100644
--- a/templates/map.html
+++ b/templates/map.html
@@ -21,10 +21,10 @@
 $(document).ready(function() {
   var location=[];
   {% for k, v in blockArray[count]["map"].iteritems() %}
-      {% if v[1] %}
-          $('#s_title_{{ count }}').html("{{ v[1] }}");
+      {% if v[0] %}
+          $('#s_title_{{ count }}').html("{{ v[0] }}");
       {% endif %}
-  location.push("{{v[0]}}");
+  location.push("{{v[1]}}");
   {% endfor %}
   refreshMapLocation(location, "locationIframe-{{count}}");
   setInterval(refreshMapLocation, 60000, location, "locationIframe-{{count}}");
diff --git a/templates/navbar.html b/templates/navbar.html
index 28a5fe5..dce56ed 100644
--- a/templates/navbar.html
+++ b/templates/navbar.html
@@ -63,6 +63,11 @@
                 </div>
                 <div class="show_date" style="cursor: pointer; margin-left: -70px; min-height: 51px;" id="time-part"></div>
                 <div class="hide_date" style="cursor: pointer; padding-left: 2px;" id="date-part"></div>
+                <div id="version_div" class="hide_update">
+                  <button type="button" class="btn btn-success" data-toggle="modal" data-target="#upgradeModal">
+                    Update available
+                  </button>
+                </div>
               </div>
           </nav>
         </div>
@@ -70,5 +75,36 @@
       </div>
       <!-- /top navigation -->
 
+      <!-- Upgrade Modal -->
+      <div class="modal fade" id="upgradeModal" tabindex="-1" role="dialog" aria-labelledby="upgradeModalLabel" aria-hidden="true">
+        <div class="modal-dialog" role="document">
+          <div class="modal-content">
+            <div class="modal-header">
+              <h5 class="modal-title" id="upgradeModalLabel">Update available</h5>
+              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              </button>
+            </div>
+            <div class="modal-body">
+              <h2>A new update is available for Domoboard.</h2><br />
+              The current version is <b><span id="curver"></span></b>.<br />
+              The new version available is: <b><span id="newver"></span></b>.<br />
+              <br />
+              {% if debug == True %}
+              <p><b>Install the new version by pressing the "Upgrade" button below.</b></p>
+              {% endif %}
+              {% if debug == False %}
+              <p><b>Upgrading through Domoboard is only possible when running in debug mode (pass "-d" parameter to server.py). Manual upgrade is possible by performing a "git pull" command.</b></p>
+              {% endif %}
+            </div>
+            <div class="modal-footer">
+              <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
+              {% if debug == True %}
+              <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="javascript:performUpgrade()">Upgrade</button>
+              {% endif %}
+            </div>
+          </div>
+        </div>
+      </div>
+
       <!-- page content -->
       <div class="right_col" role="main">
diff --git a/templates/news.html b/templates/news.html
index c7155a2..65f3a55 100644
--- a/templates/news.html
+++ b/templates/news.html
@@ -3,7 +3,7 @@
 <div class="col-md-6 col-sm-6 col-xs-12">
   <div class="x_panel">
     <div class="x_title">
-      <h2>News</h2>
+      <h2 id="s_title_{{count}}">News</h2>
       <ul class="nav navbar-right panel_toolbox">
         <li><a class="close-link"><i class="fa fa-close"></i></a>
         </li>
@@ -12,8 +12,15 @@
     </div>
     <div id="divRss-{{count}}"></div>
     <script>
+    $(document).ready(function() {
+      {% for k, v in blockArray[count]["news"].iteritems() %}
+      {% if v[0] %}
+          $('#s_title_{{ count }}').html("{{ v[0] }}");
+      {% endif %}
+      {% endfor %}
+    });
     $('#divRss-{{count}}').FeedEk({
-      FeedUrl:'{{blockArray[count]['news'].get('rssfeed')[0]}}',
+      FeedUrl:"{{blockArray[count]['news'].get('rssfeed')[1]}}",
       MaxCount : 5,
       ShowDesc : true,
       ShowPubDate:true,
diff --git a/templates/power_usage.html b/templates/power_usage.html
index 2341eef..c98fa21 100644
--- a/templates/power_usage.html
+++ b/templates/power_usage.html
@@ -22,7 +22,7 @@
           {% for k, v in blockArray[count]["power_usage"].iteritems() %}
           <tr>
             <td>{{k}}</td>
-            <td id="power_usage_{{v[0]}}_{{count}}">{{v[1]}}</td>
+            <td id="power_usage_{{v[1]}}_{{count}}">{{v[2]}}</td>
           </tr>
           {% endfor %}
           <tr>
@@ -39,7 +39,7 @@
 $(document).ready(function() {
   var updatePowerUsage_{{count}}=[];
   {% for k, v in blockArray[count]["power_usage"].iteritems() %}
-  updatePowerUsage_{{count}}.push("{{v[0]}}");
+  updatePowerUsage_{{count}}.push("{{v[1]}}");
   {% endfor %}
   refreshPowerUsage(updatePowerUsage_{{count}}, "{{count}}");
   setInterval(refreshPowerUsage, 9000, updatePowerUsage_{{count}}, "{{count}}");
diff --git a/templates/settings.html b/templates/settings.html
index c98da85..99ccbba 100644
--- a/templates/settings.html
+++ b/templates/settings.html
@@ -1,5 +1,8 @@
 <link href="static/css/settings.css" rel="stylesheet" type="text/css"/>
 <ul class="tab">
+                        <li><a href="javascript:void(0)" id="defaultOpen" class="tablinks"
+                               onclick="openCat(event, 'updates')">Updates</a>
+                        </li>
                         <li><a href="javascript:void(0)" id="defaultOpen" class="tablinks"
                                onclick="openCat(event, 'plugins')">Plugins</a>
                         </li>
@@ -7,7 +10,27 @@
                                onclick="openCat(event, 'settings')">Settings</a>
                          </li>
                     </ul>
-
+<div id="updates" class="tabcontent">
+    <div id="updateView_available" class="hide_update">
+      <h2>A new update is available for Domoboard.</h2><br />
+      The current version is <b><span id="curver_settings"></span></b><br />
+      The new version available is: <b><span id="newver_settings"></span></b><br />
+      <br />
+      {% if debug == True %}
+      <p><b>Install the new version by pressing the "Upgrade" button below.</b></p>
+      {% endif %}
+      {% if debug == False %}
+      <p><b>Upgrading through Domoboard is only possible when running in debug mode (pass "-d" parameter to server.py). Manual upgrade is possible by performing a "git pull" command.</b></p>
+      {% endif %}
+      {% if debug == True %}
+      <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="javascript:performUpgrade()">Upgrade</button>
+      {% endif %}
+    </div>
+    <div id="updateView_not_available" class="hide_update">
+      <h2>Hurray!</h2><br />
+      There is no update available for Domoboard.<br /><br />
+    </div>
+</div>
 <div id="plugins" class="tabcontent">
     <div id="pluginView">
     </div>
@@ -147,8 +170,8 @@
             document.getElementById("defaultOpen").click();
             setInterval(automaticIndex(), 9000);
             $('.fullSummary').hide();
+            checkVersionSettings();
         });
-
         retrieveAvailableDevices();
         selected_page_settings();
         selected_component_settings();
diff --git a/templates/switches.html b/templates/switches.html
index 0491ae6..3d7d82c 100644
--- a/templates/switches.html
+++ b/templates/switches.html
@@ -1,4 +1,5 @@
 <link href="/static/css/bootstrap-switch.css" rel="stylesheet" type="text/css" />
+<link href="/static/css/bootstrap-slider.css" rel="stylesheet">
 <link href="/static/css/buttons.css" rel="stylesheet" type="text/css" />
 <div class="col-md-6 col-sm-6 col-xs-12">
   <div class="x_panel">
@@ -16,34 +17,38 @@
         <table class="table" style="width: auto;">
           {% for k, v in blockArray[count]["switches"].iteritems() %}
           <tr>
+            {% if "dimmer" in v[2] or "rgb" in v[2] %}
+                <td style="border-top: none;  vertical-align: middle;"><a id="dim_{{count}}" style="cursor: pointer;"><label style="cursor: pointer;" class=""> &nbsp;{{k}}</label></a></td>
+              {% else %}
             <td style="border-top: none;  vertical-align: middle;"><label class=""> &nbsp;{{k}}</label></td>
+            {% endif %}
             <td style="border-top: none;">
-              {% if "switch" in v[1]  %}
-              <input id="switch_{{v[0]}}_block_{{count}}" type="checkbox" checked data-size="mini">
-              {% elif "dimmer" in v[1] %}
-                <input id="dimmer_{{v[0]}}_block_{{count}}" data-slider-id='dimmer_{{v[0]}}' type="text" test={{ v[1] }} data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="14" />
-              {% elif "pushon" in v[1] %}
-                <button id="push_{{v[0]}}_block_{{count}}" class="btn  btn-primary btn-circle">&nbsp;<li class="fa fa-power-off" aria-hidden="true"></i>&nbsp;</button>
-                {% elif "pushoff" in v[1] %}
-                  <button id="push_{{v[0]}}_block_{{count}}" class="btn  btn-danger btn-circle">&nbsp;<li class="fa fa-power-off" aria-hidden="true"></i>&nbsp;</button>
-                {% elif "group" in v[1] %}
-                  <div><div style="float: left"><button id="groupon_{{v[0]}}_block_{{count}}" class="btn  btn-primary btn-circle">&nbsp;<li class="fa fa-power-off" aria-hidden="true"></i>&nbsp;</button></div><div style="padding-left: 20px; float: left"><button id="groupoff_{{v[0]}}_block_{{count}}" class="btn  btn-primary btn-circle btn-danger">&nbsp;<li class="fa fa-power-off" aria-hidden="true"></i>&nbsp;</button></div></div>
-                {% elif "scene" in v[1] %}
-                  <button id="scene_{{v[0]}}_block_{{count}}" class="btn btn-primary btn-circle">&nbsp;<li class="fa fa-power-off" aria-hidden="true"></i>&nbsp;</button>
-               {% elif "setpoint" in v[1]  %}
+              {% if "switch" in v[2]  %}
+              <input id="switch_{{v[1]}}_block_{{count}}" type="checkbox" checked data-size="mini">
+              {% elif "dimmer" in v[2] %}
+            <input id="dimmer_{{v[1]}}_block_{{count}}" data-slider-id='dim_{{v[1]}}_block_{{count}}' type="text" test={{ v[2] }} state="on" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="14" />
+              {% elif "pushon" in v[2] %}
+                <button id="push_{{v[1]}}_block_{{count}}" class="btn  btn-primary btn-circle">&nbsp;<li class="fa fa-power-off" aria-hidden="true"></i>&nbsp;</button>
+                {% elif "pushoff" in v[2] %}
+                  <button id="push_{{v[1]}}_block_{{count}}" class="btn  btn-danger btn-circle">&nbsp;<li class="fa fa-power-off" aria-hidden="true"></i>&nbsp;</button>
+                {% elif "group" in v[2] %}
+                  <div><div style="float: left"><button id="groupon_{{v[1]}}_block_{{count}}" class="btn  btn-primary btn-circle">&nbsp;<li class="fa fa-power-off" aria-hidden="true"></i>&nbsp;</button></div><div style="padding-left: 20px; float: left"><button id="groupoff_{{v[1]}}_block_{{count}}" class="btn  btn-primary btn-circle btn-danger">&nbsp;<li class="fa fa-power-off" aria-hidden="true"></i>&nbsp;</button></div></div>
+                {% elif "scene" in v[2] %}
+                  <button id="scene_{{v[1]}}_block_{{count}}" class="btn btn-primary btn-circle">&nbsp;<li class="fa fa-power-off" aria-hidden="true"></i>&nbsp;</button>
+               {% elif "setpoint" in v[2]  %}
                      <div>
-                         <div style="float: left; margin-right: 5px"><h1 id="setpoint_{{v[0]}}_block_{{count}}" style="font-size: 16px;"></h1></div>
+                         <div style="float: left; margin-right: 5px"><h1 id="setpoint_{{v[1]}}_block_{{count}}" style="font-size: 16px;"></h1></div>
                          <div style="float: left">
-                           <div style=""><i onclick="changeUp({{ v[0] }}, {{count}})" class="fa fa-arrow-up" style="font-size: 13px; cursor: pointer;" aria-hidden="true"></i></div>
-                           <div style=""><i onclick="changeDown({{ v[0] }}, {{count}})" class="fa fa-arrow-down" style="font-size: 13px; cursor: pointer;" aria-hidden="true"></i></div>
+                           <div style=""><i onclick="changeUp({{ v[1] }}, {{count}})" class="fa fa-arrow-up" style="font-size: 13px; cursor: pointer;" aria-hidden="true"></i></div>
+                           <div style=""><i onclick="changeDown({{ v[1] }}, {{count}})" class="fa fa-arrow-down" style="font-size: 13px; cursor: pointer;" aria-hidden="true"></i></div>
                          </div>
                      </div>
-              {% elif "rgb" in v[1] %}
-              &nbsp;<input id="dimmer_{{v[0]}}_block_{{count}}" data-slider-id='dimmer_{{v[0]}}' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="14" />
+              {% elif "rgb" in v[2] %}
+              &nbsp;<input id="dimmer_{{v[1]}}_block_{{count}}" data-slider-id='dim_{{v[1]}}_block_{{count}}' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="14" />
               <br><br>
-              <button type="button" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#myModal-{{v[0]}}-block-{{count}}">RGB colors</button>
+              <button type="button" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#myModal-{{v[1]}}-block-{{count}}">RGB colors</button>
               <!-- Modal -->
-	      <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" id="myModal-{{v[0]}}-block-{{count}}">
+	      <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" id="myModal-{{v[1]}}-block-{{count}}">
                 <div class="modal-dialog modal-sm">
 
                   <!-- Modal content-->
@@ -53,7 +58,7 @@
                       <h4 class="modal-title">RGB Selector</h4>
                     </div>
                     <div class="modal-body">
-                      <div id="rgb_{{v[0]}}_block_{{count}}" class="inl-bl"></div>
+                      <div id="rgb_{{v[1]}}_block_{{count}}" class="inl-bl"></div>
                       <style>
                       .inl-bl {
                         display: inline-block;
@@ -61,7 +66,7 @@
                       </style>
                       <script>
                       $(function() {
-                        $('#rgb_{{v[0]}}_block_{{count}}').colorpicker({
+                        $('#rgb_{{v[1]}}_block_{{count}}').colorpicker({
                           color: '#ffaa00',
                           container: true,
                           inline: true
@@ -70,7 +75,7 @@
                       </script>
                     </div>
                     <div class="modal-footer">
-                      <button type="button" class="btn btn-default" data-dismiss="modal" onclick="changeRgbColor('rgb_{{v[0]}}_block_{{count}}')">Save</button>
+                      <button type="button" class="btn btn-default" data-dismiss="modal" onclick="changeRgbColor('rgb_{{v[1]}}_block_{{count}}')">Save</button>
                       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                     </div>
                   </div>
@@ -93,41 +98,45 @@ $(document).ready(function() {
 
   {% for k, v in blockArray[count]["switches"].iteritems() %}
 
-      {% if v[2] %}
-          $('#s_title_{{ count }}').html("{{ v[2] }}");
+      {% if v[0] %}
+          $('#s_title_{{ count }}').html("{{ v[0] }}");
       {% endif %}
-  	{% if v[1] == "switch" %}
-  		$('input[id="switch_{{v[0]}}_block_{{count}}"]').on('switchChange.bootstrapSwitch', function(event, state) {
-    			changeSwitch(this, {{v[0]}});
+  	{% if v[2] == "switch" %}
+  		$('input[id="switch_{{v[1]}}_block_{{count}}"]').on('switchChange.bootstrapSwitch', function(event, state) {
+    			changeSwitch(this, {{v[1]}});
   		});
-  		updateSwitches_block_{{count}}.push("{{v[0]}}");
-    {% elif (v[1] == "pushon") %}
-    $('button[id="push_{{v[0]}}_block_{{count}}"]').click(function(e) {
+  		updateSwitches_block_{{count}}.push("{{v[1]}}");
+    {% elif (v[2] == "pushon") %}
+    $('button[id="push_{{v[1]}}_block_{{count}}"]').click(function(e) {
       e.preventDefault();
-      changePush({{v[0]}}, 'on');
+      changePush({{v[1]}}, 'on');
     });
-    {% elif (v[1] == "pushoff") %}
-    $('button[id="push_{{v[0]}}_block_{{count}}"]').click(function(e) {
+    {% elif (v[2] == "pushoff") %}
+    $('button[id="push_{{v[1]}}_block_{{count}}"]').click(function(e) {
       e.preventDefault();
-      changePush({{v[0]}}, 'off');
+      changePush({{v[1]}}, 'off');
     });
-    {% elif (v[1] == "group") or (v[1] == "scene") %}
-    $('button[id="groupon_{{v[0]}}_block_{{count}}"]').click(function(e) {
+    {% elif (v[2] == "group") or (v[2] == "scene") %}
+    $('button[id="groupon_{{v[1]}}_block_{{count}}"]').click(function(e) {
       e.preventDefault();
-      changeScene({{v[0]}}, 'on');
+      changeScene({{v[1]}}, 'on');
     });
-    $('button[id="groupoff_{{v[0]}}_block_{{count}}"]').click(function(e) {
+    $('button[id="groupoff_{{v[1]}}_block_{{count}}"]').click(function(e) {
         e.preventDefault();
-        changeScene({{v[0]}}, 'off');
+        changeScene({{v[1]}}, 'off');
       });
-    $('button[id="scene_{{v[0]}}_block_{{count}}"]').click(function(e) {
+    $('button[id="scene_{{v[1]}}_block_{{count}}"]').click(function(e) {
           e.preventDefault();
-          changeScene({{v[0]}}, 'on');
+          changeScene({{v[1]}}, 'on');
       });
-    {% elif (v[1] == "setpoint") %}
-  		updateSetpoints_block_{{count}}.push("{{v[0]}}");
-  	{% elif (v[1] == "dimmer" or v[1] == "rgb") %}
-  		updateDimmers_block_{{count}}.push("{{v[0]}}");
+    {% elif (v[2] == "setpoint") %}
+  		updateSetpoints_block_{{count}}.push("{{v[1]}}");
+  	{% elif (v[2] == "dimmer" or v[2] == "rgb") %}
+      $('#dim_{{count}}').click(function(e) {
+        e.preventDefault();
+        changeDimmer('dim_{{v[1]}}_block_{{count}}_track', {{v[1]}});
+      });
+  		updateDimmers_block_{{count}}.push("{{v[1]}}");
   	{% endif %}
   {% endfor %}
   refreshSwitches(updateSwitches_block_{{count}}, {{count}});
@@ -136,5 +145,7 @@ $(document).ready(function() {
   setInterval(refreshSwitches, 9000, updateSwitches_block_{{count}}, {{count}});
   setInterval(dimmerSlider, 9000, updateDimmers_block_{{count}}, {{count}});
   setInterval(refreshSetpoints, 9000, updateSetpoints_block_{{count}}, {{count}});
+
 });
+
 </script>
diff --git a/templates/top_tiles.html b/templates/top_tiles.html
index 0e370cf..3859b22 100644
--- a/templates/top_tiles.html
+++ b/templates/top_tiles.html
@@ -5,7 +5,7 @@
     <div class="left"></div>
     <div class="right">
       <span class="count_top"><i class="fa fa-{{v[1]}}"></i> {{k}}</span>
-      <div class="count{% if v[2] == "On" %} green{% elif v[2] == "Off" %} red{% endif %} loading" id=top_tiles_block_{{count}}_{{v[0]}} style="white-space: nowrap;">{{v[2]}}</div>
+      <div class="count{% if v[2] == "On" %} green{% elif v[2] == "Off" %} red{% endif %} loading" id="top_tiles_block_{{count}}_{{v[1]}}" style="white-space: nowrap;"></div>
     </div>
   </div>
   {% endfor %}
@@ -14,15 +14,21 @@
 $(document).ready(function() {
   var updateDivs_block_{{count}}=[];
   var tilesPreviousArray_{{count}}=[];
+  var updateDivsType_block_{{count}} = [];
   {% for k, v in blockArray[count]["top_tiles"].iteritems() %}
-  updateDivs_block_{{count}}.push("{{v[0]}}");
+    updateDivs_block_{{count}}.push("{{v[1]}}");
+    {% if v[3]|length > 3 %}
+      updateDivsType_block_{{count}}.push("{{v[3]}}");
+    {% else %}
+      updateDivsType_block_{{count}}.push("Data");
+    {% endif %}
   {% endfor %}
-  tilesPreviousArray_{{count}} = refreshTopTiles(updateDivs_block_{{count}}, "top_tiles_block_{{count}}_", tilesPreviousArray_{{count}});
+
+  tilesPreviousArray_{{count}} = refreshTopTiles(updateDivs_block_{{count}}, "top_tiles_block_{{count}}_", tilesPreviousArray_{{count}}, updateDivsType_block_{{count}});
+  tilesPreviousArray_{{count}} = setInterval(refreshTopTiles, 9000, updateDivs_block_{{count}}, "top_tiles_block_{{count}}_", tilesPreviousArray_{{count}}, updateDivsType_block_{{count}});
   for (var i in updateDivs_block_{{count}}) {
     $("#top_tiles_block_{{count}}_" + updateDivs_block_{{count}}[i]).removeClass("loading");
   }
-  tilesPreviousArray_{{count}} = setInterval(refreshTopTiles, 9000, updateDivs_block_{{count}}, "top_tiles_block_{{count}}_", tilesPreviousArray_{{count}});
 });
 </script>
-
 <!-- /top tiles -->