//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 = {
        K: sliders.SlideK.value / 1000, //mW to W
        L: sliders.SlideL.value / 1000, //mm to m
        h: sliders.Slideh.value / 1000, //mm to m
        TG: sliders.SlideTG.value,
        TB: sliders.SlideTB.value,
        // tmax: sliders.Slidetmax.value,
        Material: document.getElementById("Material").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;

    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({ K, L, h, TG, TB, Material }) {
    const delta = TG - TB
    const Q = Math.abs(K * delta / L)
    const Vals = Material.split(",")
    const rho = parseFloat(Vals[1])
    const Cp = parseFloat(Vals[2])
    const D = K / (Cp * rho) //Thermal diffusivity
    const Dh = D / h //Now the total mass
    const nSteps = 1000
    let T = [], tTot = 1, tTotCount = 0, Tnow = TG
    //Try different nice-looking timescales in minutes
    const tStep = [1, 10, 50, 100, 500, 1000, 5000, 10000]
    while (Math.abs(Tnow - TB) > 0.9 && tTot < 10000) {
        Tnow = TG; tTotCount += 1; tTot = tStep[tTotCount], T = []
        for (let i = 0; i < nSteps; i++) {
            Tnow -= Dh * (Tnow - TB) / L * tTot / nSteps * 60 //Calculations are in seconds!
            T.push({ x: i / nSteps * tTot, y: Tnow })
        }
    }

    //Now set up all the graphing data.
    const plotData = [T]
    const lineLabels = ["T °C"]
    const myColors = ["blue"]

    //Now set up all the graphing data detail by detail.
    const prmap = {
        plotData: plotData, //An array of 1 or more datasets
        lineLabels: lineLabels, //An array of labels for each dataset
        colors: myColors, //An array of colors for each dataset
        hideLegend: true,
        borderWidth: [2],
        xLabel: 't&min', //Label for the x axis, with an & to separate the units
        yLabel: 'T&°C', //Label for the y axis, with an & to separate the units
        y2Label: null, //Label for the y2 axis, null if not needed
        yAxisL1R2: [], //Array to say which axis each dataset goes on. Blank=Left=1
        logX: false, //Is the x-axis in log form?
        xTicks: function (value, index, ticks) { if (value.toPrecision(2).includes("1") || value.toPrecision(2).includes("5")) { if (value >= 1) { return value.toFixed(0) } else { return value.toPrecision(1) } } else { return "" }; },
        logY: false, //Is the y-axis in log form?
        yTicks: undefined, //We can define a tick function if we're being fancy
        legendPosition: 'top', //Where we want the legend - top, bottom, left, right
        xMinMax: [,], //Set min and max, e.g. [-10,100], leave one or both blank for auto
        yMinMax: [,], //Set min and max, e.g. [-10,100], leave one or both blank for auto
        y2MinMax: [,], //Set min and max, e.g. [-10,100], leave one or both blank for auto
        xSigFigs: 'P3', //These are the sig figs for the Tooltip readout. A wide choice!
        ySigFigs: 'P3', //F for Fixed, P for Precision, E for exponential
    };

    //Now we return everything - text boxes, plot and the name of the canvas, which is 'canvas' for a single plot
    return {
        plots: [prmap],
        canvas: ['canvas'],
        Q: Q.toPrecision(3),
    };
}