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 = {
        D: sliders.SlideD.value*1e-6, //cm2 units
        h: sliders.Slideh.value*1e-4, //μm to cm units
        rho: sliders.Sliderho.value, //keep in g.cc
        R: sliders.SlideR.value/10, //mm to cm
        H: sliders.SlideH.value/10, //mm to cm
        V: sliders.SlideV.value, //keep in cm3
        Csat: sliders.SlideCsat.value/1e3, //mg/ml to g/ml
        tmax: sliders.Slidetmax.value * 60, //min to s
        MWt: sliders.SlideMWt.value, 
        eta: sliders.Slideeta.value, //Keep as cP for Wilke-Chang
   };


    //Send inputs off to CalcIt where the names are instantly available
    //Get all the resonses as an object, result
    const result = CalcIt(inputs);
    document.getElementById('Tmg').value = result.Tmg;
    document.getElementById('Dcalc').value = result.Dcalc;
    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({ D, h, rho, R, H, V, Csat, tmax, MWt, eta }) {
     let Sol = [], t=0
     const tstep=tmax/1000, PI=Math.PI, beta=H/R, Vs=PI*R*R*H, Cd=Vs*rho/V
     const K=D/h*Math.pow(Vs/rho,0.667)*2*PI*(1+2*beta)*Math.pow(1/(PI*beta),0.667)
     const Tmg=1000*Vs*rho
     //Diffusion coefficient via Modified Wilke-Chang
     const Dcalc=7.4e-8*Math.pow(2.26*18,0.5)*298/(eta*Math.pow(MWt,0.6))*1e6
     let C=0
     Sol.push({x:0,y:0})
    for (t = tstep; t<=tmax; t+=tstep) {
        //The max fixes tiny numerical glitches that can blow up
        C+=K*Math.pow(Math.max(Cd-C,0),0.667)*Math.max(Csat-C,0)*tstep
        Sol.push({x:t/60,y:C*1000})
        }
    //Now set up all the graphing data detail by detail.
    let plotData = [Sol]

    const prmap = {
        plotData: plotData, //An array of 1 or more datasets
        lineLabels: [], //An array of labels for each dataset
        colors: ["orange"], //An array of colors for each dataset
        borderWidth: [2,], //An array of line widths for each dataset
        hideLegend: true, //Set to true if you don't want to see any labels/legnds.
        xLabel: 't&min', //Label for the x axis, with an & to separate the units
        yLabel: 'C&mg/ml', //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: undefined, //We can define a tick function if we're being fancy
        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: [0,], //Set min and max, e.g. [-10,100], leave one or both blank for auto
        yMinMax: [0, ], //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: 'F2', //These are the sig figs for the Tooltip readout. A wide choice!
        ySigFigs: 'F2', //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 {
        Tmg: Tmg.toFixed(0)+ " : "+(Cd*1000).toPrecision(3),
        Dcalc: Dcalc.toFixed(1),
        plots: [prmap],
        canvas: ['canvas'],
    };
}