//Werte setzen
var map;
var centerLatitude = 51.49506473014368;
var centerLongitude = 10.37109375;
var startZoom = 6;
var anbieterart = "Alle";
var wassertyp = "Alle";
var bundeswasser ="Alle";
var geoxml = null;
var gpsPos = null;
//var property_type = "";
//var zimmer = 1;
//Objekt erstellen mit prop_ef.id und properties2.value, in ein Array packen und dieses an server.php übergeben
//Create an icon for the clusters
var wahlicon = "";
var iconCluster = new GIcon();
iconCluster.image = "images/cluster.png";
iconCluster.shadow = "images/house_trans.png";
iconCluster.iconSize = new GSize(48, 38);
iconCluster.shadowSize = new GSize(47, 37);
iconCluster.iconAnchor = new GPoint(23, 35);
iconCluster.infoWindowAnchor = new GPoint(23, 1);
iconCluster.infoShadowAnchor = new GPoint(26, 13);

//create an icon for the pins
var Anleger = new GIcon();
Anleger.image = "images/Anleger.png";
Anleger.shadow = "images/shadow-boating.png";
Anleger.iconSize = new GSize(33, 38);
Anleger.shadowSize = new GSize(53, 38);
Anleger.iconAnchor = new GPoint(16, 19);
Anleger.infoWindowAnchor = new GPoint(13, 1);
Anleger.infoShadowAnchor = new GPoint(26, 13);


//create an icon for the pins
var Bauwerk = new GIcon();
Bauwerk.image = "images/Bauwerk.png";
Bauwerk.shadow = "images/shadow-boating.png";
Bauwerk.iconSize = new GSize(33, 38);
Bauwerk.shadowSize = new GSize(53, 38);
Bauwerk.iconAnchor = new GPoint(16, 19);
Bauwerk.infoWindowAnchor = new GPoint(13, 1);
Bauwerk.infoShadowAnchor = new GPoint(26, 13);

//create an icon for the pins
var Cafe = new GIcon();
Cafe.image = "images/Cafe.png";
Cafe.shadow = "images/shadow-boating.png";
Cafe.iconSize = new GSize(33, 38);
Cafe.shadowSize = new GSize(53, 38);
Cafe.iconAnchor = new GPoint(16, 19);
Cafe.infoWindowAnchor = new GPoint(13, 1);
Cafe.infoShadowAnchor = new GPoint(26, 13);

//create an icon for the pins
var Gasthof = new GIcon();
Gasthof.image = "images/Gasthof.png";
Gasthof.shadow = "images/shadow-boating.png";
Gasthof.iconSize = new GSize(33, 38);
Gasthof.shadowSize = new GSize(53, 38);
Gasthof.iconAnchor = new GPoint(16, 19);
Gasthof.infoWindowAnchor = new GPoint(13, 1);
Gasthof.infoShadowAnchor = new GPoint(26, 13);

//create an icon for the pins
var Hotel = new GIcon();
Hotel.image = "images/Hotel.png";
Hotel.shadow = "images/shadow-boating.png";
Hotel.iconSize = new GSize(33, 38);
Hotel.shadowSize = new GSize(53, 38);
Hotel.iconAnchor = new GPoint(16, 19);
Hotel.infoWindowAnchor = new GPoint(13, 1);
Hotel.infoShadowAnchor = new GPoint(26, 13);

//create an icon for the pins
var Pension = new GIcon();
Pension.image = "images/Pension.png";
Pension.shadow = "images/shadow-boating.png";
Pension.iconSize = new GSize(33, 38);
Pension.shadowSize = new GSize(53, 38);
Pension.iconAnchor = new GPoint(16, 19);
Pension.infoWindowAnchor = new GPoint(13, 1);
Pension.infoShadowAnchor = new GPoint(26, 13);



//create an icon for the pins
var Schleuse = new GIcon();
Schleuse.image = "images/schleuse.png";
Schleuse.shadow = "images/shadow-boating.png";
Schleuse.iconSize = new GSize(33, 38);
Schleuse.shadowSize = new GSize(53, 38);
Schleuse.iconAnchor = new GPoint(16, 19);
Schleuse.infoWindowAnchor = new GPoint(13, 1);
Schleuse.infoShadowAnchor = new GPoint(26, 13);

//create an icon for the pins
var Yachthafen = new GIcon();
Yachthafen.image = "images/yachthafen.png";
Yachthafen.shadow = "images/shadow-boating.png";
Yachthafen.iconSize = new GSize(33, 38);
Yachthafen.shadowSize = new GSize(53, 38);
Yachthafen.iconAnchor = new GPoint(16, 19);
Yachthafen.infoWindowAnchor = new GPoint(13, 1);
Yachthafen.infoShadowAnchor = new GPoint(26, 13);

//create an icon for the pins
var Marina = new GIcon();
Marina.image = "images/yachthafen.png";
Marina.shadow = "images/shadow-boating.png";
Marina.iconSize = new GSize(33, 38);
Marina.shadowSize = new GSize(53, 38);
Marina.iconAnchor = new GPoint(16, 19);
Marina.infoWindowAnchor = new GPoint(13, 1);
Marina.infoShadowAnchor = new GPoint(26, 13);

//create an icon for the pins
var Yachtcharter = new GIcon();
Yachtcharter.image = "images/charter.png";
Yachtcharter.shadow = "images/shadow-boating.png";
Yachtcharter.iconSize = new GSize(33, 38);
Yachtcharter.shadowSize = new GSize(53, 38);
Yachtcharter.iconAnchor = new GPoint(16, 19);
Yachtcharter.infoWindowAnchor = new GPoint(13, 1);
Yachtcharter.infoShadowAnchor = new GPoint(26, 13);

//create an icon for the pins
var Bootsverleih = new GIcon();
Bootsverleih.image = "images/charter.png";
Bootsverleih.shadow = "images/shadow-boating.png";
Bootsverleih.iconSize = new GSize(33, 38);
Bootsverleih.shadowSize = new GSize(53, 38);
Bootsverleih.iconAnchor = new GPoint(16, 19);
Bootsverleih.infoWindowAnchor = new GPoint(13, 1);
Bootsverleih.infoShadowAnchor = new GPoint(26, 13);

//create an icon for the pins
var Sightseeing = new GIcon();
Sightseeing.image = "images/Sightseeing.png";
Sightseeing.shadow = "images/shadow-boating.png";
Sightseeing.iconSize = new GSize(33, 38);
Sightseeing.shadowSize = new GSize(53, 38);
Sightseeing.iconAnchor = new GPoint(16, 19);
Sightseeing.infoWindowAnchor = new GPoint(13, 1);
Sightseeing.infoShadowAnchor = new GPoint(26, 13);

//create an icon for the pins
var Bootsausstattung = new GIcon();
Bootsausstattung.image = "images/ausstatter.png";
Bootsausstattung.shadow = "images/shadow-boating.png";
Bootsausstattung.iconSize = new GSize(33, 38);
Bootsausstattung.shadowSize = new GSize(53, 38);
Bootsausstattung.iconAnchor = new GPoint(16, 19);
Bootsausstattung.infoWindowAnchor = new GPoint(13, 1);
Bootsausstattung.infoShadowAnchor = new GPoint(26, 13);

//create an icon for the pins
var Werkstatt = new GIcon();
Werkstatt.image = "images/werkstatt.png";
Werkstatt.shadow = "images/shadow-boating.png";
Werkstatt.iconSize = new GSize(33, 38);
Werkstatt.shadowSize = new GSize(53, 38);
Werkstatt.iconAnchor = new GPoint(16, 19);
Werkstatt.infoWindowAnchor = new GPoint(13, 1);
Werkstatt.infoShadowAnchor = new GPoint(26, 13);

//create an icon for the pins
var Bootshandel = new GIcon();
Bootshandel.image = "images/bootshandel.png";
Bootshandel.shadow = "images/shadow-boating.png";
Bootshandel.iconSize = new GSize(33, 38);
Bootshandel.shadowSize = new GSize(53, 38);
Bootshandel.iconAnchor = new GPoint(16, 19);
Bootshandel.infoWindowAnchor = new GPoint(13, 1);
Bootshandel.infoShadowAnchor = new GPoint(26, 13);

//create an icon for the pins
var Segelmacher = new GIcon();
Segelmacher.image = "images/segelmacher.png";
Segelmacher.shadow = "images/shadow-boating.png";
Segelmacher.iconSize = new GSize(33, 38);
Segelmacher.shadowSize = new GSize(53, 38);
Segelmacher.iconAnchor = new GPoint(16, 19);
Segelmacher.infoWindowAnchor = new GPoint(13, 1);
Segelmacher.infoShadowAnchor = new GPoint(26, 13);

//create an icon for the pins
var Takelei = new GIcon();
Takelei.image = "images/segelmacher.png";
Takelei.shadow = "images/shadow-boating.png";
Takelei.iconSize = new GSize(33, 38);
Takelei.shadowSize = new GSize(53, 38);
Takelei.iconAnchor = new GPoint(16, 19);
Takelei.infoWindowAnchor = new GPoint(13, 1);
Takelei.infoShadowAnchor = new GPoint(26, 13);

//create an icon for the pins
var Segelschule = new GIcon();
Segelschule.image = "images/segelschule.png";
Segelschule.shadow = "images/shadow-boating.png";
Segelschule.iconSize = new GSize(33, 38);
Segelschule.shadowSize = new GSize(53, 38);
Segelschule.iconAnchor = new GPoint(16, 19);
Segelschule.infoWindowAnchor = new GPoint(13, 1);
Segelschule.infoShadowAnchor = new GPoint(26, 13);

//create an icon for the pins
var Sportbootschule = new GIcon();
Sportbootschule.image = "images/motorschule.png";
Sportbootschule.shadow = "images/shadow-boating.png";
Sportbootschule.iconSize = new GSize(33, 38);
Sportbootschule.shadowSize = new GSize(53, 38);
Sportbootschule.iconAnchor = new GPoint(16, 19);
Sportbootschule.infoWindowAnchor = new GPoint(13, 1);
Sportbootschule.infoShadowAnchor = new GPoint(26, 13);

//create an icon for the pins
var Segelclubs = new GIcon();
Segelclubs.image = "images/club.png";
Segelclubs.shadow = "images/shadow-boating.png";
Segelclubs.iconSize = new GSize(33, 38);
Segelclubs.shadowSize = new GSize(53, 38);
Segelclubs.iconAnchor = new GPoint(16, 19);
Segelclubs.infoWindowAnchor = new GPoint(13, 1);
Segelclubs.infoShadowAnchor = new GPoint(26, 13);

//create an icon for the pins
var Motorbootclubs = new GIcon();
Motorbootclubs.image = "images/club.png";
Motorbootclubs.shadow = "images/shadow-boating.png";
Motorbootclubs.iconSize = new GSize(33, 38);
Motorbootclubs.shadowSize = new GSize(53, 38);
Motorbootclubs.iconAnchor = new GPoint(16, 19);
Motorbootclubs.infoWindowAnchor = new GPoint(13, 1);
Motorbootclubs.infoShadowAnchor = new GPoint(26, 13);

//create an icon for the pins
var Bootstankstelle = new GIcon();
Bootstankstelle.image = "images/tankstelle.png";
Bootstankstelle.shadow = "images/shadow-boating.png";
Bootstankstelle.iconSize = new GSize(33, 38);
Bootstankstelle.shadowSize = new GSize(53, 38);
Bootstankstelle.iconAnchor = new GPoint(16, 19);
Bootstankstelle.infoWindowAnchor = new GPoint(13, 1);
Bootstankstelle.infoShadowAnchor = new GPoint(26, 13);

//create an icon for the pins
var Wasserschutzpolizei = new GIcon();
Wasserschutzpolizei.image = "images/polizei.png";
Wasserschutzpolizei.shadow = "images/shadow-boating.png";
Wasserschutzpolizei.iconSize = new GSize(33, 38);
Wasserschutzpolizei.shadowSize = new GSize(53, 38);
Wasserschutzpolizei.iconAnchor = new GPoint(16, 19);
Wasserschutzpolizei.infoWindowAnchor = new GPoint(13, 1);
Wasserschutzpolizei.infoShadowAnchor = new GPoint(26, 13);



function windowHeight() {
	// Standard browsers (Mozilla, Safari, etc.)
	if (self.innerHeight) return self.innerHeight;
	// IE 6
	if (document.documentElement && document.documentElement.clientHeight) return document.documentElement.clientHeight;
	// IE 5
	if (document.body) return document.body.clientHeight;
	// Just in case.
	return 0;
}

function handleResize() {
	var height = windowHeight() - document.getElementById('toolbar').offsetHeight - 30;
	document.getElementById('map').style.height = height + 'px';
	document.getElementById('sidebar').style.height = height + 'px';
}

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

//Initialisieren
function init() {
	document.getElementById('button-sidebar-show').onclick = function() {
		return changeBodyClass('nosidebar', 'sidebar-right');
	};
	document.getElementById('button-sidebar-hide').onclick = function() {
		return changeBodyClass('sidebar-right', 'nosidebar');
	};

	handleResize();
	map = new GMap2(document.getElementById("map"));

	// Zoomt GPSIES
	showTrackOnMap(route, true);
	// Zoomt GPSIES
	// Add Zoom Control
	var boxStyleOpts = {
		opacity: .2,
		border: "3px solid yellow"
	};
	var otherOpts = {
		buttonHTML: "<img src='images/zoom-control-inactive.png' alt='Zoom'/>",
		buttonZoomingHTML: "<img src='images/zoom-control-active.png' alt='Zoom'/>",
		buttonStartingStyle: {
			width: '17px',
			height: '17px'
		},
		overlayRemoveTime: 0
	};
	map.addControl(new DragZoomControl(boxStyleOpts, otherOpts, {}), new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(68, 27)));
	// End Zoom
       map.addMapType(G_PHYSICAL_MAP);
       map.addMapType(G_SATELLITE_3D_MAP);
	// MORE OPTION
	function LayerControl(opts) {
		this.opts = opts;
	}
	
	// Ende Optionsbutton
	map.addControl(new GMapTypeControl());
	map.addControl(new GLargeMapControl());

	map.setCenter(new GLatLng(centerLatitude, centerLongitude), startZoom);
	bubble = new EBubble(map, "images/bubble.png", new GSize(380, 210), new GSize(340, 270), new GPoint(30, 30), new GPoint(95, 105), true);

	//updateMarkers();
      
	// Event setzen
	GEvent.addListener(map, 'moveend',
	function() {
		updateMarkers();
              
             
	});

	// Lade Hintergrund Bild
	document.getElementById("map").style.backgroundImage = "url(images/loading.jpg)";

}

function myclick(i) {
	GEvent.trigger(gmarkers[i], "click");
}

function updateMarkers() {
	
      //Reset Sidebar für neue Einträge
	sidebar_html = "";
	document.getElementById("sidebar").innerHTML = sidebar_html;

       //existierende Punkte löschen
        map.clearOverlays();
       //showTrackOnMap(route, true);
	//Filter für Coords setzen
	var bounds = map.getBounds();
	var southWest = bounds.getSouthWest();
	var northEast = bounds.getNorthEast();
	var getVars = 'ne=' + northEast.toUrlValue() + '&sw=' + southWest.toUrlValue()+ '&wtyp=' + wassertyp + '&bws=' + bundeswasser;

	//Url loggen für Datentest
	//GLog.writeUrl('server.php?'+getVars);
	//Geografische Punkte auslesen
	var request = GXmlHttp.create();
	request.open('GET', 'server.php?' + getVars, true);
	request.onreadystatechange = function() {
		if (request.readyState == 4) {
			var jscript = request.responseText;
			var points;
			eval(jscript);

			//Jetzt die Werte in geordnete Liste eintragen
			for (i in points) {

				// Längen und Breitengrad zusammenfassen
				var point = new GLatLng(points[i].lat, points[i].lng);

				// Variable html Infofenster vorbereiten
				var markerHTML;
                           
				var markers;

				// variable marker mit Dateninhalt vorbereiten
				var marker = createMarker(point, markerHTML, markers, points[i].lat, points[i].lng, points[i].type, points[i].id, points[i].address, points[i].state, points[i].postcode, points[i].mobilfunk, points[i].name, points[i].revier, points[i].wasser, points[i].agent, points[i].agentphone, points[i].thumb, points[i].usernum, points[i].objektart);
                           
				map.addOverlay(marker);
                            
                           

                            
                            
			}
		}
	}
	request.send(null);
       //
       
       //var geoXml = new GGeoXml("http://www.gpsies.com/files/kmz/' + route,true + '/' + route + '.kmz");
       var geoXml = new GGeoXml("http://www.airmap.de/2.kmz");
       map.addOverlay(geoXml);
       
}




// Variable für Sitebar vorbereiten, die später die Daten der Marker spiegelt.
var sidebar_html = "";

// Array für Kopien der Markerinhalte setzen
var gmarkers = [];

var i = 0;
var lastlinkid;

function createMarker(point, markerHTML, markers, lat, lng, type, id, address, state, postcode, mobilfunk, name, revier, wasser, agent, agentphone, thumb, usernum, objektart) {
	//Erstelle verschiedene Marker, je nachdem, ob es ein Cluster ist oder nicht.
       if (type == 'c') {

		// Marker ist ein Cluster, setze Info Fenster Parameter
		var html = "<div style='height: 110px; width: 305px; line-height:120%; font-family: verdana; font-size: 10px'>";
		html += "<img style='float: left; margin-right: 3px' src='/images/find.png' alt='Cluster Marker' />";
		html += "<div style='float: left;'>";

		// O.K. - Jetzt übergeben wir Daten an die Infofelder und organisieren die Ausgabe.
		html += "<strong><h1>Cluster Icon</strong></h1>";
		html += "<strong>Hier gibt es " + name + " Dienstleister</strong><br />";

		// Hier geben wir einen Link vor, der den Cluster soweit zoomt, das die normalen Marker erkennbar sind..
		html += "<a href=\"javascript:void(0)\" onclick=\"map.setCenter(new GLatLng(" + lat + "," + lng + "), 11);\"><strong>Diese Anbieter zeigen</strong></a></div><div style=\"float:right;\"><a href=\"#\" onclick=\"hideBubble();\">schliessen</a></div>";

		// html nun komplett nach markerHTML übergeben
		var markerHTML = html;

		// jetzt bekommt der Marker sein Icon und einen Titel
		var marker = new GMarker(point, {
			icon: iconCluster,
			title: "Cluster"
		});

		// Hier wird für jedes Icon eine Link ID gesetzt, um es in der Sidebar richtig abzulegen
		var linkid = "link" + i;

		// Ereignisüberwachung - zeige mir das Infofenster auf Klick
		GEvent.addListener(marker, 'click',
		function() {

			// Nun Infofenster für Marker öffnen und definiertes markerHTML anzeigen.
			bubble.openOnMarker(marker, markerHTML);
			if (document.getElementById(lastlinkid)) {
				document.getElementById(lastlinkid).style.background = "#EFEFEF";
			}
			document.getElementById(linkid).style.background = "#ff9933";
			lastlinkid = linkid;
		});
		// Oder es ist ein normales Icon und kein Clustericon
              
              

	} else {
           
            

             	// Marker ist kein Cluster, setze Info Fenster Parameter
		var html = "<div style='height: 110px; width: 400px; line-height:120%; font-family: verdana; font-size: 10px'>";
		html += "<img style='float: left; margin-right: 3px' src='http://www.binnenschiffer.eu/uploads/picture/" + usernum + "/thumbnail_article/" + thumb + "' height='80' width='106' alt='Ansicht Foto' /><div style='float: left'>";

		// O.K. - Jetzt übergeben wir Daten an die Infofelder und organisieren die Ausgabe.
		html += "<strong>" + name + "</strong><br />";
		html += "<br>";
		html += "<strong>" + wasser + "<br /></strong>";
		html += "<strong>" + revier + "<br /></strong>";
	       html += "<br>";
		html += address + '<br />';
		html += postcode + '&nbsp;' + state + '<br />';
		html += "<strong>Telefon: " + agentphone + " </strong><br /><br />";
		html += "<a style='color: #FF9900' target=\"_blank\" href=\"http://www.binnenschiffer.eu/component/resource/article/2-Dienstleister/" + id + "\">[Detail Ansicht]</a>&nbsp;&nbsp;<a href=\"#\" onclick=\"hideBubble();\">[Marker schliessen]</a></div>";

// Zuweisung - welches Icon wird verwendet
           wahlicon=objektart;
           //GLog.write(wahlicon); 
// Ende der Zuweisung
		// jetzt bekommt der Marker sein Icon und einen Titel
		var marker = new GMarker(point, {
			icon: eval(wahlicon),
			title: name
		});
             

		// Hier wird für jedes Icon eine Link ID gesetzt, um es in der Sidebar richtig abzulegen
		var linkid = "link" + i;

		// Ereignisüberwachung - zeige mir das Infofenster auf Klick
		GEvent.addListener(marker, 'click',
		function() {

			// html nun komplett nach markerHTML übergeben
			var markerHTML = html;

			// Nun Infofenster für Marker öffnen und definiertes markerHTML anzeigen.
			//marker.openInfoWindowHtml(markerHTML);
			bubble.openOnMarker(marker, markerHTML);
			if (document.getElementById(lastlinkid)) {
				document.getElementById(lastlinkid).style.background = "#EFEFEF";
			}
			document.getElementById(linkid).style.background = "#ff9933";
			lastlinkid = linkid;

			// die linkid in Sidebar markieren
		});
	}
	gmarkers[i] = marker;

	//GLog.write(point);
	//Wenn Marker ein Cluster ist, dann...
	if (type == 'c') {

		// Jetzt die Daten zufügen, die in der Sidebar angezeigt werden sollen
		sidebar_html += '<div id="' + linkid + '" style="margin-left: 4px"><a href="javascript:myclick(\'' + i + '\')">Cluster ' + i + ' enth&auml;lt ' + name + ' weitere Angebote</a><br></div></div>';

		//Wenn Marker ein normaler MArker ist (kein Cluster), dann..
	} else {

		// Jetzt die Daten zufügen, die in der Sidebar angezeigt werden sollen
		//sidebar_html += '<div id="' + linkid + '" style="margin-left: 4px; margin-top: 4px;"><a href="javascript:myclick(\'' + i + '\')"><img src="http://www.binnenschiffer.eu/uploads/picture/' + usernum + '/thumbnail_article/' + thumb + '"  height="40" width="53" alt="Ansicht Foto" border="0"/><br><h2>' + name + '</h2></a><ul><li>' + objektart + '</li><li>L&auml;ngengrad: ' + lat + '</li><li>Breitengrad: ' + lng + '</li></ul><br></div>';


// Jetzt die Daten zufügen, die in der Sidebar angezeigt werden sollen
		sidebar_html += '<div id="' + linkid + '"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td align="left" valign="middle" rowspan="4"><a href="javascript:myclick(\'' + i + '\')"><img src="images/' + wahlicon + '.png"  height="38" width="33" border="0" title=" ' + name + '"</a><td align="left" valign="top"><strong><font size="2">&nbsp;<a href="javascript:myclick(\'' + i + '\')">' + name + '</a></font></strong></td></tr><tr></tr><tr><td align="left" valign="top"><font size="1">&nbsp;<strong>' + wasser + '</strong></font></td></tr><tr><td align="left"  valign="top"><li><font size="1">Art: ' + objektart + '</font></li></td></tr><tr><td>&nbsp;</td><td align="left" valign="top"><li><font size="1">Telefon: ' + agentphone + '</font></li></ul></td></tr></table></div><hr>';



		//Alles fertig, dann raus aus der Schleife
	}

	// Eintragswert i erhöhen
	i++;

	//Jetzt wird der erzeugte Eintrag in die Sidebar transportiert
	document.getElementById("sidebar").innerHTML = sidebar_html;

	// alles klar, dann zurück zum nächsten Marker und alles von vorne..
	return marker;

	// Alle Marker abgefertigt - Dann raus aus der Schleife
}

function hideBubble() {
	bubble.hide();
	document.getElementById(lastlinkid).style.background = "#EFEFEF";
}

function showTrackOnMap(fid, isGotoDefaultViewport) {
	if (map) {
		var gGeoXmlUrl = 'http://www.gpsies.com/files/kmz/' + fid.substr(0, 1) + '/' + fid + '.kmz';
              //var gGeoXmlUrl = 'http://touren.binnenschiffer.eu/files/kmz/' + fid.substr(0, 1) + '/' + fid + '.kmz';

		geoXml = new GGeoXml(gGeoXmlUrl,
		function() {
			if (geoXml.loadedCorrectly()) {
				if (isGotoDefaultViewport) {
					geoXml.gotoDefaultViewport(map);
				}
			}
		});
		map.addOverlay(geoXml);
	}
}



window.onresize = handleResize;
window.onload = init;
var layers = [];