{% extends "misago/usercp/base.html" %}
{% load i18n staticfiles %}


{% block title %}
{% trans "Crop avatar" %}{{ block.super }}
{% endblock title %}


{% block page %}
<div class="form-panel">
  <form method="POST" role="form" class="upload-form">
    <input type="hidden" id="crop" value="" name="crop">
    {% csrf_token %}

    <div class="form-header">
      <h2>
        <span class="fa fa-arrows-alt"></span>
        {% trans "Crop avatar" %}
      </h2>
    </div>

    <div class="form-body form-crop-avatar">

      <div class="crop-form-container">
        <div class="cropped-image-border">
          <img id="crop-image" src="{{ avatar_url }}" alt="{% trans "Source image" %}">
        </div>
        {% if crop %}
        <button id="btn-crop" class="btn btn-primary">{% trans "Save changes" %}</button>
        {% else %}
        <button id="btn-crop" class="btn btn-primary">{% trans "Set avatar" %}</button>
        {% endif %}
      </div>

    </div>

    <div class="form-footer">
      <a href="{% url 'misago:usercp_change_avatar' %}" class="btn btn-default">{% trans "Cancel" %}</a>
    </div>
  </form>
</div>
{% endblock page %}


{% block javascripts %}
<script type="text/javascript" src="{% static "misago/js/jquery.color.js" %}" charset="utf-8"></script>
<script type="text/javascript" src="{% static "misago/js/jquery.Jcrop.js" %}" charset="utf-8"></script>
<script type="text/javascript">
  $(function() {
    function registerCrop($image) {
      var max_height = $(window).height() * .6;

      var width = $image.width();
      var height = $image.height();

      if (height > max_height) {
        $image.css('width', $image.width() / ($image.height() / max_height))
        $image.css('height', max_height);

        var width = $image.width();
        var height = $image.height();
      }

      $image.parent().parent().width(width + 8);
      var width = $image.width();
      var height = $image.height();

      {% if crop %}
      original_width = {{ crop.image_width }};
      change_ratio = width / original_width;
      selection_len = change_ratio * {{ crop.selection_len }};
      start_x = change_ratio * {{ crop.start_x }};
      start_y = change_ratio * {{ crop.start_y }};
      {% else %}
      if (width < height) {
        selection_len = width;
      } else {
        selection_len = height;
      }

      start_x = (width - selection_len) / 2;
      start_y = (height - selection_len) / 2;
      {% endif %}

      var $btn = $('#btn-crop');
      var $input = $('#crop');
      function updateValue(c) {
        var crop = [width, height, c.h, c.w, c.x, c.x2, c.y, c.y2];
        $input.val(crop.join(','));
        $btn.removeAttr('disabled');
      }

      $image.Jcrop({
        aspectRatio: 1,
        minSize: [40, 40],
        bgColor: '#fff',
        bgOpacity: 0.25,
        setSelect: [start_x, start_y, start_x + selection_len, start_y + selection_len],
        onSelect: updateValue,
        onChange: updateValue,
        onRelease: function() {$btn.attr('disabled', 'disabled');}
      });
    }

    var interval_id = setInterval(function() {
      var $image = $("#crop-image");
      if ($image.width() && $image.height()) {
        registerCrop($image);
        clearInterval(interval_id);
      }
    }, 300);
  });
</script>
{% endblock javascripts %}