make datenspuren fun toggleable

content/static/datenspuren/script/clouds.js

@@ -10,6 +10,7 @@ window.requestAnimFrame = (function(){
               };
     })();
 
+var funEnabled = false;
 
 function now() {
     return new Date().getTime();
@@ -125,9 +126,27 @@ function stepClouds() {
 	});
     });
 
-    requestAnimFrame(stepClouds, 'body');
+    if (funEnabled) {
+	requestAnimFrame(stepClouds, 'body');
+    } else {
+	clouds.forEach(function(cloud) {
+	    cloud.el.detach();
+	});
+	clouds = [];
+    }
 }
 
 $(document).ready(function() {
-    setTimeout(stepClouds, 100);
+    $('#cloudy-sun').click(function() {
+	funEnabled = !funEnabled;
+	if (funEnabled) {
+	    var solar = $('<div id="solar"> </div>');
+	    solar.hide();
+	    $('#cloudy').append(solar);
+	    $('#solar').fadeIn(1000);
+	    setTimeout(stepClouds, 100);
+	} else {
+	    $('#solar').detach();
+	}
+    });
 });

content/static/datenspuren/style/style.css

@@ -23,6 +23,7 @@ body {
   margin-right: 3px;
   margin-left: auto;
   border-radius: 100%;
+  cursor: pointer;
 }
 #aussicht {
   background: url("../images/aussicht.png");

xsl/datenspuren/xhtml5.xsl

@@ -43,12 +43,9 @@
         </div>
         <div id="content">
           <div id="cloudy">
-            <div id="cloudy-sun">
+            <div id="cloudy-sun" title="Click here!">
               <xsl:text> </xsl:text>
             </div>
-	    <div id="solar">
-	      <xsl:text> </xsl:text>
-	    </div>
 	  </div>
           <xsl:call-template name="heading">
             <xsl:with-param name="title" select="$title"/>