brianjolly/gist:5641707

## gistfile1.html
<!doctype html>
<html>
	<head>
		<style>
			* {
				font-family: Arial;
				font-size: 16px;
			}

			h1 {
				font-size: 7em;
				background-color: #0ff;
			}

			form { padding: 10px; }

			input {
				float: left;
				clear: both;
			}

			label { float: left; }

			.red { background-color: #f00; }
			.green { background-color: #0f0; }
			.blue { background-color: #00f; }
		</style>
	</head>

	<body>
		<form>
			<input type=radio name=theme id=red value=red />
			<label for=red>Red</label>

			<input type=radio name=theme id=green value=green />
			<label for=green>Green</label>

			<input type=radio name=theme id=blue value=blue />
			<label for=blue>Blue</label>
		</form>

		<h1>Color</h1>

		<script>

			document.onreadystatechange = function(e) {
				if (document.readyState === "complete") {

					themeStorage.setMethod('web'); // options 'web' or 'cookie'

					window["hakim's themes"]();
				}
			}

			window["hakim's themes"] = function() {

				var i,
					themeControls,
					setupEvents,
					loadThemeIfStored,
					setTheme;

				themeControls = document.getElementsByTagName('input');

				setupEvents = function() {
					for (var i=0; i<themeControls.length; i++) {
						themeControls[i].onclick = function(e) {
							changeTheme(e.target.id);
						}
					}
				}

				changeTheme = function(theme) {
					document.getElementsByTagName('h1').item().className = theme;
					document.getElementById(theme).checked = 'checked';
					themeStorage.setTheme(theme);
				}

				loadThemeIfStored = function() {
					var theme = themeStorage.getTheme();
					console.log('loadThemeIfStored', theme);

					if (theme) {
						changeTheme(theme);
					}
				}

				setupEvents();
				loadThemeIfStored();

			};

			(function() {
				var themeStorage,
					webStorage,
					cookieStorage,
					storageMethod,
					setStorageMethod;

				storageMethod = webStorage;

				setStorageMethod = function(method) {
					if (method === 'cookie') {
						//storageMethod = cookieStorage;
						throw "Cookie Storage is not implemented yet.";
					}
					else if (method === 'web') {
						storageMethod = webStorage;
					}
					else {
						throw "The storage method: " + method + " is not supported :(";
					}
				}

				themeStorage = {
					getTheme: function() {
						return storageMethod.getTheme();
					},
					setTheme: function(theme) {
						storageMethod.setTheme(theme);
					},
					setMethod: setStorageMethod
				}

				webStorage = {
					setTheme: function(theme) {
						window.localStorage.theme = theme;
					},
					getTheme: function() {
						console.log('getTheme', window.localStorage.theme);
						return window.localStorage.theme;
					}
				}

				cookieStorage = {
					setTheme: function(theme) {
						// TODO
					},
					getTheme: function() {
						// TODO
					}
				}

				window.themeStorage = themeStorage;
			})();
		</script>
	</body>
</html>
	<!doctype html>
	<html>
	<head>
	<style>
	* {
	font-family: Arial;
	font-size: 16px;
	}

	h1 {
	font-size: 7em;
	background-color: #0ff;
	}

	form { padding: 10px; }

	input {
	float: left;
	clear: both;
	}

	label { float: left; }

	.red { background-color: #f00; }
	.green { background-color: #0f0; }
	.blue { background-color: #00f; }
	</style>
	</head>

	<body>
	<form>
	<input type=radio name=theme id=red value=red />
	<label for=red>Red</label>

	<input type=radio name=theme id=green value=green />
	<label for=green>Green</label>

	<input type=radio name=theme id=blue value=blue />
	<label for=blue>Blue</label>
	</form>

	<h1>Color</h1>

	<script>

	document.onreadystatechange = function(e) {
	if (document.readyState === "complete") {

	themeStorage.setMethod('web'); // options 'web' or 'cookie'

	window["hakim's themes"]();
	}
	}

	window["hakim's themes"] = function() {

	var i,
	themeControls,
	setupEvents,
	loadThemeIfStored,
	setTheme;

	themeControls = document.getElementsByTagName('input');

	setupEvents = function() {
	for (var i=0; i<themeControls.length; i++) {
	themeControls[i].onclick = function(e) {
	changeTheme(e.target.id);
	}
	}
	}

	changeTheme = function(theme) {
	document.getElementsByTagName('h1').item().className = theme;
	document.getElementById(theme).checked = 'checked';
	themeStorage.setTheme(theme);
	}

	loadThemeIfStored = function() {
	var theme = themeStorage.getTheme();
	console.log('loadThemeIfStored', theme);

	if (theme) {
	changeTheme(theme);
	}
	}

	setupEvents();
	loadThemeIfStored();

	};

	(function() {
	var themeStorage,
	webStorage,
	cookieStorage,
	storageMethod,
	setStorageMethod;

	storageMethod = webStorage;

	setStorageMethod = function(method) {
	if (method === 'cookie') {
	//storageMethod = cookieStorage;
	throw "Cookie Storage is not implemented yet.";
	}
	else if (method === 'web') {
	storageMethod = webStorage;
	}
	else {
	throw "The storage method: " + method + " is not supported :(";
	}
	}

	themeStorage = {
	getTheme: function() {
	return storageMethod.getTheme();
	},
	setTheme: function(theme) {
	storageMethod.setTheme(theme);
	},
	setMethod: setStorageMethod
	}

	webStorage = {
	setTheme: function(theme) {
	window.localStorage.theme = theme;
	},
	getTheme: function() {
	console.log('getTheme', window.localStorage.theme);
	return window.localStorage.theme;
	}
	}

	cookieStorage = {
	setTheme: function(theme) {
	// TODO
	},
	getTheme: function() {
	// TODO
	}
	}

	window.themeStorage = themeStorage;
	})();
	</script>
	</body>
	</html>