DjNRO

    {% block topmenu %}

    <ul class="nav">

        <li>

            <a href="{% url index %}">{% trans "Home" %}</a>

        </li>

        <li>

            <a href="/faq/{{LANGUAGE_CODE}}/">FAQ</a>

        </li>

        {% include "front/management_dropdown.html" %}

    </ul>

    {% endblock %}

    {% block content %}

	<div class="container-fluid">

      <div class="row-fluid">

        <div class="span2">

        </div><!--/span-->

		<div class="span10">

				<h3>Oops! You got a nice 404: Page does not exist</h3>

					{% block subcontent %}

					<div class="span10 alert alert-error">No matter how you reached this page, it simply does not exist!</div>

					{% endblock %}

				<!--/span-->

			</div><!--/row-->

		</div><!--/span-->

        </div><!--/span-->

    </div><!--/.fluid-container-->

	{% endblock %}

    {% block topmenu %}

    <ul class="nav">

        <li>

            <a href="{% url index %}">{% trans "Home" %}</a>

        </li>

        <li>

            <a href="/faq/{{LANGUAGE_CODE}}/">FAQ</a>

        </li>

       {% include "front/management_dropdown.html" %}

    </ul>

    {% endblock %}

    {% block content %}

        <div class="span2">

        </div><!--/span-->

		<div class="span10">

				<!--/span-->

				<h3>Oops! You got a 500: Error!</h3>

					{% block subcontent %}

					<div class="span10 alert alert-error">An error occured! Don't worry, our team has been notified about it and will soon fix it!</div>

					{% endblock %}

				<!--/span-->

			</div><!--/row-->

		</div><!--/span-->

        </div><!--/span-->

    </div><!--/.fluid-container-->

	{% endblock %}

                          <li class="{% block participants %}{% endblock %}"><a href="{% url participants %}">{% trans "Participants" %}</a></li>

                    </ul>

                </li>

                <li >

{% 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>

{% endblock %}

	{% load tolocale %}

	<h4>{% trans "Participating Institutions" %}</h4>

	<hr>

	<div>{% trans "In"%} {% trans COUNTRY_NAME %} {% trans "eduroam is provided by the following instituitons/organizations" %}</div><br>

					<div>{% for i in institutions %}

					<address>

						<strong>{% tolocale i.institution LANGUAGE_CODE %}</strong><br>

						{% with i.institution.get_active_cat_enrl as cats %}

    						{% for cat in cats %}

    						<a href="{{cat}}" target="_blank">eduroam CAT configuration profiles</a><span style="font-weight: bold; font-size:15px; color:red;">*</span><br>{% endfor %}

    					{% endwith %}

						{{i.address_street}}<br>

						{{i.address_city}}

						{% if i.url.all|length > 0 %}

						    <dl style="margin-top: 0px;">

    							<dt style="font-weight: normal;">urls</dt>

    							<dd>

						{% for u in i.url.all %}{% if u %}<a href="{{u.url}}">{{u.url}}</a>  {{u.get_urltype_display}} ({{u.get_lang_display}})<br>{% endif %}{% endfor %}

						</dd>

    						</dl>

    						{% endif %}

					</address>

					{% endfor %}</div>

					{% if catexists %}

					<span style="font-size:11px;"><span style="color:red;">*</span>: Institution admiminstrators may have not created CAT profiles for all/any devices</span>

					{% endif %}

					{% 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>

					{% block content %}

					<h4>{% trans "Eduroam Worldwide" %}</h4>

					<hr>

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

					{% endblock %}