
let bounceNumber = 2;
let nBounce = [];
let d1d2 = [];
let d1d3 = [];
let d2d1 = [];
let d2d3 = [];
let d3d1 = [];
let d3d2 = [];
let helpBouncy = false;
let bouncyDisplay = false;
let useBouncyDozenBet = false;
let useBouncyRowBet = false;

let useBouncyDozenBet_progress_loss = true;
let useBouncyDozenBet_progress_win = false;
let useBouncyDozenBet_previous_loss = false;
let useBouncyDozenBet_previous_win = false;
let useBouncyDozenBet_reset_any_win = false;
let bouncyDozenBetPlaced = false;

let bouncyProfit = 0;

function bounce() {

    let container = document.createElement('div');
    container.style.marginLeft = '25px';
    container.style.marginBottom = '15px';
    container.style.fontSize = '20px';
    container.id = 'bouncy-tool';

    let savedColor = localStorage.getItem(container.id + '-containerIdbackgroundColor');
    if (savedColor) {
        container.style.backgroundColor = savedColor;
    }

    let colorChangerQuickSpin = quickSpin_colorChanger(container.id);
    container.append(colorChangerQuickSpin);



    let titleDiv = document.createElement('div');
    titleDiv.style.display = 'flex';
    titleDiv.style.alignItems = 'center';
    titleDiv.style.marginLeft = '25px';


    // Create the title span
    let titleSpan = document.createElement('span');
    titleSpan.innerHTML = '<h2>Bouncy Dozen</h2>';
    titleSpan.style.marginRight = '10px';

    let radioDozenRow = createRadioButtons();
    let betForm = createDynamicForm();


    // Create the help button
    const button = document.createElement('button');
    button.id = 'how-to-bouncy';
    button.textContent = "How to";
    button.style.padding = '5px';
    button.style.marginRight = '5px';
    button.onclick = toggleButtonHelpBouncy;


    var bouncyCheckbox = document.createElement('input');
    bouncyCheckbox.type = 'checkbox';
    bouncyCheckbox.id = "bouncy-display";
    bouncyCheckbox.name = "bouncyDisplay";
    bouncyCheckbox.placeholder = "";
    bouncyCheckbox.checked = bouncyDisplay;
    bouncyCheckbox.style.transform = 'scale(2)';
    bouncyCheckbox.style.transformOrigin = 'top left';
    bouncyCheckbox.style.marginBottom = '12px';
    bouncyCheckbox.style.marginLeft = '10px';
    bouncyCheckbox.addEventListener('change', function () {
        bouncyDisplay = this.checked;
        appendOrRemoveAlert();
        addAllItemsToAlertWindow();
    });


    // Group Label
    var bouncyCheckboxLabel = document.createElement('label');
    bouncyCheckboxLabel.htmlFor = 'bouncy-display';
    bouncyCheckboxLabel.style.marginLeft = '15px';
    bouncyCheckboxLabel.style.fontSize = '20px';
    bouncyCheckboxLabel.appendChild(document.createTextNode('Show alert above board.'));


    // Append the title span and button to the title div
    titleDiv.appendChild(titleSpan);


    titleDiv.appendChild(button);


    titleDiv.appendChild(bouncyCheckbox);
    titleDiv.appendChild(bouncyCheckboxLabel);




    const numberInput = document.createElement('input');
    style_textbox_container(numberInput);
    numberInput.type = 'number';
    numberInput.id = 'number-input-bouncy';
    numberInput.value = bounceNumber

    // Add event listener for the input event
    //numberInput.addEventListener('input', bouncyUpdate);
    // Button 1
    let LookBackButton = document.createElement('button');
    LookBackButton.id = 'update-bouncy-button';
    LookBackButton.textContent = 'Update';
    LookBackButton.style = 'width: auto; height: 50px; margin: 5px 10px 5px 10px; font-size: 30px;';
    if (LookBackButton) { LookBackButton.onclick = bouncyUpdate; }

    // Create the alert div
    let alert = document.createElement('div');
    alert.id = 'bounce-alert';
    alert.style.border = '5px solid yellow';
    alert.style.padding = '5px';
    alert.style.display = 'none';

    // Create a container to hold both elements
    const containerInput = document.createElement('div');
    containerInput.id = 'input-alert-container';
    containerInput.style.marginLeft = '25px';
    containerInput.style.marginBottom = '10px';
    containerInput.appendChild(numberInput);
    containerInput.appendChild(LookBackButton);
    containerInput.appendChild(alert);

    // Apply styles using JavaScript
    containerInput.style.display = 'flex';
    containerInput.style.alignItems = 'center';
    containerInput.style.gap = '10px';


    let helpDiv = document.createElement('div');
    helpDiv.id = 'help-bouncy';
    helpDiv.style.marginLeft = '25px';
    helpDiv.style.marginBottom = '15px';



    let contentDiv = document.createElement('div');
    contentDiv.id = 'bounceDiv';
    contentDiv.style.marginLeft = '25px';
    contentDiv.style.marginBottom = '15px';

    let newLine = document.createElement('br');


    container.appendChild(titleDiv);
    container.appendChild(helpDiv);

    container.appendChild(radioDozenRow);
    container.appendChild(betForm);


    container.appendChild(containerInput);
    container.appendChild(newLine);
    container.appendChild(contentDiv);
    container.appendChild(newLine);
    container.appendChild(newLine);


    return container;

}
function bouncyUpdate(event) {
    handleInputChangeBounce(event);
    handleWinCondition(event);


    if (useBouncyDozenBet) {
        bouncy_dozen_round_profit();
        on_spin_dozen_bouncy_bet();
        diplay_dozen_bet();
        bet_on_bouncy_dozen();


    }
    appendOrRemoveAlert();
}

function detectDozenBounce() {
    const bounceCount = parseInt(document.getElementById('bounceCount').value);
    const bounceType = document.getElementById('bounceType').value.split(' - ');

    let streak = [];
    let dozenStreak = [];

    for (number in numbers) {
        const dozen = getDozen(number);
        if (dozen !== '0') {
            if (streak.length < 2) {
                streak.push(dozen);
            } else {
                if (dozen !== streak[streak.length - 1]) {
                    if (streak.length > 1 && dozen === streak[streak.length - 2]) {
                        streak.push(dozen);
                        dozenStreak.push(number);
                        if (streak.length === bounceCount + 1 && streak[0] === bounceType[0] && streak[1] === bounceType[1]) {
                            alertDiv.textContent = `Dozen bounce detected: ${streak.slice(-bounceCount).join(' - ')} (${dozenStreak.slice(-bounceCount).join(', ')})`;
                            alertDiv.style.display = 'block';
                            streak = [];
                            dozenStreak = [];
                        }
                    } else {
                        streak = [streak[streak.length - 1], dozen];
                        dozenStreak = [dozenStreak[dozenStreak.length - 1], number];
                    }
                } else {
                    streak = [streak[streak.length - 1]];
                    dozenStreak = [dozenStreak[dozenStreak.length - 1]];
                }
            }
        }
    }
}
function getColor(number) {
    if (number === 0) return 'green';
    return red.includes(number) ? 'red' : 'black';
}

function getDozen(number) {
    if (number >= 1 && number <= 12) return 1;
    if (number >= 13 && number <= 24) return 2;
    if (number >= 25 && number <= 36) return 3;
    return 0;
}

function calculateBounce() {
    let container = document.createElement('div');
    container.style.fontSize = '20px';

    var displayTable = "<table border=1>";
    /*
    displayTable += "<tr>";
    displayTable += "<th colspan=4 style='padding: 8px;'> " + bounceNumber + "</th>";
    displayTable += "</tr>";
    displayTable += "<tr>";
    displayTable += "<th style='padding: 8px;'> Spots </th>";
    displayTable += "<th style='padding: 8px;'> Bet </th>";
    displayTable += "<th style='padding: 8px;'> Profit </th>";
    displayTable += "<th style='padding: 8px;'> Cost </th>";
    displayTable += "</tr>";
    */
    let bounceLength = (bounceNumber * 2) - 1;
    let numbersLength = (bounceNumber * 2) - 1;
    if (numbers.length < numbersLength) {
        numbersLength = numbers.length;
    }



    d1d2 = [];
    d1d3 = [];
    d2d1 = [];
    d2d3 = [];
    d3d1 = [];
    d3d2 = [];
    nBounce = [];

    for (var x = numbersLength; x > 0; x--) {

        nBounce.push(getDozen(numbers[numbers.length - x]));


    }

    for (var x = 0; x < bounceLength; x++) {
        d1d2.push(x % 2 === 0 ? 1 : 2);
        d1d3.push(x % 2 === 0 ? 1 : 3);
        d2d1.push(x % 2 === 0 ? 2 : 1);
        d2d3.push(x % 2 === 0 ? 2 : 3);
        d3d1.push(x % 2 === 0 ? 3 : 1);
        d3d2.push(x % 2 === 0 ? 3 : 2);
    }

    displayTable += "<tr>";
    displayTable += "<td style='padding: 8px;'>Numbers</td>";

    for (var x = numbersLength; x > 0; x--) {
        displayTable += "<td style='padding: 8px;'>" + numbers[numbers.length - x] + "</td>";
    }
    displayTable += "</tr>";








    displayTable += "<tr>";
    displayTable += "<td style='padding: 8px;'>D1 D2</td>";
    for (var x = 0; x < bounceLength; x++) {
        if (x % 2 == 1) {
            displayTable += getBackground(2, "D2", x);
        }
        else {
            displayTable += getBackground(1, "D1", x);
        }

    }
    displayTable += "</tr>";

    displayTable += "<tr>";
    displayTable += "<td style='padding: 8px;'>D1 D3</td>";
    for (var x = 0; x < bounceLength; x++) {
        if (x % 2 == 1) {
            displayTable += getBackground(3, "D3", x);
        }
        else {
            displayTable += getBackground(1, "D1", x);
        }

    }
    displayTable += "</tr>";

    displayTable += "<tr>";
    displayTable += "<td style='padding: 8px;'>D2 D1</td>";
    for (var x = 0; x < bounceLength; x++) {
        if (x % 2 == 1) {
            displayTable += getBackground(1, "D1", x);
        }
        else {
            displayTable += getBackground(2, "D2", x);
        }

    }
    displayTable += "</tr>";

    displayTable += "<tr>";
    displayTable += "<td style='padding: 8px;'>D2 D3</td>";
    for (var x = 0; x < bounceLength; x++) {
        if (x % 2 == 1) {
            displayTable += getBackground(3, "D3", x);
        }
        else {
            displayTable += getBackground(2, "D2", x);
        }

    }
    displayTable += "</tr>";

    displayTable += "<tr>";
    displayTable += "<td style='padding: 8px;'>D3 D1</td>";
    for (var x = 0; x < bounceLength; x++) {
        if (x % 2 == 1) {
            displayTable += getBackground(1, "D1", x);
        }
        else {
            displayTable += getBackground(3, "D3", x);
        }

    }
    displayTable += "</tr>";

    displayTable += "<tr>";
    displayTable += "<td style='padding: 8px;'>D3 D2</td>";
    for (var x = 0; x < bounceLength; x++) {
        if (x % 2 == 1) {
            displayTable += getBackground(2, "D2", x);
        }
        else {
            displayTable += getBackground(3, "D3", x);
        }

    }
    displayTable += "</tr>";

    displayTable += "</table>";

    let tableDiv = document.createElement('div');
    tableDiv.innerHTML = displayTable;
    container.appendChild(tableDiv);
    return container;
}
function handleInputChangeBounce() {

    let bouncyNumber = document.getElementById('number-input-bouncy');
    if (bouncyNumber) {
        if (bouncyNumber.value === '' || isNaN(bouncyNumber.value) || bouncyNumber.value < 2) {
            bouncyNumber.value = 2;
        }
        if (bouncyNumber.value) {
            bounceNumber = bouncyNumber.value;

        } else {
            bounceNumber = 2;
        }

        let content = calculateBounce();

        let contentFromButtonClick = document.getElementById('bounceDiv');
        if (contentFromButtonClick) {
            contentFromButtonClick.innerHTML = '';
            contentFromButtonClick.appendChild(content);
        }
    }


}
function handleWinCondition() {
    let alertBox = document.getElementById('bounce-alert');

    if (alertBox) {
        alertBox.style.display = 'none';
        alertBox.innerHTML = '';
        if (arraysEqual(d1d2, nBounce)) alertBox.innerHTML = "Bet Dozen 1, 3";
        if (arraysEqual(d1d3, nBounce)) alertBox.innerHTML = "Bet Dozen 1, 2";
        if (arraysEqual(d2d1, nBounce)) alertBox.innerHTML = "Bet Dozen 2, 3";
        if (arraysEqual(d2d3, nBounce)) alertBox.innerHTML = "Bet Dozen 1, 2";
        if (arraysEqual(d3d1, nBounce)) alertBox.innerHTML = "Bet Dozen 2, 3";
        if (arraysEqual(d3d2, nBounce)) alertBox.innerHTML = "Bet Dozen 1, 3";

        if (!(alertBox.innerHTML === '')) {
            alertBox.style.display = 'block';
        }
    }

    //Show alert above Board

    return;
}
function getBackground(dozenNumber, dozenText, x) {
    let displayTable = '';
    if (nBounce.length > 0) {
        if (nBounce[x] == dozenNumber && dozenNumber > 0) {
            displayTable = "<td style='padding: 8px; background-color: yellow'>" + dozenText + "</td>";
        }
        else {
            displayTable = "<td style='padding: 8px;'>" + dozenText + "</td>";
        }
    }
    return displayTable;
}

function arraysEqual(A, B) {
    if (A.length !== B.length) return false;
    return A.every((value, index) => value === B[index]);
}

function toggleButtonHelpBouncy() {
    const button = document.getElementById(`how-to-bouncy`);
    if (button) {
        helpBouncy = !helpBouncy;
        button.style.backgroundColor = helpBouncy ? 'lightgreen' : '';

        let helpDiv = document.getElementById('help-bouncy');
        helpDiv.innerHTML = '';

        if (helpBouncy) {
            const img = document.createElement('img');
            img.src = 'items/bouncyHelp.png';
            img.alt = 'Help Image';

            img.onerror = function () {
                console.error('Failed to load image: ' + img.src);
                // Additional diagnostic information
                console.log('Current directory: ' + window.location.href);
            };
            helpDiv.appendChild(img);
        }
    }

}

function appendOrRemoveAlert() {





    oldUserBets_dozens = new Map();

    var bottomStickyBox = document.getElementById('sticky-bottom-alert');
    var bouncyAlertSticky = document.getElementById('bouncy-alert-sticky');
    if (bouncyAlertSticky) {
        bottomStickyBox.removeChild(bouncyAlertSticky);
    }



    if (bouncyDisplay && bouncyDozenBetPlaced) {



        var alertBox = document.createElement('div');
        alertBox.id = 'bouncy-alert-sticky';
        alertBox.style.border = '5px solid yellow';
        alertBox.style.padding = '10px';
        alertBox.style.paddingRight = '15px';
        alertBox.style.display = 'inline-flex'; // Use inline-flex to shrink to fit content
        alertBox.style.flex = '0'; // Ensure it doesn't stretch
        alertBox.style.whiteSpace = 'nowrap';
        alertBox.style.marginRight = '5px';
        alertBox.style.marginLeft = '5px';


        alertBox.innerHTML = '';


        if (arraysEqual(d1d2, nBounce)) {


            alertBox.innerHTML = "Bet Dozen 1, 3<br/>Amount: " + global_bouncy_current_bet;

            oldUserBets_dozens.set("1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12", [global_bouncy_current_bet, "outside_dozen", 2]);
            oldUserBets_dozens.set("25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36", [global_bouncy_current_bet, "outside_dozen", 2]);

            rebet();
        }
        if (arraysEqual(d1d3, nBounce)) {

            alertBox.innerHTML = "Bet Dozen 1, 2<br/>Amount: " + global_bouncy_current_bet;

            oldUserBets_dozens.set("1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12", [global_bouncy_current_bet, "outside_dozen", 2]);
            oldUserBets_dozens.set("13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24", [global_bouncy_current_bet, "outside_dozen", 2]);
            rebet();
        }
        if (arraysEqual(d2d1, nBounce)) {


            alertBox.innerHTML = "Bet Dozen 2, 3<br/>Amount: " + global_bouncy_current_bet;

            oldUserBets_dozens.set("13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24", [global_bouncy_current_bet, "outside_dozen", 2]);
            oldUserBets_dozens.set("25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36", [global_bouncy_current_bet, "outside_dozen", 2]);
            rebet();
        }
        if (arraysEqual(d2d3, nBounce)) {


            alertBox.innerHTML = "Bet Dozen 1, 2<br/>Amount: " + global_bouncy_current_bet;

            oldUserBets_dozens.set("1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12", [global_bouncy_current_bet, "outside_dozen", 2]);
            oldUserBets_dozens.set("13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24", [global_bouncy_current_bet, "outside_dozen", 2]);
            rebet();
        }
        if (arraysEqual(d3d1, nBounce)) {


            alertBox.innerHTML = "Bet Dozen 2, 3<br/>Amount: " + global_bouncy_current_bet;

            oldUserBets_dozens.set("13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24", [global_bouncy_current_bet, "outside_dozen", 2]);
            oldUserBets_dozens.set("25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36", [global_bouncy_current_bet, "outside_dozen", 2]);
            rebet();
        }
        if (arraysEqual(d3d2, nBounce)) {


            alertBox.innerHTML = "Bet Dozen 1, 3<br/>Amount: " + global_bouncy_current_bet;

            oldUserBets_dozens.set("1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12", [global_bouncy_current_bet, "outside_dozen", 2]);
            oldUserBets_dozens.set("25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36", [global_bouncy_current_bet, "outside_dozen", 2]);
            rebet();
        }
        if (alertBox.innerHTML === '') alertBox.style.display = 'none';







        bottomStickyBox.appendChild(alertBox);
    }
    if (bouncyDisplay) {
        let bounceAlertDiv = document.getElementById('bounce-alert');
        if (bounceAlertDiv) {
            bounceAlertDiv.remove();
        }
        let bounceAlerts = document.createElement('div');
        bounceAlerts.id = 'bounce-alert';
        bounceAlerts.style.backgroundColor = 'white';
        bounceAlerts.style.border = '3px solid yellow';
        bounceAlerts.style.padding = '5px';
        bounceAlerts.style.width = '110px';
        bounceAlerts.draggable = true;
        bounceAlerts.style.position = 'absolute';
        bounceAlerts.style.zIndex = '1000';



        // Setting the inner HTML based on your conditions
        if (arraysEqual(d1d2, nBounce)) bounceAlerts.innerHTML = "Bet Dozen 1, 3";
        if (arraysEqual(d1d3, nBounce)) bounceAlerts.innerHTML = "Bet Dozen 1, 2";
        if (arraysEqual(d2d1, nBounce)) bounceAlerts.innerHTML = "Bet Dozen 2, 3";
        if (arraysEqual(d2d3, nBounce)) bounceAlerts.innerHTML = "Bet Dozen 1, 2";
        if (arraysEqual(d3d1, nBounce)) bounceAlerts.innerHTML = "Bet Dozen 2, 3";
        if (arraysEqual(d3d2, nBounce)) bounceAlerts.innerHTML = "Bet Dozen 1, 3";
        bounceAlerts.style.display = 'block';
        bounceAlerts.style.whiteSpace = 'nowrap';
        bounceAlerts.style.paddingRight = '15px';
        if (bounceAlerts.innerHTML === '') bounceAlerts.style.display = 'none';

        alertsbox.appendChild(bounceAlerts);

        makeElementDraggableNoToggle(bounceAlerts);

    } else {
        let bounceAlertDiv = document.getElementById('bounce-alert');
        if (bounceAlertDiv) {
            bounceAlertDiv.remove();
        }
    }



}

// --------------------------------------------------------------
// START Bouncy Dozen Bets
// --------------------------------------------------------------

function bouncy_bet_every_spin() {




}
function bet_on_bouncy_dozen() {

    if (arraysEqual(d1d2, nBounce)) {

        oldUserBets_dozens = new Map();
        oldUserBets_dozens.set("1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12", [global_bouncy_current_bet, "outside_dozen", 2]);
        oldUserBets_dozens.set("25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36", [global_bouncy_current_bet, "outside_dozen", 2]);

        rebet();

    }
    if (arraysEqual(d1d3, nBounce)) {

        oldUserBets_dozens = new Map();
        oldUserBets_dozens.set("1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12", [global_bouncy_current_bet, "outside_dozen", 2]);
        oldUserBets_dozens.set("13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24", [global_bouncy_current_bet, "outside_dozen", 2]);


        rebet();

    }
    if (arraysEqual(d2d1, nBounce)) {

        oldUserBets_dozens = new Map();
        oldUserBets_dozens.set("13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24", [global_bouncy_current_bet, "outside_dozen", 2]);
        oldUserBets_dozens.set("25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36", [global_bouncy_current_bet, "outside_dozen", 2]);

        rebet();

    }
    if (arraysEqual(d2d3, nBounce)) {

        oldUserBets_dozens = new Map();
        oldUserBets_dozens.set("1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12", [global_bouncy_current_bet, "outside_dozen", 2]);
        oldUserBets_dozens.set("13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24", [global_bouncy_current_bet, "outside_dozen", 2]);

        rebet();

    }
    if (arraysEqual(d3d1, nBounce)) {

        oldUserBets_dozens = new Map();
        oldUserBets_dozens.set("13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24", [global_bouncy_current_bet, "outside_dozen", 2]);
        oldUserBets_dozens.set("25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36", [global_bouncy_current_bet, "outside_dozen", 2]);


        rebet();

    }
    if (arraysEqual(d3d2, nBounce)) {

        oldUserBets_dozens = new Map();
        oldUserBets_dozens.set("1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12", [global_bouncy_current_bet, "outside_dozen", 2]);
        oldUserBets_dozens.set("25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36", [global_bouncy_current_bet, "outside_dozen", 2]);




        rebet();

    }
}
function createDynamicForm() {

    let newLine = document.createElement('br');

    const form = document.createElement('form');

    let dozenForm = bouncyDozenBets();
    form.appendChild(dozenForm);


    return form;
}

function bouncyDozenBets() {
    // Create main container
    const mainContainer = document.createElement('div');
    mainContainer.style.border = '2px solid black';
    mainContainer.style.padding = '10px'; // Add some padding for better visual appearance

    const titleContiner = document.createElement('div');
    titleContiner.style.display = 'flex'; // Use flexbox to align items on the same line
    titleContiner.style.alignItems = 'center'; // Align items vertically in the center
    titleContiner.style.justifyContent = 'start';

    // Title for Dozen Bets
    const title = document.createElement('h2');
    title.innerText = 'Dozen Bets';
    title.style.marginLeft = '25px'; // Add some margin for alignment
    titleContiner.appendChild(title);

    //if (dozenOrRow === 'dozen') useBouncyDozenBet = true;

    // Checkbox for "Use dozen bets"
    const bouncyCheckbox = document.createElement('input');
    bouncyCheckbox.type = 'checkbox';
    bouncyCheckbox.id = "use-bouncy-dozen";
    bouncyCheckbox.checked = useBouncyDozenBet;
    bouncyCheckbox.style.transform = 'scale(2)';
    bouncyCheckbox.style.marginLeft = '25px';
    bouncyCheckbox.style.marginRight = '10px'; // Margin before the label
    bouncyCheckbox.style.marginTop = '-5px'; // Adjust vertical alignment due to scaling
    bouncyCheckbox.addEventListener('change', function () {
        useBouncyDozenBet = this.checked;
        useBouncyDozenBet_bounceRow = false;
        oldUserBets_rows = new Map();

    });
    titleContiner.appendChild(bouncyCheckbox);

    // Label for "Use dozen bets"
    const bouncyCheckboxLabel = document.createElement('label');
    bouncyCheckboxLabel.htmlFor = 'use-bouncy-dozen';
    bouncyCheckboxLabel.style.fontSize = '20px';
    // Corrected the margin top to align with the vertically centered checkbox
    bouncyCheckboxLabel.style.marginTop = '0px'; // Reset margin top to zero for better alignment
    bouncyCheckboxLabel.appendChild(document.createTextNode('Use dozen bets.'));
    titleContiner.appendChild(bouncyCheckboxLabel);

    mainContainer.appendChild(titleContiner);




    // Create the first row with "Use dozen bets" checkbox and input
    const inputDiv = document.createElement('div');
    inputDiv.style.display = 'flex';
    inputDiv.style.alignItems = 'center'; // Vertically center items
    inputDiv.style.marginLeft = '25px';
    inputDiv.style.marginBottom = '10px'; // Add space below this row

    const numberInput = document.createElement('input');
    numberInput.type = 'text';
    numberInput.id = 'bouncyBets';
    numberInput.value = '1, 2, 2, 6, 6, 18, 18, 54, 54, 162, 162';
    numberInput.style.width = '500px'; // Set width of the input
    numberInput.style.height = '50px'; // Set height of the input to make it taller
    numberInput.style.fontSize = '24px'; // Increase font size for better readability
    numberInput.style.marginRight = '10px'; // Add space between elements



    // Default value to be used if no value is found in local storage
    const defaultValue = '1, 2, 2, 6, 6, 18, 18, 54, 54, 162, 162';

    // Try to get the value from localStorage
    let storedValue = localStorage.getItem('bouncyBetsValue');

    // Check if there is something in localStorage and it's not just an empty string
    if (storedValue && storedValue.length > 0) {
        numberInput.value = storedValue; // Set input value from localStorage
        global_bouncy_bet_array = numberInput.value.split(/\D+/).filter(Boolean).map(Number);
    } else {
        numberInput.value = defaultValue; // Set input value to default
        global_bouncy_bet_array = numberInput.value.split(/\D+/).filter(Boolean).map(Number);
        localStorage.setItem('bouncyBetsValue', defaultValue); // Save default value to localStorage
    }
    inputDiv.appendChild(numberInput);

    // Listen for input changes and update localStorage
    numberInput.addEventListener('input', () => {
        global_bouncy_bet_array = numberInput.value.split(/\D+/).filter(Boolean).map(Number);
        localStorage.setItem('bouncyBetsValue', numberInput.value);
    });






    // Create the button
    const defaultButton = document.createElement('button');
    defaultButton.innerText = 'Use Default';
    defaultButton.style.height = '50px'; // Match the height of the input box
    defaultButton.style.fontSize = '20px'; // Font size to match the input's readability
    defaultButton.style.verticalAlign = 'top'; // Align the top of the button with the input
    defaultButton.addEventListener('click', function () {
        event.preventDefault();
        numberInput.value = '1, 2, 2, 6, 6, 18, 18, 54, 54, 162, 162'; // Set default value on click
        global_bouncy_bet_array = numberInput.value.split(/\D+/).filter(Boolean).map(Number);
        localStorage.setItem('bouncyBetsValue', defaultValue);


    });
    inputDiv.appendChild(defaultButton);

    mainContainer.appendChild(inputDiv);

    // Create the second row with "Progress on Win" and "Progress on Loss"
    const progressRow = document.createElement('div');
    progressRow.style.display = 'flex';
    progressRow.style.alignItems = 'center';
    progressRow.style.marginLeft = '25px';
    progressRow.style.marginBottom = '10px';

    // Checkbox for "Progress on Win"
    const progressWinCheckbox = document.createElement('input');
    progressWinCheckbox.type = 'checkbox';
    progressWinCheckbox.id = "progress-win";
    progressWinCheckbox.checked = useBouncyDozenBet_progress_win;
    progressWinCheckbox.style.transform = 'scale(2)';
    progressWinCheckbox.style.marginRight = '10px';
    progressWinCheckbox.addEventListener('change', function () {
        useBouncyDozenBet_progress_win = this.checked;
    });
    progressRow.appendChild(progressWinCheckbox);

    // Label for "Progress on Win"
    const progressWinLabel = document.createElement('label');
    progressWinLabel.htmlFor = 'progress-win';
    progressWinLabel.style.fontSize = '20px';
    progressWinLabel.appendChild(document.createTextNode('Progress on Win'));
    progressWinLabel.style.marginRight = '20px';
    progressRow.appendChild(progressWinLabel);

    // Checkbox for "Progress on Loss"
    const progressLossCheckbox = document.createElement('input');
    progressLossCheckbox.type = 'checkbox';
    progressLossCheckbox.id = "progress-loss";
    progressLossCheckbox.checked = useBouncyDozenBet_progress_loss;
    progressLossCheckbox.style.transform = 'scale(2)';
    progressLossCheckbox.style.marginRight = '10px';
    progressLossCheckbox.addEventListener('change', function () {
        useBouncyDozenBet_progress_loss = this.checked;
    });
    progressRow.appendChild(progressLossCheckbox);

    // Label for "Progress on Loss"
    const progressLossLabel = document.createElement('label');
    progressLossLabel.htmlFor = 'progress-loss';
    progressLossLabel.style.fontSize = '20px';
    progressLossLabel.appendChild(document.createTextNode('Progress on Loss'));
    progressRow.appendChild(progressLossLabel);

    mainContainer.appendChild(progressRow);

    // Create the third row with "Previous Bet on Win" and "Previous Bet on Loss"
    const previousRow = document.createElement('div');
    previousRow.style.display = 'flex';
    previousRow.style.alignItems = 'center';
    previousRow.style.marginLeft = '25px';
    previousRow.style.marginBottom = '10px';

    // Checkbox for "Previous Bet on Win"
    const previousBetWinCheckbox = document.createElement('input');
    previousBetWinCheckbox.type = 'checkbox';
    previousBetWinCheckbox.id = "previous-bet-win";
    previousBetWinCheckbox.checked = useBouncyDozenBet_previous_win;
    previousBetWinCheckbox.style.transform = 'scale(2)';
    previousBetWinCheckbox.style.marginRight = '10px';
    previousBetWinCheckbox.addEventListener('change', function () {
        useBouncyDozenBet_previous_win = this.checked;
    });
    previousRow.appendChild(previousBetWinCheckbox);

    // Label for "Previous Bet on Win"
    const previousBetWinLabel = document.createElement('label');
    previousBetWinLabel.htmlFor = 'previous-bet-win';
    previousBetWinLabel.style.fontSize = '20px';
    previousBetWinLabel.appendChild(document.createTextNode('Previous Bet on Win'));
    previousBetWinLabel.style.marginRight = '20px';
    previousRow.appendChild(previousBetWinLabel);

    // Checkbox for "Previous Bet on Loss"
    const previousBetLossCheckbox = document.createElement('input');
    previousBetLossCheckbox.type = 'checkbox';
    previousBetLossCheckbox.id = "previous-bet-loss";
    previousBetLossCheckbox.checked = useBouncyDozenBet_previous_loss;
    previousBetLossCheckbox.style.transform = 'scale(2)';
    previousBetLossCheckbox.style.marginRight = '10px';
    previousBetLossCheckbox.addEventListener('change', function () {
        useBouncyDozenBet_previous_loss = this.checked;
    });
    previousRow.appendChild(previousBetLossCheckbox);

    // Label for "Previous Bet on Loss"
    const previousBetLossLabel = document.createElement('label');
    previousBetLossLabel.htmlFor = 'previous-bet-loss';
    previousBetLossLabel.style.fontSize = '20px';
    previousBetLossLabel.appendChild(document.createTextNode('Previous Bet on Loss'));
    previousRow.appendChild(previousBetLossLabel);

    mainContainer.appendChild(previousRow);

            // Create the second row with "Progress on Win" and "Progress on Loss"
            const resetAnyWinRow = document.createElement('div');
            resetAnyWinRow.style.display = 'flex';
            resetAnyWinRow.style.alignItems = 'center';
            resetAnyWinRow.style.marginLeft = '25px';
            resetAnyWinRow.style.marginBottom = '10px';
    
            // Checkbox for "Previous Bet on Loss"
            const resetAnyWinCheckbox = document.createElement('input');
            resetAnyWinCheckbox.type = 'checkbox';
            resetAnyWinCheckbox.id = "reset-any-win";
            resetAnyWinCheckbox.checked = useBouncyDozenBet_reset_any_win;
            resetAnyWinCheckbox.style.transform = 'scale(2)';
            resetAnyWinCheckbox.style.marginRight = '10px';
            resetAnyWinCheckbox.addEventListener('change', function () {
                useBouncyDozenBet_reset_any_win = this.checked;
            });
            resetAnyWinRow.appendChild(resetAnyWinCheckbox);
        
            // Label for "Previous Bet on Loss"
            const resetAnyWinLabel = document.createElement('label');
            resetAnyWinLabel.htmlFor = 'reset-any-win';
            resetAnyWinLabel.style.fontSize = '20px';
            resetAnyWinLabel.appendChild(document.createTextNode('Reset on any win'));
            resetAnyWinRow.appendChild(resetAnyWinLabel);
        
            mainContainer.appendChild(resetAnyWinRow);

    // Bets display
    const displayBetDiv = document.createElement('div');
    displayBetDiv.style.marginTop = '10px';
    displayBetDiv.style.marginLeft = '25px';
    const displayBet = document.createElement('span');
    displayBet.id = 'display_bouncy_dozen_bets';
    displayBetDiv.appendChild(displayBet);
    mainContainer.appendChild(displayBetDiv);

    // Bet on Dozen display
    const displayBetDozenDiv = document.createElement('div');
    displayBetDozenDiv.style.marginTop = '10px';
    displayBetDozenDiv.style.marginLeft = '25px';
    const displayDozenProfit = document.createElement('span');
    displayDozenProfit.id = 'displayDozenBet';
    displayBetDozenDiv.appendChild(displayDozenProfit);
    mainContainer.appendChild(displayBetDozenDiv);

    // Profit display
    const displayProfitDiv = document.createElement('div');
    displayProfitDiv.style.marginTop = '10px';
    displayProfitDiv.style.marginLeft = '25px';
    const displayProfit = document.createElement('span');
    displayProfit.id = 'displayProfit';
    displayProfitDiv.appendChild(displayProfit);
    mainContainer.appendChild(displayProfitDiv);

    return mainContainer;
}


function bouncy_dozen_round_profit() {


    if (global_win_loss === 0 && bouncyDozenBetPlaced) {
        bouncyProfit -= global_bouncy_current_bet * 2;

        if (useBouncyDozenBet_progress_loss) {

            global_bouncy_bet_index += 1;
            if (global_bouncy_bet_index > global_bouncy_bet_array.length - 1) global_bouncy_bet_index = 0;
        }

        if (useBouncyDozenBet_previous_loss) {
            global_bouncy_bet_index -= 1;
            if (global_bouncy_bet_index < 0) global_bouncy_bet_index = 0;
        }



    }
    if (global_win_loss === 1 && bouncyDozenBetPlaced) {
        bouncyProfit += global_bouncy_current_bet;

        if (useBouncyDozenBet_progress_win) {
            global_bouncy_bet_index += 1;
            if (global_bouncy_bet_index > global_bouncy_bet_array.length - 1) global_bouncy_bet_index = 0;
        }
        if (useBouncyDozenBet_previous_win) {
            global_bouncy_bet_index -= 1;
            if (global_bouncy_bet_index < 0) global_bouncy_bet_index = 0;
        }
        if(useBouncyDozenBet_reset_any_win)
            {
                global_bouncy_bet_index = 0;
                bouncyProfit = 0;
            }

    }



   

    global_bouncy_current_bet = global_bouncy_bet_array[global_bouncy_bet_index];


    let bouncyBetDisplay = document.getElementById('displayProfit');
    if (bouncyBetDisplay) {
        if (bouncyProfit > 0) {
            bouncyBetDisplay.innerText = 'Round Profit: ' + bouncyProfit + '  WON';
            oldUserBets_dozens = new Map();

        }
        else {
            bouncyBetDisplay.innerText = 'Round Profit: ' + bouncyProfit
        }



    }
    if (bouncyProfit >= 0) {
        bouncyProfit = 0;
        global_bouncy_bet_index = 0;
        oldUserBets_dozens = new Map();
    }
}

function cache_bouncy_dozen_bets() {

    let numberInput = document.getElementById('bouncyBets');
    if (numberInput) {

        let nullCache = JSON.parse(localStorage.getItem('bouncy_dozen_bets'));


        // Set the default array
        let defaultArray = [1, 2, 2, 6, 6, 18, 18, 54, 54, 162, 162];

        if (nullCache === null || nullCache.length === 0) {

            // If the cache is not set or empty, initialize it with the default array
            localStorage.setItem('bouncy_dozen_bets', JSON.stringify(defaultArray));

        }

        // Always set the input value from cache or default if cache is still empty
        nullCache = JSON.parse(localStorage.getItem('bouncy_dozen_bets')) || defaultArray;
        numberInput.value = nullCache.join(", ");

    }
}

function on_spin_dozen_bouncy_bet() {
    let numberInput = document.getElementById('bouncyBets');
    if (numberInput) {


        global_bouncy_current_bet = global_bouncy_bet_array[global_bouncy_bet_index];

        // Display the array in the UI if the display element exists
        let bouncyBetDisplay = document.getElementById('display_bouncy_dozen_bets');

        if (bouncyBetDisplay) {
            // Create an HTML string with each element of the array
            let displayArray = global_bouncy_bet_array.map((bet, index) => {
                if (index === global_bouncy_bet_index) {
                    // Highlight the element at global_bouncy_bet_index in yellow
                    return `<span style="background-color: yellow;">${bet}</span>`;
                } else {
                    return bet;
                }
            }).join(', '); // Join the elements with a comma and a space

            // Set the display content with the highlighted index
            bouncyBetDisplay.innerHTML = 'Using: ' + displayArray;
        }

    }
}

function diplay_dozen_bet() {
    global_bouncy_current_bet = global_bouncy_bet_array[global_bouncy_bet_index];

    let display_dozen_bet = document.getElementById('displayDozenBet');
    if (display_dozen_bet) {

        display_dozen_bet.innerHTML = 'Bet: ---';
        bouncyDozenBetPlaced = false;
        if (arraysEqual(d1d2, nBounce) || arraysEqual(d1d3, nBounce) || arraysEqual(d2d1, nBounce) ||
            arraysEqual(d2d3, nBounce) || arraysEqual(d3d1, nBounce) || arraysEqual(d3d2, nBounce)) {
            bouncyDozenBetPlaced = true;


            display_dozen_bet.innerHTML = 'Bet: ' + global_bouncy_current_bet;
        }


    }


}