script.js

const modelViewer1 = document.getElementById('modelViewer1');
const modelViewer2 = document.getElementById('modelViewer2');
const tabButtons = document.querySelectorAll('.tab-button');
const allSubOptions = document.querySelectorAll('.tab-content input[type="radio"]');
const initialCameraOrbit1 = "177.62deg 96.26deg 4.65m"; 
const initialCameraOrbit2 = "-90.53deg 92.82deg 4.69m"; 
const resetvalue = "0deg -90deg 0deg";

document.addEventListener('DOMContentLoaded', function() {

    tabButtons.forEach(button => {
        button.addEventListener('click', function() {
            openTab(this.getAttribute('data-tab'));
        });
    });

    // Event listeners for all sub-options
    allSubOptions.forEach(option => option.addEventListener('change', function() {
        uncheckAllSubOptions(this.value);
        if(this.checked) {
            updateModels(this) ;
        }
    }));

    // Initialize the first tab open
    openTab('tab1');

});

function updateModels(selectedSubOption) {

    const modelPaths = getModelPaths(selectedSubOption.value);

    // Set the camera orbit based on specific conditions
    switch(selectedSubOption.value) {
        case 'option1c':
            cameraOrbit = initialCameraOrbit2;
            break;
        case 'option1d':
            cameraOrbit = initialCameraOrbit2;
            break;
        default:
            cameraOrbit = initialCameraOrbit1;
    }

    modelViewer1.setAttribute('src', modelPaths.model1Path);
    modelViewer1.addEventListener('load', () => {
        modelViewer1.setAttribute('orientation', resetvalue);
        modelViewer1.setAttribute('camera-orbit', cameraOrbit);
        modelViewer1.resetCamera();
    });

    modelViewer2.setAttribute('src', modelPaths.model2Path);
    modelViewer2.addEventListener('load', () => {
        modelViewer2.setAttribute('orientation', resetvalue);
        modelViewer2.setAttribute('camera-orbit', cameraOrbit);
        modelViewer2.resetCamera();
    });
}

function getModelPaths(optionValue) {
    switch (optionValue) {
        case 'option1a':
            return { model1Path: 'landscape/kodim08_50_ori.gltf', model2Path: 'landscape/kodim08_50_sh.gltf' };
        case 'option1b':
            return { model1Path: 'landscape/kodim08_30_ori.gltf', model2Path: 'landscape/kodim08_30_sh.gltf' };
        case 'option1c':
            return { model1Path: 'landscape/kodim08_50_ori_top.gltf', model2Path: 'landscape/kodim08_50_sh_top.gltf' };
        case 'option1d':
            return { model1Path: 'landscape/kodim08_30_ori_top.gltf', model2Path: 'landscape/kodim08_30_sh_top.gltf' };
        case 'option2a':
            return { model1Path: 'landscape/kodim01_50_ori.gltf', model2Path: 'landscape/kodim01_50_sh.gltf' };
        case 'option2b':
            return { model1Path: 'landscape/kodim01_30_ori.gltf', model2Path: 'landscape/kodim01_30_sh.gltf' };
        case 'option3a':
            return { model1Path: 'landscape/kodim02_50_ori.gltf', model2Path: 'landscape/kodim02_50_sh.gltf' };
        case 'option3b':
            return { model1Path: 'landscape/kodim02_30_ori.gltf', model2Path: 'landscape/kodim02_30_sh.gltf' };
        case 'option4a':
            return { model1Path: 'landscape/div2k801_50_ori.gltf', model2Path: 'landscape/div2k801_50_sh.gltf' };
        case 'option4b':
            return { model1Path: 'landscape/div2k801_30_ori.gltf', model2Path: 'landscape/div2k801_30_sh.gltf' };
        case 'option5a':
            return { model1Path: 'landscape/div2k802_50_ori.gltf', model2Path: 'landscape/div2k802_50_sh.gltf' };
        case 'option5b':
            return { model1Path: 'landscape/div2k802_30_ori.gltf', model2Path: 'landscape/div2k802_30_sh.gltf' };
        case 'option6a':
            return { model1Path: 'landscape/clic01_50_ori.gltf', model2Path: 'landscape/clic01_50_sh.gltf' };
        case 'option6b':
            return { model1Path: 'landscape/clic01_30_ori.gltf', model2Path: 'landscape/clic01_30_sh.gltf' };
        case 'option7a':
            return { model1Path: 'landscape/clic02_50_ori.gltf', model2Path: 'landscape/clic02_50_sh.gltf' };
        case 'option7b':
            return { model1Path: 'landscape/clic02_30_ori.gltf', model2Path: 'landscape/clic02_30_sh.gltf' };

    }
}

function uncheckAllSubOptions(exceptValue) {
    const allSubOptions = document.querySelectorAll('.tab-content input[type="radio"]');

    allSubOptions.forEach(option => {
        if (option.value !== exceptValue) {
            option.checked = false;
        }
    });
}

function openTab(tabId) {
    const tabButtons = document.querySelectorAll('.tab-button');
    const allSubOptions = document.querySelectorAll('.tab-content input[type="radio"]');

    var i, tabcontent;
    tabcontent = document.getElementsByClassName("tab-content");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    var selectedTabContent = document.getElementById(tabId);
    if (selectedTabContent) {
        selectedTabContent.style.display = "block";
    }
    tabButtons.forEach(button => button.classList.remove('active'));
    document.querySelector(`.tab-button[data-tab='${tabId}']`).classList.add('active');

    const firstSubOption = selectedTabContent.querySelector('input[type="radio"]');
    if (firstSubOption) {
        uncheckAllSubOptions(firstSubOption);
        firstSubOption.checked = true; // Set the first sub-option as checked
        updateModels(firstSubOption);  // Update the models based on this sub-option
    }
}