// Enqueue scripts
wp_enqueue_script( 'jquery' );
wp_enqueue_media();


/*
 * Generate the fields
 */
function generateImageUploadFields( $inputName, $buttonName, $previewImageID = '', $buttonValue = '')
{
?>
    <div class="image-upload"
         data-input="<?php echo $inputName;?>"
         data-button="<?php echo $buttonName;?>"
         data-preview="<?php echo $previewImageID;?>">
        <input type="hidden" name="<?php echo $inputName;?>" id="<?php echo $inputName;?>"/>
        <input type="button" name="<?php echo $buttonName;?>" id="<?php echo $buttonName;?>"
               class="button-secondary" value="<?php echo $buttonValue;?>"/>
        <?php if($previewImageID) { ?>
        <div class="image-preview-container">
            <img id="<?php echo $previewImageID;?>" class="previewImage" src=""/>
            <span class="deleteImagePreview"></span>
        </div>
        <?php } ?>
    </div>

    <?php
}


/*
 * Localized admin js file
 */

//<editor-fold desc=">>> IMAGE UPLOAD">

// Find all Image Upload containers
var _containers = $('.image-upload');
if(_containers)
{
    // Enable the image upload functionality for each
    $.each(_containers, function(a,b)
    {
        var container = $(b);
        // Check attributes
        if(container.attr('data-input').length && container.attr('data-button').length)
        {
            var input = $('#'+container.attr('data-input')),
                button = $('#'+container.attr('data-button')),
                previewImg = null,
                deleteImageButton = null,
                title = ((typeof(WPK.imageUploadTitle) != 'undefined') ? WPK.imageUploadTitle : 'Upload Image');

            if(container.attr('data-preview').length) {
                previewImg = $('#' + container.attr('data-preview'));
                deleteImageButton = $('.deleteImagePreview', container);
            }

            if(deleteImageButton)
            {
                deleteImageButton.on('click', function(e){
                    e.preventDefault(); e.stopPropagation();
                    if(previewImg) {
                        previewImg.removeClass('imagePreview-visible').attr('src', '');
                        input.val('');
                    }
                });
            }

            if(input && button)
            {
                button.on('click', function(e)
                {
                    e.preventDefault();
                    var image = wp.media({
                        title: title,
                        // multiple: true if you want to upload multiple files at once
                        multiple: false
                    }).open()
                        .on('select', function(e){
                            // This will return the selected image from the Media Uploader, the result is an object
                            var uploaded_image = image.state().get('selection').first();
                            // Convert uploaded_image to a JSON object to make accessing it easier
                            var image_url = uploaded_image.toJSON().url;
                            // Set the url as value to the input field
                            input.val(image_url);
                            // Display the image
                            if(previewImg) {
                                previewImg.attr('src', image_url).addClass('imagePreview-visible');
                            }
                        });
                });
            }
        }
    });
}
//</editor-fold desc=">>> IMAGE UPLOAD">