var c = document.querySelector("#canvas");
var ctx = c.getContext("2d");
var rendering;

var particleArray = new Array();
var frameElapsed = 0;

var fps, fpsInterval, startTime, now, then, elapsed;

function startAnimating(fps){
    fpsInterval = 1000 / fps;
    then = Date.now();
    startTime = then;
    animate();
}

function animate(){
    requestAnimationFrame(animate);
    now = Date.now();
    elapsed = now - then;

    if (elapsed > fpsInterval) {
        then = now - (elapsed % fpsInterval);
		render();
    }
}

startAnimating(60);

//Particle image
particle = new Image();
particle.src = 'https://krylan.ovh/painter/img/particle_bonus.gif';

function render(){
	ctx.clearRect(0, 0, c.width, c.height);
	ctx.fillStyle = "rgb(255,255,255)";
	ctx.fillRect(0, 0, c.width, c.height);
  for(var key in particleArray){
		particleArray[key] = particleEffect(particleArray[key]);
	}
  frameElapsed++;
}

function particleEffect(particleSet, xStart = false, yStart = false, particleImage = false, particleNumber=50, lifetimeValue=1){
	if(particleSet === undefined || particleImage != false){
		particleSet = new Array();
		for(var i=0;i<=particleNumber;i++){
			particleSet[i] = {
				x: xStart,
				y: yStart,
				counter: -40,
				lifetime: lifetimeValue,
				xChange: Math.random() * (1 - (-1)) + (-1),
				yChange: Math.random() * (2 - 1) + 1,
				img: particleImage,
			};
		}
	}
	else{
		particleSet.forEach(function(thisEle){
			thisEle.x += thisEle.xChange;
			thisEle.counter += thisEle.yChange;
			thisEle.y = thisEle.y + thisEle.counter/10;
			if(thisEle.lifetime > 0){
				thisEle.lifetime -= 0.01;
				ctx.globalAlpha = Math.abs(thisEle.lifetime);
			}else{
				ctx.globalAlpha = 0;
			}
			var angle = (frameElapsed % 360) *3;
			drawRotate(thisEle.img, thisEle.x, thisEle.y, angle);
			ctx.globalAlpha = 1;
		});
	}
	return particleSet;
}

/* DRAW ROTATED */
function drawRotate(targetImage, x, y, angle){
    ctx.save();
    ctx.translate(x+targetImage.width/2, y+targetImage.height/2);
    ctx.rotate(angle*Math.PI/180);
    ctx.drawImage(targetImage, -(targetImage.width/2), -(targetImage.height/2));
    ctx.restore();
};

//Run particles every 3s
window.setInterval(function(){ particleArray[0] = particleEffect(particleArray[0], 75, 75, particle, 50); }, 3000);