From 5899a3a255fa3537713990b9e7d3c878e0b6d3f8 Mon Sep 17 00:00:00 2001
From: Manuel Friedli <manuel@fritteli.ch>
Date: Wed, 27 Nov 2013 15:25:34 +0100
Subject: [PATCH 01/16] klassen statt IDs

---
 index.html | 14 +++++++-------
 uhr.css    | 14 +++++++-------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/index.html b/index.html
index 49826c5..c288927 100644
--- a/index.html
+++ b/index.html
@@ -24,14 +24,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
 </head>
 <body>
-	<div id="uhr">
-		<span class="item dot dot1" id="dot1"></span>
-		<span class="item dot dot2" id="dot2"></span>
-		<span class="item dot dot3" id="dot3"></span>
-		<span class="item dot dot4" id="dot4"></span>
-		<div id="renderarea"></div>
+	<div id="uhr" class="uhr">
+		<span class="item dot dot1"></span>
+		<span class="item dot dot2"></span>
+		<span class="item dot dot3"></span>
+		<span class="item dot dot4"></span>
+		<div id="renderarea" class="renderarea"></div>
 		<!-- glossy reflection -->
-		<span id="reflection"></span>
+		<span class="reflection"></span>
 	</div>
 	<select id="themeswitcher">
 		<option value="black">Schwarz</option>
diff --git a/uhr.css b/uhr.css
index 827b804..c62fe68 100644
--- a/uhr.css
+++ b/uhr.css
@@ -19,7 +19,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 body {
 	font-family: 'Uhrenfont', sans-serif;
 }
-#uhr {
+.uhr {
 	padding: 3em;
 	position: relative;
 	margin: 0;
@@ -27,7 +27,7 @@ body {
 	height: 40em;
 	transition: background-color 0.5s;
 }
-#reflection {
+.uhr .reflection {
 	position: absolute;
 	top: 0;
 	bottom: 0;
@@ -39,7 +39,7 @@ body {
 }
 #themeswitcher {
 }
-#renderarea {
+.uhr .renderarea {
 	display: block;
 	position: absolute;
 	top: 5em;
@@ -63,19 +63,19 @@ body {
 	border-color: #eee;
 	box-shadow: 0 0 0.2em #eee;
 }
-#dot1 {
+.dot1 {
 	top: 1.5em;
 	left: 1.5em;
 }
-#dot2 {
+.dot2 {
 	top: 1.5em;
 	right: 1.5em;
 }
-#dot3 {
+.dot3 {
 	bottom: 1.5em;
 	right: 1.5em;
 }
-#dot4 {
+.dot4 {
 	bottom: 1.5em;
 	left: 1.5em;
 }

From fe243507ec7a65f5be7b3658c3f371c2cd557e70 Mon Sep 17 00:00:00 2001
From: Manuel Friedli <manuel@fritteli.ch>
Date: Wed, 27 Nov 2013 15:40:56 +0100
Subject: [PATCH 02/16] mehr classes statt ids

---
 index.html |  4 ++--
 uhr.css    |  2 +-
 uhr.js     | 13 +++++++------
 3 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/index.html b/index.html
index c288927..a804417 100644
--- a/index.html
+++ b/index.html
@@ -29,7 +29,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 		<span class="item dot dot2"></span>
 		<span class="item dot dot3"></span>
 		<span class="item dot dot4"></span>
-		<div id="renderarea" class="renderarea"></div>
+		<div class="letterarea"></div>
 		<!-- glossy reflection -->
 		<span class="reflection"></span>
 	</div>
@@ -54,7 +54,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 	</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($('#renderarea'), $('#theme'));
+		var uhr = new Uhr($('#uhr'), $('#theme'));
 		$(document).ready(function() {
 			$('#themeswitcher').on('change', function() {
 				uhr.setTheme(this.value);
diff --git a/uhr.css b/uhr.css
index c62fe68..67a8e27 100644
--- a/uhr.css
+++ b/uhr.css
@@ -39,7 +39,7 @@ body {
 }
 #themeswitcher {
 }
-.uhr .renderarea {
+.uhr .letterarea {
 	display: block;
 	position: absolute;
 	top: 5em;
diff --git a/uhr.js b/uhr.js
index 2a2decc..dcb9feb 100644
--- a/uhr.js
+++ b/uhr.js
@@ -14,11 +14,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 /**
  * Die Uhr.
- * @param renderarea   Das jQuery-gewrappte HTML-Element, auf dem die Uhr angezeigt werden soll.
+ * @param clockarea   Das jQuery-gewrappte HTML-Element, auf dem die Uhr angezeigt werden soll.
  * @param themeElement Das HTML-Stylesheet-Tag, das das Theme-CSS referenziert.
  */
-function Uhr(renderarea, themeElement) {
-	this.renderarea = renderarea;
+function Uhr(clockarea, themeElement) {
+	this.clockarea = clockarea;
+	this.letterarea = clockarea.find('.letterarea');
 	this.themeElement = themeElement;
 	this.timer = null;
 	this.currentTheme = null;
@@ -64,7 +65,7 @@ Uhr.prototype.setLayout = function(locale) {
 	var newLayout = this.layouts[locale];
 	if (newLayout !== undefined && newLayout != this.currentLayout) {
 		this.currentLayout = newLayout;
-		var renderer = new UhrRenderer(this.currentLayout, this.renderarea);
+		var renderer = new UhrRenderer(this.currentLayout, this.letterarea);
 		renderer.render(this);
 		$.cookie('layout', locale);
 	}
@@ -103,10 +104,10 @@ Uhr.prototype.update = function() {
 	}
 }
 Uhr.prototype.clear = function() {
-	this.renderarea.parent().find('.item').removeClass('active');
+	this.clockarea.find('.item').removeClass('active');
 }
 Uhr.prototype.highlight = function(itemClass) {
-	this.renderarea.parent().find('.item.' + itemClass).addClass('active');
+	this.clockarea.find('.item.' + itemClass).addClass('active');
 }
 Uhr.prototype.getHour = function(date) {
 	if (typeof this.currentLayout.getHour === 'function') {

From 300477cc3f437c1acdc466a305c1f2dfd8d93f01 Mon Sep 17 00:00:00 2001
From: Manuel Friedli <manuel@fritteli.ch>
Date: Wed, 27 Nov 2013 16:20:47 +0100
Subject: [PATCH 03/16] uhr erzeugt html-elemente selber

---
 index.html | 10 +---------
 uhr.js     |  7 +++++++
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/index.html b/index.html
index a804417..3f67831 100644
--- a/index.html
+++ b/index.html
@@ -24,15 +24,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
 </head>
 <body>
-	<div id="uhr" class="uhr">
-		<span class="item dot dot1"></span>
-		<span class="item dot dot2"></span>
-		<span class="item dot dot3"></span>
-		<span class="item dot dot4"></span>
-		<div class="letterarea"></div>
-		<!-- glossy reflection -->
-		<span class="reflection"></span>
-	</div>
+	<div id="uhr" class="uhr"></div>
 	<select id="themeswitcher">
 		<option value="black">Schwarz</option>
 		<option value="red">Rot</option>
diff --git a/uhr.js b/uhr.js
index dcb9feb..ea8da43 100644
--- a/uhr.js
+++ b/uhr.js
@@ -19,6 +19,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 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.letterarea = clockarea.find('.letterarea');
 	this.themeElement = themeElement;
 	this.timer = null;

From 8bce99c33a84bd36447d2f081d76c876863f904b Mon Sep 17 00:00:00 2001
From: Manuel Friedli <manuel@fritteli.ch>
Date: Wed, 27 Nov 2013 16:34:51 +0100
Subject: [PATCH 04/16] css korrigiert, class statt id

---
 uhr-black.css | 2 +-
 uhr-blue.css  | 2 +-
 uhr-green.css | 2 +-
 uhr-red.css   | 2 +-
 uhr-white.css | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/uhr-black.css b/uhr-black.css
index 5fd1731..be167b5 100644
--- a/uhr-black.css
+++ b/uhr-black.css
@@ -13,7 +13,7 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 @import url("uhr-idle-light.css");
-#uhr {
+.uhr {
 	background-color: #111;
 }
 .onoffswitch-inner:before {
diff --git a/uhr-blue.css b/uhr-blue.css
index dadc71a..429bcf4 100644
--- a/uhr-blue.css
+++ b/uhr-blue.css
@@ -13,7 +13,7 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 @import url("uhr-idle-light.css");
-#uhr {
+.uhr {
 	background-color: #00a;
 }
 .onoffswitch-inner:before {
diff --git a/uhr-green.css b/uhr-green.css
index 3243bdb..a5a82a5 100644
--- a/uhr-green.css
+++ b/uhr-green.css
@@ -13,7 +13,7 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 @import url("uhr-idle-dark.css");
-#uhr {
+.uhr {
 	background-color: #0c0;
 }
 .onoffswitch-inner:before {
diff --git a/uhr-red.css b/uhr-red.css
index 63a01b7..b3474f2 100644
--- a/uhr-red.css
+++ b/uhr-red.css
@@ -13,7 +13,7 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 @import url("uhr-idle-light.css");
-#uhr {
+.uhr {
 	background-color: #700;
 }
 .onoffswitch-inner:before {
diff --git a/uhr-white.css b/uhr-white.css
index 645d280..23a62b8 100644
--- a/uhr-white.css
+++ b/uhr-white.css
@@ -13,7 +13,7 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 @import url("uhr-idle-dark.css");
-#uhr {
+.uhr {
 	background-color: #ccc;
 }
 .dot.active{

From 1c06b7248a242557579b48e2cf6fcb545cd4bb44 Mon Sep 17 00:00:00 2001
From: Manuel Friedli <manuel@fritteli.ch>
Date: Wed, 27 Nov 2013 17:08:22 +0100
Subject: [PATCH 05/16] leerzeile entfernt

---
 index.html | 1 -
 1 file changed, 1 deletion(-)

diff --git a/index.html b/index.html
index 3f67831..528826f 100644
--- a/index.html
+++ b/index.html
@@ -86,4 +86,3 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 	<script type="text/javascript" src="uhr-en.js"></script>
 </body>
 </html>
-

From 2fa23c2f07359f9c8e18f27402c6230f951b85bc Mon Sep 17 00:00:00 2001
From: Manuel Friedli <manuel@fritteli.ch>
Date: Wed, 27 Nov 2013 17:36:05 +0100
Subject: [PATCH 06/16] layouts global registrieren, nicht pro uhr

---
 index.html   |  6 +++---
 uhr-de.js    |  2 +-
 uhr-de_CH.js |  2 +-
 uhr-en.js    |  2 +-
 uhr.js       | 21 +++++++++++----------
 5 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/index.html b/index.html
index 528826f..a8145cf 100644
--- a/index.html
+++ b/index.html
@@ -59,13 +59,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 			var theme = $.cookie('theme');
 			var layout = $.cookie('layout');
 			var status = $.cookie('status');
-			if (theme == undefined) {
+			if (theme === undefined || theme == 'undefined') {
 				theme = 'black';
 			}
-			if(layout == undefined) {
+			if(layout === undefined || layout == 'undefined') {
 				layout = 'de_CH';
 			}
-			if (status == undefined) {
+			if (status === undefined || status == 'undefined') {
 				status = 'on';
 			}
 			$('#themeswitcher').val(theme);
diff --git a/uhr-de.js b/uhr-de.js
index aaa6a3e..4a009ed 100644
--- a/uhr-de.js
+++ b/uhr-de.js
@@ -27,4 +27,4 @@ var layout = {
 		[h('Z', 10), h('E', 10),h('H', 10),h('N', 9, 10),h('E', 9),h('U', 9),h('N', 9),l('K'),l('U'),l('H'),l('R')]
 	]
 };
-uhr.register('de', layout);
+Uhr.register('de', layout);
diff --git a/uhr-de_CH.js b/uhr-de_CH.js
index c9eba2d..f10605b 100644
--- a/uhr-de_CH.js
+++ b/uhr-de_CH.js
@@ -27,4 +27,4 @@ var layout = {
 		[h('Z', 12), h('W', 12),h('Ö', 12),h('U', 12),h('F', 12),h('I', 12),l('N'),l('A'),l('U'),l('H'),l('R')]
 	]
 };
-uhr.register('de_CH', layout);
+Uhr.register('de_CH', layout);
diff --git a/uhr-en.js b/uhr-en.js
index fdea16f..59dfc15 100644
--- a/uhr-en.js
+++ b/uhr-en.js
@@ -34,4 +34,4 @@ var layout = {
 		return hour;
 	}
 };
-uhr.register('en', layout);
+Uhr.register('en', layout);
diff --git a/uhr.js b/uhr.js
index ea8da43..c9dec18 100644
--- a/uhr.js
+++ b/uhr.js
@@ -31,14 +31,13 @@ function Uhr(clockarea, themeElement) {
 	this.timer = null;
 	this.currentTheme = null;
 	this.currentLayout = null;
-	this.layouts = new Array();
 	this.currentMinute = -1;
-	this.register('undefined', {
-		language: 'Undefined',
-		values: []
-	});
+	this.setLayout('undefined');
+}
+Uhr.layouts = new Array();
+Uhr.register = function (locale, layout) {
+	Uhr.layouts[locale] = layout;
 }
-
 Uhr.prototype.toggle = function() {
 	if (this.isOn()) {
 		this.stop();
@@ -65,11 +64,8 @@ Uhr.prototype.stop = function() {
 Uhr.prototype.isOn = function() {
 	return this.timer != null;
 }
-Uhr.prototype.register = function(key, layout) {
-	this.layouts[key] = layout;
-}
 Uhr.prototype.setLayout = function(locale) {
-	var newLayout = this.layouts[locale];
+	var newLayout = Uhr.layouts[locale];
 	if (newLayout !== undefined && newLayout != this.currentLayout) {
 		this.currentLayout = newLayout;
 		var renderer = new UhrRenderer(this.currentLayout, this.letterarea);
@@ -150,6 +146,11 @@ Uhr.prototype.normalizeHour = function(hour) {
 	return hour;
 }
 
+Uhr.register('undefined', {
+	language: 'Undefined',
+	values: []
+});
+
 /**
  * Hilfsklasse zum Rendern der Uhr.
  * @param layout     Layout-Objekt, das gerendert werden soll.

From 714e86a53c978d4320be6483485ad9cba435f245 Mon Sep 17 00:00:00 2001
From: Manuel Friedli <manuel@fritteli.ch>
Date: Wed, 27 Nov 2013 17:45:28 +0100
Subject: [PATCH 07/16] set cookie path and date

---
 uhr.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/uhr.js b/uhr.js
index c9dec18..6a9bf8d 100644
--- a/uhr.js
+++ b/uhr.js
@@ -50,7 +50,7 @@ Uhr.prototype.start = function() {
 		var uhr = this;
 		this.timer = window.setInterval(function() {uhr.update();}, 1000);
 		this.update();
-		$.cookie('status', 'on');
+		$.cookie('status', 'on', {expires: 365, path: '/'});
 	}
 }
 Uhr.prototype.stop = function() {
@@ -58,7 +58,7 @@ Uhr.prototype.stop = function() {
 		window.clearInterval(this.timer);
 		this.timer = null;
 		this.update();
-		$.cookie('status', 'off');
+		$.cookie('status', 'off', {expires: 365, path: '/'});
 	}
 }
 Uhr.prototype.isOn = function() {
@@ -70,14 +70,14 @@ Uhr.prototype.setLayout = function(locale) {
 		this.currentLayout = newLayout;
 		var renderer = new UhrRenderer(this.currentLayout, this.letterarea);
 		renderer.render(this);
-		$.cookie('layout', locale);
+		$.cookie('layout', locale, {expires: 365, path: '/'});
 	}
 }
 Uhr.prototype.setTheme = function(theme) {
 	if (theme != this.currentTheme) {
 		this.currentTheme = theme;
 		this.themeElement.attr('href', 'uhr-' + theme + '.css');
-		$.cookie('theme', theme);
+		$.cookie('theme', theme, {expires: 365, path: '/'});
 	}
 }
 Uhr.prototype.update = function() {

From 562855e8f1e304fb8a7b3ab5390de2bd0fb59cbd Mon Sep 17 00:00:00 2001
From: Manuel Friedli <manuel@fritteli.ch>
Date: Wed, 27 Nov 2013 17:48:41 +0100
Subject: [PATCH 08/16] set layout korrekt

---
 uhr.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/uhr.js b/uhr.js
index 6a9bf8d..cf93d15 100644
--- a/uhr.js
+++ b/uhr.js
@@ -30,9 +30,8 @@ function Uhr(clockarea, themeElement) {
 	this.themeElement = themeElement;
 	this.timer = null;
 	this.currentTheme = null;
-	this.currentLayout = null;
+	this.currentLayout = Uhr.layouts['undefined'];
 	this.currentMinute = -1;
-	this.setLayout('undefined');
 }
 Uhr.layouts = new Array();
 Uhr.register = function (locale, layout) {

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 09/16] 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',

From 66283e342456b169aa004522cb5b0c7c1139f951 Mon Sep 17 00:00:00 2001
From: Manuel Friedli <manuel@fritteli.ch>
Date: Wed, 27 Nov 2013 18:16:42 +0100
Subject: [PATCH 10/16] jede uhr hat eine eigene id

---
 uhr.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/uhr.js b/uhr.js
index 58deffe..23203a8 100644
--- a/uhr.js
+++ b/uhr.js
@@ -18,6 +18,7 @@ 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.id = Uhr.id++;
 	this.clockarea = this.initClockarea(clockarea);
 	this.toggleSwitch = this.initToggleSwitch();
 	this.letterarea = clockarea.find('.letterarea');
@@ -27,6 +28,7 @@ function Uhr(clockarea, themeElement) {
 	this.currentLayout = Uhr.layouts['undefined'];
 	this.currentMinute = -1;
 }
+Uhr.id = 0;
 Uhr.layouts = new Array();
 Uhr.register = function (locale, layout) {
 	Uhr.layouts[locale] = layout;
@@ -150,13 +152,13 @@ Uhr.prototype.initClockarea = function(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 input = $('<input type="checkbox" name="onoffswitch' + this.id + '" class="onoffswitch-checkbox" id="onoffswitch' + this.id + '" checked="checked" />');
 	var uhr = this;
 	input.on('click', function() {
 		uhr.toggle();
 	});
 	toggleSwitch.append(input);
-	toggleSwitch.append('<label class="onoffswitch-label" for="onoffswitch">'
+	toggleSwitch.append('<label class="onoffswitch-label" for="onoffswitch' + this.id + '">'
 		+ '<div class="onoffswitch-inner"></div>'
 		+ '<div class="onoffswitch-switch"></div>'
 		+ '</label>');

From bb60117dcf0096d88398e3b7500b6e796342b6ec Mon Sep 17 00:00:00 2001
From: Manuel Friedli <manuel@fritteli.ch>
Date: Wed, 27 Nov 2013 18:37:38 +0100
Subject: [PATCH 11/16] erster schritt, layout-dropdown dynamisch zu laden

---
 index.html |  6 +++---
 uhr.js     | 14 ++++++++++++++
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 9769de9..b4cb091 100644
--- a/index.html
+++ b/index.html
@@ -38,6 +38,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 		<option value="en">English</option>
 	</select>
 	<p id="disclaimer">Created by fritteli, inspired by <a href="http://www.qlocktwo.com/">QLOCKTWO</a>.
+	<script type="text/javascript" src="uhr-de_CH.js"></script>
+	<script type="text/javascript" src="uhr-de.js"></script>
+	<script type="text/javascript" src="uhr-en.js"></script>
 	<script type="text/javascript">
 		var uhr = new Uhr($('#uhr'), $('#theme'));
 		$(document).ready(function() {
@@ -74,8 +77,5 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 			}
 		});
 	</script>
-	<script type="text/javascript" src="uhr-de_CH.js"></script>
-	<script type="text/javascript" src="uhr-de.js"></script>
-	<script type="text/javascript" src="uhr-en.js"></script>
 </body>
 </html>
diff --git a/uhr.js b/uhr.js
index 23203a8..d82871e 100644
--- a/uhr.js
+++ b/uhr.js
@@ -21,6 +21,7 @@ function Uhr(clockarea, themeElement) {
 	this.id = Uhr.id++;
 	this.clockarea = this.initClockarea(clockarea);
 	this.toggleSwitch = this.initToggleSwitch();
+	this.layoutSwitch = this.initLayoutSwitch();
 	this.letterarea = clockarea.find('.letterarea');
 	this.themeElement = themeElement;
 	this.timer = null;
@@ -165,6 +166,19 @@ Uhr.prototype.initToggleSwitch = function() {
 	this.clockarea.after(toggleSwitch);
 	return toggleSwitch;
 }
+Uhr.prototype.initLayoutSwitch = function() {
+	var layoutSwitch = $('<select id="layoutswitcher' + this.id + '"></select>')
+	for (var code in Uhr.layouts) {
+		if (Uhr.layouts.hasOwnProperty(code)) {
+			console.log(code);
+			var layout = Uhr.layouts[code];
+			console.log(layout);
+			console.log(layout.language);
+			// TODO fill select with options
+		}
+	}
+	return layoutSwitch;
+}
 
 Uhr.register('undefined', {
 	language: 'Undefined',

From 5223ceb1f6a4a47e847042721ae0fdeda5fa86f0 Mon Sep 17 00:00:00 2001
From: Manuel Friedli <manuel@fritteli.ch>
Date: Thu, 28 Nov 2013 08:51:37 +0100
Subject: [PATCH 12/16] commit, weil ich wissen muss, obs an den cookies liegt,
 dass es nicht geht

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

diff --git a/index.html b/index.html
index b4cb091..a23c2a4 100644
--- a/index.html
+++ b/index.html
@@ -32,11 +32,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 		<option value="green">Grün</option>
 		<option value="white">Weiss</option>
 	</select>
-	<select id="layoutswitcher">
-		<option value="de_CH">Bärndütsch</option>
-		<option value="de">Hochdeutsch</option>
-		<option value="en">English</option>
-	</select>
 	<p id="disclaimer">Created by fritteli, inspired by <a href="http://www.qlocktwo.com/">QLOCKTWO</a>.
 	<script type="text/javascript" src="uhr-de_CH.js"></script>
 	<script type="text/javascript" src="uhr-de.js"></script>
@@ -47,34 +42,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 			$('#themeswitcher').on('change', function() {
 				uhr.setTheme(this.value);
 			});
-			$('#layoutswitcher').on('change', function() {
-				uhr.setLayout(this.value);
-			});
-			$.cookie.defaults.expires = 365;
-			$.cookie.defaults.path = '/';
 			var theme = $.cookie('theme');
-			var layout = $.cookie('layout');
-			var status = $.cookie('status');
 			if (theme === undefined || theme == 'undefined') {
 				theme = 'black';
 			}
-			if(layout === undefined || layout == 'undefined') {
-				layout = 'de_CH';
-			}
-			if (status === undefined || status == 'undefined') {
-				status = 'on';
-			}
 			$('#themeswitcher').val(theme);
 			uhr.setTheme(theme);
-			$('#layoutswitcher').val(layout);
-			uhr.setLayout(layout);
-			if (status == 'on') {
-				uhr.start();
-				$('#onoffswitch').prop('checked', true);
-			} else {
-				uhr.stop();
-				$('#onoffswitch').prop('checked', false);
-			}
 		});
 	</script>
 </body>
diff --git a/uhr.js b/uhr.js
index d82871e..14d8cac 100644
--- a/uhr.js
+++ b/uhr.js
@@ -19,15 +19,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 function Uhr(clockarea, themeElement) {
 	this.id = Uhr.id++;
-	this.clockarea = this.initClockarea(clockarea);
-	this.toggleSwitch = this.initToggleSwitch();
-	this.layoutSwitch = this.initLayoutSwitch();
-	this.letterarea = clockarea.find('.letterarea');
 	this.themeElement = themeElement;
 	this.timer = null;
 	this.currentTheme = null;
 	this.currentLayout = Uhr.layouts['undefined'];
 	this.currentMinute = -1;
+	this.initHTMLElements(clockarea, themeElement);
 }
 Uhr.id = 0;
 Uhr.layouts = new Array();
@@ -46,7 +43,7 @@ Uhr.prototype.start = function() {
 		var uhr = this;
 		this.timer = window.setInterval(function() {uhr.update();}, 1000);
 		this.update();
-		$.cookie('status', 'on', {expires: 365, path: '/'});
+		$.cookie('status' + this.id, 'on', {expires: 365, path: '/'});
 	}
 }
 Uhr.prototype.stop = function() {
@@ -54,7 +51,7 @@ Uhr.prototype.stop = function() {
 		window.clearInterval(this.timer);
 		this.timer = null;
 		this.update();
-		$.cookie('status', 'off', {expires: 365, path: '/'});
+		$.cookie('status' + this.id, 'off', {expires: 365, path: '/'});
 	}
 }
 Uhr.prototype.isOn = function() {
@@ -66,14 +63,14 @@ Uhr.prototype.setLayout = function(locale) {
 		this.currentLayout = newLayout;
 		var renderer = new UhrRenderer(this.currentLayout, this.letterarea);
 		renderer.render(this);
-		$.cookie('layout', locale, {expires: 365, path: '/'});
+		$.cookie('layout' + this.id, locale, {expires: 365, path: '/'});
 	}
 }
 Uhr.prototype.setTheme = function(theme) {
 	if (theme != this.currentTheme) {
 		this.currentTheme = theme;
 		this.themeElement.attr('href', 'uhr-' + theme + '.css');
-		$.cookie('theme', theme, {expires: 365, path: '/'});
+		$.cookie('theme' + this.id, theme, {expires: 365, path: '/'});
 	}
 }
 Uhr.prototype.update = function() {
@@ -141,6 +138,12 @@ Uhr.prototype.normalizeHour = function(hour) {
 	}
 	return hour;
 }
+Uhr.prototype.initHTMLElements = function(clockarea, themeElement) {
+	this.clockarea = this.initClockarea(clockarea);
+	this.letterarea = this.clockarea.find('.letterarea');
+	this.layoutSwitch = this.initLayoutSwitch();
+	this.toggleSwitch = this.initToggleSwitch();
+}
 Uhr.prototype.initClockarea = function(clockarea) {
 	clockarea.empty();
 	clockarea.append('<span class="item dot dot1"></span>');
@@ -164,24 +167,43 @@ Uhr.prototype.initToggleSwitch = function() {
 		+ '<div class="onoffswitch-switch"></div>'
 		+ '</label>');
 	this.clockarea.after(toggleSwitch);
+
+	var status = $.cookie('status' + this.id);
+	if (status == 'on') {
+		this.start();
+		toggleSwitch.prop('checked', true);
+	} else {
+		this.stop();
+		toggleSwitch.prop('checked', false);
+	}
 	return toggleSwitch;
 }
 Uhr.prototype.initLayoutSwitch = function() {
 	var layoutSwitch = $('<select id="layoutswitcher' + this.id + '"></select>')
+
 	for (var code in Uhr.layouts) {
 		if (Uhr.layouts.hasOwnProperty(code)) {
-			console.log(code);
 			var layout = Uhr.layouts[code];
-			console.log(layout);
-			console.log(layout.language);
-			// TODO fill select with options
+			var option = $('<option value="' + code + '">' + layout.language + '</option>')
+			layoutSwitch.append(option);
 		}
 	}
+	var uhr = this;
+	layoutSwitch.on('change', function() {
+		uhr.setLayout(this.value);
+	});
+	this.clockarea.after(layoutSwitch);
+
+	var selectedLayout = $.cookie('layout' + this.id);
+	if (selectedLayout != undefined && selectedLayout != 'undefinded') {
+		layoutSwitch.val(selectedLayout);
+		this.setLayout(selectedLayout);
+	}
 	return layoutSwitch;
 }
 
 Uhr.register('undefined', {
-	language: 'Undefined',
+	language: 'Please choose your language',
 	values: []
 });
 

From 4f796107bc09af8ad09fbe5e4c70fd09560bdf30 Mon Sep 17 00:00:00 2001
From: Manuel Friedli <manuel@fritteli.ch>
Date: Thu, 28 Nov 2013 09:40:04 +0100
Subject: [PATCH 13/16] =?UTF-8?q?falsches=20element=20zum=20toggeln=20gew?=
 =?UTF-8?q?=C3=A4hlt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 uhr.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/uhr.js b/uhr.js
index 14d8cac..e954fe9 100644
--- a/uhr.js
+++ b/uhr.js
@@ -171,11 +171,12 @@ Uhr.prototype.initToggleSwitch = function() {
 	var status = $.cookie('status' + this.id);
 	if (status == 'on') {
 		this.start();
-		toggleSwitch.prop('checked', true);
+		input.prop('checked', true);
 	} else {
 		this.stop();
-		toggleSwitch.prop('checked', false);
+		input.prop('checked', false);
 	}
+
 	return toggleSwitch;
 }
 Uhr.prototype.initLayoutSwitch = function() {

From 77c660fcff8342a7042927bb52ed5c89082d0086 Mon Sep 17 00:00:00 2001
From: Manuel Friedli <manuel@fritteli.ch>
Date: Thu, 28 Nov 2013 09:57:50 +0100
Subject: [PATCH 14/16] toggle-switch auch farbig, und vorallem pro uhr

---
 index.html    | 26 ++++++--------------------
 uhr-black.css |  4 ++--
 uhr-blue.css  |  4 ++--
 uhr-green.css |  4 ++--
 uhr-red.css   |  4 ++--
 uhr-white.css |  8 ++++----
 uhr.js        | 30 +++++++++++++++++++++++++-----
 7 files changed, 43 insertions(+), 37 deletions(-)

diff --git a/index.html b/index.html
index a23c2a4..0172462 100644
--- a/index.html
+++ b/index.html
@@ -20,35 +20,21 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 	<script type="text/javascript" src="jquery.cookie.js"></script>
 	<script type="text/javascript" src="uhr.js"></script>
 	<link rel="stylesheet" type="text/css" href="uhr.css" />
-	<link rel="stylesheet" type="text/css" href="uhr-black.css" id="theme" />
+	<link rel="stylesheet" type="text/css" href="uhr-black.css" />
+	<link rel="stylesheet" type="text/css" href="uhr-blue.css" />
+	<link rel="stylesheet" type="text/css" href="uhr-green.css" />
+	<link rel="stylesheet" type="text/css" href="uhr-red.css" />
+	<link rel="stylesheet" type="text/css" href="uhr-white.css" />
 	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
 </head>
 <body>
 	<div id="uhr" class="uhr"></div>
-	<select id="themeswitcher">
-		<option value="black">Schwarz</option>
-		<option value="red">Rot</option>
-		<option value="blue">Blau</option>
-		<option value="green">Grün</option>
-		<option value="white">Weiss</option>
-	</select>
 	<p id="disclaimer">Created by fritteli, inspired by <a href="http://www.qlocktwo.com/">QLOCKTWO</a>.
 	<script type="text/javascript" src="uhr-de_CH.js"></script>
 	<script type="text/javascript" src="uhr-de.js"></script>
 	<script type="text/javascript" src="uhr-en.js"></script>
 	<script type="text/javascript">
-		var uhr = new Uhr($('#uhr'), $('#theme'));
-		$(document).ready(function() {
-			$('#themeswitcher').on('change', function() {
-				uhr.setTheme(this.value);
-			});
-			var theme = $.cookie('theme');
-			if (theme === undefined || theme == 'undefined') {
-				theme = 'black';
-			}
-			$('#themeswitcher').val(theme);
-			uhr.setTheme(theme);
-		});
+		var uhr = new Uhr($('#uhr'));
 	</script>
 </body>
 </html>
diff --git a/uhr-black.css b/uhr-black.css
index be167b5..36753a4 100644
--- a/uhr-black.css
+++ b/uhr-black.css
@@ -13,9 +13,9 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 @import url("uhr-idle-light.css");
-.uhr {
+.uhr.black{
 	background-color: #111;
 }
-.onoffswitch-inner:before {
+.black .onoffswitch-inner:before {
 	background-color: #111;
 }
diff --git a/uhr-blue.css b/uhr-blue.css
index 429bcf4..b8a41c8 100644
--- a/uhr-blue.css
+++ b/uhr-blue.css
@@ -13,9 +13,9 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 @import url("uhr-idle-light.css");
-.uhr {
+.uhr.blue {
 	background-color: #00a;
 }
-.onoffswitch-inner:before {
+.blue .onoffswitch-inner:before {
 	background-color: #00a;
 }
diff --git a/uhr-green.css b/uhr-green.css
index a5a82a5..4f65ae4 100644
--- a/uhr-green.css
+++ b/uhr-green.css
@@ -13,9 +13,9 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 @import url("uhr-idle-dark.css");
-.uhr {
+.uhr.green {
 	background-color: #0c0;
 }
-.onoffswitch-inner:before {
+.green .onoffswitch-inner:before {
 	background-color: #0c0;
 }
diff --git a/uhr-red.css b/uhr-red.css
index b3474f2..d0e986d 100644
--- a/uhr-red.css
+++ b/uhr-red.css
@@ -13,9 +13,9 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 @import url("uhr-idle-light.css");
-.uhr {
+.uhr.red {
 	background-color: #700;
 }
-.onoffswitch-inner:before {
+.red .onoffswitch-inner:before {
 	background-color: #700;
 }
diff --git a/uhr-white.css b/uhr-white.css
index 23a62b8..6b50313 100644
--- a/uhr-white.css
+++ b/uhr-white.css
@@ -13,17 +13,17 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 @import url("uhr-idle-dark.css");
-.uhr {
+.uhr.white {
 	background-color: #ccc;
 }
-.dot.active{
+.uhr.white .dot.active{
 	border-color: #fff !important;
 	box-shadow: 0 0 0.1em #fff !important;
 }
-.letter.active{
+.uhr.white .letter.active{
 	color: #fff !important;
 	text-shadow: 0 0 0.1em #fff !important;
 }
-.onoffswitch-inner:before {
+.white .onoffswitch-inner:before {
 	background-color: #ccc;
 }
diff --git a/uhr.js b/uhr.js
index e954fe9..bf6dc09 100644
--- a/uhr.js
+++ b/uhr.js
@@ -17,14 +17,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
  * @param clockarea   Das jQuery-gewrappte HTML-Element, auf dem die Uhr angezeigt werden soll.
  * @param themeElement Das HTML-Stylesheet-Tag, das das Theme-CSS referenziert.
  */
-function Uhr(clockarea, themeElement) {
+function Uhr(clockarea) {
 	this.id = Uhr.id++;
-	this.themeElement = themeElement;
 	this.timer = null;
 	this.currentTheme = null;
 	this.currentLayout = Uhr.layouts['undefined'];
 	this.currentMinute = -1;
-	this.initHTMLElements(clockarea, themeElement);
+	this.initHTMLElements(clockarea);
 }
 Uhr.id = 0;
 Uhr.layouts = new Array();
@@ -68,8 +67,11 @@ Uhr.prototype.setLayout = function(locale) {
 }
 Uhr.prototype.setTheme = function(theme) {
 	if (theme != this.currentTheme) {
+		this.clockarea.removeClass(this.currentTheme);
+		this.toggleSwitch.removeClass(this.currentTheme);
+		this.clockarea.addClass(theme);
+		this.toggleSwitch.addClass(theme);
 		this.currentTheme = theme;
-		this.themeElement.attr('href', 'uhr-' + theme + '.css');
 		$.cookie('theme' + this.id, theme, {expires: 365, path: '/'});
 	}
 }
@@ -138,12 +140,16 @@ Uhr.prototype.normalizeHour = function(hour) {
 	}
 	return hour;
 }
-Uhr.prototype.initHTMLElements = function(clockarea, themeElement) {
+Uhr.prototype.initHTMLElements = function(clockarea) {
+	this.createHTMLElements();
 	this.clockarea = this.initClockarea(clockarea);
 	this.letterarea = this.clockarea.find('.letterarea');
+	this.themeSwitch = this.initThemeSwitch();
 	this.layoutSwitch = this.initLayoutSwitch();
 	this.toggleSwitch = this.initToggleSwitch();
 }
+Uhr.prototype.createHTMLElements = function() {
+}
 Uhr.prototype.initClockarea = function(clockarea) {
 	clockarea.empty();
 	clockarea.append('<span class="item dot dot1"></span>');
@@ -202,6 +208,20 @@ Uhr.prototype.initLayoutSwitch = function() {
 	}
 	return layoutSwitch;
 }
+Uhr.prototype.initThemeSwitch = function() {
+	var themeSwitch = $('<select></select>');
+	themeSwitch.append('<option value="black">Schwarz</option>');
+	themeSwitch.append('<option value="red">Rot</option>');
+	themeSwitch.append('<option value="blue">Blau</option>');
+	themeSwitch.append('<option value="green">Grün</option>');
+	themeSwitch.append('<option value="white">Weiss</option>');
+	var uhr = this;
+	themeSwitch.on('change', function() {
+		uhr.setTheme(this.value);
+	});
+	this.clockarea.after(themeSwitch);
+	return themeSwitch;
+}
 
 Uhr.register('undefined', {
 	language: 'Please choose your language',

From 9a7d2a898f2d3670389fa9cfa7abcac4c6dde706 Mon Sep 17 00:00:00 2001
From: Manuel Friedli <manuel@fritteli.ch>
Date: Thu, 28 Nov 2013 10:12:52 +0100
Subject: [PATCH 15/16] zuerst erzeugen, dann verhalten definieren

---
 uhr.js | 95 ++++++++++++++++++++++++++++++++--------------------------
 1 file changed, 52 insertions(+), 43 deletions(-)

diff --git a/uhr.js b/uhr.js
index bf6dc09..2097aa8 100644
--- a/uhr.js
+++ b/uhr.js
@@ -141,16 +141,19 @@ Uhr.prototype.normalizeHour = function(hour) {
 	return hour;
 }
 Uhr.prototype.initHTMLElements = function(clockarea) {
-	this.createHTMLElements();
-	this.clockarea = this.initClockarea(clockarea);
+	this.createHTMLElements(clockarea);
+	this.initToggleSwitch();
+	this.initLayoutSwitch();
+	this.initThemeSwitch();
+}
+Uhr.prototype.createHTMLElements = function(clockarea) {
+	this.createClockarea(clockarea)
 	this.letterarea = this.clockarea.find('.letterarea');
-	this.themeSwitch = this.initThemeSwitch();
-	this.layoutSwitch = this.initLayoutSwitch();
-	this.toggleSwitch = this.initToggleSwitch();
+	this.createToggleSwitch();
+	this.createLayoutSwitch();
+	this.createThemeSwitch();
 }
-Uhr.prototype.createHTMLElements = function() {
-}
-Uhr.prototype.initClockarea = function(clockarea) {
+Uhr.prototype.createClockarea = function(clockarea) {
 	clockarea.empty();
 	clockarea.append('<span class="item dot dot1"></span>');
 	clockarea.append('<span class="item dot dot2"></span>');
@@ -158,22 +161,44 @@ Uhr.prototype.initClockarea = function(clockarea) {
 	clockarea.append('<span class="item dot dot4"></span>');
 	clockarea.append('<div class="letterarea"></div>');
 	clockarea.append('<div class="reflection"></div>');
-	return clockarea;
+	this.clockarea = clockarea
+}
+Uhr.prototype.createToggleSwitch = function() {
+	this.toggleSwitch = $('<div class="onoffswitch"></div>');
+	var input = $('<input type="checkbox" name="onoffswitch' + this.id + '" class="onoffswitch-checkbox" id="onoffswitch' + this.id + '" checked="checked" />');
+	this.toggleSwitch.append(input);
+	this.toggleSwitch.append('<label class="onoffswitch-label" for="onoffswitch' + this.id + '">'
+		+ '<div class="onoffswitch-inner"></div>'
+		+ '<div class="onoffswitch-switch"></div>'
+		+ '</label>');
+	this.clockarea.after(this.toggleSwitch);
+}
+Uhr.prototype.createLayoutSwitch = function () {
+	this.layoutSwitch = $('<select></select>')
+	for (var code in Uhr.layouts) {
+		if (Uhr.layouts.hasOwnProperty(code)) {
+			var layout = Uhr.layouts[code];
+			var option = $('<option value="' + code + '">' + layout.language + '</option>')
+			this.layoutSwitch.append(option);
+		}
+	}
+	this.clockarea.after(this.layoutSwitch);
+}
+Uhr.prototype.createThemeSwitch = function () {
+	this.themeSwitch = $('<select></select>');
+	this.themeSwitch.append('<option value="black">Schwarz</option>');
+	this.themeSwitch.append('<option value="red">Rot</option>');
+	this.themeSwitch.append('<option value="blue">Blau</option>');
+	this.themeSwitch.append('<option value="green">Grün</option>');
+	this.themeSwitch.append('<option value="white">Weiss</option>');
+	this.clockarea.after(this.themeSwitch);
 }
 Uhr.prototype.initToggleSwitch = function() {
-	var toggleSwitch = $('<div class="onoffswitch"></div>');
-	var input = $('<input type="checkbox" name="onoffswitch' + this.id + '" class="onoffswitch-checkbox" id="onoffswitch' + this.id + '" checked="checked" />');
+	var input = $('#onoffswitch' + this.id);
 	var uhr = this;
 	input.on('click', function() {
 		uhr.toggle();
 	});
-	toggleSwitch.append(input);
-	toggleSwitch.append('<label class="onoffswitch-label" for="onoffswitch' + this.id + '">'
-		+ '<div class="onoffswitch-inner"></div>'
-		+ '<div class="onoffswitch-switch"></div>'
-		+ '</label>');
-	this.clockarea.after(toggleSwitch);
-
 	var status = $.cookie('status' + this.id);
 	if (status == 'on') {
 		this.start();
@@ -182,45 +207,29 @@ Uhr.prototype.initToggleSwitch = function() {
 		this.stop();
 		input.prop('checked', false);
 	}
-
-	return toggleSwitch;
 }
 Uhr.prototype.initLayoutSwitch = function() {
-	var layoutSwitch = $('<select id="layoutswitcher' + this.id + '"></select>')
-
-	for (var code in Uhr.layouts) {
-		if (Uhr.layouts.hasOwnProperty(code)) {
-			var layout = Uhr.layouts[code];
-			var option = $('<option value="' + code + '">' + layout.language + '</option>')
-			layoutSwitch.append(option);
-		}
-	}
 	var uhr = this;
-	layoutSwitch.on('change', function() {
+	this.layoutSwitch.on('change', function() {
 		uhr.setLayout(this.value);
 	});
-	this.clockarea.after(layoutSwitch);
-
 	var selectedLayout = $.cookie('layout' + this.id);
 	if (selectedLayout != undefined && selectedLayout != 'undefinded') {
-		layoutSwitch.val(selectedLayout);
+		this.layoutSwitch.val(selectedLayout);
 		this.setLayout(selectedLayout);
 	}
-	return layoutSwitch;
 }
 Uhr.prototype.initThemeSwitch = function() {
-	var themeSwitch = $('<select></select>');
-	themeSwitch.append('<option value="black">Schwarz</option>');
-	themeSwitch.append('<option value="red">Rot</option>');
-	themeSwitch.append('<option value="blue">Blau</option>');
-	themeSwitch.append('<option value="green">Grün</option>');
-	themeSwitch.append('<option value="white">Weiss</option>');
 	var uhr = this;
-	themeSwitch.on('change', function() {
+	this.themeSwitch.on('change', function() {
 		uhr.setTheme(this.value);
 	});
-	this.clockarea.after(themeSwitch);
-	return themeSwitch;
+	var selectedTheme = $.cookie('theme' + this.id);
+	if (selectedTheme == undefined || selectedTheme == 'undefined') {
+		selectedTheme = 'black';
+	}
+	this.themeSwitch.val(selectedTheme);
+	this.setTheme(selectedTheme);
 }
 
 Uhr.register('undefined', {

From 32305d43a145da325b180c0a13ed16f920ec4fd7 Mon Sep 17 00:00:00 2001
From: Manuel Friedli <manuel@fritteli.ch>
Date: Thu, 28 Nov 2013 10:18:48 +0100
Subject: [PATCH 16/16] v3.0: die uhr ist nun voll modular, einfach ein <div>
 erstellen und im JS eine neue Uhr(), fertig!

---
 manifest.appcache | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/manifest.appcache b/manifest.appcache
index e4b6978..c72e9f4 100644
--- a/manifest.appcache
+++ b/manifest.appcache
@@ -1,5 +1,5 @@
 CACHE MANIFEST
-# 2.3.1
+# 3.0
 
 COPYING
 index.html