diff --git a/assets/webconfig/content/dashboard.html b/assets/webconfig/content/dashboard.html
index b1ca9bca..591cc0df 100644
--- a/assets/webconfig/content/dashboard.html
+++ b/assets/webconfig/content/dashboard.html
@@ -1,80 +1,79 @@
+			<div class="container-fluid" id="content_dashboard">
+				<div class="row">
+					<div class="col-lg-12">
+						<h2 class="page-header"><i class="fa fa-dashboard fa-fw"></i><span lang="en" data-lang-token="main_menu_dashboard_token">Dashboard</span></h2>
+						<div class="introd">
+							<h4 lang="en" data-lang-token="dashboard_label_intro">The dashboard give you a quick overview about the status of Hyperion and show you the latest news of the Hyperion Blog.</h4>
+						</div>
+						<hr>
+							<div class="col-md-6 col-xxl-4">
+								<div class="panel panel-default">
+									<div class="panel-heading">
+										<i class="fa fa-info-circle fa-fw"></i>
+										<span lang="en" data-lang-token="dashboard_infobox_label_title">Information</span>
+									</div>
+									<div class="panel-body">
+										<table class="table borderless">
+											<tbody>
+												<tr>
+													<td lang="en" data-lang-token="dashboard_infobox_label_currenthyp">Your Hyperion version:</td>
+													<td id="currentversion">unknown</td>
+												</tr>
+												<tr>
+													<td lang="en" data-lang-token="dashboard_infobox_label_latesthyp">Latest version:</td>
+													<td id="latestversion">unknown</td>
+												</tr>
+												<tr>
+													<td lang="en" data-lang-token="dashboard_infobox_label_leddevice">LED type:</td>
+													<td id="dash_leddevice">unknown</td>
+												</tr>
+												<tr>
+													<td lang="en" data-lang-token="dashboard_infobox_label_device">Device:</td>
+													<td id="dash_systeminfo"></td>
+												</tr>
+											</tbody>
+										</table>
+										<hr>
+										<span id="versioninforesult"></span>
+									</div>
+								</div>
+							</div>
+							<div class="col-md-6 col-xxl-3">
+								<div class="panel panel-default">
+									<div class="panel-heading">
+										<i class="fa fa-eye fa-fw"></i>
+										<span lang="en" data-lang-token="dashboard_componentbox_label_title">Components status</span>
+									</div>
+									<div class="panel-body">
+										  <table class="table">
+											<thead>
+												<tr>
+													<th lang="en" data-lang-token="dashboard_componentbox_label_comp">Component</th>
+													<th lang="en" data-lang-token="dashboard_componentbox_label_status">Status</th>
+												</tr>
+											</thead>
+											<tbody id="tab_components">
+											</tbody>
+										</table>
+									</div>
+								</div>
+							</div>
+							<div class="col-md-12 col-xxl-5">
+								<div class="panel panel-default">
+									<div class="panel-heading">
+										<i class="fa fa-newspaper-o fa-fw"></i>
+										<span lang="en" data-lang-token="dashboard_newsbox_label_title">Latest blog posts</span>
+									</div>
+									<div class="panel-body">
 
-<div class="container-fluid" id="content_dashboard">
-	<div class="row">
-		<div class="col-lg-12">
-			<h2 class="page-header"><i class="fa fa-dashboard fa-fw"></i><span lang="en" data-lang-token="main_menu_dashboard_token">Dashboard</span></h2>
-			<div class="introd">
-				<h4 lang="en" data-lang-token="dashboard_label_intro">The dashboard give you a quick overview about the status of Hyperion and show you the latest news of the Hyperion Blog.</h4>
+									</div>
+								</div>
+							</div>
+
+					</div>
+					<!-- /.col-lg-12 -->
+				</div>
+				<!-- /.row -->
 			</div>
-			<hr>
-				<div class="col-lg-4">
-					<div class="panel panel-default">
-						<div class="panel-heading">
-							<i class="fa fa-info-circle fa-fw"></i>
-							<span lang="en" data-lang-token="dashboard_infobox_label_title">Information</span>
-						</div>
-						<div class="panel-body">
-							<table class="table borderless">
-								<tbody>
-									<tr>
-										<td lang="en" data-lang-token="dashboard_infobox_label_currenthyp">Your Hyperion version:</td>
-										<td id="currentversion">unknown</td>
-									</tr>
-									<tr>
-										<td lang="en" data-lang-token="dashboard_infobox_label_latesthyp">Latest version:</td>
-										<td id="latestversion">unknown</td>
-									</tr>
-									<tr>
-										<td lang="en" data-lang-token="dashboard_infobox_label_leddevice">LED type:</td>
-										<td id="dash_leddevice">unknown</td>
-									</tr>
-									<tr>
-										<td lang="en" data-lang-token="dashboard_infobox_label_device">Device:</td>
-										<td id="dash_systeminfo"></td>
-									</tr>
-								</tbody>
-							</table>
-							<hr>
-							<span id="versioninforesult"></span>
-						</div>
-					</div>
-				</div>
-				<div class="col-lg-3">
-					<div class="panel panel-default">
-						<div class="panel-heading">
-							<i class="fa fa-eye fa-fw"></i>
-							<span lang="en" data-lang-token="dashboard_componentbox_label_title">Components status</span>
-						</div>
-						<div class="panel-body">
-							  <table class="table">
-								<thead>
-									<tr>
-										<th lang="en" data-lang-token="dashboard_componentbox_label_comp">Component</th>
-										<th lang="en" data-lang-token="dashboard_componentbox_label_status">Status</th>
-									</tr>
-								</thead>
-								<tbody id="tab_components">
-								</tbody>
-							</table>
-						</div>
-					</div>
-				</div>
-				<div class="col-lg-5">
-					<div class="panel panel-default">
-						<div class="panel-heading">
-							<i class="fa fa-newspaper-o fa-fw"></i>
-							<span lang="en" data-lang-token="dashboard_newsbox_label_title">Latest blog posts</span>
-						</div>
-						<div class="panel-body">
-
-						</div>
-					</div>
-				</div>
-
-		</div>
-		<!-- /.col-lg-12 -->
-	</div>
-	<!-- /.row -->
-</div>
-<!-- /.container-fluid -->
-
+			<!-- /.container-fluid -->
+ 
diff --git a/assets/webconfig/content/leds.html b/assets/webconfig/content/leds.html
index 38152486..1d6e09bc 100644
--- a/assets/webconfig/content/leds.html
+++ b/assets/webconfig/content/leds.html
@@ -3,7 +3,7 @@
 	background-image:url(/img/hyperion/hyperionlogo.png); background-repeat:no-repeat; background-position: center; border-radius:2px; }
 	.led { display:inline-block; border: 1px solid black; position:absolute; opacity:0.8; text-align:center;
 	vertical-align:middle; padding:4px;  border-radius:2px;}
-	.led_num {display:none; position:relative; color:black; background-color: white;
+	.led_num, .led_prev_num {display:none; position:relative; color:black; background-color: white;
 		border-radius:2px; padding:1px; vertical-align:middle; text-align:center;  font-size:0.8em;}
 	#leds_controls {white-space:nowrap; margin-top:500px;}
 </style>
@@ -95,7 +95,7 @@
 		<div id="menu_gencfg" class="tab-pane fade" style="padding-top:10px">
 
 			<div class="row">
-				<div class="col-sm-6">
+				<div class="col-lg-6 col-md-12">
 
 					<div class="panel-group" id="accordion">
 
@@ -108,59 +108,60 @@
 							<div id="collapse1" class="panel-collapse collapse in">
 								<div class="panel-body ">
 									<div class="form-group">
-										<label class="col-form-label col-md-6" style="width:170px;max-width:200px" lang="en" data-lang-token="conf_leds_layout_cl_top">Top</label>
+										<label class="col-form-label col-md-6" for="ip_cl_ledstop" style="width:170px" lang="en" data-lang-token="conf_leds_layout_cl_top">Top</label>
 										<div class=" input-group">
 											<input class="form-control ledCLconstr" id="ip_cl_ledstop" type="number" value="10" min="0" step="1"></input>
 											<div class="input-group-addon">LEDs</div>
 										</div>
 									</div>
 									<div class="form-group">
-										<label class="col-form-label col-md-6" style="width:170px;max-width:200px" lang="en" data-lang-token="conf_leds_layout_cl_bottom">Bottom</label>
+										<label class="col-form-label col-md-6" for="ip_cl_ledsbottom" style="width:170px" lang="en" data-lang-token="conf_leds_layout_cl_bottom">Bottom</label>
 										<div class=" input-group">
 											<input class="form-control ledCLconstr" id="ip_cl_ledsbottom" type="number" value="10" min="0" step="1"></input>
 											<div class="input-group-addon">LEDs</div>
 										</div>
 									</div>
 									<div class="form-group">
-										<label class="col-form-label col-md-6" style="width:170px;max-width:200px" lang="en" data-lang-token="conf_leds_layout_cl_left">Left</label>
+										<label class="col-form-label col-md-6" for="ip_cl_ledsleft" style="width:170px" lang="en" data-lang-token="conf_leds_layout_cl_left">Left</label>
 										<div class=" input-group">
 											<input class="form-control ledCLconstr" id="ip_cl_ledsleft" type="number" value="6" min="0" step="1"></input>
 											<div class="input-group-addon">LEDs</div>
 										</div>
 									</div>
 									<div class="form-group">
-										<label class="col-form-label col-md-6" style="width:170px;max-width:200px" lang="en" data-lang-token="conf_leds_layout_cl_right">Right</label>
+										<label class="col-form-label col-md-6" for="ip_cl_ledsright" style="width:170px" lang="en" data-lang-token="conf_leds_layout_cl_right">Right</label>
 										<div class=" input-group">
 											<input class="form-control ledCLconstr" id="ip_cl_ledsright" type="number" value="6" min="0" step="1"></input>
 											<div class="input-group-addon">LEDs</div>
 										</div>
 									</div>
 									<div class="form-group">
-										<label class="col-form-label col-md-6" style="width:170px;max-width:200px" lang="en" data-lang-token="conf_leds_layout_cl_gaglength">Gap length</label>
+										<label class="col-form-label col-md-6" for="ip_cl_ledsglength" style="width:170px" lang="en" data-lang-token="conf_leds_layout_cl_gaglength">Gap length</label>
 										<div class=" input-group">
 											<input class="form-control ledCLconstr" id="ip_cl_ledsglength" type="number" value="0" min="0" step="1"></input>
 											<div class="input-group-addon">LEDs</div>
 										</div>
 									</div>
 									<div class="form-group">
-										<label class="col-form-label col-md-6" style="width:170px;max-width:200px" lang="en" data-lang-token="conf_leds_layout_cl_gappos">Gap position</label>
+										<label class="col-form-label col-md-6" for="ip_cl_ledsgpos" style="width:170px" lang="en" data-lang-token="conf_leds_layout_cl_gappos">Gap position</label>
 										<div class=" input-group">
-											<input class="form-control ledCLconstr" id="ip_cl_ledsgpos" type="number" value="0" min="0" step="1"></input>
+											<input class="form-control ledCLconstr" id="ip_cl_ledsgpos" type="number" value="0" min="0" step="1">
 										</div>
 									</div>
 									<div class="form-group">
-										<label class="col-form-label col-md-6" style="width:170px;max-width:200px" lang="en" data-lang-token="conf_leds_layout_cl_inppos">Input position</label>
+										<label class="col-form-label col-md-6" for="ip_cl_position" style="width:170px" lang="en" data-lang-token="conf_leds_layout_cl_inppos">Input position</label>
 										<div class=" input-group">
-											<input class="form-control ledCLconstr" id="ip_cl_position" type="number" value="0" step="1"></input>
+											<input class="form-control ledCLconstr" id="ip_cl_position" type="number" value="0" step="1">
 										</div>
 									</div>
 									<div class="form-group">
-										<label class="col-form-label col-md-6" style="width:170px;max-width:200px" lang="en" data-lang-token="conf_leds_layout_cl_reversdir">Reverse direction</label>
-										<div class=" input-group">
+										<label class="col-form-label col-md-6" for="ip_cl_reverse" style="width:190px" lang="en" data-lang-token="conf_leds_layout_cl_reversdir">Reverse direction</label>
+										<div class="checkbox">
 											<input class="ledCLconstr" id="ip_cl_reverse" type="checkbox" value="false"></input>
+											<label></label>
 										</div>
 									</div>
-									<div class="panel-group">
+									<div class="">
 										<div class="panel panel-default">
 											<div class="panel-heading headcollapse" data-toggle="collapse" data-target="#collapse3">
 												<h4 class="panel-title">
@@ -170,23 +171,30 @@
 											<div id="collapse3" class="panel-collapse collapse">
 												<div class="panel-body ">
 													<div class="form-group">
-														<label class="col-form-label col-md-6" style="width:190px;max-width:200px" lang="en" data-lang-token="conf_leds_layout_cl_hleddepth">Horizontal LED depth</label>
+														<label class="col-form-label col-md-6" for="ip_cl_ledshdepth" style="width:190px;max-width:200px" lang="en" data-lang-token="conf_leds_layout_cl_hleddepth">Horizontal LED depth</label>
 														<div class=" input-group">
 															<input class="form-control ledCLconstr" id="ip_cl_ledshdepth" type="number" value="8" min="1" max="100" step="1"></input>
 															<div class="input-group-addon">%</div>
 														</div>
 													</div>
 													<div class="form-group">
-														<label class="col-form-label col-md-6" style="width:190px;max-width:200px" lang="en" data-lang-token="conf_leds_layout_cl_vleddepth">Vertical LED depth</label>
+														<label class="col-form-label col-md-6" for="ip_cl_ledsvdepth" style="width:190px;max-width:200px" lang="en" data-lang-token="conf_leds_layout_cl_vleddepth">Vertical LED depth</label>
 														<div class=" input-group">
 															<input class="form-control ledCLconstr" id="ip_cl_ledsvdepth" type="number" value="5" min="1" max="100" step="1"></input>
 															<div class="input-group-addon">%</div>
 														</div>
 													</div>
 													<div class="form-group">
-														<label class="col-form-label col-md-6" style="width:190px;max-width:200px" lang="en" data-lang-token="conf_leds_layout_cl_edgegap">Edge Gap</label>
+														<label class="col-form-label col-md-6" for="ip_cl_ledsedgegap" style="width:190px;max-width:200px" lang="en" data-lang-token="conf_leds_layout_cl_edgegap">Edge Gap</label>
 														<div class=" input-group">
-															<input class="form-control ledCLconstr" id="ip_cl_ledsedgegap" type="number" value="0" min="0" max="30" step="1"></input>
+															<input class="form-control ledCLconstr" id="ip_cl_ledsedgegap" type="number" value="0" min="0" max="50" step="1"></input>
+															<div class="input-group-addon">%</div>
+														</div>
+													</div>
+													<div class="form-group">
+														<label class="col-form-label col-md-6" for="ip_cl_ledscornergap" style="width:190px;max-width:200px" lang="en" data-lang-token="conf_leds_layout_cl_cornergap">Corner Gap</label>
+														<div class=" input-group">
+															<input class="form-control ledCLconstr" id="ip_cl_ledscornergap" type="number" value="0" min="0" max="50" step="1"></input>
 															<div class="input-group-addon">%</div>
 														</div>
 													</div>
@@ -210,21 +218,21 @@
 						<div id="collapse2" class="panel-collapse collapse">
 							<div class="panel-body">
 									<div class="form-group">
-										<label class="col-form-label col-md-6" style="width:170px;max-width:200px" lang="en" data-lang-token="conf_leds_layout_ma_horiz">Horizontal</label>
+										<label class="col-form-label col-md-6" for="ip_ma_ledshoriz" style="width:170px;max-width:200px" lang="en" data-lang-token="conf_leds_layout_ma_horiz">Horizontal</label>
 										<div class=" input-group">
 											<input class="form-control ledMAconstr" id="ip_ma_ledshoriz" type="number" value="10" min="1" step="1"></input>
 											<div class="input-group-addon">LEDs</div>
 										</div>
 									</div>
 									<div class="form-group">
-										<label class="col-form-label col-md-6" style="width:170px;max-width:200px" lang="en" data-lang-token="conf_leds_layout_ma_vert">Vertical</label>
+										<label class="col-form-label col-md-6" for="ip_ma_ledsvert" style="width:170px;max-width:200px" lang="en" data-lang-token="conf_leds_layout_ma_vert">Vertical</label>
 										<div class=" input-group">
 											<input class="form-control ledMAconstr" id="ip_ma_ledsvert" type="number" value="10" min="1" step="1"></input>
 											<div class="input-group-addon">LEDs</div>
 										</div>
 									</div>
 									<div class="form-group">
-										<label class="col-form-label col-md-6" style="width:170px;max-width:200px" lang="en" data-lang-token="conf_leds_layout_ma_cabling">Cabling</label>
+										<label class="col-form-label col-md-6" for="ip_ma_cabling" style="width:170px;max-width:200px" lang="en" data-lang-token="conf_leds_layout_ma_cabling">Cabling</label>
 										<div class=" input-group">
 											<select class="form-control ledMAconstr" id="ip_ma_cabling">
 												<option value="snake" lang="en" data-lang-token="conf_leds_layout_ma_optsnake">Snake</option>
@@ -233,7 +241,7 @@
 										</div>
 									</div>
 						<!---			<div class="form-group">
-										<label class="col-form-label col-md-6" style="width:170px;max-width:200px" lang="en" data-lang-token="conf_leds_layout_ma_order">Order</label>
+										<label class="col-form-label col-md-6" for="ip_ma_order" style="width:170px;max-width:200px" lang="en" data-lang-token="conf_leds_layout_ma_order">Order</label>
 										<div class=" input-group">
 											<select class="form-control ledMAconstr" id="ip_ma_order">
 												<option value="horizontal" lang="en" data-lang-token="conf_leds_layout_ma_opthoriz">Horizontal</option>
@@ -243,7 +251,7 @@
 									</div>
 						--->
 									<div class="form-group">
-										<label class="col-form-label col-md-6" style="width:170px;max-width:200px" lang="en" data-lang-token="conf_leds_layout_ma_position">Input</label>
+										<label class="col-form-label col-md-6" for="ip_ma_start" style="width:170px;max-width:200px" lang="en" data-lang-token="conf_leds_layout_ma_position">Input</label>
 										<div class=" input-group">
 											<select class="form-control ledMAconstr" id="ip_ma_start">
 												<option value="top-left" lang="en" data-lang-token="conf_leds_layout_ma_opttopleft">Top left</option>
@@ -279,19 +287,22 @@
 					</div>
 			</div> <!-- accordion -->
 		</div>
-		<div class="col-sm-6">
-							<div class="panel panel-primary">
-						<div class="panel-heading">
-							<h4 class="panel-title"><i class="fa fa-search fa-fw"></i><span lang="en" data-lang-token="conf_leds_layout_peview">LED Layout preview</span></h4>
-						</div>
-						<div class="panel-body">
-							<div id="previewcreator"><span lang="en" data-lang-token="conf_leds_layout_preview_empty">No preview requested</span></div>
-							<div id="previewledcount"></div>
-							<div class="col-lg-12 st_helper" style="padding-left:0px; padding-right:0px">
-								<div id="leds_preview"></div>
-							</div>
-						</div>
+		<div class="col-lg-6 col-md-12">
+			<div class="panel panel-primary">
+				<div class="panel-heading">
+					<h4 class="panel-title"><i class="fa fa-search fa-fw"></i><span lang="en" data-lang-token="conf_leds_layout_peview">LED Layout preview</span></h4>
+				</div>
+				<div class="panel-body">
+					<div id="previewcreator"><span lang="en" data-lang-token="conf_leds_layout_preview_empty">No preview requested</span></div>
+					<div id="previewledcount"></div>
+					<div class="col-lg-12 st_helper" style="padding-left:0px; padding-right:0px">
+						<div id="leds_preview"></div>
 					</div>
+				</div>
+				<div class="panel-footer">
+					<button lang="en" type="button" class="btn btn-danger" id="leds_prev_toggle_num" lang="en" data-lang-token="conf_leds_test_button_togglelednumber">toggle led numbers</button>
+				</div>
+			</div>
 		</div>
 		</div> <!-- row layout -->
 	</div>
diff --git a/assets/webconfig/css/bootstrap-switch.min.css b/assets/webconfig/css/bootstrap-switch.min.css
deleted file mode 100644
index c63cfe2f..00000000
--- a/assets/webconfig/css/bootstrap-switch.min.css
+++ /dev/null
@@ -1,22 +0,0 @@
-/* ========================================================================
- * bootstrap-switch - v3.3.2
- * http://www.bootstrap-switch.org
- * ========================================================================
- * Copyright 2012-2013 Mattia Larentis
- *
- * ========================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ========================================================================
- */
-
-.bootstrap-switch{display:inline-block;direction:ltr;cursor:pointer;border-radius:4px;border:1px solid #ccc;position:relative;text-align:left;overflow:hidden;line-height:8px;z-index:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;-webkit-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;-o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}.bootstrap-switch .bootstrap-switch-container{display:inline-block;top:0;border-radius:4px;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.bootstrap-switch .bootstrap-switch-handle-off,.bootstrap-switch .bootstrap-switch-handle-on,.bootstrap-switch .bootstrap-switch-label{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;cursor:pointer;display:inline-block!important;height:100%;padding:6px 12px;font-size:14px;line-height:20px}.bootstrap-switch .bootstrap-switch-handle-off,.bootstrap-switch .bootstrap-switch-handle-on{text-align:center;z-index:1}.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary,.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary{color:#fff;background:#337ab7}.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info,.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info{color:#fff;background:#5bc0de}.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success,.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success{color:#fff;background:#5cb85c}.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning,.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning{background:#f0ad4e;color:#fff}.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger,.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger{color:#fff;background:#d9534f}.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default,.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default{color:#000;background:#eee}.bootstrap-switch .bootstrap-switch-label{text-align:center;margin-top:-1px;margin-bottom:-1px;z-index:100;color:#333;background:#fff}.bootstrap-switch .bootstrap-switch-handle-on{border-bottom-left-radius:3px;border-top-left-radius:3px}.bootstrap-switch .bootstrap-switch-handle-off{border-bottom-right-radius:3px;border-top-right-radius:3px}.bootstrap-switch input[type=radio],.bootstrap-switch input[type=checkbox]{position:absolute!important;top:0;left:0;margin:0;z-index:-1;opacity:0;filter:alpha(opacity=0)}.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-off,.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-on,.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-label{padding:1px 5px;font-size:12px;line-height:1.5}.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-off,.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-on,.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-label{padding:5px 10px;font-size:12px;line-height:1.5}.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-off,.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-on,.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-label{padding:6px 16px;font-size:18px;line-height:1.3333333}.bootstrap-switch.bootstrap-switch-disabled,.bootstrap-switch.bootstrap-switch-indeterminate,.bootstrap-switch.bootstrap-switch-readonly{cursor:default!important}.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-off,.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-on,.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-label,.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-off,.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-on,.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-label,.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-off,.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-on,.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-label{opacity:.5;filter:alpha(opacity=50);cursor:default!important}.bootstrap-switch.bootstrap-switch-animate .bootstrap-switch-container{-webkit-transition:margin-left .5s;-o-transition:margin-left .5s;transition:margin-left .5s}.bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-on{border-radius:0 3px 3px 0}.bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-off{border-radius:3px 0 0 3px}.bootstrap-switch.bootstrap-switch-focused{border-color:#66afe9;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)}.bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-off .bootstrap-switch-label,.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label{border-bottom-right-radius:3px;border-top-right-radius:3px}.bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-on .bootstrap-switch-label,.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label{border-bottom-left-radius:3px;border-top-left-radius:3px}
\ No newline at end of file
diff --git a/assets/webconfig/css/hyperion.css b/assets/webconfig/css/hyperion.css
index 22e66f9c..076854da 100644
--- a/assets/webconfig/css/hyperion.css
+++ b/assets/webconfig/css/hyperion.css
@@ -5,8 +5,167 @@
 		 url("../fonts/Roboto-Regular.ttf") format('ttf');
 }
 body{font-family:Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:15px;}
-/*remove padding on all col elements for mobile view*/
-@media (max-width: 767px){div[class*="col-"] {padding:0;}}
+
+/**add a dditional width defintion for bootstrap**/
+@media (min-width: 1500px) {
+  .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12 {
+    float: left;
+  }
+  .col-xxl-12 {
+    width: 100%;
+  }
+  .col-xxl-11 {
+    width: 91.66666667%;
+  }
+  .col-xxl-10 {
+    width: 83.33333333%;
+  }
+  .col-xxl-9 {
+    width: 75%;
+  }
+  .col-xxl-8 {
+    width: 66.66666667%;
+  }
+  .col-xxl-7 {
+    width: 58.33333333%;
+  }
+  .col-xxl-6 {
+    width: 50%;
+  }
+  .col-xxl-5 {
+    width: 41.66666667%;
+  }
+  .col-xxl-4 {
+    width: 33.33333333%;
+  }
+  .col-xxl-3 {
+    width: 25%;
+  }
+  .col-xxl-2 {
+    width: 16.66666667%;
+  }
+  .col-xxl-1 {
+    width: 8.33333333%;
+  }
+  .col-xxl-pull-12 {
+    right: 100%;
+  }
+  .col-xxl-pull-11 {
+    right: 91.66666667%;
+  }
+  .col-xxl-pull-10 {
+    right: 83.33333333%;
+  }
+  .col-xxl-pull-9 {
+    right: 75%;
+  }
+  .col-xxl-pull-8 {
+    right: 66.66666667%;
+  }
+  .col-xxl-pull-7 {
+    right: 58.33333333%;
+  }
+  .col-xxl-pull-6 {
+    right: 50%;
+  }
+  .col-xxl-pull-5 {
+    right: 41.66666667%;
+  }
+  .col-xxl-pull-4 {
+    right: 33.33333333%;
+  }
+  .col-xxl-pull-3 {
+    right: 25%;
+  }
+  .col-xxl-pull-2 {
+    right: 16.66666667%;
+  }
+  .col-xxl-pull-1 {
+    right: 8.33333333%;
+  }
+  .col-xxl-pull-0 {
+    right: auto;
+  }
+  .col-xxl-push-12 {
+    left: 100%;
+  }
+  .col-xxl-push-11 {
+    left: 91.66666667%;
+  }
+  .col-xxl-push-10 {
+    left: 83.33333333%;
+  }
+  .col-xxl-push-9 {
+    left: 75%;
+  }
+  .col-xxl-push-8 {
+    left: 66.66666667%;
+  }
+  .col-xxl-push-7 {
+    left: 58.33333333%;
+  }
+  .col-xxl-push-6 {
+    left: 50%;
+  }
+  .col-xxl-push-5 {
+    left: 41.66666667%;
+  }
+  .col-xxl-push-4 {
+    left: 33.33333333%;
+  }
+  .col-xxl-push-3 {
+    left: 25%;
+  }
+  .col-xxl-push-2 {
+    left: 16.66666667%;
+  }
+  .col-xxl-push-1 {
+    left: 8.33333333%;
+  }
+  .col-xxl-push-0 {
+    left: auto;
+  }
+  .col-xxl-offset-12 {
+    margin-left: 100%;
+  }
+  .col-xxl-offset-11 {
+    margin-left: 91.66666667%;
+  }
+  .col-xxl-offset-10 {
+    margin-left: 83.33333333%;
+  }
+  .col-xxl-offset-9 {
+    margin-left: 75%;
+  }
+  .col-xxl-offset-8 {
+    margin-left: 66.66666667%;
+  }
+  .col-xxl-offset-7 {
+    margin-left: 58.33333333%;
+  }
+  .col-xxl-offset-6 {
+    margin-left: 50%;
+  }
+  .col-xxl-offset-5 {
+    margin-left: 41.66666667%;
+  }
+  .col-xxl-offset-4 {
+    margin-left: 33.33333333%;
+  }
+  .col-xxl-offset-3 {
+    margin-left: 25%;
+  }
+  .col-xxl-offset-2 {
+    margin-left: 16.66666667%;
+  }
+  .col-xxl-offset-1 {
+    margin-left: 8.33333333%;
+  }
+  .col-xxl-offset-0 {
+    margin-left: 0;
+  }
+}
+
 /*icon spacing*/
 .fa-fw{margin-right:5px;}
 /*borderless table*/
@@ -97,4 +256,328 @@ table.borderless td,table.borderless th{border: none !important;}
 
 #page-content {
 	padding-bottom:50px;
+}
+
+
+.checkbox {
+  padding-left: 20px;
+  padding-top:2px !important;
+}
+.checkbox label {
+  display: inline-block;
+  vertical-align: middle;
+  position: relative;
+  padding-left: 5px;
+}
+.checkbox label::before {
+  content: "";
+  display: inline-block;
+  position: absolute;
+  width: 25px;
+  height: 25px;
+  left: 0;
+  margin-left: -20px;
+  border: 1px solid #cccccc;
+  border-radius: 3px;
+  background-color: #fff;
+  -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
+  -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
+  transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
+}
+.checkbox label::after {
+  display: inline-block;
+  position: absolute;
+  width: 25px;
+  height: 25px;
+  left: 0;
+  top: 0;
+  margin-left: -20px;
+  padding-left: 3px;
+  padding-top: 1px;
+  font-size: 18px;
+  color: #555555;
+}
+.checkbox input[type="checkbox"],
+.checkbox input[type="radio"] {
+  opacity: 0;
+  z-index: 1;
+  width:25px !important;
+  height:25px;
+  margin-top:0px !important;
+  cursor:pointer;
+}
+.checkbox input[type="checkbox"]:focus + label::before,
+.checkbox input[type="radio"]:focus + label::before {
+  outline: thin dotted;
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px;
+}
+.checkbox input[type="checkbox"]:checked + label::after,
+.checkbox input[type="radio"]:checked + label::after {
+  font-family: "FontAwesome";
+  content: "\f00c";
+}
+.checkbox input[type="checkbox"]:indeterminate + label::after,
+.checkbox input[type="radio"]:indeterminate + label::after {
+  display: block;
+  content: "";
+  width: 10px;
+  height: 3px;
+  background-color: #555555;
+  border-radius: 2px;
+  margin-left: -16.5px;
+  margin-top: 7px;
+}
+.checkbox input[type="checkbox"]:disabled + label,
+.checkbox input[type="radio"]:disabled + label {
+  opacity: 0.65;
+}
+.checkbox input[type="checkbox"]:disabled + label::before,
+.checkbox input[type="radio"]:disabled + label::before {
+  background-color: #eeeeee;
+  cursor: not-allowed;
+}
+.checkbox.checkbox-circle label::before {
+  border-radius: 50%;
+}
+.checkbox.checkbox-inline {
+  margin-top: 0;
+}
+
+.checkbox-primary input[type="checkbox"]:checked + label::before,
+.checkbox-primary input[type="radio"]:checked + label::before {
+  background-color: #337ab7;
+  border-color: #337ab7;
+}
+.checkbox-primary input[type="checkbox"]:checked + label::after,
+.checkbox-primary input[type="radio"]:checked + label::after {
+  color: #fff;
+}
+
+.checkbox-danger input[type="checkbox"]:checked + label::before,
+.checkbox-danger input[type="radio"]:checked + label::before {
+  background-color: #d9534f;
+  border-color: #d9534f;
+}
+.checkbox-danger input[type="checkbox"]:checked + label::after,
+.checkbox-danger input[type="radio"]:checked + label::after {
+  color: #fff;
+}
+
+.checkbox-info input[type="checkbox"]:checked + label::before,
+.checkbox-info input[type="radio"]:checked + label::before {
+  background-color: #5bc0de;
+  border-color: #5bc0de;
+}
+.checkbox-info input[type="checkbox"]:checked + label::after,
+.checkbox-info input[type="radio"]:checked + label::after {
+  color: #fff;
+}
+
+.checkbox-warning input[type="checkbox"]:checked + label::before,
+.checkbox-warning input[type="radio"]:checked + label::before {
+  background-color: #f0ad4e;
+  border-color: #f0ad4e;
+}
+.checkbox-warning input[type="checkbox"]:checked + label::after,
+.checkbox-warning input[type="radio"]:checked + label::after {
+  color: #fff;
+}
+
+.checkbox-success input[type="checkbox"]:checked + label::before,
+.checkbox-success input[type="radio"]:checked + label::before {
+  background-color: #5cb85c;
+  border-color: #5cb85c;
+}
+.checkbox-success input[type="checkbox"]:checked + label::after,
+.checkbox-success input[type="radio"]:checked + label::after {
+  color: #fff;
+}
+
+.checkbox-primary input[type="checkbox"]:indeterminate + label::before,
+.checkbox-primary input[type="radio"]:indeterminate + label::before {
+  background-color: #337ab7;
+  border-color: #337ab7;
+}
+
+.checkbox-primary input[type="checkbox"]:indeterminate + label::after,
+.checkbox-primary input[type="radio"]:indeterminate + label::after {
+  background-color: #fff;
+}
+
+.checkbox-danger input[type="checkbox"]:indeterminate + label::before,
+.checkbox-danger input[type="radio"]:indeterminate + label::before {
+  background-color: #d9534f;
+  border-color: #d9534f;
+}
+
+.checkbox-danger input[type="checkbox"]:indeterminate + label::after,
+.checkbox-danger input[type="radio"]:indeterminate + label::after {
+  background-color: #fff;
+}
+
+.checkbox-info input[type="checkbox"]:indeterminate + label::before,
+.checkbox-info input[type="radio"]:indeterminate + label::before {
+  background-color: #5bc0de;
+  border-color: #5bc0de;
+}
+
+.checkbox-info input[type="checkbox"]:indeterminate + label::after,
+.checkbox-info input[type="radio"]:indeterminate + label::after {
+  background-color: #fff;
+}
+
+.checkbox-warning input[type="checkbox"]:indeterminate + label::before,
+.checkbox-warning input[type="radio"]:indeterminate + label::before {
+  background-color: #f0ad4e;
+  border-color: #f0ad4e;
+}
+
+.checkbox-warning input[type="checkbox"]:indeterminate + label::after,
+.checkbox-warning input[type="radio"]:indeterminate + label::after {
+  background-color: #fff;
+}
+
+.checkbox-success input[type="checkbox"]:indeterminate + label::before,
+.checkbox-success input[type="radio"]:indeterminate + label::before {
+  background-color: #5cb85c;
+  border-color: #5cb85c;
+}
+
+.checkbox-success input[type="checkbox"]:indeterminate + label::after,
+.checkbox-success input[type="radio"]:indeterminate + label::after {
+  background-color: #fff;
+}
+
+.radio {
+  padding-left: 20px;
+}
+.radio label {
+  display: inline-block;
+  vertical-align: middle;
+  position: relative;
+  padding-left: 5px;
+}
+.radio label::before {
+  content: "";
+  display: inline-block;
+  position: absolute;
+  width: 17px;
+  height: 17px;
+  left: 0;
+  margin-left: -20px;
+  border: 1px solid #cccccc;
+  border-radius: 50%;
+  background-color: #fff;
+  -webkit-transition: border 0.15s ease-in-out;
+  -o-transition: border 0.15s ease-in-out;
+  transition: border 0.15s ease-in-out;
+}
+.radio label::after {
+  display: inline-block;
+  position: absolute;
+  content: " ";
+  width: 11px;
+  height: 11px;
+  left: 3px;
+  top: 3px;
+  margin-left: -20px;
+  border-radius: 50%;
+  background-color: #555555;
+  -webkit-transform: scale(0, 0);
+  -ms-transform: scale(0, 0);
+  -o-transform: scale(0, 0);
+  transform: scale(0, 0);
+  -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
+  -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
+  -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
+  transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
+}
+.radio input[type="radio"] {
+  opacity: 0;
+  z-index: 1;
+}
+.radio input[type="radio"]:focus + label::before {
+  outline: thin dotted;
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px;
+}
+.radio input[type="radio"]:checked + label::after {
+  -webkit-transform: scale(1, 1);
+  -ms-transform: scale(1, 1);
+  -o-transform: scale(1, 1);
+  transform: scale(1, 1);
+}
+.radio input[type="radio"]:disabled + label {
+  opacity: 0.65;
+}
+.radio input[type="radio"]:disabled + label::before {
+  cursor: not-allowed;
+}
+.radio.radio-inline {
+  margin-top: 0;
+}
+
+.radio-primary input[type="radio"] + label::after {
+  background-color: #337ab7;
+}
+.radio-primary input[type="radio"]:checked + label::before {
+  border-color: #337ab7;
+}
+.radio-primary input[type="radio"]:checked + label::after {
+  background-color: #337ab7;
+}
+
+.radio-danger input[type="radio"] + label::after {
+  background-color: #d9534f;
+}
+.radio-danger input[type="radio"]:checked + label::before {
+  border-color: #d9534f;
+}
+.radio-danger input[type="radio"]:checked + label::after {
+  background-color: #d9534f;
+}
+
+.radio-info input[type="radio"] + label::after {
+  background-color: #5bc0de;
+}
+.radio-info input[type="radio"]:checked + label::before {
+  border-color: #5bc0de;
+}
+.radio-info input[type="radio"]:checked + label::after {
+  background-color: #5bc0de;
+}
+
+.radio-warning input[type="radio"] + label::after {
+  background-color: #f0ad4e;
+}
+.radio-warning input[type="radio"]:checked + label::before {
+  border-color: #f0ad4e;
+}
+.radio-warning input[type="radio"]:checked + label::after {
+  background-color: #f0ad4e;
+}
+
+.radio-success input[type="radio"] + label::after {
+  background-color: #5cb85c;
+}
+.radio-success input[type="radio"]:checked + label::before {
+  border-color: #5cb85c;
+}
+.radio-success input[type="radio"]:checked + label::after {
+  background-color: #5cb85c;
+}
+
+input[type="checkbox"].styled:checked + label:after,
+input[type="radio"].styled:checked + label:after {
+  font-family: 'FontAwesome';
+  content: "\f00c";
+}
+input[type="checkbox"] .styled:checked + label::before,
+input[type="radio"] .styled:checked + label::before {
+  color: #fff;
+}
+input[type="checkbox"] .styled:checked + label::after,
+input[type="radio"] .styled:checked + label::after {
+  color: #fff;
 }
\ No newline at end of file
diff --git a/assets/webconfig/css/sb-admin-2.css b/assets/webconfig/css/sb-admin-2.css
index 69d1d48b..4b142c35 100644
--- a/assets/webconfig/css/sb-admin-2.css
+++ b/assets/webconfig/css/sb-admin-2.css
@@ -13,7 +13,7 @@ body {
 }
 
 #page-wrapper {
-    padding: 0 15px;
+    padding: 0 0px;
     min-height: 568px;
     background-color: #fff;
 }
@@ -22,7 +22,7 @@ body {
     #page-wrapper {
         position: inherit;
         margin: 0 0 0 250px;
-        padding: 0 30px;
+        padding: 0 10px;
         border-left: 1px solid #e7e7e7;
     }
 }
diff --git a/assets/webconfig/index.html b/assets/webconfig/index.html
index ae2a7118..fe3ae62f 100644
--- a/assets/webconfig/index.html
+++ b/assets/webconfig/index.html
@@ -25,11 +25,7 @@
 	<script src="js/lib/bootstrap-colorpicker.min.js"></script>
 	<link href="css/bootstrap-colorpicker.min.css" rel="stylesheet">
 
-	<!-- Bootstrap Switch -->
-	<script src="js/lib/bootstrap-switch.min.js"></script>
-	<link href="css/bootstrap-switch.min.css" rel="stylesheet">
-
-	<!-- JSONForm -->
+	<!-- JSONEditor -->
 	<script src="js/lib/jsoneditor.js"></script>
 
 	<!--Language Support -->
diff --git a/assets/webconfig/js/content_effectsconfigurator.js b/assets/webconfig/js/content_effectsconfigurator.js
index 3446a626..4adf4365 100644
--- a/assets/webconfig/js/content_effectsconfigurator.js
+++ b/assets/webconfig/js/content_effectsconfigurator.js
@@ -1,25 +1,28 @@
-	JSONEditor.defaults.editors.colorPicker = JSONEditor.defaults.editors.string.extend({
-		
-		getValue: function() {
-			color = $(this.input).data('colorpicker').color.toRGB();
-			return [color.r, color.g, color.b];
+    JSONEditor.defaults.editors.colorPicker = JSONEditor.defaults.editors.string.extend({
+
+         getValue: function() {
+            var color = $(this.input).data('colorpicker').color.toRGB();
+            return [color.r, color.g, color.b];
         },
 
         setValue: function(val) {
-			function rgb2hex(rgb){
-				return "#" +
-				("0" + parseInt(rgb[0],10).toString(16)).slice(-2) +
-				("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
-				("0" + parseInt(rgb[2],10).toString(16)).slice(-2);
-			}
+             function rgb2hex(rgb)
+             {
+                 return "#" +
+                 ("0" + parseInt(rgb[0],10).toString(16)).slice(-2) +
+                 ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
+                 ("0" + parseInt(rgb[2],10).toString(16)).slice(-2);
+             }
 
-			$(this.input).colorpicker('setValue', rgb2hex(val));
-        },
-		
+            $(this.input).colorpicker('updateInput', 'rgb('+val+')');
+            $(this.input).colorpicker('updateData', val);
+            $(this.input).colorpicker('updatePicker', rgb2hex(val));
+         },
+      
         build: function() {
-			this._super();
-			var myinput = this
-				$(this.input).colorpicker({
+            this._super();
+            var myinput = this;
+            $(myinput.input).colorpicker({
                 format: 'rgb',
                 customClass: 'colorpicker-2x',
                 sliders: {
@@ -31,12 +34,12 @@
                         maxTop: 200
                     },
                 },
-               
+              
             })
-			//$(this.input).colorpicker().on('changeColor', function(e) {
-			//$(this.input).trigger("change");
-			//});
-			
+
+            $(this.input).colorpicker().on('changeColor', function(e) {
+                $(myinput).val(e.color.toRGB()).change();
+            });      
         }
     });
 
diff --git a/assets/webconfig/js/content_index.js b/assets/webconfig/js/content_index.js
index a4a5a617..5e6619eb 100644
--- a/assets/webconfig/js/content_index.js
+++ b/assets/webconfig/js/content_index.js
@@ -17,10 +17,6 @@ $(document).ready( function() {
 	bindNavToContent("#load_effectsconfig","effects_configurator",false);
 	bindNavToContent("#load_logging","logging",false);
 
-
-	//Change all Checkboxes to Switches
-	$("[type='checkbox']").bootstrapSwitch();
-
 	$(hyperion).on("cmd-serverinfo",function(event){
 		parsedServerInfoJSON = event.response;
 		currentVersion = parsedServerInfoJSON.info.hyperion[0].version;
diff --git a/assets/webconfig/js/content_leds.js b/assets/webconfig/js/content_leds.js
index 63975d6f..ac04e450 100644
--- a/assets/webconfig/js/content_leds.js
+++ b/assets/webconfig/js/content_leds.js
@@ -27,6 +27,13 @@ function validateText(){
 	return true
 }
 
+function round(number) {
+	var factor = Math.pow(10, 4);
+	var tempNumber = number * factor;
+	var roundedTempNumber = Math.round(tempNumber);
+	return roundedTempNumber / factor;
+};
+
 function createLedPreview(leds, origin){
 	
 	if (origin == "classic"){
@@ -59,12 +66,15 @@ function createLedPreview(leds, origin){
 			"top:"+(led.vscan.minimum * canvas_height)+"px;"+
 			"width:"+((led.hscan.maximum-led.hscan.minimum) * canvas_width-1)+"px;"+
 			"height:"+((led.vscan.maximum-led.vscan.minimum) * canvas_height-1)+"px;";
-		leds_html += '<div id="'+led_id+'" class="led" style="'+bgcolor+pos+'" title="'+idx+'"><span id="'+led_id+'_num" class="led_num">'+idx+'</span></div>';
+		leds_html += '<div id="'+led_id+'" class="led" style="'+bgcolor+pos+'" title="'+idx+'"><span id="'+led_id+'_num" class="led_prev_num">'+idx+'</span></div>';
 	}
 	$('#leds_preview').html(leds_html);
-	$('#ledc_0').css({"background-color":"black","z-index":"10"});
-	$('#ledc_1').css({"background-color":"grey","z-index":"10"});
+	$('#ledc_0').css({"background-color":"black","z-index":"12"});
+	$('#ledc_1').css({"background-color":"grey","z-index":"11"});
 	$('#ledc_2').css({"background-color":"#A9A9A9","z-index":"10"});
+	
+	if($('#leds_prev_toggle_num').hasClass('btn-success'))
+		$('.led_prev_num').css("display", "inline");
 }
 
 function createClassicLeds(){
@@ -82,13 +92,19 @@ function createClassicLeds(){
 	var rawledsVDepth = parseInt($("#ip_cl_ledsvdepth").val());
 	var rawledsHDepth = parseInt($("#ip_cl_ledshdepth").val());
 	var rawedgeGap = parseInt($("#ip_cl_ledsedgegap").val());
+	var rawcornerGap = parseInt($("#ip_cl_ledscornergap").val());
 	
 	//helper
-	var ledsVDepth = rawledsVDepth / 100;
-	var ledsHDepth = rawledsHDepth / 100;
-	var edgeGap = rawedgeGap / 100 /2;
-	var min = 0.0 + edgeGap;
-	var max = 1.0 - edgeGap;
+	var ledsVDepth = rawledsVDepth /100;
+	var ledsHDepth = rawledsHDepth /100;
+	var edgeVGap = rawedgeGap /100/2;
+	var edgeHGap = edgeVGap/(16/9);
+	var cornerVGap = rawcornerGap /100/2;
+	var cornerHGap = cornerVGap/(16/9);
+	var Vmin = 0.0 + edgeVGap;
+	var Vmax = 1.0 - edgeVGap;
+	var Hmin = 0.0 + edgeHGap;
+	var Hmax = 1.0 - edgeHGap;
 	var ledArray = [];
 	
 	createLeftLeds(createBottomLeds(createRightLeds(createTopLeds())));
@@ -143,15 +159,23 @@ function createClassicLeds(){
 	}
 	
 	function createLedArray(hmin, hmax, vmin, vmax){
+		hmin = round(hmin);
+		hmax = round(hmax);
+		vmin = round(vmin);
+		vmax = round(vmax);
 		ledArray.push( { "hscan" : { "minimum" : hmin, "maximum" : hmax }, "vscan": { "minimum": vmin, "maximum": vmax }} );
 	}
 	
 	function createTopLeds(){
-		step=(max-min)/ledsTop;
-		vmin=min
+		step=(Hmax-Hmin)/ledsTop;
+		hmin=Hmin
+		if(cornerVGap != '0'){
+			step=(Hmax-Hmin-(cornerHGap*2))/ledsTop;
+			hmin=Hmin+(cornerHGap);
+		}
+		vmin=Vmin
 		vmax=vmin+ledsHDepth;
-		hmin=min
-		hmax=min+step
+		hmax=hmin+step
 		for (var i = 0; i<ledsTop; i++){
 			createLedArray(hmin, hmax, vmin, vmax);
 			hmin += step
@@ -160,11 +184,15 @@ function createClassicLeds(){
 	}
 	
 	function createLeftLeds(){
-		step=(max-min)/ledsLeft;
-		hmin=min;
-		hmax=min+ledsVDepth;
-		vmin=max-step
-		vmax=max
+		step=(Vmax-Vmin)/ledsLeft;
+		vmax=Vmax
+		if(cornerVGap != '0'){
+			step=(Vmax-Vmin-(cornerVGap*2))/ledsLeft;
+			vmax=Vmax-(cornerVGap);
+		}
+		hmin=Hmin;
+		hmax=hmin+ledsVDepth;
+		vmin=vmax-step
 		for (var i = ledsLeft; i>0; i--){
 			createLedArray(hmin, hmax, vmin, vmax);
 			vmin -= step
@@ -173,11 +201,15 @@ function createClassicLeds(){
 	}
 	
 	function createRightLeds(){
-		step=(max-min)/ledsRight;
-		hmax=max;
+		step=(Vmax-Vmin)/ledsRight;
+		vmin=Vmin
+		if(cornerVGap != '0'){
+			step=(Vmax-Vmin-(cornerVGap*2))/ledsRight;
+			vmin=Vmin+(cornerVGap);
+		}
+		hmax=Hmax;
 		hmin=hmax-ledsVDepth;
-		vmin=min
-		vmax=min+step
+		vmax=vmin+step
 		for (var i = 0; i<ledsRight; i++){
 			createLedArray(hmin, hmax, vmin, vmax);	
 			vmin += step
@@ -186,15 +218,19 @@ function createClassicLeds(){
 	}
 	
 	function createBottomLeds(){
-		step=(max-min)/ledsBottom;
-		vmax=max;
+		step=(Hmax-Hmin)/ledsBottom;
+		hmax=Hmax
+		if(cornerVGap != '0'){
+			step=(Hmax-Hmin-(cornerHGap*2))/ledsBottom;
+			hmax=Hmax-(cornerHGap);
+		}
+		vmax=Vmax;
 		vmin=vmax-ledsHDepth;
-		hmin=max-step
-		hmax=max
+		hmin=hmax-step
 		for (var i = ledsBottom; i>0; i--){
 			createLedArray(hmin, hmax, vmin, vmax);
-			hmin -= step
-			hmax -= step
+			hmin -= step;
+			hmax -= step;
 		}
 	}
 }
@@ -232,6 +268,11 @@ function createMatrixLeds(){
 		var vscanMin = y * vblock
 		var vscanMax = (y + 1) * vblock
 
+		hscanMin = round(hscanMin);
+		hscanMax = round(hscanMax);
+		vscanMin = round(vscanMin);
+		vscanMax = round(vscanMax);
+		
 		leds.push({
 			index: index,
 			hscan: {
@@ -239,8 +280,8 @@ function createMatrixLeds(){
 				maximum: hscanMax
 			},
 			vscan: {
-			minimum: vscanMin,
-			maximum: vscanMax
+				minimum: vscanMin,
+				maximum: vscanMax
 			}
 		})
 	}
@@ -329,13 +370,42 @@ $(document).ready(function() {
 	$(hyperion).one("cmd-serverinfo",function(event){
 		server = event.response;
 		ledDevices = server.info.ledDevices.available
-
-		ledDevicesHtml = "";
+		devRPiSPI = ['apa102', 'ws2801', 'lpd6803', 'lpd8806', 'p9813', 'sk6812spi', 'ws2812spi'];
+		devRPiPWM = ['ws281x'];
+		devRPiGPIO = ['piblaster'];
+		devNET = ['atmoorb', 'dmx', 'fadecandy', 'philipshue', 'tinkerforge', 'tpm2net', 'udpe131', 'udph801', 'udpraw'];
+		devUSB = ['adalight', 'adalightapa102', 'atmo', 'hyperionusbasp', 'lightpack', 'multilightpack', 'paintpack', 'rawhid', 'sedu', 'tpm2'];
+		
+		var optArr = [[]];
+		optArr[1]=[];
+		optArr[2]=[];
+		optArr[3]=[];
+		optArr[4]=[];
+		optArr[5]=[];
+		
 		for (idx=0; idx<ledDevices.length; idx++)
 		{
-			ledDevicesHtml += '<option value="'+ledDevices[idx]+'">'+ledDevices[idx]+'</option>';
+			if($.inArray(ledDevices[idx], devRPiSPI) != -1)
+				optArr[0].push(ledDevices[idx]);
+			else if($.inArray(ledDevices[idx], devRPiPWM) != -1)
+				optArr[1].push(ledDevices[idx]);
+			else if($.inArray(ledDevices[idx], devRPiGPIO) != -1)
+				optArr[2].push(ledDevices[idx]);
+			else if($.inArray(ledDevices[idx], devNET) != -1)
+				optArr[3].push(ledDevices[idx]);
+			else if($.inArray(ledDevices[idx], devUSB) != -1)
+				optArr[4].push(ledDevices[idx]);
+			else
+				optArr[5].push(ledDevices[idx]);
 		}
-		$("#leddevices").html(ledDevicesHtml);
+		
+		$("#leddevices").append(createSel(optArr[0], "RPi SPI"));
+		$("#leddevices").append(createSel(optArr[1], "RPi PWM"));
+		$("#leddevices").append(createSel(optArr[2], "RPi GPIO"));
+		$("#leddevices").append(createSel(optArr[3], "Network"));
+		$("#leddevices").append(createSel(optArr[4], "USB"));
+		$("#leddevices").append(createSel(optArr[5], "Debug"));
+
 		$("#leddevices").val(server.info.ledDevices.active);
 		$("#leddevices").trigger("change");
 	});
@@ -409,6 +479,11 @@ $(document).ready(function() {
 			requestWriteConfig(JSON.parse(createLedConfig()));
 	});
 
+	// ------------------------------------------------------------------
+	$('#leds_prev_toggle_num').off().on("click", function() {
+		$('.led_prev_num').toggle();
+		toggleClass('#leds_prev_toggle_num', "btn-danger", "btn-success");
+	});
 	// -------------------------------------------------------------
 	$('#leds_cfg_nav a[data-toggle="tab"]').off().on('shown.bs.tab', function (e) {
 		var target = $(e.target).attr("href") // activated tab
@@ -492,8 +567,6 @@ $(document).ready(function() {
 		requestWriteConfig(result)
 	});
 
-	// ------------------------------------------------------------------
-	
 	requestServerConfig();
 });
 
diff --git a/assets/webconfig/js/content_remote.js b/assets/webconfig/js/content_remote.js
index 0c197f09..547169a6 100644
--- a/assets/webconfig/js/content_remote.js
+++ b/assets/webconfig/js/content_remote.js
@@ -69,12 +69,21 @@
 		var newEffects = event.response.info.effects;
 		if (newEffects.length != oldEffects.length)
 		{
-			effects_html = '<option value="__none__"></option>';
+			$('#effect_select').html('<option value="__none__"></option>');
+			var usrEffArr = [];
+			var sysEffArr = [];
+			
 			for(i = 0; i < newEffects.length; i++) {
-				effectName = newEffects[i].name;
-				effects_html += '<option value="'+effectName+'">'+effectName+'</option>';
+				var effectName = newEffects[i].name;
+				if(!/^\:/.test(newEffects[i].file)){
+					usrEffArr.push(effectName);
+				}
+				else{
+					sysEffArr.push(effectName);
+				}
 			}
-			$('#effect_select').html(effects_html);
+			$('#effect_select').append(createSel(usrEffArr, "User Effects"));
+			$('#effect_select').append(createSel(sysEffArr, "Provided Effects"));
 			oldEffects = newEffects;
 		}
 	}
diff --git a/assets/webconfig/js/lib/bootstrap-switch.min.js b/assets/webconfig/js/lib/bootstrap-switch.min.js
deleted file mode 100644
index 9849658b..00000000
--- a/assets/webconfig/js/lib/bootstrap-switch.min.js
+++ /dev/null
@@ -1,22 +0,0 @@
-/* ========================================================================
- * bootstrap-switch - v3.3.2
- * http://www.bootstrap-switch.org
- * ========================================================================
- * Copyright 2012-2013 Mattia Larentis
- *
- * ========================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ========================================================================
- */
-
-(function(){var t=[].slice;!function(e,i){"use strict";var n;return n=function(){function t(t,i){null==i&&(i={}),this.$element=e(t),this.options=e.extend({},e.fn.bootstrapSwitch.defaults,{state:this.$element.is(":checked"),size:this.$element.data("size"),animate:this.$element.data("animate"),disabled:this.$element.is(":disabled"),readonly:this.$element.is("[readonly]"),indeterminate:this.$element.data("indeterminate"),inverse:this.$element.data("inverse"),radioAllOff:this.$element.data("radio-all-off"),onColor:this.$element.data("on-color"),offColor:this.$element.data("off-color"),onText:this.$element.data("on-text"),offText:this.$element.data("off-text"),labelText:this.$element.data("label-text"),handleWidth:this.$element.data("handle-width"),labelWidth:this.$element.data("label-width"),baseClass:this.$element.data("base-class"),wrapperClass:this.$element.data("wrapper-class")},i),this.prevOptions={},this.$wrapper=e("<div>",{"class":function(t){return function(){var e;return e=[""+t.options.baseClass].concat(t._getClasses(t.options.wrapperClass)),e.push(t.options.state?t.options.baseClass+"-on":t.options.baseClass+"-off"),null!=t.options.size&&e.push(t.options.baseClass+"-"+t.options.size),t.options.disabled&&e.push(t.options.baseClass+"-disabled"),t.options.readonly&&e.push(t.options.baseClass+"-readonly"),t.options.indeterminate&&e.push(t.options.baseClass+"-indeterminate"),t.options.inverse&&e.push(t.options.baseClass+"-inverse"),t.$element.attr("id")&&e.push(t.options.baseClass+"-id-"+t.$element.attr("id")),e.join(" ")}}(this)()}),this.$container=e("<div>",{"class":this.options.baseClass+"-container"}),this.$on=e("<span>",{html:this.options.onText,"class":this.options.baseClass+"-handle-on "+this.options.baseClass+"-"+this.options.onColor}),this.$off=e("<span>",{html:this.options.offText,"class":this.options.baseClass+"-handle-off "+this.options.baseClass+"-"+this.options.offColor}),this.$label=e("<span>",{html:this.options.labelText,"class":this.options.baseClass+"-label"}),this.$element.on("init.bootstrapSwitch",function(e){return function(){return e.options.onInit.apply(t,arguments)}}(this)),this.$element.on("switchChange.bootstrapSwitch",function(i){return function(n){return!1===i.options.onSwitchChange.apply(t,arguments)?i.$element.is(":radio")?e("[name='"+i.$element.attr("name")+"']").trigger("previousState.bootstrapSwitch",!0):i.$element.trigger("previousState.bootstrapSwitch",!0):void 0}}(this)),this.$container=this.$element.wrap(this.$container).parent(),this.$wrapper=this.$container.wrap(this.$wrapper).parent(),this.$element.before(this.options.inverse?this.$off:this.$on).before(this.$label).before(this.options.inverse?this.$on:this.$off),this.options.indeterminate&&this.$element.prop("indeterminate",!0),this._init(),this._elementHandlers(),this._handleHandlers(),this._labelHandlers(),this._formHandler(),this._externalLabelHandler(),this.$element.trigger("init.bootstrapSwitch",this.options.state)}return t.prototype._constructor=t,t.prototype.setPrevOptions=function(){return this.prevOptions=e.extend(!0,{},this.options)},t.prototype.state=function(t,i){return"undefined"==typeof t?this.options.state:this.options.disabled||this.options.readonly?this.$element:this.options.state&&!this.options.radioAllOff&&this.$element.is(":radio")?this.$element:(this.$element.is(":radio")?e("[name='"+this.$element.attr("name")+"']").trigger("setPreviousOptions.bootstrapSwitch"):this.$element.trigger("setPreviousOptions.bootstrapSwitch"),this.options.indeterminate&&this.indeterminate(!1),t=!!t,this.$element.prop("checked",t).trigger("change.bootstrapSwitch",i),this.$element)},t.prototype.toggleState=function(t){return this.options.disabled||this.options.readonly?this.$element:this.options.indeterminate?(this.indeterminate(!1),this.state(!0)):this.$element.prop("checked",!this.options.state).trigger("change.bootstrapSwitch",t)},t.prototype.size=function(t){return"undefined"==typeof t?this.options.size:(null!=this.options.size&&this.$wrapper.removeClass(this.options.baseClass+"-"+this.options.size),t&&this.$wrapper.addClass(this.options.baseClass+"-"+t),this._width(),this._containerPosition(),this.options.size=t,this.$element)},t.prototype.animate=function(t){return"undefined"==typeof t?this.options.animate:(t=!!t,t===this.options.animate?this.$element:this.toggleAnimate())},t.prototype.toggleAnimate=function(){return this.options.animate=!this.options.animate,this.$wrapper.toggleClass(this.options.baseClass+"-animate"),this.$element},t.prototype.disabled=function(t){return"undefined"==typeof t?this.options.disabled:(t=!!t,t===this.options.disabled?this.$element:this.toggleDisabled())},t.prototype.toggleDisabled=function(){return this.options.disabled=!this.options.disabled,this.$element.prop("disabled",this.options.disabled),this.$wrapper.toggleClass(this.options.baseClass+"-disabled"),this.$element},t.prototype.readonly=function(t){return"undefined"==typeof t?this.options.readonly:(t=!!t,t===this.options.readonly?this.$element:this.toggleReadonly())},t.prototype.toggleReadonly=function(){return this.options.readonly=!this.options.readonly,this.$element.prop("readonly",this.options.readonly),this.$wrapper.toggleClass(this.options.baseClass+"-readonly"),this.$element},t.prototype.indeterminate=function(t){return"undefined"==typeof t?this.options.indeterminate:(t=!!t,t===this.options.indeterminate?this.$element:this.toggleIndeterminate())},t.prototype.toggleIndeterminate=function(){return this.options.indeterminate=!this.options.indeterminate,this.$element.prop("indeterminate",this.options.indeterminate),this.$wrapper.toggleClass(this.options.baseClass+"-indeterminate"),this._containerPosition(),this.$element},t.prototype.inverse=function(t){return"undefined"==typeof t?this.options.inverse:(t=!!t,t===this.options.inverse?this.$element:this.toggleInverse())},t.prototype.toggleInverse=function(){var t,e;return this.$wrapper.toggleClass(this.options.baseClass+"-inverse"),e=this.$on.clone(!0),t=this.$off.clone(!0),this.$on.replaceWith(t),this.$off.replaceWith(e),this.$on=t,this.$off=e,this.options.inverse=!this.options.inverse,this.$element},t.prototype.onColor=function(t){var e;return e=this.options.onColor,"undefined"==typeof t?e:(null!=e&&this.$on.removeClass(this.options.baseClass+"-"+e),this.$on.addClass(this.options.baseClass+"-"+t),this.options.onColor=t,this.$element)},t.prototype.offColor=function(t){var e;return e=this.options.offColor,"undefined"==typeof t?e:(null!=e&&this.$off.removeClass(this.options.baseClass+"-"+e),this.$off.addClass(this.options.baseClass+"-"+t),this.options.offColor=t,this.$element)},t.prototype.onText=function(t){return"undefined"==typeof t?this.options.onText:(this.$on.html(t),this._width(),this._containerPosition(),this.options.onText=t,this.$element)},t.prototype.offText=function(t){return"undefined"==typeof t?this.options.offText:(this.$off.html(t),this._width(),this._containerPosition(),this.options.offText=t,this.$element)},t.prototype.labelText=function(t){return"undefined"==typeof t?this.options.labelText:(this.$label.html(t),this._width(),this.options.labelText=t,this.$element)},t.prototype.handleWidth=function(t){return"undefined"==typeof t?this.options.handleWidth:(this.options.handleWidth=t,this._width(),this._containerPosition(),this.$element)},t.prototype.labelWidth=function(t){return"undefined"==typeof t?this.options.labelWidth:(this.options.labelWidth=t,this._width(),this._containerPosition(),this.$element)},t.prototype.baseClass=function(t){return this.options.baseClass},t.prototype.wrapperClass=function(t){return"undefined"==typeof t?this.options.wrapperClass:(t||(t=e.fn.bootstrapSwitch.defaults.wrapperClass),this.$wrapper.removeClass(this._getClasses(this.options.wrapperClass).join(" ")),this.$wrapper.addClass(this._getClasses(t).join(" ")),this.options.wrapperClass=t,this.$element)},t.prototype.radioAllOff=function(t){return"undefined"==typeof t?this.options.radioAllOff:(t=!!t,t===this.options.radioAllOff?this.$element:(this.options.radioAllOff=t,this.$element))},t.prototype.onInit=function(t){return"undefined"==typeof t?this.options.onInit:(t||(t=e.fn.bootstrapSwitch.defaults.onInit),this.options.onInit=t,this.$element)},t.prototype.onSwitchChange=function(t){return"undefined"==typeof t?this.options.onSwitchChange:(t||(t=e.fn.bootstrapSwitch.defaults.onSwitchChange),this.options.onSwitchChange=t,this.$element)},t.prototype.destroy=function(){var t;return t=this.$element.closest("form"),t.length&&t.off("reset.bootstrapSwitch").removeData("bootstrap-switch"),this.$container.children().not(this.$element).remove(),this.$element.unwrap().unwrap().off(".bootstrapSwitch").removeData("bootstrap-switch"),this.$element},t.prototype._width=function(){var t,e;return t=this.$on.add(this.$off),t.add(this.$label).css("width",""),e="auto"===this.options.handleWidth?Math.max(this.$on.width(),this.$off.width()):this.options.handleWidth,t.width(e),this.$label.width(function(t){return function(i,n){return"auto"!==t.options.labelWidth?t.options.labelWidth:e>n?e:n}}(this)),this._handleWidth=this.$on.outerWidth(),this._labelWidth=this.$label.outerWidth(),this.$container.width(2*this._handleWidth+this._labelWidth),this.$wrapper.width(this._handleWidth+this._labelWidth)},t.prototype._containerPosition=function(t,e){return null==t&&(t=this.options.state),this.$container.css("margin-left",function(e){return function(){var i;return i=[0,"-"+e._handleWidth+"px"],e.options.indeterminate?"-"+e._handleWidth/2+"px":t?e.options.inverse?i[1]:i[0]:e.options.inverse?i[0]:i[1]}}(this)),e?setTimeout(function(){return e()},50):void 0},t.prototype._init=function(){var t,e;return t=function(t){return function(){return t.setPrevOptions(),t._width(),t._containerPosition(null,function(){return t.options.animate?t.$wrapper.addClass(t.options.baseClass+"-animate"):void 0})}}(this),this.$wrapper.is(":visible")?t():e=i.setInterval(function(n){return function(){return n.$wrapper.is(":visible")?(t(),i.clearInterval(e)):void 0}}(this),50)},t.prototype._elementHandlers=function(){return this.$element.on({"setPreviousOptions.bootstrapSwitch":function(t){return function(e){return t.setPrevOptions()}}(this),"previousState.bootstrapSwitch":function(t){return function(e){return t.options=t.prevOptions,t.options.indeterminate&&t.$wrapper.addClass(t.options.baseClass+"-indeterminate"),t.$element.prop("checked",t.options.state).trigger("change.bootstrapSwitch",!0)}}(this),"change.bootstrapSwitch":function(t){return function(i,n){var o;return i.preventDefault(),i.stopImmediatePropagation(),o=t.$element.is(":checked"),t._containerPosition(o),o!==t.options.state?(t.options.state=o,t.$wrapper.toggleClass(t.options.baseClass+"-off").toggleClass(t.options.baseClass+"-on"),n?void 0:(t.$element.is(":radio")&&e("[name='"+t.$element.attr("name")+"']").not(t.$element).prop("checked",!1).trigger("change.bootstrapSwitch",!0),t.$element.trigger("switchChange.bootstrapSwitch",[o]))):void 0}}(this),"focus.bootstrapSwitch":function(t){return function(e){return e.preventDefault(),t.$wrapper.addClass(t.options.baseClass+"-focused")}}(this),"blur.bootstrapSwitch":function(t){return function(e){return e.preventDefault(),t.$wrapper.removeClass(t.options.baseClass+"-focused")}}(this),"keydown.bootstrapSwitch":function(t){return function(e){if(e.which&&!t.options.disabled&&!t.options.readonly)switch(e.which){case 37:return e.preventDefault(),e.stopImmediatePropagation(),t.state(!1);case 39:return e.preventDefault(),e.stopImmediatePropagation(),t.state(!0)}}}(this)})},t.prototype._handleHandlers=function(){return this.$on.on("click.bootstrapSwitch",function(t){return function(e){return e.preventDefault(),e.stopPropagation(),t.state(!1),t.$element.trigger("focus.bootstrapSwitch")}}(this)),this.$off.on("click.bootstrapSwitch",function(t){return function(e){return e.preventDefault(),e.stopPropagation(),t.state(!0),t.$element.trigger("focus.bootstrapSwitch")}}(this))},t.prototype._labelHandlers=function(){return this.$label.on({click:function(t){return t.stopPropagation()},"mousedown.bootstrapSwitch touchstart.bootstrapSwitch":function(t){return function(e){return t._dragStart||t.options.disabled||t.options.readonly?void 0:(e.preventDefault(),e.stopPropagation(),t._dragStart=(e.pageX||e.originalEvent.touches[0].pageX)-parseInt(t.$container.css("margin-left"),10),t.options.animate&&t.$wrapper.removeClass(t.options.baseClass+"-animate"),t.$element.trigger("focus.bootstrapSwitch"))}}(this),"mousemove.bootstrapSwitch touchmove.bootstrapSwitch":function(t){return function(e){var i;if(null!=t._dragStart&&(e.preventDefault(),i=(e.pageX||e.originalEvent.touches[0].pageX)-t._dragStart,!(i<-t._handleWidth||i>0)))return t._dragEnd=i,t.$container.css("margin-left",t._dragEnd+"px")}}(this),"mouseup.bootstrapSwitch touchend.bootstrapSwitch":function(t){return function(e){var i;if(t._dragStart)return e.preventDefault(),t.options.animate&&t.$wrapper.addClass(t.options.baseClass+"-animate"),t._dragEnd?(i=t._dragEnd>-(t._handleWidth/2),t._dragEnd=!1,t.state(t.options.inverse?!i:i)):t.state(!t.options.state),t._dragStart=!1}}(this),"mouseleave.bootstrapSwitch":function(t){return function(e){return t.$label.trigger("mouseup.bootstrapSwitch")}}(this)})},t.prototype._externalLabelHandler=function(){var t;return t=this.$element.closest("label"),t.on("click",function(e){return function(i){return i.preventDefault(),i.stopImmediatePropagation(),i.target===t[0]?e.toggleState():void 0}}(this))},t.prototype._formHandler=function(){var t;return t=this.$element.closest("form"),t.data("bootstrap-switch")?void 0:t.on("reset.bootstrapSwitch",function(){return i.setTimeout(function(){return t.find("input").filter(function(){return e(this).data("bootstrap-switch")}).each(function(){return e(this).bootstrapSwitch("state",this.checked)})},1)}).data("bootstrap-switch",!0)},t.prototype._getClasses=function(t){var i,n,o,s;if(!e.isArray(t))return[this.options.baseClass+"-"+t];for(n=[],o=0,s=t.length;s>o;o++)i=t[o],n.push(this.options.baseClass+"-"+i);return n},t}(),e.fn.bootstrapSwitch=function(){var i,o,s;return o=arguments[0],i=2<=arguments.length?t.call(arguments,1):[],s=this,this.each(function(){var t,a;return t=e(this),a=t.data("bootstrap-switch"),a||t.data("bootstrap-switch",a=new n(this,o)),"string"==typeof o?s=a[o].apply(a,i):void 0}),s},e.fn.bootstrapSwitch.Constructor=n,e.fn.bootstrapSwitch.defaults={state:!0,size:null,animate:!0,disabled:!1,readonly:!1,indeterminate:!1,inverse:!1,radioAllOff:!1,onColor:"primary",offColor:"default",onText:"ON",offText:"OFF",labelText:"&nbsp;",handleWidth:"auto",labelWidth:"auto",baseClass:"bootstrap-switch",wrapperClass:"wrapper",onInit:function(){},onSwitchChange:function(){}}}(window.jQuery,window)}).call(this);
\ No newline at end of file
diff --git a/assets/webconfig/js/lib/jquery-ui-1.12.1.zip b/assets/webconfig/js/lib/jquery-ui-1.12.1.zip
deleted file mode 100644
index 445d2e5f..00000000
Binary files a/assets/webconfig/js/lib/jquery-ui-1.12.1.zip and /dev/null differ
diff --git a/assets/webconfig/js/lib/jsoneditor.js b/assets/webconfig/js/lib/jsoneditor.js
index 6ddc4869..77aad156 100755
--- a/assets/webconfig/js/lib/jsoneditor.js
+++ b/assets/webconfig/js/lib/jsoneditor.js
@@ -1950,7 +1950,7 @@ JSONEditor.defaults.editors.string = JSONEditor.AbstractEditor.extend({
     if(this.options.format) {
       this.format = this.options.format;
     }
-
+	
     // Specific format
     if(this.format) {
       // Text Area
@@ -1960,7 +1960,7 @@ JSONEditor.defaults.editors.string = JSONEditor.AbstractEditor.extend({
       }
       // Range Input
       else if(this.format === 'range') {
-        this.input_type = 'range';
+		this.input_type = 'range';
         var min = this.schema.minimum || 0;
         var max = this.schema.maximum || Math.max(100,min+1);
         var step = 1;
@@ -2033,10 +2033,19 @@ JSONEditor.defaults.editors.string = JSONEditor.AbstractEditor.extend({
       }
       // HTML5 Input type
       else {
-        this.input_type = this.format;
+		this.input_type = this.format;
         this.input = this.theme.getFormInputField(this.input_type);
       }
     }
+	// Number or integer adds html5 tag 'number'
+	else if (this.schema.type == "number" || this.schema.type == "integer"){
+		
+		var min = this.schema.minimum
+		var max = this.schema.maximum
+		var step = this.schema.step
+
+        this.input = this.theme.getRangeInput(min,max,step);
+	}
     // Normal text input
     else {
       this.input_type = 'text';
@@ -6284,16 +6293,18 @@ JSONEditor.AbstractTheme = Class.extend({
     return el;
   },
   getRangeInput: function(min,max,step) {
-    var el = this.getFormInputField('range');
-    el.setAttribute('min',min);
-    el.setAttribute('max',max);
+    if (typeof step == "undefined") step = 1;
+	
+	var el = this.getFormInputField('number');
+    if (typeof min != "undefined") el.setAttribute('min',min);
+    if (typeof max != "undefined") el.setAttribute('max',max);
     el.setAttribute('step',step);
     return el;
   },
   getFormInputField: function(type) {
     var el = document.createElement('input');
     el.setAttribute('type',type);
-    return el;
+	return el;
   },
   afterInputReady: function(input) {
 
@@ -6485,194 +6496,6 @@ JSONEditor.AbstractTheme = Class.extend({
   }
 });
 
-JSONEditor.defaults.themes.bootstrap2 = JSONEditor.AbstractTheme.extend({
-  getRangeInput: function(min, max, step) {
-    // TODO: use bootstrap slider
-    return this._super(min, max, step);
-  },
-  getGridContainer: function() {
-    var el = document.createElement('div');
-    el.className = 'container-fluid';
-    return el;
-  },
-  getGridRow: function() {
-    var el = document.createElement('div');
-    el.className = 'row-fluid';
-    return el;
-  },
-  getFormInputLabel: function(text) {
-    var el = this._super(text);
-    el.style.display = 'inline-block';
-    el.style.fontWeight = 'bold';
-    return el;
-  },
-  setGridColumnSize: function(el,size) {
-    el.className = 'span'+size;
-  },
-  getSelectInput: function(options) {
-    var input = this._super(options);
-    input.style.width = 'auto';
-    input.style.maxWidth = '98%';
-    return input;
-  },
-  getFormInputField: function(type) {
-    var el = this._super(type);
-    el.style.width = '98%';
-    return el;
-  },
-  afterInputReady: function(input) {
-    if(input.controlgroup) return;
-    input.controlgroup = this.closest(input,'.control-group');
-    input.controls = this.closest(input,'.controls');
-    if(this.closest(input,'.compact')) {
-      input.controlgroup.className = input.controlgroup.className.replace(/control-group/g,'').replace(/[ ]{2,}/g,' ');
-      input.controls.className = input.controlgroup.className.replace(/controls/g,'').replace(/[ ]{2,}/g,' ');
-      input.style.marginBottom = 0;
-    }
-
-    // TODO: use bootstrap slider
-  },
-  getIndentedPanel: function() {
-    var el = document.createElement('div');
-    el.className = 'well well-small';
-    el.style.paddingBottom = 0;
-    return el;
-  },
-  getFormInputDescription: function(text) {
-    var el = document.createElement('p');
-    el.className = 'help-inline';
-    el.textContent = text;
-    return el;
-  },
-  getFormInputAppend: function(text) {
-    var el = document.createElement('div');
-    el.className = 'input-group-addon';
-    el.textContent = text;
-    return el;
-  },
-  getFormControl: function(label, input, description, append) {
-    var ret = document.createElement('div');
-    ret.className = 'control-group';
-
-    var controls = document.createElement('div');
-    controls.className = 'controls';
-
-    if(label && input.getAttribute('type') === 'checkbox') {
-      ret.appendChild(controls);
-      label.className += ' checkbox';
-      label.appendChild(input);
-      controls.appendChild(label);
-      controls.style.height = '30px';
-    }
-    else {
-      if(label) {
-        label.className += ' control-label';
-        ret.appendChild(label);
-      }
-      controls.appendChild(input);
-      ret.appendChild(controls);
-    }
-
-    if(description) controls.appendChild(description);
-
-    return ret;
-  },
-  getHeaderButtonHolder: function() {
-    var el = this.getButtonHolder();
-    el.style.marginLeft = '10px';
-    return el;
-  },
-  getButtonHolder: function() {
-    var el = document.createElement('div');
-    el.className = 'btn-group';
-    return el;
-  },
-  getButton: function(text, icon, title) {
-    var el =  this._super(text, icon, title);
-    el.className += ' btn btn-default';
-    return el;
-  },
-  getTable: function() {
-    var el = document.createElement('table');
-    el.className = 'table table-bordered';
-    el.style.width = 'auto';
-    el.style.maxWidth = 'none';
-    return el;
-  },
-  addInputError: function(input,text) {
-    if(!input.controlgroup || !input.controls) return;
-    input.controlgroup.className += ' error';
-    if(!input.errmsg) {
-      input.errmsg = document.createElement('p');
-      input.errmsg.className = 'help-block errormsg';
-      input.controls.appendChild(input.errmsg);
-    }
-    else {
-      input.errmsg.style.display = '';
-    }
-
-    input.errmsg.textContent = text;
-  },
-  removeInputError: function(input) {
-    if(!input.errmsg) return;
-    input.errmsg.style.display = 'none';
-    input.controlgroup.className = input.controlgroup.className.replace(/\s?error/g,'');
-  },
-  getTabHolder: function() {
-    var el = document.createElement('div');
-    el.className = 'tabbable tabs-left';
-    el.innerHTML = "<ul class='nav nav-tabs span2' style='margin-right: 0;'></ul><div class='tab-content span10' style='overflow:visible;'></div>";
-    return el;
-  },
-  getTab: function(text) {
-    var el = document.createElement('li');
-    var a = document.createElement('a');
-    a.setAttribute('href','#');
-    a.appendChild(text);
-    el.appendChild(a);
-    return el;
-  },
-  getTabContentHolder: function(tab_holder) {
-    return tab_holder.children[1];
-  },
-  getTabContent: function() {
-    var el = document.createElement('div');
-    el.className = 'tab-pane active';
-    return el;
-  },
-  markTabActive: function(tab) {
-    tab.className += ' active';
-  },
-  markTabInactive: function(tab) {
-    tab.className = tab.className.replace(/\s?active/g,'');
-  },
-  addTab: function(holder, tab) {
-    holder.children[0].appendChild(tab);
-  },
-  getProgressBar: function() {
-    var container = document.createElement('div');
-    container.className = 'progress';
-
-    var bar = document.createElement('div');
-    bar.className = 'bar';
-    bar.style.width = '0%';
-    container.appendChild(bar);
-
-    return container;
-  },
-  updateProgressBar: function(progressBar, progress) {
-    if (!progressBar) return;
-
-    progressBar.firstChild.style.width = progress + "%";
-  },
-  updateProgressBarUnknown: function(progressBar) {
-    if (!progressBar) return;
-
-    progressBar.className = 'progress progress-striped active';
-    progressBar.firstChild.style.width = '100%';
-  }
-});
-
 JSONEditor.defaults.themes.bootstrap3 = JSONEditor.AbstractTheme.extend({
   getSelectInput: function(options) {
     var el = this._super(options);
@@ -6703,7 +6526,7 @@ JSONEditor.defaults.themes.bootstrap3 = JSONEditor.AbstractTheme.extend({
   },
   getFormInputField: function(type) {
     var el = this._super(type);
-    if(type !== 'checkbox') {
+	if(type !== 'checkbox') {
       el.className += 'form-control';
     }
     return el;
@@ -6712,29 +6535,43 @@ JSONEditor.defaults.themes.bootstrap3 = JSONEditor.AbstractTheme.extend({
     var group = document.createElement('div');
 	var subgroup = document.createElement('div');
 
-	if (append){
+	if (input.type === 'checkbox'){
+		var helplabel = document.createElement("label")
+		
+		group.className += ' form-group';
+		group.style.minHeight = "30px";
+		label.className += ' col-form-label col-sm-2';
+		label.style.fontWeight = "bold";
+		group.appendChild(label);
+		group.appendChild(subgroup);
+		subgroup.className += 'checkbox col-sm-10';
+		subgroup.style.marginTop = "0px";
+		subgroup.appendChild(input);
+		subgroup.appendChild(helplabel);
+
+		//if (input.name.includes('enable'))
+		//	subgroup.className += ' checkbox-success';
+	}
+	else if (append){
 		group.className += ' form-group';
 		if(label) {
-			label.className += ' col-form-label col-md-2';
+			label.className += ' col-form-label col-sm-2';
 			group.appendChild(label);
 		}
 		group.appendChild(subgroup);
-		subgroup.className += 'col-md-10 input-group';
+		subgroup.className += 'col-sm-10 input-group';
 		subgroup.appendChild(input);
 		subgroup.appendChild(append);
 	}
     else {
       group.className += ' form-group';
       if(label) {
-        label.className += ' col-form-label col-md-2';
+        label.className += ' col-form-label col-sm-2';
         group.appendChild(label);
       }
 		group.appendChild(subgroup);
-	      subgroup.className += ' input-group col-md-10';
+	      subgroup.className += ' input-group col-sm-10';
 	      subgroup.appendChild(input);
-		if (input.type === 'checkbox'){
-			label.style.fontWeight = 'bold';
-		}
 	  }
     
 
@@ -6858,594 +6695,6 @@ JSONEditor.defaults.themes.bootstrap3 = JSONEditor.AbstractTheme.extend({
   }
 });
 
-// Base Foundation theme
-JSONEditor.defaults.themes.foundation = JSONEditor.AbstractTheme.extend({
-  getChildEditorHolder: function() {
-    var el = document.createElement('div');
-    el.style.marginBottom = '15px';
-    return el;
-  },
-  getSelectInput: function(options) {
-    var el = this._super(options);
-    el.style.minWidth = 'none';
-    el.style.padding = '5px';
-    el.style.marginTop = '3px';
-    return el;
-  },
-  getSwitcher: function(options) {
-    var el = this._super(options);
-    el.style.paddingRight = '8px';
-    return el;
-  },
-  afterInputReady: function(input) {
-    if(this.closest(input,'.compact')) {
-      input.style.marginBottom = 0;
-    }
-    input.group = this.closest(input,'.form-control');
-  },
-  getFormInputLabel: function(text) {
-    var el = this._super(text);
-    el.style.display = 'inline-block';
-    return el;
-  },
-  getFormInputField: function(type) {
-    var el = this._super(type);
-    el.style.width = '100%';
-    el.style.marginBottom = type==='checkbox'? '0' : '12px';
-    return el;
-  },
-  getFormInputDescription: function(text) {
-    var el = document.createElement('p');
-    el.textContent = text;
-    el.style.marginTop = '-10px';
-    el.style.fontStyle = 'italic';
-    return el;
-  },
-  getIndentedPanel: function() {
-    var el = document.createElement('div');
-    el.className = 'panel';
-    el.style.paddingBottom = 0;
-    return el;
-  },
-  getHeaderButtonHolder: function() {
-    var el = this.getButtonHolder();
-    el.style.display = 'inline-block';
-    el.style.marginLeft = '10px';
-    el.style.verticalAlign = 'middle';
-    return el;
-  },
-  getButtonHolder: function() {
-    var el = document.createElement('div');
-    el.className = 'button-group';
-    return el;
-  },
-  getButton: function(text, icon, title) {
-    var el = this._super(text, icon, title);
-    el.className += ' small button';
-    return el;
-  },
-  addInputError: function(input,text) {
-    if(!input.group) return;
-    input.group.className += ' error';
-
-    if(!input.errmsg) {
-      input.insertAdjacentHTML('afterend','<small class="error"></small>');
-      input.errmsg = input.parentNode.getElementsByClassName('error')[0];
-    }
-    else {
-      input.errmsg.style.display = '';
-    }
-
-    input.errmsg.textContent = text;
-  },
-  removeInputError: function(input) {
-    if(!input.errmsg) return;
-    input.group.className = input.group.className.replace(/ error/g,'');
-    input.errmsg.style.display = 'none';
-  },
-  getProgressBar: function() {
-    var progressBar = document.createElement('div');
-    progressBar.className = 'progress';
-
-    var meter = document.createElement('span');
-    meter.className = 'meter';
-    meter.style.width = '0%';
-    progressBar.appendChild(meter);
-    return progressBar;
-  },
-  updateProgressBar: function(progressBar, progress) {
-    if (!progressBar) return;
-    progressBar.firstChild.style.width = progress + '%';
-  },
-  updateProgressBarUnknown: function(progressBar) {
-    if (!progressBar) return;
-    progressBar.firstChild.style.width = '100%';
-  }
-});
-
-// Foundation 3 Specific Theme
-JSONEditor.defaults.themes.foundation3 = JSONEditor.defaults.themes.foundation.extend({
-  getHeaderButtonHolder: function() {
-    var el = this._super();
-    el.style.fontSize = '.6em';
-    return el;
-  },
-  getFormInputLabel: function(text) {
-    var el = this._super(text);
-    el.style.fontWeight = 'bold';
-    return el;
-  },
-  getTabHolder: function() {
-    var el = document.createElement('div');
-    el.className = 'row';
-    el.innerHTML = "<dl class='tabs vertical two columns'></dl><div class='tabs-content ten columns'></div>";
-    return el;
-  },
-  setGridColumnSize: function(el,size) {
-    var sizes = ['zero','one','two','three','four','five','six','seven','eight','nine','ten','eleven','twelve'];
-    el.className = 'columns '+sizes[size];
-  },
-  getTab: function(text) {
-    var el = document.createElement('dd');
-    var a = document.createElement('a');
-    a.setAttribute('href','#');
-    a.appendChild(text);
-    el.appendChild(a);
-    return el;
-  },
-  getTabContentHolder: function(tab_holder) {
-    return tab_holder.children[1];
-  },
-  getTabContent: function() {
-    var el = document.createElement('div');
-    el.className = 'content active';
-    el.style.paddingLeft = '5px';
-    return el;
-  },
-  markTabActive: function(tab) {
-    tab.className += ' active';
-  },
-  markTabInactive: function(tab) {
-    tab.className = tab.className.replace(/\s*active/g,'');
-  },
-  addTab: function(holder, tab) {
-    holder.children[0].appendChild(tab);
-  }
-});
-
-// Foundation 4 Specific Theme
-JSONEditor.defaults.themes.foundation4 = JSONEditor.defaults.themes.foundation.extend({
-  getHeaderButtonHolder: function() {
-    var el = this._super();
-    el.style.fontSize = '.6em';
-    return el;
-  },
-  setGridColumnSize: function(el,size) {
-    el.className = 'columns large-'+size;
-  },
-  getFormInputDescription: function(text) {
-    var el = this._super(text);
-    el.style.fontSize = '.8rem';
-    return el;
-  },
-  getFormInputLabel: function(text) {
-    var el = this._super(text);
-    el.style.fontWeight = 'bold';
-    return el;
-  }
-});
-
-// Foundation 5 Specific Theme
-JSONEditor.defaults.themes.foundation5 = JSONEditor.defaults.themes.foundation.extend({
-  getFormInputDescription: function(text) {
-    var el = this._super(text);
-    el.style.fontSize = '.8rem';
-    return el;
-  },
-  setGridColumnSize: function(el,size) {
-    el.className = 'columns medium-'+size;
-  },
-  getButton: function(text, icon, title) {
-    var el = this._super(text,icon,title);
-    el.className = el.className.replace(/\s*small/g,'') + ' tiny';
-    return el;
-  },
-  getTabHolder: function() {
-    var el = document.createElement('div');
-    el.innerHTML = "<dl class='tabs vertical'></dl><div class='tabs-content vertical'></div>";
-    return el;
-  },
-  getTab: function(text) {
-    var el = document.createElement('dd');
-    var a = document.createElement('a');
-    a.setAttribute('href','#');
-    a.appendChild(text);
-    el.appendChild(a);
-    return el;
-  },
-  getTabContentHolder: function(tab_holder) {
-    return tab_holder.children[1];
-  },
-  getTabContent: function() {
-    var el = document.createElement('div');
-    el.className = 'content active';
-    el.style.paddingLeft = '5px';
-    return el;
-  },
-  markTabActive: function(tab) {
-    tab.className += ' active';
-  },
-  markTabInactive: function(tab) {
-    tab.className = tab.className.replace(/\s*active/g,'');
-  },
-  addTab: function(holder, tab) {
-    holder.children[0].appendChild(tab);
-  }
-});
-
-JSONEditor.defaults.themes.foundation6 = JSONEditor.defaults.themes.foundation5.extend({
-  getIndentedPanel: function() {
-    var el = document.createElement('div');
-    el.className = 'callout secondary';
-    return el;
-  },
-  getButtonHolder: function() {
-    var el = document.createElement('div');
-    el.className = 'button-group tiny';
-    el.style.marginBottom = 0;
-    return el;
-  },
-  getFormInputLabel: function(text) {
-    var el = this._super(text);
-    el.style.display = 'block';
-    return el;
-  },
-  getFormControl: function(label, input, description) {
-    var el = document.createElement('div');
-    el.className = 'form-control';
-    if(label) el.appendChild(label);
-    if(input.type === 'checkbox') {
-      label.insertBefore(input,label.firstChild);
-    }
-    else if (label) {
-      label.appendChild(input);
-    } else {
-      el.appendChild(input);
-    }
-
-    if(description) label.appendChild(description);
-    return el;
-  },
-  addInputError: function(input,text) {
-    if(!input.group) return;
-    input.group.className += ' error';
-
-    if(!input.errmsg) {
-      var errorEl = document.createElement('span');
-      errorEl.className = 'form-error is-visible';
-      input.group.getElementsByTagName('label')[0].appendChild(errorEl);
-
-      input.className = input.className + ' is-invalid-input';
-
-      input.errmsg = errorEl;
-    }
-    else {
-      input.errmsg.style.display = '';
-      input.className = '';
-    }
-
-    input.errmsg.textContent = text;
-  },
-  removeInputError: function(input) {
-    if(!input.errmsg) return;
-    input.className = input.className.replace(/ is-invalid-input/g,'');
-    if(input.errmsg.parentNode) {
-      input.errmsg.parentNode.removeChild(input.errmsg);
-    }
-  },
-});
-
-JSONEditor.defaults.themes.html = JSONEditor.AbstractTheme.extend({
-  getFormInputLabel: function(text) {
-    var el = this._super(text);
-    el.style.display = 'block';
-    el.style.marginBottom = '3px';
-    el.style.fontWeight = 'bold';
-    return el;
-  },
-  getFormInputDescription: function(text) {
-    var el = this._super(text);
-    el.style.fontSize = '.8em';
-    el.style.margin = 0;
-    el.style.display = 'inline-block';
-    el.style.fontStyle = 'italic';
-    return el;
-  },
-  getIndentedPanel: function() {
-    var el = this._super();
-    el.style.border = '1px solid #ddd';
-    el.style.padding = '5px';
-    el.style.margin = '5px';
-    el.style.borderRadius = '3px';
-    return el;
-  },
-  getChildEditorHolder: function() {
-    var el = this._super();
-    el.style.marginBottom = '8px';
-    return el;
-  },
-  getHeaderButtonHolder: function() {
-    var el = this.getButtonHolder();
-    el.style.display = 'inline-block';
-    el.style.marginLeft = '10px';
-    el.style.fontSize = '.8em';
-    el.style.verticalAlign = 'middle';
-    return el;
-  },
-  getTable: function() {
-    var el = this._super();
-    el.style.borderBottom = '1px solid #ccc';
-    el.style.marginBottom = '5px';
-    return el;
-  },
-  addInputError: function(input, text) {
-    input.style.borderColor = 'red';
-
-    if(!input.errmsg) {
-      var group = this.closest(input,'.form-control');
-      input.errmsg = document.createElement('div');
-      input.errmsg.setAttribute('class','errmsg');
-      input.errmsg.style = input.errmsg.style || {};
-      input.errmsg.style.color = 'red';
-      group.appendChild(input.errmsg);
-    }
-    else {
-      input.errmsg.style.display = 'block';
-    }
-
-    input.errmsg.innerHTML = '';
-    input.errmsg.appendChild(document.createTextNode(text));
-  },
-  removeInputError: function(input) {
-    input.style.borderColor = '';
-    if(input.errmsg) input.errmsg.style.display = 'none';
-  },
-  getProgressBar: function() {
-    var max = 100, start = 0;
-
-    var progressBar = document.createElement('progress');
-    progressBar.setAttribute('max', max);
-    progressBar.setAttribute('value', start);
-    return progressBar;
-  },
-  updateProgressBar: function(progressBar, progress) {
-    if (!progressBar) return;
-    progressBar.setAttribute('value', progress);
-  },
-  updateProgressBarUnknown: function(progressBar) {
-    if (!progressBar) return;
-    progressBar.removeAttribute('value');
-  }
-});
-
-JSONEditor.defaults.themes.jqueryui = JSONEditor.AbstractTheme.extend({
-  getTable: function() {
-    var el = this._super();
-    el.setAttribute('cellpadding',5);
-    el.setAttribute('cellspacing',0);
-    return el;
-  },
-  getTableHeaderCell: function(text) {
-    var el = this._super(text);
-    el.className = 'ui-state-active';
-    el.style.fontWeight = 'bold';
-    return el;
-  },
-  getTableCell: function() {
-    var el = this._super();
-    el.className = 'ui-widget-content';
-    return el;
-  },
-  getHeaderButtonHolder: function() {
-    var el = this.getButtonHolder();
-    el.style.marginLeft = '10px';
-    el.style.fontSize = '.6em';
-    el.style.display = 'inline-block';
-    return el;
-  },
-  getFormInputDescription: function(text) {
-    var el = this.getDescription(text);
-    el.style.marginLeft = '10px';
-    el.style.display = 'inline-block';
-    return el;
-  },
-  getFormControl: function(label, input, description) {
-    var el = this._super(label,input,description);
-    if(input.type === 'checkbox') {
-      el.style.lineHeight = '25px';
-
-      el.style.padding = '3px 0';
-    }
-    else {
-      el.style.padding = '4px 0 8px 0';
-    }
-    return el;
-  },
-  getDescription: function(text) {
-    var el = document.createElement('span');
-    el.style.fontSize = '.8em';
-    el.style.fontStyle = 'italic';
-    el.textContent = text;
-    return el;
-  },
-  getButtonHolder: function() {
-    var el = document.createElement('div');
-    el.className = 'ui-buttonset';
-    el.style.fontSize = '.7em';
-    return el;
-  },
-  getFormInputLabel: function(text) {
-    var el = document.createElement('label');
-    el.style.fontWeight = 'bold';
-    el.style.display = 'block';
-    el.textContent = text;
-    return el;
-  },
-  getButton: function(text, icon, title) {
-    var button = document.createElement("button");
-    button.className = 'ui-button ui-widget ui-state-default ui-corner-all';
-
-    // Icon only
-    if(icon && !text) {
-      button.className += ' ui-button-icon-only';
-      icon.className += ' ui-button-icon-primary ui-icon-primary';
-      button.appendChild(icon);
-    }
-    // Icon and Text
-    else if(icon) {
-      button.className += ' ui-button-text-icon-primary';
-      icon.className += ' ui-button-icon-primary ui-icon-primary';
-      button.appendChild(icon);
-    }
-    // Text only
-    else {
-      button.className += ' ui-button-text-only';
-    }
-
-    var el = document.createElement('span');
-    el.className = 'ui-button-text';
-    el.textContent = text||title||".";
-    button.appendChild(el);
-
-    button.setAttribute('title',title);
-
-    return button;
-  },
-  setButtonText: function(button,text, icon, title) {
-    button.innerHTML = '';
-    button.className = 'ui-button ui-widget ui-state-default ui-corner-all';
-
-    // Icon only
-    if(icon && !text) {
-      button.className += ' ui-button-icon-only';
-      icon.className += ' ui-button-icon-primary ui-icon-primary';
-      button.appendChild(icon);
-    }
-    // Icon and Text
-    else if(icon) {
-      button.className += ' ui-button-text-icon-primary';
-      icon.className += ' ui-button-icon-primary ui-icon-primary';
-      button.appendChild(icon);
-    }
-    // Text only
-    else {
-      button.className += ' ui-button-text-only';
-    }
-
-    var el = document.createElement('span');
-    el.className = 'ui-button-text';
-    el.textContent = text||title||".";
-    button.appendChild(el);
-
-    button.setAttribute('title',title);
-  },
-  getIndentedPanel: function() {
-    var el = document.createElement('div');
-    el.className = 'ui-widget-content ui-corner-all';
-    el.style.padding = '1em 1.4em';
-    el.style.marginBottom = '20px';
-    return el;
-  },
-  afterInputReady: function(input) {
-    if(input.controls) return;
-    input.controls = this.closest(input,'.form-control');
-  },
-  addInputError: function(input,text) {
-    if(!input.controls) return;
-    if(!input.errmsg) {
-      input.errmsg = document.createElement('div');
-      input.errmsg.className = 'ui-state-error';
-      input.controls.appendChild(input.errmsg);
-    }
-    else {
-      input.errmsg.style.display = '';
-    }
-
-    input.errmsg.textContent = text;
-  },
-  removeInputError: function(input) {
-    if(!input.errmsg) return;
-    input.errmsg.style.display = 'none';
-  },
-  markTabActive: function(tab) {
-    tab.className = tab.className.replace(/\s*ui-widget-header/g,'')+' ui-state-active';
-  },
-  markTabInactive: function(tab) {
-    tab.className = tab.className.replace(/\s*ui-state-active/g,'')+' ui-widget-header';
-  }
-});
-
-JSONEditor.defaults.themes.barebones = JSONEditor.AbstractTheme.extend({
-    getFormInputLabel: function (text) {
-        var el = this._super(text);
-        return el;
-    },
-    getFormInputDescription: function (text) {
-        var el = this._super(text);
-        return el;
-    },
-    getIndentedPanel: function () {
-        var el = this._super();
-        return el;
-    },
-    getChildEditorHolder: function () {
-        var el = this._super();
-        return el;
-    },
-    getHeaderButtonHolder: function () {
-        var el = this.getButtonHolder();
-        return el;
-    },
-    getTable: function () {
-        var el = this._super();
-        return el;
-    },
-    addInputError: function (input, text) {
-        if (!input.errmsg) {
-            var group = this.closest(input, '.form-control');
-            input.errmsg = document.createElement('div');
-            input.errmsg.setAttribute('class', 'errmsg');
-            group.appendChild(input.errmsg);
-        }
-        else {
-            input.errmsg.style.display = 'block';
-        }
-
-        input.errmsg.innerHTML = '';
-        input.errmsg.appendChild(document.createTextNode(text));
-    },
-    removeInputError: function (input) {
-        input.style.borderColor = '';
-        if (input.errmsg) input.errmsg.style.display = 'none';
-    },
-    getProgressBar: function () {
-        var max = 100, start = 0;
-
-        var progressBar = document.createElement('progress');
-        progressBar.setAttribute('max', max);
-        progressBar.setAttribute('value', start);
-        return progressBar;
-    },
-    updateProgressBar: function (progressBar, progress) {
-        if (!progressBar) return;
-        progressBar.setAttribute('value', progress);
-    },
-    updateProgressBarUnknown: function (progressBar) {
-        if (!progressBar) return;
-        progressBar.removeAttribute('value');
-    }
-});
-
 JSONEditor.AbstractIconLib = Class.extend({
   mapping: {
     collapse: '',
@@ -7474,51 +6723,6 @@ JSONEditor.AbstractIconLib = Class.extend({
   }
 });
 
-JSONEditor.defaults.iconlibs.bootstrap2 = JSONEditor.AbstractIconLib.extend({
-  mapping: {
-    collapse: 'chevron-down',
-    expand: 'chevron-up',
-    "delete": 'trash',
-    edit: 'pencil',
-    add: 'plus',
-    cancel: 'ban-circle',
-    save: 'ok',
-    moveup: 'arrow-up',
-    movedown: 'arrow-down'
-  },
-  icon_prefix: 'icon-'
-});
-
-JSONEditor.defaults.iconlibs.bootstrap3 = JSONEditor.AbstractIconLib.extend({
-  mapping: {
-    collapse: 'chevron-down',
-    expand: 'chevron-right',
-    "delete": 'remove',
-    edit: 'pencil',
-    add: 'plus',
-    cancel: 'floppy-remove',
-    save: 'floppy-saved',
-    moveup: 'arrow-up',
-    movedown: 'arrow-down'
-  },
-  icon_prefix: 'glyphicon glyphicon-'
-});
-
-JSONEditor.defaults.iconlibs.fontawesome3 = JSONEditor.AbstractIconLib.extend({
-  mapping: {
-    collapse: 'chevron-down',
-    expand: 'chevron-right',
-    "delete": 'remove',
-    edit: 'pencil',
-    add: 'plus',
-    cancel: 'ban-circle',
-    save: 'save',
-    moveup: 'arrow-up',
-    movedown: 'arrow-down'
-  },
-  icon_prefix: 'icon-'
-});
-
 JSONEditor.defaults.iconlibs.fontawesome4 = JSONEditor.AbstractIconLib.extend({
   mapping: {
     collapse: 'caret-square-o-down',
@@ -7534,51 +6738,6 @@ JSONEditor.defaults.iconlibs.fontawesome4 = JSONEditor.AbstractIconLib.extend({
   icon_prefix: 'fa fa-'
 });
 
-JSONEditor.defaults.iconlibs.foundation2 = JSONEditor.AbstractIconLib.extend({
-  mapping: {
-    collapse: 'minus',
-    expand: 'plus',
-    "delete": 'remove',
-    edit: 'edit',
-    add: 'add-doc',
-    cancel: 'error',
-    save: 'checkmark',
-    moveup: 'up-arrow',
-    movedown: 'down-arrow'
-  },
-  icon_prefix: 'foundicon-'
-});
-
-JSONEditor.defaults.iconlibs.foundation3 = JSONEditor.AbstractIconLib.extend({
-  mapping: {
-    collapse: 'minus',
-    expand: 'plus',
-    "delete": 'x',
-    edit: 'pencil',
-    add: 'page-add',
-    cancel: 'x-circle',
-    save: 'save',
-    moveup: 'arrow-up',
-    movedown: 'arrow-down'
-  },
-  icon_prefix: 'fi-'
-});
-
-JSONEditor.defaults.iconlibs.jqueryui = JSONEditor.AbstractIconLib.extend({
-  mapping: {
-    collapse: 'triangle-1-s',
-    expand: 'triangle-1-e',
-    "delete": 'trash',
-    edit: 'pencil',
-    add: 'plusthick',
-    cancel: 'closethick',
-    save: 'disk',
-    moveup: 'arrowthick-1-n',
-    movedown: 'arrowthick-1-s'
-  },
-  icon_prefix: 'ui-icon ui-icon-'
-});
-
 JSONEditor.defaults.templates["default"] = function() {
   return {
     compile: function(template) {
diff --git a/assets/webconfig/js/lib/jsonform.js b/assets/webconfig/js/lib/jsonform.js
deleted file mode 100644
index e15e2b14..00000000
--- a/assets/webconfig/js/lib/jsonform.js
+++ /dev/null
@@ -1,3591 +0,0 @@
-/* Copyright (c) 2012 Joshfire - MIT license */
-/**
- * @fileoverview Core of the JSON Form client-side library.
- *
- * Generates an HTML form from a structured data model and a layout description.
- *
- * The library may also validate inputs entered by the user against the data model
- * upon form submission and create the structured data object initialized with the
- * values that were submitted.
- *
- * The library depends on:
- *  - jQuery
- *  - the underscore library
- *  - a JSON parser/serializer. Nothing to worry about in modern browsers.
- *  - the JSONFormValidation library (in jsv.js) for validation purpose
- *
- * See documentation at:
- * http://developer.joshfire.com/doc/dev/ref/jsonform
- *
- * The library creates and maintains an internal data tree along with the DOM.
- * That structure is necessary to handle arrays (and nested arrays!) that are
- * dynamic by essence.
- */
-
- /*global window*/
-
-(function(serverside, global, $, _, JSON) {
-  if (serverside) {
-    _ = require('underscore');
-  }
-
-  /**
-   * Regular expressions used to extract array indexes in input field names
-   */
-  var reArray = /\[([0-9]*)\](?=\[|\.|$)/g;
-
-  /**
-   * Template settings for form views
-   */
-  var fieldTemplateSettings = {
-    evaluate    : /<%([\s\S]+?)%>/g,
-    interpolate : /<%=([\s\S]+?)%>/g
-  };
-
-  /**
-   * Template settings for value replacement
-   */
-  var valueTemplateSettings = {
-    evaluate    : /\{\[([\s\S]+?)\]\}/g,
-    interpolate : /\{\{([\s\S]+?)\}\}/g
-  };
-
-  /**
-   * Returns true if given value is neither "undefined" nor null
-   */
-  var isSet = function (value) {
-    return !(_.isUndefined(value) || _.isNull(value));
-  };
-
-  /**
-   * The jsonform object whose methods will be exposed to the window object
-   */
-  var jsonform = {util:{}};
-
-
-  // From backbonejs
-  var escapeHTML = function (string) {
-    if (!isSet(string)) {
-      return '';
-    }
-    string = '' + string;
-    if (!string) {
-      return '';
-    }
-    return string
-      .replace(/&(?!\w+;|#\d+;|#x[\da-f]+;)/gi, '&amp;')
-      .replace(/</g, '&lt;')
-      .replace(/>/g, '&gt;')
-      .replace(/"/g, '&quot;')
-      .replace(/'/g, '&#x27;')
-      .replace(/\//g, '&#x2F;');
-  };
-
-/**
- * Escapes selector name for use with jQuery
- *
- * All meta-characters listed in jQuery doc are escaped:
- * http://api.jquery.com/category/selectors/
- *
- * @function
- * @param {String} selector The jQuery selector to escape
- * @return {String} The escaped selector.
- */
-var escapeSelector = function (selector) {
-  return selector.replace(/([ \!\"\#\$\%\&\'\(\)\*\+\,\.\/\:\;<\=\>\?\@\[\\\]\^\`\{\|\}\~])/g, '\\$1');
-};
-
-
-/**
- * Initializes tabular sections in forms. Such sections are generated by the
- * 'selectfieldset' type of elements in JSON Form.
- *
- * Input fields that are not visible are automatically disabled
- * not to appear in the submitted form. That's on purpose, as tabs
- * are meant to convey an alternative (and not a sequence of steps).
- *
- * The tabs menu is not rendered as tabs but rather as a select field because
- * it's easier to grasp that it's an alternative.
- *
- * Code based on bootstrap-tabs.js, updated to:
- * - react to option selection instead of tab click
- * - disable input fields in non visible tabs
- * - disable the possibility to have dropdown menus (no meaning here)
- * - act as a regular function instead of as a jQuery plug-in.
- *
- * @function
- * @param {Object} tabs jQuery object that contains the tabular sections
- *  to initialize. The object may reference more than one element.
- */
-var initializeTabs = function (tabs) {
-  var activate = function (element, container) {
-    container
-      .find('> .active')
-      .removeClass('active');
-    element.addClass('active');
-  };
-
-  var enableFields = function ($target, targetIndex) {
-    // Enable all fields in the targeted tab
-    $target.find('input, textarea, select').removeAttr('disabled');
-
-    // Disable all fields in other tabs
-    $target.parent()
-      .children(':not([data-idx=' + targetIndex + '])')
-      .find('input, textarea, select')
-      .attr('disabled', 'disabled');
-  };
-
-  var optionSelected = function (e) {
-    var $option = $("option:selected", $(this)),
-      $select = $(this),
-      // do not use .attr() as it sometimes unexplicably fails
-      targetIdx = $option.get(0).getAttribute('data-idx') || $option.attr('value'),
-      $target;
-
-    e.preventDefault();
-    if ($option.hasClass('active')) {
-      return;
-    }
-
-    $target = $(this).parents('.tabbable').eq(0).find('.tab-content [data-idx=' + targetIdx + ']');
-
-    activate($option, $select);
-    activate($target, $target.parent());
-    enableFields($target, targetIdx);
-  };
-
-  var tabClicked = function (e) {
-    var $a = $('a', $(this));
-    var $content = $(this).parents('.tabbable').first()
-      .find('.tab-content').first();
-    var targetIdx = $(this).index();
-    var $target = $content.find('[data-idx=' + targetIdx + ']');
-
-    e.preventDefault();
-    activate($(this), $(this).parent());
-    activate($target, $target.parent());
-    if ($(this).parent().hasClass('jsonform-alternative')) {
-      enableFields($target, targetIdx);
-    }
-  };
-
-  tabs.each(function () {
-    $(this).delegate('select.nav', 'change', optionSelected);
-    $(this).find('select.nav').each(function () {
-      $(this).val($(this).find('.active').attr('value'));
-      // do not use .attr() as it sometimes unexplicably fails
-      var targetIdx = $(this).find('option:selected').get(0).getAttribute('data-idx') ||
-        $(this).find('option:selected').attr('value');
-      var $target = $(this).parents('.tabbable').eq(0).find('.tab-content [data-idx=' + targetIdx + ']');
-      enableFields($target, targetIdx);
-    });
-
-    $(this).delegate('ul.nav li', 'click', tabClicked);
-    $(this).find('ul.nav li.active').click();
-  });
-};
-
-
-// Twitter bootstrap-friendly HTML boilerplate for standard inputs
-jsonform.fieldTemplate = function(inner) {
-  return '<div class="control-group jsonform-error-<%= keydash %>' +
-    '<%= elt.htmlClass ? " " + elt.htmlClass : "" %>' +
-    '<%= (node.schemaElement && node.schemaElement.required && (node.schemaElement.type !== "boolean") ? " jsonform-required" : "") %>' +
-    '<%= (node.readOnly ? " jsonform-readonly" : "") %>' +
-    '<%= (node.disabled ? " jsonform-disabled" : "") %>' +
-    '">' +
-    '<% if (node.title && !elt.notitle) { %>' +
-      '<label class="control-label" for="<%= node.id %>"><%= node.title %></label>' +
-    '<% } %>' +
-    '<div class="controls">' +
-      '<% if (node.prepend || node.append) { %>' +
-      '<div class="<% if (node.prepend) { %>input-prepend<% } %>' +
-        '<% if (node.append) { %> input-append<% } %>">' +
-        '<% if (node.prepend) { %>' +
-          '<span class="add-on"><%= node.prepend %></span>' +
-        '<% } %>' +
-      '<% } %>' +
-      inner +
-      '<% if (node.append) { %>' +
-        '<span class="add-on"><%= node.append %></span>' +
-      '<% } %>' +
-      '<% if (node.prepend || node.append) { %>' +
-        '</div>' +
-      '<% } %>' +
-      '<% if (node.description) { %>' +
-        '<span class="help-inline"><%= node.description %></span>' +
-      '<% } %>' +
-      '<span class="help-block jsonform-errortext" style="display:none;"></span>' +
-    '</div></div>';
-};
-
-var fileDisplayTemplate = '<div class="_jsonform-preview">' +
-  '<% if (value.type=="image") { %>' +
-  '<img class="jsonform-preview" id="jsonformpreview-<%= id %>" src="<%= value.url %>" />' +
-  '<% } else { %>' +
-  '<a href="<%= value.url %>"><%= value.name %></a> (<%= Math.ceil(value.size/1024) %>kB)' +
-  '<% } %>' +
-  '</div>' +
-  '<a href="#" class="btn _jsonform-delete"><i class="icon-remove" title="Remove"></i></a> ';
-
-var inputFieldTemplate = function (type) {
-  return {
-    'template': '<input type="' + type + '" ' +
-      '<%= (fieldHtmlClass ? "class=\'" + fieldHtmlClass + "\' " : "") %>' +
-      'name="<%= node.name %>" value="<%= escape(value) %>" id="<%= id %>"' +
-      '<%= (node.disabled? " disabled" : "")%>' +
-      '<%= (node.readOnly ? " readonly=\'readonly\'" : "") %>' +
-      '<%= (node.schemaElement && node.schemaElement.maxLength ? " maxlength=\'" + node.schemaElement.maxLength + "\'" : "") %>' +
-      '<%= (node.schemaElement && node.schemaElement.required && (node.schemaElement.type !== "boolean") ? " required=\'required\'" : "") %>' +
-      '<%= (node.placeholder? "placeholder=" + \'"\' + escape(node.placeholder) + \'"\' : "")%>' +
-      ' />',
-    'fieldtemplate': true,
-    'inputfield': true
-  }
-};
-
-jsonform.elementTypes = {
-  'none': {
-    'template': ''
-  },
-  'root': {
-    'template': '<div><%= children %></div>'
-  },
-  'text': inputFieldTemplate('text'),
-  'password': inputFieldTemplate('password'),
-  'date': inputFieldTemplate('date'),
-  'datetime': inputFieldTemplate('datetime'),
-  'datetime-local': inputFieldTemplate('datetime-local'),
-  'email': inputFieldTemplate('email'),
-  'month': inputFieldTemplate('month'),
-  'number': inputFieldTemplate('number'),
-  'search': inputFieldTemplate('search'),
-  'tel': inputFieldTemplate('tel'),
-  'time': inputFieldTemplate('time'),
-  'url': inputFieldTemplate('url'),
-  'week': inputFieldTemplate('week'),
-  'range': {
-    'template': '<input type="range" ' +
-      '<%= (fieldHtmlClass ? "class=\'" + fieldHtmlClass + "\' " : "") %>' +
-      'name="<%= node.name %>" value="<%= escape(value) %>" id="<%= id %>"' +
-      '<%= (node.disabled? " disabled" : "")%>' +
-      ' min=<%= range.min %>' +
-      ' max=<%= range.max %>' +
-      ' step=<%= range.step %>' +
-      '<%= (node.schemaElement && node.schemaElement.required ? " required=\'required\'" : "") %>' +
-      ' />',
-    'fieldtemplate': true,
-    'inputfield': true,
-    'onBeforeRender': function (data, node) {
-      data.range = {
-        min: 1,
-        max: 100,
-        step: 1
-      };
-      if (!node || !node.schemaElement) return;
-      if (node.formElement && node.formElement.step) {
-        data.range.step = node.formElement.step;
-      }
-      if (typeof node.schemaElement.minimum !== 'undefined') {
-        if (node.schemaElement.exclusiveMinimum) {
-          data.range.min = node.schemaElement.minimum + data.range.step;
-        }
-        else {
-          data.range.min = node.schemaElement.minimum;
-        }
-      }
-      if (typeof node.schemaElement.maximum !== 'undefined') {
-        if (node.schemaElement.exclusiveMaximum) {
-          data.range.max = node.schemaElement.maximum + data.range.step;
-        }
-        else {
-          data.range.max = node.schemaElement.maximum;
-        }
-      }
-    }
-  },
-  'color':{
-    'template':'<input type="text" ' +
-      '<%= (fieldHtmlClass ? "class=\'" + fieldHtmlClass + "\' " : "") %>' +
-      'name="<%= node.name %>" value="<%= escape(value) %>" id="<%= id %>"' +
-      '<%= (node.disabled? " disabled" : "")%>' +
-      '<%= (node.schemaElement && node.schemaElement.required ? " required=\'required\'" : "") %>' +
-      ' />',
-    'fieldtemplate': true,
-    'inputfield': true,
-    'onInsert': function(evt, node) {
-      $(node.el).find('#' + escapeSelector(node.id)).spectrum({
-        preferredFormat: "hex",
-        showInput: true
-      });
-    }
-  },
-  'textarea':{
-    'template':'<textarea id="<%= id %>" name="<%= node.name %>" ' +
-      'style="height:<%= elt.height || "150px" %>;width:<%= elt.width || "100%" %>;"' +
-      '<%= (node.disabled? " disabled" : "")%>' +
-      '<%= (node.readOnly ? " readonly=\'readonly\'" : "") %>' +
-      '<%= (node.schemaElement && node.schemaElement.maxLength ? " maxlength=\'" + node.schemaElement.maxLength + "\'" : "") %>' +
-      '<%= (node.schemaElement && node.schemaElement.required ? " required=\'required\'" : "") %>' +
-      '<%= (node.placeholder? "placeholder=" + \'"\' + escape(node.placeholder) + \'"\' : "")%>' +
-      '><%= value %></textarea>',
-    'fieldtemplate': true,
-    'inputfield': true
-  },
-  'wysihtml5':{
-    'template':'<textarea id="<%= id %>" name="<%= node.name %>" style="height:<%= elt.height || "300px" %>;width:<%= elt.width || "100%" %>;"' +
-      '<%= (node.disabled? " disabled" : "")%>' +
-      '<%= (node.readOnly ? " readonly=\'readonly\'" : "") %>' +
-      '<%= (node.schemaElement && node.schemaElement.maxLength ? " maxlength=\'" + node.schemaElement.maxLength + "\'" : "") %>' +
-      '<%= (node.schemaElement && node.schemaElement.required ? " required=\'required\'" : "") %>' +
-      '<%= (node.placeholder? "placeholder=" + \'"\' + escape(node.placeholder) + \'"\' : "")%>' +
-      '><%= value %></textarea>',
-    'fieldtemplate': true,
-    'inputfield': true,
-    'onInsert': function (evt, node) {
-      var setup = function () {
-        //protect from double init
-        if ($(node.el).data("wysihtml5")) return;
-        $(node.el).data("wysihtml5_loaded",true);
-
-        $(node.el).find('#' + escapeSelector(node.id)).wysihtml5({
-          "html": true,
-          "link": true,
-          "font-styles":true,
-          "image": true,
-          "events": {
-            "load": function () {
-              // In chrome, if an element is required and hidden, it leads to
-              // the error 'An invalid form control with name='' is not focusable'
-              // See http://stackoverflow.com/questions/7168645/invalid-form-control-only-in-google-chrome
-              $(this.textareaElement).removeAttr('required');
-            }
-          }
-        });
-      };
-
-      // Is there a setup hook?
-      if (window.jsonform_wysihtml5_setup) {
-        window.jsonform_wysihtml5_setup(setup);
-        return;
-      }
-
-      // Wait until wysihtml5 is loaded
-      var itv = window.setInterval(function() {
-        if (window.wysihtml5) {
-          window.clearInterval(itv);
-          setup();
-        }
-      },1000);
-    }
-  },
-  'ace':{
-    'template':'<div id="<%= id %>" style="position:relative;height:<%= elt.height || "300px" %>;"><div id="<%= id %>__ace" style="width:<%= elt.width || "100%" %>;height:<%= elt.height || "300px" %>;"></div><input type="hidden" name="<%= node.name %>" id="<%= id %>__hidden" value="<%= escape(value) %>"/></div>',
-    'fieldtemplate': true,
-    'inputfield': true,
-    'onInsert': function (evt, node) {
-      var setup = function () {
-        var formElement = node.formElement || {};
-        var ace = window.ace;
-        var editor = ace.edit($(node.el).find('#' + escapeSelector(node.id) + '__ace').get(0));
-        var idSelector = '#' + escapeSelector(node.id) + '__hidden';
-        // Force editor to use "\n" for new lines, not to bump into ACE "\r" conversion issue
-        // (ACE is ok with "\r" on pasting but fails to return "\r" when value is extracted)
-        editor.getSession().setNewLineMode('unix');
-        editor.renderer.setShowPrintMargin(false);
-        editor.setTheme("ace/theme/"+(formElement.aceTheme||"twilight"));
-
-        if (formElement.aceMode) {
-          editor.getSession().setMode("ace/mode/"+formElement.aceMode);
-        }
-        editor.getSession().setTabSize(2);
-
-        // Set the contents of the initial manifest file
-        editor.getSession().setValue(node.value||"");
-
-        //TODO this is clearly sub-optimal
-        // 'Lazily' bind to the onchange 'ace' event to give
-        // priority to user edits
-        var lazyChanged = _.debounce(function () {
-          $(node.el).find(idSelector).val(editor.getSession().getValue());
-          $(node.el).find(idSelector).change();
-        }, 600);
-        editor.getSession().on('change', lazyChanged);
-        
-        editor.on('blur', function() {
-          $(node.el).find(idSelector).change();
-          $(node.el).find(idSelector).trigger("blur");
-        });
-        editor.on('focus', function() {
-          $(node.el).find(idSelector).trigger("focus");
-        });
-      };
-
-      // Is there a setup hook?
-      if (window.jsonform_ace_setup) {
-        window.jsonform_ace_setup(setup);
-        return;
-      }
-
-      // Wait until ACE is loaded
-      var itv = window.setInterval(function() {
-        if (window.ace) {
-          window.clearInterval(itv);
-          setup();
-        }
-      },1000);
-    }
-  },
-  'checkbox':{
-    'template': '<label class="checkbox"><input type="checkbox" id="<%= id %>" ' +
-      'name="<%= node.name %>" value="1" <% if (value) {%>checked<% } %>' +
-      '<%= (node.disabled? " disabled" : "")%>' +
-      '<%= (node.schemaElement && node.schemaElement.required && (node.schemaElement.type !== "boolean") ? " required=\'required\'" : "") %>' +
-      ' /><span><%= node.inlinetitle || "" %></span>' +
-      '</label>',
-    'fieldtemplate': true,
-    'inputfield': true,
-    'getElement': function (el) {
-      return $(el).parent().get(0);
-    }
-  },
-  'file':{
-    'template':'<input class="input-file" id="<%= id %>" name="<%= node.name %>" type="file" ' +
-      '<%= (node.schemaElement && node.schemaElement.required ? " required=\'required\'" : "") %>' +
-      '/>',
-    'fieldtemplate': true,
-    'inputfield': true
-  },
-  'file-hosted-public':{
-    'template':'<span><% if (value && (value.type||value.url)) { %>'+fileDisplayTemplate+'<% } %><input class="input-file" id="_transloadit_<%= id %>" type="file" name="<%= transloaditname %>" /><input data-transloadit-name="_transloadit_<%= transloaditname %>" type="hidden" id="<%= id %>" name="<%= node.name %>" value=\'<%= escape(JSON.stringify(node.value)) %>\' /></span>',
-    'fieldtemplate': true,
-    'inputfield': true,
-    'getElement': function (el) {
-      return $(el).parent().get(0);
-    },
-    'onBeforeRender': function (data, node) {
-
-      if (!node.ownerTree._transloadit_generic_public_index) {
-        node.ownerTree._transloadit_generic_public_index=1;
-      } else {
-        node.ownerTree._transloadit_generic_public_index++;
-      }
-      
-      data.transloaditname = "_transloadit_jsonform_genericupload_public_"+node.ownerTree._transloadit_generic_public_index;
-
-      if (!node.ownerTree._transloadit_generic_elts) node.ownerTree._transloadit_generic_elts = {};
-      node.ownerTree._transloadit_generic_elts[data.transloaditname] = node;
-    },
-    'onChange': function(evt,elt) {
-      // The "transloadit" function should be called only once to enable
-      // the service when the form is submitted. Has it already been done?
-      if (elt.ownerTree._transloadit_bound) {
-        return false;
-      }
-      elt.ownerTree._transloadit_bound = true;
-
-      // Call the "transloadit" function on the form element
-      var formElt = $(elt.ownerTree.domRoot);
-      formElt.transloadit({
-        autoSubmit: false,
-        wait: true,
-        onSuccess: function (assembly) {
-          // Image has been uploaded. Check the "results" property that
-          // contains the list of files that Transloadit produced. There
-          // should be one image per file input in the form at most.
-          // console.log(assembly.results);
-          var results = _.values(assembly.results);
-          results = _.flatten(results);
-          _.each(results, function (result) {
-            // Save the assembly result in the right hidden input field
-            var id = elt.ownerTree._transloadit_generic_elts[result.field].id;
-            var input = formElt.find('#' + escapeSelector(id));
-            var nonEmptyKeys = _.filter(_.keys(result.meta), function (key) {
-              return !!isSet(result.meta[key]);
-            });
-            result.meta = _.pick(result.meta, nonEmptyKeys);
-            input.val(JSON.stringify(result));
-          });
-
-          // Unbind transloadit from the form
-          elt.ownerTree._transloadit_bound = false;
-          formElt.unbind('submit.transloadit');
-
-          // Submit the form on next tick
-          _.delay(function () {
-            console.log('submit form');
-            elt.ownerTree.submit();
-          }, 10);
-        },
-        onError: function (assembly) {
-          // TODO: report the error to the user
-          console.log('assembly error', assembly);
-        }
-      });
-    },
-    'onInsert': function (evt, node) {
-      $(node.el).find('a._jsonform-delete').on('click', function (evt) {
-        $(node.el).find('._jsonform-preview').remove();
-        $(node.el).find('a._jsonform-delete').remove();
-        $(node.el).find('#' + escapeSelector(node.id)).val('');
-        evt.preventDefault();
-        return false;
-      });
-    },
-    'onSubmit':function(evt, elt) {
-      if (elt.ownerTree._transloadit_bound) {
-        return false;
-      }
-      return true;
-    }
-
-  },
-  'file-transloadit': {
-    'template': '<span><% if (value && (value.type||value.url)) { %>'+fileDisplayTemplate+'<% } %><input class="input-file" id="_transloadit_<%= id %>" type="file" name="_transloadit_<%= node.name %>" /><input type="hidden" id="<%= id %>" name="<%= node.name %>" value=\'<%= escape(JSON.stringify(node.value)) %>\' /></span>',
-    'fieldtemplate': true,
-    'inputfield': true,
-    'getElement': function (el) {
-      return $(el).parent().get(0);
-    },
-    'onChange': function (evt, elt) {
-      // The "transloadit" function should be called only once to enable
-      // the service when the form is submitted. Has it already been done?
-      if (elt.ownerTree._transloadit_bound) {
-        return false;
-      }
-      elt.ownerTree._transloadit_bound = true;
-
-      // Call the "transloadit" function on the form element
-      var formElt = $(elt.ownerTree.domRoot);
-      formElt.transloadit({
-        autoSubmit: false,
-        wait: true,
-        onSuccess: function (assembly) {
-          // Image has been uploaded. Check the "results" property that
-          // contains the list of files that Transloadit produced. Note
-          // JSONForm only supports 1-to-1 associations, meaning it
-          // expects the "results" property to contain only one image
-          // per file input in the form.
-          // console.log(assembly.results);
-          var results = _.values(assembly.results);
-          results = _.flatten(results);
-          _.each(results, function (result) {
-            // Save the assembly result in the right hidden input field
-            var input = formElt.find('input[name="' +
-              result.field.replace(/^_transloadit_/, '') +
-              '"]');
-            var nonEmptyKeys = _.filter(_.keys(result.meta), function (key) {
-              return !!isSet(result.meta[key]);
-            });
-            result.meta = _.pick(result.meta, nonEmptyKeys);
-            input.val(JSON.stringify(result));
-          });
-
-          // Unbind transloadit from the form
-          elt.ownerTree._transloadit_bound = false;
-          formElt.unbind('submit.transloadit');
-
-          // Submit the form on next tick
-          _.delay(function () {
-            console.log('submit form');
-            elt.ownerTree.submit();
-          }, 10);
-        },
-        onError: function (assembly) {
-          // TODO: report the error to the user
-          console.log('assembly error', assembly);
-        }
-      });
-    },
-    'onInsert': function (evt, node) {
-      $(node.el).find('a._jsonform-delete').on('click', function (evt) {
-        $(node.el).find('._jsonform-preview').remove();
-        $(node.el).find('a._jsonform-delete').remove();
-        $(node.el).find('#' + escapeSelector(node.id)).val('');
-        evt.preventDefault();
-        return false;
-      });
-    },
-    'onSubmit': function (evt, elt) {
-      if (elt.ownerTree._transloadit_bound) {
-        return false;
-      }
-      return true;
-    }
-  },
-  'select':{
-    'template':'<select name="<%= node.name %>" id="<%= id %>"' +
-      '<%= (fieldHtmlClass ? " class=\'" + fieldHtmlClass + "\'" : "") %>' +
-      '<%= (node.disabled? " disabled" : "")%>' +
-      '<%= (node.schemaElement && node.schemaElement.required ? " required=\'required\'" : "") %>' +
-      '> ' +
-      '<% _.each(node.options, function(key, val) { if(key instanceof Object) { if (value === key.value) { %> <option selected value="<%= key.value %>"><%= key.title %></option> <% } else { %> <option value="<%= key.value %>"><%= key.title %></option> <% }} else { if (value === key) { %> <option selected value="<%= key %>"><%= key %></option> <% } else { %><option value="<%= key %>"><%= key %></option> <% }}}); %> ' +
-      '</select>',
-    'fieldtemplate': true,
-    'inputfield': true
-  },
-  'imageselect': {
-    'template': '<div>' +
-      '<input type="hidden" name="<%= node.name %>" id="<%= node.id %>" value="<%= value %>" />' +
-      '<div class="dropdown">' +
-      '<a class="btn<% if (buttonClass && node.value) { %> <%= buttonClass %><% } %>" data-toggle="dropdown" href="#"<% if (node.value) { %> style="max-width:<%= width %>px;max-height:<%= height %>px"<% } %>>' +
-        '<% if (node.value) { %><img src="<% if (!node.value.match(/^https?:/)) { %><%= prefix %><% } %><%= node.value %><%= suffix %>" alt="" /><% } else { %><%= buttonTitle %><% } %>' +
-      '</a>' +
-      '<div class="dropdown-menu navbar" id="<%= node.id %>_dropdown">' +
-        '<div>' +
-        '<% _.each(node.options, function(key, idx) { if ((idx > 0) && ((idx % columns) === 0)) { %></div><div><% } %><a class="btn<% if (buttonClass) { %> <%= buttonClass %><% } %>" style="max-width:<%= width %>px;max-height:<%= height %>px"><% if (key instanceof Object) { %><img src="<% if (!key.value.match(/^https?:/)) { %><%= prefix %><% } %><%= key.value %><%= suffix %>" alt="<%= key.title %>" /></a><% } else { %><img src="<% if (!key.match(/^https?:/)) { %><%= prefix %><% } %><%= key %><%= suffix %>" alt="" /><% } %></a> <% }); %>' +
-        '</div>' +
-        '<div class="pagination-right"><a class="btn">Reset</a></div>' +
-      '</div>' +
-      '</div>' +
-      '</div>',
-    'fieldtemplate': true,
-    'inputfield': true,
-    'onBeforeRender': function (data, node) {
-      var elt = node.formElement || {};
-      var nbRows = null;
-      var maxColumns = elt.imageSelectorColumns || 5;
-      data.buttonTitle = elt.imageSelectorTitle || 'Select...';
-      data.prefix = elt.imagePrefix || '';
-      data.suffix = elt.imageSuffix || '';
-      data.width = elt.imageWidth || 32;
-      data.height = elt.imageHeight || 32;
-      data.buttonClass = elt.imageButtonClass || false;
-      if (node.options.length > maxColumns) {
-        nbRows = Math.ceil(node.options.length / maxColumns);
-        data.columns = Math.ceil(node.options.length / nbRows);
-      }
-      else {
-        data.columns = maxColumns;
-      }
-    },
-    'getElement': function (el) {
-      return $(el).parent().get(0);
-    },
-    'onInsert': function (evt, node) {
-      $(node.el).on('click', '.dropdown-menu a', function (evt) {
-        evt.preventDefault();
-        evt.stopPropagation();
-        var img = (evt.target.nodeName.toLowerCase() === 'img') ?
-          $(evt.target) :
-          $(evt.target).find('img');
-        var value = img.attr('src');
-        var elt = node.formElement || {};
-        var prefix = elt.imagePrefix || '';
-        var suffix = elt.imageSuffix || '';
-        var width = elt.imageWidth || 32;
-        var height = elt.imageHeight || 32;
-        if (value) {
-          if (value.indexOf(prefix) === 0) {
-            value = value.substring(prefix.length);
-          }
-          value = value.substring(0, value.length - suffix.length);
-          $(node.el).find('input').attr('value', value);
-          $(node.el).find('a[data-toggle="dropdown"]')
-            .addClass(elt.imageButtonClass)
-            .attr('style', 'max-width:' + width + 'px;max-height:' + height + 'px')
-            .html('<img src="' + (!value.match(/^https?:/) ? prefix : '') + value + suffix + '" alt="" />');
-        }
-        else {
-          $(node.el).find('input').attr('value', '');
-          $(node.el).find('a[data-toggle="dropdown"]')
-            .removeClass(elt.imageButtonClass)
-            .removeAttr('style')
-            .html(elt.imageSelectorTitle || 'Select...');
-        }
-      });
-    }
-  },
-  'radios':{
-    'template': '<div id="<%= node.id %>"><% _.each(node.options, function(key, val) { %><label class="radio"><input type="radio" <% if (((key instanceof Object) && (value === key.value)) || (value === key)) { %> checked="checked" <% } %> name="<%= node.name %>" value="<%= (key instanceof Object ? key.value : key) %>"' +
-      '<%= (node.disabled? " disabled" : "")%>' +
-      '<%= (node.schemaElement && node.schemaElement.required ? " required=\'required\'" : "") %>' +
-      '/><span><%= (key instanceof Object ? key.title : key) %></span></label> <% }); %></div>',
-    'fieldtemplate': true,
-    'inputfield': true
-  },
-  'radiobuttons': {
-    'template': '<div id="<%= node.id %>">' +
-      '<% _.each(node.options, function(key, val) { %>' +
-        '<label class="radio btn">' +
-        '<input type="radio" style="position:absolute;left:-9999px;" ' +
-        '<% if (((key instanceof Object) && (value === key.value)) || (value === key)) { %> checked="checked" <% } %> name="<%= node.name %>" value="<%= (key instanceof Object ? key.value : key) %>" />' +
-        '<span><%= (key instanceof Object ? key.title : key) %></span></label> ' +
-        '<% }); %>' +
-      '</div>',
-    'fieldtempate': true,
-    'inputfield': true,
-    'onInsert': function (evt, node) {
-      var activeClass = 'active';
-      var elt = node.formElement || {};
-      if (elt.activeClass) {
-        activeClass += ' ' + elt.activeClass;
-      }
-      $(node.el).find('label').on('click', function () {
-        $(this).parent().find('label').removeClass(activeClass);
-        $(this).addClass(activeClass);
-      });
-    }
-  },
-  'checkboxes':{
-    'template': '<div><%= choiceshtml %></div>',
-    'fieldtemplate': true,
-    'inputfield': true,
-    'onBeforeRender': function (data, node) {
-      // Build up choices from the enumeration list
-      var choices = null;
-      var choiceshtml = null;
-      var template = '<label class="checkbox">' +
-        '<input type="checkbox" <% if (value) { %> checked="checked" <% } %> name="<%= name %>" value="1"' +
-        '<%= (node.disabled? " disabled" : "")%>' +
-        '/><span><%= title %></span></label>';
-      if (!node || !node.schemaElement || !node.schemaElement.items) return;
-      choices = node.schemaElement.items['enum'] ||
-        node.schemaElement.items[0]['enum'];
-      if (!choices) return;
-
-      choiceshtml = '';
-      _.each(choices, function (choice, idx) {
-        choiceshtml += _.template(template, {
-          name: node.key + '[' + idx + ']',
-          value: _.include(node.value, choice),
-          title: node.formElement.titleMap ? node.formElement.titleMap[choice] : choice,
-          node: node
-        }, fieldTemplateSettings);
-      });
-
-      data.choiceshtml = choiceshtml;
-    }
-  },
-  'array': {
-    'template': '<div id="<%= id %>"><ul class="_jsonform-array-ul" style="list-style-type:none;"><%= children %></ul>' +
-      '<span class="_jsonform-array-buttons">' +
-        '<a href="#" class="btn _jsonform-array-addmore"><i class="icon-plus-sign" title="Add new"></i></a> ' +
-        '<a href="#" class="btn _jsonform-array-deletelast"><i class="icon-minus-sign" title="Delete last"></i></a>' +
-      '</span>' +
-      '</div>',
-    'fieldtemplate': true,
-    'array': true,
-    'childTemplate': function (inner) {
-      if ($('').sortable) {
-        // Insert a "draggable" icon
-        // floating to the left of the main element
-        return '<li data-idx="<%= node.childPos %>">' +
-          '<span class="draggable line"><i class="icon-list" title="Move item"></i></span>' +
-          inner +
-          '</li>';
-      }
-      else {
-        return '<li data-idx="<%= node.childPos %>">' +
-          inner +
-          '</li>';
-      }
-    },
-    'onInsert': function (evt, node) {
-      var $nodeid = $(node.el).find('#' + escapeSelector(node.id));
-      var boundaries = node.getArrayBoundaries();
-
-      // Switch two nodes in an array
-      var moveNodeTo = function (fromIdx, toIdx) {
-        // Note "switchValuesWith" extracts values from the DOM since field
-        // values are not synchronized with the tree data structure, so calls
-        // to render are needed at each step to force values down to the DOM
-        // before next move.
-        // TODO: synchronize field values and data structure completely and
-        // call render only once to improve efficiency.
-        if (fromIdx === toIdx) return;
-        var incr = (fromIdx < toIdx) ? 1: -1;
-        var i = 0;
-        var parentEl = $('> ul', $nodeid);
-        for (i = fromIdx; i !== toIdx; i += incr) {
-          node.children[i].switchValuesWith(node.children[i + incr]);
-          node.children[i].render(parentEl.get(0));
-          node.children[i + incr].render(parentEl.get(0));
-        }
-
-        // No simple way to prevent DOM reordering with jQuery UI Sortable,
-        // so we're going to need to move sorted DOM elements back to their
-        // origin position in the DOM ourselves (we switched values but not
-        // DOM elements)
-        var fromEl = $(node.children[fromIdx].el);
-        var toEl = $(node.children[toIdx].el);
-        fromEl.detach();
-        toEl.detach();
-        if (fromIdx < toIdx) {
-          if (fromIdx === 0) parentEl.prepend(fromEl);
-          else $(node.children[fromIdx-1].el).after(fromEl);
-          $(node.children[toIdx-1].el).after(toEl);
-        }
-        else {
-          if (toIdx === 0) parentEl.prepend(toEl);
-          else $(node.children[toIdx-1].el).after(toEl);
-          $(node.children[fromIdx-1].el).after(fromEl);
-        }
-      };
-
-      $('> span > a._jsonform-array-addmore', $nodeid).click(function (evt) {
-        evt.preventDefault();
-        evt.stopPropagation();
-        var idx = node.children.length;
-        if (boundaries.maxItems >= 0) {
-          if (node.children.length > boundaries.maxItems - 2) {
-            $nodeid.find('> span > a._jsonform-array-addmore')
-              .addClass('disabled');
-          }
-          if (node.children.length > boundaries.maxItems - 1) {
-            return false;
-          }
-        }
-        node.insertArrayItem(idx, $('> ul', $nodeid).get(0));
-        if ((boundaries.minItems <= 0) ||
-            ((boundaries.minItems > 0) &&
-              (node.children.length > boundaries.minItems - 1))) {
-          $nodeid.find('> span > a._jsonform-array-deletelast')
-            .removeClass('disabled');
-        }
-      });
-
-      //Simulate Users click to setup the form with its minItems
-      var curItems = $('> ul > li', $nodeid).length;
-      if ((boundaries.minItems > 0) &&
-          (curItems < boundaries.minItems)) {
-        for (var i = 0; i < (boundaries.minItems - 1) && ($nodeid.find('> ul > li').length < boundaries.minItems); i++) {
-          //console.log('Calling click: ',$nodeid);
-          //$('> span > a._jsonform-array-addmore', $nodeid).click();
-          node.insertArrayItem(curItems, $nodeid.find('> ul').get(0));
-        }
-      }
-      if ((boundaries.minItems > 0) &&
-          (node.children.length <= boundaries.minItems)) {
-        $nodeid.find('> span > a._jsonform-array-deletelast')
-          .addClass('disabled');
-      }
-
-      $('> span > a._jsonform-array-deletelast', $nodeid).click(function (evt) {
-        var idx = node.children.length - 1;
-        evt.preventDefault();
-        evt.stopPropagation();
-        if (boundaries.minItems > 0) {
-          if (node.children.length < boundaries.minItems + 2) {
-            $nodeid.find('> span > a._jsonform-array-deletelast')
-              .addClass('disabled');
-          }
-          if (node.children.length <= boundaries.minItems) {
-            return false;
-          }
-        }
-        else if (node.children.length === 1) {
-          $nodeid.find('> span > a._jsonform-array-deletelast')
-            .addClass('disabled');
-        }
-        node.deleteArrayItem(idx);
-        if ((boundaries.maxItems >= 0) && (idx <= boundaries.maxItems - 1)) {
-          $nodeid.find('> span > a._jsonform-array-addmore')
-            .removeClass('disabled');
-        }
-      });
-
-      if ($(node.el).sortable) {
-        $('> ul', $nodeid).sortable();
-        $('> ul', $nodeid).bind('sortstop', function (event, ui) {
-          var idx = $(ui.item).data('idx');
-          var newIdx = $(ui.item).index();
-          moveNodeTo(idx, newIdx);
-        });
-      }
-    }
-  },
-  'tabarray': {
-    'template': '<div id="<%= id %>"><div class="tabbable tabs-left">' +
-      '<ul class="nav nav-tabs">' +
-        '<%= tabs %>' +
-      '</ul>' +
-      '<div class="tab-content">' +
-        '<%= children %>' +
-      '</div>' +
-      '</div>' +
-      '<a href="#" class="btn _jsonform-array-addmore"><i class="icon-plus-sign" title="Add new"></i></a> ' +
-      '<a href="#" class="btn _jsonform-array-deleteitem"><i class="icon-minus-sign" title="Delete item"></i></a></div>',
-    'fieldtemplate': true,
-    'array': true,
-    'childTemplate': function (inner) {
-      return '<div data-idx="<%= node.childPos %>" class="tab-pane">' +
-        inner +
-        '</div>';
-    },
-    'onBeforeRender': function (data, node) {
-      // Generate the initial 'tabs' from the children
-      var tabs = '';
-      _.each(node.children, function (child, idx) {
-        var title = child.legend ||
-          child.title ||
-          ('Item ' + (idx+1));
-        tabs += '<li data-idx="' + idx + '"' +
-          ((idx === 0) ? ' class="active"' : '') +
-          '><a class="draggable tab" data-toggle="tab">' +
-          escapeHTML(title) +
-          '</a></li>';
-      });
-      data.tabs = tabs;
-    },
-    'onInsert': function (evt, node) {
-      var $nodeid = $(node.el).find('#' + escapeSelector(node.id));
-      var boundaries = node.getArrayBoundaries();
-
-      var moveNodeTo = function (fromIdx, toIdx) {
-        // Note "switchValuesWith" extracts values from the DOM since field
-        // values are not synchronized with the tree data structure, so calls
-        // to render are needed at each step to force values down to the DOM
-        // before next move.
-        // TODO: synchronize field values and data structure completely and
-        // call render only once to improve efficiency.
-        if (fromIdx === toIdx) return;
-        var incr = (fromIdx < toIdx) ? 1: -1;
-        var i = 0;
-        var tabEl = $('> .tabbable > .tab-content', $nodeid).get(0);
-        for (i = fromIdx; i !== toIdx; i += incr) {
-          node.children[i].switchValuesWith(node.children[i + incr]);
-          node.children[i].render(tabEl);
-          node.children[i + incr].render(tabEl);
-        }
-      };
-
-
-      // Refreshes the list of tabs
-      var updateTabs = function (selIdx) {
-        var tabs = '';
-        var activateFirstTab = false;
-        if (selIdx === undefined) {
-          selIdx = $('> .tabbable > .nav-tabs .active', $nodeid).data('idx');
-          if (selIdx) {
-            selIdx = parseInt(selIdx, 10);
-          }
-          else {
-            activateFirstTab = true;
-            selIdx = 0;
-          }
-        }
-        if (selIdx >= node.children.length) {
-          selIdx = node.children.length - 1;
-        }
-        _.each(node.children, function (child, idx) {
-          var title = child.legend ||
-            child.title ||
-            ('Item ' + (idx+1));
-          tabs += '<li data-idx="' + idx + '">' +
-            '<a class="draggable tab" data-toggle="tab">' +
-            escapeHTML(title) +
-            '</a></li>';
-        });
-        $('> .tabbable > .nav-tabs', $nodeid).html(tabs);
-        if (activateFirstTab) {
-          $('> .tabbable > .nav-tabs [data-idx="0"]', $nodeid).addClass('active');
-        }
-        $('> .tabbable > .nav-tabs [data-toggle="tab"]', $nodeid).eq(selIdx).click();
-      };
-
-      $('> a._jsonform-array-deleteitem', $nodeid).click(function (evt) {
-        var idx = $('> .tabbable > .nav-tabs .active', $nodeid).data('idx');
-        evt.preventDefault();
-        evt.stopPropagation();
-        if (boundaries.minItems > 0) {
-          if (node.children.length < boundaries.minItems + 1) {
-            $nodeid.find('> a._jsonform-array-deleteitem')
-              .addClass('disabled');
-          }
-          if (node.children.length <= boundaries.minItems) return false;
-        }
-        node.deleteArrayItem(idx);
-        updateTabs();
-        if ((node.children.length < boundaries.minItems + 1) ||
-            (node.children.length === 0)) {
-          $nodeid.find('> a._jsonform-array-deleteitem').addClass('disabled');
-        }
-        if ((boundaries.maxItems >= 0) &&
-            (node.children.length <= boundaries.maxItems)) {
-          $nodeid.find('> a._jsonform-array-addmore').removeClass('disabled');
-        }
-      });
-
-      $('> a._jsonform-array-addmore', $nodeid).click(function (evt) {
-        var idx = node.children.length;
-        if (boundaries.maxItems>=0) {
-          if (node.children.length>boundaries.maxItems-2) {
-            $('> a._jsonform-array-addmore', $nodeid).addClass("disabled");
-          }
-          if (node.children.length > boundaries.maxItems - 1) {
-            return false;
-          }
-        }
-        evt.preventDefault();
-        evt.stopPropagation();
-        node.insertArrayItem(idx,
-          $nodeid.find('> .tabbable > .tab-content').get(0));
-        updateTabs(idx);
-        if ((boundaries.minItems <= 0) ||
-            ((boundaries.minItems > 0) && (idx > boundaries.minItems - 1))) {
-          $nodeid.find('> a._jsonform-array-deleteitem').removeClass('disabled');
-        }
-      });
-
-      $(node.el).on('legendUpdated', function (evt) {
-        updateTabs();
-        evt.preventDefault();
-        evt.stopPropagation();
-      });
-
-      if ($(node.el).sortable) {
-        $('> .tabbable > .nav-tabs', $nodeid).sortable({
-          containment: node.el,
-          tolerance: 'pointer'
-        });
-        $('> .tabbable > .nav-tabs', $nodeid).bind('sortstop', function (event, ui) {
-          var idx = $(ui.item).data('idx');
-          var newIdx = $(ui.item).index();
-          moveNodeTo(idx, newIdx);
-          updateTabs(newIdx);
-        });
-      }
-
-      // Simulate User's click to setup the form with its minItems
-      if (boundaries.minItems >= 0) {
-        for (var i = 0; i < (boundaries.minItems - 1); i++) {
-          $nodeid.find('> a._jsonform-array-addmore').click();
-        }
-        $nodeid.find('> a._jsonform-array-deleteitem').addClass('disabled');
-        updateTabs();
-      }
-
-      if ((boundaries.maxItems >= 0) &&
-          (node.children.length >= boundaries.maxItems)) {
-        $nodeid.find('> a._jsonform-array-addmore').addClass('disabled');
-      }
-      if ((boundaries.minItems >= 0) &&
-          (node.children.length <= boundaries.minItems)) {
-        $nodeid.find('> a._jsonform-array-deleteitem').addClass('disabled');
-      }
-    }
-  },
-  'help':{
-    'template':'<span class="help-block" style="padding-top:5px"><%= elt.helpvalue %></span>',
-    'fieldtemplate': true
-  },
-  'msg': {
-    'template': '<%= elt.msg %>'
-  },
-  'fieldset':{
-    'template': '<fieldset class="control-group jsonform-error-<%= keydash %> <% if (elt.expandable) { %>expandable<% } %> <%= elt.htmlClass?elt.htmlClass:"" %>" ' +
-      '<% if (id) { %> id="<%= id %>"<% } %>' +
-      '>' +
-      '<% if (node.title || node.legend) { %><legend><%= node.title || node.legend %></legend><% } %>' +
-      '<% if (elt.expandable) { %><div class="control-group"><% } %>' +
-      '<%= children %>' +
-      '<% if (elt.expandable) { %></div><% } %>' +
-      '</fieldset>'
-  },
-  'advancedfieldset': {
-    'template': '<fieldset' +
-      '<% if (id) { %> id="<%= id %>"<% } %>' +
-      ' class="expandable <%= elt.htmlClass?elt.htmlClass:"" %>">' +
-      '<legend>Advanced options</legend>' +
-      '<div class="control-group">' +
-      '<%= children %>' +
-      '</div>' +
-      '</fieldset>'
-  },
-  'authfieldset': {
-    'template': '<fieldset' +
-      '<% if (id) { %> id="<%= id %>"<% } %>' +
-      ' class="expandable <%= elt.htmlClass?elt.htmlClass:"" %>">' +
-      '<legend>Authentication settings</legend>' +
-      '<div class="control-group">' +
-      '<%= children %>' +
-      '</div>' +
-      '</fieldset>'
-  },
-  'submit':{
-    'template':'<input type="submit" <% if (id) { %> id="<%= id %>" <% } %> class="btn btn-primary <%= elt.htmlClass?elt.htmlClass:"" %>" value="<%= value || node.title %>"<%= (node.disabled? " disabled" : "")%>/>'
-  },
-  'button':{
-    'template':' <button <% if (id) { %> id="<%= id %>" <% } %> class="btn <%= elt.htmlClass?elt.htmlClass:"" %>"><%= node.title %></button> '
-  },
-  'actions':{
-    'template':'<div class="form-actions <%= elt.htmlClass?elt.htmlClass:"" %>"><%= children %></div>'
-  },
-  'hidden':{
-    'template':'<input type="hidden" id="<%= id %>" name="<%= node.name %>" value="<%= escape(value) %>" />',
-    'inputfield': true
-  },
-  'selectfieldset': {
-    'template': '<fieldset class="tab-container <%= elt.htmlClass?elt.htmlClass:"" %>">' +
-      '<% if (node.legend) { %><legend><%= node.legend %></legend><% } %>' +
-      '<% if (node.formElement.key) { %><input type="hidden" id="<%= node.id %>" name="<%= node.name %>" value="<%= escape(value) %>" /><% } else { %>' +
-        '<a id="<%= node.id %>"></a><% } %>' +
-      '<div class="tabbable">' +
-        '<div class="control-group<%= node.formElement.hideMenu ? " hide" : "" %>">' +
-          '<% if (node.title && !elt.notitle) { %><label class="control-label" for="<%= node.id %>"><%= node.title %></label><% } %>' +
-          '<div class="controls"><%= tabs %></div>' +
-        '</div>' +
-        '<div class="tab-content">' +
-          '<%= children %>' +
-        '</div>' +
-      '</div>' +
-      '</fieldset>',
-    'inputfield': true,
-    'getElement': function (el) {
-      return $(el).parent().get(0);
-    },
-    'childTemplate': function (inner) {
-      return '<div data-idx="<%= node.childPos %>" class="tab-pane' +
-        '<% if (node.active) { %> active<% } %>">' +
-        inner +
-        '</div>';
-    },
-    'onBeforeRender': function (data, node) {
-      // Before rendering, this function ensures that:
-      // 1. direct children have IDs (used to show/hide the tabs contents)
-      // 2. the tab to active is flagged accordingly. The active tab is
-      // the first one, except if form values are available, in which case
-      // it's the first tab for which there is some value available (or back
-      // to the first one if there are none)
-      // 3. the HTML of the select field used to select tabs is exposed in the
-      // HTML template data as "tabs"
-
-      var children = null;
-      var choices = [];
-      if (node.schemaElement) {
-        choices = node.schemaElement['enum'] || [];
-      }
-      if (node.options) {
-        children = _.map(node.options, function (option, idx) {
-          var child = node.children[idx];
-          if (option instanceof Object) {
-            option = _.extend({ node: child }, option);
-            option.title = option.title ||
-              child.legend ||
-              child.title ||
-              ('Option ' + (child.childPos+1));
-            option.value = isSet(option.value) ? option.value :
-              isSet(choices[idx]) ? choices[idx] : idx;
-            return option;
-          }
-          else {
-            return {
-              title: option,
-              value: isSet(choices[child.childPos]) ?
-                choices[child.childPos] :
-                child.childPos,
-              node: child
-            };
-          }
-        });
-      }
-      else {
-        children = _.map(node.children, function (child, idx) {
-          return {
-            title: child.legend || child.title || ('Option ' + (child.childPos+1)),
-            value: choices[child.childPos] || child.childPos,
-            node: child
-          };
-        });
-      }
-
-      var activeChild = null;
-      if (data.value) {
-        activeChild = _.find(children, function (child) {
-          return (child.value === node.value);
-        });
-      }
-      if (!activeChild) {
-        activeChild = _.find(children, function (child) {
-          return child.node.hasNonDefaultValue();
-        });
-      }
-      if (!activeChild) {
-        activeChild = children[0];
-      }
-      activeChild.node.active = true;
-      data.value = activeChild.value;
-
-      var elt = node.formElement;
-      var tabs = '<select class="nav"' +
-        (node.disabled ? ' disabled' : '') +
-        '>';
-      _.each(children, function (child, idx) {
-        tabs += '<option data-idx="' + idx + '" value="' + child.value + '"' +
-          (child.node.active ? ' class="active"' : '') +
-          '>' +
-          escapeHTML(child.title) +
-          '</option>';
-      });
-      tabs += '</select>';
-
-      data.tabs = tabs;
-      return data;
-    },
-    'onInsert': function (evt, node) {
-      $(node.el).find('select.nav').first().on('change', function (evt) {
-        var $option = $(this).find('option:selected');
-        $(node.el).find('input[type="hidden"]').first().val($option.attr('value'));
-      });
-    }
-  },
-  'optionfieldset': {
-    'template': '<div' +
-      '<% if (node.id) { %> id="<%= node.id %>"<% } %>' +
-      '>' +
-      '<%= children %>' +
-      '</div>'
-  },
-  'section': {
-    'template': '<div' +
-      '<% if (node.id) { %> id="<%= node.id %>"<% } %>' +
-      '><%= children %></div>'
-  },
-
-  /**
-   * A "questions" field renders a series of question fields and binds the
-   * result to the value of a schema key.
-   */
-  'questions': {
-    'template': '<div>' +
-      '<input type="hidden" id="<%= node.id %>" name="<%= node.name %>" value="<%= escape(value) %>" />' +
-      '<%= children %>' +
-      '</div>',
-    'fieldtempate': true,
-    'inputfield': true,
-    'getElement': function (el) {
-      return $(el).parent().get(0);
-    },
-    'onInsert': function (evt, node) {
-      if (!node.children || (node.children.length === 0)) return;
-      _.each(node.children, function (child) {
-        $(child.el).hide();
-      });
-      $(node.children[0].el).show();
-    }
-  },
-
-  /**
-   * A "question" field lets user choose a response among possible choices.
-   * The field is not associated with any schema key. A question should be
-   * part of a "questions" field that binds a series of questions to a
-   * schema key.
-   */
-  'question': {
-    'template': '<div id="<%= node.id %>"><% _.each(node.options, function(key, val) { %><label class="radio<%= (node.formElement.optionsType === "radiobuttons") ? " btn" : "" %><%= ((key instanceof Object && key.htmlClass) ? " " + key.htmlClass : "") %>"><input type="radio" <% if (node.formElement.optionsType === "radiobuttons") { %> style="position:absolute;left:-9999px;" <% } %>name="<%= node.id %>" value="<%= val %>"<%= (node.disabled? " disabled" : "")%>/><span><%= (key instanceof Object ? key.title : key) %></span></label> <% }); %></div>',
-    'fieldtemplate': true,
-    'onInsert': function (evt, node) {
-      var activeClass = 'active';
-      var elt = node.formElement || {};
-      if (elt.activeClass) {
-        activeClass += ' ' + elt.activeClass;
-      }
-
-      // Bind to change events on radio buttons
-      $(node.el).find('input[type="radio"]').on('change', function (evt) {
-        var questionNode = null;
-        var option = node.options[$(this).val()];
-        if (!node.parentNode || !node.parentNode.el) return;
-
-        $(this).parent().parent().find('label').removeClass(activeClass);
-        $(this).parent().addClass(activeClass);
-        $(node.el).nextAll().hide();
-        $(node.el).nextAll().find('input[type="radio"]').prop('checked', false);
-
-        // Execute possible actions (set key value, form submission, open link,
-        // move on to next question)
-        if (option.value) {
-          // Set the key of the 'Questions' parent
-          $(node.parentNode.el).find('input[type="hidden"]').val(option.value);
-        }
-        if (option.next) {
-          questionNode = _.find(node.parentNode.children, function (child) {
-            return (child.formElement && (child.formElement.qid === option.next));
-          });
-          $(questionNode.el).show();
-          $(questionNode.el).nextAll().hide();
-          $(questionNode.el).nextAll().find('input[type="radio"]').prop('checked', false);
-        }
-        if (option.href) {
-          if (option.target) {
-            window.open(option.href, option.target);
-          }
-          else {
-            window.location = option.href;
-          }
-        }
-        if (option.submit) {
-          setTimeout(function () {
-            node.ownerTree.submit();
-          }, 0);
-        }
-      });
-    }
-  }
-};
-
-
-//Allow to access subproperties by splitting "."
-/**
- * Retrieves the key identified by a path selector in the structured object.
- *
- * Levels in the path are separated by a dot. Array items are marked
- * with [x]. For instance:
- *  foo.bar[3].baz
- *
- * @function
- * @param {Object} obj Structured object to parse
- * @param {String} key Path to the key to retrieve
- * @param {boolean} ignoreArrays True to use first element in an array when
- *   stucked on a property. This parameter is basically only useful when
- *   parsing a JSON schema for which the "items" property may either be an
- *   object or an array with one object (only one because JSON form does not
- *   support mix of items for arrays).
- * @return {Object} The key's value.
- */
-jsonform.util.getObjKey = function (obj, key, ignoreArrays) {
-  var innerobj = obj;
-  var keyparts = key.split(".");
-  var subkey = null;
-  var arrayMatch = null;
-  var prop = null;
-
-  for (var i = 0; i < keyparts.length; i++) {
-    if ((innerobj === null) || (typeof innerobj !== "object")) return null;
-    subkey = keyparts[i];
-    prop = subkey.replace(reArray, '');
-    reArray.lastIndex = 0;
-    arrayMatch = reArray.exec(subkey);
-    if (arrayMatch) {
-      while (true) {
-        if (!_.isArray(innerobj[prop])) return null;
-        innerobj = innerobj[prop][parseInt(arrayMatch[1], 10)];
-        arrayMatch = reArray.exec(subkey);
-        if (!arrayMatch) break;
-      }
-    }
-    else if (ignoreArrays &&
-        !innerobj[prop] &&
-        _.isArray(innerobj) &&
-        innerobj[0]) {
-      innerobj = innerobj[0][prop];
-    }
-    else {
-      innerobj = innerobj[prop];
-    }
-  }
-
-  if (ignoreArrays && _.isArray(innerobj) && innerobj[0]) {
-    return innerobj[0];
-  }
-  else {
-    return innerobj;
-  }
-};
-
-
-/**
- * Sets the key identified by a path selector to the given value.
- *
- * Levels in the path are separated by a dot. Array items are marked
- * with [x]. For instance:
- *  foo.bar[3].baz
- *
- * The hierarchy is automatically created if it does not exist yet.
- *
- * @function
- * @param {Object} obj The object to build
- * @param {String} key The path to the key to set where each level
- *  is separated by a dot, and array items are flagged with [x].
- * @param {Object} value The value to set, may be of any type.
- */
-jsonform.util.setObjKey = function(obj,key,value) {
-  var innerobj = obj;
-  var keyparts = key.split(".");
-  var subkey = null;
-  var arrayMatch = null;
-  var prop = null;
-
-  for (var i = 0; i < keyparts.length-1; i++) {
-    subkey = keyparts[i];
-    prop = subkey.replace(reArray, '');
-    reArray.lastIndex = 0;
-    arrayMatch = reArray.exec(subkey);
-    if (arrayMatch) {
-      // Subkey is part of an array
-      while (true) {
-        if (!_.isArray(innerobj[prop])) {
-          innerobj[prop] = [];
-        }
-        innerobj = innerobj[prop];
-        prop = parseInt(arrayMatch[1], 10);
-        arrayMatch = reArray.exec(subkey);
-        if (!arrayMatch) break;
-      }
-      if ((typeof innerobj[prop] !== 'object') ||
-        (innerobj[prop] === null)) {
-        innerobj[prop] = {};
-      }
-      innerobj = innerobj[prop];
-    }
-    else {
-      // "Normal" subkey
-      if ((typeof innerobj[prop] !== 'object') ||
-        (innerobj[prop] === null)) {
-        innerobj[prop] = {};
-      }
-      innerobj = innerobj[prop];
-    }
-  }
-
-  // Set the final value
-  subkey = keyparts[keyparts.length - 1];
-  prop = subkey.replace(reArray, '');
-  reArray.lastIndex = 0;
-  arrayMatch = reArray.exec(subkey);
-  if (arrayMatch) {
-    while (true) {
-      if (!_.isArray(innerobj[prop])) {
-        innerobj[prop] = [];
-      }
-      innerobj = innerobj[prop];
-      prop = parseInt(arrayMatch[1], 10);
-      arrayMatch = reArray.exec(subkey);
-      if (!arrayMatch) break;
-    }
-    innerobj[prop] = value;
-  }
-  else {
-    innerobj[prop] = value;
-  }
-};
-
-
-/**
- * Retrieves the key definition from the given schema.
- *
- * The key is identified by the path that leads to the key in the
- * structured object that the schema would generate. Each level is
- * separated by a '.'. Array levels are marked with []. For instance:
- *  foo.bar[].baz
- * ... to retrieve the definition of the key at the following location
- * in the JSON schema (using a dotted path notation):
- *  foo.properties.bar.items.properties.baz
- *
- * @function
- * @param {Object} schema The JSON schema to retrieve the key from
- * @param {String} key The path to the key, each level being separated
- *  by a dot and array items being flagged with [].
- * @return {Object} The key definition in the schema, null if not found.
- */
-var getSchemaKey = function(schema,key) {
-  var schemaKey = key
-    .replace(/\./g, '.properties.')
-    .replace(/\[[0-9]*\]/g, '.items');
-  var schemaDef = jsonform.util.getObjKey(schema, schemaKey, true);
-  if (schemaDef && schemaDef.$ref) {
-    throw new Error('JSONForm does not yet support schemas that use the ' +
-      '$ref keyword. See: https://github.com/joshfire/jsonform/issues/54');
-  }
-  return schemaDef;
-};
-
-
-/**
- * Truncates the key path to the requested depth.
- *
- * For instance, if the key path is:
- *  foo.bar[].baz.toto[].truc[].bidule
- * and the requested depth is 1, the returned key will be:
- *  foo.bar[].baz.toto
- *
- * Note the function includes the path up to the next depth level.
- *
- * @function
- * @param {String} key The path to the key in the schema, each level being
- *  separated by a dot and array items being flagged with [].
- * @param {Number} depth The array depth
- * @return {String} The path to the key truncated to the given depth.
- */
-var truncateToArrayDepth = function (key, arrayDepth) {
-  var depth = 0;
-  var pos = 0;
-  if (!key) return null;
-
-  if (arrayDepth > 0) {
-    while (depth < arrayDepth) {
-      pos = key.indexOf('[]', pos);
-      if (pos === -1) {
-        // Key path is not "deep" enough, simply return the full key
-        return key;
-      }
-      pos = pos + 2;
-      depth += 1;
-    }
-  }
-
-  // Move one step further to the right without including the final []
-  pos = key.indexOf('[]', pos);
-  if (pos === -1) return key;
-  else return key.substring(0, pos);
-};
-
-/**
- * Applies the array path to the key path.
- *
- * For instance, if the key path is:
- *  foo.bar[].baz.toto[].truc[].bidule
- * and the arrayPath [4, 2], the returned key will be:
- *  foo.bar[4].baz.toto[2].truc[].bidule
- *
- * @function
- * @param {String} key The path to the key in the schema, each level being
- *  separated by a dot and array items being flagged with [].
- * @param {Array(Number)} arrayPath The array path to apply, e.g. [4, 2]
- * @return {String} The path to the key that matches the array path.
- */
-var applyArrayPath = function (key, arrayPath) {
-  var depth = 0;
-  if (!key) return null;
-  if (!arrayPath || (arrayPath.length === 0)) return key;
-  var newKey = key.replace(reArray, function (str, p1) {
-    // Note this function gets called as many times as there are [x] in the ID,
-    // from left to right in the string. The goal is to replace the [x] with
-    // the appropriate index in the new array path, if defined.
-    var newIndex = str;
-    if (isSet(arrayPath[depth])) {
-      newIndex = '[' + arrayPath[depth] + ']';
-    }
-    depth += 1;
-    return newIndex;
-  });
-  return newKey;
-};
-
-
-/**
- * Returns the initial value that a field identified by its key
- * should take.
- *
- * The "initial" value is defined as:
- * 1. the previously submitted value if already submitted
- * 2. the default value defined in the layout of the form
- * 3. the default value defined in the schema
- *
- * The "value" returned is intended for rendering purpose,
- * meaning that, for fields that define a titleMap property,
- * the function returns the label, and not the intrinsic value.
- *
- * The function handles values that contains template strings,
- * e.g. {{values.foo[].bar}} or {{idx}}.
- *
- * When the form is a string, the function truncates the resulting string
- * to meet a potential "maxLength" constraint defined in the schema, using
- * "..." to mark the truncation. Note it does not validate the resulting
- * string against other constraints (e.g. minLength, pattern) as it would
- * be hard to come up with an automated course of action to "fix" the value.
- *
- * @function
- * @param {Object} formObject The JSON Form object
- * @param {String} key The generic key path (e.g. foo[].bar.baz[])
- * @param {Array(Number)} arrayPath The array path that identifies
- *  the unique value in the submitted form (e.g. [1, 3])
- * @param {Object} tpldata Template data object
- * @param {Boolean} usePreviousValues true to use previously submitted values
- *  if defined.
- */
-var getInitialValue = function (formObject, key, arrayPath, tpldata, usePreviousValues) {
-  var value = null;
-
-  // Complete template data for template function
-  tpldata = tpldata || {};
-  tpldata.idx = tpldata.idx ||
-    (arrayPath ? arrayPath[arrayPath.length-1] : 1);
-  tpldata.value = isSet(tpldata.value) ? tpldata.value : '';
-  tpldata.getValue = tpldata.getValue || function (key) {
-    return getInitialValue(formObject, key, arrayPath, tpldata, usePreviousValues);
-  };
-
-  // Helper function that returns the form element that explicitly
-  // references the given key in the schema.
-  var getFormElement = function (elements, key) {
-    var formElement = null;
-    if (!elements || !elements.length) return null;
-    _.each(elements, function (elt) {
-      if (formElement) return;
-      if (elt === key) {
-        formElement = { key: elt };
-        return;
-      }
-      if (_.isString(elt)) return;
-      if (elt.key === key) {
-        formElement = elt;
-      }
-      else if (elt.items) {
-        formElement = getFormElement(elt.items, key);
-      }
-    });
-    return formElement;
-  };
-  var formElement = getFormElement(formObject.form || [], key);
-  var schemaElement = getSchemaKey(formObject.schema.properties, key);
-
-  if (usePreviousValues && formObject.value) {
-    // If values were previously submitted, use them directly if defined
-    value = jsonform.util.getObjKey(formObject.value, applyArrayPath(key, arrayPath));
-  }
-  if (!isSet(value)) {
-    if (formElement && (typeof formElement['value'] !== 'undefined')) {
-      // Extract the definition of the form field associated with
-      // the key as it may override the schema's default value
-      // (note a "null" value overrides a schema default value as well)
-      value = formElement['value'];
-    }
-    else if (schemaElement) {
-      // Simply extract the default value from the schema
-      if (isSet(schemaElement['default'])) {
-        value = schemaElement['default'];
-      }
-    }
-    if (value && value.indexOf('{{values.') !== -1) {
-      // This label wants to use the value of another input field.
-      // Convert that construct into {{getValue(key)}} for
-      // Underscore to call the appropriate function of formData
-      // when template gets called (note calling a function is not
-      // exactly Mustache-friendly but is supported by Underscore).
-      value = value.replace(
-        /\{\{values\.([^\}]+)\}\}/g,
-        '{{getValue("$1")}}');
-    }
-    if (value) {
-      value = _.template(value, tpldata, valueTemplateSettings);
-    }
-  }
-
-  // Apply titleMap if needed
-  if (isSet(value) && formElement &&
-      formElement.titleMap &&
-      formElement.titleMap[value]) {
-    value = _.template(formElement.titleMap[value],
-      tpldata, valueTemplateSettings);
-  }
-
-  // Check maximum length of a string
-  if (value && _.isString(value) &&
-    schemaElement && schemaElement.maxLength) {
-    if (value.length > schemaElement.maxLength) {
-      // Truncate value to maximum length, adding continuation dots
-      value = value.substr(0, schemaElement.maxLength - 1) + '…';
-    }
-  }
-
-  if (!isSet(value)) {
-    return null;
-  }
-  else {
-    return value;
-  }
-};
-
-
-/**
- * Represents a node in the form.
- *
- * Nodes that have an ID are linked to the corresponding DOM element
- * when rendered
- *
- * Note the form element and the schema elements that gave birth to the
- * node may be shared among multiple nodes (in the case of arrays).
- *
- * @class
- */
-var formNode = function () {
-  /**
-   * The node's ID (may not be set)
-   */
-  this.id = null;
-
-  /**
-   * The node's key path (may not be set)
-   */
-  this.key = null;
-
-  /**
-   * DOM element associated witht the form element.
-   *
-   * The DOM element is set when the form element is rendered.
-   */
-  this.el = null;
-
-  /**
-   * Link to the form element that describes the node's layout
-   * (note the form element is shared among nodes in arrays)
-   */
-  this.formElement = null;
-
-  /**
-   * Link to the schema element that describes the node's value constraints
-   * (note the schema element is shared among nodes in arrays)
-   */
-  this.schemaElement = null;
-
-  /**
-   * Pointer to the "view" associated with the node, typically the right
-   * object in jsonform.elementTypes
-   */
-  this.view = null;
-
-  /**
-   * Node's subtree (if one is defined)
-   */
-  this.children = [];
-
-  /**
-   * A pointer to the form tree the node is attached to
-   */
-  this.ownerTree = null;
-
-  /**
-   * A pointer to the parent node of the node in the tree
-   */
-  this.parentNode = null;
-
-  /**
-   * Child template for array-like nodes.
-   *
-   * The child template gets cloned to create new array items.
-   */
-  this.childTemplate = null;
-
-
-  /**
-   * Direct children of array-like containers may use the value of a
-   * specific input field in their subtree as legend. The link to the
-   * legend child is kept here and initialized in computeInitialValues
-   * when a child sets "valueInLegend"
-   */
-  this.legendChild = null;
-
-
-  /**
-   * The path of indexes that lead to the current node when the
-   * form element is not at the root array level.
-   *
-   * Note a form element may well be nested element and still be
-   * at the root array level. That's typically the case for "fieldset"
-   * elements. An array level only gets created when a form element
-   * is of type "array" (or a derivated type such as "tabarray").
-   *
-   * The array path of a form element linked to the foo[2].bar.baz[3].toto
-   * element in the submitted values is [2, 3] for instance.
-   *
-   * The array path is typically used to compute the right ID for input
-   * fields. It is also used to update positions when an array item is
-   * created, moved around or suppressed.
-   *
-   * @type {Array(Number)}
-   */
-  this.arrayPath = [];
-
-  /**
-   * Position of the node in the list of children of its parents
-   */
-  this.childPos = 0;
-};
-
-
-/**
- * Clones a node
- *
- * @function
- * @param {formNode} New parent node to attach the node to
- * @return {formNode} Cloned node
- */
-formNode.prototype.clone = function (parentNode) {
-  var node = new formNode();
-  node.arrayPath = _.clone(this.arrayPath);
-  node.ownerTree = this.ownerTree;
-  node.parentNode = parentNode || this.parentNode;
-  node.formElement = this.formElement;
-  node.schemaElement = this.schemaElement;
-  node.view = this.view;
-  node.children = _.map(this.children, function (child) {
-    return child.clone(node);
-  });
-  if (this.childTemplate) {
-    node.childTemplate = this.childTemplate.clone(node);
-  }
-  return node;
-};
-
-
-/**
- * Returns true if the subtree that starts at the current node
- * has some non empty value attached to it
- */
-formNode.prototype.hasNonDefaultValue = function () {
-
-  // hidden elements don't count because they could make the wrong selectfieldset element active
-  if (this.formElement && this.formElement.type=="hidden") {
-    return false;
-  }
-  
-  if (this.value && !this.defaultValue) {
-    return true;
-  }
-  var child = _.find(this.children, function (child) {
-    return child.hasNonDefaultValue();
-  });
-  return !!child;
-};
-
-
-/**
- * Attaches a child node to the current node.
- *
- * The child node is appended to the end of the list.
- *
- * @function
- * @param {formNode} node The child node to append
- * @return {formNode} The inserted node (same as the one given as parameter)
- */
-formNode.prototype.appendChild = function (node) {
-  node.parentNode = this;
-  node.childPos = this.children.length;
-  this.children.push(node);
-  return node;
-};
-
-
-/**
- * Removes the last child of the node.
- *
- * @function
- */
-formNode.prototype.removeChild = function () {
-  var child = this.children[this.children.length-1];
-  if (!child) return;
-
-  // Remove the child from the DOM
-  $(child.el).remove();
-
-  // Remove the child from the array
-  return this.children.pop();
-};
-
-
-/**
- * Moves the user entered values set in the current node's subtree to the
- * given node's subtree.
- *
- * The target node must follow the same structure as the current node
- * (typically, they should have been generated from the same node template)
- *
- * The current node MUST be rendered in the DOM.
- *
- * TODO: when current node is not in the DOM, extract values from formNode.value
- * properties, so that the function be available even when current node is not
- * in the DOM.
- *
- * Moving values around allows to insert/remove array items at arbitrary
- * positions.
- *
- * @function
- * @param {formNode} node Target node.
- */
-formNode.prototype.moveValuesTo = function (node) {
-  var values = this.getFormValues(node.arrayPath);
-  node.resetValues();
-  node.computeInitialValues(values, true);
-};
-
-
-/**
- * Switches nodes user entered values.
- *
- * The target node must follow the same structure as the current node
- * (typically, they should have been generated from the same node template)
- *
- * Both nodes MUST be rendered in the DOM.
- *
- * TODO: update getFormValues to work even if node is not rendered, using
- * formNode's "value" property.
- *
- * @function
- * @param {formNode} node Target node
- */
-formNode.prototype.switchValuesWith = function (node) {
-  var values = this.getFormValues(node.arrayPath);
-  var nodeValues = node.getFormValues(this.arrayPath);
-  node.resetValues();
-  node.computeInitialValues(values, true);
-  this.resetValues();
-  this.computeInitialValues(nodeValues, true);
-};
-
-
-/**
- * Resets all DOM values in the node's subtree.
- *
- * This operation also drops all array item nodes.
- * Note values are not reset to their default values, they are rather removed!
- *
- * @function
- */
-formNode.prototype.resetValues = function () {
-  var params = null;
-  var idx = 0;
-
-  // Reset value
-  this.value = null;
-
-  // Propagate the array path from the parent node
-  // (adding the position of the child for nodes that are direct
-  // children of array-like nodes)
-  if (this.parentNode) {
-    this.arrayPath = _.clone(this.parentNode.arrayPath);
-    if (this.parentNode.view && this.parentNode.view.array) {
-      this.arrayPath.push(this.childPos);
-    }
-  }
-  else {
-    this.arrayPath = [];
-  }
-
-  if (this.view && this.view.inputfield) {
-    // Simple input field, extract the value from the origin,
-    // set the target value and reset the origin value
-    params = $(':input', this.el).serializeArray();
-    _.each(params, function (param) {
-      // TODO: check this, there may exist corner cases with this approach
-      // (with multiple checkboxes for instance)
-      $('[name="' + escapeSelector(param.name) + '"]', $(this.el)).val('');
-    }, this);
-  }
-  else if (this.view && this.view.array) {
-    // The current node is an array, drop all children
-    while (this.children.length > 0) {
-      this.removeChild();
-    }
-  }
-
-  // Recurse down the tree
-  _.each(this.children, function (child) {
-    child.resetValues();
-  });
-};
-
-
-/**
- * Sets the child template node for the current node.
- *
- * The child template node is used to create additional children
- * in an array-like form element. The template is never rendered.
- *
- * @function
- * @param {formNode} node The child template node to set
- */
-formNode.prototype.setChildTemplate = function (node) {
-  this.childTemplate = node;
-  node.parentNode = this;
-};
-
-
-/**
- * Recursively sets values to all nodes of the current subtree
- * based on previously submitted values, or based on default
- * values when the submitted values are not enough
- *
- * The function should be called once in the lifetime of a node
- * in the tree. It expects its parent's arrayPath to be up to date.
- *
- * Three cases may arise:
- * 1. if the form element is a simple input field, the value is
- * extracted from previously submitted values of from default values
- * defined in the schema.
- * 2. if the form element is an array-like node, the child template
- * is used to create as many children as possible (and at least one).
- * 3. the function simply recurses down the node's subtree otherwise
- * (this happens when the form element is a fieldset-like element).
- *
- * @function
- * @param {Object} values Previously submitted values for the form
- * @param {Boolean} ignoreDefaultValues Ignore default values defined in the
- *  schema when set.
- */
-formNode.prototype.computeInitialValues = function (values, ignoreDefaultValues) {
-  var self = this;
-  var node = null;
-  var nbChildren = 1;
-  var i = 0;
-  var formData = this.ownerTree.formDesc.tpldata || {};
-
-  // Propagate the array path from the parent node
-  // (adding the position of the child for nodes that are direct
-  // children of array-like nodes)
-  if (this.parentNode) {
-    this.arrayPath = _.clone(this.parentNode.arrayPath);
-    if (this.parentNode.view && this.parentNode.view.array) {
-      this.arrayPath.push(this.childPos);
-    }
-  }
-  else {
-    this.arrayPath = [];
-  }
-
-  // Prepare special data param "idx" for templated values
-  // (is is the index of the child in its wrapping array, starting
-  // at 1 since that's more human-friendly than a zero-based index)
-  formData.idx = (this.arrayPath.length > 0) ?
-    this.arrayPath[this.arrayPath.length-1] + 1 :
-    this.childPos + 1;
-
-  // Prepare special data param "value" for templated values
-  formData.value = '';
-
-  // Prepare special function to compute the value of another field
-  formData.getValue = function (key) {
-    return getInitialValue(self.ownerTree.formDesc,
-      key, self.arrayPath,
-      formData, !!values);
-  };
-
-  if (this.formElement) {
-    // Compute the ID of the field (if needed)
-    if (this.formElement.id) {
-      this.id = applyArrayPath(this.formElement.id, this.arrayPath);
-    }
-    else if (this.view && this.view.array) {
-      this.id = escapeSelector(this.ownerTree.formDesc.prefix) +
-        '-elt-counter-' + _.uniqueId();
-    }
-    else if (this.parentNode && this.parentNode.view &&
-      this.parentNode.view.array) {
-      // Array items need an array to associate the right DOM element
-      // to the form node when the parent is rendered.
-      this.id = escapeSelector(this.ownerTree.formDesc.prefix) +
-        '-elt-counter-' + _.uniqueId();
-    }
-    else if ((this.formElement.type === 'button') ||
-      (this.formElement.type === 'selectfieldset') ||
-      (this.formElement.type === 'question') ||
-      (this.formElement.type === 'buttonquestion')) {
-      // Buttons do need an id for "onClick" purpose
-      this.id = escapeSelector(this.ownerTree.formDesc.prefix) +
-        '-elt-counter-' + _.uniqueId();
-    }
-
-    // Compute the actual key (the form element's key is index-free,
-    // i.e. it looks like foo[].bar.baz[].truc, so we need to apply
-    // the array path of the node to get foo[4].bar.baz[2].truc)
-    if (this.formElement.key) {
-      this.key = applyArrayPath(this.formElement.key, this.arrayPath);
-      this.keydash = this.key.replace(/\./g, '---');
-    }
-
-    // Same idea for the field's name
-    this.name = applyArrayPath(this.formElement.name, this.arrayPath);
-
-    // Consider that label values are template values and apply the
-    // form's data appropriately (note we also apply the array path
-    // although that probably doesn't make much sense for labels...)
-    _.each([
-      'title',
-      'legend',
-      'description',
-      'append',
-      'prepend',
-      'inlinetitle',
-      'helpvalue',
-      'value',
-      'disabled',
-      'placeholder',
-      'readOnly'
-    ], function (prop) {
-      if (_.isString(this.formElement[prop])) {
-        if (this.formElement[prop].indexOf('{{values.') !== -1) {
-          // This label wants to use the value of another input field.
-          // Convert that construct into {{jsonform.getValue(key)}} for
-          // Underscore to call the appropriate function of formData
-          // when template gets called (note calling a function is not
-          // exactly Mustache-friendly but is supported by Underscore).
-          this[prop] = this.formElement[prop].replace(
-            /\{\{values\.([^\}]+)\}\}/g,
-            '{{getValue("$1")}}');
-        }
-        else {
-          // Note applying the array path probably doesn't make any sense,
-          // but some geek might want to have a label "foo[].bar[].baz",
-          // with the [] replaced by the appropriate array path.
-          this[prop] = applyArrayPath(this.formElement[prop], this.arrayPath);
-        }
-        if (this[prop]) {
-          this[prop] = _.template(this[prop], formData, valueTemplateSettings);
-        }
-      }
-      else {
-        this[prop] = this.formElement[prop];
-      }
-    }, this);
-
-    // Apply templating to options created with "titleMap" as well
-    if (this.formElement.options) {
-      this.options = _.map(this.formElement.options, function (option) {
-        var title = null;
-        if (_.isObject(option) && option.title) {
-          // See a few lines above for more details about templating
-          // preparation here.
-          if (option.title.indexOf('{{values.') !== -1) {
-            title = option.title.replace(
-              /\{\{values\.([^\}]+)\}\}/g,
-              '{{getValue("$1")}}');
-          }
-          else {
-            title = applyArrayPath(option.title, self.arrayPath);
-          }
-          return _.extend({}, option, {
-            value: (isSet(option.value) ? option.value : ''),
-            title: _.template(title, formData, valueTemplateSettings)
-          });
-        }
-        else {
-          return option;
-        }
-      });
-    }
-  }
-
-  if (this.view && this.view.inputfield && this.schemaElement) {
-    // Case 1: simple input field
-    if (values) {
-      // Form has already been submitted, use former value if defined.
-      // Note we won't set the field to its default value otherwise
-      // (since the user has already rejected it)
-      if (isSet(jsonform.util.getObjKey(values, this.key))) {
-        this.value = jsonform.util.getObjKey(values, this.key);
-      }
-    }
-    else if (!ignoreDefaultValues) {
-      // No previously submitted form result, use default value
-      // defined in the schema if it's available and not already
-      // defined in the form element
-      if (!isSet(this.value) && isSet(this.schemaElement['default'])) {
-        this.value = this.schemaElement['default'];
-        if (_.isString(this.value)) {
-          if (this.value.indexOf('{{values.') !== -1) {
-            // This label wants to use the value of another input field.
-            // Convert that construct into {{jsonform.getValue(key)}} for
-            // Underscore to call the appropriate function of formData
-            // when template gets called (note calling a function is not
-            // exactly Mustache-friendly but is supported by Underscore).
-            this.value = this.value.replace(
-              /\{\{values\.([^\}]+)\}\}/g,
-              '{{getValue("$1")}}');
-          }
-          else {
-            // Note applying the array path probably doesn't make any sense,
-            // but some geek might want to have a label "foo[].bar[].baz",
-            // with the [] replaced by the appropriate array path.
-            this.value = applyArrayPath(this.value, this.arrayPath);
-          }
-          if (this.value) {
-            this.value = _.template(this.value, formData, valueTemplateSettings);
-          }
-        }
-        this.defaultValue = true;
-      }
-    }
-  }
-  else if (this.view && this.view.array) {
-    // Case 2: array-like node
-    nbChildren = 0;
-    if (values) {
-      nbChildren = this.getPreviousNumberOfItems(values, this.arrayPath);
-    }
-    // TODO: use default values at the array level when form has not been
-    // submitted before. Note it's not that easy because each value may
-    // be a complex structure that needs to be pushed down the subtree.
-    // The easiest way is probably to generate a "values" object and
-    // compute initial values from that object
-    /*
-    else if (this.schemaElement['default']) {
-      nbChildren = this.schemaElement['default'].length;
-    }
-    */
-    else if (nbChildren === 0) {
-      // If form has already been submitted with no children, the array
-      // needs to be rendered without children. If there are no previously
-      // submitted values, the array gets rendered with one empty item as
-      // it's more natural from a user experience perspective. That item can
-      // be removed with a click on the "-" button.
-      nbChildren = 1;
-    }
-    for (i = 0; i < nbChildren; i++) {
-      this.appendChild(this.childTemplate.clone());
-    }
-  }
-
-  // Case 3 and in any case: recurse through the list of children
-  _.each(this.children, function (child) {
-    child.computeInitialValues(values, ignoreDefaultValues);
-  });
-
-  // If the node's value is to be used as legend for its "container"
-  // (typically the array the node belongs to), ensure that the container
-  // has a direct link to the node for the corresponding tab.
-  if (this.formElement && this.formElement.valueInLegend) {
-    node = this;
-    while (node) {
-      if (node.parentNode &&
-        node.parentNode.view &&
-        node.parentNode.view.array) {
-        node.legendChild = this;
-        if (node.formElement && node.formElement.legend) {
-          node.legend = applyArrayPath(node.formElement.legend, node.arrayPath);
-          formData.idx = (node.arrayPath.length > 0) ?
-            node.arrayPath[node.arrayPath.length-1] + 1 :
-            node.childPos + 1;
-          formData.value = isSet(this.value) ? this.value : '';
-          node.legend = _.template(node.legend, formData, valueTemplateSettings);
-          break;
-        }
-      }
-      node = node.parentNode;
-    }
-  }
-};
-
-
-/**
- * Returns the number of items that the array node should have based on
- * previously submitted values.
- *
- * The whole difficulty is that values may be hidden deep in the subtree
- * of the node and may actually target different arrays in the JSON schema.
- *
- * @function
- * @param {Object} values Previously submitted values
- * @param {Array(Number)} arrayPath the array path we're interested in
- * @return {Number} The number of items in the array
- */
-formNode.prototype.getPreviousNumberOfItems = function (values, arrayPath) {
-  var key = null;
-  var arrayValue = null;
-  var childNumbers = null;
-  var idx = 0;
-
-  if (!values) {
-    // No previously submitted values, no need to go any further
-    return 0;
-  }
-
-  if (this.view.inputfield && this.schemaElement) {
-    // Case 1: node is a simple input field that links to a key in the schema.
-    // The schema key looks typically like:
-    //  foo.bar[].baz.toto[].truc[].bidule
-    // The goal is to apply the array path and truncate the key to the last
-    // array we're interested in, e.g. with an arrayPath [4, 2]:
-    //  foo.bar[4].baz.toto[2]
-    key = truncateToArrayDepth(this.formElement.key, arrayPath.length);
-    key = applyArrayPath(key, arrayPath);
-    arrayValue = jsonform.util.getObjKey(values, key);
-    if (!arrayValue) {
-      // No key? That means this field had been left empty
-      // in previous submit
-      return 0;
-    }
-    childNumbers = _.map(this.children, function (child) {
-      return child.getPreviousNumberOfItems(values, arrayPath);
-    });
-    return _.max([_.max(childNumbers) || 0, arrayValue.length]);
-  }
-  else if (this.view.array) {
-    // Case 2: node is an array-like node, look for input fields
-    // in its child template
-    return this.childTemplate.getPreviousNumberOfItems(values, arrayPath);
-  }
-  else {
-    // Case 3: node is a leaf or a container,
-    // recurse through the list of children and return the maximum
-    // number of items found in each subtree
-    childNumbers = _.map(this.children, function (child) {
-      return child.getPreviousNumberOfItems(values, arrayPath);
-    });
-    return _.max(childNumbers) || 0;
-  }
-};
-
-
-/**
- * Returns the structured object that corresponds to the form values entered
- * by the user for the node's subtree.
- *
- * The returned object follows the structure of the JSON schema that gave
- * birth to the form.
- *
- * Obviously, the node must have been rendered before that function may
- * be called.
- *
- * @function
- * @param {Array(Number)} updateArrayPath Array path to use to pretend that
- *  the entered values were actually entered for another item in an array
- *  (this is used to move values around when an item is inserted/removed/moved
- *  in an array)
- * @return {Object} The object that follows the data schema and matches the
- *  values entered by the user.
- */
-formNode.prototype.getFormValues = function (updateArrayPath) {
-  // The values object that will be returned
-  var values = {};
-
-  if (!this.el) {
-    throw new Error('formNode.getFormValues can only be called on nodes that are associated with a DOM element in the tree');
-  }
-
-  // Form fields values
-  var formArray = $(':input', this.el).serializeArray();
-
-  // Set values to false for unset checkboxes and radio buttons
-  // because serializeArray() ignores them
-  formArray = formArray.concat(
-    $(':input[type=checkbox]:not(:disabled):not(:checked)', this.el).map( function() {
-      return {"name": this.name, "value": this.checked}
-    }).get()
-  );
-
-  if (updateArrayPath) {
-    _.each(formArray, function (param) {
-      param.name = applyArrayPath(param.name, updateArrayPath);
-    });
-  }
-
-  // The underlying data schema
-  var formSchema = this.ownerTree.formDesc.schema;
-
-  for (var i = 0; i < formArray.length; i++) {
-    // Retrieve the key definition from the data schema
-    var name = formArray[i].name;
-    var eltSchema = getSchemaKey(formSchema.properties, name);
-    var arrayMatch = null;
-    var cval = null;
-
-    // Skip the input field if it's not part of the schema
-    if (!eltSchema) continue;
-
-    // Handle multiple checkboxes separately as the idea is to generate
-    // an array that contains the list of enumeration items that the user
-    // selected.
-    if (eltSchema._jsonform_checkboxes_as_array) {
-      arrayMatch = name.match(/\[([0-9]*)\]$/);
-      if (arrayMatch) {
-        name = name.replace(/\[([0-9]*)\]$/, '');
-        cval = jsonform.util.getObjKey(values, name) || [];
-        if (formArray[i].value === '1') {
-          // Value selected, push the corresponding enumeration item
-          // to the data result
-          cval.push(eltSchema['enum'][parseInt(arrayMatch[1],10)]);
-        }
-        jsonform.util.setObjKey(values, name, cval);
-        continue;
-      }
-    }
-
-    // Type casting
-    if (eltSchema.type === 'boolean') {
-      if (formArray[i].value === '0') {
-        formArray[i].value = false;
-      } else {
-        formArray[i].value = !!formArray[i].value;
-      }
-    }
-    if ((eltSchema.type === 'number') ||
-      (eltSchema.type === 'integer')) {
-      if (_.isString(formArray[i].value)) {
-        if (!formArray[i].value.length) {
-          formArray[i].value = null;
-        } else if (!isNaN(Number(formArray[i].value))) {
-          formArray[i].value = Number(formArray[i].value);
-        }
-      }
-    }
-    if ((eltSchema.type === 'string') &&
-      (formArray[i].value === '') &&
-      !eltSchema._jsonform_allowEmpty) {
-      formArray[i].value=null;
-    }
-    if ((eltSchema.type === 'object') &&
-      _.isString(formArray[i].value) &&
-      (formArray[i].value.substring(0,1) === '{')) {
-      try {
-        formArray[i].value = JSON.parse(formArray[i].value);
-      } catch (e) {
-        formArray[i].value = {};
-      }
-    }
-    //TODO is this due to a serialization bug?
-    if ((eltSchema.type === 'object') &&
-      (formArray[i].value === 'null' || formArray[i].value === '')) {
-      formArray[i].value = null;
-    }
-
-    if (formArray[i].name && (formArray[i].value !== null)) {
-      jsonform.util.setObjKey(values, formArray[i].name, formArray[i].value);
-    }
-  }
-  // console.log("Form value",values);
-  return values;
-};
-
-
-
-/**
- * Renders the node.
- *
- * Rendering is done in three steps: HTML generation, DOM element creation
- * and insertion, and an enhance step to bind event handlers.
- *
- * @function
- * @param {Node} el The DOM element where the node is to be rendered. The
- *  node is inserted at the right position based on its "childPos" property.
- */
-formNode.prototype.render = function (el) {
-  var html = this.generate();
-  this.setContent(html, el);
-  this.enhance();
-};
-
-
-/**
- * Inserts/Updates the HTML content of the node in the DOM.
- *
- * If the HTML is an update, the new HTML content replaces the old one.
- * The new HTML content is not moved around in the DOM in particular.
- *
- * The HTML is inserted at the right position in its parent's DOM subtree
- * otherwise (well, provided there are enough children, but that should always
- * be the case).
- *
- * @function
- * @param {string} html The HTML content to render
- * @param {Node} parentEl The DOM element that is to contain the DOM node.
- *  This parameter is optional (the node's parent is used otherwise) and
- *  is ignored if the node to render is already in the DOM tree.
- */
-formNode.prototype.setContent = function (html, parentEl) {
-  var node = $(html);
-  var parentNode = parentEl ||
-    (this.parentNode ? this.parentNode.el : this.ownerTree.domRoot);
-  var nextSibling = null;
-
-  if (this.el) {
-    // Replace the contents of the DOM element if the node is already in the tree
-    $(this.el).replaceWith(node);
-  }
-  else {
-    // Insert the node in the DOM if it's not already there
-    nextSibling = $(parentNode).children().get(this.childPos);
-    if (nextSibling) {
-      $(nextSibling).before(node);
-    }
-    else {
-      $(parentNode).append(node);
-    }
-  }
-
-  // Save the link between the form node and the generated HTML
-  this.el = node;
-
-  // Update the node's subtree, extracting DOM elements that match the nodes
-  // from the generated HTML
-  this.updateElement(this.el);
-};
-
-
-/**
- * Updates the DOM element associated with the node.
- *
- * Only nodes that have ID are directly associated with a DOM element.
- *
- * @function
- */
-formNode.prototype.updateElement = function (domNode) {
-  if (this.id) {
-    this.el = $('#' + escapeSelector(this.id), domNode).get(0);
-    if (this.view && this.view.getElement) {
-      this.el = this.view.getElement(this.el);
-    }
-    if ((this.fieldtemplate !== false) &&
-      this.view && this.view.fieldtemplate) {
-      // The field template wraps the element two or three level deep
-      // in the DOM tree, depending on whether there is anything prepended
-      // or appended to the input field
-      this.el = $(this.el).parent().parent();
-      if (this.prepend || this.prepend) {
-        this.el = this.el.parent();
-      }
-      this.el = this.el.get(0);
-    }
-    if (this.parentNode && this.parentNode.view &&
-      this.parentNode.view.childTemplate) {
-      // TODO: the child template may introduce more than one level,
-      // so the number of levels introduced should rather be exposed
-      // somehow in jsonform.fieldtemplate.
-      this.el = $(this.el).parent().get(0);
-    }
-  }
-
-  _.each(this.children, function (child) {
-    child.updateElement(this.el || domNode);
-  });
-};
-
-
-/**
- * Generates the view's HTML content for the underlying model.
- *
- * @function
- */
-formNode.prototype.generate = function () {
-  var data = {
-    id: this.id,
-    keydash: this.keydash,
-    elt: this.formElement,
-    schema: this.schemaElement,
-    node: this,
-    value: isSet(this.value) ? this.value : '',
-    escape: escapeHTML
-  };
-  var template = null;
-  var html = '';
-
-  // Complete the data context if needed
-  if (this.ownerTree.formDesc.onBeforeRender) {
-    this.ownerTree.formDesc.onBeforeRender(data, this);
-  }
-  if (this.view.onBeforeRender) {
-    this.view.onBeforeRender(data, this);
-  }
-
-  // Use the template that 'onBeforeRender' may have set,
-  // falling back to that of the form element otherwise
-  if (this.template) {
-    template = this.template;
-  }
-  else if (this.formElement && this.formElement.template) {
-    template = this.formElement.template;
-  }
-  else {
-    template = this.view.template;
-  }
-
-  // Wrap the view template in the generic field template
-  // (note the strict equality to 'false', needed as we fallback
-  // to the view's setting otherwise)
-  if ((this.fieldtemplate !== false) &&
-    (this.fieldtemplate || this.view.fieldtemplate)) {
-    template = jsonform.fieldTemplate(template);
-  }
-
-  // Wrap the content in the child template of its parent if necessary.
-  if (this.parentNode && this.parentNode.view &&
-    this.parentNode.view.childTemplate) {
-    template = this.parentNode.view.childTemplate(template);
-  }
-
-  // Prepare the HTML of the children
-  var childrenhtml = '';
-  _.each(this.children, function (child) {
-    childrenhtml += child.generate();
-  });
-  data.children = childrenhtml;
-
-  data.fieldHtmlClass = '';
-  if (this.ownerTree &&
-      this.ownerTree.formDesc &&
-      this.ownerTree.formDesc.params &&
-      this.ownerTree.formDesc.params.fieldHtmlClass) {
-    data.fieldHtmlClass = this.ownerTree.formDesc.params.fieldHtmlClass;
-  }
-  if (this.formElement &&
-      (typeof this.formElement.fieldHtmlClass !== 'undefined')) {
-    data.fieldHtmlClass = this.formElement.fieldHtmlClass;
-  }
-
-  // Apply the HTML template
-  html = _.template(template, data, fieldTemplateSettings);
-  return html;
-};
-
-
-/**
- * Enhances the view with additional logic, binding event handlers
- * in particular.
- *
- * The function also runs the "insert" event handler of the view and
- * form element if they exist (starting with that of the view)
- *
- * @function
- */
-formNode.prototype.enhance = function () {
-  var node = this;
-  var handlers = null;
-  var handler = null;
-  var formData = _.clone(this.ownerTree.formDesc.tpldata) || {};
-
-  if (this.formElement) {
-    // Check the view associated with the node as it may define an "onInsert"
-    // event handler to be run right away
-    if (this.view.onInsert) {
-      this.view.onInsert({ target: $(this.el) }, this);
-    }
-
-    handlers = this.handlers || this.formElement.handlers;
-
-    // Trigger the "insert" event handler
-    handler = this.onInsert || this.formElement.onInsert;
-    if (handler) {
-      handler({ target: $(this.el) }, this);
-    }
-    if (handlers) {
-      _.each(handlers, function (handler, onevent) {
-        if (onevent === 'insert') {
-          handler({ target: $(this.el) }, this);
-        }
-      }, this);
-    }
-
-    // No way to register event handlers if the DOM element is unknown
-    // TODO: find some way to register event handlers even when this.el is not set.
-    if (this.el) {
-
-      // Register specific event handlers
-      // TODO: Add support for other event handlers
-      if (this.onChange)
-        $(this.el).bind('change', function(evt) { node.onChange(evt, node); });
-      if (this.view.onChange)
-        $(this.el).bind('change', function(evt) { node.view.onChange(evt, node); });
-      if (this.formElement.onChange)
-        $(this.el).bind('change', function(evt) { node.formElement.onChange(evt, node); });
-
-      if (this.onClick)
-        $(this.el).bind('click', function(evt) { node.onClick(evt, node); });
-      if (this.view.onClick)
-        $(this.el).bind('click', function(evt) { node.view.onClick(evt, node); });
-      if (this.formElement.onClick)
-        $(this.el).bind('click', function(evt) { node.formElement.onClick(evt, node); });
-
-      if (this.onKeyUp)
-        $(this.el).bind('keyup', function(evt) { node.onKeyUp(evt, node); });
-      if (this.view.onKeyUp)
-        $(this.el).bind('keyup', function(evt) { node.view.onKeyUp(evt, node); });
-      if (this.formElement.onKeyUp)
-        $(this.el).bind('keyup', function(evt) { node.formElement.onKeyUp(evt, node); });
-
-      if (handlers) {
-        _.each(handlers, function (handler, onevent) {
-          if (onevent !== 'insert') {
-            $(this.el).bind(onevent, function(evt) { handler(evt, node); });
-          }
-        }, this);
-      }
-    }
-
-    // Auto-update legend based on the input field that's associated with it
-    if (this.legendChild && this.legendChild.formElement) {
-      $(this.legendChild.el).bind('keyup', function (evt) {
-        if (node.formElement && node.formElement.legend && node.parentNode) {
-          node.legend = applyArrayPath(node.formElement.legend, node.arrayPath);
-          formData.idx = (node.arrayPath.length > 0) ?
-            node.arrayPath[node.arrayPath.length-1] + 1 :
-            node.childPos + 1;
-          formData.value = $(evt.target).val();
-          node.legend = _.template(node.legend, formData, valueTemplateSettings);
-          $(node.parentNode.el).trigger('legendUpdated');
-        }
-      });
-    }
-  }
-
-  // Recurse down the tree to enhance children
-  _.each(this.children, function (child) {
-    child.enhance();
-  });
-};
-
-
-
-/**
- * Inserts an item in the array at the requested position and renders the item.
- *
- * @function
- * @param {Number} idx Insertion index
- */
-formNode.prototype.insertArrayItem = function (idx, domElement) {
-  var i = 0;
-
-  // Insert element at the end of the array if index is not given
-  if (idx === undefined) {
-    idx = this.children.length;
-  }
-
-  // Create the additional array item at the end of the list,
-  // using the item template created when tree was initialized
-  // (the call to resetValues ensures that 'arrayPath' is correctly set)
-  var child = this.childTemplate.clone();
-  this.appendChild(child);
-  child.resetValues();
-
-  // To create a blank array item at the requested position,
-  // shift values down starting at the requested position
-  // one to insert (note we start with the end of the array on purpose)
-  for (i = this.children.length-2; i >= idx; i--) {
-    this.children[i].moveValuesTo(this.children[i+1]);
-  }
-
-  // Initialize the blank node we've created with default values
-  this.children[idx].resetValues();
-  this.children[idx].computeInitialValues();
-
-  // Re-render all children that have changed
-  for (i = idx; i < this.children.length; i++) {
-    this.children[i].render(domElement);
-  }
-};
-
-
-/**
- * Remove an item from an array
- *
- * @function
- * @param {Number} idx The index number of the item to remove
- */
-formNode.prototype.deleteArrayItem = function (idx) {
-  var i = 0;
-  var child = null;
-
-  // Delete last item if no index is given
-  if (idx === undefined) {
-    idx = this.children.length - 1;
-  }
-
-  // Move values up in the array
-  for (i = idx; i < this.children.length-1; i++) {
-    this.children[i+1].moveValuesTo(this.children[i]);
-    this.children[i].render();
-  }
-
-  // Remove the last array item from the DOM tree and from the form tree
-  this.removeChild();
-};
-
-/**
- * Returns the minimum/maximum number of items that an array field
- * is allowed to have according to the schema definition of the fields
- * it contains.
- *
- * The function parses the schema definitions of the array items that
- * compose the current "array" node and returns the minimum value of
- * "maxItems" it encounters as the maximum number of items, and the
- * maximum value of "minItems" as the minimum number of items.
- *
- * The function reports a -1 for either of the boundaries if the schema
- * does not put any constraint on the number of elements the current
- * array may have of if the current node is not an array.
- *
- * Note that array boundaries should be defined in the JSON Schema using
- * "minItems" and "maxItems". The code also supports "minLength" and
- * "maxLength" as a fallback, mostly because it used to by mistake (see #22)
- * and because other people could make the same mistake.
- *
- * @function
- * @return {Object} An object with properties "minItems" and "maxItems"
- *  that reports the corresponding number of items that the array may
- *  have (value is -1 when there is no constraint for that boundary)
- */
-formNode.prototype.getArrayBoundaries = function () {
-  var boundaries = {
-    minItems: -1,
-    maxItems: -1
-  };
-  if (!this.view || !this.view.array) return boundaries;
-
-  var getNodeBoundaries = function (node, initialNode) {
-    var schemaKey = null;
-    var arrayKey = null;
-    var boundaries = {
-      minItems: -1,
-      maxItems: -1
-    };
-    initialNode = initialNode || node;
-
-    if (node.view && node.view.array && (node !== initialNode)) {
-      // New array level not linked to an array in the schema,
-      // so no size constraints
-      return boundaries;
-    }
-
-    if (node.key) {
-      // Note the conversion to target the actual array definition in the
-      // schema where minItems/maxItems may be defined. If we're still looking
-      // at the initial node, the goal is to convert from:
-      //  foo[0].bar[3].baz to foo[].bar[].baz
-      // If we're not looking at the initial node, the goal is to look at the
-      // closest array parent:
-      //  foo[0].bar[3].baz to foo[].bar
-      arrayKey = node.key.replace(/\[[0-9]+\]/g, '[]');
-      if (node !== initialNode) {
-        arrayKey = arrayKey.replace(/\[\][^\[\]]*$/, '');
-      }
-      schemaKey = getSchemaKey(
-        node.ownerTree.formDesc.schema.properties,
-        arrayKey
-      );
-      if (!schemaKey) return boundaries;
-      return {
-        minItems: schemaKey.minItems || schemaKey.minLength || -1,
-        maxItems: schemaKey.maxItems || schemaKey.maxLength || -1
-      };
-    }
-    else {
-      _.each(node.children, function (child) {
-        var subBoundaries = getNodeBoundaries(child, initialNode);
-        if (subBoundaries.minItems !== -1) {
-          if (boundaries.minItems !== -1) {
-            boundaries.minItems = Math.max(
-              boundaries.minItems,
-              subBoundaries.minItems
-            );
-          }
-          else {
-            boundaries.minItems = subBoundaries.minItems;
-          }
-        }
-        if (subBoundaries.maxItems !== -1) {
-          if (boundaries.maxItems !== -1) {
-            boundaries.maxItems = Math.min(
-              boundaries.maxItems,
-              subBoundaries.maxItems
-            );
-          }
-          else {
-            boundaries.maxItems = subBoundaries.maxItems;
-          }
-        }
-      });
-    }
-    return boundaries;
-  };
-  return getNodeBoundaries(this);
-};
-
-
-/**
- * Form tree class.
- *
- * Holds the internal representation of the form.
- * The tree is always in sync with the rendered form, this allows to parse
- * it easily.
- *
- * @class
- */
-var formTree = function () {
-  this.eventhandlers = [];
-  this.root = null;
-  this.formDesc = null;
-};
-
-/**
- * Initializes the form tree structure from the JSONForm object
- *
- * This function is the main entry point of the JSONForm library.
- *
- * Initialization steps:
- * 1. the internal tree structure that matches the JSONForm object
- *  gets created (call to buildTree)
- * 2. initial values are computed from previously submitted values
- *  or from the default values defined in the JSON schema.
- *
- * When the function returns, the tree is ready to be rendered through
- * a call to "render".
- *
- * @function
- */
-formTree.prototype.initialize = function (formDesc) {
-  formDesc = formDesc || {};
-
-  // Keep a pointer to the initial JSONForm
-  // (note clone returns a shallow copy, only first-level is cloned)
-  this.formDesc = _.clone(formDesc);
-
-  // Compute form prefix if no prefix is given.
-  this.formDesc.prefix = this.formDesc.prefix ||
-    'jsonform-' + _.uniqueId();
-
-  // JSON schema shorthand
-  if (this.formDesc.schema && !this.formDesc.schema.properties) {
-    this.formDesc.schema = {
-      properties: this.formDesc.schema
-    };
-  }
-
-  // Ensure layout is set
-  this.formDesc.form = this.formDesc.form || [
-    '*',
-    {
-      type: 'actions',
-      items: [
-        {
-          type: 'submit',
-          value: 'Submit'
-        }
-      ]
-    }
-  ];
-  this.formDesc.form = (_.isArray(this.formDesc.form) ?
-    this.formDesc.form :
-    [this.formDesc.form]);
-
-  this.formDesc.params = this.formDesc.params || {};
-
-  // Create the root of the tree
-  this.root = new formNode();
-  this.root.ownerTree = this;
-  this.root.view = jsonform.elementTypes['root'];
-
-  // Generate the tree from the form description
-  this.buildTree();
-
-  // Compute the values associated with each node
-  // (for arrays, the computation actually creates the form nodes)
-  this.computeInitialValues();
-};
-
-
-/**
- * Constructs the tree from the form description.
- *
- * The function must be called once when the tree is first created.
- *
- * @function
- */
-formTree.prototype.buildTree = function () {
-  // Parse and generate the form structure based on the elements encountered:
-  // - '*' means "generate all possible fields using default layout"
-  // - a key reference to target a specific data element
-  // - a more complex object to generate specific form sections
-  _.each(this.formDesc.form, function (formElement) {
-    if (formElement === '*') {
-      _.each(this.formDesc.schema.properties, function (element, key) {
-        this.root.appendChild(this.buildFromLayout({
-          key: key
-        }));
-      }, this);
-    }
-    else {
-      if (_.isString(formElement)) {
-        formElement = {
-          key: formElement
-        };
-      }
-      this.root.appendChild(this.buildFromLayout(formElement));
-    }
-  }, this);
-};
-
-
-/**
- * Builds the internal form tree representation from the requested layout.
- *
- * The function is recursive, generating the node children as necessary.
- * The function extracts the values from the previously submitted values
- * (this.formDesc.value) or from default values defined in the schema.
- *
- * @function
- * @param {Object} formElement JSONForm element to render
- * @param {Object} context The parsing context (the array depth in particular)
- * @return {Object} The node that matches the element.
- */
-formTree.prototype.buildFromLayout = function (formElement, context) {
-  var schemaElement = null;
-  var node = new formNode();
-  var view = null;
-  var key = null;
-
-  // The form element parameter directly comes from the initial
-  // JSONForm object. We'll make a shallow copy of it and of its children
-  // not to pollute the original object.
-  // (note JSON.parse(JSON.stringify()) cannot be used since there may be
-  // event handlers in there!)
-  formElement = _.clone(formElement);
-  if (formElement.items) {
-    if (_.isArray(formElement.items)) {
-      formElement.items = _.map(formElement.items, _.clone);
-    }
-    else {
-      formElement.items = [ _.clone(formElement.items) ];
-    }
-  }
-
-  if (formElement.key) {
-    // The form element is directly linked to an element in the JSON
-    // schema. The properties of the form element override those of the
-    // element in the JSON schema. Properties from the JSON schema complete
-    // those of the form element otherwise.
-
-    // Retrieve the element from the JSON schema
-    schemaElement = getSchemaKey(
-      this.formDesc.schema.properties,
-      formElement.key);
-    if (!schemaElement) {
-      // The JSON Form is invalid!
-      throw new Error('The JSONForm object references the schema key "' +
-        formElement.key + '" but that key does not exist in the JSON schema');
-    }
-
-    // Schema element has just been found, let's trigger the
-    // "onElementSchema" event
-    // (tidoust: not sure what the use case for this is, keeping the
-    // code for backward compatibility)
-    if (this.formDesc.onElementSchema) {
-      this.formDesc.onElementSchema(formElement, schemaElement);
-    }
-
-    formElement.name =
-      formElement.name ||
-      formElement.key;
-    formElement.title =
-      formElement.title ||
-      schemaElement.title;
-    formElement.description =
-      formElement.description ||
-      schemaElement.description;
-    formElement.readOnly =
-      formElement.readOnly ||
-      schemaElement.readOnly ||
-      formElement.readonly ||
-      schemaElement.readonly;
-
-    // Compute the ID of the input field
-    if (!formElement.id) {
-      formElement.id = escapeSelector(this.formDesc.prefix) +
-        '-elt-' + formElement.key;
-    }
-
-    // Should empty strings be included in the final value?
-    // TODO: it's rather unclean to pass it through the schema.
-    if (formElement.allowEmpty) {
-      schemaElement._jsonform_allowEmpty = true;
-    }
-
-    // If the form element does not define its type, use the type of
-    // the schema element.
-    if (!formElement.type) {
-      if ((schemaElement.type === 'string') &&
-        (schemaElement.format === 'color')) {
-        formElement.type = 'color';
-      } else if ((schemaElement.type === 'number' ||
-          schemaElement.type === 'integer' ||
-          schemaElement.type === 'string' ||
-          schemaElement.type === 'any') &&
-        !schemaElement['enum']) {
-        formElement.type = 'text';
-      } else if (schemaElement.type === 'boolean') {
-        formElement.type = 'checkbox';
-      } else if (schemaElement.type === 'object') {
-        if (schemaElement.properties) {
-          formElement.type = 'fieldset';
-        } else {
-          formElement.type = 'textarea';
-        }
-      } else if (!_.isUndefined(schemaElement['enum'])) {
-        formElement.type = 'select';
-      } else {
-        formElement.type = schemaElement.type;
-      }
-    }
-
-    // Unless overridden in the definition of the form element (or unless
-    // there's a titleMap defined), use the enumeration list defined in
-    // the schema
-    if (!formElement.options && schemaElement['enum']) {
-      if (formElement.titleMap) {
-        formElement.options = _.map(schemaElement['enum'], function (value) {
-          return {
-            value: value,
-            title: formElement.titleMap[value] || value
-          };
-        });
-      }
-      else {
-        formElement.options = schemaElement['enum'];
-      }
-    }
-
-    // Flag a list of checkboxes with multiple choices
-    if ((formElement.type === 'checkboxes') && schemaElement.items) {
-      var itemsEnum = schemaElement.items['enum'];
-      if (itemsEnum) {
-        schemaElement.items._jsonform_checkboxes_as_array = true;
-      }
-      if (!itemsEnum && schemaElement.items[0]) {
-        itemsEnum = schemaElement.items[0]['enum'];
-        if (itemsEnum) {
-          schemaElement.items[0]._jsonform_checkboxes_as_array = true;
-        }
-      }
-    }
-
-    // If the form element targets an "object" in the JSON schema,
-    // we need to recurse through the list of children to create an
-    // input field per child property of the object in the JSON schema
-    if (schemaElement.type === 'object') {
-      _.each(schemaElement.properties, function (prop, propName) {
-        node.appendChild(this.buildFromLayout({
-          key: formElement.key + '.' + propName
-        }));
-      }, this);
-    }
-  }
-
-  if (!formElement.type) {
-    formElement.type = 'none';
-  }
-  view = jsonform.elementTypes[formElement.type];
-  if (!view) {
-    throw new Error('The JSONForm contains an element whose type is unknown: "' +
-      formElement.type + '"');
-  }
-  
-
-  if (schemaElement) {
-    // The form element is linked to an element in the schema.
-    // Let's make sure the types are compatible.
-    // In particular, the element must not be a "container"
-    // (or must be an "object" or "array" container)
-    if (!view.inputfield && !view.array &&
-      (formElement.type !== 'selectfieldset') &&
-      (schemaElement.type !== 'object')) {
-      throw new Error('The JSONForm contains an element that links to an ' +
-        'element in the JSON schema (key: "' + formElement.key + '") ' +
-        'and that should not based on its type ("' + formElement.type + '")');
-    }
-  }
-  else {
-    // The form element is not linked to an element in the schema.
-    // This means the form element must be a "container" element,
-    // and must not define an input field.
-    if (view.inputfield && (formElement.type !== 'selectfieldset')) {
-      throw new Error('The JSONForm defines an element of type ' +
-        '"' + formElement.type + '" ' +
-        'but no "key" property to link the input field to the JSON schema');
-    }
-  }
-
-  // A few characters need to be escaped to use the ID as jQuery selector
-  formElement.iddot = escapeSelector(formElement.id || '');
-
-  // Initialize the form node from the form element and schema element
-  node.formElement = formElement;
-  node.schemaElement = schemaElement;
-  node.view = view;
-  node.ownerTree = this;
-
-  // Set event handlers
-  if (!formElement.handlers) {
-    formElement.handlers = {};
-  }
-
-  // Parse children recursively
-  if (node.view.array) {
-    // The form element is an array. The number of items in an array
-    // is by definition dynamic, up to the form user (through "Add more",
-    // "Delete" commands). The positions of the items in the array may
-    // also change over time (through "Move up", "Move down" commands).
-    //
-    // The form node stores a "template" node that serves as basis for
-    // the creation of an item in the array.
-    //
-    // Array items may be complex forms themselves, allowing for nesting.
-    //
-    // The initial values set the initial number of items in the array.
-    // Note a form element contains at least one item when it is rendered.
-    if (formElement.items) {
-      key = formElement.items[0] || formElement.items;
-    }
-    else {
-      key = formElement.key + '[]';
-    }
-    if (_.isString(key)) {
-      key = { key: key };
-    }
-    node.setChildTemplate(this.buildFromLayout(key));
-  }
-  else if (formElement.items) {
-    // The form element defines children elements
-    _.each(formElement.items, function (item) {
-      if (_.isString(item)) {
-        item = { key: item };
-      }
-      node.appendChild(this.buildFromLayout(item));
-    }, this);
-  }
-
-  return node;
-};
-
-
-/**
- * Computes the values associated with each input field in the tree based
- * on previously submitted values or default values in the JSON schema.
- *
- * For arrays, the function actually creates and inserts additional
- * nodes in the tree based on previously submitted values (also ensuring
- * that the array has at least one item).
- *
- * The function sets the array path on all nodes.
- * It should be called once in the lifetime of a form tree right after
- * the tree structure has been created.
- *
- * @function
- */
-formTree.prototype.computeInitialValues = function () {
-  this.root.computeInitialValues(this.formDesc.value);
-};
-
-
-/**
- * Renders the form tree
- *
- * @function
- * @param {Node} domRoot The "form" element in the DOM tree that serves as
- *  root for the form
- */
-formTree.prototype.render = function (domRoot) {
-  if (!domRoot) return;
-  this.domRoot = domRoot;
-  this.root.render();
-
-  // If the schema defines required fields, flag the form with the
-  // "jsonform-hasrequired" class for styling purpose
-  // (typically so that users may display a legend)
-  if (this.hasRequiredField()) {
-    $(domRoot).addClass('jsonform-hasrequired');
-  }
-};
-
-/**
- * Walks down the element tree with a callback
- *
- * @function
- * @param {Function} callback The callback to call on each element
- */
-formTree.prototype.forEachElement = function (callback) {
-  
-  var f = function(root) {
-    for (var i=0;i<root.children.length;i++) {
-      callback(root.children[i]);
-      f(root.children[i]);
-    }
-  };
-  f(this.root);
-
-};
-
-formTree.prototype.validate = function(noErrorDisplay) {
-
-  var values = jsonform.getFormValue(this.domRoot);
-  var errors = false;
-
-  var options = this.formDesc;
-
-  if (options.validate!==false) {
-    var validator = false;
-    if (typeof options.validate!="object") {
-      if (global.JSONFormValidator) {
-        validator = global.JSONFormValidator.createEnvironment("json-schema-draft-03");
-      }
-    } else {
-      validator = options.validate;
-    }
-    if (validator) {
-      var v = validator.validate(values, this.formDesc.schema);
-      $(this.domRoot).jsonFormErrors(false,options);
-      if (v.errors.length) {
-        if (!errors) errors = [];
-        errors = errors.concat(v.errors);
-      }
-    }
-  }
-
-  if (errors && !noErrorDisplay) {
-    if (options.displayErrors) {
-      options.displayErrors(errors,this.domRoot);
-    } else {
-      $(this.domRoot).jsonFormErrors(errors,options);
-    }
-  }
-
-  return {"errors":errors}
-
-}
-
-formTree.prototype.submit = function(evt) {
-
-  var stopEvent = function() {
-    if (evt) {
-      evt.preventDefault();
-      evt.stopPropagation();
-    }
-    return false;
-  };
-  var values = jsonform.getFormValue(this.domRoot);
-  var options = this.formDesc;
-
-  var brk=false;
-  this.forEachElement(function(elt) {
-    if (brk) return;
-    if (elt.view.onSubmit) {
-      brk = !elt.view.onSubmit(evt, elt); //may be called multiple times!!
-    }
-  });
-
-  if (brk) return stopEvent();
-
-  var validated = this.validate();
-
-  if (options.onSubmit && !options.onSubmit(validated.errors,values)) {
-    return stopEvent();
-  }
-
-  if (validated.errors) return stopEvent();
-
-  if (options.onSubmitValid && !options.onSubmitValid(values)) {
-    return stopEvent();
-  }
-
-  return false;
-
-};
-
-
-/**
- * Returns true if the form displays a "required" field.
- *
- * To keep things simple, the function parses the form's schema and returns
- * true as soon as it finds a "required" flag even though, in theory, that
- * schema key may not appear in the final form.
- *
- * Note that a "required" constraint on a boolean type is always enforced,
- * the code skips such definitions.
- *
- * @function
- * @return {boolean} True when the form has some required field,
- *  false otherwise.
- */
-formTree.prototype.hasRequiredField = function () {
-  var parseElement = function (element) {
-    if (!element) return null;
-    if (element.required && (element.type !== 'boolean')) {
-      return element;
-    }
-
-    var prop = _.find(element.properties, function (property) {
-      return parseElement(property);
-    });
-    if (prop) {
-      return prop;
-    }
-
-    if (element.items) {
-      if (_.isArray(element.items)) {
-        prop = _.find(element.items, function (item) {
-          return parseElement(item);
-        });
-      }
-      else {
-        prop = parseElement(element.items);
-      }
-      if (prop) {
-        return prop;
-      }
-    }
-  };
-
-  return parseElement(this.formDesc.schema);
-};
-
-
-/**
- * Returns the structured object that corresponds to the form values entered
- * by the use for the given form.
- *
- * The form must have been previously rendered through a call to jsonform.
- *
- * @function
- * @param {Node} The <form> tag in the DOM
- * @return {Object} The object that follows the data schema and matches the
- *  values entered by the user.
- */
-jsonform.getFormValue = function (formelt) {
-  var form = $(formelt).data('jsonform-tree');
-  if (!form) return null;
-  return form.root.getFormValues();
-};
-
-
-/**
- * Highlights errors reported by the JSON schema validator in the document.
- *
- * @function
- * @param {Object} errors List of errors reported by the JSON schema validator
- * @param {Object} options The JSON Form object that describes the form
- *  (unused for the time being, could be useful to store example values or
- *   specific error messages)
- */
-$.fn.jsonFormErrors = function(errors, options) {
-  $(".error", this).removeClass("error");
-  $(".warning", this).removeClass("warning");
-
-  $(".jsonform-errortext", this).hide();
-  if (!errors) return;
-
-  var errorSelectors = [];
-  for (var i = 0; i < errors.length; i++) {
-    // Compute the address of the input field in the form from the URI
-    // returned by the JSON schema validator.
-    // These URIs typically look like:
-    //  urn:uuid:cccc265e-ffdd-4e40-8c97-977f7a512853#/pictures/1/thumbnail
-    // What we need from that is the path in the value object:
-    //  pictures[1].thumbnail
-    // ... and the jQuery-friendly class selector of the input field:
-    //  .jsonform-error-pictures\[1\]---thumbnail
-    var key = errors[i].uri
-      .replace(/.*#\//, '')
-      .replace(/\//g, '.')
-      .replace(/\.([0-9]+)(?=\.|$)/g, '[$1]');
-    var errormarkerclass = ".jsonform-error-" +
-      escapeSelector(key.replace(/\./g,"---"));
-    errorSelectors.push(errormarkerclass);
-
-    var errorType = errors[i].type || "error";
-    $(errormarkerclass, this).addClass(errorType);
-    $(errormarkerclass + " .jsonform-errortext", this).html(errors[i].message).show();
-  }
-
-  // Look for the first error in the DOM and ensure the element
-  // is visible so that the user understands that something went wrong
-  errorSelectors = errorSelectors.join(',');
-  var firstError = $(errorSelectors).get(0);
-  if (firstError && firstError.scrollIntoView) {
-    firstError.scrollIntoView(true, {
-      behavior: 'smooth'
-    });
-  }
-};
-
-
-/**
- * Generates the HTML form from the given JSON Form object and renders the form.
- *
- * Main entry point of the library. Defined as a jQuery function that typically
- * needs to be applied to a <form> element in the document.
- *
- * The function handles the following properties for the JSON Form object it
- * receives as parameter:
- * - schema (required): The JSON Schema that describes the form to render
- * - form: The options form layout description, overrides default layout
- * - prefix: String to use to prefix computed IDs. Default is an empty string.
- *  Use this option if JSON Form is used multiple times in an application with
- *  schemas that have overlapping parameter names to avoid running into multiple
- *  IDs issues. Default value is "jsonform-[counter]".
- * - transloadit: Transloadit parameters when transloadit is used
- * - validate: Validates form against schema upon submission. Uses the value
- * of the "validate" property as validator if it is an object.
- * - displayErrors: Function to call with errors upon form submission.
- *  Default is to render the errors next to the input fields.
- * - submitEvent: Name of the form submission event to bind to.
- *  Default is "submit". Set this option to false to avoid event binding.
- * - onSubmit: Callback function to call when form is submitted
- * - onSubmitValid: Callback function to call when form is submitted without
- *  errors.
- *
- * @function
- * @param {Object} options The JSON Form object to use as basis for the form
- */
-$.fn.jsonForm = function(options) {
-  var formElt = this;
-
-  options = _.defaults({}, options, {submitEvent: 'submit'});
-
-  var form = new formTree();
-  form.initialize(options);
-  form.render(formElt.get(0));
-
-  // TODO: move that to formTree.render
-  if (options.transloadit) {
-    formElt.append('<input type="hidden" name="params" value=\'' +
-      escapeHTML(JSON.stringify(options.transloadit.params)) +
-      '\'>');
-  }
-
-  // Keep a direct pointer to the JSON schema for form submission purpose
-  formElt.data("jsonform-tree", form);
-
-  if (options.submitEvent) {
-    formElt.unbind((options.submitEvent)+'.jsonform');
-    formElt.bind((options.submitEvent)+'.jsonform', function(evt) {
-      form.submit(evt);
-    });
-  }
-
-  // Initialize tabs sections, if any
-  initializeTabs(formElt);
-
-  // Initialize expandable sections, if any
-  $('.expandable > div, .expandable > fieldset', formElt).hide();
-  $('.expandable > legend', formElt).click(function () {
-    var parent = $(this).parent();
-    parent.toggleClass('expanded');
-    $('> div', parent).slideToggle(100);
-  });
-
-  return form;
-};
-
-
-/**
- * Retrieves the structured values object generated from the values
- * entered by the user and the data schema that gave birth to the form.
- *
- * Defined as a jQuery function that typically needs to be applied to
- * a <form> element whose content has previously been generated by a
- * call to "jsonForm".
- *
- * Unless explicitly disabled, the values are automatically validated
- * against the constraints expressed in the schema.
- *
- * @function
- * @return {Object} Structured values object that matches the user inputs
- *  and the data schema.
- */
-$.fn.jsonFormValue = function() {
-  return jsonform.getFormValue(this);
-};
-
-// Expose the getFormValue method to the global object
-// (other methods exposed as jQuery functions)
-global.JSONForm = global.JSONForm || {util:{}};
-global.JSONForm.getFormValue = jsonform.getFormValue;
-global.JSONForm.fieldTemplate = jsonform.fieldTemplate;
-global.JSONForm.fieldTypes = jsonform.elementTypes;
-global.JSONForm.getInitialValue = getInitialValue;
-global.JSONForm.util.getObjKey = jsonform.util.getObjKey;
-global.JSONForm.util.setObjKey = jsonform.util.setObjKey;
-
-})((typeof exports !== 'undefined'),
-  ((typeof exports !== 'undefined') ? exports : window),
-  ((typeof jQuery !== 'undefined') ? jQuery : { fn: {} }),
-  ((typeof _ !== 'undefined') ? _ : null),
-  JSON);
diff --git a/assets/webconfig/js/lib/sb-admin-2.js b/assets/webconfig/js/lib/sb-admin-2.js
index ce5a3f66..54d78826 100644
--- a/assets/webconfig/js/lib/sb-admin-2.js
+++ b/assets/webconfig/js/lib/sb-admin-2.js
@@ -22,7 +22,7 @@ $(function() {
         height = height - topOffset;
         if (height < 1) height = 1;
         if (height > topOffset) {
-            $("#page-wrapper").css("min-height", (height) + "px");
+            $("#page-wrapper").css("min-height", (height-10) + "px");
         }
     });
 
diff --git a/assets/webconfig/js/ui_utils.js b/assets/webconfig/js/ui_utils.js
index b761b985..3a365496 100644
--- a/assets/webconfig/js/ui_utils.js
+++ b/assets/webconfig/js/ui_utils.js
@@ -119,3 +119,27 @@ function createJsonEditor(container,schema,setconfig)
 
 	return editor;
 }
+
+function createSelGroup(group){
+	var el = document.createElement('optgroup');
+	el.setAttribute('label', group);
+	return el
+}
+		
+function createSelOpt(opt){
+	var el = document.createElement('option');
+	el.setAttribute('value', opt);
+	el.innerHTML = opt;
+	return el
+}
+
+function createSel(array, group){
+	if (array.length != "0"){
+	var el = createSelGroup(group);
+		for(var i=0; i<array.length; i++){
+			var opt = createSelOpt(array[i])
+			el.appendChild(opt);
+		}
+	return el;
+	}
+}
diff --git a/assets/webconfig/lang/de.json b/assets/webconfig/lang/de.json
index 362f5d2f..39b03257 100644
--- a/assets/webconfig/lang/de.json
+++ b/assets/webconfig/lang/de.json
@@ -75,6 +75,7 @@
 		"conf_leds_layout_cl_vleddepth" : "Vertikale LED Tiefe",
 		"conf_leds_layout_cl_generate" : "Generiere Konfiguartion",
 		"conf_leds_layout_cl_edgegap" : "Rahmenabstand",
+		"conf_leds_layout_cl_cornergap" : "Eckabstand",
 		"conf_leds_layout_ma_horiz" : "Horizontal",
 		"conf_leds_layout_ma_vert" : "Vertical",
 		"conf_leds_layout_ma_cabling" : "Verkabelung",
@@ -91,7 +92,7 @@
 		"conf_leds_layout_textf1" : "Das Textfeld zeigt dir dein aktuell geladenes Layout, sofern du kein neues Layout mit den Optionen oben erstellt hast. Optional kann man die Werte hier weiter bearbeiten.",
 		"conf_leds_layout_textf2" : "Vergiss nicht zu speichern!",
 		"conf_leds_test_button_toggleleds" : "LEDs",
-		"conf_leds_test_button_togglelednumber" : "LED Nummern",
+		"conf_leds_test_button_togglelednumber" : "LED Nummerierung",
 		"conf_leds_test_button_toggleliveleds" : "LED Echtzeitansicht",
 		"conf_grabber_label_intro" : "Hyperion unterstützt 2 Hauptarten wie Bilder aufgenommen werden können. Zum Einen die Plattform Aufnahme, die sich direkt am System bedient auf dem Hyperion läuft (beste Qualität). Zum Anderen die USB Aufnahme, die sich an einem angeschlossenen Gerät bedient die benötigten Informationen für die Verarbeitung und Ausgabe zu erhalten (Mehr Konfigurationsaufwand und Kalibrierung)",
 		"conf_colors_label_intro" : "Neben der Farbkalibrierung, gehört auch die Glättung (sanfte Farbübergänge) und die Erkennung von störenden (schwarzen) Balken zur Bildverarbeitung.",
diff --git a/effects/schema/fade.schema.json b/effects/schema/fade.schema.json
index b8adf146..3bb402fe 100644
--- a/effects/schema/fade.schema.json
+++ b/effects/schema/fade.schema.json
@@ -9,6 +9,7 @@
             "title":"Fade Time",
             "default": 5.0,
             "minimum" : 0.1,
+			"append" : "s",
             "propertyOrder" : 1
         },
         "color-start": {
diff --git a/effects/schema/knight-rider.schema.json b/effects/schema/knight-rider.schema.json
index edee31de..48d54025 100644
--- a/effects/schema/knight-rider.schema.json
+++ b/effects/schema/knight-rider.schema.json
@@ -4,20 +4,6 @@
 	"title":"Knight Rider",
 	"required":true,
 	"properties":{
-		"speed": {
-			"type": "number",
-			"title":"Speed",
-			"default": 1.0,
-			"minimum": 0.1,
-			"propertyOrder" : 1
-		},
-		"fadeFactor": {
-			"type": "number",
-			"title":"Fade Factor",
-			"default": 0.7,
-			"minimum" : 0.0,
-			"propertyOrder" : 1
-		},
 		"color": {
 			"type": "array",
 			"title":"Color",
@@ -30,6 +16,23 @@
 			},
 			"minItems": 3,
 			"maxItems": 3,
+			"propertyOrder" : 1
+		},
+		"speed": {
+			"type": "number",
+			"title":"Speed",
+			"default": 1.0,
+			"minimum": 0.1,
+			"step" : 0.1,
+			"propertyOrder" : 2
+		},
+		"fadeFactor": {
+			"type": "number",
+			"title":"Fade Factor",
+			"default": 0.7,
+			"minimum" : 0.0,
+			"maximum" : 0.9,
+			"step" : 0.1,
 			"propertyOrder" : 3
 		}
 	},
diff --git a/effects/schema/police.schema.json b/effects/schema/police.schema.json
index aa516232..71003c67 100644
--- a/effects/schema/police.schema.json
+++ b/effects/schema/police.schema.json
@@ -34,8 +34,9 @@
 		},
 		"colors_count": {
 			"type": "integer",
-			"title":"Colors count",
-			"default": "10",
+			"title":"Color length",
+			"default": 10,
+			"minimum" : 0,
 			"propertyOrder" : 3
 		},
 		"rotation-time": {
@@ -43,6 +44,7 @@
 			"title":"Rotation time",
 			"default": 2.0,
 			"minimum" : 0.1,
+			"append" : "s",
 			"propertyOrder" : 4
 		},
 		"reverse": {
diff --git a/effects/schema/rainbow-mood.schema.json b/effects/schema/rainbow-mood.schema.json
index eb17ad9f..87466323 100644
--- a/effects/schema/rainbow-mood.schema.json
+++ b/effects/schema/rainbow-mood.schema.json
@@ -8,19 +8,22 @@
 			"type": "number",
 			"title":"Rotation time",
 			"default": 60.0,
-			"minimum" : 0.1,
+			"minimum" : 1.0,
+			"append" : "s",
 			"propertyOrder" : 1
 		},
 		"brightness": {
 			"type": "number",
 			"title":"Brightness",
 			"default": 1.0,
-			"minimum" : 0.0,
+			"minimum" : 0.1,
+			"maximum" : 1.0,
+			"step" : 0.1,
 			"propertyOrder" : 2
 		},
 		"reverse": {
 			"type": "boolean",
-			"title":"Reverse",
+			"title":"Reverse direction",
 			"default": false,
 			"propertyOrder" : 3
 		}
diff --git a/effects/schema/rainbow-swirl.schema.json b/effects/schema/rainbow-swirl.schema.json
index 43a94442..5c2d2161 100644
--- a/effects/schema/rainbow-swirl.schema.json
+++ b/effects/schema/rainbow-swirl.schema.json
@@ -7,8 +7,9 @@
 		"rotation-time": {
 			"type": "number",
 			"title":"Rotation Time",
-			"default": 20.0,
+			"default": 10.0,
 			"minimum" : 0.1,
+			"append" : "s",
 			"propertyOrder" : 1
 		},
 		"center_x": {
@@ -16,6 +17,8 @@
 			"title":"Center X",
 			"default": 0.5,
 			"minimum" : 0.0,
+			"maximum" : 2.0,
+			"step" : 0.1,
 			"propertyOrder" : 2
 		},
 		"center_y": {
@@ -23,11 +26,13 @@
 			"title":"Center Y",
 			"default": 0.5,
 			"minimum" : 0.0,
+			"maximum" : 2.0,
+			"step" : 0.1,
 			"propertyOrder" : 3
 		},
 		"reverse": {
 			"type": "boolean",
-			"title":"Reverse",
+			"title":"Reverse direction",
 			"default": false,
 			"propertyOrder" : 4
 		}
diff --git a/effects/schema/shutdown.schema.json b/effects/schema/shutdown.schema.json
index 3b4998af..27a0feab 100644
--- a/effects/schema/shutdown.schema.json
+++ b/effects/schema/shutdown.schema.json
@@ -8,7 +8,8 @@
 			"type": "number",
 			"title":"Speed",
 			"default": 1.0,
-			"minimum" : 0.1,
+			"minimum" : 0.3,
+			"step" : 0.1,
 			"propertyOrder" : 1
 		},
 		"alarm-color": {
@@ -28,6 +29,7 @@
 		"post-color": {
 			"type": "array",
 			"title":"Post color",
+			"format" : "colorpicker",
 			"default": [255,174,11],
 			"items" : {
 				"type": "integer",
@@ -40,7 +42,7 @@
 		},
 		"shutdown-enabled": {
 			"type": "boolean",
-			"title":"Shutdown enabled",
+			"title":"Real shutdown",
 			"default": false,
 			"propertyOrder" : 4
 		}
diff --git a/effects/schema/snake.schema.json b/effects/schema/snake.schema.json
index 8f567619..f4161d59 100644
--- a/effects/schema/snake.schema.json
+++ b/effects/schema/snake.schema.json
@@ -23,12 +23,14 @@
 			"title":"Rotation time",
 			"default": 12.0,
 			"minimum" : 0.1,
+			"append" : "s",
 			"propertyOrder" : 2
 		},
 		"percentage": {
 			"type": "integer",
-			"title":"Percentage",
+			"title":"Length",
 			"default": 10,
+			"append" : "%",
 			"propertyOrder" : 3
 		}
 	},
diff --git a/libsrc/hyperion/hyperion.schema.json b/libsrc/hyperion/hyperion.schema.json
index ef8bc00d..1b1524f7 100644
--- a/libsrc/hyperion/hyperion.schema.json
+++ b/libsrc/hyperion/hyperion.schema.json
@@ -362,9 +362,9 @@
 				{
 					"type" : "number",
 					"title" : "Update frequency",
-					"minimum" : 1.000,
-					"maximum" : 100.000,
-					"default" : 25.000,
+					"minimum" : 1.0,
+					"maximum" : 100.0,
+					"default" : 25.0,
 					"append" : "Hz",
 					"propertyOrder" : 4
 				},
@@ -392,6 +392,8 @@
 		{
 			"type":"array",
 			"title" : "USB Grabber",
+			"minItems": 1,
+			"maxItems": 2,
 			"items":
 			{
 				"type" : "object",
@@ -416,6 +418,7 @@
 					{
 						"type" : "integer",
 						"title" : "Input",
+						"minimum" : 0,
 						"default" : 0,
 						"propertyOrder" : 3
 					},
@@ -431,6 +434,7 @@
 					{
 						"type" : "integer",
 						"title" : "Width",
+						"minimum" : -1,
 						"default" : -1,
 						"append" : "Pixel",
 						"propertyOrder" : 5
@@ -439,6 +443,7 @@
 					{
 						"type" : "integer",
 						"title" : "Height",
+						"minimum" : -1,
 						"default" : -1,
 						"append" : "Pixel",
 						"propertyOrder" : 6
@@ -447,6 +452,7 @@
 					{
 						"type" : "integer",
 						"title" : "Frame decimation",
+						"minimum" : 0,
 						"default" : 2,
 						"propertyOrder" : 7
 					},
@@ -454,12 +460,14 @@
 					{
 						"type" : "integer",
 						"title" : "Size decimation",
+						"minimum" : 0,
 						"default" : 6,
 						"propertyOrder" : 8
 					},
 					"priority" :
 					{
 						"type" : "integer",
+						"minimum" : 0,
 						"title" : "Priority channel",
 						"default" : 900,
 						"propertyOrder" : 9
@@ -522,6 +530,7 @@
 						"minimum" : 0.0,
 						"maximum" : 1.0,
 						"default" : 0.1,
+						"step" : 0.01,
 						"append" : "%",
 						"propertyOrder" : 16
 					},
@@ -532,6 +541,7 @@
 						"minimum" : 0.0,
 						"maximum" : 1.0,
 						"default" : 0.1,
+						"step" : 0.01,
 						"append" : "%",
 						"propertyOrder" : 17
 					},
@@ -542,6 +552,7 @@
 						"minimum" : 0.0,
 						"maximum" : 1.0,
 						"default" : 0.1,
+						"step" : 0.01,
 						"append" : "%",
 						"propertyOrder" : 18
 					}
@@ -573,21 +584,23 @@
 				{
 					"type" : "integer",
 					"title" : "Width",
-					"default" : 96,
+					"minimum" : 10,
+					"default" : 80,
 					"append" : "Pixel"
 				},
 				"height" :
 				{
 					"type" : "integer",
 					"title" : "Height",
-					"default" : 96,
+					"minimum" : 10,
+					"default" : 45,
 					"append" : "Pixel"
 				},
 				"frequency_Hz" :
 				{
 					"type" : "integer",
 					"title" : "Frequency",
-					"minimum" : 0,
+					"minimum" : 1,
 					"default" : 10,
 					"append" : "Hz"
 				},
@@ -686,6 +699,7 @@
 					"minimum" : 0.0,
 					"maximum" : 1.0,
 					"default" : 0.05,
+					"step" : 0.01,
 					"append" : "%",
 					"propertyOrder" : 2
 				},
@@ -983,6 +997,7 @@
 				{
 					"type" : "integer",
 					"title" : "Priority",
+					"minimum" : 0,
 					"default" : 800,
 					"propertyOrder" : 4
 				},
@@ -990,7 +1005,9 @@
 				{
 					"type" : "integer",
 					"title" : "Timeout",
+					"minimum" : 1000,
 					"default" : 10000,
+					"append" : "ms",
 					"propertyOrder" : 5
 				},
 				"shared" :
@@ -1026,6 +1043,8 @@
 				{
 					"type" : "integer",
 					"title" : "Port",
+					"minimum" : 0,
+					"maximum" : 65535,
 					"default" : 8099,
 					"propertyOrder" : 3
 				}