wechsel des layouts ist nun möglich

index.html

@@ -5,6 +5,7 @@
 <script type="text/javascript" src="jquery-2.0.3.min.js"></script>
 <script type="text/javascript" src="uhr.js"></script>
 <script type="text/javascript" src="uhr-de_CH.js"></script>
+<script type="text/javascript" src="uhr-de.js"></script>
 <link rel="stylesheet" type="text/css" href="uhr.css" />
 <link rel="stylesheet" type="text/css" href="uhr-black.css" id="theme" />
 <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
@@ -19,13 +20,17 @@
 		<!-- glossy reflection -->
 		<span id="reflection"></span>
 	</div>
-	<div id="themeswitcher">
-		<input type="radio" name="theme" id="theme-black" value="black" checked="checked" /><label for="theme-black">BLACK</label>
-		<input type="radio" name="theme" id="theme-red" value="red" /><label for="theme-red">RED</label>
-		<input type="radio" name="theme" id="theme-blue" value="blue" /><label for="theme-blue">BLUE</label>
-		<input type="radio" name="theme" id="theme-green" value="green" /><label for="theme-green">GREEN</label>
-		<input type="radio" name="theme" id="theme-white" value="white" /><label for="theme-white">WHITE</label>
-	</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>
+	<select id="layoutswitcher">
+		<option value="de_CH">Bärndütsch</option>
+		<option value="de">Hochdeutsch</option>
+	</select>
 	<div class="onoffswitch">
 		<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="onoffswitch" checked="checked" onclick="updateClockState()" />
 		<label class="onoffswitch-label" for="onoffswitch">
@@ -36,10 +41,14 @@
 	<p id="disclaimer">Created by fritteli, inspired by <a href="http://www.qlocktwo.com/">QLOCKTWO</a>.
 	<script type="text/javascript">
 		$(document).ready(function() {
-			render(layout);
-			$('input[name=theme]').on('click', function() {
-				switchTheme(this);
+			$('#themeswitcher').on('change', function() {
+				switchTheme(this.value);
 			});
+			$('#layoutswitcher').on('change', function() {
+				switchLayout(this.value);
+			});
+			currentLayout = layout['de_CH'];
+			renderLayout();
 			startClock();
 		});
 	</script>

uhr-de.js

@@ -1,6 +1,5 @@
-layout = {
+layout['de'] = {
 	language: "Deutsch",
-	locale: "de",
 	values: [
 		[l('E', 'on'), l('S', 'on'),l('K'),l('I', 'on'),l('S', 'on'),l('T', 'on'),l('A'),m('F', 5, 25, 35, 55),m('Ü', 5, 25, 35, 55),m('N', 5, 25, 35, 55),m('F', 5, 25, 35, 55)],
 		[m('Z', 10, 50), m('E', 10, 50),m('H', 10, 50),m('N', 10, 50),m('Z', 20, 40),m('W', 20, 40),m('A', 20, 40),m('N', 20, 40),m('Z', 20, 40),m('I', 20, 40),m('G', 20, 40)],

uhr-de_CH.js

@@ -1,6 +1,5 @@
-var layout = {
+layout['de_CH'] = {
 	language: "Bärndütsch",
-	locale: "de_CH",
 	values: [
 		[l('E', 'on'), l('S', 'on'),l('K'),l('I', 'on'),l('S', 'on'),l('C', 'on'),l('H', 'on'),l('A'),m('F', 5, 25, 35, 55),m('Ü', 5, 25, 35, 55),m('F', 5, 25, 35, 55)],
 		[m('V', 15, 45), m('I', 15, 45),m('E', 15, 45),m('R', 15, 45),m('T', 15, 45),m('U', 15, 45),l('B'),l('F'),m('Z', 10, 50),m('Ä', 10, 50),m('Ä', 10, 50)],

uhr.css

@@ -6,7 +6,6 @@ body {
 	font-family: 'Uhrenfont', sans-serif;
 }
 #uhr {
-	display: inline-block;
 	padding: 3em;
 	position: relative;
 	margin: 0;

uhr.js

@@ -1,6 +1,11 @@
 var clock = null;
 var currentMinute = -1;
-var layout = layout || {};
+var layout = new Array();
+layout['default'] = {
+	language: 'Undefined',
+	values: []
+};
+var currentLayout = layout['default'];
 
 function highlightCurrentTime() {
 	var now = new Date();
@@ -20,8 +25,8 @@ function highlightCurrentTime() {
 	highlight('hour' + hour);
 }
 function getHour(date) {
-	if (typeof layout.getHour === 'function') {
-		return layout.getHour(date);
+	if (typeof currentLayout.getHour === 'function') {
+		return currentLayout.getHour(date);
 	}
 	var hour = date.getHours();
 	if (date.getMinutes() >= 25) {
@@ -30,15 +35,15 @@ function getHour(date) {
 	return hour;
 }
 function getCoarseMinute(date) {
-	if (typeof layout.getCoarseMinute === 'function') {
-		return layout.getCoarseMinute(date);
+	if (typeof currentLayout.getCoarseMinute === 'function') {
+		return currentLayout.getCoarseMinute(date);
 	}
 	var minutes = date.getMinutes();
 	return minutes - getDotMinute(date);
 }
 function getDotMinute(date) {
-	if (typeof layout.getDotMinute === 'function') {
-		return layout.getDotMinute(date);
+	if (typeof currentLayout.getDotMinute === 'function') {
+		return currentLayout.getDotMinute(date);
 	}
 	var minutes = date.getMinutes();
 	return minutes % 5;
@@ -77,24 +82,35 @@ function stopClock() {
 	}
 }
 function updateClockState() {
-	if ($('#onoffswitch').is(':checked')) {
+	if (isOn()) {
 		startClock();
 	} else {
 		stopClock();
 	}
 }
-function switchTheme(element) {
-	var theme = $(element).val()
+function isOn() {
+	return $('#onoffswitch').is(':checked');
+}
+function switchTheme(theme) {
 	$('#theme').attr('href', 'uhr-' + theme + '.css');
 }
-function render(layout) {
+function switchLayout(locale) {
+	stopClock();
+	currentLayout = layout[locale];
+	renderLayout();
+	if (isOn()) {
+		startClock();
+	}
+}
+function renderLayout() {
 	var container = $('#renderarea');
-	for (var y = 0; y < layout.values.length; y++) {
-		for (var x = 0; x < layout.values[y].length; x++) {
-			var letter = layout.values[y][x];
+	container.empty();
+	for (var y = 0; y < currentLayout.values.length; y++) {
+		for (var x = 0; x < currentLayout.values[y].length; x++) {
+			var letter = currentLayout.values[y][x];
 			container.append(letter.toString());
 		}
-		if (y < layout.values.length - 1) {
+		if (y < currentLayout.values.length - 1) {
 			container.append('<br/>');
 		}
 	}