{% extends "cranefly/usercp/layout.html" %}
{% import "cranefly/macros.html" as macros with context %}

{% block title %}{{ macros.page_title(title=_('Crop Avatar')) }}{% endblock %}

{% block action %}
<div class="form-container usercp-avatar-crop">

  <form action="{% if after_upload %}{{ url('usercp_avatar_upload_crop') }}{% else %}{{ url('usercp_avatar_crop') }}{% endif %}" method="post">

    <div class="form-header">
      <div class="avatar-crop-preview">
        <img src="{{ MEDIA_URL }}{{ source }}" id="preview" alt="{% trans %}Avatar Preview{% endtrans %}" class="jcrop-preview" />
      </div>
      <h1>{% trans %}Crop Avatar{% endtrans %} <small>{% trans %}Change your Avatar{% endtrans %}</small></h1>
      <a href="{{ url('usercp_avatar') }}" class="btn btn-inverse pull-right">{% trans %}Cancel{% endtrans %}</a>
      <button name="save" type="submit" class="btn btn-danger pull-right">{% trans %}Crop Avatar{% endtrans %}</button>
    </div>

    {% if message %}
    <div class="messages-list">
      {{ macros.draw_message(message) }}
    </div>
    {% endif %}

    <input type="hidden" name="{{ csrf_id }}" value="{{ csrf_token }}">
    <input type="hidden" id="crop-b" name="crop_b" value="">
    <input type="hidden" id="crop-w" name="crop_w" value="">
    <input type="hidden" id="crop-x" name="crop_x" value="">
    <input type="hidden" id="crop-y" name="crop_y" value="">

    <div class="avatar-crop-target"><img src="{{ MEDIA_URL }}{{ source }}" id="target" alt="{% trans %}Uploaded Image{% endtrans %}"></div>

  </form>

</div>
{% endblock %}

{% block javascripts %}
{{ super() }}
    <script src="{{ STATIC_URL }}cranefly/js/jquery.Jcrop.min.js"></script>
    <script type="text/javascript">
      $(function($){
        // Create variables (in this scope) to hold the API and image size
        var jcrop_api, boundx, boundy;
        var crop_b = $('#crop-b');
        var crop_w = $('#crop-w');
        var crop_x = $('#crop-x');
        var crop_y = $('#crop-y');
        var afx = $('.avatar-crop-preview').width() / {{ avatar_size }};

        $('#target').Jcrop({
          onChange: updatePreview,
          onSelect: updatePreview,
          aspectRatio: 1,
          minSize: [50, 50],
          {% if avatar_crop -%}
          setSelect: [{{ avatar_crop[0] }}, {{ avatar_crop[1] }}, {{ avatar_crop[0] + avatar_crop[2] }}, {{ avatar_crop[1] + avatar_crop[2] }}]
          {%- else -%}
          setSelect: [0, 0, {{ avatar_size }}, {{ avatar_size }}],
          {%- endif %}
        },function(){
          // Use the API to get the real image size
          var bounds = this.getBounds();
          boundx = bounds[0];
          boundy = bounds[1];
          $('#crop-b').val(boundx);
          // Store the API in the jcrop_api variable
          jcrop_api = this;
        });

        function updatePreview(c)
        {
          if (parseInt(c.w) > 0)
          {
            var rx = {{ avatar_size }} / c.w;
            var ry = {{ avatar_size }} / c.h;

            $(crop_w).val(c.w);
            $(crop_x).val(c.x);
            $(crop_y).val(c.y);

            $('#preview').css({
              width: Math.round(rx * boundx * afx) + 'px',
              height: Math.round(ry * boundy * afx) + 'px',
              marginLeft: '-' + Math.round(rx * c.x * afx) + 'px',
              marginTop: '-' + Math.round(ry * c.y * afx) + 'px'
            });
          }
        };
      });
    </script>
{% endblock %}