{namespace map=Comsolit\EasyGooglemap\ViewHelpers\PageRenderer}

<f:layout name="Default" />

<f:section name="main">
	<div id="tx_easy_googlemap" style="height: {settings.height}; width: {settings.width};"></div>
	<map:addJsFooterInlineCode name="easy_googlemap">
		jQuery(document).ready(function() {
			var map = null;
			var settings = {
				saturation:			<f:format.raw>{settings.saturation}</f:format.raw>,
				gamma: 				<f:format.raw>{settings.gamma}</f:format.raw>,
				fadeOutCats: 		"<f:format.raw>{settings.fadeoutcats}</f:format.raw>",
				centerMapLatitude:  "<f:format.raw>{settings.centerMapLatitude}</f:format.raw>",
				centerMapLongitude: "<f:format.raw>{settings.centerMapLongitude}</f:format.raw>",
				zoom: 				 <f:format.raw>{settings.zoom}</f:format.raw>,
				mapTypeId: 			 google.maps.MapTypeId.ROADMAP
			};

			var locations = [];

			<f:for each="{locations}" as="location">
				var location = {
					title: "<f:format.raw value="{location.title}" />",
					infobox: "<f:format.raw value="{location.infobox}" />",
					latitude: parseFloat("<f:format.raw value="{location.latitude}" />"),
					longitude: parseFloat("<f:format.raw value="{location.longitude}" />"),
					link: "<f:format.raw value="{location.link}" />",
					icon: "<f:format.raw value="{location.icon}" />",
					anchorx: parseFloat("<f:format.raw value="{location.anchorx}" />"),
					anchory: parseFloat("<f:format.raw value="{location.anchory}" />"),
					clickable: true
				};
				location.position = new google.maps.LatLng(location.latitude, location.longitude);
				locations.push(location);
			</f:for>


			mapOptions = {
				zoom: settings.zoom,
				mapTypeId: settings.mapTypeId,
				styles: [
					{
						stylers: [
							{ saturation: settings.saturation },
							{ gamma: settings.gamma }
						]
					}
				]
			};
			
			if(settings.fadeOutCats || settings.fadeOutCats != '') {				
				var featureTypesString = settings.fadeOutCats.replace(/\s/g, '');
				var featureTypes = featureTypesString.split(',');
				featureTypes.forEach(function(featureType) {
					mapOptions.styles.push({
						featureType: featureType,
							stylers: [
								{ "visibility": "off" }
							]
						});
					}
				);				
			}
			
			if(locations.length > 0) {	
				var bounds;				
					
				if(settings.centerMapLatitude != "" && settings.centerMapLongitude != "") {
					mapOptions.center = {
						lat: parseFloat(settings.centerMapLatitude),
						lng: parseFloat(settings.centerMapLongitude)
					};
				} else {
					mapOptions.center = {
						lat: locations[0].latitude,
						lng: locations[0].longitude
					};
					if(locations.length > 1) {
						bounds = new google.maps.LatLngBounds();
						locations.forEach(function(location) {
							bounds.extend(location.position);
						});
					}
				}
				initMap(bounds);
				setMarkers();				
			} else {
				mapOptions.zoom = 7;
				mapOptions.center = {
					lat: 46.818188,
					lng: 8.227512
				};
				initMap();
			}
			
			function initMap(bounds) {
				map = new google.maps.Map(document.getElementById("tx_easy_googlemap"), mapOptions);
				if(bounds) {
					map.fitBounds(bounds);
				}				
			}

			function setMarkers() {
				var markers = [];
				var bounds = new google.maps.LatLngBounds();

				locations.forEach(function(location) {	
					var marker = createMarker(location);
					markers.push(marker);
					if(location.title && location.infobox === "1") {
						var infoWindow = new google.maps.InfoWindow({
							content: '<a href="' + marker.url + '" target="_blank">' + location.title + '</a>'
						});
						marker.addListener('click', function() {
							infoWindow.open(map, marker);
						});
					} else {
						new google.maps.event.addListener(marker, 'click', function() {
						window.open(marker.url);
						});
					}

					bounds.extend(location.position);
				});

				function createMarker(loc) {	
					var icon = null;
					
					if(loc.icon && loc.icon != '') {
						icon = {
							url: "/uploads/tx_easygooglemap/" + loc.icon,
							anchor: new google.maps.Point(loc.anchorx, loc.anchory)
						}
					}

					var newMarker = new google.maps.Marker({
						map: map,
						position: loc.position,
						clickable: loc.clickable,
						url: loc.link,
						icon: icon
					});
					
					return newMarker;
				}
			}
		});
	</map:addJsFooterInlineCode>
</f:section>