document.addEventListener("DOMContentLoaded", function() {
    const basePrice = 79995;
    const baseDimensions = { width: 32, length: 16, depth: 4 };
    
    function calculatePrice(width, length, depth) {
        let baseVolume = baseDimensions.width * baseDimensions.length * baseDimensions.depth;
        let newVolume = width * length * depth;
        return ((newVolume / baseVolume) * basePrice).toFixed(2);
    }
    
    function updatePool() {
        let width = parseFloat(document.getElementById("width").value) || baseDimensions.width;
        let length = parseFloat(document.getElementById("length").value) || baseDimensions.length;
        let depth = parseFloat(document.getElementById("depth").value) || baseDimensions.depth;
        let plaster = document.getElementById("plaster").value;
        let coping = document.getElementById("coping").value;
        let tile = document.getElementById("tile").value;
        
        let price = calculatePrice(width, length, depth);
        document.getElementById("price").innerText = `$${price}`;
        
        let poolImage = document.getElementById("poolImage");
        poolImage.src = `path_to_images/${plaster}_${coping}_${tile}.jpg`; // Replace with actual image logic
    }
    
    document.querySelectorAll("input, select").forEach(element => {
        element.addEventListener("input", updatePool);
    });
    
    updatePool();
});