var map;
var caveLayer;
var caveHybridLayer;
var caveSatMap;
var caveMap;

var address;
var geocoder;
var gmarkers = [];
var html;
var htmls =[];
var i = 0;
var icon;
var label;
var marker;
var markers;
var randomnumber;
var side_bar_html = "";
var xml;


function TileToQuadKey ( tx,  ty,  zl){
	var quad;
	quad = "";
	for (var i = zl; i > 0; i--){
		var mask = 1 << (i - 1);
		var cell = 0;
		if ((tx & mask) != 0)
			cell++;
		if ((ty & mask) != 0)
			cell += 2;
		quad += cell;
	}
	return quad;
}

function load(map_type){
	if (GBrowserIsCompatible()){
		map = new GMap2(document.getElementById("google_map"));
		var caveTiles = function (a,b) {
			var f = "http://www.traveldoctor.nl/map_images/" + TileToQuadKey(a.x,a.y,b) + ".png";
			return f;
		}

		//hybrid layer map
		caveHybridLayer = new Array();
		caveHybridLayer[0] = G_SATELLITE_MAP.getTileLayers()[0];
		caveHybridLayer[1] = new GTileLayer(new GCopyrightCollection('') , 12, 19);
		caveHybridLayer[1].getTileUrl = caveTiles;
		caveHybridLayer[1].getCopyright = function(a,b) { return "Traveldoctor Vestigingen"; };
		caveHybridLayer[1].getOpacity = function () { return 1; };

		caveSatMap = new GMapType(caveHybridLayer,G_SATELLITE_MAP.getProjection(),'',{errorMessage:"",alt:""});
		caveSatMap.getTextColor = function() {return "#000000";};
		caveSatMap.getMinimumResolution = function(){return 7};
		caveSatMap.getMaximumResolution = function(){return 8};
		map.addMapType(caveSatMap);

		map.addControl(new GSmallZoomControl());
		map.addControl(new GScaleControl());
		map.setCenter(new GLatLng(52.167194, 5.364575), 7);
		map.setMapType(caveSatMap);

		var geocoder = new GClientGeocoder();

		var randomnumber=Math.floor(Math.random()*11111)
		GDownloadUrl("http://www.traveldoctor.nl/include/vestiging_xml.php?random="+randomnumber, function(data, responseCode) {
			var xml = GXml.parse(data);
			var markers = xml.documentElement.getElementsByTagName("marker");
			var icon = new GIcon();
			icon.image = "/images/traveldoctor_maps.png";
			icon.iconSize = new GSize(17, 17);
			icon.iconAnchor = new GPoint(5, 20);
			icon.infoWindowAnchor = new GPoint(10, 1);

			for (var i = 0; i < markers.length; i++) {
				var lat = markers[i].getAttribute("lat");
				var lon = markers[i].getAttribute("lng");
				var point = new GLatLng(parseFloat(lat), parseFloat(lon));
				var html = GXml.value(markers[i].getElementsByTagName("infowindow")[0]);
				var htmladres = GXml.value(markers[i].getElementsByTagName("infowindow2")[0]);
				//alert(html);
				var label = markers[i].getAttribute("label");
				//var htmladres = markers[i].getAttribute("htmladdress");
				var adres = markers[i].getAttribute("address");
				var url_naam = markers[i].getAttribute("urlnaam");
				var marker = createMarker(point,html,label,icon,adres,htmladres,map_type,url_naam);
			}
		});
	}
}

function createMarker(point,html,label,icon,adres,htmladres,map_type,url_naam){
	var marker = new GMarker(point,icon);
	if(map_type == 2) {
		GEvent.addListener(marker, "click", function() {
        	marker.openInfoWindowHtml("<div style=\"width:300px\"><form name=\"stap_1\" method=\"post\" action=\"/Afspraak_Maken/Stap_2/\">Wilt u een afspraak maken met "+label+"?<br />"+htmladres+"<br /><br /><input type=\"hidden\" name=\"vestiging\" value=\""+url_naam+"\" /><input type=\"submit\" name=\"submit_stap1\" value=\"Ja, door naar stap 2!\" /></div>");
    	});
	} else {
		GEvent.addListener(marker, "click", function() {
			var infoTabs_1 = [ new GInfoWindowTab("Adres","<div class='markerName'>"+html+"</div>"),
								new GInfoWindowTab("Route","<div class='markerPlanuwroute'><form action='http://maps.google.nl/maps' method='get' target='_blank' class='markerPlanuwroute'><div class='markerPlanuwroute'>Plan uw route naar "+label+"</div><label for='saddr'>Vertrekadres:</label><br><input name='saddr' id='saddr' size='30' type='text'/><input value='Bereken' type='submit' /><input name='daddr' value='"+adres+"' type='hidden'/><address>Voorbeeld: Straat 1, Plaats</address></form></div>"),
								new GInfoWindowTab("Afspraak","<div style=\"width:300px\" class='markerAfsrpaak'><form name=\"stap_1\" method=\"post\" action=\"/Afspraak_Maken/Stap_2/\">Wilt u een afspraak maken met "+label+"?<br /><br /><input type=\"hidden\" name=\"vestiging\" value=\""+url_naam+"\" /><input type=\"submit\" name=\"submit_stap1\" value=\"Ja, door naar stap 2!\" /></div>")];
			marker.openInfoWindowTabsHtml(infoTabs_1);
			});
	}
	var tooltip = new Tooltip(marker,label,4);
	marker.tooltip = tooltip;

	map.addOverlay(marker);
	map.addOverlay(tooltip);

	GEvent.addListener(marker,'mouseover',function(){ this.tooltip.show(); });
	GEvent.addListener(marker,'mouseout',function(){ this.tooltip.hide(); });

	gmarkers[i] = marker;
	htmls[i] = html;

	side_bar_html += '<a href="javascript:myclick(' + i + ')">' + label + '</a><br />';
	document.getElementById("side_bar").innerHTML = side_bar_html;
	i++;
	return marker;
}

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