var map;
var baseIcon;
var polygon;
var marker_airport;
var marker_trainstation;
var marker_wmf;
var marker_highway;
var markers = new Array();


function createMarker ( xmlvalue ) {

	var marker;

	var lat = xmlvalue.getAttribute("lat");
	var lng = xmlvalue.getAttribute("lng");
	var point = new GLatLng ( parseFloat(lat),	parseFloat(lng) );
	var category = xmlvalue.getAttribute("cat");
	var iconname = xmlvalue.getAttribute("icon");

	if ( iconname ) {
	  var icon = new GIcon ( baseIcon );
		icon.image = "fileadmin/images/googlemaps/" + iconname;
		marker = new GMarker ( point, icon );
	} else {
		marker = new GMarker ( point, {draggable: true} );
	}
	markers.push ( new Array ( category, marker ) );

	var htmlcode = "";
	if ( category == 0 || category == 2 || category == 4 ) {
		htmlcode = infoMenuHotel ( point, xmlvalue );
	} else if ( category == 1 ) {
		htmlcode = infoMenuRestaurant ( point, xmlvalue );	
	}

	GEvent.addListener ( marker, "click", function() {
		map.openInfoWindow(point, infoClickMenu(xmlvalue) );
	});

	GEvent.addListener ( marker, "mouseover", function() {
		document.getElementById("locations").innerHTML = htmlcode;
	});

}




function load() {

	if ( GBrowserIsCompatible() ) {

		map = new GMap2(document.getElementById("map"));
		map.addControl ( new GLargeMapControl() );
		map.addControl ( new GMapTypeControl() );
		map.addControl ( new GScaleControl() );
		map.setCenter  ( new GLatLng(47.56837, 7.59796), 15 );

		// Fix Icon fuer WMF Standort
		baseIcon = new GIcon();
		baseIcon.iconSize = new GSize(32, 32);
		baseIcon.iconAnchor = new GPoint(16, 16);
		baseIcon.infoWindowAnchor = new GPoint(20, 12);
		baseIcon.infoShadowAnchor = new GPoint(5, 25);

		// Set WMF Icon
	  var icon = new GIcon ( baseIcon );
		icon.image = "fileadmin/images/googlemaps/wmf.png";
		marker_wmf = new GMarker ( new GLatLng(47.56837, 7.59796), icon );
		map.addOverlay ( marker_wmf );


		// Fix Icon fuer Öffentliche Verkehrsmittel
		baseIcon = new GIcon();
		baseIcon.iconSize = new GSize(20, 20);
		baseIcon.iconAnchor = new GPoint(10, 10);
		baseIcon.infoWindowAnchor = new GPoint(10, 6);
		baseIcon.infoShadowAnchor = new GPoint(5, 12);

		// Set Airport Icon
	  var icon = new GIcon ( baseIcon );
		icon.image = "fileadmin/images/googlemaps/airport.png";
		marker_airport = new GMarker ( new GLatLng(47.59658, 7.53332), icon );
		map.addOverlay ( marker_airport );

		// Set Highway Icon
	  var icon = new GIcon ( baseIcon );
		icon.image = "fileadmin/images/googlemaps/highway.png";
		marker_highway = new GMarker ( new GLatLng(47.56396, 7.60926), icon );
		map.addOverlay ( marker_highway );

		// Set Railway Icon
	  var icon = new GIcon ( baseIcon );
		icon.image = "fileadmin/images/googlemaps/train.png";
		marker_trainstation = new GMarker ( new GLatLng(47.56709, 7.60747), icon );
		map.addOverlay ( marker_trainstation );


		// Create a base icon for all of our markers that specifies the
		// shadow, icon dimensions, etc.
		baseIcon = new GIcon();
		baseIcon.iconSize = new GSize(32, 32);
		baseIcon.iconAnchor = new GPoint(16, 16);
		baseIcon.infoWindowAnchor = new GPoint(20, 12);
		baseIcon.infoShadowAnchor = new GPoint(5, 25);

		/*** Load Data ***/
		var randomval = Math.round(Math.random()*100000000);

		GDownloadUrl("fileadmin/files/googlemapdata.xml?rp="+randomval, function(data) {
			var xml = GXml.parse(data);
			var xmlmarkers = xml.documentElement.getElementsByTagName("marker");
			for (var i = 0; i < xmlmarkers.length; i++) {
				createMarker(xmlmarkers[i]);
			}
		});

		showFormControls ( );


		/*** Zum Manuelle Punkte Setzen ***/
//		GEvent.addListener(map, "click", function(marker, point) {
//			baseIcon.iconSize = new GSize(20, 34);
//			var marker = new  GMarker ( point );
//			map.addOverlay ( marker );
//			var lat = Math.round ( point.lat()*100000 )/100000;
//			var lng = Math.round ( point.lng()*100000 )/100000;
//   		var content = document.getElementById("locations").innerHTML;
//			document.getElementById("locations").innerHTML = content + 'Pos: lat="' + lat + '" lng="' + lng + '"<br>';
//		});


	} // end if is compatible



}  // end load




/*** Nur Daten einer Bestimmten Selektierten Kategorie anzeigen ***/
function selectData ( ) {

	var restaurant = document.getElementById("control").getElementsByTagName("input").namedItem("restaurant").checked;
	var hotel      = document.getElementById("control").getElementsByTagName("input").namedItem("hotel").checked;
	var bb         = document.getElementById("control").getElementsByTagName("input").namedItem("bb").checked;
	var jh         = document.getElementById("control").getElementsByTagName("input").namedItem("jh").checked;

	var range = 0;
	if ( document.getElementById("control").getElementsByTagName("input")[5].checked ) {
		range = 0.5;
	} else if ( document.getElementById("control").getElementsByTagName("input")[6].checked ) {
		range = 1;
	} else if ( document.getElementById("control").getElementsByTagName("input")[7].checked ) {
		range = 2;
	} else if ( document.getElementById("control").getElementsByTagName("input")[8].checked ) {
		range = 5;
	}

	if ( range > 0 ) {
		drawCircle ( marker_wmf.getPoint(), range );
	} else {
		if ( polygon ) {
			map.removeOverlay ( polygon );
		}
	}

	if ( hotel ) {
		showCategory ( 0, range );
	} else {
		hideCategory ( 0, range );
	}

	if ( bb ) {
		showCategory ( 2, range );
	} else {
		hideCategory ( 2, range );
	}
	
	if ( jh ) {
		showCategory ( 4, range );
	} else {
		hideCategory ( 4, range );
	}

	if ( restaurant ) {
		showCategory ( 1, range );
	} else {
		hideCategory ( 1, range );
	}

}


/*** Alle Marker verstecken ***/
function hideCategory ( cat ) {

	for ( var i=0; i < markers.length; i++ ) {
		if ( markers[i][0] == cat ) {
			map.removeOverlay ( markers[i][1] );
		}
	}

}



/*** Alle Marker einer bestimmten Kategorie anzeigen innerhalb eines bestimmten radius ***/
function showCategory ( cat, range ) {

	if ( range > 0 ) {

		hideCategory ( cat );
		// Mit Radius filter
		range = range*1000;
		var dist = 0;
		for ( var i=0; i < markers.length; i++ ) {
			if ( markers[i][0] == cat ) {
				if ( marker_wmf.getPoint().distanceFrom ( markers[i][1].getPoint() ) < range ) {
					map.addOverlay ( markers[i][1] );
				}
			}
		} // end for

	} else {

		// Ohne Radius filter
		for ( var i=0; i < markers.length; i++ ) {
			if ( markers[i][0] == cat ) {
				map.addOverlay ( markers[i][1] );
			}
		} // end for

	}

}


/*** Control Board Anzeigen ***/
function showFormControls ( ) {
	var myform = '<form name="controlboard" action="#"><b>Anzeigen:</b> &nbsp;<input type="checkbox" name="restaurant" onclick="selectData();" />Restaurants &nbsp;<input type="checkbox" name="hotel" onclick="selectData();" />Hotels &nbsp;<input type="checkbox" name="bb" onclick="selectData();" />B & B  &nbsp;<input type="checkbox" name="jh" onclick="selectData();" />Jugendherbergen <br/><b>Radius:</b> &nbsp;<input type="radio" name="range" value="0" onclick="selectData();" />Alles &nbsp;<input type="radio" name="range" value="0.5" onclick="selectData();" />500m &nbsp;<input type="radio" name="range" value="1" onclick="selectData();" />1km &nbsp;<input type="radio" name="range" value="2" onclick="selectData();" />2km &nbsp;<input type="radio" name="range" value="5" onclick="selectData();" />5km (Luftlinie)</form>';
	document.getElementById("control").innerHTML = myform;
}





/*** Zeichnet einen Kreis um einen Punkt mit einem definierten Radius (kilometer) ***/
function drawCircle ( center, radius ) {

	if ( polygon ) {
		map.removeOverlay ( polygon );
	}

	var points = new Array();
	var x, y, alpha;
	var cy = center.lat();
	var cx = center.lng();

	for ( var i=0; i <= 360; i+=10 ) {
	  alpha = Math.PI / 180 * i;
		x = cx + 360/40075*radius*Math.cos(alpha)*1.4819658;
		y = cy + 360/40075*radius*Math.sin(alpha);
		points[(points.length)] = new GLatLng (y, x);
	}

	polygon = new GPolygon(points, "#000000", 1, 1, "#0000FF", 0.15);
	map.addOverlay ( polygon );


}




/*** Informationen zum Hotel Anzeigen ***/
function infoMenuHotel ( point, xmlvalue ) {

	var titel = xmlvalue.getAttribute("titel");
	var strasse = xmlvalue.getAttribute("strasse");
	var ort = xmlvalue.getAttribute("ort");
	var land = xmlvalue.getAttribute("land");
	var tel = xmlvalue.getAttribute("tel");
	var fax = xmlvalue.getAttribute("fax");
	var www = xmlvalue.getAttribute("www");
	var email = xmlvalue.getAttribute("email");
	var sterne = xmlvalue.getAttribute("sterne");
	var bild = xmlvalue.getAttribute("bild");
	var beschreibung = xmlvalue.getAttribute("beschreibung");

	var hoteltext = titel + '<br/>' + strasse + '<br/>' + ort + '<br/>' + land + '<br/><br/>';
	if ( tel )   hoteltext = hoteltext + '<img src="fileadmin/images/icon_tel.gif" width="18" height="13" alt="Telefon"/> ' + tel + '<br/>';
	if ( fax )   hoteltext = hoteltext + '<img src="fileadmin/images/icon_fax.gif" width="18" height="13" alt="Fax"/> ' + fax + '<br/>';
	if ( www )   hoteltext = hoteltext + '<img src="fileadmin/images/icon_www.gif" width="18" height="13" alt="WWW"/>  <a href="' + www + '" target="_blank" class="blacktext">Homepage</a><br/>';
	if ( email ) hoteltext = hoteltext + '<img src="fileadmin/images/icon_email.gif" width="18" height="10" alt="Email"/> <a href="mailto:' + email + '" class="blacktext">Email</a><br/>';

	if ( !bild ) bild = "kein_bild.gif";

	var code = '<div style="height:300px;"><div id="hoteldetails">';
	code = code + '<div id="hotelname"><table border="0"><tr><td height="25">' + titel + '&nbsp;</td><td height="25">&nbsp;';

	for ( var i=0; i < sterne.length; i++ ) {
		code = code + '<img src="fileadmin/images/hotels/stern.gif" width="16" height="16" alt="Stern">';
	}
		
	code = code + '</td></tr></table>';
	code = code + '</div>';
	code = code + '<table border="0" width="450">';
	code = code + '<tr>';
	code = code + '  <td valign="top" width="150"><img src="fileadmin/images/hotels/' + bild + '" alt="' + titel + '" width="150" class="hotelbild" /></td>';
	code = code + '  <td valign="top" width="200" class="blacktext">' + hoteltext + '</td>';
	code = code + '  <td valign="top" width="100">';
	code = code + '    <table border="0" width="100">';

	var distance = (point.distanceFrom ( marker_wmf.getPoint() ) / 1000).toFixed(2);
	code = code + '      <tr><td><img src="fileadmin/images/googlemaps/wmf.gif" width="20" height="20" alt="Airport" /></td><td class="blacktext">' + distance + ' Km</td></tr>';
	var distance = (point.distanceFrom ( marker_airport.getPoint() ) / 1000).toFixed(2);
	code = code + '      <tr><td><img src="fileadmin/images/googlemaps/airport.png" width="20" height="20" alt="Airport" /></td><td class="blacktext">' + distance + ' Km</td></tr>';
	var distance = (point.distanceFrom ( marker_trainstation.getPoint() ) / 1000).toFixed(2);
	code = code + '      <tr><td><img src="fileadmin/images/googlemaps/train.png" width="20" height="20" alt="Trainstation" /></td><td class="blacktext">' + distance + ' Km</td></tr>';
	var distance = (point.distanceFrom ( marker_highway.getPoint() ) / 1000).toFixed(2);
	code = code + '      <tr><td><img src="fileadmin/images/googlemaps/highway.png" width="20" height="20" alt="Highway" /></td><td class="blacktext">' + distance + ' Km</td></tr>';
	code = code + '      <tr><td class="blacktext" colspan="2">(Luftlinie)</td></tr>';
	code = code + '    </table>';
	code = code + '    </td>';
	code = code + '  </tr>';
	if ( beschreibung ) {
		code = code + '  <tr>';
		code = code + '    <td colspan="3"><hr></td>';
		code = code + '  </tr>';
		code = code + '  <tr>';
		code = code + '    <td colspan="3" class="blacktext">' + beschreibung + '</td>';
		code = code + '  </tr>';
	}
	code = code + '</table>';
	code = code + '</div></div>';

	return code;

}




/*** Informationen zum Restaurant Anzeigen ***/
function infoMenuRestaurant ( point, xmlvalue ) {

	var titel = xmlvalue.getAttribute("titel");
	var strasse = xmlvalue.getAttribute("strasse");
	var ort = xmlvalue.getAttribute("ort");
	var land = xmlvalue.getAttribute("land");
	var tel = xmlvalue.getAttribute("tel");
	var fax = xmlvalue.getAttribute("fax");
	var www = xmlvalue.getAttribute("www");
	var email = xmlvalue.getAttribute("email");
	var beschreibung = xmlvalue.getAttribute("beschreibung");

	var hoteltext = titel + '<br/>' + strasse + '<br/>' + ort + '<br/>' + land + '<br/><br/>';
	if ( tel )   hoteltext = hoteltext + '<img src="fileadmin/images/icon_tel.gif" width="18" height="13" alt="Telefon"/> ' + tel + '<br/>';
	if ( fax )   hoteltext = hoteltext + '<img src="fileadmin/images/icon_fax.gif" width="18" height="13" alt="Fax"/> ' + fax + '<br/>';
	if ( www )   hoteltext = hoteltext + '<img src="fileadmin/images/icon_www.gif" width="18" height="13" alt="WWW"/>  <a href="' + www + '" target="_blank" class="blacktext">Homepage</a><br/>';
	if ( email ) hoteltext = hoteltext + '<img src="fileadmin/images/icon_email.gif" width="18" height="10" alt="Email"/> <a href="mailto:' + email + '" class="blacktext">Email</a><br/>';

	if ( !beschreibung ) beschreibung = "";

	var code = '<div style="height:300px;"><div id="hoteldetails">';
	code = code + '<div id="hotelname">' + titel + '</div>';
	code = code + '<table border="0" width="450">';
	code = code + '<tr>';
	code = code + '  <td valign="top" width="200" class="blacktext">' + hoteltext + '</td>';
	code = code + '  <td valign="top" width="150" class="blacktext">' + beschreibung + '</td>';
	code = code + '  <td valign="top" width="100">';
	code = code + '    <table border="0" width="100">';

	var distance = (point.distanceFrom ( marker_wmf.getPoint() ) / 1000).toFixed(2);
	code = code + '      <tr><td><img src="fileadmin/images/googlemaps/wmf.gif" width="20" height="20" alt="Airport" /></td><td class="blacktext">' + distance + ' Km</td></tr>';
	var distance = (point.distanceFrom ( marker_airport.getPoint() ) / 1000).toFixed(2);
	code = code + '      <tr><td><img src="fileadmin/images/googlemaps/airport.png" width="20" height="20" alt="Airport" /></td><td class="blacktext">' + distance + ' Km</td></tr>';
	var distance = (point.distanceFrom ( marker_trainstation.getPoint() ) / 1000).toFixed(2);
	code = code + '      <tr><td><img src="fileadmin/images/googlemaps/train.png" width="20" height="20" alt="Trainstation" /></td><td class="blacktext">' + distance + ' Km</td></tr>';
	var distance = (point.distanceFrom ( marker_highway.getPoint() ) / 1000).toFixed(2);
	code = code + '      <tr><td><img src="fileadmin/images/googlemaps/highway.png" width="20" height="20" alt="Highway" /></td><td class="blacktext">' + distance + ' Km</td></tr>';
	code = code + '      <tr><td class="blacktext" colspan="2">(Luftlinie)</td></tr>';
	code = code + '    </table>';
	code = code + '    </td>';
	code = code + '  </tr>';
	code = code + '</table>';
	code = code + '</div></div>';

	return code;

}



/*** Info Fenster Anzeigen wenn Punkt angeklickt wurde ***/
function infoClickMenu ( xmlvalue ) {

	var titel = xmlvalue.getAttribute("titel");
	var strasse = xmlvalue.getAttribute("strasse");
	var ort = xmlvalue.getAttribute("ort");
	var land = xmlvalue.getAttribute("land");
	var tel = xmlvalue.getAttribute("tel");
	var fax = xmlvalue.getAttribute("fax");
	var www = xmlvalue.getAttribute("www");
	var email = xmlvalue.getAttribute("email");
	var sterne = xmlvalue.getAttribute("sterne");
	var bild = xmlvalue.getAttribute("bild");
	var beschreibung = xmlvalue.getAttribute("beschreibung");

	var markertext = '<div>';
  markertext = titel + '<br />' + strasse + '<br />' + ort + '<br />' + land + '<br /><br />';

	if ( tel )   markertext = markertext + '<img src="fileadmin/images/icon_tel.gif" width="18" height="13" alt="Telefon"/> ' + tel + '<br />';
	if ( fax )   markertext = markertext + '<img src="fileadmin/images/icon_fax.gif" width="18" height="13" alt="Fax"/> ' + fax + '<br />';
	if ( www )   markertext = markertext + '<img src="fileadmin/images/icon_www.gif" width="18" height="13" alt="WWW"/>  <a href="' + www + '" target="_blank" class="blacktext">Homepage</a><br />';
	if ( email ) markertext = markertext + '<img src="fileadmin/images/icon_email.gif" width="18" height="10" alt="Email"/> <a href="mailto:' + email + '" class="blacktext">Email</a><br />';

	markertext = markertext + '</div>';

	return markertext;

}