{% if entity.id is not null %}
    {% javascripts '@TwtoolsFileManagerBundle/Resources/public/upload.js' %}
        <script type="text/javascript" src="{{ asset_url }}"></script>
    {% endjavascripts %}
    {% javascripts '@TwtoolsComponentBundle/Resources/public/js/cropsy.js' %}
        <script type="text/javascript" src="{{ asset_url }}"></script>
    {% endjavascripts %}
    {% stylesheets '@TwtoolsComponentBundle/Resources/public/css/cropsy.css' %}
        <link rel="stylesheet" type="text/css" href="{{ asset_url }}" media="all"/>
        {% endstylesheets %}
        <a class="profile-edit" style="background-color:black;opacity:0.8;color:white;" href="javascript:void(0)" id="openPopUpSettings">{% trans %}Update{% endtrans %}</a>
{% endif %} 
<div id="popupSettings" class="hide" title="{% trans %}Update your profil picture{% endtrans %}">
        <div class="text-center clearfix" id="uploader-container" style="display:none;margin-top:0px;">
            {% if routes.route_delete is defined and routes.route_delete is not empty %}
                <a id="delete-link" class="btn btn-danger btn-default pull-right" href="javascript:deletePicture()" data-confirm="{% trans %}Are you sure you really want to delete this entity?{% endtrans %}" data-original-title="{% trans %}Delete this entity{% endtrans %}" onclick="return confirmDelete(this);">
                    <i class="fa fa-eraser"></i>
                    {% trans %}Delete{% endtrans %}
                </a>
            {% endif %}
            <div class="text-center clearfix" style="margin-top:60px;">
                <img id="profile-img-popup" src="{{ entity|avatar() }}" style="width:300px;height:auto;">
            </div>
            <div class="text-center clearfix" id="file-uploader" style="margin-top:10px;">
                <noscript>
                <p>Please enable JavaScript to use file uploader.</p>
                </noscript>
            </div>
        </div>
        <div id="cropbox">
            <div style="margin-top:5px;margin-bottom:5px;">Déplacez l'image dans le cadre et utilisez la barre de zoom située sous l'image, afin de sélectionner la partie de la photo qui vous intéresse.</div>
        </div>
        <script>
        var $ = this.jQuery;

        $(document).ready(function(){
            var uploader = new qq.FileUploader({
                dragText: '{% trans %}Drop files here to upload{% endtrans %}',
                uploadButtonText: "{% trans %}Upload a file{% endtrans %}",
                cancelButtonText: '{% trans %}Cancel{% endtrans %}',
                failUploadText: '{% trans %}Upload failed{% endtrans %}',
                //typeError
                element: document.getElementById('file-uploader'),
                action: '{{ path(routes.route_upload, {"id": entity.id}) }}',
                allowedExtensions: ['jpg', 'jpeg', 'png', 'gif'],        
                /*{#allowedExtensions: '{{ publisherparams }}',#}*/
                onSubmit: function(id, fileName){},
                onProgress: function(id, fileName, loaded, total){},
                onComplete: function(id, fileName, responseJSON){
                    if (responseJSON.success && typeof(responseJSON.values) != 'undefined' && typeof(responseJSON.values.path) != 'undefined') {
                            setTimeout( function () {
                                $(".upload-info").hide();
                                $(".qq-progress-bar").hide();
                                $(".progress").hide();
                                $("#uploader-container").hide();
                                $("#cropbox").show()
                                $(".btnPopupSettings").css({'display' : 'inline'});
                                $('#cropbox').cropsy({
                                    max_scale: 2,
                                    mask_padding: 40,
                                    viewport_height: 400,
                                    viewport_width: 400,
                                    url: responseJSON.values.path,
                                });
                            }, 1000);
                    } else if(! responseJSON.success && responseJSON.values.error == 'error : size image') {
                        $(".upload-info").hide();
                        $(".qq-progress-bar").hide();
                        $(".progress").hide();
                        alert('Image trop petite, choisissez une image avec des dimensions supérieures à 400*400px');
                    }
                },
                onCancel: function(id, fileName) {},
                debug: false
            });
        });
        </script>
    <div class="text-center clearfix">
        <input type="submit" name="validate_popup" class="btn btn-primary btnPopupSettings" style="display:none;margin-top:10px;" />
    </div>
</div>

<script>
$('#openPopUpSettings').click(function() {
    $( "#popupSettings" ).dialog({
        modal: true,
        width: 505,
        height:660,
    });

    $("#uploader-container").show();
    $("#cropbox").hide();
    $(".btnPopupSettings").css({'display' : 'none'});
});

$(".btnPopupSettings").click(function() {
    var $image = $('#profile-img'),
      offset = $image.offset(),
      position = $image.position(),
      src = $image.attr('src');
  
    var zoom = $('.cropsy-zoomSlider').slider("option", "value");
    var top = $( "input:hidden[name=cropsy-pos_y]" ).val();
    var left = $( "input:hidden[name=cropsy-pos_x]" ).val();
    $.ajax({
        type: "GET",
        url: '{{ path(routes.route_resize, {"id": entity.id}) }}',
        data: { top: top, left: left, zoom: zoom / 100 },
        dataType: "json",
        success: function(msg) {
            if (msg.success) {
                $("#pic").attr("src",$("#profile-img").attr("src") + '?new=' + Math.floor((Math.random()*100)+1));
                $("#profile-img-popup").attr("src", $("#profile-img").attr("src") + '?new=' + Math.floor((Math.random()*100)+1));
                $('#delete-link').show();
                $( "#popupSettings" ).dialog("close");
            }
        }
    });
});
{% if routes.route_delete is defined and routes.route_delete is not empty %}
function deletePicture() {
    $.ajax({
        type: "GET",
        url: '{{ path(routes.route_delete, {"id": entity.id}) }}',
        dataType: "json",
        success: function(msg) {
            if (msg.success) {
                $("#pic").attr("src", "{{ asset('img/defaultavatar/avatar.png') }}");
                $("#profile-img-popup").attr("src", "{{ asset('img/defaultavatar/avatar.png') }}");
                $( "#popupSettings" ).dialog("close");
                $('#delete-link').hide();
            }
        }
    });
}
{% endif %}
</script>