/**
 * Blog Over Customizer Breadcrumb Preview
 * 
 * Handles preview-side functionality for breadcrumb section.
 * Receives messages from controls and updates the preview accordingly.
 * 
 * @package Blog_Over
 */
(function ($) {
    'use strict';

    // Wait for preview ready
    wp.customize.bind('preview-ready', function () {

        /**
         * Listen for breadcrumb focus messages from the controls
         * This scrolls to and highlights the correct breadcrumb element
         */
        wp.customize.preview.bind('blog-over-breadcrumb-focus', function (data) {
            var $element = $(data.selector);

            if ($element.length) {
                // Scroll to the element
                $('html, body').animate({
                    scrollTop: $element.offset().top - 100
                }, 500);

                // Add a temporary highlight effect
                $element.addClass('blog-over-customizer-highlight');
                setTimeout(function () {
                    $element.removeClass('blog-over-customizer-highlight');
                }, 2000);
            }
        });

        /**
         * Handle breadcrumb position changes
         * Add/remove classes to help with CSS targeting
         */
        wp.customize('blog_over_breadcrumb_position', function (setting) {
            // Set initial class
            var currentPosition = setting.get();
            updateBodyClass(currentPosition);

            // Update when setting changes
            setting.bind(function (newValue) {
                updateBodyClass(newValue);
            });
        });

        function updateBodyClass(position) {
            $('body').removeClass('blog-over-breadcrumb-in-header blog-over-breadcrumb-below-header');

            if (position === 'in-page-header') {
                $('body').addClass('blog-over-breadcrumb-in-header');
            } else {
                $('body').addClass('blog-over-breadcrumb-below-header');
            }
        }
    });

})(jQuery);
