{% extends "references/base.html" %}
{% load captchatag %}

{% block title %}Upload Custom Projection{% endblock %} 
{% block h1title %}Upload Custom Projection{% endblock %} 


{% block head_extra %} 
<script type="text/javascript" charset="utf-8" src="http://openlayers.org/api/OpenLayers.js">	</script>
<script type="text/javascript" src="http://openstreetmap.org/openlayers/OpenStreetMap.js"></script>

<script type="text/javascript">

    var map, base_layer, panel, controls;

    function goTo(location){
        //alert(document.getElementById('address').value);
        var address = 'address=' + location;
        var request = OpenLayers.Request.POST({
          url: "/lookup/",
          data: address,
          callback: gotoLocation
        });
      }

    function gotoLocation(request) {
        var response = request.responseText;
        if (response){
         var json = eval('(' + response + ')');
         var centerPoint = new OpenLayers.LonLat(json.lon, json.lat);
		     map.setCenter(centerPoint.transform(new OpenLayers.Projection("EPSG:4326"),map.getProjectionObject()),6);
        }else{
          $('georesponse').innerHTML = '<p class="errorlist">Try searching again...</p>';
         }
      }
      
    function setBoundsFromMap(e) {
        var merc_extent = map.getExtent();
        var displayProjection = new OpenLayers.Projection("EPSG:4326");
        var wgs_extent = merc_extent.transform(map.getProjectionObject(), displayProjection) //transform.(from,to)
        $('id_bounds').value = wgs_extent.toGeometry();
    }

    function setExtentFromBounds(bounds) {
        var wkt = new OpenLayers.Format.WKT();
        var wgs_extent = wkt.read($('id_bounds').value);
        var wgs_bounds = wgs_extent.geometry.getBounds(); //new OpenLayers.Bounds(wgs_extent);
        var displayProjection = new OpenLayers.Projection("EPSG:4326");
        var merc_bounds = wgs_bounds.transform(displayProjection,map.getProjectionObject()) //transform.(from,to)
        map.zoomToExtent(merc_bounds);
    }
    
    function init_map(){
        var map_options = { 
            'units' : "m",
            'maxResolution' : 156543.0339,
            'numZoomLevels' : 22,
            'projection' : new OpenLayers.Projection("EPSG:900913"),
            'displayProjection' : new OpenLayers.Projection("EPSG:4326"),
            'maxExtent' : new OpenLayers.Bounds(-20037508,-20037508,20037508,20037508)
        }

    map = new OpenLayers.Map('map', map_options);    
    map.layers.base = new OpenLayers.Layer.OSM.Mapnik("OpenStreetMap (Mapnik)");
    map.addLayer(map.layers.base);
    
    // To enable gmaps base layers uncomment this block and the GMAP_API_KEY script link above
    //var gphy = new OpenLayers.Layer.Google( "Google Terrain", {type: G_PHYSICAL_MAP, 'sphericalMercator': true} );
    //var gmap = new OpenLayers.Layer.Google( "Google Streets", {'sphericalMercator': true});
    //var ghyb = new OpenLayers.Layer.Google("Google Satellite", {type: G_HYBRID_MAP, 'sphericalMercator': true} );
    //map.addLayers([ghyb, gmap, gphy]);

    // Main map controls including the toolbar panel
    panel = new OpenLayers.Control.Panel({'displayClass': 'olControlEditingToolbar'});
    var nav = new OpenLayers.Control.Navigation();
    controls = [nav];
        
    panel.addControls(controls);
    map.addControl(panel);
    
    // Then add optional visual controls
    map.addControl(new OpenLayers.Control.MousePosition());
    map.addControl(new OpenLayers.Control.Scale());
    map.addControl(new OpenLayers.Control.LayerSwitcher());
    //map.addControl(new OpenLayers.Control.Permalink('permalink'));
    
    //new OpenLayers.Bounds{{ extent }}
    if ($('id_bounds').value){
      setExtentFromBounds()
    }else{
      map.zoomToMaxExtent();
      map.zoomIn(2)
    }
    
    // Register *after* we set the map for the first time
    map.events.register("moveend", map, setBoundsFromMap);
    map.events.register("zoomend", map, setBoundsFromMap);
    
    }
    </script>
  </head>
  
{% endblock %}

{% block body_load%}onload="init_map();"{% endblock%}

{% block content %}
    <h2> Upload your own Projection in Well Known Text (WKT) format</h2>
   <div style="width:45%; height:350px; float:right">Zoom to the Projection's Relevant Area:
   <div id="map" style="width:100%;height:350px"></div>
   <p><input type="search" autosave="http://spatialreference.org" results="10" size="40" id="goto" value="Go to Location" onfocus="this.value=' ';" onchange="goTo(this.value);"><button onclick="goTo(document.getElementById('goto').value);" type="submit">Go to</button></p><div id="georesponse"></div>
   </div>
   
   <div id="form" style="width:40%;float:left">

    {% if form.errors %}
    <p class="errorlist">Sorry there are corrections needed in your form below: {{ form.non_field_errors }}</p>
    {% endif %}
    {% if form.is_multipart %}
    <form enctype="multipart/form-data" method="post" action=".">
    {% else %}
    <form method="post" action=".">
   {% endif %}
   {{ form.as_p }}
   
    {% if recaptcha_failure %}
    <p class="errorlist">Please try the word test again:<p>
    {% else %}
    <p>Type the words below:</h4>
    {% endif %}
    {% recaptcha_html %}
   <input type="submit" value="Post Your Projection" />
   </form>
   </div>
{% endblock %}