var ring = [
	[10.03257843712058,53.5920968502256],
	[10.03158187409204,53.59621727932465],
	[10.03154750136893,53.59804931668483],
	[10.03135475395911,53.59805195462167],
	[10.03141527452463,53.59607219353498],
	[10.03198695486684,53.59361885050745],
	[10.03152159890982,53.59319706676353],
	[10.03057837900343,53.59192777971974],
	[10.03064695678094,53.59188623005444],
	[10.03197214271803,53.5915640739602],
	[10.03213534186975,53.5915713612749],
	[10.03235630397666,53.59159385163834],
	[10.03249451716817,53.59163138240842],
	[10.03265822487789,53.59174899935993],
	[10.03257843712058,53.5920968502256]];
var points = [];	
var runde =1;
for(var i=0;i<ring.length;i++) points[i] = new GLatLng(ring[i][1],ring[i][0]);
var poly = new GPolygon(points, null, 5, 0.7, "#aaaaff", 0.5 );
//  
		
var dirn; 
var eol;
var points;
var k=0;
var stepnum=0;
var speed = "";   
var step = 1; // metres
var tick = 20; // milliseconds
var marker;
var map;
      	     
      
var rules = {
	'#type' : function(el) {
		el.onchange = function() {
		var type = el.value;
		if (type==0) map.setMapType(G_NORMAL_MAP);
    	if (type==1) map.setMapType(G_SATELLITE_MAP);
    	if (type==2) map.setMapType(G_HYBRID_MAP);
    	if (type==3) map.setMapType(G_PHYSICAL_MAP);

		}
	
	},
	'#stop' : function(el) {
		el.onclick = function() {
			if (el.value=='starten') {
				tick='23';
				animate(d);
				el.value='stoppen';
				Element.show('more');
				Element.show('less');

			} else {
				Element.hide('more');
				Element.hide('less');

				tick='999923';
				el.value='starten';
			}
		}
	},
	'#more' : function(el) {
		el.onclick = function() {
			tick=tick/2;
		}
	},
	'#less' : function(el) {
		el.onclick = function() {
			tick=tick*2;
		}
	},


	'#button' : function(el) {
		el.onclick = function() {
			 el.disabled = 'true';
			 Element.setOpacity($('controls'),0.7);
		     var startpoint = $F("startpoint");
        	 var endpoint   = $F("endpoint");
             var locale     = $F("lang");
          	 // Starten:
          	 if (el.getAttribute('rel') =='stop') {
          	 	el.setAttribute('rel','start'); 
          	 	var locale = $F('lang'); 
          	 	dirn.loadFromWaypoints([startpoint,endpoint],{
          			locale:locale,
          			getPolyline:true,
          			getSteps:true
          		});
			} else {
				el.setAttribute('rel','stop'); 
          	    GUnload();
				initGMap();
				$("button").disabled = null;
   	     	    $("button").value    = 'Start';
   	     	    $('startpoint').disabled=null;
   	     	    $('endpoint').disabled=null;
   	     	    $('lang').disabled=null;
   	     	}
		  }
	}
 };


Event.observe(window, 'load', init_app);
Event.observe(window, 'unload', GUnload);


function init_app(event) {
  Behaviour.register(rules);
  Behaviour.apply(rules);
  initGMap();	  	
}

function saveLocation() {
}


function dbg(i) {
	Try.these(function(){console.log(i);});
		
}




function initGMap() {
 	if (!GBrowserIsCompatible())  return 0;
// 		Element.setOpacity($('map'),0.8);
		map = new GMap2($("map"));
        var kml = new GGeoXml("http://tools.webmasterei.com/carrevival/stadtparkrevival.kml?" + Math.random(99));
   		map.addOverlay(kml)
        map.addControl(new GSmallZoomControl());
		 map.setCenter(new GLatLng(53.594339,10.030),15);
		map.setMapType(G_HYBRID_MAP);
	    var car = new GIcon();
        car.image="caricon.png"
        car.iconSize=new GSize(32,15);
        car.iconAnchor=new GPoint(20,17);
        eol = poly.Distance();
		map.setCenter(poly.getVertex(0),15);
		marker = new GMarker(poly.getVertex(0),{icon:car,zIndexProcess:importanceOrder});
		
		map.addOverlay(marker);
	//	marker.zIndexProcess(99);
		setTimeout("animate(0)",3000);  // Allow time for the initial map display
}


function importanceOrder (marker,b) {
        return GOverlay.getZIndex(marker.getPoint().lat()) + marker.importance*1000000;
      }

function animate(d) {
	if (d<3 && runde < 1 ) map.setZoom(16);
    var newtick = tick + Math.round(50*Math.random(50)) ;

	if (d == 1575) {
		d= 0;
		runde++;
	}	
    var p = poly.GetPointAtDistance(d);
    if (k++>=78/step) {
    	map.panTo(p);
        k=0;
    }
    $('out').innerHTML = '<table><tr><td rowspan=2>gefahrene Strecke: ' + d + ' m&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td>lat: '+ p.x + '</td></tr><tr><td>lng: '+p.y +'</td></tr></table>';
    $('out').innerHTML = 'gefahrene Strecke: ' + d + 'm&nbsp;&nbsp;&nbsp;&nbsp;' + runde + '. Runde';
    marker.setPoint(p);
    setTimeout("animate("+(d+step)+")", newtick  );
}