{% extends "webadmin/base.html" %}
{% load i18n %}

{% comment %}
<!--
  Copyright (C) 2011 University of Dundee & Open Microscopy Environment.
  All rights reserved.

  This program is free software: you can redistribute it and/or modify
  it under the terms of the GNU Affero General Public License as
  published by the Free Software Foundation, either version 3 of the
  License, or (at your option) any later version.

  This program is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  GNU Affero General Public License for more details.

  You should have received a copy of the GNU Affero General Public License
  along with this program.  If not, see <http://www.gnu.org/licenses/>.
-->
{% endcomment %}

{% block title %}{% trans "Change avatar" %}{% endblock %}

{% block link %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static "webadmin/javascript/jquery.imgareaselect-0.9.10/css/imgareaselect-default.css" %}" type="text/css" media="screen"/>
{% endblock %}

{% block script %}
    {{ block.super }}

    <script type="text/javascript" src="{% static "webadmin/javascript/jquery.imgareaselect-0.9.10/jquery.imgareaselect.js" %}"></script>
    
    <script type="text/javascript">
    
    {% if edit_mode %}
    function preview(img, selection) { 
        var scaleX = 100 / (selection.width || 1); 
        var scaleY = 100 / (selection.height || 1); 

        $('#thumbnail + div > img').css({ 
            width: Math.round(scaleX * {{ photo_size.0.0 }}) + 'px', 
            height: Math.round(scaleY * {{ photo_size.0.1 }}) + 'px',
            marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px', 
            marginTop: '-' + Math.round(scaleY * selection.y1) + 'px' 
        });
        $('#x1').val(selection.x1);
        $('#y1').val(selection.y1);
        $('#x2').val(selection.x2);
        $('#y2').val(selection.y2);
        $('#w').val(selection.width);
        $('#h').val(selection.height);
    } 
    {% endif %}
    
    $(document).ready(function () { 
        
        {% if edit_mode %}
        $('#save_thumb').click(function() {
            var x1 = $('#x1').val();
            var y1 = $('#y1').val();
            var x2 = $('#x2').val();
            var y2 = $('#y2').val();
            var w = $('#w').val();
            var h = $('#h').val();
            if(x1=="" || y1=="" || x2=="" || y2=="" || w=="" || h==""){
                alert("You must make a selection first");
                return false;
            }else{
                return true;
            }
        });
        {% endif %}
    }); 

    {% if edit_mode %}
    $(window).load(function () { 
        var dim = {{ photo_size.0.0 }}/4
        var x1 = {{ photo_size.0.0 }}/2-dim
        var x2 = {{ photo_size.0.0 }}/2+dim
        var y1 = {{ photo_size.0.1 }}/2-dim
        var y2 = {{ photo_size.0.1 }}/2+dim
        $('#thumbnail').imgAreaSelect({ x1: x1, y1: y1, x2: x2, y2: y2, selectionOpacity: 0.2, aspectRatio: '1:1', handles: 'corners', onSelectChange: preview }); 
    });
    {% endif %}
    </script>
    
    
{% endblock %}

{% block center_details %}
{{ block.super }}
<div class="one_column_content">
    <h1>{% trans "Change avatar" %}</h1>
    
    <h1><a href="{% url 'wamyaccount' %}" style="position:relative; top:-38px; float:right" title="Go Back to User settings">Back to User Settings</a></h1>
    
    
{% if edit_mode %}
    <img src="{% url 'wamyphoto' %}" style="float: left; margin-right: 10px;" id="thumbnail" alt="Create Thumbnail" />
    <div style="border:1px #999999 solid; float:left; position:relative; overflow:hidden; width:100px; height:100px;">
        <img src="{% url 'wamyphoto' %}" style="position: relative;" alt="Thumbnail Preview" />
    </div>
    <div class="clear"> </div>
    <p>Drag or adjust the region on the image to select an area.</p>
    
    <form name="thumbnail" action="{% url 'wamanageavatar' ome.eventContext.userId "crop" %}" method="post" class="standard_form">{% csrf_token %}
        <input type="hidden" name="x1" value="" id="x1" />
        <input type="hidden" name="y1" value="" id="y1" />
        <input type="hidden" name="x2" value="" id="x2" />
        <input type="hidden" name="y2" value="" id="y2" />
        <input type="submit" value="Crop" id="save_thumb" />
    </form>
    
{% else %}
    <div style="width:150px">
        {% if photo_size %}
        <img src="{% url 'wamyphoto' %}" style="max-width:120px; max-height:120px" class="imgzoom"/>
        {% else %}
        <p><center><img src="{% url 'wamyphoto' %}" class="imgzoom"/></center>
        <br/><ul class="errorlist"><li>No avatar set.</li></ul></p>
        {% endif %}
    </div>
    
    <div >
      {% if photo_size %}<p><a href="{% url 'wamanageavatar' ome.eventContext.userId "editphoto" %}"> Edit picture <img title="Crop" src="{% static "webadmin/image/frame_edit.png" %}" /></a></p>{% endif %}
        <form enctype="multipart/form-data" method="post" action="{% url 'wamanageavatar' ome.eventContext.userId "upload" %}" class="standard_form settings_form">{% csrf_token %}
            <p>Upload new picture. Select an image file on your computer (max 200KB):</p>
            
            {% for field in form_file %}
                {% if field.errors %}{{ field.errors }}{% endif %}<br />
                {{ field }}{{ field.help_text|safe }}
                <br />
            {% endfor %}
             <input type="submit" value="{% trans 'Upload' %}" />
        </form>
    </div>
</div>
{% endif %}

{% endblock %}