First iteration of weather icons

configuration.txt

@@ -107,6 +107,7 @@ web:
       #- type: digitalclock
       - type: timeofdayclock
         showdigitalclock: true
+        #showweather: true
       #- type: regions
       #  name: WorldGuard
       #  useworldpath: true

web/css/dynmap_style.css

@@ -294,6 +294,39 @@
 	bottom: 16px;
 }
 
+/*******************
+ * Clock weather style
+ */
+
+.weather {
+    position: absolute;
+    top: 17px;
+    right: 5px;
+    width: 25px;
+    height: 23px;
+    display: block;
+    background-repeat: no-repeat;
+}
+
+.weather.sunny {
+    background-image: url(../images/weather_sunny.png);
+}
+
+.weather.stormy {
+    background-image: url(../images/weather_stormy.png);
+}
+.weather .thunder {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    width: 25px;
+    height: 25px;
+    display: none;
+    background-repeat: no-repeat;
+    background-image: url(../images/weather_thunder.png);
+}
+
 /*******************
  * map list-specific styling
  */

web/js/timeofdayclock.js

@@ -62,6 +62,27 @@ componentconstructors['timeofdayclock'] = function(dynmap, configuration) {
 			setTime(update.servertime);
 		});
 	}
+	if(configuration.showweather) {
+		var weather = $('<div/>')
+			.addClass('weather')
+			.appendTo(element);
+		
+		var thunder = $('<div/>')
+			.addClass('thunder')
+            .css('display','none')
+			.appendTo(weather);
+		
+		var setWeather = function(hasStorm, isThundering) {
+			weather
+				.addClass(hasStorm ? 'stormy' : 'sunny')
+				.removeClass(hasStorm ? 'sunny' : 'stormy');
+			thunder.css('display',isThundering ? 'block' : 'none');
+		};
+		
+		$(dynmap).bind('worldupdated', function(event, update) {
+			setWeather(update.hasStorm, update.isThundering);
+		});
+	}
 	$(dynmap).bind('worldupdated', function(event, update) {
 		var sunangle;
 		var time = update.servertime;