//One universal basic required here to get things going once loaded
window.onload = function () {
    //restoreDefaultValues(); //Un-comment this if you want to start with defaults
    Main();
};

//Main() is hard wired as THE place to start calculating when inputs change
//It does no calculations itself, it merely sets them up, sends off variables, gets results and, if necessary, plots them.
function Main() {
    //Save settings every time you calculate, so they're always ready on a reload
    saveSettings();

    //Send all the inputs as a structured object
    //If you need to convert to, say, SI units, do it here!
    const inputs = {
        L: sliders.SlideL.value / 1000, //mm to m
        dT: sliders.SlidedT.value,
        Fluid: document.getElementById("Fluid").value,
        Mode: document.getElementById("Mode").value,
    };

    //Send inputs off to CalcIt where the names are instantly available
    //Get all the resonses as an object, result
    const result = CalcIt(inputs);

    //Set all the text box outputs
    document.getElementById('Q').value = result.Q;
    document.getElementById('h').value = result.h;
    document.getElementById('Ra').value = result.Ra;
    document.getElementById('Pr').value = result.Pr;

    if (result.plots) {
        for (let i = 0; i < result.plots.length; i++) {
            plotIt(result.plots[i], result.canvas[i]);
        }
    }

    //You might have some other stuff to do here, but for most apps that's it for Main!
}

//Here's the app calculation
//The inputs are just the names provided - their order in the curly brackets is unimportant!
//By convention the input values are provided with the correct units within Main
function CalcIt({ L, dT, Fluid, Mode }) {
    //viscosity, η, heat capacity Cp, thermal conductivity, k, density ρ, thermal expansion coefficient β, thermal diffusivity α and gravity g.
    let h, eta, Cp, k, rho, beta, alpha
    if (Fluid == "Water") {
        eta = 0.001, Cp = 4180, k = 0.6, rho = 1000, beta = 3 * 2.1e-6, alpha = 0.146 / 1e6
    } else {
        eta = 1.8e-5, Cp = 700, k = 0.024, rho = 1.2, beta = 0.0037, alpha = 19 / 1e6
    }
    const g = 9.81
    const Ra = rho * beta * dT * Math.pow(L, 3) * g / (eta * alpha)
    const Pr = Cp * eta / k
    if (Mode == "Vertical") {
        h = k / L * (0.68 + 0.67 * Math.pow(Ra, 0.25) / Math.pow(1 + Math.pow(0.492 / Pr, 9 / 16), 4 / 9))
    }
    if (Mode.includes("Above")) {
        h = k / L * 0.54 * Math.pow(Ra, 0.25)
    }
    if (Mode.includes("Below")) {
        h = k / L * 0.27 * Math.pow(Ra, 0.25)
    }
    const Q = h * dT
    //Now we return everything - text boxes, plot and the name of the canvas, which is 'canvas' for a single plot
    return {
        Q: Q.toFixed(0),
        h: h.toPrecision(3),
        Ra: Ra.toPrecision(3),
        Pr: Pr.toPrecision(3),
    };
}