window.onload = main;

var d = document;
var de = d.documentElement;
var offset = 0;
var SIZE = 100;

function main() {
    console.log("JS loaded");
    setInterval(frame, 1000.0 / 60.0);
}

function frame() {
    var screenwidth = de.clientWidth;
    if (offset >= (screenwidth)) {
        offset = 0;
    } else {
        offset += 3;
    }
    var squares = de.getElementsByClassName("carre");
    for (i = 0; i < squares.length; ++i) {
        squares[i].style.marginLeft = offset + "px";
    }
    if (offset >= (screenwidth - SIZE)) {
        squares[1].style.display = "inline";
        squares[1].style.marginLeft = (offset - screenwidth) + "px";
    } else {
        squares[1].style.display = "none";
    }
}