var tl1 = gsap.timeline({ repeat: -1, repeatDelay: 3 });
tl1.from("#emitter1", { x:0, y: 0, duration: 0 });
tl1.to("#emitter1", { y: 190, duration: 1 });
tl1.to("#emitter1", { x: -150, duration: 1 });
tl1.to(".contenitore-tasti button:nth-of-type(1)", { 'border': '1px solid #0070C0', duration: 0.15 });
tl1.to(".contenitore-tasti button:nth-of-type(1)", { 'border': 'unset', duration: 0.2, delay: 1 });
/*
var tl2 = gsap.timeline({repeat: -1, repeatDelay: 3});
tl2.to("#emitter2", {y: 190, duration: 1});
tl2.to("#emitter2", {x: 150, duration: 1});
tl2.to(".contenitore-tasti button:nth-of-type(2)", {'border': '1px solid #BF0404', duration: 0.15});
tl2.to(".contenitore-tasti button:nth-of-type(2)", {'border': 'unset', duration: 0.2, delay: 1});
*/

//particle animation with dots defined by css .dot
var emitter1 = document.getElementById("emitter1"),
    emitter2 = document.getElementById("emitter2"),
    emitters = [emitter1, emitter2],
    //the following variables make things configurable. Play around.
    emitterSize = 20,
    dotPool = [],
    dotIndex = 0,
    dotQuantity = 125,
    dotSizeMax = 8,
    dotSizeMin = 1,
    speed = -1,
    gravity = 0;

//emitter's size dynamic and set xPercent/yPercent to -50 to accurately center it.
emitters.forEach(async (em) => {
    TweenLite.set(
        em, {
        width: emitterSize,
        height: emitterSize,
        xPercent: 0,
        yPercent: 0,
        //x: 0,
        //y: 0,
    });
    createDot(em);
});

function createDot(emitter) {
    dotPool[emitter.id] = [];

    for (var i = dotQuantity - 1; i >= 0; i--) {
        dot = document.createElement("div");
        dot.className = "dot";
        if (emitter.id === 'emitter1')
            dot.className += " dot-luce";
        else if (emitter.id === 'emitter2')
            dot.className += " dot-gas";
        TweenLite.set(
            dot, {
            xPercent: 0,
            yPercent: 0,
            // x: 0,
            // y: 0,
            force3D: true
        });
        //document.body.appendChild(dot);
        // document.getElementById(emitter.id).appendChild(dot);
        document.getElementById('contenitore').appendChild(dot);
        // document.body.appendChild(dot);
        // dotPool[i] = dot;
        dotPool[emitter.id][i] = dot;
    }
}
// console.log(dotPool);
// var explosion1 = new TimelineMax({ repeat: -1 }).call(shootDot, [emitter1], null, 2 / dotQuantity);
var explosion1 = new TimelineMax({ repeat: -1 }).call(shootDot1, [emitter1], null, 2 / dotQuantity);
//var explosion2 = new TimelineMax({ repeat: -1 }).call(shootDot2, [emitter2], null, 2 / dotQuantity);

function shootDot1(emitter1) {
    var angle, length, dot, i, size, bounds;
    // bounds = emitter1.getBoundingClientRect();
    bounds = document.getElementById("contenitore").getBoundingClientRect();
    dot = dotPool[emitter1.id][dotIndex++];
    //create all the dots
    if (dotIndex === dotQuantity) dotIndex = 0;
    size = getRandom(dotSizeMin, dotSizeMax);
    angle = Math.random() * Math.PI * 2; //random angle
    //figure out the maximum distance from the center, factoring in the size of the dot (it must never go outside the circle), and then pick a random spot along that length where we'll plot the point. 
    length = Math.random() * (emitterSize / 2 - size / 2);
    //place the dot at a random spot within the emitter, and set its size.
    TweenLite.set(dot, {
        opacity: 1,
        //x: 0,
        //y: 0,
        x: Math.cos(angle) * length + bounds.left + bounds.width / 2,
        y: Math.sin(angle) * length + bounds.top + bounds.height / 2,
        width: size,
        height: size
    });
    // console.log(Math.cos(angle) * length + bounds.left + bounds.width / 2, Math.sin(angle) * length + bounds.top + bounds.height / 2);
    //this is where we do the animation...
    TweenLite.to(dot, 1 + Math.random(), {
        opacity: 0,
        //if you'd rather not do physics, you could just animate out directly by using the following 2 lines instead of the physics2D:
        //x:Math.cos(angle) * length * 6, 
        //y:Math.sin(angle) * length * 6
    }, 0);
}

function shootDot2(emitter2) {
    var angle, length, dot, i, size, bounds;
    bounds = document.getElementById("contenitore").getBoundingClientRect();
    dot = dotPool[emitter2.id][dotIndex++];
    //create all the dots
    if (dotIndex === dotQuantity) dotIndex = 0;
    size = getRandom(dotSizeMin, dotSizeMax);
    angle = Math.random() * Math.PI * 2; //random angle
    //figure out the maximum distance from the center, factoring in the size of the dot (it must never go outside the circle), and then pick a random spot along that length where we'll plot the point. 
    length = Math.random() * (emitterSize / 2 - size / 2);
    //place the dot at a random spot within the emitter, and set its size.
    TweenLite.set(dot, {
        opacity: 1,
        x: bounds.width / 2,
        y: 0,
        //x: Math.cos(angle) * length + bounds.left + bounds.width / 2,
        //y: Math.sin(angle) * length + bounds.top + bounds.height / 2,
        width: size,
        height: size
    });
    // console.log(Math.cos(angle) * length + bounds.left + bounds.width / 2, Math.sin(angle) * length + bounds.top + bounds.height / 2);
    //this is where we do the animation...
    TweenLite.to(dot, 1 + Math.random(), {
        opacity: 0,
        //if you'd rather not do physics, you could just animate out directly by using the following 2 lines instead of the physics2D:
        //x:Math.cos(angle) * length * 6, 
        //y:Math.sin(angle) * length * 6
    }, 0);
}

function getRandom(min, max) {
    return min + Math.random() * (max - min);
}