Merge remote-tracking branch 'origin/trial/printing' into trial/printing

Conflicts: WebContent/OSRM.GUI.js
2012-04-09 22:35:47 +02:00 · 2012-04-09 22:35:47 +02:00 · 893c09f6fc
commit 893c09f6fc
parent dc192d47a8 213bb71b35
15 changed files with 529 additions and 483 deletions
--- a/WebContent/OSRM.GUI.js
+++ b/WebContent/OSRM.GUI.js
@ -30,8 +30,36 @@ init: function() {
 	OSRM.GUI.visible = true;
 	OSRM.GUI.width = document.getElementById("main-wrapper").clientWidth;
 	
-	document.getElementById('input-source-name').value = OSRM.DEFAULTS.ONLOAD_SOURCE;
-	document.getElementById('input-target-name').value = OSRM.DEFAULTS.ONLOAD_TARGET;	
+	// init events
+	// [TODO: switch to new event model]
+	document.getElementById("gui-toggle-in").onclick = OSRM.GUI.toggleMain;
+	document.getElementById("gui-toggle-out").onclick = OSRM.GUI.toggleMain;
+	document.getElementById("gui-printer").onclick = OSRM.Printing.print;
+	
+	document.getElementById("gui-input-source").onchange = function() {OSRM.RoutingGUI.inputChanged(OSRM.C.SOURCE_LABEL);};
+	document.getElementById("gui-input-source").onkeyup = function(e) {OSRM.RoutingGUI.keyUp(e,OSRM.C.SOURCE_LABEL);};
+	document.getElementById("gui-delete-source").onclick = function() {OSRM.RoutingGUI.deleteMarker(OSRM.C.SOURCE_LABEL);};
+	document.getElementById("gui-search-source").onclick = function() {OSRM.RoutingGUI.showMarker(OSRM.C.SOURCE_LABEL);};	
+	
+	document.getElementById("gui-input-target").onchange = function() {OSRM.RoutingGUI.inputChanged(OSRM.C.TARGET_LABEL);};
+	document.getElementById("gui-input-target").onkeyup = function(e) {OSRM.RoutingGUI.keyUp(e,OSRM.C.TARGET_LABEL);};
+	document.getElementById("gui-delete-target").onclick = function() {OSRM.RoutingGUI.deleteMarker(OSRM.C.TARGET_LABEL);};
+	document.getElementById("gui-search-target").onclick = function() {OSRM.RoutingGUI.showMarker(OSRM.C.TARGET_LABEL);};
+	
+	document.getElementById("gui-reset").onclick = OSRM.RoutingGUI.resetRouting;
+	document.getElementById("gui-reverse").onclick = OSRM.RoutingGUI.reverseRouting;
+	document.getElementById("gui-options-toggle").onclick = OSRM.GUI.toggleOptions;
+	document.getElementById("open-josm").onclick = OSRM.RoutingGUI.openJOSM;
+	document.getElementById("open-osmbugs").onclick = OSRM.RoutingGUI.openOSMBugs;
+	document.getElementById("option-highlight-nonames").onclick = OSRM.Routing.getRoute;
+	
+	// gui after transition events
+	if( OSRM.Browser.FF3==-1 && OSRM.Browser.IE6_9==-1 ) {
+		document.getElementById('main-wrapper').addEventListener("transitionend", OSRM.GUI.onMainTransitionEnd, false);
+		document.getElementById('main-wrapper').addEventListener("webkitTransitionEnd", OSRM.GUI.onMainTransitionEnd, false);
+		document.getElementById('main-wrapper').addEventListener("oTransitionEnd", OSRM.GUI.onMainTransitionEnd, false);
+		document.getElementById('main-wrapper').addEventListener("MSTransitionEnd", OSRM.GUI.onMainTransitionEnd, false);
+	}	
 },

 // set language dependent labels
@ -41,14 +69,17 @@ setLanguage: 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("options-toggle").innerHTML = OSRM.loc("GUI_OPTIONS");
+	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")+":";
 	document.getElementById("gui-search-target-label").innerHTML = OSRM.loc("GUI_END")+":";
-	document.getElementById("input-source-name").title = OSRM.loc("GUI_START_TOOLTIP");
-	document.getElementById("input-target-name").title = OSRM.loc("GUI_END_TOOLTIP");
+	document.getElementById("gui-input-source").title = OSRM.loc("GUI_START_TOOLTIP");
+	document.getElementById("gui-input-target").title = OSRM.loc("GUI_END_TOOLTIP");
 	document.getElementById("legal-notice").innerHTML = OSRM.loc("GUI_LEGAL_NOTICE");
+	
+	document.getElementById('gui-input-source').value = OSRM.DEFAULTS.ONLOAD_SOURCE;
+	document.getElementById('gui-input-target').value = OSRM.DEFAULTS.ONLOAD_TARGET;	
 },
 		
 // show/hide main-gui
@ -68,15 +99,9 @@ toggleMain: function() {
 		document.getElementById('main-wrapper').style.left=-OSRM.GUI.width+"px";
 	}

-	// execute after animation
-	if( OSRM.Browser.FF3==-1 && OSRM.Browser.IE6_9==-1 ) {
-		document.getElementById('main-wrapper').addEventListener("transitionend", OSRM.GUI.onMainTransitionEnd, false);
-		document.getElementById('main-wrapper').addEventListener("webkitTransitionEnd", OSRM.GUI.onMainTransitionEnd, false);
-		document.getElementById('main-wrapper').addEventListener("oTransitionEnd", OSRM.GUI.onMainTransitionEnd, false);
-		document.getElementById('main-wrapper').addEventListener("MSTransitionEnd", OSRM.GUI.onMainTransitionEnd, false);
-	} else {
+	// execute after animation (old browser support)
+	if( OSRM.Browser.FF3!=-1 || OSRM.Browser.IE6_9!=-1 )
 		OSRM.GUI.onMainTransitionEnd();		
-	}
 },

 // do stuff after main-gui animation finished
@ -102,4 +127,4 @@ toggleOptions: function() {
 	}
 }

-};
+};
--- a/WebContent/OSRM.Geocoder.js
+++ b/WebContent/OSRM.Geocoder.js
@ -60,7 +60,8 @@ _onclickResult: function(marker_id, lat, lon) {
 	
 	OSRM.G.markers.route[index].show();
 	OSRM.G.markers.route[index].centerView();	
-	OSRM.Routing.getRoute();
+	if( OSRM.G.markers.route.length > 1 )
+		OSRM.Routing.getRoute();
 },


@ -76,9 +77,14 @@ _showResults: function(response, parameters) {
 		return;
 	}
 	
+	// show first result
+	OSRM.Geocoder._onclickResult(parameters.marker_id, response[0].lat, response[0].lon);
+	if( OSRM.G.markers.route.length > 1 )
+		return;
+	
 	// show possible results for input
 	var html = "";
-	html += '<table class="results-table">';	
+	html += '<table class="results-table medium-font">';	
 	for(var i=0; i < response.length; i++){
 		var result = response[i];

@ -97,23 +103,27 @@ _showResults: function(response, parameters) {
 	}
 	html += '</table>';
 		
-	document.getElementById('information-box-headline').innerHTML = OSRM.loc("SEARCH_RESULTS")+":";
+	document.getElementById('information-box-header').innerHTML = 
+		"<div class='header-title'>"+OSRM.loc("SEARCH_RESULTS")+"</div>" +
+		"<div class='header-content'>(found "+response.length+" results)"+"</div>";
 	document.getElementById('information-box').innerHTML = html;
-
-	OSRM.Geocoder._onclickResult(parameters.marker_id, response[0].lat, response[0].lon);
 },
 _showResults_Empty: function(parameters) {
-	document.getElementById('information-box-headline').innerHTML = OSRM.loc("SEARCH_RESULTS")+":";
+	document.getElementById('information-box-header').innerHTML =
+		"<div class='header-title'>"+OSRM.loc("SEARCH_RESULTS")+"</div>" +
+		"<div class='header-content'>(found 0 results)"+"</div>";		
 	if(parameters.marker_id == OSRM.C.SOURCE_LABEL)
-		document.getElementById('information-box').innerHTML = "<br><p style='font-size:14px;font-weight:bold;text-align:center;'>"+OSRM.loc("NO_RESULTS_FOUND_SOURCE")+": "+parameters.query +".<p>";
+		document.getElementById('information-box').innerHTML = "<div class='no-results big-font'>"+OSRM.loc("NO_RESULTS_FOUND_SOURCE")+": "+parameters.query +"</div>";
 	else if(parameters.marker_id == OSRM.C.TARGET_LABEL)
-		document.getElementById('information-box').innerHTML = "<br><p style='font-size:14px;font-weight:bold;text-align:center;'>"+OSRM.loc("NO_RESULTS_FOUND_TARGET")+": "+parameters.query +".<p>";
+		document.getElementById('information-box').innerHTML = "<div class='no-results big-font'>"+OSRM.loc("NO_RESULTS_FOUND_TARGET")+": "+parameters.query +"</div>";
 	else
-		document.getElementById('information-box').innerHTML = "<br><p style='font-size:14px;font-weight:bold;text-align:center;'>"+OSRM.loc("NO_RESULTS_FOUND")+": "+parameters.query +".<p>";
+		document.getElementById('information-box').innerHTML = "<div class='no-results big-font'>"+OSRM.loc("NO_RESULTS_FOUND")+": "+parameters.query +"</div>";
 },
 _showResults_Timeout: function() {
-	document.getElementById('information-box-headline').innerHTML = OSRM.loc("SEARCH_RESULTS")+":";
-	document.getElementById('information-box').innerHTML = "<br><p style='font-size:14px;font-weight:bold;text-align:center;'>"+OSRM.loc("TIMED_OUT")+".<p>";	
+	document.getElementById('information-box-header').innerHTML =
+		"<div class='header-title'>"+OSRM.loc("SEARCH_RESULTS")+"</div>" +
+		"<div class='header-content'>(found 0 results)"+"</div>";		
+	document.getElementById('information-box').innerHTML = "<div class='no-results big-font'>"+OSRM.loc("TIMED_OUT")+"</div>";	
 },


@ -122,9 +132,9 @@ _showResults_Timeout: function() {
 //update geo coordinates in input boxes
 updateLocation: function(marker_id) {
 	if (marker_id == OSRM.C.SOURCE_LABEL && OSRM.G.markers.hasSource()) {
-		document.getElementById("input-source-name").value = OSRM.G.markers.route[0].getLat().toFixed(6) + ", " + OSRM.G.markers.route[0].getLng().toFixed(6);
+		document.getElementById("gui-input-source").value = OSRM.G.markers.route[0].getLat().toFixed(6) + ", " + OSRM.G.markers.route[0].getLng().toFixed(6);
 	} else if (marker_id == OSRM.C.TARGET_LABEL && OSRM.G.markers.hasTarget()) {
-		document.getElementById("input-target-name").value = OSRM.G.markers.route[OSRM.G.markers.route.length-1].getLat().toFixed(6) + ", " + OSRM.G.markers.route[OSRM.G.markers.route.length-1].getLng().toFixed(6);		
+		document.getElementById("gui-input-target").value = OSRM.G.markers.route[OSRM.G.markers.route.length-1].getLat().toFixed(6) + ", " + OSRM.G.markers.route[OSRM.G.markers.route.length-1].getLng().toFixed(6);		
 	}
 },

@ -192,9 +202,9 @@ _showReverseResults: function(response, parameters) {
 		
 	// add result to DOM
 	if(parameters.marker_id == OSRM.C.SOURCE_LABEL && OSRM.G.markers.hasSource() )
-		document.getElementById("input-source-name").value = address;
+		document.getElementById("gui-input-source").value = address;
 	else if(parameters.marker_id == OSRM.C.TARGET_LABEL && OSRM.G.markers.hasTarget() )
-		document.getElementById("input-target-name").value = address;
+		document.getElementById("gui-input-target").value = address;
 },
 _showReverseResults_Timeout: function(response, parameters) {
 	if(!parameters.do_fallback)
--- a/WebContent/OSRM.JSONP.js
+++ b/WebContent/OSRM.JSONP.js
@ -66,8 +66,8 @@ OSRM.JSONP = {
 				OSRM.JSONP.fences[id] = undefined;						// clean fence
 			}
 			
-			OSRM.JSONP.sum[id] += new Number( new Date() - OSRM.JSONP.durations[id] );
-			OSRM.debug.log("[jsonp] response handling: "+id+" "+ (OSRM.JSONP.sum[id]/OSRM.JSONP.counter[id]).toFixed(2) );
+//			OSRM.JSONP.sum[id] += new Number( new Date() - OSRM.JSONP.durations[id] );
+//			OSRM.debug.log("[jsonp] response handling: "+id+" "+ (OSRM.JSONP.sum[id]/OSRM.JSONP.counter[id]).toFixed(2) );
 		};
 		
 		// clean DOM (unfortunately, script elements cannot be reused by all browsers)
@ -85,9 +85,9 @@ OSRM.JSONP = {
 		// start timeout timer
 		OSRM.JSONP.timers[id] = setTimeout(OSRM.JSONP.timeouts[id], timeout);
 		
-		if(!OSRM.JSONP.durations) { OSRM.JSONP.durations = {}; OSRM.JSONP.counter = {}; OSRM.JSONP.sum = {}; }
-		if(OSRM.JSONP.counter[id]) OSRM.JSONP.counter[id]++; else {OSRM.JSONP.counter[id] = 1;OSRM.JSONP.sum[id] = 0;}
-		OSRM.JSONP.durations[id] = new Date();		
+//		if(!OSRM.JSONP.durations) { OSRM.JSONP.durations = {}; OSRM.JSONP.counter = {}; OSRM.JSONP.sum = {}; }
+//		if(OSRM.JSONP.counter[id]) OSRM.JSONP.counter[id]++; else {OSRM.JSONP.counter[id] = 1;OSRM.JSONP.sum[id] = 0;}
+//		OSRM.JSONP.durations[id] = new Date();		
 //		OSRM.debug.log("[jsonp] init: "+id);
 		
 		return true;
--- a/WebContent/OSRM.Localization.js
+++ b/WebContent/OSRM.Localization.js
@ -1,122 +0,0 @@
-/*
-This program is free software; you can redistribute it and/or modify
-it under the terms of the GNU AFFERO General Public License as published by
-the Free Software Foundation; either version 3 of the License, or
-any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program; if not, write to the Free Software
-Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA
-or see http://www.gnu.org/licenses/agpl.txt.
-*/
-
-// OSRM localization
-// [basic localization options]
-
-
-OSRM.Localization = {
-		
-// if existing, return localized string -> English string -> input string
-translate: function(text) {
-	if( OSRM.Localization[OSRM.DEFAULTS.LANGUAGE][text] )
-		return OSRM.Localization[OSRM.DEFAULTS.LANGUAGE][text];
-	else if( OSRM.Localization["en"][text] )
-		return OSRM.Localization["en"][text];
-	else
-		return text;
-}
-};
-
-// shorter call to translate function
-OSRM.loc = OSRM.Localization.translate;
-
-
-// German language support
-OSRM.Localization["de"] = {
-//gui
-"OPEN_JOSM": "JOSM",
-"OPEN_OSMBUGS": "OSM Bugs",
-"GUI_START": "Start",
-"GUI_END": "Ziel",
-"GUI_RESET": "Reset",
-"GUI_SEARCH": "Zeigen",
-"GUI_REVERSE": "Umdrehen",
-"GUI_OPTIONS": "Kartenwerkzeuge",
-"GUI_HIGHLIGHT_UNNAMED_ROADS": "Unbenannte Straßen hervorheben",
-"GUI_START_TOOLTIP": "Startposition eingeben",
-"GUI_END_TOOLTIP": "Zielposition eingeben",
-"GUI_LEGAL_NOTICE": "GUI2 v"+OSRM.VERSION+" "+OSRM.DATE+" - OSRM hosting by <a href='http://algo2.iti.kit.edu/'>KIT</a> - Geocoder by <a href='http://www.osm.org/'>OSM</a>",
-// geocoder
-"SEARCH_RESULTS": "Suchergebnisse",
-"TIMED_OUT": "Zeitüberschreitung",
-"NO_RESULTS_FOUND": "Keine Ergebnisse gefunden",
-"NO_RESULTS_FOUND_SOURCE": "Keine Ergebnisse gefunden für Start",
-"NO_RESULTS_FOUND_TARGET": "Keine Ergebnisse gefunden für Ziel",
-// routing
-"ROUTE_DESCRIPTION": "Routenbeschreibung",
-"GET_LINK_TO_ROUTE": "Generiere Link",
-"GENERATE_LINK_TO_ROUTE": "Warte auf Antwort",
-"LINK_TO_ROUTE_TIMEOUT": "nicht möglich",
-"GPX_FILE": "GPX Datei",
-"DISTANCE": "Distanz",
-"DURATION": "Dauer",
-"YOUR_ROUTE_IS_BEING_COMPUTED": "Ihre Route wird berechnet",
-"NO_ROUTE_FOUND": "Keine Route hierher möglich",
-// directions
-"N": "Norden",
-"O": "Ost",
-"S": "Süden",
-"W": "Westen",
-"NO": "Nordost",
-"SO": "Südost",
-"SW": "Südwest",
-"NW": "Nordwest"
-};
-
-
-// English language support
-OSRM.Localization["en"] = {
-//gui
-"OPEN_JOSM": "JOSM",
-"OPEN_OSMBUGS": "OSM Bugs",
-"GUI_START": "Start",
-"GUI_END": "End",
-"GUI_RESET": "&nbsp;&nbsp;Reset&nbsp;&nbsp;",
-"GUI_SEARCH": "&nbsp;&nbsp;Show&nbsp;&nbsp;",
-"GUI_REVERSE": "Reverse",
-"GUI_OPTIONS": "Mapping Tools",
-"GUI_HIGHLIGHT_UNNAMED_ROADS": "Highlight unnamed streets",
-"GUI_START_TOOLTIP": "Enter start",
-"GUI_END_TOOLTIP": "Enter destination",
-"GUI_LEGAL_NOTICE": "GUI2 v"+OSRM.VERSION+" "+OSRM.DATE+" - OSRM hosting by <a href='http://algo2.iti.kit.edu/'>KIT</a> - Geocoder by <a href='http://www.osm.org/'>OSM</a>",
-// geocoder
-"SEARCH_RESULTS": "Search Results",
-"TIMED_OUT": "Timed Out",
-"NO_RESULTS_FOUND": "No results found",
-"NO_RESULTS_FOUND_SOURCE": "No results found for start",
-"NO_RESULTS_FOUND_TARGET": "No results found for end",
-//routing
-"ROUTE_DESCRIPTION": "Route Description",
-"GET_LINK_TO_ROUTE": "Generate Link",
-"GENERATE_LINK_TO_ROUTE": "waiting for link",
-"LINK_TO_ROUTE_TIMEOUT": "not available",
-"GPX_FILE": "GPX File",
-"DISTANCE": "Distance",
-"DURATION": "Duration",
-"YOUR_ROUTE_IS_BEING_COMPUTED": "Your route is being computed",
-"NO_ROUTE_FOUND": "No route possible",
-// directions
-"N": "north",
-"E": "east",
-"S": "south",
-"W": "west",
-"NE": "northeast",
-"SE": "southeast",
-"SW": "southwest",
-"NW": "northwest"
-};
--- a/WebContent/OSRM.Markers.js
+++ b/WebContent/OSRM.Markers.js
@ -118,14 +118,15 @@ onDragEnd: function(e) {
 	this.switchIcon(this.options.baseicon);
 	
 	this.parent.setPosition( e.target.getLatLng() );	
-	OSRM.Routing.getRoute();
 	if (OSRM.G.route.isShown()) {
+		OSRM.Routing.getRoute();
 		OSRM.G.route.hideOldRoute();
 		OSRM.G.route.hideUnnamedRoute();
-	}
-	
-	if(OSRM.G.route.isShown()==false)
+	} else {
 		OSRM.Geocoder.updateAddress(this.parent.label);
+		document.getElementById('information-box').innerHTML = "";				// do we want this?
+		document.getElementById('information-box-header').innerHTML = "";
+	}
 },
 toString: function() {
 	return "OSRM.RouteMarker: \""+this.label+"\", "+this.position+")";
@ -174,8 +175,8 @@ removeAll: function() {
 	for(var i=0; i<this.route.length;i++)
 		this.route[i].hide();
 	this.route.splice(0, this.route.length);
-	document.getElementById('delete-source-marker').style.visibility = "hidden";
-	document.getElementById('delete-target-marker').style.visibility = "hidden";
+	document.getElementById('gui-delete-source').style.visibility = "hidden";
+	document.getElementById('gui-delete-target').style.visibility = "hidden";
 },
 removeVias: function() {
 	// assert correct route array s - v - t
@ -189,7 +190,7 @@ setSource: function(position) {
 		this.route[0].setPosition(position);
 	else
 		this.route.splice(0,0, new OSRM.RouteMarker(OSRM.C.SOURCE_LABEL, {draggable:true,icon:OSRM.G.icons['marker-source'],dragicon:OSRM.G.icons['marker-source-drag']}, position));
-	document.getElementById('delete-source-marker').style.visibility = "visible";
+	document.getElementById('gui-delete-source').style.visibility = "visible";
 	return 0;	
 },
 setTarget: function(position) {
@ -198,7 +199,7 @@ setTarget: function(position) {
 		this.route[this.route.length-1].setPosition(position);
 	else
 		this.route.splice( this.route.length,0, new OSRM.RouteMarker(OSRM.C.TARGET_LABEL, {draggable:true,icon:OSRM.G.icons['marker-target'],dragicon:OSRM.G.icons['marker-target-drag']}, position));
-	document.getElementById('delete-target-marker').style.visibility = "visible";
+	document.getElementById('gui-delete-target').style.visibility = "visible";
 	return this.route.length-1;
 },
 setVia: function(id, position) {
@ -216,17 +217,17 @@ removeMarker: function(id) {
 	// also remove vias if source or target are removed
 	if( id==0 && this.route[0].label == OSRM.C.SOURCE_LABEL ) {
 		this.removeVias();
-		document.getElementById('input-source-name').value = "";
+		document.getElementById('gui-input-source').value = "";
 		document.getElementById('information-box').innerHTML = "";
-		document.getElementById('information-box-headline').innerHTML = "";
-		document.getElementById('delete-source-marker').style.visibility = "hidden";
+		document.getElementById('information-box-header').innerHTML = "";
+		document.getElementById('gui-delete-source').style.visibility = "hidden";
 	} else if( id == this.route.length-1 && this.route[ this.route.length-1 ].label == OSRM.C.TARGET_LABEL ) {
 		this.removeVias();
 		id = this.route.length-1;
-		document.getElementById('input-target-name').value = "";
+		document.getElementById('gui-input-target').value = "";
 		document.getElementById('information-box').innerHTML = "";
-		document.getElementById('information-box-headline').innerHTML = "";
-		document.getElementById('delete-target-marker').style.visibility = "hidden";
+		document.getElementById('information-box-header').innerHTML = "";
+		document.getElementById('gui-delete-target').style.visibility = "hidden";
 	}
 	
 	this.route[id].hide();
--- a/WebContent/OSRM.debug.js
+++ b/WebContent/OSRM.debug.js
@ -60,7 +60,10 @@ OSRM.debug.init = function() {
 	box.appendChild(clear);
 	box.appendChild(OSRM.debug.content);
 };
+
+
+// onload event
 if(document.addEventListener)	// FF, CH
 	document.addEventListener("DOMContentLoaded", OSRM.debug.init, false);
 else	// IE
-	OSRM.debug.init();
+	document.onreadystatechange = function(){if(document.readyState == "interactive" || document.readyState == "complete") OSRM.debug.init();};
--- a/WebContent/localization/OSRM.Locale.de.js
+++ b/WebContent/localization/OSRM.Locale.de.js
@ -57,8 +57,30 @@ OSRM.Localization["de"] = {
 "NO": "Nordost",
 "SO": "Südost",
 "SW": "Südwest",
-"NW": "Nordwest"
+"NW": "Nordwest",
+// driving directions
+"DIRECTION_1":"Links abbiegen[ auf <b>%s</b>]",
+"DIRECTION_2":"Rechts abbiegen[ auf <b>%s</b>]",
+"DIRECTION_3":"Umkehren[ auf <b>%s</b>]",
+"DIRECTION_4":"Fahren Sie Richtung %s",
+"DIRECTION_5":"Weiterfahren[ auf <b>%s</b>]",
+"DIRECTION_6":"Leicht links abbiegen[ auf <b>%s</b>]",
+"DIRECTION_7":"Leicht rechts abbiegen[ auf <b>%s</b>]",
+"DIRECTION_8":"Scharf links abbiegen[ auf <b>%s</b>]",
+"DIRECTION_9":"Scharf rechts abbiegen[ auf <b>%s</b>]",
+"DIRECTION_10":"In den Kreisverkehr einfahren und bei erster Möglichkeit verlassen[ auf <b>%s</b>]",
+"DIRECTION_11":"In den Kreisverkehr einfahren und bei zweiter Möglichkeit verlassen[ auf <b>%s</b>]",
+"DIRECTION_12":"In den Kreisverkehr einfahren und bei dritter Möglichkeit verlassen[ auf <b>%s</b>]",
+"DIRECTION_13":"In den Kreisverkehr einfahren und bei vierter Möglichkeit verlassen[ auf <b>%s</b>]",
+"DIRECTION_14":"In den Kreisverkehr einfahren und bei f<>nfter Möglichkeit verlassen[ auf <b>%s</b>]",
+"DIRECTION_15":"In den Kreisverkehr einfahren und bei sechster Möglichkeit verlassen[ auf <b>%s</b>]",
+"DIRECTION_16":"In den Kreisverkehr einfahren und bei siebter Möglichkeit verlassen[ auf <b>%s</b>]",
+"DIRECTION_17":"In den Kreisverkehr einfahren und bei achter Möglichkeit verlassen[ auf <b>%s</b>]",
+"DIRECTION_18":"In den Kreisverkehr einfahren und bei neunter Möglichkeit verlassen[ auf <b>%s</b>]",
+"DIRECTION_19":"In den Kreisverkehr einfahren und bei zehnter Möglichkeit verlassen[ auf <b>%s</b>]",
+"DIRECTION_20":"In den Kreisverkehr einfahren und bei einer der vielen Möglichkeiten verlassen[ auf <b>%s</b>]",
+"DIRECTION_21":"Sie haben Ihr Ziel erreicht"
 };

 // set GUI language on load
-OSRM.GUI.setLanguage();
+OSRM.Localization.change("de");
--- a/WebContent/localization/OSRM.Locale.en.js
+++ b/WebContent/localization/OSRM.Locale.en.js
@ -57,8 +57,30 @@ OSRM.Localization["en"] = {
 "NE": "northeast",
 "SE": "southeast",
 "SW": "southwest",
-"NW": "northwest"
+"NW": "northwest",
+// driving directions
+"DIRECTION_1":"Turn left[ on <b>%s</b>]",
+"DIRECTION_2":"Turn right[ on <b>%s</b>]",
+"DIRECTION_3":"U-Turn[ on <b>%s</b>]",
+"DIRECTION_4":"Head %s",
+"DIRECTION_5":"Continue[ on <b>%s</b>]",
+"DIRECTION_6":"Turn slight left[ on <b>%s</b>]",
+"DIRECTION_7":"Turn slight right[ on <b>%s</b>]",
+"DIRECTION_8":"Turn sharp left[ on <b>%s</b>]",
+"DIRECTION_9":"Turn sharp right[ on <b>%s</b>]",
+"DIRECTION_10":"Enter roundabout and leave at first exit[ on <b>%s</b>]",
+"DIRECTION_11":"Enter roundabout and leave at second exit[ on <b>%s</b>]",
+"DIRECTION_12":"Enter roundabout and leave at third exit[ on <b>%s</b>]",
+"DIRECTION_13":"Enter roundabout and leave at fourth exit[ on <b>%s</b>]",
+"DIRECTION_14":"Enter roundabout and leave at fifth exit[ on <b>%s</b>]",
+"DIRECTION_15":"Enter roundabout and leave at sixth exit[ on <b>%s</b>]",
+"DIRECTION_16":"Enter roundabout and leave at seventh exit[ on <b>%s</b>]",
+"DIRECTION_17":"Enter roundabout and leave at eighth exit[ on <b>%s</b>]",
+"DIRECTION_18":"Enter roundabout and leave at nineth exit[ on <b>%s</b>]",
+"DIRECTION_19":"Enter roundabout and leave at tenth exit[ on <b>%s</b>]",
+"DIRECTION_20":"Enter roundabout and leave at one of the too many exits[ on <b>%s</b>]",
+"DIRECTION_21":"You have reached your destination"
 };

 //set GUI language on load
-OSRM.GUI.setLanguage();
+OSRM.Localization.change("en");
--- a/WebContent/localization/OSRM.Localization.js
+++ b/WebContent/localization/OSRM.Localization.js
@ -27,7 +27,7 @@ supported_languages: ["en", "de"],
 init: function() {
 	// create dropdown menu
 	var select = document.createElement('select');
-	select.id = "language-toggle";
+	select.id = "gui-language-toggle";
 	select.onchange = function() { OSRM.Localization.change(this.value); };
 	
 	// fill dropdown menu
@ -39,8 +39,8 @@ init: function() {
 	}
 	
 	// add element to DOM
-	var main_input_header = document.getElementById('main-input-header'); 
-	main_input_header.insertBefore(select,main_input_header.firstChild);
+	var input_mask_header = document.getElementById('input-mask-header'); 
+	input_mask_header.insertBefore(select,input_mask_header.firstChild);
 	
 	// initialize default language
 	OSRM.Localization.change( OSRM.DEFAULTS.LANGUAGE );
@ -51,6 +51,8 @@ change: function(language) {
 	OSRM.DEFAULTS.LANGUAGE = language;
 	if( OSRM.Localization[language]) {
 		OSRM.GUI.setLanguage();
+		if( document.getElementById('information-box').innerHTML != "" )
+			OSRM.RoutingDescription.show( OSRM.G.response );
 	} else {
 		var script = document.createElement('script');
 		script.type = 'text/javascript';
--- a/WebContent/main.css
+++ b/WebContent/main.css
@ -18,25 +18,19 @@ or see http://www.gnu.org/licenses/agpl.txt.
 /* OSRM CSS styles */


-/* map -> fullscreen */
-body {
+/* fullscreen map */
+html, body {
    padding: 0;
    margin: 0;
-}
-html, body, #map {
    height: 100%;
 }
 #map {
+	height: 100%;
 	z-index: 0;
 }


-/* styles for gui */
-.vquad
-{
-	height:10px;
-}
-
+/* general styles for gui boxes */
 .gui-wrapper
 {
 	position:absolute;
@ -63,11 +57,13 @@ html, body, #map {
 	padding:5px;	
 }

+
+/* styles for specific gui boxes */
 #main-wrapper
 {
 	width:410px;
-	height:95%;
 	top:5px;
+	bottom:25px;
 	left:5px;
 }
 #main-input
@ -78,10 +74,9 @@ html, body, #map {
 #main-output
 {
 	width:390px;
-	top:220px;
+	top:220px;			/* main-input.height+2*gui-box.margin+2*gui-box.padding */
 	bottom:0px;
 }
-
 #blob-wrapper
 {
 	left:-5px;
@ -96,79 +91,75 @@ html, body, #map {
 	-webkit-border-bottom-left-radius:0px;
 	visibility:hidden;
 }
-#blob-input
+#blob-content
 {
-	width:26px;
-	height:26px;
+	width:16px;
+	height:16px;
 	border-top-left-radius:0px;
 	border-bottom-left-radius:0px;
 	-moz-border-radius-topleft:0px;
 	-moz-border-radius-bottomleft:0px;
 	-webkit-border-top-left-radius:0px;
 	-webkit-border-bottom-left-radius:0px;	
-	padding:0px;
 }

-.main-toggle-out
-{
-	cursor:pointer;
-/*	position:absolute;
-	right:5px;
-	top:5px;*/
-	width:16px;
-	height:16px;
-	background-image:url("images/cancel.png");	
-}
-.main-toggle-out:hover
-{
-	background-image:url("images/cancel_hover.png");
-}
-.main-toggle-out:active
-{
-	background-image:url("images/cancel_active.png");
-}
-.main-toggle-in
-{
-	cursor:pointer;
-	position:absolute;
-	right:5px;
-	top:5px;
-	width:16px;
-	height:16px;
-	background-image:url("images/restore.png");	
-}
-.main-toggle-in:hover
-{
-	background-image:url("images/restore_hover.png");
-}
-.main-toggle-in:active
-{
-	background-image:url("images/restore_active.png");
-}

-.main-options
+/* styles for main-input areas */
+#input-mask-header
 {
-	position:relative;
-	font-size:10px;
-}
-.main-options-left-box
-{
-	position:absolute;
-	left:5px;
+	left:0px;
+	right:0px;
 	top:0px;
+	height:50px;
+	background-repeat:no-repeat;
+	background-position:center;
+	background-image:url("images/osrm-logo.png");		
 }
-.main-options-right-box
+#input-mask
 {
-	position:absolute;
-	right:5px;
-	top:5px;
+	margin:3px;
 }
-#options-toggle
+#input-mask-options
+{
+	margin:3px;
+}
+
+
+/* styles for main-input input-mask-header */
+#gui-language-toggle
+{
+	border: 0px;
+	text-decoration:none;
+}
+.top-right-button
+{
+	float:right;
+}
+
+
+/* styles for main-input input-mask */
+.input-marker
+{
+	display:table-row;
+}
+.input-marker > div
+{
+	padding-bottom:4px;
+}
+.input-box
+{
+	width: 250px;
+	padding-right: 2px;
+}
+
+
+/* styles for main-input input-mask-options */
+#gui-options-toggle
 {
 	cursor:pointer;
 	color:#0000ff
 }
-#options-toggle:hover
+#gui-options-toggle:hover
 {
 	color:#ff0000
 }
@ -177,111 +168,92 @@ html, body, #map {
 	visibility:hidden;
 }

-#osrm-logo
-{
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-    width: 192px;
-    height: 50px;
-	text-align:center;
-	vertical-align: middle;    
-}

-.input-box
+/* styles for main-output areas */
+#information-box-header
 {
-	width: 250px;
+	margin:5px;
+	height:60px;
 }
-
-
-.full
-{
-	width:100%;
-}
-.right
-{
-	text-align:right;
-}
-.center
-{
-	text-align:center;
-}
-
 #information-box
 {
 	position:absolute;
-	bottom:15px;
-	top:60px;
+	bottom:20px;
+	top:65px;
 	width:380px;
-	font-size:12px;
 	overflow:auto;
 	margin:5px;
 }
-
-.route-summary
+#legal-notice
 {
-	font-size: 12px;
+	position:absolute;
+	right:0px;
+	bottom:0px;
+	margin:5px;
 }
-#gpx-link
+
+
+/* styles for information-box-header */
+.header-title
+{
+	font-weight:bold;
+	margin-bottom:10px;
+}
+.header-content
+{
+	font-weight:normal;
+}
+.result-link
 {
 	color:#0000ff;
 	text-decoration:none;
 	cursor:pointer;
 }
-#gpx-link:hover
+.result-link:hover
 {
 	color:#ff0000;
 }
+
+
+/* style for information-box table (search results, driving directions) */
 .results-table
 {
 	border-spacing:0px;
+	width:100%;
 }
 .results-odd
 {
-	background-color: #FAF3E9; //#ffffff;
+	background-color: #FFFDE3;
 }
 .results-even
 {
-	background-color: #F2DE9C; //#ffffe0;
+	background-color: #FFF9BB;
 }
 .result-counter
 {
 	text-align:right;
-	vertical-align: top;
-	width:30px;
+	vertical-align:top;
 	font-weight:bold;
-	padding-left:5px;
-	padding-right:5px;
-	padding-top:1px;
-	padding-bottom:1px;
+	padding:1px 5px 1px 5px;
 }
 .result-items
 {
 	text-align:left;
 	vertical-align: middle;
 	width:100%;
-	padding-left:1px;
-	padding-right:1px;
-	padding-top:1px;
-	padding-bottom:1px;	
+	padding:1px;
 }
-.result-direction
+.result-directions
 {
-	width:30px;
-	padding-left:1px;
-	padding-right:1px;
-	padding-top:1px;
-	padding-bottom:1px;	
+	text-align:left;
+	vertical-align: middle;
+	padding:1px 5px 1px 5px;
 }
 .result-distance
 {
 	text-align:right;
-	vertical-align: middle;	
-	width:30px;
-	padding-left:1px;
-	padding-right:1px;
-	padding-top:1px;
-	padding-bottom:1px;	
+	vertical-align: middle;
+	padding:1px 1px 1px 5px;
 }
 .result-item
 {
@ -292,18 +264,135 @@ html, body, #map {
 {
 	color:#ff0000
 }
-
-#legal-notice
+.no-results
 {
-	position:absolute;
-	right:0px;
-	bottom:0px;
-	padding:5px;
-	font-size:10px;
+	text-align:center;
+	margin:28px;
+}
+
+
+/* buttons */
+.button
+{
+	cursor:pointer;
+	padding:2px 10px 2px 10px;
+	border-radius:5px;
+	-moz-border-radius:5px;
+	-webkit-border-radius:5px;
+	background-color:#EEEEEE;
+	border:1px solid #999999;
+	color:#333333;
+	text-decoration:none;
+	font-size:9px;
+	outline-style:none;
+	vertical-align:1px;  
+}
+.button:hover
+{
+	background-color:#F9F9F9;
+	color:#000000;
+}
+.button:active
+{
+	background-color:#F4F4F4;
+	color:#FF0000;
+}
+
+
+/* iconic buttons */
+.iconic-button
+{
+	cursor:pointer;
+	width:16px;
+	height:16px;
+	background-repeat:no-repeat;
+	background-position:center;
+}
+
+#gui-toggle-out
+{
+	background-image:url("images/cancel.png");	
+}
+#gui-toggle-out:hover
+{
+	background-image:url("images/cancel_hover.png");
+}
+#gui-toggle-out:active
+{
+	background-image:url("images/cancel_active.png");
+}
+
+#gui-toggle-in
+{
+	background-image:url("images/restore.png");	
+}
+#gui-toggle-in:hover
+{
+	background-image:url("images/restore_hover.png");
+}
+#gui-toggle-in:active
+{
+	background-image:url("images/restore_active.png");
+}
+
+#gui-printer
+{
+	background-image:url("images/printer.png");
+}
+#gui-printer:hover
+{
+	background-image:url("images/printer_hover.png");
+}
+#gui-printer:active
+{
+	background-image:url("images/printer_active.png");
+}
+
+.delete-marker
+{
+	background-image:url("images/cancel.png");
+	visibility:hidden;
+}
+.delete-marker:hover
+{
+	background-image:url("images/cancel_hover.png");
+}
+.delete-marker:active
+{
+	background-image:url("images/cancel_active.png");
+}
+
+
+/* fonts */
+.base-font {
+	font-family: Verdana, Arial, Helvetica, sans-serif;
+	font-size: 12px;
+	font-weight: normal;
+}
+.big-font {
+	font-family: Verdana, Arial, Helvetica, sans-serif;
+	font-size: 14px;
+	font-weight: bold;	
+}
+.medium-font {
+	font-family: Verdana, Arial, Helvetica, sans-serif;
+	font-size: 10.5px;
+	font-weight: normal;	
+}
+.small-font {
+	font-family: Verdana, Arial, Helvetica, sans-serif;
+	font-size: 9px;
+	font-weight: normal;	
 }


 /* utility styles (defined above buttons, so that buttons retain cursor:pointer)*/
+.quad
+{
+	min-width:10px;
+	min-height:10px;
+}
+
 .not-selectable
 {
 	cursor:default;
@ -322,72 +411,31 @@ html, body, #map {
 	user-select: text;
 }

-/* buttons */
-.button
+.checkbox-label
 {
-	cursor:pointer;
-	padding:2px 10px 2px 10px;
-	border-radius:5px;
-	-moz-border-radius:5px;
-	background-color:#EEEEEE;
-	border:1px solid #999999;
-	color:#333333;
-	text-decoration:none;
-	font-size:11px;
-	outline-style:none;  
-}
-.button:hover
-{
-	background-color:#F9F9F9;
-	color:#000000;
-}
-.button:active
-{
-	background-color:#F4F4F4;
-	color:#FF0000;
+	vertical-align:2px;
 }

-/* delete marker */
-.delete-marker
+.full
 {
-	cursor:pointer;
-	position:absolute;
-	right:5px;
-	top:3px;
-	width:16px;
-	height:16px;
-	background-image:url("images/cancel.png");
-	visibility:hidden;	
+	display:table;
+	width:100%;
 }
-.delete-marker:hover
+.left
 {
-	background-image:url("images/cancel_hover.png");
+	display:table-cell;
+	text-align:left;
+	vertical-align:middle;
 }
-.delete-marker:active
+.right
 {
-	background-image:url("images/cancel_active.png");
+	display:table-cell;
+	text-align:right;
+	vertical-align:middle;
 }
-
-/* printer button */
-.printer-inactive
+.center
 {
-	cursor:pointer;
-	width:16px;
-	height:16px;
-	background-image:url("images/printer_inactive.png");
-}
-.printer
-{
-	cursor:pointer;
-	width:16px;
-	height:16px;
-	background-image:url("images/printer.png");
-}
-.printer:hover
-{
-	background-image:url("images/printer_hover.png");
-}
-.printer:active
-{
-	background-image:url("images/printer_active.png");
+	display:table-cell;
+	text-align:center;
+	vertical-align:middle;
 }
--- a/WebContent/main.html
+++ b/WebContent/main.html
@ -46,7 +46,7 @@ or see http://www.gnu.org/licenses/agpl.txt.

 <script src="OSRM.base.js" type="text/javascript"></script>
 <script src="OSRM.config.js" type="text/javascript"></script>
-<script defer="defer" src="OSRM.debug.js" type="text/javascript"></script>
+<!-- <script defer="defer" src="OSRM.debug.js" type="text/javascript"></script> -->
 <script src="main.js" type="text/javascript"></script>

 <script src="OSRM.Markers.js" type="text/javascript"></script>
@ -71,15 +71,15 @@ or see http://www.gnu.org/licenses/agpl.txt.


 <!-- body -->
-<body onload="OSRM.init();">
+<body class="base-font">

 <!--map-->
 <div id="map"></div>

 <!-- show ui blob -->
 <div id="blob-wrapper" class="gui-wrapper">
-<div id="blob-input" class="gui-box">
-   	<div class="main-toggle-in" onclick="OSRM.GUI.toggleMain();"></div>
+<div id="blob-content" class="gui-box">
+   	<div id="gui-toggle-in" class="iconic-button"></div>
 </div>
 </div>

@ -87,63 +87,69 @@ or see http://www.gnu.org/licenses/agpl.txt.
 <div id="main-wrapper" class="gui-wrapper not-selectable">

 <!-- input box -->
-<div class="gui-box" id="main-input">
-	<div style="position:absolute;display:table;width:390px;" id="main-input-header">
-	<div style="display:table-cell;background-repeat:no-repeat;background-position:center;" id="printer" class="printer" onclick="OSRM.Printing.print();"></div>
-	<div style="display:table-cell;width:8px;background-repeat:no-repeat;background-position:center;"></div>
-	<div style="display:table-cell;background-repeat:no-repeat;background-position:center;" class="main-toggle-out" onclick="OSRM.GUI.toggleMain()"></div>
+<div id="main-input" class="gui-box">
+	<!--  header -->
+	<div id="input-mask-header">
+	<div id="gui-toggle-out" class="iconic-button top-right-button"></div>
+	<div class="quad top-right-button"></div>
+	<div id="gui-printer" class="iconic-button top-right-button"></div>
 	</div>
 	
-  	
+	<!--  input mask -->
+	<div id="input-mask">
 	
-	<img id="osrm-logo" alt="OSRM Logo" src="images/osrm-logo.png" />
-
 	<!-- source/target input -->
-    <table class="full">
-    <tr>
-    <td id="gui-search-source-label">Start:</td>
-    <td><div  style="position:relative;">
-    <input id="input-source-name" class="input-box" type="text" maxlength="200" value="" title="Startposition eingeben" onchange="OSRM.RoutingGUI.inputChanged(OSRM.C.SOURCE_LABEL);" />
-    <div id="delete-source-marker" class="delete-marker" onclick="OSRM.RoutingGUI.deleteMarker('source')"></div></div></td>
-    <td class="right"><a class="button not-selectable" id="gui-search-source" onclick="OSRM.RoutingGUI.showMarker('source')">Zeigen</a></td>
-    </tr>
-    
-    <tr>
-    <td id="gui-search-target-label">Ende:</td>
-    <td><div  style="position:relative;">
-    <input id="input-target-name" class="input-box" type="text" maxlength="200" value="" title="Zielposition eingeben" onchange="OSRM.RoutingGUI.inputChanged(OSRM.C.TARGET_LABEL);" />
-    <div id="delete-target-marker" class="delete-marker" onclick="OSRM.RoutingGUI.deleteMarker('target')"></div></div></td>
-	<td class="right"><a class="button not-selectable" id="gui-search-target" onclick="OSRM.RoutingGUI.showMarker('target');">Zeigen</a></td>	
-    </tr>
-    </table>
-    
+	<div class="full">
+	<div id="input-source" class="input-marker">
+	<div class="left"><span id="gui-search-source-label">Start:</span></div>
+	<div class="center input-box"><input id="gui-input-source" class="input-box" type="text" maxlength="200" value="" title="Startposition eingeben" /></div>
+	<div class="center"><div id="gui-delete-source" class="iconic-button delete-marker"></div></div>
+	<div class="right"><a class="button" id="gui-search-source">Zeigen</a></div>
+	</div>
+	<div id="input-target" class="input-marker">
+	<div class="left"><span id="gui-search-target-label">Ende:</span></div>
+	<div class="center input-box"><input id="gui-input-target" class="input-box" type="text" maxlength="200" value="" title="Zielposition eingeben" /></div>	
+	<div class="center"><div id="gui-delete-target" class="iconic-button delete-marker"></div></div>
+	<div class="right"><a class="button" id="gui-search-target">Zeigen</a></div>	
+	</div>
+	</div>
+	
+    <div class="quad"></div>	
+	
 	<!-- action buttons -->
-    <div class="vquad"></div>
-    <table style="width:100%">
-    <tr>
-    <td>				<a class="button not-selectable" id="gui-reset" onclick="OSRM.RoutingGUI.resetRouting();">Reset</a></td>
-	<td class="right">	<a class="button not-selectable" id="gui-reverse" onclick="OSRM.RoutingGUI.reverseRouting();">Umdrehen</a></td>
-    </tr>
-    </table>
-    
+    <div class="full">
+    <div class="left"><a class="button" id="gui-reset">Reset</a></div>
+	<div class="right"><a class="button" id="gui-reverse">Umdrehen</a></div>
+    </div>
+    </div>
+
+	<div class="quad"></div>
+
 	<!-- options -->
-	<span class="main-options" id="options-toggle" onclick="OSRM.GUI.toggleOptions()">Kartenwerkzeuge</span>
-	<div class="main-options" id="options-box">
-	<span class="main-options-left-box">
-	<input type="checkbox" id="option-highlight-nonames" name="main-options" value="highlight-nonames" onclick="OSRM.Routing.getRoute();" /><span id="gui-option-highlight-nonames-label">Unbenannte Straßen hervorheben</span>
-	</span>
-	<span class="main-options-right-box">
-	<a class="button not-selectable" id="open-josm" onclick="OSRM.RoutingGUI.openJOSM();">JOSM</a>
-	<a class="button not-selectable" id="open-osmbugs" onclick="OSRM.RoutingGUI.openOSMBugs();">OSM Bugs</a>
-	</span>
+	<div id="input-mask-options">
+	
+	<!-- option toggle -->
+	<span id="gui-options-toggle" class="small-font">Kartenwerkzeuge</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">Unbenannte Straßen hervorheben</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 -->
-<div class="gui-box not-selectable" id="main-output">
-	<div id="information-box-headline"></div>
+<div id="main-output" class="gui-box">
+	<div id="information-box-header"></div>
 	<div id="information-box"></div>
-	<div id="legal-notice">GUI2 v0.1.1 120316 - OSRM hosting by <a href='http://algo2.iti.kit.edu/'>KIT</a> - Geocoder by <a href='http://www.osm.org/'>OSM</a></div>
+	<div id="legal-notice" class="small-font">GUI2 v0.1.3 120402 - OSRM hosting by <a href='http://algo2.iti.kit.edu/'>KIT</a> - Geocoder by <a href='http://www.osm.org/'>OSM</a></div>
 </div>

 </div>
--- a/WebContent/main.js
+++ b/WebContent/main.js
@ -18,9 +18,6 @@ or see http://www.gnu.org/licenses/agpl.txt.
 // OSRM initialization
 // [initialization, image prefetching]

-// will hold the Leaflet map object
-OSRM.GLOBALS.map = null;
-

 // onload initialization routine
 OSRM.init = function() {
@ -152,7 +149,7 @@ OSRM.checkURL = function(){
 		if( destination_name == null )
 			OSRM.Geocoder.updateAddress( OSRM.C.TARGET_LABEL, OSRM.C.DO_FALLBACK_TO_LAT_LNG );
 		else 
-			document.getElementById("input-target-name").value = destination_name;
+			document.getElementById("gui-input-target").value = destination_name;
 		OSRM.G.markers.route[index].show();
 		OSRM.G.markers.route[index].centerView();
 		return;
@ -185,4 +182,11 @@ OSRM.checkURL = function(){
 		// compute route
 		OSRM.Routing.getRoute();
 	}
-};
+};
+
+
+// onload event
+if(document.addEventListener)		// FF, CH
+	document.addEventListener("DOMContentLoaded", OSRM.init, false);
+else								// old IE
+	document.onreadystatechange = function(){if(document.readyState == "interactive" || document.readyState == "complete") OSRM.init();};
--- a/WebContent/printing/OSRM.Printing.js
+++ b/WebContent/printing/OSRM.Printing.js
@ -65,11 +65,11 @@ show: function(response) {
 		
 	route_desc += '</table>';		
 	headline = "";
-	headline += OSRM.loc("ROUTE_DESCRIPTION")+":<br>";
+	headline += OSRM.loc("ROUTE_DESCRIPTION")+":<br/>";
 	headline += '<div style="float:left;width:40%">';
 	headline += "<span class='route-summary'>"
 		+ OSRM.loc("DISTANCE")+": " + OSRM.Utils.metersToDistance(response.route_summary.total_distance)
-		+ "<br>"
+		+ "<br/>"
 		+ OSRM.loc("DURATION")+": " + OSRM.Utils.secondsToTime(response.route_summary.total_time)
 		+ "</span>";		
 	headline +=	'</div>';
--- a/WebContent/routing/OSRM.RoutingDescription.js
+++ b/WebContent/routing/OSRM.RoutingDescription.js
@ -30,16 +30,15 @@ onClickRouteDescription: function(geometry_index) {
 	OSRM.G.markers.highlight.centerView(OSRM.DEFAULTS.HIGHLIGHT_ZOOM_LEVEL);	
 },
 onClickCreateShortcut: function(src){
-	src += '&z='+ OSRM.G.map.getZoom() + '&center=' + OSRM.G.map.getCenter().lat + ',' + OSRM.G.map.getCenter().lng;
+	src += '&z='+ OSRM.G.map.getZoom() + '&center=' + OSRM.G.map.getCenter().lat.toFixed(6) + ',' + OSRM.G.map.getCenter().lng.toFixed(6);
 	OSRM.JSONP.call(OSRM.DEFAULTS.HOST_SHORTENER_URL+src, OSRM.RoutingDescription.showRouteLink, OSRM.RoutingDescription.showRouteLink_TimeOut, OSRM.DEFAULTS.JSONP_TIMEOUT, 'shortener');
-	document.getElementById('route-prelink').innerHTML = '['+OSRM.loc("GENERATE_LINK_TO_ROUTE")+']';
+	document.getElementById('route-link').innerHTML = '['+OSRM.loc("GENERATE_LINK_TO_ROUTE")+']';
 },
 showRouteLink: function(response){
-	document.getElementById('route-prelink').innerHTML = '[<a id="gpx-link" class = "text-selectable" href="' +response.ShortURL+ '">'+response.ShortURL+'</a>]';
-// 	document.getElementById('route-prelink').innerHTML = '[<input class="text-selectable output-box" style="border:none" value="'+response.ShortURL+'" type="text" onfocus="this.select()" readonly="readonly"/>]';
+	document.getElementById('route-link').innerHTML = '[<a class="result-link text-selectable" href="' +response.ShortURL+ '">'+response.ShortURL+'</a>]';
 },
 showRouteLink_TimeOut: function(){
-	document.getElementById('route-prelink').innerHTML = '['+OSRM.loc("LINK_TO_ROUTE_TIMEOUT")+']';
+	document.getElementById('route-link').innerHTML = '['+OSRM.loc("LINK_TO_ROUTE_TIMEOUT")+']';
 },

 // handling of routing description
@ -47,17 +46,17 @@ show: function(response) {
 	// compute query string
 	var query_string = '?rebuild=1';
 	for(var i=0; i<OSRM.G.markers.route.length; i++)
-		query_string += '&loc=' + OSRM.G.markers.route[i].getLat() + ',' + OSRM.G.markers.route[i].getLng(); 
+		query_string += '&loc=' + OSRM.G.markers.route[i].getLat().toFixed(6) + ',' + OSRM.G.markers.route[i].getLng().toFixed(6); 
 						
 	// create link to the route
-	var route_link ='<span class="route-summary" id="route-prelink">[<a id="gpx-link" onclick="OSRM.RoutingDescription.onClickCreateShortcut(\'' + OSRM.DEFAULTS.WEBSITE_URL + query_string + '\')">'+OSRM.loc("GET_LINK_TO_ROUTE")+'</a>]</span>';
+	var route_link ='[<a class="result-link" onclick="OSRM.RoutingDescription.onClickCreateShortcut(\'' + OSRM.DEFAULTS.WEBSITE_URL + query_string + '\')">'+OSRM.loc("GET_LINK_TO_ROUTE")+'</a>]';

 	// create GPX link
-	var gpx_link = '<span class="route-summary">[<a id="gpx-link" onClick="document.location.href=\'' + OSRM.DEFAULTS.HOST_ROUTING_URL + query_string + '&output=gpx\';">'+OSRM.loc("GPX_FILE")+'</a>]</span>';
+	var gpx_link = '[<a class="result-link" onClick="document.location.href=\'' + OSRM.DEFAULTS.HOST_ROUTING_URL + query_string + '&output=gpx\';">'+OSRM.loc("GPX_FILE")+'</a>]';
 		
 	// create route description
 	var route_desc = "";
-	route_desc += '<table class="results-table">';
+	route_desc += '<table class="results-table medium-font">';

 	for(var i=0; i < response.route_instructions.length; i++){
 		//odd or even ?
@ -71,7 +70,16 @@ show: function(response) {
 		route_desc += "</td>";		
 		
 		route_desc += '<td class="result-items">';
-		route_desc += '<span class="result-item" onclick="OSRM.RoutingDescription.onClickRouteDescription('+response.route_instructions[i][3]+')">';
+		route_desc += '<div class="result-item" onclick="OSRM.RoutingDescription.onClickRouteDescription('+response.route_instructions[i][3]+')">';
+
+//		// build route description
+//		if( i == 0 )
+//			route_desc += OSRM.loc("DIRECTION_"+response.route_instructions[i][0]).replace(/%s/, response.route_instructions[i][6]); 
+//		else if( response.route_instructions[i][1] != "" )
+//			route_desc += OSRM.loc("DIRECTION_"+response.route_instructions[i][0]).replace(/\[(.*)\]/,"");
+//		else
+//			route_desc += OSRM.loc("DIRECTION_"+response.route_instructions[i][0]).replace(/\[(.*)\]/,"$1").replace(/%s/, response.route_instructions[i][6]);
+		
 		route_desc += response.route_instructions[i][0];
 		if( i == 0 )
 			route_desc += ' ' + OSRM.loc( response.route_instructions[i][6] );		
@ -79,8 +87,7 @@ show: function(response) {
 			route_desc += ' on ';
 			route_desc += '<b>' + response.route_instructions[i][1] + '</b>';
 		}
-		//route_desc += ' for ';
-		route_desc += '</span>';
+		route_desc += '</div>';
 		route_desc += "</td>";
 		
 		route_desc += '<td class="result-distance">';
@ -90,52 +97,61 @@ show: function(response) {
 		
 		route_desc += "</tr>";
 	}	
-		
-	route_desc += '</table>';		
-	headline = "";
-	headline += OSRM.loc("ROUTE_DESCRIPTION")+":<br>";
-	headline += '<div style="float:left;width:40%">';
-	headline += "<span class='route-summary'>"
-		+ OSRM.loc("DISTANCE")+": " + OSRM.Utils.metersToDistance(response.route_summary.total_distance)
-		+ "<br>"
-		+ OSRM.loc("DURATION")+": " + OSRM.Utils.secondsToTime(response.route_summary.total_time)
-		+ "</span>";		
-	headline +=	'</div>';
-	headline += '<div style="float:left;text-align:right;width:60%;">'+route_link+'<br>'+gpx_link+'</div>';
+	route_desc += '</table>';
+	
+	// create header
+	header = 
+		'<div class="header-title">' + OSRM.loc("ROUTE_DESCRIPTION") + '</div>' +
+		'<div class="full">' +
+		'<div class="left">' +
+		'<div class="header-content">' + OSRM.loc("DISTANCE")+": " + OSRM.Utils.metersToDistance(response.route_summary.total_distance) + '</div>' +
+		'<div class="header-content">' + OSRM.loc("DURATION")+": " + OSRM.Utils.secondsToTime(response.route_summary.total_time) + '</div>' +
+		'</div>' +
+		'<div class="right">' +
+		'<div id="route-link" class="header-content">' + route_link + '</div>' +
+		'<div class="header-content">' + gpx_link + '</div>' +
+		'</div>' +		
+		'</div>';

-	var output = "";
-	output += route_desc;
-
-	document.getElementById('information-box-headline').innerHTML = headline;
-	document.getElementById('information-box').innerHTML = output;
+	// update DOM
+	document.getElementById('information-box-header').innerHTML = header;
+	document.getElementById('information-box').innerHTML = route_desc;
 },

 // simple description
 showSimple: function(response) {
-	headline = OSRM.loc("ROUTE_DESCRIPTION")+":<br>";
-	headline += "<span class='route-summary'>"
-			+ OSRM.loc("DISTANCE")+": " + OSRM.Utils.metersToDistance(response.route_summary.total_distance)
-			+ "<br>"
-			+ OSRM.loc("DURATION")+": " + OSRM.Utils.secondsToTime(response.route_summary.total_time)
-			+ "</span>";
-	headline += '<br><br>';
+	header = 
+		'<div class="header-title">' + OSRM.loc("ROUTE_DESCRIPTION") + '</div>' +
+		'<div class="full">' +
+		'<div class="left">' +
+		'<div class="header-content">' + OSRM.loc("DISTANCE")+": " + OSRM.Utils.metersToDistance(response.route_summary.total_distance) + '</div>' +
+		'<div class="header-content">' + OSRM.loc("DURATION")+": " + OSRM.Utils.secondsToTime(response.route_summary.total_time) + '</div>' +
+		'</div>' +
+		'<div class="right">' +
+		'</div>' +		
+		'</div>';	

-	document.getElementById('information-box-headline').innerHTML = headline;
-	document.getElementById('information-box').innerHTML = "<br><p style='font-size:14px;font-weight:bold;text-align:center;'>"+OSRM.loc("YOUR_ROUTE_IS_BEING_COMPUTED")+".<p>";	
+	// update DOM
+	document.getElementById('information-box-header').innerHTML = header;
+	document.getElementById('information-box').innerHTML = "<div class='no-results big-font'>"+OSRM.loc("YOUR_ROUTE_IS_BEING_COMPUTED")+"</div>";	
 },

 // no description
 showNA: function( display_text ) {
-	headline = OSRM.loc("ROUTE_DESCRIPTION")+":<br>";
-	headline += "<span class='route-summary'>"
-			+ OSRM.loc("DISTANCE")+": N/A"
-			+ "<br>"
-			+ OSRM.loc("DURATION")+": N/A"
-			+ "</span>";
-	headline += '<br><br>';
+	header = 
+		'<div class="header-title">' + OSRM.loc("ROUTE_DESCRIPTION") + '</div>' +
+		'<div class="full">' +
+		'<div class="left">' +
+		'<div class="header-content">' + OSRM.loc("DISTANCE")+": N/A" + '</div>' +
+		'<div class="header-content">' + OSRM.loc("DURATION")+": N/A" + '</div>' +
+		'</div>' +
+		'<div class="right">' +
+		'</div>' +		
+		'</div>';

-	document.getElementById('information-box-headline').innerHTML = headline;
-	document.getElementById('information-box').innerHTML = "<br><p style='font-size:14px;font-weight:bold;text-align:center;'>"+display_text+".<p>";	
+	// update DOM
+	document.getElementById('information-box-header').innerHTML = header;
+	document.getElementById('information-box').innerHTML = "<div class='no-results big-font'>"+display_text+"</div>";	
 },

 // map driving instructions to icons
--- a/WebContent/routing/OSRM.RoutingGUI.js
+++ b/WebContent/routing/OSRM.RoutingGUI.js
@ -23,15 +23,15 @@ OSRM.RoutingGUI = {

 // click: button "reset"
 resetRouting: function() {
-	document.getElementById('input-source-name').value = "";
-	document.getElementById('input-target-name').value = "";
+	document.getElementById('gui-input-source').value = "";
+	document.getElementById('gui-input-target').value = "";
 	
 	OSRM.G.route.hideAll();
 	OSRM.G.markers.removeAll();
 	OSRM.G.markers.highlight.hide();
 	
 	document.getElementById('information-box').innerHTML = "";
-	document.getElementById('information-box-headline').innerHTML = "";
+	document.getElementById('information-box-header').innerHTML = "";
 	
 	OSRM.JSONP.reset();	
 },
@ -39,9 +39,9 @@ resetRouting: function() {
 // click: button "reverse"
 reverseRouting: function() {
 	// invert input boxes
-	var tmp = document.getElementById("input-source-name").value;
-	document.getElementById("input-source-name").value = document.getElementById("input-target-name").value;
-	document.getElementById("input-target-name").value = tmp;
+	var tmp = document.getElementById("gui-input-source").value;
+	document.getElementById("gui-input-source").value = document.getElementById("gui-input-target").value;
+	document.getElementById("gui-input-target").value = tmp;
 	
 	// invert route
 	OSRM.G.markers.route.reverse();
@ -67,7 +67,7 @@ reverseRouting: function() {
 		OSRM.G.markers.highlight.hide();
 	} else {
 		document.getElementById('information-box').innerHTML = "";
-		document.getElementById('information-box-headline').innerHTML = "";		
+		document.getElementById('information-box-header').innerHTML = "";		
 	}
 },

@ -83,12 +83,21 @@ showMarker: function(marker_id) {
 },


-// changed: any inputbox (is called when return is pressed [after] or focus is lost [before])
+// keyup: force geocoder when enter is pressed
+// (change event can be triggered, too; second call to geocoder gets fenced by JSONP)
+// (alternative: track changes manually and only permit keyup event, if there was no change)
+// do we want this?
+keyUp: function(e, marker_id) {
+	if(e.keyCode==13)
+		OSRM.RoutingGUI.inputChanged(marker_id);
+},
+
+// changed: any inputbox (is called when enter is pressed [after] or focus is lost [before])
 inputChanged: function(marker_id) {
 	if( marker_id == OSRM.C.SOURCE_LABEL)	
-		OSRM.Geocoder.call(OSRM.C.SOURCE_LABEL, document.getElementById('input-source-name').value);
+		OSRM.Geocoder.call(OSRM.C.SOURCE_LABEL, document.getElementById('gui-input-source').value);
 	else if( marker_id == OSRM.C.TARGET_LABEL)
-		OSRM.Geocoder.call(OSRM.C.TARGET_LABEL, document.getElementById('input-target-name').value);
+		OSRM.Geocoder.call(OSRM.C.TARGET_LABEL, document.getElementById('gui-input-target').value);
 },

 // click: button "open JOSM"