var popups = [];
function closePopups(){
	for(var i=0; i<popups.length; i++){
		popups[i].close();
	}
	popups =[];
}

function mailContact(){
var name = gElement('contactFormName').value;
var email = gElement('contactFormEmail').value;
var description = gElement('contactFormDescription').value;
request = getHTTPObject();
	if (request != null) {
		queryString = "handlers/mailContact.php?name=" + name +"&email=" + email +"&description=" + description;
		request.open("GET", queryString, true);
		request.send(null);
		request.onreadystatechange = function() {
			if (request.readyState == 4 && request.status == 200) {				
				alert(request.responseText);
				clearForm_Contact();
				closePopups();
			}
		}	
	}
}

function clearForm_Contact(){
	gElement('contactFormName').value = '';
	gElement('contactFormEmail').value = '';
	gElement('contactFormDescription').value = '';
}

function getContactForm(){
	$.ajax({
		url:  url.pages + "contactformulier.php",
		success: function(data) {
			var popup = new Popup();
			popups.push(popup);
			popup.setTitle('Contactformulier');
			// add close action to popup
			var btnClose = cElement('button');
			btnClose.appendChild(cTextNode('Sluiten'));
			btnClose.onclick = function(){
				popup.clear();
				popup.close();
			}
			popup.appendAction(btnClose);

			var wrapper = cElement('div');
			wrapper.innerHTML = data;
			popup.appendBody(wrapper);	
			popup.display();
		}
	});
}

function getAcupunctuur(){
	$.ajax({
		url:  url.pages + "acupunctuur.php",
		success: function(data) {
			var popup = new Popup();
			popups.push(popup);
			popup.setTitle('Informatie Acupunctuur');
			// add close action to popup
			var btnClose = cElement('button');
			btnClose.appendChild(cTextNode('Sluiten'));
			btnClose.onclick = function(){
				popup.clear();
				popup.close();
			}
			popup.appendAction(btnClose);

			var wrapper = cElement('div');
			wrapper.innerHTML = data;
			popup.appendBody(wrapper);	
			popup.display();
		}
	});
}

	
 
function getMap(){
	var wrapper = cElement('div');
	wrapper.id = "locatie";
	
	var info = cElement('div');
	info.id = 'locatieInfo';
	wrapper.appendChild(info);
	
	var gmap = cElement('div');
	gmap.id = "gmap";
	wrapper.appendChild(gmap);
	
	
	// maps configuration
	var map;	
	var bezoekAdres = new google.maps.LatLng(52.3905, 4.9127); 		
	var directionDisplay;
	var directionsService = new google.maps.DirectionsService();
	var directionsDisplay = new google.maps.DirectionsRenderer();
	var myOptions = {
	  zoom: 15,
	  center: bezoekAdres,
	  mapTypeId: google.maps.MapTypeId.ROADMAP,
	  mapTypeControl: false,
	  panControl: false
	};
	var map = new google.maps.Map(gmap, myOptions);
	var marker = new google.maps.Marker({
		position: bezoekAdres,
		title:"Praktijk fysiotherapie & acupunctuur gentiaanplein"
	});	
	marker.setMap(map);
	directionsDisplay.setMap(map);
	
	// parkeergelegenheid
	var parkeergelegenheid = cElement('div');
	parkeergelegenheid.id = 'parkeergelegenheid';
	$.ajax({
		url:  url.pages + "parkeren.php",
		success: function(data) {
			gElement('parkeergelegenheid').innerHTML = data;
		}
	});
	info.appendChild(parkeergelegenheid);
	
	// openbaar vervoer
	var ov = cElement('div');
	ov.id = 'ov';
	$.ajax({
		url:  url.pages + "ov.php",
		success: function(data) {
			gElement('ov').innerHTML = data;
		}
	});
	info.appendChild(ov);
	
	// plan route
	var route = cElement('div');
	route.id = 'route';
	
	var routeTitle = cElement('div');
	routeTitle.appendChild(cTextNode('Plan uw route'));
	routeTitle.className = 'title';
	route.appendChild(routeTitle);
	
	var routeText = cElement('div');
	routeText.appendChild(cTextNode('Voer 1 of meerdere van de onderstaande velden in en klik op de knop om uw route te berekenen.'));
	route.appendChild(routeText);
	
	// adres
	var adres = cElement('div');
	var labelAdres = cElement('label');
	labelAdres.appendChild(cTextNode('Adres'));
	adres.appendChild(labelAdres);
	var routeAdres = cElement('input');
	routeAdres.type = 'text';
	routeAdres.id = 'routeAdres';
	adres.appendChild(routeAdres);
	route.appendChild(adres);
	
	// postcode
	var postcode = cElement('div');
	var labelPostcode = cElement('label');
	labelPostcode.appendChild(cTextNode('Postcode'));
	postcode.appendChild(labelPostcode);
	var routePostcode = cElement('input');
	routePostcode.type = 'text';
	routePostcode.id = 'routePostcode';
	postcode.appendChild(routePostcode);
	route.appendChild(postcode);
	
	// plaats
	var plaats = cElement('div');
	var labelPlaats = cElement('label');
	labelPlaats.appendChild(cTextNode('Plaats'));
	plaats.appendChild(labelPlaats);
	var routePlaats = cElement('input');
	routePlaats.type = 'text';
	routePlaats.id = 'routePlaats';
	plaats.appendChild(routePlaats);
	route.appendChild(plaats);
	
	// land
	var land = cElement('div');
	var labelLand = cElement('label');
	labelLand.appendChild(cTextNode('Land'));
	land.appendChild(labelLand);
	var routeLand = cElement('input');
	routeLand.type = 'text';
	routeLand.id = 'routeLand';
	land.appendChild(routeLand);
	route.appendChild(land);
	
	// bereken route
	var calc = cElement('button');
	calc.id = 'routeCalc';
	calc.appendChild(cTextNode('Bereken uw Route'));
	calc.onclick = function(){
		alert('route wordt berekend');
	}
	
	route.appendChild(calc);
	
	info.appendChild(route);
	
	
	// append wrapper to popup
	var popup = new Popup();
	popups.push(popup);
	popup.setTitle('Locatie & Routeinformatie');
	popup.appendBody(wrapper);
	
	// action close
	var btnClose = cElement('button');
	btnClose.appendChild(cTextNode('Sluiten'));
	btnClose.onclick = function(){
		popup.clear();
		popup.close();
	}
	popup.appendAction(btnClose);
	
	popup.display();
	
	
	function calcRoute() {
		var start = document.getElementById("start").value;
		var request = {
			origin:start, 
			destination:bezoekAdres,
			travelMode: google.maps.DirectionsTravelMode.DRIVING
		};
		directionsService.route(request, function(response, status) {
		  if (status == google.maps.DirectionsStatus.OK) {
			directionsDisplay.setDirections(response);
		  }
		});
	}

}

function getMailForm(){
	var wrapper = cElement('div');
	wrapper.id = "mailForm";
	
	// append wrapper to popup
	var popup = new Popup();
	popup.setTitle('Contactformulier');
	popup.appendBody(wrapper);
	
	// action close
	var btnClose = cElement('button');
	btnClose.appendChild(cTextNode('Sluiten'));
	btnClose.onclick = function(){
		popup.clear();
		popup.close();
	}
	popup.appendAction(btnClose);
	
	popup.display();
}