{% extends "base.html"%}
{% load i18n %}
{% block extrahead %} <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="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
	var lat = 36.97;
	var lng = 23.71;
	var zoomLevel = 6;
	var latlng = new google.maps.LatLng(lat,lng);
	var map = '';
	var bounds = '';
	var image = '';
	var infoWindow;
	
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" }
	]}

];
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);
	
	bounds = new google.maps.LatLngBounds();
	infoWindow = new google.maps.InfoWindow();

}


function placeMarkers(){
var markers = new Array();
$.get("{% url get-service-points %}", 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.content = "<div><h4>"+jsonMarker.name+"</h4>"+
			
	"<div class='tabbable'>"+ 
    "<ul class='nav nav-tabs'>"+
    "<li class='active'><a href='#tab1' data-toggle='tab'>Main</a></li>"+
    "<li><a href='#tab2' data-toggle='tab'>Advanced</a></li>"+
    "</ul>"+
    "<div class='tab-content'>"+
    "<div class='tab-pane active' id='tab1'>"+
    "<dl class='dl-horizontal'>"+
			"<dt>Name</dt><dd>"+jsonMarker.name+"</dd>"+
			"<dt>Address</dt><dd>"+jsonMarker.address+"</dd>"+
			"<dt>Encryption</dt><dd>"+jsonMarker.enc+"</dd>"+
			"<dt>SSID</dt><dd>"+jsonMarker.SSID+"</dd>"+
			"<dt>Number of APs</dt><dd>"+jsonMarker.AP_no+"</dd></dl>"+
    "</div>"+
    "<div class='tab-pane' id='tab2'>"+
    "<dl class='dl-horizontal'>"+
			"<dt>Port Restrict</dt><dd>"+jsonMarker.port_restrict+"</dd>"+
			"<dt>transp_proxy</dt><dd>"+jsonMarker.transp_proxy+"</dd>"+
			"<dt>IPv6</dt><dd>"+jsonMarker.IPv6+"</dd>"+
			"<dt>NAT</dt><dd>"+jsonMarker.NAT+"</dd>"+
			"<dt>Wired</dt><dd>"+jsonMarker.wired+"</dd></dl>"+
    "</div>"+
    "</div>"+
    "</div>"+
    "<div style='text-align:right;'><a href = '{% url edit-services  %}"+jsonMarker.key+"' class='btn btn-primary'>Edit</a></div>"+
    "</div>";
		infoWindow.open(map,marker);
     });
	}
	});
	var mcOptions = {gridSize: 50, maxZoom: 15, styles: styles};
	
	

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

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

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

	$(document).ready(function() {
{% if services %}
	initialize();
	marks = placeMarkers();
	clusterMarkers(marks);
{% endif %}});</script>
{% endblock %}
{% block headtitle %}eduroam@Greece admin{% endblock %}
    {% block topmenu %}
    <ul class="nav">
        <li class="disabled">
           <a class="brand" href="#">Management</a>
        </li>
        

    </ul>
    {% endblock %}
{% block content %}
<div class="container-fluid">
	<div class="row-fluid">
		<div class="span2"></div>
		<div class="span10">
			<div class="row-fluid"><div class="span10">
				<ul class="breadcrumb" style="display: inline-table; padding: 0">
					{% block crumbs %}
	    			<li class="active">{% trans "Home" %}</li>
	    			{% endblock %}
	    		</ul>
			<p class="pull-right"><strong>{{user}}</strong> (<a href="{% url logout %}">{% trans "Logout" %}</a>)</p>
			</div></div>
		</div>
	</div>
	<div class="row-fluid">
		<div class="span2">
			<div class="well sidebar-nav">
				<ul class="nav nav-list">
					<li {% block homeactive %}class="active"{% endblock %}>
						<a href="{% url manage %}">{% trans "Home" %}</a>
					</li>
					{% if institution_exists %}
					<li {% block instactive %}{% endblock %}>
						<a href="{% url institutions %}">{% trans "Institution" %} {% if not institutiondetails %}<font style="color: red; font-weight: bold; font-size: 14px;">(!)</font>{% endif %}</a>
					</li>
					{% endif %}
					{% if institutiondetails %}
					<li {% block servicesactive %}{% endblock %}>
						<a href="{% url services %}">{% trans "Services" %} ({{services_num}})</a>
					</li>
					<li {% block serversactive %}{% endblock %}>
						<a href="{% url servers %}">{% trans "Servers" %} ({{servers_num}})</a>
					</li>
					<li {% block realmsactive %}{% endblock %}>
						<a href="{% url realms %}">{% trans "Realms" %} ({{realms_num}})</a>
					</li>
					<li {% block contactsactive %}{% endblock %}>
						<a href="{% url contacts %}">{% trans "Contacts" %} ({{contacts_num}})</a>
					</li>
					{% endif %}
				</ul>
			</div><!--/.well -->
		</div><!--/span-->
		<div class="span10">
			<div class="row-fluid">
				<!--/span-->
				<div class="span10">
				{% if not institution_exists %}
	                <table class="table table-condensed">
					    <tr class="error"><td>You are not associated with any institution. Please contact your administrator<td></tr>
					</table>
				  {% endif %}
				  {% if institution_exists %}
					{% block subcontent %}
					
				  
					<h4>{% trans "Home" %} - {% trans "Service Locations" %}</h4>
              		<hr>
					{% if services %} <div id="map_canvas" style="width:100%; height:450px;"></div>
					{% else %}
					<div>{% if institutiondetails %}{% trans "No services defined yet"%}! <a href="{% url edit-services %}" class="btn btn-primary">{% trans "Add new service" %}</a>{% else %}Specify your institution details to proceed <a class="btn btn-small btn-primary" href="{% url edit-institution institution.pk %}">{% trans "Edit" %}</a>{% endif %}</div>
					{% endif %}
				
					{% endblock %}{% endif %}
				</div><!--/span-->
				<!--/span-->
			</div><!--/row-->
		</div><!--/span-->
	</div><!--/row-->
	<hr>
	<footer>
		<p>
			&copy;  GRNET NOC - GRNET S.A - 2012
		</p>
	</footer>
</div><!--/.fluid-container-->
{% endblock %}