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

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

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

        <div style="width:800px; height:590px; overflow:hidden; margin:65px auto 0px auto;">
            <div id="largeimg" class="crop-select-js" style="width:800px;">
            </div>
        </div>
    {{ form_end(form) }}

{% endblock %}


{% block localjavascript %}
    function move(data) {
		$('#form_x').val(data.xScaledToImage);
		$('#form_y').val(data.yScaledToImage);

        preview();
    }

    function resize(data) {
		$('#form_w').val(data.widthScaledToImage);
		$('#form_h').val(data.heightScaledToImage);

        preview();
    }

    function preview(data) {
		var scaleX = 90 / $('#form_w').val();
		var scaleY = 90 / $('#form_h').val();

		$('#preview img').css({
			width: Math.round(scaleX * $('#largeimg').width()) + 'px',
			height: Math.round(scaleY * $('#largeimg').height()) + 'px',
			marginLeft: '-' + Math.round(scaleX * $('#form_x').val()) + 'px',
			marginTop: '-' + Math.round(scaleY * $('#form_y').val()) + 'px'
		});

	}

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

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

    $(document).ready(function() {
        window.parent.$(".modal-title").html("ETAPE 2 - Découper votre image");

        $('#largeimg').CropSelectJs({
            imageSrc: "/{{ appAlias }}/uploads/avatar/{{ app.session.get('uploadavatar') }}",
            selectionResize: function(data) { resize(data); },
            selectionMove: function(data) { move(data); },
        });
        $('#largeimg').CropSelectJs('setSelectionAspectRatio',1);

        
	});
{% endblock %}