{% extends 'base.html.twig' %}

{% block localstyle %}
    #page-wrapper {
        padding: 0px;
        min-height:0px !important;
    }
{% endblock %}

{% block pagewrapper %}
    {{ form_start(form) }}
        {{ form_widget(form.submit) }} <a class="btn btn-secondary" onClick="closeModal();">Annuler</a>

        <div id='preview' style='overflow:hidden; width:90px; height:90px; position: absolute; top: 0px; right: 10px;'>
        	<img src="{{ asset('uploads/avatar/' ~  app.session.get('uploadavatar')) }}" style='position: relative;' alt='Thumbnail Preview' />
	    </div>


        <div style="margin-top:50px;">
            <img id="largeimg" src="{{ asset('uploads/avatar/' ~ app.session.get('uploadavatar')) }}">
        </div>
    {{ form_end(form) }}
{% endblock %}


{% block localjavascript %}
	function preview(img, selection) {
		var scaleX = 90 / selection.width;
		var scaleY = 90 / selection.height;

		$('#preview img').css({
			width: Math.round(scaleX * $('#largeimg').width()) + 'px',
			height: Math.round(scaleY * $('#largeimg').height()) + 'px',
			marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
			marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
		});
		$('#form_x1').val(selection.x1);
		$('#form_y1').val(selection.y1);
		$('#form_x2').val(selection.x2);
		$('#form_y2').val(selection.y2);
		$('#form_w').val(selection.width);
		$('#form_h').val(selection.height);
	}

    function reportThumb() {
        window.parent.$("#user_avatar").val("thumb_{{ app.session.get('uploadavatar') }}");
        url="{{ asset('uploads/avatar/thumb_' ~ app.session.get('uploadavatar')) }}";
        window.parent.$("#user_avatar_img").attr("src",url);
        closeModal();
    }

    function closeModal() {
        window.parent.$("#mymodal").modal('hide');
    }

    $(window).on("load",function () {
        $('#largeimg').imgAreaSelect({ aspectRatio: '1:1', onSelectChange: preview });
        
        
        var selection = new Object();
        if($('#largeimg').height()<$('#largeimg').width()) {
            selection.width = $('#largeimg').height();
            selection.height = $('#largeimg').height();
        }
        else {
            selection.width = $('#largeimg').width();
            selection.height = $('#largeimg').width();
        }

        selection.x1=0;
        selection.x2=0;
        selection.y1=0;
        selection.y2=0;

        preview($('#largeimg'),selection);
      
	});
{% endblock %}
