//Pfade zu images anpassen

var GPXMAP;
(function ($) {
	"use strict";

	GPXMAP = {

		options: {

			polylineStrokeColor     : '#0000CC',
			polylineOpacity         : 0.1,
			centerImg				: false,

			enableInfoWindows		: true,
			textMarkerInfo          : '<h2>%title%</h2><p>%text%</p>',
			markerIcons							: {
				"Circle, Green": '/tools/gpx2mapSuedtirol/static/../images/flag-export.png'
			},

			textElevationFormat     : '%d m',
			textElevationPercision  : 2,
			textDistanceFormat      : '%d km',
			textSpeedFormat         : '%d km/h',
			textSlopeFormat         : '%d %',
			textTimeFormat         	: '%h:%m h',
			
			enableElevaChart        : true,
			enableSpeedChart        : true,
			enableSlopeChart        : true,

			enableMapTypes			: ['osmmapnik', 'osmarender', 'cyclekarte', 'wanderwegekarte', 'wanderwegesat'],

			grid					: {
				borderColor: '#ccc',
				labelMargin: 5            
			},

			chartWidth              : '100%',
			chartHeight             : '120',
			chartColor				: 'blue',
			chartFill				: false,
			chartCrossColor			: 'blue',
			chartBorder				: '5px',
			chartBackground			: '#ddd',
            chartMargin				: '10px auto',
            chartPadding			: '0px auto',

			textElevationCSS        : {
				height    : '20px',
				width     : '100%',
                lineHeight: '20px',
				background: '#ccc',
				color     : 'black',
				position  : 'static',
				fontSize  : 'small',
				textAlign : 'center',
                margin		:'10px auto'
			},

			mapDivCSS               : {
				position: 'relative',
				width   : '100%',
				height  : 500,
				border  : '0px solid black',
				margin  : '0px auto'
			}
		},

		map               	: null,
		path              	: [],
		bounds            	: null,
		markers           	: {},
		polyline          	: null,
		mapTypes          	: {},
		iw                	: null,
		chart             	: null,
		elSvc             	: null,
		elevations        	: null,
		divs              	: {},
		gpxPoints         	: [],
		mapChangeTimer    	: null,
		selectorMap       	: '#map',
		selectorChart     	: '#elevation-chart',
		selectorChartSpeed	: '#speed-chart',
		selectorChartSlope	: '#slope-chart',

		isResizing			: false,
		oldCenter			: false,
		isMapFull			: false,
		old               	: {},

		init: function (options) {

			this.options = $.extend(true, this.options, options);

			this.divs.map = $(this.selectorMap);
			this.divs.chart = $(this.selectorChart);
			this.divs.chartSpeed = $(this.selectorChartSpeed);
			this.divs.chartSlope = $(this.selectorChartSlope);
			
			this.divs.map.css(this.options.mapDivCSS);

			$.getScript('https://maps.google.com/maps/api/js?key=AIzaSyD8UIDNBASWCdR_yBUca7bJtEwM1bXQEbQ&callback=GPXMAP.map_init');
		},
		
		map_init: function () {
			// Initiate Maps
			var pathOptions, mapOptions, mapStyles, i, ii;
			
			// Hide Business Layer
			mapStyles = [
				{
			    featureType: "poi.business",
			    elementType: "labels",
			    stylers: [
			      { visibility: "off" }
			    ]
			  }
			];

			mapOptions = {
				zoom: 13,
				center: new google.maps.LatLng(gpxPoints[0][0], gpxPoints[0][1]),
				styles: mapStyles,
				mapTypeControl: true,
				mapTypeControlOptions: {
					style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
					mapTypeIds: $.merge([google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.TERRAIN], this.options.enableMapTypes)
				},
				mapTypeId: google.maps.MapTypeId.ROADMAP
                //mapTypeId: google.maps.MapTypeId.SATELLITE
                //mapTypeId: google.maps.MapTypeId.HYBRID
                //mapTypeId: google.maps.MapTypeId.HYBRID
                //mapTypeId: 'osmmapnik'
                //mapTypeId: 'osmarender'
                //mapTypeId: 'cyclekarte'
                //mapTypeId: 'wanderwegesat'
                //mapTypeId: 'wanderwegekarte'
                
			};
			

            
			this.map = new google.maps.Map(this.divs.map.get(0), mapOptions);
			
			this.elSvc = new google.maps.ElevationService();
			this.bounds = new google.maps.LatLngBounds();
			this.iw = new google.maps.InfoWindow();

			// Generate extra map types
			this.newMapTypes();
			var it;
			for (it in this.mapTypes) {
				if (this.mapTypes.hasOwnProperty(it)) {
					this.map.mapTypes.set(it, this.mapTypes[it]);
				}
			}

			// Add fullscreen control
			this.mapFullscreen();

			// Update things on map drag/zoom
			google.maps.event.addListener(this.map, 'dragend', this.mapChangeCallback);
			google.maps.event.addListener(this.map, 'zoom_changed', this.mapChangeCallback);
			
			// Draw polyline
			$.each(gpxPoints, function (i, el) {
				var LatLng = new google.maps.LatLng(el[0], el[1]);
				GPXMAP.path.push(LatLng);
				GPXMAP.bounds.extend(LatLng);
			});

			// Draw path
			pathOptions = {
					path       : this.path,
					strokeColor: this.options.polylineStrokeColor,
					opacity    : this.options.polylineOpacity,
					map        : this.map
				};
			GPXMAP.polyline = new google.maps.Polyline(pathOptions);
			google.maps.event.addListener(GPXMAP.polyline, 'click', this.polyClick);

			// Draw markers
			for (i in gpxMarkers) {
				if (gpxMarkers.hasOwnProperty(i)) {
					// Get icon
					if ('undefined' !== typeof(gpxMarkers[i][4]) && '' !== gpxMarkers[i][4]) {
						var markerIcon = '';
						for (ii in GPXMAP.options.markerIcons)
							if(GPXMAP.options.markerIcons.hasOwnProperty(ii)) {
								if (new RegExp(ii).test(gpxMarkers[i][4])) {
									markerIcon = GPXMAP.options.markerIcons[ii];
								}
							}
					}
					this.markers[i] = new google.maps.Marker({
						position: new google.maps.LatLng(gpxMarkers[i][0], gpxMarkers[i][1]),
						title   : gpxMarkers[i][2],
						desc    : GPXMAP.options.textMarkerInfo.replace(/%title%/, gpxMarkers[i][2]).replace(/%text%/, gpxMarkers[i][3]),
						map     : this.map,
						icon    : markerIcon
					});
					if(GPXMAP.options.enableInfoWindows) {
						google.maps.event.addListener(this.markers[i], 'click', GPXMAP.iwShow);
					}
				}
			}

			// Center map with regard to points on path
			this.map.fitBounds(this.bounds);

			// Create Elevation chart;
			if(GPXMAP.options.enableElevaChart)
				this.flotElevation();
			
			// Create Speed chart;
			if(GPXMAP.options.enableSpeedChart)
				this.flotSpeed();

			// Create Slope chart;
			if(GPXMAP.options.enableSlopeChart)
				this.flotSlope();

			// Center cross
			GPXMAP.divs.center = $('<div id="map-center"/>').css({
				height: '12px',
				width: '12px',
				background: 'url(' + (this.options.centerImg || '/tools/gpx2mapSuedtirol/static/../images/center.gif') + ') no-repeat',
				position: 'absolute',
				display: 'none'
			})
				.insertAfter(this.divs.map)
				.bind('reload', function () {
					GPXMAP.divs.center.css({
						top: function () {
							return GPXMAP.divs.map.get(0).offsetTop + GPXMAP.divs.map.get(0).offsetHeight / 2 - 10;
						},
						left: function () {
							return GPXMAP.divs.map.get(0).offsetLeft + GPXMAP.divs.map.get(0).offsetWidth / 2 - 6;
						},
						display: 'block'
					});
				});

			// Tweak center cross on resize
			$(window).bind('resize ready load domready', function () {
				GPXMAP.divs.center.trigger('reload');
			});

			if($.browser.msie)
				setTimeout('GPXMAP.divs.center.trigger("reload")', 1000);

			// Elevation value placeholder div
			this.divs.Elev = $('<div id="map-elevation"/>')
				.css(this.options.textElevationCSS)
				.insertAfter(GPXMAP.divs.map);
			/*
            this.divs.Elev
				.css({
					top: function () {
						return GPXMAP.divs.map.get(0).offsetTop + GPXMAP.divs.map.get(0).offsetHeight - GPXMAP.divs.Elev.get(0).offsetHeight / 2;
					},
					left: function () {
						return GPXMAP.divs.map.get(0).offsetLeft + GPXMAP.divs.map.get(0).offsetWidth / 2 - GPXMAP.divs.Elev.get(0).offsetWidth / 2;
					}
				});*/
		},

		flotElevation: function () {
			var i, data = [];
			for (i = 0; i < gpxPoints.length; i++) {
				data.push([gpxPoints[i][3].toFixed(2), gpxPoints[i][2]]);
			}

			this.chart = this.createChart( this.divs.chart, 'chart', data );
		},

		flotSpeed: function () {
			var i, data = [];
			for (i = 0; i < gpxPoints.length; i++) {
				data.push([gpxPoints[i][3].toFixed(2), gpxPoints[i][5]]);
			}

			this.chartSpeed = this.createChart(this.divs.chartSpeed, 'chartSpeed', data);
		},

		flotSlope: function () {
			var i, data = [];
			for (i = 0; i < gpxPoints.length; i++) {
				data.push([gpxPoints[i][3].toFixed(2), gpxPoints[i][6]]);
			}

			this.chartSlope = this.createChart(this.divs.chartSlope, 'chartSlope', data);
		},

		createChart: function(div, chart, data) {
			div.css({
				height: this.options.chartHeight,
				width: this.options.chartWidth,
				border: this.options.chartBorder,
				background: this.options.chartBackground,
                margin: this.options.chartMargin,
                padding: this.options.chartPadding

			});
			
			div.on('plothover', null, ['chart'], function (event, pos, item, chart) {
				GPXMAP.plotHover(event, pos, item, event.data[0]);
			});

			var yAxisFormat = '';
			if('undefined' !== typeof(this.divs.chart) && div === this.divs.chart)
				yAxisFormat = 'textElevationFormat';
			else if('undefined' !== typeof(this.divs.chartSpeed) && div === this.divs.chartSpeed)
				yAxisFormat = 'textSpeedFormat';
			else if('undefined' !== typeof(this.divs.chartSlope) && div === this.divs.chartSlope)
				yAxisFormat = 'textSlopeFormat';


			return $.plot(div, [
					{
						data: data,
						color: this.options.chartColor,
						lines: {
							show: true,
							fill: this.options.chartFill
						}
					}
				],
				{
					crosshair: {
						mode: "xy",
						color: this.options.chartCrossColor
					},
					grid: $.extend({
						hoverable: true,
						autoHighlight: true,
						clickable: true
					}, this.options.grid),
					xaxis: {
						tickFormatter: function (v){ return GPXMAP.options.textDistanceFormat.replace(/%d/, v); }
					}, 
					yaxis: {
						tickFormat: yAxisFormat,
						tickFormatter: function (v){ return GPXMAP.options[this.tickFormat].replace(/%d/, (v<1&&v!=0?v.toFixed(2):v)); }
					}
				}
			);
		},

		plotHover: function(event, pos, item, chart) {
			var x = pos.x.toFixed(2),
				y = pos.y.toFixed(2),
				pointIdx = null,
				i;

			for(i=0; i<gpxPoints.length; i++) {
				if(gpxPoints[i][3] >= pos.x) {
					pointIdx = i;
					break;
				}
			}
			if(!pointIdx && pointIdx !== 0)
				return;

			GPXMAP.map.setCenter(new google.maps.LatLng( gpxPoints[pointIdx][0], gpxPoints[pointIdx][1] ));
			
			GPXMAP.pointChanged(i);
		},

		plotsHighlight: function(i) {
			if(this.options.enableElevaChart)
				this.plotHighlight(i, 'chart');
			if(this.options.enableSpeedChart)
				this.plotHighlight(i, 'chartSpeed');
			if(this.options.enableSlopeChart)
				this.plotHighlight(i, 'chartSlope');
		},

		plotHighlight: function(i, chart) {
			GPXMAP[chart].unhighlight();
			GPXMAP[chart].highlight( 0, i);
		},

		pointChanged: function(i) {
			var t = this.options.textDistanceFormat.replace(/%d/, gpxPoints[i][3]);
			if(this.options.enableElevaChart)
				t = t + ' | ' + this.options.textElevationFormat.replace(/%d/, gpxPoints[i][2].toFixed(this.options.textElevationPercision) );
			if(this.options.enableSpeedChart)
				t = t + ' | ' + this.options.textSpeedFormat.replace(/%d/, gpxPoints[i][5]);
			if(this.options.enableSlopeChart)
				t = t + ' | ' + this.options.textSlopeFormat.replace(/%d/, gpxPoints[i][6]);
			if(i > 0) {
				var d = gpxPoints[i][4] - gpxPoints[0][4];
				var h = Math.floor(d/60/60);
				var m = Math.floor((d - h*60*60) / 60);
				t = t + ' | ' + this.options.textTimeFormat
					.replace(/%h/, h)
					.replace(/%m/, m);
			}
			this.divs.Elev.text( t );

			this.plotsHighlight(i);
		},

		elevationCallback: function (a) {
			var i = a.row;
			this.map.setCenter(this.path[i]);
			elevationChanged(gpxPoints[i][2]);
		},

		polyClick: function (a) {
			GPXMAP.map.setCenter(a.latLng);
			GPXMAP.mapChangeCallback();
		},

		findPointFromLatLng: function (latLng) {
			var result = null;
			var fxd = 3;
			$.each(gpxPoints, function (i, el){
				if((el[0].toFixed(fxd) === latLng.lat().toFixed(fxd)) && (el[1].toFixed(fxd) === latLng.lng().toFixed(fxd)))
					result = i;
			});
			return result;
		},

		mapChangeCallback: function () {
			GPXMAP.mapChangeTimer = setTimeout(GPXMAP.mapChange, 100);
		},

		mapChange: function () {
			var latLng = GPXMAP.map.getCenter();
			var point = GPXMAP.findPointFromLatLng(latLng);
			if(point) {
				GPXMAP.pointChanged(point);
			}
			else {
				GPXMAP.elSvc.getElevationForLocations({
					locations: [latLng]
				}, function (results, status){
					if(status === google.maps.ElevationStatus.OK)
						GPXMAP.elevationChanged( results[0].elevation, '' );
				});
			}
		},

		elevationChanged: function (elevation, distance) {
			var text = this.options.textElevationFormat.replace(/%d/, elevation.toFixed(this.options.textElevationPercision) );
			if(distance)
				text = text + ' | ' + this.options.textDistanceFormat.replace(/%d/, distance);
			this.divs.Elev.text( text );
		},

		newMapTypes: function () {
		
			this.mapTypes.osmmapnik = new google.maps.ImageMapType({
					getTileUrl: function(ll, z) {
						var X = ll.x % (1 << z);
						return "http://tile.openstreetmap.org/" + z + "/" + X + "/" + ll.y + ".png";
					},
					tileSize: new google.maps.Size(256, 256),
					isPng: true,
					maxZoom: 18,
					name: "OSM Mapnik",
					alt: "Open Streetmap Mapnik"
			});
			this.mapTypes.osmarender = new google.maps.ImageMapType({
			  getTileUrl: function(ll, z) {
				var X = ll.x % (1 << z);
				return "http://tah.openstreetmap.org/Tiles/tile/" + z + "/" + X + "/" + ll.y + ".png";
			  },
			  tileSize: new google.maps.Size(256, 256),
			  isPng: true,
			  maxZoom: 18,
			  name: "OSM T&H",
			  alt: "Open Streetmap Osmarender"
			});   
			this.mapTypes.cyclekarte = new google.maps.ImageMapType({
			  getTileUrl: function(ll, z) {
				var X = ll.x % (1 << z);
				return "http://c.tile.opencyclemap.org/cycle/" + z + "/" + X + "/" + ll.y + ".png";
			  },
			  tileSize: new google.maps.Size(256, 256),
			  isPng: true,
			  maxZoom: 18,
			  name: "OSM Cycle",
			  alt: "Open Streetmap Cycle"
			});
			
			this.mapTypes.wanderwegekarte = new google.maps.ImageMapType({
			  getTileUrl: function(ll, z) {
				var X = ll.x % (1 << z);
                //P_BZ_OF_2008_EPSG3857 		Luftbild 2008 - Ortofotocarta 2008 (EPSG 3857)
           		//P_BZ_BASEMAP_HYBRID 			Basemap mit Luftbild, Straßen und Ortsbezeichnungen
                //P_BZ_BASEMAP_BLANK 			Basemap ohne Straßen und Ortsbezeichnungen
                //P_BZ_BASEMAP_TOPO 			Basemap mit Straßen und Ortsbezeichnungen
                //P_BZ_BASEMAP_HYBRID_EPSG3857 	Basemap mit Luftbild, Straßen und Ortsbezeichnungen
                //P_BZ_OF_2014_EPSG3857 		Luftbild 2014 (EPSG 3857)
                //P_BZ_OF_2014 					Luftbild 2014
                //P_BZ_BASEMAP_DARK 			Basemap dunkelgrau
                //P_BZ_OF_2014_2015 			Luftbild 2014/2015
                //BASEMAP_5000_2007 			Vektorgrundkarte 2007 (1:5000)
                //P_BZ_OF_2008 					Luftbild 2008
                //BASEMAP_10000_2007 			Vektorgrundkarte 2007 (1:10000)
                //P_BZ_OF_2011 					Luftbild 2011
                //P_BZ_OF_2011_EPSG3857 		Luftbild 2011
                //GlobalCRS84Scale
                //EPSG:4326
                //EPSG:25832
                //GoogleCRS84Quad
                //EPSG:900913
				
                var mapLayer="P_BZ_BASEMAP_TOPO"; //Basiskarte mit Straßen, Wanderwegen, Landnutzung, Geländeschummerung, Ortsnamen 
  
				
				return "http://geoservices.buergernetz.bz.it/geoserver/gwc/service/wmts/?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER="+mapLayer+"&STYLE=default&FORMAT=image/jpeg&TILEMATRIXSET=GoogleMapsCompatible&TILEMATRIX=GoogleMapsCompatible:"+z+"&TileRow="+ll.y+"&TileCol="+X;
			  },
			  tileSize: new google.maps.Size(256, 256),
			  isPng: true,
			  maxZoom: 20,
			  name: "Wandern K",
			  alt: "Wanderwege Südtirol Karte"
			});	


			this.mapTypes.wanderwegesat = new google.maps.ImageMapType({
			  getTileUrl: function(ll, z) {
				var X = ll.x % (1 << z);
				var mapLayer="P_BZ_BASEMAP_HYBRID_EPSG3857";
				return "http://geoservices.buergernetz.bz.it/geoserver/gwc/service/wmts/?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER="+mapLayer+"&STYLE=default&FORMAT=image/jpeg&TILEMATRIXSET=GoogleMapsCompatible&TILEMATRIX=GoogleMapsCompatible:"+z+"&TileRow="+ll.y+"&TileCol="+X;
			  },
			  tileSize: new google.maps.Size(256, 256),
			  isPng: true,
			  maxZoom: 20,
			  name: "Wandern S",
			  alt: "Wanderwege Südtirol Satellit"
			});				
			
			
		},

		iwShow: function () {
			GPXMAP.iw.setContent(this.desc);
			GPXMAP.iw.open(this.map,this);
		},

		
		
		
		
		
		
		
		
		
		
		doFullscreen: function() {
			//console.log("doFullscreen");
			var oBody = $('body');
			var oHTML = $('html');
			var oMap  = $('#map');
			var oElev  = $('#map-elevation');
			var oEChart  = $('#elevation-chart');


			var xc = Math.round($(window).width()/2);
			var yc = Math.round($(window).height()/2);			
			
			if(!this.isMapFull) {	// enter Fullscreen
				//console.log("doFullscreen enter");
				this.old.val = oMap.attr("style");
				this.old.body = oBody.attr("style");
				this.old.w = oMap.width();
				this.old.h = oMap.height();
				this.old.p = oMap.position();

				this.oldCenter = this.map.getCenter();
				
				this.old.scrolpos = oBody.scrollTop();
				this.old.scrolpos2 = oHTML.scrollTop();
				// if(!$.browser.mozilla) {
					oBody.css("overflow", "hidden");
					oHTML.css("overflow", "hidden"); //ie7 fix
				// }
				oBody.scrollTop(0);
				oHTML.scrollTop(0);

				oMap.css({ 
					zIndex: 1000,
					position: 'fixed',
					top:'0px',
					left:'0px',
					width: '100%',
					height: '100%',
                    margin:'0px',
                    padding:'0px',
                    border:'0px'
				});
                
                oMap.appendTo("body");
				
                
                /* Individuell laut Layout anpassen */
                
   /*             $('#inhalt').css({
                	display:'none'
                });*/
                
				$('#buttonInhalt').css({
                	display:'none'
                });
				$('#controls-wrapper').css({
                	display:'none'
                });
				$('#kopf').css({
                	display:'none'
                });       
                
                $('#pauseplay i').removeClass("fa-pause");
                $('#pauseplay i').addClass("fa-play");		
                $('#pauseplay').addClass("open");
                $('#pauseplay').removeClass("close");                                         
                
                /* Ende Anpassungen */
				
				google.maps.event.trigger(GPXMAP.map, 'resize');
				GPXMAP.map.panTo( GPXMAP.oldCenter );
				GPXMAP.isMapFull = !GPXMAP.isMapFull;	


			}
			else {	// exit Fullscreen
				//console.log("doFullscreen exit");

				oMap.css({
						position: 'static', 
						top: Math.round(this.old.p.top) + 'px',
						left: Math.round(this.old.p.left) + 'px',
						width: this.old.w + 'px', 
						height: this.old.h + 'px'
				});
                
                oMap.prependTo("#gpxMap");
                
                /* Individuell laut Layout anpassen */
                
				$('#buttonInhalt').css({
                	display:'block'
                });
				$('#controls-wrapper').css({
                	display:'block'
                });
				$('#kopf').css({
                	display:'block'
                });       
                
		$('#pauseplay i').addClass("fa-pause");
		$('#pauseplay i').removeClass("fa-play");	
		$('#pauseplay').addClass("close");
		$('#pauseplay').removeClass("open");	                                      
                
                /* Ende Anpassungen */
                                
				oBody.attr("style", GPXMAP.old.body);
				// if(!$.browser.mozilla) {
				oBody.css("overflow", "auto");
				oHTML.css("overflow", "auto"); //ie7 fix
				// }
				oMap.attr("style", GPXMAP.old.val);
				oBody.scrollTop(GPXMAP.old.scrolpos);
				oHTML.scrollTop(GPXMAP.old.scrolpos2);
				google.maps.event.trigger(GPXMAP.map, 'resize');
				GPXMAP.map.panTo( GPXMAP.oldCenter );
				GPXMAP.isMapFull = !GPXMAP.isMapFull;
		
                                                        
			}
			
		},

		mapFullscreen: function() {
			//console.log("mapFullscreen");
			var controlDiv = document.createElement('DIV');
			controlDiv.index = 0;
			this.map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controlDiv);




			this.divSize = $('<div/>')
				.attr({
					 'title': 'resize map',
					 'class': 'btnMap'
				})
				.css({
					background: 'transparent url(/tools/gpx2mapSuedtirol/static/../images/resize.png) no-repeat center center',
					marginTop: 4,
					marginRight: 10,
					padding: 2,
					width: '16px',
					height: '16px',
					cursor: 'pointer'
				});
			this.divSize.appendTo(controlDiv);

			google.maps.event.addDomListener(this.divSize.get(0), 'click', function() {
		    GPXMAP.doFullscreen();
		  });
		}
		


	};



    




}(jQuery));