async function loadProject(projectIdParam, projectType, parentProjectIdParam) {

    if (!projectIdParam || !projectType) {
        console.warn("loadProject aborted: projectIdParam or projectType is undefined.");
        return;
    }
showLoadingOverlay();
//document.getElementById('loadingOverlay').style.display = 'flex';
    console.log("loadProject function started");
    projectId = projectIdParam;
    parentProjectId = parentProjectIdParam;

loadVerticalProfileImage(1);
    try {


        console.log("Processed projectId: ", projectId);
        console.log("Project Type: ", projectType);
        console.log("Parent Project ID: ", parentProjectId);

        clearKmlLayers();
        const contentProjectId = projectType === 'mainProject' ? projectId : parentProjectId;
        updateProjectContent(contentProjectId);
	const contentSubProjectId = projectType === 'subProject' ? projectId : parentProjectId;
	updateSubProjectContent(contentSubProjectId);

        // Step 5: Fetch project settings from the server
        const response = await fetch(`scripts/projectsettings.php?project_id=${projectId}&projectType=${projectType}&parentProjectId=${parentProjectId}`);
        const data = await response.json();

        if (data.status === 'success') {
            console.log(data.message);
            projectSettings = data.projectSettings;
            console.log("projectSettings fetched: ", projectSettings);
            updateMapSettings(projectId, projectType, parentProjectId);
            //loadProjectCSVTables();
        } else {
            console.error("Failed to load project data: ", data.message);
        }

/*
// Step 4: Toggle visibility based on project type
        if (projectType === 'mainProject') {
            document.getElementById("total-project-textcontainer").style.display = "block";
            document.getElementById("sub-project-textcontainer").style.display = "none";
            document.getElementById("elevation-length-graph").style.display = "none";
            document.querySelectorAll(".table-background-container").forEach(el => el.style.display = "none");
        } else {
            document.getElementById("total-project-textcontainer").style.display = "none";
            document.getElementById("sub-project-textcontainer").style.display = "block";
            document.getElementById("elevation-length-graph").style.display = "block";
            document.querySelectorAll(".table-background-container, .data-table-container").forEach(el => el.style.display = "block");
        }
*/

// Step 4: Toggle visibility based on project type and hide_data condition
if (projectType === 'mainProject') {
    // Main project display settings
    document.getElementById("total-project-textcontainer").style.display = "block";
    document.getElementById("sub-project-textcontainer").style.display = "none";
    document.getElementById("elevation-length-graph").style.display = "none";
document.querySelectorAll(".data-heading").forEach(element => {
    element.style.display = "none";
});
    document.querySelectorAll(".table-background-container").forEach(el => el.style.display = "none");
} else {
    // Find the selected sub-project in the subProjects array using projectId
    const selectedSubProject = subProjects.find(project => project.id == projectId);
    
    // Check if hide_data is set to 1
    if (selectedSubProject && selectedSubProject.hide_data === 1) {
        // Hide elements if hide_data is set to 1
        document.getElementById("total-project-textcontainer").style.display = "none";
        document.getElementById("sub-project-textcontainer").style.display = "block";
        document.getElementById("elevation-length-graph").style.display = "none";
        document.querySelectorAll(".table-background-container, .data-table-container").forEach(el => el.style.display = "none");
	document.querySelectorAll(".data-heading").forEach(element => {
    element.style.display = "none";
});

    } else {
        // Show elements if hide_data is not set to 1
        document.getElementById("total-project-textcontainer").style.display = "none";
        document.getElementById("sub-project-textcontainer").style.display = "block";
        document.getElementById("elevation-length-graph").style.display = "block";
        document.querySelectorAll(".table-background-container, .data-table-container").forEach(el => el.style.display = "block");
	document.querySelectorAll(".data-heading").forEach(element => {
    element.style.display = "block";
});

    }
}







        // Initialize an array to store names of missing KML files
        let missingKmlFiles = [];

        // Step 1: Fetch and load the first KML file
        let kmlFiles = [];
        let firstKmlFilePath = projectType === 'mainProject'
            ? `${projectIdParam}/kml1.kml`
            : `${parentProjectIdParam}/${projectIdParam}/kml1.kml`;

        try {
            let firstResponse = await fetch(`${SITE_URL}/${PORTAL_VERSION}/fetchfile.php?file=${firstKmlFilePath}`);
            if (firstResponse.ok) {
                const firstData = await firstResponse.json();
                kmlFiles.push(firstData.tempFileUrl);
                loadKmlLayer(firstData.tempFileUrl);  // Load the first KML immediately
            } else {
                missingKmlFiles.push('kml1');
            }
        } catch (error) {
            missingKmlFiles.push('kml1');
        }

        // Step 2: Fetch the remaining KML files asynchronously
        for (let i = 2; i <= 20; i++) {
            let kmlFilePath = projectType === 'mainProject'
                ? `${projectIdParam}/kml${i}.kml`
                : `${parentProjectIdParam}/${projectIdParam}/kml${i}.kml`;

            try {
                // Using try...catch to suppress individual fetch errors
                const response = await fetch(`${SITE_URL}/${PORTAL_VERSION}/fetchfile.php?file=${kmlFilePath}`);
                if (response.ok) {
                    const responseData = await response.json();
                    kmlFiles.push(responseData.tempFileUrl);
                } else {
                    missingKmlFiles.push(`kml${i}`);
                }
            } catch {
                // Suppress fetch error message in the console by catching without logging
                missingKmlFiles.push(`kml${i}`);
            }
        }

        // Step 3: Generate checkboxes for available KML layers
	generateKmlLayerCheckboxes(kmlFiles);


/*        // Step 4: Toggle visibility based on project type
        if (projectType === 'mainProject') {
            document.getElementById("total-project-textcontainer").style.display = "block";
	    document.getElementById("elevation-length-graph").style.display = "none";
	    document.querySelectorAll(".data-heading").style.display = "none";
            document.querySelectorAll(".table-container").forEach(el => el.style.display = "none");
        } else {
            document.getElementById("total-project-textcontainer").style.display = "none";
            document.getElementById("elevation-length-graph").style.display = "block";
            document.querySelectorAll(".table-container, .data-table-container").forEach(el => el.style.display = "block");
	}
*/

/*
        // Step 5: Fetch project settings from the server
        const response = await fetch(`scripts/projectsettings.php?project_id=${projectId}&projectType=${projectType}&parentProjectId=${parentProjectId}`);
        const data = await response.json();

        if (data.status === 'success') {
            console.log(data.message);
            projectSettings = data.projectSettings;
            console.log("projectSettings fetched: ", projectSettings);
            updateMapSettings(projectId, projectType, parentProjectId);
            loadProjectCSVTables();
        } else {
            console.error("Failed to load project data: ", data.message);
	}
*/

        // Log missing KML files as a single line after all attempts
        if (missingKmlFiles.length > 0) {
            console.warn(`Not found: ${missingKmlFiles.join(', ')}`);
	}


        // Generate checkboxes and get promises for loading each layer
        const loadLayerPromises = kmlFiles.map(kmlFile => loadKmlLayer(kmlFile));

        // Wait until all KML layers have finished loading
        await Promise.all(loadLayerPromises);
await sleep(2000);
const selectedSubProject = subProjects.find(project => project.id == projectId);
if (selectedSubProject && selectedSubProject.hide_data === 1) {
        document.querySelectorAll(".show-data-button").forEach(element => {
    element.style.display = "none";
});
}



hideLoadingOverlay();
        //document.getElementById('loadingOverlay').style.display = 'none';

   const bannerElement = document.querySelector('.vAygCK-api-load-alpha-banner');
    if (bannerElement) {
        bannerElement.style.display = 'none';
    }



    } catch (error) {
        console.error("Error in loadProject function:", error);
    }


}