@@ -22,10 +22,14 @@

 .rc_feature_image {

     max-width: 100%;

-    max-height: 80%;

     width: 50%;

-    height: 50%;

+    height: auto;

 }

 .rc_remove_feature_image {

     display: none;

+}

+.rc-feature-image-preview img {

+    max-width: 100%;

+    width: 50%;

+    height: auto;

 }

\ No newline at end of file

@@ -56,29 +56,59 @@ jQuery(document).ready(function(){

         return false;

     });

     // reservation feature image uploader

-    window.original_send_to_editor = window.send_to_editor;

-    window.send_to_editor = function(html){

-        fileurl = jQuery('img', html).attr('src');

-        jQuery('#rc_feature_image').val(fileurl);

-        tb_remove();

-        if(jQuery('#rc_feature_image_upload').hasClass('has_image')){

-            jQuery('.rc_feature_image').attr('src', fileurl);

-            jQuery('.rc_remove_feature_image').show();

-        } else {

-            var img = jQuery('<img>').attr('src',fileurl).addClass('rc_feature_image size-thumbnail');

-            jQuery('#rc_feature_image_upload').addClass('has_image').html(img);

-            jQuery('.rc_remove_feature_image').show();

-        }

-    };

     if(jQuery('#rc_feature_image_upload').hasClass('has_image')){

         jQuery('.rc_remove_feature_image').show();

+    } else {

+        jQuery('.rc_remove_feature_image').hide();

     }

-    jQuery('.rc_remove_feature_image').on('click', function(){

-        jQuery('#rc_feature_image').val('');

-        var replace_text = jQuery('#rc_feature_image_upload').attr('title');

-        jQuery('#rc_feature_image_upload').html(replace_text);

-        jQuery(this).hide();

-        return false;

+    var rc_feature_uploader;

+    jQuery('#rc_feature_image_upload').on('click', function(e){

+        e.preventDefault();

+        e.stopPropagation();

+        var parent = jQuery(this).parents('.rc_feature_image_uploader');

+        if( rc_feature_uploader ){

+            rc_feature_uploader.open();

+            return;

+        }

+        /** @var object wp recieved form wordpress */

+        custom_uploader = wp.media({

+            title: "Set featured image for Reservation update",

+            button: {

+                text: "Choose Image"

+            },

+            multiple: false

+        });

+        custom_uploader.on( "select", function() {

+            var image = custom_uploader.state().get( "selection" );

+            var preview = jQuery( ".rc-feature-image-preview", parent );

+            image.each(function( file ) {

+                jQuery( "#rc_feature_image", parent ).val( file.toJSON().url );

+                var img = jQuery( "img", preview );

+                if ( img.length === 0 ) {

+                    preview.append( '<img src="' + file.toJSON().url + '" />' );

+                } else {

+                    img.attr( "src", file.toJSON().url );

+                }

+                preview.css( "display", "block" );

+            });

+        });

+        custom_uploader.open();

     });

+    // 削除

+    jQuery( ".rc_remove_feature_image" ).on( 'click', function( e ) {

+        

+        e.preventDefault();

+        e.stopPropagation();

+

+        var parent = jQuery(this).parents( ".rc_feature_image_uploader" );

+        jQuery( "#rc_feature_image", parent ).val('');

+        var preview = jQuery( ".rc-feature-image-preview", parent );

+

+        if (  jQuery( "img", preview ).length > 0 ) {

+            jQuery( "img", preview ).remove();

+        }

+        

+    });

+

 });

@@ -228,9 +228,23 @@ function add_rucy_metabox_inside()

 <label class="rc_feature_accept">

     <input type="checkbox" name="<?php echo $reserv_accept_feature_name; ?>" value="1" <?php echo ($reserv_accept_feature == "1") ? "checked" : ""; ?>> <?php _e('Accept reserve update feature image.', RC_TXT_DOMAIN); ?>

 </label>

-<p><a href="media-upload.php?type=image&TB_iframe=1&width=753&height=522&post_id=<?php echo $post->ID ?>" class="thickbox<?php echo ($reserv_feature_image != '') ? ' has_image' : ''; ?>" id="rc_feature_image_upload" title="<?php _e('Set featured image Reservation', RC_TXT_DOMAIN) ?>"><?php echo ($reserv_feature_image != '') ? $reserv_feature_image : __('Set featured image for Reservation', RC_TXT_DOMAIN); ?></a></p>

-<p><a href="#" class="rc_remove_feature_image"><?php _e('Remove Featured image for Reservation', RC_TXT_DOMAIN) ?></a></p>

+<div class="rc_feature_image_uploader">

+<!--<p><a href="media-upload.php?type=image&TB_iframe=1&width=753&height=522&post_id=<?php echo $post->ID ?>" class="thickbox<?php echo ($reserv_feature_image != '') ? ' has_image' : ''; ?>" id="rc_feature_image_upload" title="<?php _e('Set featured image Reservation', RC_TXT_DOMAIN) ?>"><?php echo ($reserv_feature_image != '') ? $reserv_feature_image : __('Set featured image for Reservation', RC_TXT_DOMAIN); ?></a></p>-->

+<p><button id="rc_feature_image_upload" class="button rc-feature-uploader-button <?php echo ($reserv_feature_image != '') ? ' has_image' : ''; ?>"><?php  _e('Set featured image for Reservation', RC_TXT_DOMAIN); ?></button></p>

+

+<div class="rc-feature-image-uploader__ctrl">

+    <div class="rc-feature-image-preview">

+        <?php

+        if ( ! empty( $reserv_feature_image ) ) {

+           echo $reserv_feature_image;

+        }

+        ?> 

+    </div>

+</div>

+

+<p><button class="button rc_remove_feature_image"><?php _e('Remove Featured image for Reservation', RC_TXT_DOMAIN) ?></button></p>

 <input type="hidden" id="rc_feature_image" name="<?php echo $reserv_feature_name ?>" value="<?php echo $reserv_feature ?>" />

+</div>

 </fieldset>

 <?php 

     }