// The Google Map object
var map;
// The current (GMarker) location of the virtual "car"
var currentLocation;
// Array of GMarker objects to contain all of the locations/stores of interest
var markerArray;
// GPolygon object that represents the area of interest within a specific radius of the virtual car
var polygon;
// "Radius" (so to speak) around the virtual car.  The polygon is not an true circle, so the radius is an estimated distance around the car.
var radiusInMiles;
// An estimated number of miles per latitude segment (see the GPolygon.prototype.Contains method below)
var milesPerLat = 69.047;
// An estimated number of miles per longitude segment (see the GPolygon.prototype.Contains method below)
var milesPerLng = 43;
// Value that defines how quickly the car moves across the map, in seconds
var timeStepSecs = 1;
// Javascript timer object created by the setTimeout function
var motionTimer;
// Value that defines how far the virtual car travels in each time segment, in miles
var deltaDistance = 5; 
// Direction (compass) in which the virtual car will travel
var direction;
// Starting point of the map
var startPoint = new GLatLng(52.069377, 5.366821);



var gdir;

var geocoder = null;

var addressMarker;

var cm_mapHTMLS = [];

var nummerToUserid = [];


function loadJSON(json)
{
	
	//extra toegevoegd
	var sidebarTD = document.createElement("td");
	sidebarTD.setAttribute("width","100%");
	sidebarTD.setAttribute("valign","top");
	var sidebarDIV = document.createElement("div");
	sidebarDIV.id = "cm_sidebarDIV";
	sidebarDIV.style.overflow = "auto";
	sidebarDIV.style.height = "288px";
	sidebarDIV.style.width = "234px";
	sidebarDIV.style.fontSize = "11px";
	sidebarDIV.style.color = "#222222";
	sidebarDIV.className = "class1";
	sidebarTD.appendChild(sidebarDIV);
	document.getElementById("cm_mapTR").appendChild(sidebarTD);
	//einde extra toegevoegd
	
	
	// Create a new array of GMarkers to contain all of the locations of interest
	markerArray = new Array();
	// Iterate through the JSON feed, extracting data elements of interest.
	// Each row in the spreadsheet should at a minimum contain a "lat" and "lng" column.
	// Other interesting data could include a store manager, phone number, image (URL), and sales data if this is
	// an internal-facing application.
	for (var i = 0; i < json.feed.entry.length; i++)
	{
		var func_entry = json.feed.entry[i];
		
		//extra ingevoegd
		var label = func_entry["gsx$naamklein"].$t;
				 
		var markerDivA = document.createElement("div");
		markerDivA.id = "markerDivA_"+i;  
		
		var markerA = document.createElement("a");
		markerA.setAttribute("href","javascript:cm_markerClicked('" + i +"')");
		
		var sidebarText= "";
		sidebarText += label;
		
		markerA.appendChild(document.createTextNode(sidebarText));
		markerDivA.appendChild(markerA);
		markerDivA.appendChild(document.createElement("br"));
		sidebarDIV.appendChild(markerDivA);
		
		//einde extra toegevoegd 
		
		// User a location/store number if it's available, otherwise use the index of the array
		var func_num = (func_entry["gsx$storeid"].$t) ? func_entry["gsx$storeid"].$t : i;
		var func_storeNum = "Masseur # " + func_num;
		var func_lat = parseFloat(func_entry["gsx$lat"].$t);
		var func_lng = parseFloat(func_entry["gsx$lng"].$t);
		var func_point = new GLatLng(func_lat,func_lng);

		var func_mgr = (func_entry["gsx$manager"]) ? func_entry["gsx$manager"].$t : "";
		var func_naamklein = (func_entry["gsx$naamklein"]) ? func_entry["gsx$naamklein"].$t : "";
		var func_voornaam = (func_entry["gsx$voornaam"]) ? func_entry["gsx$voornaam"].$t : "";
		var func_imgUrl = (func_entry["gsx$imgurl"]) ? func_entry["gsx$imgurl"].$t : "";
		//var func_thumbUrl = (func_entry["gsx$thumburl"]) ? func_entry["gsx$thumburl"].$t : "";
		
		// Create some interesting HTML to appear when a location marker is selected
		//var func_html = "<div><b>" + func_storeNum + "</b><br/><span style='font-size:10px;'>";
		
		
		
		var func_html = "<div style='height:250px;'><span style='font-size:12px; color:#222;'><b>";
		func_html += (func_mgr.length > 0) ? func_naamklein : "";
		//func_html += (func_gd.length > 0) ? func_gd  : "";
		func_html += "</b></span><br/><br/>";
		
		func_html += (func_imgUrl.length > 0) ? "<img src=\""+func_imgUrl+"\">" : "";
				
		//func_html += "<br/><br/>";
			
		//func_html += (func_ph.length > 0) ? "T: " + func_ph + "<br/>" : "";
		//func_html += (func_mn.length > 0) ? "M: " + func_mn + "<br/>" : "";
		//func_html += (func_email.length > 0) ? "E: " + func_email + "<br/>" : "";
		func_html += "<br/>";
		func_html += "<span style='font-size:10px;'>";
		<!--func_html += "<a href=\"#\" onClick=\"javascript:voegEmailToe('"+func_email+"','"+func_naamklein+"');\" title=\"Voeg toe aan email lijst!\">aan mail lijst toevoegen</a><br>";-->
		func_html += "<a href=\"#\" onClick=\"javascript:toggleMinMaxInfoMasseur('"+func_voornaam+"','"+func_naamklein+"');\" title=\"Voor meer informatie over deze masseur, klik hier.\">informatie aanvragen over "+func_voornaam+"</a><br>";
		<!--func_html += "reis instructies <a href=\"#\" onClick=\"javascript:reisVan('"+func_zoekadres+"');\" title=\"Reis instructies VAN!\">VAN</a> <a href=\"#\" onClick=\"javascript:reisNaar('"+func_zoekadres+"');\" title=\"Reis instructies NAAR!\">NAAR</a>";-->
		func_html += "</span>";
		func_html += "</div>";
		
		
		cm_mapHTMLS.push(func_html);
		// Call a function to create a marker, then push it into the array of locations
		var func_marker = createStoreMarker(func_point, func_naamklein, func_html, i);
		
		markerArray.push(func_marker);
		func_marker.hide();
		map.addOverlay(func_marker)
		nummerToUserid.push(func_num);
	}
	// Now that the points have been loaded, check to see if any fall within the starting polygon
	checkPoints();
}

setTimeout('onLoad()', 1000);


function toggleMinMaxInfoMasseur(masseurnaam,masseurnaamvolledig){
	var details = document.getElementById("map4");
	var masnaamdetails = document.getElementById("gebruikersnaamtekst");
	var masseuridFormdetails = document.getElementById("masseuridForm");
	
	var details1 = document.getElementById("map6");
	var details2 = document.getElementById("zoekPlaatsCanvas");
	var details3 = document.getElementById("map8");
	var details4 = document.getElementById("toonGevMassCanvas");
	
	
	
	if(masseurnaam == 0){ 
		details1.style.display = 'block';
		details2.style.display = 'block';
		details3.style.display = 'block';
		details4.style.display = 'block';
		
		details.style.display = 'none';
	}else{		
		details1.style.display = 'none';
		details2.style.display = 'none';
		details3.style.display = 'none';
		details4.style.display = 'none';
		
		details.style.display = 'block';
		masnaamdetails.innerHTML = 'Wilt u weten of ' +masseurnaam+' beschikbaar is? Vraag dan meer informatie aan.';
		masseuridFormdetails.value = masseurnaamvolledig;
	}
}

function verstuurFormulier(){
	var errorhandler = 0;
	var naamdetails = document.getElementById("Naam");
	var emaildetails = document.getElementById("Email");
	
	if(naamdetails.value == ""){
		errorhandler = 1;
		var naamerror = document.getElementById("Naamerrors");
		naamerror.innerHTML = "<b style=\"color:#ff6600\">&nbsp;Uw naam</b>";
	}else{
		var naamerror = document.getElementById("Naamerrors");
		naamerror.innerHTML = "&nbsp;Uw naam";
	}
	
	if(emaildetails.value == ""){
		errorhandler = 1;
		var emailerror = document.getElementById("Emailerrors");
		emailerror.innerHTML = "<b style=\"color:#ff6600\">&nbsp;Email</b>";
	}else{
		var emailerror = document.getElementById("Emailerrors");
		emailerror.innerHTML = "&nbsp;Email";
	}
	
	if(errorhandler == 0){
		document.masseurinfoform.submit();	
	}
}