From 767ad2314525231f0f1e144e391c82f837580612 Mon Sep 17 00:00:00 2001
From: Steffen Vogel <info@steffenvogel.de>
Date: Mon, 4 Oct 2010 21:10:58 +0200
Subject: [PATCH] made javascript code object-oriented

---
 backend/lib/Util/UUID.php        |  20 +--
 frontend/index.html              |  11 +-
 frontend/javascripts/backend.js  | 258 -------------------------------
 frontend/javascripts/entity.js   | 134 ++++++++++++++++
 frontend/javascripts/frontend.js | 141 ++++++++++++++---
 frontend/javascripts/helper.js   |  64 ++------
 frontend/javascripts/init.js     |  36 +++--
 frontend/javascripts/property.js |  96 ++++++++++++
 frontend/javascripts/uuid.js     |  67 ++++----
 9 files changed, 423 insertions(+), 404 deletions(-)
 delete mode 100644 frontend/javascripts/backend.js
 create mode 100644 frontend/javascripts/entity.js
 create mode 100644 frontend/javascripts/property.js

diff --git a/backend/lib/Util/UUID.php b/backend/lib/Util/UUID.php
index 7ed154f..d42b356 100644
--- a/backend/lib/Util/UUID.php
+++ b/backend/lib/Util/UUID.php
@@ -116,26 +116,12 @@ class UUID {
 	}
 
 	/**
-	 * Performant validation of UUID's
-	 *
-	 * Replaces preg_match('/[a-f0-9\-]{36}/', $uuid);
+	 * Validation of UUID's
 	 *
 	 * @param string $uuid
-	 * @param boolen $short whether to allow abbreviated form of UUID's or not
 	 */
-	public static function validate($uuid, $short = FALSE) {
-		$len = strlen($uuid);
-
-		for ($i = 0; $i < $len; $i++) {
-			$char = $uuid[$i];
-			$ord = ord($char);
-
-			if (($ord > 57 || $ord < 48) && ($ord > 70 || $ord < 65) && ($ord > 102 || $ord < 97) && $ord != 45) {
-				return FALSE;	// char not allowed
-			}
-		}
-
-		return ($short) ? $len <= 36 : $len == 36;	// check for strlen
+	public static function validate($uuid) {
+		return (boolean) preg_match('/^[0-9a-zA-Z]{8}-[0-9a-zA-Z]{4}-[0-9a-zA-Z]{4}-[0-9a-zA-Z]{4}-[0-9a-zA-Z]{12}$/', $uuid);
 	}
 
 	/**
diff --git a/frontend/index.html b/frontend/index.html
index 92b1c4c..32add7a 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -8,6 +8,9 @@
 	<script type="text/javascript" src="javascripts/jquery-treeTable.min.js"></script>
 	<script type="text/javascript" src="javascripts/jquery-extensions.js"></script>
 	
+	<script type="text/javascript" src="javascripts/json.js"></script>
+	<script type="text/javascript" src="javascripts/helper.js"></script>
+	
 	<!--[if IE]><script language="javascript" type="text/javascript" src="javascripts/excanvas.min.js"></script><![endif]-->
 	<script type="text/javascript" src="javascripts/flot/jquery.flot.js"></script>
 	<script type="text/javascript" src="javascripts/flot/jquery.flot.selection.js"></script>
@@ -15,12 +18,10 @@
 	<script type="text/javascript" src="javascripts/flot/jquery.flot.crosshair.js"></script>
 	<script type="text/javascript" src="javascripts/flot/jquery.flot.symbol.js"></script>
 	
-	<script type="text/javascript" src="javascripts/json.js"></script>
-	<script type="text/javascript" src="javascripts/uuid.js"></script>
-	<script type="text/javascript" src="javascripts/helper.js"></script>
-	<script type="text/javascript" src="javascripts/backend.js"></script>
-	<script type="text/javascript" src="javascripts/frontend.js"></script>
 	<script type="text/javascript" src="javascripts/init.js"></script>
+	<script type="text/javascript" src="javascripts/uuid.js"></script>
+	<script type="text/javascript" src="javascripts/entity.js"></script>
+	<script type="text/javascript" src="javascripts/frontend.js"></script>
 	
 	<link rel="stylesheet" type="text/css" href="stylesheets/jquery.treeTable.css">
 	<link rel="stylesheet" type="text/css" href="stylesheets/ui-lightness/jquery-ui-1.8.5.css" />	
diff --git a/frontend/javascripts/backend.js b/frontend/javascripts/backend.js
deleted file mode 100644
index 5982f71..0000000
--- a/frontend/javascripts/backend.js
+++ /dev/null
@@ -1,258 +0,0 @@
-/**
- * Backend related javascript code
- * 
- * @author Florian Ziegler <fz@f10-home.de>
- * @author Justin Otherguy <justin@justinotherguy.org>
- * @author Steffen Vogel <info@steffenvogel.de>
- * @copyright Copyright (c) 2010, The volkszaehler.org project
- * @package default
- * @license http://opensource.org/licenses/gpl-license.php GNU Public License
- */
-/*
- * This file is part of volkzaehler.org
- * 
- * volkzaehler.org is free software: you can redistribute it and/or modify it
- * under the terms of the GNU General Public License as published by the Free
- * Software Foundation, either version 3 of the License, or any later version.
- * 
- * volkzaehler.org is distributed in the hope that it will be useful, but
- * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
- * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more
- * details.
- * 
- * You should have received a copy of the GNU General Public License along with
- * volkszaehler.org. If not, see <http://www.gnu.org/licenses/>.
- */
-
-/**
- * Get all entity information from backend
- */
-function loadEntities() {
-	$.each(vz.uuids, function(index, value) {
-		$.getJSON(vz.options.backendUrl + '/entity/' + value + '.json', ajaxWait(function(json) {
-			vz.entities.push(json.entity);
-		}, showEntities, 'information'));
-	});
-}
-
-/**
- * Create nested entity list
- * @param data
- */
-function showEntities() {
-	$('#entities tbody').empty();
-	
-	var i = 0;
-	eachRecursive(vz.entities, function(entity, parent) {
-		entity.active = true;	// TODO active by default or via backend property?
-		entity.color = vz.options.plot.colors[i++ % vz.options.plot.colors.length];
-	
-		var row = $('<tr>')
-			.addClass((parent) ? 'child-of-entity-' + parent.uuid : '')
-			.attr('id', 'entity-' + entity.uuid)
-			.append($('<td>')
-				.css('background-color', entity.color)
-				.css('width', 19)
-				.append($('<input>')
-					.attr('type', 'checkbox')
-					.attr('checked', entity.active)
-					.bind('change', entity, function(event) {
-						event.data.active = $(this).attr('checked');
-						loadData();
-					})
-				)
-			)
-			.append($('<td>')
-				.css('width', 20)
-			)
-			.append($('<td>')
-				.append($('<span>')
-					.text(entity.title)
-					.addClass('indicator')
-					.addClass((entity.type == 'group') ? 'group' : 'channel')
-				)
-			)
-			.append($('<td>').text(entity.type))
-			.append($('<td>'))	// min
-			.append($('<td>'))	// max
-			.append($('<td>'))	// avg
-			.append($('<td>')	// operations
-				.addClass('ops')
-				.append($('<input>')
-					.attr('type', 'image')
-					.attr('src', 'images/information.png')
-					.attr('alt', 'details')
-					.bind('click', entity, function(event) { showEntityDetails(event.data); })
-				)
-			);
-				
-		if (parent == null) {
-			$('td.ops', row).prepend($('<input>')
-				.attr('type', 'image')
-				.attr('src', 'images/delete.png')
-				.attr('alt', 'delete')
-				.bind('click', entity, function(event) {
-					removeUUID(event.data.uuid);
-					loadEntities();
-				})
-			);
-		}
-		
-		$('#entities tbody').append(row);
-	});
-	
-	// http://ludo.cubicphuse.nl/jquery-plugins/treeTable/doc/index.html
-	$('#entities table').treeTable({
-		treeColumn: 2,
-		clickableNodeNames: true
-	});
-	
-	// load data and show plot
-	loadData();
-}
-
-/**
- * Show and edit entity details
- * @param entity
- */
-function showEntityDetails(entity) {
-	var properties = $('<table>');
-	
-	$.each(entity, function(key, value) {
-		properties.append($('<tr>')
-			.append($('<td>')
-				.addClass('key')
-				.text(key)
-			)
-			.append($('<td>')
-				.addClass('value')
-				.text(value)
-			)
-		);
-	});
-	
-	$('<div>')
-	.addClass('details')
-	.append(properties)
-	.dialog({
-		title: 'Entity Details',
-		width: 450
-	});
-}
-
-function validateEntity(entity) {
-	var def = getDefinition(vz.definitions.entities, entity.type);
-	
-	$.each(def.required, function(index, property) {
-		var property = getDefinition(vz.definitions.properties, property);
-		if (!validateProperty(property, form.elements[property.name].value)) {
-			alert('Error: invalid property: ' + property.name + ' = ' + form.elements[property.name].value);
-			return false;
-		}
-	});
-	
-	$.each(entity.optional, function(index, property) {
-		var property = getDefinition(properties, property);
-	});
-	
-	return true;
-}
-
-function validateProperty(property, value) {
-	switch (property.type) {
-		case 'string':
-		case 'text':
-			// TODO check pattern
-			// TODO check string length
-			return true;
-			
-		case 'float':
-			// TODO check format
-			// TODO check min/max
-			return true;
-			
-		case 'integer':
-			// TODO check format
-			// TODO check min/max
-			return true;
-			
-		case 'boolean':
-			return value == '1' || value == '';
-			
-		case 'multiple':
-			return $.inArray(value, property.options);
-			
-		default:
-			alert('Error: unknown property!');
-	}
-}
-
-/**
- * Show from for new Channel
- * 
- * @param type
- * @return
- */
-function getEntityDOM(type) {
-	$('#properties').empty();
-	var entity = getDefinition(entities, type);
-	
-	$.each(entity.required, function(index, property) {
-		var property = getDefinition(properties, property);
-		
-		if (property) {
-			$('#properties')
-				.append($('<tr>')
-					.addClass('required')
-					.append($('<td>')
-						.append($('<label>')
-							.attr('for', property.name)
-							.text(property.translation.de + ':')
-						)
-					)
-					.append($('<td>').append(getPropertyDOM(property)))
-					.append($('<td>').text('(*)'))
-				);
-		}
-	});
-	
-	// TODO optional properties
-}
-
-function getPropertyDOM(property) {
-	switch (property.type) {
-		case 'string':
-		case 'float':
-		case 'integer':
-			return $('<input>')
-				.attr('type', 'text')
-				.attr('name=', property.name)
-				.attr('maxlength', (property.type == 'string') ? property.max : 0);
-			
-		case 'text':
-			return $('<textarea>')
-				.attr('name', property.name);
-			
-		case 'boolean':
-			return $('<input>')
-				.attr('type', 'checkbox')
-				.attr('name', property.name)
-				.value(1);
-			
-		case 'multiple':
-			var dom = $('<select>').attr('name', property.name)
-			$.each(property.options, function(index, option) {
-				dom.append($('<option>')
-					.value(option)
-					.text(option)
-				);
-			});
-			return dom;
-	
-		default:
-			throw {
-				type: 'PropertyException',
-				message: 'Unknown property type'
-			};
-	}
-}
\ No newline at end of file
diff --git a/frontend/javascripts/entity.js b/frontend/javascripts/entity.js
new file mode 100644
index 0000000..098852c
--- /dev/null
+++ b/frontend/javascripts/entity.js
@@ -0,0 +1,134 @@
+/**
+ * Entity handling, parsing & validation
+ * 
+ * @author Florian Ziegler <fz@f10-home.de>
+ * @author Justin Otherguy <justin@justinotherguy.org>
+ * @author Steffen Vogel <info@steffenvogel.de>
+ * @copyright Copyright (c) 2010, The volkszaehler.org project
+ * @package default
+ * @license http://opensource.org/licenses/gpl-license.php GNU Public License
+ */
+/*
+ * This file is part of volkzaehler.org
+ * 
+ * volkzaehler.org is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation, either version 3 of the License, or any later version.
+ * 
+ * volkzaehler.org is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more
+ * details.
+ * 
+ * You should have received a copy of the GNU General Public License along with
+ * volkszaehler.org. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+/**
+ * Entity
+ */
+var Entity = function(json) {
+	for (var i in json) {
+		switch(i) {
+			case 'children':
+				this.children = new Array;
+				for (var j = 0; j < json.children.length; j++) {
+					var child = new Entity(json.children[j]);
+					this.children.push(child);
+				}
+				break;
+				
+			case 'type':
+			case 'uuid':
+			default:		// properties
+				this[i] = json[i];
+		}	
+	}
+};
+
+/**
+ * Show and edit entity details
+ * @param entity
+ */
+Entity.prototype.showDetails = function(entity) {
+	$('<div>')
+	.addClass('details')
+	.append(this.getDOM())
+	.dialog({
+		title: 'Entity Details',
+		width: 450
+	});
+};
+
+/**
+ * Show from for new Channel
+ * 
+ * @param type
+ * @todo
+ */
+Entity.prototype.getDOM = function(type) {
+	var properties = $('<table><thead><th>Key</th><th>Value</th></thead></table');
+	
+	$.each(entity, function(key, value) {
+		properties.append($('<tr>')
+			.append($('<td>')
+				.addClass('key')
+				.text(key)
+			)
+			.append($('<td>')
+				.addClass('value')
+				.text(value)
+			)
+		);
+	});
+	
+	var entity = getDefinition(entities, type);
+	
+	entity.required.each(function(index, property) {
+		var property = getDefinition(properties, property);
+		
+		if (property) {
+			$('#properties')
+				.append($('<tr>')
+					.addClass('required')
+					.append($('<td>')
+						.append($('<label>')
+							.attr('for', property.name)
+							.text(property.translation.de + ':')
+						)
+					)
+					.append($('<td>').append(getPropertyDOM(property)))
+					.append($('<td>').text('(*)'))
+				);
+		}
+	});
+	
+	// TODO optional properties
+};
+
+Entity.prototype.validate = function(entity) {
+	var def = getDefinition(vz.definitions.entities, entity.type);
+	
+	def.required.each(function(index, property) {
+		var property = getDefinition(vz.definitions.properties, property);
+		if (!validateProperty(property, form.elements[property.name].value)) {
+			throw 'Invalid property: ' + property.name + ' = ' + form.elements[property.name].value;
+		}
+	});
+	
+	entity.optional.each(function(index, property) {
+		var property = getDefinition(properties, property);
+	});
+	
+	return true;
+};
+
+Entity.prototype.each = function(cb, parent) {
+	cb(this, parent);
+	
+	if (this.children) {
+		for (var i = 0; i < this.children.length; i++) {
+			this.children[i].each(cb, this);	// call recursive
+		}
+	}
+};
\ No newline at end of file
diff --git a/frontend/javascripts/frontend.js b/frontend/javascripts/frontend.js
index 08b19c9..4e13e8a 100644
--- a/frontend/javascripts/frontend.js
+++ b/frontend/javascripts/frontend.js
@@ -31,7 +31,7 @@
 /**
  * Initialize the WUI (Web User Interface)
  */
-function initInterface() {
+vz.initInterface = function() {
 	// make the whole frontend resizable
 	/*$('#content').resizable({
 		alsoResize: $('#plot'),
@@ -67,13 +67,13 @@ function initInterface() {
 	
 	// add UUID
 	$('#addUUID input[type=button]').click(function() {
-		addUUID($('#addUUID input[type=text]').val());
+		vz.uuids.add($('#addUUID input[type=text]').val());
 		$('#addUUID').dialog('close');
-		loadEntities();
+		vz.entities.load();
 	})
 	
 	// bind plot actions
-	$('#move input').click(handleControls);
+	$('#move input').click(vz.handleControls);
 	
 	// options
 	/*$('input[name=trendline]').attr('checked', vz.options.plot.seriesDefaults.trendline.show).change(function() {
@@ -100,24 +100,24 @@ function initInterface() {
 		max: 60000,
 		step: 500
 	});
-}
+};
 
 /**
  * Refresh plot with new data
  */
-function refreshWindow() {
+vz.refresh = function() {
 	if ($('input[name=refresh]').attr('checked')) {
 		var delta = vz.to - vz.from;
 		vz.to = new Date().getTime();	// move plot
 		vz.from = vz.to - delta;		// move plot
 		loadData();
 	}
-}
+};
 
 /**
  * Move & zoom in the plotting area
  */
-function handleControls() {
+vz.handleControls = function () {
 	var delta = vz.to - vz.from;
 	var middle = Math.round(vz.from + delta/2);
 	
@@ -155,29 +155,122 @@ function handleControls() {
 			// do nothing; just loadData()
 	}
 	
-	loadData();
-}
+	vz.data.load();
+};
+
+
+/**
+ * Get all entity information from backend
+ */
+vz.entities.load = function() {
+	vz.entities.clear();
+	vz.uuids.each(function(index, value) {
+		$.getJSON(vz.options.backendUrl + '/entity/' + value + '.json', ajaxWait(function(json) {
+			vz.entities.push(new Entity(json.entity));
+		}, vz.entities.show, 'information'));
+	});
+};
+
+/**
+ * Create nested entity list
+ * @param data
+ */
+vz.entities.show = function() {
+	$('#entities tbody').empty();
+	
+	var i = 0;
+	vz.entities.each(function(index, entity) {	// loop through all entities
+		entity.each(function(entity, parent) {	// loop through all children of entities (recursive)
+			entity.active = true;	// TODO active by default or via backend property?
+			entity.color = vz.options.plot.colors[i++ % vz.options.plot.colors.length];
+		
+			var row = $('<tr>')
+				.addClass((parent) ? 'child-of-entity-' + parent.uuid : '')
+				.attr('id', 'entity-' + entity.uuid)
+				.append($('<td>')
+					.css('background-color', entity.color)
+					.css('width', 19)
+					.append($('<input>')
+						.attr('type', 'checkbox')
+						.attr('checked', entity.active)
+						.bind('change', entity, function(event) {
+							event.data.active = $(this).attr('checked');
+							vz.data.load();
+						})
+					)
+				)
+				.append($('<td>')
+					.css('width', 20)
+				)
+				.append($('<td>')
+					.append($('<span>')
+						.text(entity.title)
+						.addClass('indicator')
+						.addClass((entity.type == 'group') ? 'group' : 'channel')
+					)
+				)
+				.append($('<td>').text(entity.type))
+				.append($('<td>'))	// min
+				.append($('<td>'))	// max
+				.append($('<td>'))	// avg
+				.append($('<td>')	// operations
+					.addClass('ops')
+					.append($('<input>')
+						.attr('type', 'image')
+						.attr('src', 'images/information.png')
+						.attr('alt', 'details')
+						.bind('click', entity, function(event) { event.data.showDetails(); })
+					)
+				);
+					
+			if (parent == null) {
+				$('td.ops', row).prepend($('<input>')
+					.attr('type', 'image')
+					.attr('src', 'images/delete.png')
+					.attr('alt', 'delete')
+					.bind('click', entity, function(event) {
+						vz.uuids.remove(event.data.uuid);
+						vz.entities.load();
+					})
+				);
+			}
+			
+			$('#entities tbody').append(row);
+		});
+	});
+	
+	// http://ludo.cubicphuse.nl/jquery-plugins/treeTable/doc/index.html
+	$('#entities table').treeTable({
+		treeColumn: 2,
+		clickableNodeNames: true
+	});
+	
+	// load data and show plot
+	vz.data.load();
+};
 
 /**
  * Load json data with given time window
  */
-function loadData() {
-	eachRecursive(vz.entities, function(entity, parent) {
-		if (entity.active && entity.type != 'group') {
-			$.getJSON(vz.options.backendUrl + '/data/' + entity.uuid + '.json', { from: vz.from, to: vz.to, tuples: vz.options.tuples }, ajaxWait(function(json) {
-				vz.data.push({
-					data: json.data[0].tuples,	// TODO check uuid
-					color: entity.color
-				});
-			}, drawPlot, 'data'));
-		}
+vz.data.load = function() {
+	vz.data.clear();
+	vz.entities.each(function(index, entity) {
+		entity.each(function(entity, parent) {
+			if (entity.active && entity.type != 'group') {
+				$.getJSON(vz.options.backendUrl + '/data/' + entity.uuid + '.json', { from: vz.from, to: vz.to, tuples: vz.options.tuples }, ajaxWait(function(json) {
+					vz.data.push({
+						data: json.data[0].tuples,	// TODO check uuid
+						color: entity.color
+					});
+				}, vz.drawPlot, 'data'));
+			}
+		});
 	});
-}
+};
 
-function drawPlot() {
+vz.drawPlot = function () {
 	vz.options.plot.xaxis.min = vz.from;
 	vz.options.plot.xaxis.max = vz.to;
 	
 	vz.plot = $.plot($('#plot'), vz.data, vz.options.plot);
-}
-
+};
diff --git a/frontend/javascripts/helper.js b/frontend/javascripts/helper.js
index 6282422..00f7656 100644
--- a/frontend/javascripts/helper.js
+++ b/frontend/javascripts/helper.js
@@ -39,58 +39,24 @@ function ajaxWait(callback, finished, identifier) {
 	};
 }
 
-function eachRecursive(array, callback, parent) {
-	$.each(array, function(index, value) {
-		callback(value, parent);
-		
-		if (value.children) {	// has children?
-			eachRecursive(value.children, callback, value);	// call recursive
-		}
-	});
-}
-
-/**
- * Checks if value of part of the array
- * 
- * @param needle the value to search for
- * @return boolean
- */
-Array.prototype.contains = function(needle) {
-	return this.key(needle) ? true : false;
+Array.prototype.indexOf = function(n) {
+	for (var i = 0, l = this.length; i < l; i++)
+		if (n == this[i]) return i;
 };
 
-/**
- * Calculates the diffrence between this and another Array
- * 
- * @param compare the Array to compare with
- * @return array
- */
-Array.prototype.diff = function(compare) {
-	return this.filter(function(elem) {
-		return !compare.contains(elem);
-	});
+Array.prototype.remove = function(n) {
+	this.splice(this.indexOf(n), 1);
 };
 
-/**
- * Find the key to an given value
- * 
- * @param needle the value to search for
- * @return integer
- */
-Array.prototype.key = function(needle) {
-	for (var i=0; i<this.length; i++) {
-		if (this[i] == needle) {
-			return i;
-		}
-	}
+Array.prototype.each = function(cb) {
+	for (var i = 0, l = this.length; i < l; i++)
+		cb(i, this[i]);
 };
 
-/**
- * Remove a value from the array
- */
-Array.prototype.remove = function(needle) {
-	var key = this.key(needle);
-	if (key) {
-		this.splice(key, 1);
-	}
-};
\ No newline at end of file
+Array.prototype.contains = function(n) {
+	return this.indexOf(n) !== undefined;
+};
+
+Array.prototype.clear = function() {
+	this.length = 0;
+}
\ No newline at end of file
diff --git a/frontend/javascripts/init.js b/frontend/javascripts/init.js
index a784a08..3f77adc 100644
--- a/frontend/javascripts/init.js
+++ b/frontend/javascripts/init.js
@@ -29,11 +29,24 @@
 const defaultInterval = 7*24*60*60*1000; // 1 week
 
 // volkszaehler.org object
-// holds all data and options for the frontend
+// holds all data, options and functions for the frontend
+// acts like a namespace (we dont want to pollute the global one)
 var vz = {
+	// entity information & properties
 	entities: new Array,
+	
+	// known UUIDs in the browser
 	uuids: new Array,
+	
+	// data for plot
 	data: new Array,
+	
+	// definitions of entities & properties
+	// for validation, translation etc..
+	definitions: {
+		properties: {},
+		entities: {}
+	},
 
 	// timeinterval to request
 	to: new Date().getTime(),
@@ -65,8 +78,8 @@ var vz = {
 				min: 0,
 				zoomRange: [1, null]	// dont scale yaxis when zooming
 			},
-			selection: { mode: "x" },
-			//crosshair: { mode: "x" },
+			selection: { mode: 'x' },
+			//crosshair: { mode: 'x' },
 			grid: { hoverable: true, autoHighlight: false },
 			zoom: {
 				interactive: true,
@@ -84,26 +97,25 @@ var vz = {
 // this is where it all starts...
 $(document).ready(function() {
 	// initialize user interface
-	initInterface();
+	vz.initInterface();
 	
 	// parse uuids from cookie
-	vz.uuids = getUUIDs();
-	console.log(vz.uuids);
-
+	vz.uuids.parseCookie();
+	
 	// add optional uuid from url
 	if($.getUrlVar('uuid')) {
-		addUUID($.getUrlVar('uuid'));
+		vz.uuids.add($.getUrlVar('uuid'));
 	}
 	
 	// start auto refresh timer
-	window.setInterval(refreshWindow, 5000);
+	window.setInterval(vz.refresh, 5000);
 	
 	// handle zooming & panning
 	$('#plot')
 		.bind("plotselected", function (event, ranges) {
 			vz.from = Math.floor(ranges.xaxis.from);
 			vz.to = Math.ceil(ranges.xaxis.to);
-			loadData();
+			vz.data.load();
 		})
 		/*.bind('plotpan', function (event, plot) {
 			var axes = vz.plot.getAxes();
@@ -120,11 +132,11 @@ $(document).ready(function() {
 			//vz.options.plot.yaxis.max = axes.yaxis.max;
 			vz.options.plot.yaxis.min = 0;
 			vz.options.plot.yaxis.max = null;	// autoscaling
-			loadData();
+			vz.data.load();
 		})
 		.bind('mouseup', function(event) {
 			//loadData();
 		});
 	
-	loadEntities();
+	vz.entities.load();
 });
diff --git a/frontend/javascripts/property.js b/frontend/javascripts/property.js
new file mode 100644
index 0000000..9c7d029
--- /dev/null
+++ b/frontend/javascripts/property.js
@@ -0,0 +1,96 @@
+/**
+ * Property handling & validation
+ * 
+ * @author Florian Ziegler <fz@f10-home.de>
+ * @author Justin Otherguy <justin@justinotherguy.org>
+ * @author Steffen Vogel <info@steffenvogel.de>
+ * @copyright Copyright (c) 2010, The volkszaehler.org project
+ * @package default
+ * @license http://opensource.org/licenses/gpl-license.php GNU Public License
+ */
+/*
+ * This file is part of volkzaehler.org
+ * 
+ * volkzaehler.org is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation, either version 3 of the License, or any later version.
+ * 
+ * volkzaehler.org is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more
+ * details.
+ * 
+ * You should have received a copy of the GNU General Public License along with
+ * volkszaehler.org. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+/**
+ * Property
+ */
+var Property = function(key, value) {
+	
+};
+
+Property.prototype.validate = function(value) {
+	switch (property.type) {
+		case 'string':
+		case 'text':
+			// TODO check pattern
+			// TODO check string length
+			return true;
+			
+		case 'float':
+			// TODO check format
+			// TODO check min/max
+			return true;
+			
+		case 'integer':
+			// TODO check format
+			// TODO check min/max
+			return true;
+			
+		case 'boolean':
+			return value == '1' || value == '';
+			
+		case 'multiple':
+			return $.inArray(value, property.options);
+			
+		default:
+			alert('Error: unknown property!');
+	}
+};
+
+Property.prototype.getDOM = function() {
+	switch (property.type) {
+		case 'string':
+		case 'float':
+		case 'integer':
+			return $('<input>')
+				.attr('type', 'text')
+				.attr('name=', property.name)
+				.attr('maxlength', (property.type == 'string') ? property.max : 0);
+			
+		case 'text':
+			return $('<textarea>')
+				.attr('name', property.name);
+			
+		case 'boolean':
+			return $('<input>')
+				.attr('type', 'checkbox')
+				.attr('name', property.name)
+				.value(1);
+			
+		case 'multiple':
+			var dom = $('<select>').attr('name', property.name)
+			property.options.each(function(index, option) {
+				dom.append($('<option>')
+					.value(option)
+					.text(option)
+				);
+			});
+			return dom;
+	
+		default:
+			throw 'Unknown property type';
+	}
+};
\ No newline at end of file
diff --git a/frontend/javascripts/uuid.js b/frontend/javascripts/uuid.js
index 4f323d9..ecd32bc 100644
--- a/frontend/javascripts/uuid.js
+++ b/frontend/javascripts/uuid.js
@@ -27,50 +27,39 @@
 /*
  * Cookie & UUID related functions
  */
-function getUUIDs() {
+vz.uuids.parseCookie = function() {
 	if ($.getCookie('uuids')) {
-		return JSON.parse($.getCookie('uuids'));
+		$.each(JSON.parse($.getCookie('uuids')), function(index, uuid) {
+			vz.uuids.push(uuid);
+		});
+	}
+};
+	
+vz.uuids.add = function(uuid) {
+	if (vz.uuids.validate(uuid)) {
+		if (!vz.uuids.contains(uuid)) {
+			vz.uuids.push(uuid);
+			$.setCookie('uuids', JSON.stringify(vz.uuids));
+		}
+		else {
+			throw 'UUID already added';
+		}
 	}
 	else {
-		return new Array;
+		throw 'Invalid UUID';
 	}
-}
-
-function addUUID(uuid) {
-	if (!vz.uuids.contains(uuid)) {
-		vz.uuids.push(uuid);
-		$.setCookie('uuids', JSON.stringify(vz.uuids));
-	}
-}
-
-function removeUUID(uuid) {
+};
+	
+vz.uuids.remove = function(uuid) {
 	if (vz.uuids.contains(uuid)) {
 		vz.uuids.remove(uuid);
 		$.setCookie('uuids', JSON.stringify(vz.uuids));
 	}
-}
-
-/**
- * Create and return a "version 4" RFC-4122 UUID string
- * 
- * @todo remove after got backend handling working
- */
-function getRandomUUID() {
-	var s = [], itoh = '0123456789ABCDEF';
-
-	// make array of random hex digits. The UUID only has 32 digits in it, but we
-	// allocate an extra items to make room for the '-'s we'll be inserting.
-	for (var i = 0; i <36; i++) s[i] = Math.floor(Math.random()*0x10);
-
-	// conform to RFC-4122, section 4.4
-	s[14] = 4;  // Set 4 high bits of time_high field to version
-	s[19] = (s[19] & 0x3) | 0x8;  // Specify 2 high bits of clock sequence
-
-	// convert to hex chars
-	for (var i = 0; i <36; i++) s[i] = itoh[s[i]];
-
-	// insert '-'s
-	s[8] = s[13] = s[18] = s[23] = '-';
-
-	return s.join('');
-}
\ No newline at end of file
+	else {
+		throw 'UUID unkown: ' + uuid;
+	}
+};
+	
+vz.uuids.validate = function(uuid) {
+	return new Boolean(uuid.match(/^[0-9a-zA-Z]{8}-[0-9a-zA-Z]{4}-[0-9a-zA-Z]{4}-[0-9a-zA-Z]{4}-[0-9a-zA-Z]{12}$/));
+};
\ No newline at end of file