var custom_folio = function(){
    var custom_folio_items = new Array();
    
    if ($.cookie('custom_folio')) {
        custom_folio_items = $.cookie('custom_folio').split(',');
        custom_folio_items = $.map(custom_folio_items, function(a){
            return parseInt(a);
        });
    }
    
    console.log("Custom folio items:", custom_folio_items);
    
    function init(){
        // Initialize click handlers
        console.log("Initializing custom folio handlers");
        
        // Handle individual image removal
        $('#custom-folio .remove').on('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            
            var $gridItem = $(this).closest('.grid-item');
            var imageId = parseInt($gridItem.attr('id'));
            
            console.log("Removing image ID:", imageId);
            
            // Use Ajax to delete the image server-side
            $.ajax({
                url: ajaxurl || '/wp-admin/admin-ajax.php',
                type: 'POST',
                data: {
                    'action': 'custom_folio_delete',
                    'image_id': imageId
                },
                success: function(response) {
                    console.log("Image deleted response:", response);
                    
                    if (response.success) {
                        // Remove from local array
                        delete_image(imageId);
                        
                        // Remove from DOM with animation
                        $gridItem.fadeOut(300, function() {
                            $(this).remove();
                            
                            // If no images left, show empty message
                            if ($('#custom-folio .grid-item').length === 0) {
                                $('#custom-folio .galleries').html('You have no images in your folio');
                            }
                            
                            // Reinitialize grid layout if needed
                            if ($.fn.masonry && $('#custom-folio .grid').length) {
                                $('#custom-folio .grid').masonry('layout');
                            }
                        });
                    }
                },
                error: function(xhr, status, error) {
                    console.error("Error deleting image:", error);
                    
                    // Still delete locally even if AJAX fails
                    delete_image(imageId);
                    
                    // Remove from DOM
                    $gridItem.fadeOut(300, function() {
                        $(this).remove();
                        
                        // If no images left, show empty message
                        if ($('#custom-folio .grid-item').length === 0) {
                            $('#custom-folio .galleries').html('You have no images in your folio');
                        }
                    });
                }
            });
        });
        
        // Handle clear all button
        $('#custom-folio .clear').on('click', function(e) {
            e.preventDefault();
            
            if (confirm('Are you sure you want to clear all images from your folio?')) {
                console.log("Clearing all images");
                
                // Use Ajax to clear all images server-side
                $.ajax({
                    url: ajaxurl || '/wp-admin/admin-ajax.php',
                    type: 'POST',
                    data: {
                        'action': 'custom_folio_clear'
                    },
                    success: function(response) {
                        console.log("Clear all response:", response);
                        
                        if (response.success) {
                            // Clear local array
                            clear_all();
                            
                            // Remove all grid items with animation
                            $('#custom-folio .grid-item').fadeOut(300, function() {
                                $(this).remove();
                            });
                            
                            // Show empty message after animations complete
                            setTimeout(function() {
                                $('#custom-folio .galleries').html('You have no images in your folio');
                            }, 350);
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error("Error clearing all images:", error);
                        
                        // Still clear locally even if AJAX fails
                        clear_all();
                        
                        // Remove all grid items with animation
                        $('#custom-folio .grid-item').fadeOut(300, function() {
                            $(this).remove();
                        });
                        
                        // Show empty message after animations complete
                        setTimeout(function() {
                            $('#custom-folio .galleries').html('You have no images in your folio');
                        }, 350);
                    }
                });
            }
        });
        
        // Initialize any Masonry grid if present
        if ($.fn.masonry && $('#custom-folio .grid').length) {
            $('#custom-folio .grid').masonry({
                itemSelector: '.grid-item',
                percentPosition: true
            });
        }
    }
    
    function add_image(id){
        if(jQuery.inArray(id, custom_folio_items) == -1){
            custom_folio_items.push(id);
            _updateData();
            
            // Optional: Also update via AJAX
            $.ajax({
                url: ajaxurl || '/wp-admin/admin-ajax.php',
                type: 'POST',
                data: {
                    'action': 'custom_folio_add',
                    'image_id': id
                },
                success: function(response) {
                    console.log("Image added response:", response);
                }
            });
        }
    }
    
    function delete_image(id){
        if(jQuery.inArray(id, custom_folio_items) != -1){
            custom_folio_items = jQuery.grep(custom_folio_items, function(value) {
                return value != id;
            });
            _updateData();
        }
    }
    
    function clear_all(){
        custom_folio_items = new Array();
        _updateData();
    }
    
    function _updateData(){
        $.cookie('custom_folio', custom_folio_items, { expires: 30, path: '/'});
    }
    
    // Initialize on load
    $(document).ready(function() {
        init();
    });
    
    return {
        add_image: add_image,
        delete_image: delete_image,
        clear_all: clear_all,
        init: init
    };
};

// Initialize the custom folio object
jQuery(document).ready(function($) {
    // Define ajaxurl if not already defined
    if (typeof ajaxurl === 'undefined') {
        window.ajaxurl = '/wp-admin/admin-ajax.php';
    }
    
    window.FCF = custom_folio();
});