// code voor bewegen van auto
// gebruik: getElementById, setInterval, setAttribute of element.style
// geavanceerd: gebruik window.innerWidth

window.onload = init;

    var afstand1 = 0;
    var afstand2 = 0;
    var afstand3 = 0;

var animate, left=0, imgObj=null;
var auto1Status = false;
var auto2Status = false;
var auto3Status = false;
var i = 1;


function init(){

    auto1 = document.getElementById('auto1');
    auto1.style.position= 'absolute';
    auto1.style.top = '50px';
    auto1.style.left = '0px';
    auto1.style.visibility='hidden';

    auto2 = document.getElementById('auto2');
    auto2.style.position= 'absolute';
    auto2.style.top = '200px';
    auto2.style.left = '0px';
    auto2.style.visibility='hidden';

    auto3 = document.getElementById('auto3');
    auto3.style.position= 'absolute';
    auto3.style.top = '350px';
    auto3.style.left = '0px';
    auto3.style.visibility='hidden';

    race = document.getElementById('racebaan');
    race.style.position = 'absolute';
    race.style.left = 0;
    race.style.backgroundRepeat = "repeat-x";

    moveRight1();
    moveRight2();
    moveRight3();

    moveRace();


}


function moveRight1(){
    left1 = parseInt(auto1.style.left, 10);
    var snelheid1 = Math.random()*10;

    if (left1 < window.innerWidth - 350) {
        auto1.style.left = (left1 + snelheid1) + 'px';
        auto1.style.visibility='visible';


        animate1 = setTimeout(function(){moveRight1();},20); // call moveRight in 20msec


    } else {
        stop1();
        console.log("auto 1 is " + i + "e gefinished!");
        i++;
        return;
    }

    //f();
}

function moveRight2(){
    left2 = parseInt(auto2.style.left, 10);
    var snelheid2 = Math.random()*10;

    if (left2 < window.innerWidth - 350) {
        auto2.style.left = (left2 + snelheid2) + 'px';
        auto2.style.visibility='visible';

        animate2 = setTimeout(function(){moveRight2();},20);
    }
    else
    {
        stop2();
        console.log("auto 2 is " + i + "e gefinished!");
        i++;
        return;
    }
}

function moveRight3(){
    left3 = parseInt(auto3.style.left, 10);
    var snelheid3 = Math.random()*10;

    if (left3 < window.innerWidth - 350) {
        auto3.style.left = (left3 + snelheid3) + 'px';
        auto3.style.visibility='visible';

        animate3 = setTimeout(function(){moveRight3();},20);

    }
    else
    {
        stop3();
        console.log("auto 3 is " + i + "e gefinished!");
        i++;
        return;
    }
}



function moveRace(){
    left = parseInt(race.style.left, 10);
    var snelheidRace = 5;

    if (left < window.innerWidth) {
        race.style.left = (left - snelheidRace) + 'px';
        race.style.visibility='visible';


        animateRace = setTimeout(function(){moveRace();},20); // call moveRight in 20msec

        //stopanimate = setTimeout(moveRight,20);
    } else {

        return;
    }

    //f();
}




function stop1(){
   clearTimeout(animate1);
}

function stop2(){
   clearTimeout(animate2);
}

function stop3(){
   clearTimeout(animate3);
}

window.onload = function() {init();};