commit 242932f34b700af29263a1b8ab09cdf2b2791d75
Author: Kroustouris Stauros <staurosk@noc.grnet.gr>
Date:   Thu Jun 25 12:47:32 2015 +0300

    separate js in world page and style 400 and 500

diff --git a/djnro/templates/front/world.html b/djnro/templates/front/world.html
index 91d2123..f29ef05 100644
--- a/djnro/templates/front/world.html
+++ b/djnro/templates/front/world.html
@@ -5,287 +5,18 @@
 {% block homepage %}{% endblock %}
 {% block hometop %}{% endblock %}
 {% block world %}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
-	}
+{% block content %}
+<h1>{% trans "Eduroam Worldwide" %}</h1>
+<hr>
 
-	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>
+<div id="map_canvas" data-center-lat="{{ MAP_CENTER.0 }}" data-url="{% url worldPoints %}" data-city="{% static 'img/city.png' %}" data-country="{% static 'img/country.png' %}" data-group="{% static 'img/edugroup.png' %}" data-pin="{% static 'img/edupin.png' %}" data-center-lng="{{ MAP_CENTER.1 }}" style="width:100%; height:600px; overflow: hidden;"></div>
 {% endblock %}
 
 
-					{% block content %}
-					<h4>{% trans "Eduroam Worldwide" %}</h4>
-					<hr>
-
-					<div id="map_canvas" style="width:100%; height:600px; overflow: hidden;"></div>
-					{% endblock %}
-
-
+{% block extrajs %}
+<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" src="{% static 'js/world-map.js' %}"></script>
+{% endblock %}
