diff --git a/Makefile b/Makefile
index d819652..ee1b0e2 100644
--- a/Makefile
+++ b/Makefile
@@ -1,8 +1,60 @@
-.PHONY: push
+SOURCES =	src/mm.js \
+			src/promise.js \
+			src/promise-addons.js \
+			src/repo.js \
+			src/item.js \
+			src/map.js \
+			src/keyboard.js \
+			src/action.js \
+			src/clipboard.js \
+			src/command.js \
+			src/command.edit.js \
+			src/command.select.js \
+			src/layout.js \
+			src/layout.graph.js \
+			src/layout.tree.js \
+			src/layout.map.js \
+			src/shape.js \
+			src/shape.underline.js \
+			src/shape.box.js \
+			src/shape.ellipse.js \
+			src/format.js \
+			src/format.json.js \
+			src/format.freemind.js \
+			src/format.mma.js \
+			src/format.mup.js \
+			src/backend.js \
+			src/backend.local.js \
+			src/backend.file.js \
+			src/backend.firebase.js \
+			src/backend.gdrive.js \
+			src/ui.js \
+			src/ui.layout.js \
+			src/ui.shape.js \
+			src/ui.value.js \
+			src/ui.status.js \
+			src/ui.color.js \
+			src/ui.help.js \
+			src/ui.io.js \
+			src/ui.backend.js \
+			src/ui.backend.file.js \
+			src/ui.backend.local.js \
+			src/ui.backend.firebase.js \
+			src/ui.backend.gdrive.js \
+			src/app.js
 
-all:
+.PHONY: all push clean
+
+all: my-mind.js
+
+my-mind.js: $(SOURCES)
+	@echo "/* My Mind web app: all source files combined. */" > $@
+	@cat $^ >> $@
 
 push:
 	@hg bookmark -f master
 	@hg push ; true
 	@hg push github ; true
+
+clean:
+	@rm my-mind.js
diff --git a/README.md b/README.md
index 73ac86c..4eccaa2 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@ My Mind
 My Mind is a web application for creating and managing Mind maps. It is free to use and you can fork its source code.
 
 * [Official web page](http://my-mind.github.io/)
-* [Sample mind map]() showcasing many features
+* [Sample mind map](http://my-mind.github.io/?map=examples/features.mymind) showcasing many features
 * [Documentation](https://github.com/ondras/my-mind/wiki)
 
 My Mind is being actively developed. Do you want to participate?
diff --git a/css/ui.css b/css/ui.css
index 875742a..5cea699 100644
--- a/css/ui.css
+++ b/css/ui.css
@@ -103,22 +103,32 @@
 	border-color: #000;
 }
 
+.ui #github {
+	position: absolute;
+	right: 160px;
+	bottom: 6px;
+}
+
+.ui #github img {
+	vertical-align: middle;
+}
+
 .ui ~ #toggle {
 	position: fixed;
-	bottom: 25px;
-	right: 75px;
-	width: 50px;
-	height: 50px;
-	line-height: 30px;
+	bottom: 6px;
+	right: 10px;
+	width: 32px;
+	height: 32px;
+	line-height: 18px;
 	margin: auto;
 	border-radius: 50%;
 	box-shadow: 0 0 2px 3px #ccf;
 }
 
 .ui ~ #toggle:after {
-	content: "◀";
+	content: "←";
 	font-weight: bold;
-	font-size: 28px;
+	font-size: 22px;
 }
 
 .ui.visible ~ #toggle {
@@ -126,7 +136,7 @@
 }
 
 .ui.visible ~ #toggle:after {
-	content: "▶";
+	content: "→";
 }
 
 .ui#help {
diff --git a/examples/features.mymind b/examples/features.mymind
new file mode 100644
index 0000000..264f234
--- /dev/null
+++ b/examples/features.mymind
@@ -0,0 +1,190 @@
+{
+  "root": {
+    "id": "ujfdpxoz",
+    "text": "My Mind\nFeatures",
+    "layout": "map",
+    "children": [
+      {
+        "id": "cmetfpcz",
+        "text": "Basic features",
+        "side": "right",
+        "color": "#e33",
+        "children": [
+          {
+            "id": "oufzmqvy",
+            "text": "Node selection, manipulation"
+          },
+          {
+            "id": "hsthllrc",
+            "text": "<b>Rich</b> <i>text</i> <strike>editing</strike>"
+          },
+          {
+            "id": "spnaifjx",
+            "text": "Auto-linking"
+          },
+          {
+            "id": "meeftorp",
+            "text": "Colors"
+          },
+          {
+            "id": "pphsgpvu",
+            "text": "Zooming"
+          },
+          {
+            "id": "avzourxv",
+            "text": "Shapes"
+          },
+          {
+            "id": "bhszysqp",
+            "text": "Full keyboard control"
+          }
+        ]
+      },
+      {
+        "id": "nkrfhzwg",
+        "text": "I/O",
+        "side": "left",
+        "color": "#3e3",
+        "children": [
+          {
+            "id": "fpbtygky",
+            "text": "Multiple backends",
+            "children": [
+              {
+                "id": "ezwvmtko",
+                "text": "Local storage"
+              },
+              {
+                "id": "sczzbjgf",
+                "text": "Local filesystem"
+              },
+              {
+                "id": "megldbuw",
+                "text": "Firebase"
+              },
+              {
+                "id": "rmxmrpum",
+                "text": "Google Drive"
+              }
+            ]
+          },
+          {
+            "id": "bmatbsiz",
+            "text": "Multiple file formats",
+            "children": [
+              {
+                "id": "lyzyawpn",
+                "text": "Native"
+              },
+              {
+                "id": "chfwbjrp",
+                "text": "Freemind"
+              },
+              {
+                "id": "vhsldewc",
+                "text": "Mind Architect"
+              },
+              {
+                "id": "whmzheiy",
+                "text": "MindMup"
+              }
+            ]
+          },
+          {
+            "id": "hjialeal",
+            "text": "Permalinks"
+          }
+        ]
+      },
+      {
+        "id": "scoyihcg",
+        "text": "Advanced features",
+        "side": "right",
+        "color": "#33e",
+        "children": [
+          {
+            "id": "bvfjpmrm",
+            "text": "Numerical node values",
+            "value": "sum",
+            "children": [
+              {
+                "id": "fppldjcr",
+                "text": "Constant values",
+                "value": 3.14
+              },
+              {
+                "id": "lhqwyqwq",
+                "text": "Functions",
+                "value": 42
+              }
+            ]
+          },
+          {
+            "id": "pjqwdjad",
+            "text": "Bool node statuses",
+            "value": "maybe",
+            "status": "maybe",
+            "children": [
+              {
+                "id": "jsrxnhgy",
+                "text": "Yes/No",
+                "value": "yes",
+                "status": "no"
+              },
+              {
+                "id": "oqzwbzvf",
+                "text": "Auto-propagation to parent",
+                "value": "no",
+                "status": "maybe"
+              }
+            ]
+          },
+          {
+            "id": "adqojbln",
+            "text": "Variable layouts",
+            "layout": "tree-right",
+            "children": [
+              {
+                "id": "uglsvbbi",
+                "text": "Map"
+              },
+              {
+                "id": "mvqxmutu",
+                "text": "Graph"
+              },
+              {
+                "id": "uonrboqe",
+                "text": "Tree"
+              }
+            ]
+          },
+          {
+            "id": "rsruxymh",
+            "text": "Infinite undo/redo"
+          }
+        ]
+      },
+      {
+        "id": "rbahwqul",
+        "text": "Planned features",
+        "side": "left",
+        "color": "#d3d",
+        "children": [
+          {
+            "id": "krsvhker",
+            "text": "Realtime sync (Firebase)"
+          },
+          {
+            "id": "vcmxdsvj",
+            "text": "Custom styles"
+          },
+          {
+            "id": "bsddmwik",
+            "text": "Custom icons"
+          }
+        ]
+      }
+    ]
+  },
+  "id": "dwqxduay"
+}
diff --git a/examples/test.mymind b/examples/test.mymind
deleted file mode 100644
index e569814..0000000
--- a/examples/test.mymind
+++ /dev/null
@@ -1,87 +0,0 @@
-{
-  "root": {
-    "text": "This is <s>Sparta</s> Root",
-    "layout": "map",
-    "children": [
-      {
-        "text": "right 1",
-        "value": "sum",
-        "side": "right",
-        "color": "#33f",
-        "layout": "tree-right",
-        "shape": "box",
-        "children": [
-          {
-            "value": 1,
-            "text": "right 1.1"
-          },
-          {
-            "value": 13,
-            "text": "right 1.2 zejo",
-            "status": "yes"
-          },
-          {
-            "text": "right 1.3 very long",
-            "children": [
-              {
-                "text": "right 1.3.1"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "text": "left 1",
-        "value": 3.14,
-        "side": "left",
-        "children": [
-          {
-            "text": "left 1.1"
-          },
-          {
-            "text": "left 1.2\nnewline jak cyp",
-            "children": [
-              {
-                "text": "left 1.2.1"
-              }
-            ]
-          },
-          {
-            "text": "left 1.3",
-            "children": [
-              {
-                "text": "left 1.3.1"
-              }
-            ]
-          },
-          {
-            "text": "left 1.4"
-          }
-        ]
-      },
-      {
-        "text": "right 2",
-        "side": "right",
-        "color": "#f33",
-        "children": [
-          {
-            "text": "right 2.1"
-          },
-          {
-            "text": "right 2.2"
-          }
-        ]
-      },
-      {
-        "text": "left 2 veri long k?",
-        "side": "left",
-        "children": [
-          {
-            "text": "left 2.1"
-          }
-        ]
-      }
-    ]
-  },
-  "id": "mltgjtma"
-}
diff --git a/github.png b/github.png
new file mode 100644
index 0000000..8b25551
Binary files /dev/null and b/github.png differ
diff --git a/index.html b/index.html
index e5c9a60..8c1987a 100644
--- a/index.html
+++ b/index.html
@@ -4,51 +4,9 @@
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width" />
 		<title>My Mind</title>
-		<script src="js/promise.js"></script>
-		<script src="js/promise-addons.js"></script>
-		<script src="js/mm.js"></script>
-		<script src="js/repo.js"></script>
-		<script src="js/item.js"></script>
-		<script src="js/map.js"></script>
-		<script src="js/keyboard.js"></script>
-		<script src="js/action.js"></script>
-		<script src="js/clipboard.js"></script>
-		<script src="js/command.js"></script>
-		<script src="js/command.edit.js"></script>
-		<script src="js/command.select.js"></script>
-		<script src="js/layout.js"></script>
-		<script src="js/layout.graph.js"></script>
-		<script src="js/layout.tree.js"></script>
-		<script src="js/layout.map.js"></script>
-		<script src="js/shape.js"></script>
-		<script src="js/shape.underline.js"></script>
-		<script src="js/shape.box.js"></script>
-		<script src="js/shape.ellipse.js"></script>
-		<script src="js/format.js"></script>
-		<script src="js/format.json.js"></script>
-		<script src="js/format.freemind.js"></script>
-		<script src="js/format.mma.js"></script>
-		<script src="js/format.mup.js"></script>
-		<script src="js/backend.js"></script>
-		<script src="js/backend.local.js"></script>
-		<script src="js/backend.file.js"></script>
-		<script src="js/backend.firebase.js"></script>
-		<script src="js/backend.gdrive.js"></script>
-		<script src="js/ui.js"></script>
-		<script src="js/ui.layout.js"></script>
-		<script src="js/ui.shape.js"></script>
-		<script src="js/ui.value.js"></script>
-		<script src="js/ui.status.js"></script>
-		<script src="js/ui.color.js"></script>
-		<script src="js/ui.help.js"></script>
-		<script src="js/ui.io.js"></script>
-		<script src="js/ui.backend.js"></script>
-		<script src="js/ui.backend.file.js"></script>
-		<script src="js/ui.backend.local.js"></script>
-		<script src="js/ui.backend.firebase.js"></script>
-		<script src="js/ui.backend.gdrive.js"></script>
-		<script src="js/app.js"></script>
+		<script src="my-mind.js"></script>
 		<script src="https://cdn.firebase.com/v0/firebase.js"></script>
+		<script src="https://cdn.firebase.com/v0/firebase-simple-login.js"></script>
 		<link rel="stylesheet" href="css/style.css" />
 	</head>
 	<body>
@@ -117,9 +75,11 @@ <h3>Item</h3>
 					<a data-color="#fa3" title="Orange" href="#"></a>
 				</span>
 			</p>
+
+			<a id="github" target="_blank" href="https://github.com/ondras/my-mind" title="GitHub project page"><img src="github.png" alt="GitHub project page" /></a>
 		</div>
 
-		<button id="toggle"></button>
+		<button id="toggle" title="Toggle UI"></button>
 
 		<div id="io" class="ui">
 			<h3></h3>
@@ -156,6 +116,16 @@ <h3></h3>
 					<span>Server</span>
 					<input type="text" class="server" />
 				</p>
+				<p data-for="save load">
+					<span>Auth</span>
+					<select class="auth">
+						<option value="">(None)</option>
+						<option value="facebook">Facebook</option>
+						<option value="twitter">Twitter</option>
+						<option value="github">GitHub</option>
+						<option value="persona">Persona</option>
+					</select>
+				</p>
 				<p data-for="load">
 					<span>Saved maps</span>
 					<select class="list"></select>
@@ -192,54 +162,22 @@ <h3>Help</h3>
 		</div>
 
 		<script>
-		MM.App.init();
-/*
-		var map = new MM.Map({root:"This is <s>Sparta</s> Root"});
-
-		var root = map.getRoot();
-		root.setLayout(MM.Layout.Map);
-		
-		var r1 = root.insertChild().setText("right 1").setShape(MM.Shape.Box);
-		r1.setLayout(MM.Layout.Tree.Right);
-		r1.setColor("#33f");
-		r1.insertChild().setText("right 1.1").setValue(1);
-		r1.insertChild().setText("right 1.2 zejo").setValue(2);
-		r1.insertChild().setText("right 1.3 very long").setValue(3).insertChild().setText("right 1.3.1");
-		r1.setValue("sum");
-
-		var l1 = root.insertChild().setText("left 1");
-		l1.insertChild().setText("left 1.1");
-		l1.insertChild().setText("left 1.2<br/>newline jak cyp").insertChild().setText("left 1.2.1");
-		l1.insertChild().setText("left 1.3").insertChild().setText("left 1.3.1");
-		l1.insertChild().setText("left 1.4");
-	
-		var r2 = root.insertChild().setText("right 2");
-		r2.setColor("#f33");
-		r2.insertChild().setText("right 2.1");
-		r2.insertChild().setText("right 2.2");
-
-		var l2 = root.insertChild().setText("left 2 veri long k?");
-		l2.insertChild().setText("left 2.1");
-
-		MM.App.setMap(map);
-*/
-		MM.App.io.restore();
+			MM.App.init();
+			MM.App.io.restore();
 		</script>
 
 <!--
 TODO:
   shortterm:
-    - firebase auth
-    - dragdrop
-  
+    - docs (github wiki)
+
   longterm:
     - firebase realtime
     - (custom) icons
-    - docka (github wiki)
 
   bugs:
 
-  jen jako request:
+  only as a request:
 	- firebase multiserver
     - l11n
     - custom css
diff --git a/my-mind.js b/my-mind.js
new file mode 100644
index 0000000..f641ece
--- /dev/null
+++ b/my-mind.js
@@ -0,0 +1,4020 @@
+/* My Mind web app: all source files combined. */
+var MM = {
+	_subscribers: {},
+	
+	publish: function(message, publisher, data) {
+		var subscribers = this._subscribers[message] || [];
+		subscribers.forEach(function(subscriber) {
+			subscriber.handleMessage(message, publisher, data);
+		});
+	},
+	
+	subscribe: function(message, subscriber) {
+		if (!(message in this._subscribers)) {
+			this._subscribers[message] = [];
+		}
+		this._subscribers[message].push(subscriber);
+	},
+	
+	unsubscribe: function(message, subscriber) {
+		var index = this._subscribers[message].indexOf(subscriber);
+		this._subscribers[message].splice(index, 1);
+	},
+	
+	generateId: function() {
+		var str = "";
+		for (var i=0;i<8;i++) {
+			var code = Math.floor(Math.random()*26);
+			str += String.fromCharCode("a".charCodeAt(0) + code);
+		}
+		return str;
+	}
+};
+/*
+	Any copyright is dedicated to the Public Domain.
+	http://creativecommons.org/publicdomain/zero/1.0/
+*/
+
+/**
+ * @class A promise - value to be resolved in the future.
+ * Implements the "Promises/A+" specification.
+ */
+var Promise = function() {
+	this._state = 0; /* 0 = pending, 1 = fulfilled, 2 = rejected */
+	this._value = null; /* fulfillment / rejection value */
+
+	this._cb = {
+		fulfilled: [],
+		rejected: []
+	}
+
+	this._thenPromises = []; /* promises returned by then() */
+}
+
+/**
+ * @param {function} onFulfilled To be called once this promise gets fulfilled
+ * @param {function} onRejected To be called once this promise gets rejected
+ * @returns {Promise}
+ */
+Promise.prototype.then = function(onFulfilled, onRejected) {
+	this._cb.fulfilled.push(onFulfilled);
+	this._cb.rejected.push(onRejected);
+
+	var thenPromise = new Promise();
+
+	this._thenPromises.push(thenPromise);
+
+	if (this._state > 0) {
+		setTimeout(this._processQueue.bind(this), 0);
+	}
+
+	/* 3.2.6. then must return a promise. */
+	return thenPromise; 
+}
+
+/**
+ * Fulfill this promise with a given value
+ * @param {any} value
+ */
+Promise.prototype.fulfill = function(value) {
+	if (this._state != 0) { return this; }
+
+	this._state = 1;
+	this._value = value;
+
+	this._processQueue();
+
+	return this;
+}
+
+/**
+ * Reject this promise with a given value
+ * @param {any} value
+ */
+Promise.prototype.reject = function(value) {
+	if (this._state != 0) { return this; }
+
+	this._state = 2;
+	this._value = value;
+
+	this._processQueue();
+
+	return this;
+}
+
+Promise.prototype._processQueue = function() {
+	while (this._thenPromises.length) {
+		var onFulfilled = this._cb.fulfilled.shift();
+		var onRejected = this._cb.rejected.shift();
+		this._executeCallback(this._state == 1 ? onFulfilled : onRejected);
+	}
+}
+
+Promise.prototype._executeCallback = function(cb) {
+	var thenPromise = this._thenPromises.shift();
+
+	if (typeof(cb) != "function") {
+		if (this._state == 1) {
+			/* 3.2.6.4. If onFulfilled is not a function and promise1 is fulfilled, promise2 must be fulfilled with the same value. */
+			thenPromise.fulfill(this._value);
+		} else {
+			/* 3.2.6.5. If onRejected is not a function and promise1 is rejected, promise2 must be rejected with the same reason. */
+			thenPromise.reject(this._value);
+		}
+		return;
+	}
+
+	try {
+		var returned = cb(this._value);
+
+		if (returned && typeof(returned.then) == "function") {
+			/* 3.2.6.3. If either onFulfilled or onRejected returns a promise (call it returnedPromise), promise2 must assume the state of returnedPromise */
+			var fulfillThenPromise = function(value) { thenPromise.fulfill(value); }
+			var rejectThenPromise = function(value) { thenPromise.reject(value); }
+			returned.then(fulfillThenPromise, rejectThenPromise);
+		} else {
+			/* 3.2.6.1. If either onFulfilled or onRejected returns a value that is not a promise, promise2 must be fulfilled with that value. */ 
+			thenPromise.fulfill(returned);
+		}
+
+	} catch (e) {
+
+		/* 3.2.6.2. If either onFulfilled or onRejected throws an exception, promise2 must be rejected with the thrown exception as the reason. */
+		thenPromise.reject(e); 
+
+	}
+}    
+/**
+ * Wait for all these promises to complete. One failed => this fails too.
+ */
+Promise.when = function(all) {
+	var promise = new this();
+	var counter = 0;
+	var results = [];
+
+	for (var i=0;i<all.length;i++) {
+		counter++;
+		all[i].then(function(index, result) {
+			results[index] = result;
+			counter--;
+			if (!counter) { promise.fulfill(results); }
+		}.bind(null, i), function(reason) {
+			counter = 1/0;
+			promise.reject(reason);
+		});
+	}
+
+	return promise;
+}
+
+/**
+ * Promise-based version of setTimeout
+ */
+Promise.setTimeout = function(ms) {
+	var promise = new this();
+	setTimeout(function() { promise.fulfill(); }, ms);
+	return promise;
+}
+
+/**
+ * Promise-based version of addEventListener
+ */
+Promise.event = function(element, event, capture) {
+	var promise = new this();
+	var cb = function(e) {
+		element.removeEventListener(event, cb, capture);
+		promise.fulfill(e);
+	}
+	element.addEventListener(event, cb, capture);
+	return promise;
+}
+
+/**
+ * Promise-based wait for CSS transition end
+ */
+Promise.transition = function(element) {
+	if ("transition" in element.style) {
+		return this.event(element, "transitionend", false);
+	} else if ("webkitTransition" in element.style) {
+		return this.event(element, "webkitTransitionEnd", false);
+	} else {
+		return new this().fulfill();
+	}
+}
+
+/**
+ * Promise-based version of XMLHttpRequest::send
+ */
+Promise.send = function(xhr, data) {
+	var promise = new this();
+	xhr.addEventListener("readystatechange", function(e) {
+		if (e.target.readyState != 4) { return; }
+		if (e.target.status == 200) {
+			promise.fulfill(e.target);
+		} else {
+			promise.reject(e.target);
+		}
+	});
+	xhr.send(data);
+	return promise;
+}
+
+Promise.worker = function(url, message) {
+	var promise = new this();
+	var worker = new Worker(url);
+	Promise.event(worker, "message").then(function(e) {
+		promise.fulfill(e.data);
+	});
+	Promise.event(worker, "error").then(function(e) {
+		promise.reject(e.message);
+	});
+	worker.postMessage(message);
+	return promise;
+}
+/**
+ * Prototype for all things categorizable: shapes, layouts, commands, formats, backends...
+ */
+MM.Repo = {
+	id: "", /* internal ID */
+	label: "", /* human-readable label */
+	getAll: function() {
+		var all = [];
+		for (var p in this) {
+			var val = this[p];
+			if (this.isPrototypeOf(val)) { all.push(val); }
+		}
+		return all;
+	},
+	getByProperty: function(property, value) {
+		return this.getAll().filter(function(item) {
+			return item[property] == value;
+		})[0] || null;
+	},
+	getById: function(id) {
+		return this.getByProperty("id", id);
+	},
+	buildOption: function() {
+		var o = document.createElement("option");
+		o.value = this.id;
+		o.innerHTML = this.label;
+		return o;
+	}
+}
+MM.Item = function() {
+	this._parent = null;
+	this._children = [];
+
+	this._layout = null;
+	this._shape = null;
+	this._autoShape = true;
+	this._color = null;
+	this._value = null;
+	this._status = null;
+	this._side = null; /* side preference */
+	this._id = MM.generateId();
+	this._oldText = "";
+
+	this._computed = {
+		value: 0,
+		status: null
+	}
+
+	this._dom = {
+		node: document.createElement("li"),
+		content: document.createElement("div"),
+		status: document.createElement("span"),
+		value: document.createElement("span"),
+		text: document.createElement("div"),
+		children: document.createElement("ul"),
+		canvas: document.createElement("canvas")
+	}
+	this._dom.node.classList.add("item");
+	this._dom.content.classList.add("content");
+	this._dom.status.classList.add("status");
+	this._dom.value.classList.add("value");
+	this._dom.text.classList.add("text");
+	this._dom.children.classList.add("children");
+	this._dom.node.appendChild(this._dom.canvas);
+	this._dom.node.appendChild(this._dom.content);
+}
+
+MM.Item.COLOR = "#999";
+
+    /* RE explanation:
+     *          _________________________________________________________________________ One of the three possible variants
+     *           ____________________ scheme://x
+     *                                ___________________________ aa.bb.cc
+     *                                                            _______________________ aa.bb/
+     *                                                                                    ______ path, search
+     *                                                                                          __________________________ end with a non-forbidden char
+     *                                                                                                                    ______ end of word or end of string
+     */                                                                                                                           
+MM.Item.RE = /\b(([a-z][\w-]+:\/\/\w)|(([\w-]+\.){2,}[a-z][\w-]+)|([\w-]+\.[a-z][\w-]+\/))[^\s]*([^\s,.;:?!<>\(\)\[\]'"])?($|\b)/i;
+
+MM.Item.fromJSON = function(data) {
+	return new this().fromJSON(data);
+}
+
+/**
+ * Only when creating a new item. To merge existing items, use .mergeWith().
+ */
+MM.Item.prototype.fromJSON = function(data) {
+	this.setText(data.text);
+	if (data.id) { this._id = data.id; }
+	if (data.side) { this._side = data.side; }
+	if (data.color) { this._color = data.color; }
+	if (data.value) { this._value = data.value; }
+	if (data.status) { this._status = data.status; }
+	if (data.layout) { this._layout = MM.Layout.getById(data.layout); }
+	if (data.shape) { this.setShape(MM.Shape.getById(data.shape)); }
+	if (data.shape) { this.setShape(MM.Shape.getById(data.shape)); }
+
+	(data.children || []).forEach(function(child) {
+		this.insertChild(MM.Item.fromJSON(child));
+	}, this);
+
+	return this;
+}
+
+MM.Item.prototype.toJSON = function() {
+	var data = {
+		id: this._id,
+		text: this.getText()
+	}
+	
+	if (this._side) { data.side = this._side; }
+	if (this._color) { data.color = this._color; }
+	if (this._value) { data.value = this._value; }
+	if (this._status) { data.status = this._status; }
+	if (this._layout) { data.layout = this._layout.id; }
+	if (!this._autoShape) { data.shape = this._shape.id; }
+	if (this._children.length) {
+		data.children = this._children.map(function(child) { return child.toJSON(); });
+	}
+
+	return data;
+}
+
+MM.Item.prototype.clone = function() {
+	var data = this.toJSON();
+
+	var removeId = function(obj) {
+		delete obj.id;
+		obj.children && obj.children.forEach(removeId);
+	}
+	removeId(data);
+
+	return this.constructor.fromJSON(data);
+}
+
+MM.Item.prototype.update = function(doNotRecurse) {
+	MM.publish("item-change", this);
+
+	var map = this.getMap();
+	if (!map || !map.isVisible()) { return this; }
+
+	if (this._autoShape) { /* check for changed auto-shape */
+		var autoShape = this._getAutoShape();
+		if (autoShape != this._shape) {
+			if (this._shape) { this._shape.unset(this); }
+			this._shape = autoShape;
+			this._shape.set(this);
+		}
+	}
+	
+	this._updateStatus();
+	this._updateValue();
+	this.getLayout().update(this);
+	this.getShape().update(this);
+	if (!this.isRoot() && !doNotRecurse) { this._parent.update(); }
+
+	return this;
+}
+
+MM.Item.prototype.updateSubtree = function(isSubChild) {
+	this._children.forEach(function(child) {
+		child.updateSubtree(true);
+	});
+	return this.update(isSubChild);
+}
+
+MM.Item.prototype.setText = function(text) {
+	this._dom.text.innerHTML = text.replace(/\n/g, "<br/>");
+	this._findLinks(this._dom.text);
+	return this.update();
+}
+
+MM.Item.prototype.getText = function() {
+	return this._dom.text.innerHTML.replace(/<br\s*\/?>/g, "\n");
+}
+
+MM.Item.prototype.setValue = function(value) {
+	this._value = value;
+	return this.update();
+}
+
+MM.Item.prototype.getValue = function() {
+	return this._value;
+}
+
+MM.Item.prototype.getComputedValue = function() {
+	return this._computed.value;
+}
+
+MM.Item.prototype.setStatus = function(status) {
+	this._status = status;
+	return this.update();
+}
+
+MM.Item.prototype.getStatus = function() {
+	return this._status;
+}
+
+MM.Item.prototype.getComputedStatus = function() {
+	return this._computed.status;
+}
+
+MM.Item.prototype.setSide = function(side) {
+	this._side = side;
+	return this;
+}
+
+MM.Item.prototype.getSide = function() {
+	return this._side;
+}
+
+MM.Item.prototype.getChildren = function() {
+	return this._children;
+}
+
+MM.Item.prototype.setColor = function(color) {
+	this._color = color;
+	return this.updateSubtree();
+}
+
+MM.Item.prototype.getColor = function() {
+	return this._color || (this.isRoot() ? MM.Item.COLOR : this._parent.getColor());
+}
+
+MM.Item.prototype.getOwnColor = function() {
+	return this._color;
+}
+
+MM.Item.prototype.getLayout = function() {
+	return this._layout || this._parent.getLayout();
+}
+
+MM.Item.prototype.getOwnLayout = function() {
+	return this._layout;
+}
+
+MM.Item.prototype.setLayout = function(layout) {
+	this._layout = layout;
+	return this.updateSubtree();	
+}
+
+MM.Item.prototype.getShape = function() {
+	return this._shape;
+}
+
+MM.Item.prototype.getOwnShape = function() {
+	return (this._autoShape ? null : this._shape);
+}
+
+MM.Item.prototype.setShape = function(shape) {
+	if (this._shape) { this._shape.unset(this); }
+
+	if (shape) {
+		this._autoShape = false;
+		this._shape = shape;
+	} else {
+		this._autoShape = true;
+		this._shape = this._getAutoShape();
+	}
+
+	this._shape.set(this);
+	return this.update();
+}
+
+MM.Item.prototype.getDOM = function() {
+	return this._dom;
+}
+
+MM.Item.prototype.getMap = function() {
+	var item = this._parent;
+	while (item) {
+		if (item instanceof MM.Map) { return item; }
+		item = item.getParent();
+	}
+	return null;
+}
+
+MM.Item.prototype.getParent = function() {
+	return this._parent;
+}
+
+MM.Item.prototype.isRoot = function() {
+	return (this._parent instanceof MM.Map);
+}
+
+MM.Item.prototype.setParent = function(parent) {
+	this._parent = parent;
+	return this.updateSubtree();
+}
+
+MM.Item.prototype.insertChild = function(child, index) {
+	if (arguments.length < 2) { index = this._children.length; }
+	if (!this._children.length) {
+		this._dom.node.appendChild(this._dom.children);
+	}
+
+	var newChild = false;
+	if (!child) { 
+		child = new MM.Item();
+		newChild = true;
+	} else if (child.getParent()) {
+		child.getParent().removeChild(child);
+	}
+	
+	var next = null;
+	if (index < this._children.length) { next = this._children[index].getDOM().node; }
+	this._dom.children.insertBefore(child.getDOM().node, next);
+	this._children.splice(index, 0, child);
+	
+	return child.setParent(this);
+}
+
+MM.Item.prototype.removeChild = function(child) {
+	var index = this._children.indexOf(child);
+	this._children.splice(index, 1);
+	var node = child.getDOM().node;
+	node.parentNode.removeChild(node);
+	
+	child.setParent(null);
+	
+	if (!this._children.length) {
+		this._dom.children.parentNode.removeChild(this._dom.children);
+	}
+	
+	return this.update();
+}
+
+MM.Item.prototype.startEditing = function() {
+	this._oldText = this.getText();
+	this._dom.text.contentEditable = true;
+	this._dom.text.focus();
+	document.execCommand("styleWithCSS", null, false);
+	return this;
+}
+
+MM.Item.prototype.stopEditing = function() {
+	this._dom.text.blur();
+	this._dom.text.contentEditable = false;
+	var result = this._dom.text.innerHTML;
+	this._dom.text.innerHTML = this._oldText;
+	this._oldText = "";
+	return result;
+}
+
+MM.Item.prototype._getAutoShape = function() {
+	var depth = 0;
+	var node = this;
+	while (!node.isRoot()) {
+		depth++;
+		node = node.getParent();
+	}
+	switch (depth) {
+		case 0: return MM.Shape.Ellipse;
+		case 1: return MM.Shape.Box;
+		default: return MM.Shape.Underline;
+	}
+}
+
+MM.Item.prototype._updateStatus = function() {
+	this._dom.status.className = "status";
+	this._dom.status.style.display = "";
+
+	var status = this._status;
+	if (this._status == "maybe") {
+		var childrenStatus = this._children.every(function(child) {
+			return (child.getComputedStatus() !== false);
+		});
+		status = (childrenStatus ? "yes" : "no");
+	}
+
+	switch (status) {
+		case "yes":
+			this._dom.status.classList.add("yes");
+			this._computed.status = true;
+		break;
+
+		case "no":
+			this._dom.status.classList.add("no");
+			this._computed.status = false;
+		break;
+
+		default:
+			this._computed.status = null;
+			this._dom.status.style.display = "none";
+		break;
+	}
+}
+
+MM.Item.prototype._updateValue = function() {
+	this._dom.value.style.display = "";
+
+	if (typeof(this._value) == "number") {
+		this._computed.value = this._value;
+		this._dom.value.innerHTML = this._value;
+		return;
+	}
+	
+	var childValues = this._children.map(function(child) {
+		return child.getComputedValue();
+	});
+	
+	var result = 0;
+	switch (this._value) {
+		case "sum":
+			result = childValues.reduce(function(prev, cur) {
+				return prev+cur;
+			}, 0);
+		break;
+		
+		case "avg":
+			var sum = childValues.reduce(function(prev, cur) {
+				return prev+cur;
+			}, 0);
+			result = (childValues.length ? sum/childValues.length : 0);
+		break;
+		
+		case "max":
+			result = Math.max.apply(Math, childValues);
+		break;
+		
+		case "min":
+			result = Math.min.apply(Math, childValues);
+		break;
+		
+		default:
+			this._computed.value = 0;
+			this._dom.value.innerHTML = "";
+			this._dom.value.style.display = "none";
+			return;
+		break;
+	}
+	
+	this._computed.value = result;
+	this._dom.value.innerHTML = (Math.round(result) == result ? result : result.toFixed(3));
+}
+
+MM.Item.prototype._findLinks = function(node) {
+
+	var children = [].slice.call(node.childNodes);
+	for (var i=0;i<children.length;i++) {
+		var child = children[i];
+		switch (child.nodeType) {
+			case 1: /* element */
+				if (child.nodeName.toLowerCase() == "a") { continue; }
+				this._findLinks(child);
+			break;
+			
+			case 3: /* text */
+				var result = child.nodeValue.match(this.constructor.RE);
+				if (result) {
+					var before = child.nodeValue.substring(0, result.index);
+					var after = child.nodeValue.substring(result.index + result[0].length);
+					var link = document.createElement("a");
+					link.innerHTML = link.href = result[0];
+					
+					if (before) {
+						node.insertBefore(document.createTextNode(before), child);
+					}
+
+					node.insertBefore(link, child);
+					
+					if (after) {
+						child.nodeValue = after;
+						i--; /* re-try with the aftertext */
+					} else {
+						node.removeChild(child);
+					}
+				}
+			break;
+		}
+	}
+}
+MM.Map = function(options) {
+	var o = {
+		root: "My Mind Map",
+		layout: MM.Layout.Map
+	}
+	for (var p in options) { o[p] = options[p]; }
+	this._root = null;
+	this._visible = false;
+	this._position = [0, 0];
+	this._id = MM.generateId();
+
+	this._setRoot(new MM.Item().setText(o.root).setLayout(o.layout));
+}
+
+MM.Map.fromJSON = function(data) {
+	return new this().fromJSON(data);
+}
+
+MM.Map.prototype.fromJSON = function(data) {
+	if (data.id) { this._id = data.id; }
+	this._setRoot(MM.Item.fromJSON(data.root));
+	return this;
+}
+
+MM.Map.prototype.toJSON = function() {
+	var data = {
+		root: this._root.toJSON(),
+		id: this._id
+	};
+	return data;
+}
+
+MM.Map.prototype.isVisible = function() {
+	return this._visible;
+}
+
+MM.Map.prototype.update = function() {
+	this._root.updateSubtree();
+	return this;
+}
+
+MM.Map.prototype.show = function(where) {
+	var node = this._root.getDOM().node;
+	where.appendChild(node);
+	this._visible = true;
+	this._root.updateSubtree();
+	this.center();
+	MM.App.select(this._root);
+	return this;
+}
+
+MM.Map.prototype.hide = function() {
+	var node = this._root.getDOM().node;
+	node.parentNode.removeChild(node);
+	this._visible = false;
+	return this;
+}
+
+MM.Map.prototype.center = function() {
+	var node = this._root.getDOM().node;
+	var port = MM.App.portSize;
+	var left = (port[0] - node.offsetWidth)/2;
+	var top = (port[1] - node.offsetHeight)/2;
+	
+	this._moveTo(Math.round(left), Math.round(top));
+
+	return this;
+}
+
+MM.Map.prototype.moveBy = function(dx, dy) {
+	return this._moveTo(this._position[0]+dx, this._position[1]+dy);
+}
+
+MM.Map.prototype.getClosestItem = function(x, y) {
+	var all = [];
+
+	var scan = function(item) {
+		var rect = item.getDOM().content.getBoundingClientRect();
+		var dx = rect.left + rect.width/2 - x;
+		var dy = rect.top + rect.height/2 - y;
+		all.push({
+			item: item,
+			dx: dx,
+			dy: dy
+		});
+		item.getChildren().forEach(scan);
+	}
+	
+	scan(this._root);
+	
+	all.sort(function(a, b) {
+		var da = a.dx*a.dx + a.dy*a.dy;
+		var db = b.dx*b.dx + b.dy*b.dy;
+		return da-db;
+	});
+	
+	return all[0];
+}
+
+MM.Map.prototype.getItemFor = function(node) {
+	var port = this._root.getDOM().node.parentNode;
+	while (node != port && !node.classList.contains("content")) {
+		node = node.parentNode;
+	}	
+	if (node == port) { return null; }
+
+	var scan = function(item, node) {
+		if (item.getDOM().content == node) { return item; }
+		var children = item.getChildren();
+		for (var i=0;i<children.length;i++) {
+			var result = scan(children[i], node);
+			if (result) { return result; }
+		}
+		return null;
+	}
+
+	return scan(this._root, node);
+}
+
+MM.Map.prototype.ensureItemVisibility = function(item) {
+	var node = item.getDOM().content;
+	var itemRect = node.getBoundingClientRect();
+	var root = this._root.getDOM().node;
+	var parentRect = root.parentNode.getBoundingClientRect();
+
+	var delta = [0, 0];
+
+	var dx = parentRect.left-itemRect.left;
+	if (dx > 0) { delta[0] = dx; }
+	var dx = parentRect.right-itemRect.right;
+	if (dx < 0) { delta[0] = dx; }
+
+	var dy = parentRect.top-itemRect.top;
+	if (dy > 0) { delta[1] = dy; }
+	var dy = parentRect.bottom-itemRect.bottom;
+	if (dy < 0) { delta[1] = dy; }
+
+	if (delta[0] || delta[1]) {
+		this.moveBy(delta[0], delta[1]);
+	}
+}
+
+MM.Map.prototype.getParent = function() {
+	return null;
+}
+
+MM.Map.prototype.getRoot = function() {
+	return this._root;
+}
+
+MM.Map.prototype.getName = function() {
+	var name = this._root.getText();
+	return name.replace(/\n/g, " ").replace(/<.*?>/g, "").trim();
+}
+
+MM.Map.prototype.getId = function() {
+	return this._id;
+}
+
+MM.Map.prototype.pick = function(item, direction) {
+	var candidates = [];
+	var currentRect = item.getDOM().content.getBoundingClientRect();
+
+	this._getPickCandidates(currentRect, this._root, direction, candidates);
+	if (!candidates.length) { return item; }
+
+	candidates.sort(function(a, b) {
+		return a.dist - b.dist;
+	});
+
+	return candidates[0].item;
+}
+
+MM.Map.prototype._getPickCandidates = function(currentRect, item, direction, candidates) {
+	item.getChildren().forEach(function(child) {
+		this._getPickCandidates(currentRect, child, direction, candidates);
+	}, this);
+
+	var node = item.getDOM().content;
+	var rect = node.getBoundingClientRect();
+
+	if (direction == "left" || direction == "right") {
+		var x1 = currentRect.left + currentRect.width/2;
+		var x2 = rect.left + rect.width/2;
+		if (direction == "left" && x2 > x1) { return; }
+		if (direction == "right" && x2 < x1) { return; }
+
+		var diff1 = currentRect.top - rect.bottom;
+		var diff2 = rect.top - currentRect.bottom;
+		var dist = Math.abs(x2-x1);
+	} else {
+		var y1 = currentRect.top + currentRect.height/2;
+		var y2 = rect.top + rect.height/2;
+		if (direction == "top" && y2 > y1) { return; }
+		if (direction == "bottom" && y2 < y1) { return; }
+
+		var diff1 = currentRect.left - rect.right;
+		var diff2 = rect.left - currentRect.right;
+		var dist = Math.abs(y2-y1);
+	}
+
+	var diff = Math.max(diff1, diff2);
+	if (diff > 0) { return; }
+	if (!dist || dist < diff) { return; }
+
+	candidates.push({item:item, dist:dist});
+}
+
+MM.Map.prototype._moveTo = function(left, top) {
+	this._position = [left, top];
+
+	var node = this._root.getDOM().node;
+	node.style.left = left + "px";
+	node.style.top = top + "px";
+}
+
+MM.Map.prototype._setRoot = function(item) {
+	this._root = item;
+	this._root.setParent(this);
+}
+MM.Keyboard = function() {
+	window.addEventListener("keydown", this);
+	window.addEventListener("keypress", this);
+}
+
+MM.Keyboard.prototype.handleEvent = function(e) {
+	var node = document.activeElement;
+	while (node != document) {
+		if (node.classList.contains("ui")) { return; }
+		node = node.parentNode;
+	}
+	
+	var commands = MM.Command.getAll();
+	for (var i=0;i<commands.length;i++) {
+		var command = commands[i];
+		if (!command.isValid()) { continue; }
+		var keys = command.keys;
+		for (var j=0;j<keys.length;j++) {
+			if (this._keyOK(keys[j], e)) {
+				e.preventDefault();
+				command.execute(e);
+				return;
+			}
+		}
+	}
+}
+
+MM.Keyboard.prototype._keyOK = function(key, e) {
+	if ("keyCode" in key && e.type != "keydown") { return false; }
+	if ("charCode" in key && e.type != "keypress") { return false; }
+	for (var p in key) {
+		if (key[p] != e[p]) { return false; }
+	}
+	return true;
+}
+MM.Action = function() {}
+MM.Action.prototype.perform = function() {}
+MM.Action.prototype.undo = function() {}
+
+MM.Action.InsertNewItem = function(parent, index) {
+	this._parent = parent;
+	this._index = index;
+	this._item = new MM.Item();
+}
+MM.Action.InsertNewItem.prototype = Object.create(MM.Action.prototype);
+MM.Action.InsertNewItem.prototype.perform = function() {
+	this._item = this._parent.insertChild(this._item, this._index);
+	MM.App.select(this._item);
+}
+MM.Action.InsertNewItem.prototype.undo = function() {
+	this._parent.removeChild(this._item);
+	MM.App.select(this._parent);
+}
+
+MM.Action.AppendItem = function(parent, item) {
+	this._parent = parent;
+	this._item = item;
+}
+MM.Action.AppendItem.prototype = Object.create(MM.Action.prototype);
+MM.Action.AppendItem.prototype.perform = function() {
+	this._parent.insertChild(this._item);
+	MM.App.select(this._item);
+}
+MM.Action.AppendItem.prototype.undo = function() {
+	this._parent.removeChild(this._item);
+	MM.App.select(this._parent);
+}
+
+MM.Action.RemoveItem = function(item) {
+	this._item = item;
+	this._parent = item.getParent();
+	this._index = this._parent.getChildren().indexOf(this._item);
+}
+MM.Action.RemoveItem.prototype = Object.create(MM.Action.prototype);
+MM.Action.RemoveItem.prototype.perform = function() {
+	this._parent.removeChild(this._item);
+	MM.App.select(this._parent);
+}
+MM.Action.RemoveItem.prototype.undo = function() {
+	this._parent.insertChild(this._item, this._index);
+	MM.App.select(this._item);
+}
+
+MM.Action.MoveItem = function(item, newParent, newIndex, newSide) {
+	this._item = item;
+	this._newParent = newParent;
+	this._newIndex = (arguments.length < 3 ? null : newIndex);
+	this._newSide = newSide || "";
+	this._oldParent = item.getParent();
+	this._oldIndex = this._oldParent.getChildren().indexOf(item);
+	this._oldSide = item.getSide();
+}
+MM.Action.MoveItem.prototype = Object.create(MM.Action.prototype);
+MM.Action.MoveItem.prototype.perform = function() {
+	this._item.setSide(this._newSide);
+	if (this._newIndex === null) {
+		this._newParent.insertChild(this._item);
+	} else {
+		this._newParent.insertChild(this._item, this._newIndex);
+	}
+	MM.App.select(this._item);
+}
+MM.Action.MoveItem.prototype.undo = function() {
+	this._item.setSide(this._oldSide);
+	this._oldParent.insertChild(this._item, this._oldIndex);
+	MM.App.select(this._newParent);
+}
+
+MM.Action.Swap = function(item, diff) {
+	this._item = item;
+	this._parent = item.getParent();
+
+	var children = this._parent.getChildren();
+	var sibling = this._parent.getLayout().pickSibling(this._item, diff);
+	
+	this._sourceIndex = children.indexOf(this._item);
+	this._targetIndex = children.indexOf(sibling);
+}
+MM.Action.Swap.prototype = Object.create(MM.Action.prototype);
+MM.Action.Swap.prototype.perform = function() {
+	this._parent.insertChild(this._item, this._targetIndex);
+}
+MM.Action.Swap.prototype.undo = function() {
+	this._parent.insertChild(this._item, this._sourceIndex);
+}
+
+MM.Action.SetLayout = function(item, layout) {
+	this._item = item;
+	this._layout = layout;
+	this._oldLayout = item.getOwnLayout();
+}
+MM.Action.SetLayout.prototype = Object.create(MM.Action.prototype);
+MM.Action.SetLayout.prototype.perform = function() {
+	this._item.setLayout(this._layout);
+}
+MM.Action.SetLayout.prototype.undo = function() {
+	this._item.setLayout(this._oldLayout);
+}
+
+MM.Action.SetShape = function(item, shape) {
+	this._item = item;
+	this._shape = shape;
+	this._oldShape = item.getOwnShape();
+}
+MM.Action.SetShape.prototype = Object.create(MM.Action.prototype);
+MM.Action.SetShape.prototype.perform = function() {
+	this._item.setShape(this._shape);
+}
+MM.Action.SetShape.prototype.undo = function() {
+	this._item.setShape(this._oldShape);
+}
+
+MM.Action.SetColor = function(item, color) {
+	this._item = item;
+	this._color = color;
+	this._oldColor = item.getOwnColor();
+}
+MM.Action.SetColor.prototype = Object.create(MM.Action.prototype);
+MM.Action.SetColor.prototype.perform = function() {
+	this._item.setColor(this._color);
+}
+MM.Action.SetColor.prototype.undo = function() {
+	this._item.setColor(this._oldColor);
+}
+
+MM.Action.SetText = function(item, text) {
+	this._item = item;
+	this._text = text;
+	this._oldText = item.getText();
+}
+MM.Action.SetText.prototype = Object.create(MM.Action.prototype);
+MM.Action.SetText.prototype.perform = function() {
+	this._item.setText(this._text);
+}
+MM.Action.SetText.prototype.undo = function() {
+	this._item.setText(this._oldText);
+}
+
+MM.Action.SetValue = function(item, value) {
+	this._item = item;
+	this._value = value;
+	this._oldValue = item.getValue();
+}
+MM.Action.SetValue.prototype = Object.create(MM.Action.prototype);
+MM.Action.SetValue.prototype.perform = function() {
+	this._item.setValue(this._value);
+}
+MM.Action.SetValue.prototype.undo = function() {
+	this._item.setValue(this._oldValue);
+}
+
+MM.Action.SetStatus = function(item, status) {
+	this._item = item;
+	this._status = status;
+	this._oldStatus = item.getStatus();
+}
+MM.Action.SetStatus.prototype = Object.create(MM.Action.prototype);
+MM.Action.SetStatus.prototype.perform = function() {
+	this._item.setStatus(this._status);
+}
+MM.Action.SetStatus.prototype.undo = function() {
+	this._item.setStatus(this._oldStatus);
+}
+MM.Clipboard = {
+	_data: null,
+	_mode: ""
+};
+
+MM.Clipboard.copy = function(sourceItem) {
+	this._endCut();
+
+	this._data = sourceItem.clone();
+	this._mode = "copy";
+}
+
+MM.Clipboard.paste = function(targetItem) {
+	if (!this._data) { return; }
+
+	switch (this._mode) {
+		case "cut":
+			if (this._data == targetItem || this._data.getParent() == targetItem) { /* abort by pasting on the same node or the parent */
+				this._endCut();
+				return;
+			}
+
+			var item = targetItem;
+			while (!item.isRoot()) {
+				if (item == this._data) { return; } /* moving to a child => forbidden */
+				item = item.getParent();
+			}
+
+			var action = new MM.Action.MoveItem(this._data, targetItem);
+			MM.App.action(action);
+
+			this._endCut();
+		break;
+
+		case "copy":
+			var action = new MM.Action.AppendItem(targetItem, this._data.clone());
+			MM.App.action(action);
+		break;
+	}
+
+}
+
+MM.Clipboard.cut = function(sourceItem) {
+	this._endCut();
+
+	this._data = sourceItem;
+	this._mode = "cut";
+
+	var node = this._data.getDOM().node;
+	node.classList.add("cut");
+}
+
+MM.Clipboard._endCut = function() {
+	if (this._mode != "cut") { return; }
+
+	var node = this._data.getDOM().node;
+	node.classList.remove("cut");
+
+	this._data = null;
+	this._mode = "";
+}
+MM.Command = Object.create(MM.Repo, {
+	keys: {value: []},
+	editMode: {value: false},
+	label: {value: ""}
+});
+
+MM.Command.isValid = function() {
+	return (this.editMode == MM.App.editing);
+}
+MM.Command.execute = function() {}
+
+MM.Command.Undo = Object.create(MM.Command, {
+	label: {value: "Undo"},
+	keys: {value: [{charCode: "z".charCodeAt(0), ctrlKey: true}]}
+});
+MM.Command.Undo.isValid = function() {
+	return MM.Command.isValid.call(this) && !!MM.App.historyIndex;
+}
+MM.Command.Undo.execute = function() {
+	MM.App.history[MM.App.historyIndex-1].undo();
+	MM.App.historyIndex--;
+}
+
+MM.Command.Redo = Object.create(MM.Command, {
+	label: {value: "Redo"},
+	keys: {value: [{charCode: "y".charCodeAt(0), ctrlKey: true}]},
+});
+MM.Command.Redo.isValid = function() {
+	return (MM.Command.isValid.call(this) && MM.App.historyIndex != MM.App.history.length);
+}
+MM.Command.Redo.execute = function() {
+	MM.App.history[MM.App.historyIndex].perform();
+	MM.App.historyIndex++;
+}
+
+MM.Command.InsertSibling = Object.create(MM.Command, {
+	label: {value: "Insert a sibling"},
+	keys: {value: [{keyCode: 13}]}
+});
+MM.Command.InsertSibling.execute = function() {
+	var item = MM.App.current;
+	if (item.isRoot()) {
+		var action = new MM.Action.InsertNewItem(item, item.getChildren().length);
+	} else {
+		var parent = item.getParent();
+		var index = parent.getChildren().indexOf(item);
+		var action = new MM.Action.InsertNewItem(parent, index+1);
+	}
+	MM.App.action(action);
+
+	MM.Command.Edit.execute();
+}
+
+MM.Command.InsertChild = Object.create(MM.Command, {
+	label: {value: "Insert a child"},
+	keys: {value: [{keyCode: 45}]}
+});
+MM.Command.InsertChild.execute = function() {
+	var item = MM.App.current;
+	var action = new MM.Action.InsertNewItem(item, item.getChildren().length);
+	MM.App.action(action);	
+
+	MM.Command.Edit.execute();
+}
+
+MM.Command.Delete = Object.create(MM.Command, {
+	label: {value: "Delete an item"},
+	keys: {value: [{keyCode: 46}]}
+});
+MM.Command.Delete.isValid = function() {
+	return MM.Command.isValid.call(this) && !MM.App.current.isRoot();
+}
+MM.Command.Delete.execute = function() {
+	var action = new MM.Action.RemoveItem(MM.App.current);
+	MM.App.action(action);	
+}
+
+MM.Command.Swap = Object.create(MM.Command, {
+	label: {value: "Swap sibling"},
+	keys: {value: [
+		{keyCode: 33},
+		{keyCode: 34},
+	]}
+});
+MM.Command.Swap.execute = function(e) {
+	var current = MM.App.current;
+	if (current.isRoot() || current.getParent().getChildren().length < 2) { return; }
+
+	var diff = (e.keyCode == 33 ? -1 : 1);
+	var action = new MM.Action.Swap(MM.App.current, diff);
+	MM.App.action(action);	
+}
+
+MM.Command.Save = Object.create(MM.Command, {
+	label: {value: "Save map"},
+	keys: {value: [{charCode: "s".charCodeAt(0), ctrlKey:true}]}
+});
+MM.Command.Save.execute = function() {
+	MM.App.io.quickSave();
+}
+
+MM.Command.SaveAs = Object.create(MM.Command, {
+	label: {value: "Save as&hellip;"},
+	keys: {value: [{charCode: "S".charCodeAt(0), ctrlKey:true, shiftKey:true}]}
+});
+MM.Command.SaveAs.execute = function() {
+	MM.App.io.show("save");
+}
+
+MM.Command.Load = Object.create(MM.Command, {
+	label: {value: "Load map"},
+	keys: {value: [{charCode: "o".charCodeAt(0), ctrlKey:true}]}
+});
+MM.Command.Load.execute = function() {
+	MM.App.io.show("load");
+}
+
+MM.Command.Center = Object.create(MM.Command, {
+	label: {value: "Center map"},
+	keys: {value: [{keyCode: 35}]}
+});
+MM.Command.Center.execute = function() {
+	MM.App.map.center();
+}
+
+MM.Command.New = Object.create(MM.Command, {
+	label: {value: "New map"},
+	keys: {value: [{charCode: "n".charCodeAt(0), ctrlKey:true}]}
+});
+MM.Command.New.execute = function() {
+	if (!confirm("Throw away your current map and start a new one?")) { return; }
+	var map = new MM.Map();
+	MM.App.setMap(map);
+	MM.publish("map-new", this);
+}
+
+MM.Command.ZoomIn = Object.create(MM.Command, {
+	label: {value: "Zoom in"},
+	keys: {value: [{charCode:"+".charCodeAt(0)}]}
+});
+MM.Command.ZoomIn.execute = function() {
+	MM.App.adjustFontSize(1);
+}
+
+MM.Command.ZoomOut = Object.create(MM.Command, {
+	label: {value: "Zoom out"},
+	keys: {value: [{charCode:"-".charCodeAt(0)}]}
+});
+MM.Command.ZoomOut.execute = function() {
+	MM.App.adjustFontSize(-1);
+}
+
+MM.Command.Help = Object.create(MM.Command, {
+	label: {value: "Show/hide help"},
+	keys: {value: [{charCode: "?".charCodeAt(0)}]}
+});
+MM.Command.Help.execute = function() {
+	MM.App.help.toggle();
+}
+
+MM.Command.UI = Object.create(MM.Command, {
+	label: {value: "Show/hide UI"},
+	keys: {value: [{charCode: "*".charCodeAt(0)}]}
+});
+MM.Command.UI.execute = function() {
+	MM.App.ui.toggle();
+}
+
+MM.Command.Pan = Object.create(MM.Command, {
+	label: {value: "Pan the map"},
+	keys: {value: [
+		{keyCode: "W".charCodeAt(0), ctrlKey:false},
+		{keyCode: "A".charCodeAt(0), ctrlKey:false},
+		{keyCode: "S".charCodeAt(0), ctrlKey:false},
+		{keyCode: "D".charCodeAt(0), ctrlKey:false}
+	]},
+	chars: {value: []}
+});
+MM.Command.Pan.execute = function(e) {
+	var ch = String.fromCharCode(e.keyCode);
+	var index = this.chars.indexOf(ch);
+	if (index > -1) { return; }
+
+	if (!this.chars.length) {
+		window.addEventListener("keyup", this);
+		this.interval = setInterval(this._step.bind(this), 50);
+	}
+
+	this.chars.push(ch);
+	this._step();
+}
+
+MM.Command.Pan._step = function() {
+	var dirs = {
+		"W": [0, 1],
+		"A": [1, 0],
+		"S": [0, -1],
+		"D": [-1, 0]
+	}
+	var offset = [0, 0];
+
+	this.chars.forEach(function(ch) {
+		offset[0] += dirs[ch][0];
+		offset[1] += dirs[ch][1];
+	});
+
+	MM.App.map.moveBy(10*offset[0], 10*offset[1]);
+}
+
+MM.Command.Pan.handleEvent = function(e) {
+	var ch = String.fromCharCode(e.keyCode);
+	var index = this.chars.indexOf(ch);
+	if (index > -1) {
+		this.chars.splice(index, 1);
+		if (!this.chars.length) {
+			window.removeEventListener("keyup", this);
+			clearInterval(this.interval);
+		}
+	}
+}
+
+MM.Command.Copy = Object.create(MM.Command, {
+	label: {value: "Copy"},
+	keys: {value: [{charCode: "c".charCodeAt(0), ctrlKey:true}]}
+});
+MM.Command.Copy.execute = function() {
+	MM.Clipboard.copy(MM.App.current);
+}
+
+MM.Command.Cut = Object.create(MM.Command, {
+	label: {value: "Cut"},
+	keys: {value: [{charCode: "x".charCodeAt(0), ctrlKey:true}]}
+});
+MM.Command.Cut.execute = function() {
+	MM.Clipboard.cut(MM.App.current);
+}
+
+MM.Command.Paste = Object.create(MM.Command, {
+	label: {value: "Paste"},
+	keys: {value: [{charCode: "v".charCodeAt(0), ctrlKey:true}]}
+});
+MM.Command.Paste.execute = function() {
+	MM.Clipboard.paste(MM.App.current);
+}
+MM.Command.Edit = Object.create(MM.Command, {
+	label: {value: "Edit item"},
+	keys: {value: [
+		{keyCode: 32},
+		{keyCode: 113}
+	]}
+});
+MM.Command.Edit.execute = function() {
+	MM.App.current.startEditing();
+	MM.App.editing = true;
+}
+
+MM.Command.Finish = Object.create(MM.Command, {
+	keys: {value: [{keyCode: 13, altKey:false, ctrlKey:false, shiftKey:false}]},
+	editMode: {value: true}
+});
+MM.Command.Finish.execute = function() {
+	MM.App.editing = false;
+	var text = MM.App.current.stopEditing();
+	if (text) {
+		var action = new MM.Action.SetText(MM.App.current, text);
+	} else {
+		var action = new MM.Action.RemoveItem(MM.App.current);
+	}
+	MM.App.action(action);
+}
+
+MM.Command.Newline = Object.create(MM.Command, {
+	label: {value: "Line break"},
+	keys: {value: [
+		{keyCode: 13, shiftKey:true},
+		{keyCode: 13, ctrlKey:true}
+	]},
+	editMode: {value: true}
+});
+MM.Command.Newline.execute = function() {
+	var range = getSelection().getRangeAt(0);
+	var br = document.createElement("br");
+	range.insertNode(br);
+	range.setStartAfter(br);
+}
+
+MM.Command.Cancel = Object.create(MM.Command, {
+	editMode: {value: true},
+	keys: {value: [{keyCode: 27}]}
+});
+MM.Command.Cancel.execute = function() {
+	MM.App.editing = false;
+	MM.App.current.stopEditing();
+	var oldText = MM.App.current.getText();
+	if (!oldText) { /* newly added node */
+		var action = new MM.Action.RemoveItem(MM.App.current);
+		MM.App.action(action);
+	}
+}
+
+MM.Command.Bold = Object.create(MM.Command, {
+	editMode: {value: true},
+	label: {value: "Bold"},
+	keys: {value: [{charCode: "b".charCodeAt(0), ctrlKey:true}]}
+});
+MM.Command.Bold.execute = function() {
+	document.execCommand("bold", null, null);
+}
+
+MM.Command.Underline = Object.create(MM.Command, {
+	editMode: {value: true},
+	label: {value: "Underline"},
+	keys: {value: [{charCode: "u".charCodeAt(0), ctrlKey:true}]}
+});
+MM.Command.Underline.execute = function() {
+	document.execCommand("underline", null, null);
+}
+
+MM.Command.Italic = Object.create(MM.Command, {
+	editMode: {value: true},
+	label: {value: "Italic"},
+	keys: {value: [{charCode: "i".charCodeAt(0), ctrlKey:true}]}
+});
+MM.Command.Italic.execute = function() {
+	document.execCommand("italic", null, null);
+}
+
+MM.Command.Strikethrough = Object.create(MM.Command, {
+	editMode: {value: true},
+	label: {value: "Strike-through"},
+	keys: {value: [{charCode: "s".charCodeAt(0), ctrlKey:true}]}
+});
+MM.Command.Strikethrough.execute = function() {
+	document.execCommand("strikeThrough", null, null);
+}
+
+MM.Command.Value = Object.create(MM.Command, {
+	label: {value: "Set value"},
+	keys: {value: [{charCode: "v".charCodeAt(0), ctrlKey:false}]}
+});
+MM.Command.Value.execute = function() {
+	var item = MM.App.current;
+	var oldValue = item.getValue();
+	var newValue = prompt("Set item value", oldValue);
+	if (newValue == null) { return; }
+
+	if (!newValue.length) { newValue = null; }
+
+	var numValue = parseFloat(newValue);
+	var action = new MM.Action.SetValue(item, isNaN(numValue) ? newValue : numValue);
+	MM.App.action(action);
+}
+
+MM.Command.Yes = Object.create(MM.Command, {
+	label: {value: "Yes"},
+	keys: {value: [{charCode: "y".charCodeAt(0), ctrlKey:false}]}
+});
+MM.Command.Yes.execute = function() {
+	var item = MM.App.current;
+	var status = (item.getStatus() == "yes" ? null : "yes");
+	var action = new MM.Action.SetStatus(item, status);
+	MM.App.action(action);
+}
+
+MM.Command.No = Object.create(MM.Command, {
+	label: {value: "No"},
+	keys: {value: [{charCode: "n".charCodeAt(0), ctrlKey:false}]}
+});
+MM.Command.No.execute = function() {
+	var item = MM.App.current;
+	var status = (item.getStatus() == "no" ? null : "no");
+	var action = new MM.Action.SetStatus(item, status);
+	MM.App.action(action);
+}
+
+MM.Command.Maybe = Object.create(MM.Command, {
+	label: {value: "Maybe"},
+	keys: {value: [{charCode: "m".charCodeAt(0), ctrlKey:false}]}
+});
+MM.Command.Maybe.execute = function() {
+	var item = MM.App.current;
+	var status = (item.getStatus() == "maybe" ? null : "maybe");
+	var action = new MM.Action.SetStatus(item, status);
+	MM.App.action(action);
+}
+MM.Command.Select = Object.create(MM.Command, {
+	label: {value: "Move selection"},
+	keys: {value: [
+		{keyCode: 38},
+		{keyCode: 37},
+		{keyCode: 40},
+		{keyCode: 39}
+	]} 
+});
+MM.Command.Select.execute = function(e) {
+	var dirs = {
+		37: "left",
+		38: "top",
+		39: "right",
+		40: "bottom"
+	}
+	var dir = dirs[e.keyCode];
+
+	var layout = MM.App.current.getLayout();
+	var item = /*MM.App.map*/layout.pick(MM.App.current, dir);
+	MM.App.select(item);
+}
+
+MM.Command.SelectRoot = Object.create(MM.Command, {
+	label: {value: "Select root"},
+	keys: {value: [{keyCode: 36}]}
+});
+MM.Command.SelectRoot.execute = function() {
+	var item = MM.App.current;
+	while (!item.isRoot()) { item = item.getParent(); }
+	MM.App.select(item);
+}
+
+MM.Command.SelectParent = Object.create(MM.Command, {
+	label: {value: "Select parent"},
+	keys: {value: [{keyCode: 8}]}
+});
+MM.Command.SelectParent.execute = function() {
+	if (MM.App.current.isRoot()) { return; }
+	MM.App.select(MM.App.current.getParent());
+}
+
+MM.Layout = Object.create(MM.Repo, {
+	ALL: {value: []},
+	SPACING_RANK: {value: 4},
+	SPACING_CHILD: {value: 4},
+});
+
+MM.Layout.getAll = function() {
+	return this.ALL;
+}
+
+/**
+ * Re-draw an item and its children
+ */
+MM.Layout.update = function(item) {
+	return this;
+}
+
+/**
+ * @param {MM.Item} child Child node (its parent uses this layout)
+ */
+MM.Layout.getChildDirection = function(child) {
+	return "";
+}
+
+MM.Layout.pick = function(item, dir) {
+	var opposite = {
+		left: "right",
+		right: "left",
+		top: "bottom",
+		bottom: "top"
+	}
+	
+	/* direction for a child */
+	var children = item.getChildren();
+	for (var i=0;i<children.length;i++) {
+		var child = children[i];
+		if (this.getChildDirection(child) == dir) { return child; }
+	}
+
+	if (item.isRoot()) { return item; }
+	
+	var parentLayout = item.getParent().getLayout();
+	var thisChildDirection = parentLayout.getChildDirection(item);
+	if (thisChildDirection == dir) {
+		return item;
+	} else if (thisChildDirection == opposite[dir]) {
+		return item.getParent();
+	} else {
+		return parentLayout.pickSibling(item, (dir == "left" || dir == "top" ? -1 : +1));
+	}
+}
+
+MM.Layout.pickSibling = function(item, dir) {
+	if (item.isRoot()) { return item; }
+
+	var children = item.getParent().getChildren();
+	var index = children.indexOf(item);
+	index += dir;
+	index = (index+children.length) % children.length;
+	return children[index];
+}
+
+/**
+ * Adjust canvas size and position
+ */
+MM.Layout._anchorCanvas = function(item) {
+	var dom = item.getDOM();
+	dom.canvas.width = dom.node.offsetWidth;
+	dom.canvas.height = dom.node.offsetHeight;
+}
+
+MM.Layout._getChildAnchor = function(item, side) {
+	var dom = item.getDOM();
+	if (side == "left" || side == "right") {
+		var pos = dom.node.offsetLeft + dom.content.offsetLeft;
+		if (side == "left") { pos += dom.content.offsetWidth; }
+	} else {
+		var pos = dom.node.offsetTop + dom.content.offsetTop;
+		if (side == "top") { pos += dom.content.offsetHeight; }
+	}
+	return pos;
+}
+
+MM.Layout._computeChildrenBBox = function(children, childIndex) {
+	var bbox = [0, 0];
+	var rankIndex = (childIndex+1) % 2;
+
+	children.forEach(function(child, index) {
+		var node = child.getDOM().node;
+		var childSize = [node.offsetWidth, node.offsetHeight];
+
+		bbox[rankIndex] = Math.max(bbox[rankIndex], childSize[rankIndex]); /* adjust cardinal size */
+		bbox[childIndex] += childSize[childIndex]; /* adjust orthogonal size */
+	}, this);
+
+	if (children.length > 1) { bbox[childIndex] += this.SPACING_CHILD * (children.length-1); } /* child separation */
+
+	return bbox;
+}
+
+MM.Layout._alignItem = function(item, side) {
+	var dom = item.getDOM();
+
+	switch (side) {
+		case "left":
+			dom.content.appendChild(dom.text);
+			dom.content.appendChild(dom.value);
+			dom.content.appendChild(dom.status);
+		break;
+		case "right":
+			dom.content.appendChild(dom.status);
+			dom.content.appendChild(dom.value);
+			dom.content.appendChild(dom.text);
+		break;
+	}
+}
+MM.Layout.Graph = Object.create(MM.Layout, {
+	SPACING_RANK: {value: 16},
+	childDirection: {value: ""}
+});
+
+MM.Layout.Graph.getChildDirection = function(child) {
+	return this.childDirection;
+}
+
+MM.Layout.Graph.create = function(direction, id, label) {
+	var layout = Object.create(this, {
+		childDirection: {value:direction},
+		id: {value:id},
+		label: {value:label}
+	});
+	MM.Layout.ALL.push(layout);
+	return layout;
+}
+
+MM.Layout.Graph.update = function(item) {
+	var side = this.childDirection;
+	if (!item.isRoot()) {
+		side = item.getParent().getLayout().getChildDirection(item);
+	}
+	this._alignItem(item, side);
+
+	this._layoutItem(item, this.childDirection);
+	if (this.childDirection == "left" || this.childDirection == "right") {
+		this._drawLinesHorizontal(item, this.childDirection);
+	} else {
+		this._drawLinesVertical(item, this.childDirection);
+	}
+	return this;
+}
+
+
+/**
+ * Generic graph child layout routine. Updates item's orthogonal size according to the sum of its children.
+ */
+MM.Layout.Graph._layoutItem = function(item, rankDirection) {
+	var sizeProps = ["width", "height"];
+	var posProps = ["left", "top"];
+	var rankIndex = (rankDirection == "left" || rankDirection == "right" ? 0 : 1);
+	var childIndex = (rankIndex+1) % 2;
+
+	var rankPosProp = posProps[rankIndex];
+	var childPosProp = posProps[childIndex];
+	var rankSizeProp = sizeProps[rankIndex];
+	var childSizeProp = sizeProps[childIndex];
+
+	var dom = item.getDOM();
+
+	/* content size */
+	var contentSize = [dom.content.offsetWidth, dom.content.offsetHeight];
+
+	/* children size */
+	var bbox = this._computeChildrenBBox(item.getChildren(), childIndex);
+
+	/* node size */
+	var rankSize = contentSize[rankIndex];
+	if (bbox[rankIndex]) { rankSize += bbox[rankIndex] + this.SPACING_RANK; }
+	var childSize = Math.max(bbox[childIndex], contentSize[childIndex]);
+	dom.node.style[rankSizeProp] = rankSize + "px";
+	dom.node.style[childSizeProp] = childSize + "px";
+
+	var offset = [0, 0];
+	if (rankDirection == "right") { offset[0] = contentSize[0] + this.SPACING_RANK; }
+	if (rankDirection == "bottom") { offset[1] = contentSize[1] + this.SPACING_RANK; }
+	offset[childIndex] = Math.round((childSize - bbox[childIndex])/2);
+	this._layoutChildren(item.getChildren(), rankDirection, offset, bbox);
+
+	/* label position */
+	var labelPos = 0;
+	if (rankDirection == "left") { labelPos = rankSize - contentSize[0]; }
+	if (rankDirection == "top") { labelPos = rankSize - contentSize[1]; }
+	dom.content.style[childPosProp] = Math.round((childSize - contentSize[childIndex])/2) + "px";
+	dom.content.style[rankPosProp] = labelPos + "px";
+
+	return this;
+}
+
+MM.Layout.Graph._layoutChildren = function(children, rankDirection, offset, bbox) {
+	var posProps = ["left", "top"];
+
+	var rankIndex = (rankDirection == "left" || rankDirection == "right" ? 0 : 1);
+	var childIndex = (rankIndex+1) % 2;
+	var rankPosProp = posProps[rankIndex];
+	var childPosProp = posProps[childIndex];
+
+	children.forEach(function(child, index) {
+		var node = child.getDOM().node;
+		var childSize = [node.offsetWidth, node.offsetHeight];
+
+		if (rankDirection == "left") { offset[0] = bbox[0] - childSize[0]; }
+		if (rankDirection == "top") { offset[1] = bbox[1] - childSize[1]; }
+
+		node.style[childPosProp] = offset[childIndex] + "px";
+		node.style[rankPosProp] = offset[rankIndex] + "px";
+
+		offset[childIndex] += childSize[childIndex] + this.SPACING_CHILD; /* offset for next child */
+	}, this);
+
+	return bbox;
+}
+
+MM.Layout.Graph._drawLinesHorizontal = function(item, side) {
+	this._anchorCanvas(item);
+	this._drawHorizontalConnectors(item, side, item.getChildren());
+}
+
+MM.Layout.Graph._drawLinesVertical = function(item, side) {
+	this._anchorCanvas(item);
+	this._drawVerticalConnectors(item, side, item.getChildren());
+}
+
+MM.Layout.Graph._drawHorizontalConnectors = function(item, side, children) {
+	if (children.length == 0) { return; }
+
+	var dom = item.getDOM();
+	var canvas = dom.canvas;
+	var ctx = canvas.getContext("2d");
+	ctx.strokeStyle = item.getColor();
+	var R = this.SPACING_RANK/2;
+
+	/* first part */
+	var y1 = item.getShape().getVerticalAnchor(item);
+	if (side == "left") {
+		var x1 = dom.content.offsetLeft + 0.5;
+	} else {
+		var x1 = dom.content.offsetWidth + dom.content.offsetLeft + 0.5;
+	}
+
+	if (children.length == 1) {
+		var child = children[0];
+		var y2 = child.getShape().getVerticalAnchor(child) + child.getDOM().node.offsetTop;
+		var x2 = this._getChildAnchor(child, side);
+		ctx.beginPath();
+		ctx.moveTo(x1, y1);
+		ctx.bezierCurveTo((x1+x2)/2, y1, (x1+x2)/2, y2, x2, y2);
+		ctx.stroke();
+		return;
+	}
+
+	if (side == "left") {
+		var x2 = x1 - R;
+	} else {
+		var x2 = x1 + R;
+	}
+
+	ctx.beginPath();
+	ctx.moveTo(x1, y1);
+	ctx.lineTo(x2, y1);
+	ctx.stroke();
+
+	/* rounded connectors */
+	var c1 = children[0];
+	var c2 = children[children.length-1];
+	var offset = dom.content.offsetWidth + R;
+	var x = x2;
+
+	var y1 = c1.getShape().getVerticalAnchor(c1) + c1.getDOM().node.offsetTop;
+	var y2 = c2.getShape().getVerticalAnchor(c2) + c2.getDOM().node.offsetTop;
+	var x1 = this._getChildAnchor(c1, side);
+	var x2 = this._getChildAnchor(c2, side);
+
+	ctx.beginPath();
+	ctx.moveTo(x1, y1);
+	ctx.arcTo(x, y1, x, y1+R, R);
+	ctx.lineTo(x, y2-R);
+	ctx.arcTo(x, y2, x2, y2, R);
+	ctx.lineTo(x2, y2);
+
+	for (var i=1; i<children.length-1; i++) {
+		var c = children[i];
+		var y = c.getShape().getVerticalAnchor(c) + c.getDOM().node.offsetTop;
+		ctx.moveTo(x, y);
+		ctx.lineTo(this._getChildAnchor(c, side), y);
+	}
+	ctx.stroke();
+}
+
+MM.Layout.Graph._drawVerticalConnectors = function(item, side, children) {
+	if (children.length == 0) { return; }
+
+	var dom = item.getDOM();
+	var canvas = dom.canvas;
+	var ctx = canvas.getContext("2d");
+	ctx.strokeStyle = item.getColor();
+
+	/* first part */
+	var R = this.SPACING_RANK/2;
+	
+	var x = item.getShape().getHorizontalAnchor(item);
+	var height = (children.length == 1 ? 2*R : R);
+
+	if (side == "top") {
+		var y1 = canvas.height - dom.content.offsetHeight;
+		var y2 = y1 - height;
+	} else {
+		var y1 = item.getShape().getVerticalAnchor(item);
+		var y2 = dom.content.offsetHeight + height;
+	}
+
+	ctx.beginPath();
+	ctx.moveTo(x, y1);
+	ctx.lineTo(x, y2);
+	ctx.stroke();
+
+	if (children.length == 1) { return; }
+
+	/* rounded connectors */
+	var c1 = children[0];
+	var c2 = children[children.length-1];
+	var offset = dom.content.offsetHeight + height;
+	var y = Math.round(side == "top" ? canvas.height - offset : offset) + 0.5;
+
+	var x1 = c1.getShape().getHorizontalAnchor(c1) + c1.getDOM().node.offsetLeft;
+	var x2 = c2.getShape().getHorizontalAnchor(c2) + c2.getDOM().node.offsetLeft;
+	var y1 = this._getChildAnchor(c1, side);
+	var y2 = this._getChildAnchor(c2, side);
+
+	ctx.beginPath();
+	ctx.moveTo(x1, y1);
+	ctx.arcTo(x1, y, x1+R, y, R);
+	ctx.lineTo(x2-R, y);
+	ctx.arcTo(x2, y, x2, y2, R);
+
+	for (var i=1; i<children.length-1; i++) {
+		var c = children[i];
+		var x = c.getShape().getHorizontalAnchor(c) + c.getDOM().node.offsetLeft;
+		ctx.moveTo(x, y);
+		ctx.lineTo(x, this._getChildAnchor(c, side));
+	}
+	ctx.stroke();
+}
+
+
+MM.Layout.Graph.Down = MM.Layout.Graph.create("bottom", "graph-bottom", "Bottom");
+MM.Layout.Graph.Up = MM.Layout.Graph.create("top", "graph-top", "Top");
+MM.Layout.Graph.Left = MM.Layout.Graph.create("left", "graph-left", "Left");
+MM.Layout.Graph.Right = MM.Layout.Graph.create("right", "graph-right", "Right");
+MM.Layout.Tree = Object.create(MM.Layout, {
+	SPACING_RANK: {value: 32},
+	childDirection: {value: ""}
+});
+
+MM.Layout.Tree.getChildDirection = function(child) {
+	return this.childDirection;
+}
+
+MM.Layout.Tree.create = function(direction, id, label) {
+	var layout = Object.create(this, {
+		childDirection: {value:direction},
+		id: {value:id},
+		label: {value:label}
+	});
+	MM.Layout.ALL.push(layout);
+	return layout;
+}
+
+MM.Layout.Tree.update = function(item) {
+	var side = this.childDirection;
+	if (!item.isRoot()) {
+		side = item.getParent().getLayout().getChildDirection(item);
+	}
+	this._alignItem(item, side);
+
+	this._layoutItem(item, this.childDirection);
+	this._anchorCanvas(item);
+	this._drawLines(item, this.childDirection);
+	return this;
+}
+
+/**
+ * Generic graph child layout routine. Updates item's orthogonal size according to the sum of its children.
+ */
+MM.Layout.Tree._layoutItem = function(item, rankDirection) {
+	var dom = item.getDOM();
+
+	/* content size */
+	var contentSize = [dom.content.offsetWidth, dom.content.offsetHeight];
+
+	/* children size */
+	var bbox = this._computeChildrenBBox(item.getChildren(), 1);
+
+	/* node size */
+	var rankSize = contentSize[0];
+	var childSize = bbox[1] + contentSize[1];
+	if (bbox[0]) { 
+		rankSize = Math.max(rankSize, bbox[0] + this.SPACING_RANK); 
+		childSize += this.SPACING_CHILD;
+	}
+	dom.node.style.width = rankSize + "px";
+	dom.node.style.height = childSize + "px";
+
+	var offset = [this.SPACING_RANK, contentSize[1]+this.SPACING_CHILD];
+	if (rankDirection == "left") { offset[0] = rankSize - bbox[0] - this.SPACING_RANK; }
+	this._layoutChildren(item.getChildren(), rankDirection, offset, bbox);
+
+	/* label position */
+	var labelPos = 0;
+	if (rankDirection == "left") { labelPos = rankSize - contentSize[0]; }
+	dom.content.style.left = labelPos + "px";
+	dom.content.style.top = 0;
+
+	return this;
+}
+
+MM.Layout.Tree._layoutChildren = function(children, rankDirection, offset, bbox) {
+	children.forEach(function(child, index) {
+		var node = child.getDOM().node;
+		var childSize = [node.offsetWidth, node.offsetHeight];
+		var left = offset[0];
+		if (rankDirection == "left") { left += (bbox[0] - childSize[0]); }
+
+		node.style.left = left + "px";
+		node.style.top = offset[1] + "px";
+
+		offset[1] += childSize[1] + this.SPACING_CHILD; /* offset for next child */
+	}, this);
+
+	return bbox;
+}
+
+MM.Layout.Tree._drawLines = function(item, side) {
+	var children = item.getChildren();
+	if (children.length == 0) { return; }
+
+	var dom = item.getDOM();
+	var canvas = dom.canvas;
+	var ctx = canvas.getContext("2d");
+	ctx.strokeStyle = item.getColor();
+
+	var R = this.SPACING_RANK/4;
+	var x = (side == "left" ? canvas.width - 2*R : 2*R) + 0.5;
+	var y1 = item.getShape().getVerticalAnchor(item);
+
+	var last = children[children.length-1];
+	var y2 = last.getShape().getVerticalAnchor(last) + last.getDOM().node.offsetTop;
+
+	ctx.beginPath();
+	ctx.moveTo(x, y1);
+	ctx.lineTo(x, y2 - R);
+
+	/* rounded connectors */
+	for (var i=0; i<children.length; i++) {
+		var c = children[i];
+		var y = c.getShape().getVerticalAnchor(c) + c.getDOM().node.offsetTop;
+		var anchor = this._getChildAnchor(c, side);
+
+		ctx.moveTo(x, y - R);
+		ctx.arcTo(x, y, anchor, y, R);
+		ctx.lineTo(anchor, y);
+	}
+	ctx.stroke();
+}
+
+MM.Layout.Tree.Left = MM.Layout.Tree.create("left", "tree-left", "Left");
+MM.Layout.Tree.Right = MM.Layout.Tree.create("right", "tree-right", "Right");
+MM.Layout.Map = Object.create(MM.Layout.Graph, {
+	id: {value:"map"},
+	label: {value:"Map"},
+	LINE_THICKNESS: {value:8}
+});
+MM.Layout.ALL.push(MM.Layout.Map);
+
+MM.Layout.Map.update = function(item) {
+	if (item.isRoot()) {
+		this._layoutRoot(item);
+	} else {
+		var side = this.getChildDirection(item);
+		var name = side.charAt(0).toUpperCase() + side.substring(1);
+		MM.Layout.Graph[name].update(item);
+	}
+}
+
+/**
+ * @param {MM.Item} child Child node
+ */
+MM.Layout.Map.getChildDirection = function(child) {
+	while (!child.getParent().isRoot()) {
+		child = child.getParent();
+	}
+	/* child is now the sub-root node */
+
+	var side = child.getSide();
+	if (side) { return side; }
+
+	var counts = {left:0, right:0};
+	var children = child.getParent().getChildren();
+	for (var i=0;i<children.length;i++) {
+		var side = children[i].getSide();
+		if (!side) {
+			side = (counts.right > counts.left ? "left" : "right");
+			children[i].setSide(side);
+		}
+		counts[side]++;
+	}
+
+	return child.getSide();
+}
+
+MM.Layout.Map.pickSibling = function(item, dir) {
+	if (item.isRoot()) { return item; }
+
+	var parent = item.getParent();
+	var children = parent.getChildren();
+	if (parent.isRoot()) {
+		var side = this.getChildDirection(item);
+		children = children.filter(function(child) {
+			return (this.getChildDirection(child) == side);
+		}, this);
+	}
+	
+	var index = children.indexOf(item);
+	index += dir;
+	index = (index+children.length) % children.length;
+	return children[index];
+}
+
+MM.Layout.Map._layoutRoot = function(item) {
+	this._alignItem(item, "right");
+
+	var dom = item.getDOM();
+
+	var children = item.getChildren();
+	var childrenLeft = [];
+	var childrenRight = [];
+
+	children.forEach(function(child, index) {
+		var node = child.getDOM().node;
+		var side = this.getChildDirection(child);
+		
+		if (side == "left") {
+			childrenLeft.push(child);
+		} else {
+			childrenRight.push(child);
+		}
+	}, this);
+
+	var bboxLeft = this._computeChildrenBBox(childrenLeft, 1);
+	var bboxRight = this._computeChildrenBBox(childrenRight, 1);
+	var height = Math.max(bboxLeft[1], bboxRight[1], dom.content.offsetHeight);
+
+	var left = 0;
+	this._layoutChildren(childrenLeft, "left", [left, Math.round((height-bboxLeft[1])/2)], bboxLeft);
+	left += bboxLeft[0];
+
+	if (childrenLeft.length) { left += this.SPACING_RANK; }
+	dom.content.style.left = left + "px";
+	left += dom.content.offsetWidth;
+
+	if (childrenRight.length) { left += this.SPACING_RANK; }
+	this._layoutChildren(childrenRight, "right", [left, Math.round((height-bboxRight[1])/2)], bboxRight);
+	left += bboxRight[0];
+
+	dom.content.style.top = Math.round((height - dom.content.offsetHeight)/2) + "px";
+	dom.node.style.height = height + "px";
+	dom.node.style.width = left + "px";
+
+	this._anchorCanvas(item);
+	this._drawRootConnectors(item, "left", childrenLeft);
+	this._drawRootConnectors(item, "right", childrenRight);
+}
+
+MM.Layout.Map._drawRootConnectors = function(item, side, children) {
+	if (children.length == 0) { return; }
+
+	var dom = item.getDOM();
+	var canvas = dom.canvas;
+	var ctx = canvas.getContext("2d");
+	var R = this.SPACING_RANK/2;
+
+	var x1 = dom.content.offsetLeft + dom.content.offsetWidth/2;
+	var y1 = item.getShape().getVerticalAnchor(item);
+	var half = this.LINE_THICKNESS/2;
+
+	for (var i=0;i<children.length;i++) {
+		var child = children[i];
+
+		var x2 = this._getChildAnchor(child, side);
+		var y2 = child.getShape().getVerticalAnchor(child) + child.getDOM().node.offsetTop;
+		var angle = Math.atan2(y2-y1, x2-x1) + Math.PI/2;
+		var dx = Math.cos(angle) * half;
+		var dy = Math.sin(angle) * half;
+
+		ctx.fillStyle = ctx.strokeStyle = child.getColor();
+		ctx.beginPath();
+		ctx.moveTo(x1-dx, y1-dy);
+		ctx.quadraticCurveTo((x2+x1)/2, y2, x2, y2);
+		ctx.quadraticCurveTo((x2+x1)/2, y2, x1+dx, y1+dy);
+		ctx.fill();
+		ctx.stroke();
+	}
+
+}
+MM.Shape = Object.create(MM.Repo, {
+	VERTICAL_OFFSET: {value: 0.5},
+});
+
+MM.Shape.set = function(item) {
+	item.getDOM().node.classList.add("shape-"+this.id);
+	return this;
+}
+
+MM.Shape.unset = function(item) {
+	item.getDOM().node.classList.remove("shape-"+this.id);
+	return this;
+}
+
+MM.Shape.update = function(item) {
+	item.getDOM().content.style.borderColor = item.getColor();
+	return this;
+}
+
+MM.Shape.getHorizontalAnchor = function(item) {
+	var node = item.getDOM().content;
+	return Math.round(node.offsetLeft + node.offsetWidth/2) + 0.5;
+}
+
+MM.Shape.getVerticalAnchor = function(item) {
+	var node = item.getDOM().content;
+	return node.offsetTop + Math.round(node.offsetHeight * this.VERTICAL_OFFSET) + 0.5;
+}
+MM.Shape.Underline = Object.create(MM.Shape, {
+	id: {value: "underline"},
+	label: {value: "Underline"},
+	VERTICAL_OFFSET: {value: -3}
+});
+
+MM.Shape.Underline.update = function(item) {
+	var dom = item.getDOM();
+
+	var ctx = dom.canvas.getContext("2d");
+	ctx.strokeStyle = item.getColor();
+
+	var left = dom.content.offsetLeft;
+	var right = left + dom.content.offsetWidth;
+
+	var top = this.getVerticalAnchor(item);
+
+	ctx.beginPath();
+	ctx.moveTo(left, top);
+	ctx.lineTo(right, top);
+	ctx.stroke();
+}
+
+MM.Shape.Underline.getVerticalAnchor = function(item) {
+	var node = item.getDOM().content;
+	return node.offsetTop + node.offsetHeight + this.VERTICAL_OFFSET + 0.5;
+}
+MM.Shape.Box = Object.create(MM.Shape, {
+	id: {value: "box"},
+	label: {value: "Box"}
+});
+MM.Shape.Ellipse = Object.create(MM.Shape, {
+	id: {value: "ellipse"},
+	label: {value: "Ellipse"}
+});
+MM.Format = Object.create(MM.Repo, {
+	extension: {value:""}
+});
+
+MM.Format.getByName = function(name) {
+	var index = name.lastIndexOf(".");
+	var result = MM.Format.JSON;
+	if (index > -1) { 
+		var extension = name.substring(index+1).toLowerCase(); 
+		var format = this.getByProperty("extension", extension);
+		if (format) { result = format; }
+	}
+	return result;
+}
+
+MM.Format.to = function(data) {}
+MM.Format.from = function(data) {}
+MM.Format.JSON = Object.create(MM.Format, {
+	id: {value: "json"},
+	label: {value: "Native (JSON)"},
+	extension: {value: "mymind"}
+});
+
+MM.Format.JSON.to = function(data) { 
+	return JSON.stringify(data, null, 2) + "\n";
+}
+
+MM.Format.JSON.from = function(data) {
+	return JSON.parse(data);
+}
+MM.Format.FreeMind = Object.create(MM.Format, {
+	id: {value: "freemind"},
+	label: {value: "FreeMind"},
+	extension: {value: "mm"}
+});
+
+MM.Format.FreeMind.to = function(data) { 
+	var doc = document.implementation.createDocument(null, null);
+	var map = doc.createElement("map");
+
+	map.setAttribute("version", "0.9.0");
+	map.appendChild(this._serializeItem(doc, data.root));
+
+	doc.appendChild(map);
+	var serializer = new XMLSerializer();
+	return serializer.serializeToString(doc);
+}
+
+MM.Format.FreeMind.from = function(data) {
+	var parser = new DOMParser();
+	var doc = parser.parseFromString(data, "application/xml");
+	if (doc.documentElement.nodeName.toLowerCase() == "parsererror") { throw new Error(doc.documentElement.textContent); }
+
+	var root = doc.documentElement.getElementsByTagName("node")[0];
+	if (!root) { throw new Error("No root node found"); }
+
+	var json = {
+		root: this._parseNode(root, {shape:"underline"})
+	};
+	json.root.layout = "map";
+	json.root.shape = "ellipse";
+
+	return json;
+}
+
+MM.Format.FreeMind._serializeItem = function(doc, json) {
+	var elm = this._serializeAttributes(doc, json);
+
+	json.children.forEach(function(child) {
+		elm.appendChild(this._serializeItem(doc, child));
+	}, this);
+
+	return elm;
+}
+
+MM.Format.FreeMind._serializeAttributes = function(doc, json) {
+	var elm = doc.createElement("node");
+	elm.setAttribute("TEXT", json.text);
+	elm.setAttribute("ID", json.id);
+
+	if (json.side) { elm.setAttribute("POSITION", json.side); }
+	if (json.shape == "box") { elm.setAttribute("STYLE", "bubble"); }
+
+	return elm;
+}
+
+MM.Format.FreeMind._parseNode = function(node, parent) {
+	var json = this._parseAttributes(node, parent);
+
+	for (var i=0;i<node.childNodes.length;i++) {
+		var child = node.childNodes[i];
+		if (child.nodeName.toLowerCase() == "node") {
+			json.children.push(this._parseNode(child, json));
+		}
+	}
+
+	return json;
+}
+
+MM.Format.FreeMind._parseAttributes = function(node, parent) {
+	var json = {
+		children: [],
+		text: node.getAttribute("TEXT") || "",
+		id: node.getAttribute("ID")
+	};
+
+	var position = node.getAttribute("POSITION");
+	if (position) { json.side = position; }
+
+	var style = node.getAttribute("STYLE");
+	if (style == "bubble") {
+		json.shape = "box";
+	} else {
+		json.shape = parent.shape;
+	}
+
+	return json;
+}
+MM.Format.MMA = Object.create(MM.Format.FreeMind, {
+	id: {value: "mma"},
+	label: {value: "Mind Map Architect"},
+	extension: {value: "mma"}
+});
+
+MM.Format.MMA._parseAttributes = function(node, parent) {
+	var json = {
+		children: [],
+		text: node.getAttribute("title") || "",
+		shape: "box"
+	};
+
+	var direction = node.getAttribute("direction");
+	if (direction == "0") { json.side = "left"; }
+	if (direction == "1") { json.side = "right"; }
+
+	var color = node.getAttribute("color");
+	if (color) {
+		var re = color.match(/^#(....)(....)(....)$/);
+		if (re) {
+			var r = parseInt(re[1], 16) >> 8;
+			var g = parseInt(re[2], 16) >> 8;
+			var b = parseInt(re[3], 16) >> 8;
+			r = Math.round(r/17).toString(16);
+			g = Math.round(g/17).toString(16);
+			b = Math.round(b/17).toString(16);
+		}
+		json.color = "#" + [r,g,b].join("");
+	}
+
+
+	return json;
+}
+
+MM.Format.MMA._serializeAttributes = function(doc, json) {
+	var elm = doc.createElement("node");
+	elm.setAttribute("title", json.text);
+
+	if (json.side) { elm.setAttribute("direction", json.side == "left" ? "0" : "1"); }
+	if (json.color) {
+		var parts = json.color.match(/^#(.)(.)(.)$/);
+		var r = new Array(5).join(parts[1]);
+		var g = new Array(5).join(parts[2]);
+		var b = new Array(5).join(parts[3]);
+		elm.setAttribute("color", "#" + [r,g,b].join(""));
+	}
+
+	return elm;
+}
+MM.Format.Mup = Object.create(MM.Format, {
+	id: {value: "mup"},
+	label: {value: "MindMup"},
+	extension: {value: "mup"}
+});
+
+MM.Format.Mup.to = function(data) {
+	var root = this._MMtoMup(data.root);
+	return JSON.stringify(root, null, 2);
+}
+
+MM.Format.Mup.from = function(data) {
+	var source = JSON.parse(data);
+	var root = this._MupToMM(source);
+	root.layout = "map";
+
+	var map = {
+		root: root
+	}
+
+	return map;
+}
+
+MM.Format.Mup._MupToMM = function(item) {
+	var json = {
+		text: item.title,
+		id: item.id,
+		shape: "box"
+	}
+
+	if (item.attr && item.attr.style && item.attr.style.background) {
+		json.color = item.attr.style.background;
+	}
+
+	if (item.ideas) {
+		var data = [];
+		for (var key in item.ideas) {
+			var child = this._MupToMM(item.ideas[key]);
+			var num = parseFloat(key);
+			child.side = (num < 0 ? "left" : "right");
+			data.push({
+				child: child,
+				num: num
+			});
+		}
+
+		data.sort(function(a, b) {
+			return a.num-b.num;
+		});
+
+		json.children = data.map(function(item) { return item.child; });
+	}
+
+	return json;
+}
+
+MM.Format.Mup._MMtoMup = function(item, side) {
+	var result = {
+		id: item.id,
+		title: item.text
+	}
+	if (item.color) {
+		result.attr = {style:{background:item.color}};
+	}
+
+	if (item.children) {
+		result.ideas = {};
+
+		for (var i=0;i<item.children.length;i++) {
+			var child = item.children[i];
+			var childSide = side || child.side;
+
+			var key = i+1;
+			if (childSide == "left") { key *= -1; }
+
+			result.ideas[key] = this._MMtoMup(child, childSide);
+		}
+	}
+
+	return result;
+}
+MM.Backend = Object.create(MM.Repo);
+
+/**
+ * Backends are allowed to have some internal state. 
+ * This method notifies them that "their" map is no longer used 
+ * (was either replaced by a new one or saved using other backend).
+ */ 
+MM.Backend.reset = function() {
+}
+
+MM.Backend.save = function(data, name) {
+}
+
+MM.Backend.load = function(name) {
+}
+MM.Backend.Local = Object.create(MM.Backend, {
+	label: {value: "Browser storage"},
+	id: {value: "local"},
+	prefix: {value: "mm.map."}
+});
+
+MM.Backend.Local.save = function(data, id, name) {
+	localStorage.setItem(this.prefix + id, data);
+
+	var names = this.list();
+	names[id] = name;
+	localStorage.setItem(this.prefix + "names", JSON.stringify(names));
+}
+
+MM.Backend.Local.load = function(id) {
+	var data = localStorage.getItem(this.prefix + id);
+	if (!data) { throw new Error("There is no such saved map"); }
+	return data;
+}
+
+MM.Backend.Local.remove = function(id) {
+	localStorage.removeItem(this.prefix + id);
+
+	var names = this.list();
+	delete names[id];
+	localStorage.setItem(this.prefix + "names", JSON.stringify(names));
+}
+
+MM.Backend.Local.list = function() {
+	try {
+		var data = localStorage.getItem(this.prefix + "names") || "{}";
+		return JSON.parse(data);
+	} catch (e) {
+		return {};
+	}
+}
+MM.Backend.File = Object.create(MM.Backend, {
+	id: {value: "file"},
+	label: {value: "File"},
+	name: {value:"", writable:true},
+	input: {value:document.createElement("input")}
+});
+
+MM.Backend.File.save = function(data, name) {
+	var link = document.createElement("a");
+	link.download = name;
+	link.href = "data:text/plain;base64," + btoa(unescape(encodeURIComponent(data)));
+	document.body.appendChild(link);
+	link.click();
+	link.parentNode.removeChild(link);
+
+	var promise = new Promise().fulfill();
+	return promise;
+}
+
+MM.Backend.File.load = function() {
+	var promise = new Promise();
+
+	this.input.type = "file";
+
+	this.input.onchange = function(e) {
+		var file = e.target.files[0];
+		if (!file) { return; }
+
+		this.name = file.name;
+
+		var reader = new FileReader();
+		reader.onload = function() { promise.fulfill(reader.result); }
+		reader.onerror = function() { promise.reject(reader.error); }
+		reader.readAsText(file);
+	}.bind(this);
+
+	this.input.click();
+	return promise;
+}
+MM.Backend.Firebase = Object.create(MM.Backend, {
+	label: {value: "Firebase"},
+	id: {value: "firebase"},
+	ref: {value:null, writable:true}
+});
+
+MM.Backend.Firebase.connect = function(server, auth) {
+	this.ref = new Firebase("https://" + server + ".firebaseio.com/");
+	
+	this.ref.child("names").on("value", function(snap) {
+		MM.publish("firebase-list", this, snap.val() || {});
+	});
+
+	if (auth) {
+		return this._login(auth);
+	} else {
+		var promise = new Promise();
+		promise.fulfill();
+		return promise;
+	}
+}
+
+MM.Backend.Firebase.save = function(data, id, name) {
+	var promise = new Promise();
+
+	try {
+		this.ref.child("names/" + id).set(name);
+		this.ref.child("data/" + id).set(data, function(result) {
+			if (result) {
+				promise.reject(result);
+			} else {
+				promise.fulfill();
+			}
+		});
+	} catch (e) {
+		promise.reject(e);
+	}
+	return promise;
+}
+
+MM.Backend.Firebase.load = function(id) {
+	var promise = new Promise();
+	
+	this.ref.child("data/" + id).once("value", function(snap) {
+		var data = snap.val();
+		if (data) {
+			promise.fulfill(data);
+		} else {
+			promise.reject(new Error("There is no such saved map"));
+		}
+	});
+	return promise;
+}
+
+MM.Backend.Firebase.remove = function(id) {
+	var promise = new Promise();
+
+	try {
+		this.ref.child("names/" + id).remove();
+		this.ref.child("data/" + id).remove(function(result) {
+			if (result) {
+				promise.reject(result);
+			} else {
+				promise.fulfill();
+			}
+		});
+	} catch (e) {
+		promise.reject(e);
+	}
+
+	return promise;
+}
+
+MM.Backend.Firebase._login = function(type) {
+	var promise = new Promise();
+
+	var auth = new FirebaseSimpleLogin(this.ref, function(error, user) {
+		if (error) {
+			promise.reject(error);
+		} else if (user) {
+			promise.fulfill(user);
+		}
+	});
+	auth.login(type);
+
+	return promise;
+}
+MM.Backend.GDrive = Object.create(MM.Backend, {
+	id: {value: "gdrive"},
+	label: {value: "Google Drive"},
+	scope: {value: "https://www.googleapis.com/auth/drive https://www.googleapis.com/auth/drive.install"},
+	clientId: {value: "767837575056-h87qmlhmhb3djhaaqta5gv2v3koa9hii.apps.googleusercontent.com"},
+	apiKey: {value: "AIzaSyCzu1qVxlgufneOYpBgDJXN6Z9SNVcHYWM"},
+	fileId: {value: null, writable: true},
+	name: {value: "", writable: true}
+});
+
+MM.Backend.GDrive.reset = function() {
+	this.fileId = null;
+}
+
+MM.Backend.GDrive.save = function(data, name) {
+	return this._connect().then(
+		function() {
+			return this._send(data, name);
+		}.bind(this)
+	);
+}
+
+MM.Backend.GDrive._send = function(data, name) {
+	var promise = new Promise();
+	var path = "/upload/drive/v2/files";
+	var method = "POST";
+	if (this.fileId) {
+		path += "/" + this.fileId;
+		method = "PUT";
+	}
+
+	var request = gapi.client.request({
+		path: path,
+		method: method,
+		headers: {
+			"Content-Type": "application/json"
+		},
+		body: data
+	});
+
+	request.execute(function(response) {
+		if (!response) {
+			promise.reject(new Error("Failed to upload to Google Drive"));
+		} else if (response.error) {
+			promise.reject(response.error);
+		} else {
+			this.fileId = response.id;
+			this._sendMetadata(name).then(
+				promise.fulfill.bind(promise),
+				promise.reject.bind(promise)
+			);
+		}
+	}.bind(this));
+	
+	return promise;
+}
+
+MM.Backend.GDrive._sendMetadata = function(name) {
+	var promise = new Promise();
+
+	var data = {
+		title: name
+	}
+
+	var request = gapi.client.request({
+		path: "/drive/v2/files/" + this.fileId,
+		method: "PUT",
+		headers: {
+			"Content-Type": "application/json"
+		},
+		body: JSON.stringify(data)
+	});
+
+	request.execute(function(response) {
+		if (response) {
+			promise.fulfill();
+		} else {
+			promise.reject(new Error("Failed to upload to Google Drive"));
+		}
+	});
+	
+	return promise;
+}
+
+MM.Backend.GDrive.load = function(id) {
+	return this._connect().then(
+		this._load.bind(this, id)
+	);
+}
+
+MM.Backend.GDrive._load = function(id) {
+	this.fileId = id;
+
+	var promise = new Promise();
+
+	var request = gapi.client.request({
+		path: "/drive/v2/files/" + this.fileId,
+		method: "GET"
+	});
+
+	request.execute(function(response) {
+		if (response && response.downloadUrl) {
+			this.name = response.title;
+			var xhr = new XMLHttpRequest();
+			xhr.open("get", response.downloadUrl, true);
+			xhr.setRequestHeader("Authorization", "Bearer " + gapi.auth.getToken().access_token);
+			Promise.send(xhr).then(
+				function(xhr) { promise.fulfill(xhr.responseText); },
+				function(xhr) { promise.reject(xhr.responseText); }
+			);
+		} else {
+			promise.reject(response && response.error || new Error("Failed to download file"));
+		}
+	}.bind(this));
+
+	return promise;
+}
+
+MM.Backend.GDrive.pick = function() {
+	return this._connect().then(
+		this._pick.bind(this)
+	);
+}
+
+MM.Backend.GDrive._pick = function() {
+	var promise = new Promise();
+
+	var token = gapi.auth.getToken();
+
+	var view = new google.picker.DocsView(google.picker.ViewId.DOCS)
+//		.setMimeTypes("application/json")
+		.setMode(google.picker.DocsViewMode.LIST);
+
+	var picker = new google.picker.PickerBuilder()
+		.enableFeature(google.picker.Feature.NAV_HIDDEN)
+		.addView(view)
+		.setOAuthToken(token.access_token)
+		.setDeveloperKey(this.apiKey)
+		.setCallback(function(data) {
+			switch (data[google.picker.Response.ACTION]) {
+				case google.picker.Action.PICKED:
+			 		var doc = data[google.picker.Response.DOCUMENTS][0];
+			 		promise.fulfill(doc.id);
+				break;
+
+				case google.picker.Action.CANCEL:
+					promise.fulfill(null);
+				break;
+			}
+		})
+		.build();
+	picker.setVisible(true);
+
+	return promise;
+}
+
+MM.Backend.GDrive._connect = function() {
+	if (window.gapi && window.gapi.auth.getToken()) {
+		return new Promise().fulfill();
+	} else {
+		return this._loadGapi().then(this._auth.bind(this));
+	}
+}
+
+MM.Backend.GDrive._loadGapi = function() {
+	var promise = new Promise();
+	if (window.gapi) { return promise.fulfill(); }
+	
+	var script = document.createElement("script");
+	var name = ("cb"+Math.random()).replace(".", "");
+	window[name] = promise.fulfill.bind(promise);
+	script.src = "https://apis.google.com/js/client:picker.js?onload=" + name;
+	document.body.appendChild(script);
+
+	return promise;
+}
+
+MM.Backend.GDrive._auth = function(forceUI) {
+	var promise = new Promise();
+
+	gapi.auth.authorize({
+		"client_id": this.clientId,
+		"scope": this.scope,
+		"immediate": !forceUI
+	}, function(token) {
+		if (token && !token.error) { /* done */
+			promise.fulfill();
+		} else if (!forceUI) { /* try again with ui */
+			this._auth(true).then(
+				promise.fulfill.bind(promise),
+				promise.reject.bind(promise)
+			);
+		} else { /* bad luck */
+			promise.reject(token && token.error || new Error("Failed to authorize with Google"));
+		}
+	}.bind(this));
+
+	return promise;
+}
+MM.UI = function() {
+	this._node = document.querySelector(".ui");
+	this._node.addEventListener("click", this);
+	
+	this._toggle = document.querySelector("#toggle");
+	this._toggle.addEventListener("click", this);
+
+	this._layout = new MM.UI.Layout();
+	this._shape = new MM.UI.Shape();
+	this._color = new MM.UI.Color();
+	this._value = new MM.UI.Value();
+	this._status = new MM.UI.Status();
+		
+	MM.subscribe("item-change", this);
+	MM.subscribe("item-select", this);
+
+	this.toggle();
+}
+
+MM.UI.prototype.handleMessage = function(message, publisher) {
+	switch (message) {
+		case "item-select":
+			this._update();
+		break;
+
+		case "item-change":
+			if (publisher == MM.App.current) { this._update(); }
+		break;
+	}
+}
+
+MM.UI.prototype.handleEvent = function(e) {
+	/* blur to return focus back to app commands */
+	if (e.target.nodeName.toLowerCase() != "select") { e.target.blur(); }
+
+	if (e.target == this._toggle) {
+		this.toggle();
+		return;
+	}
+	
+	var command = e.target.getAttribute("data-command");
+	if (!command) { return; }
+
+	MM.Command[command].execute();
+}
+
+MM.UI.prototype.toggle = function() {
+	this._node.classList.toggle("visible");
+	MM.publish("ui-change", this);
+}
+
+
+MM.UI.prototype.getWidth = function() {
+	return (this._node.classList.contains("visible") ? this._node.offsetWidth : 0);
+}
+
+MM.UI.prototype._update = function() {
+	this._layout.update();
+	this._shape.update();
+	this._value.update();
+	this._status.update();
+}
+MM.UI.Layout = function() {
+	this._select = document.querySelector("#layout");
+
+	this._select.appendChild(MM.Layout.Map.buildOption());
+
+	var label = this._buildGroup("Graph");
+	label.appendChild(MM.Layout.Graph.Right.buildOption());
+	label.appendChild(MM.Layout.Graph.Left.buildOption());
+	label.appendChild(MM.Layout.Graph.Down.buildOption());
+	label.appendChild(MM.Layout.Graph.Up.buildOption());
+
+	var label = this._buildGroup("Tree");
+	label.appendChild(MM.Layout.Tree.Right.buildOption());
+	label.appendChild(MM.Layout.Tree.Left.buildOption());
+	
+	this._select.addEventListener("change", this);
+}
+
+MM.UI.Layout.prototype.update = function() {
+	var value = "";
+	var layout = MM.App.current.getOwnLayout();
+	if (layout) { value = layout.id; }
+	this._select.value = value;
+	
+	this._getOption("").disabled = MM.App.current.isRoot();
+	this._getOption(MM.Layout.Map.id).disabled = !MM.App.current.isRoot();
+}
+
+MM.UI.Layout.prototype.handleEvent = function(e) {
+	var layout = MM.Layout.getById(this._select.value);
+
+	var action = new MM.Action.SetLayout(MM.App.current, layout);
+	MM.App.action(action);
+}
+
+MM.UI.Layout.prototype._getOption = function(value) {
+	return this._select.querySelector("option[value='" + value + "']");
+}
+
+MM.UI.Layout.prototype._buildGroup = function(label) {
+	var node = document.createElement("optgroup");
+	node.label = label;
+	this._select.appendChild(node);
+	return node;
+}
+MM.UI.Shape = function() {
+	this._select = document.querySelector("#shape");
+	
+	this._select.appendChild(MM.Shape.Box.buildOption());
+	this._select.appendChild(MM.Shape.Ellipse.buildOption());
+	this._select.appendChild(MM.Shape.Underline.buildOption());
+	
+	this._select.addEventListener("change", this);
+}
+
+MM.UI.Shape.prototype.update = function() {
+	var value = "";
+	var shape = MM.App.current.getOwnShape();
+	if (shape) { value = shape.id; }
+
+	this._select.value = value;
+}
+
+MM.UI.Shape.prototype.handleEvent = function(e) {
+	var shape = MM.Shape.getById(this._select.value);
+
+	var action = new MM.Action.SetShape(MM.App.current, shape);
+	MM.App.action(action);
+}
+MM.UI.Value = function() {
+	this._select = document.querySelector("#value");
+	this._select.addEventListener("change", this);
+}
+
+MM.UI.Value.prototype.update = function() {
+	var value = MM.App.current.getValue();
+	if (value === null) { value = ""; }
+	if (typeof(value) == "number") { value = "num" }
+
+	this._select.value = value;
+}
+
+MM.UI.Value.prototype.handleEvent = function(e) {
+	var value = this._select.value;
+	if (value == "num") {
+		MM.Command.Value.execute();
+	} else {
+		var action = new MM.Action.SetValue(MM.App.current, value || null);
+		MM.App.action(action);
+	}
+}
+MM.UI.Status = function() {
+	this._select = document.querySelector("#status");
+	this._select.addEventListener("change", this);
+}
+
+MM.UI.Status.prototype.update = function() {
+	this._select.value = MM.App.current.getStatus() || "";
+}
+
+MM.UI.Status.prototype.handleEvent = function(e) {
+	var action = new MM.Action.SetStatus(MM.App.current, this._select.value || null);
+	MM.App.action(action);
+}
+MM.UI.Color = function() {
+	this._node = document.querySelector("#color");
+	this._node.addEventListener("click", this);
+
+	var items = this._node.querySelectorAll("[data-color]");
+	
+	for (var i=0;i<items.length;i++) {
+		var item = items[i];
+		item.style.backgroundColor = item.getAttribute("data-color");
+	}
+}
+
+MM.UI.Color.prototype.handleEvent = function(e) {
+	e.preventDefault();
+	if (!e.target.hasAttribute("data-color")) { return; }
+	
+	var color = e.target.getAttribute("data-color") || null;
+	var action = new MM.Action.SetColor(MM.App.current, color);
+	MM.App.action(action);
+}
+MM.UI.Help = function() {
+	this._node = document.querySelector("#help");
+	this._map = {
+		8: "Backspace",
+		13: "↩",
+		32: "Spacebar",
+		33: "PgUp",
+		34: "PgDown",
+		35: "End",
+		36: "Home",
+		37: "←",
+		38: "↑",
+		39: "→",
+		40: "↓",
+		45: "Insert",
+		46: "Delete",
+		65: "A",
+		68: "D",
+		83: "S",
+		87: "W",
+		112: "F1",
+		113: "F2",
+		114: "F3",
+		115: "F4",
+		116: "F5",
+		117: "F6",
+		118: "F7",
+		119: "F8",
+		120: "F9",
+		121: "F10",
+		"-": "&minus;"
+	};
+	
+	this._build();
+}
+
+MM.UI.Help.prototype.toggle = function() {
+	this._node.classList.toggle("visible");
+}
+
+MM.UI.Help.prototype._build = function() {
+	var t = this._node.querySelector(".navigation");
+	this._buildRow(t, "Pan");
+	this._buildRow(t, "Select");
+	this._buildRow(t, "SelectRoot");
+	this._buildRow(t, "SelectParent");
+	this._buildRow(t, "Center");
+	this._buildRow(t, "ZoomIn", "ZoomOut");
+
+	var t = this._node.querySelector(".manipulation");
+	this._buildRow(t, "InsertSibling");
+	this._buildRow(t, "InsertChild");
+	this._buildRow(t, "Swap");
+	this._buildRow(t, "Delete");
+
+	this._buildRow(t, "Copy");
+	this._buildRow(t, "Cut");
+	this._buildRow(t, "Paste");
+
+	var t = this._node.querySelector(".editing");
+	this._buildRow(t, "Value");
+	this._buildRow(t, "Yes", "No", "Maybe");
+	this._buildRow(t, "Edit");
+	this._buildRow(t, "Newline");
+	this._buildRow(t, "Bold");
+	this._buildRow(t, "Italic");
+	this._buildRow(t, "Underline");
+	this._buildRow(t, "Strikethrough");
+
+	var t = this._node.querySelector(".other");
+	this._buildRow(t, "Undo", "Redo");
+	this._buildRow(t, "Save");
+	this._buildRow(t, "SaveAs");
+	this._buildRow(t, "Load");
+	this._buildRow(t, "Help");
+	this._buildRow(t, "UI");
+}
+
+MM.UI.Help.prototype._buildRow = function(table, commandName) {
+	var row = table.insertRow(-1);
+
+	var labels = [];
+	var keys = [];
+
+	for (var i=1;i<arguments.length;i++) {
+		var command = MM.Command[arguments[i]];
+		labels.push(command.label);
+		keys = keys.concat(command.keys.map(this._formatKey, this));
+	}
+
+	row.insertCell(-1).innerHTML = labels.join("/");
+	row.insertCell(-1).innerHTML = keys.join("/");
+
+}
+
+MM.UI.Help.prototype._formatKey = function(key) {
+	var str = "";
+	if (key.ctrlKey) { str += "Ctrl+"; }
+	if (key.altKey) { str += "Alt+"; }
+	if (key.shiftKey) { str += "Shift+"; }
+	if (key.charCode) { 
+		var ch = String.fromCharCode(key.charCode);
+		str += this._map[ch] || ch.toUpperCase(); 
+	}
+	if (key.keyCode) { str += this._map[key.keyCode] || key.keyCode; }
+	return str;
+}
+MM.UI.IO = function() {
+	this._prefix = "mm.app.";
+	this._mode = "";
+	this._node = document.querySelector("#io");
+	this._heading = this._node.querySelector("h3");
+
+	this._backend = this._node.querySelector("#backend");
+	this._currentBackend = null;
+	this._backends = {};
+	var ids = ["local", "firebase", "gdrive", "file"];
+	ids.forEach(function(id) {
+		var ui = MM.UI.Backend.getById(id);
+		ui.init(this._backend);
+		this._backends[id] = ui;
+	}, this);
+
+	this._backend.value = localStorage.getItem(this._prefix + "backend") || MM.Backend.File.id;
+	this._backend.addEventListener("change", this);
+	
+	MM.subscribe("map-new", this);
+	MM.subscribe("save-done", this);
+	MM.subscribe("load-done", this);
+}
+
+MM.UI.IO.prototype.restore = function() {
+	var parts = {};
+	location.search.substring(1).split("&").forEach(function(item) {
+		var keyvalue = item.split("=");
+		parts[decodeURIComponent(keyvalue[0])] = decodeURIComponent(keyvalue[1]);
+	});
+
+	var backend = MM.UI.Backend.getById(parts.b);
+	if (backend) { /* saved backend info */
+		backend.setState(parts); 
+		return;
+	}
+
+	if (parts.state) { /* opened from gdrive */
+		try {
+			var state = JSON.parse(parts.state);
+			if (state.action == "open") {
+				state = {
+					b: "gdrive",
+					id: state.ids[0]
+				};
+				MM.UI.Backend.GDrive.setState(state);
+			} else {
+				history.replaceState(null, "", ".");
+			}
+			return;
+		} catch (e) { }
+	}
+
+	if (parts.map) { /* opened with a URL link */
+		var xhr = new XMLHttpRequest();
+		xhr.open("get", parts.map, true);
+		Promise.send(xhr).then(
+			function(xhr) {
+				var json = MM.Format.JSON.from(xhr.responseText);
+				var map = MM.Map.fromJSON(json);
+				MM.App.setMap(map);
+			}
+		);
+		return;
+	}
+}
+
+MM.UI.IO.prototype.handleMessage = function(message, publisher) {
+	switch (message) {
+		case "map-new":
+			this._setCurrentBackend(null);
+		break;
+		
+		case "save-done":
+		case "load-done":
+			this.hide();
+			this._setCurrentBackend(publisher);
+		break;
+	}
+}
+
+MM.UI.IO.prototype.show = function(mode) {
+	this._mode = mode;
+	this._node.classList.add("visible");
+	this._heading.innerHTML = mode;
+	
+	this._syncBackend();
+	window.addEventListener("keydown", this);
+}
+
+MM.UI.IO.prototype.hide = function() {
+	this._node.classList.remove("visible");
+	document.activeElement.blur();
+	window.removeEventListener("keydown", this);
+}
+
+MM.UI.IO.prototype.quickSave = function() {
+	if (this._currentBackend) { 
+		this._currentBackend.save();
+	} else {
+		this.show("save");
+	}
+}
+
+MM.UI.IO.prototype.handleEvent = function(e) {
+	switch (e.type) {
+		case "keydown":
+			if (e.keyCode == 27) { this.hide(); }
+		break;
+		
+		case "change":
+			this._syncBackend();
+		break;
+	}
+}
+
+MM.UI.IO.prototype._syncBackend = function() {
+	var all = this._node.querySelectorAll("div[id]");
+	[].concat.apply([], all).forEach(function(node) { node.style.display = "none"; });
+	
+	this._node.querySelector("#" + this._backend.value).style.display = "";
+	
+	this._backends[this._backend.value].show(this._mode);
+}
+
+MM.UI.IO.prototype._setCurrentBackend = function(backend) {
+	if (this._currentBackend && this._currentBackend != backend) { this._currentBackend.reset(); }
+	
+	if (backend) { localStorage.setItem(this._prefix + "backend", backend.id); }
+	this._currentBackend = backend;
+	this._updateURL();
+}
+
+MM.UI.IO.prototype._updateURL = function() {
+	var data = this._currentBackend && this._currentBackend.getState();
+	if (!data) {
+		history.replaceState(null, "", ".");
+	} else {
+		data.b = this._currentBackend.id;
+		var arr = Object.keys(data).map(function(key) {
+			return encodeURIComponent(key)+"="+encodeURIComponent(data[key]);
+		});
+		history.replaceState(null, "", "?" + arr.join("&"));
+	}
+}
+MM.UI.Backend = Object.create(MM.Repo);
+
+MM.UI.Backend.init = function(select) {
+	this._backend = MM.Backend.getById(this.id);
+	this._mode = "";
+	this._prefix = "mm.app." + this.id + ".";
+
+	this._node = document.querySelector("#" + this.id);
+	
+	this._cancel = this._node.querySelector(".cancel");
+	this._cancel.addEventListener("click", this);
+
+	this._go = this._node.querySelector(".go");
+	this._go.addEventListener("click", this);
+	
+	select.appendChild(this._backend.buildOption());
+}
+
+MM.UI.Backend.reset = function() {
+	this._backend.reset();
+}
+
+MM.UI.Backend.setState = function(data) {
+}
+
+MM.UI.Backend.getState = function() {
+	return null;
+}
+
+MM.UI.Backend.handleEvent = function(e) {
+	switch (e.target) {
+		case this._cancel:
+			MM.App.io.hide();
+		break;
+
+		case this._go:
+			this._action();
+		break;
+	}
+}
+
+MM.UI.Backend.save = function() {
+}
+
+MM.UI.Backend.load = function() {
+}
+
+MM.UI.Backend.show = function(mode) {
+	this._mode = mode;
+
+	this._go.innerHTML = mode.charAt(0).toUpperCase() + mode.substring(1);
+
+	var all = this._node.querySelectorAll("[data-for]");
+	[].concat.apply([], all).forEach(function(node) { node.style.display = "none"; });
+
+	var visible = this._node.querySelectorAll("[data-for~=" + mode + "]");
+	[].concat.apply([], visible).forEach(function(node) { node.style.display = ""; });
+	
+	this._go.focus();
+}
+
+MM.UI.Backend._action = function() {
+	switch (this._mode) {
+		case "save":
+			this.save();
+		break;
+		
+		case "load":
+			this.load();
+		break;
+	}
+}
+
+MM.UI.Backend._saveDone = function() {
+	MM.App.setThrobber(false);
+	MM.publish("save-done", this);
+}
+
+MM.UI.Backend._loadDone = function(json) {
+	MM.App.setThrobber(false);
+	try {
+		MM.App.setMap(MM.Map.fromJSON(json));
+		MM.publish("load-done", this);
+	} catch (e) { 
+		this._error(e);
+	}
+}
+
+MM.UI.Backend._error = function(e) {
+	MM.App.setThrobber(false);
+	alert("IO error: " + e.message);
+}
+
+MM.UI.Backend._buildList = function(list, select) {
+	var data = [];
+	
+	for (var id in list) {
+		data.push({id:id, name:list[id]});
+	}
+	
+	data.sort(function(a, b) {
+		return a.name.localeCompare(b.name);
+	});
+	
+	data.forEach(function(item) {
+		var o = document.createElement("option");
+		o.value = item.id;
+		o.innerHTML = item.name;
+		select.appendChild(o);
+	});
+}
+MM.UI.Backend.File = Object.create(MM.UI.Backend, {
+	id: {value: "file"}
+});
+
+MM.UI.Backend.File.init = function(select) {
+	MM.UI.Backend.init.call(this, select);
+	
+	this._format = this._node.querySelector(".format");
+	this._format.appendChild(MM.Format.JSON.buildOption());
+	this._format.appendChild(MM.Format.FreeMind.buildOption());
+	this._format.appendChild(MM.Format.MMA.buildOption());
+	this._format.appendChild(MM.Format.Mup.buildOption());
+	this._format.value = localStorage.getItem(this._prefix + "format") || MM.Format.JSON.id;
+	this._format.addEventListener("change", this);
+}
+
+MM.UI.Backend.File.show = function(mode) {
+	MM.UI.Backend.show.call(this, mode);
+	
+	this._go.innerHTML = (mode == "save" ? "Save" : "Browse");
+}
+
+MM.UI.Backend.File._action = function() {
+	localStorage.setItem(this._prefix + "format", this._format.value);
+	
+	MM.UI.Backend._action.call(this);
+}
+
+MM.UI.Backend.File.save = function() {
+	var format = MM.Format.getById(this._format.value);
+	var json = MM.App.map.toJSON();
+	var data = format.to(json);
+
+	var name = MM.App.map.getName() + "." + format.extension;
+	this._backend.save(data, name).then(
+		this._saveDone.bind(this),
+		this._error.bind(this)
+	);
+}
+
+MM.UI.Backend.File.load = function() {
+	this._backend.load().then(
+		this._loadDone.bind(this),
+		this._error.bind(this)
+	);
+}
+
+MM.UI.Backend.File._loadDone = function(data) {
+	try {
+		var format = MM.Format.getByName(this._backend.name);
+		var json = format.from(data);
+	} catch (e) { 
+		this._error(e);
+	}
+
+	MM.UI.Backend._loadDone.call(this, json);
+}
+MM.UI.Backend.Local = Object.create(MM.UI.Backend, {
+	id: {value: "local"}
+});
+
+MM.UI.Backend.Local.init = function(select) {
+	MM.UI.Backend.init.call(this, select);
+	
+	this._list = this._node.querySelector(".list");
+	this._remove = this._node.querySelector(".remove");
+	this._remove.addEventListener("click", this);
+}
+
+MM.UI.Backend.Local.handleEvent = function(e) {
+	MM.UI.Backend.handleEvent.call(this, e);
+
+	switch (e.target) {
+		case this._remove:
+			var id = this._list.value;
+			if (!id) { break; } 
+			this._backend.remove(id);
+			this.show(this._mode);
+		break;
+	}
+}
+
+MM.UI.Backend.Local.show = function(mode) {
+	MM.UI.Backend.show.call(this, mode);
+	
+	this._go.disabled = false;
+
+	if (mode == "load") { 
+		var list = this._backend.list();
+		this._list.innerHTML = "";
+		if (Object.keys(list).length) {
+			this._go.disabled = false;
+			this._remove.disabled = false;
+			this._buildList(list, this._list);
+		} else {
+			this._go.disabled = true;
+			this._remove.disabled = true;
+			var o = document.createElement("option");
+			o.innerHTML = "(no maps saved)";
+			this._list.appendChild(o);
+		}
+	}
+}
+
+MM.UI.Backend.Local.setState = function(data) {
+	this._load(data.id);
+}
+
+MM.UI.Backend.Local.getState = function() {
+	var data = {
+		id: MM.App.map.getId()
+	};
+	return data;
+}
+
+MM.UI.Backend.Local.save = function() {
+	var json = MM.App.map.toJSON();
+	var data = MM.Format.JSON.to(json);
+
+	try {
+		this._backend.save(data, MM.App.map.getId(), MM.App.map.getName());
+		this._saveDone();
+	} catch (e) {
+		this._error(e);
+	}
+}
+
+MM.UI.Backend.Local.load = function() {
+	this._load(this._list.value);
+}
+
+MM.UI.Backend.Local._load = function(id) {
+	try {
+		var data = this._backend.load(id);
+		var json = MM.Format.JSON.from(data);
+		this._loadDone(json);
+	} catch (e) {
+		this._error(e);
+	}
+}
+MM.UI.Backend.Firebase = Object.create(MM.UI.Backend, {
+	id: {value: "firebase"}
+});
+
+MM.UI.Backend.Firebase.init = function(select) {
+	MM.UI.Backend.init.call(this, select);
+	
+	this._online = false;
+	this._list = this._node.querySelector(".list");
+	this._server = this._node.querySelector(".server");
+	this._server.value = localStorage.getItem(this._prefix + "server") || "my-mind";
+
+	this._auth = this._node.querySelector(".auth");
+	this._auth.value = localStorage.getItem(this._prefix + "auth") || "";
+
+	this._remove = this._node.querySelector(".remove");
+	this._remove.addEventListener("click", this);
+
+	this._go.disabled = false;
+	MM.subscribe("firebase-list", this);
+}
+
+MM.UI.Backend.Firebase.setState = function(data) {
+	this._connect(data.s, data.a).then(
+		this._load.bind(this, data.id),
+		this._error.bind(this)
+	)
+}
+
+MM.UI.Backend.Firebase.getState = function() {
+	var data = {
+		id: MM.App.map.getId(),
+		s: this._server.value
+	};
+	if (this._auth.value) { data.a = this._auth.value; }
+	return data;
+}
+
+MM.UI.Backend.Firebase.show = function(mode) {
+	MM.UI.Backend.show.call(this, mode);
+	this._sync();
+}
+
+MM.UI.Backend.Firebase.handleEvent = function(e) {
+	MM.UI.Backend.handleEvent.call(this, e);
+
+	switch (e.target) {
+		case this._remove:
+			var id = this._list.value;
+			if (!id) { break; }
+			MM.App.setThrobber(true);
+			this._backend.remove(id).then(
+				function() { MM.App.setThrobber(false); },
+				this._error.bind(this)
+			);
+		break;
+	}
+}
+
+MM.UI.Backend.Firebase.handleMessage = function(message, publisher, data) {
+	switch (message) {
+		case "firebase-list":
+			this._list.innerHTML = "";
+			if (Object.keys(data).length) {
+				this._buildList(data, this._list);
+			} else {
+				var o = document.createElement("option");
+				o.innerHTML = "(no maps saved)";
+				this._list.appendChild(o);
+			}
+			this._sync();
+		break;
+	}
+}
+
+MM.UI.Backend.Firebase._action = function() {
+	if (!this._online) {
+		this._connect(this._server.value, this._auth.value);
+		return;
+	}
+	
+	MM.UI.Backend._action.call(this);
+}
+
+MM.UI.Backend.Firebase.save = function() {
+	MM.App.setThrobber(true);
+
+	var map = MM.App.map;
+	this._backend.save(map.toJSON(), map.getId(), map.getName()).then(
+		this._saveDone.bind(this),
+		this._error.bind(this)
+	);
+}
+
+MM.UI.Backend.Firebase.load = function() {
+	this._load(this._list.value);
+}
+
+MM.UI.Backend.Firebase._load = function(id) {
+	MM.App.setThrobber(true);
+
+	this._backend.load(id).then(
+		this._loadDone.bind(this),
+		this._error.bind(this)
+	);
+}
+
+MM.UI.Backend.Firebase._connect = function(server, auth) {
+	var promise = new Promise();
+
+	this._server.value = server;
+	this._auth.value = auth;
+	this._server.disabled = true;
+	this._auth.disabled = true;
+
+	localStorage.setItem(this._prefix + "server", server);
+	localStorage.setItem(this._prefix + "auth", auth || "");
+
+	this._go.disabled = true;
+	MM.App.setThrobber(true);
+
+	this._backend.connect(server, auth).then(
+		function() {
+			this._connected();
+			promise.fulfill();
+		}.bind(this),
+		promise.reject.bind(promise)
+	);
+
+	return promise;
+}
+
+MM.UI.Backend.Firebase._connected = function() {
+	MM.App.setThrobber(false);
+	this._online = true;
+	this._sync();
+}
+
+MM.UI.Backend.Firebase._sync = function() {
+	if (!this._online) {
+		this._go.innerHTML = "Connect";
+		return;
+	}
+
+	this._go.disabled = false;
+	if (this._mode == "load" && !this._list.value) { this._go.disabled = true; }
+	this._go.innerHTML = this._mode.charAt(0).toUpperCase() + this._mode.substring(1);
+}
+
+MM.UI.Backend.GDrive = Object.create(MM.UI.Backend, {
+	id: {value: "gdrive"}
+});
+
+MM.UI.Backend.GDrive.save = function() {
+	MM.App.setThrobber(true);
+
+	var data = MM.Format.JSON.to(MM.App.map.toJSON());
+	var name = MM.App.map.getName() + "." + MM.Format.JSON.extension;
+	
+	this._backend.save(data, name).then(
+		this._saveDone.bind(this),
+		this._error.bind(this)
+	);
+}
+
+MM.UI.Backend.GDrive.load = function() {
+	MM.App.setThrobber(true);
+
+	this._backend.pick().then(
+		this._picked.bind(this),
+		this._error.bind(this)
+	);
+}
+
+MM.UI.Backend.GDrive._picked = function(id) {
+	MM.App.setThrobber(false);
+	if (!id) { return;  }
+
+	MM.App.setThrobber(true);
+
+	this._backend.load(id).then(
+		this._loadDone.bind(this),
+		this._error.bind(this)
+	)
+}
+
+MM.UI.Backend.GDrive.setState = function(data) {
+	this._picked(data.id);
+}
+
+MM.UI.Backend.GDrive.getState = function() {
+	var data = {
+		id: this._backend.fileId
+	};
+	return data;
+}
+
+MM.UI.Backend.GDrive._loadDone = function(data) {
+	try {
+		var format = MM.Format.getByName(this._backend.name);
+		var json = format.from(data);
+	} catch (e) { 
+		this._error(e);
+	}
+
+	MM.UI.Backend._loadDone.call(this, json);
+}
+MM.App = {
+	keyboard: null,
+	current: null,
+	editing: false,
+	history: [],
+	historyIndex: 0,
+	portSize: [0, 0],
+	map: null,
+	ui: null,
+	io: null,
+	help: null,
+	_port: null,
+	_throbber: null,
+	_drag: {
+		mouse: [0, 0],
+		pos: [0, 0],
+		item: null,
+		ghost: null
+	},
+	_fontSize: 100,
+	
+	action: function(action) {
+		if (this.historyIndex < this.history.length) { /* remove undoed actions */
+			this.history.splice(this.historyIndex, this.history.length-this.historyIndex);
+		}
+		
+		this.history.push(action);
+		this.historyIndex++;
+		
+		action.perform();
+		return this;
+	},
+	
+	setMap: function(map) {
+		if (this.map) { this.map.hide(); }
+
+		this.history = [];
+		this.historyIndex = 0;
+
+		this.map = map;
+		this.map.show(this._port);
+	},
+	
+	select: function(item) {
+		document.activeElement.blur();
+		if (this.current) {
+			this.current.getDOM().node.classList.remove("current");
+		}
+		this.current = item;
+		this.current.getDOM().node.classList.add("current");
+		this.map.ensureItemVisibility(item);
+		MM.publish("item-select", item);
+	},
+	
+	adjustFontSize: function(diff) {
+		this._fontSize = Math.max(30, this._fontSize + 10*diff);
+		this._port.style.fontSize = this._fontSize + "%";
+		this.map.update();
+		this.map.ensureItemVisibility(this.current);
+	},
+	
+	handleMessage: function(message, publisher) {
+		switch (message) {
+			case "ui-change":
+				this._syncPort();
+			break;
+
+			case "item-change":
+				if (publisher.isRoot() && publisher.getMap() == this.map) {
+					document.title = this.map.getName() + " :: My Mind";
+				}
+			break;
+		}
+	},
+
+	handleEvent: function(e) {
+		switch (e.type) {
+			case "resize":
+				this._syncPort();
+			break;
+
+			case "click":
+				var item = this.map.getItemFor(e.target);
+				if (item) { this.select(item); }
+			break;
+			
+			case "mousedown":
+				e.preventDefault();
+				this._port.addEventListener("mousemove", this);
+				this._port.addEventListener("mouseup", this);
+				this._drag.mouse[0] = e.clientX;
+				this._drag.mouse[1] = e.clientY;
+
+				var item = this.map.getItemFor(e.target);
+				if (item && !item.isRoot()) { 
+					this._drag.item = item;
+				} else {
+					this._port.style.cursor = "move";
+				}
+			break;
+			
+			case "mousemove":
+				var dx = e.clientX - this._drag.mouse[0];
+				var dy = e.clientY - this._drag.mouse[1];
+				this._drag.mouse[0] = e.clientX;
+				this._drag.mouse[1] = e.clientY;
+				if (this._drag.item) {
+					if (this._drag.ghost) {
+						this._drag.pos[0] += dx;
+						this._drag.pos[1] += dy;
+						this._drag.ghost.style.left = this._drag.pos[0] + "px";
+						this._drag.ghost.style.top = this._drag.pos[1] + "px";
+					} else {
+						var content = this._drag.item.getDOM().content;
+						this._drag.ghost = content.cloneNode(true);
+						this._drag.ghost.classList.add("ghost");
+						this._drag.pos[0] = content.offsetLeft + dx;
+						this._drag.pos[1] = content.offsetTop + dy;
+						this._drag.ghost.style.left = this._drag.pos[0] + "px";
+						this._drag.ghost.style.top = this._drag.pos[1] + "px";
+						content.parentNode.appendChild(this._drag.ghost);
+						this._port.style.cursor = "move";
+					}
+				} else {
+					this.map.moveBy(dx, dy);
+				}
+			break;
+			
+			case "mouseup":
+				this._port.style.cursor = "";
+				this._port.removeEventListener("mousemove", this);
+				this._port.removeEventListener("mouseup", this);
+				
+				if (this._drag.ghost) {
+					var rect = this._drag.ghost.getBoundingClientRect();
+					this._drag.ghost.parentNode.removeChild(this._drag.ghost);
+					
+					var nearest = this.map.getClosestItem(rect.left + rect.width/2, rect.top + rect.height/2);
+					this._finishDragDrop(this._drag.item, nearest);
+				}
+
+				this._drag.item = null;
+				this._drag.ghost = null;
+			break;
+		} /* switch */
+	},
+	
+	setThrobber: function(visible) {
+		this._throbber.classList[visible ? "add" : "remove"]("visible");
+	},
+
+	init: function() {
+		this._port = document.querySelector("#port");
+		this._throbber = document.querySelector("#throbber");
+		this.ui = new MM.UI();
+		this.io = new MM.UI.IO();
+		this.help = new MM.UI.Help();
+		this.keyboard = new MM.Keyboard();
+
+		this._port.addEventListener("mousedown", this);
+		this._port.addEventListener("click", this);
+		window.addEventListener("resize", this);
+		MM.subscribe("ui-change", this);
+		MM.subscribe("item-change", this);
+		
+		this._syncPort();
+		this.setMap(new MM.Map());
+	},
+
+	_syncPort: function() {
+		this.portSize = [window.innerWidth - this.ui.getWidth(), window.innerHeight];
+		this._port.style.width = this.portSize[0] + "px";
+		this._port.style.height = this.portSize[1] + "px";
+		this._throbber.style.right = (20 + this.ui.getWidth())+ "px";
+		if (this.map) { this.map.ensureItemVisibility(this.current); }
+	},
+	
+	_finishDragDrop: function(item, nearest) {
+		var target = nearest.item;
+		var tmp = target;
+		while (!tmp.isRoot()) {
+			if (tmp == item) { return; } /* drop on a child or self */
+			tmp = tmp.getParent();
+		}
+		
+		var w1 = item.getDOM().content.offsetWidth;
+		var w2 = target.getDOM().content.offsetWidth;
+		var w = Math.max(w1, w2);
+		var h1 = item.getDOM().content.offsetHeight;
+		var h2 = target.getDOM().content.offsetHeight;
+		var h = Math.max(h1, h2);
+		if (target.isRoot()) { /* append here */
+			var action = new MM.Action.MoveItem(item, target);
+		} else if (Math.abs(nearest.dx) < w && Math.abs(nearest.dy) < h) { /* append here */
+			var action = new MM.Action.MoveItem(item, target);
+		} else {
+			var dir = target.getParent().getLayout().getChildDirection(target);
+			var diff = -1 * (dir == "top" || dir == "bottom" ? nearest.dx : nearest.dy);
+			
+			var index = target.getParent().getChildren().indexOf(target);
+			var targetIndex = index + (diff > 0 ? 1 : 0);
+			var action = new MM.Action.MoveItem(item, target.getParent(), targetIndex, target.getSide());
+		}
+		this.action(action);
+		
+	}
+}
diff --git a/js/action.js b/src/action.js
similarity index 96%
rename from js/action.js
rename to src/action.js
index 2bfa8e7..f5baeef 100644
--- a/js/action.js
+++ b/src/action.js
@@ -46,15 +46,18 @@ MM.Action.RemoveItem.prototype.undo = function() {
 	MM.App.select(this._item);
 }
 
-MM.Action.MoveItem = function(item, newParent, newIndex) {
+MM.Action.MoveItem = function(item, newParent, newIndex, newSide) {
 	this._item = item;
 	this._newParent = newParent;
 	this._newIndex = (arguments.length < 3 ? null : newIndex);
+	this._newSide = newSide || "";
 	this._oldParent = item.getParent();
 	this._oldIndex = this._oldParent.getChildren().indexOf(item);
+	this._oldSide = item.getSide();
 }
 MM.Action.MoveItem.prototype = Object.create(MM.Action.prototype);
 MM.Action.MoveItem.prototype.perform = function() {
+	this._item.setSide(this._newSide);
 	if (this._newIndex === null) {
 		this._newParent.insertChild(this._item);
 	} else {
@@ -63,6 +66,7 @@ MM.Action.MoveItem.prototype.perform = function() {
 	MM.App.select(this._item);
 }
 MM.Action.MoveItem.prototype.undo = function() {
+	this._item.setSide(this._oldSide);
 	this._oldParent.insertChild(this._item, this._oldIndex);
 	MM.App.select(this._newParent);
 }
diff --git a/js/app.js b/src/app.js
similarity index 83%
rename from js/app.js
rename to src/app.js
index b6273b7..8effc9a 100644
--- a/js/app.js
+++ b/src/app.js
@@ -42,6 +42,7 @@ MM.App = {
 	},
 	
 	select: function(item) {
+		document.activeElement.blur();
 		if (this.current) {
 			this.current.getDOM().node.classList.remove("current");
 		}
@@ -85,7 +86,6 @@ MM.App = {
 			
 			case "mousedown":
 				e.preventDefault();
-				this._port.style.cursor = "move";
 				this._port.addEventListener("mousemove", this);
 				this._port.addEventListener("mouseup", this);
 				this._drag.mouse[0] = e.clientX;
@@ -94,14 +94,8 @@ MM.App = {
 				var item = this.map.getItemFor(e.target);
 				if (item && !item.isRoot()) { 
 					this._drag.item = item;
-					var content = item.getDOM().content;
-					this._drag.ghost = content.cloneNode(true);
-					this._drag.ghost.classList.add("ghost");
-					this._drag.pos[0] = content.offsetLeft;
-					this._drag.pos[1] = content.offsetTop;
-					this._drag.ghost.style.left = this._drag.pos[0] + "px";
-					this._drag.ghost.style.top = this._drag.pos[1] + "px";
-					content.parentNode.appendChild(this._drag.ghost);
+				} else {
+					this._port.style.cursor = "move";
 				}
 			break;
 			
@@ -111,10 +105,22 @@ MM.App = {
 				this._drag.mouse[0] = e.clientX;
 				this._drag.mouse[1] = e.clientY;
 				if (this._drag.item) {
-					this._drag.pos[0] += dx;
-					this._drag.pos[1] += dy;
-					this._drag.ghost.style.left = this._drag.pos[0] + "px";
-					this._drag.ghost.style.top = this._drag.pos[1] + "px";
+					if (this._drag.ghost) {
+						this._drag.pos[0] += dx;
+						this._drag.pos[1] += dy;
+						this._drag.ghost.style.left = this._drag.pos[0] + "px";
+						this._drag.ghost.style.top = this._drag.pos[1] + "px";
+					} else {
+						var content = this._drag.item.getDOM().content;
+						this._drag.ghost = content.cloneNode(true);
+						this._drag.ghost.classList.add("ghost");
+						this._drag.pos[0] = content.offsetLeft + dx;
+						this._drag.pos[1] = content.offsetTop + dy;
+						this._drag.ghost.style.left = this._drag.pos[0] + "px";
+						this._drag.ghost.style.top = this._drag.pos[1] + "px";
+						content.parentNode.appendChild(this._drag.ghost);
+						this._port.style.cursor = "move";
+					}
 				} else {
 					this.map.moveBy(dx, dy);
 				}
@@ -125,16 +131,16 @@ MM.App = {
 				this._port.removeEventListener("mousemove", this);
 				this._port.removeEventListener("mouseup", this);
 				
-				if (this._drag.item) {
+				if (this._drag.ghost) {
 					var rect = this._drag.ghost.getBoundingClientRect();
 					this._drag.ghost.parentNode.removeChild(this._drag.ghost);
 					
 					var nearest = this.map.getClosestItem(rect.left + rect.width/2, rect.top + rect.height/2);
 					this._finishDragDrop(this._drag.item, nearest);
-
-					this._drag.item = null;
-					this._drag.ghost = null;
 				}
+
+				this._drag.item = null;
+				this._drag.ghost = null;
 			break;
 		} /* switch */
 	},
@@ -177,7 +183,7 @@ MM.App = {
 			tmp = tmp.getParent();
 		}
 		
- 		var w1 = item.getDOM().content.offsetWidth;
+		var w1 = item.getDOM().content.offsetWidth;
 		var w2 = target.getDOM().content.offsetWidth;
 		var w = Math.max(w1, w2);
 		var h1 = item.getDOM().content.offsetHeight;
@@ -188,15 +194,12 @@ MM.App = {
 		} else if (Math.abs(nearest.dx) < w && Math.abs(nearest.dy) < h) { /* append here */
 			var action = new MM.Action.MoveItem(item, target);
 		} else {
-//			debugger;
 			var dir = target.getParent().getLayout().getChildDirection(target);
 			var diff = -1 * (dir == "top" || dir == "bottom" ? nearest.dx : nearest.dy);
 			
 			var index = target.getParent().getChildren().indexOf(target);
 			var targetIndex = index + (diff > 0 ? 1 : 0);
-			var action = new MM.Action.MoveItem(item, target.getParent(), targetIndex);
-			/* FIXME side + side in action */
-			
+			var action = new MM.Action.MoveItem(item, target.getParent(), targetIndex, target.getSide());
 		}
 		this.action(action);
 		
diff --git a/js/backend.file.js b/src/backend.file.js
similarity index 100%
rename from js/backend.file.js
rename to src/backend.file.js
diff --git a/js/backend.firebase.js b/src/backend.firebase.js
similarity index 77%
rename from js/backend.firebase.js
rename to src/backend.firebase.js
index 580aeae..84410be 100644
--- a/js/backend.firebase.js
+++ b/src/backend.firebase.js
@@ -4,20 +4,20 @@ MM.Backend.Firebase = Object.create(MM.Backend, {
 	ref: {value:null, writable:true}
 });
 
-MM.Backend.Firebase.connect = function(server) {
-	var promise = new Promise();
-	
+MM.Backend.Firebase.connect = function(server, auth) {
 	this.ref = new Firebase("https://" + server + ".firebaseio.com/");
 	
-	this.ref.child(".info/connected").once("value", function(snap) {
-		promise.fulfill();
-	});
-	
 	this.ref.child("names").on("value", function(snap) {
 		MM.publish("firebase-list", this, snap.val() || {});
 	});
-	
-	return promise;
+
+	if (auth) {
+		return this._login(auth);
+	} else {
+		var promise = new Promise();
+		promise.fulfill();
+		return promise;
+	}
 }
 
 MM.Backend.Firebase.save = function(data, id, name) {
@@ -70,3 +70,18 @@ MM.Backend.Firebase.remove = function(id) {
 
 	return promise;
 }
+
+MM.Backend.Firebase._login = function(type) {
+	var promise = new Promise();
+
+	var auth = new FirebaseSimpleLogin(this.ref, function(error, user) {
+		if (error) {
+			promise.reject(error);
+		} else if (user) {
+			promise.fulfill(user);
+		}
+	});
+	auth.login(type);
+
+	return promise;
+}
diff --git a/js/backend.gdrive.js b/src/backend.gdrive.js
similarity index 100%
rename from js/backend.gdrive.js
rename to src/backend.gdrive.js
diff --git a/js/backend.js b/src/backend.js
similarity index 100%
rename from js/backend.js
rename to src/backend.js
diff --git a/js/backend.local.js b/src/backend.local.js
similarity index 100%
rename from js/backend.local.js
rename to src/backend.local.js
diff --git a/js/clipboard.js b/src/clipboard.js
similarity index 100%
rename from js/clipboard.js
rename to src/clipboard.js
diff --git a/js/command.edit.js b/src/command.edit.js
similarity index 100%
rename from js/command.edit.js
rename to src/command.edit.js
diff --git a/js/command.js b/src/command.js
similarity index 100%
rename from js/command.js
rename to src/command.js
diff --git a/js/command.select.js b/src/command.select.js
similarity index 100%
rename from js/command.select.js
rename to src/command.select.js
diff --git a/js/format.freemind.js b/src/format.freemind.js
similarity index 100%
rename from js/format.freemind.js
rename to src/format.freemind.js
diff --git a/js/format.js b/src/format.js
similarity index 100%
rename from js/format.js
rename to src/format.js
diff --git a/js/format.json.js b/src/format.json.js
similarity index 100%
rename from js/format.json.js
rename to src/format.json.js
diff --git a/js/format.mma.js b/src/format.mma.js
similarity index 100%
rename from js/format.mma.js
rename to src/format.mma.js
diff --git a/js/format.mup.js b/src/format.mup.js
similarity index 100%
rename from js/format.mup.js
rename to src/format.mup.js
diff --git a/js/item.js b/src/item.js
similarity index 99%
rename from js/item.js
rename to src/item.js
index d437093..a71711c 100644
--- a/js/item.js
+++ b/src/item.js
@@ -83,7 +83,7 @@ MM.Item.prototype.toJSON = function() {
 	if (this._side) { data.side = this._side; }
 	if (this._color) { data.color = this._color; }
 	if (this._value) { data.value = this._value; }
-	if (this._status) { data.value = this._status; }
+	if (this._status) { data.status = this._status; }
 	if (this._layout) { data.layout = this._layout.id; }
 	if (!this._autoShape) { data.shape = this._shape.id; }
 	if (this._children.length) {
diff --git a/js/keyboard.js b/src/keyboard.js
similarity index 100%
rename from js/keyboard.js
rename to src/keyboard.js
diff --git a/js/layout.graph.js b/src/layout.graph.js
similarity index 100%
rename from js/layout.graph.js
rename to src/layout.graph.js
diff --git a/js/layout.js b/src/layout.js
similarity index 100%
rename from js/layout.js
rename to src/layout.js
diff --git a/js/layout.map.js b/src/layout.map.js
similarity index 100%
rename from js/layout.map.js
rename to src/layout.map.js
diff --git a/js/layout.tree.js b/src/layout.tree.js
similarity index 100%
rename from js/layout.tree.js
rename to src/layout.tree.js
diff --git a/js/map.js b/src/map.js
similarity index 98%
rename from js/map.js
rename to src/map.js
index 64c92c9..5cbc788 100644
--- a/js/map.js
+++ b/src/map.js
@@ -150,7 +150,7 @@ MM.Map.prototype.getRoot = function() {
 
 MM.Map.prototype.getName = function() {
 	var name = this._root.getText();
-	return name.replace(/\n/g, "").replace(/<.*?>/g, "").trim();
+	return name.replace(/\n/g, " ").replace(/<.*?>/g, "").trim();
 }
 
 MM.Map.prototype.getId = function() {
diff --git a/js/mm.js b/src/mm.js
similarity index 100%
rename from js/mm.js
rename to src/mm.js
diff --git a/js/promise-addons.js b/src/promise-addons.js
similarity index 100%
rename from js/promise-addons.js
rename to src/promise-addons.js
diff --git a/js/promise.js b/src/promise.js
similarity index 100%
rename from js/promise.js
rename to src/promise.js
diff --git a/js/repo.js b/src/repo.js
similarity index 100%
rename from js/repo.js
rename to src/repo.js
diff --git a/js/shape.box.js b/src/shape.box.js
similarity index 100%
rename from js/shape.box.js
rename to src/shape.box.js
diff --git a/js/shape.ellipse.js b/src/shape.ellipse.js
similarity index 100%
rename from js/shape.ellipse.js
rename to src/shape.ellipse.js
diff --git a/js/shape.js b/src/shape.js
similarity index 100%
rename from js/shape.js
rename to src/shape.js
diff --git a/js/shape.underline.js b/src/shape.underline.js
similarity index 100%
rename from js/shape.underline.js
rename to src/shape.underline.js
diff --git a/js/ui.backend.file.js b/src/ui.backend.file.js
similarity index 100%
rename from js/ui.backend.file.js
rename to src/ui.backend.file.js
diff --git a/js/ui.backend.firebase.js b/src/ui.backend.firebase.js
similarity index 72%
rename from js/ui.backend.firebase.js
rename to src/ui.backend.firebase.js
index 93ed403..c3b95ec 100644
--- a/js/ui.backend.firebase.js
+++ b/src/ui.backend.firebase.js
@@ -10,15 +10,21 @@ MM.UI.Backend.Firebase.init = function(select) {
 	this._server = this._node.querySelector(".server");
 	this._server.value = localStorage.getItem(this._prefix + "server") || "my-mind";
 
+	this._auth = this._node.querySelector(".auth");
+	this._auth.value = localStorage.getItem(this._prefix + "auth") || "";
+
 	this._remove = this._node.querySelector(".remove");
 	this._remove.addEventListener("click", this);
-	
+
+	this._go.disabled = false;
 	MM.subscribe("firebase-list", this);
 }
 
 MM.UI.Backend.Firebase.setState = function(data) {
-	this._backend.connect(data.s);
-	this._load(data.id);
+	this._connect(data.s, data.a).then(
+		this._load.bind(this, data.id),
+		this._error.bind(this)
+	)
 }
 
 MM.UI.Backend.Firebase.getState = function() {
@@ -26,6 +32,7 @@ MM.UI.Backend.Firebase.getState = function() {
 		id: MM.App.map.getId(),
 		s: this._server.value
 	};
+	if (this._auth.value) { data.a = this._auth.value; }
 	return data;
 }
 
@@ -68,12 +75,7 @@ MM.UI.Backend.Firebase.handleMessage = function(message, publisher, data) {
 
 MM.UI.Backend.Firebase._action = function() {
 	if (!this._online) {
-		localStorage.setItem(this._prefix + "server", this._server.value);
-		this._go.disabled = true;
-		this._backend.connect(this._server.value).then(
-			this._connected.bind(this),
-			this._error.bind(this)
-		);
+		this._connect(this._server.value, this._auth.value);
 		return;
 	}
 	
@@ -103,7 +105,33 @@ MM.UI.Backend.Firebase._load = function(id) {
 	);
 }
 
+MM.UI.Backend.Firebase._connect = function(server, auth) {
+	var promise = new Promise();
+
+	this._server.value = server;
+	this._auth.value = auth;
+	this._server.disabled = true;
+	this._auth.disabled = true;
+
+	localStorage.setItem(this._prefix + "server", server);
+	localStorage.setItem(this._prefix + "auth", auth || "");
+
+	this._go.disabled = true;
+	MM.App.setThrobber(true);
+
+	this._backend.connect(server, auth).then(
+		function() {
+			this._connected();
+			promise.fulfill();
+		}.bind(this),
+		promise.reject.bind(promise)
+	);
+
+	return promise;
+}
+
 MM.UI.Backend.Firebase._connected = function() {
+	MM.App.setThrobber(false);
 	this._online = true;
 	this._sync();
 }
diff --git a/js/ui.backend.gdrive.js b/src/ui.backend.gdrive.js
similarity index 100%
rename from js/ui.backend.gdrive.js
rename to src/ui.backend.gdrive.js
diff --git a/js/ui.backend.js b/src/ui.backend.js
similarity index 100%
rename from js/ui.backend.js
rename to src/ui.backend.js
diff --git a/js/ui.backend.local.js b/src/ui.backend.local.js
similarity index 100%
rename from js/ui.backend.local.js
rename to src/ui.backend.local.js
diff --git a/js/ui.color.js b/src/ui.color.js
similarity index 96%
rename from js/ui.color.js
rename to src/ui.color.js
index 8e6f82b..bcbbb85 100644
--- a/js/ui.color.js
+++ b/src/ui.color.js
@@ -11,6 +11,7 @@ MM.UI.Color = function() {
 }
 
 MM.UI.Color.prototype.handleEvent = function(e) {
+	e.preventDefault();
 	if (!e.target.hasAttribute("data-color")) { return; }
 	
 	var color = e.target.getAttribute("data-color") || null;
diff --git a/js/ui.help.js b/src/ui.help.js
similarity index 100%
rename from js/ui.help.js
rename to src/ui.help.js
diff --git a/js/ui.io.js b/src/ui.io.js
similarity index 98%
rename from js/ui.io.js
rename to src/ui.io.js
index 87bab2a..c45ac21 100644
--- a/js/ui.io.js
+++ b/src/ui.io.js
@@ -44,6 +44,8 @@ MM.UI.IO.prototype.restore = function() {
 					id: state.ids[0]
 				};
 				MM.UI.Backend.GDrive.setState(state);
+			} else {
+				history.replaceState(null, "", ".");
 			}
 			return;
 		} catch (e) { }
diff --git a/js/ui.js b/src/ui.js
similarity index 100%
rename from js/ui.js
rename to src/ui.js
diff --git a/js/ui.layout.js b/src/ui.layout.js
similarity index 100%
rename from js/ui.layout.js
rename to src/ui.layout.js
diff --git a/js/ui.shape.js b/src/ui.shape.js
similarity index 100%
rename from js/ui.shape.js
rename to src/ui.shape.js
diff --git a/js/ui.status.js b/src/ui.status.js
similarity index 100%
rename from js/ui.status.js
rename to src/ui.status.js
diff --git a/js/ui.value.js b/src/ui.value.js
similarity index 100%
rename from js/ui.value.js
rename to src/ui.value.js