const red = document.getElementById("red");
const yellow = document.getElementById("yellow");
const green = document.getElementById("green");
let isPlayingState = false;
let trafficTimeOut;
let flashInterval;
let isChange = false;
var intervals = [];
var timesOut = [];
let isFlashing = false;
let isYellowFluhing = false;
let isGreenFlushing = false;
counter = 0;

function reset() {
    red.style.backgroundColor = '';
    yellow.style.backgroundColor = '';
    green.style.backgroundColor = '';
    intervals.forEach(function (interval) {
        clearInterval(interval);
    });


}


function power() {
    if (!isPlayingState) {
        isPlayingState = true;
        redOn();
    }
    else {
        isPlayingState = false;
        timesOut.forEach(function (out) {
            clearTimeout(out);
        });
        reset();
    }
}



function warning() {
    if (!isYellowFluhing) {
        isYellowFluhing = true;
        isChange = false;
        reset();
        timesOut.forEach(function (out) {
            clearTimeout(out);
        });

        flashInterval = setInterval(flash, 1000);
        intervals.push(flashInterval);
    }

    else if (isYellowFluhing) {
        return;
    }
}




function flash() {
    if (isYellowFluhing) {
        yellow.style.backgroundColor = isFlashing ? 'yellow' : '';
        isFlashing = !isFlashing;
        isPlayingState = true;
    }


    else if (counter < 6) {
        green.style.backgroundColor = isFlashing ? 'lime' : '';
        isFlashing = !isFlashing;
        counter++;
    }
    else {
        clearInterval(flashInterval);

    }

}


function redOn() {
    reset();
    red.style.backgroundColor = "red";
    isChange = false;
    isYellowFluhing = false;
    // trafficTimeOut = setTimeout(redYellow, 1000);
    // timesOut.push(trafficTimeOut);
}

function redYellow() {

    reset();
    red.style.backgroundColor = "red";
    yellow.style.backgroundColor = "yellow";
    trafficTimeOut = setTimeout(greenOn, 1000);
    timesOut.push(trafficTimeOut);
}

function greenOn() {
    reset();
    green.style.backgroundColor = "lime";
    timesOut.push(trafficTimeOut);
    isChange = false;

}

function yellowon() {
    reset();
    intervals.forEach(function (interval) {
        clearInterval(interval);
    });
    yellow.style.backgroundColor = "yellow";
    trafficTimeOut = setTimeout(redGlobal, 1000);
    timesOut.push(trafficTimeOut);


}
function redGlobal() {
    reset();
    red.style.backgroundColor = "red";
    isChange = false;
}



function changeColor() {
    if (!isPlayingState) {
        alert("יש לפעיל תחילה את הרמזור או לבחור בצהוב מהבהב");
        return;
    }

    if (!isChange) {
        isChange = true;

        if (green.style.backgroundColor === "lime") {
            counter = 0;
            red.style.backgroundColor = '';
            yellow.style.backgroundColor = '';

            intervals.forEach(function (interval) {
                clearInterval(interval);
            });
            isGreenFlushing = true;
            flashInterval = setInterval(flash, 1000);
            intervals.push(flashInterval);
            trafficTimeOut = setTimeout(yellowon, 7 * 1000);
            timesOut.push(trafficTimeOut);

        }

        else if (red.style.backgroundColor === "red") {
            trafficTimeOut = setTimeout(redYellow, 1000);
            timesOut.push(trafficTimeOut);

        }



        else if (isYellowFluhing) {
            trafficTimeOut = setTimeout(redOn, 1000);
            timesOut.push(trafficTimeOut);
            clearInterval(flash);
        }

        // else if (yellow.style.backgroundColor === "yellow") {

        // trafficTimeOut = setTimeout(redOn, 1000);
        // timesOut.push(trafficTimeOut);
        // }
        // else if (yellow.style.backgroundColor === "yellow" && red.style.backgroundColor === "red") {
        //     trafficTimeOut = setTimeout(greenOn, 1000);
        //     timesOut.push(trafficTimeOut);

        // }


    }


}











