jQuery( document ).ready( function( $ ) {

    var $dropZone = $('#pexpo-core-image-drop-zone');
    var $fileInput = $('#pexpo-core-image-logo');
    var $preview = $('#pexpo-core-image-preview');
    var $dropText = $dropZone.find('.pexpo-core-image-drop-text');

    // Add a class when a file is dragged over the box
    $dropZone.on('dragover dragenter', function() {
        $dropZone.addClass('is-dragover');
    });

    // Remove the class when the file leaves or is dropped
    $dropZone.on('dragleave dragend drop', function() {
        $dropZone.removeClass('is-dragover');
    });

    // Handle the file selection (Click or Drop)
    $fileInput.on('change', function( event ) {
        var file = event.target.files[0];

        if ( file ) {
            var reader = new FileReader();

            reader.onload = function( e ) {
                // Show the image preview
                $preview.attr('src', e.target.result).css('display', 'block');
                
                // Optional: Change the text inside the box
                $dropText.text('Kép kiválasztva. Kattintson vagy húzzon ide egy újat a cseréhez.');
            };

            reader.readAsDataURL( file );
        } else {
            // Reset if user cancels
            $preview.hide().attr('src', '');
            $dropText.text('Húzza ide a képet, vagy kattintson a tallózáshoz');
        }
    });

});