{% extends "omeroweb/base.html" %}
{% load i18n %}
{% load markup %}
{% load custom_tags %}

{% block link %}
    <link rel="stylesheet" href='{% url webstatic "css/myaccount.css" %}' type="text/css" media="screen"/>
{% endblock %}

{% block jscript %}
    <script type="text/javascript" src="{% url webstatic "javascript/jquery_1.2.6.js" %}"></script>
    <script type="text/javascript" src="{% url webstatic "javascript/jquery.imgareaselect.js" %}"></script>
{% endblock %}

{% block script %}
    <script type="text/javascript" src="{% url webstatic "javascript/menu.js" %}"></script>
    
    {% if nav.edit_mode %}
    <script type="text/javascript">
    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);
    } 

    $(document).ready(function () { 
    	$('#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;
    		}
    	});
    }); 

    $(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: true, onSelectChange: preview }); 
    });

    </script>
    {% endif %}
    
{% endblock %}

{% block path %}
    {{ path }}
{% endblock %}

{% block center %}
<div  class="myform">
<h1>{% trans "My account" %}</h1>

<p>{% trans "Fields marked with an * are mandatory." %}</p>

<form action="{% url myaccount "save" %}" method="POST">
<table>
  <tbody>
    {% for field in form %}
    <tr><td class="form">{{ field.label_tag }}{% if field.field.required %}*{% endif %}</td><td class="input">{{ field }}</td><td>{% if field.errors %}{{ field.errors }}{% endif %}{{ field.help_text }}</td></tr>
    {% endfor %}
    {% if ldapAuth %}<tr><td class="form">LDAP: </td><td colspan="2">{{ ldapAuth }}</td></tr>{% endif %}
  </tbody>
  <tr><td>&nbsp;</td><td colspan="2" class="input"><br/><input type="submit" value="{% trans 'Save' %}" /></td></tr>
</table>
</form>

</div>

<div class="photo">
    <div align="center">
        {% if nav.edit_mode %}
        
		<img src="{% url myphoto %}" 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 myphoto %}" style="position: relative;" alt="Thumbnail Preview" />
		</div>
		<div class="clear"> </div>
		<h1><form name="thumbnail" action="{% url myaccount "crop" %}" method="post">
			<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" name="Cancel" value="Cancel" onclick="history.back();return false" />
			<input type="submit" name="upload_thumbnail" value="Crop" id="save_thumb" />
		</form></h1>
		{% else %}
		    <p>
    		    {% if photo_size %}
    		    <img src="{% url myphoto %}" width="150" height="150" class="imgzoom"/>
    		    <br/>Original size: ({{ photo_size.0.0 }}, {{ photo_size.0.1 }}) {{ photo_size.1|filesizeformat }}
    		    <br/><a href="{% url myaccount "editphoto" %}">Crop this picture.</a>
        		{% else %}
        		<img src="{% url myphoto %}" />
        		<ul class="errorList"><li>You have not upload photo for your profile yet.</li></ul>
        		{% endif %}
    		</p>
		{% endif %}
	</div>
	
    <h1>Upload your photo</h1>
    <div class="body">
      <p>
        <form enctype="multipart/form-data" method="post" action="{% url myaccount "upload" %}">
            <table>
              <tbody>
                {% for field in form_file %}
                <tr><td class="input">{{ field }}</td><td>{% if field.errors %}{{ field.errors }}{% endif %}{{ field.help_text }}</td></tr>
                {% endfor %}
              </tbody>
              <tr><td colspan="2" class="input"><br/><input type="submit" value="{% trans 'Upload' %}" /></td></tr>
            </table>
        </form>
      </p>
    </div>
</div>
{% endblock %}