var map;
var aman;
var man = [];
var marker;
var ziel =  new GLatLng(48.544518, 7.737578);
var dragged = true;
var polys = [];
var icons = ['n','no','o','so','s','sw','w','nw'];
var picon;
var oldpos;
var currentLatLng;
var fovIcon;
function initialize() {
  if (GBrowserIsCompatible()) {
	var start   =  new GLatLng(48.583238,7.752582);
	fovIcon=new GIcon(G_DEFAULT_ICON);

	var myPOV  = {yaw:0,pitch:0};
	var baseIcon = new GIcon();
    baseIcon.iconSize=new GSize(32,32);
    baseIcon.iconAnchor=new GPoint(16,16);
    baseIcon.infoWindowAnchor=new GPoint(16,0);
    aman = new GIcon(baseIcon, "./res/manred.png");
    baseIcon.iconSize=new GSize(12,12);
    baseIcon.iconAnchor=new GPoint(6,6	);
    picon = new GIcon(baseIcon,'http://maps.google.com/mapfiles/kml/pal3/icon57.png');
    marker = new GMarker(start,{icon:aman,draggable:true,bouncy:true,bounceGravity:3});
	var myPano = new GStreetviewPanorama($("pano"));
	map = new GMap2($("map_canvas"));
	map.setCenter(start,17);
	svOverlay = new GStreetviewOverlay();
	map.addOverlay(svOverlay);
	map.addOverlay(marker);  	 	
	myPano.setLocationAndPOV(start,myPOV);
	oldpos=start;
	$('latlng').value = start.toUrlValue();
	var poly = new GPolyline(start,'#ff0000',6,0.5);
	map.addOverlay(poly);
	polys.push(poly);
	// start Flug:
	GEvent.addListener(marker, "dragstart", function(latlng) {
		marker.setImage('./res/manred.png');
		dragged = true;
	});  
	// geflogen:
	GEvent.addListener(marker, "dragend", function(latlng) {
		marker.setImage('./res/manred.png');
		var abstand = Math.round(latlng.distanceFrom(ziel));
		$('navi').style.display='block';
		$('dist').innerHTML= abstand;
		$('latlng').value = latlng.toUrlValue();
		myPano.setLocationAndPOV(latlng);
		// neues GPoly bauen:
		var poly = new GPolyline(latlng,'#ff0000',4,0.8);
		map.addOverlay(poly);
		polys.push(poly);
		dragged = true;
		oldpos = latlng;
		currentLatLng = latlng;
	});  
	// marschiert:
	GEvent.addListener(myPano,"initialized", function(location) {
		var latlng = location.latlng;
		currentLatLng = latlng;
		var abstand = Math.round(latlng.distanceFrom(ziel));
		$('navi').style.display='block';
		$('dist').innerHTML= abstand;
		$('txt').innerHTML= location.description;
		$('latlng').value = latlng.toUrlValue();
		marker.setLatLng(latlng);
		// Ränder holen:
		var bounds = map.getBounds();
		if (bounds.containsLatLng(latlng) == false) {
			map.panTo(latlng);
		}
		// aktuelle Polyline erweitern:
		var poly = polys[polys.length-1];
		var vertexndx =  poly.getVertexCount();
		if (vertexndx == 0) {
			poly.insertVertex(vertexndx,oldpos);
        	vertexndx = 1;
		} 
		marker.setImage('./res/man_'+icons[Math.round(poly.Bearing(poly[vertexndx-1],poly[vertexndx])/45)] +'.png');
		poly.insertVertex(vertexndx,latlng);
    	dragged = false;
		map.addOverlay(new GMarker(oldpos,{icon:picon}));
		oldpos = latlng;
   });
   // Sichtwinkel geändert:
   GEvent.addListener(myPano,"yawchanged", function(yaw) {
   		map.removeOverlay(fovIcon);
		var iconSize=150;
		fovIcon.image="./makebeacon.php?yaw=180";
		fovIcon.iconSize=new GSize(iconSize,iconSize);
		fovIcon.iconAnchor=new GPoint(iconSize/2,iconSize/2);
		fovIcon.shadow=null;
		var fovMarker=new GMarker(currentLatLng,{icon:fovIcon,clickable:false})
		//map.addOverlay(fovMarker);
   		$('yaw').value = '+' + Math.round(yaw) + '°';
   		var ndx = Math.round(parseFloat($('yaw').value)/45);
   		if (ndx>7) ndx = 0;
   		if (dragged == false) {
			var url = './res/man_'+icons[ndx] +'.png';
			marker.setImage(url);
 		}
 		dragged = false;
 });
   GEvent.addListener(myPano,"zoomchanged", function(yaw) {dragged = false;$('zoom').value =  Math.round(yaw) ;});
   GEvent.addListener(myPano,"pitchchanged", function(yaw) {dragged = false;$('pitch').value =  Math.round(yaw) ;});
 }
}