console.clear();
const DEBUG = false;
const app = {};

setup(app);
createBodies(app);
createConstraints(app);
registerEvents(app);
start(app);


function setup(app) {
  app.listElm = ellist;
  app.engine = Matter.Engine.create({});
  app.engine.constraintIterations = 4;
  if (DEBUG) {
    app.render = Matter.Render.create({
      element:document.body,
      engine:app.engine,
      options: {
        showAxes: true,
        showAngleIndicator:true
      }
    });
  }
  app.engine.world.gravity.y = 6.0;
  app.engine.world.gravity.x = 0.0;
}



function createBodies(app) {
  const bodies = [];
  const itemElms = Array.from(app.listElm.children); 
  itemElms.shift();
  let offset = 0;
  for (const [i, itemElm] of itemElms.entries()) {
    const h = itemElm.getBoundingClientRect().height;
    offset += h/2; 
    const body = Matter.Bodies.rectangle(offset, 0, h, 2);
    bodies.push(body);
    offset += h/2;
  }
  app.bodies = bodies;
  Matter.World.add(app.engine.world, bodies);
  
  app.pinpoint = Matter.Bodies.circle(0,0,0.5,{isStatic:true});
  Matter.World.add(app.engine.world, app.pinpoint);
}



function createConstraints(app) { 
  const constraints = [];
  for (const [i, body] of app.bodies.entries()) {
    if (i == 0) {
      const constraint = Matter.Constraint.create({
        bodyA: app.pinpoint,
        bodyB: body,
        pointB: Matter.Vector.create(
          (body.bounds.min.x - body.bounds.max.x)*0.5 + 0.5, 0),
        length:1,
        stiffness:1
      });
      constraints.push(constraint)
    }
    else {
      const bodyA = app.bodies[i-1];
      const constraint = Matter.Constraint.create({
        bodyA: bodyA,
        bodyB: body,
        pointA: Matter.Vector.create((bodyA.bounds.max.x - bodyA.bounds.min.x) *0.5, 0),
        pointB: Matter.Vector.create((body.bounds.min.x - body.bounds.max.x) *0.5, 0),
        length: 0, // 0 is fine, doc:"set length: 0 and a high stiffness value (e.g. 0.7 or above). If the constraint is unstable, try lowering the stiffness value and / or increasing engine.constraintIterations"
        stiffness: 1 * 0.6 // 
      });
      constraints.push(constraint);
    }
    Matter.World.add(app.engine.world, constraints);
  }
}



function registerEvents(app) {
  Matter.Events.on(app.engine, "tick", e => {
    for (const [i, li] of Array.from(app.listElm.children).entries()) {
      if (i == 0) {
        // first li should always face to camera
        // i dont ever create a body in app.bodies for it, so skip it.
      }
      else {
        // nth li matches app.bodies[n-1]
        const body = app.bodies[i-1];
        const h0 = app.listElm.children[0].getBoundingClientRect().height;
        // body.position.x maps to css z (+x in matter map to -z in css, -ve z=far away)
        // body.position.y maps to css y. In matter, body.position refers to center,
        // so... body.position.y minus 50%(in css era, 50% of height) is the css top.
        const liHeight = li.getBoundingClientRect().height;
        li.style.transform = `
          translate3d(0, 
            calc(${h0}px - 50% + ${body.position.y}px), 
            ${-1 * (body.position.x)}px)
          rotateX(${body.angle - Math.PI/2}rad)
        `;
      }
    }
  });
  
  for (const [i, li] of Array.from(app.listElm.children).entries()) {
    if (i > 0) {
      li.addEventListener("mouseover", e => {
        const body = app.bodies[i - 1];
        Matter.Body.applyForce(body, body.position, Matter.Vector.create(0.001, 0.001));
      });
    }
  }
}



function start(app) {
  Matter.Engine.run(app.engine);
  if(DEBUG) Matter.Render.run(app.render);
}



var fixed = document.getElementById('fixed');

fixed.addEventListener('touchmove', function(e) {

        e.preventDefault();

}, false);