moving UI to new boxes

WebContent/gui/OSRM.MainGUI.js

@@ -52,7 +52,6 @@ setLabels: function() {
 	document.getElementById("gui-reset").innerHTML = OSRM.loc("GUI_RESET");
 	document.getElementById("gui-reverse").innerHTML = OSRM.loc("GUI_REVERSE");
 	document.getElementById("gui-option-highlight-nonames-label").innerHTML = OSRM.loc("GUI_HIGHLIGHT_UNNAMED_ROADS");
-	document.getElementById("gui-options-toggle").innerHTML = OSRM.loc("GUI_OPTIONS");
 	document.getElementById("gui-search-source").innerHTML = OSRM.loc("GUI_SEARCH");
 	document.getElementById("gui-search-target").innerHTML = OSRM.loc("GUI_SEARCH");
 	document.getElementById("gui-search-source-label").innerHTML = OSRM.loc("GUI_START")+":";
@@ -68,15 +67,6 @@ clearResults: function() {
 	document.getElementById('information-box-header').innerHTML = "";	
 },
 
-// show/hide small options bubble
-toggleOptions: function() {
-	if(document.getElementById('options-box').style.visibility=="visible") {
-		document.getElementById('options-box').style.visibility="hidden";
-	} else {
-		document.getElementById('options-box').style.visibility="visible";
-	}
-},
-	
 // reposition and hide zoom controls before main box animation
 beforeMainTransition: function() {
 	var zoom_controls = OSRM.Browser.getElementsByClassName(document,'leaflet-control-zoom');

WebContent/gui/OSRM.RoutingGUI.js

@@ -37,7 +37,6 @@ init: function() {
 	
 	document.getElementById("gui-reset").onclick = OSRM.GUI.resetRouting;
 	document.getElementById("gui-reverse").onclick = OSRM.GUI.reverseRouting;
-	document.getElementById("gui-options-toggle").onclick = OSRM.GUI.toggleOptions;
 	document.getElementById("open-josm").onclick = OSRM.GUI.openJOSM;
 	document.getElementById("open-osmbugs").onclick = OSRM.GUI.openOSMBugs;
 	document.getElementById("option-highlight-nonames").onclick = OSRM.Routing.getZoomRoute;	

WebContent/main.css

@@ -117,14 +117,46 @@ html, body {
 #main-input
 {
 	width:390px;
-	height:200px;
+	height:140px;
 }
 #main-output
 {
 	width:390px;
-	top:220px;			/* main-input.height+2*gui-box.margin+2*gui-box.padding */
+	top:160px;			/* main-input.height+2*gui-box.margin+2*gui-box.padding */
 	bottom:0px;
 }
+#mapping-wrapper
+{
+	width:410px;
+	height:100px;
+	bottom:25px;
+	right:-410px;
+}
+#mapping-content
+{
+	width:390px;
+	height:80px;	
+}
+#config-wrapper
+{
+	width:410px;
+	height:100px;
+	bottom:25px;
+	right:-410px;
+}
+#config-content
+{
+	width:390px;
+	height:80px;	
+}
+
+
+/* general styles for gui box content */
+div.label
+{
+	font-weight:bold;
+	margin-bottom:10px;
+}
 
 
 /* styles for main-input areas */

WebContent/main.html

@@ -83,21 +83,41 @@ or see http://www.gnu.org/licenses/agpl.txt.
 <!--map-->
 <div id="map"></div>
 
-<div id="config-wrapper" class="box-wrapper not-sectable" style="width:410px;height:100px;bottom:25px;right:-410px;">
+<!-- config gui -->
-<div id="config-content" class="box-content" style="width:390px;height:80px;">
+<div id="config-wrapper" class="box-wrapper not-sectable">
+<div id="config-content" class="box-content">
 <div id="config-toggle" class="iconic-button cancel-marker top-right-button"></div>
-Config block
+
+<div id="config-label" class="label">Configuraion</div>
+<div class="full">
+<div class="row"><div class="left">Language:</div><div class="left">German</div></div>
+<div class="row"><div class="left">Units:</div><div class="left">Miles</div></div>
+</div>
+
 </div>
 </div>
 
-<div id="mapping-wrapper" class="box-wrapper not-sectable" style="width:410px;height:100px;bottom:25px;right:-410px;">
+<!-- mapping gui -->
-<div id="mapping-content" class="box-content" style="width:390px;height:80px;">
+<div id="mapping-wrapper" class="box-wrapper not-sectable">
+<div id="mapping-content" class="box-content">
 <div id="mapping-toggle" class="iconic-button cancel-marker top-right-button"></div>
-Mapping block
+
+<div id="mapping-label" class="label">Mapping Tools</div>
+<div class="full">
+<div class="left">
+<input type="checkbox" id="option-highlight-nonames" value="highlight-nonames" />
+<span id="gui-option-highlight-nonames-label" class="checkbox-label small-font">Highlight unnamed streets</span>
+</div>
+<div class="right">
+<a class="button" id="open-josm">JOSM</a>
+<a class="button" id="open-osmbugs">OSM Bugs</a>
 </div>
 </div>
 
-<!-- show main gui -->
+</div>
+</div>
+
+<!-- main gui -->
 <div id="main-wrapper" class="box-wrapper not-selectable">
 
 <!-- input box -->
@@ -134,27 +154,6 @@ Mapping block
 	<div class="right"><a class="button" id="gui-reverse">Reverse</a></div>
     </div>
     </div>
-
-	<div class="quad"></div>
-
-	<!-- options -->
-	<div id="input-mask-options">
-	
-	<!-- option toggle -->
-	<span id="gui-options-toggle" class="small-font">Mapping Tools</span>
-	
-	<!-- actual options -->
-	<div id="options-box" class="full">
-	<div class="left">
-	<input type="checkbox" id="option-highlight-nonames" value="highlight-nonames" />
-	<span id="gui-option-highlight-nonames-label" class="checkbox-label small-font">Highlight unnamed streets</span>
-	</div>
-	<div class="right">
-	<a class="button" id="open-josm">JOSM</a>
-	<a class="button" id="open-osmbugs">OSM Bugs</a>
-	</div>
-	</div>
-	</div>
 </div>
 
 <!-- output box -->

WebContent/main.js

@@ -59,6 +59,12 @@ OSRM.prefetchImages = function() {
 		              	{id:'restore',							url:'images/restore.png'},
 		              	{id:'restore_active',					url:'images/restore_active.png'},
 		              	{id:'restore_hover',					url:'images/restore_hover.png'},
+		              	{id:'config',							url:'images/config.png'},
+		              	{id:'config_active',					url:'images/config_active.png'},
+		              	{id:'config_hover',						url:'images/config_hover.png'},		              	
+		              	{id:'mapping',							url:'images/mapping.png'},
+		              	{id:'mapping_active',					url:'images/mapping_active.png'},
+		              	{id:'mapping_hover',					url:'images/mapping_hover.png'},		              	
 		              	{id:'printer',							url:'images/printer.png'},
 		              	{id:'printer_active',					url:'images/printer_active.png'},
 		              	{id:'printer_hover',					url:'images/printer_hover.png'},
@@ -129,13 +135,13 @@ OSRM.prefetchCSSIcons = function() {
 	                	{ id:'#input-mask-header',			image_id:'osrm-logo'},
 	                	{ id:'.styled-select',				image_id:'selector'},
 	                	
-	                	{ id:'#config-handle-icon',			image_id:'cancel'},
+	                	{ id:'#config-handle-icon',			image_id:'config'},
-	                	{ id:'#config-handle-icon:hover',	image_id:'cancel_hover'},
+	                	{ id:'#config-handle-icon:hover',	image_id:'config_hover'},
-	                	{ id:'#config-handle-icon:active',	image_id:'cancel_active'},
+	                	{ id:'#config-handle-icon:active',	image_id:'config_active'},
 	                	           	
-	                	{ id:'#mapping-handle-icon',		image_id:'cancel'},
+	                	{ id:'#mapping-handle-icon',		image_id:'mapping'},
-	                	{ id:'#mapping-handle-icon:hover',	image_id:'cancel_hover'},
+	                	{ id:'#mapping-handle-icon:hover',	image_id:'mapping_hover'},
-	                	{ id:'#mapping-handle-icon:active',	image_id:'cancel_active'},
+	                	{ id:'#mapping-handle-icon:active',	image_id:'mapping_active'},
 	                	          	
 	                	{ id:'#main-handle-icon',			image_id:'restore'},
 	                	{ id:'#main-handle-icon:hover',		image_id:'restore_hover'},