{%extends "base.html" %}
{%load user%}

{%block localstyles%}
	<link rel="stylesheet" href="/media/css/fabmap.css"/>
{%endblock%}

{%block scripts%}
	<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
	<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
	<!-- <script src="/media/javascript/OpenLayers/lib/OpenLayers/Control/DragMarker.js"></script> -->
	<script src="/media/javascript/map.js"></script>
	<script src="/media/javascript/latlonselector.js"></script>
	<script src="/media/javascript/dialogs.js"></script>
	<script src="/media/javascript/location.js"></script>
{%endblock%}

{%block localscript%}

	var layerLabs;
	var icon;
	var locatorToggled = false;
	var locateMarker;

	var map;

	function init() {
		map = Map();
		sel = LatLonSelector();
		map.init("map");
		sel.init(map);
		search("");
	}

{%endblock%}

{%block nav_locations%}
<div class="sublinks">
	<div class="box">
		<input type="text" id="q" style="width: 150px;"/>
		<input type="button" onclick="search();" value="Search"/>
	</div>
{% ifuser %}
	<a href="#" onclick="showDialog($('#addLocationDialog'))">Add a location</a>
	<a href="#" onclick="showDialog($('#viewLocationsDialog'))">Manage your locations</a>
{% endifuser %}
</div>
{%endblock%}

{%block maincontent%}
<div class="mapdialog" id="addLocationDialog">
	<table id="addlocationform">
	{{addlocationform.as_table}}
	</table>
	<input type="button" value="Save" onclick="newLocation();"/>
	<input type="button" value="Cancel" onclick="hideDialog($('#addLocationDialog'));"/>
</div>

<div class="mapdialog" id="editLocationDialog">
	<table id="editlocationform">
	{{editlocationform.as_table}}
	</table>
	<input type="button value="Save" onclick="saveLocation();" />
	<input type="button" value="Cancel" onclick="hideDialog($('#editLocationDialog'));" />
</div>

<div>
  <b>Quick locations:</b>
  <a href="#" onclick="javascript:map.zoomLocation(23, 0, 2);">World</a>
  <a href="#" onclick="javascript:map.zoomLocation(65 , -19, 6);">Iceland</a>
  <a href="#" onclick="javascript:map.zoomLocation(57.984808,14.941406, 3);">Europe</a>
  <a href="#" onclick="javascript:map.zoomLocation(-24.527135,-66.445312, 3);">South America</a>
  <a href="#" onclick="javascript:map.zoomLocation(1.757537,15.996094, 3);">Africa</a>
  <a href="#" onclick="javascript:map.zoomLocation(66.51326,105.46875, 3);">Russia</a>
  <a href="#" onclick="javascript:map.zoomLocation(37.857507,105.380859, 4);">China</a>
  <a href="#" onclick="javascript:map.zoomLocation(-25.562265,134.648438,4);">Australia</a>
  <a href="#" onclick="javascript:map.zoomLocation(37.579413,-95.537109,4);">USA</a>
</div>

<div id="map" style="width: 800px; height: 500px"></div>

<div id="searchresults">
	<table id="searchresults_table">
	</table>
</div>

{%endblock%}