/* ajouter le contrôle clic souris*/
/*var cursorX;
var cursorY;

/* Récupère la position courante du curseur sur la page
document.onclick = function(e) {
    cursorX = e.pageX;
    cursorY = e.pageY;
}

var click_handler = function() {
	/* Affichage des coordonnées dans la console
    console.log(cursorX);
    console.log(cursorY);
    */

    /* todo appel de la fonction utilisant les coordonnées de la souris (celle qui fait des fluides ;) ) */




var Engine = Matter.Engine,
    World = Matter.World,
    Bodies = Matter.Bodies;

var bars = [];
var particles = [];
var bounds = [];

var engine,world;

function setup() {
  createCanvas(400,600);
  rectMode(CENTER);
  // create engine
  engine = Engine.create();
  world = engine.world;

  var cols = 0, rows = 0;
  var spacing = width/cols;
  for (var i = 0; i < cols+1; i++) {
    for (var j = 0; j < rows; j++) {
      var x_pos = i*spacing + (j%2?spacing/2:0);
      var y_pos = j*spacing/Math.sqrt(2) + spacing;

      bars.push(new Particle(x_pos, y_pos, 1, {isStatic:true}, 50));
    }
  }

  // bottom
  bounds.push(new Boundary(width/2,height+50,width,100));

  // left
  bounds.push(new Boundary(-50,height/2,100,height));

  // right
  bounds.push(new Boundary(width+50,height/2,100,height));

  //baskets
  var baskets = cols;

  for (var x = 0; x < baskets; x++)  {
    if (x > 0) {
      bounds.push(new Boundary((width/baskets*x), height-150, 2, 300));
    }

  }


}

function addParticle() {
  particles.push(new Particle(width/2+random(2)-1,0, 14));
}

var prevTime;
var maxAmount = 370;

function draw() {
  background(0x100);

  // var time = performance.now();
  // var ms = time - prevTime;
  // prevTime = time;

  Engine.update(engine);

  if (frameCount % 3 == 0 && particles.length < maxAmount) {
    addParticle();
  }


  for (var x = 0; x < bounds.length; x++) {
    var b = bounds[x];
    b.draw();
  }
  for (var x = 0; x < bars.length; x++) {
    var b = bars[x];
    b.draw();
  }
  for (var x = 0; x < particles.length; x++) {
    var p = particles[x];
    p.draw();
  }

}


// PARTICLE
function Particle(x,y,r,options,c) {
  this.r = r || 1;
  this.c = c || color((0,255), random(50,170),random(10,30));
  
  /*TROUVER LES BONNES COULEURS!!!!*/
  this.options = {
    restitution:.8,
    friction :.25
  }
  if (options) this.options.isStatic = options.isStatic;

  this.body = Bodies.circle(x,y,this.r,this.options);
  World.add(world,this.body);
}
Particle.prototype.draw = function() {
  var pos = this.body.position;
  noStroke()
  fill(this.c);
  push();
  translate(pos.x,pos.y);
  ellipse(0,0,this.r *4);
  /*ICI LA TAILLE*/
  pop();
}


// BOUNDARY

function Boundary(x,y,w,h,options,c) {
  this.x = x;
  this.y = y;
  this.w = w;
  this.h = h;

  this.c = c || 250;
  this.options = {
    restitution:.9,
    friction :0.1,
    isStatic:true,
  }
  this.body = Bodies.rectangle(this.x,this.y,this.w,this.h,this.options);
  World.add(world,this.body);
}
Boundary.prototype.draw = function() {
  var pos = this.body.position;
  noStroke();
  fill(this.c);
  push();
  translate(pos.x,pos.y);
  rect(0,0,this.w,this.h);
  pop();
  /**
  function draw() {
    var ctx = document.getElementById('canvas').getContext('2d');
    var img = new Image();
  img.onload = function() {
      ctx.drawImage(img, 0, 0);
      ctx.beginPath();
      ctx.moveTo(30, 96);
 *
      ctx.lineTo(70, 66);
      ctx.lineTo(103, 76);
      ctx.lineTo(170, 15);
      ctx.stroke();
    };
    img.src = 'Cafe2.png';
  } */
}
