var map;

var baseIcon = new GIcon();
baseIcon.image = "http://www.consailing.de/Images/sailing.png";
baseIcon.shadow = "http://www.consailing.de/Images/sailing.shadow.png";
baseIcon.iconSize=new GSize(32,32);
baseIcon.shadowSize=new GSize(59,32);
baseIcon.iconAnchor=new GPoint(16,32);
baseIcon.infoWindowAnchor=new GPoint(16,16);

var toernIcon = new GIcon(baseIcon);

var fotoIcon = new GIcon(baseIcon);
fotoIcon.image = "http://www.consailing.de/Images/camera.png";
fotoIcon.shadow = "http://www.consailing.de/Images/camera.shadow.png";

var liegeplatzIcon = new GIcon(baseIcon);
liegeplatzIcon.image = "http://www.consailing.de/Images/marina.png";
liegeplatzIcon.shadow = "http://www.consailing.de/Images/marina.shadow.png";

var sailIcon = new GIcon(baseIcon);
sailIcon.image = "http://www.consailing.de/Images/sailing.png";
sailIcon.shadow = "http://www.consailing.de/Images/sailing.shadow.png";
sailIcon.iconSize=new GSize(32,32);
sailIcon.shadowSize=new GSize(59,32);
sailIcon.iconAnchor=new GPoint(16,32);
sailIcon.infoWindowAnchor=new GPoint(16,16);

var BildPunkte = [];

function BildPunkt(point, image, xml, title, info, icon, format) {
	this.point = point;
	this.image = image;
	this.xml = xml;
	this.title = title;
	this.info = info;
	if (icon == 'sail')
		this.icon = sailIcon;
	else if (icon == 'foto')
		this.icon = fotoIcon;
	else if (icon == 'liegeplatz')
		this.icon = liegeplatzIcon;
	else if (icon == 'toern')
		this.icon = toernIcon;
	this.format = format;
}

function bildAnzeigen(idx) {
	document.getElementById('popup').style.display='inline';
	element = document.getElementById('caption');
  	if (element)
	  element.innerHTML = BildPunkte[idx].info;
  	document.images["slide"].src = "/Images/" + BildPunkte[idx].image + ".jpg";
  	map.closeInfoWindow();
}

function createMarker(idx) {
	var marker;
	var html;
	if (BildPunkte[idx].image != null) {
		marker = new GMarker(BildPunkte[idx].point, BildPunkte[idx].icon);
		if (BildPunkte[idx].format == 'portrait')
			html = "<div class='bildmarker'><p><b>" + BildPunkte[idx].title + "</b></p><a class='bildmarker' href='javascript:onclick=bildAnzeigen(" + idx + ")'><img width='120' height='160' border=0 src='/Images/preview/" + BildPunkte[idx].image + ".jpg' title='Bild vergrößern'></a><br/><a class='bildmarkerlink' href='javascript:onclick=bildAnzeigen(" + idx + ")'>Bild vergrößern</a></div>";
		else
			html = "<div class='bildmarker'><p><b>" + BildPunkte[idx].title + "</b></p><a class='bildmarker' href='javascript:onclick=bildAnzeigen(" + idx + ")'><img width='160' height='120' border=0 src='/Images/preview/" + BildPunkte[idx].image + ".jpg' title='Bild vergrößern'></a><br/><a class='bildmarkerlink' href='javascript:onclick=bildAnzeigen(" + idx + ")'>Bild vergrößern</a></div>";
	} else if (BildPunkte[idx].xml != null) {
		marker = new GMarker(BildPunkte[idx].point, BildPunkte[idx].icon);
		html = "<div class='textmarker'><b>" + BildPunkte[idx].title + "</b><br/>" + BildPunkte[idx].info + "<a class='bildmarkerlink' href='javascript:onclick=loadXml(\"" + BildPunkte[idx].xml + "\")'>Törn anzeigen</a></div>";
	} else {
		marker = new GMarker(BildPunkte[idx].point, BildPunkte[idx].icon);
		html = "<div class='textmarker'><b>" + BildPunkte[idx].title + "</b><br/>" + BildPunkte[idx].info + "</div>";
	}
	GEvent.addListener(marker, 'click', function() { marker.openInfoWindowHtml(html); });
	return marker;
}

function centerAndZoom(lng, lat, zoom) {
	map.setCenter(new GLatLng(lat, lng), zoom, G_SATELLITE_MAP);
}

function loadXml(xmlfile) {
	var request = GXmlHttp.create();
	request.open("GET", "/xml/" + xmlfile, true);
	request.onreadystatechange = function() {
		if (request.readyState == 4) {
			var xmlDoc = request.responseXML;
			var centerAndZoom = xmlDoc.documentElement.getElementsByTagName("centerAndZoom")[0];
			if (centerAndZoom) {
				var lat = parseFloat(centerAndZoom.getAttribute("lat"));
				var lng = parseFloat(centerAndZoom.getAttribute("lng"));
				var point = new GLatLng(lat,lng);
				var zoom = parseInt(centerAndZoom.getAttribute("zoom"));
				map.setCenter(point, zoom, G_SATELLITE_MAP);
			}
			map.clearOverlays();
			
			// obtain the array of markers and loop through it
			var markers = xmlDoc.documentElement.getElementsByTagName("marker");
			for (var i = 0; i < markers.length; i++) {
				// obtain the attribues of each marker
				var lat = parseFloat(markers[i].getAttribute("lat"));
				var lng = parseFloat(markers[i].getAttribute("lng"));
				var point = new GLatLng(lat,lng);
				var info = GXml.value(markers[i].getElementsByTagName("info")[0]);
				var image = markers[i].getAttribute("img");
				var xml = markers[i].getAttribute("xml");
				var title = markers[i].getAttribute("title");
				var icon = markers[i].getAttribute("icon");
				var format = markers[i].getAttribute("format");
				if (format == null)
					format = "landscape";
				BildPunkte[i] = new BildPunkt(point, image, xml, title, info, icon, format);
				map.addOverlay(createMarker(i));
			}
			
			var lines = xmlDoc.documentElement.getElementsByTagName("line");
			// read each line
			for (var a = 0; a < lines.length; a++) {
				// get any line attributes
				var colour = lines[a].getAttribute("colour");
				var width	= parseFloat(lines[a].getAttribute("width"));
				// read each point on that line
				var points = lines[a].getElementsByTagName("point");
				var pts = [];
				for (var i = 0; i < points.length; i++) {
					pts[i] = new GLatLng(parseFloat(points[i].getAttribute("lat")),
										 parseFloat(points[i].getAttribute("lng")));
				}
				map.addOverlay(new GPolyline(pts,colour,width, 1));
			}
		}
	}
	request.send(null);
}

function makeMap() {
	var xmlFile = "uebersicht.xml";
	var pos = document.URL.indexOf("=");
	if (pos > 0)
		xmlFile = document.URL.substring(++pos, document.URL.length);
	if (GBrowserIsCompatible()) {
		map = new GMap2(document.getElementById("map"));
		map.enableDoubleClickZoom();
		map.enableContinuousZoom();
		map.addControl(new GLargeMapControl());
		map.addControl(new GMapTypeControl());
		map.addControl(new GOverviewMapControl());
		loadXml(xmlFile);	
	
		GEvent.addListener(map, "click", function(overlay, point){
			if (point) {
				msg = "" + (Math.round(point.x * 10000) / 10000) + "," + (Math.round(point.y * 10000) / 10000);
				document.getElementById("mypoint").innerHTML = msg;
			}
		});
	} else {
		document.getElementById("map").innerHTML = "<p>Leider ist Google Maps nicht kompatibel mit Ihrem Browser</p>";
	}
}