jQuery(document).ready(function($) {
    const colorOptions = {
        1: {
            title: 'CENTER TABLE',
            model: 'Model size: 4\'1" x 2\'0" x 0\'5"',
            variations: [
                { color: '#ddd', image: 'how-it-works-2.png' },
                { color: 'gray', image: 'how-it-works-3.png' },
                { color: '#eba611', image: 'how-it-works-4.png' },
                { color: '#9747ff', image: 'how-it-works-4.png' },
                { color: '#0d99ff', image: 'how-it-works-5.png' }
            ]
        },
        2: {
            title: 'SOFA',
            model: 'Model size: 4\'1" x 2\'0" x 0\'5"',
            variations: [
                { color: '#ddd', image: 'how-it-works-2.png' },
                { color: 'gray', image: 'how-it-works-3.png' },
                { color: '#eba611', image: 'how-it-works-4.png' },
                { color: '#9747ff', image: 'how-it-works-4.png' },
                { color: '#0d99ff', image: 'how-it-works-5.png' }
            ]
        },
        3: {
            title: 'CARPET',
            model: 'Model size: 4\'1" x 2\'0" x 0\'5"',
            variations: [
                { color: '#ddd', image: 'how-it-works-2.png' },
                { color: 'black', image: 'how-it-works-3.png' },
                { color: 'grey', image: 'how-it-works-4.png' },
                { color: 'pink', image: 'how-it-works-4.png' },
                { color: 'blue', image: 'how-it-works-5.png' }
            ]
        }
    };

    $('.plus-button').hover(function() {
        var buttonId = $(this).data('id');
        var position = $(this).position();
        var buttonHeight = $(this).outerHeight();

        var optionsHtml = `
            <div class="color-options-title">${colorOptions[buttonId].title}</div>
            <div class="color-options-model">${colorOptions[buttonId].model}</div>
            <div class="color-options-variation">Variation:</div>
            <div class="color-options">
                ${colorOptions[buttonId].variations.map(option => 
                    `<div class="color-option" data-image="${option.image}" style="background-color: ${option.color};"></div>`
                ).join('')}
            </div>`;

        $('#color-options-container').html(optionsHtml).css({
            top: position.top + buttonHeight + 5,
            left: position.left,
            display: 'block'
        }).data('button-id', buttonId);
    }, function() {
        $('#color-options-container').hide();
    });

    $('#color-options-container').hover(function() {
        $(this).show();
    }, function() {
        $(this).hide();
    });

    $(document).on('click', '.color-option', function() {
        var selectedImage = $(this).data('image');
        $('#main-image').attr('src', ios_images_path.path + selectedImage);
        $('#color-options-container').hide();
    });
});