{% extends 'warp_base.html' %}
{% load staticfiles %}
{% load l10n %}
{% comment %} {% endcomment %}

{% block custom_style_link %}{% endblock %}
{% block custom_style_inline %}
.form-control {font-family:monospace;!important;font-size:0.9em;!important;}
{% endblock %}
{% block custom_js %}
<script type="text/javascript" src="/static/warp/js/ol.js"></script>
<script src="/static/warp/js/ol3-layerswitcher.js"></script>
<script src="/static/warp/js/proj4.js"></script>
<script src="http://epsg.io/{{ form.epsg.value }}.js"></script>
<script src="/static/warp/js/epsg.js"></script>
<script type="text/javascript">
{% localize off %}
var targetExtent = [{{ form.extentLeft.value }}, {{ form.extentBottom.value }}, {{ form.extentRight.value }}, {{ form.extentTop.value }}];
var leftBottom = [{{ form.extentLeft.value }},{{ form.extentBottom.value }}]
var rightTop = [{{ form.extentRight.value }},{{ form.extentTop.value }}]
{% endlocalize %}

var targetProjection;
var noInit = false;

function sleep(miliseconds) {
    var currentTime = new Date().getTime();
    while (currentTime + miliseconds >= new Date().getTime()) {
    }
}

{% comment %}
{% if form.epsg.value = 3857 or form.epsg.value = 4326 %}
var targetProjection = 'EPSG:{{ form.epsg.value }}';
{% else %}
var targetProjection = new ol.proj.Projection({
  code: 'EPSG:{{ form.epsg.value }}',
  // The extent is used to determine zoom level 0. Recommended values for a
  // projection's validity extent can be found at http://epsg.io/.
  extent: targetExtent,
  //units: 'm'
});
ol.proj.addProjection(targetProjection);
{% endif %}
{% endcomment %}

$(document).ready(function() {

    targetProjection = 'EPSG:'+$("#id_epsg").val().toString();

    if (proj4.defs(targetProjection) == undefined){
        console.log ("Invalid projection");
    } else {
        console.log(proj4.defs(targetProjection));
        var leftBottom_wgs84 = ol.proj.toLonLat(leftBottom, targetProjection);
        var rightTop_wgs84 = ol.proj.toLonLat(rightTop, targetProjection);
        $("#id_lonMin").val(leftBottom_wgs84[0]);
        $("#id_latMin").val(leftBottom_wgs84[1]);
        $("#id_lonMax").val(rightTop_wgs84[0]);
        $("#id_latMax").val(rightTop_wgs84[1]);
    }

    $('#update_button').click(function(eventObj) {
        $("#update").val("1");
        $('#submit').trigger('click');
    })

    $('#dataset').submit(function(eventObj) {

        console.log ("reprojection");

        var newTargetProjection = 'EPSG:'+$("#id_epsg").val().toString();
        var leftBottom_new = ol.proj.fromLonLat([parseFloat($("#id_lonMin").val()),parseFloat($("#id_latMin").val())], newTargetProjection); //parseFloat()
        var rightTop_new = ol.proj.fromLonLat([parseFloat($("#id_lonMax").val()),parseFloat($("#id_latMax").val())], newTargetProjection); //parseFloat()
        $("#id_extentLeft").val(leftBottom_new[0]);
        $("#id_extentBottom").val(leftBottom_new[1]);
        $("#id_extentRight").val(rightTop_new[0]);
        $("#id_extentTop").val(rightTop_new[1]);

    })

});

function onMoveEnd(evt) {
        if (noInit) {
            var map = evt.map;
            var new_ext = map.getView().calculateExtent(map.getSize());
            var leftBottom_wgs84 = ol.proj.toLonLat([new_ext[0],new_ext[1]], targetProjection);
            var rightTop_wgs84 = ol.proj.toLonLat([new_ext[2],new_ext[3]], targetProjection);
            $("#id_lonMin").val(leftBottom_wgs84[0]);
            $("#id_latMin").val(leftBottom_wgs84[1]);
            $("#id_lonMax").val(rightTop_wgs84[0]);
            $("#id_latMax").val(rightTop_wgs84[1]);
        } else {
            noInit = true
        }
    };

function init(){

    map = new ol.Map({
      layers: [

{{ form.baselayer.value | escape | safe }}

      ],
      controls: ol.control.defaults().extend([
        new ol.control.MousePosition(),
        new ol.control.OverviewMap()
      ]),
      target: 'map',
      view: new ol.View({
        projection: targetProjection,
        center: ol.extent.getCenter(targetExtent),
        zoom: 2
      })
    });

    map.getView().fit(targetExtent, map.getSize());

    map.on('moveend', onMoveEnd);

}

</script>
{% endblock %}
{% block onload %} onload="init()"{% endblock %}
{% block titolo %}DATASET {% if idx %}{{idx}}{% endif %} {% if form %}{{form.name.value}}{% endif %} {% endblock %}
{% block menu %}
<li>
<a href="/warp/">dataset admin</a>
</li>
{% endblock %}
{% block contenuto %}


<div class="container">
    <div class="col-md-12">
            <form id="dataset" action="/warp/{% if idx %}editdataset/{{idx}}/{% else %}newdataset/{% endif %}" method="post" class="input-sm">

                <div class="panel-body">
                    <div class="panel panel-default col-md-4">
                        <div class="panel-body">
                           <form>
                              {% csrf_token %}
                            <div class="form-group">
                              <label for="id_name">Dataset name:</label>
                              {{form.name}}
                            </div>
                            <div class="form-group">
                              <label for="id_epsg">Coordinate system code (epsg):</label>
                              {{form.epsg}}
                              {{form.extentLeft}}
                              {{form.extentBottom}}
                              {{form.extentRight}}
                              {{form.extentTop}}
                            </div>
                            <div class="form-group">
                              <label for="lonMin">Minimum longitude:</label>
                              <input type="text" class="form-control" id="id_lonMin" name="lonMin" value="">
                            </div>
                            <div class="form-group">
                              <label for="latMin">Minimum latitude:</label>
                              <input type="text" class="form-control" id="id_latMin" name="latMin" value="">
                            </div>
                            <div class="form-group">
                              <label for="lonMax">Maximum longitude:</label>
                              <input type="text" class="form-control" id="id_lonMax" name="lonMax" value="">
                            </div>
                            <div class="form-group">
                              <label for="latMax">Maximum latitude:</label>
                              <input type="text" class="form-control" id="id_latMax" name="latMax" value="">
                            </div>
                            <div class="checkbox">
                                <label class="checkbox-inline">
                                {{form.transparency}}Force transparency on white background:</label>
                            </div>
                            <div class="form-group">
                              <label for="id_baselayer">Baselayer <br/> (Openlayers 3 valid javascript layer object):</label>
                              {{form.baselayer}}
                            </div>
                              <input type="text" class="hidden" id="update" name="update" value="0">
                              </br>
                              <input id="submit" type="submit" class="btn btn-default" value="Submit" />
                              </br>
                            </form>
                          </div>
                    </div>
                    <div class="col-md-8">
                        <div class="panel panel-default">
                          <div class="panel-heading"><strong>Dataset extension</strong></div>
                          <div class="panel-body">

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

            </form>
    </div>
</div>

{% endblock %}
{% block piedipagina %}{% endblock %}