<script>
(function() {

	function appendEvent(e){
		//console.log("Zoomstart event fired. " + e);
		$('.events').append("<p>" + e.type + ' fired. </p>');
	}

	/*const defaults = {
		zoomControl: true,
		zoom: 7
	}*/
	 var options = { center: [40.6101, -110.3421],
	 				 zoom: 6,
	 				 maxZoom:16,
	 				 minZoom:0,
	 				 zoomControl: true,
	 				 mapStyle:"default"};
	 var gssMap = new gssmaps.GSSMap('7fNWCXhqQ_OSyB4fd8C6539PYQ1G8YjdsOCoTtio', 'map', options, appendEvent);

	 addMobileCongress();
	 addPolyline();
	 addPolylineWithOptions();

	 gssMap.on('contextmenu', function(e){
	 	console.log('Right click event fired...' + e.latlng);
	 	addMarker(e.latlng.lat, e.latlng.lng, "Marker Co-ordinates: [" + e.latlng.lat +", " + e.latlng.lng +"]");
	 });

	 var gssMarker1 = addMarker(47.6101, -122.3421);
	 var gssMarker2 = addMarker(48.5101, -124.3421, "Marker Co-ordinates: [48.6101, -124.3421]");
	 var gssMarker3 = addMarker(48.7101, -124.3421, "Marker Co-ordinates: [48.6101, -124.3421]");
	 var gssMarker4 = addCustomMarker(48.9101, -124.3421, "It's a custom marker.");
	 var gssMarker5 = addCustomMarkerWithSmallerSizeThanActual(49.0101, -124.3421, "It's a custom marker with image size smaller than actual size.");


	 gssMap.on('zoomstart', appendEvent);
	 gssMap.on('zoomend', appendEvent);
	 gssMap.on('layeradd', appendEvent);
	 gssMap.on('layerremove', appendEvent);

	$('#min_zoom').html(gssMap.getMinZoom());

	$('#max_zoom').html(gssMap.getMaxZoom());

	$('#current_zoom').html(gssMap.getZoom());

	var center = gssMap.getCenter();
	$('#map_center').html("[" + center.lat + ", " + center.lng + "]");

	$('#zoom-in').on('click', function(){
		gssMap.zoomIn();
	});

	$('#zoom-out').on('click', function(){
		gssMap.zoomOut();
	});

	$('#set-zoom').on('click', function(){
		var zoomLevel = prompt("Enter zoom level", 12);
		gssMap.setZoom(zoomLevel);
	});

	$('#pan-to').on('click', function(){
		var lat = prompt("Enter latitude", 33.666372);
		var lng = prompt("Enter longitude", -117.685852);
		var gssLatLng = new gssmaps.GSSLatLng(lat, lng);
		gssMap.panTo(gssLatLng);
	});

	$('#set-max-zoom').on('click', function(){
		var maxZoom = prompt("Enter the max zoom to be set for map", "10");
		alert("Current zoom is " + gssMap.getZoom() + " and Max zoom will set to " + maxZoom);
		gssMap.setMaxZoom(maxZoom);
	});

	$('#set-min-zoom').on('click', function(){
		var minZoom = prompt("Enter the min zoom to be set for map", "8");
		alert("Current zoom is " + gssMap.getZoom() + " and Min zoom will set to " + minZoom);
		gssMap.setMinZoom(minZoom);
	});

	$('#remove-marker-1').on('click', function(){
		removeMarker(gssMarker1);
	});

	$('#remove-marker-2').on('click', function(){
		removeMarker(gssMarker2);
	});

	$('#remove-all-markers').on('click', function(){
		gssMap.removeAllMarkers();
	});

	$('#set-view').on('click', function(){
		var lat = prompt("Enter latitude", 40.6079107);
		var lng = prompt("Enter longitude", -73.9453283);
		var zoomLevel = prompt("Enter zoom level", 10);
		var gssLatLng = new gssmaps.GSSLatLng(lat, lng);
		alert('This is very similar to panTo, except that panTo doesn\'t have zoom option.' +
			' Setting view to [' + lat + ', ' + lng + ' ] with zoom ' + zoomLevel);
		gssMap.setView(gssLatLng, zoomLevel, false);
	});

	$('#remove').on('click', function(){
		alert('Removing the map. This will also remove all the events on the map.');
		gssMap.remove();
	});

	$('#showImage').on('click', function(){
		var gssLatLng = new gssmaps.GSSLatLng(41.35559010084337, 2.1318747909277085);
		gssMap.setView(gssLatLng, 17);
	});

	function showPosition(position){
		console.log(position);
	}

	function addMarker(lat, lng, popupContent){
		var gssLatLng = new gssmaps.GSSLatLng(lat, lng);
		var gssMarker = new gssmaps.GSSMarker(gssLatLng);
		return gssMap.addMarker(gssMarker, popupContent);
	}

	function addCustomMarker(lat, lng, popupContent){
		var gssLatLng = new gssmaps.GSSLatLng(lat, lng);
		var gssIcon = new gssmaps.GSSIcon("assets/bus-marker.png", [32, 32], [16, 32]);
		var options = {"icon" : gssIcon};
		var gssMarker = new gssmaps.GSSMarker(gssLatLng, options);
		return gssMap.addMarker(gssMarker, popupContent);
	}

	function addCustomMarkerWithSmallerSizeThanActual(lat, lng, popupContent){
		var gssLatLng = new gssmaps.GSSLatLng(lat, lng);
		var gssIcon = new gssmaps.GSSIcon("assets/bus-marker.png", [22, 22], [10, 22]);
		var options = {"icon" : gssIcon};
		var gssMarker = new gssmaps.GSSMarker(gssLatLng, options);
		return gssMap.addMarker(gssMarker, popupContent);
	}

	function removeMarker(gssMarker){
		gssMap.removeMarker(gssMarker);
	}

	function addMobileCongress(){
		bound1 = new gssmaps.GSSLatLng(41.3522, 2.1277);
		bound2 = new gssmaps.GSSLatLng(41.3522, 2.13811);
		bound3 = new gssmaps.GSSLatLng(41.35823, 2.13811);
		bound4 = new gssmaps.GSSLatLng(41.35823,  2.1277);

		//addMarker(41.3522, 2.1277, 'Pin1');
		//addMarker(41.3522, 2.13811, 'Pin2');
		//addMarker(41.35823, 2.13811, 'Pin3');
		//addMarker(41.35823,  2.1277, 'Pin4');

		bounds = new Array();
		bounds.push(bound1);
		bounds.push(bound3);

	    gssMap.addImage('assets/MWC 2019-1st.png', bounds);
	}

	function addImage(){
		bound1 = new gssmaps.GSSLatLng(33.666,-117.685);
		bound2 = new gssmaps.GSSLatLng(33.666773,-117.685426);
		bound3 = new gssmaps.GSSLatLng(33.666966,-117.685689);
		bound4 = new gssmaps.GSSLatLng(33.666571,-117.686125);

		var marker1 = addMarker(33.666372,-117.685852, 'Pin1');
		addMarker(33.666773,-117.685426, 'Pin2');
		addMarker(33.666966,-117.685689, 'Pin3');
		addMarker(33.666571,-117.686125, 'Pin4');

		bounds = new Array();
		bounds.push(bound4);
		bounds.push(bound3);

		gssMap.addImage("assets/ComtechFloorPlan32.png", bounds);
	}

	function addPolyline(){
		var point1 = new gssmaps.GSSLatLng(47.6101, -122.3421);
		var point2 = new gssmaps.GSSLatLng(48.5101, -124.3421);

		var gssLatLngs = new Array();
		gssLatLngs.push(point1);
		gssLatLngs.push(point2);
		var gssPolyline = new gssmaps.GSSPolyline(gssLatLngs);
		gssMap.addPolyline(gssPolyline);
	}

	function addPolylineWithOptions(){
		var point1 = new gssmaps.GSSLatLng(47.6101, -122.3421);
		var point2 = new gssmaps.GSSLatLng(48.7101, -124.3421);

		var gssLatLngs = new Array();
		gssLatLngs.push(point1);
		gssLatLngs.push(point2);

		var lineOptions = new gssmaps.GSSLineOptions('red', 1);
		var gssPolyline = new gssmaps.GSSPolyline(gssLatLngs, lineOptions);
		gssMap.addPolyline(gssPolyline);
	}

}());

</script>