var leftGradient = document.querySelector(".leftGradient");
var rightGradient = document.querySelector(".rightGradient");
var btn = document.querySelector(".btn");
var wrapper = document.querySelector("#wrapper");

//references to requestAnimationFrame - so we can stop it
var raf;

//width of the individual fragment in both gradients
var offset;

//use to change opacity of the color for active fragment in both gradients
var opacity;

//how many times did the animation (animateOut) execute
var numberOFexecute = 0;

//width of the browser viewpoint
var viewport;

//only for firefox browser  (to correct some bugs)
var firefox = navigator.userAgent.toLowerCase().indexOf('firefox') !== -1;


function buildingGradient() {
    opacity = 0.6;
    viewport = wrapper.clientWidth;

    if (firefox) offset = 260;
    else {   
        if (viewport > 1600) offset = 650;
        else if (viewport < 1600 & viewport > 1200) offset = 450;
        else if (viewport < 1200 & viewport > 850) offset = 350;
        else offset = 250;
    }

    //the loop execute for each fragment (color) of gradient
    for (var i = 1; i < 7; i++) {
        leftGradient.style.setProperty("--color" + Number(i), "rgba(0, 0, 0, " + opacity + ")");
        rightGradient.style.setProperty("--color" + Number(i), "rgba(0, 0, 0, " + opacity + ")");

        leftGradient.style.setProperty("--offset" + Number(i), offset * Number(i) + "px");
        rightGradient.style.setProperty("--offset" + Number(i), offset * Number(i) + "px");

        //painting different last colors in Gradiants
        if (i === 6) {
            leftGradient.style.setProperty("--color6", "rgba(209, 142, 64, 0.15)");
            rightGradient.style.setProperty("--color6", "rgba(208, 71, 113, 0.15)");
        }
        opacity = opacity - 0.1;
    }
}
buildingGradient();


window.addEventListener('resize', function () {
    buildingGradient();
}, false);


btn.addEventListener("mouseenter", function () {
    window.cancelAnimationFrame(raf); //stops the execution already started animation
    opacity = 0.6;
    //starting animateOut every 50ms (1000 / 20 = 50ms), using requestAnimateFrame
    Timer(animateOut, 20);
}, false);


btn.addEventListener("mouseleave", function () {
    window.cancelAnimationFrame(raf);
    numberOFexecute = 0;
    //starting animateIn every 25ms (1000 / 40 = 25ms), using requestAnimateFrame
    Timer(animateIn, 40);
}, false);



function animateOut() {
    for (var i = 1; i < 7; i++) {
        leftGradient.style.setProperty("--offset" + Number(i), offset * Number(i) + "px");
        rightGradient.style.setProperty("--offset" + Number(i), offset * Number(i) + "px");
    }

    //accelerate animation at the beginning
    if (numberOFexecute < 5) offset = offset - 30;
    else offset = offset - 8;
    numberOFexecute++;

    if (offset < 0) window.cancelAnimationFrame(raf);
}


function animateIn() {
    for (var i = 1; i < 7; i++) {
        leftGradient.style.setProperty("--offset" + Number(i), offset * Number(i) + "px");
        rightGradient.style.setProperty("--offset" + Number(i), offset * Number(i) + "px");
    }
    offset = offset + 10;

    if (firefox & offset > 250) window.cancelAnimationFrame(raf);
    else {  
        if (viewport > 1600 & offset > 650) window.cancelAnimationFrame(raf);
        else if (viewport < 1600 & viewport > 1200 & offset > 450) window.cancelAnimationFrame(raf);
        else if (viewport < 1200 & viewport > 850 & offset > 350) window.cancelAnimationFrame(raf);
        else if (viewport < 850 & offset > 250) window.cancelAnimationFrame(raf);
    }
}


//This function is used to slow down the execution of requestAnimationFrames to desired time
var Timer = function (callback, fps) {

    var now = 0;
    var delta = 0;
    var then = Date.now();
    var frames = 0;
    var oldtime = 0;
    fps = 1000 / (this.fps || fps || 60);

    return requestAnimationFrame(function loop(time) {
        //console.info("RaF");
        raf = requestAnimationFrame(loop);
        now = Date.now();
        delta = now - then;

        if (delta > fps) {
            // Update time stuffs
            then = now - (delta % fps);

            // Calculate the frames per second.
            frames = 1000 / (time - oldtime)
            oldtime = time;

            // Call the callback-function and pass our current frame into it.
            callback(frames);
        }
    });
};