Merge branch 'gui/buttons' into develop

WebContent/main.css

@@ -159,7 +159,7 @@ html, body, #map {
 {
 	position:absolute;
 	bottom:15px;
-	top:50px;
+	top:60px;
 	width:380px;
 	font-size:12px;
 	overflow:auto;
@@ -238,3 +238,37 @@ html, body, #map {
 	padding:5px;
 	font-size:10px;
 }
+
+/* buttons */
+.button
+{
+	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;
+}
+
+/* generally useful styles */
+.not-selectable
+{
+	cursor:default;
+	-moz-user-select: none;  
+	-webkit-user-select: none;  
+	-ms-user-select: none;
+}

WebContent/main.html

@@ -11,6 +11,10 @@
 <meta name="description" content="OSRM Website"/>
 <meta name="author" content="Dennis Schieferdecker" />
 
+<!-- stylesheets -->
+<link rel="stylesheet" href="leaflet/leaflet.css" />
+<link rel="stylesheet" href="main.css" />
+
 <!-- scripts -->
 <script src="leaflet/leaflet-src.js"></script>
 <!--[if lte IE 8]><link rel="stylesheet" href="leaflet/leaflet.ie.css" /><![endif]-->
@@ -35,10 +39,6 @@
 <script src="via.js"></script>
 
 <script src="utils.js"></script>
-
-<!-- stylesheets -->
-<link rel="stylesheet" href="leaflet/leaflet.css" />
-<link rel="stylesheet" href="main.css" />
 </head>
 
 
@@ -59,7 +59,7 @@
 <div id="main-wrapper" class="gui-wrapper">
 
 <!-- input box -->
-<div id="main-input" class="gui-box">
+<div class="gui-box not-selectable" id="main-input">
 	<div id="main-toggle" onclick="OSRM.GUI.toggleMain()"></div>
 	<img id="osrm-logo" alt="OSRM Logo" src="images/osrm-logo.png" />
 
@@ -68,15 +68,15 @@
     <tr>
     <td id="gui-search-source-label">Start:</td>
     <td><input id="input-source-name" class="input-box" type="text" value="Karlsruhe" title="Startposition eingeben" onkeypress="if(event.keyCode==13) {callGeocoder(OSRM.SOURCE_MARKER_ID, document.getElementById('input-source-name').value);}" /></td>
-    <!--  <td class="right"><button id="gui-here-source" onclick="">i</button></td>  -->
+    <!-- <td class="right"><a class="button not-selectable" id="gui-here-target" onclick="">i</a></td> -->
-    <td class="right"><button id="gui-search-source" onclick="callGeocoder(OSRM.SOURCE_MARKER_LABEL, document.getElementById('input-source-name').value);">Suchen</button></td>
+    <td class="right"><a class="button not-selectable" id="gui-search-source" onclick="callGeocoder(OSRM.SOURCE_MARKER_LABEL, document.getElementById('input-source-name').value);">Suchen</a></td>
     </tr>
     
     <tr>
     <td id="gui-search-target-label">Ende:</td>
     <td><input id="input-target-name" class="input-box" type="text" value="Aalen" title="Zielposition eingeben" onkeypress="if(event.keyCode==13) {callGeocoder(OSRM.TARGET_MARKER_ID, document.getElementById('input-target-name').value);}" /></td>
-    <!--  <td class="right"><button id="gui-here-target" onclick="">i</button></td>  -->
+    <!-- <td class="right"><a class="button not-selectable" id="gui-here-target" onclick="">i</a></td> -->
-    <td class="right"><button id="gui-search-target" onclick="callGeocoder(OSRM.TARGET_MARKER_LABEL, document.getElementById('input-target-name').value);" >Suchen</button></td>
+    <td class="right"><a class="button not-selectable" id="gui-search-target" onclick="callGeocoder(OSRM.TARGET_MARKER_LABEL, document.getElementById('input-target-name').value);">Suchen</a></td>
     </tr>
     </table>
     
@@ -84,22 +84,22 @@
     <div class="vquad"></div>
     <table style="width:100%">
     <tr>
-    <td><button id="gui-reset" onclick="resetRouting();">Reset</button></td>
+    <td>				<a class="button not-selectable" id="gui-reset" onclick="resetRouting();">Reset</a></td>
-    <td class="center"><button id="gui-reverse" onclick="reverseRouting();">Reverse</button></td>
+    <td class="center">	<a class="button not-selectable" id="gui-reverse" onclick="reverseRouting();">Reverse</a></td>
-    <td class="right"><button id="gui-route" onclick="startRouting();">Route</button></td>
+    <td class="right">	<a class="button not-selectable" id="gui-route" onclick="startRouting();">Route</a></td>
     </tr>
     </table>
-
+    
 	<!-- options -->
     <div class="vquad"></div>
-    <div id="options-toggle" class="main-options" onclick="OSRM.GUI.toggleOptions()">Options</div>
+    <div class="main-options not-selectable" id="options-toggle" onclick="OSRM.GUI.toggleOptions()">Options</div>
-    <div id="options-box" class="main-options">
+    <div class="main-options not-selectable" id="options-box">
     <input type="checkbox" id="option-highlight-nonames" name="main-options" value="highlight-nonames" onclick="getRoute(OSRM.FULL_DESCRIPTION)" /><span id="gui-option-highlight-nonames-label">Unbenannte Straßen hervorheben</span>
     </div>
 </div>
 
 <!-- output box -->
-<div id="main-output" class="gui-box">
+<div class="gui-box not-selectable" id="main-output">
 	<div id="information-box-headline"></div>
 	<div id="information-box"></div>
 	<div id="legal-notice">GUI by Dennis Schieferdecker</div>

WebContent/routing.js

@@ -378,6 +378,19 @@ function getDirectionIcon(name) {
 		"Continue":"continue.png",
 		"Turn slight left":"slight-left.png",
 		"Turn slight right":"slight-right.png",
+		"Turn sharp left":"sharp-left.png",
+		"Turn sharp right":"sharp-right.png",
+		"Enter round-about and leave at first exit":"round-about-9.png",
+		"Enter round-about and leave at second exit":"round-about-9.png",
+		"Enter round-about and leave at third exit":"round-about-9.png",
+		"Enter round-about and leave at forth exit":"round-about-9.png",
+		"Enter round-about and leave at fifth exit":"round-about-9.png",
+		"Enter round-about and leave at sixth exit":"round-about-9.png",
+		"Enter round-about and leave at seventh exit":"round-about-9.png",
+		"Enter round-about and leave at eighth exit":"round-about-9.png",
+		"Enter round-about and leave at nineth exit":"round-about-9.png",
+		"Enter round-about and leave at tenth exit":"round-about-9.png",
+		"Enter round-about and leave at one of the too many exit":"round-about-9.png",
 	};
 	
 	if( directions[name] )