//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 = {//Convert them later
        T: sliders.SlideT.value,
        Mis: sliders.SlideMis.value,
        Width: sliders.SlideWidth.value,
        Span: sliders.SlideSpan.value,
        D: sliders.SlideD.value,
        Wrap: sliders.SlideWrap.value,
        mu: sliders.Slidemu.value,
        h: sliders.Slideh.value,
        E: sliders.SlideE.value,
    };

    //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('Slack').value = result.Slack;
    document.getElementById('TDO').value = result.TDO;
    document.getElementById('Wrinkles').value = result.Wrinkles;
    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({ T, Mis, Width, Span, D, Wrap, mu, h, E }) {
    const Tension = T
    const Modulus = E * 1000000000 // from GPa
    const Thick = h / 1000000 //from μm
    const WebWidth = Width / 1000 //from mm
    Span /= 1000 //from mm
    const Misalign = Mis / 1000000 //Micron to metres
    const ui = mu
    const s = Tension / (Modulus * Thick)
    const q = Misalign / WebWidth
    Wrap *= Math.PI / 180
    let Slack = "No"
    if (q > s * Span) {
        Slack = "Yes"
        document.getElementById("Slack").backgroundColor = "pink"
    }
    else {
        document.getElementById("Slack").style.backgroundColor = "lightgreen"
    }
    const rforce = ui * Tension * WebWidth * Wrap
    let TL = 2 * Span * q / 3
    const cplx = 0.1667 * (WebWidth * WebWidth * WebWidth * Modulus * Thick - 6 * Tension * Span * Span) / (Span * Span)
    const qmax = rforce / cplx
    const tdforce = q * cplx
    const TLMax = 2 * Span * qmax / 3
    TL = Math.min(TL, TLMax)
    const TDO = TL * 1000000

    //Wrinkle stuff
    let Tcr, WrinkleF, Wangle
    Tcr = Math.atan(Misalign / WebWidth)
    let Mx, Ey, Vxy, Vyx
    Mx = Modulus; Vxy = 0.3
    Ey = Mx; Vyx = Vxy
    //Go to Good's nomenclature
    const b = WebWidth
    const a = Span
    const H = Thick
    const Mint = H * b * b * b / 12
    const G = Math.sqrt(Mx * Ey) / (2 * (1 + Math.sqrt(Vxy * Vyx)))
    const Ax = 5 * b * H / 6
    const Phi = 12 * Mx * Mint / (G * Ax * a * a)
    T = Tension * b //Total tension, rather than N/m
    const Smd = Tension / H
    WrinkleF = 2 / (5 * G * a)
    WrinkleF *= 5 * Mx * Mx * H * H * Math.pow(b, 6) + T * Math.pow(a, 4) * (3 * T + 5 * G * H * b) * (1 + Phi) + Mx * H * a * a * b * b * b * (25 * G * H * b + T * (6 * Phi - 4))
    WrinkleF /= 5 * Mx * Mx * H * H * Math.pow(b, 6) + 9 * T * T * Math.pow(a, 4) * (1 + Phi) + 2 * Mx * H * T * a * a * b * b * b * (3 * Phi + 13)
    WrinkleF *= Math.sqrt((3 * Math.sqrt(3) * Math.PI * H * a * Math.sqrt(Ey) * Math.pow(Smd, 1.5)) / Math.sqrt(1 - Vxy * Vyx) - (3 * Math.PI * Math.PI * H * H * Ey * Smd) / (1 - Vxy * Vyx))
    let Wrinkles = "None"
    if (WrinkleF > Tcr) {
        document.getElementById("Wrinkles").style.backgroundColor = "lightgreen"
    }
    else {
        Wangle = 0.5 * Math.atan(Misalign * Modulus * H * WebWidth * WebWidth / (6 * Tension * Span * Span))
        Wangle *= 180 / Math.PI
        const Radius = D / 2000
        if (Tension * ui / (2 * Radius) * WebWidth / H > Modulus * (H / Radius) / Math.sqrt(3 * (1 - 0.3 * 0.3))) {
            Wrinkles = "Hard: " + Wangle.toFixed(1) + "°"
            document.getElementById("Wrinkles").style.backgroundColor = "red"
        }
        else {
            Wrinkles = "Soft: " + Wangle.toFixed(1) + "°"
            document.getElementById("Wrinkles").style.backgroundColor = "pink"
        }
    }
    //Now we return everything - text boxes, plot and the name of the canvas, which is 'canvas' for a single plot
    return {
        Slack: Slack,
        TDO: TDO.toFixed(2),
        Wrinkles: Wrinkles,
    };
}