{% extends "base.html" %}
{% load i18n %}
{% load staticfiles %}
{% block currentpagetitle %}World{% endblock %}
{% block homepage %}{% endblock %}
{% block hometop %}{% endblock %}
{% block world %}class="active"{% endblock %}
{% block extrahead %}
<style type="text/css">

  .headtitle {font-family: "Franklin Gothic Demi", "Franklin Gothic", "ITC Franklin Gothic", Arial, sans-serif; letter-spacing: -1px; }
</style>
<script type="text/javascript" src="{% static 'js/jquery.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/markerclusterer.js' %}"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></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 infoWindow;
	addr = {};


	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' %}',
		// This marker is 29 pixels wide by 40 pixels tall.
		new google.maps.Size(29, 40),
		// The origin for this image is 0,0.
		new google.maps.Point(0, 0),
		// The anchor for this image is the base of the flagpole at 18,42.
		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"
			} ]
		}

		];

	geocoder = new google.maps.Geocoder();
	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 homeControlDiv = document.createElement('div');
		homeControlDiv.className='roundButtonHolder';
		homeControlDiv.id="locationButton";
		var homeControl = new HomeControl(homeControlDiv, map);

		homeControlDiv.index = 1;
		map.controls[google.maps.ControlPosition.TOP_LEFT].push(homeControlDiv);

		bounds = new google.maps.LatLngBounds();
		infoWindow = new google.maps.InfoWindow();
		google.maps.event.addListener(map, 'idle', function() {
			center = map.getCenter();
			geocode(center);
			zoom = map.getZoom();
			if (zoom > 12){
				$("#showCityBtn").show();
				$("#showCountryBtn").hide();
			}
			else if ((zoom <= 12) && (zoom > 7)){
				$("#showCityBtn").hide();
				$("#showCountryBtn").show();
			}
			else {
				$("#showCityBtn").hide();
				$("#showCountryBtn").hide();
			}
		});


	}

	var markers = new Array();
	function placeMarkers() {

		$
				.get(
						"{% url worldPoints %}",
						function(data) {
							$
									.each(
											data,
											function(index, jsonMarker) {
												var marker = createMarker(jsonMarker);
												if (marker) {
													bounds
															.extend(marker.position);
													markers.push(marker);
													google.maps.event
															.addListener(
																	marker,
																	'click',
																	function() {
																		infoWindow.setContent(jsonMarker.text);
																		infoWindow
																				.open(
																						map,
																						marker);
																	});
												}
											});
							var mcOptions = {
								gridSize : 60,
								maxZoom : null,
								styles : styles
							};

							var markerCluster = new MarkerClusterer(map,
									markers, mcOptions);
							map.fitBounds(bounds);
						});
	}

	function createMarker(markerObj) {
		var latLng = new google.maps.LatLng(markerObj.lat, markerObj.lng);
		var marker = new google.maps.Marker({
			'position' : latLng,
			'map' : map,
			'icon' : image,
		});
		return marker
	}

	function clusterMarkers(markers) {
		var markerCluster = new MarkerClusterer(map, markers);
	}


	function geocode(position){
		addr = {};
		geocoder
		.geocode(
				{
					'latLng' : position
				},
				function(results, status) {
					if (status == google.maps.GeocoderStatus.OK) {
						if (results.length >= 1) {
							for ( var ii = 0; ii < results[0].address_components.length; ii++) {
								var street_number = route = street = city = state = zipcode = country = formatted_address = '';
								var types = results[0].address_components[ii].types
										.join(",");
								if (types == "sublocality,political"
										|| types == "locality,political"
										|| types == "neighborhood,political"
										|| types == "political") {
									addr.city = (city == '' || types == "locality,political") ? results[0].address_components[ii].long_name
											: city;
								}
								if (types == "country,political") {
									addr.country = results[0].address_components[ii].long_name;
								}
							}
						}
					}
				});
	}

	function codeAddress(address) {
	    geocoder.geocode( { 'address': address}, function(results, status) {
	      if (status == google.maps.GeocoderStatus.OK) {
	        map.setCenter(results[0].geometry.location);
	    	map.fitBounds(results[0].geometry.bounds)
	      } else {
	        //alert("Geocode was not successful for the following reason: " + status);
	      }
	    });
	  }

	function HomeControl(controlDiv, map) {

		  // Set CSS styles for the DIV containing the control
		  // Setting padding to 5 px will offset the control
		  // from the edge of the map.
		  controlDiv.style.padding = '5px';

		  // Set CSS for the control border.
		  var controlUI = document.createElement('button');
		  controlUI.className='btn btn-warning roundButton';
		  controlUI.id = "showCityBtn";
		  extraCSS = 'background-image: url({% static '/img/city.png' %});background-position: center center; background-repeat: no-repeat;';
		  controlUI.style.cssText='display:none; cursor:pointer; white-space:nowrap; position:absolute; '+extraCSS;
		  controlUI.title = "City View";

		  // Set CSS for the control border.
		  var controlUI2 = document.createElement('button');
		  controlUI2.className='btn btn-warning roundButton';
		  controlUI2.id = "showCountryBtn";
		  extraCSS2 = 'background-image: url({% static '/img/country.png' %});background-position: center center; background-repeat: no-repeat;';
		  controlUI2.style.cssText='display:none; cursor:pointer; white-space:nowrap; position:absolute; '+extraCSS2;
		  controlUI2.title = "Country View";

		  controlDiv.appendChild(controlUI);
		  controlDiv.appendChild(controlUI2);

		  // Setup the click event listeners: simply set the map to Chicago.
		  google.maps.event.addDomListener(controlUI, 'click', function() {
		    codeAddress(addr.city+','+addr.country);
		  });
		  google.maps.event.addDomListener(controlUI2, 'click', function() {
			    codeAddress(addr.country);
			  });

		}

	$(document).ready(function() {
		initialize();
		marks = placeMarkers();
		clusterMarkers(marks);
	});
</script>
{% endblock %}


					{% block content %}
					<h4>{% trans "Eduroam Worldwide" %}</h4>
					<hr>

					<div id="map_canvas" style="width:100%; height:600px; overflow: hidden;"></div>
					{% endblock %}