var map;

var PromoControl = function(url, src) {
	this.url_ = url;
	this.src_ = src;
};

PromoControl.prototype = new GControl(true);

PromoControl.prototype.initialize = function(map) {
	var container = document.createElement("div");
	container.innerHTML =
		'<img style="cursor:pointer" '
		+ 'src="' + this.src_ + '"'
		+ ' border="0" title="for-runners\nService f&uuml;r L&auml;ufer">';
	
	url = this.url_;
	
	GEvent.addDomListener(container, "click", function() {
		document.location = url;
	});
	
	map.getContainer().appendChild(container);
	
	return container;
};

PromoControl.prototype.getDefaultPosition = function() {
	return new GControlPosition(
		G_ANCHOR_TOP_RIGHT, new GSize(-3, 0));
};

function changeBodyClass(from, to) {
	document.body.className =
		document.body.className.replace(from, to);
	return false;
}

function TrackData(name, map) {

	// versehentlich ohne new aufgerufen?
	if ( !(this instanceof arguments.callee) )
		return new TrackData(name, map);
		
	this.map = map;
	this.mapId = name;
	this.eleData = null;
	this.eleMin = 0;
	this.eleMax = 0;
};

TrackData.prototype.setEleData = function(eleData, doCum) {
 	this.eleData = eleData;
 	if (doCum) {

		this.eleMin = eleData[0][1];
		this.eleMax = eleData[0][1];
		this.eleUp = 0;
		this.eleDown = 0;
		
		for (var n = 2; n < eleData.length; n++) {
		
			eleData[n][0] += eleData[n-1][0];
			var ele = eleData[n-1][1];
			if (ele < this.eleMin) {
				this.eleMin = ele;
			} else if (ele > this.eleMax) {
				this.eleMax = ele;
			}
			
			var dist = ele - eleData[n-2][1];
			if (dist > 0) {
				this.eleUp += dist;
			} else {
				this.eleDown += dist;
			}

		}
 	}
};

TrackData.prototype.getEleData = function() {
 	return this.eleData;
};

TrackData.prototype.showKm = function() {

	if (this.kmMarkers) {
		$.each(this.kmMarkers,function(n,kmMarker) {
				kmMarker.show();
			}
		);
	} else {
        var kmDot = new GIcon();
		kmDot.iconSize = new GSize(16,16);
		kmDot.iconAnchor = new GPoint(8,8);
        var kmDotImgs = [
         	"../../common/kmDot.png"
         	, "../../common/1km_dot.png"
         	, "../../common/2km_dot.png"
         	, "../../common/3km_dot.png"
         	, "../../common/4km_dot.png"
         	, "../../common/5km_dot.png"
         	, "../../common/6km_dot.png"
         	, "../../common/7km_dot.png"
         	, "../../common/8km_dot.png"
         	, "../../common/9km_dot.png"
         	, "../../common/10km_dot.png"
         	, "../../common/11km_dot.png"
         	, "../../common/12km_dot.png"
         	, "../../common/13km_dot.png"
         	, "../../common/14km_dot.png"
         	, "../../common/15km_dot.png"
         ];
        var km5DotImgs = [
         	"../../common/kmDot.png"
         	, "../../common/5km_dot.png"
         	, "../../common/10km_dot.png"
         	, "../../common/15km_dot.png"
         	, "../../common/20km_dot.png"
         	, "../../common/25km_dot.png"
         	, "../../common/30km_dot.png"
         	, "../../common/35km_dot.png"
         	, "../../common/40km_dot.png"
         	, "../../common/45km_dot.png"
         	, "../../common/50km_dot.png"
         	, "../../common/55km_dot.png"
         ];

		this.kmMarkers = new Array();

		var step = 1000;
		var dotImgs = kmDotImgs;
		if (trackData.length > 16000) {
			step = 5000;
			dotImgs = km5DotImgs;
		}

         for(var i = 1; i * step < trackData.length; i++) { 
         	if (i < dotImgs.length) {
				kmDot.image = dotImgs[i];
         	} else {
				kmDot.image = dotImgs[0];
         	}
         	
         	var kmMarker = new GMarker(distOnPoly(i * step, trackData.polyline),{icon: kmDot, clickable: false, title: "Kilometer " + i * step / 1000});
         	
         	this.kmMarkers.push(kmMarker);
			map.addOverlay(kmMarker);
         	//kmMarker.hide();
         	//kmMarker.show();
         }
	}
};

TrackData.prototype.hideKm = function() {
     $.each(this.kmMarkers,function(n,kmMarker) {
     	kmMarker.hide();
	});
};

TrackData.prototype.showPos = function() {
 	this.positionMarker.show();
};

TrackData.prototype.hidePos = function() {
 	this.positionMarker.hide();
};

TrackData.prototype.showElevation = function() {
	this.showPos();
	var selektor='#'+this.mapId;
	$(selektor).append('<div id="eleCont" style="display:none">' + 
    	'<div id="animControl" >' +
    		'<img id="animStart" class="animControl" src="../../common/start.png" title="Animation starten"/>' +
    		'<img id="animPause" class="animControl" src="../../common/pause.png" title="Animation anhalten"/>' +
    		'<img id="animStop" class="animControl" src="../../common/stop.png" title="Animation beenden"/>' +
    		'<img id="info" class="animControl" src="../../common/info.png" title="Informationen zur Strecke"/>' +
    		'<img id="help" class="animControl" src="../../common/help.png" title="Hilfe"/>' +
    	'</div>' +
	    '<span id="elevation" style="position:relative;float:left;width:150px; height:75px; background-color:white; border-bottom:1px black solid; border-left:1px black solid  "><span id="eleSparkline" style="position:relative;float:left;">Loading..</span></span>' +
	'</div>'
	);
	$('#eleCont').show();
//			$.sparkline_display_visible();
	var left = $('#eleCont').width() - $('#elevation').width();
	var top =  $(selektor).height() - $('#elevation').height() -32; //-15;
//			$('#eleCont').appendTo('#map1').css('position','relative').css('top',top + 'px').css('left', left + 'px').css('opacity','0.5');
	$('#eleCont').css('position','relative').css('top',top + 'px').css('left', left + 'px'); //.css('opacity','0.6');
	$('#elevation').css('opacity','0.6');
	var eleWidth = $('#elevation').width();
	var eleHeight = $('#elevation').height();
	$('#eleSparkline').sparkline(trackData.getEleData(), { type:'line', width:eleWidth+'px', height:'79px' });
	$('#elevation').mousemove(this.moveBar);
	$('#elevation').append('<span id="posbar" class="posbar" style="position:absolute;left:1px;top:1px;width:2px;height:73px;"></span>');
	$('#elevation').append('<span id="eleMin" class="eleLegend" style="position:absolute;left:1px;top:60px;"></span>');
	$('#elevation').append('<span id="eleMax" class="eleLegend" style="position:absolute;left:1px;top:0px;"></span>');

	$('.animControl').css('opacity',0.6);
	$('.animControl').mouseover(function (event) {
		$(event.target).css('opacity',1.0);
	});
	$('.animControl').mouseout(function (event) {
		$(event.target).css('opacity',0.6);
	});

	var scal = $('#elevation').width() / trackData.length;
	for(var i = 1000; i < trackData.length; i+=1000) { 
		$('#elevation').append('<span class="scala" style="position:absolute;left:'+Math.round(scal * i)+'px;top:71px;width:1px;height:4px;"></span>');
	}
	$('#eleMax').html(Math.round(trackData.eleMax) + 'm');
	$('#eleMin').html((trackData.eleMin > 0 ? Math.round(trackData.eleMin) : 0) + 'm');
	

	GEvent.addListener(this.polyline, "mouseover", function() {

		trackData.mousemoveListener = GEvent.addListener(trackData.map, "mousemove", function(latlng) {
		
		
			var dist = setPosOnPoly(latlng, trackData.polyline);
		   $("#posbar").css("left",Math.round(dist / trackData.length * $('#elevation').width())+"px");

		});
	});

	GEvent.addListener(this.polyline, "mouseout", function() {

		GEvent.removeListener(trackData.mousemoveListener);
	});
	
	if (jQuery.timer)
	{
		this.animInit();
	}
	
	if (jQuery.fn.bt)
	{
		showBt();
	} else {
		//Nachladen tuts irgendwie nicht :(	
	}
};

function showBt() {
	$('#help').bt('<span class="eleLegend"><div style="font-size:12px"><u>Bedienhilfe</u></div><br>'+
			'Sie sehen hier das H&ouml;henprofil der Laufstrecke.<br><br>'+
			'Wenn Sie mit der Maus &uuml;ber die Strecke fahren, k&ouml;nnen Sie im H&ouml;henprofil die zugeh&ouml;rigen H&ouml;henmeter erkennen.<br><br>'+
			'Fahren Sie mit der Maus &uuml;ber das H&ouml;henprofil, positioniert sich der <img class="animControl" src="../../common/pos_dot.png" /> auf die entsprechende Stelle der Strecke.<br><br>'+
			'Wenn Sie auf den kleinen gr&uuml;nen Startpunkt <img class="animControl" src="../../common/start.png" /> klicken, läuft der kleine Punkt <img class="animControl" src="../../common/pos_dot.png" /> für Sie die Strecke ab.<br><br>Viel Spass !!</span>',
		{trigger: 'click', 
  width: '250px'		,
  padding: 20,
//  spikeLength: 0,
//  spikeGirth: 0,
  killTitle:        false,
  overlap:          -6,
  cornerRadius: 40,
  closeWhenOthersOpen: true,
  fill: 'rgba(255, 255, 255, .8)',
  strokeWidth: 3,
  strokeStyle: '#0080ff',
		
		positions: 'top'});
	
	$('#info').bt('<span class="eleLegend"><div style="font-size:12px"><u>Informationen zur Strecke</u></div><br>'+
'<span style="float: right">' + Math.round(trackData.length/100)/10 + ' Km</span>'+			'Streckenl&auml;nge:<br>'+
'<span style="float: right">' + Math.round(trackData.eleMax) + ' m</span>'+			'H&ouml;chster Punkt der Strecke:<br>' + 
'<span style="float: right">' + Math.round(trackData.eleMin) + ' m</span>'+			'Niedrigster Punkt der Strecke:<br>' + 
'<span style="float: right">' + Math.round(trackData.eleUp) + ' m</span>'+			'H&ouml;henmeter insgesamt:' + '</span>',
				{trigger: 'click',

  padding: 20,
//  spikeLength: 0,
//  spikeGirth: 0,
  killTitle:        false,
  overlap:          -6,
  cornerRadius: 40,
  closeWhenOthersOpen: true,
  fill: 'rgba(255, 255, 255, .8)',
  strokeWidth: 3,
  strokeStyle: '#0080ff',
				 positions: 'top'} );
}

TrackData.prototype.moveBar = function(e) {
//	function moveBar (e) {
	
			//alert(e);
			var min = $('#eleCont').position().left;
			var max = $('#elevation').width() - $('#posbar').width() -1;
			var xPos = e.pageX - min;
	
			if (xPos>max) {xPos=max};
			if (xPos<0) {xPos=0};
				
			// position ausgeben
			$("#posbar").css("left",xPos+"px");
		    
		    var dist = trackData.length*xPos/max;
		    trackData.setPosByDist(dist);            
		    
	};

TrackData.prototype.setPosByDist = function(dist) {
    var p = distOnPoly(dist, trackData.polyline);
    if (! trackData.map.getBounds().contains(p)) {
    	trackData.map.setCenter(p);
    }
    trackData.positionMarker.setPoint(p);            
}


TrackData.prototype.animInit = function () {

		var dist = 50;
		var times = this.length / dist;

		$("#animStart").one('click', animStart);

		function animStart() {
			$(document).everyTime(200, 'animRun', animRun, times);
			$("#animPause").one('click', animPause);
			$("#animStop").one('click', animStop);
		}
		
		function animPause() {
			$(document).stopTime("animRun");
			$("#animStart").one('click', animStart);
		}
		
		function animStop() {
				$(document).stopTime("animRun");
				dist = 50;
				trackData.setPosByDist(dist );
				$("#animStart").one('click', animStart);
				$("#animPause").unbind('click');
		}

		function animRun() {
			trackData.setPosByDist(dist );
			$("#posbar").css("left",Math.round(dist / trackData.length * $('#elevation').width())+"px");
			dist += 50;
			if (dist >= trackData.length) {
				$("#animStop").unbind('click');
				animStop();
			}
		}
}

	var trackData;

    function genMap(mapName, punkte, markers, logo, mapType) {
    	var td = genMap2(mapName, punkte, markers, logo, mapType);
    	return td.map;
    }
    	
    function genMap2(mapName, punkte, markers, logo, mapType) {
        
		//eventuell Koordinaten für Marker setzen
		var myMarker = markers[0];
		var myPoint = punkte[0];
		if (myMarker.latitude == null) {
			myMarker.latitude = myPoint.lat();
		}
		if (myMarker.longitude == null) {
			myMarker.longitude = myPoint.lng();
		}
		
        //Container für Karte hole
        map = new GMap2(document.getElementById(mapName));
        
        trackData = new TrackData(mapName, map);
        
        //Rechteck um die Punkte erzeugen
        trackData.bounds = new GLatLngBounds();
        for (i = 0; i < punkte.length; i++) {
            
          trackData.bounds.extend(punkte[i]);
        }
        
        if (logo != null) {
			map.addControl(new PromoControl("http://www.for-runners.de", logo));
        }
        
        // Google Controls
//        map.addControl(new GSmallZoomControl());
        
        //Karte justieren
        map.setCenter(trackData.bounds.getCenter(), map.getBoundsZoomLevel(trackData.bounds), mapType);

        // Strecke zeichnen
        trackData.polyline = new GPolyline(punkte,"#0080ff",4);
		trackData.length = trackData.polyline.getLength();
        map.addOverlay(trackData.polyline);
        
		//alert('frTrack.getLength() = ' + trackData.polyline.getLength() );


        //Marker aufnehmen
        placeMarkers(map, markers);

		this.kmMarkers = null;
		
        var dot = new GIcon();
        dot.iconSize = new GSize(16,16);
        dot.iconAnchor = new GPoint(8,8);
        dot.image = "../../common/pos_dot.png";

		trackData.positionMarker = new GMarker(trackData.polyline.getVertex(0),{icon: dot, clickable: false});
		map.addOverlay(trackData.positionMarker);
		trackData.positionMarker.hide();		
		
		if ( window.jQuery ) {
		
			jQueryLoadScript( new Array('../../common/', 'http://www.conus.de/js/'), 'jquery.googleAnalytics.js', function(){$.ga("UA-8321068-1");});
		}
       
        return trackData;
        
    }
    
    function jQueryLoadScript( path, script, func) {
    
    	var e;

    	for (var i = 0; i < path.length; ++i) {
    	
    		try {
    			var toLoad = path[i] + script;
				$.getScript( toLoad,	func);
				return;
    		} catch (e) {
    		}
    	}
    	alert(e);
    }
    
    function placeMarkers(map, markers) {
        
        for (i = 0; i < markers.length; i++) {
            
          placeMarker(map, markers[i]);
        }
		
		
    }
    
    function placeMarker(map, marker) {
        
          var icon = new GIcon();
          icon.image = marker.image;
          icon.iconSize = marker.iconSize ;
          icon.iconAnchor = marker.iconAnchor;
          icon.infoWindowAnchor = new GPoint(14, 14);
        
          var newMarker = new GMarker(new GLatLng(marker.latitude, marker.longitude), {icon: icon, title: marker.name});//, icon);
          
          if (marker.info) {
          	    GEvent.addListener(newMarker, "click", 
    				function() { newMarker.openInfoWindowHtml(marker.info)}
				);
          }
          map.addOverlay(newMarker);

    }
    

/*
    function placeDorintMarkers(map, markers) {
        
		var icon = new GIcon();
	    icon.iconSize = new GSize(36,36);
	    icon.shadowSize = new GSize(36, 36);
	    icon.iconAnchor = new GPoint(19,35);
	    icon.infoWindowAnchor = new GPoint(5, 1);
	 	var hotelIcon = new GIcon(icon, "http://media.dorint.com/media/_icons/dorintmarker.png", null, "http://media.dorint.com/media/_icons/dorintshadow.png" );

        for (i = 0; i < markers.length; i++) {
            
          var myMarker = markers[i];
/ *          var icon = new GIcon();
          icon.image = myMarker.image;
          icon.iconSize = myMarker.iconSize ;
          icon.iconAnchor = myMarker.iconAnchor; * /
        
          var marker = new GMarker(new GLatLng(myMarker.latitude, myMarker.longitude), hotelIcon );
          map.addOverlay(marker);

        }
		
		
    }
*/

    function getPunkte(name) {
        var strecke = document.getElementById(name);
        var trkseg = strecke.documentElement.childNodes(1).childNodes(2);
        
        var punkte = [];

        for(i=0;i<trkseg.childNodes.length;i++)
        {
           with(trkseg.childNodes(i))
           {
             punkte[i] = new GLatLng(getAttribute("lat"), getAttribute("lon"));
           }
        }
        
        return punkte;
    }

  

function addMarker(latitude, longitude, description) {
    
    var marker = new GMarker(new GLatLng(latitude,longitude));
    GEvent.addListener(marker, "click", 
    function() {marker.openInfoWindowHtml(description)}
);
    map.addOverlay(marker);
        
}


	var polyCount = 1;
	var polyLength = 0;
	
     function distOnPoly(position, poly) {
       var dist = 0, length = 0, m = 1;
       
       if (position >= polyLength) {
       	//ab der aktuellen Position weiterlaufen
		m = polyCount;
		dist = polyLength;
		
       } else if ((position > 200) && (position < polyLength)) {
       	//von der aktuellen Position zurücklaufen
       	return distOnPolyBack(position, poly);
       }
       
       for (; m < poly.getVertexCount() && dist <= position; m++) {
         length = poly.getVertex(m).distanceFrom(poly.getVertex(m-1));
         dist += length;
       }

       polyCount = m;
       polyLength = dist;
       
       var p1 = poly.getVertex(m-1), p2 = poly.getVertex(m-2), d = (dist - position) / length;
       return new GLatLng(p1.lat()*(1-d) + p2.lat()*d, p1.lng()*(1-d) + p2.lng()*d);
     }

     function distOnPolyBack(position, poly) {

       var dist = polyLength, length = 0, m = polyCount;

       for (; m > 1 && dist >= position; m--) {
         length = poly.getVertex(m).distanceFrom(poly.getVertex(m-1));
         dist -= length;
       }

       polyCount = m;
       polyLength = dist;
       
       var p1 = poly.getVertex(m-1), p2 = poly.getVertex(m-2), d = (dist - position) / length;
       return new GLatLng(p1.lat()*(1-d) + p2.lat()*d, p1.lng()*(1-d) + p2.lng()*d);
     }

     function setPosOnPoly(latlng, poly) {
       var min = 10000, m = 1;
       var pos = poly.getVertex(0);
       var dist = 0;
       var posDist = 0;
       for (; m < poly.getVertexCount(); m++) {
         dist += poly.getVertex(m).distanceFrom(poly.getVertex(m-1));
         var length = poly.getVertex(m).distanceFrom(latlng);
         if (length < min) {
         	min = length;
         	pos = poly.getVertex(m);
         	posDist = dist;
         }
       }

		trackData.positionMarker.setPoint(pos);

       return posDist;
     }

	function setDimByParam(selector) {
	
		setCssDim(selector, "height");
		setCssDim(selector, "width");
		
		return;
	}

	function setCssDim(selector, style) {
	
		var param = jQuery.url.param(style);
		if (param) {
			if (!isNaN(new Number(param))) {
				param=param + 'px';
			}
			$(selector).css(style, param);
		}
	}

	function log(text) {
		if(!$('#consoleText')) {
			$('body').append('<fieldset id="console"><legend>Console</legend><div style="overflow:scroll"><span id="consoleText"></span></div></fieldset>');
		}
		$('#consoleText').append(text+'<br>');
	}

	function hideLog(text) {
		$('#console').hide();
	}