corrected error in route description,

made dropdown button more beautiful

WebContent/localization/OSRM.Localization.js

@@ -30,7 +30,7 @@ init: function() {
 	// create dropdown menu
 	var select = document.createElement('select');
 	select.id = "gui-language-toggle";
-	select.className = "top-left-button";
+	//select.className = "top-left-button";
 	select.onchange = function() { OSRM.Localization.change(this.value); };
 	
 	// fill dropdown menu
@@ -45,6 +45,16 @@ init: function() {
 	var input_mask_header = document.getElementById('input-mask-header'); 
 	input_mask_header.insertBefore(select,input_mask_header.firstChild);
 	
+	// create visible dropdown menu
+	var textnode = document.createTextNode(OSRM.DEFAULTS.LANGUAGE);
+	var myspan = document.createElement("span");
+	myspan.className = "styled-select";
+	myspan.id = "styled-select" + select.id;
+	myspan.appendChild(textnode);
+	select.parentNode.insertBefore(myspan, select);
+	myspan.style.width = (select.clientWidth-2)+"px";
+	myspan.style.height = (select.clientHeight)+"px";
+	
 	// initialize default language
 	OSRM.Localization.change( OSRM.DEFAULTS.LANGUAGE );
 },
@@ -52,7 +62,16 @@ init: function() {
 // perform language change
 change: function(language) {
 	OSRM.DEFAULTS.LANGUAGE = language;
-	document.getElementById('gui-language-toggle').value = language;
+	// update selector
+	var select = document.getElementById('gui-language-toggle');
+	var option = select.getElementsByTagName("option");
+	select.value = language;
+	for(var i = 0; i < option.length; i++)
+		if(option[i].selected == true) {
+			document.getElementById("styled-select" + select.id).childNodes[0].nodeValue = option[i].childNodes[0].nodeValue;
+			break;
+		}	
+	// change gui language
 	if( OSRM.Localization[language]) {
 		OSRM.GUI.setLanguage();
 		if( OSRM.G.markers.route.length > 1)

WebContent/main.css

@@ -130,7 +130,22 @@ html, body {
 {
 	border: 0px;
 	text-decoration:none;
+	position: relative;
+ 	opacity: 0;
+	filter: alpha(opacity=0);
+	z-index: 5;
 }
+
+.styled-select
+{
+	position:absolute;
+	background: url("images/selector.png");
+	background-repeat:no-repeat;	
+	background-position: top right;
+	padding: 1px 1px 1px 1px;
+	overflow: hidden;
+}
+
 .top-left-button
 {
 	float:left;

WebContent/routing/OSRM.RoutingDescription.js

@@ -74,11 +74,11 @@ show: function(response) {
 
 		// build route description
 		if( i == 0 )
-			route_desc += OSRM.loc("DIRECTION_"+OSRM.RoutingDescription.mapDirectionId(response.route_instructions[i][0])).replace(/%s/, OSRM.loc(response.route_instructions[i][6]) );
+			route_desc += OSRM.loc("DIRECTION_"+OSRM.RoutingDescription.getDirectionId(response.route_instructions[i][0])).replace(/%s/, OSRM.loc(response.route_instructions[i][6]) );
 		else if( response.route_instructions[i][1] != "" )
-			route_desc += OSRM.loc("DIRECTION_"+OSRM.RoutingDescription.mapDirectionId(response.route_instructions[i][0])).replace(/\[(.*)\]/,"$1").replace(/%s/, response.route_instructions[i][1]);
+			route_desc += OSRM.loc("DIRECTION_"+OSRM.RoutingDescription.getDirectionId(response.route_instructions[i][0])).replace(/\[(.*)\]/,"$1").replace(/%s/, response.route_instructions[i][1]);
 		else
-			route_desc += OSRM.loc("DIRECTION_"+OSRM.RoutingDescription.mapDirectionId(response.route_instructions[i][0])).replace(/\[(.*)\]/,"");
+			route_desc += OSRM.loc("DIRECTION_"+OSRM.RoutingDescription.getDirectionId(response.route_instructions[i][0])).replace(/\[(.*)\]/,"");
 
 		route_desc += '</div>';
 		route_desc += "</td>";
@@ -147,8 +147,41 @@ showNA: function( display_text ) {
 	document.getElementById('information-box').innerHTML = "<div class='no-results big-font'>"+display_text+"</div>";	
 },
 
-//map driving instruction ids to internal ids
+// map driving instructions to icons
-mapDirectionId: function(name) {
+// [TODO: language-safe implementation]
+getDirectionIcon: function(name) {
+	var directions = {
+		"Turn left":"turn-left",
+		"Turn right":"turn-right",
+		"U-Turn":"u-turn",
+		"Head":"continue",
+		"Continue":"continue",
+		"Turn slight left":"slight-left",
+		"Turn slight right":"slight-right",
+		"Turn sharp left":"sharp-left",
+		"Turn sharp right":"sharp-right",
+		"Enter roundabout and leave at first exit":"round-about",
+		"Enter roundabout and leave at second exit":"round-about",
+		"Enter roundabout and leave at third exit":"round-about",
+		"Enter roundabout and leave at fourth exit":"round-about",
+		"Enter roundabout and leave at fifth exit":"round-about",
+		"Enter roundabout and leave at sixth exit":"round-about",
+		"Enter roundabout and leave at seventh exit":"round-about",
+		"Enter roundabout and leave at eighth exit":"round-about",
+		"Enter roundabout and leave at nineth exit":"round-about",
+		"Enter roundabout and leave at tenth exit":"round-about",
+		"Enter roundabout and leave at one of the too many exit":"round-about",
+		"You have reached your destination":"target"
+	};
+	
+	if( directions[name] )
+		return directions[name];
+	else
+		return "default";
+},
+
+//map driving instructions to ids
+getDirectionId: function(name) {
 	var directions = {
 		"Turn left":1,
 		"Turn right":2,