$(document).ready(function() {
  console.log('script start');

  var affiche_width = $('#affiche').innerWidth();
  var affiche_height = $('#affiche').innerHeight();

  var largeur_obstacles = 1;

  var obstacles_properties = {
    isStatic: true,
    render: {
      fillStyle: 'transparent',
      strokeStyle: 'transparent',
      lineWidth: 0
    }
  };

  var obstacles = [
    Matter.Bodies.rectangle(affiche_width/2, 0, affiche_width, largeur_obstacles, obstacles_properties),
    Matter.Bodies.rectangle(affiche_width/2, affiche_height, affiche_width, largeur_obstacles, obstacles_properties),
    Matter.Bodies.rectangle(affiche_width, 300, largeur_obstacles, 600, obstacles_properties),
    Matter.Bodies.rectangle(0, affiche_height/2, largeur_obstacles, affiche_height, obstacles_properties)
  ];

  // version compliquée : on détecte l’emplacement du contenu de l’affiche et on l’ajoute comme obstacle
  $('#affiche > *').each(function() {
    var content_posX = $(this).position().left;
    var content_posY = $(this).position().top;


    var content_width = $(this).width();
    var content_height = $(this).height();

    debugger;

    obstacles.push(
      Matter.Bodies.rectangle(content_posX + content_width/2, content_posY + content_height/2, content_width, content_height, obstacles_properties)
    );

  });


  var object_properties = {
    render: {
      fillStyle: '#03a9f4',
      strokeStyle: 'blue'
    }
  }


  $('.js--invert_gravity').click(function() {
    // on inverse la gravité de world
    window.engine.world.gravity.y *= -1;
  });

  // code provenant de https://raw.githubusercontent.com/liabru/matter-js/master/examples/gravity.js
  // qui correspond à cette démo : http://brm.io/matter-js/demo/#gravity
  // un tout petit peu modifié pour qu’il utilise les variables mentionnées au-dessus

  var Engine = Matter.Engine,
      Render = Matter.Render,
      Runner = Matter.Runner,
      Composites = Matter.Composites,
      Common = Matter.Common,
      MouseConstraint = Matter.MouseConstraint,
      Mouse = Matter.Mouse,
      World = Matter.World,
      Bodies = Matter.Bodies;

  // create engine
  window.engine = Engine.create(),
      world = engine.world;

  // create renderer
  var render = Render.create({
      element: $('#affiche')[0],
      engine: engine,
      options: {
          width: affiche_width,
          height: affiche_height,
          wireframes: false,
          background: 'white',
          showVelocity: false,
          showAngleIndicator: false,
          strokeStyle: 'transparent'
      }
  });

  Render.run(render);

  // create runner
  var runner = Runner.create();
  Runner.run(runner, engine);

  // add bodies
  World.add(world, obstacles);

  engine.world.gravity.y = -1;

  var stack = Composites.stack(0, affiche_width, 200, 5, 15,2, function(x, y) {
    return Bodies.polygon(x, y, Math.round(Common.random(1, 8)), Common.random(8, 30), object_properties);
  });

  World.add(world, stack);

  // add mouse control
  var mouse = Mouse.create(render.canvas),
      mouseConstraint = MouseConstraint.create(engine, {
          mouse: mouse,
          constraint: {
              stiffness: 0.2,
              render: {
                  visible: false,
              }
          }
      });

  World.add(world, mouseConstraint);

  // keep the mouse in sync with rendering
  render.mouse = mouse;

  // fit the render viewport to the scene
  Render.lookAt(render, {
      min: { x: 0, y: 0 },
      max: { x: affiche_width, y: affiche_height }
  });
});