$(document).on("pageinit", "#fwplan_main", function() {

	$('#measurementTool').hide();
	resizeMap();
	var resizeTimer;
	var userLevel ;
	var measurement_active = false;
	var measureMarkers = [];
	
	function resizeMap() {
		$('#map_canvas').height($(window).height()-70);
		$('#map_canvas').width($(window).width());
		$('#info-panel').css("max-width",$(document).width()*0.8);
		$('#info-panel').css("max-height",$(document).height()*0.9);
		if($(document).width()>600) {
			$('#info-description').css("max-width",$(document).width()*0.8-$('#info-Bild').width());
		} else {
			$('#info-description').css("max-width",$(document).width()*0.8);	
		}
		$('.scroll-container').css("max-height", $(document).height()*0.9-$('#info-panel td').height()-10);
	}
	
	$(window).resize(function() {
		clearTimeout(resizeTimer);
		resizeTimer = setTimeout(resizeMap(), 100);
	});
	
	$.noty.defaults = {
		layout: 'topCenter',
		theme: 'relax',
		type: 'success',
		text: '', // can be html or string
		dismissQueue: true, // If you want to use queue feature set this true
		template: '<div class="noty_message"><span class="noty_text"></span><div class="noty_close"></div></div>',
		animation: {
			open: {height: 'toggle'}, // or Animate.css class names like: 'animated bounceInLeft'
			close: {height: 'toggle'}, // or Animate.css class names like: 'animated bounceOutLeft'
			easing: 'swing',
			speed: 200 // opening & closing animation speed
		},
		timeout: 1000, // delay for closing event. Set false for sticky notifications
		force: false, // adds notification to the beginning of queue when set to true
		modal: false,
		maxVisible: 5, // you can set max visible notification for dismissQueue true option,
		killer: false, // for close all notifications before show
		closeWith: ['click'], // ['click', 'button', 'hover', 'backdrop'] // backdrop click will close all notifications
		callback: {
			onShow: function() {},
			afterShow: function() {},
			onClose: function() {},
			afterClose: function() {},
			onCloseClick: function() {},
		},
		buttons: false // an array of buttons
	};
	
	$('#info-panel').on("popupafteropen", function() {
		resizeMap();
	});
	
	$('#loginForm').on("beforeopen", function(event) {
		$('#password').val();
		$('#pwd_msg').text();
	});
	
	$('#loginForm').on("submit", function(event) {
		$.get("logincheck.php", {username: $('#username').val(), password: $('#password').val(), rememberMe: $('#rememberMe').prop("checked")}).done(function(data) {
			userLevel = parseInt(data);
			if(userLevel >= 1) {
				$('#popupLogin').popup("close");
				$('#nav-panel').panel("close");
				setMarkers(map);
				map.dragging.enable();
				map.touchZoom.enable();
				map.doubleClickZoom.enable();
				map.scrollWheelZoom.enable();
				map.boxZoom.enable();
				map.keyboard.enable();
				L.control.zoom().addTo(map);
				$('#map_canvas').css({
					'-webkit-filter': 'blur(0px)',
					'-moz-filter': 'blur(0px)',
					'-o-filter': 'blur(0px)',
					'-ms-filter': 'blur(0px)',
					'filter': 'blur(0px)',
					opacity: 1
				});
				$('#map_canvas').css({
					'-webkit-transition': '1s',
					'transition': '1s'
				});
				$('#lilogin').hide();
				$('#liMeasurementTool').show();
				$('#lilogout').show();
				if(userLevel>1) {
					$('#openDivSaveMeasurement').show();
					$('#liLastEinsatz').show();
				}
				if(userLevel>5) {
					$('#liedit').show();	
				}
				$('#liuname').text($('#username').val());
				if($.urlParam('measurementID')) {				//automatisch öffnen, nachdem eingeloggt wurde
					loadMeasurementAndCenter($.urlParam('measurementID'));
				}
				if($.urlParam('markerID')) {					//automatisch öffnen, nachdem eingeloggt wurde
					var tempMarker = new L.Marker([0, 0], {
						id: $.urlParam('markerID')
					});
					get_Object_JSON(tempMarker);
				}
			} else {
				$('#pwd_msg').text(data);
			}
			$.mobile.loading('hide');
		});
		event.preventDefault();
		return false;
	});
	
	$('#info-panel').on("popupafterclose", function() {
		var act_hydr = getObjFromArr(Hydranten_markers,"id",$('#id').val());
		if($('#Typ').val()=='xKM') {
			resetIcon(act_hydr, $('#Typ').val(), $('#info-Bezeichnung').text(),$('#cbStichleitung').prop("checked")==true?1:0);
		} else {
			resetIcon(act_hydr, $('#Typ').val(), $('#intID').val(),$('#cbStichleitung').val());
		}
	});
	
	var get_Object_JSON = function (marker) {
		//var LatLng = marker.getLatLng();
		$.get("hydrant_info.php", {id: marker.options.id, query: 'JSON'}).done(function(data) {
			var jsonData = jQuery.parseJSON(data);
			
			if (jsonData.Bezeichnung) {
				$('#info-Bezeichnung').show().text(jsonData.Bezeichnung);
			} else {
				$('#info-Bezeichnung').hide();
			}
			if (jsonData.Adresse) {
				$('#info-Adresse').show().text(jsonData.Adresse);
			} else {
				$('#info-Adresse').hide();
			}
			if (jsonData.Ort) {
				$('#info-Ort').show().text(jsonData.Ort);
			} else {
				$('#info-Ort').hide();
			}
			if (jsonData.Beschreibung) {
				$('#info-Beschreibung').show().text(jsonData.Beschreibung);
			} else {
				$('#info-Beschreibung').hide();
			}
			if (jsonData.interne_id!=="0") {
				$('#info-intID').show().text(jsonData.interne_id);
			} else {
				$('#info-intID').hide();
			}
			if (jsonData.Bild) {
				var pics = jsonData.Bild.split(";");
				$('#info-Bild img').attr("src","Fotos/small/"+pics[0]+"?1776507045");
				$('#info-Bild').show();
				$('#open-iightbox').bind("click",function(e) {
					var lightboxpics = [];
					$.each(pics, function(index, value) {
						if(value) {
							var imgArray = {};
							imgArray.href = "Fotos/800/" + value + "?1776507045";
							imgArray.title = "<a href='Fotos/800/" + value + "?1776507045" + "' target='_blank'>Originalgr&ouml;&szlig;e</a>" ;
							lightboxpics.push(imgArray);
						}
					});
					//console.log(lightboxpics);
					
					$.fancybox.open(lightboxpics, {
						helpers : {
							title : {
								type : 'inside'
							},
							thumbs : {
								width: 75,
								height: 50
							}
						},
						nextEffect: 'none',
						prevEffect: 'none'
					});
				});
			} else {
				$('#info-Bild').hide();
			}
			$('#info-Attribute').empty();
			$('.hint').remove();
			$('.info').remove();
			$('.scroll-container').scrollTop();
			if (jsonData.Attribute.length > 3) {
				$('#info-Eigenschaften').show();
				var attributeObj = jQuery.parseJSON(jsonData.Attribute);
				for (var prop in attributeObj) {
					var propname = prop;
					if(propname.indexOf('(tel)')>=0) {
						propt = prop.replace('(tel)','');
						$('#info-Attribute').append("<li><span class='Attr-Name'>"+propt+"</span> <span class='Attr-Value'><a href='tel:"+attributeObj[prop]+"'>"+attributeObj[prop]+"</a></span></li>");
					} else if(propname.indexOf('(!)')>=0) {
						propt = prop.replace('(!)','');
						$('.container').before("<div class='hint'><div class='Attr-Name'>"+propt+"</div> <div class='Attr-Value'>"+attributeObj[prop]+"</div></div>");
					} else if(propname.indexOf('(i)')>=0) {
						propt = prop.replace('(i)','');
						$('.container').before("<div class='info'><div class='Attr-Name'>"+propt+"</div> <div class='Attr-Value'>"+attributeObj[prop]+"</div></div>");
					} else if(propname.indexOf('(lnk)')>=0) {
						propt = prop.replace('(lnk)','');
						$('#info-Attribute').append("<li><span class='Attr-Name'><a href='"+attributeObj[prop]+"' target='_blank'>"+propt+"</a></span><span class='Attr-Value'>&nbsp;</span></li>");
					} else {
						$('#info-Attribute').append("<li><span class='Attr-Name'>"+prop+"</span> <span class='Attr-Value'>"+attributeObj[prop]+"</span></li>");
					}
				}
			} else {
				$('#info-Eigenschaften').hide();
			}
				
			if(jsonData.Stichleitung == 1) {
				$('#Typ-img img').attr("src","img/"+jsonData.Typ+"_Stl.png");
			} else {
				$('#Typ-img img').attr("src","img/"+jsonData.Typ+".png");
			}
			switch(jsonData.Typ) {
				case 'OFH': 
					$('#info-Typ').show().text("Überflurhydrant");
					break;
				case 'UFH': $('#info-Typ').show().text("Unterflurhydrant");
					break;
				case 'BMA': $('#info-Typ').show().text("Brandmeldeanalge");
					break;
				case 'RWA': $('#info-Typ').show().text("Rauch- und Wärmeabzug");
					break;
				case 'SCs': $('#info-Typ').show().text("Schranken mit Schlüssel");
					break;
				case 'SCd': $('#info-Typ').show().text("Schranken mit Dreikant");
					break;
				case 'OM': $('#info-Typ').show().text("Objektmappe");
					break;
				case 'SSt': $('#info-Typ').show().text("Saugstelle");
					break;
				case 'LT': $('#info-Typ').show().text("Löschteich");
					break;
				case 'LwB': $('#info-Typ').show().text("Löschwasserbehälter");
					break;
				case 'SlS': $('#info-Typ').show().text("Schlüsselsafe");
					break;
				case 'Apf': $('#info-Typ').show().text("Absperrpfosten");
					break;
				case 'Dfh': $('#info-Typ').show().text("Durchfahrtshöhe");
					break;
				case 'Sdf': $('#info-Typ').show().text("Schlauchdurchführung");
					break;
				case 'Fvb': $('#info-Typ').show().text("FAHRVERBOT");
					break;
				case 'xKM': $('#info-Typ').show().text("Fluß-/Straßenkilometer");
					break;
				default: $('#info-Typ').hide();
					break;
			}
			$('#id').val(jsonData.id);
			$('#intID').val(jsonData.interne_id);
			$('#Typ').val(jsonData.Typ);
			$('#cbStichleitung').val(jsonData.Stichleitung);
			$('#info-panel').popup('open');
			$.mobile.loading('hide');
		});
	}
	
	function getURLParameter(name) {
		return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null;
	}
	
	function setMarkers(map) {
		var best = 1;
		if($.urlParam('unfertig')) {
			best = 0;
		}
		$.getJSON("hydrant_info.php", {xhrFields: {withCredentials: true}, query: 'JSONall', bestaetigt:best}).done(function(data) {
			$.each(data, function(index, value) {
				var marker = new L.Marker([value.Lattitude, value.Longitude], {
					title: value.Bezeichnung,
					id: value.id
				});
				if(value.Typ=='xKM') {
					resetIcon(marker,value.Typ,value.Bezeichnung,value.Stichleitung);
				} else {
					resetIcon(marker,value.Typ,value.interne_id,value.Stichleitung);
					marker.on('click', function(e) {
						$.mobile.loading('show');
						$('#info-panel').popup('close');
						get_Object_JSON(this);
						resetIcon(this,'X');
					});
				}
				Hydranten_markers.push(marker);
				switch(value.Typ) {
					case 'OFH':
					case 'UFH': marker.addTo(xFH_objects);
						break;
					case 'BMA': marker.addTo(BMA_objects);
						break;
					case 'RWA': marker.addTo(RWA_objects);
						break;
					case 'SCs':
					case 'SCd': marker.addTo(SCx_objects);
						break;
					case 'OM': marker.addTo(OM_objects);
						break;
					case 'SSt': marker.addTo(SST_objects);
						break;
					case 'LT': marker.addTo(LT_objects);
						break;
					case 'LwB': marker.addTo(LwB_objects);
						break;
					case 'SlS': marker.addTo(SlS_objects);
						break;
					case 'Apf': marker.addTo(Apf_objects);
						break;
					case 'Dfh': marker.addTo(DfH_objects);
						break;
					case 'Sdf': marker.addTo(Sdf_objects);
						break;
					case 'Fvb': marker.addTo(Fvb_objects);
						break;
					case 'xKM': marker.addTo(xKM_objects);
						break;
					default: marker.addTo(Rest_objects);
						break;
				}
			});		
		});
	}
	
	function drawMap() {
		var baseLayers = {
			"OpenStreetMap": osm,
			"Google maps Hybrid": gmsat,
			"Basemap": baseMap,
			"Basemap Satellit": bmSat
		};
		var overlays = {
			"Hydranten": xFH_objects,
			"Saugstellen": SST_objects,
			"L&ouml;schteiche": LT_objects,
			"L&ouml;schwasserbeh&auml;lter": LwB_objects,
			"Brandmeldeanlagen": BMA_objects,
			"Rauch- und W&auml;rmeabzug": RWA_objects,
			"Schranken": SCx_objects,
			"Objektmappen": OM_objects,
			"Schl&uuml;sselsafe": SlS_objects,
			"Absperrpfosten": Apf_objects,
			"Durchfahrtsh&ouml;he": DfH_objects,
			"Schlauchdurchf&uuml;hrung": Sdf_objects,
			"Fahrverbot": Fvb_objects,
			"ungruppiert": Rest_objects,
			"Flu&szlig;-/Stra&szlig;enkilometer": xKM_objects,
			"Ortsgrenze": cityBorder
		};
		map = new L.Map('map_canvas', {
			center: [47.946, 12.94],
			zoom: 15,
					dragging: false,
			touchZoom: false,
			doubleClickZoom: false,
			scrollWheelZoom: false,
			boxZoom: false,
			zoomControl: false,
					layers: [baseMap, xFH_objects, BMA_objects, RWA_objects, SCx_objects, SST_objects, LT_objects, LwB_objects, OM_objects, SlS_objects, Apf_objects, DfH_objects, Sdf_objects, Fvb_objects, xKM_objects, Rest_objects, cityBorder]
		});
		layersControl = new L.Control.Layers(baseLayers, overlays);
		map.addControl(layersControl);
		L.control.scale({
			metric: true,
			imperial: false
		}).addTo(map);
		var gridOptions = {
			interval: 0.005,
			start: {lat: 47.97, lon: 12.915},
			showshowOriginLabel: true,
			redraw: 'move'
		};
		L.simpleGraticule(gridOptions).addTo(map);
		polyline = L.polyline(measureMarkers, {color: 'blue'}).addTo(map);
		lc = L.control.locate({
			strings: {
				title: "Show me where I am, yo!"
			}
		}).addTo(map);
		if($.urlParam('measurementID')) {
			loadMeasurementAndCenter($.urlParam('measurementID'));
		}
		if($.urlParam('markerID')) {
			var tempMarker = new L.Marker([0, 0], {
				id: $.urlParam('markerID')
			});
			get_Object_JSON(tempMarker);
		}
		if($.urlParam('showLastEinsatz')) {
			showLastEinsatz();
		}
	}
	
	setTimeout(function() {
		$('#liedit').hide();
		$('#liMeasurementTool').hide();
		$('#openDivSaveMeasurement').hide();
		$('#liLastEinsatz').hide();
		if (userLevel) {
			$('#lilogin').hide();
			$('#lilogout').show();
			$('#liMeasurementTool').show();
			if(userLevel>1) {
				$('#openDivSaveMeasurement').show();
				$('#liLastEinsatz').show();
			}
			if(userLevel>5) {
				$('#liedit').show();
			}
		} else {
			$('#lilogin').show();
			$('#lilogout').hide();
		}
		drawMap();
			$('#map_canvas').css({
			'-webkit-filter': 'blur(10px)',
			'-moz-filter': 'blur(10px)',
			'-o-filter': 'blur(10px)',
			'-ms-filter': 'blur(10px)',
			'filter': 'blur(10px)',
			opacity: 1
		});
			}, 100);
			
	$('#startMeasure').on("click", function() {
		if(!measurement_active) {
			$('#measurementTool').show();
			measurement_active = true;
			$('.leaflet-container').css('cursor','crosshair');
			map.on('click', measurementMapClick);
			map.on('contextmenu',measurementMapContextClick);
			$('#startMeasure').text("Messung beenden");
			$('#nav-panel').panel("close");
		} else {
			$('#measurementTool').hide();
			measurement_active = false;
			$('.leaflet-container').css('cursor','');
			map.off('click', measurementMapClick);
			map.off('contextmenu');
			measureMarkers = [];
			polyline.setLatLngs(measureMarkers);
			calculateMeasurementDistance();
			$('#startMeasure').text("Strecke messen");
		}
	});
	
	$('#deleteLastMeasurePoint').on("click",function() {
		measureMarkers.pop();
		polyline.setLatLngs(measureMarkers);
		calculateMeasurementDistance();
	});
	
	$('#deleteMeasurement').on("click", function() {
		measureMarkers = [];
		polyline.setLatLngs(measureMarkers);
		calculateMeasurementDistance();
	});
	
	$('#openDivSaveMeasurement').on("click", function() {
		if($('#divSaveMeasurement').is(":hidden")) {
			$('#divSaveMeasurement').css('display', 'table');
			$('#divSavedMeasurements').hide();
			$('#divSavedMeasurements ul').html("");
		} else {
			$('#divSaveMeasurement').hide();
		}
	});
	
	$('#LastEinsatz').on("click", function() {
		showLastEinsatz();
	});

	$('#closeLastEinsatzInfo').on("click", function() {
		$('#divLastEinsatzInfo').hide();
	});
	
	var showLastEinsatz = function() {
		$.mobile.loading('show');
		$.get("hydrant_info.php", {query: 'getLastEinsatz'}).done(function(data) {
			var jsonData = jQuery.parseJSON(data);
			
			
			var mLastEinsatz = new L.Marker([jsonData.lat, jsonData.lng], {clickable: false}).addTo(map);
			mLastEinsatz.setIcon(new L.NumberedDivIcon({
				iconUrl: 'img/Symbol_Einsatz.gif',
				iconSize: [100, 128],
				iconAnchor: [50, 128]})
			);
			map.panTo([jsonData.lat, jsonData.lng], {animate: false, duration: 0.5});
			map.setZoom(19, {animate: true, duration: 0.5});
			
			$('#LEAlarmierer').text(jsonData.Alarmierer);
			$('#LEAlarmstufe').text(jsonData.Alarmstufe);
			$('#LEEinsatzArt').text(jsonData.EinsatzArt);
			$('#LEAdresse').text(jsonData.Adresse);
			$('#LEFW').text(jsonData.FW);
			$('#LEZusatzinfo').text(jsonData.Zusatzinfo);			
			
			$('#divLastEinsatzInfo').css('display', 'table');
		});
		$('#nav-panel').panel("close");
		$('#liLastEinsatz').hide();
		$.mobile.loading('hide');
	}
	
	$('#openDivSavedMeasurements').on("click", function() {
		if($('#divSavedMeasurements').is(":hidden")) {
			$('#divSavedMeasurements').css('display', 'table');
			$('#divSaveMeasurement').hide();
			
			$.mobile.loading('show');
			$.getJSON("hydrant_info.php", {xhrFields: {withCredentials: true}, query: 'getMeasurements'}).done(function(data) {
				data.forEach(function(value, index) {
					$('#divSavedMeasurements ul').append("<li data-myid=\""+value.id+"\">"+value.name+"<a style=\"margin: 0px; float: right;\" href=\"#\" id=\"forwardMeasurement\" title=\"Messung weiterleiten\" class=\"ui-btn ui-shadow ui-corner-all ui-icon-forward ui-btn-icon-notext\">forward</a></li>");
				});
			});
			$.mobile.loading('hide');
		} else {
			$('#divSavedMeasurements').hide();
			$('#divSavedMeasurements ul').html("");
		}
	});

	$(document).on("click", "#openDivShareQrCode" , function() {		//Muss so gemacht werden, weil das div nachträglich erstellt wird.
	//$('#openDivShareQrCode').on("click", function() {
		POcontent = '<div id="qrCode"></div>';
		$(this).webuiPopover({
			content: POcontent,
			animation:'pop',
			backdrop:true
		});

		const qrcode = new QRCode(document.getElementById('qrCode'), {
		text: 'http://jindo.dev.naver.com/collie',
		width: 128,
		height: 128,
		colorDark : '#000',
		colorLight : '#fff',
		correctLevel : QRCode.CorrectLevel.H
		});
	});
	
	$('#divSavedMeasurements').delegate("li", "click", function(e) {
		loadMeasurementAndCenter($(this).attr("data-myid"));
	});
	
	var loadMeasurementAndCenter = function (id) {
		$.mobile.loading('show');
		$.getJSON("hydrant_info.php", {xhrFields: {withCredentials: true}, query: 'getMeasurementByID', id: id}).done(function(data) {
			if(data) {
				measureMarkers = [];
				data.points.split(')').forEach(function(value, index) {
					if(value.length>6) {
						measureMarkers.push(L.latLng(parseFloat(value.split(', ')[0].split('(')[1]), parseFloat(value.split(', ')[1])));
					}
				});
				
				var bounds = L.latLngBounds(measureMarkers);
				map.fitBounds(bounds, {
					padding: [10,10],
					animate: true
				});
				
				polyline.setLatLngs(measureMarkers);
				calculateMeasurementDistance();
			}
		});
		$.mobile.loading('hide');
	}
	
	$('#divSavedMeasurements').delegate("#forwardMeasurement", "click", function(e) {
		//console.log($(this).parent().attr("data-myid"));
		var POcontent = '<a class="forwardLink" href="mailto:?body=http://ffo.elkaso.at/Hydrantenplan/map_login.php?measurementID=' + $(this).parent().attr("data-myid") + '"><span class="fa-stack"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-envelope-o fa-stack-1x fa-inverse style="font-size:0.7em;""></i></span></a>';
//		POcontent = POcontent + ' | <a class="forwardLink" href="http://ffo.elkaso.at/Hydrantenplan/map_login.php?measurementID=' + $(this).parent().attr("data-myid") + '" target="_blank">blank</a>';
		POcontent = POcontent + ' | <a class="forwardLink" href="#" id="openDivShareQrCode"><span class="fa-stack"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-qrcode fa-stack-1x fa-inverse style="font-size:0.7em;""></i></span></a>';
		if(mobile) {
			POcontent = POcontent +
			' | <a class="forwardLink" href="whatsapp://send?text='+encodeURIComponent('http://ffo.elkaso.at/Hydrantenplan/map_login.php?measurementID=' + $(this).parent().attr("data-myid")) + '" data-action="share/whatsapp/share"><span class="fa-stack"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-whatsapp fa-stack-1x fa-inverse"></i></span></a>';
			POcontent = POcontent +
			' | <a class="forwardLink" href="sms://&body=http://ffo.elkaso.at/Hydrantenplan/map_login.php?measurementID=' + $(this).parent().attr("data-myid") + '"><span class="fa-stack"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-comment fa-stack-1x fa-inverse"></i></span></a>';
		}

		$(this).webuiPopover({
			content: POcontent,
			animation:'pop',
			backdrop:true
		});
	});
	
	$('#saveMeasurementForm').on("submit", function(event) {
		$.mobile.loading('show');
		var center = map.getCenter();
		var zoom = map.getZoom();
		if($('#measurementSaveName').val() && measureMarkers.length>1) {
			$.get("hydrant_info.php", {query: "saveMeasurement", name: $('#measurementSaveName').val(), points: measureMarkers.toString()}).done(function(data) {
				if(data == "1") {
					noty({text: 'gespeichert'});
				} else {
					noty({
						text: 'FEHLER!<br>' + data,
						type: 'error',
						timeout: false
					});
					//console.log(data);
				}
				$.mobile.loading('hide');
			});
		} else {
			noty({
				text: 'Name oder Strecke ungültig',
				type: 'warning',
				timeout: 5000
			});
		}
		event.preventDefault();
		return false;
	});
	
	var calculateMeasurementDistance = function() {
		var distance = 0;
		$.each(measureMarkers, function(index, value) {
			if (index>0) {
				distance = distance + measureMarkers[index-1].distanceTo(value);
			}
		});
		$('#measuredLength').text(Math.round(distance)+" m");
	};
	
	var measurementMapClick = function(e) {
		measureMarkers.push(e.latlng);
		polyline.setLatLngs(measureMarkers);
		calculateMeasurementDistance();
	}
	
	var measurementMapContextClick = function(e) {
		$('#deleteLastMeasurePoint').trigger("click");
	}
	
}); //#fwplan_main

//*******************************//
//         fwplan_setup          //
//*******************************//

$(document).on("pageinit", "#fwplan_setup", function() {
	resizeMap();
	var resizeTimer;
	$(window).resize(function() {
		clearTimeout(resizeTimer);
		resizeTimer = setTimeout(resizeMap, 100);
	});
	$.noty.defaults = {
		layout: 'topCenter',
		theme: 'relax', // or 'relax'
		type: 'success',
		text: '', // can be html or string
		dismissQueue: true, // If you want to use queue feature set this true
		template: '<div class="noty_message"><span class="noty_text"></span><div class="noty_close"></div></div>',
		animation: {
			open: {height: 'toggle'}, // or Animate.css class names like: 'animated bounceInLeft'
			close: {height: 'toggle'}, // or Animate.css class names like: 'animated bounceOutLeft'
			easing: 'swing',
			speed: 200 // opening & closing animation speed
		},
		timeout: 1000, // delay for closing event. Set false for sticky notifications
		force: false, // adds notification to the beginning of queue when set to true
		modal: false,
		maxVisible: 5, // you can set max visible notification for dismissQueue true option,
		killer: false, // for close all notifications before show
		closeWith: ['click'], // ['click', 'button', 'hover', 'backdrop'] // backdrop click will close all notifications
		callback: {
			onShow: function() {},
			afterShow: function() {},
			onClose: function() {},
			afterClose: function() {},
			onCloseClick: function() {},
		},
		buttons: false // an array of buttons
	};
	
	$('#info-panel').on("panelbeforeclose", function() {
		var act_hydr = getObjFromArr(Hydranten_markers,"id",$('#id').val());
		if(!act_hydr.dragging.hasOwnProperty("_enabled") ||	act_hydr.dragging._enabled == false) {
			if($('#Typ').val()=='xKM') {
				resetIcon(act_hydr, $('#Typ').val(), $('#Bezeichnung').val(),$('#cbStichleitung').prop("checked")==true?1:0);
			} else {
				resetIcon(act_hydr, $('#Typ').val(), $('#intID').val(),$('#cbStichleitung').prop("checked")==true?1:0);
			}
			var newLatLng = new L.LatLng(parseFloat($('#Lattitude').val()), parseFloat($('#Longitude').val()));
			act_hydr.setLatLng(newLatLng);
		}
	});
	
	$('#drag_hydrant').on("change", function() {
		var act_hydr = getObjFromArr(Hydranten_markers,"id",$('#id').val());
		if($(this).is(":checked")) {
			act_hydr.dragging.enable();
		} else {
			act_hydr.dragging.disable();
		}
	});
		
	$('#edit-hydr').on("submit", function(event) {
		//console.log(getGridPosition($('#Lattitude').val(), $('#Longitude').val()));
		$('#RasterPosition').val(getGridPosition($('#Lattitude').val(), $('#Longitude').val()));
		$.mobile.loading('show');
		var json_data = "{\"id\":\""+$('#id').val()+"\",\"interne_id\":\""+$('#intID').val()+"\",\"Bezeichnung\":\""+$('#Bezeichnung').val()+"\",\"Adresse\":\""+$('#Adresse').val()+"\",\"Ort\":\""+$('#Ort').val()+"\",\"Lattitude\":\""+$('#Lattitude').val()+"\",\"Longitude\":\""+$('#Longitude').val()+"\",\"Typ\":\""+$('#Typ').val()+"\",\"Beschreibung\":\""+$('#Beschreibung').val()+"\",\"Keywords\":\""+$('#Keywords').val()+"\",\"Bild\":\""+$('#Fotos').val()+"\",\"bestaetigt\":\""+($('#cbBestaetigt').prop("checked")==true?"1":"0")+"\",\"Stichleitung\":\""+($('#cbStichleitung').prop("checked")==true?"1":"0")+"\",\"RasterPosition\":\""+$('#RasterPosition').val()+"\"}";
		//console.log(json_data);
		$.get("hydrant_info.php", {json: json_data, query: "update", attributes: $('#Attribute').val()}).done(function(data) {
			if(data == "1") {
				noty({text: 'gespeichert'});
			} else {
				noty({
					text: 'FEHLER!<br>' + data,
					type: 'error',
					timeout: false // delay for closing event. Set false for sticky notifications
				});
				//console.log(data);
			}
			$.mobile.loading('hide');
		});
		event.preventDefault();
		return false;
	});
	
	var get_Object_JSON = function (marker) {
		//var LatLng = marker.getLatLng();
		$.get("hydrant_info.php", {id: marker.options.id, query: 'JSON'}).done(function(data) {
			var jsonData = jQuery.parseJSON(data);
			$('#id').val(jsonData.id);
			$('#intID').val(jsonData.interne_id);
			$('#Attribute').val(jsonData.Attribute);
			$('#RasterPosition').val(jsonData.RasterPosition);
			$('#Attribute').val(jsonData.Attribute);
			$('#Bezeichnung').val(jsonData.Bezeichnung);
			$('#Beschreibung').val(jsonData.Beschreibung);
			$('#Adresse').val(jsonData.Adresse);
			$('#Ort').val(jsonData.Ort);
			$('#Keywords').val(jsonData.Keywords);
			$('#Fotos').val(jsonData.Bild);
			$('#Lattitude').val(LatLng.lat);
			$('#Longitude').val(LatLng.lng);
			$('#Typ').val(jsonData.Typ).selectmenu('refresh');
			$('#cbBestaetigt').prop('checked', jsonData.bestaetigt == "1" ? true : false).checkboxradio("refresh");
			$('#drag_hydrant').prop('checked', marker.dragging.enabled()).checkboxradio("refresh");
			$('#cbStichleitung').prop('checked', jsonData.Stichleitung == "1" ? true : false).checkboxradio("refresh");
			$('#info-panel').panel('open');
			$.mobile.loading('hide');
		});
	}
	
	function setMarkers(map) {
		var best = 1;
		if($.urlParam('unfertig')) {
			best = 0;
		}
		$.getJSON("hydrant_info.php", {xhrFields: {withCredentials: true}, query: 'JSONall', bestaetigt:best}).done(function(data) {
			$.each(data, function(index, value) {
				var marker = new L.Marker([value.Lattitude, value.Longitude], {
					title: value.Bezeichnung,
					id: value.id
				});
				marker.on('click', function(e) {
					$.mobile.loading('show');
					$('#info-panel').panel('close');
					get_Object_JSON(this);
					resetIcon(this,'X');
				});
				marker.on('dragstart', function() {
					$('#info-panel').panel('close');
				});
				marker.on('dragend', function() {
					get_Object_JSON(this);
				});
				if(value.Typ=='xKM') {
					resetIcon(marker,value.Typ,value.Bezeichnung,value.Stichleitung);
				} else {
					resetIcon(marker,value.Typ,value.interne_id,value.Stichleitung);
				}
				Hydranten_markers.push(marker);
				switch(value.Typ) {
					case 'OFH':
					case 'UFH': marker.addTo(xFH_objects);
						break;
					case 'BMA': marker.addTo(BMA_objects);
						break;
					case 'RWA': marker.addTo(RWA_objects);
						break;
					case 'SCs':
					case 'SCd': marker.addTo(SCx_objects);
						break;
					case 'OM': marker.addTo(OM_objects);
						break;
					case 'SSt': marker.addTo(SST_objects);
						break;
					case 'LT': marker.addTo(LT_objects);
						break;
					case 'LwB': marker.addTo(LwB_objects);
						break;
					case 'SlS': marker.addTo(SlS_objects);
						break;
					case 'Apf': marker.addTo(Apf_objects);
						break;
					case 'Dfh': marker.addTo(DfH_objects);
						break;
					case 'Sdf': marker.addTo(Sdf_objects);
						break;
					case 'Fvb': marker.addTo(Fvb_objects);
						break;
					case 'xKM': marker.addTo(xKM_objects);
						break;
					default: marker.addTo(Rest_objects);
						break;
				}
			});
		});
	}
	
	function drawMap() {
		var baseLayers = {
			"OpenStreetMap": osm,
			"Google maps": gm,
			"Google maps Hybrid": gmsat,
			"Basemap": baseMap,
			"Basemap Satellit": bmSat
		};
		var overlays = {
			"Hydranten": xFH_objects,
			"Saugstellen": SST_objects,
			"L&ouml;schteiche": LT_objects,
			"L&ouml;schwasserbeh&auml;lter": LwB_objects,
			"Brandmeldeanlagen": BMA_objects,
			"Rauch- und W&auml;rmeabzug": RWA_objects,
			"Schranken": SCx_objects,
			"Objektmappen": OM_objects,
			"Schl&uuml;sselsafe": SlS_objects,
			"Absperrpfosten": Apf_objects,
			"Durchfahrtsh&ouml;he": DfH_objects,
			"Schlauchdurchf&uuml;hrung": Sdf_objects,
			"Fahrverbot": Fvb_objects,
			"Flu&szlig;-/Stra&szlig;enkilometer": xKM_objects,
			"ungruppiert": Rest_objects,
			"Ortsgrenze": cityBorder
		};

		map = new L.Map('map_canvas', {
			center: [47.944054480089584, 12.942259311676025],
			zoom: 15,
			layers: [baseMap, xFH_objects, BMA_objects, RWA_objects, SCx_objects, SST_objects, LT_objects, LwB_objects, OM_objects, SlS_objects, Apf_objects, DfH_objects, Sdf_objects, Fvb_objects, Rest_objects, cityBorder]
		});
		layersControl = new L.Control.Layers(baseLayers, overlays);
		map.addControl(layersControl);
		L.control.scale({
			metric: true,
			imperial: false
		}).addTo(map);
		var gridOptions = {
			interval: 0.005,
			start: {lat: 47.97, lon: 12.915},
			showshowOriginLabel: true,
			redraw: 'move'
		};
		Lgrid = new L.simpleGraticule(gridOptions);
		Lgrid.addTo(map);
	}
	
	function getGridPosition(lat,lon) {
		latVal = int2linum(truncateDecimals((Lgrid.options.start.lat - lat) / Lgrid.options.interval));
		lonVal = truncateDecimals((lon - Lgrid.options.start.lon) / Lgrid.options.interval);
		return latVal + lonVal.toString();
	}
	
	truncateDecimals = function (number) {
		return Math[number < 0 ? 'ceil' : 'floor'](number);
	};
	
	setTimeout(function() {
		drawMap();
		setMarkers(map);
	}, 400);
	
	$.fn.serializeObject = function() {
		var o = {};
		var a = this.serializeArray();
		$.each(a, function(idx) {
			if (this.name == "attr" && this.value) {
				o[this.value] = a[idx+1].value;
			}
		});
		return o;
	};
	
	$('#attributesForm').submit(function(event) {
		json_data = JSON.stringify($('#attributesForm').serializeObject());
		$('#Attribute').val(json_data);
		$('#edit-hydr').submit();
		event.preventDefault();
		return false;
	});
	
	$('#open-set-attributes').on('click', function() {
		$.mobile.loading('show');
		$('#attributeRows').empty();
		var jsonData = $('#Attribute').val();
		if (jsonData.length>6) {
			var attributeObj = jQuery.parseJSON(jsonData);
			for (var prop in attributeObj) {
				AddAttributeRow();
				$('#attributes #attr').last().val(prop);
				$('#attributes #value').last().val(attributeObj[prop]);
				//$('#attributeRows').sortable({placeholder: "ui-state-highlight", helper:'clone', placeholder: "ui-state-highlight"});
				Sortable.create(attributeRows, {
					animation: 150,
					draggable: '#attributes'
				});
		}			
		} else {
			AddAttributeRow();
		}
		$('#set-attributes').popup("open");
		$.mobile.loading('hide');
	});
	
	$('#open-set-Fotos').on('click', function() {
		$.mobile.loading('show');
		$('#FotoId').val($('#id').val());
		x = $('#Fotos').val().split(";");
		x = x.length;
		$('#FotoCount').val(x);
		$("#output").html("");
		$('#set-Fotos').popup("open");
		$.mobile.loading('hide');
	});
	
	$('#add_attr').bind('click', function() {
		AddAttributeRow();
	});
	
	$('#addObject').bind('click', function () {
		$('#nav-panel').panel("close");
		map.on('click', function(e) {
			$('#Lattitude').val(e.latlng.lat);
			$('#Longitude').val(e.latlng.lng);
			$('#info-panel').panel('open');
			map.off('click');
		});
	});
	
	$('#zoomLikePrint').on('click', function () {
		map.setZoom(17);
	});
	
//***************Fotos hochladen
	var max_file_size 	= 8388608;
	var progressbox     = $('#progressbox');
	var progressbar     = $('#progressbar');
	var statustxt       = $('#statustxt');
	var completed       = '0%';
	
	var options = {
			//target:			'#output',		// target element(s) to be updated with server response
			beforeSubmit:	beforeSubmit_set_Fotos,	// pre-check callback
			uploadProgress:	OnProgress_set_Fotos,
			success:		afterSuccess_set_Fotos,	// post-submit callback
			resetForm:		true			// reset the form after successful submit
		};
		
	 $('#FotosUploadForm').submit(function() {
			$(this).ajaxSubmit(options);
			return false; 
		});
	
	//when upload progresses	
	function OnProgress_set_Fotos(event, position, total, percentComplete) {
		//Progress bar
		progressbar.width(percentComplete + '%') //update progressbar percent complete
		statustxt.html(percentComplete + '%'); //update status text
//		if(percentComplete>55) {
//			statustxt.css('color','#fff'); //change status text to white after 50%
//		}
	}
	
	//after succesful upload
	function afterSuccess_set_Fotos(responseText, statusText, xhr, $form) {
		$('#submit-btn').prop('disabled', false);
		$('#imageInput').prop('disabled', false);
		progressbox.hide();
		$('#output').html(responseText);
		$('#Fotos').val($('#Fotos').val()+responseText+";");
		$('#FotoCount').val(parseInt($('#FotoCount').val())+1);
		$('#edit-hydr').submit();
	}
	
	//function to check file size before uploading.
	function beforeSubmit_set_Fotos() {
		//check whether browser fully supports all File API
	   if (window.File && window.FileReader && window.FileList && window.Blob)
		{
			if( !$('#imageInput').val()) //check empty input filed
			{
				$("#output").html("Select an image");
				return false
			}
			
			var fsize = $('#imageInput')[0].files[0].size; //get file size
			var ftype = $('#imageInput')[0].files[0].type; // get file type
			
			//allow only valid image file types 
			switch(ftype)
			{
				case 'image/png': case 'image/gif': case 'image/jpeg': case 'image/pjpeg':
					break;
				default:
					$("#output").html("<b>"+ftype+"</b> Unsupported file type!");
					return false
			}
			
			//Allowed file size is less than 1 MB (1048576)
			if(fsize>max_file_size)
			{
				$("#output").html("<b>"+bytesToSize(fsize) +"</b> Too big Image file! <br />Please reduce the size of your photo using an image editor.");
				return false
			}
			
			//Progress bar
			progressbox.show(); //show progressbar
			progressbar.width(completed); //initial value 0% of progressbar
			statustxt.html(completed); //set status text
			statustxt.css('color','#000'); //initial color of status text
			
			//$('#submit-btn').hide(); //hide submit button
			$('#submit-btn').prop('disabled', true);
			$('#imageInput').prop('disabled', true);
			$('#output').html("");
		}
		else
		{
			$('#output').html("Please upgrade your browser, because your current browser lacks some new features we need!");
			return false;
		}
	}
}); //#fwplan_setup

var
	ua = navigator.userAgent,
	browser = /Edge\/\d+/.test(ua) ? 'ed' : /MSIE 9/.test(ua) ? 'ie9' : /MSIE 10/.test(ua) ? 'ie10' : /MSIE 11/.test(ua) ? 'ie11' : /MSIE\s\d/.test(ua) ? 'ie?' : /rv\:11/.test(ua) ? 'ie11' : /Firefox\W\d/.test(ua) ? 'ff' : /Chrom(e|ium)\W\d|CriOS\W\d/.test(ua) ? 'gc' : /\bSafari\W\d/.test(ua) ? 'sa' : /\bOpera\W\d/.test(ua) ? 'op' : /\bOPR\W\d/i.test(ua) ? 'op' : typeof MSPointerEvent !== 'undefined' ? 'ie?' : '',
	os = /Windows NT 10/.test(ua) ? "win10" : /Windows NT 6\.0/.test(ua) ? "winvista" : /Windows NT 6\.1/.test(ua) ? "win7" : /Windows NT 6\.\d/.test(ua) ? "win8" : /Windows NT 5\.1/.test(ua) ? "winxp" : /Windows NT [1-5]\./.test(ua) ? "winnt" : /Mac/.test(ua) ? "mac" : /Linux/.test(ua) ? "linux" : /X11/.test(ua) ? "nix" : "",
	touch = 'ontouchstart' in document.documentElement,
	mobile = /IEMobile|Windows Phone|Lumia/i.test(ua) ? 'w' : /iPhone|iP[oa]d/.test(ua) ? 'i' : /Android/.test(ua) ? 'a' : /BlackBerry|PlayBook|BB10/.test(ua) ? 'b' : /Mobile Safari/.test(ua) ? 's' : /webOS|Mobile|Tablet|Opera Mini|\bCrMo\/|Opera Mobi/i.test(ua) ? 1 : 0,
	tablet = /Tablet|iPad/i.test(ua);
/* https://jsfiddle.net/oriadam/ncb4n882/
LEGEND
browser:
ed = Microsoft Edge
ie9 = Explorer 9
ie10 = Explorer 10
ie11 = Explorer 11
ie? = Explorer 8 and below
ff = Firefox
gc = Google Chrome
sa = Safari
op = Opera
os:
win7
win8
win9
win10
winvista
winxp
winnt
mac
linux
nix
mobile - including tablets:
0 = Not a mobile or tablet device
w = Windows Phone (Nokia Lumia)
i = iOS (iPhone iPad)
a = Android
b = Blackberry
s = Undetected mobile device running Safari
1 = Undetected mobile device
*/