{% extends 'base.html' %}
{% load i18n %}
{% load staticfiles %}
{% block currentpagetitle %}{% trans "Closest Access Point" %}{% endblock %}

{% block extrajs %}
    <script type="text/javascript" src="//maps.google.com/maps/api/js?v=3.exp&sensor=true&language=en&libraries=places"></script>
<script type="text/javascript">
	var lat = "{{MAP_CENTER.0}}";
	var lat = parseFloat(lat.replace(",","."));
	var lng = "{{MAP_CENTER.1}}";
	var lng = parseFloat(lng.replace(",","."));
	var zoomLevel = 6;
	var latlng = new google.maps.LatLng(lat, lng);
	var map = '';
	var bounds = '';
	var image = '';
	var marker = '';
	var eduMarker = false;
	var infoWindow;
	var getOnce = false;
	var geocoder = null;
	var infoWindow;
	var directionDisplay;
    var directionsService = new google.maps.DirectionsService();

	var styles = [{
		url : '{% static 'img/edugroup.png' %}',
		height : 54,
		width : 63,
		textColor : '#ffffff',
		textSize : 11
	}, {
		url : '{% static 'img/edugroup.png' %}',
		height : 54,
		width : 63,
		textColor : '#ffffff',
		textSize : 11
	}, {
		url : '{% static 'img/edugroup.png' %}',
		height : 54,
		width : 63,
		textColor : '#ffffff',
		textSize : 11
	}];

	function initialize() {
		image = new google.maps.MarkerImage('{% static 'img/edupin.png' %}',
			new google.maps.Size(29, 40),
			new google.maps.Point(0, 0),
			new google.maps.Point(14, 40)
		);
		var styleArray = [{
			featureType : "all",
			stylers : [{
				saturation : -60
			}, {
				gamma : 1.00
			}]
		}, {
			featureType : "poi.business",
			elementType : "labels",
			stylers : [{
				visibility : "off"
			}]
		}, {
			"featureType" : "transit.line",
			"elementType" : "geometry",
			"stylers" : [{
				"visibility" : "off"
			}]
		}, {
			"featureType" : "poi",
			"elementType" : "all",
			"stylers" : [{
				"visibility" : "off"
			}]
		}, {
			'featureType' : "administrative.country",
			'elementType' : "labels",
			'stylers' : [{
				'visibility' : "off"
			}]
		}];
		var mapOptions = {
			center : latlng,
			zoom : zoomLevel,
			mapTypeId : google.maps.MapTypeId.ROADMAP,
			styles : styleArray,
			mapTypeId : google.maps.MapTypeId.ROADMAP,
			mapTypeControlOptions : {
				style : google.maps.MapTypeControlStyle.DEFAULT
			},
			navigationControl : true,
			mapTypeControl : false,
		};
		map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

		var input = document.getElementById('searchTextField');
	    var autocomplete = new google.maps.places.Autocomplete(input);

	    autocomplete.bindTo('bounds', map);

		infoWindow = new google.maps.InfoWindow();
		bounds = new google.maps.LatLngBounds();
		directionsDisplay = new google.maps.DirectionsRenderer();
		geocoder = new google.maps.Geocoder();
		directionsDisplay.setMap(map);

		if (getOnce == false) {
				marker = new google.maps.Marker({
					position : latlng,
					draggable : true,
					animation : google.maps.Animation.DROP,

				});
				marker.setMap(map);
			}
		google.maps.event.addListener(map, 'idle', function() {
			if(navigator.geolocation && getOnce == false) {
				navigator.geolocation.getCurrentPosition(getPosition);
			}

		});
		google.maps.event.addListener(map, 'click', function(event) {
			moveMarker(event.latLng);
		});
		google.maps.event.addListener(marker, 'dragend', function(event) {
			moveMarker(event.latLng);
		});

		google.maps.event.addListener(autocomplete, 'place_changed', function() {
			var place = autocomplete.getPlace();
			if (place.geometry.viewport) {
	            map.fitBounds(place.geometry.viewport);
	          } else {
	            map.setCenter(place.geometry.location);
	            map.setZoom(17);  // Why 17? Because it looks good.
	          }
			moveMarker(place.geometry.location);
		});
	}

	function calcRoute(start, end) {
		$("#distanceText").html();
        var request = {
            origin:start,
            destination:end,
            travelMode: google.maps.DirectionsTravelMode.WALKING
        };
        directionsService.route(request, function(response, status) {
          if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
            var route = response.routes[0];
            var distText = route.legs[0].distance.text;
            $("#distanceText").html('Total distance: ' + distText);
          }
        });
      }

	function moveMarker(position) {
		marker.setPosition(position);
		getClosest(position);
	}

	function getPosition(position) {
		latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
		getOnce = true;
		map.setCenter(latlng);
		map.setZoom(12);
		marker.setPosition(latlng);
		getClosest(latlng);
	}

	function getClosest(coords){
		$.ajax({
			url:"{% url closest %}",
			data: {"lat": coords.lat(), "lng": coords.lng()},
			type: "GET",
			cache: false,
			success:function(data){
				bounds = new google.maps.LatLngBounds();
				if (eduMarker){
					eduMarker.setMap(null);
				}
				bounds.extend(coords);
				bounds.extend(new google.maps.LatLng(data.lat, data.lng));
				eduMarker = new google.maps.Marker({
					position : new google.maps.LatLng(data.lat, data.lng),
					draggable : true,
					'icon': image,
					animation : google.maps.Animation.DROP,

				});
				eduMarker.setMap(map);
				map.fitBounds(bounds);
				calcRoute(coords, new google.maps.LatLng(data.lat, data.lng));
				google.maps.event
															.addListener(
																	eduMarker,
																	'click',
																	function() {
																		infoWindow.setContent( "<div>"
																				+ data.text
																				+ "</div>");
																		infoWindow
																				.open(
																						map,
																						eduMarker);
																	});
			}
		});

	}

function autocomplete() {

        var input = $('#searchTextField');
        var autocomplete = new google.maps.places.Autocomplete(input);
        autocomplete.bindTo('bounds', map);
        var marker = new google.maps.Marker({
          map: map
        });


      }

function resizeMap()
{

	if (map != undefined)
	{
		google.maps.event.trigger(map, 'resize');
	}

	return false;
}

	$(document).ready(function() {
		initialize();
		resizeMap();
		$("#myloc").click(function(){
			navigator.geolocation.getCurrentPosition(getPosition);
			return false;
		});
		$("#mylocm").click(function(){
			navigator.geolocation.getCurrentPosition(getPosition);
			return false;
		});

	});

	$(window).resize(function(){
		resizeMap();
   });

		</script>
		{% endblock %}

{% block bodyclass %}closest{% endblock%}
 {% block header %}
    <div class="push-top"></div>
	<nav class="navbar navbar-default navbar-fixed-top">
      	<div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="/"><img src="{% static 'img/eduroam_logo.png' %}" /></a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
            	<div class="col-sm-3 col-md-3 pull-right">
	      			<div class="input-group" style="margin-top: 8px;">
					    <span class="input-group-btn">
					    	<button  id="mylocm" class="btn btn-default" type="button">My location</button>
					    </span>
					    <input type="text" id="searchTextField" class="form-control" placeholder="Search for...">
					 </div>
	          	</div>
            	<div class="col-sm-3 col-md-3 pull-right" style="margin-top: 18px">
			      	<span id="distanceText"></span>
			    </div>
          	</div>
        </div>
	</nav>
{% endblock %}
{% block content %}
<div id="map_canvas" style="width:100%"></div>
{% endblock %}