var directionsDisplay;
var directionsService = new google.maps.DirectionsService();

var map 			= null;
var noinfo 			= false;
var createdmarkers 	= [];
var infowindow 		= null;

var clickedmarker 	= null;

var active_image 	= "/img/leaderoost/gmaps_pin-groot_actief.png";
var imageLopend		= "/img/leaderoost/gmaps_pin-lopend.png";
var imageAfgesloten	= "/img/leaderoost/gmaps_pin-afgesloten.png";

function initMap(container) {
	// Centreren op Pekela
	var point = new google.maps.LatLng(
		parseFloat(53.082992730357496),
		parseFloat(6.983013153076172)
	);

	directionsDisplay = new google.maps.DirectionsRenderer();

	// Stel de opties in
	var options = {
		zoom: 			9,
		center: 		point,
		mapTypeId: 		google.maps.MapTypeId.ROADMAP,
		mapTypeControl: true
	}
		
    map = new google.maps.Map($(container), options);
  	directionsDisplay.setMap(map);
  	directionsDisplay.setPanel(document.getElementById("gmapsdirectionpanel"));
}

function createMarker(jsonmarker) {
	var markerLatLng = new google.maps.LatLng(
		jsonmarker.google_latitude,
		jsonmarker.google_longitude
	);
	
	var iconImage = getNonActiveMarkerByStatus(jsonmarker.status);
	
	var marker = new google.maps.Marker({
			position: 	markerLatLng,
			map: 		map,
			title: 		jsonmarker.title,
			content: 	jsonmarker.info,
			status: 	jsonmarker.status,
			url:	 	jsonmarker.url,
			icon: 		iconImage
		}
	);
	
	infowindow = new google.maps.InfoWindow();
	google.maps.event.addListener(infowindow, 'closeclick', function() {
		if (clickedmarker) {
			var iconImage = getNonActiveMarkerByStatus(clickedmarker.status);
			clickedmarker.setIcon(iconImage);
			toggleTekst(clickedmarker.url, true);
		}
		
		clickedmarker = null;
	});
	
	google.maps.event.addListener(marker, 'click', function() {
		showInfo(marker);
	});

	createdmarkers[createdmarkers.length] = marker;
}

function showInfo(marker) {
	marker.setIcon(getActiveMarker());
	infowindow.setContent(marker.content);
	
	if (clickedmarker && clickedmarker != marker) {
		var iconImage = getNonActiveMarkerByStatus(clickedmarker.status);
		clickedmarker.setIcon(iconImage);
	}
	
	clickedmarker = marker;
	toggleTekst(marker.url, false);
	infowindow.open(map, marker);
}

function getNonActiveMarkerByStatus(status) {
	var iconImage = imageLopend;
	if ((null !== status) && (status == 'Afgesloten')) {
		 iconImage = imageAfgesloten;
	}
	
	var markerImage = new google.maps.MarkerImage(
		iconImage,
		// This marker is 33 pixels wide by 38 pixels tall
		new google.maps.Size(33, 38),
		// The origin for this image is 0, 0
		new google.maps.Point(0, 0),
		// The anchor for this image is the base of the flagpole at 0, 38
		new google.maps.Point(0, 38)
	);
	
	return markerImage;
}

function getActiveMarker() {
	var markerImage = new google.maps.MarkerImage(
		active_image,
		// This marker is 42 pixels wide by 51 pixels tall
		new google.maps.Size(42, 51),
		// The origin for this image is 0, 0
		new google.maps.Point(0, 0),
		// The anchor for this image is the base of the flagpole at 0, 51
		new google.maps.Point(0, 51)
	);
	
	return markerImage;
}

function toggleTekst(markerurl, tekstempty) {
	// The HTML container that needs to be updated
	var containerId 	= 'locatietekst';

	// The cmd to be used to trigger the rendering of the tekst
	var url				= markerurl;
	
	// Show a default text
	if (true === tekstempty) {
		url	+= '/ShowDefaultTekst';
	} else {
		url	+= '/ShowLocatieTekst';
	}
	
	// The method to be used in this AJAX request
	var updateMethod 	= 'post';
	
	new Ajax.Updater({success: containerId}, url, {
		method: updateMethod,
		parameters: {}
	});
}

function doDirection(tostring) {
	if (clickedmarker && tostring > '') {
		var request = {
			origin: 		tostring,
			destination: 	clickedmarker.position,
			travelMode: 	google.maps.DirectionsTravelMode.DRIVING
		};		
		
		directionsService.route(request, function(result, status) {
			if (status == google.maps.DirectionsStatus.OK) {
				directionsDisplay.setDirections(result);
			} else {
				alert('Kan route niet vaststellen.');
			}
		});		
	}
	return false;
}

function doEvents() {
	var locaties = $$('#all_locaties li');
	if (locaties) {
		locaties.each( function(el, index) {
			Event.observe( el, 'click', function(e) {
				e.stop();				
				
				if (infowindow && createdmarkers[index]) {
					showInfo(createdmarkers[index]);
				}
			});
			Event.observe( el, 'mouseover', function() {
				if (createdmarkers[index]) {
					createdmarkers[index].setIcon(getActiveMarker());
				}
			});
			Event.observe( el, 'mouseout', function() {
				if (createdmarkers[index] && createdmarkers[index] != clickedmarker) {
					var iconImage = getNonActiveMarkerByStatus(createdmarkers[index].status);
					createdmarkers[index].setIcon(iconImage);
				}				
			});
		});
	}
	
	var routelinks = $$('.gmapsdirection');
	if (routelinks) {
		routelinks.each(function(el) {
			alert(el);
			el.observe('click', function(e) {
				e.stop();
				alert(el);
				el.next('p').toggle();
			});			
		});
	}
}

function loadMarkers(url) {
	if (map) {
		new Ajax.Request(url, {
			method: 'get',
			onSuccess: function(transport) {
				var json = transport.responseText.evalJSON(true);
				json.each(function(jsonmarker) {
					createMarker(jsonmarker);					
				});				
			}
		});
	}
}