// JavaScript Document ??!?

google.load("maps", "2.84");

google.setOnLoadCallback(initialize);

function initialize() {
	var latlng   = $('Hdl_adresse').value.split(',');
	var lat      = parseFloat(latlng[0]);
	var lng      = parseFloat(latlng[1]);
	var punkt    = new GLatLng(lat,lng);
	var mitte    = new GLatLng(lat-0.1,lng);
	point        = [];
	marker       = [];
	gmarkers     = [];
	Grau         = [];
	map          = new google.maps.Map2($('map_canvas'));
	bounds       = new GLatLngBounds();
	myCitIcon    = "http://service.citroen.de/mymodules/service.citroen.de/templates/bilder/marker_citroen_big.png";
	myArrIcon    = "http://service.citroen.de/mymodules/service.citroen.de/templates/bilder/marker_citroen_start_big.png";
	myShadeIcon  = "http://service.citroen.de/mymodules/service.citroen.de/templates/bilder/marker_citroen_shadow.png";
	var baseIcon = new GIcon(G_DEFAULT_ICON);
	var citIcon = new GIcon(baseIcon);
	citIcon.image = myCitIcon;
	citIcon.shadow = myShadeIcon;
	citIcon.iconSize = new GSize(30, 40);
	citIcon.shadowSize = new GSize(50, 40);
	citIcon.iconAnchor = new GPoint(15, 40);
	citIcon.infoWindowAnchor = new GPoint(20,30);
	newIcon      = { icon:citIcon };
	gdir         = new GDirections(map);
	GEvent.addListener(gdir, "error", handleErrors);
	GEvent.addListener(gdir,"load", function() {
		if(!dirError) {
			map.clearOverlays();
			setTimeout('customPanel(map,"map",gdir,$("planer_ausgabe"))', 1);
			HaendlersucheRoutingSuche(false);
		}
	});   
	marker = new GMarker(punkt,newIcon);
	map.setCenter(mitte,9);
	
	if(document.anfahrt)HoleAdressenUndSetzteMitte();
	else map.addOverlay(marker);
}

function HoleAdressenUndSetzteMitte() {
	WerteNullen();	
	f = document.anfahrt.geocoords;
	for(j=0;j<f.length;j++) {
		var latlng = f[j].value.split(',');
		var lat    = parseFloat(latlng[0]);
		var lng    = parseFloat(latlng[1]);
		var point  = new GLatLng(lat,lng);
		var label  = f[i].title;  
		var name   = f[j].id;
		var marker = createMarker(point,name,label,j);
		map.addOverlay(marker);
	}
	map.setZoom(map.getBoundsZoomLevel(bounds)-1);
	map.setCenter(bounds.getCenter());
}
		
function WerteNullen() {
	bounds    = new GLatLngBounds();
	i         = 0;
	markerCnt = 0;
	map.clearOverlays();
	setMapHeight(198);
}

function createMarker(point,name,label,cnt) {
	var marker = new GMarker(point, newIcon); 
	bounds.extend(point);     
	GEvent.addListener(marker, "click", function() {
		SetzteAndereGrau(cnt+1);
		document.anfahrt.geocoords[cnt].checked=true;
		document.anfahrt.geocoords[cnt].focus();
        });
	gmarkers.push(marker);
	markerCnt ++;
	return marker;
}

function InfoFensterTriggern(num) {
	nummer = (num-1);
	GEvent.trigger(gmarkers[nummer], "click");
	SetzteAndereGrau(num);
}

function setMapHeight(height) {
	var myMarginTop = 0;
	if(height==198){
		myMarginTop = -60;
	}
	$("map_container").setStyle({					
		height: height+'px'
	});
	$("map_canvas").setStyle({
		marginTop: myMarginTop+'px'
	});
}


function SetzteAndereGrau(num) {
	var Haendler      = $('haendler_' + num);
	Haendler.setOpacity(1.0);
	Grau              = ($$('.rgt').concat($$('.lft'))).without(Haendler);
	for(g=0;g<Grau.length;g++) {
		$(Grau[g].id).setOpacity(0.4);
	}
}


function RoutenPlanung(fromAddress, toAddress, locale) {
	if(fromAddress.length && fromAddress != "Bitte Straße, PLZ und Ort eingeben"){
		dirError = false;
		setMapHeight(360);
		map.addControl(new GMapTypeControl());
		map.addControl(new GLargeMapControl());
		G_START_ICON.image = myArrIcon;
		G_START_ICON.shadow = myShadeIcon;
		G_START_ICON.iconSize = new GSize(30, 40);
		G_START_ICON.shadowSize = new GSize(50, 40);
		G_START_ICON.iconAnchor = new GPoint(15, 40);
		G_START_ICON.infoWindowAnchor = new GPoint(20,30);
		G_END_ICON.image   = myCitIcon;
		G_END_ICON.shadow = myShadeIcon;
		G_END_ICON.iconSize = new GSize(30, 40);
		G_END_ICON.shadowSize = new GSize(50, 40);
		G_END_ICON.iconAnchor = new GPoint(15, 40);
		G_END_ICON.infoWindowAnchor = new GPoint(20,30);
		gdir.load("from: " + fromAddress + " to: " + toAddress, { "locale": locale,getSteps:true });
		return false;
	}
	else{
		$('routing_info').update('Geben Sie bitte eine Adresse ein:');
		return false;
	}
}

function handleErrors() {
	if (gdir.getStatus().code == G_GEO_UNKNOWN_ADDRESS || gdir.getStatus().code == G_GEO_SERVER_ERROR || gdir.getStatus().code == G_GEO_MISSING_QUERY) {
		dirError = true;
		$('routing_info').update('Bitte überprüfen Sie Ihre Angaben:');
	}
}


function customPanel(map,mapname,dirn,div) {
	var html = "";
	
	function waypoint(point, type, address) {
		if(type == "play"){ 
			praefix = "Ihre Startadresse: ";
			image = "http://service.citroen.de/mymodules/service.citroen.de/templates/bilder/citroen_start.png";
			}
		else { 
			praefix = "Ihr Ziel: ";
			image = "http://service.citroen.de/mymodules/service.citroen.de/templates/bilder/citroen_big.png";
		}
		var target = '"' + mapname+".showMapBlowup(new GLatLng("+point.toUrlValue(6)+"))"  +'"';
		html += '<table style="border: 1px solid silver; margin: 10px 0px; background-color: rgb(238, 238, 238); border-collapse: collapse; color:#260313;">';
		html += '  <tr style="cursor: pointer;" onclick='+target+'>';
		html += '    <td style="padding: 4px 15px 0px 5px; vertical-align: middle; width: 20px;">';
		html += '      <img src="' + image + '">'
		html += '    <\/td>';
		html += '    <td style="vertical-align: middle; width: 100%;font-weight:bold">';
		html +=        praefix + '<b>' + address + '</b>';
		html += '    <\/td>';
		html += '  <\/tr>';
		html += '<\/table>';
	}
	
	function routeDistance(dist) {
		html += '<div style="text-align: right; padding-bottom: 0.3em;">' + dist + '<\/div>';
	}      
	
	function detail(point, num, description, dist) {
		var target = '"' + mapname +".showMapBlowup(new GLatLng("+point.toUrlValue(num)+"))"  +'"';
		html += '<table class="detail" style="margin: 0px; padding: 0px; border-collapse: collapse; width: 100%; ">';
		html += '  <tr style="cursor: pointer;" onclick='+target+'>';
		html += '    <td style="border-top: 1px solid rgb(205, 205, 205); margin: 0px; padding: 0.3em 3px; vertical-align: top; text-align: right; width:5%">';
		html += '      <a href="javascript:void(0)"> '+num+'. <\/a>';
		html += '    <\/td>';
		html += '    <td style="border-top: 1px solid rgb(205, 205, 205); margin: 0px; padding: 0.3em 3px; vertical-align: top; width:85%">';
		html +=        description;
		html += '    <\/td>';
		html += '    <td style="border-top: 1px solid rgb(205, 205, 205); margin: 0px; padding: 0.3em 3px 0.3em 0.5em; vertical-align: top; text-align: right; width:10%">';
		html +=        dist;
		html += '    <\/td>';
		html += '  <\/tr>';
		html += '<\/table>';
	}
	
	function copyright(text) {
		html += '<div style="font-size: 0.86em;">Diese Wegbeschreibung dient nur zu Planungszwecken. Es ist möglich, dass die Verkehrsverhältnisse aufgrund von Baustellen, Verkehr, Wetter oder anderen Ereignissen von den in der Karte dargestellten Suchergebnissen abweichen können. Sie sollten daher Ihre Route entsprechend planen. Sie müssen alle Zeichen oder Hinweise bezüglich Ihrer Route beachten. <br />' + text + '<\/div>';
	}
	
	for (var i=0; i<dirn.getNumRoutes(); i++) {
		if (i==0) {
			var type="play";
		} else {
			var type="pause";
		}
		var route = dirn.getRoute(i);
		var geocode = route.getStartGeocode();
		var point = route.getStep(0).getLatLng();
		waypoint(point, type, geocode.address);
		routeDistance(route.getDistance().html+" (Fahrzeit ca. "+route.getDuration().html+")");

		for (var j=0; j<route.getNumSteps(); j++) {
			var step        = route.getStep(j);
			var stepDetails = step.getDescriptionHtml()
			stepDetails     = stepDetails.replace(/(L[0-9]{1,3}n?)/g,'<span class="strasse_L">$1</span>');
			stepDetails     = stepDetails.replace(/(B[0-9]{1,3}n?)/g,'<span class="strasse_B">$1</span>');
			stepDetails     = stepDetails.replace(/(A[0-9]{1,3}n?)/g,'<span class="strasse_A">$1</span>');
			detail(step.getLatLng(), j+1, stepDetails, step.getDistance().html);
		}
	}
	
	var geocode = route.getEndGeocode();
	var point   = route.getEndLatLng();
	var address = thisPoiDescr.replace(/§§/,'<br /><span style="margin-left:54px;">' + geocode.address + '</span>');
	waypoint(point, "stop", address);
	
	copyright(dirn.getCopyrightsHtml());
	
	div.innerHTML = html;
}



function HaendlersucheRoutingSuche(bool) {
	if (bool == false) {
		$('routing_form').hide();
		$('planer_ausgabe').show();
		$('planer_ausgabe_zurueck').show();
	} else {
		$('routing_form').show();
		$('planer_ausgabe').hide();
		$('planer_ausgabe_zurueck').hide();
		if(document.anfahrt)HoleAdressenUndSetzteMitte();
	}
}

function  activateField(field) {
	if($(field).value == $(field).title) $(field).value = '';
	$(field).setStyle({ borderColor:'#c00',color:'#666'});
}