initial import

WebContent/L.DashedPolyline.js

@@ -0,0 +1,39 @@
+// dashed polyline
+L.DashedPolyline = L.Polyline.extend({
+	initialize: function(latlngs, options) {
+		L.Polyline.prototype.initialize.call(this, latlngs, options);
+	},
+	
+	options: {
+		dashed: true
+	},
+});
+
+
+// svg rendering
+L.DashedPolyline = !L.Browser.svg ? L.DashedPolyline : L.DashedPolyline.extend({
+	_updateStyle: function () {
+		L.Polyline.prototype._updateStyle.call(this);
+		if (this.options.stroke) {
+			if (this.options.dashed == true)
+				this._path.setAttribute('stroke-dasharray', '8,6');
+			else
+				this._path.setAttribute('stroke-dasharray', '');
+		}
+	},
+});
+
+
+// vml rendering
+L.DashedPolyline = L.Browser.svg || !L.Browser.vml ? L.DashedPolyline : L.DashedPolyline.extend({
+	_updateStyle: function () {
+		L.Polyline.prototype._updateStyle.call(this);
+		if (this.options.stroke) {
+			if (this.options.dashed == true)
+				this._stroke.dashstyle = "dash";
+			else
+				this._stroke.dashstyle = "solid";
+		}
+	},
+	
+});

WebContent/L.MouseMarker.js

@@ -0,0 +1,30 @@
+L.MouseMarker = L.Marker.extend({
+	initialize: function (latlng, options) {
+		L.Marker.prototype.initialize.apply(this, arguments);
+	},
+
+//	_initInteraction: function (){
+//		L.Marker.prototype._initInteraction.apply(this, arguments);
+// 		if (this.options.clickable)
+//			L.DomEvent.addListener(this._icon, 'mousemove', this._fireMouseEvent, this);
+//	},
+
+//	_fireMouseEvent: function (e) {
+//		this.fire(e.type, {
+//			latlng: this._map.mouseEventToLatLng(e),
+//			layerPoint: this._map.mouseEventToLayerPoint(e)
+//		});		
+//		L.DomEvent.stopPropagation(e);
+//	},
+	
+	_onMouseClick: function (e) {
+		L.DomEvent.stopPropagation(e);
+		if (this.dragging && this.dragging.moved()) { return; }
+		this.fire(e.type, {
+			altKey: e.altKey,
+			ctrlKey: e.ctrlKey,
+			shiftKey: e.shiftKey,
+			button: e.button
+		});
+	},	
+});

WebContent/OSRM.Browser.js

@@ -0,0 +1,13 @@
+// OSRM browser detection
+
+
+(function() {
+	var useragent = navigator.userAgent;
+	
+	OSRM.Browser = {
+ 		FF3:	useragent.search(/Firefox\/3/),
+		IE6_8:	useragent.search(/MSIE (6|7|8)/),
+	};
+}());
+
+// (runs anonymous function to prevent local variables cluttering global namespace)

WebContent/OSRM.GUI.js

@@ -0,0 +1,61 @@
+// GUI functionality
+
+
+OSRM.GUI = {
+		
+// show/hide main-gui
+toggleMain: function() {
+	// show main-gui
+	if( document.getElementById('main-wrapper').style.left == "-410px" ) {
+		getElementsByClassName(document,'leaflet-control-zoom')[0].style.visibility="hidden";
+		getElementsByClassName(document,'leaflet-control-zoom')[0].style.left="420px";
+		getElementsByClassName(document,'leaflet-control-zoom')[0].style.top="5px";
+		
+		document.getElementById('blob-wrapper').style.visibility="hidden";			
+		document.getElementById('main-wrapper').style.left="5px";
+		if( OSRM.Browser.FF3!=-1 || OSRM.Browser.IE6_8!=-1 ) {
+			getElementsByClassName(document,'leaflet-control-zoom')[0].style.visibility="visible";
+		}
+	// hide main-gui
+	} else {
+		getElementsByClassName(document,'leaflet-control-zoom')[0].style.visibility="hidden";
+		getElementsByClassName(document,'leaflet-control-zoom')[0].style.left="30px";
+		getElementsByClassName(document,'leaflet-control-zoom')[0].style.top="5px";
+			
+		document.getElementById('main-wrapper').style.left="-410px";
+ 		if( OSRM.Browser.FF3!=-1 || OSRM.Browser.IE6_8!=-1 ) {
+ 			document.getElementById('blob-wrapper').style.visibility="visible";
+			getElementsByClassName(document,'leaflet-control-zoom')[0].style.visibility="visible";		
+ 		}
+	}
+
+	// execute after animation
+	if( OSRM.Browser.FF3==-1 && OSRM.Browser.IE6_8==-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);
+	}
+},
+
+// do stuff after main-gui animation finished
+onMainTransitionEnd: function() {
+	// after hiding main-gui
+	if( document.getElementById('main-wrapper').style.left == "-410px" ) {
+		document.getElementById('blob-wrapper').style.visibility="visible";
+		getElementsByClassName(document,'leaflet-control-zoom')[0].style.visibility="visible";
+	// after showing main-gui
+	} else {
+		getElementsByClassName(document,'leaflet-control-zoom')[0].style.visibility="visible";
+	}
+},
+
+// 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";
+	}
+},
+
+};

WebContent/OSRM.JSONP.js

@@ -0,0 +1,77 @@
+// OSRM JSONP call wrapper 
+// w/ DOM cleaning, fencing, timout handling
+
+OSRM.JSONP = {
+	fences: {},
+	callbacks: {},
+	timeouts: {},
+	timers: {},
+	
+	TIMEOUT: OSRM.DEFAULTS.JSONP_TIMEOUT,
+	
+	late: function() { console.log("reply too late");},
+	empty: function() { console.log("empty callback");},
+		
+	call: function(source, callback_function, timeout_function, timeout, id) {
+		// only one active JSONP call per id
+		if (OSRM.JSONP.fences[id] == true)
+			return false;
+		OSRM.JSONP.fences[id] = true;
+		
+//		console.log("[status] jsonp init for "+id);
+//		console.log("[status] jsonp request ",source);		
+				
+		// wrap timeout function
+		OSRM.JSONP.timeouts[id] = function(response) {
+			timeout_function(response);
+			
+//			var jsonp = document.getElementById('jsonp_'+id);		// clean DOM
+//			if(jsonp)
+//				jsonp.parentNode.removeChild(jsonp);
+			OSRM.JSONP.callbacks[id] = OSRM.JSONP.late;				// clean functions
+			OSRM.JSONP.timeouts[id] = OSRM.JSONP.late;
+			OSRM.JSONP.fences[id] = undefined;						// clean fence
+			
+//			console.log("timeout: "+id); 							// at the end - otherwise racing conditions may happen
+//			document.getElementById('information-box').innerHTML += "timeout:" + id + "<br>";			
+		};
+		
+		// wrap callback function
+		OSRM.JSONP.callbacks[id] = function(response) {
+			clearTimeout(OSRM.JSONP.timers[id]);					// clear timeout timer
+			OSRM.JSONP.timers[id] = undefined;
+			
+			if( OSRM.JSONP.fences[id] == undefined )				// fence to prevent execution after timeout function (when precompiled!)
+				return;		
+
+			callback_function(response);							// actual wrapped callback 
+			
+//			var jsonp = document.getElementById('jsonp_'+id);		// clean DOM
+//			if(jsonp)
+//				jsonp.parentNode.removeChild(jsonp);
+			OSRM.JSONP.callbacks[id] = OSRM.JSONP.late;				// clean functions
+			OSRM.JSONP.timeouts[id] = OSRM.JSONP.late;
+			OSRM.JSONP.fences[id] = undefined;						// clean fence
+			
+//			console.log("[status] jsonp response for "+id);			// at the end - otherwise racing conditions may happen
+//			document.getElementById('information-box').innerHTML += "callback:" + id + "<br>";
+		};
+		
+		// clean DOM (cannot reuse script element with all browsers, unfortunately)
+		var jsonp = document.getElementById('jsonp_'+id);
+		if(jsonp)
+			jsonp.parentNode.removeChild(jsonp);		
+		
+		// add script to DOM
+		var script = document.createElement('script');
+		script.type = 'text/javascript';
+		script.id = 'jsonp_'+id;
+		script.src = source + "&json_callback=OSRM.JSONP.callbacks."+id + "&jsonp=OSRM.JSONP.callbacks."+id;
+		document.head.appendChild(script);
+		
+		// start timeout timer
+		OSRM.JSONP.timers[id] = setTimeout(OSRM.JSONP.timeouts[id], timeout);
+		
+		return true;
+	}
+};

WebContent/OSRM.Localization.js

@@ -0,0 +1,73 @@
+// localization
+
+OSRM.Localization = {
+language: "en",
+
+translate: function(text) {
+	if( OSRM.Localization[OSRM.Localization.language][text] )
+		return OSRM.Localization[OSRM.Localization.language][text];
+	else if( OSRM.Localization[OSRM.Localization.language][text] )
+		return OSRM.Localization[OSRM.Localization.language][text];
+	else
+		return text;
+},
+};
+OSRM.loc = OSRM.Localization.translate;
+
+OSRM.Localization["de"] = {
+//gui
+"GUI_START": "Start",
+"GUI_END": "Ende",
+"GUI_RESET": "Reset",
+"GUI_SEARCH": "Suchen",
+"GUI_ROUTE": "Route",
+"GUI_REVERSE": "Umdrehen",
+"GUI_OPTIONS": "Optionen",
+"GUI_HIGHLIGHT_UNNAMED_ROADS": "Unbenannte Stra<72>en hervorheben",
+"GUI_START_TOOLTIP": "Startposition eingeben",
+"GUI_END_TOOLTIP": "Zielposition eingeben",
+"GUI_LEGAL_NOTICE": "GUI von Dennis Schieferdecker",
+// geocoder
+"SEARCH_RESULTS": "Suchergebnisse",
+"TIMED_OUT": "Zeit<69>berschreitung",
+"NO_RESULTS_FOUND": "Keine Ergebnisse gefunden",
+// routing
+"ROUTE_DESCRIPTION": "Routenbeschreibung",
+"GET_LINK": "Generiere Link",
+"LINK_TO_ROUTE": "Link zur Route",
+"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",
+};
+
+OSRM.Localization["en"] = {
+//gui
+"GUI_START": "Start",
+"GUI_END": "End",
+"GUI_RESET": "Reset",
+"GUI_SEARCH": "Search",
+"GUI_ROUTE": "Route",
+"GUI_REVERSE": "Reverse",
+"GUI_OPTIONS": "Options",
+"GUI_HIGHLIGHT_UNNAMED_ROADS": "Highlight unnamed streets",
+"GUI_START_TOOLTIP": "Enter start",
+"GUI_END_TOOLTIP": "Enter destination",
+"GUI_LEGAL_NOTICE": "GUI by Dennis Schieferdecker",
+// geocoder
+"SEARCH_RESULTS": "Search Results",
+"TIMED_OUT": "Timed Out",
+"NO_RESULTS_FOUND": "No results found",
+//routing
+"ROUTE_DESCRIPTION": "Route Description",
+"GET_LINK": "Generate Link",
+"LINK_TO_ROUTE": "Route 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",
+};

WebContent/OSRM.Markers.js

@@ -0,0 +1,185 @@
+// OSRM.Marker class 
+// + sub-classes
+
+
+// base class
+OSRM.Marker = function( label, style, position ) {
+	this.label = label ? label : "marker";
+	this.position = position ? position : new L.LatLng(0,0);
+
+	this.marker = new L.MouseMarker( this.position, style );
+	this.marker.parent = this;
+	
+	this.shown = false;
+	this.hint = undefined;
+};
+OSRM.extend( OSRM.Marker,{
+show: function() {
+	map.addLayer(this.marker);
+	this.shown = true;
+},
+hide: function() {
+	map.removeLayer(this.marker);
+	this.shown = false;
+},
+setPosition: function( position ) {
+	this.position = position;
+	this.marker.setLatLng( position );
+	this.hint = undefined;	
+},
+getPosition: function() {
+	return this.position;
+},
+getLat: function() {
+	return this.position.lat;
+},
+getLng: function() {
+	return this.position.lng;
+},
+isShown: function() {
+	return this.shown;
+},
+centerView: function() {
+	map.setView( new L.LatLng( this.position.lat, this.position.lng-0.02), OSRM.DEFAULTS.ZOOM_LEVEL);		// dirty hack
+},
+toString: function() {
+	return "OSRM.Marker: \""+this.label+"\", "+this.position+")";
+},
+});
+
+
+// highlight marker
+OSRM.HighlightMarker = function( label, style, position) {
+	OSRM.HighlightMarker.prototype.base.constructor.apply( this, arguments );
+	this.label = label ? label : "highlight_marker";
+};
+OSRM.inheritFrom( OSRM.HighlightMarker, OSRM.Marker );
+OSRM.extend( OSRM.HighlightMarker, {
+toString: function() {
+	return "OSRM.HighlightMarker: \""+this.label+"\", "+this.position+")";
+},
+});
+
+
+// route marker
+OSRM.RouteMarker = function ( label, style, position ) {
+	OSRM.RouteMarker.prototype.base.constructor.apply( this, arguments );
+	this.label = label ? label : "route_marker";
+
+ 	this.marker.on( 'click', this.onClick );
+ 	this.marker.on( 'drag', this.onDrag );
+ 	this.marker.on( 'dragstart', this.onDragStart );
+ 	this.marker.on( 'dragend', this.onDragEnd );
+};
+OSRM.inheritFrom( OSRM.RouteMarker, OSRM.Marker );
+OSRM.extend( OSRM.RouteMarker, {
+onClick: function(e) {
+	if(!e.ctrlKey)
+		return;
+	for( var i=0; i<my_markers.route.length; i++) {
+		if( my_markers.route[i].marker === this ) {
+			my_markers.removeMarker( i );
+			break;
+		}
+	}
+	
+	getRoute(OSRM.FULL_DESCRIPTION);
+	my_markers.highlight.hide();
+},
+onDrag: function(e) {
+//	console.log("[event] drag event");
+	this.parent.setPosition( e.target.getLatLng() );
+	if(OSRM.dragging == true)								// TODO: hack to deal with drag events after dragend event
+		getRoute(OSRM.NO_DESCRIPTION);
+	else
+		getRoute(OSRM.FULL_DESCRIPTION);
+},
+onDragStart: function(e) {
+//	console.log("[event] dragstart event");
+	OSRM.dragging = true;
+	
+	// hack to store id of dragged marker
+	for( var i=0; i<my_markers.route.length; i++)
+		if( my_markers.route[i].marker === this ) {
+			OSRM.dragid = i;
+			break;
+		}			
+	
+	my_markers.highlight.hide();	
+	if (my_route.isShown()) {
+		my_route.showOldRoute();
+	}
+},
+onDragEnd: function(e) {
+//	console.log("[event] dragend event");
+	getRoute(OSRM.FULL_DESCRIPTION);
+	if (my_route.isShown()) {
+		my_route.hideOldRoute();
+		my_route.hideUnnamedRoute();						// provides better visuals
+	}
+	OSRM.dragging = false;
+	//positionsToInput();
+},
+toString: function() {
+	return "OSRM.RouteMarker: \""+this.label+"\", "+this.position+")";
+},
+});
+
+
+//marker array class
+OSRM.Markers = function() {
+	this.route = new Array();
+	this.highlight = new OSRM.HighlightMarker("highlight", {draggable:false,icon:new L.Icon('images/marker-highlight.png')});;
+};
+OSRM.extend( OSRM.Markers,{
+removeAll: function() {
+	for(var i=0; i<this.route.length;i++)
+		this.route[i].hide();
+	this.route.splice(0, this.route.length);
+},
+removeVias: function() {
+	// assert correct route array s - v - t
+	for(var i=1; i<this.route.length-1;i++)
+		this.route[i].hide();
+	this.route.splice(1, this.route.length-2);
+},
+setSource: function(position) {
+	// source node is always first node
+	if( this.route[0] && this.route[0].label == OSRM.SOURCE_MARKER_LABEL )
+		this.route[0].setPosition(position);
+	else
+		this.route.splice(0,0, new OSRM.RouteMarker("source", {draggable:true,icon:new L.Icon('images/marker-source.png')}, position));
+	return 0;	
+},
+setTarget: function(position) {
+	// target node is always last node
+	if( this.route[this.route.length-1] && this.route[ this.route.length-1 ].label == OSRM.TARGET_MARKER_LABEL )
+		this.route[this.route.length-1].setPosition(position);
+	else
+		this.route.splice( this.route.length,0, new OSRM.RouteMarker("target", {draggable:true,icon:new L.Icon('images/marker-target.png')}, position));
+	return this.route.length-1;
+},
+setVia: function(id, position) {
+	// via nodes only between source and target nodes
+	if( this.route.length<2 || id > this.route.length-2 )
+		return -1;
+	
+	this.route.splice(id+1,0, new OSRM.RouteMarker("via", {draggable:true,icon:new L.Icon('images/marker-via.png')}, position));
+	return id+1;
+},
+removeMarker: function(id) {
+	if( id >= this.route.length )
+		return;
+	
+	// also remove vias if source or target are removed
+	if( id==0 && this.route[0].label == OSRM.SOURCE_MARKER_LABEL )
+		this.removeVias();
+	else if( id == this.route.length-1 && this.route[ this.route.length-1 ].label == OSRM.TARGET_MARKER_LABEL ) {
+		this.removeVias();
+		id = this.route.length-1;
+	}
+	
+	this.route[id].hide();
+	this.route.splice(id, 1);
+}
+});

WebContent/OSRM.Route.js

@@ -0,0 +1,169 @@
+// OSRM route classes
+
+
+// base route class
+OSRM.SimpleRoute = function (label, style) {
+	this.label = (label ? label : "route");
+	this.route = new L.DashedPolyline();
+	this.route.setLatLngs( [] );
+	if(style) this.route.setStyle( style );
+
+	this.shown = false;
+	
+ 	this.route.on('click', this.onClick); 	
+};
+OSRM.extend( OSRM.SimpleRoute,{
+show: function() {
+	map.addLayer(this.route);
+	this.shown = true;
+},
+hide: function() {
+	map.removeLayer(this.route);
+	this.shown = false;
+},
+isShown: function() {
+	return this.shown;
+},
+getPositions: function() {
+	return this.route.getLatLngs();
+},	
+setPositions: function(positions) {
+	this.route.setLatLngs( positions );
+},
+setStyle: function(style) {
+	this.route.setStyle(style);
+},
+centerView: function() {
+	var bounds = new L.LatLngBounds( this.getPositions() );
+	bounds._southWest.lng-=1.02;																// dirty hack
+	map.fitBounds( bounds );
+},
+onClick: function(e) {
+	if(my_route.isRoute())
+		findViaPosition( e.latlng );
+},
+toString: function() {
+	return "OSRM.Route("+ this.label + ", " + this.route.getLatLngs().length + " points)";
+},
+});
+
+
+// multiroute class (several separate route parts)
+OSRM.MultiRoute = function (label) {
+	this.label = (label ? label : "multiroute");
+	this.route = new L.LayerGroup();
+
+	this.shown = false;
+};
+OSRM.extend( OSRM.MultiRoute,{
+show: function() {
+	map.addLayer(this.route);
+	this.shown = true;
+},
+hide: function() {
+	map.removeLayer(this.route);
+	this.shown = false;
+},
+isShown: function() {
+	return this.shown;
+},
+addRoute: function(positions) {
+	var line = new L.DashedPolyline( positions );
+	line.on('click', function(e) { my_route.fire('click',e); });
+	this.route.addLayer( line );
+},
+clearRoutes: function() {
+	this.route.clearLayers();
+},
+setStyle: function(style) {
+	this.route.invoke('setStyle', style);
+},
+toString: function() {
+	return "OSRM.MultiRoute("+ this.label + ")";
+}
+});
+
+
+// main route class
+OSRM.Route = function() {
+	this._current_route	= new OSRM.SimpleRoute("current" , {dashed:false} );
+	this._old_route		= new OSRM.SimpleRoute("old", {dashed:false,color:"#123"} );
+	this._unnamed_route	= new OSRM.MultiRoute("unnamed");
+	
+	this._current_route_style	= {dashed:false,color:'#0033FF', weight:5};
+	this._current_noroute_style	= {dashed:true, color:'#222222', weight:2};
+	this._old_route_style	= {dashed:false,color:'#112233', weight:5};
+	this._old_noroute_style	= {dashed:true, color:'#000000', weight:2};
+	this._unnamed_route_style = {dashed:false, color:'#FF00FF', weight:10};
+	this._old_unnamed_route_style = {dashed:false, color:'#990099', weight:10};
+	
+	this._noroute = OSRM.Route.ROUTE;
+};
+OSRM.Route.NOROUTE = true;
+OSRM.Route.ROUTE = false;
+OSRM.extend( OSRM.Route,{
+	
+	showRoute: function(positions, noroute) {
+		this._noroute = noroute;
+		this._current_route.setPositions( positions );
+		if ( this._noroute == OSRM.Route.NOROUTE )
+			this._current_route.setStyle( this._current_noroute_style );
+		else
+			this._current_route.setStyle( this._current_route_style );
+		this._current_route.show();
+		//this._raiseUnnamedRoute();
+	},
+	hideRoute: function() {
+		this._current_route.hide();
+		this._unnamed_route.hide();
+	},
+	
+	showUnnamedRoute: function(positions) {
+		this._unnamed_route.clearRoutes();
+		for(var i=0; i<positions.length; i++) {
+			this._unnamed_route.addRoute(positions[i]);	
+		}
+		this._unnamed_route.setStyle( this._unnamed_route_style );
+		this._unnamed_route.show();
+	},
+	hideUnnamedRoute: function() {
+		this._unnamed_route.hide();
+	},
+	// TODO: hack to put unnamed_route above old_route -> easier way in Leaglet 0.4+	
+	_raiseUnnamedRoute: function() {
+		if(this._unnamed_route.isShown()) {
+			this._unnamed_route.hide();
+			this._unnamed_route.show();
+		}		
+	},	
+	showOldRoute: function() {
+		this._old_route.setPositions( this._current_route.getPositions() );
+		if ( this._noroute == OSRM.Route.NOROUTE)
+			this._old_route.setStyle( this._old_noroute_style );
+		else
+			this._old_route.setStyle( this._old_route_style );
+		this._old_route.show();
+		this._raiseUnnamedRoute();
+		// change color of unnamed route highlighting - no separate object as dragged route does not have unnamed route highlighting
+		this._unnamed_route.setStyle( this._old_unnamed_route_style );
+	},
+	hideOldRoute: function() {
+		this._old_route.hide();
+	},
+	
+	isShown: function() {
+		return this._current_route.isShown();
+	},
+	isRoute: function() {
+		return !(this._noroute);
+	},	
+	getPositions: function() {
+		return this._current_route.getPositions();
+	},
+	fire: function(type,event) {
+		this._current_route.route.fire(type,event);
+	},
+	centerView: function() {
+		this._current_route.centerView();
+	}
+});

WebContent/OSRM.Routing.js

@@ -0,0 +1,12 @@
+// OSRM route class
+
+
+OSRM.TheRoute = {
+	
+};
+OSRM.extend( OSRM.TheRoute, {
+
+show: function() {},
+hide: function() {},
+
+});

WebContent/OSRM.base.js

@@ -0,0 +1,27 @@
+// OSRM base class
+
+OSRM = {};
+OSRM.VERSION = '0.1';
+
+// inheritance helper function (convenience function)
+OSRM._inheritFromHelper = function() {};
+OSRM.inheritFrom = function( sub_class, base_class ) {
+	OSRM._inheritFromHelper.prototype = base_class.prototype;
+	sub_class.prototype = new OSRM._inheritFromHelper();
+	sub_class.prototype.constructor = sub_class;
+	sub_class.prototype.base = base_class.prototype;
+};
+
+// class prototype extending helper function (convenience function)
+OSRM.extend = function( target_class, properties ) {
+	for( property in properties ) {
+		target_class.prototype[property] = properties[property];
+	}
+};
+
+// usage:
+// SubClass = function() {
+// 	SubClass.prototype.base.constructor.apply(this, arguments);
+// }
+// OSRM.inheritFrom( SubClass, BaseClass );
+// OSRM.extend( SubClass, { property:value } );

WebContent/OSRM.config.js

@@ -0,0 +1,13 @@
+// OSRM config file
+// (has to be loaded directly after OSRM.base!)
+
+OSRM.DEFAULTS = {
+	//HOST_ROUTING_URL: 'http://router.project-osrm.org/viaroute',
+	HOST_ROUTING_URL: 'http://141.3.85.1/viaroute',
+	HOST_SHORTENER_URL: 'http://map.project-osrm.org/shorten/',
+	WEBSITE_URL: 'http://map.project-osrm.org/new/',
+	JSONP_TIMEOUT: 2000,
+	ZOOM_LEVEL: 14,
+	START_LATITUDE: 48.84,
+	START_LONGITUDE: 10.10,
+};

WebContent/geocoder.js

@@ -0,0 +1,79 @@
+// some constants
+OSRM.GEOCODE_POST = 'http://open.mapquestapi.com/nominatim/v1/search?format=json';
+OSRM.SOURCE_MARKER_LABEL = "source";
+OSRM.TARGET_MARKER_LABEL = "target";
+
+
+// prepare request and call geocoder
+function callGeocoder(marker_id, query) {
+	//build request
+	if (marker_id == OSRM.SOURCE_MARKER_LABEL) {
+		var src= OSRM.GEOCODE_POST + "&q=" + query;
+		OSRM.JSONP.call( src, showGeocoderResults_Source, showGeocoderResults_Timeout, OSRM.JSONP.TIMEOUT, "geocoder_source" );
+	} else if (marker_id == OSRM.TARGET_MARKER_LABEL) {
+		var src = OSRM.GEOCODE_POST + "&q=" + query; 
+		OSRM.JSONP.call( src, showGeocoderResults_Target, showGeocoderResults_Timeout, OSRM.JSONP.TIMEOUT, "geocoder_target" );		
+	}
+}
+
+
+// helper function for clicks on geocoder search results
+function onclickGeocoderResult(marker_id, lat, lon) {
+	var index;
+	if( marker_id == OSRM.SOURCE_MARKER_LABEL )
+		index = my_markers.setSource( new L.LatLng(lat, lon) );
+	else if( marker_id == OSRM.TARGET_MARKER_LABEL )
+		index = my_markers.setTarget( new L.LatLng(lat, lon) );
+	else
+		index = -1;													// search via positions not yet implemented
+	
+	my_markers.route[index].show();
+	my_markers.route[index].centerView();	
+	getRoute(OSRM.FULL_DESCRIPTION);
+}
+
+// processing JSONP response of geocoder
+// (with wrapper functions for source/target jsonp)
+function showGeocoderResults_Source(response) {	showGeocoderResults(OSRM.SOURCE_MARKER_LABEL, response); }
+function showGeocoderResults_Target(response) {	showGeocoderResults(OSRM.TARGET_MARKER_LABEL, response); }
+function showGeocoderResults(marker_id, response) {
+	if(response){
+		if(response.length == 0) {
+			showGeocoderResults_Empty();
+			return;
+		}
+	
+		var html = "";
+		html += '<table class="results-table">';	
+		for(var i=0; i < response.length; i++){
+			var result = response[i];
+
+			//odd or even ?
+			var rowstyle='results-odd';
+			if(i%2==0) { rowstyle='results-even'; }
+ 
+			html += '<tr class="'+rowstyle+'">';
+			html += '<td class="result-counter"><span">'+(i+1)+'.</span></td>';
+			html += '<td class="result-items">';
+
+			if(result.display_name){
+				html += '<div class="result-item" onclick="onclickGeocoderResult('+marker_id+', '+result.lat+', '+result.lon+');">'+result.display_name+'</div>';
+			}
+			html += "</td></tr>";
+		}
+		html += '</table>';
+		
+		document.getElementById('information-box-headline').innerHTML = OSRM.loc("SEARCH_RESULTS")+":";
+		document.getElementById('information-box').innerHTML = html;
+
+		onclickGeocoderResult(marker_id, response[0].lat, response[0].lon);
+	}
+}
+function showGeocoderResults_Empty() {
+	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("NO_RESULTS_FOUND")+".<p>";	
+}
+function showGeocoderResults_Timeout() {
+	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>";	
+}

WebContent/leaflet/leaflet.css

@@ -0,0 +1,323 @@
+/* required styles */
+
+.leaflet-map-pane,
+.leaflet-tile,
+.leaflet-marker-icon,
+.leaflet-marker-shadow,
+.leaflet-tile-pane,
+.leaflet-overlay-pane,
+.leaflet-shadow-pane,
+.leaflet-marker-pane,
+.leaflet-popup-pane,
+.leaflet-overlay-pane svg,
+.leaflet-zoom-box,
+.leaflet-image-layer { /* TODO optimize classes */
+	position: absolute;
+	}
+.leaflet-container {
+	overflow: hidden;
+	}
+.leaflet-tile-pane, .leaflet-container {
+	-webkit-transform: translate3d(0,0,0);
+	}
+.leaflet-tile,
+.leaflet-marker-icon,
+.leaflet-marker-shadow {
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	user-select: none;
+	}
+.leaflet-marker-icon,
+.leaflet-marker-shadow {
+	display: block;
+	}
+.leaflet-clickable {
+	cursor: pointer;
+	}
+.leaflet-container img {
+	max-width: none !important;
+	}
+
+.leaflet-tile-pane { z-index: 2; }
+
+.leaflet-objects-pane { z-index: 3; }
+.leaflet-overlay-pane { z-index: 4; }
+.leaflet-shadow-pane { z-index: 5; }
+.leaflet-marker-pane { z-index: 6; }
+.leaflet-popup-pane { z-index: 7; }
+
+.leaflet-zoom-box {
+	width: 0;
+	height: 0;
+	}
+
+.leaflet-tile {
+	visibility: hidden;
+	}
+.leaflet-tile-loaded {
+	visibility: inherit;
+	}
+
+a.leaflet-active {
+	outline: 2px solid orange;
+	}
+
+
+/* Leaflet controls */
+
+.leaflet-control {
+	position: relative;
+	z-index: 7;
+	}
+.leaflet-top,
+.leaflet-bottom {
+	position: absolute;
+	}
+.leaflet-top {
+	top: 0;
+	}
+.leaflet-right {
+	right: 0;
+	}
+.leaflet-bottom {
+	bottom: 0;
+	}
+.leaflet-left {
+	left: 0;
+	}
+.leaflet-control {
+	float: left;
+	clear: both;
+	}
+.leaflet-right .leaflet-control {
+	float: right;
+	}
+.leaflet-top .leaflet-control {
+	margin-top: 10px;
+	}
+.leaflet-bottom .leaflet-control {
+	margin-bottom: 10px;
+	}
+.leaflet-left .leaflet-control {
+	margin-left: 10px;
+	}
+.leaflet-right .leaflet-control {
+	margin-right: 10px;
+	}
+
+.leaflet-control-zoom, .leaflet-control-layers {
+	-moz-border-radius: 7px;
+	-webkit-border-radius: 7px;
+	border-radius: 7px;
+	}
+.leaflet-control-zoom {
+	padding: 5px;
+	background: rgba(0, 0, 0, 0.25);
+	}
+.leaflet-control-zoom a {
+	background-color: rgba(255, 255, 255, 0.75);
+	}
+.leaflet-control-zoom a, .leaflet-control-layers a {
+	background-position: 50% 50%;
+	background-repeat: no-repeat;
+	display: block;
+	}
+.leaflet-control-zoom a {
+	-moz-border-radius: 4px;
+	-webkit-border-radius: 4px;
+	border-radius: 4px;
+	width: 19px;
+	height: 19px;
+	}
+.leaflet-control-zoom a:hover {
+	background-color: #fff;
+	}
+.leaflet-big-buttons .leaflet-control-zoom a {
+	width: 27px;
+	height: 27px;
+	}
+.leaflet-control-zoom-in {
+	background-image: url(images/zoom-in.png);
+	margin-bottom: 5px;
+	}
+.leaflet-control-zoom-out {
+	background-image: url(images/zoom-out.png);
+	}
+
+.leaflet-control-layers {
+	-moz-box-shadow: 0 0 7px #999;
+	-webkit-box-shadow: 0 0 7px #999;
+	box-shadow: 0 0 7px #999;
+
+	background: #f8f8f9;
+	}
+.leaflet-control-layers a {
+	background-image: url(images/layers.png);
+	width: 36px;
+	height: 36px;
+	}
+.leaflet-big-buttons .leaflet-control-layers a {
+	width: 44px;
+	height: 44px;
+	}
+.leaflet-control-layers .leaflet-control-layers-list,
+.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
+	display: none;
+	}
+.leaflet-control-layers-expanded .leaflet-control-layers-list {
+	display: block;
+	position: relative;
+	}
+.leaflet-control-layers-expanded {
+	padding: 6px 10px 6px 6px;
+	font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
+	color: #333;
+	background: #fff;
+	}
+.leaflet-control-layers input {
+	margin-top: 2px;
+	position: relative;
+	top: 1px;
+	}
+.leaflet-control-layers label {
+	display: block;
+	}
+.leaflet-control-layers-separator {
+	height: 0;
+	border-top: 1px solid #ddd;
+	margin: 5px -10px 5px -6px;
+	}
+
+.leaflet-container .leaflet-control-attribution {
+	margin: 0;
+	padding: 0 5px;
+
+	font: 11px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
+	color: #333;
+
+	background-color: rgba(255, 255, 255, 0.7);
+
+	-moz-box-shadow: 0 0 7px #ccc;
+	-webkit-box-shadow: 0 0 7px #ccc;
+	box-shadow: 0 0 7px #ccc;
+	}
+
+
+/* Fade animations */
+
+.leaflet-fade-anim .leaflet-tile {
+	opacity: 0;
+
+	-webkit-transition: opacity 0.2s linear;
+	-moz-transition: opacity 0.2s linear;
+	-o-transition: opacity 0.2s linear;
+	transition: opacity 0.2s linear;
+	}
+.leaflet-fade-anim .leaflet-tile-loaded {
+	opacity: 1;
+	}
+
+.leaflet-fade-anim .leaflet-popup {
+	opacity: 0;
+
+	-webkit-transition: opacity 0.2s linear;
+	-moz-transition: opacity 0.2s linear;
+	-o-transition: opacity 0.2s linear;
+	transition: opacity 0.2s linear;
+	}
+.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
+	opacity: 1;
+	}
+
+.leaflet-zoom-anim .leaflet-tile {
+	-webkit-transition: none;
+	-moz-transition: none;
+	-o-transition: none;
+	transition: none;
+	}
+
+.leaflet-zoom-anim .leaflet-objects-pane {
+	visibility: hidden;
+	}
+
+
+/* Popup layout */
+
+.leaflet-popup {
+	position: absolute;
+	text-align: center;
+	-webkit-transform: translate3d(0,0,0);
+	}
+.leaflet-popup-content-wrapper {
+	padding: 1px;
+	text-align: left;
+	}
+.leaflet-popup-content {
+	margin: 19px;
+	}
+.leaflet-popup-tip-container {
+	margin: 0 auto;
+	width: 40px;
+	height: 16px;
+	position: relative;
+	overflow: hidden;
+	}
+.leaflet-popup-tip {
+	width: 15px;
+	height: 15px;
+	padding: 1px;
+
+	margin: -8px auto 0;
+
+	-moz-transform: rotate(45deg);
+	-webkit-transform: rotate(45deg);
+	-ms-transform: rotate(45deg);
+	-o-transform: rotate(45deg);
+	transform: rotate(45deg);
+	}
+.leaflet-popup-close-button {
+	position: absolute;
+	top: 9px;
+	right: 9px;
+
+	width: 10px;
+	height: 10px;
+
+	overflow: hidden;
+	}
+.leaflet-popup-content p {
+	margin: 18px 0;
+	}
+
+
+/* Visual appearance */
+
+.leaflet-container {
+	background: #ddd;
+	}
+.leaflet-container a {
+	color: #0078A8;
+	}
+.leaflet-zoom-box {
+	border: 2px dotted #05f;
+	background: white;
+	opacity: 0.5;
+	}
+.leaflet-popup-content-wrapper, .leaflet-popup-tip {
+	background: white;
+
+	box-shadow: 0 1px 10px #888;
+	-moz-box-shadow: 0 1px 10px #888;
+	 -webkit-box-shadow: 0 1px 14px #999;
+	}
+.leaflet-popup-content-wrapper {
+	-moz-border-radius: 20px;
+	-webkit-border-radius: 20px;
+	border-radius: 20px;
+	}
+.leaflet-popup-content {
+	font: 12px/1.4 "Helvetica Neue", Arial, Helvetica, sans-serif;
+	}
+.leaflet-popup-close-button {
+	background: white url(images/popup-close.png);
+	}

WebContent/leaflet/leaflet.ie.css

@@ -0,0 +1,48 @@
+.leaflet-tile {
+	filter: inherit;
+	}
+
+.leaflet-vml-shape {
+	width: 1px;
+	height: 1px;
+	}
+.lvml {
+	behavior: url(#default#VML); 
+	display: inline-block; 
+	position: absolute;
+	}
+	
+.leaflet-control {
+	display: inline;
+	}
+
+.leaflet-popup-tip {
+	width: 21px;
+	_width: 27px;
+	margin: 0 auto;
+	_margin-top: -3px;
+	
+	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
+	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
+	}
+.leaflet-popup-tip-container {
+	margin-top: -1px;
+	}
+.leaflet-popup-content-wrapper, .leaflet-popup-tip {
+	border: 1px solid #bbb;
+	}
+
+.leaflet-control-zoom {
+	filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#3F000000',EndColorStr='#3F000000');
+	}
+.leaflet-control-zoom a {
+	background-color: #eee;
+	}
+.leaflet-control-zoom a:hover {
+	background-color: #fff;
+	}
+.leaflet-control-layers-toggle {
+	}
+.leaflet-control-attribution, .leaflet-control-layers {
+	background: white;
+	}

WebContent/main.css

@@ -0,0 +1,240 @@
+/* styles for map */
+body {
+    padding: 0;
+    margin: 0;
+}
+html, body, #map {
+    height: 100%;
+}
+#map {
+	z-index: 0;
+}
+
+
+/* styles for gui */
+.vquad
+{
+	height:10px;
+}
+
+.gui-wrapper
+{
+	position:absolute;
+	border-radius:10px;
+	-moz-border-radius:10px;
+	-webkit-border-radius:10px;
+	background-color:#666666;
+	background-color:rgba(0, 0, 0, 0.25);
+	transition:left 1s;
+	-moz-transition:left 1s;
+	-webkit-transition:left 1s;
+	-o-transition:left 1s;
+}
+.gui-box
+{
+	position:absolute;
+	background-color:#ffffff;	
+	background-color:rgba(255,255,255,1);
+	border-radius:10px;
+	-moz-border-radius:10px;
+	-webkit-border-radius:10px;	
+	margin:5px;
+	padding:5px;	
+}
+
+#main-wrapper
+{
+	width:410px;
+	height:95%;
+	top:5px;
+	left:5px;
+}
+#main-input
+{
+	width:390px;
+	height:200px;
+}
+#main-output
+{
+	width:390px;
+	top:220px;
+	bottom:0px;
+}
+
+#blob-wrapper
+{
+	left:-5px;
+	top:5px;
+	width:36px;
+	height:36px;
+	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;
+	visibility:hidden;
+}
+#blob-input
+{
+	width:26px;
+	height:26px;
+	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
+{
+	cursor:pointer;
+	position:absolute;
+	right:5px;
+	top:5px;
+	width:16px;
+	height:16px;
+	background-image:url("images/cancel.png");	
+}
+#main-toggle:hover
+{
+	background-image:url("images/cancel_hover.png");
+}
+#main-toggle:active
+{
+	background-image:url("images/cancel_active.png");
+}
+
+.main-options
+{
+	cursor:pointer;
+	font-size:10px;
+}
+#options-toggle
+{
+	color:#0000ff
+}
+#options-toggle:hover
+{
+	color:#ff0000
+}
+#options-box
+{
+	visibility:hidden;
+}
+
+#osrm-logo
+{
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    width: 200px;
+    height: 50px;
+	text-align:center;
+	vertical-align: middle;    
+}
+
+.input-box
+{
+	width: 250px;
+}
+
+
+.full
+{
+	width:100%;
+}
+.right
+{
+	text-align:right;
+}
+.center
+{
+	text-align:center;
+}
+
+#information-box
+{
+	position:absolute;
+	bottom:15px;
+	top:50px;
+	width:380px;
+	font-size:12px;
+	overflow:auto;
+	margin:5px;
+}
+
+.route-summary
+{
+	font-size: 12px;
+}
+#gpx-link
+{
+	color:#0000ff;
+	text-decoration:none;
+}
+#gpx-link:hover
+{
+	color:#ff0000;
+}
+.results-table
+{
+	border-spacing:0px;
+}
+.results-odd
+{
+	background-color: #FAF3E9; //#ffffff;
+}
+.results-even
+{
+	background-color: #F2DE9C; //#ffffe0;
+}
+.result-counter
+{
+	text-align:right;
+	vertical-align: top;
+	width:30px;
+	font-weight:bold;
+	padding-left:5px;
+	padding-right:5px;
+	padding-top:1px;
+	padding-bottom:1px;
+}
+.result-items
+{
+	text-align:left;
+	vertical-align: middle;
+	width:100%;
+	padding-left:1px;
+	padding-right:1px;
+	padding-top:1px;
+	padding-bottom:1px;	
+}
+.result-direction
+{
+	width:30px;
+	padding-left:1px;
+	padding-right:1px;
+	padding-top:1px;
+	padding-bottom:1px;	
+}
+.result-item
+{
+	cursor:pointer;
+	color:#000000
+}
+.result-item:hover
+{
+	color:#ff0000
+}
+
+#legal-notice
+{
+	position:absolute;
+	right:0px;
+	bottom:0px;
+	padding:5px;
+	font-size:10px;
+}

WebContent/main.html

@@ -0,0 +1,110 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+
+
+<!--- head --->
+<head>
+
+<!-- metatags -->
+<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
+<title>OSRM Website</title>
+<meta name="description" content="OSRM Website"/>
+<meta name="author" content="Dennis Schieferdecker" />
+
+<!-- scripts -->
+<script src="leaflet/leaflet-src.js"></script>
+<!--[if lte IE 8]><link rel="stylesheet" href="leaflet/leaflet.ie.css" /><![endif]-->
+<script src="L.DashedPolyline.js"></script>
+<script src="L.MouseMarker.js"></script>
+
+<script src="OSRM.base.js"></script>
+<script src="OSRM.config.js"></script>
+
+<script src="OSRM.Browser.js"></script>
+<script src="OSRM.GUI.js"></script>
+<script src="OSRM.JSONP.js"></script>
+<script src="OSRM.Markers.js"></script>
+<script src="OSRM.Route.js"></script>
+<script src="OSRM.Localization.js"></script>
+
+<script src="main.js"></script>
+<script src="routing.js"></script>
+
+<script src="geocoder.js"></script>
+<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>
+
+
+<!--- body --->
+<body onload="init();">
+
+<!--map-->
+<div id="map"></div>
+
+<!-- show ui blob -->
+<div id="blob-wrapper" class="gui-wrapper">
+<div id="blob-input" class="gui-box">
+   	<div id="main-toggle" onclick="OSRM.GUI.toggleMain()"></div>
+</div>
+</div>
+
+<!-- show main gui -->
+<div id="main-wrapper" class="gui-wrapper">
+
+<!-- input box -->
+<div id="main-input" class="gui-box">
+	<div id="main-toggle" onclick="OSRM.GUI.toggleMain()"></div>
+	<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><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"><button id="gui-search-source" onclick="callGeocoder(OSRM.SOURCE_MARKER_LABEL, document.getElementById('input-source-name').value);">Suchen</button></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"><button id="gui-search-target" onclick="callGeocoder(OSRM.TARGET_MARKER_LABEL, document.getElementById('input-target-name').value);" >Suchen</button></td>
+    </tr>
+    </table>
+    
+	<!-- action buttons -->
+    <div class="vquad"></div>
+    <table style="width:100%">
+    <tr>
+    <td><button id="gui-reset" onclick="resetRouting();">Reset</button></td>
+    <td class="center"><button id="gui-reverse" onclick="reverseRouting();">Reverse</button></td>
+    <td class="right"><button id="gui-route" onclick="startRouting();">Route</button></td>
+    </tr>
+    </table>
+
+	<!-- options -->
+    <div class="vquad"></div>
+    <div id="options-toggle" class="main-options" onclick="OSRM.GUI.toggleOptions()">Options</div>
+    <div id="options-box" class="main-options">
+    <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 id="information-box-headline"></div>
+	<div id="information-box"></div>
+	<div id="legal-notice">GUI by Dennis Schieferdecker</div>
+</div>
+
+</div>
+
+</body>
+</html>

WebContent/main.js

@@ -0,0 +1,178 @@
+var map;
+
+
+function init() {
+	prefetchImages();
+	
+	initLocale();
+	initMap();
+	initRouting();
+
+ 	// check if the URL contains some GET parameter, e.g. for the route
+ 	checkURL();	
+}
+
+
+// prefetch images
+function prefetchImages() {
+	var images = [	'images/marker-source.png',
+	              	'images/marker-target.png',
+	              	'images/marker-via.png',
+	              	'images/marker-highlight.png'
+	              ];
+	var tmp = [];
+	
+	for(var i=0; i<images.length; i++) {
+		tmp[i] = new Image();
+		tmp[i].src = images[i];
+	}
+}
+
+
+// init localization
+function initLocale() {
+	document.getElementById("gui-route").innerHTML = OSRM.loc("GUI_ROUTE");
+	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-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("legal-notice").innerHTML = OSRM.loc("GUI_LEGAL_NOTICE");	
+}
+
+
+// centering on geolocation
+function callbak_centerOnGeolocation( position ) {
+	map.setView( new L.LatLng( position.coords.latitude, position.coords.longitude-0.02), OSRM.DEFAULTS.ZOOM_LEVEL);
+}
+function centerOnGeolocation() {
+	if (navigator.geolocation)
+		navigator.geolocation.getCurrentPosition( callbak_centerOnGeolocation );
+}
+
+
+// init map
+function initMap() {
+	var mapquestURL = 'http://otile{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png',
+		mapquestAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 MapQuest',
+		mapquestOptions = {maxZoom: 18, attribution: mapquestAttribution, subdomains: '1234'};
+	
+	var osmorgURL = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+		osmorgAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 Mapnik',
+		osmorgOptions = {maxZoom: 18, attribution: osmorgAttribution};
+
+	var osmdeURL = 'http://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png',
+		osmdeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 Mapnik',
+		osmdeOptions = {maxZoom: 18, attribution: osmdeAttribution};
+	
+	var cloudmadeURL = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
+    	cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
+	    cloudmadeOptions = {maxZoom: 18, attribution: cloudmadeAttribution};
+
+	var mapquest = new L.TileLayer(mapquestURL, mapquestOptions),
+    	osmorg = new L.TileLayer(osmorgURL, osmorgOptions),
+    	osmde = new L.TileLayer(osmdeURL, osmdeOptions),
+	    cloudmade = new L.TileLayer(cloudmadeURL, cloudmadeOptions);
+
+	map = new L.Map('map', {
+    	center: new L.LatLng(51.505, -0.09),
+	    zoom: 13,
+	    zoomAnimation: false,					// uncomment to remove animations and hiding of routes during zoom
+	    fadeAnimation: false,
+	    layers: [mapquest]
+	});
+
+	var baseMaps = {
+		"osm.org": osmorg,
+		"osm.de": osmde,
+		"MapQuest": mapquest,
+		"CloudMade": cloudmade
+	};
+
+	var overlayMaps = {};
+	var layersControl = new L.Control.Layers(baseMaps, overlayMaps);
+    map.addControl(layersControl);
+
+	getElementsByClassName(document,'leaflet-control-zoom')[0].style.left="420px";
+	getElementsByClassName(document,'leaflet-control-zoom')[0].style.top="5px";
+
+	map.setView( new L.LatLng( OSRM.DEFAULTS.START_LATITUDE, OSRM.DEFAULTS.START_LONGITUDE-0.02), OSRM.DEFAULTS.ZOOM_LEVEL);
+	map.on('zoomend', function(e) { getRoute(OSRM.FULL_DESCRIPTION); });	
+
+	// onmousemove test	
+//	map.on('mousemove', function(e) { console.log("pos: " + e.latlng); });
+//	map.on('mousemove', function(e) {
+//		var objs = new Array;
+//		var obj = null;
+//		do {
+//			obj = document.elementFromPoint(e.layerPoint.x, e.layerPoint.y);
+//			
+//			if (obj == null)
+//				break;			
+//			if (obj == document.body)
+//				break;
+//			if (obj instanceof SVGPathElement)
+//				break;			
+//		
+//			objs.push(obj);
+//			obj.style.display = 'none';
+//		} while(true);
+//		for(var i=0; i<objs.length; ++i)
+//			objs[i].style.display ='';
+//		
+//		if (obj == null)
+//			return;
+//		
+//		if (obj instanceof SVGPathElement)
+//			xroute.route.fire('mousemove',e);
+//		else
+//			xroute.route.fire('mouseout',e);
+//	});
+}
+
+
+// parse URL GET parameters if existing
+function checkURL(){
+	var called_url = document.location.search.substr(1,document.location.search.length);
+	if( called_url != '') {
+		var positions = [];
+
+		// parse input (currently only parses start, dest, via)
+		var splitted_url = called_url.split('&');
+		for(var i=0; i<splitted_url.length; i++) {
+			var name_val = splitted_url[i].split('=');
+			if(name_val.length!=2)
+				continue;
+				
+			var coordinates = unescape(name_val[1]).split(',');
+			if(coordinates.length!=2)
+				continue;
+				
+			if(name_val[0] == 'loc')
+				positions.push ( new L.LatLng( coordinates[0], coordinates[1]) );
+		}
+
+		// draw via points
+		if( positions.length > 0)
+			my_markers.setSource( positions[0] );
+		for(var i=1; i<positions.length-1;i++)
+			my_markers.setVia( i-1, positions[i] );
+		if(positions.length > 1)
+			my_markers.setTarget( positions[positions.length-1] );
+		for(var i=0; i<my_markers.route.length;i++)
+			my_markers.route[i].show();
+		
+		// compute route
+		getRoute(OSRM.FULL_DESCRIPTION);
+		
+		var bounds = new L.LatLngBounds( positions );
+		bounds._southWest.lng-=1.02;																// dirty hacks
+		map.fitBounds( bounds );
+		//my_route.centerView();
+	}
+}

WebContent/routing.js

@@ -0,0 +1,387 @@
+var my_route = undefined;
+var my_markers = undefined;
+
+OSRM.NO_DESCRIPTION = 0;
+OSRM.FULL_DESCRIPTION = 1;
+OSRM.dragging = false;
+OSRM.pending = false;
+OSRM.pendingTimer = undefined;
+
+// init data
+function initRouting() {
+	my_route = new OSRM.Route();
+	my_markers = new OSRM.Markers();
+}
+
+// decode compressed route geometry
+function decodeRouteGeometry(encoded, precision) {
+	precision = Math.pow(10, -precision);
+	var len = encoded.length, index=0, lat=0, lng = 0, array = [];
+	while (index < len) {
+		var b, shift = 0, result = 0;
+		do {
+			b = encoded.charCodeAt(index++) - 63;
+			result |= (b & 0x1f) << shift;
+			shift += 5;
+		} while (b >= 0x20);
+		var dlat = ((result & 1) ? ~(result >> 1) : (result >> 1));
+		lat += dlat;
+		shift = 0;
+		result = 0;
+		do {
+			b = encoded.charCodeAt(index++) - 63;
+			result |= (b & 0x1f) << shift;
+			shift += 5;
+		} while (b >= 0x20);
+		var dlng = ((result & 1) ? ~(result >> 1) : (result >> 1));
+		lng += dlng;
+		array.push([lat * precision, lng * precision]);
+	}
+	return array;
+}
+
+// display a transmitted route
+function timeoutRouteSimple() {
+	showNoRouteGeometry();
+	showNoRouteDescription();
+	document.getElementById('information-box').innerHTML = "<br><p style='font-size:14px;font-weight:bold;text-align:center;'>"+OSRM.loc("TIMED_OUT")+".<p>";
+}
+function timeoutRoute() {
+	showNoRouteGeometry();
+	my_route.hideUnnamedRoute();
+	showNoRouteDescription();
+	document.getElementById('information-box').innerHTML = "<br><p style='font-size:14px;font-weight:bold;text-align:center;'>"+OSRM.loc("TIMED_OUT")+".<p>";	
+}
+function showRouteSimple(response) {
+ 	if(!response)
+ 		return;
+ 	
+ 	if (OSRM.JSONP.fences.route)
+ 		return;
+ 	
+	if( response.status == 207) {
+		showNoRouteGeometry();
+		showNoRouteDescription();
+		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>";
+	} else {
+		showRouteGeometry(response);
+		showRouteDescriptionSimple(response);
+	}
+	updateHints(response);
+}
+function showRoute(response) {
+	if(!response)
+		return;
+	
+	if(response.status == 207) {
+		showNoRouteGeometry();
+		my_route.hideUnnamedRoute();
+		showNoRouteDescription();
+		document.getElementById('information-box').innerHTML = "<br><p style='font-size:14px;font-weight:bold;text-align:center;'>"+OSRM.loc("NO_ROUTE_FOUND")+".<p>";
+	} else {
+		showRouteGeometry(response);
+		showRouteNonames(response);
+		showRouteDescription(response);
+		snapRoute();
+	}
+	updateHints(response);
+}
+
+function showNoRouteGeometry() {
+	var positions = [];
+	for(var i=0; i<my_markers.route.length;i++)
+			positions.push( my_markers.route[i].getPosition() );
+
+	my_route.showRoute(positions, OSRM.Route.NOROUTE);
+}
+function showRouteGeometry(response) {
+	via_points = response.via_points.slice(0);
+
+	var geometry = decodeRouteGeometry(response.route_geometry, 5);
+
+	var points = [];
+	for( var i=0; i < geometry.length; i++) {
+		points.push( new L.LatLng(geometry[i][0], geometry[i][1]) );
+	}
+	my_route.showRoute(points, OSRM.Route.ROUTE);
+}
+
+function onClickRouteDescription(geometry_index) {
+	var positions = my_route.getPositions();
+
+	my_markers.highlight.setPosition( positions[geometry_index] );
+	my_markers.highlight.show();
+	my_markers.highlight.centerView();	
+}
+function onClickCreateShortcut(src){
+	OSRM.JSONP.call(OSRM.DEFAULTS.HOST_SHORTENER_URL+src+'&jsonp=showRouteLink', showRouteLink, showRouteLink_TimeOut, 2000, 'shortener');
+}
+function showRouteLink(response){
+	document.getElementById('route-link').innerHTML = '[<a id="gpx-link" href="' +response.ShortURL+ '">'+OSRM.loc("LINK_TO_ROUTE")+'</a>]';
+}
+function showRouteLink_TimeOut(){
+	document.getElementById('route-link').innerHTML = '['+OSRM.loc("LINK_TO_ROUTE_TIMEOUT")+']';
+}
+function showRouteDescription(response) {
+	// compute query string
+	var query_string = '?z='+ map.getZoom();
+	for(var i=0; i<my_markers.route.length; i++)
+		query_string += '&loc=' + my_markers.route[i].getLat() + ',' + my_markers.route[i].getLng(); 
+ 						
+	// create link to the route
+	var route_link ='<span class="route-summary" id="route-link">[<a id="gpx-link" href="#" onclick="onClickCreateShortcut(\'' + OSRM.DEFAULTS.WEBSITE_URL + query_string + '\')">'+OSRM.loc("GET_LINK")+'</a>]</span>';
+
+	// create GPX link
+	var gpx_link = '<span class="route-summary">[<a id="gpx-link" href="' + OSRM.DEFAULTS.HOST_ROUTING_URL + query_string + '&output=gpx">'+OSRM.loc("GPX_FILE")+'</a>]</span>';
+		
+	// create route description
+	var route_desc = "";
+	route_desc += '<table class="results-table">';
+
+	for(var i=0; i < response.route_instructions.length; i++){
+		//odd or even ?
+		var rowstyle='results-odd';
+		if(i%2==0) { rowstyle='results-even'; }
+
+		route_desc += '<tr class="'+rowstyle+'">';
+		
+		route_desc += '<td class="result-directions">';
+		route_desc += '<img width="18px" src="images/'+getDirectionIcon(response.route_instructions[i][0])+'"/>';
+		route_desc += "</td>";		
+		
+		//route_desc += '<td class="result-counter"><span">'+(i+1)+'.</span></td>';
+				
+		route_desc += '<td class="result-items">';
+		route_desc += '<span class="result-item" onclick="onClickRouteDescription('+response.route_instructions[i][3]+')">'
+						+ response.route_instructions[i][0] + ' on ';
+		if( response.route_instructions[i][2] > 0 )
+			route_desc += response.route_instructions[i][1] + ' for '
+						+ getDistanceWithUnit(response.route_instructions[i][2])
+						+ '</span>';
+		route_desc += "</td>";
+		
+		route_desc += "</tr>";
+	}
+		
+	route_desc += '</table>';		
+	headline = "";
+	headline += OSRM.loc("ROUTE_DESCRIPTION")+":<br>";
+	headline += '<div style="float:left;width:70%">';
+	headline += "<span class='route-summary'>"
+		+ OSRM.loc("DISTANCE")+": " + getDistanceWithUnit(response.route_summary.total_distance)
+		+ " - "
+		+ OSRM.loc("DURATION")+": " + secondsToTime(response.route_summary.total_time)
+		+ "</span>";		
+	headline +=	'</div>';
+	headline += '<div style="float:left;text-align:right;width:30%;">'+route_link+'<br>'+gpx_link+'</div>';
+
+	var output = "";
+	output += route_desc;
+
+	document.getElementById('information-box-headline').innerHTML = headline;
+	document.getElementById('information-box').innerHTML = output;
+}
+function showRouteDescriptionSimple(response) {
+	headline = OSRM.loc("ROUTE_DESCRIPTION")+":<br>";
+	headline += "<span class='route-summary'>"
+			+ OSRM.loc("DISTANCE")+": " + getDistanceWithUnit(response.route_summary.total_distance)
+			+ " - "
+			+ OSRM.loc("DURATION")+": " + secondsToTime(response.route_summary.total_time)
+			+ "</span>";
+	headline += '<br><br>';
+
+	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>";	
+}
+function showNoRouteDescription() {
+	headline = OSRM.loc("ROUTE_DESCRIPTION")+":<br>";
+	headline += "<span class='route-summary'>"
+			+ OSRM.loc("DISTANCE")+": N/A"
+			+ " - "
+			+ OSRM.loc("DURATION")+": N/A"
+			+ "</span>";
+	headline += '<br><br>';
+
+	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>";	
+}
+
+function showRouteNonames(response) {
+	// do not display unnamed streets?
+	if( document.getElementById('option-highlight-nonames').checked == false) {
+		my_route.hideUnnamedRoute();
+		return;
+	}
+		
+	// mark geometry positions where unnamed/named streets switch
+	var named = [];
+	for (var i = 0; i < response.route_instructions.length; i++) {
+		if( response.route_instructions[i][1] == '' )
+			named[ response.route_instructions[i][3] ] = false;		// no street name
+		else
+			named[ response.route_instructions[i][3] ] = true;		// yes street name
+	}
+
+	// aggregate geometry for unnamed streets
+	var geometry = decodeRouteGeometry(response.route_geometry, 5);
+	var is_named = true;
+	var current_positions = [];
+	var all_positions = [];
+	for( var i=0; i < geometry.length; i++) {
+		current_positions.push( new L.LatLng(geometry[i][0], geometry[i][1]) );
+
+		// still named/unnamed?
+		if( (named[i] == is_named || named[i] == undefined) && i != geometry.length-1 )
+			continue;
+
+		// switch between named/unnamed!
+		if(is_named == false)
+			all_positions.push( current_positions );
+		current_positions = [];
+		current_positions.push( new L.LatLng(geometry[i][0], geometry[i][1]) );
+		is_named = named[i];
+	}
+	
+	// display unnamed streets
+	my_route.showUnnamedRoute(all_positions);
+}
+
+// function for dragging and drawing routes
+function getRoute(do_description) {
+	
+	// if source or target are not set -> hide route
+	if( my_markers.route.length < 2 ) {
+		my_route.hideRoute();
+		//my_markers.removeVias();			// TODO: do I need this?
+		//my_markers.highlight.hide();
+		return;
+	}
+	
+	// prepare JSONP call
+	var type = undefined;
+	var callback = undefined;
+	var timeout = undefined;
+	
+	var source = OSRM.DEFAULTS.HOST_ROUTING_URL;
+	source += '?z=' + map.getZoom() + '&output=json' + '&geomformat=cmp';	
+	if(my_markers.checksum)
+		source += '&checksum=' + my_markers.checksum;
+	for(var i=0; i<my_markers.route.length; i++) {
+		source += '&loc='  + my_markers.route[i].getLat() + ',' + my_markers.route[i].getLng();
+		if( my_markers.route[i].hint)
+			source += '&hint=' + my_markers.route[i].hint;
+	}
+	
+	// decide whether it is a dragging call or a normal one
+	if (do_description) {
+		callback = showRoute;
+		timeout = timeoutRoute;
+		source +='&instructions=true';
+		type = 'route';
+	} else {
+		callback = showRouteSimple;
+		timeout = timeoutRouteSimple;
+		source +='&instructions=false';
+		type = 'dragging';
+	}
+	
+	// do call
+	var called = OSRM.JSONP.call(source, callback, timeout, OSRM.JSONP.TIMEOUT, type);
+
+	// TODO: guarantee to do last drag
+	if(called == false && !do_description) {
+		clearTimeout(OSRM.pendingTimer);
+		OSRM.pendingTimer = setTimeout(timeoutDrag,OSRM.JSONP.TIMEOUT);
+	}
+	else {
+		clearTimeout(OSRM.pendingTimer);
+	}
+}
+
+function timeoutDrag() {
+	my_markers.route[OSRM.dragid].hint = undefined;
+	getRoute(OSRM.NO_DESCRIPTION);	
+}
+
+function startRouting() {
+	getRoute(OSRM.FULL_DESCRIPTION);
+}
+
+function resetRouting() {
+	//document.getElementById('input-source-name').value = "";
+	//document.getElementById('input-target-name').value = "";
+	
+	my_route.hideRoute();
+	my_markers.removeAll();
+	my_markers.highlight.hide();
+	
+	document.getElementById('information-box').innerHTML = "";
+	document.getElementById('information-box-headline').innerHTML = "";
+}
+
+function updateHints(response) {
+	var hint_locations = response.hint_data.locations;
+	my_markers.checksum = response.hint_data.checksum;
+	for(var i=0; i<hint_locations.length; i++)
+		my_markers.route[i].hint = hint_locations[i];
+}
+
+function snapRoute() {
+	var positions = my_route.getPositions();
+ 	
+ 	my_markers.route[0].setPosition( positions[0] );
+ 	my_markers.route[my_markers.route.length-1].setPosition( positions[positions.length-1] );
+ 	for(var i=0; i<via_points.length; i++)
+		my_markers.route[i+1].setPosition( new L.LatLng(via_points[i][0], via_points[i][1]) ); 	
+}
+
+function positionsToInput() {
+	if(my_markers.route[0].label == OSRM.SOURCE_MARKER_LABEL) {
+		document.getElementById('input-source-name').value = my_markers.route[0].getPosition().lat.toFixed(6)+","+my_markers.route[0].getPosition().lng.toFixed(6);		
+	}
+	if(my_markers.route[my_markers.route.length-1].label == OSRM.TARGET_MARKER_LABEL) {
+		document.getElementById('input-target-name').value = my_markers.route[my_markers.route.length-1].getPosition().lat.toFixed(6)+","+my_markers.route[my_markers.route.length-1].getPosition().lng.toFixed(6);		
+	}	
+}
+
+function reverseRouting() {
+	my_markers.route.reverse();
+	if(my_markers.route.length == 1) {
+		if(my_markers.route[0].label == OSRM.TARGET_MARKER_LABEL) {
+			my_markers.route[0].label = OSRM.SOURCE_MARKER_LABEL;
+			my_markers.route[0].marker.setIcon( new L.Icon('images/marker-source.png') );
+		} else if(my_markers.route[0].label == OSRM.SOURCE_MARKER_LABEL) {
+			my_markers.route[0].label = OSRM.TARGET_MARKER_LABEL;
+			my_markers.route[0].marker.setIcon( new L.Icon('images/marker-target.png') );
+		}
+	} else if(my_markers.route.length > 1){
+		my_markers.route[0].label = OSRM.SOURCE_MARKER_LABEL;
+		my_markers.route[0].marker.setIcon( new L.Icon('images/marker-source.png') );
+		
+		my_markers.route[my_markers.route.length-1].label = OSRM.TARGET_MARKER_LABEL;
+		my_markers.route[my_markers.route.length-1].marker.setIcon( new L.Icon('images/marker-target.png') );		
+	}
+	getRoute(OSRM.FULL_DESCRIPTION);
+	my_markers.highlight.hide();
+}
+
+
+
+
+//--------------------
+function getDirectionIcon(name) {
+	var directions = {
+		"Turn left":"turn-left.png",
+		"Turn right":"turn-right.png",
+		"U-Turn":"u-turn.png",
+		"Head":"continue.png",
+		"Continue":"continue.png",
+		"Turn slight left":"slight-left.png",
+		"Turn slight right":"slight-right.png",
+	};
+	
+	if( directions[name] )
+		return directions[name];
+	else
+		return "default.png";
+}

WebContent/test.html

@@ -0,0 +1,27 @@
+<html> 
+<head>
+
+<script src="leaflet/leaflet-src.js"></script>
+<script src="OSRM.js"></script>
+<script src="OSRM.Markers.js"></script>
+
+<script type="text/javascript">
+function testSnippet()
+{
+	var marker = new OSRM.RouteMarker("source",undefined,new L.Icon('images/marker-source.png'));
+	marker.yyy();
+	for(a in marker)
+		alert(a);
+	alert(marker);
+}
+</script>
+</head>
+<body>
+
+<h1>Test Javascript Snippets</h1>
+<p id="output">This could be your output.</p>
+
+<button type="button" onclick="testSnippet()">Run Snippet</button>
+
+</body>
+</html> 

WebContent/utils.js

@@ -0,0 +1,69 @@
+// compatibility mode for old browser
+function getElementsByClassName(node, classname) {
+    var a = [];
+    var re = new RegExp('(^| )'+classname+'( |$)');
+    var els = node.getElementsByTagName("*");
+    for(var i=0,j=els.length; i<j; i++)
+        if(re.test(els[i].className))a.push(els[i]);
+    return a;
+}
+document.head = document.head || document.getElementsByTagName('head')[0];
+
+// ------------------------------------------------------
+
+// human readable time
+function secondsToTime(seconds){
+   seconds = parseInt(seconds);
+   minutes = parseInt(seconds/60);
+   seconds = seconds%60;
+   hours = parseInt(minutes/60);
+   minutes = minutes%60;
+   if(hours==0){
+   	return minutes+' min';
+   }
+   else{
+   	return hours+' h '+minutes+' min';
+   }
+}
+
+// human readable distance
+function getDistanceWithUnit(distance){
+	distance = parseInt(distance);
+	if(distance >= 1000){ return (parseInt(distance/1000))+' km'; }
+	else{ return distance+' m'; }
+}
+
+// ------------------------------------------------------
+
+// distance between two points
+function distanceBetweenPoint(x1, y1, x2, y2) {
+	var a = x1 - x2;
+	var b = y1 - y2;
+	return Math.sqrt(a*a + b*b);
+}
+
+// distance from a point to a line or segment
+// (x,y)   point
+// (x0,y0) line point A
+// (x1,y1) line point B
+// o       specifies if the distance should respect the limits of the segment (overLine = true)
+//         or if it should consider the segment as an infinite line (overLine = false);
+//         if false returns the distance from the point to the line,
+//         otherwise the distance from the point to the segment
+function dotLineLength(x, y, x0, y0, x1, y1, o){
+	function lineLength(x, y, x0, y0){return Math.sqrt((x -= x0) * x + (y -= y0) * y);}
+
+	if(o && !(o = function(x, y, x0, y0, x1, y1){
+		if(!(x1 - x0)) return {x: x0, y: y};
+		else if(!(y1 - y0)) return {x: x, y: y0};
+		var left, tg = -1 / ((y1 - y0) / (x1 - x0));
+		return {x: left = (x1 * (x * tg - y + y0) + x0 * (x * - tg + y - y1)) / (tg * (x1 - x0) + y0 - y1), y: tg * left - tg * x + y};
+    }(x, y, x0, y0, x1, y1) && o.x >= Math.min(x0, x1) && o.x <= Math.max(x0, x1) && o.y >= Math.min(y0, y1) && o.y <= Math.max(y0, y1))){
+		var l1 = lineLength(x, y, x0, y0), l2 = lineLength(x, y, x1, y1);
+		return l1 > l2 ? l2 : l1;
+    }
+    else {
+    	var a = y0 - y1, b = x1 - x0, c = x0 * y1 - y0 * x1;
+        return Math.abs(a * x + b * y + c) / Math.sqrt(a * a + b * b);
+    }
+};

WebContent/via.js

@@ -0,0 +1,42 @@
+var via_points;
+
+function findNearestRouteSegment( new_via ) {
+	var min_dist = Number.MAX_VALUE;
+	var min_index = undefined;
+
+	var positions = my_route.getPositions();
+	for(var i=0; i<positions.length-1; i++) {
+		var dist = dotLineLength( new_via.lng, new_via.lat, positions[i].lng, positions[i].lat, positions[i+1].lng, positions[i+1].lat, true);
+		if( dist < min_dist) {
+			min_dist = dist;
+			min_index = i+1;
+		}
+	}
+
+	return min_index;
+}
+
+
+function findViaPosition( new_via_position ) {
+	// find route segment that is closest to click position (marked by last index)
+	var nearest_index = findNearestRouteSegment( new_via_position );
+
+	// find correct index to insert new via node
+	var new_via_index = via_points.length;
+	var via_index = Array();
+	for(var i=0; i<via_points.length; i++) {
+		via_index[i] = findNearestRouteSegment( new L.LatLng(via_points[i][0], via_points[i][1]) );
+		if(via_index[i] > nearest_index) {
+			new_via_index = i;
+			break;
+		}
+	}
+
+	// add via node
+	var index = my_markers.setVia(new_via_index, new_via_position);
+	my_markers.route[index].show();
+	
+	getRoute(OSRM.FULL_DESCRIPTION);
+
+	return new_via_index;
+}