var map;
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var infoWindow, targetLocation;

function load() {
	// Geocoding of the target address
	targetAddress = document.getElementById('target_address').innerHTML +', '+ document.getElementById('target_zip_location').innerHTML;
	var geocoder = new google.maps.Geocoder();
	geocoder.geocode({ 'address': targetAddress }, function(results, status) {
		if (status == google.maps.GeocoderStatus.OK) {
			targetLocation = results[0].geometry.location;
			var mapOptions = {
				zoom: 12,
				center: targetLocation,
				mapTypeId: google.maps.MapTypeId.ROADMAP
			};
			map = new google.maps.Map(document.getElementById('map'), mapOptions);
			directionsDisplay = new google.maps.DirectionsRenderer({
				map: map,
				panel: document.getElementById('route')
			});
			
			var marker = new google.maps.Marker({
				map: map,
				position: targetLocation
			});
			infoWindow = new google.maps.InfoWindow({
				content: '<div>'+ targetAddress +'</div>'
			});
			google.maps.event.addListener(marker, 'click', function() {
				infoWindow.open(map, marker);
			});
		}
		else {
			alert('Fehler: '+ targetAddress +' konnte auf der Landkarte nicht gefunden werden.');
		}
	});
}

function setDirections(startAddress) {
	var request = {
		origin: startAddress,
		destination: targetLocation,
		travelMode: google.maps.DirectionsTravelMode.DRIVING
	};
	directionsService.route(request, function(response, status) {
		if (status == google.maps.DirectionsStatus.OK) {
			directionsDisplay.setDirections(response);
			changeStyles();
		}
		else {
			alert('Fehler: Ihre Start-Adresse konnte leider nicht gefunden werden.');
		}
	});
}

function changeStyles() {
	if (document.getElementById('route').getElementsByTagName('table').length == 0) {
		window.setTimeout('changeStyles()', 100);
		return;
	}

	document.getElementById('route_text').style.display = 'none';
	document.getElementById('route_form').style.display = 'none';

	var routeElement = document.getElementById('route');
	routeElement.getElementsByTagName('table')[0].className = 'marker_top';
	routeElement.getElementsByTagName('table')[1].className = 'route';
	routeElement.getElementsByTagName('table')[2].className = 'marker';
	routeElement.style.display = 'block';
}

