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

{% block localstyle %}
    img.crop-image{ width:100% }
{% endblock %}

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

        {% if ratio=="1:1" %}
            {% set class="width:90px; height:90px;" %}
        {% elseif ratio=="16:9" %}
            {% set class="width:160px; height:90px;" %}
        {% elseif ratio=="16:2" %}
            {% set class="width:160px; height:20px;" %}
        {% endif %}

        <div id='preview' style='overflow:hidden; {{class}} position: absolute; top: 0px; right: 10px;'>
        	<img src="/{{ appAlias }}/uploads/{{type}}/{{ file }}" style='position: relative;' alt='Thumbnail Preview' />
	    </div>

        <div style="width:100%; margin:65px auto 0px auto;">
            <div id="largeimg" style="width:800px;margin:auto;">
            </div>
        </div>
    {{ form_end(form) }}
{% endblock %}


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

        preview();
    }

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

        preview();
    }

    function preview(data) {
        {% if ratio=="1:1" %}
            var scaleX = 90 / $('#form_w').val();
            var scaleY = 90 / $('#form_h').val();
        {% elseif ratio=="16:9" %}
            var scaleX = 160 / $('#form_w').val();
            var scaleY = 160 / $('#form_h').val();
        {% elseif ratio=="16:2" %}
            var scaleX = 160 / $('#form_w').val();
            var scaleY = 160 / $('#form_h').val();
        {% endif %}

		$('#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() {
        {% if reportinput == "refresh" %}
            window.parent.location.reload();
		{% elseif reportinput != "none" %}
            window.parent.$("#{{ reportinput }}").val("thumb_{{ file }}");
            window.parent.$("#{{ reportinput }}_img").attr("src","/{{ appAlias }}/uploads/{{ type }}/thumb_{{ file }}");
		{% endif %}

		closeModal();
    }

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

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

		realheight=$('#largeimg').height();
		realwidth=$('#largeimg').width();

		if(realheight>505) { $('#largeimg').height(505); $('#largeimg').width("auto") }
		if($('#largeimg').width() > 868)  { $('#largeimg').width(868); $('#largeimg').height("auto") }

		resizeheight=$('#largeimg').height();
		resizewidth=$('#largeimg').width();

        $('#largeimg').CropSelectJs({
            imageSrc: "/{{ appAlias }}/uploads/{{type}}/{{ file }}",
            selectionResize: function(data) { resize(data); },
            selectionMove: function(data) { move(data); },
        });

        {% if ratio=="1:1" %}
            {% set nbratio=1 %}
        {% elseif ratio=="16:9" %}
            {% set nbratio=(16/9) %}
        {% elseif nbratio=="16:2" %}
            {% set class=(16/2) %}
        {% endif %}

        $('#largeimg').CropSelectJs('setSelectionAspectRatio',{{nbratio}});

        
	});
{% endblock %}