document.addEventListener('DOMContentLoaded', () => {
    const onehundredprofitsplitgroup = document.getElementById('onehundredprofitsplitgroup');
    const onehundredprofitsplitrectangle = document.getElementById('onehundredprofitsplitrectangle');
    const onehundredprofitsplittitle = document.getElementById('onehundredprofitsplittitle');
    const onehundredprofitsplitsubtitle = document.getElementById('onehundredprofitsplitsubtitle');
   

    const resetgroup = document.getElementById('resetgroup');
    const resetrectangle = document.getElementById('resetrectangle');
    const resettitle = document.getElementById('resettitle');
    const resetsubtitle = document.getElementById('resetsubtitle');


    const practicegroup = document.getElementById('practicegroup');
    const practicerectangle = document.getElementById('practicerectangle');
    const practicetitle = document.getElementById('practicetitle');
    const practicesubtitle = document.getElementById('practicesubtitle');


    const ddlgroup = document.getElementById('ddlgroup');
    const ddlrectangle = document.getElementById('ddlrectangle');
    const ddltitle = document.getElementById('ddltitle');
    const ddlsubtitle = document.getElementById('ddlsubtitle');

    const toolsgroup = document.getElementById('toolsgroup');
    const toolsrectangle = document.getElementById('toolsrectangle');
    const toolstitle = document.getElementById('toolstitle');
    const toolssubtitle = document.getElementById('toolssubtitle');
   
    const livegroup = document.getElementById('livegroup');
    const liverectangle = document.getElementById('liverectangle');
    const livetitle = document.getElementById('livetitle');
    const livesubtitle = document.getElementById('livesubtitle');

    const commissionsgroup = document.getElementById('commissionsgroup');
    const commissionsrectangle = document.getElementById('commissionsrectangle');
    const commissionstitle = document.getElementById('commissionstitle');
    const commissionssubtitle = document.getElementById('commissionssubtitle');

    const fiveaccountsgroup = document.getElementById('fiveaccountsgroup');
    const fiveaccountsrectangle = document.getElementById('fiveaccountsrectangle');
    const fiveaccountstitle = document.getElementById('fiveaccountstitle');
    const fiveaccountssubtitle = document.getElementById('fiveaccountssubtitle');

    const consistencygroup = document.getElementById('consistencygroup');
    const consistencyrectangle = document.getElementById('consistencyrectangle');
    const consistencytitle = document.getElementById('consistencytitle');
    const consistencysubtitle = document.getElementById('consistencysubtitle');

    const staticgroup = document.getElementById('staticgroup');
    const staticrectangle = document.getElementById('staticrectangle');
    const statictitle = document.getElementById('statictitle');
    const staticsubtitle = document.getElementById('staticsubtitle');

    const resetpricegroup = document.getElementById('resetpricegroup');
    const resetpricerectangle = document.getElementById('resetpricerectangle');
    const resetpricetitle = document.getElementById('resetpricetitle');
    const resetpricesubtitle = document.getElementById('resetpricesubtitle');

    // Function to handle mouse over for a group
    function handleMouseOverGroup(group, rectangle, title, subtitle, rectangle1ToMove, rectangle2ToMove, {
        rectWidth, rectHeight, rectX, rectY, titleTransform, subtitleOpacity, rect1XTranslate, rect1YTranslate, rect2XTranslate, rect2YTranslate,
    }) {
         group.addEventListener('mouseover', (event) => {
            if (event.target.closest(`#${group.id}`)) {
                if (!group.isInside) {
                    group.isInside = true;
                    // Expand the rectangle
                    rectangle.setAttribute('width', rectWidth);
                    rectangle.setAttribute('height', rectHeight);
                    rectangle.setAttribute('x', rectX);
                    rectangle.setAttribute('y', rectY);

                    title.setAttribute('transform', titleTransform);
                    // Set subtitle opacity
                    subtitle.style.opacity = subtitleOpacity;

                    if(rectangle1ToMove!=null)
                    {
                        applyAttributeToChildren(rectangle1ToMove, 'x', rect1XTranslate);
                        applyAttributeToChildren(rectangle1ToMove, 'y', rect1YTranslate);
                    }
                 

                    if(rectangle2ToMove!=null)
                    {
                        applyAttributeToChildren(rectangle2ToMove, 'x', rect2XTranslate);
                        applyAttributeToChildren(rectangle2ToMove, 'y', rect2YTranslate);
                    }
                }
            }
        });
    }

    // Function to handle mouse leave for a group
    function handleMouseLeaveGroup(group, rectangle, title, subtitle, rectangle1ToMove, rectangle2ToMove, {
        rectWidth, rectHeight, rectX, rectY, titleTransform, subtitleOpacity, rect1XTranslate, rect1YTranslate, rect2XTranslate, rect2YTranslate,
    }) {
        group.addEventListener('mouseleave', (event) => {
            if (event.target.closest(`#${group.id}`)) {
                if (group.isInside) {
                    group.isInside = false;
                    // Revert to initial rectangle attributes
                    rectangle.setAttribute('width', rectWidth);
                    rectangle.setAttribute('height', rectHeight);
                    rectangle.setAttribute('x', rectX);
                    rectangle.setAttribute('y', rectY);

                    // Reset subtitle opacity
                    subtitle.style.opacity = subtitleOpacity;

                    // Reset title transform
                    title.setAttribute('transform', titleTransform);


                    if(rectangle1ToMove!=null)
                    {
                        applyAttributeToChildren(rectangle1ToMove, 'x', rect1XTranslate);
                        applyAttributeToChildren(rectangle1ToMove, 'y', rect1YTranslate);
                    }

                    if(rectangle2ToMove!=null)
                    {
                        applyAttributeToChildren(rectangle2ToMove, 'x', rect2XTranslate);
                        applyAttributeToChildren(rectangle2ToMove, 'y', rect2YTranslate);
                    }
                }
            }
        });
    }
    function applyAttributeToChildren(group, attrName, value) {
    // Get all child elements of the group
    const children = group.querySelectorAll('*');
    
    // Apply the attribute to each child
    children.forEach(child => {
       
        const originalValue = parseFloat(child.getAttribute(attrName)) || 0;

        if (child.id.includes('title') && !child.id.includes('subtitle')) {

            child.style.opacity = 0;
            if (attrName === 'x') {
                // Get the current transform value
                let currentTransform = child.getAttribute('transform') || '';
                // Append translateX value
                const newTransform = currentTransform + ' translate(' + value + ', 0)';
                // Set the updated transform
                child.setAttribute('transform', newTransform.trim());
            } else if (attrName === 'y') {
                // Get the current transform value
                let currentTransform = child.getAttribute('transform') || '';
                // Append translateY value
                const newTransform = currentTransform + ' translate(0, ' + value + ')';
                // Set the updated transform
                child.setAttribute('transform', newTransform.trim());
            }

           
            child.style.opacity = 1; // Fade in
            
            
        }
        else
        { 
            child.setAttribute(attrName, originalValue + value);
        }
    });
}
    // Initialize event listeners for both groups
    handleMouseOverGroup(onehundredprofitsplitgroup, onehundredprofitsplitrectangle, onehundredprofitsplittitle, onehundredprofitsplitsubtitle, toolsgroup, null, {
        rectWidth: 247,
        rectHeight: 158,
        rectX: 216,
        rectY: 117,
        titleTransform: "translate(0 0)",
        subtitleOpacity: 1,

        rect1XTranslate:0,
        rect1YTranslate:50,

        rect2XTranslate:0,
        rect2YTranslate:0,
    });

    handleMouseLeaveGroup(onehundredprofitsplitgroup, onehundredprofitsplitrectangle, onehundredprofitsplittitle, onehundredprofitsplitsubtitle, toolsgroup, null, {
        rectWidth: 177,
        rectHeight: 78,
        rectX: 251,
        rectY: 127,
        titleTransform: "translate(0 0)",
        
        subtitleOpacity: 0,

        rect1XTranslate:0,
        rect1YTranslate:-50,

        rect2XTranslate:0,
        rect2YTranslate:0,
    });

    handleMouseOverGroup(resetgroup, resetrectangle, resettitle, resetsubtitle, onehundredprofitsplitgroup, null, {
        rectWidth: 236,
        rectHeight: 159,
        rectX: 80,
        rectY: 3,
        titleTransform: "translate(0 0)",
        subtitleOpacity: 1,

        rect1XTranslate:80,
        rect1YTranslate:0,

        rect2XTranslate:0,
        rect2YTranslate:0,
    });

    handleMouseLeaveGroup(resetgroup, resetrectangle, resettitle, resetsubtitle, onehundredprofitsplitgroup, null, {
        rectWidth: 160,
        rectHeight: 80,
        rectX: 122,
        rectY: 3,
        titleTransform: "translate(0 0)",
        subtitleOpacity: 0,

        rect1XTranslate:-80,
        rect1YTranslate:0,

        rect2XTranslate:0,
        rect2YTranslate:0,
    });

    handleMouseOverGroup(practicegroup, practicerectangle, practicetitle, practicesubtitle, ddlgroup, onehundredprofitsplitgroup, {
        rectWidth: 274,
        rectHeight: 160,
        rectX: 362,
        rectY: 0,
        titleTransform: "translate(0 0)",
        subtitleOpacity: 1,

        rect1XTranslate:0,
        rect1YTranslate:50,

        rect2XTranslate:-100,
        rect2YTranslate:-30,
    });

    handleMouseLeaveGroup(practicegroup, practicerectangle, practicetitle, practicesubtitle, ddlgroup, onehundredprofitsplitgroup, {
        rectWidth: 240,
        rectHeight: 60,
        rectX: 380,
        rectY: 10,
        titleTransform: "translate(0 0)",
        subtitleOpacity: 0,

        rect1XTranslate:0,
        rect1YTranslate:-50,

        rect2XTranslate:100,
        rect2YTranslate:30,
    });

    handleMouseOverGroup(ddlgroup, ddlrectangle, ddltitle, ddlsubtitle, livegroup, null, {
        rectWidth: 258,
        rectHeight: 153,
        rectX: 467,
        rectY: 125,
        titleTransform: "translate(-40 -40)",
        subtitleOpacity: 1,

        rect1XTranslate:0,
        rect1YTranslate:30,

    });

    handleMouseLeaveGroup(ddlgroup, ddlrectangle, ddltitle, ddlsubtitle, livegroup, null,  {
        rectWidth: 153,
        rectHeight: 80,
        rectX: 515,
        rectY: 127,
        titleTransform: "translate(-40 -40)",
        subtitleOpacity: 0,

        rect1XTranslate:0,
        rect1YTranslate:-30,

    });

    handleMouseOverGroup(toolsgroup, toolsrectangle, toolstitle, toolssubtitle, consistencygroup, null, {
        rectWidth: 249.598,
        rectHeight: 151.664,
        rectX: 243,
        rectY: 230,
        titleTransform: "translate(-40 -50)",
        subtitleOpacity: 1,
        
        rect1XTranslate:0,
        rect1YTranslate:30,

    });

    handleMouseLeaveGroup(toolsgroup, toolsrectangle, toolstitle, toolssubtitle, consistencygroup, null, {
        rectWidth: 150,
        rectHeight: 80,
        rectX: 293,
        rectY: 230,
        titleTransform: "translate(-40 -50)",
        subtitleOpacity: 0,

        rect1XTranslate:0,
        rect1YTranslate:-30,
    });

    handleMouseOverGroup(livegroup, liverectangle, livetitle, livesubtitle, commissionsgroup, fiveaccountsgroup, {
        rectWidth: 257,
        rectHeight: 154,
        rectX: 493,
        rectY: 265,
        titleTransform: "translate(-100 -60)",
        subtitleOpacity: 1,

        rect1XTranslate:0,
        rect1YTranslate:50,

        rect2XTranslate:0,
        rect2YTranslate:20,
        
    });

    handleMouseLeaveGroup(livegroup, liverectangle, livetitle, livesubtitle, commissionsgroup, fiveaccountsgroup, {
        rectWidth: 190,
        rectHeight: 74,
        rectX: 522,
        rectY: 267,
        titleTransform: "translate(-100 -60)",
        subtitleOpacity: 0,

        rect1XTranslate:0,
        rect1YTranslate:-50,

        rect2XTranslate:0,
        rect2YTranslate:-20,
    });

    handleMouseOverGroup(commissionsgroup, commissionsrectangle, commissionstitle, commissionssubtitle, fiveaccountsgroup, null, {
        rectWidth: 291,
        rectHeight: 160,
        rectX: 400,
        rectY: 377,
        titleTransform: "translate(-90 -100)",
        subtitleOpacity: 1,

        rect1XTranslate:0,
        rect1YTranslate:70,
    });

    handleMouseLeaveGroup(commissionsgroup, commissionsrectangle, commissionstitle, commissionssubtitle, fiveaccountsgroup, null, {
        rectWidth: 291,
        rectHeight: 60,
        rectX: 400,
        rectY: 387,
        titleTransform: "translate(-90 -100)",
        subtitleOpacity: 0,

        rect1XTranslate:0,
        rect1YTranslate:-70,
    });

    handleMouseOverGroup(fiveaccountsgroup, fiveaccountsrectangle, fiveaccountstitle, fiveaccountssubtitle, null, null, {
        rectWidth: 265,
        rectHeight: 124,
        rectX: 367,
        rectY: 488,
        titleTransform: "translate(160,0)",
        subtitleOpacity: 1
    });

    handleMouseLeaveGroup(fiveaccountsgroup, fiveaccountsrectangle, fiveaccountstitle, fiveaccountssubtitle, null, null, {
        rectWidth: 265,
        rectHeight: 63,
        rectX: 367,
        rectY: 488,
        titleTransform: "translate(160,0)",
        subtitleOpacity: 0
    });

    handleMouseOverGroup(consistencygroup, consistencyrectangle, consistencytitle, consistencysubtitle, fiveaccountsgroup, null, {
        rectWidth: 265,
        rectHeight: 133,
        rectX: 70,
        rectY: 366,
        titleTransform: "translate(0 -0)",
        subtitleOpacity: 1,

        rect1XTranslate:0,
        rect1YTranslate:35,
    });

    handleMouseLeaveGroup(consistencygroup, consistencyrectangle, consistencytitle, consistencysubtitle, fiveaccountsgroup, null, {
        rectWidth: 265,
        rectHeight: 63,
        rectX: 70,
        rectY: 366,
        titleTransform: "translate(0 -0)",
        subtitleOpacity: 0,

        rect1XTranslate:0,
        rect1YTranslate:-35,

    });

    handleMouseOverGroup(staticgroup, staticrectangle, statictitle, staticsubtitle, consistencygroup, null, {
        rectWidth: 215,
        rectHeight: 168,
        rectX: 20,
        rectY: 190,
        titleTransform: "translate(0 -0)",
        subtitleOpacity: 1,

        rect1XTranslate:0,
        rect1YTranslate:10,
    });

    handleMouseLeaveGroup(staticgroup, staticrectangle, statictitle, staticsubtitle, consistencygroup, null, {
        rectWidth: 165,
        rectHeight: 80,
        rectX: 45,
        rectY: 193,
        titleTransform: "translate(0 -0)",
        subtitleOpacity: 0,

        rect1XTranslate:0,
        rect1YTranslate:-10,
    });


    handleMouseOverGroup(resetpricegroup, resetpricerectangle, resetpricetitle, resetpricesubtitle, fiveaccountsgroup, null, {
        rectWidth: 288,
        rectHeight: 142,
        rectX: 76,
        rectY: 507,
        titleTransform: "translate(-100 -130)",
        subtitleOpacity: 1,

        rect1XTranslate:10,
        rect1YTranslate:0,
    });

    handleMouseLeaveGroup(resetpricegroup, resetpricerectangle, resetpricetitle, resetpricesubtitle, fiveaccountsgroup, null, {
        rectWidth: 230,
        rectHeight: 65,
        rectX: 104,
        rectY: 507,
        titleTransform: "translate(-100 -130)",
        subtitleOpacity: 0,

        rect1XTranslate:-10,
        rect1YTranslate:0,

    });
    
 
});