Визуализация работы нескольких светофоров

window.onload = function () {
    
    var traficLight = function (id, path) {
        
        var pathLength = path.length, point = 0;
        var signals = [], i, color, animTimer, element;
        var alls = document.getElementById(id).getElementsByTagName('div');
        
        for (i = 0; ; i++) {
            color = ['red', 'yellow', 'green'][i % 3];
            alls[i].style.background = color;
            signals[color] = alls[i];
            if (i == 2) break;
        }
        
        var start = function () {
            
            point = (point > pathLength - 1) ? 0 : point;
            element = path[point];
            
            if (element.interval == 0) {
                blink(element);
            } else if (element.dual != '') {
                signals[element.color].className = signals[element.dual].className = 'active';
                show(element);
            } else {
                signals[element.color].className = 'active';
                show(element);
            }
            point++;
        };
        
        var blink = function (element) {
            i = 0;
            animTimer = setInterval(function () {
                signals[element.color].className = (signals[element.color].className == '') ? 'active' : '';
                if (++i == 6) {
                    clearTimeout(animTimer);
                    start();
                }
            }, 500);
        };
        
        var show = function (element) {
            animTimer = setInterval(function () {
                clearTimeout(animTimer);
                signals[element.color].className = '';
                if (element.dual) signals[element.dual].className = '';
                start();
            }, element.interval);
        };
        
        start();
    };
    
    var signal = function (color, interval, dual) {
        this.color = color;
        this.interval = interval || 0;
        this.dual = dual || '';
    };
    
    var red = new signal('red', 5000);
    var redYellow = new signal('red', 2000, 'yellow');
    var yellow = new signal('yellow', 3000);
    var green = new signal('green', 5000);
    var greenBlink = new signal('green');
    var traficLight1 = new traficLight('signal1', [green, greenBlink, yellow, red, redYellow]);
};

var tl = document.getElementById('tl').children,
    order = [tl[0], tl[1], tl[2], tl[1]];
 
run(-1);
 
function run(index) {
    Array.prototype.forEach.call(tl, function(div) {
        div.classList.remove('active');
    });
    
    var index = (index + 1) % order.length,
        active = order[index];
    
    active.classList.add('active');
    
    window.setTimeout(function() { run(index); }, active.getAttribute('tl-delay'));
};