function renderMediaUploader($) {
    'use strict';

    var file_frame, image_data, json;

    /**
     * If an instance of file_frame already exists, then we can open it
     * rather than creating a new instance.
     */
    if ( undefined !== file_frame ) {
 
        file_frame.open();
        return;
 
    }
    /**
     * If we're this far, then an instance does not exist, so we need to
     * create our own.
     *
     * Here, use the wp.media library to define the settings of the Media
     * Uploader. We're opting to use the 'post' frame which is a template
     * defined in WordPress core and are initializing the file frame
     * with the 'insert' state.
     *
     * We're also not allowing the user to select more than one image.
     */
    file_frame = wp.media.frames.file_frame = wp.media({
        frame:    'post',
        state:    'insert',
        multiple: false
    });

    /**
     * Setup an event handler for what to do when an image has been
     * selected.
     *
     * Since we're using the 'view' state when initializing
     * the file_frame, we need to make sure that the handler is attached
     * to the insert event.
     */
    file_frame.on( 'insert', function() {
 
        // Read the JSON data returned from the Media Uploader
        json = file_frame.state().get( 'selection' ).first().toJSON();

        // First, make sure that we have the URL of an image to display
        if ( 0 > $.trim( json.url.length ) ) {
            return;
        }
    
        // After that, set the properties of the image and display it
        $( '#featured-footer-image-container' )
            .children( 'img' )
                .attr( 'src', json.url )
                .attr( 'alt', json.caption )
                .attr( 'title', json.title )
                        .show()
            .parent()
            .removeClass( 'hidden' );

        

        // Next, hide the anchor responsible for allowing the user to select an image
        $( '#featured-footer-image-container' )
            .prev()
            .hide();

        // Display the anchor for the removing the featured image
        $( '#featured-footer-image-container' )
            .next()
            .show()
            .removeClass( 'hidden' );
        
        // Store the image's information into the meta data fields
        $( '#footer-thumbnail-src' ).val( json.url );
        $( '#footer-thumbnail-title' ).val( json.title );
        $( '#footer-thumbnail-alt' ).val( json.title );


        

    
    });
 
    // Now display the actual file_frame
    file_frame.open();
 
}
(function( $ ) {
    'use strict';
 
    $(function() {
        $( '#set-footer-thumbnail' ).on( 'click', function( evt ) {
 
            // Stop the anchor's default behavior
            evt.preventDefault();
 
            // Display the media uploader
            renderMediaUploader($);
 
        });
        
        $( '#remove-footer-thumbnail' ).on( 'click', function( evt ) {
     
            // Stop the anchor's default behavior
            evt.preventDefault();
 
            // Remove the image, toggle the anchors
            resetUploadForm( $ );
     
        }); 
    });
         /**
         * Callback function for the 'click' event of the 'Remove Footer Image'
         * anchor in its meta box.
         *
         * Resets the meta box by hiding the image and by hiding the 'Remove
         * Footer Image' container.
         *
         * @param    object    $    A reference to the jQuery object
         * @since    0.2.0
         */
        function resetUploadForm( $ ) {
            'use strict';
         
            // First, we'll hide the image
            $( '#featured-footer-image-container' )
                .children( 'img' )
                .hide();
         
            // Then display the previous container
            $( '#featured-footer-image-container' )
                .prev()
                .show();
         
            // Finally, we add the 'hidden' class back to this anchor's parent
            $( '#featured-footer-image-container' )
                .next()
                .hide()
                .addClass( 'hidden' );
            
            // Finally, we reset the meta data input fields
            $( '#footer-thumbnail-src' ).val( '' );
            $( '#footer-thumbnail-title' ).val( '' );
            $( '#footer-thumbnail-alt' ).val( '' );
     
        }
    }
)( jQuery );




// jQuery(function(jQuery) {
     
//     jQuery('.custom_upload_image_button').click(function() {
//         formfield = jQuery(this).siblings('.custom_upload_image');
//         preview = jQuery(this).siblings('.custom_preview_image');
//         tb_show('', 'media-upload.php?type=image&TB_iframe=true');
//         window.send_to_editor = function(stuff) {
//             var data = jQuery(stuff).filter('img');
//             imgurl = data.attr("src");
//             classes = data.attr("class");
//             id = classes.replace(/(.*?)wp-image-/, '');
//             formfield.val(id);
//             preview.attr('src', imgurl);
//             tb_remove();
//         }
//         return false;
//     });
     
//     jQuery('.custom_clear_image_button').click(function() {
//         var defaultImage = jQuery(this).parent().siblings('.custom_default_image').text();
//         jQuery(this).parent().siblings('.custom_upload_image').val('');
//         jQuery(this).parent().siblings('.custom_preview_image').attr('src', defaultImage);
//         return false;
//     });
 
// });