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

    // Uploading files
    var file_frame;

    jQuery.fn.upload_exzo_image = function( button ) {
        var button_id = button.attr('id');
        var field_id = button_id.replace( '_button', '' );

        // If the media frame already exists, reopen it.
        if ( file_frame ) {
            file_frame.open();
            return;
        }

        // Create the media frame.
        file_frame = wp.media.frames.file_frame = wp.media({
            title: jQuery( this ).data( 'uploader_title' ),
            button: {
                text: jQuery( this ).data( 'uploader_button_text' ),
            },
            multiple: false
        });

        // When an image is selected, run a callback.
        file_frame.on( 'select', function() {
            var attachment = file_frame.state().get('selection').first().toJSON();
            jQuery("#"+field_id).val(attachment.id);
            jQuery("#exzoimagediv img").attr('src',attachment.url);
            jQuery( '#exzoimagediv img').show();
            jQuery( '#' + button_id ).attr( 'id', 'remove_exzo_image_button' );
            jQuery( '#remove_exzo_image_button' ).text( 'Remove exzo image' );
        });

        // Finally, open the modal
        file_frame.open();
    };

    jQuery('#exzoimagediv').on( 'click', '#upload_exzo_image_button', function( event ) {
        event.preventDefault();
        jQuery.fn.upload_exzo_image( jQuery(this) );
    });

    jQuery('#exzoimagediv').on( 'click', '#remove_exzo_image_button', function( event ) {
        event.preventDefault();
        jQuery( '#upload_exzo_image' ).val( '' );
        jQuery( '#exzoimagediv img' ).attr( 'src', '' );
        jQuery( '#exzoimagediv img' ).hide();
        jQuery( this ).attr( 'id', 'upload_exzo_image_button' );
        jQuery( '#upload_exzo_image_button' ).text( 'Set exzo image' );
    });

});