$(window).on('load', function () {

    $('.lc-ckfinder-wrap').each(function(){
        $widget = $(this);

        if($widget.find('.lc-ckfinder-field').val() !== ''){
            $widget.find('.lc-ckfinder-illu').css('background-image', "url('"+$widget.find('.lc-ckfinder-field').val()+"')");
            $widget.find('.lc-ckfinder-remove').show();
        }

        $widget.find('.lc-ckfinder-button').on( 'click', function( e ) {
            e.preventDefault();
            CKFinder.popup( {
                chooseFiles: true,
                onInit: function( finder ) {
                    finder.on( 'files:choose', function( evt ) {
                        var file = evt.data.files.first();
                        $widget.find('.lc-ckfinder-illu').css('background-image', "url('"+file.getUrl()+"')");
                        $widget.find('.lc-ckfinder-remove').show();
                        $widget.find('.lc-ckfinder-field').val(file.getUrl());
                    } );
                    finder.on( 'file:choose:resizedImage', function( evt ) {
                        var output = document.getElementById( '{{ id }}' );
                        output.value = evt.data.resizedUrl;
                    } );
                }
            } );
        } );
        $widget.find('.lc-ckfinder-remove').on('click', function () {
            $widget.find('.lc-ckfinder-remove').hide();
            $widget.find('.lc-ckfinder-illu').css('background-image', 'none');
            $widget.find('.lc-ckfinder-field').val("");
        })
    });

    if ($('.field-ckfinder_file_chooser').length > 0) {
        CKFinder.config({connectorPath: '/ckfinder/connector'});
    }
});