From a28dcdf8361bf4f57902029a422f192555a8711f Mon Sep 17 00:00:00 2001
From: Manuel Friedli <manuel@fritteli.ch>
Date: Wed, 27 Nov 2013 18:13:37 +0100
Subject: [PATCH] toggler erzeugen statt hardcoded

---
 index.html |  7 -------
 uhr.js     | 35 +++++++++++++++++++++++++++--------
 2 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/index.html b/index.html
index a8145cf..9769de9 100644
--- a/index.html
+++ b/index.html
@@ -37,13 +37,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 		<option value="de">Hochdeutsch</option>
 		<option value="en">English</option>
 	</select>
-	<div class="onoffswitch">
-		<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="onoffswitch" checked="checked" onclick="uhr.toggle()" />
-		<label class="onoffswitch-label" for="onoffswitch">
-		    <div class="onoffswitch-inner"></div>
-		    <div class="onoffswitch-switch"></div>
-		</label>
-	</div>
 	<p id="disclaimer">Created by fritteli, inspired by <a href="http://www.qlocktwo.com/">QLOCKTWO</a>.
 	<script type="text/javascript">
 		var uhr = new Uhr($('#uhr'), $('#theme'));
diff --git a/uhr.js b/uhr.js
index cf93d15..58deffe 100644
--- a/uhr.js
+++ b/uhr.js
@@ -18,14 +18,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
  * @param themeElement Das HTML-Stylesheet-Tag, das das Theme-CSS referenziert.
  */
 function Uhr(clockarea, themeElement) {
-	this.clockarea = clockarea;
-	this.clockarea.empty();
-	this.clockarea.append('<span class="item dot dot1"></span>');
-	this.clockarea.append('<span class="item dot dot2"></span>');
-	this.clockarea.append('<span class="item dot dot3"></span>');
-	this.clockarea.append('<span class="item dot dot4"></span>');
-	this.clockarea.append('<div class="letterarea"></div>');
-	this.clockarea.append('<div class="reflection"></div>');
+	this.clockarea = this.initClockarea(clockarea);
+	this.toggleSwitch = this.initToggleSwitch();
 	this.letterarea = clockarea.find('.letterarea');
 	this.themeElement = themeElement;
 	this.timer = null;
@@ -144,6 +138,31 @@ Uhr.prototype.normalizeHour = function(hour) {
 	}
 	return hour;
 }
+Uhr.prototype.initClockarea = function(clockarea) {
+	clockarea.empty();
+	clockarea.append('<span class="item dot dot1"></span>');
+	clockarea.append('<span class="item dot dot2"></span>');
+	clockarea.append('<span class="item dot dot3"></span>');
+	clockarea.append('<span class="item dot dot4"></span>');
+	clockarea.append('<div class="letterarea"></div>');
+	clockarea.append('<div class="reflection"></div>');
+	return clockarea;
+}
+Uhr.prototype.initToggleSwitch = function() {
+	var toggleSwitch = $('<div class="onoffswitch"></div>');
+	var input = $('<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="onoffswitch" checked="checked" />');
+	var uhr = this;
+	input.on('click', function() {
+		uhr.toggle();
+	});
+	toggleSwitch.append(input);
+	toggleSwitch.append('<label class="onoffswitch-label" for="onoffswitch">'
+		+ '<div class="onoffswitch-inner"></div>'
+		+ '<div class="onoffswitch-switch"></div>'
+		+ '</label>');
+	this.clockarea.after(toggleSwitch);
+	return toggleSwitch;
+}
 
 Uhr.register('undefined', {
 	language: 'Undefined',