{namespace map=TYPO3\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,
				anchorPositionX: 	 <f:format.raw>{settings.anchorpositionx}</f:format.raw>,
				anchorPositionY: 	 <f:format.raw>{settings.anchorpositiony}</f:format.raw>
			};

			var locations = [];

			<f:for each="{locations}" as="location">
				var location = {
					title: "<f:format.raw value="{location.title}" />",
					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}" />",
					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: settings.centerMapLatitude,
						lng: settings.centerMapLongitude
					};
					initMap(mapOptions);
				} 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) {
						infobox = new InfoBox({
							content: location.title,
							disableAutoPan: false,
							pixelOffset: new google.maps.Size(15, -20),
							infoBoxClearance: new google.maps.Size(1, 1),
							closeBoxMargin: "-10px -60px 10px 10px"
						}).open(map, marker);
					}

					new google.maps.event.addListener(marker, 'click', function() {
						window.open(marker.url);
					});

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

				if(markers.length > 1) {
					map.fitBounds(bounds);
				}
				
				function createMarker(loc) {	
					var icon = null;
					
					if(loc.icon && loc.icon != '') {
						icon = {
							url: "uploads/tx_easygooglemap/" + loc.icon,
							anchor: new google.maps.Point(settings.anchorPositionX, settings.anchorPositionY)
						}
					}
							
					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>