var tsk_map;
var tsk_map_layers = {};
$(document).ready(function(){
	if($('.tx-tsk-map').length) {
		$('#tsk-map-filter-body').hide();

		// remove the shadow pane (otherwise each shadow image is read out)
		$('.leaflet-shadow-pane').remove();
			
		// prevent screen readers from reading out each map tile
		$('.leaflet-tile-container img, .leaflet-shadow-pane img').attr('role','presentation').attr('alt','');

		tsk_map = L.map('tsk-map', {zoomControl:false}).setView([tsk_map_lat,tsk_map_lng], tsk_map_zoom);

		L.tileLayer('https://sgx.geodatenzentrum.de/wmts_topplus_web_open/tile/1.0.0/web_grau/default/WEBMERCATOR/{z}/{y}/{x}.png', {
			maxZoom: 18,
			attribution: '&copy; <a href="https://www.bkg.bund.de" target="_blank">Bundesamt f&uuml;r Kartographie und Geod&auml;sie</a> 2021, <a href="https://sg.geodatenzentrum.de/web_public/Datenquellen_TopPlus_Open.pdf" target="_blank">Datenquellen</a>',
			zoom: 9,
			center: [tsk_map_lat,tsk_map_lng]
		}).addTo(tsk_map);
		
		new L.Control.Zoom({ position: 'topright' }).addTo(tsk_map);

		tsk_map.createPane('districts');
		tsk_map.getPane('districts').style.zIndex = 299;
			
		var district_boundary = new L.geoJson(null,{
			style: function (feature) {
				return {
					fillColor: '#0076a6',
					weight: 2,
					opacity: 1,
					color: '#0076a6',
					//dashArray: '3',
					fillOpacity: 0.05,
					pane: 'districts'
				};
			}
		});
		district_boundary.addTo(tsk_map);
		
		var groupAreas = L.featureGroup().setZIndex(300);
		tsk_map.addLayer(groupAreas);
		
		var groupRadius = L.featureGroup().setZIndex(301);
		tsk_map.addLayer(groupRadius);
		
		var groupRoute = L.featureGroup().setZIndex(302);
		tsk_map.addLayer(groupRoute);
		var groupRouteMouseOver = L.featureGroup().setZIndex(303);
		tsk_map.addLayer(groupRouteMouseOver);
		
		var groupPoint = L.featureGroup().setZIndex(304);
		tsk_map.addLayer(groupPoint);
		
		if(tsk_map_landkreise!==undefined && tsk_map_landkreise) {
			$.ajax({
				dataType: "json",
				url: "/typo3conf/ext/tsk_map/Resources/Public/th.geojson",
				success: function(data) {
					$(data.features).each(function(key, data) {
						district_boundary.addData(data);
					});
				},
				error: function(error) {
				}
			});
		}
		
		if(tsk_map_informations!==undefined) {
			if(tsk_map_informations.Area!==undefined && tsk_map_informations.Area.length){
				$(tsk_map_informations.Area).each(function(key, data) {
					let marker = L.polygon(data.coordinates, {
						color: data.color,
						opacity: data.opacity,
						weight: data.weight,
						fillColor: data.color,
						fillOpacity: data.opacity
					}).addTo(groupAreas);
					marker._path.setAttribute('tabindex', '0');
					marker._path.setAttribute('aria-label', 'Bereich');
					if(data.info) {
						marker.bindPopup(data.info);
					}
					tsk_map_layers[data.id] = [marker];
					//$('#tsk-map-sr').append('<li id="tsk-map-sr-el-'+data.id+'" role="listitem" class="sr-only sr-only-focusable" aria-label="Bereich" tabindex="0">'+data.info+'</li>');
				});
			}
			if(tsk_map_informations.Route!==undefined && tsk_map_informations.Route.length){
				$(tsk_map_informations.Route).each(function(key, data) {
					let marker = L.polyline(data.coordinates, {
						color: data.color,
						opacity: data.opacity,
						width: data.weight,
					}).addTo(groupRoute);
					marker._path.setAttribute('tabindex', '0');
					marker._path.setAttribute('aria-label', 'Strecke');
					if(data.info) {
						let markerMouseOver = L.polyline(data.coordinates, {
							color: data.color,
							opacity: 0,
							weight: 6,
						}).addTo(groupRouteMouseOver);
						markerMouseOver.bindPopup(data.info);
						markerMouseOver.on('mouseover', function(e) {
							var layer = e.target;
							layer.setStyle({
								opacity: 0.5,
							});
						});
						markerMouseOver.on('mouseout', function(e) {
							var layer = e.target;
							layer.setStyle({
								opacity: 0,
							});
						});
						tsk_map_layers[data.id] = [marker, markerMouseOver];
						//$('#tsk-map-sr').append('<li id="tsk-map-sr-el-'+data.id+'" role="listitem" class="sr-only sr-only-focusable" aria-label="Strecke" tabindex="0">'+data.info+'</li>');
					}
				});
			}
			if(tsk_map_informations.Radius!==undefined && tsk_map_informations.Radius.length){
				$(tsk_map_informations.Radius).each(function(key, data) {
					let marker = L.circle(data.coordinates[0], {
						color: data.color,
						opacity: data.opacity,
						weight: data.weight,
						fillColor: data.color,
						fillOpacity: data.opacity,
						radius: data.radius
					}).addTo(groupRadius);
					marker._path.setAttribute('tabindex', '0');
					marker._path.setAttribute('aria-label', 'Kreismarkierung');    			
					if(data.info) {
						marker.bindPopup(data.info);
					}
					tsk_map_layers[data.id] = [marker];
					//$('#tsk-map-sr').append('<li id="tsk-map-sr-el-'+data.id+'" role="listitem" class="sr-only sr-only-focusable" aria-label="Kreis" tabindex="0">'+data.info+'</li>');
				});
			}
			if(tsk_map_informations.Point!==undefined && tsk_map_informations.Point.length){
				$(tsk_map_informations.Point).each(function(key, data) {
					let icon = null;
					if(data.marker!==undefined && data.marker) {
						icon = L.icon({
							iconUrl: data.marker.iconUrl,
							iconSize:     [data.marker.w, data.marker.h],
							iconAnchor:   [data.marker.x, data.marker.y]
						});
					}
					let marker = L.marker(data.coordinates[0], {
						icon: icon
					}).addTo(groupPoint);
					if(data.info) {
						marker.bindPopup(data.info);
					}
					tsk_map_layers[data.id] = [marker];
					//$('#tsk-map-sr').append('<li id="tsk-map-sr-el-'+data.id+'" role="listitem" class="sr-only sr-only-focusable" aria-label="Marker" tabindex="0">'+data.info+'</li>');
				});
			}
		}

		$('#tsk-map .leaflet-marker-pane img').attr('aria-label', 'Markierung');
		
		$('#tsk-map-filter-btn').on('click', function(){
			if($('#tsk-map-filter').hasClass('active')) {
				$('#tsk-map-filter').removeClass('active');
				$('#tsk-map-filter-btn').attr('aria-expanded', 'false');
				$('#tsk-map-filter-btn i').removeClass('fa-angle-left').addClass('fa-angle-right');
				$('#tsk-map-filter-body').hide();
			} else {
				$('#tsk-map-filter-body').show();
				$('#tsk-map-filter').addClass('active');
				$('#tsk-map-filter-btn').attr('aria-expanded', 'true');
				$('#tsk-map-filter-btn i').removeClass('fa-angle-right').addClass('fa-angle-left');
			}
		});
		
		$('.tsk-map-filter-cb').on('change', function(){
			searchInfo();
		});
		
		$('#filter-search-btn').on('click', function(){
			searchInfo();
		});
		
		function searchInfo() {
			var cat_checked = [];
			var search = $('#filter-search-keyword').val();
			var search_regex = null;
			var filter_cb_count = $('.tsk-map-filter-cb').length;
			if(search) {
				search_regex = new RegExp(search, "i")
			}
			if($('.tsk-map-filter-cb:checked').length) {
				$('.tsk-map-filter-cb:checked').each(function() {
					cat_checked.push(parseInt($(this).val()));
				});
			}
			if(tsk_map_informations!==undefined) {
				if(tsk_map_informations.Area!==undefined && tsk_map_informations.Area.length){
					$(tsk_map_informations.Area).each(function(key, data) {
						let intersection = [];
						if(search) {
							if(data.info.search(search_regex)!==-1) {
								intersection = data.categories.filter(x => cat_checked.includes(x));
							}
						} else {
							intersection = data.categories.filter(x => cat_checked.includes(x));
						}
						
						if(intersection.length) {
							$(tsk_map_layers[data.id]).each(function(key3,marker) {
								if(!groupAreas.hasLayer(marker)){
									groupAreas.addLayer(marker);
								}
							});
							$('#tsk-map-sr-el-'+data.id).show();
						} else {
							if(filter_cb_count) {
								$(tsk_map_layers[data.id]).each(function(key3,marker) {
									if(groupAreas.hasLayer(marker)){
										groupAreas.removeLayer(marker);
									}	
								});
								$('#tsk-map-sr-el-'+data.id).hide();
							} else {
								if(data.info.search(search_regex)!==-1 || !search_regex) {
									$(tsk_map_layers[data.id]).each(function(key3,marker) {
										if(!groupAreas.hasLayer(marker)){
											groupAreas.addLayer(marker);
										}
									});
									$('#tsk-map-sr-el-'+data.id).show();
								} else {
									$(tsk_map_layers[data.id]).each(function(key3,marker) {
										if(groupAreas.hasLayer(marker)){
											groupAreas.removeLayer(marker);
										}	
									});
									$('#tsk-map-sr-el-'+data.id).hide();
								}
							}
						}
					});
				}
				if(tsk_map_informations.Route!==undefined && tsk_map_informations.Route.length){
					$(tsk_map_informations.Route).each(function(key, data) {
						let intersection = [];
						if(search) {
							if(data.info.search(search_regex)!==-1) {
								intersection = data.categories.filter(x => cat_checked.includes(x));
							}
						} else {
							intersection = data.categories.filter(x => cat_checked.includes(x));
						}
						if(intersection.length) {
							$(tsk_map_layers[data.id]).each(function(key3,marker) {
								if(!groupRoute.hasLayer(marker)){
									groupRoute.addLayer(marker);
								}
							});
							$('#tsk-map-sr-el-'+data.id).show();
						} else {
							if(filter_cb_count) {
								$(tsk_map_layers[data.id]).each(function(key3,marker) {
									if(groupRoute.hasLayer(marker)){
										groupRoute.removeLayer(marker);
									}	
								});
								$('#tsk-map-sr-el-'+data.id).hide();
							} else {
								if(data.info.search(search_regex)!==-1 || !search_regex) {
									$(tsk_map_layers[data.id]).each(function(key3,marker) {
										if(!groupRoute.hasLayer(marker)){
											groupRoute.addLayer(marker);
										}
									});
									$('#tsk-map-sr-el-'+data.id).show();
								} else {
									$(tsk_map_layers[data.id]).each(function(key3,marker) {
										if(groupRoute.hasLayer(marker)){
											groupRoute.removeLayer(marker);
										}	
									});
									$('#tsk-map-sr-el-'+data.id).hide();
								}
							}
						}
					});
				}
				if(tsk_map_informations.Radius!==undefined && tsk_map_informations.Radius.length){
					$(tsk_map_informations.Radius).each(function(key, data) {
						let intersection = [];
						if(search) {
							if(data.info.search(search_regex)!==-1) {
								intersection = data.categories.filter(x => cat_checked.includes(x));
							}
						} else {
							intersection = data.categories.filter(x => cat_checked.includes(x));
						}
						if(intersection.length) {
							$(tsk_map_layers[data.id]).each(function(key3,marker) {
								if(!groupRadius.hasLayer(marker)){
									groupRadius.addLayer(marker);
								}
							});
							$('#tsk-map-sr-el-'+data.id).show();
						} else {
							if(filter_cb_count) {
								$(tsk_map_layers[data.id]).each(function(key3,marker) {
									if(groupRadius.hasLayer(marker)){
										groupRadius.removeLayer(marker);
									}	
								});
								$('#tsk-map-sr-el-'+data.id).hide();
							} else {
								if(data.info.search(search_regex)!==-1 || !search_regex) {
									$(tsk_map_layers[data.id]).each(function(key3,marker) {
										if(!groupRadius.hasLayer(marker)){
											groupRadius.addLayer(marker);
										}
									});
									$('#tsk-map-sr-el-'+data.id).show();
								} else {
									$(tsk_map_layers[data.id]).each(function(key3,marker) {
										if(groupRadius.hasLayer(marker)){
											groupRadius.removeLayer(marker);
										}	
									});
									$('#tsk-map-sr-el-'+data.id).hide();
								}
							}
						}
					});
				}
				if(tsk_map_informations.Point!==undefined && tsk_map_informations.Point.length){
					$(tsk_map_informations.Point).each(function(key, data) {
						let intersection = [];
						if(search) {
							if(data.info.search(search_regex)!==-1) {
								intersection = data.categories.filter(x => cat_checked.includes(x));
							}
						} else {
							intersection = data.categories.filter(x => cat_checked.includes(x));
						}
						
						if(intersection.length) {
							$(tsk_map_layers[data.id]).each(function(key3,marker) {
								if(!groupPoint.hasLayer(marker)){
									groupPoint.addLayer(marker);
								}
							});
							$('#tsk-map-sr-el-'+data.id).show();
						} else {
							if(filter_cb_count) {
								$(tsk_map_layers[data.id]).each(function(key3,marker) {
									if(groupPoint.hasLayer(marker)){
										groupPoint.removeLayer(marker);
									}	
								});
								$('#tsk-map-sr-el-'+data.id).hide();
							} else {
								if(data.info.search(search_regex)!==-1 || !search_regex) {
									$(tsk_map_layers[data.id]).each(function(key3,marker) {
										if(!groupPoint.hasLayer(marker)){
											groupPoint.addLayer(marker);
										}
									});
									$('#tsk-map-sr-el-'+data.id).show();
								} else {
									$(tsk_map_layers[data.id]).each(function(key3,marker) {
										if(groupPoint.hasLayer(marker)){
											groupPoint.removeLayer(marker);
										}	
									});
									$('#tsk-map-sr-el-'+data.id).hide();
								}
							}
						}
					});
				}
			}
		}

		var current_popup = undefined;
		tsk_map.on('popupopen',function(popup) {
			// shift focus to the popup when it opens
			$(popup.popup._container).find('.leaflet-popup-content').attr('tabindex','-1').focus();

			// move the close button to the end of the popup content so screen readers reach it
			// after the main popup content, not before
			var close = $(popup.popup._container).find('.leaflet-popup-close-button');
			$(popup.popup._container).find('.leaflet-popup-close-button').remove();
			close.attr('title','Close item');
			$(popup.popup._container).append(close);

			//remember reference for closing with keyboard
			current_popup = popup;
		});

		// return focus to the icon we started from before opening the pop up
		tsk_map.on('popupclose',function(popup) {

			if (popup.popup._source.hasOwnProperty('_icon')) {
				$(popup.popup._source._icon).focus();
			} else if (popup.popup._source.hasOwnProperty('_path')) {
				$(popup.popup._source._path).focus();
			}

			current_popup = undefined;
		});

		document.addEventListener('keydown', function(event) {
			var ESCAPE = 27;

			if (current_popup && event.keyCode == ESCAPE) {
				event.preventDefault();
				event.stopPropagation();
				tsk_map.closePopup();
			}
		})
	}
});