//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 = {
        V: sliders.SlideV.value / 1e15, //pl to m3
        theta: sliders.Slidetheta.value * Math.PI / 180, //Deg to rad
        DPI: sliders.SlideDPI.value,
        OD: sliders.SlideOD.value,
        HatOD: sliders.SlideHatOD.value * 1e-6, //μm to m
    };

    //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('DDrop').value = result.DDrop;
    document.getElementById('DDot').value = result.DDot;
    document.getElementById('HDot').value = result.HDot;
    document.getElementById('SDot').value = result.SDot;
    document.getElementById('OverlapG').value = result.OverlapG;
    document.getElementById('OverlapD').value = result.OverlapD;
    document.getElementById('PercS').value = result.PercS;
    document.getElementById('PercD').value = result.PercD;
    document.getElementById('PercO').value = result.PercO;
    document.getElementById('OD').value = result.OD;

    //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({ V, theta, DPI, OD, HatOD }) {
    const cost = Math.cos(theta), sint = Math.sin(theta)
    //The basic calculations
    DDrop = Math.pow(V * 6 / Math.PI, 0.333)
    const r = 3 / Math.PI * Math.pow(V / ((2 + cost) * Math.pow(1 - cost, 2)), 0.333)
    const HDot = r * (1 - cost)
    const DDot = 2 * Math.sqrt(HDot * (2 * r - HDot))
    const SDot = 1e-3 / (DPI / 25.4)
    const OverlapG = DDot / SDot
    const OverlapD = DDot / (SDot * Math.sqrt(2))

    //Graphics stuff
    const dpr = window.devicePixelRatio || 1;
    const theCanvas = document.querySelector('canvas')
    const ctx = theCanvas.getContext('2d')//setupCanvas(theCanvas, dpr);
    //const w = Math.floor(theCanvas.width / dpr), h = Math.floor(theCanvas.height / dpr)
    const w = theCanvas.width, h = theCanvas.height
    //We need to convert from metres to pixels for the graphics calculations
    const mtopix = SDot / h
    const offs = (r - HDot) / mtopix

    //Set up the rectangle
    ctx.beginPath();
    ctx.fillStyle = "white"
    ctx.strokeStyle = "white"
    ctx.lineWidth = 0
    ctx.rect(0, 0, w, h);
    ctx.strokeWidth = 0
    ctx.fill();
    ctx.stroke()

    const ws = (w - h) / 2
    let i, i1, j, j1, y, hv
    const rc = h * r / SDot //Ratio of radius to spacing which is defined as h
    const rc2 = rc * rc
    const HatODpx = HatOD * h / SDot

    let ODv = Array(h).fill(0).map(() => Array(h))
    for (i = 0; i < h; i++) {
        for (j = 0; j < h; j++) {
            ODv[i][j] = 0
        }
    }
    let dCount = 0, overlap = false
    //The code could be more efficient, but it's fast & simple to understand
    for (i = 0; i < h; i++) {
        i1 = h - i
        for (j = 0; j < h; j++) {
            j1 = h - j
            overlap = false
            if (i * i + j * j <= rc2) {
                y = Math.sqrt(rc2 - i * i - j * j)
                hv = y - offs
                if (hv > 0) {
                    ODv[i][j] = Math.max(hv / HatODpx, 0)
                }
            }
            if (i1 * i1 + j * j <= rc2) {
                y = Math.sqrt(rc2 - i1 * i1 - j * j)
                hv = y - offs
                if (hv > 0) {
                    if (ODv[i][j] > 0) overlap = true
                    ODv[i][j] += Math.max(hv / HatODpx, 0)
                }
            }
            if (i1 * i1 + j1 * j1 <= rc2) {
                y = Math.sqrt(rc2 - i1 * i1 - j1 * j1)
                hv = y - offs
                if (hv > 0) {
                    if (ODv[i][j] > 0) overlap = true
                    ODv[i][j] += Math.max(hv / HatODpx, 0)
                }
            }
            if (i * i + j1 * j1 <= rc2) {
                y = Math.sqrt(rc2 - i * i - j1 * j1)
                hv = y - offs
                if (hv > 0) {
                    if (ODv[i][j] > 0) overlap = true
                    ODv[i][j] += Math.max(hv / HatODpx, 0)
                }
            }
            if (overlap) dCount++
        }
    }
    let tAbs = 0, oCount = 0
    let id = ctx.getImageData(0, 0, w, h);
    let pixels = id.data;
    for (i = 0; i < h; i++) {
        for (j = 0; j < h; j++) {
            pix = Math.max(Math.floor(255 * (1 - ODv[i][j])), 0)
            k = 4 * (i + ws + j * w)
            pixels[k] = pix; pixels[k + 1] = pix; pixels[k + 2] = pix
            if (ODv[i][j] == 0) oCount++
            //Convert OD to absorbed fraction
            tAbs += 1 - 1 / Math.pow(10, OD * ODv[i][j])
        }
    }
    ctx.putImageData(id, 0, 0)
    const count = h * h
    tAbs /= count
    //Now convert absorbed fraction average to OD
    OD = -Math.log10(1 - tAbs)
    PercS = 100 * (count - dCount - oCount) / count
    PercD = 100 * dCount / count
    PercO = 100 * oCount / count
    //Return the values
    return {
        DDrop: (DDrop * 1e6).toFixed(1),
        DDot: (DDot * 1e6).toFixed(1),
        HDot: (HDot * 1e6).toFixed(1),
        SDot: (SDot * 1e6).toFixed(1),
        OverlapG: OverlapG.toFixed(2),
        OverlapD: OverlapD.toFixed(2),
        PercS: PercS.toFixed(1),
        PercD: PercD.toFixed(1),
        PercO: PercO.toFixed(1),
        OD: OD.toFixed(2),
    };
}