var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var carReady = false;
var carImage = new Image();
carImage.onload = function() {
    carReady = true;
};
carImage.src = "images/porsche.jpg";


var car = {
    speed: 230
    };

var keysDown = {};
addEventListener("keydown", function(e) {
    keysDown[e.keyCode] = true;
    if (e.keyCode == 65) {
        var car = {
          speed: 200
        }

    }
}, false);
    addEventListener("keydown", function(e) {
    keysDown[e.keyCode] = true;
    if (e.keyCode == 68) {
        var car = {
          speed: 200
        }

    }

}, false);



var keysDown = {};
addEventListener("keydown", function(e) {
    keysDown[e.keyCode] = true;
}, false);

addEventListener("keyup", function(e) {
    delete keysDown[e.keyCode];
}, false);

var update = function(modifier) {
    if (65 in keysDown && car.x > 0) { //ograničenja kretanja lijevo
		carImage.src = "images/porscheL.png";
        car.x -= car.speed * modifier;
    }
    if (68 in keysDown && car.x < 670) { //ograničenja kretanja desno
		carImage.src = "images/porsche.jpg";
        car.x += car.speed * modifier;
    }


};

var reset = function() {
    car.x = canvas.width / 2;
    car.y = canvas.height / 2;

};

var render = function() {

    if (carReady) {
        ctx.drawImage(carImage, car.x, car.y);
    }

};

var main = function() {
    var now = Date.now();
    var delta = now - then;

    update(delta / 1000);
    render();
    then = now;
    requestAnimationFrame(main);
};

var w = window;
requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;

var then = Date.now();
reset();
main();