(function($){
    
    if(typeof acf === 'undefined')
        return;
    
    function acfe_flexible_modal_init($layout){
        
        // Flexible
        var $flexible = $layout.closest('.acf-field-flexible-content');
        
        // Add class
        $layout.addClass('acfe-modal-edition');
        
        // Remove collapse button
        $layout.find('> .acf-fc-layout-controls > a.-collapse').remove();
        
        // Remove potential duplicate
        $layout.find('> .acfe-flexible-collapsed-placeholder').remove();
        
        // Wrap content
        $layout.find('> .acf-fields, > .acf-table').wrapAll('<div class="acfe-modal"><div class="acfe-modal-wrapper"><div class="acfe-modal-content"></div></div></div>');
        
        if($flexible.attr('data-acfe-flexible-preview')){
            
            var previews = $.parseJSON($flexible.attr('data-acfe-flexible-preview'));
            var layout_name = $layout.data('layout');
            var preview = previews[layout_name];
        
        }
        
        if(typeof preview !== 'undefined'){
            
            // Create button
            $layout.find('> .acf-fc-layout-controls').after('' +
                '<a href="javascript:void(0);" class="acfe-flexible-collapsed-placeholder acfe-flexible-collapsed-preview" data-event="edit-layout" title="Edit layout">' +
                '   <button class="button">' +
                '       <span class="dashicons dashicons-edit"></span>' +
                '   </button>' +
                '   <div class="acfe-flexible-collapsed-overlay"></div>' +
                '   <img src="' + preview + '" />' +
                '</a>'
            );
            
        }
        
        else{
            
            // Create button
            $layout.find('> .acf-fc-layout-controls').after('' +
                '<a href="#" class="acfe-flexible-collapsed-placeholder" data-event="edit-layout" title="Edit layout">' +
                '   <div>' +
                '       <button class="button">' +
                '           <span class="dashicons dashicons-edit"></span>' +
                '       </button>' +
                '   </div>' +
                '</a>'
            );
    
        }
        
    }
    
    acf.addAction('new_field/type=flexible_content', function(flexible){
        
        if(flexible.$el.attr('data-acfe-flexible-modal-edition')){
            
            /* 
             * Existing Layouts
             */
            var $layouts = flexible.$layouts();
            
            if($layouts.length){
                
                $layouts.each(function(){
                    
                    // var
                    var $layout = $(this);
                    
                    // Force open layout
                    flexible.openLayout($layout);
                    
                    // init
                    acfe_flexible_modal_init($(this));
                    
                });
                
            }
            
            /* 
             * Available Layouts
             */
            var $clones = flexible.$clones();
            
            if($clones.length){
                
                $clones.each(function(){
                    
                    // var
                    var $layout = $(this);
                    
                    // init
                    acfe_flexible_modal_init($(this));
                    
                    
                });
                
            }
            
            // Button action
            flexible.acfe_flexible_modal_edition = function(e, $el){
                
                // Modal data
                var $modal_content = $el.closest('.acfe-modal-edition').find('> .acfe-modal');
                var $modal_title = $el.closest('.acfe-modal-edition').find('> .acf-fc-layout-handle').html();
                
                // Open modal
                var $modal = acfe.modal.open($modal_content, {
                    title: $modal_title,
                    footer: 'Close'
                });
                
            }
            
            flexible.addEvents({'click [data-event="edit-layout"]': 'acfe_flexible_modal_edition'});
        
        }
        
    });
    
    // Field Error
    acf.addAction('invalid_field', function(field){
        
        if(!field.$el.closest('.acfe-modal-edition').length)
            return;
        
        field.$el.parents('.acfe-modal-edition').addClass('acfe-modal-edition-error');
        
    });
    
})(jQuery);