const css = window.document.styleSheets[0]


let currentTarget={
    fromLeft: 5,
    toLeft: 5, // left: 5%;
    fromTop:25,
    toTop: 25, // top: 25%;
    time: 0,
}

function genTarget(){
    currentTarget.fromLeft = currentTarget.toLeft;
    currentTarget.fromTop = currentTarget.toTop;
    currentTarget.toLeft = 5 + (randn_bm() - 0.5)*10
    currentTarget.toTop = 25 + (randn_bm()-0.5)*10
    currentTarget.time = randn_bm() * 0.4 +0.05
}
cssIndex = undefined;

const toMove = document.getElementById("indihome-content");
let keyframeId = 0;
function move(){
    genTarget()
    if(cssIndex!=undefined){
        css.deleteRule(cssIndex)
    }
    cssIndex = css.cssRules.length
    toMove.style.animation = ""
    css.insertRule(
        "@keyframes move"+keyframeId+" {\n" +
        "    0% {\n" +
        "        left: "+currentTarget.fromLeft+"%;\n" +
        "        top: "+currentTarget.fromTop+"%;\n" +
        "    }\n" +
        "    100% {\n" +
        "        left: "+currentTarget.toLeft+"%;\n" +
        "        top: "+currentTarget.toTop+"%;\n" +
        "    }\n" +
        "}"
        ,cssIndex)

    toMove.style.animation = "move"+keyframeId+" "+currentTarget.time+"s linear"
    keyframeId++;
}

function moveLoop(){
    move()
    setTimeout(moveLoop, currentTarget.time*1000)
}
moveLoop()


/**
 * this code uses the Box–Muller transform to give you a normal distribution between 0 and 1 inclusive.
 * https://stackoverflow.com/questions/25582882/javascript-math-random-normal-distribution-gaussian-bell-curve
 */
function randn_bm() {
    let u = 0, v = 0;
    while(u === 0) u = Math.random(); //Converting [0,1) to (0,1)
    while(v === 0) v = Math.random();
    let num = Math.sqrt( -2.0 * Math.log( u ) ) * Math.cos( 2.0 * Math.PI * v );
    num = num / 10.0 + 0.5; // Translate to 0 -> 1
    if (num > 1 || num < 0) return randn_bm() // resample between 0 and 1
    return num
}