[locationinfo] Clean up config.html (and handling in php)

- De-javascript where reasonable
- Unify repeated calls
- Overhaul query builder
- ...

3 files changed, 300 insertions, 484 deletions

diff --git a/modules-available/locationinfo/page.inc.php b/modules-available/locationinfo/page.inc.php
index 16b85b11..88a762a8 100644
--- a/modules-available/locationinfo/page.inc.php
+++ b/modules-available/locationinfo/page.inc.php
@@ -106,7 +106,7 @@ class Page_LocationInfo extends Page
 		$result['mode'] = Request::post('mode', 1, 'int');
 		$result['vertical'] = Request::post('vertical', false, 'bool');
 		$result['eco'] = Request::post('eco', false, 'bool');
-		$result['scaledaysauto'] = Request::post('autoscale', false, 'bool');
+		$result['scaledaysauto'] = Request::post('scaledaysauto', false, 'bool');
 		$result['daystoshow'] = Request::post('daystoshow', 7, 'int');
 		$result['rotation'] = Request::post('rotation', 0, 'int');
 		$result['scale'] = Request::post('scale', 50, 'int');
@@ -709,45 +709,47 @@ class Page_LocationInfo extends Page
 	 */
 	private function ajaxConfig($id)
 	{
-		$array = array();
-
 		// Get Config data from db
-		$dbquery = Database::simpleQuery("SELECT config, serverid, serverroomid FROM `location_info` WHERE locationid = :id", array('id' => $id));
-		$serverid;
-		$serverroomid;
-		while ($dbdata = $dbquery->fetch(PDO::FETCH_ASSOC)) {
-			$array = json_decode($dbdata['config'], true);
-			$serverid = $dbdata['serverid'];
-			$serverroomid = $dbdata['serverroomid'];
+		$location = Database::queryFirst("SELECT config, serverid, serverroomid FROM `location_info` WHERE locationid = :id", array('id' => $id));
+		if ($location === false) {
+			die("Invalid location id: $id");
 		}
 
+		$config = json_decode($location['config'], true); // TODO: Validate we got an array, fill with defaults otherwise
+
 		// get Server / ID list
-		$dbq = Database::simpleQuery("SELECT serverid, servername FROM `setting_location_info`");
+		$dbq = Database::simpleQuery("SELECT serverid, servername FROM setting_location_info ORDER BY servername ASC");
 		$serverList = array();
-		while ($dbd = $dbq->fetch(PDO::FETCH_ASSOC)) {
-			$d['sid'] = $dbd['serverid'];
-			$d['sname'] = $dbd['servername'];
-			$serverList[] = $d;
+		while ($row = $dbq->fetch(PDO::FETCH_ASSOC)) {
+			if ($row['serverid'] == $location['serverid']) {
+				$row['selected'] = 'selected';
+			}
+			$serverList[] = $row;
+		}
+		$langs = Dictionary::getLanguages(true);
+		foreach ($langs as &$lang) {
+			if ($lang['cc'] === $config['language']) {
+				$lang['selected'] = 'selected';
+			}
 		}
 
 		echo Render::parse('config', array(
 			'id' => $id,
-			'language' => $array['language'],
-			'languages' => Dictionary::getLanguages(true),
-			'mode' => 'mode' . $array['mode'],
-			'vertical' => $array['vertical'],
-			'eco' => $array['eco'],
-			'daystoshow' => 'day' . $array['daystoshow'],
-			'scaledaysauto' => $array['scaledaysauto'],
-			'rotation' => 'rotation' . $array['rotation'],
-			'scale' => $array['scale'],
-			'switchtime' => $array['switchtime'],
-			'calupdate' => $array['calupdate'],
-			'roomupdate' => $array['roomupdate'],
-			'configupdate' => $array['configupdate'],
-			'serverlist' => array_values($serverList),
-			'serverid' => $serverid,
-			'serverroomid' => $serverroomid
+			'languages' => $langs,
+			'mode' => $config['mode'],
+			'vertical_checked' => $config['vertical'] ? 'checked' : '',
+			'eco_checked' => $config['eco'] ? 'checked' : '',
+			'scaledaysauto_checked' => $config['scaledaysauto'] ? 'checked' : '',
+			'daystoshow' => $config['daystoshow'],
+			'rotation' => $config['rotation'],
+			'scale' => $config['scale'],
+			'switchtime' => $config['switchtime'],
+			'calupdate' => $config['calupdate'],
+			'roomupdate' => $config['roomupdate'],
+			'configupdate' => $config['configupdate'],
+			'serverlist' => $serverList,
+			'serverid' => $location['serverid'],
+			'serverroomid' => $location['serverroomid']
 		));
 	}
 
diff --git a/modules-available/locationinfo/style.css b/modules-available/locationinfo/style.css
index b152c3b3..ed1bda76 100644
--- a/modules-available/locationinfo/style.css
+++ b/modules-available/locationinfo/style.css
@@ -1,7 +1,3 @@
-.tablerow:hover {
-    background-color: #F2F2F2;
-}
-
 .glyphicon-refresh-animate {
     -animation: spin .7s infinite linear;
     -webkit-animation: spin2 .7s infinite linear;
diff --git a/modules-available/locationinfo/templates/config.html b/modules-available/locationinfo/templates/config.html
index 104b1cf3..9d088d6c 100644
--- a/modules-available/locationinfo/templates/config.html
+++ b/modules-available/locationinfo/templates/config.html
@@ -16,15 +16,16 @@
 							</div>
 							<div class="col-md-7">
 								<select class="form-control" name="serverid">
-									<option id="serverOption-{{sid}}" value="0">{{lang_noServer}}</option>
+									<option value="0">{{lang_noServer}}</option>
 									{{#serverlist}}
-									<option id="serverOption-{{sid}}" value="{{sid}}">{{sname}}</option>
+									<option value="{{sid}}" {{selected}}>{{servername}}</option>
 									{{/serverlist}}
 								</select>
 							</div>
 							<div class="col-md-2">
-								<a class="btn btn-default" id="help-server" title="{{lang_serverTooltip}}"><span
-										class="glyphicon glyphicon-question-sign"></span></a>
+								<a class="btn btn-default helptext" title="{{lang_serverTooltip}}">
+									<span class="glyphicon glyphicon-question-sign"></span>
+								</a>
 							</div>
 						</div>
 					</div>
@@ -38,8 +39,9 @@
 								<input class="form-control" name="serverroomid" id="serverroomid" value="{{serverroomid}}">
 							</div>
 							<div class="col-md-2">
-								<a class="btn btn-default" id="help-roomId" title="{{lang_roomIdTooltip}}"><span
-										class="glyphicon glyphicon-question-sign"></span></a>
+								<a class="btn btn-default helptext" title="{{lang_roomIdTooltip}}">
+									<span class="glyphicon glyphicon-question-sign"></span>
+								</a>
 							</div>
 						</div>
 					</div>
@@ -48,522 +50,338 @@
 			</div>
 		</div>
 
-		<div class="panel panel-default">
-			<div class="panel-heading">{{lang_display}}</div>
-			<div class="panel-body">
-				<div class="list-group">
-
-					<div class="list-group-item">
-						<div class="row">
-							<div class="col-md-3">
-								<label>{{lang_language}}</label>
-							</div>
-							<div class="col-md-7">
-								<select class="form-control" name="language" id="language"
-										  onchange="modifyCustomUrl('&amp;language=', this.value);">
-									{{#languages}}
-									<option value="{{cc}}" id="lang-{{cc}}">{{name}}</option>
-									{{/languages}}
-								</select>
-							</div>
-							<div class="col-md-2">
-								<a class="btn btn-default" id="help-language" title="{{lang_languageTooltip}}"><span
-										class="glyphicon glyphicon-question-sign"></span></a>
+		<div class="modify-inputs">
+			<div class="panel panel-default">
+				<div class="panel-heading">{{lang_display}}</div>
+				<div class="panel-body">
+					<div class="list-group">
+
+						<div class="list-group-item">
+							<div class="row">
+								<div class="col-md-3">
+									<label>{{lang_language}}</label>
+								</div>
+								<div class="col-md-7">
+									<select class="form-control" name="language" id="language">
+										{{#languages}}
+											<option value="{{cc}}" id="lang-{{cc}}" {{selected}}>{{name}}</option>
+										{{/languages}}
+									</select>
+								</div>
+								<div class="col-md-2">
+									<a class="btn btn-default helptext" title="{{lang_languageTooltip}}">
+										<span class="glyphicon glyphicon-question-sign"></span>
+									</a>
+								</div>
 							</div>
 						</div>
-					</div>
 
-					<div class="list-group-item">
-						<div class="row">
-							<div class="col-md-3">
-								<label>{{lang_mode}}</label>
-							</div>
-							<div class="col-md-7">
-								<select class="form-control" name="mode" id="mode"
-										  onchange="modeChange(this.value);modifyCustomUrl('&amp;mode=', this.value);">
-									<option value="1" id="mode1">{{lang_mode1}}</option>
-									<option value="2" id="mode2">{{lang_mode2}}</option>
-									<option value="3" id="mode3">{{lang_mode3}}</option>
-									<option value="4" id="mode4">{{lang_mode4}}</option>
-								</select>
-							</div>
-							<div class="col-md-2">
-								<a class="btn btn-default" id="help-mode" title="{{lang_modeTooltip}}"><span
-										class="glyphicon glyphicon-question-sign"></span></a>
+						<div class="list-group-item">
+							<div class="row">
+								<div class="col-md-3">
+									<label>{{lang_mode}}</label>
+								</div>
+								<div class="col-md-7">
+									<select class="form-control" name="mode" id="mode" onchange="modeChange()">
+										<option value="1" id="mode1">{{lang_mode1}}</option>
+										<option value="2" id="mode2">{{lang_mode2}}</option>
+										<option value="3" id="mode3">{{lang_mode3}}</option>
+										<option value="4" id="mode4">{{lang_mode4}}</option>
+									</select>
+								</div>
+								<div class="col-md-2">
+									<a class="btn btn-default helptext" title="{{lang_modeTooltip}}">
+										<span class="glyphicon glyphicon-question-sign"></span>
+									</a>
+								</div>
 							</div>
 						</div>
-					</div>
 
-					<div class="list-group-item">
-						<div class="row">
-							<div class="col-md-3">
-								<label>{{lang_ecoMode}}</label>
-							</div>
-							<div class="col-md-7">
-								<input type="hidden" name="eco" value="{{eco}}" id="cb_input_eco"/>
-								<input class="bs-switch" id="cb_eco" type="checkbox"/>
-							</div>
-							<div class="col-md-2">
-								<a class="btn btn-default" id="help-eco" title="{{lang_ecoTooltip}}"><span
-										class="glyphicon glyphicon-question-sign"></span></a>
+						<div class="list-group-item">
+							<div class="row">
+								<div class="col-md-3">
+									<label>{{lang_ecoMode}}</label>
+								</div>
+								<div class="col-md-7">
+									<input type="checkbox" name="eco" {{eco_checked}}>
+								</div>
+								<div class="col-md-2">
+									<a class="btn btn-default helptext" title="{{lang_ecoTooltip}}">
+										<span class="glyphicon glyphicon-question-sign"></span>
+									</a>
+								</div>
 							</div>
 						</div>
-					</div>
 
+					</div>
 				</div>
 			</div>
-		</div>
-
 
-		<div class="panel panel-default" id="extra-div">
-			<div class="panel-heading">{{lang_mode}}</div>
-			<div class="panel-body">
-				<div class="list-group">
 
-					<div class="list-group-item" id="item-vertical">
-						<div class="row">
-							<div class="col-md-3">
-								<label>{{lang_vertical}}</label>
-							</div>
-							<div class="col-md-7">
-								<input type="hidden" name="vertical" value="{{vertical}}" id="cb_input_vertical"/>
-								<input class="bs-switch" id="cb_vertical" type="checkbox"/>
-							</div>
-							<div class="col-md-2">
-								<a class="btn btn-default" id="help-vertical" title="{{lang_verticalTooltip}}"><span
-										class="glyphicon glyphicon-question-sign"></span></a>
+			<div class="panel panel-default" id="extra-div">
+				<div class="panel-heading">{{lang_mode}}</div>
+				<div class="panel-body">
+					<div class="list-group">
+
+						<div class="list-group-item m1-s m2-h m3-h m4-h">
+							<div class="row">
+								<div class="col-md-3">
+									<label>{{lang_vertical}}</label>
+								</div>
+								<div class="col-md-7">
+									<input type="checkbox" name="vertical" {{vertical_checked}}>
+								</div>
+								<div class="col-md-2">
+									<a class="btn btn-default helptext" title="{{lang_verticalTooltip}}">
+										<span class="glyphicon glyphicon-question-sign"></span>
+									</a>
+								</div>
 							</div>
 						</div>
-					</div>
 
-					<div class="list-group-item" id="item-autoscale">
-						<div class="row">
-							<div class="col-md-3">
-								<label>{{lang_autoScale}}</label>
-							</div>
-							<div class="col-md-7">
-								<input type="hidden" name="autoscale" value="{{scaledaysauto}}" id="cb_input_autoScale"/>
-								<input class="bs-switch" id="cb_autoScale" type="checkbox"/>
-							</div>
-							<div class="col-md-2">
-								<a class="btn btn-default" id="help-autoscale" title="{{lang_autoscaleTooltip}}"><span
-										class="glyphicon glyphicon-question-sign"></span></a>
+						<div class="list-group-item m1-s m2-s m3-h m4-s">
+							<div class="row">
+								<div class="col-md-3">
+									<label>{{lang_autoScale}}</label>
+								</div>
+								<div class="col-md-7">
+									<input id="scaledaysauto" type="checkbox" name="scaledaysauto" {{scaledaysauto_checked}}>
+								</div>
+								<div class="col-md-2">
+									<a class="btn btn-default helptext" title="{{lang_autoscaleTooltip}}">
+										<span class="glyphicon glyphicon-question-sign"></span>
+									</a>
+								</div>
 							</div>
 						</div>
-					</div>
 
-					<div class="list-group-item" id="item-daystoshow">
-						<div class="row">
-							<div class="col-md-3">
-								<label>{{lang_daysToShow}}</label>
-							</div>
-							<div class="col-md-7">
-								<select class="form-control" id="daystoshow" name="daystoshow"
-										  onchange="modifyCustomUrl('&amp;daystoshow=', this.value);">
-									<option value="1" id="day1">1</option>
-									<option value="2" id="day2">2</option>
-									<option value="3" id="day3">3</option>
-									<option value="4" id="day4">4</option>
-									<option value="5" id="day5">5</option>
-									<option value="6" id="day6">6</option>
-									<option value="7" id="day7">7</option>
-								</select>
-							</div>
-							<div class="col-md-2">
-								<a class="btn btn-default" id="help-daystoshow" title="{{lang_daysToShowTooltip}}"><span
-										class="glyphicon glyphicon-question-sign"></span></a>
+						<div class="list-group-item m1-s m2-s m3-h m4-s">
+							<div class="row">
+								<div class="col-md-3">
+									<label>{{lang_daysToShow}}</label>
+								</div>
+								<div class="col-md-7">
+									<select class="form-control" id="daystoshow" name="daystoshow">
+										<option value="1">1</option>
+										<option value="2">2</option>
+										<option value="3">3</option>
+										<option value="4">4</option>
+										<option value="5">5</option>
+										<option value="6">6</option>
+										<option value="7">7</option>
+									</select>
+								</div>
+								<div class="col-md-2">
+									<a class="btn btn-default helptext" title="{{lang_daysToShowTooltip}}">
+										<span class="glyphicon glyphicon-question-sign"></span>
+									</a>
+								</div>
 							</div>
 						</div>
-					</div>
 
-					<div class="list-group-item" id="item-rotation">
-						<div class="row">
-							<div class="col-md-3">
-								<label>{{lang_rotation}}</label>
-							</div>
-							<div class="col-md-7">
-								<select class="form-control" id="rotation" name="rotation"
-										  onchange="modifyCustomUrl('&amp;rotation=', this.value);">
-									<option value="0" id="rotation0">{{lang_rotation0}}</option>
-									<option value="3" id="rotation3">{{lang_rotation3}}</option>
-									<option value="2" id="rotation2">{{lang_rotation2}}</option>
-									<option value="1" id="rotation1">{{lang_rotation1}}</option>
-								</select>
-							</div>
-							<div class="col-md-2">
-								<a class="btn btn-default" id="help-rotation" title="{{lang_rotationTooltip}}"><span
-										class="glyphicon glyphicon-question-sign"></span></a>
+						<div class="list-group-item m1-s m2-h m3-s m4-s">
+							<div class="row">
+								<div class="col-md-3">
+									<label>{{lang_rotation}}</label>
+								</div>
+								<div class="col-md-7">
+									<select class="form-control" id="rotation" name="rotation">
+										<option value="0">{{lang_rotation0}}</option>
+										<option value="3">{{lang_rotation3}}</option>
+										<option value="2">{{lang_rotation2}}</option>
+										<option value="1">{{lang_rotation1}}</option>
+									</select>
+								</div>
+								<div class="col-md-2">
+									<a class="btn btn-default helptext" title="{{lang_rotationTooltip}}">
+										<span class="glyphicon glyphicon-question-sign"></span>
+									</a>
+								</div>
 							</div>
 						</div>
-					</div>
 
-					<div class="list-group-item" id="item-scale">
-						<div class="row">
-							<div class="col-md-3">
-								<label>{{lang_scale}}</label>
-							</div>
-							<div class="col-md-7">
-								<span id="scale">50 %</span>
-								<input name="scale" id="sl_scale" type="range" step="1" min="10" max="90" value="50"
-										 oninput="showScaleValue(this.value)"
-										 onchange="modifyCustomUrl('&amp;scale=', this.value);"/>
-							</div>
-							<div class="col-md-2">
-								<a class="btn btn-default" id="help-scale" title="{{lang_scaleTooltip}}"><span
-										class="glyphicon glyphicon-question-sign"></span></a>
+						<div class="list-group-item m1-s m2-h m3-h m4-h">
+							<div class="row">
+								<div class="col-md-3">
+									<label>{{lang_scale}}</label>
+								</div>
+								<div class="col-md-7">
+									<span><span class="range-display"></span>&thinsp;%</span>
+									<input name="scale" type="range" step="1" min="10" max="90" value="{{scale}}">
+								</div>
+								<div class="col-md-2">
+									<a class="btn btn-default helptext" title="{{lang_scaleTooltip}}">
+										<span class="glyphicon glyphicon-question-sign"></span>
+									</a>
+								</div>
 							</div>
 						</div>
-					</div>
 
-					<div class="list-group-item" id="item-switchtime">
-						<div class="row">
-							<div class="col-md-3">
-								<label>{{lang_switchTime}}</label>
-							</div>
-							<div class="col-md-7">
-								<span id="switch">20 {{lang_sec}}</span>
-								<input name="switchtime" id="sl_switch" type="range" step="1" min="1" max="120" value="20"
-										 oninput="showSwitchValue(this.value)"
-										 onchange="modifyCustomUrl('&amp;switchtime=', this.value);"/>
-							</div>
-							<div class="col-md-2">
-								<a class="btn btn-default" id="help-switchtime" title="{{lang_switchTimeTooltip}}"><span
-										class="glyphicon glyphicon-question-sign"></span></a>
+						<div class="list-group-item m1-h m2-h m3-h m4-s">
+							<div class="row">
+								<div class="col-md-3">
+									<label>{{lang_switchTime}}</label>
+								</div>
+								<div class="col-md-7">
+									<span><span class="range-display"></span>&thinsp;{{lang_sec}}</span>
+									<input name="switchtime" type="range" step="1" min="1" max="120" value="{{switchtime}}">
+								</div>
+								<div class="col-md-2">
+									<a class="btn btn-default helptext" title="{{lang_switchTimeTooltip}}">
+										<span class="glyphicon glyphicon-question-sign"></span>
+									</a>
+								</div>
 							</div>
 						</div>
-					</div>
 
+					</div>
 				</div>
 			</div>
-		</div>
-
-		<div class="panel panel-default">
-			<div class="panel-heading">{{lang_updateRates}}</div>
-			<div class="panel-body">
-				<div class="list-group">
 
-					<div class="list-group-item">
-						<div class="row">
-							<div class="col-md-3">
-								<label>{{lang_calendar}}</label>
-							</div>
-							<div class="col-md-7">
-								<input class="form-control" id="updateCalendar" name="calupdate" type="number" min="0"
-										 max="1440" onchange="modifyCustomUrl('&amp;calupdate=', this.value);"/>
-							</div>
-							<div class="col-md-2">
-								<a class="btn btn-default" id="help-updatecalendar" title="{{lang_calupdateTooltip}}"><span
-										class="glyphicon glyphicon-question-sign"></span></a>
+			<div class="panel panel-default">
+				<div class="panel-heading">{{lang_updateRates}}</div>
+				<div class="panel-body">
+					<div class="list-group">
+
+						<div class="list-group-item">
+							<div class="row">
+								<div class="col-md-3">
+									<label>{{lang_calendar}}</label>
+								</div>
+								<div class="col-md-7">
+									<input class="form-control" name="calupdate" type="number" min="0"
+											 max="1440" value="{{calupdate}}">
+								</div>
+								<div class="col-md-2">
+									<a class="btn btn-default helptext" title="{{lang_calupdateTooltip}}">
+										<span class="glyphicon glyphicon-question-sign"></span>
+									</a>
+								</div>
 							</div>
 						</div>
-					</div>
 
-					<div class="list-group-item">
-						<div class="row">
-							<div class="col-md-3">
-								<label>{{lang_room}}</label>
-							</div>
-							<div class="col-md-7">
-								<input class="form-control" id="updateRoom" name="roomupdate" type="number" min="0" max="86400"
-										 onchange="modifyCustomUrl('&amp;roomupdate=', this.value);"/>
-							</div>
-							<div class="col-md-2">
-								<a class="btn btn-default" id="help-updateroom" title="{{lang_roomupdateTooltip}}"><span
-										class="glyphicon glyphicon-question-sign"></span></a>
+						<div class="list-group-item">
+							<div class="row">
+								<div class="col-md-3">
+									<label>{{lang_room}}</label>
+								</div>
+								<div class="col-md-7">
+									<input class="form-control" name="roomupdate" type="number" min="0"
+											 max="86400" value="{{roomupdate}}">
+								</div>
+								<div class="col-md-2">
+									<a class="btn btn-default helptext" title="{{lang_roomupdateTooltip}}">
+										<span class="glyphicon glyphicon-question-sign"></span>
+									</a>
+								</div>
 							</div>
 						</div>
-					</div>
 
-					<div class="list-group-item">
-						<div class="row">
-							<div class="col-md-3">
-								<label>{{lang_config}}</label>
-							</div>
-							<div class="col-md-7">
-								<input class="form-control" id="updateConfig" name="configupdate" type="number" min="0"
-										 max="1440" onchange="modifyCustomUrl('&amp;configupdate=', this.value);"/>
-							</div>
-							<div class="col-md-2">
-								<a class="btn btn-default" id="help-updateconfig" title="{{lang_configupdateTooltip}}"><span
-										class="glyphicon glyphicon-question-sign"></span></a>
+						<div class="list-group-item">
+							<div class="row">
+								<div class="col-md-3">
+									<label>{{lang_config}}</label>
+								</div>
+								<div class="col-md-7">
+									<input class="form-control" name="configupdate" type="number" min="0"
+											 max="1440" value="{{configupdate}}">
+								</div>
+								<div class="col-md-2">
+									<a class="btn btn-default helptext" title="{{lang_configupdateTooltip}}">
+										<span class="glyphicon glyphicon-question-sign"></span>
+									</a>
+								</div>
 							</div>
 						</div>
-					</div>
 
+					</div>
 				</div>
 			</div>
 		</div>
 
 		<div class="panel panel-default">
-			<div class="panel-heading">{{lang_customUrl}}</div>
+			<div class="panel-heading">
+				<a class="btn btn-default helptext pull-right" title="{{lang_customUrlTooltip}}">
+					<span class="glyphicon glyphicon-question-sign"></span>
+				</a>
+				{{lang_customUrl}}
+				<div class="clearfix"></div>
+			</div>
 			<div class="panel-body">
-				<div class="list-group">
-
-					<div class="list-group-item">
-						<div class="row">
-							<div class="col-md-3">
-								<label>{{lang_serverUrl}}</label>
-							</div>
-							<div class="col-md-7">
-								<input readonly class="form-control" id="custom-url" type="text"/>
-							</div>
-							<div class="col-md-2">
-								<a class="btn btn-default" id="help-customURL" title="{{lang_customUrlTooltip}}"><span
-										class="glyphicon glyphicon-question-sign"></span></a>
-							</div>
-						</div>
-					</div>
-
-				</div>
+				<textarea rows="5" readonly class="form-control" id="custom-url"></textarea>
 			</div>
 		</div>
 	</form>
 </div>
 
-<script type="text/javascript">
+<script type="text/javascript"><!--
 
-	var customURL = "http://" + window.location.hostname + "/slx-admin/modules-available/locationinfo/frontend/doorsign.html?id={{id}}";
+	var customURL = window.location.protocol + "//" + window.location.hostname + "/slx-admin/modules/locationinfo/frontend/doorsign.html?id={{id}}";
 	$('#custom-url').val(customURL);
-	var autoscale = '{{scaledaysauto}}';
-	initBootstrap();
+	var $inputs = $('.modify-inputs input, .modify-inputs select');
+	$('a.helptext').tooltip();
+	$('input[type="range"]').change(function () {
+		$(this).siblings().find('.range-display').text($(this).val());
+	});
 	loadValues();
-	initCustomUrl();
+	buildCustomUrl();
 
-	/**
-	 * Initialize the url preview.
-	 */
-	function initCustomUrl() {
-		$('#daystoshow').change();
-		$('#rotation').change();
-		$('#sl_scale').change();
-		$('#sl_switch').change();
-		$('#updateCalendar').change();
-		$('#updateRoom').change();
-		$('#updateConfig').change();
-		$('#language').change();
-		$('#mode').change();
-	}
+	$inputs.change(function () {
+		$this = $(this);
+		if ($this.attr('type') === 'hidden')
+			return;
+		buildCustomUrl();
+	});
 
 	/**
 	 * Modifies the url preview.
 	 */
-	function modifyCustomUrl(parameter, value) {
-		if (!value) {
-			var reExp = new RegExp(parameter +"[0-9a-zA-Z]*");
-			customURL = customURL.replace(reExp, "");
-		} else if (customURL.search(parameter) > 0) {
-			var reExp = new RegExp(parameter +"[0-9a-zA-Z]*");
-			customURL = customURL.replace(reExp, parameter + value);
-		} else {
-			customURL += parameter + value;
-		}
-
-		$('#custom-url').val(customURL);
-
-		console.log(customURL);
-	}
-
-	/**
-	 * Initialize the bootstrap elements.
-	 */
-	function initBootstrap() {
-		// Init Bootstrap stuff.
-		$('#help-updateroom').tooltip();
-		$('#help-updateconfig').tooltip();
-		$('#help-updatecalendar').tooltip();
-		$('#help-daystoshow').tooltip();
-		$('#help-rotation').tooltip();
-		$('#help-server').tooltip();
-		$('#help-roomId').tooltip();
-		$('#help-language').tooltip();
-		$('#help-mode').tooltip();
-		$('#help-eco').tooltip();
-		$('#help-vertical').tooltip();
-		$('#help-autoscale').tooltip();
-		$('#help-scale').tooltip();
-		$('#help-switchtime').tooltip();
-		$('#help-customURL').tooltip();
-	}
-
-	/**
-	 * Converts an int value to bool. 1 = true else false
-	 */
-	function intToBool(int) {
-		if (int == 1) {
-			return true;
-		} else {
-			return false;
-		}
-	}
-
-	/**
-	 * Loads the Values in the config form elements.
-	 */
-	function loadValues() {
-		$("#lang-{{language}}").attr("selected", "selected");
-
-		$('#serverOption-{{serverid}}').attr("selected", "selected");
-
-		var mode = $("#{{mode}}");
-		if (!mode.length) {
-			mode = $("#mode1");
-		}
-		mode.attr("selected", "selected");
-
-		$('#cb_vertical').bootstrapSwitch({
-			state: '{{vertical}}',
-			size: 'small'
-		});
-		$('#cb_vertical').on('switchChange.bootstrapSwitch', function(e, value) {
-			if (value) {
-				$('#cb_input_vertical').val(1);
-			} else {
-				$('#cb_input_vertical').val(0);
-			}
-			modifyCustomUrl("&vertical=", value);
-		});
-
-		modifyCustomUrl("&vertical=", intToBool({{vertical}}));
-
-		$('#cb_eco').bootstrapSwitch({
-			state: '{{eco}}',
-			size: 'small'
-		});
-		$('#cb_eco').on('switchChange.bootstrapSwitch', function(e, value) {
-			if (value) {
-				$('#cb_input_eco').val(1);
-			} else {
-				$('#cb_input_eco').val(0);
-			}
-			modifyCustomUrl("&eco=", value);
-		});
-		modifyCustomUrl("&eco=", intToBool({{eco}}));
-
-		$('#cb_autoScale').bootstrapSwitch({
-			state: '{{scaledaysauto}}',
-			size: 'small'
-		});
-
-		$('#cb_autoScale').on('switchChange.bootstrapSwitch', function(e, value) {
-			if (value) {
-				$('#cb_input_autoScale').val(1);
+	function buildCustomUrl() {
+		var str = Array.prototype.reduce.call($inputs, function (acc, val) {
+			if (val.type && val.type === 'radio' && !val.checked)
+				return acc;
+			var v;
+			if (val.type && val.type === 'checkbox') {
+				v = val.checked ? val.value : '';
 			} else {
-				$('#cb_input_autoScale').val(0);
+				v = val.value;
 			}
-			autoScaleChange(value);
-			modifyCustomUrl("&scaledaysauto=", value);
-		});
-		modifyCustomUrl("&scaledaysauto=", intToBool({{scaledaysauto}}));
-
-		var day = $("#{{daystoshow}}");
-		if (!day.length) {
-			day = $("#day7");
-		}
-		day.attr("selected", "selected");
-
-		var rotation = $("#{{rotation}}");
-		if (!rotation.length) {
-			rotation = $("#rotation0");
-		}
-		rotation.attr("selected", "selected");
-
-		var scaleVal = '{{scale}}';
-		if (scaleVal == '') {
-			scaleVal = 50;
-		}
-		$('#sl_scale').attr('value', '{{scale}}');
-		showScaleValue(scaleVal);
-
-		var switchVal = '{{switchtime}}';
-		if (switchVal == '') {
-			switchVal = 20;
-		}
-		$("#sl_switch").attr('value', switchVal);
-		showSwitchValue(switchVal);
-
-		var calupdate = '{{calupdate}}';
-		if (!calupdate.length) {
-			calupdate = 30;
-		}
-		$("#updateCalendar").attr("value", calupdate);
-
-		var roomupdate = '{{roomupdate}}';
-		if (!roomupdate.length) {
-			roomupdate = 30;
-		}
-		$("#updateRoom").attr("value", roomupdate);
-
-		var configupdate = '{{configupdate}}';
-		if (!configupdate.length) {
-			configupdate = 180;
-		}
-		$("#updateConfig").attr("value", configupdate);
-
-		modeChange(mode.val());
-	}
+			return acc + '&' + encodeURIComponent(val.name) + '=' + encodeURIComponent(v);
+		}, '');
 
-	/**
-	 * Updates the value from the scale slider.
-	 *
-	 * @param newValue The new value the scale slider was set to.
-	 */
-	function showScaleValue(newValue) {
-		$("#scale").text(newValue + " %");
+		$('#custom-url').val(customURL + str);
 	}
 
 	/**
-	 * Updates the value from the switchtime slider.
-	 *
-	 * @param newValue The new value the switchtime slider was set to.
+	 * Loads the Values in the config form elements.
 	 */
-	function showSwitchValue(newValue) {
-		$("#switch").text(newValue + " " + '{{lang_sec}}');
+	function loadValues() {
+		$('.modify-inputs input[type="checkbox"]')
+				.bootstrapSwitch({size: 'small'})
+				.on('switchChange.bootstrapSwitch', function () {
+					buildCustomUrl();
+					if (this.name === 'scaledaysauto') {
+						$('#daystoshow').prop('disabled', this.checked);
+					}
+				});
+
+		$('#daystoshow option[value="{{daystoshow}}"]').attr("selected", "selected");
+		$('#rotation option[value="{{rotation}}"]').attr("selected", "selected");
+		$('#mode option[value="{{mode}}"]').attr("selected", "selected");
+
+		$('#daystoshow').prop('disabled', document.getElementById('scaledaysauto').checked);
+
+		$('input[type="range"]').change();
+		modeChange();
 	}
 
 	/**
 	 * If the mode was changed the mode settings have to be adjusted.
-	 *
-	 * @param value The new mode that was set. 1-4
-	 */
-	function modeChange(value) {
-		$('#item-vertical').hide();
-		$('#item-autoscale').hide();
-		$('#item-daystoshow').hide();
-		$('#item-rotation').hide();
-		$('#item-scale').hide();
-		$('#item-switchtime').hide();
-
-		autoScaleChange(autoscale);
-
-		if (value == "1") {
-			$('#item-vertical').show();
-			$('#item-autoscale').show();
-			$('#item-rotation').show();
-			$('#item-scale').show();
-		} else if (value == "2"){
-			$('#item-autoscale').show();
-		} else if (value == "3"){
-			$('#item-rotation').show();
-			$('#item-daystoshow').hide();
-		} else if (value == "4"){
-			$('#item-autoscale').show();
-			$('#item-rotation').show();
-			$('#item-switchtime').show();
-		}
-	}
-
-	/**
-	 * If the auto scale changes the days to show must be shown / hided
-	 *
-	 * @param value The new value of the autoscale switch.
 	 */
-	function autoScaleChange(value) {
-		autoscale = value;
-		if (value) {
-			$('#item-daystoshow').hide();
-		} else {
-			$('#item-daystoshow').show();
-		}
+	function modeChange() {
+		var value = $('#mode').val();
+		$('.m' + value + '-h').hide();
+		$('.m' + value + '-s').show();
 	}
 
-</script>
+//--></script>