{% extends 'base.html' %}                                                                                                                      
{% load i18n %}
{% load static %}

{% block title %}{% trans 'Crop photo' %}{% endblock title %}

{% block header %}<link rel="prefetch" href="{% static 'css/jcrop.css' %}">{% endblock header %}

{% block content %}
<style>
</style>
<h1>{% trans 'Crop photo' %}</h1>

<p>{% trans 'Draw a square around the portion of the image you want to use:' %}</p>

<form action="{% url 'crop_photo' photo.pk %}" method="post">{% csrf_token %}
  {% if email %}<input type="hidden" name="email" value="{{email}}">{% endif %}
  {% if openid %}<input type="hidden" name="openid" value="{{openid}}">{% endif %}
<div class="form-group">
  <img src='{% url 'raw_image' photo.pk %}' id='cropbox'>
</div>
  <input type='hidden' id='x' name='x' value='0'/>
  <input type='hidden' id='y' name='y' value='0'/>
  <input type='hidden' id='w' name='w' value='0'/>
  <input type='hidden' id='h' name='h' value='0'/>
<div class="form-group">
  <button type="submit" class="button" onsubmit="return checkCoords();">{% trans 'Crop' %}</button>
  &nbsp;
  <a href="{% url 'profile' %}" class="button" title="{% trans 'May lead to wrong aspect ratio!' %}">{% trans 'Skip cropping' %}</a>
</div>
</form>

<script src="{% static '/js/jcrop.js' %}"></script>
<script type="text/javascript">
function updateCoords(c) {
    $('#x').val(c.x);
    $('#y').val(c.y);
    $('#w').val(c.w);
    $('#h').val(c.h);
};

function checkCoords() {
    if (parseInt($('#w').val())) return true;
    alert('Please select a crop region then press submit.');
    return false;
};
</script>
<script type="text/javascript">
    /// TODO: This needs to be reworked!
    /// Should be some reasonable function of distance of the image to the
    /// left and right screen border  or so.
    var windowwidth = $(window).width();
    var usewidth = windowwidth - 60;
    if(windowwidth < 400) {
      usewidth = windowwidth - 60;
    }
    if(windowwidth > 800) {
      usewidth = windowwidth - 100;
    }
    if(windowwidth > 1200) {
      usewidth = windowwidth - 400;
    }

    jQuery(function($){
        $('#cropbox').Jcrop({
            onSelect: updateCoords,
            bgOpacity: .2,
            bgColor: 'transparent',
            boxWidth: usewidth,
            aspectRatio: 80 / 80,
      });
    });
</script>
<div style="height:40px"></div>
{% endblock content %}