zuerst erzeugen, dann verhalten definieren

uhr.js

@@ -141,16 +141,19 @@ Uhr.prototype.normalizeHour = function(hour) {
 	return hour;
 }
 Uhr.prototype.initHTMLElements = function(clockarea) {
-	this.createHTMLElements();
+	this.createHTMLElements(clockarea);
-	this.clockarea = this.initClockarea(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.createToggleSwitch();
-	this.layoutSwitch = this.initLayoutSwitch();
+	this.createLayoutSwitch();
-	this.toggleSwitch = this.initToggleSwitch();
+	this.createThemeSwitch();
 }
-Uhr.prototype.createHTMLElements = function() {
+Uhr.prototype.createClockarea = function(clockarea) {
-}
-Uhr.prototype.initClockarea = 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 = $('#onoffswitch' + this.id);
-	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' + 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);
+	var selectedTheme = $.cookie('theme' + this.id);
-	return themeSwitch;
+	if (selectedTheme == undefined || selectedTheme == 'undefined') {
+		selectedTheme = 'black';
+	}
+	this.themeSwitch.val(selectedTheme);
+	this.setTheme(selectedTheme);
 }
 
 Uhr.register('undefined', {