X-Git-Url: http://git.archive.openwrt.org/?p=project%2Fluci2%2Fui.git;a=blobdiff_plain;f=luci2%2Fhtdocs%2Fluci2%2Fluci2.js;h=2a2a35984be4c7a09614a4ed096a9e893e61a07c;hp=58d38df249aad5efcb159b8249d36739ae45079f;hb=b7bde2e0ae9f21a3726fd6567e2b5eacbb8dbb92;hpb=5627975f94aaea2d2933bbbc4020a73d052c3ad0

diff --git a/luci2/htdocs/luci2/luci2.js b/luci2/htdocs/luci2/luci2.js
index 58d38df..2a2a359 100644
--- a/luci2/htdocs/luci2/luci2.js
+++ b/luci2/htdocs/luci2/luci2.js
@@ -1,7 +1,7 @@
 /*
 	LuCI2 - OpenWrt Web Interface
 
-	Copyright 2013 Jo-Philipp Wich <jow@openwrt.org>
+	Copyright 2013-2014 Jo-Philipp Wich <jow@openwrt.org>
 
 	Licensed under the Apache License, Version 2.0 (the "License");
 	you may not use this file except in compliance with the License.
@@ -175,7 +175,7 @@ String.prototype.format = function()
 
 function LuCI2()
 {
-	var _luci2 = this;
+	var L = this;
 
 	var Class = function() { };
 
@@ -253,42 +253,42 @@ function LuCI2()
 		plural:  function(n) { return 0 + (n != 1) },
 
 		init: function() {
-			if (_luci2.i18n.loaded)
+			if (L.i18n.loaded)
 				return;
 
 			var lang = (navigator.userLanguage || navigator.language || 'en').toLowerCase();
 			var langs = (lang.indexOf('-') > -1) ? [ lang, lang.split(/-/)[0] ] : [ lang ];
 
 			for (var i = 0; i < langs.length; i++)
-				$.ajax('%s/i18n/base.%s.json'.format(_luci2.globals.resource, langs[i]), {
+				$.ajax('%s/i18n/base.%s.json'.format(L.globals.resource, langs[i]), {
 					async:    false,
 					cache:    true,
 					dataType: 'json',
 					success:  function(data) {
-						$.extend(_luci2.i18n.catalog, data);
+						$.extend(L.i18n.catalog, data);
 
-						var pe = _luci2.i18n.catalog[''];
+						var pe = L.i18n.catalog[''];
 						if (pe)
 						{
-							delete _luci2.i18n.catalog[''];
+							delete L.i18n.catalog[''];
 							try {
 								var pf = new Function('n', 'return 0 + (' + pe + ')');
-								_luci2.i18n.plural = pf;
+								L.i18n.plural = pf;
 							} catch (e) { };
 						}
 					}
 				});
 
-			_luci2.i18n.loaded = true;
+			L.i18n.loaded = true;
 		}
 
 	};
 
 	this.tr = function(msgid)
 	{
-		_luci2.i18n.init();
+		L.i18n.init();
 
-		var msgstr = _luci2.i18n.catalog[msgid];
+		var msgstr = L.i18n.catalog[msgid];
 
 		if (typeof(msgstr) == 'undefined')
 			return msgid;
@@ -300,23 +300,23 @@ function LuCI2()
 
 	this.trp = function(msgid, msgid_plural, count)
 	{
-		_luci2.i18n.init();
+		L.i18n.init();
 
-		var msgstr = _luci2.i18n.catalog[msgid];
+		var msgstr = L.i18n.catalog[msgid];
 
 		if (typeof(msgstr) == 'undefined')
 			return (count == 1) ? msgid : msgid_plural;
 		else if (typeof(msgstr) == 'string')
 			return msgstr;
 		else
-			return msgstr[_luci2.i18n.plural(count)];
+			return msgstr[L.i18n.plural(count)];
 	};
 
 	this.trc = function(msgctx, msgid)
 	{
-		_luci2.i18n.init();
+		L.i18n.init();
 
-		var msgstr = _luci2.i18n.catalog[msgid + '\u0004' + msgctx];
+		var msgstr = L.i18n.catalog[msgid + '\u0004' + msgctx];
 
 		if (typeof(msgstr) == 'undefined')
 			return msgid;
@@ -328,16 +328,16 @@ function LuCI2()
 
 	this.trcp = function(msgctx, msgid, msgid_plural, count)
 	{
-		_luci2.i18n.init();
+		L.i18n.init();
 
-		var msgstr = _luci2.i18n.catalog[msgid + '\u0004' + msgctx];
+		var msgstr = L.i18n.catalog[msgid + '\u0004' + msgctx];
 
 		if (typeof(msgstr) == 'undefined')
 			return (count == 1) ? msgid : msgid_plural;
 		else if (typeof(msgstr) == 'string')
 			return msgstr;
 		else
-			return msgstr[_luci2.i18n.plural(count)];
+			return msgstr[L.i18n.plural(count)];
 	};
 
 	this.setHash = function(key, value)
@@ -485,6 +485,152 @@ function LuCI2()
 		return n;
 	};
 
+	this.toColor = function(str)
+	{
+		if (typeof(str) != 'string' || str.length == 0)
+			return '#CCCCCC';
+
+		if (str == 'wan')
+			return '#F09090';
+		else if (str == 'lan')
+			return '#90F090';
+
+		var i = 0, hash = 0;
+
+		while (i < str.length)
+			hash = str.charCodeAt(i++) + ((hash << 5) - hash);
+
+		var r = (hash & 0xFF) % 128;
+		var g = ((hash >> 8) & 0xFF) % 128;
+
+		var min = 0;
+		var max = 128;
+
+		if ((r + g) < 128)
+			min = 128 - r - g;
+		else
+			max = 255 - r - g;
+
+		var b = min + (((hash >> 16) & 0xFF) % (max - min));
+
+		return '#%02X%02X%02X'.format(0xFF - r, 0xFF - g, 0xFF - b);
+	};
+
+	this.parseIPv4 = function(str)
+	{
+		if ((typeof(str) != 'string' && !(str instanceof String)) ||
+		    !str.match(/^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/))
+			return undefined;
+
+		var num = [ ];
+		var parts = str.split(/\./);
+
+		for (var i = 0; i < parts.length; i++)
+		{
+			var n = parseInt(parts[i], 10);
+			if (isNaN(n) || n > 255)
+				return undefined;
+
+			num.push(n);
+		}
+
+		return num;
+	};
+
+	this.parseIPv6 = function(str)
+	{
+		if ((typeof(str) != 'string' && !(str instanceof String)) ||
+		    !str.match(/^[a-fA-F0-9:]+(\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})?$/))
+			return undefined;
+
+		var parts = str.split(/::/);
+		if (parts.length == 0 || parts.length > 2)
+			return undefined;
+
+		var lnum = [ ];
+		if (parts[0].length > 0)
+		{
+			var left = parts[0].split(/:/);
+			for (var i = 0; i < left.length; i++)
+			{
+				var n = parseInt(left[i], 16);
+				if (isNaN(n))
+					return undefined;
+
+				lnum.push((n / 256) >> 0);
+				lnum.push(n % 256);
+			}
+		}
+
+		var rnum = [ ];
+		if (parts.length > 1 && parts[1].length > 0)
+		{
+			var right = parts[1].split(/:/);
+
+			for (var i = 0; i < right.length; i++)
+			{
+				if (right[i].indexOf('.') > 0)
+				{
+					var addr = L.parseIPv4(right[i]);
+					if (!addr)
+						return undefined;
+
+					rnum.push.apply(rnum, addr);
+					continue;
+				}
+
+				var n = parseInt(right[i], 16);
+				if (isNaN(n))
+					return undefined;
+
+				rnum.push((n / 256) >> 0);
+				rnum.push(n % 256);
+			}
+		}
+
+		if (rnum.length > 0 && (lnum.length + rnum.length) > 15)
+			return undefined;
+
+		var num = [ ];
+
+		num.push.apply(num, lnum);
+
+		for (var i = 0; i < (16 - lnum.length - rnum.length); i++)
+			num.push(0);
+
+		num.push.apply(num, rnum);
+
+		if (num.length > 16)
+			return undefined;
+
+		return num;
+	};
+
+	this.isNetmask = function(addr)
+	{
+		if (!$.isArray(addr))
+			return false;
+
+		var c;
+
+		for (c = 0; (c < addr.length) && (addr[c] == 255); c++);
+
+		if (c == addr.length)
+			return true;
+
+		if ((addr[c] == 254) || (addr[c] == 252) || (addr[c] == 248) ||
+			(addr[c] == 240) || (addr[c] == 224) || (addr[c] == 192) ||
+			(addr[c] == 128) || (addr[c] == 0))
+		{
+			for (c++; (c < addr.length) && (addr[c] == 0); c++);
+
+			if (c == addr.length)
+				return true;
+		}
+
+		return false;
+	};
+
 	this.globals = {
 		timeout:  15000,
 		resource: '/luci2',
@@ -505,7 +651,7 @@ function LuCI2()
 				data:        JSON.stringify(req),
 				dataType:    'json',
 				type:        'POST',
-				timeout:     _luci2.globals.timeout,
+				timeout:     L.globals.timeout,
 				_rpc_req:   req
 			}).then(cb, cb);
 		},
@@ -536,7 +682,7 @@ function LuCI2()
 			for (var i = 0; i < msg.length; i++)
 			{
 				/* fetch related request info */
-				var req = _luci2.rpc._requests[reqs[i].id];
+				var req = L.rpc._requests[reqs[i].id];
 				if (typeof(req) != 'object')
 					throw 'No related request for JSON response';
 
@@ -567,7 +713,7 @@ function LuCI2()
 				{
 					req.priv[0] = ret;
 					req.priv[1] = req.params;
-					ret = req.filter.apply(_luci2.rpc, req.priv);
+					ret = req.filter.apply(L.rpc, req.priv);
 				}
 
 				/* store response data */
@@ -577,7 +723,7 @@ function LuCI2()
 					data = ret;
 
 				/* delete request object */
-				delete _luci2.rpc._requests[reqs[i].id];
+				delete L.rpc._requests[reqs[i].id];
 			}
 
 			return $.Deferred().resolveWith(this, [ data ]);
@@ -608,7 +754,7 @@ function LuCI2()
 		flush: function()
 		{
 			if (!$.isArray(this._batch))
-				return _luci2.deferrable([ ]);
+				return L.deferrable([ ]);
 
 			var req = this._batch;
 			delete this._batch;
@@ -648,7 +794,7 @@ function LuCI2()
 					id:      _rpc._id++,
 					method:  'call',
 					params:  [
-						_luci2.globals.sid,
+						L.globals.sid,
 						options.object,
 						options.method,
 						params
@@ -660,7 +806,7 @@ function LuCI2()
 				if ($.isArray(_rpc._batch))
 				{
 					req.index = _rpc._batch.push(msg) - 1;
-					return _luci2.deferrable(msg);
+					return L.deferrable(msg);
 				}
 
 				/* call rpc */
@@ -674,7 +820,7 @@ function LuCI2()
 		init: function()
 		{
 			this.state = {
-				newid:   0,
+				newidx:  0,
 				values:  { },
 				creates: { },
 				changes: { },
@@ -683,38 +829,107 @@ function LuCI2()
 			};
 		},
 
-		_load: _luci2.rpc.declare({
+		callLoad: L.rpc.declare({
 			object: 'uci',
 			method: 'get',
 			params: [ 'config' ],
 			expect: { values: { } }
 		}),
 
-		_order: _luci2.rpc.declare({
+		callOrder: L.rpc.declare({
 			object: 'uci',
 			method: 'order',
 			params: [ 'config', 'sections' ]
 		}),
 
-		_add: _luci2.rpc.declare({
+		callAdd: L.rpc.declare({
 			object: 'uci',
 			method: 'add',
 			params: [ 'config', 'type', 'name', 'values' ],
 			expect: { section: '' }
 		}),
 
-		_set: _luci2.rpc.declare({
+		callSet: L.rpc.declare({
 			object: 'uci',
 			method: 'set',
 			params: [ 'config', 'section', 'values' ]
 		}),
 
-		_delete: _luci2.rpc.declare({
+		callDelete: L.rpc.declare({
 			object: 'uci',
 			method: 'delete',
 			params: [ 'config', 'section', 'options' ]
 		}),
 
+		callApply: L.rpc.declare({
+			object: 'uci',
+			method: 'apply',
+			params: [ 'timeout', 'rollback' ]
+		}),
+
+		callConfirm: L.rpc.declare({
+			object: 'uci',
+			method: 'confirm'
+		}),
+
+		createSID: function(conf)
+		{
+			var v = this.state.values;
+			var n = this.state.creates;
+			var sid;
+
+			do {
+				sid = "new%06x".format(Math.random() * 0xFFFFFF);
+			} while ((n[conf] && n[conf][sid]) || (v[conf] && v[conf][sid]));
+
+			return sid;
+		},
+
+		reorderSections: function()
+		{
+			var v = this.state.values;
+			var n = this.state.creates;
+			var r = this.state.reorder;
+
+			if ($.isEmptyObject(r))
+				return L.deferrable();
+
+			L.rpc.batch();
+
+			/*
+			 gather all created and existing sections, sort them according
+			 to their index value and issue an uci order call
+			*/
+			for (var c in r)
+			{
+				var o = [ ];
+
+				if (n[c])
+					for (var s in n[c])
+						o.push(n[c][s]);
+
+				for (var s in v[c])
+					o.push(v[c][s]);
+
+				if (o.length > 0)
+				{
+					o.sort(function(a, b) {
+						return (a['.index'] - b['.index']);
+					});
+
+					var sids = [ ];
+
+					for (var i = 0; i < o.length; i++)
+						sids.push(o[i]['.name']);
+
+					this.callOrder(c, sids);
+				}
+			}
+
+			this.state.reorder = { };
+			return L.rpc.flush();
+		},
+
 		load: function(packages)
 		{
 			var self = this;
@@ -724,17 +939,17 @@ function LuCI2()
 			if (!$.isArray(packages))
 				packages = [ packages ];
 
-			_luci2.rpc.batch();
+			L.rpc.batch();
 
 			for (var i = 0; i < packages.length; i++)
-				if (!seen[packages[i]])
+				if (!seen[packages[i]] && !self.state.values[packages[i]])
 				{
 					pkgs.push(packages[i]);
 					seen[packages[i]] = true;
-					self._load(packages[i]);
+					self.callLoad(packages[i]);
 				}
 
-			return _luci2.rpc.flush().then(function(responses) {
+			return L.rpc.flush().then(function(responses) {
 				for (var i = 0; i < responses.length; i++)
 					self.state.values[pkgs[i]] = responses[i];
 
@@ -758,21 +973,21 @@ function LuCI2()
 
 		add: function(conf, type, name)
 		{
-			var c = this.state.creates;
-			var s = '.new.%d'.format(this.state.newid++);
+			var n = this.state.creates;
+			var sid = this.createSID(conf);
 
-			if (!c[conf])
-				c[conf] = { };
+			if (!n[conf])
+				n[conf] = { };
 
-			c[conf][s] = {
+			n[conf][sid] = {
 				'.type':      type,
-				'.name':      s,
+				'.name':      sid,
 				'.create':    name,
 				'.anonymous': !name,
-				'.index':     1000 + this.state.newid
+				'.index':     1000 + this.state.newidx++
 			};
 
-			return s;
+			return sid;
 		},
 
 		remove: function(conf, sid)
@@ -782,10 +997,9 @@ function LuCI2()
 			var d = this.state.deletes;
 
 			/* requested deletion of a just created section */
-			if (sid.indexOf('.new.') == 0)
+			if (n[conf] && n[conf][sid])
 			{
-				if (n[conf])
-					delete n[conf][sid];
+				delete n[conf][sid];
 			}
 			else
 			{
@@ -845,7 +1059,7 @@ function LuCI2()
 				return undefined;
 
 			/* requested option in a just created section */
-			if (sid.indexOf('.new.') == 0)
+			if (n[conf] && n[conf][sid])
 			{
 				if (!n[conf])
 					return undefined;
@@ -890,6 +1104,7 @@ function LuCI2()
 
 		set: function(conf, sid, opt, val)
 		{
+			var v = this.state.values;
 			var n = this.state.creates;
 			var c = this.state.changes;
 			var d = this.state.deletes;
@@ -899,15 +1114,12 @@ function LuCI2()
 			    opt.charAt(0) == '.')
 				return;
 
-			if (sid.indexOf('.new.') == 0)
+			if (n[conf] && n[conf][sid])
 			{
-				if (n[conf] && n[conf][sid])
-				{
-					if (typeof(val) != 'undefined')
-						n[conf][sid][opt] = val;
-					else
-						delete n[conf][sid][opt];
-				}
+				if (typeof(val) != 'undefined')
+					n[conf][sid][opt] = val;
+				else
+					delete n[conf][sid][opt];
 			}
 			else if (typeof(val) != 'undefined')
 			{
@@ -915,6 +1127,10 @@ function LuCI2()
 				if (d[conf] && d[conf][sid] === true)
 					return;
 
+				/* only set in existing sections */
+				if (!v[conf] || !v[conf][sid])
+					return;
+
 				if (!c[conf])
 					c[conf] = { };
 
@@ -923,12 +1139,16 @@ function LuCI2()
 
 				/* undelete option */
 				if (d[conf] && d[conf][sid])
-					d[conf][sid] = _luci2.filterArray(d[conf][sid], opt);
+					d[conf][sid] = L.filterArray(d[conf][sid], opt);
 
 				c[conf][sid][opt] = val;
 			}
 			else
 			{
+				/* only delete in existing sections */
+				if (!v[conf] || !v[conf][sid])
+					return;
+
 				if (!d[conf])
 					d[conf] = { };
 
@@ -945,61 +1165,33 @@ function LuCI2()
 			return this.set(conf, sid, opt, undefined);
 		},
 
-		_reload: function()
+		get_first: function(conf, type, opt)
 		{
-			var pkgs = [ ];
-
-			for (var pkg in this.state.values)
-				pkgs.push(pkg);
+			var sid = undefined;
 
-			this.init();
+			L.uci.sections(conf, type, function(s) {
+				if (typeof(sid) != 'string')
+					sid = s['.name'];
+			});
 
-			return this.load(pkgs);
+			return this.get(conf, sid, opt);
 		},
 
-		_reorder: function()
+		set_first: function(conf, type, opt, val)
 		{
-			var v = this.state.values;
-			var n = this.state.creates;
-			var r = this.state.reorder;
-
-			if ($.isEmptyObject(r))
-				return _luci2.deferrable();
-
-			_luci2.rpc.batch();
-
-			/*
-			 gather all created and existing sections, sort them according
-			 to their index value and issue an uci order call
-			*/
-			for (var c in r)
-			{
-				var o = [ ];
-
-				if (n && n[c])
-					for (var s in n[c])
-						o.push(n[c][s]);
-
-				for (var s in v[c])
-					o.push(v[c][s]);
-
-				if (o.length > 0)
-				{
-					o.sort(function(a, b) {
-						return (a['.index'] - b['.index']);
-					});
-
-					var sids = [ ];
+			var sid = undefined;
 
-					for (var i = 0; i < o.length; i++)
-						sids.push(o[i]['.name']);
+			L.uci.sections(conf, type, function(s) {
+				if (typeof(sid) != 'string')
+					sid = s['.name'];
+			});
 
-					this._order(c, sids);
-				}
-			}
+			return this.set(conf, sid, opt, val);
+		},
 
-			this.state.reorder = { };
-			return _luci2.rpc.flush();
+		unset_first: function(conf, type, opt)
+		{
+			return this.set_first(conf, type, opt, undefined);
 		},
 
 		swap: function(conf, sid1, sid2)
@@ -1022,49 +1214,67 @@ function LuCI2()
 
 		save: function()
 		{
-			_luci2.rpc.batch();
+			L.rpc.batch();
+
+			var v = this.state.values;
+			var n = this.state.creates;
+			var c = this.state.changes;
+			var d = this.state.deletes;
 
 			var self = this;
 			var snew = [ ];
+			var pkgs = { };
 
-			if (self.state.creates)
-				for (var c in self.state.creates)
-					for (var s in self.state.creates[c])
+			if (n)
+				for (var conf in n)
+				{
+					for (var sid in n[conf])
 					{
 						var r = {
-							config: c,
+							config: conf,
 							values: { }
 						};
 
-						for (var k in self.state.creates[c][s])
+						for (var k in n[conf][sid])
 						{
 							if (k == '.type')
-								r.type = self.state.creates[c][s][k];
+								r.type = n[conf][sid][k];
 							else if (k == '.create')
-								r.name = self.state.creates[c][s][k];
+								r.name = n[conf][sid][k];
 							else if (k.charAt(0) != '.')
-								r.values[k] = self.state.creates[c][s][k];
+								r.values[k] = n[conf][sid][k];
 						}
 
-						snew.push(self.state.creates[c][s]);
+						snew.push(n[conf][sid]);
 
-						self._add(r.config, r.type, r.name, r.values);
+						self.callAdd(r.config, r.type, r.name, r.values);
 					}
 
-			if (self.state.changes)
-				for (var c in self.state.changes)
-					for (var s in self.state.changes[c])
-						self._set(c, s, self.state.changes[c][s]);
+					pkgs[conf] = true;
+				}
+
+			if (c)
+				for (var conf in c)
+				{
+					for (var sid in c[conf])
+						self.callSet(conf, sid, c[conf][sid]);
+
+					pkgs[conf] = true;
+				}
 
-			if (self.state.deletes)
-				for (var c in self.state.deletes)
-					for (var s in self.state.deletes[c])
+			if (d)
+				for (var conf in d)
+				{
+					for (var sid in d[conf])
 					{
-						var o = self.state.deletes[c][s];
-						self._delete(c, s, (o === true) ? undefined : o);
+						var o = d[conf][sid];
+						self.callDelete(conf, sid, (o === true) ? undefined : o);
 					}
 
-			return _luci2.rpc.flush().then(function(responses) {
+					pkgs[conf] = true;
+				}
+
+			return L.rpc.flush().then(function(responses) {
 				/*
 				 array "snew" holds references to the created uci sections,
 				 use it to assign the returned names of the new sections
@@ -1072,20 +1282,15 @@ function LuCI2()
 				for (var i = 0; i < snew.length; i++)
 					snew[i]['.name'] = responses[i];
 
-				return self._reorder();
-			});
-		},
+				return self.reorderSections();
+			}).then(function() {
+				pkgs = L.toArray(pkgs);
 
-		_apply: _luci2.rpc.declare({
-			object: 'uci',
-			method: 'apply',
-			params: [ 'timeout', 'rollback' ]
-		}),
+				self.unload(pkgs);
 
-		_confirm: _luci2.rpc.declare({
-			object: 'uci',
-			method: 'confirm'
-		}),
+				return self.load(pkgs);
+			});
+		},
 
 		apply: function(timeout)
 		{
@@ -1096,7 +1301,7 @@ function LuCI2()
 			if (typeof(timeout) != 'number' || timeout < 1)
 				timeout = 10;
 
-			self._apply(timeout, true).then(function(rv) {
+			self.callApply(timeout, true).then(function(rv) {
 				if (rv != 0)
 				{
 					deferred.rejectWith(self, [ rv ]);
@@ -1106,7 +1311,7 @@ function LuCI2()
 				var try_deadline = date.getTime() + 1000 * timeout;
 				var try_confirm = function()
 				{
-					return self._confirm().then(function(rv) {
+					return self.callConfirm().then(function(rv) {
 						if (rv != 0)
 						{
 							if (date.getTime() < try_deadline)
@@ -1127,7 +1332,7 @@ function LuCI2()
 			return deferred;
 		},
 
-		changes: _luci2.rpc.declare({
+		changes: L.rpc.declare({
 			object: 'uci',
 			method: 'changes',
 			expect: { changes: { } }
@@ -1135,703 +1340,1668 @@ function LuCI2()
 
 		readable: function(conf)
 		{
-			return _luci2.session.hasACL('uci', conf, 'read');
+			return L.session.hasACL('uci', conf, 'read');
 		},
 
 		writable: function(conf)
 		{
-			return _luci2.session.hasACL('uci', conf, 'write');
+			return L.session.hasACL('uci', conf, 'write');
 		}
 	});
 
-	this.uci = {
+	this.uci = new this.UCIContext();
 
-		writable: function()
-		{
-			return _luci2.session.access('ubus', 'uci', 'commit');
-		},
-
-		add: _luci2.rpc.declare({
-			object: 'uci',
-			method: 'add',
-			params: [ 'config', 'type', 'name', 'values' ],
-			expect: { section: '' }
+	this.wireless = {
+		listDeviceNames: L.rpc.declare({
+			object: 'iwinfo',
+			method: 'devices',
+			expect: { 'devices': [ ] },
+			filter: function(data) {
+				data.sort();
+				return data;
+			}
 		}),
 
-		apply: function()
-		{
+		getDeviceStatus: L.rpc.declare({
+			object: 'iwinfo',
+			method: 'info',
+			params: [ 'device' ],
+			expect: { '': { } },
+			filter: function(data, params) {
+				if (!$.isEmptyObject(data))
+				{
+					data['device'] = params['device'];
+					return data;
+				}
+				return undefined;
+			}
+		}),
 
-		},
+		getAssocList: L.rpc.declare({
+			object: 'iwinfo',
+			method: 'assoclist',
+			params: [ 'device' ],
+			expect: { results: [ ] },
+			filter: function(data, params) {
+				for (var i = 0; i < data.length; i++)
+					data[i]['device'] = params['device'];
 
-		configs: _luci2.rpc.declare({
-			object: 'uci',
-			method: 'configs',
-			expect: { configs: [ ] }
-		}),
+				data.sort(function(a, b) {
+					if (a.bssid < b.bssid)
+						return -1;
+					else if (a.bssid > b.bssid)
+						return 1;
+					else
+						return 0;
+				});
 
-		_changes: _luci2.rpc.declare({
-			object: 'uci',
-			method: 'changes',
-			params: [ 'config' ],
-			expect: { changes: [ ] }
+				return data;
+			}
 		}),
 
-		changes: function(config)
-		{
-			if (typeof(config) == 'string')
-				return this._changes(config);
-
-			var configlist;
-			return this.configs().then(function(configs) {
-				_luci2.rpc.batch();
-				configlist = configs;
+		getWirelessStatus: function() {
+			return this.listDeviceNames().then(function(names) {
+				L.rpc.batch();
 
-				for (var i = 0; i < configs.length; i++)
-					_luci2.uci._changes(configs[i]);
+				for (var i = 0; i < names.length; i++)
+					L.wireless.getDeviceStatus(names[i]);
 
-				return _luci2.rpc.flush();
-			}).then(function(changes) {
+				return L.rpc.flush();
+			}).then(function(networks) {
 				var rv = { };
 
-				for (var i = 0; i < configlist.length; i++)
-					if (changes[i].length)
-						rv[configlist[i]] = changes[i];
+				var phy_attrs = [
+					'country', 'channel', 'frequency', 'frequency_offset',
+					'txpower', 'txpower_offset', 'hwmodes', 'hardware', 'phy'
+				];
 
-				return rv;
-			});
-		},
+				var net_attrs = [
+					'ssid', 'bssid', 'mode', 'quality', 'quality_max',
+					'signal', 'noise', 'bitrate', 'encryption'
+				];
 
-		commit: _luci2.rpc.declare({
-			object: 'uci',
-			method: 'commit',
-			params: [ 'config' ]
-		}),
+				for (var i = 0; i < networks.length; i++)
+				{
+					var phy = rv[networks[i].phy] || (
+						rv[networks[i].phy] = { networks: [ ] }
+					);
 
-		_delete_one: _luci2.rpc.declare({
-			object: 'uci',
-			method: 'delete',
-			params: [ 'config', 'section', 'option' ]
-		}),
+					var net = {
+						device: networks[i].device
+					};
 
-		_delete_multiple: _luci2.rpc.declare({
-			object: 'uci',
-			method: 'delete',
-			params: [ 'config', 'section', 'options' ]
-		}),
+					for (var j = 0; j < phy_attrs.length; j++)
+						phy[phy_attrs[j]] = networks[i][phy_attrs[j]];
 
-		'delete': function(config, section, option)
-		{
-			if ($.isArray(option))
-				return this._delete_multiple(config, section, option);
-			else
-				return this._delete_one(config, section, option);
-		},
+					for (var j = 0; j < net_attrs.length; j++)
+						net[net_attrs[j]] = networks[i][net_attrs[j]];
 
-		delete_all: _luci2.rpc.declare({
-			object: 'uci',
-			method: 'delete',
-			params: [ 'config', 'type', 'match' ]
-		}),
+					phy.networks.push(net);
+				}
 
-		_foreach: _luci2.rpc.declare({
-			object: 'uci',
-			method: 'get',
-			params: [ 'config', 'type' ],
-			expect: { values: { } }
-		}),
+				return rv;
+			});
+		},
 
-		foreach: function(config, type, cb)
+		getAssocLists: function()
 		{
-			return this._foreach(config, type).then(function(sections) {
-				for (var s in sections)
-					cb(sections[s]);
+			return this.listDeviceNames().then(function(names) {
+				L.rpc.batch();
+
+				for (var i = 0; i < names.length; i++)
+					L.wireless.getAssocList(names[i]);
+
+				return L.rpc.flush();
+			}).then(function(assoclists) {
+				var rv = [ ];
+
+				for (var i = 0; i < assoclists.length; i++)
+					for (var j = 0; j < assoclists[i].length; j++)
+						rv.push(assoclists[i][j]);
+
+				return rv;
 			});
 		},
 
-		get: _luci2.rpc.declare({
-			object: 'uci',
-			method: 'get',
-			params: [ 'config', 'section', 'option' ],
-			expect: { '': { } },
-			filter: function(data, params) {
-				if (typeof(params.option) == 'undefined')
-					return data.values ? data.values['.type'] : undefined;
-				else
-					return data.value;
+		formatEncryption: function(enc)
+		{
+			var format_list = function(l, s)
+			{
+				var rv = [ ];
+				for (var i = 0; i < l.length; i++)
+					rv.push(l[i].toUpperCase());
+				return rv.join(s ? s : ', ');
 			}
-		}),
 
-		get_all: _luci2.rpc.declare({
-			object: 'uci',
-			method: 'get',
-			params: [ 'config', 'section' ],
-			expect: { values: { } },
-			filter: function(data, params) {
-				if (typeof(params.section) == 'string')
-					data['.section'] = params.section;
-				else if (typeof(params.config) == 'string')
-					data['.package'] = params.config;
-				return data;
+			if (!enc || !enc.enabled)
+				return L.tr('None');
+
+			if (enc.wep)
+			{
+				if (enc.wep.length == 2)
+					return L.tr('WEP Open/Shared') + ' (%s)'.format(format_list(enc.ciphers, ', '));
+				else if (enc.wep[0] == 'shared')
+					return L.tr('WEP Shared Auth') + ' (%s)'.format(format_list(enc.ciphers, ', '));
+				else
+					return L.tr('WEP Open System') + ' (%s)'.format(format_list(enc.ciphers, ', '));
 			}
-		}),
+			else if (enc.wpa)
+			{
+				if (enc.wpa.length == 2)
+					return L.tr('mixed WPA/WPA2') + ' %s (%s)'.format(
+						format_list(enc.authentication, '/'),
+						format_list(enc.ciphers, ', ')
+					);
+				else if (enc.wpa[0] == 2)
+					return 'WPA2 %s (%s)'.format(
+						format_list(enc.authentication, '/'),
+						format_list(enc.ciphers, ', ')
+					);
+				else
+					return 'WPA %s (%s)'.format(
+						format_list(enc.authentication, '/'),
+						format_list(enc.ciphers, ', ')
+					);
+			}
+
+			return L.tr('Unknown');
+		}
+	};
 
-		get_first: function(config, type, option)
+	this.firewall = {
+		getZoneColor: function(zone)
 		{
-			return this._foreach(config, type).then(function(sections) {
-				for (var s in sections)
-				{
-					var val = (typeof(option) == 'string') ? sections[s][option] : sections[s]['.name'];
+			if ($.isPlainObject(zone))
+				zone = zone.name;
 
-					if (typeof(val) != 'undefined')
-						return val;
-				}
+			if (zone == 'lan')
+				return '#90f090';
+			else if (zone == 'wan')
+				return '#f09090';
 
-				return undefined;
-			});
-		},
+			for (var i = 0, hash = 0;
+				 i < zone.length;
+				 hash = zone.charCodeAt(i++) + ((hash << 5) - hash));
 
-		section: _luci2.rpc.declare({
-			object: 'uci',
-			method: 'add',
-			params: [ 'config', 'type', 'name', 'values' ],
-			expect: { section: '' }
-		}),
+			for (var i = 0, color = '#';
+				 i < 3;
+				 color += ('00' + ((hash >> i++ * 8) & 0xFF).tostring(16)).slice(-2));
 
-		_set: _luci2.rpc.declare({
-			object: 'uci',
-			method: 'set',
-			params: [ 'config', 'section', 'values' ]
-		}),
+			return color;
+		},
 
-		set: function(config, section, option, value)
+		findZoneByNetwork: function(network)
 		{
-			if (typeof(value) == 'undefined' && typeof(option) == 'string')
-				return this.section(config, section, option); /* option -> type */
-			else if ($.isPlainObject(option))
-				return this._set(config, section, option); /* option -> values */
+			var self = this;
+			var zone = undefined;
 
-			var values = { };
-			    values[option] = value;
+			return L.uci.sections('firewall', 'zone', function(z) {
+				if (!z.name || !z.network)
+					return;
 
-			return this._set(config, section, values);
-		},
+				if (!$.isArray(z.network))
+					z.network = z.network.split(/\s+/);
 
-		order: _luci2.rpc.declare({
-			object: 'uci',
-			method: 'order',
-			params: [ 'config', 'sections' ]
-		})
-	};
+				for (var i = 0; i < z.network.length; i++)
+				{
+					if (z.network[i] == network)
+					{
+						zone = z;
+						break;
+					}
+				}
+			}).then(function() {
+				if (zone)
+					zone.color = self.getZoneColor(zone);
 
-	this.network = {
-		listNetworkNames: function() {
-			return _luci2.rpc.list('network.interface.*').then(function(list) {
-				var names = [ ];
-				for (var name in list)
-					if (name != 'network.interface.loopback')
-						names.push(name.substring(18));
-				names.sort();
-				return names;
+				return zone;
 			});
-		},
+		}
+	};
 
-		listDeviceNames: _luci2.rpc.declare({
-			object: 'network.device',
-			method: 'status',
-			expect: { '': { } },
-			filter: function(data) {
-				var names = [ ];
-				for (var name in data)
-					if (name != 'lo')
-						names.push(name);
-				names.sort();
-				return names;
-			}
-		}),
+	this.NetworkModel = {
+		deviceBlacklist: [
+			/^gre[0-9]+$/,
+			/^gretap[0-9]+$/,
+			/^ifb[0-9]+$/,
+			/^ip6tnl[0-9]+$/,
+			/^sit[0-9]+$/,
+			/^wlan[0-9]+\.sta[0-9]+$/
+		],
+
+		rpcCacheFunctions: [
+			'protolist', 0, L.rpc.declare({
+				object: 'network',
+				method: 'get_proto_handlers',
+				expect: { '': { } }
+			}),
+			'ifstate', 1, L.rpc.declare({
+				object: 'network.interface',
+				method: 'dump',
+				expect: { 'interface': [ ] }
+			}),
+			'devstate', 2, L.rpc.declare({
+				object: 'network.device',
+				method: 'status',
+				expect: { '': { } }
+			}),
+			'wifistate', 0, L.rpc.declare({
+				object: 'network.wireless',
+				method: 'status',
+				expect: { '': { } }
+			}),
+			'bwstate', 2, L.rpc.declare({
+				object: 'luci2.network.bwmon',
+				method: 'statistics',
+				expect: { 'statistics': { } }
+			}),
+			'devlist', 2, L.rpc.declare({
+				object: 'luci2.network',
+				method: 'device_list',
+				expect: { 'devices': [ ] }
+			}),
+			'swlist', 0, L.rpc.declare({
+				object: 'luci2.network',
+				method: 'switch_list',
+				expect: { 'switches': [ ] }
+			})
+		],
+
+		loadProtocolHandler: function(proto)
+		{
+			var url = L.globals.resource + '/proto/' + proto + '.js';
+			var self = L.NetworkModel;
+
+			var def = $.Deferred();
+
+			$.ajax(url, {
+				method: 'GET',
+				cache: true,
+				dataType: 'text'
+			}).then(function(data) {
+				try {
+					var protoConstructorSource = (
+						'(function(L, $) { ' +
+							'return %s' +
+						'})(L, $);\n\n' +
+						'//@ sourceURL=%s'
+					).format(data, url);
 
-		getNetworkStatus: function()
-		{
-			var nets = [ ];
-			var devs = { };
+					var protoClass = eval(protoConstructorSource);
 
-			return this.listNetworkNames().then(function(names) {
-				_luci2.rpc.batch();
+					self.protocolHandlers[proto] = new protoClass();
+				}
+				catch(e) {
+					alert('Unable to instantiate proto "%s": %s'.format(url, e));
+				};
 
-				for (var i = 0; i < names.length; i++)
-					_luci2.network.getInterfaceStatus(names[i]);
+				def.resolve();
+			}).fail(function() {
+				def.resolve();
+			});
 
-				return _luci2.rpc.flush();
-			}).then(function(networks) {
-				for (var i = 0; i < networks.length; i++)
-				{
-					var net = nets[i] = networks[i];
-					var dev = net.l3_device || net.l2_device;
-					if (dev)
-						net.device = devs[dev] || (devs[dev] = { });
-				}
+			return def;
+		},
 
-				_luci2.rpc.batch();
+		loadProtocolHandlers: function()
+		{
+			var self = L.NetworkModel;
+			var deferreds = [
+				self.loadProtocolHandler('none')
+			];
 
-				for (var dev in devs)
-					_luci2.network.getDeviceStatus(dev);
+			for (var proto in self.rpcCache.protolist)
+				deferreds.push(self.loadProtocolHandler(proto));
 
-				return _luci2.rpc.flush();
-			}).then(function(devices) {
-				_luci2.rpc.batch();
+			return $.when.apply($, deferreds);
+		},
 
-				for (var i = 0; i < devices.length; i++)
-				{
-					var brm = devices[i]['bridge-members'];
-					delete devices[i]['bridge-members'];
+		callSwitchInfo: L.rpc.declare({
+			object: 'luci2.network',
+			method: 'switch_info',
+			params: [ 'switch' ],
+			expect: { 'info': { } }
+		}),
 
-					$.extend(devs[devices[i]['device']], devices[i]);
+		callSwitchInfoCallback: function(responses) {
+			var self = L.NetworkModel;
+			var swlist = self.rpcCache.swlist;
+			var swstate = self.rpcCache.swstate = { };
 
-					if (!brm)
-						continue;
+			for (var i = 0; i < responses.length; i++)
+				swstate[swlist[i]] = responses[i];
+		},
 
-					devs[devices[i]['device']].subdevices = [ ];
+		loadCacheCallback: function(level)
+		{
+			var self = L.NetworkModel;
+			var name = '_fetch_cache_cb_' + level;
+
+			return self[name] || (
+				self[name] = function(responses)
+				{
+					for (var i = 0; i < self.rpcCacheFunctions.length; i += 3)
+						if (!level || self.rpcCacheFunctions[i + 1] == level)
+							self.rpcCache[self.rpcCacheFunctions[i]] = responses.shift();
 
-					for (var j = 0; j < brm.length; j++)
+					if (!level)
 					{
-						if (!devs[brm[j]])
-						{
-							devs[brm[j]] = { };
-							_luci2.network.getDeviceStatus(brm[j]);
-						}
+						L.rpc.batch();
 
-						devs[devices[i]['device']].subdevices[j] = devs[brm[j]];
-					}
-				}
+						for (var i = 0; i < self.rpcCache.swlist.length; i++)
+							self.callSwitchInfo(self.rpcCache.swlist[i]);
 
-				return _luci2.rpc.flush();
-			}).then(function(subdevices) {
-				for (var i = 0; i < subdevices.length; i++)
-					$.extend(devs[subdevices[i]['device']], subdevices[i]);
+						return L.rpc.flush().then(self.callSwitchInfoCallback);
+					}
 
-				_luci2.rpc.batch();
+					return L.deferrable();
+				}
+			);
+		},
 
-				for (var dev in devs)
-					_luci2.wireless.getDeviceStatus(dev);
+		loadCache: function(level)
+		{
+			var self = L.NetworkModel;
 
-				return _luci2.rpc.flush();
-			}).then(function(wifidevices) {
-				for (var i = 0; i < wifidevices.length; i++)
-					if (wifidevices[i])
-						devs[wifidevices[i]['device']].wireless = wifidevices[i];
+			return L.uci.load(['network', 'wireless']).then(function() {
+				L.rpc.batch();
 
-				nets.sort(function(a, b) {
-					if (a['interface'] < b['interface'])
-						return -1;
-					else if (a['interface'] > b['interface'])
-						return 1;
-					else
-						return 0;
-				});
+				for (var i = 0; i < self.rpcCacheFunctions.length; i += 3)
+					if (!level || self.rpcCacheFunctions[i + 1] == level)
+						self.rpcCacheFunctions[i + 2]();
 
-				return nets;
+				return L.rpc.flush().then(self.loadCacheCallback(level || 0));
 			});
 		},
 
-		findWanInterfaces: function(cb)
+		isBlacklistedDevice: function(dev)
 		{
-			return this.listNetworkNames().then(function(names) {
-				_luci2.rpc.batch();
-
-				for (var i = 0; i < names.length; i++)
-					_luci2.network.getInterfaceStatus(names[i]);
+			for (var i = 0; i < this.deviceBlacklist.length; i++)
+				if (dev.match(this.deviceBlacklist[i]))
+					return true;
 
-				return _luci2.rpc.flush();
-			}).then(function(interfaces) {
-				var rv = [ undefined, undefined ];
+			return false;
+		},
 
-				for (var i = 0; i < interfaces.length; i++)
-				{
-					if (!interfaces[i].route)
-						continue;
+		sortDevicesCallback: function(a, b)
+		{
+			if (a.options.kind < b.options.kind)
+				return -1;
+			else if (a.options.kind > b.options.kind)
+				return 1;
 
-					for (var j = 0; j < interfaces[i].route.length; j++)
-					{
-						var rt = interfaces[i].route[j];
+			if (a.options.name < b.options.name)
+				return -1;
+			else if (a.options.name > b.options.name)
+				return 1;
 
-						if (typeof(rt.table) != 'undefined')
-							continue;
+			return 0;
+		},
 
-						if (rt.target == '0.0.0.0' && rt.mask == 0)
-							rv[0] = interfaces[i];
-						else if (rt.target == '::' && rt.mask == 0)
-							rv[1] = interfaces[i];
-					}
+		getDeviceObject: function(ifname)
+		{
+			var alias = (ifname.charAt(0) == '@');
+			return this.deviceObjects[ifname] || (
+				this.deviceObjects[ifname] = {
+					ifname:  ifname,
+					kind:    alias ? 'alias' : 'ethernet',
+					type:    alias ? 0 : 1,
+					up:      false,
+					changed: { }
 				}
+			);
+		},
 
-				return rv;
-			});
+		getInterfaceObject: function(name)
+		{
+			return this.interfaceObjects[name] || (
+				this.interfaceObjects[name] = {
+					name:    name,
+					proto:   this.protocolHandlers.none,
+					changed: { }
+				}
+			);
 		},
 
-		getDHCPLeases: _luci2.rpc.declare({
-			object: 'luci2.network',
-			method: 'dhcp_leases',
-			expect: { leases: [ ] }
-		}),
+		loadDevicesCallback: function()
+		{
+			var self = L.NetworkModel;
+			var wificount = { };
 
-		getDHCPv6Leases: _luci2.rpc.declare({
-			object: 'luci2.network',
-			method: 'dhcp6_leases',
-			expect: { leases: [ ] }
-		}),
+			for (var ifname in self.rpcCache.devstate)
+			{
+				if (self.isBlacklistedDevice(ifname))
+					continue;
 
-		getRoutes: _luci2.rpc.declare({
-			object: 'luci2.network',
-			method: 'routes',
-			expect: { routes: [ ] }
-		}),
+				var dev = self.rpcCache.devstate[ifname];
+				var entry = self.getDeviceObject(ifname);
 
-		getIPv6Routes: _luci2.rpc.declare({
-			object: 'luci2.network',
-			method: 'routes',
-			expect: { routes: [ ] }
-		}),
+				entry.up = dev.up;
 
-		getARPTable: _luci2.rpc.declare({
-			object: 'luci2.network',
-			method: 'arp_table',
-			expect: { entries: [ ] }
-		}),
+				switch (dev.type)
+				{
+				case 'IP tunnel':
+					entry.kind = 'tunnel';
+					break;
 
-		getInterfaceStatus: _luci2.rpc.declare({
-			object: 'network.interface',
-			method: 'status',
-			params: [ 'interface' ],
-			expect: { '': { } },
-			filter: function(data, params) {
-				data['interface'] = params['interface'];
-				data['l2_device'] = data['device'];
-				delete data['device'];
-				return data;
+				case 'Bridge':
+					entry.kind = 'bridge';
+					//entry.ports = dev['bridge-members'].sort();
+					break;
+				}
 			}
-		}),
 
-		getDeviceStatus: _luci2.rpc.declare({
-			object: 'network.device',
-			method: 'status',
-			params: [ 'name' ],
-			expect: { '': { } },
-			filter: function(data, params) {
-				data['device'] = params['name'];
-				return data;
-			}
-		}),
+			for (var i = 0; i < self.rpcCache.devlist.length; i++)
+			{
+				var dev = self.rpcCache.devlist[i];
 
-		getConntrackCount: _luci2.rpc.declare({
-			object: 'luci2.network',
-			method: 'conntrack_count',
-			expect: { '': { count: 0, limit: 0 } }
-		}),
+				if (self.isBlacklistedDevice(dev.device))
+					continue;
 
-		listSwitchNames: _luci2.rpc.declare({
-			object: 'luci2.network',
-			method: 'switch_list',
-			expect: { switches: [ ] }
-		}),
+				var entry = self.getDeviceObject(dev.device);
 
-		getSwitchInfo: _luci2.rpc.declare({
-			object: 'luci2.network',
-			method: 'switch_info',
-			params: [ 'switch' ],
-			expect: { info: { } },
-			filter: function(data, params) {
-				data['attrs']      = data['switch'];
-				data['vlan_attrs'] = data['vlan'];
-				data['port_attrs'] = data['port'];
-				data['switch']     = params['switch'];
+				entry.up   = dev.is_up;
+				entry.type = dev.type;
 
-				delete data.vlan;
-				delete data.port;
+				switch (dev.type)
+				{
+				case 1: /* Ethernet */
+					if (dev.is_bridge)
+						entry.kind = 'bridge';
+					else if (dev.is_tuntap)
+						entry.kind = 'tunnel';
+					else if (dev.is_wireless)
+						entry.kind = 'wifi';
+					break;
 
-				return data;
+				case 512: /* PPP */
+				case 768: /* IP-IP Tunnel */
+				case 769: /* IP6-IP6 Tunnel */
+				case 776: /* IPv6-in-IPv4 */
+				case 778: /* GRE over IP */
+					entry.kind = 'tunnel';
+					break;
+				}
 			}
-		}),
 
-		getSwitchStatus: _luci2.rpc.declare({
-			object: 'luci2.network',
-			method: 'switch_status',
-			params: [ 'switch' ],
-			expect: { ports: [ ] }
-		}),
+			var net = L.uci.sections('network');
+			for (var i = 0; i < net.length; i++)
+			{
+				var s = net[i];
+				var sid = s['.name'];
 
+				if (s['.type'] == 'device' && s.name)
+				{
+					var entry = self.getDeviceObject(s.name);
 
-		runPing: _luci2.rpc.declare({
-			object: 'luci2.network',
-			method: 'ping',
-			params: [ 'data' ],
-			expect: { '': { code: -1 } }
-		}),
+					switch (s.type)
+					{
+					case 'macvlan':
+					case 'tunnel':
+						entry.kind = 'tunnel';
+						break;
+					}
 
-		runPing6: _luci2.rpc.declare({
-			object: 'luci2.network',
-			method: 'ping6',
-			params: [ 'data' ],
-			expect: { '': { code: -1 } }
-		}),
+					entry.sid = sid;
+				}
+				else if (s['.type'] == 'interface' && !s['.anonymous'] && s.ifname)
+				{
+					var ifnames = L.toArray(s.ifname);
 
-		runTraceroute: _luci2.rpc.declare({
-			object: 'luci2.network',
-			method: 'traceroute',
-			params: [ 'data' ],
-			expect: { '': { code: -1 } }
-		}),
+					for (var j = 0; j < ifnames.length; j++)
+						self.getDeviceObject(ifnames[j]);
 
-		runTraceroute6: _luci2.rpc.declare({
-			object: 'luci2.network',
-			method: 'traceroute6',
-			params: [ 'data' ],
-			expect: { '': { code: -1 } }
-		}),
+					if (s['.name'] != 'loopback')
+					{
+						var entry = self.getDeviceObject('@%s'.format(s['.name']));
 
-		runNslookup: _luci2.rpc.declare({
-			object: 'luci2.network',
-			method: 'nslookup',
-			params: [ 'data' ],
-			expect: { '': { code: -1 } }
-		}),
+						entry.type = 0;
+						entry.kind = 'alias';
+						entry.sid  = sid;
+					}
+				}
+				else if (s['.type'] == 'switch_vlan' && s.device)
+				{
+					var sw = self.rpcCache.swstate[s.device];
+					var vid = parseInt(s.vid || s.vlan);
+					var ports = L.toArray(s.ports);
 
+					if (!sw || !ports.length || isNaN(vid))
+						continue;
 
-		setUp: _luci2.rpc.declare({
-			object: 'luci2.network',
-			method: 'ifup',
-			params: [ 'data' ],
-			expect: { '': { code: -1 } }
-		}),
+					var ifname = undefined;
 
-		setDown: _luci2.rpc.declare({
-			object: 'luci2.network',
-			method: 'ifdown',
-			params: [ 'data' ],
-			expect: { '': { code: -1 } }
-		})
-	};
+					for (var j = 0; j < ports.length; j++)
+					{
+						var port = parseInt(ports[j]);
+						var tag = (ports[j].replace(/[^tu]/g, '') == 't');
 
-	this.wireless = {
-		listDeviceNames: _luci2.rpc.declare({
-			object: 'iwinfo',
-			method: 'devices',
-			expect: { 'devices': [ ] },
-			filter: function(data) {
-				data.sort();
-				return data;
+						if (port == sw.cpu_port)
+						{
+							// XXX: need a way to map switch to netdev
+							if (tag)
+								ifname = 'eth0.%d'.format(vid);
+							else
+								ifname = 'eth0';
+
+							break;
+						}
+					}
+
+					if (!ifname)
+						continue;
+
+					var entry = self.getDeviceObject(ifname);
+
+					entry.kind = 'vlan';
+					entry.sid  = sid;
+					entry.vsw  = sw;
+					entry.vid  = vid;
+				}
 			}
-		}),
 
-		getDeviceStatus: _luci2.rpc.declare({
-			object: 'iwinfo',
-			method: 'info',
-			params: [ 'device' ],
-			expect: { '': { } },
-			filter: function(data, params) {
-				if (!$.isEmptyObject(data))
+			var wifi = L.uci.sections('wireless');
+			for (var i = 0; i < wifi.length; i++)
+			{
+				var s = wifi[i];
+				var sid = s['.name'];
+
+				if (s['.type'] == 'wifi-iface' && s.device)
 				{
-					data['device'] = params['device'];
-					return data;
+					var r = parseInt(s.device.replace(/^[^0-9]+/, ''));
+					var n = wificount[s.device] = (wificount[s.device] || 0) + 1;
+					var id = 'radio%d.network%d'.format(r, n);
+					var ifname = id;
+
+					if (self.rpcCache.wifistate[s.device])
+					{
+						var ifcs = self.rpcCache.wifistate[s.device].interfaces;
+						for (var ifc in ifcs)
+						{
+							if (ifcs[ifc].section == sid && ifcs[ifc].ifname)
+							{
+								ifname = ifcs[ifc].ifname;
+								break;
+							}
+						}
+					}
+
+					var entry = self.getDeviceObject(ifname);
+
+					entry.kind   = 'wifi';
+					entry.sid    = sid;
+					entry.wid    = id;
+					entry.wdev   = s.device;
+					entry.wmode  = s.mode;
+					entry.wssid  = s.ssid;
+					entry.wbssid = s.bssid;
 				}
-				return undefined;
 			}
-		}),
 
-		getAssocList: _luci2.rpc.declare({
-			object: 'iwinfo',
-			method: 'assoclist',
-			params: [ 'device' ],
-			expect: { results: [ ] },
-			filter: function(data, params) {
-				for (var i = 0; i < data.length; i++)
-					data[i]['device'] = params['device'];
+			for (var i = 0; i < net.length; i++)
+			{
+				var s = net[i];
+				var sid = s['.name'];
 
-				data.sort(function(a, b) {
-					if (a.bssid < b.bssid)
-						return -1;
-					else if (a.bssid > b.bssid)
-						return 1;
-					else
-						return 0;
-				});
+				if (s['.type'] == 'interface' && !s['.anonymous'] && s.type == 'bridge')
+				{
+					var ifnames = L.toArray(s.ifname);
 
-				return data;
-			}
-		}),
+					for (var ifname in self.deviceObjects)
+					{
+						var dev = self.deviceObjects[ifname];
 
-		getWirelessStatus: function() {
-			return this.listDeviceNames().then(function(names) {
-				_luci2.rpc.batch();
+						if (dev.kind != 'wifi')
+							continue;
 
-				for (var i = 0; i < names.length; i++)
-					_luci2.wireless.getDeviceStatus(names[i]);
+						var wnets = L.toArray(L.uci.get('wireless', dev.sid, 'network'));
+						if ($.inArray(sid, wnets) > -1)
+							ifnames.push(ifname);
+					}
 
-				return _luci2.rpc.flush();
-			}).then(function(networks) {
-				var rv = { };
+					entry = self.getDeviceObject('br-%s'.format(s['.name']));
+					entry.type  = 1;
+					entry.kind  = 'bridge';
+					entry.sid   = sid;
+					entry.ports = ifnames.sort();
+				}
+			}
+		},
 
-				var phy_attrs = [
-					'country', 'channel', 'frequency', 'frequency_offset',
-					'txpower', 'txpower_offset', 'hwmodes', 'hardware', 'phy'
-				];
+		loadInterfacesCallback: function()
+		{
+			var self = L.NetworkModel;
+			var net = L.uci.sections('network');
 
-				var net_attrs = [
-					'ssid', 'bssid', 'mode', 'quality', 'quality_max',
-					'signal', 'noise', 'bitrate', 'encryption'
-				];
+			for (var i = 0; i < net.length; i++)
+			{
+				var s = net[i];
+				var sid = s['.name'];
 
-				for (var i = 0; i < networks.length; i++)
+				if (s['.type'] == 'interface' && !s['.anonymous'] && s.proto)
 				{
-					var phy = rv[networks[i].phy] || (
-						rv[networks[i].phy] = { networks: [ ] }
-					);
+					var entry = self.getInterfaceObject(s['.name']);
+					var proto = self.protocolHandlers[s.proto] || self.protocolHandlers.none;
 
-					var net = {
-						device: networks[i].device
-					};
+					var l3dev = undefined;
+					var l2dev = undefined;
 
-					for (var j = 0; j < phy_attrs.length; j++)
-						phy[phy_attrs[j]] = networks[i][phy_attrs[j]];
+					var ifnames = L.toArray(s.ifname);
 
-					for (var j = 0; j < net_attrs.length; j++)
-						net[net_attrs[j]] = networks[i][net_attrs[j]];
+					for (var ifname in self.deviceObjects)
+					{
+						var dev = self.deviceObjects[ifname];
 
-					phy.networks.push(net);
+						if (dev.kind != 'wifi')
+							continue;
+
+						var wnets = L.toArray(L.uci.get('wireless', dev.sid, 'network'));
+						if ($.inArray(entry.name, wnets) > -1)
+							ifnames.push(ifname);
+					}
+
+					if (proto.virtual)
+						l3dev = '%s-%s'.format(s.proto, entry.name);
+					else if (s.type == 'bridge')
+						l3dev = 'br-%s'.format(entry.name);
+					else
+						l3dev = ifnames[0];
+
+					if (!proto.virtual && s.type == 'bridge')
+						l2dev = 'br-%s'.format(entry.name);
+					else if (!proto.virtual)
+						l2dev = ifnames[0];
+
+					entry.proto = proto;
+					entry.sid   = sid;
+					entry.l3dev = l3dev;
+					entry.l2dev = l2dev;
 				}
+			}
 
-				return rv;
-			});
+			for (var i = 0; i < self.rpcCache.ifstate.length; i++)
+			{
+				var iface = self.rpcCache.ifstate[i];
+				var entry = self.getInterfaceObject(iface['interface']);
+				var proto = self.protocolHandlers[iface.proto] || self.protocolHandlers.none;
+
+				/* this is a virtual interface, either deleted from config but
+				   not applied yet or set up from external tools (6rd) */
+				if (!entry.sid)
+				{
+					entry.proto = proto;
+					entry.l2dev = iface.device;
+					entry.l3dev = iface.l3_device;
+				}
+			}
 		},
 
-		getAssocLists: function()
+		init: function()
 		{
-			return this.listDeviceNames().then(function(names) {
-				_luci2.rpc.batch();
+			var self = this;
 
-				for (var i = 0; i < names.length; i++)
-					_luci2.wireless.getAssocList(names[i]);
+			if (self.rpcCache)
+				return L.deferrable();
 
-				return _luci2.rpc.flush();
-			}).then(function(assoclists) {
-				var rv = [ ];
+			self.rpcCache         = { };
+			self.deviceObjects    = { };
+			self.interfaceObjects = { };
+			self.protocolHandlers = { };
 
-				for (var i = 0; i < assoclists.length; i++)
-					for (var j = 0; j < assoclists[i].length; j++)
-						rv.push(assoclists[i][j]);
+			return self.loadCache()
+				.then(self.loadProtocolHandlers)
+				.then(self.loadDevicesCallback)
+				.then(self.loadInterfacesCallback);
+		},
 
-				return rv;
+		update: function()
+		{
+			delete this.rpcCache;
+			return this.init();
+		},
+
+		refreshInterfaceStatus: function()
+		{
+			return this.loadCache(1).then(this.loadInterfacesCallback);
+		},
+
+		refreshDeviceStatus: function()
+		{
+			return this.loadCache(2).then(this.loadDevicesCallback);
+		},
+
+		refreshStatus: function()
+		{
+			return this.loadCache(1)
+				.then(this.loadCache(2))
+				.then(this.loadDevicesCallback)
+				.then(this.loadInterfacesCallback);
+		},
+
+		getDevices: function()
+		{
+			var devs = [ ];
+
+			for (var ifname in this.deviceObjects)
+				if (ifname != 'lo')
+					devs.push(new L.NetworkModel.Device(this.deviceObjects[ifname]));
+
+			return devs.sort(this.sortDevicesCallback);
+		},
+
+		getDeviceByInterface: function(iface)
+		{
+			if (iface instanceof L.NetworkModel.Interface)
+				iface = iface.name();
+
+			if (this.interfaceObjects[iface])
+				return this.getDevice(this.interfaceObjects[iface].l3dev) ||
+				       this.getDevice(this.interfaceObjects[iface].l2dev);
+
+			return undefined;
+		},
+
+		getDevice: function(ifname)
+		{
+			if (this.deviceObjects[ifname])
+				return new L.NetworkModel.Device(this.deviceObjects[ifname]);
+
+			return undefined;
+		},
+
+		createDevice: function(name)
+		{
+			return new L.NetworkModel.Device(this.getDeviceObject(name));
+		},
+
+		getInterfaces: function()
+		{
+			var ifaces = [ ];
+
+			for (var name in this.interfaceObjects)
+				if (name != 'loopback')
+					ifaces.push(this.getInterface(name));
+
+			ifaces.sort(function(a, b) {
+				if (a.name() < b.name())
+					return -1;
+				else if (a.name() > b.name())
+					return 1;
+				else
+					return 0;
 			});
+
+			return ifaces;
 		},
 
-		formatEncryption: function(enc)
+		getInterfacesByDevice: function(dev)
 		{
-			var format_list = function(l, s)
+			var ifaces = [ ];
+
+			if (dev instanceof L.NetworkModel.Device)
+				dev = dev.name();
+
+			for (var name in this.interfaceObjects)
 			{
-				var rv = [ ];
-				for (var i = 0; i < l.length; i++)
-					rv.push(l[i].toUpperCase());
-				return rv.join(s ? s : ', ');
+				var iface = this.interfaceObjects[name];
+				if (iface.l2dev == dev || iface.l3dev == dev)
+					ifaces.push(this.getInterface(name));
 			}
 
-			if (!enc || !enc.enabled)
-				return _luci2.tr('None');
+			ifaces.sort(function(a, b) {
+				if (a.name() < b.name())
+					return -1;
+				else if (a.name() > b.name())
+					return 1;
+				else
+					return 0;
+			});
 
-			if (enc.wep)
+			return ifaces;
+		},
+
+		getInterface: function(iface)
+		{
+			if (this.interfaceObjects[iface])
+				return new L.NetworkModel.Interface(this.interfaceObjects[iface]);
+
+			return undefined;
+		},
+
+		getProtocols: function()
+		{
+			var rv = [ ];
+
+			for (var proto in this.protocolHandlers)
 			{
-				if (enc.wep.length == 2)
-					return _luci2.tr('WEP Open/Shared') + ' (%s)'.format(format_list(enc.ciphers, ', '));
-				else if (enc.wep[0] == 'shared')
-					return _luci2.tr('WEP Shared Auth') + ' (%s)'.format(format_list(enc.ciphers, ', '));
-				else
-					return _luci2.tr('WEP Open System') + ' (%s)'.format(format_list(enc.ciphers, ', '));
+				var pr = this.protocolHandlers[proto];
+
+				rv.push({
+					name:        proto,
+					description: pr.description,
+					virtual:     pr.virtual,
+					tunnel:      pr.tunnel
+				});
 			}
-			else if (enc.wpa)
-			{
-				if (enc.wpa.length == 2)
-					return _luci2.tr('mixed WPA/WPA2') + ' %s (%s)'.format(
-						format_list(enc.authentication, '/'),
-						format_list(enc.ciphers, ', ')
-					);
-				else if (enc.wpa[0] == 2)
-					return 'WPA2 %s (%s)'.format(
-						format_list(enc.authentication, '/'),
-						format_list(enc.ciphers, ', ')
-					);
+
+			return rv.sort(function(a, b) {
+				if (a.name < b.name)
+					return -1;
+				else if (a.name > b.name)
+					return 1;
 				else
-					return 'WPA %s (%s)'.format(
-						format_list(enc.authentication, '/'),
-						format_list(enc.ciphers, ', ')
-					);
+					return 0;
+			});
+		},
+
+		findWANByAddr: function(ipaddr)
+		{
+			for (var i = 0; i < this.rpcCache.ifstate.length; i++)
+			{
+				var ifstate = this.rpcCache.ifstate[i];
+
+				if (!ifstate.route)
+					continue;
+
+				for (var j = 0; j < ifstate.route.length; j++)
+					if (ifstate.route[j].mask == 0 &&
+					    ifstate.route[j].target == ipaddr &&
+					    typeof(ifstate.route[j].table) == 'undefined')
+					{
+						return this.getInterface(ifstate['interface']);
+					}
 			}
 
-			return _luci2.tr('Unknown');
+			return undefined;
+		},
+
+		findWAN: function()
+		{
+			return this.findWANByAddr('0.0.0.0');
+		},
+
+		findWAN6: function()
+		{
+			return this.findWANByAddr('::');
+		},
+
+		resolveAlias: function(ifname)
+		{
+			if (ifname instanceof L.NetworkModel.Device)
+				ifname = ifname.name();
+
+			var dev = this.deviceObjects[ifname];
+			var seen = { };
+
+			while (dev && dev.kind == 'alias')
+			{
+				// loop
+				if (seen[dev.ifname])
+					return undefined;
+
+				var ifc = this.interfaceObjects[dev.sid];
+
+				seen[dev.ifname] = true;
+				dev = ifc ? this.deviceObjects[ifc.l3dev] : undefined;
+			}
+
+			return dev ? this.getDevice(dev.ifname) : undefined;
 		}
 	};
 
-	this.firewall = {
-		getZoneColor: function(zone)
+	this.NetworkModel.Device = Class.extend({
+		wifiModeStrings: {
+			ap: L.tr('Master'),
+			sta: L.tr('Client'),
+			adhoc: L.tr('Ad-Hoc'),
+			monitor: L.tr('Monitor'),
+			wds: L.tr('Static WDS')
+		},
+
+		getStatus: function(key)
 		{
-			if ($.isPlainObject(zone))
-				zone = zone.name;
+			var s = L.NetworkModel.rpcCache.devstate[this.options.ifname];
+
+			if (s)
+				return key ? s[key] : s;
+
+			return undefined;
+		},
+
+		get: function(key)
+		{
+			var sid = this.options.sid;
+			var pkg = (this.options.kind == 'wifi') ? 'wireless' : 'network';
+			return L.uci.get(pkg, sid, key);
+		},
+
+		set: function(key, val)
+		{
+			var sid = this.options.sid;
+			var pkg = (this.options.kind == 'wifi') ? 'wireless' : 'network';
+			return L.uci.set(pkg, sid, key, val);
+		},
+
+		init: function()
+		{
+			if (typeof(this.options.type) == 'undefined')
+				this.options.type = 1;
+
+			if (typeof(this.options.kind) == 'undefined')
+				this.options.kind = 'ethernet';
+
+			if (typeof(this.options.networks) == 'undefined')
+				this.options.networks = [ ];
+		},
+
+		name: function()
+		{
+			return this.options.ifname;
+		},
+
+		description: function()
+		{
+			switch (this.options.kind)
+			{
+			case 'alias':
+				return L.tr('Alias for network "%s"').format(this.options.ifname.substring(1));
+
+			case 'bridge':
+				return L.tr('Network bridge');
+
+			case 'ethernet':
+				return L.tr('Network device');
+
+			case 'tunnel':
+				switch (this.options.type)
+				{
+				case 1: /* tuntap */
+					return L.tr('TAP device');
+
+				case 512: /* PPP */
+					return L.tr('PPP tunnel');
+
+				case 768: /* IP-IP Tunnel */
+					return L.tr('IP-in-IP tunnel');
+
+				case 769: /* IP6-IP6 Tunnel */
+					return L.tr('IPv6-in-IPv6 tunnel');
+
+				case 776: /* IPv6-in-IPv4 */
+					return L.tr('IPv6-over-IPv4 tunnel');
+					break;
+
+				case 778: /* GRE over IP */
+					return L.tr('GRE-over-IP tunnel');
+
+				default:
+					return L.tr('Tunnel device');
+				}
+
+			case 'vlan':
+				return L.tr('VLAN %d on %s').format(this.options.vid, this.options.vsw.model);
+
+			case 'wifi':
+				var o = this.options;
+				return L.trc('(Wifi-Mode) "(SSID)" on (radioX)', '%s "%h" on %s').format(
+					o.wmode ? this.wifiModeStrings[o.wmode] : L.tr('Unknown mode'),
+					o.wssid || '?', o.wdev
+				);
+			}
+
+			return L.tr('Unknown device');
+		},
+
+		icon: function(up)
+		{
+			var kind = this.options.kind;
+
+			if (kind == 'alias')
+				kind = 'ethernet';
+
+			if (typeof(up) == 'undefined')
+				up = this.isUp();
+
+			return L.globals.resource + '/icons/%s%s.png'.format(kind, up ? '' : '_disabled');
+		},
+
+		isUp: function()
+		{
+			var l = L.NetworkModel.rpcCache.devlist;
+
+			for (var i = 0; i < l.length; i++)
+				if (l[i].device == this.options.ifname)
+					return (l[i].is_up === true);
+
+			return false;
+		},
+
+		isAlias: function()
+		{
+			return (this.options.kind == 'alias');
+		},
+
+		isBridge: function()
+		{
+			return (this.options.kind == 'bridge');
+		},
+
+		isBridgeable: function()
+		{
+			return (this.options.type == 1 && this.options.kind != 'bridge');
+		},
+
+		isWireless: function()
+		{
+			return (this.options.kind == 'wifi');
+		},
+
+		isInNetwork: function(net)
+		{
+			if (!(net instanceof L.NetworkModel.Interface))
+				net = L.NetworkModel.getInterface(net);
+
+			if (net)
+			{
+				if (net.options.l3dev == this.options.ifname ||
+				    net.options.l2dev == this.options.ifname)
+					return true;
+
+				var dev = L.NetworkModel.deviceObjects[net.options.l2dev];
+				if (dev && dev.kind == 'bridge' && dev.ports)
+					return ($.inArray(this.options.ifname, dev.ports) > -1);
+			}
+
+			return false;
+		},
+
+		getMTU: function()
+		{
+			var dev = L.NetworkModel.rpcCache.devstate[this.options.ifname];
+			if (dev && !isNaN(dev.mtu))
+				return dev.mtu;
+
+			return undefined;
+		},
+
+		getMACAddress: function()
+		{
+			if (this.options.type != 1)
+				return undefined;
+
+			var dev = L.NetworkModel.rpcCache.devstate[this.options.ifname];
+			if (dev && dev.macaddr)
+				return dev.macaddr.toUpperCase();
+
+			return undefined;
+		},
+
+		getInterfaces: function()
+		{
+			return L.NetworkModel.getInterfacesByDevice(this.options.name);
+		},
+
+		getStatistics: function()
+		{
+			var s = this.getStatus('statistics') || { };
+			return {
+				rx_bytes: (s.rx_bytes || 0),
+				tx_bytes: (s.tx_bytes || 0),
+				rx_packets: (s.rx_packets || 0),
+				tx_packets: (s.tx_packets || 0)
+			};
+		},
+
+		getTrafficHistory: function()
+		{
+			var def = new Array(120);
+
+			for (var i = 0; i < 120; i++)
+				def[i] = 0;
+
+			var h = L.NetworkModel.rpcCache.bwstate[this.options.ifname] || { };
+			return {
+				rx_bytes: (h.rx_bytes || def),
+				tx_bytes: (h.tx_bytes || def),
+				rx_packets: (h.rx_packets || def),
+				tx_packets: (h.tx_packets || def)
+			};
+		},
+
+		removeFromInterface: function(iface)
+		{
+			if (!(iface instanceof L.NetworkModel.Interface))
+				iface = L.NetworkModel.getInterface(iface);
+
+			if (!iface)
+				return;
+
+			var ifnames = L.toArray(iface.get('ifname'));
+			if ($.inArray(this.options.ifname, ifnames) > -1)
+				iface.set('ifname', L.filterArray(ifnames, this.options.ifname));
+
+			if (this.options.kind != 'wifi')
+				return;
+
+			var networks = L.toArray(this.get('network'));
+			if ($.inArray(iface.name(), networks) > -1)
+				this.set('network', L.filterArray(networks, iface.name()));
+		},
+
+		attachToInterface: function(iface)
+		{
+			if (!(iface instanceof L.NetworkModel.Interface))
+				iface = L.NetworkModel.getInterface(iface);
+
+			if (!iface)
+				return;
+
+			if (this.options.kind != 'wifi')
+			{
+				var ifnames = L.toArray(iface.get('ifname'));
+				if ($.inArray(this.options.ifname, ifnames) < 0)
+				{
+					ifnames.push(this.options.ifname);
+					iface.set('ifname', (ifnames.length > 1) ? ifnames : ifnames[0]);
+				}
+			}
+			else
+			{
+				var networks = L.toArray(this.get('network'));
+				if ($.inArray(iface.name(), networks) < 0)
+				{
+					networks.push(iface.name());
+					this.set('network', (networks.length > 1) ? networks : networks[0]);
+				}
+			}
+		}
+	});
+
+	this.NetworkModel.Interface = Class.extend({
+		getStatus: function(key)
+		{
+			var s = L.NetworkModel.rpcCache.ifstate;
+
+			for (var i = 0; i < s.length; i++)
+				if (s[i]['interface'] == this.options.name)
+					return key ? s[i][key] : s[i];
+
+			return undefined;
+		},
+
+		get: function(key)
+		{
+			return L.uci.get('network', this.options.name, key);
+		},
+
+		set: function(key, val)
+		{
+			return L.uci.set('network', this.options.name, key, val);
+		},
+
+		name: function()
+		{
+			return this.options.name;
+		},
+
+		protocol: function()
+		{
+			return (this.get('proto') || 'none');
+		},
+
+		isUp: function()
+		{
+			return (this.getStatus('up') === true);
+		},
+
+		isVirtual: function()
+		{
+			return (typeof(this.options.sid) != 'string');
+		},
+
+		getProtocol: function()
+		{
+			var prname = this.get('proto') || 'none';
+			return L.NetworkModel.protocolHandlers[prname] || L.NetworkModel.protocolHandlers.none;
+		},
+
+		getUptime: function()
+		{
+			var uptime = this.getStatus('uptime');
+			return isNaN(uptime) ? 0 : uptime;
+		},
+
+		getDevice: function(resolveAlias)
+		{
+			if (this.options.l3dev)
+				return L.NetworkModel.getDevice(this.options.l3dev);
+
+			return undefined;
+		},
+
+		getPhysdev: function()
+		{
+			if (this.options.l2dev)
+				return L.NetworkModel.getDevice(this.options.l2dev);
+
+			return undefined;
+		},
+
+		getSubdevices: function()
+		{
+			var rv = [ ];
+			var dev = this.options.l2dev ?
+				L.NetworkModel.deviceObjects[this.options.l2dev] : undefined;
+
+			if (dev && dev.kind == 'bridge' && dev.ports && dev.ports.length)
+				for (var i = 0; i < dev.ports.length; i++)
+					rv.push(L.NetworkModel.getDevice(dev.ports[i]));
+
+			return rv;
+		},
+
+		getIPv4Addrs: function(mask)
+		{
+			var rv = [ ];
+			var addrs = this.getStatus('ipv4-address');
+
+			if (addrs)
+				for (var i = 0; i < addrs.length; i++)
+					if (!mask)
+						rv.push(addrs[i].address);
+					else
+						rv.push('%s/%d'.format(addrs[i].address, addrs[i].mask));
+
+			return rv;
+		},
+
+		getIPv6Addrs: function(mask)
+		{
+			var rv = [ ];
+			var addrs;
+
+			addrs = this.getStatus('ipv6-address');
+
+			if (addrs)
+				for (var i = 0; i < addrs.length; i++)
+					if (!mask)
+						rv.push(addrs[i].address);
+					else
+						rv.push('%s/%d'.format(addrs[i].address, addrs[i].mask));
+
+			addrs = this.getStatus('ipv6-prefix-assignment');
+
+			if (addrs)
+				for (var i = 0; i < addrs.length; i++)
+					if (!mask)
+						rv.push('%s1'.format(addrs[i].address));
+					else
+						rv.push('%s1/%d'.format(addrs[i].address, addrs[i].mask));
+
+			return rv;
+		},
+
+		getDNSAddrs: function()
+		{
+			var rv = [ ];
+			var addrs = this.getStatus('dns-server');
+
+			if (addrs)
+				for (var i = 0; i < addrs.length; i++)
+					rv.push(addrs[i]);
+
+			return rv;
+		},
+
+		getIPv4DNS: function()
+		{
+			var rv = [ ];
+			var dns = this.getStatus('dns-server');
+
+			if (dns)
+				for (var i = 0; i < dns.length; i++)
+					if (dns[i].indexOf(':') == -1)
+						rv.push(dns[i]);
+
+			return rv;
+		},
+
+		getIPv6DNS: function()
+		{
+			var rv = [ ];
+			var dns = this.getStatus('dns-server');
+
+			if (dns)
+				for (var i = 0; i < dns.length; i++)
+					if (dns[i].indexOf(':') > -1)
+						rv.push(dns[i]);
+
+			return rv;
+		},
+
+		getIPv4Gateway: function()
+		{
+			var rt = this.getStatus('route');
+
+			if (rt)
+				for (var i = 0; i < rt.length; i++)
+					if (rt[i].target == '0.0.0.0' && rt[i].mask == 0)
+						return rt[i].nexthop;
+
+			return undefined;
+		},
+
+		getIPv6Gateway: function()
+		{
+			var rt = this.getStatus('route');
+
+			if (rt)
+				for (var i = 0; i < rt.length; i++)
+					if (rt[i].target == '::' && rt[i].mask == 0)
+						return rt[i].nexthop;
+
+			return undefined;
+		},
+
+		getStatistics: function()
+		{
+			var dev = this.getDevice() || new L.NetworkModel.Device({});
+			return dev.getStatistics();
+		},
+
+		getTrafficHistory: function()
+		{
+			var dev = this.getDevice() || new L.NetworkModel.Device({});
+			return dev.getTrafficHistory();
+		},
+
+		renderBadge: function()
+		{
+			var badge = $('<span />')
+				.addClass('badge')
+				.text('%s: '.format(this.name()));
+
+			var dev = this.getDevice();
+			var subdevs = this.getSubdevices();
+
+			if (subdevs.length)
+				for (var j = 0; j < subdevs.length; j++)
+					badge.append($('<img />')
+						.attr('src', subdevs[j].icon())
+						.attr('title', '%s (%s)'.format(subdevs[j].description(), subdevs[j].name() || '?')));
+			else if (dev)
+				badge.append($('<img />')
+					.attr('src', dev.icon())
+					.attr('title', '%s (%s)'.format(dev.description(), dev.name() || '?')));
+			else
+				badge.append($('<em />').text(L.tr('(No devices attached)')));
+
+			return badge;
+		},
+
+		setDevices: function(devs)
+		{
+			var dev = this.getPhysdev();
+			var old_devs = [ ];
+			var changed = false;
+
+			if (dev && dev.isBridge())
+				old_devs = this.getSubdevices();
+			else if (dev)
+				old_devs = [ dev ];
+
+			if (old_devs.length != devs.length)
+				changed = true;
+			else
+				for (var i = 0; i < old_devs.length; i++)
+				{
+					var dev = devs[i];
+
+					if (dev instanceof L.NetworkModel.Device)
+						dev = dev.name();
+
+					if (!dev || old_devs[i].name() != dev)
+					{
+						changed = true;
+						break;
+					}
+				}
+
+			if (changed)
+			{
+				for (var i = 0; i < old_devs.length; i++)
+					old_devs[i].removeFromInterface(this);
+
+				for (var i = 0; i < devs.length; i++)
+				{
+					var dev = devs[i];
+
+					if (!(dev instanceof L.NetworkModel.Device))
+						dev = L.NetworkModel.getDevice(dev);
+
+					if (dev)
+						dev.attachToInterface(this);
+				}
+			}
+		},
+
+		changeProtocol: function(proto)
+		{
+			var pr = L.NetworkModel.protocolHandlers[proto];
+
+			if (!pr)
+				return;
+
+			for (var opt in (this.get() || { }))
+			{
+				switch (opt)
+				{
+				case 'type':
+				case 'ifname':
+				case 'macaddr':
+					if (pr.virtual)
+						this.set(opt, undefined);
+					break;
+
+				case 'auto':
+				case 'mtu':
+					break;
+
+				case 'proto':
+					this.set(opt, pr.protocol);
+					break;
+
+				default:
+					this.set(opt, undefined);
+					break;
+				}
+			}
+		},
+
+		createForm: function(mapwidget)
+		{
+			var self = this;
+			var proto = self.getProtocol();
+			var device = self.getDevice();
+
+			if (!mapwidget)
+				mapwidget = L.cbi.Map;
+
+			var map = new mapwidget('network', {
+				caption:     L.tr('Configure "%s"').format(self.name())
+			});
+
+			var section = map.section(L.cbi.SingleSection, self.name(), {
+				anonymous:   true
+			});
+
+			section.tab({
+				id:      'general',
+				caption: L.tr('General Settings')
+			});
+
+			section.tab({
+				id:      'advanced',
+				caption: L.tr('Advanced Settings')
+			});
+
+			section.tab({
+				id:      'ipv6',
+				caption: L.tr('IPv6')
+			});
+
+			section.tab({
+				id:      'physical',
+				caption: L.tr('Physical Settings')
+			});
+
+
+			section.taboption('general', L.cbi.CheckboxValue, 'auto', {
+				caption:     L.tr('Start on boot'),
+				optional:    true,
+				initial:     true
+			});
+
+			var pr = section.taboption('general', L.cbi.ListValue, 'proto', {
+				caption:     L.tr('Protocol')
+			});
+
+			pr.ucivalue = function(sid) {
+				return self.get('proto') || 'none';
+			};
+
+			var ok = section.taboption('general', L.cbi.ButtonValue, '_confirm', {
+				caption:     L.tr('Really switch?'),
+				description: L.tr('Changing the protocol will clear all configuration for this interface!'),
+				text:        L.tr('Change protocol')
+			});
+
+			ok.on('click', function(ev) {
+				self.changeProtocol(pr.formvalue(ev.data.sid));
+				self.createForm(mapwidget).show();
+			});
+
+			var protos = L.NetworkModel.getProtocols();
+
+			for (var i = 0; i < protos.length; i++)
+				pr.value(protos[i].name, protos[i].description);
+
+			proto.populateForm(section, self);
+
+			if (!proto.virtual)
+			{
+				var br = section.taboption('physical', L.cbi.CheckboxValue, 'type', {
+					caption:     L.tr('Network bridge'),
+					description: L.tr('Merges multiple devices into one logical bridge'),
+					optional:    true,
+					enabled:     'bridge',
+					disabled:    '',
+					initial:     ''
+				});
 
-			if (zone == 'lan')
-				return '#90f090';
-			else if (zone == 'wan')
-				return '#f09090';
+				section.taboption('physical', L.cbi.DeviceList, '__iface_multi', {
+					caption:     L.tr('Devices'),
+					multiple:    true,
+					bridges:     false
+				}).depends('type', true);
+
+				section.taboption('physical', L.cbi.DeviceList, '__iface_single', {
+					caption:     L.tr('Device'),
+					multiple:    false,
+					bridges:     true
+				}).depends('type', false);
+
+				var mac = section.taboption('physical', L.cbi.InputValue, 'macaddr', {
+					caption:     L.tr('Override MAC'),
+					optional:    true,
+					placeholder: device ? device.getMACAddress() : undefined,
+					datatype:    'macaddr'
+				})
 
-			for (var i = 0, hash = 0;
-				 i < zone.length;
-				 hash = zone.charCodeAt(i++) + ((hash << 5) - hash));
+				mac.ucivalue = function(sid)
+				{
+					if (device)
+						return device.get('macaddr');
 
-			for (var i = 0, color = '#';
-				 i < 3;
-				 color += ('00' + ((hash >> i++ * 8) & 0xFF).tozoneing(16)).slice(-2));
+					return this.callSuper('ucivalue', sid);
+				};
 
-			return color;
-		},
+				mac.save = function(sid)
+				{
+					if (!this.changed(sid))
+						return false;
 
-		findZoneByNetwork: function(network)
-		{
-			var self = this;
-			var zone = undefined;
+					if (device)
+						device.set('macaddr', this.formvalue(sid));
+					else
+						this.callSuper('set', sid);
 
-			return _luci2.uci.foreach('firewall', 'zone', function(z) {
-				if (!z.name || !z.network)
-					return;
+					return true;
+				};
+			}
 
-				if (!$.isArray(z.network))
-					z.network = z.network.split(/\s+/);
+			section.taboption('physical', L.cbi.InputValue, 'mtu', {
+				caption:     L.tr('Override MTU'),
+				optional:    true,
+				placeholder: device ? device.getMTU() : undefined,
+				datatype:    'range(1, 9000)'
+			});
 
-				for (var i = 0; i < z.network.length; i++)
+			section.taboption('physical', L.cbi.InputValue, 'metric', {
+				caption:     L.tr('Override Metric'),
+				optional:    true,
+				placeholder: 0,
+				datatype:    'uinteger'
+			});
+
+			for (var field in section.fields)
+			{
+				switch (field)
 				{
-					if (z.network[i] == network)
-					{
-						zone = z;
-						break;
-					}
+				case 'proto':
+					break;
+
+				case '_confirm':
+					for (var i = 0; i < protos.length; i++)
+						if (protos[i].name != (this.get('proto') || 'none'))
+							section.fields[field].depends('proto', protos[i].name);
+					break;
+
+				default:
+					section.fields[field].depends('proto', this.get('proto') || 'none', true);
+					break;
 				}
-			}).then(function() {
-				if (zone)
-					zone.color = self.getZoneColor(zone);
+			}
 
-				return zone;
-			});
+			return map;
 		}
-	};
+	});
+
+	this.NetworkModel.Protocol = this.NetworkModel.Interface.extend({
+		description: '__unknown__',
+		tunnel:      false,
+		virtual:     false,
+
+		populateForm: function(section, iface)
+		{
+
+		}
+	});
 
 	this.system = {
-		getSystemInfo: _luci2.rpc.declare({
+		getSystemInfo: L.rpc.declare({
 			object: 'system',
 			method: 'info',
 			expect: { '': { } }
 		}),
 
-		getBoardInfo: _luci2.rpc.declare({
+		getBoardInfo: L.rpc.declare({
 			object: 'system',
 			method: 'board',
 			expect: { '': { } }
 		}),
 
-		getDiskInfo: _luci2.rpc.declare({
+		getDiskInfo: L.rpc.declare({
 			object: 'luci2.system',
 			method: 'diskfree',
 			expect: { '': { } }
@@ -1839,13 +3009,13 @@ function LuCI2()
 
 		getInfo: function(cb)
 		{
-			_luci2.rpc.batch();
+			L.rpc.batch();
 
 			this.getSystemInfo();
 			this.getBoardInfo();
 			this.getDiskInfo();
 
-			return _luci2.rpc.flush().then(function(info) {
+			return L.rpc.flush().then(function(info) {
 				var rv = { };
 
 				$.extend(rv, info[0]);
@@ -1856,43 +3026,8 @@ function LuCI2()
 			});
 		},
 
-		getProcessList: _luci2.rpc.declare({
-			object: 'luci2.system',
-			method: 'process_list',
-			expect: { processes: [ ] },
-			filter: function(data) {
-				data.sort(function(a, b) { return a.pid - b.pid });
-				return data;
-			}
-		}),
-
-		getSystemLog: _luci2.rpc.declare({
-			object: 'luci2.system',
-			method: 'syslog',
-			expect: { log: '' }
-		}),
-
-		getKernelLog: _luci2.rpc.declare({
-			object: 'luci2.system',
-			method: 'dmesg',
-			expect: { log: '' }
-		}),
-
-		getZoneInfo: function(cb)
-		{
-			return $.getJSON(_luci2.globals.resource + '/zoneinfo.json', cb);
-		},
-
-		sendSignal: _luci2.rpc.declare({
-			object: 'luci2.system',
-			method: 'process_signal',
-			params: [ 'pid', 'signal' ],
-			filter: function(data) {
-				return (data == 0);
-			}
-		}),
 
-		initList: _luci2.rpc.declare({
+		initList: L.rpc.declare({
 			object: 'luci2.system',
 			method: 'init_list',
 			expect: { initscripts: [ ] },
@@ -1913,7 +3048,7 @@ function LuCI2()
 			});
 		},
 
-		initRun: _luci2.rpc.declare({
+		initRun: L.rpc.declare({
 			object: 'luci2.system',
 			method: 'init_action',
 			params: [ 'name', 'action' ],
@@ -1922,257 +3057,30 @@ function LuCI2()
 			}
 		}),
 
-		initStart:   function(init, cb) { return _luci2.system.initRun(init, 'start',   cb) },
-		initStop:    function(init, cb) { return _luci2.system.initRun(init, 'stop',    cb) },
-		initRestart: function(init, cb) { return _luci2.system.initRun(init, 'restart', cb) },
-		initReload:  function(init, cb) { return _luci2.system.initRun(init, 'reload',  cb) },
-		initEnable:  function(init, cb) { return _luci2.system.initRun(init, 'enable',  cb) },
-		initDisable: function(init, cb) { return _luci2.system.initRun(init, 'disable', cb) },
-
-
-		getRcLocal: _luci2.rpc.declare({
-			object: 'luci2.system',
-			method: 'rclocal_get',
-			expect: { data: '' }
-		}),
-
-		setRcLocal: _luci2.rpc.declare({
-			object: 'luci2.system',
-			method: 'rclocal_set',
-			params: [ 'data' ]
-		}),
-
-
-		getCrontab: _luci2.rpc.declare({
-			object: 'luci2.system',
-			method: 'crontab_get',
-			expect: { data: '' }
-		}),
-
-		setCrontab: _luci2.rpc.declare({
-			object: 'luci2.system',
-			method: 'crontab_set',
-			params: [ 'data' ]
-		}),
-
-
-		getSSHKeys: _luci2.rpc.declare({
-			object: 'luci2.system',
-			method: 'sshkeys_get',
-			expect: { keys: [ ] }
-		}),
-
-		setSSHKeys: _luci2.rpc.declare({
-			object: 'luci2.system',
-			method: 'sshkeys_set',
-			params: [ 'keys' ]
-		}),
-
-
-		setPassword: _luci2.rpc.declare({
-			object: 'luci2.system',
-			method: 'password_set',
-			params: [ 'user', 'password' ]
-		}),
-
-
-		listLEDs: _luci2.rpc.declare({
-			object: 'luci2.system',
-			method: 'led_list',
-			expect: { leds: [ ] }
-		}),
-
-		listUSBDevices: _luci2.rpc.declare({
-			object: 'luci2.system',
-			method: 'usb_list',
-			expect: { devices: [ ] }
-		}),
-
-
-		testUpgrade: _luci2.rpc.declare({
-			object: 'luci2.system',
-			method: 'upgrade_test',
-			expect: { '': { } }
-		}),
-
-		startUpgrade: _luci2.rpc.declare({
-			object: 'luci2.system',
-			method: 'upgrade_start',
-			params: [ 'keep' ]
-		}),
-
-		cleanUpgrade: _luci2.rpc.declare({
-			object: 'luci2.system',
-			method: 'upgrade_clean'
-		}),
-
-
-		restoreBackup: _luci2.rpc.declare({
-			object: 'luci2.system',
-			method: 'backup_restore'
-		}),
-
-		cleanBackup: _luci2.rpc.declare({
-			object: 'luci2.system',
-			method: 'backup_clean'
-		}),
-
-
-		getBackupConfig: _luci2.rpc.declare({
-			object: 'luci2.system',
-			method: 'backup_config_get',
-			expect: { config: '' }
-		}),
-
-		setBackupConfig: _luci2.rpc.declare({
-			object: 'luci2.system',
-			method: 'backup_config_set',
-			params: [ 'data' ]
-		}),
-
-
-		listBackup: _luci2.rpc.declare({
-			object: 'luci2.system',
-			method: 'backup_list',
-			expect: { files: [ ] }
-		}),
-
-
-		testReset: _luci2.rpc.declare({
-			object: 'luci2.system',
-			method: 'reset_test',
-			expect: { supported: false }
-		}),
-
-		startReset: _luci2.rpc.declare({
-			object: 'luci2.system',
-			method: 'reset_start'
-		}),
+		initStart:   function(init, cb) { return L.system.initRun(init, 'start',   cb) },
+		initStop:    function(init, cb) { return L.system.initRun(init, 'stop',    cb) },
+		initRestart: function(init, cb) { return L.system.initRun(init, 'restart', cb) },
+		initReload:  function(init, cb) { return L.system.initRun(init, 'reload',  cb) },
+		initEnable:  function(init, cb) { return L.system.initRun(init, 'enable',  cb) },
+		initDisable: function(init, cb) { return L.system.initRun(init, 'disable', cb) },
 
 
-		performReboot: _luci2.rpc.declare({
+		performReboot: L.rpc.declare({
 			object: 'luci2.system',
 			method: 'reboot'
 		})
 	};
 
-	this.opkg = {
-		updateLists: _luci2.rpc.declare({
-			object: 'luci2.opkg',
-			method: 'update',
-			expect: { '': { } }
-		}),
-
-		_allPackages: _luci2.rpc.declare({
-			object: 'luci2.opkg',
-			method: 'list',
-			params: [ 'offset', 'limit', 'pattern' ],
-			expect: { '': { } }
-		}),
-
-		_installedPackages: _luci2.rpc.declare({
-			object: 'luci2.opkg',
-			method: 'list_installed',
-			params: [ 'offset', 'limit', 'pattern' ],
-			expect: { '': { } }
-		}),
-
-		_findPackages: _luci2.rpc.declare({
-			object: 'luci2.opkg',
-			method: 'find',
-			params: [ 'offset', 'limit', 'pattern' ],
-			expect: { '': { } }
-		}),
-
-		_fetchPackages: function(action, offset, limit, pattern)
-		{
-			var packages = [ ];
-
-			return action(offset, limit, pattern).then(function(list) {
-				if (!list.total || !list.packages)
-					return { length: 0, total: 0 };
-
-				packages.push.apply(packages, list.packages);
-				packages.total = list.total;
-
-				if (limit <= 0)
-					limit = list.total;
-
-				if (packages.length >= limit)
-					return packages;
-
-				_luci2.rpc.batch();
-
-				for (var i = offset + packages.length; i < limit; i += 100)
-					action(i, (Math.min(i + 100, limit) % 100) || 100, pattern);
-
-				return _luci2.rpc.flush();
-			}).then(function(lists) {
-				for (var i = 0; i < lists.length; i++)
-				{
-					if (!lists[i].total || !lists[i].packages)
-						continue;
-
-					packages.push.apply(packages, lists[i].packages);
-					packages.total = lists[i].total;
-				}
-
-				return packages;
-			});
-		},
-
-		listPackages: function(offset, limit, pattern)
-		{
-			return _luci2.opkg._fetchPackages(_luci2.opkg._allPackages, offset, limit, pattern);
-		},
-
-		installedPackages: function(offset, limit, pattern)
-		{
-			return _luci2.opkg._fetchPackages(_luci2.opkg._installedPackages, offset, limit, pattern);
-		},
-
-		findPackages: function(offset, limit, pattern)
-		{
-			return _luci2.opkg._fetchPackages(_luci2.opkg._findPackages, offset, limit, pattern);
-		},
-
-		installPackage: _luci2.rpc.declare({
-			object: 'luci2.opkg',
-			method: 'install',
-			params: [ 'package' ],
-			expect: { '': { } }
-		}),
-
-		removePackage: _luci2.rpc.declare({
-			object: 'luci2.opkg',
-			method: 'remove',
-			params: [ 'package' ],
-			expect: { '': { } }
-		}),
-
-		getConfig: _luci2.rpc.declare({
-			object: 'luci2.opkg',
-			method: 'config_get',
-			expect: { config: '' }
-		}),
-
-		setConfig: _luci2.rpc.declare({
-			object: 'luci2.opkg',
-			method: 'config_set',
-			params: [ 'data' ]
-		})
-	};
-
 	this.session = {
 
-		login: _luci2.rpc.declare({
+		login: L.rpc.declare({
 			object: 'session',
 			method: 'login',
 			params: [ 'username', 'password' ],
 			expect: { '': { } }
 		}),
 
-		access: _luci2.rpc.declare({
+		access: L.rpc.declare({
 			object: 'session',
 			method: 'access',
 			params: [ 'scope', 'object', 'function' ],
@@ -2181,21 +3089,21 @@ function LuCI2()
 
 		isAlive: function()
 		{
-			return _luci2.session.access('ubus', 'session', 'access');
+			return L.session.access('ubus', 'session', 'access');
 		},
 
 		startHeartbeat: function()
 		{
 			this._hearbeatInterval = window.setInterval(function() {
-				_luci2.session.isAlive().then(function(alive) {
+				L.session.isAlive().then(function(alive) {
 					if (!alive)
 					{
-						_luci2.session.stopHeartbeat();
-						_luci2.ui.login(true);
+						L.session.stopHeartbeat();
+						L.ui.login(true);
 					}
 
 				});
-			}, _luci2.globals.timeout * 2);
+			}, L.globals.timeout * 2);
 		},
 
 		stopHeartbeat: function()
@@ -2208,28 +3116,28 @@ function LuCI2()
 		},
 
 
-		_acls: { },
+		aclCache: { },
 
-		_fetch_acls: _luci2.rpc.declare({
+		callAccess: L.rpc.declare({
 			object: 'session',
 			method: 'access',
 			expect: { '': { } }
 		}),
 
-		_fetch_acls_cb: function(acls)
+		callAccessCallback: function(acls)
 		{
-			_luci2.session._acls = acls;
+			L.session.aclCache = acls;
 		},
 
 		updateACLs: function()
 		{
-			return _luci2.session._fetch_acls()
-				.then(_luci2.session._fetch_acls_cb);
+			return L.session.callAccess()
+				.then(L.session.callAccessCallback);
 		},
 
 		hasACL: function(scope, object, func)
 		{
-			var acls = _luci2.session._acls;
+			var acls = L.session.aclCache;
 
 			if (typeof(func) == 'undefined')
 				return (acls && acls[scope] && acls[scope][object]);
@@ -2265,8 +3173,9 @@ function LuCI2()
 			var win = $(window);
 			var body = $('body');
 
-			var state = _luci2.ui._loading || (_luci2.ui._loading = {
+			var state = L.ui._loading || (L.ui._loading = {
 				modal: $('<div />')
+					.css('z-index', 2000)
 					.addClass('modal fade')
 					.append($('<div />')
 						.addClass('modal-dialog')
@@ -2274,7 +3183,7 @@ function LuCI2()
 							.addClass('modal-content luci2-modal-loader')
 							.append($('<div />')
 								.addClass('modal-body')
-								.text(_luci2.tr('Loading data…')))))
+								.text(L.tr('Loading data…')))))
 					.appendTo(body)
 					.modal({
 						backdrop: 'static',
@@ -2290,7 +3199,7 @@ function LuCI2()
 			var win = $(window);
 			var body = $('body');
 
-			var state = _luci2.ui._dialog || (_luci2.ui._dialog = {
+			var state = L.ui._dialog || (L.ui._dialog = {
 				dialog: $('<div />')
 					.addClass('modal fade')
 					.append($('<div />')
@@ -2305,7 +3214,7 @@ function LuCI2()
 								.addClass('modal-body'))
 							.append($('<div />')
 								.addClass('modal-footer')
-								.append(_luci2.ui.button(_luci2.tr('Close'), 'primary')
+								.append(L.ui.button(L.tr('Close'), 'primary')
 									.click(function() {
 										$(this).parents('div.modal').modal('hide');
 									})))))
@@ -2319,42 +3228,53 @@ function LuCI2()
 			{
 				state.dialog.modal('hide');
 
-				return;
+				return state.dialog;
 			}
 
 			var cnt = state.dialog.children().children().children('div.modal-body');
 			var ftr = state.dialog.children().children().children('div.modal-footer');
 
-			ftr.empty();
+			ftr.empty().show();
 
 			if (options.style == 'confirm')
 			{
-				ftr.append(_luci2.ui.button(_luci2.tr('Ok'), 'primary')
-					.click(options.confirm || function() { _luci2.ui.dialog(false) }));
+				ftr.append(L.ui.button(L.tr('Ok'), 'primary')
+					.click(options.confirm || function() { L.ui.dialog(false) }));
 
-				ftr.append(_luci2.ui.button(_luci2.tr('Cancel'), 'default')
-					.click(options.cancel || function() { _luci2.ui.dialog(false) }));
+				ftr.append(L.ui.button(L.tr('Cancel'), 'default')
+					.click(options.cancel || function() { L.ui.dialog(false) }));
 			}
 			else if (options.style == 'close')
 			{
-				ftr.append(_luci2.ui.button(_luci2.tr('Close'), 'primary')
-					.click(options.close || function() { _luci2.ui.dialog(false) }));
+				ftr.append(L.ui.button(L.tr('Close'), 'primary')
+					.click(options.close || function() { L.ui.dialog(false) }));
 			}
 			else if (options.style == 'wait')
 			{
-				ftr.append(_luci2.ui.button(_luci2.tr('Close'), 'primary')
+				ftr.append(L.ui.button(L.tr('Close'), 'primary')
 					.attr('disabled', true));
 			}
 
+			if (options.wide)
+			{
+				state.dialog.addClass('wide');
+			}
+			else
+			{
+				state.dialog.removeClass('wide');
+			}
+
 			state.dialog.find('h4:first').text(title);
 			state.dialog.modal('show');
 
 			cnt.empty().append(content);
+
+			return state.dialog;
 		},
 
 		upload: function(title, content, options)
 		{
-			var state = _luci2.ui._upload || (_luci2.ui._upload = {
+			var state = L.ui._upload || (L.ui._upload = {
 				form: $('<form />')
 					.attr('method', 'post')
 					.attr('action', '/cgi-bin/luci-upload')
@@ -2396,17 +3316,17 @@ function LuCI2()
 						json = $.parseJSON(body.innerHTML);
 					} catch(e) {
 						json = {
-							message: _luci2.tr('Invalid server response received'),
-							error: [ -1, _luci2.tr('Invalid data') ]
+							message: L.tr('Invalid server response received'),
+							error: [ -1, L.tr('Invalid data') ]
 						};
 					};
 
 					if (json.error)
 					{
 						L.ui.dialog(L.tr('File upload'), [
-							$('<p />').text(_luci2.tr('The file upload failed with the server response below:')),
+							$('<p />').text(L.tr('The file upload failed with the server response below:')),
 							$('<pre />').addClass('alert-message').text(json.message || json.error[1]),
-							$('<p />').text(_luci2.tr('In case of network problems try uploading the file again.'))
+							$('<p />').text(L.tr('In case of network problems try uploading the file again.'))
 						], { style: 'close' });
 					}
 					else if (typeof(state.success_cb) == 'function')
@@ -2428,7 +3348,7 @@ function LuCI2()
 
 					f.hide();
 					b.show();
-					p.text(_luci2.tr('File upload in progress …'));
+					p.text(L.tr('File upload in progress …'));
 
 					state.form.parent().parent().find('button').prop('disabled', true);
 				}
@@ -2436,14 +3356,14 @@ function LuCI2()
 
 			state.form.find('.progress').hide();
 			state.form.find('.cbi-input-file').val('').show();
-			state.form.find('p').text(content || _luci2.tr('Select the file to upload and press "%s" to proceed.').format(_luci2.tr('Ok')));
+			state.form.find('p').text(content || L.tr('Select the file to upload and press "%s" to proceed.').format(L.tr('Ok')));
 
-			state.form.find('[name=sessionid]').val(_luci2.globals.sid);
+			state.form.find('[name=sessionid]').val(L.globals.sid);
 			state.form.find('[name=filename]').val(options.filename);
 
 			state.success_cb = options.success;
 
-			_luci2.ui.dialog(title || _luci2.tr('File upload'), state.form, {
+			L.ui.dialog(title || L.tr('File upload'), state.form, {
 				style: 'confirm',
 				confirm: state.confirm_cb
 			});
@@ -2457,9 +3377,9 @@ function LuCI2()
 			var images    = $();
 			var interval, timeout;
 
-			_luci2.ui.dialog(
-				_luci2.tr('Waiting for device'), [
-					$('<p />').text(_luci2.tr('Please stand by while the device is reconfiguring …')),
+			L.ui.dialog(
+				L.tr('Waiting for device'), [
+					$('<p />').text(L.tr('Please stand by while the device is reconfiguring …')),
 					$('<div />')
 						.css('width', '100%')
 						.addClass('progressbar')
@@ -2472,7 +3392,7 @@ function LuCI2()
 			for (var i = 0; i < protocols.length; i++)
 				images = images.add($('<img />').attr('url', protocols[i] + '://' + address + ':' + ports[i]));
 
-			//_luci2.network.getNetworkStatus(function(s) {
+			//L.network.getNetworkStatus(function(s) {
 			//	for (var i = 0; i < protocols.length; i++)
 			//	{
 			//		for (var j = 0; j < s.length; j++)
@@ -2487,12 +3407,12 @@ function LuCI2()
 			//}).then(function() {
 				images.on('load', function() {
 					var url = this.getAttribute('url');
-					_luci2.session.isAlive().then(function(access) {
+					L.session.isAlive().then(function(access) {
 						if (access)
 						{
 							window.clearTimeout(timeout);
 							window.clearInterval(interval);
-							_luci2.ui.dialog(false);
+							L.ui.dialog(false);
 							images = null;
 						}
 						else
@@ -2504,7 +3424,7 @@ function LuCI2()
 
 				interval = window.setInterval(function() {
 					images.each(function() {
-						this.setAttribute('src', this.getAttribute('url') + _luci2.globals.resource + '/icons/loading.gif?r=' + Math.random());
+						this.setAttribute('src', this.getAttribute('url') + L.globals.resource + '/icons/loading.gif?r=' + Math.random());
 					});
 				}, 5000);
 
@@ -2512,9 +3432,9 @@ function LuCI2()
 					window.clearInterval(interval);
 					images.off('load');
 
-					_luci2.ui.dialog(
-						_luci2.tr('Device not responding'),
-						_luci2.tr('The device was not responding within 180 seconds, you might need to manually reconnect your computer or use SSH to regain access.'),
+					L.ui.dialog(
+						L.tr('Device not responding'),
+						L.tr('The device was not responding within 180 seconds, you might need to manually reconnect your computer or use SSH to regain access.'),
 						{ style: 'close' }
 					);
 				}, 180000);
@@ -2523,16 +3443,16 @@ function LuCI2()
 
 		login: function(invalid)
 		{
-			var state = _luci2.ui._login || (_luci2.ui._login = {
+			var state = L.ui._login || (L.ui._login = {
 				form: $('<form />')
 					.attr('target', '')
 					.attr('method', 'post')
 					.append($('<p />')
 						.addClass('alert-message')
-						.text(_luci2.tr('Wrong username or password given!')))
+						.text(L.tr('Wrong username or password given!')))
 					.append($('<p />')
 						.append($('<label />')
-							.text(_luci2.tr('Username'))
+							.text(L.tr('Username'))
 							.append($('<br />'))
 							.append($('<input />')
 								.attr('type', 'text')
@@ -2545,7 +3465,7 @@ function LuCI2()
 								}))))
 					.append($('<p />')
 						.append($('<label />')
-							.text(_luci2.tr('Password'))
+							.text(L.tr('Password'))
 							.append($('<br />'))
 							.append($('<input />')
 								.attr('type', 'password')
@@ -2556,19 +3476,19 @@ function LuCI2()
 										state.confirm_cb();
 								}))))
 					.append($('<p />')
-						.text(_luci2.tr('Enter your username and password above, then click "%s" to proceed.').format(_luci2.tr('Ok')))),
+						.text(L.tr('Enter your username and password above, then click "%s" to proceed.').format(L.tr('Ok')))),
 
 				response_cb: function(response) {
 					if (!response.ubus_rpc_session)
 					{
-						_luci2.ui.login(true);
+						L.ui.login(true);
 					}
 					else
 					{
-						_luci2.globals.sid = response.ubus_rpc_session;
-						_luci2.setHash('id', _luci2.globals.sid);
-						_luci2.session.startHeartbeat();
-						_luci2.ui.dialog(false);
+						L.globals.sid = response.ubus_rpc_session;
+						L.setHash('id', L.globals.sid);
+						L.session.startHeartbeat();
+						L.ui.dialog(false);
 						state.deferred.resolve();
 					}
 				},
@@ -2580,9 +3500,9 @@ function LuCI2()
 					if (!u)
 						return;
 
-					_luci2.ui.dialog(
-						_luci2.tr('Logging in'), [
-							$('<p />').text(_luci2.tr('Log in in progress …')),
+					L.ui.dialog(
+						L.tr('Logging in'), [
+							$('<p />').text(L.tr('Log in in progress …')),
 							$('<div />')
 								.css('width', '100%')
 								.addClass('progressbar')
@@ -2592,8 +3512,8 @@ function LuCI2()
 						], { style: 'wait' }
 					);
 
-					_luci2.globals.sid = '00000000000000000000000000000000';
-					_luci2.session.login(u, p).then(state.response_cb);
+					L.globals.sid = '00000000000000000000000000000000';
+					L.session.login(u, p).then(state.response_cb);
 				}
 			});
 
@@ -2601,20 +3521,20 @@ function LuCI2()
 				state.deferred = $.Deferred();
 
 			/* try to find sid from hash */
-			var sid = _luci2.getHash('id');
+			var sid = L.getHash('id');
 			if (sid && sid.match(/^[a-f0-9]{32}$/))
 			{
-				_luci2.globals.sid = sid;
-				_luci2.session.isAlive().then(function(access) {
+				L.globals.sid = sid;
+				L.session.isAlive().then(function(access) {
 					if (access)
 					{
-						_luci2.session.startHeartbeat();
+						L.session.startHeartbeat();
 						state.deferred.resolve();
 					}
 					else
 					{
-						_luci2.setHash('id', undefined);
-						_luci2.ui.login();
+						L.setHash('id', undefined);
+						L.ui.login();
 					}
 				});
 
@@ -2626,7 +3546,7 @@ function LuCI2()
 			else
 				state.form.find('.alert-message').hide();
 
-			_luci2.ui.dialog(_luci2.tr('Authorization Required'), state.form, {
+			L.ui.dialog(L.tr('Authorization Required'), state.form, {
 				style: 'confirm',
 				confirm: state.confirm_cb
 			});
@@ -2636,7 +3556,7 @@ function LuCI2()
 			return state.deferred;
 		},
 
-		cryptPassword: _luci2.rpc.declare({
+		cryptPassword: L.rpc.declare({
 			object: 'luci2.ui',
 			method: 'crypt',
 			params: [ 'data' ],
@@ -2644,7 +3564,7 @@ function LuCI2()
 		}),
 
 
-		_acl_merge_scope: function(acl_scope, scope)
+		mergeACLScope: function(acl_scope, scope)
 		{
 			if ($.isArray(scope))
 			{
@@ -2666,19 +3586,19 @@ function LuCI2()
 			}
 		},
 
-		_acl_merge_permission: function(acl_perm, perm)
+		mergeACLPermission: function(acl_perm, perm)
 		{
 			if ($.isPlainObject(perm))
 			{
 				for (var scope_name in perm)
 				{
 					var acl_scope = acl_perm[scope_name] || (acl_perm[scope_name] = { });
-					this._acl_merge_scope(acl_scope, perm[scope_name]);
+					L.ui.mergeACLScope(acl_scope, perm[scope_name]);
 				}
 			}
 		},
 
-		_acl_merge_group: function(acl_group, group)
+		mergeACLGroup: function(acl_group, group)
 		{
 			if ($.isPlainObject(group))
 			{
@@ -2688,88 +3608,112 @@ function LuCI2()
 				if (group.read)
 				{
 					var acl_perm = acl_group.read || (acl_group.read = { });
-					this._acl_merge_permission(acl_perm, group.read);
+					L.ui.mergeACLPermission(acl_perm, group.read);
 				}
 
 				if (group.write)
 				{
 					var acl_perm = acl_group.write || (acl_group.write = { });
-					this._acl_merge_permission(acl_perm, group.write);
+					L.ui.mergeACLPermission(acl_perm, group.write);
 				}
 			}
 		},
 
-		_acl_merge_tree: function(acl_tree, tree)
+		callACLsCallback: function(trees)
 		{
-			if ($.isPlainObject(tree))
+			var acl_tree = { };
+
+			for (var i = 0; i < trees.length; i++)
 			{
-				for (var group_name in tree)
+				if (!$.isPlainObject(trees[i]))
+					continue;
+
+				for (var group_name in trees[i])
 				{
 					var acl_group = acl_tree[group_name] || (acl_tree[group_name] = { });
-					this._acl_merge_group(acl_group, tree[group_name]);
+					L.ui.mergeACLGroup(acl_group, trees[i][group_name]);
 				}
 			}
+
+			return acl_tree;
 		},
 
-		listAvailableACLs: _luci2.rpc.declare({
+		callACLs: L.rpc.declare({
 			object: 'luci2.ui',
 			method: 'acls',
-			expect: { acls: [ ] },
-			filter: function(trees) {
-				var acl_tree = { };
-				for (var i = 0; i < trees.length; i++)
-					_luci2.ui._acl_merge_tree(acl_tree, trees[i]);
-				return acl_tree;
-			}
+			expect: { acls: [ ] }
 		}),
 
-		renderMainMenu: _luci2.rpc.declare({
+		getAvailableACLs: function()
+		{
+			return this.callACLs().then(this.callACLsCallback);
+		},
+
+		renderChangeIndicator: function()
+		{
+			return $('<ul />')
+				.addClass('nav navbar-nav navbar-right')
+				.append($('<li />')
+					.append($('<a />')
+						.attr('id', 'changes')
+						.attr('href', '#')
+						.append($('<span />')
+							.addClass('label label-info'))));
+		},
+
+		callMenuCallback: function(entries)
+		{
+			L.globals.mainMenu = new L.ui.menu();
+			L.globals.mainMenu.entries(entries);
+
+			$('#mainmenu')
+				.empty()
+				.append(L.globals.mainMenu.render(0, 1))
+				.append(L.ui.renderChangeIndicator());
+		},
+
+		callMenu: L.rpc.declare({
 			object: 'luci2.ui',
 			method: 'menu',
-			expect: { menu: { } },
-			filter: function(entries) {
-				_luci2.globals.mainMenu = new _luci2.ui.menu();
-				_luci2.globals.mainMenu.entries(entries);
-
-				$('#mainmenu')
-					.empty()
-					.append(_luci2.globals.mainMenu.render(0, 1));
-			}
+			expect: { menu: { } }
 		}),
 
+		renderMainMenu: function()
+		{
+			return this.callMenu().then(this.callMenuCallback);
+		},
+
 		renderViewMenu: function()
 		{
 			$('#viewmenu')
 				.empty()
-				.append(_luci2.globals.mainMenu.render(2, 900));
+				.append(L.globals.mainMenu.render(2, 900));
 		},
 
 		renderView: function()
 		{
-			var node = arguments[0];
-			var name = node.view.split(/\//).join('.');
-			var args = [ ];
+			var node  = arguments[0];
+			var name  = node.view.split(/\//).join('.');
+			var cname = L.toClassName(name);
+			var views = L.views || (L.views = { });
+			var args  = [ ];
 
 			for (var i = 1; i < arguments.length; i++)
 				args.push(arguments[i]);
 
-			if (_luci2.globals.currentView)
-				_luci2.globals.currentView.finish();
-
-			_luci2.ui.renderViewMenu();
+			if (L.globals.currentView)
+				L.globals.currentView.finish();
 
-			if (!_luci2._views)
-				_luci2._views = { };
+			L.ui.renderViewMenu();
+			L.setHash('view', node.view);
 
-			_luci2.setHash('view', node.view);
-
-			if (_luci2._views[name] instanceof _luci2.ui.view)
+			if (views[cname] instanceof L.ui.view)
 			{
-				_luci2.globals.currentView = _luci2._views[name];
-				return _luci2._views[name].render.apply(_luci2._views[name], args);
+				L.globals.currentView = views[cname];
+				return views[cname].render.apply(views[cname], args);
 			}
 
-			var url = _luci2.globals.resource + '/view/' + name + '.js';
+			var url = L.globals.resource + '/view/' + name + '.js';
 
 			return $.ajax(url, {
 				method: 'GET',
@@ -2780,19 +3724,19 @@ function LuCI2()
 					var viewConstructorSource = (
 						'(function(L, $) { ' +
 							'return %s' +
-						'})(_luci2, $);\n\n' +
+						'})(L, $);\n\n' +
 						'//@ sourceURL=%s'
 					).format(data, url);
 
 					var viewConstructor = eval(viewConstructorSource);
 
-					_luci2._views[name] = new viewConstructor({
+					views[cname] = new viewConstructor({
 						name: name,
 						acls: node.write || { }
 					});
 
-					_luci2.globals.currentView = _luci2._views[name];
-					return _luci2._views[name].render.apply(_luci2._views[name], args);
+					L.globals.currentView = views[cname];
+					return views[cname].render.apply(views[cname], args);
 				}
 				catch(e) {
 					alert('Unable to instantiate view "%s": %s'.format(url, e));
@@ -2802,9 +3746,26 @@ function LuCI2()
 			});
 		},
 
+		changeView: function()
+		{
+			var name = L.getHash('view');
+			var node = L.globals.defaultNode;
+
+			if (name && L.globals.mainMenu)
+				node = L.globals.mainMenu.getNode(name);
+
+			if (node)
+			{
+				L.ui.loading(true);
+				L.ui.renderView(node).then(function() {
+					L.ui.loading(false);
+				});
+			}
+		},
+
 		updateHostname: function()
 		{
-			return _luci2.system.getBoardInfo().then(function(info) {
+			return L.system.getBoardInfo().then(function(info) {
 				if (info.hostname)
 					$('#hostname').text(info.hostname);
 			});
@@ -2812,7 +3773,7 @@ function LuCI2()
 
 		updateChanges: function()
 		{
-			return _luci2.uci.changes().then(function(changes) {
+			return L.uci.changes().then(function(changes) {
 				var n = 0;
 				var html = '';
 
@@ -2827,6 +3788,7 @@ function LuCI2()
 						switch (c[0])
 						{
 						case 'order':
+							log.push('uci reorder %s.<ins>%s=<strong>%s</strong></ins>'.format(config, c[1], c[2]));
 							break;
 
 						case 'remove':
@@ -2870,35 +3832,44 @@ function LuCI2()
 
 				if (n > 0)
 					$('#changes')
-						.empty()
-						.show()
-						.append($('<a />')
-							.attr('href', '#')
-							.addClass('label')
-							.addClass('notice')
-							.text(_luci2.trcp('Pending configuration changes', '1 change', '%d changes', n).format(n))
-							.click(function(ev) {
-								_luci2.ui.dialog(_luci2.tr('Staged configuration changes'), html, { style: 'close' });
-								ev.preventDefault();
-							}));
+						.click(function(ev) {
+							L.ui.dialog(L.tr('Staged configuration changes'), html, {
+								style: 'confirm',
+								confirm: function() {
+									L.uci.apply().then(
+										function(code) { alert('Success with code ' + code); },
+										function(code) { alert('Error with code ' + code); }
+									);
+								}
+							});
+							ev.preventDefault();
+						})
+						.children('span')
+							.show()
+							.text(L.trcp('Pending configuration changes', '1 change', '%d changes', n).format(n));
 				else
-					$('#changes')
-						.hide();
+					$('#changes').children('span').hide();
 			});
 		},
 
 		init: function()
 		{
-			_luci2.ui.loading(true);
+			L.ui.loading(true);
 
 			$.when(
-				_luci2.ui.updateHostname(),
-				_luci2.ui.updateChanges(),
-				_luci2.ui.renderMainMenu()
+				L.session.updateACLs(),
+				L.ui.updateHostname(),
+				L.ui.updateChanges(),
+				L.ui.renderMainMenu(),
+				L.NetworkModel.init()
 			).then(function() {
-				_luci2.ui.renderView(_luci2.globals.defaultNode).then(function() {
-					_luci2.ui.loading(false);
-				})
+				L.ui.renderView(L.globals.defaultNode).then(function() {
+					L.ui.loading(false);
+				});
+
+				$(window).on('hashchange', function() {
+					L.ui.changeView();
+				});
 			});
 		},
 
@@ -2947,15 +3918,42 @@ function LuCI2()
 			return $(id).empty().append(this.render());
 		},
 
-		appendTo: function(id) {
-			return $(id).append(this.render());
+		appendTo: function(id) {
+			return $(id).append(this.render());
+		},
+
+		on: function(evname, evfunc)
+		{
+			var evnames = L.toArray(evname);
+
+			if (!this.events)
+				this.events = { };
+
+			for (var i = 0; i < evnames.length; i++)
+				this.events[evnames[i]] = evfunc;
+
+			return this;
+		},
+
+		trigger: function(evname, evdata)
+		{
+			if (this.events)
+			{
+				var evnames = L.toArray(evname);
+
+				for (var i = 0; i < evnames.length; i++)
+					if (this.events[evnames[i]])
+						this.events[evnames[i]].call(this, evdata);
+			}
+
+			return this;
 		}
 	});
 
 	this.ui.view = this.ui.AbstractWidget.extend({
 		_fetch_template: function()
 		{
-			return $.ajax(_luci2.globals.resource + '/template/' + this.options.name + '.htm', {
+			return $.ajax(L.globals.resource + '/template/' + this.options.name + '.htm', {
 				method: 'GET',
 				cache: true,
 				dataType: 'text',
@@ -2968,10 +3966,10 @@ function LuCI2()
 							return '';
 
 						case ':':
-							return _luci2.tr(p2);
+							return L.tr(p2);
 
 						case '=':
-							return _luci2.globals[p2] || '';
+							return L.globals[p2] || '';
 
 						default:
 							return '(?' + match + ')';
@@ -3007,7 +4005,7 @@ function LuCI2()
 				args.push(arguments[i]);
 
 			return this._fetch_template().then(function() {
-				return _luci2.deferrable(self.execute.apply(self, args));
+				return L.deferrable(self.execute.apply(self, args));
 			});
 		},
 
@@ -3031,7 +4029,7 @@ function LuCI2()
 			};
 
 			runTimer = function() {
-				_luci2.deferrable(func.call(self)).then(setTimer, setTimer);
+				L.deferrable(func.call(self)).then(setTimer, setTimer);
 			};
 
 			runTimer();
@@ -3076,7 +4074,7 @@ function LuCI2()
 			}
 		},
 
-		_indexcmp: function(a, b)
+		sortNodesCallback: function(a, b)
 		{
 			var x = a.index || 0;
 			var y = b.index || 0;
@@ -3092,7 +4090,7 @@ function LuCI2()
 			for (var child in (node.childs || { }))
 				nodes.push(node.childs[child]);
 
-			nodes.sort(this._indexcmp);
+			nodes.sort(this.sortNodesCallback);
 
 			for (var i = 0; i < nodes.length; i++)
 			{
@@ -3110,18 +4108,15 @@ function LuCI2()
 			return undefined;
 		},
 
-		_onclick: function(ev)
+		handleClick: function(ev)
 		{
-			_luci2.ui.loading(true);
-			_luci2.ui.renderView(ev.data).then(function() {
-				_luci2.ui.loading(false);
-			});
+			L.setHash('view', ev.data);
 
 			ev.preventDefault();
 			this.blur();
 		},
 
-		_render: function(childs, level, min, max)
+		renderNodes: function(childs, level, min, max)
 		{
 			var nodes = [ ];
 			for (var node in childs)
@@ -3131,7 +4126,7 @@ function LuCI2()
 					nodes.push(childs[node]);
 			}
 
-			nodes.sort(this._indexcmp);
+			nodes.sort(this.sortNodesCallback);
 
 			var list = $('<ul />');
 
@@ -3142,17 +4137,17 @@ function LuCI2()
 
 			for (var i = 0; i < nodes.length; i++)
 			{
-				if (!_luci2.globals.defaultNode)
+				if (!L.globals.defaultNode)
 				{
-					var v = _luci2.getHash('view');
+					var v = L.getHash('view');
 					if (!v || v == nodes[i].view)
-						_luci2.globals.defaultNode = nodes[i];
+						L.globals.defaultNode = nodes[i];
 				}
 
 				var item = $('<li />')
 					.append($('<a />')
 						.attr('href', '#')
-						.text(_luci2.tr(nodes[i].title)))
+						.text(L.tr(nodes[i].title)))
 					.appendTo(list);
 
 				if (nodes[i].childs && level < max)
@@ -3164,11 +4159,11 @@ function LuCI2()
 						.attr('data-toggle', 'dropdown')
 						.append('<b class="caret"></b>');
 
-					item.append(this._render(nodes[i].childs, level + 1));
+					item.append(this.renderNodes(nodes[i].childs, level + 1));
 				}
 				else
 				{
-					item.find('a').click(nodes[i], this._onclick);
+					item.find('a').click(nodes[i].view, this.handleClick);
 				}
 			}
 
@@ -3177,8 +4172,8 @@ function LuCI2()
 
 		render: function(min, max)
 		{
-			var top = min ? this.getNode(_luci2.globals.defaultNode.view, min) : this._nodes;
-			return this._render(top.childs, 0, min, max);
+			var top = min ? this.getNode(L.globals.defaultNode.view, min) : this._nodes;
+			return this.renderNodes(top.childs, 0, min, max);
 		},
 
 		getNode: function(path, max)
@@ -3425,46 +4420,46 @@ function LuCI2()
 				}
 
 				span.appendChild(document.createElement('img'));
-				span.lastChild.src = _luci2.globals.resource + '/icons/signal-' + r + '.png';
+				span.lastChild.src = L.globals.resource + '/icons/signal-' + r + '.png';
 
 				if (r == 'none')
-					span.title = _luci2.tr('No signal');
+					span.title = L.tr('No signal');
 				else
 					span.title = '%s: %d %s / %s: %d %s'.format(
-						_luci2.tr('Signal'), this.options.signal, _luci2.tr('dBm'),
-						_luci2.tr('Noise'), this.options.noise, _luci2.tr('dBm')
+						L.tr('Signal'), this.options.signal, L.tr('dBm'),
+						L.tr('Noise'), this.options.noise, L.tr('dBm')
 					);
 			}
 			else
 			{
 				var type = 'ethernet';
-				var desc = _luci2.tr('Ethernet device');
+				var desc = L.tr('Ethernet device');
 
 				if (l3dev != l2dev)
 				{
 					type = 'tunnel';
-					desc = _luci2.tr('Tunnel interface');
+					desc = L.tr('Tunnel interface');
 				}
 				else if (dev.indexOf('br-') == 0)
 				{
 					type = 'bridge';
-					desc = _luci2.tr('Bridge');
+					desc = L.tr('Bridge');
 				}
 				else if (dev.indexOf('.') > 0)
 				{
 					type = 'vlan';
-					desc = _luci2.tr('VLAN interface');
+					desc = L.tr('VLAN interface');
 				}
 				else if (dev.indexOf('wlan') == 0 ||
 						 dev.indexOf('ath') == 0 ||
 						 dev.indexOf('wl') == 0)
 				{
 					type = 'wifi';
-					desc = _luci2.tr('Wireless Network');
+					desc = L.tr('Wireless Network');
 				}
 
 				span.appendChild(document.createElement('img'));
-				span.lastChild.src = _luci2.globals.resource + '/icons/' + type + (this.options.up ? '' : '_disabled') + '.png';
+				span.lastChild.src = L.globals.resource + '/icons/' + type + (this.options.up ? '' : '_disabled') + '.png';
 				span.title = desc;
 			}
 
@@ -3485,7 +4480,7 @@ function LuCI2()
 		validation: {
 			i18n: function(msg)
 			{
-				_luci2.cbi.validation.message = _luci2.tr(msg);
+				L.cbi.validation.message = L.tr(msg);
 			},
 
 			compile: function(code)
@@ -3493,7 +4488,7 @@ function LuCI2()
 				var pos = 0;
 				var esc = false;
 				var depth = 0;
-				var types = _luci2.cbi.validation.types;
+				var types = L.cbi.validation.types;
 				var stack = [ ];
 
 				code += ',';
@@ -3553,7 +4548,7 @@ function LuCI2()
 								throw "Syntax error, argument list follows non-function";
 
 							stack[stack.length-1] =
-								_luci2.cbi.validation.compile(code.substring(pos, i));
+								L.cbi.validation.compile(code.substring(pos, i));
 
 							pos = i+1;
 						}
@@ -3607,8 +4602,7 @@ function LuCI2()
 
 		'ipaddr': function()
 		{
-			if (validation.types['ip4addr'].apply(this) ||
-				validation.types['ip6addr'].apply(this))
+			if (L.parseIPv4(this) || L.parseIPv6(this))
 				return true;
 
 			validation.i18n('Must be a valid IP address');
@@ -3617,17 +4611,8 @@ function LuCI2()
 
 		'ip4addr': function()
 		{
-			if (this.match(/^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})(\/(\S+))?$/))
-			{
-				if ((RegExp.$1 >= 0) && (RegExp.$1 <= 255) &&
-				    (RegExp.$2 >= 0) && (RegExp.$2 <= 255) &&
-				    (RegExp.$3 >= 0) && (RegExp.$3 <= 255) &&
-				    (RegExp.$4 >= 0) && (RegExp.$4 <= 255) &&
-				    ((RegExp.$6.indexOf('.') < 0)
-				      ? ((RegExp.$6 >= 0) && (RegExp.$6 <= 32))
-				      : (validation.types['ip4addr'].apply(RegExp.$6))))
-					return true;
-			}
+			if (L.parseIPv4(this))
+				return true;
 
 			validation.i18n('Must be a valid IPv4 address');
 			return false;
@@ -3635,62 +4620,74 @@ function LuCI2()
 
 		'ip6addr': function()
 		{
-			if (this.match(/^([a-fA-F0-9:.]+)(\/(\d+))?$/))
-			{
-				if (!RegExp.$2 || ((RegExp.$3 >= 0) && (RegExp.$3 <= 128)))
-				{
-					var addr = RegExp.$1;
+			if (L.parseIPv6(this))
+				return true;
 
-					if (addr == '::')
-					{
-						return true;
-					}
+			validation.i18n('Must be a valid IPv6 address');
+			return false;
+		},
 
-					if (addr.indexOf('.') > 0)
-					{
-						var off = addr.lastIndexOf(':');
+		'netmask4': function()
+		{
+			if (L.isNetmask(L.parseIPv4(this)))
+				return true;
 
-						if (!(off && validation.types['ip4addr'].apply(addr.substr(off+1))))
-						{
-							validation.i18n('Must be a valid IPv6 address');
-							return false;
-						}
+			validation.i18n('Must be a valid IPv4 netmask');
+			return false;
+		},
 
-						addr = addr.substr(0, off) + ':0:0';
-					}
+		'netmask6': function()
+		{
+			if (L.isNetmask(L.parseIPv6(this)))
+				return true;
 
-					if (addr.indexOf('::') >= 0)
-					{
-						var colons = 0;
-						var fill = '0';
+			validation.i18n('Must be a valid IPv6 netmask6');
+			return false;
+		},
 
-						for (var i = 1; i < (addr.length-1); i++)
-							if (addr.charAt(i) == ':')
-								colons++;
+		'cidr4': function()
+		{
+			if (this.match(/^([0-9.]+)\/(\d{1,2})$/))
+				if (RegExp.$2 <= 32 && L.parseIPv4(RegExp.$1))
+					return true;
 
-						if (colons > 7)
-						{
-							validation.i18n('Must be a valid IPv6 address');
-							return false;
-						}
+			validation.i18n('Must be a valid IPv4 prefix');
+			return false;
+		},
 
-						for (var i = 0; i < (7 - colons); i++)
-							fill += ':0';
+		'cidr6': function()
+		{
+			if (this.match(/^([a-fA-F0-9:.]+)\/(\d{1,3})$/))
+				if (RegExp.$2 <= 128 && L.parseIPv6(RegExp.$1))
+					return true;
 
-						if (addr.match(/^(.*?)::(.*?)$/))
-							addr = (RegExp.$1 ? RegExp.$1 + ':' : '') + fill +
-								   (RegExp.$2 ? ':' + RegExp.$2 : '');
-					}
+			validation.i18n('Must be a valid IPv6 prefix');
+			return false;
+		},
 
-					if (addr.match(/^(?:[a-fA-F0-9]{1,4}:){7}[a-fA-F0-9]{1,4}$/) != null)
-						return true;
+		'ipmask4': function()
+		{
+			if (this.match(/^([0-9.]+)\/([0-9.]+)$/))
+			{
+				var addr = RegExp.$1, mask = RegExp.$2;
+				if (L.parseIPv4(addr) && L.isNetmask(L.parseIPv4(mask)))
+					return true;
+			}
 
-					validation.i18n('Must be a valid IPv6 address');
-					return false;
-				}
+			validation.i18n('Must be a valid IPv4 address/netmask pair');
+			return false;
+		},
+
+		'ipmask6': function()
+		{
+			if (this.match(/^([a-fA-F0-9:.]+)\/([a-fA-F0-9:.]+)$/))
+			{
+				var addr = RegExp.$1, mask = RegExp.$2;
+				if (L.parseIPv6(addr) && L.isNetmask(L.parseIPv6(mask)))
+					return true;
 			}
 
-			validation.i18n('Must be a valid IPv6 address');
+			validation.i18n('Must be a valid IPv6 address/netmask pair');
 			return false;
 		},
 
@@ -3897,7 +4894,7 @@ function LuCI2()
 					msgs.push(validation.message.format.apply(validation.message, arguments[i+1]));
 			}
 
-			validation.message = msgs.join( _luci2.tr(' - or - '));
+			validation.message = msgs.join( L.tr(' - or - '));
 			return false;
 		},
 
@@ -3971,7 +4968,7 @@ function LuCI2()
 			this.dependencies = [ ];
 			this.rdependency = { };
 
-			this.options = _luci2.defaults(options, {
+			this.options = L.defaults(options, {
 				placeholder: '',
 				datatype: 'string',
 				optional: false,
@@ -3981,14 +4978,15 @@ function LuCI2()
 
 		id: function(sid)
 		{
-			return this.section.id('field', sid || '__unknown__', this.name);
+			return this.ownerSection.id('field', sid || '__unknown__', this.name);
 		},
 
 		render: function(sid, condensed)
 		{
 			var i = this.instance[sid] = { };
 
-			i.top = $('<div />');
+			i.top = $('<div />')
+				.addClass('luci2-field');
 
 			if (!condensed)
 			{
@@ -4004,10 +5002,10 @@ function LuCI2()
 
 			i.error = $('<div />')
 				.hide()
-				.addClass('label label-danger');
+				.addClass('luci2-field-error label label-danger');
 
 			i.widget = $('<div />')
-
+				.addClass('luci2-field-widget')
 				.append(this.widget(sid))
 				.append(i.error)
 				.appendTo(i.top);
@@ -4025,10 +5023,15 @@ function LuCI2()
 			return i.top;
 		},
 
+		active: function(sid)
+		{
+			return (this.instance[sid] && !this.instance[sid].disabled);
+		},
+
 		ucipath: function(sid)
 		{
 			return {
-				config:  (this.options.uci_package || this.map.uci_package),
+				config:  (this.options.uci_package || this.ownerMap.uci_package),
 				section: (this.options.uci_section || sid),
 				option:  (this.options.uci_option  || this.name)
 			};
@@ -4037,7 +5040,7 @@ function LuCI2()
 		ucivalue: function(sid)
 		{
 			var uci = this.ucipath(sid);
-			var val = this.map.get(uci.config, uci.section, uci.option);
+			var val = this.ownerMap.get(uci.config, uci.section, uci.option);
 
 			if (typeof(val) == 'undefined')
 				return this.options.initial;
@@ -4071,9 +5074,9 @@ function LuCI2()
 						return this.choices[i][1];
 			}
 			else if (v === true)
-				return _luci2.tr('yes');
+				return L.tr('yes');
 			else if (v === false)
-				return _luci2.tr('no');
+				return L.tr('no');
 			else if ($.isArray(v))
 				return v.join(', ');
 
@@ -4088,7 +5091,7 @@ function LuCI2()
 			if (typeof(a) != typeof(b))
 				return true;
 
-			if (typeof(a) == 'object')
+			if ($.isArray(a))
 			{
 				if (a.length != b.length)
 					return true;
@@ -4099,6 +5102,18 @@ function LuCI2()
 
 				return false;
 			}
+			else if ($.isPlainObject(a))
+			{
+				for (var k in a)
+					if (!(k in b))
+						return true;
+
+				for (var k in b)
+					if (!(k in a) || a[k] !== b[k])
+						return true;
+
+				return false;
+			}
 
 			return (a != b);
 		},
@@ -4110,7 +5125,7 @@ function LuCI2()
 			if (this.instance[sid].disabled)
 			{
 				if (!this.options.keep)
-					return this.map.set(uci.config, uci.section, uci.option, undefined);
+					return this.ownerMap.set(uci.config, uci.section, uci.option, undefined);
 
 				return false;
 			}
@@ -4119,16 +5134,56 @@ function LuCI2()
 			var val = this.formvalue(sid);
 
 			if (chg)
-				this.map.set(uci.config, uci.section, uci.option, val);
+				this.ownerMap.set(uci.config, uci.section, uci.option, val);
 
 			return chg;
 		},
 
-		_ev_validate: function(ev)
+		findSectionID: function($elem)
+		{
+			return this.ownerSection.findParentSectionIDs($elem)[0];
+		},
+
+		setError: function($elem, msg, msgargs)
+		{
+			var $field = $elem.parents('.luci2-field:first');
+			var $error = $field.find('.luci2-field-error:first');
+
+			if (typeof(msg) == 'string' && msg.length > 0)
+			{
+				$field.addClass('luci2-form-error');
+				$elem.parent().addClass('has-error');
+
+				$error.text(msg.format.apply(msg, msgargs)).show();
+				$field.trigger('validate');
+
+				return false;
+			}
+			else
+			{
+				$elem.parent().removeClass('has-error');
+
+				var $other_errors = $field.find('.has-error');
+				if ($other_errors.length == 0)
+				{
+					$field.removeClass('luci2-form-error');
+					$error.text('').hide();
+					$field.trigger('validate');
+
+					return true;
+				}
+
+				return false;
+			}
+		},
+
+		handleValidate: function(ev)
 		{
+			var $elem = $(this);
+
 			var d = ev.data;
 			var rv = true;
-			var val = d.elem.val();
+			var val = $elem.val();
 			var vstack = d.vstack;
 
 			if (vstack && typeof(vstack[0]) == 'function')
@@ -4137,41 +5192,45 @@ function LuCI2()
 
 				if ((val.length == 0 && !d.opt))
 				{
-					d.elem.parents('div.form-group, td').first().addClass('luci2-form-error');
-					d.elem.parents('div.input-group, div.form-group, td').first().addClass('has-error');
-
-					d.inst.error.text(_luci2.tr('Field must not be empty')).show();
-					rv = false;
+					rv = d.self.setError($elem, L.tr('Field must not be empty'));
 				}
 				else if (val.length > 0 && !vstack[0].apply(val, vstack[1]))
 				{
-					d.elem.parents('div.form-group, td').first().addClass('luci2-form-error');
-					d.elem.parents('div.input-group, div.form-group, td').first().addClass('has-error');
-
-					d.inst.error.text(validation.message.format.apply(validation.message, vstack[1])).show();
-					rv = false;
+					rv = d.self.setError($elem, validation.message, vstack[1]);
 				}
 				else
 				{
-					d.elem.parents('div.form-group, td').first().removeClass('luci2-form-error');
-					d.elem.parents('div.input-group, div.form-group, td').first().removeClass('has-error');
-
-					if (d.multi && d.inst.widget && d.inst.widget.find('input.error, select.error').length > 0)
-						rv = false;
-					else
-						d.inst.error.text('').hide();
+					rv = d.self.setError($elem);
 				}
 			}
 
 			if (rv)
+			{
+				var sid = d.self.findSectionID($elem);
+
 				for (var field in d.self.rdependency)
-					d.self.rdependency[field].toggle(d.sid);
+				{
+					d.self.rdependency[field].toggle(sid);
+					d.self.rdependency[field].validate(sid);
+				}
+
+				d.self.ownerSection.tabtoggle(sid);
+			}
 
 			return rv;
 		},
 
-		validator: function(sid, elem, multi)
+		attachEvents: function(sid, elem)
 		{
+			var evdata = {
+				self:   this,
+				opt:    this.options.optional
+			};
+
+			if (this.events)
+				for (var evname in this.events)
+					elem.on(evname, evdata, this.events[evname]);
+
 			if (typeof(this.options.datatype) == 'undefined' && $.isEmptyObject(this.rdependency))
 				return elem;
 
@@ -4179,13 +5238,13 @@ function LuCI2()
 			if (typeof(this.options.datatype) == 'string')
 			{
 				try {
-					vstack = _luci2.cbi.validation.compile(this.options.datatype);
+					evdata.vstack = L.cbi.validation.compile(this.options.datatype);
 				} catch(e) { };
 			}
 			else if (typeof(this.options.datatype) == 'function')
 			{
 				var vfunc = this.options.datatype;
-				vstack = [ function(elem) {
+				evdata.vstack = [ function(elem) {
 					var rv = vfunc(this, elem);
 					if (rv !== true)
 						validation.message = rv;
@@ -4193,32 +5252,23 @@ function LuCI2()
 				}, [ elem ] ];
 			}
 
-			var evdata = {
-				self:   this,
-				sid:    sid,
-				elem:   elem,
-				multi:  multi,
-				vstack: vstack,
-				inst:   this.instance[sid],
-				opt:    this.options.optional
-			};
-
 			if (elem.prop('tagName') == 'SELECT')
 			{
-				elem.change(evdata, this._ev_validate);
+				elem.change(evdata, this.handleValidate);
 			}
 			else if (elem.prop('tagName') == 'INPUT' && elem.attr('type') == 'checkbox')
 			{
-				elem.click(evdata, this._ev_validate);
-				elem.blur(evdata, this._ev_validate);
+				elem.click(evdata, this.handleValidate);
+				elem.blur(evdata, this.handleValidate);
 			}
 			else
 			{
-				elem.keyup(evdata, this._ev_validate);
-				elem.blur(evdata, this._ev_validate);
+				elem.keyup(evdata, this.handleValidate);
+				elem.blur(evdata, this.handleValidate);
 			}
 
-			elem.attr('cbi-validate', true).on('validate', evdata, this._ev_validate);
+			elem.addClass('luci2-field-validate')
+				.on('validate', evdata, this.handleValidate);
 
 			return elem;
 		},
@@ -4227,12 +5277,12 @@ function LuCI2()
 		{
 			var i = this.instance[sid];
 
-			i.widget.find('[cbi-validate]').trigger('validate');
+			i.widget.find('.luci2-field-validate').trigger('validate');
 
 			return (i.disabled || i.error.text() == '');
 		},
 
-		depends: function(d, v)
+		depends: function(d, v, add)
 		{
 			var dep;
 
@@ -4243,11 +5293,11 @@ function LuCI2()
 				{
 					if (typeof(d[i]) == 'string')
 						dep[d[i]] = true;
-					else if (d[i] instanceof _luci2.cbi.AbstractValue)
+					else if (d[i] instanceof L.cbi.AbstractValue)
 						dep[d[i].name] = true;
 				}
 			}
-			else if (d instanceof _luci2.cbi.AbstractValue)
+			else if (d instanceof L.cbi.AbstractValue)
 			{
 				dep = { };
 				dep[d.name] = (typeof(v) == 'undefined') ? true : v;
@@ -4267,7 +5317,7 @@ function LuCI2()
 
 			for (var field in dep)
 			{
-				var f = this.section.fields[field];
+				var f = this.ownerSection.fields[field];
 				if (f)
 					f.rdependency[this.name] = this;
 				else
@@ -4277,7 +5327,11 @@ function LuCI2()
 			if ($.isEmptyObject(dep))
 				return this;
 
-			this.dependencies.push(dep);
+			if (!add || !this.dependencies.length)
+				this.dependencies.push(dep);
+			else
+				for (var i = 0; i < this.dependencies.length; i++)
+					$.extend(this.dependencies[i], dep);
 
 			return this;
 		},
@@ -4296,7 +5350,7 @@ function LuCI2()
 
 				for (var field in d[n])
 				{
-					var val = this.section.fields[field].formvalue(sid);
+					var val = this.ownerSection.fields[field].formvalue(sid);
 					var cmp = d[n][field];
 
 					if (typeof(cmp) == 'boolean')
@@ -4307,7 +5361,7 @@ function LuCI2()
 							break;
 						}
 					}
-					else if (typeof(cmp) == 'string')
+					else if (typeof(cmp) == 'string' || typeof(cmp) == 'number')
 					{
 						if (val != cmp)
 						{
@@ -4338,6 +5392,7 @@ function LuCI2()
 					if (i.disabled)
 					{
 						i.disabled = false;
+						i.top.removeClass('luci2-field-disabled');
 						i.top.fadeIn();
 					}
 
@@ -4349,6 +5404,7 @@ function LuCI2()
 			{
 				i.disabled = true;
 				i.top.is(':visible') ? i.top.fadeOut() : i.top.hide();
+				i.top.addClass('luci2-field-disabled');
 			}
 
 			return false;
@@ -4370,7 +5426,7 @@ function LuCI2()
 
 			return $('<div />')
 				.addClass('checkbox')
-				.append(this.validator(sid, i));
+				.append(this.attachEvents(sid, i));
 		},
 
 		ucivalue: function(sid)
@@ -4400,7 +5456,7 @@ function LuCI2()
 			if (this.instance[sid].disabled)
 			{
 				if (!this.options.keep)
-					return this.map.set(uci.config, uci.section, uci.option, undefined);
+					return this.ownerMap.set(uci.config, uci.section, uci.option, undefined);
 
 				return false;
 			}
@@ -4411,9 +5467,9 @@ function LuCI2()
 			if (chg)
 			{
 				if (this.options.optional && val == this.options.initial)
-					this.map.set(uci.config, uci.section, uci.option, undefined);
+					this.ownerMap.set(uci.config, uci.section, uci.option, undefined);
 				else
-					this.map.set(uci.config, uci.section, uci.option, val ? this.options.enabled : this.options.disabled);
+					this.ownerMap.set(uci.config, uci.section, uci.option, val ? this.options.enabled : this.options.disabled);
 			}
 
 			return chg;
@@ -4430,7 +5486,7 @@ function LuCI2()
 				.attr('placeholder', this.options.placeholder)
 				.val(this.ucivalue(sid));
 
-			return this.validator(sid, i);
+			return this.attachEvents(sid, i);
 		}
 	});
 
@@ -4446,17 +5502,17 @@ function LuCI2()
 
 			var t = $('<span />')
 				.addClass('input-group-btn')
-				.append(_luci2.ui.button(_luci2.tr('Reveal'), 'default')
+				.append(L.ui.button(L.tr('Reveal'), 'default')
 					.click(function(ev) {
 						var b = $(this);
 						var i = b.parent().prev();
 						var t = i.attr('type');
-						b.text(t == 'password' ? _luci2.tr('Hide') : _luci2.tr('Reveal'));
+						b.text(t == 'password' ? L.tr('Hide') : L.tr('Reveal'));
 						i.attr('type', (t == 'password') ? 'text' : 'password');
 						b = i = t = null;
 					}));
 
-			this.validator(sid, i);
+			this.attachEvents(sid, i);
 
 			return $('<div />')
 				.addClass('input-group')
@@ -4471,10 +5527,10 @@ function LuCI2()
 			var s = $('<select />')
 				.addClass('form-control');
 
-			if (this.options.optional)
+			if (this.options.optional && !this.has_empty)
 				$('<option />')
 					.attr('value', '')
-					.text(_luci2.tr('-- Please choose --'))
+					.text(L.tr('-- Please choose --'))
 					.appendTo(s);
 
 			if (this.choices)
@@ -4486,7 +5542,7 @@ function LuCI2()
 
 			s.attr('id', this.id(sid)).val(this.ucivalue(sid));
 
-			return this.validator(sid, s);
+			return this.attachEvents(sid, s);
 		},
 
 		value: function(k, v)
@@ -4494,6 +5550,9 @@ function LuCI2()
 			if (!this.choices)
 				this.choices = [ ];
 
+			if (k == '')
+				this.has_empty = true;
+
 			this.choices.push([k, v || k]);
 			return this;
 		}
@@ -4568,10 +5627,7 @@ function LuCI2()
 			{
 				ev.data.select.hide();
 				ev.data.input.show().focus();
-
-				var v = ev.data.input.val();
-				ev.data.input.val(' ');
-				ev.data.input.val(v);
+				ev.data.input.val('');
 			}
 			else if (self.options.optional && s.selectedIndex == 0)
 			{
@@ -4581,6 +5637,8 @@ function LuCI2()
 			{
 				ev.data.input.val(ev.data.select.val());
 			}
+
+			ev.stopPropagation();
 		},
 
 		_blur: function(ev)
@@ -4591,10 +5649,10 @@ function LuCI2()
 
 			ev.data.select.empty();
 
-			if (self.options.optional)
+			if (self.options.optional && !self.has_empty)
 				$('<option />')
 					.attr('value', '')
-					.text(_luci2.tr('-- please choose --'))
+					.text(L.tr('-- please choose --'))
 					.appendTo(ev.data.select);
 
 			if (self.choices)
@@ -4617,11 +5675,11 @@ function LuCI2()
 
 			$('<option />')
 				.attr('value', ' ')
-				.text(_luci2.tr('-- custom --'))
+				.text(L.tr('-- custom --'))
 				.appendTo(ev.data.select);
 
 			ev.data.input.hide();
-			ev.data.select.val(val).show().focus();
+			ev.data.select.val(val).show().blur();
 		},
 
 		_enter: function(ev)
@@ -4640,17 +5698,19 @@ function LuCI2()
 				.attr('id', this.id(sid));
 
 			var t = $('<input />')
+				.addClass('form-control')
 				.attr('type', 'text')
 				.hide()
 				.appendTo(d);
 
 			var s = $('<select />')
+				.addClass('form-control')
 				.appendTo(d);
 
 			var evdata = {
 				self: this,
-				input: this.validator(sid, t),
-				select: this.validator(sid, s)
+				input: t,
+				select: s
 			};
 
 			s.change(evdata, this._change);
@@ -4660,6 +5720,9 @@ function LuCI2()
 			t.val(this.ucivalue(sid));
 			t.blur();
 
+			this.attachEvents(sid, t);
+			this.attachEvents(sid, s);
+
 			return d;
 		},
 
@@ -4668,6 +5731,9 @@ function LuCI2()
 			if (!this.choices)
 				this.choices = [ ];
 
+			if (k == '')
+				this.has_empty = true;
+
 			this.choices.push([k, v || k]);
 			return this;
 		},
@@ -4715,9 +5781,9 @@ function LuCI2()
 
 				var btn;
 				if (evdata.remove)
-					btn = _luci2.ui.button('–', 'danger').click(evdata, this._btnclick);
+					btn = L.ui.button('–', 'danger').click(evdata, this._btnclick);
 				else
-					btn = _luci2.ui.button('+', 'success').click(evdata, this._btnclick);
+					btn = L.ui.button('+', 'success').click(evdata, this._btnclick);
 
 				if (this.choices)
 				{
@@ -4738,8 +5804,8 @@ function LuCI2()
 							.append(btn))
 						.appendTo(s.parent);
 
-					evdata.input = this.validator(s.sid, txt, true);
-					evdata.select = this.validator(s.sid, sel, true);
+					evdata.input = this.attachEvents(s.sid, txt);
+					evdata.select = this.attachEvents(s.sid, sel);
 
 					sel.change(evdata, this._change);
 					txt.blur(evdata, this._blur);
@@ -4786,7 +5852,7 @@ function LuCI2()
 						f.val(val);
 					}
 
-					evdata.input = this.validator(s.sid, f, true);
+					evdata.input = this.attachEvents(s.sid, f);
 
 					f = null;
 				}
@@ -4929,7 +5995,7 @@ function LuCI2()
 		formvalue: function(sid)
 		{
 			var rv = [ ];
-			var fields = $('#' + this.id(sid) + ' > input');
+			var fields = $('#' + this.id(sid) + ' input');
 
 			for (var i = 0; i < fields.length; i++)
 				if (typeof(fields[i].value) == 'string' && fields[i].value.length)
@@ -4945,7 +6011,7 @@ function LuCI2()
 			return $('<div />')
 				.addClass('form-control-static')
 				.attr('id', this.id(sid))
-				.html(this.ucivalue(sid));
+				.html(this.ucivalue(sid) || this.label('placeholder'));
 		},
 
 		formvalue: function(sid)
@@ -4954,52 +6020,32 @@ function LuCI2()
 		}
 	});
 
-	this.cbi.NetworkList = this.cbi.AbstractValue.extend({
-		load: function(sid)
+	this.cbi.ButtonValue = this.cbi.AbstractValue.extend({
+		widget: function(sid)
 		{
-			var self = this;
+			this.options.optional = true;
 
-			if (!self.interfaces)
-			{
-				self.interfaces = [ ];
-				return _luci2.network.getNetworkStatus().then(function(ifaces) {
-					self.interfaces = ifaces;
-					self = null;
-				});
-			}
+			var btn = $('<button />')
+				.addClass('btn btn-default')
+				.attr('id', this.id(sid))
+				.attr('type', 'button')
+				.text(this.label('text'));
 
-			return undefined;
+			return this.attachEvents(sid, btn);
+		}
+	});
+
+	this.cbi.NetworkList = this.cbi.AbstractValue.extend({
+		load: function(sid)
+		{
+			return L.NetworkModel.init();
 		},
 
 		_device_icon: function(dev)
 		{
-			var type = 'ethernet';
-			var desc = _luci2.tr('Ethernet device');
-
-			if (dev.type == 'IP tunnel')
-			{
-				type = 'tunnel';
-				desc = _luci2.tr('Tunnel interface');
-			}
-			else if (dev['bridge-members'])
-			{
-				type = 'bridge';
-				desc = _luci2.tr('Bridge');
-			}
-			else if (dev.wireless)
-			{
-				type = 'wifi';
-				desc = _luci2.tr('Wireless Network');
-			}
-			else if (dev.device.indexOf('.') > 0)
-			{
-				type = 'vlan';
-				desc = _luci2.tr('VLAN interface');
-			}
-
 			return $('<img />')
-				.attr('src', _luci2.globals.resource + '/icons/' + type + (dev.up ? '' : '_disabled') + '.png')
-				.attr('title', '%s (%s)'.format(desc, dev.device));
+				.attr('src', dev.icon())
+				.attr('title', '%s (%s)'.format(dev.description(), dev.name() || '?'));
 		},
 
 		widget: function(sid)
@@ -5019,34 +6065,22 @@ function LuCI2()
 				for (var i = 0; i < value.length; i++)
 					check[value[i]] = true;
 
-			if (this.interfaces)
-			{
-				for (var i = 0; i < this.interfaces.length; i++)
-				{
-					var iface = this.interfaces[i];
-					var badge = $('<span />')
-						.addClass('badge')
-						.text('%s: '.format(iface['interface']));
+			var interfaces = L.NetworkModel.getInterfaces();
 
-					if (iface.device && iface.device.subdevices)
-						for (var j = 0; j < iface.device.subdevices.length; j++)
-							badge.append(this._device_icon(iface.device.subdevices[j]));
-					else if (iface.device)
-						badge.append(this._device_icon(iface.device));
-					else
-						badge.append($('<em />').text(_luci2.tr('(No devices attached)')));
+			for (var i = 0; i < interfaces.length; i++)
+			{
+				var iface = interfaces[i];
 
-					$('<li />')
-						.append($('<label />')
-							.addClass(itype + ' inline')
-							.append($('<input />')
-								.attr('name', itype + id)
-								.attr('type', itype)
-								.attr('value', iface['interface'])
-								.prop('checked', !!check[iface['interface']]))
-							.append(badge))
-						.appendTo(ul);
-				}
+				$('<li />')
+					.append($('<label />')
+						.addClass(itype + ' inline')
+						.append(this.attachEvents(sid, $('<input />')
+							.attr('name', itype + id)
+							.attr('type', itype)
+							.attr('value', iface.name())
+							.prop('checked', !!check[iface.name()])))
+						.append(iface.renderBadge()))
+					.appendTo(ul);
 			}
 
 			if (!this.options.multiple)
@@ -5054,12 +6088,12 @@ function LuCI2()
 				$('<li />')
 					.append($('<label />')
 						.addClass(itype + ' inline text-muted')
-						.append($('<input />')
+						.append(this.attachEvents(sid, $('<input />')
 							.attr('name', itype + id)
 							.attr('type', itype)
 							.attr('value', '')
-							.prop('checked', !value))
-						.append(_luci2.tr('unspecified')))
+							.prop('checked', $.isEmptyObject(check))))
+						.append(L.tr('unspecified')))
 					.appendTo(ul);
 			}
 
@@ -5103,16 +6137,178 @@ function LuCI2()
 					if (inputs[i].checked && inputs[i].value !== '')
 						return inputs[i].value;
 
-				return undefined;
-			}
+				return undefined;
+			}
+
+			var rv = [ ];
+
+			for (var i = 0; i < inputs.length; i++)
+				if (inputs[i].checked)
+					rv.push(inputs[i].value);
+
+			return rv.length ? rv : undefined;
+		}
+	});
+
+	this.cbi.DeviceList = this.cbi.NetworkList.extend({
+		handleFocus: function(ev)
+		{
+			var self = ev.data.self;
+			var input = $(this);
+
+			input.parent().prev().prop('checked', true);
+		},
+
+		handleBlur: function(ev)
+		{
+			ev.which = 10;
+			ev.data.self.handleKeydown.call(this, ev);
+		},
+
+		handleKeydown: function(ev)
+		{
+			if (ev.which != 10 && ev.which != 13)
+				return;
+
+			var sid = ev.data.sid;
+			var self = ev.data.self;
+			var input = $(this);
+			var ifnames = L.toArray(input.val());
+
+			if (!ifnames.length)
+				return;
+
+			L.NetworkModel.createDevice(ifnames[0]);
+
+			self._redraw(sid, $('#' + self.id(sid)), ifnames[0]);
+		},
+
+		load: function(sid)
+		{
+			return L.NetworkModel.init();
+		},
+
+		_redraw: function(sid, ul, sel)
+		{
+			var id = ul.attr('id');
+			var devs = L.NetworkModel.getDevices();
+			var iface = L.NetworkModel.getInterface(sid);
+			var itype = this.options.multiple ? 'checkbox' : 'radio';
+			var check = { };
+
+			if (!sel)
+			{
+				for (var i = 0; i < devs.length; i++)
+					if (devs[i].isInNetwork(iface))
+						check[devs[i].name()] = true;
+			}
+			else
+			{
+				if (this.options.multiple)
+					check = L.toObject(this.formvalue(sid));
+
+				check[sel] = true;
+			}
+
+			ul.empty();
+
+			for (var i = 0; i < devs.length; i++)
+			{
+				var dev = devs[i];
+
+				if (dev.isBridge() && this.options.bridges === false)
+					continue;
+
+				if (!dev.isBridgeable() && this.options.multiple)
+					continue;
+
+				var badge = $('<span />')
+					.addClass('badge')
+					.append($('<img />').attr('src', dev.icon()))
+					.append(' %s: %s'.format(dev.name(), dev.description()));
+
+				//var ifcs = dev.getInterfaces();
+				//if (ifcs.length)
+				//{
+				//	for (var j = 0; j < ifcs.length; j++)
+				//		badge.append((j ? ', ' : ' (') + ifcs[j].name());
+				//
+				//	badge.append(')');
+				//}
+
+				$('<li />')
+					.append($('<label />')
+						.addClass(itype + ' inline')
+						.append($('<input />')
+							.attr('name', itype + id)
+							.attr('type', itype)
+							.attr('value', dev.name())
+							.prop('checked', !!check[dev.name()]))
+						.append(badge))
+					.appendTo(ul);
+			}
+
+
+			$('<li />')
+				.append($('<label />')
+					.attr('for', 'custom' + id)
+					.addClass(itype + ' inline')
+					.append($('<input />')
+						.attr('name', itype + id)
+						.attr('type', itype)
+						.attr('value', ''))
+					.append($('<span />')
+						.addClass('badge')
+						.append($('<input />')
+							.attr('id', 'custom' + id)
+							.attr('type', 'text')
+							.attr('placeholder', L.tr('Custom device …'))
+							.on('focus', { self: this, sid: sid }, this.handleFocus)
+							.on('blur', { self: this, sid: sid }, this.handleBlur)
+							.on('keydown', { self: this, sid: sid }, this.handleKeydown))))
+				.appendTo(ul);
+
+			if (!this.options.multiple)
+			{
+				$('<li />')
+					.append($('<label />')
+						.addClass(itype + ' inline text-muted')
+						.append($('<input />')
+							.attr('name', itype + id)
+							.attr('type', itype)
+							.attr('value', '')
+							.prop('checked', $.isEmptyObject(check)))
+						.append(L.tr('unspecified')))
+					.appendTo(ul);
+			}
+		},
+
+		widget: function(sid)
+		{
+			var id = this.id(sid);
+			var ul = $('<ul />')
+				.attr('id', id)
+				.addClass('list-unstyled');
+
+			this._redraw(sid, ul);
 
-			var rv = [ ];
+			return ul;
+		},
 
-			for (var i = 0; i < inputs.length; i++)
-				if (inputs[i].checked)
-					rv.push(inputs[i].value);
+		save: function(sid)
+		{
+			if (this.instance[sid].disabled)
+				return;
 
-			return rv.length ? rv : undefined;
+			var ifnames = this.formvalue(sid);
+			//if (!ifnames)
+			//	return;
+
+			var iface = L.NetworkModel.getInterface(sid);
+			if (!iface)
+				return;
+
+			iface.setDevices($.isArray(ifnames) ? ifnames : [ ifnames ]);
 		}
 	});
 
@@ -5120,9 +6316,9 @@ function LuCI2()
 	this.cbi.AbstractSection = this.ui.AbstractWidget.extend({
 		id: function()
 		{
-			var s = [ arguments[0], this.map.uci_package, this.uci_type ];
+			var s = [ arguments[0], this.ownerMap.uci_package, this.uci_type ];
 
-			for (var i = 1; i < arguments.length; i++)
+			for (var i = 1; i < arguments.length && typeof(arguments[i]) == 'string'; i++)
 				s.push(arguments[i].replace(/\./g, '_'));
 
 			return s.join('_');
@@ -5167,11 +6363,11 @@ function LuCI2()
 
 			var w = widget ? new widget(name, options) : null;
 
-			if (!(w instanceof _luci2.cbi.AbstractValue))
+			if (!(w instanceof L.cbi.AbstractValue))
 				throw 'Widget must be an instance of AbstractValue';
 
-			w.section = this;
-			w.map     = this.map;
+			w.ownerSection = this;
+			w.ownerMap     = this.ownerMap;
 
 			this.fields[name] = w;
 			tab.fields.push(w);
@@ -5179,93 +6375,170 @@ function LuCI2()
 			return w;
 		},
 
-		ucipackages: function(pkg)
+		tabtoggle: function(sid)
 		{
 			for (var i = 0; i < this.tabs.length; i++)
-				for (var j = 0; j < this.tabs[i].fields.length; j++)
-					if (this.tabs[i].fields[j].options.uci_package)
-						pkg[this.tabs[i].fields[j].options.uci_package] = true;
+			{
+				var tab = this.tabs[i];
+				var elem = $('#' + this.id('nodetab', sid, tab.id));
+				var empty = true;
+
+				for (var j = 0; j < tab.fields.length; j++)
+				{
+					if (tab.fields[j].active(sid))
+					{
+						empty = false;
+						break;
+					}
+				}
+
+				if (empty && elem.is(':visible'))
+					elem.fadeOut();
+				else if (!empty)
+					elem.fadeIn();
+			}
 		},
 
-		formvalue: function()
+		validate: function(parent_sid)
 		{
-			var rv = { };
+			var s = this.getUCISections(parent_sid);
+			var n = 0;
 
-			this.sections(function(s) {
-				var sid = s['.name'];
-				var sv = rv[sid] || (rv[sid] = { });
+			for (var i = 0; i < s.length; i++)
+			{
+				var $item = $('#' + this.id('sectionitem', s[i]['.name']));
 
-				for (var i = 0; i < this.tabs.length; i++)
-					for (var j = 0; j < this.tabs[i].fields.length; j++)
-					{
-						var val = this.tabs[i].fields[j].formvalue(sid);
-						sv[this.tabs[i].fields[j].name] = val;
-					}
-			});
+				$item.find('.luci2-field-validate').trigger('validate');
+				n += $item.find('.luci2-field.luci2-form-error').not('.luci2-field-disabled').length;
+			}
 
-			return rv;
+			return (n == 0);
 		},
 
-		validate_section: function(sid)
+		load: function(parent_sid)
 		{
-			var inst = this.instance[sid];
+			var deferreds = [ ];
 
-			var invals = 0;
-			var badge = $('#' + this.id('teaser', sid)).children('span:first');
-
-			for (var i = 0; i < this.tabs.length; i++)
+			var s = this.getUCISections(parent_sid);
+			for (var i = 0; i < s.length; i++)
 			{
-				var inval = 0;
-				var stbadge = $('#' + this.id('nodetab', sid, this.tabs[i].id)).children('span:first');
-
-				for (var j = 0; j < this.tabs[i].fields.length; j++)
-					if (!this.tabs[i].fields[j].validate(sid))
-						inval++;
+				for (var f in this.fields)
+				{
+					if (typeof(this.fields[f].load) != 'function')
+						continue;
 
-				if (inval > 0)
-					stbadge.show()
-						.text(inval)
-						.attr('title', _luci2.trp('1 Error', '%d Errors', inval).format(inval));
-				else
-					stbadge.hide();
+					var rv = this.fields[f].load(s[i]['.name']);
+					if (L.isDeferred(rv))
+						deferreds.push(rv);
+				}
 
-				invals += inval;
+				for (var j = 0; j < this.subsections.length; j++)
+				{
+					var rv = this.subsections[j].load(s[i]['.name']);
+					deferreds.push.apply(deferreds, rv);
+				}
 			}
 
-			if (invals > 0)
-				badge.show()
-					.text(invals)
-					.attr('title', _luci2.trp('1 Error', '%d Errors', invals).format(invals));
-			else
-				badge.hide();
+			return deferreds;
+		},
+
+		save: function(parent_sid)
+		{
+			var deferreds = [ ];
+			var s = this.getUCISections(parent_sid);
+
+			for (i = 0; i < s.length; i++)
+			{
+				if (!this.options.readonly)
+				{
+					for (var f in this.fields)
+					{
+						if (typeof(this.fields[f].save) != 'function')
+							continue;
+
+						var rv = this.fields[f].save(s[i]['.name']);
+						if (L.isDeferred(rv))
+							deferreds.push(rv);
+					}
+				}
+
+				for (var j = 0; j < this.subsections.length; j++)
+				{
+					var rv = this.subsections[j].save(s[i]['.name']);
+					deferreds.push.apply(deferreds, rv);
+				}
+			}
 
-			return invals;
+			return deferreds;
 		},
 
-		validate: function()
+		teaser: function(sid)
 		{
-			this.error_count = 0;
+			var tf = this.teaser_fields;
+
+			if (!tf)
+			{
+				tf = this.teaser_fields = [ ];
+
+				if ($.isArray(this.options.teasers))
+				{
+					for (var i = 0; i < this.options.teasers.length; i++)
+					{
+						var f = this.options.teasers[i];
+						if (f instanceof L.cbi.AbstractValue)
+							tf.push(f);
+						else if (typeof(f) == 'string' && this.fields[f] instanceof L.cbi.AbstractValue)
+							tf.push(this.fields[f]);
+					}
+				}
+				else
+				{
+					for (var i = 0; tf.length <= 5 && i < this.tabs.length; i++)
+						for (var j = 0; tf.length <= 5 && j < this.tabs[i].fields.length; j++)
+							tf.push(this.tabs[i].fields[j]);
+				}
+			}
 
-			var as = this.sections();
+			var t = '';
 
-			for (var i = 0; i < as.length; i++)
+			for (var i = 0; i < tf.length; i++)
 			{
-				var invals = this.validate_section(as[i]['.name']);
+				if (tf[i].instance[sid] && tf[i].instance[sid].disabled)
+					continue;
+
+				var n = tf[i].options.caption || tf[i].name;
+				var v = tf[i].textvalue(sid);
+
+				if (typeof(v) == 'undefined')
+					continue;
 
-				if (invals > 0)
-					this.error_count += invals;
+				t = t + '%s%s: <strong>%s</strong>'.format(t ? ' | ' : '', n, v);
 			}
 
-			var badge = $('#' + this.id('sectiontab')).children('span:first');
+			return t;
+		},
 
-			if (this.error_count > 0)
-				badge.show()
-					.text(this.error_count)
-					.attr('title', _luci2.trp('1 Error', '%d Errors', this.error_count).format(this.error_count));
-			else
-				badge.hide();
+		findAdditionalUCIPackages: function()
+		{
+			var packages = [ ];
+
+			for (var i = 0; i < this.tabs.length; i++)
+				for (var j = 0; j < this.tabs[i].fields.length; j++)
+					if (this.tabs[i].fields[j].options.uci_package)
+						packages.push(this.tabs[i].fields[j].options.uci_package);
+
+			return packages;
+		},
 
-			return (this.error_count == 0);
+		findParentSectionIDs: function($elem)
+		{
+			var rv = [ ];
+			var $parents = $elem.parents('.luci2-section-item');
+
+			for (var i = 0; i < $parents.length; i++)
+				rv.push($parents[i].getAttribute('data-luci2-sid'));
+
+			return rv;
 		}
 	});
 
@@ -5276,48 +6549,69 @@ function LuCI2()
 			this.options  = options;
 			this.tabs     = [ ];
 			this.fields   = { };
-			this.error_count  = 0;
-			this.active_panel = 0;
+			this.subsections  = [ ];
+			this.active_panel = { };
 			this.active_tab   = { };
+
+			this.instance = { };
 		},
 
-		filter: function(section)
+		filter: function(section, parent_sid)
 		{
 			return true;
 		},
 
-		sections: function(cb)
+		sort: function(section1, section2)
+		{
+			return 0;
+		},
+
+		subsection: function(widget, uci_type, options)
+		{
+			var w = widget ? new widget(uci_type, options) : null;
+
+			if (!(w instanceof L.cbi.AbstractSection))
+				throw 'Widget must be an instance of AbstractSection';
+
+			w.ownerSection = this;
+			w.ownerMap     = this.ownerMap;
+			w.index        = this.subsections.length;
+
+			this.subsections.push(w);
+			return w;
+		},
+
+		getUCISections: function(parent_sid)
 		{
-			var s1 = this.map.ucisections(this.map.uci_package);
+			var s1 = L.uci.sections(this.ownerMap.uci_package);
 			var s2 = [ ];
 
 			for (var i = 0; i < s1.length; i++)
 				if (s1[i]['.type'] == this.uci_type)
-					if (this.filter(s1[i]))
+					if (this.filter(s1[i], parent_sid))
 						s2.push(s1[i]);
 
-			if (typeof(cb) == 'function')
-				for (var i = 0; i < s2.length; i++)
-					cb.apply(this, [ s2[i] ]);
+			s2.sort(this.sort);
 
 			return s2;
 		},
 
-		add: function(name)
+		add: function(name, parent_sid)
 		{
-			this.map.add(this.map.uci_package, this.uci_type, name);
+			return this.ownerMap.add(this.ownerMap.uci_package, this.uci_type, name);
 		},
 
-		remove: function(sid)
+		remove: function(sid, parent_sid)
 		{
-			this.map.remove(this.map.uci_package, sid);
+			return this.ownerMap.remove(this.ownerMap.uci_package, sid);
 		},
 
-		_ev_add: function(ev)
+		handleAdd: function(ev)
 		{
 			var addb = $(this);
 			var name = undefined;
 			var self = ev.data.self;
+			var sid  = self.findParentSectionIDs(addb)[0];
 
 			if (addb.prev().prop('nodeName') == 'INPUT')
 				name = addb.prev().val();
@@ -5325,66 +6619,65 @@ function LuCI2()
 			if (addb.prop('disabled') || name === '')
 				return;
 
-			_luci2.ui.saveScrollTop();
+			L.ui.saveScrollTop();
 
-			self.active_panel = -1;
-			self.map.save();
-			self.add(name);
-			self.map.redraw();
+			self.setPanelIndex(sid, -1);
+			self.ownerMap.save();
 
-			_luci2.ui.restoreScrollTop();
+			ev.data.sid  = self.add(name, sid);
+			ev.data.type = self.uci_type;
+			ev.data.name = name;
+
+			self.trigger('add', ev);
+
+			self.ownerMap.redraw();
+
+			L.ui.restoreScrollTop();
 		},
 
-		_ev_remove: function(ev)
+		handleRemove: function(ev)
 		{
 			var self = ev.data.self;
-			var sid  = ev.data.sid;
+			var sids = self.findParentSectionIDs($(this));
+
+			if (sids.length)
+			{
+				L.ui.saveScrollTop();
+
+				ev.sid = sids[0];
+				ev.parent_sid = sids[1];
 
-			_luci2.ui.saveScrollTop();
+				self.trigger('remove', ev);
 
-			self.map.save();
-			self.remove(sid);
-			self.map.redraw();
+				self.ownerMap.save();
+				self.remove(ev.sid, ev.parent_sid);
+				self.ownerMap.redraw();
 
-			_luci2.ui.restoreScrollTop();
+				L.ui.restoreScrollTop();
+			}
 
 			ev.stopPropagation();
 		},
 
-		_ev_sid: function(ev)
+		handleSID: function(ev)
 		{
 			var self = ev.data.self;
 			var text = $(this);
 			var addb = text.next();
 			var errt = addb.next();
 			var name = text.val();
-			var used = false;
 
 			if (!/^[a-zA-Z0-9_]*$/.test(name))
 			{
-				errt.text(_luci2.tr('Invalid section name')).show();
+				errt.text(L.tr('Invalid section name')).show();
 				text.addClass('error');
 				addb.prop('disabled', true);
 				return false;
 			}
 
-			for (var sid in self.map.uci.values[self.map.uci_package])
-				if (sid == name)
-				{
-					used = true;
-					break;
-				}
-
-			for (var sid in self.map.uci.creates[self.map.uci_package])
-				if (sid == name)
-				{
-					used = true;
-					break;
-				}
-
-			if (used)
+			if (L.uci.get(self.ownerMap.uci_package, name))
 			{
-				errt.text(_luci2.tr('Name already used')).show();
+				errt.text(L.tr('Name already used')).show();
 				text.addClass('error');
 				addb.prop('disabled', true);
 				return false;
@@ -5396,133 +6689,123 @@ function LuCI2()
 			return true;
 		},
 
-		_ev_tab: function(ev)
+		handleTab: function(ev)
 		{
 			var self = ev.data.self;
-			var sid  = ev.data.sid;
+			var $tab = $(this);
+			var sid  = self.findParentSectionIDs($tab)[0];
+
+			self.active_tab[sid] = $tab.parent().index();
+		},
+
+		handleTabValidate: function(ev)
+		{
+			var $pane = $(ev.delegateTarget);
+			var $badge = $pane.parent()
+				.children('.nav-tabs')
+				.children('li')
+				.eq($pane.index() - 1) // item #1 is the <ul>
+				.find('.badge:first');
+
+			var err_count = $pane.find('.luci2-field.luci2-form-error').not('.luci2-field-disabled').length;
+			if (err_count > 0)
+				$badge
+					.text(err_count)
+					.attr('title', L.trp('1 Error', '%d Errors', err_count).format(err_count))
+					.show();
+			else
+				$badge.hide();
+		},
+
+		handlePanelValidate: function(ev)
+		{
+			var $elem = $(this);
+			var $badge = $elem
+				.prevAll('.luci2-section-header:first')
+				.children('.luci2-section-teaser')
+				.find('.badge:first');
 
-			self.validate();
-			self.active_tab[sid] = parseInt(ev.target.getAttribute('data-luci2-tab-index'));
+			var err_count = $elem.find('.luci2-field.luci2-form-error').not('.luci2-field-disabled').length;
+			if (err_count > 0)
+				$badge
+					.text(err_count)
+					.attr('title', L.trp('1 Error', '%d Errors', err_count).format(err_count))
+					.show();
+			else
+				$badge.hide();
 		},
 
-		_ev_panel_collapse: function(ev)
+		handlePanelCollapse: function(ev)
 		{
 			var self = ev.data.self;
 
-			var this_panel = $(ev.target);
-			var this_toggle = this_panel.prevAll('[data-toggle="collapse"]:first');
+			var $items = $(ev.delegateTarget).children('.luci2-section-item');
+
+			var $this_panel  = $(ev.target);
+			var $this_teaser = $this_panel.prevAll('.luci2-section-header:first').children('.luci2-section-teaser');
+
+			var $prev_panel  = $items.children('.luci2-section-panel.in');
+			var $prev_teaser = $prev_panel.prevAll('.luci2-section-header:first').children('.luci2-section-teaser');
+
+			var sids = self.findParentSectionIDs($prev_panel);
 
-			var prev_toggle = $($(ev.delegateTarget).find('[data-toggle="collapse"]:eq(%d)'.format(self.active_panel)));
-			var prev_panel = $(prev_toggle.attr('data-target'));
+			self.setPanelIndex(sids[1], $this_panel.parent().index());
 
-			prev_panel
+			$prev_panel
 				.removeClass('in')
 				.addClass('collapse');
 
-			prev_toggle.find('.luci2-section-teaser')
+			$prev_teaser
 				.show()
 				.children('span:last')
 				.empty()
-				.append(self.teaser(prev_panel.attr('data-luci2-sid')));
+				.append(self.teaser(sids[0]));
 
-			this_toggle.find('.luci2-section-teaser')
+			$this_teaser
 				.hide();
 
-			self.active_panel = parseInt(this_panel.attr('data-luci2-panel-index'));
-			self.validate();
+			ev.stopPropagation();
 		},
 
-		_ev_panel_open: function(ev)
+		handleSort: function(ev)
 		{
-			var self  = ev.data.self;
-			var panel = $($(this).attr('data-target'));
-			var index = parseInt(panel.attr('data-luci2-panel-index'));
-
-			if (index == self.active_panel)
-				ev.stopPropagation();
-		},
+			var self = ev.data.self;
 
-		_ev_sort: function(ev)
-		{
-			var self    = ev.data.self;
-			var cur_idx = ev.data.index;
-			var new_idx = cur_idx + (ev.data.up ? -1 : 1);
-			var s       = self.sections();
+			var $item = $(this).parents('.luci2-section-item:first');
+			var $next = ev.data.up ? $item.prev() : $item.next();
 
-			if (new_idx >= 0 && new_idx < s.length)
+			if ($item.length && $next.length)
 			{
-				var tmp = s[cur_idx]['.index'];
-
-				s[cur_idx]['.index'] = s[new_idx]['.index'];
-				s[new_idx]['.index'] = tmp;
+				var cur_sid = $item.attr('data-luci2-sid');
+				var new_sid = $next.attr('data-luci2-sid');
 
-				if (self.active_panel == cur_idx)
-					self.active_panel = new_idx;
-				else if (self.active_panel == new_idx)
-					self.active_panel = cur_idx;
+				L.uci.swap(self.ownerMap.uci_package, cur_sid, new_sid);
 
-				self.map.uci.reorder = true;
-
-				self.map.save();
-				self.map.redraw();
+				self.ownerMap.save();
+				self.ownerMap.redraw();
 			}
 
 			ev.stopPropagation();
 		},
 
-		teaser: function(sid)
+		getPanelIndex: function(parent_sid)
 		{
-			var tf = this.teaser_fields;
-
-			if (!tf)
-			{
-				tf = this.teaser_fields = [ ];
-
-				if ($.isArray(this.options.teasers))
-				{
-					for (var i = 0; i < this.options.teasers.length; i++)
-					{
-						var f = this.options.teasers[i];
-						if (f instanceof _luci2.cbi.AbstractValue)
-							tf.push(f);
-						else if (typeof(f) == 'string' && this.fields[f] instanceof _luci2.cbi.AbstractValue)
-							tf.push(this.fields[f]);
-					}
-				}
-				else
-				{
-					for (var i = 0; tf.length <= 5 && i < this.tabs.length; i++)
-						for (var j = 0; tf.length <= 5 && j < this.tabs[i].fields.length; j++)
-							tf.push(this.tabs[i].fields[j]);
-				}
-			}
-
-			var t = '';
-
-			for (var i = 0; i < tf.length; i++)
-			{
-				if (tf[i].instance[sid] && tf[i].instance[sid].disabled)
-					continue;
-
-				var n = tf[i].options.caption || tf[i].name;
-				var v = tf[i].textvalue(sid);
-
-				if (typeof(v) == 'undefined')
-					continue;
-
-				t = t + '%s%s: <strong>%s</strong>'.format(t ? ' | ' : '', n, v);
-			}
+			return (this.active_panel[parent_sid || '__top__'] || 0);
+		},
 
-			return t;
+		setPanelIndex: function(parent_sid, new_index)
+		{
+			if (typeof(new_index) == 'number')
+				this.active_panel[parent_sid || '__top__'] = new_index;
 		},
 
-		_render_add: function()
+		renderAdd: function()
 		{
 			if (!this.options.addremove)
 				return null;
 
-			var text = _luci2.tr('Add section');
-			var ttip = _luci2.tr('Create new section...');
+			var text = L.tr('Add section');
+			var ttip = L.tr('Create new section...');
 
 			if ($.isArray(this.options.add_caption))
 				text = this.options.add_caption[0], ttip = this.options.add_caption[1];
@@ -5537,15 +6820,15 @@ function LuCI2()
 					.addClass('cbi-input-text')
 					.attr('type', 'text')
 					.attr('placeholder', ttip)
-					.blur({ self: this }, this._ev_sid)
-					.keyup({ self: this }, this._ev_sid)
+					.blur({ self: this }, this.handleSID)
+					.keyup({ self: this }, this.handleSID)
 					.appendTo(add);
 
 				$('<img />')
-					.attr('src', _luci2.globals.resource + '/icons/cbi/add.gif')
+					.attr('src', L.globals.resource + '/icons/cbi/add.gif')
 					.attr('title', text)
 					.addClass('cbi-button')
-					.click({ self: this }, this._ev_add)
+					.click({ self: this }, this.handleAdd)
 					.appendTo(add);
 
 				$('<div />')
@@ -5555,53 +6838,53 @@ function LuCI2()
 			}
 			else
 			{
-				_luci2.ui.button(text, 'success', ttip)
-					.click({ self: this }, this._ev_add)
+				L.ui.button(text, 'success', ttip)
+					.click({ self: this }, this.handleAdd)
 					.appendTo(add);
 			}
 
 			return add;
 		},
 
-		_render_remove: function(sid, index)
+		renderRemove: function(index)
 		{
 			if (!this.options.addremove)
 				return null;
 
-			var text = _luci2.tr('Remove');
-			var ttip = _luci2.tr('Remove this section');
+			var text = L.tr('Remove');
+			var ttip = L.tr('Remove this section');
 
 			if ($.isArray(this.options.remove_caption))
 				text = this.options.remove_caption[0], ttip = this.options.remove_caption[1];
 			else if (typeof(this.options.remove_caption) == 'string')
 				text = this.options.remove_caption, ttip = '';
 
-			return _luci2.ui.button(text, 'danger', ttip)
-				.click({ self: this, sid: sid, index: index }, this._ev_remove);
+			return L.ui.button(text, 'danger', ttip)
+				.click({ self: this, index: index }, this.handleRemove);
 		},
 
-		_render_sort: function(sid, index)
+		renderSort: function(index)
 		{
 			if (!this.options.sortable)
 				return null;
 
-			var b1 = _luci2.ui.button('↑', 'info', _luci2.tr('Move up'))
-				.click({ self: this, index: index, up: true }, this._ev_sort);
+			var b1 = L.ui.button('↑', 'info', L.tr('Move up'))
+				.click({ self: this, index: index, up: true }, this.handleSort);
 
-			var b2 = _luci2.ui.button('↓', 'info', _luci2.tr('Move down'))
-				.click({ self: this, index: index, up: false }, this._ev_sort);
+			var b2 = L.ui.button('↓', 'info', L.tr('Move down'))
+				.click({ self: this, index: index, up: false }, this.handleSort);
 
 			return b1.add(b2);
 		},
 
-		_render_caption: function()
+		renderCaption: function()
 		{
 			return $('<h3 />')
 				.addClass('panel-title')
 				.append(this.label('caption') || this.uci_type);
 		},
 
-		_render_description: function()
+		renderDescription: function()
 		{
 			var text = this.label('description');
 
@@ -5613,9 +6896,9 @@ function LuCI2()
 			return null;
 		},
 
-		_render_teaser: function(sid, index)
+		renderTeaser: function(sid, index)
 		{
-			if (this.options.collabsible || this.map.options.collabsible)
+			if (this.options.collabsible || this.ownerMap.options.collabsible)
 			{
 				return $('<div />')
 					.attr('id', this.id('teaser', sid))
@@ -5628,18 +6911,18 @@ function LuCI2()
 			return null;
 		},
 
-		_render_head: function(condensed)
+		renderHead: function(condensed)
 		{
 			if (condensed)
 				return null;
 
 			return $('<div />')
 				.addClass('panel-heading')
-				.append(this._render_caption())
-				.append(this._render_description());
+				.append(this.renderCaption())
+				.append(this.renderDescription());
 		},
 
-		_render_tab_description: function(sid, index, tab_index)
+		renderTabDescription: function(sid, index, tab_index)
 		{
 			var tab = this.tabs[tab_index];
 
@@ -5653,7 +6936,7 @@ function LuCI2()
 			return null;
 		},
 
-		_render_tab_head: function(sid, index, tab_index)
+		renderTabHead: function(sid, index, tab_index)
 		{
 			var tab = this.tabs[tab_index];
 			var cur = this.active_tab[sid] || 0;
@@ -5663,19 +6946,21 @@ function LuCI2()
 					.attr('id', this.id('nodetab', sid, tab.id))
 					.attr('href', '#' + this.id('node', sid, tab.id))
 					.attr('data-toggle', 'tab')
-					.attr('data-luci2-tab-index', tab_index)
 					.text((tab.caption ? tab.caption.format(tab.id) : tab.id) + ' ')
 					.append($('<span />')
 						.addClass('badge'))
-					.on('shown.bs.tab', { self: this, sid: sid }, this._ev_tab));
+					.on('shown.bs.tab', { self: this, sid: sid }, this.handleTab));
 
 			if (cur == tab_index)
 				tabh.addClass('active');
 
+			if (!tab.fields.length)
+				tabh.hide();
+
 			return tabh;
 		},
 
-		_render_tab_body: function(sid, index, tab_index)
+		renderTabBody: function(sid, index, tab_index)
 		{
 			var tab = this.tabs[tab_index];
 			var cur = this.active_tab[sid] || 0;
@@ -5683,8 +6968,8 @@ function LuCI2()
 			var tabb = $('<div />')
 				.addClass('tab-pane')
 				.attr('id', this.id('node', sid, tab.id))
-				.attr('data-luci2-tab-index', tab_index)
-				.append(this._render_tab_description(sid, index, tab_index));
+				.append(this.renderTabDescription(sid, index, tab_index))
+				.on('validate', this.handleTabValidate);
 
 			if (cur == tab_index)
 				tabb.addClass('active');
@@ -5695,39 +6980,38 @@ function LuCI2()
 			return tabb;
 		},
 
-		_render_section_head: function(sid, index)
+		renderPanelHead: function(sid, index, parent_sid)
 		{
 			var head = $('<div />')
 				.addClass('luci2-section-header')
-				.append(this._render_teaser(sid, index))
+				.append(this.renderTeaser(sid, index))
 				.append($('<div />')
 					.addClass('btn-group')
-					.append(this._render_sort(sid, index))
-					.append(this._render_remove(sid, index)));
+					.append(this.renderSort(index))
+					.append(this.renderRemove(index)));
 
 			if (this.options.collabsible)
 			{
 				head.attr('data-toggle', 'collapse')
-					.attr('data-parent', this.id('sectiongroup'))
-					.attr('data-target', '#' + this.id('panel', sid))
-					.on('click', { self: this }, this._ev_panel_open);
+					.attr('data-parent', this.id('sectiongroup', parent_sid))
+					.attr('data-target', '#' + this.id('panel', sid));
 			}
 
 			return head;
 		},
 
-		_render_section_body: function(sid, index)
+		renderPanelBody: function(sid, index, parent_sid)
 		{
 			var body = $('<div />')
 				.attr('id', this.id('panel', sid))
-				.attr('data-luci2-panel-index', index)
-				.attr('data-luci2-sid', sid);
+				.addClass('luci2-section-panel')
+				.on('validate', this.handlePanelValidate);
 
-			if (this.options.collabsible || this.map.options.collabsible)
+			if (this.options.collabsible || this.ownerMap.options.collabsible)
 			{
 				body.addClass('panel-collapse collapse');
 
-				if (index == this.active_panel)
+				if (index == this.getPanelIndex(parent_sid))
 					body.addClass('in');
 			}
 
@@ -5740,8 +7024,8 @@ function LuCI2()
 
 			for (var j = 0; j < this.tabs.length; j++)
 			{
-				tab_heads.append(this._render_tab_head(sid, index, j));
-				tab_bodies.append(this._render_tab_body(sid, index, j));
+				tab_heads.append(this.renderTabHead(sid, index, j));
+				tab_bodies.append(this.renderTabBody(sid, index, j));
 			}
 
 			body.append(tab_bodies);
@@ -5749,32 +7033,36 @@ function LuCI2()
 			if (this.tabs.length <= 1)
 				tab_heads.hide();
 
+			for (var i = 0; i < this.subsections.length; i++)
+				body.append(this.subsections[i].render(false, sid));
+
 			return body;
 		},
 
-		_render_body: function(condensed)
+		renderBody: function(condensed, parent_sid)
 		{
-			var s = this.sections();
+			var s = this.getUCISections(parent_sid);
+			var n = this.getPanelIndex(parent_sid);
 
-			if (this.active_panel < 0)
-				this.active_panel += s.length;
-			else if (this.active_panel >= s.length)
-				this.active_panel = s.length - 1;
+			if (n < 0)
+				this.setPanelIndex(parent_sid, n + s.length);
+			else if (n >= s.length)
+				this.setPanelIndex(parent_sid, s.length - 1);
 
 			var body = $('<ul />')
-				.addClass('list-group');
+				.addClass('luci2-section-group list-group');
 
 			if (this.options.collabsible)
 			{
-				body.attr('id', this.id('sectiongroup'))
-					.on('show.bs.collapse', { self: this }, this._ev_panel_collapse);
+				body.attr('id', this.id('sectiongroup', parent_sid))
+					.on('show.bs.collapse', { self: this }, this.handlePanelCollapse);
 			}
 
 			if (s.length == 0)
 			{
 				body.append($('<li />')
 					.addClass('list-group-item text-muted')
-					.text(this.label('placeholder') || _luci2.tr('There are no entries defined yet.')))
+					.text(this.label('placeholder') || L.tr('There are no entries defined yet.')))
 			}
 
 			for (var i = 0; i < s.length; i++)
@@ -5783,53 +7071,56 @@ function LuCI2()
 				var inst = this.instance[sid] = { tabs: [ ] };
 
 				body.append($('<li />')
-					.addClass('list-group-item')
-					.append(this._render_section_head(sid, i))
-					.append(this._render_section_body(sid, i)));
+					.addClass('luci2-section-item list-group-item')
+					.attr('id', this.id('sectionitem', sid))
+					.attr('data-luci2-sid', sid)
+					.append(this.renderPanelHead(sid, i, parent_sid))
+					.append(this.renderPanelBody(sid, i, parent_sid)));
 			}
 
 			return body;
 		},
 
-		render: function(condensed)
+		render: function(condensed, parent_sid)
 		{
 			this.instance = { };
 
 			var panel = $('<div />')
 				.addClass('panel panel-default')
-				.append(this._render_head(condensed))
-				.append(this._render_body(condensed));
+				.append(this.renderHead(condensed))
+				.append(this.renderBody(condensed, parent_sid));
 
 			if (this.options.addremove)
 				panel.append($('<div />')
 					.addClass('panel-footer')
-					.append(this._render_add()));
+					.append(this.renderAdd()));
 
 			return panel;
 		},
 
-		finish: function()
+		finish: function(parent_sid)
 		{
-			var s = this.sections();
+			var s = this.getUCISections(parent_sid);
 
 			for (var i = 0; i < s.length; i++)
 			{
 				var sid = s[i]['.name'];
 
-				this.validate_section(sid);
-
-				if (i != this.active_panel)
+				if (i != this.getPanelIndex(parent_sid))
 					$('#' + this.id('teaser', sid)).children('span:last')
 						.append(this.teaser(sid));
 				else
 					$('#' + this.id('teaser', sid))
 						.hide();
+
+				for (var j = 0; j < this.subsections.length; j++)
+					this.subsections[j].finish(sid);
 			}
 		}
 	});
 
 	this.cbi.TableSection = this.cbi.TypedSection.extend({
-		_render_table_head: function()
+		renderTableHead: function()
 		{
 			var thead = $('<thead />')
 				.append($('<tr />')
@@ -5849,9 +7140,11 @@ function LuCI2()
 			return thead;
 		},
 
-		_render_table_row: function(sid, index)
+		renderTableRow: function(sid, index)
 		{
 			var row = $('<tr />')
+				.addClass('luci2-section-item')
+				.attr('id', this.id('sectionitem', sid))
 				.attr('data-luci2-sid', sid);
 
 			for (var j = 0; j < this.tabs[0].fields.length; j++)
@@ -5864,19 +7157,20 @@ function LuCI2()
 			if (this.options.addremove !== false || this.options.sortable)
 			{
 				row.append($('<td />')
+					.css('width', '1%')
 					.addClass('text-right')
 					.append($('<div />')
 						.addClass('btn-group')
-						.append(this._render_sort(sid, index))
-						.append(this._render_remove(sid, index))));
+						.append(this.renderSort(index))
+						.append(this.renderRemove(index))));
 			}
 
 			return row;
 		},
 
-		_render_table_body: function()
+		renderTableBody: function(parent_sid)
 		{
-			var s = this.sections();
+			var s = this.getUCISections(parent_sid);
 
 			var tbody = $('<tbody />');
 
@@ -5891,7 +7185,7 @@ function LuCI2()
 					.append($('<td />')
 						.addClass('text-muted')
 						.attr('colspan', cols)
-						.text(this.label('placeholder') || _luci2.tr('There are no entries defined yet.'))));
+						.text(this.label('placeholder') || L.tr('There are no entries defined yet.'))));
 			}
 
 			for (var i = 0; i < s.length; i++)
@@ -5899,43 +7193,57 @@ function LuCI2()
 				var sid = s[i]['.name'];
 				var inst = this.instance[sid] = { tabs: [ ] };
 
-				tbody.append(this._render_table_row(sid, i));
+				tbody.append(this.renderTableRow(sid, i));
 			}
 
 			return tbody;
 		},
 
-		_render_body: function(condensed)
+		renderBody: function(condensed, parent_sid)
 		{
 			return $('<table />')
 				.addClass('table table-condensed table-hover')
-				.append(this._render_table_head())
-				.append(this._render_table_body());
+				.append(this.renderTableHead())
+				.append(this.renderTableBody(parent_sid));
 		}
 	});
 
 	this.cbi.NamedSection = this.cbi.TypedSection.extend({
-		sections: function(cb)
+		getUCISections: function(cb)
 		{
 			var sa = [ ];
-			var pkg = this.map.uci.values[this.map.uci_package];
+			var sl = L.uci.sections(this.ownerMap.uci_package);
 
-			for (var s in pkg)
-				if (pkg[s]['.name'] == this.uci_type)
+			for (var i = 0; i < sl.length; i++)
+				if (sl[i]['.name'] == this.uci_type)
 				{
-					sa.push(pkg[s]);
+					sa.push(sl[i]);
 					break;
 				}
 
 			if (typeof(cb) == 'function' && sa.length > 0)
-				cb.apply(this, [ sa[0] ]);
+				cb.call(this, sa[0]);
 
 			return sa;
 		}
 	});
 
+	this.cbi.SingleSection = this.cbi.NamedSection.extend({
+		render: function()
+		{
+			this.instance = { };
+			this.instance[this.uci_type] = { tabs: [ ] };
+
+			return $('<div />')
+				.addClass('luci2-section-item')
+				.attr('id', this.id('sectionitem', this.uci_type))
+				.attr('data-luci2-sid', this.uci_type)
+				.append(this.renderPanelBody(this.uci_type, 0));
+		}
+	});
+
 	this.cbi.DummySection = this.cbi.TypedSection.extend({
-		sections: function(cb)
+		getUCISections: function(cb)
 		{
 			if (typeof(cb) == 'function')
 				cb.apply(this, [ { '.name': this.uci_type } ]);
@@ -5951,41 +7259,20 @@ function LuCI2()
 
 			this.uci_package = uci_package;
 			this.sections = [ ];
-			this.options = _luci2.defaults(options, {
+			this.options = L.defaults(options, {
 				save:    function() { },
-				prepare: function() {
-					return _luci2.uci.writable(function(writable) {
-						self.options.readonly = !writable;
-					});
-				}
+				prepare: function() { }
 			});
 		},
 
-		_load_cb: function(packages)
+		loadCallback: function()
 		{
-			for (var i = 0; i < packages.length; i++)
-			{
-				this.uci.values[packages[i]['.package']] = packages[i];
-				delete packages[i]['.package'];
-			}
-
-			var deferreds = [ _luci2.deferrable(this.options.prepare()) ];
+			var deferreds = [ L.deferrable(this.options.prepare()) ];
 
 			for (var i = 0; i < this.sections.length; i++)
 			{
-				for (var f in this.sections[i].fields)
-				{
-					if (typeof(this.sections[i].fields[f].load) != 'function')
-						continue;
-
-					var s = this.sections[i].sections();
-					for (var j = 0; j < s.length; j++)
-					{
-						var rv = this.sections[i].fields[f].load(s[j]['.name']);
-						if (_luci2.isDeferred(rv))
-							deferreds.push(rv);
-					}
-				}
+				var rv = this.sections[i].load();
+				deferreds.push.apply(deferreds, rv);
 			}
 
 			return $.when.apply($, deferreds);
@@ -5994,42 +7281,53 @@ function LuCI2()
 		load: function()
 		{
 			var self = this;
+			var packages = [ this.uci_package ];
 
-			this.uci = {
-				newid:   0,
-				values:  { },
-				creates: { },
-				changes: { },
-				deletes: { },
-				reorder: false
-			};
+			for (var i = 0; i < this.sections.length; i++)
+				packages.push.apply(packages, this.sections[i].findAdditionalUCIPackages());
 
-			var packages = { };
+			for (var i = 0; i < packages.length; i++)
+				if (!L.uci.writable(packages[i]))
+				{
+					this.options.readonly = true;
+					break;
+				}
 
-			for (var i = 0; i < this.sections.length; i++)
-				this.sections[i].ucipackages(packages);
+			return L.uci.load(packages).then(function() {
+				return self.loadCallback();
+			});
+		},
+
+		handleTab: function(ev)
+		{
+			ev.data.self.active_tab = $(ev.target).parent().index();
+		},
 
-			packages[this.uci_package] = true;
+		handleApply: function(ev)
+		{
+			var self = ev.data.self;
 
-			_luci2.rpc.batch();
+			self.trigger('apply', ev);
+		},
 
-			for (var pkg in packages)
-				_luci2.uci.get_all(pkg);
+		handleSave: function(ev)
+		{
+			var self = ev.data.self;
 
-			return _luci2.rpc.flush().then(function(packages) {
-				return self._load_cb(packages);
+			self.send().then(function() {
+				self.trigger('save', ev);
 			});
 		},
 
-		_ev_tab: function(ev)
+		handleReset: function(ev)
 		{
 			var self = ev.data.self;
 
-			self.validate();
-			self.active_tab = parseInt(ev.target.getAttribute('data-luci2-tab-index'));
+			self.trigger('reset', ev);
+			self.reset();
 		},
 
-		_render_tab_head: function(tab_index)
+		renderTabHead: function(tab_index)
 		{
 			var section = this.sections[tab_index];
 			var cur = this.active_tab || 0;
@@ -6039,11 +7337,10 @@ function LuCI2()
 					.attr('id', section.id('sectiontab'))
 					.attr('href', '#' + section.id('section'))
 					.attr('data-toggle', 'tab')
-					.attr('data-luci2-tab-index', tab_index)
 					.text(section.label('caption') + ' ')
 					.append($('<span />')
 						.addClass('badge'))
-					.on('shown.bs.tab', { self: this }, this._ev_tab));
+					.on('shown.bs.tab', { self: this }, this.handleTab));
 
 			if (cur == tab_index)
 				tabh.addClass('active');
@@ -6051,7 +7348,7 @@ function LuCI2()
 			return tabh;
 		},
 
-		_render_tab_body: function(tab_index)
+		renderTabBody: function(tab_index)
 		{
 			var section = this.sections[tab_index];
 			var desc = section.label('description');
@@ -6059,8 +7356,7 @@ function LuCI2()
 
 			var tabb = $('<div />')
 				.addClass('tab-pane')
-				.attr('id', section.id('section'))
-				.attr('data-luci2-tab-index', tab_index);
+				.attr('id', section.id('section'));
 
 			if (cur == tab_index)
 				tabb.addClass('active');
@@ -6079,7 +7375,7 @@ function LuCI2()
 			return tabb;
 		},
 
-		_render_body: function()
+		renderBody: function()
 		{
 			var tabs = $('<ul />')
 				.addClass('nav nav-tabs');
@@ -6089,8 +7385,8 @@ function LuCI2()
 
 			for (var i = 0; i < this.sections.length; i++)
 			{
-				tabs.append(this._render_tab_head(i));
-				body.append(this._render_tab_body(i));
+				tabs.append(this.renderTabHead(i));
+				body.append(this.renderTabBody(i));
 			}
 
 			if (this.options.tabbed)
@@ -6101,6 +7397,24 @@ function LuCI2()
 			return body;
 		},
 
+		renderFooter: function()
+		{
+			var evdata = {
+				self: this
+			};
+
+			return $('<div />')
+				.addClass('panel panel-default panel-body text-right')
+				.append($('<div />')
+					.addClass('btn-group')
+					.append(L.ui.button(L.tr('Save & Apply'), 'primary')
+						.click(evdata, this.handleApply))
+					.append(L.ui.button(L.tr('Save'), 'default')
+						.click(evdata, this.handleSave))
+					.append(L.ui.button(L.tr('Reset'), 'default')
+						.click(evdata, this.handleReset)));
+		},
+
 		render: function()
 		{
 			var map = $('<form />');
@@ -6113,21 +7427,10 @@ function LuCI2()
 				map.append($('<p />')
 					.text(this.options.description));
 
-			map.append(this._render_body());
+			map.append(this.renderBody());
 
 			if (this.options.pageaction !== false)
-			{
-				map.append($('<div />')
-					.addClass('panel panel-default panel-body text-right')
-					.append($('<div />')
-						.addClass('btn-group')
-						.append(_luci2.ui.button(_luci2.tr('Save & Apply'), 'primary')
-							.click({ self: this }, function(ev) {  }))
-						.append(_luci2.ui.button(_luci2.tr('Save'), 'default')
-							.click({ self: this }, function(ev) { ev.data.self.send(); }))
-						.append(_luci2.ui.button(_luci2.tr('Reset'), 'default')
-							.click({ self: this }, function(ev) { ev.data.self.insertInto(ev.data.self.target); }))));
-			}
+				map.append(this.renderFooter());
 
 			return map;
 		},
@@ -6151,195 +7454,34 @@ function LuCI2()
 		{
 			var w = widget ? new widget(uci_type, options) : null;
 
-			if (!(w instanceof _luci2.cbi.AbstractSection))
+			if (!(w instanceof L.cbi.AbstractSection))
 				throw 'Widget must be an instance of AbstractSection';
 
-			w.map = this;
+			w.ownerMap = this;
 			w.index = this.sections.length;
 
 			this.sections.push(w);
 			return w;
 		},
 
-		formvalue: function()
-		{
-			var rv = { };
-
-			for (var i = 0; i < this.sections.length; i++)
-			{
-				var sids = this.sections[i].formvalue();
-				for (var sid in sids)
-				{
-					var s = rv[sid] || (rv[sid] = { });
-					$.extend(s, sids[sid]);
-				}
-			}
-
-			return rv;
-		},
-
 		add: function(conf, type, name)
 		{
-			var c = this.uci.creates;
-			var s = '.new.%d'.format(this.uci.newid++);
-
-			if (!c[conf])
-				c[conf] = { };
-
-			c[conf][s] = {
-				'.type':      type,
-				'.name':      s,
-				'.create':    name,
-				'.anonymous': !name,
-				'.index':     1000 + this.uci.newid
-			};
-
-			return s;
+			return L.uci.add(conf, type, name);
 		},
 
 		remove: function(conf, sid)
 		{
-			var n = this.uci.creates;
-			var c = this.uci.changes;
-			var d = this.uci.deletes;
-
-			/* requested deletion of a just created section */
-			if (sid.indexOf('.new.') == 0)
-			{
-				if (n[conf])
-					delete n[conf][sid];
-			}
-			else
-			{
-				if (c[conf])
-					delete c[conf][sid];
-
-				if (!d[conf])
-					d[conf] = { };
-
-				d[conf][sid] = true;
-			}
-		},
-
-		ucisections: function(conf, cb)
-		{
-			var sa = [ ];
-			var pkg = this.uci.values[conf];
-			var crt = this.uci.creates[conf];
-			var del = this.uci.deletes[conf];
-
-			if (!pkg)
-				return sa;
-
-			for (var s in pkg)
-				if (!del || del[s] !== true)
-					sa.push(pkg[s]);
-
-			if (crt)
-				for (var s in crt)
-					sa.push(crt[s]);
-
-			sa.sort(function(a, b) {
-				return a['.index'] - b['.index'];
-			});
-
-			for (var i = 0; i < sa.length; i++)
-				sa[i]['.index'] = i;
-
-			if (typeof(cb) == 'function')
-				for (var i = 0; i < sa.length; i++)
-					cb.apply(this, [ sa[i] ]);
-
-			return sa;
+			return L.uci.remove(conf, sid);
 		},
 
 		get: function(conf, sid, opt)
 		{
-			var v = this.uci.values;
-			var n = this.uci.creates;
-			var c = this.uci.changes;
-			var d = this.uci.deletes;
-
-			/* requested option in a just created section */
-			if (sid.indexOf('.new.') == 0)
-			{
-				if (!n[conf])
-					return undefined;
-
-				if (typeof(opt) == 'undefined')
-					return (n[conf][sid] || { });
-
-				return n[conf][sid][opt];
-			}
-
-			/* requested an option value */
-			if (typeof(opt) != 'undefined')
-			{
-				/* check whether option was deleted */
-				if (d[conf] && d[conf][sid])
-				{
-					if (d[conf][sid] === true)
-						return undefined;
-
-					for (var i = 0; i < d[conf][sid].length; i++)
-						if (d[conf][sid][i] == opt)
-							return undefined;
-				}
-
-				/* check whether option was changed */
-				if (c[conf] && c[conf][sid] && typeof(c[conf][sid][opt]) != 'undefined')
-					return c[conf][sid][opt];
-
-				/* return base value */
-				if (v[conf] && v[conf][sid])
-					return v[conf][sid][opt];
-
-				return undefined;
-			}
-
-			/* requested an entire section */
-			if (v[conf])
-				return (v[conf][sid] || { });
-
-			return undefined;
+			return L.uci.get(conf, sid, opt);
 		},
 
 		set: function(conf, sid, opt, val)
 		{
-			var n = this.uci.creates;
-			var c = this.uci.changes;
-			var d = this.uci.deletes;
-
-			if (sid.indexOf('.new.') == 0)
-			{
-				if (n[conf] && n[conf][sid])
-				{
-					if (typeof(val) != 'undefined')
-						n[conf][sid][opt] = val;
-					else
-						delete n[conf][sid][opt];
-				}
-			}
-			else if (typeof(val) != 'undefined')
-			{
-				if (!c[conf])
-					c[conf] = { };
-
-				if (!c[conf][sid])
-					c[conf][sid] = { };
-
-				c[conf][sid][opt] = val;
-			}
-			else
-			{
-				if (!d[conf])
-					d[conf] = { };
-
-				if (!d[conf][sid])
-					d[conf][sid] = [ ];
-
-				d[conf][sid].push(opt);
-			}
+			return L.uci.set(conf, sid, opt, val);
 		},
 
 		validate: function()
@@ -6357,170 +7499,169 @@ function LuCI2()
 
 		save: function()
 		{
-			if (this.options.readonly)
-				return _luci2.deferrable();
-
-			var deferreds = [ _luci2.deferrable(this.options.save()) ];
+			var self = this;
 
-			for (var i = 0; i < this.sections.length; i++)
-			{
-				if (this.sections[i].options.readonly)
-					continue;
+			if (self.options.readonly)
+				return L.deferrable();
 
-				for (var f in this.sections[i].fields)
-				{
-					if (typeof(this.sections[i].fields[f].save) != 'function')
-						continue;
+			var deferreds = [ ];
 
-					var s = this.sections[i].sections();
-					for (var j = 0; j < s.length; j++)
-					{
-						var rv = this.sections[i].fields[f].save(s[j]['.name']);
-						if (_luci2.isDeferred(rv))
-							deferreds.push(rv);
-					}
-				}
+			for (var i = 0; i < self.sections.length; i++)
+			{
+				var rv = self.sections[i].save();
+				deferreds.push.apply(deferreds, rv);
 			}
 
-			return $.when.apply($, deferreds);
+			return $.when.apply($, deferreds).then(function() {
+				return L.deferrable(self.options.save());
+			});
 		},
 
-		_send_uci_reorder: function()
+		send: function()
 		{
-			if (!this.uci.reorder)
-				return _luci2.deferrable();
+			if (!this.validate())
+				return L.deferrable();
 
-			_luci2.rpc.batch();
+			var self = this;
 
-			/*
-			 gather all created and existing sections, sort them according
-			 to their index value and issue an uci order call
-			*/
-			for (var c in this.uci.values)
-			{
-				var o = [ ];
+			L.ui.saveScrollTop();
+			L.ui.loading(true);
+
+			return this.save().then(function() {
+				return L.uci.save();
+			}).then(function() {
+				return L.ui.updateChanges();
+			}).then(function() {
+				return self.load();
+			}).then(function() {
+				self.redraw();
+				self = null;
 
-				if (this.uci.creates && this.uci.creates[c])
-					for (var s in this.uci.creates[c])
-						o.push(this.uci.creates[c][s]);
+				L.ui.loading(false);
+				L.ui.restoreScrollTop();
+			});
+		},
 
-				for (var s in this.uci.values[c])
-					o.push(this.uci.values[c][s]);
+		revert: function()
+		{
+			var packages = [ this.uci_package ];
 
-				if (o.length > 0)
-				{
-					o.sort(function(a, b) {
-						return (a['.index'] - b['.index']);
-					});
+			for (var i = 0; i < this.sections.length; i++)
+				packages.push.apply(packages, this.sections[i].findAdditionalUCIPackages());
 
-					var sids = [ ];
+			L.uci.unload(packages);
+		},
 
-					for (var i = 0; i < o.length; i++)
-						sids.push(o[i]['.name']);
+		reset: function()
+		{
+			var self = this;
 
-					_luci2.uci.order(c, sids);
-				}
-			}
+			self.revert();
 
-			return _luci2.rpc.flush();
+			return self.insertInto(self.target);
 		},
 
-		_send_uci: function()
+		insertInto: function(id)
 		{
-			_luci2.rpc.batch();
-
 			var self = this;
-			var snew = [ ];
+			    self.target = $(id);
 
-			if (this.uci.creates)
-				for (var c in this.uci.creates)
-					for (var s in this.uci.creates[c])
-					{
-						var r = {
-							config: c,
-							values: { }
-						};
+			L.ui.loading(true);
+			self.target.hide();
 
-						for (var k in this.uci.creates[c][s])
-						{
-							if (k == '.type')
-								r.type = this.uci.creates[c][s][k];
-							else if (k == '.create')
-								r.name = this.uci.creates[c][s][k];
-							else if (k.charAt(0) != '.')
-								r.values[k] = this.uci.creates[c][s][k];
-						}
+			return self.load().then(function() {
+				self.target.empty().append(self.render());
+				self.finish();
+				self.target.show();
+				self = null;
+				L.ui.loading(false);
+			});
+		}
+	});
 
-						snew.push(this.uci.creates[c][s]);
+	this.cbi.Modal = this.cbi.Map.extend({
+		handleApply: function(ev)
+		{
+			var self = ev.data.self;
 
-						_luci2.uci.add(r.config, r.type, r.name, r.values);
-					}
+			self.trigger('apply', ev);
+		},
 
-			if (this.uci.changes)
-				for (var c in this.uci.changes)
-					for (var s in this.uci.changes[c])
-						_luci2.uci.set(c, s, this.uci.changes[c][s]);
+		handleSave: function(ev)
+		{
+			var self = ev.data.self;
 
-			if (this.uci.deletes)
-				for (var c in this.uci.deletes)
-					for (var s in this.uci.deletes[c])
-					{
-						var o = this.uci.deletes[c][s];
-						_luci2.uci['delete'](c, s, (o === true) ? undefined : o);
-					}
+			self.send().then(function() {
+				self.trigger('save', ev);
+				self.close();
+			});
+		},
 
-			return _luci2.rpc.flush().then(function(responses) {
-				/*
-				 array "snew" holds references to the created uci sections,
-				 use it to assign the returned names of the new sections
-				*/
-				for (var i = 0; i < snew.length; i++)
-					snew[i]['.name'] = responses[i];
+		handleReset: function(ev)
+		{
+			var self = ev.data.self;
 
-				return self._send_uci_reorder();
-			});
+			self.trigger('close', ev);
+			self.revert();
+			self.close();
 		},
 
-		send: function()
+		renderFooter: function()
 		{
-			if (!this.validate())
-				return _luci2.deferrable();
+			var evdata = {
+				self: this
+			};
 
-			var self = this;
+			return $('<div />')
+				.addClass('btn-group')
+				.append(L.ui.button(L.tr('Save & Apply'), 'primary')
+					.click(evdata, this.handleApply))
+				.append(L.ui.button(L.tr('Save'), 'default')
+					.click(evdata, this.handleSave))
+				.append(L.ui.button(L.tr('Cancel'), 'default')
+					.click(evdata, this.handleReset));
+		},
 
-			_luci2.ui.saveScrollTop();
-			_luci2.ui.loading(true);
+		render: function()
+		{
+			var modal = L.ui.dialog(this.label('caption'), null, { wide: true });
+			var map = $('<form />');
 
-			return this.save().then(function() {
-				return self._send_uci();
-			}).then(function() {
-				return _luci2.ui.updateChanges();
-			}).then(function() {
-				return self.load();
-			}).then(function() {
-				self.redraw();
-				self = null;
+			var desc = this.label('description');
+			if (desc)
+				map.append($('<p />').text(desc));
 
-				_luci2.ui.loading(false);
-				_luci2.ui.restoreScrollTop();
-			});
+			map.append(this.renderBody());
+
+			modal.find('.modal-body').append(map);
+			modal.find('.modal-footer').append(this.renderFooter());
+
+			return modal;
 		},
 
-		insertInto: function(id)
+		redraw: function()
+		{
+			this.render();
+			this.finish();
+		},
+
+		show: function()
 		{
 			var self = this;
-			    self.target = $(id);
 
-			_luci2.ui.loading(true);
-			self.target.hide();
+			L.ui.loading(true);
 
 			return self.load().then(function() {
-				self.target.empty().append(self.render());
+				self.render();
 				self.finish();
-				self.target.show();
-				self = null;
-				_luci2.ui.loading(false);
+
+				L.ui.loading(false);
 			});
+		},
+
+		close: function()
+		{
+			L.ui.dialog(false);
 		}
 	});
 };