<div id="canvas"></div>

html, body
{
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
  user-select: none;
}

body
{
  background-color: lightgray;
}

#canvas
{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

console.clear();

const colors = [0xF9B52C, 0x333333];

class Stage 
{ 
  element:HTMLElement;
  app:any;
  stage:any;
  particleContainer:any;
  containers:any[] = []
  particles:any[] = [];
  textures:any[] = [];
  glass:any;
  shine:any;
  
  constructor(canvas:HTMLElement)
  {
    this.element = canvas;
    this.app = new PIXI.Application(this.element.offsetWidth, this.element.offsetHeight, { antialias: false, backgroundColor : 0xD3CFE5 });
    this.element.appendChild(this.app.view);
    
    this.stage = new PIXI.Container();    
    this.app.stage.addChild(this.stage);
    
    this.particleContainer = new PIXI.Container();
    this.stage.addChild(this.particleContainer);
    
    this.onResize();    
  }
  
  onResize = function()
  {
    this.app.renderer.resize(this.element.offsetWidth, this.element.offsetHeight);
    this.stage.position.x = window.innerWidth / 2;
    this.stage.position.y = window.innerHeight / 2;
  }
  
  newParticle = function(color)
  {
    let graphic = new PIXI.Graphics();

      graphic.lineStyle(0);
      graphic.beginFill(color, 0.8);
      graphic.drawCircle(0, 0, 2);
      graphic.endFill();

    let texture = this.app.renderer.generateTexture(graphic);
    
    let sprite = new PIXI.Sprite(texture);
    this.particles.push(sprite);
    this.particleContainer.addChild(sprite);
    
    return sprite;
  }

}

class Sim
{
  private world:any;
  private width:number = 0;
  private height:number = 0;
  private particleSystem:any;
  private particle:any;
  
  private timeStep:number = 1.0 / 60.0;
  private velocityIterations:number = 8;
  private positionIterations:number = 3;
  
  private cooldown:number = 200;
  private cooling:boolean = false;
  
  const METER:number = 100;
  const OFFSET_X:number = 0;
  const OFFSET_Y:number = 0;
  const PADDING:number = 50;

  constructor(world)
  {
    this.world = world;
    
    let liquidContainerDef = new b2BodyDef();
    let liquidContainer = this.world.CreateBody(liquidContainerDef);
    
    this.onResize();
    
    let floor = this.createWallShape(
      this.width / this.METER / 2,
      0.05,
      new b2Vec2(this.width / this.METER / 2, this.height / this.METER + 0.05)
    )
    
    let leftWall = this.createWallShape(
      0.05,
      (this.height + 1000) / this.METER,
      new b2Vec2(-0.05, 0)
    )
    
    let rightWall = this.createWallShape(
      0.05,
      (this.height + 1000) / this.METER,
      new b2Vec2(this.width / this.METER + 0.05, 0)
    )
    
    liquidContainer.CreateFixtureFromDef(floor);
    liquidContainer.CreateFixtureFromDef(leftWall);
    liquidContainer.CreateFixtureFromDef(rightWall);
    
    let particleSystemDef = new b2ParticleSystemDef();
      particleSystemDef.radius = 0.03;
      particleSystemDef.dampingStrength = 0.2;
    
    this.particleSystem = this.world.CreateParticleSystem(particleSystemDef);
    
    this.particle = new b2CircleShape();
  }

  onResize = function()
  {
    let h = window.innerHeight;
    this.width = 254;
    this.height = 180;
    this.height -= this.PADDING;  
  }
  
  private createWallShape(width, height, angle)
  {
    let wallShape = new b2PolygonShape();
    wallShape.SetAsBoxXYCenterAngle(width, height, angle, 0);
    
    let fixtureDef = new b2FixtureDef();
    fixtureDef.shape = wallShape;
    fixtureDef.density = 5;
    
    return fixtureDef;
  }
  
  getParticles():number[]
  {
    return this.world.particleSystems[0].GetPositionBuffer();
  }
  
  step = function()
  {
    this.world.Step(this.timeStep, this.velocityIterations, this.positionIterations);
      this.time += 1 / 60;
  }
  
  addParticles = function()
  {   
    if(!this.cooling)
    {
      this.cooling = true;
      this.particle.position.Set((this.width / 2) / this.METER, -this.height * 2 / this.METER);
      this.particle.radius = 1;

      let particleGroupDef = new b2ParticleGroupDef();
        particleGroupDef.shape = this.particle;

      this.particleSystem.CreateParticleGroup(particleGroupDef);
      
      setTimeout(() => { this.cooling = false }, this.cooldown)
    }
  }
}

let stage = new Stage(document.getElementById('canvas'));

let gravity = new b2Vec2(0, 10);
let world = new b2World(gravity);
let sim = new Sim(world);

// window.addEventListener('resize', e => 
// { 
//  sim.onResize();
//  stage.onResize();
// });

let simOutput: any[] = [];
let runFor:number = 10;

function runSim()
{
  for(let i = 0; i < runFor * 60; i++)
  {
    sim.step();
    var particles = sim.getParticles();
    
    let simTick = [];
    

    for (var j = 0; j < particles.length / 2; j++)
    {     
      var x = (sim.width/2) - particles[j * 2] * sim.METER + sim.OFFSET_X;
      var y = (sim.height/2) - (sim.height - particles[(j * 2) + 1] * sim.METER + sim.OFFSET_Y);
      simTick.push({x: x, y: y});
    } 
    
    simOutput.push(simTick);
  }
}

let init = function()
{
  sim.addParticles();
  runSim();

  let frame = 0;
  
  var particles = simOutput[simOutput.length - 1];
  
  let xMin;
  let xMax;
  let yMin;
  let yMax;
  
  // get bounds
  
  for (var i = 0; i < particles.length; i++)
  {
    if(!xMin || particles[i].x < xMin) xMin = particles[i].x;
    if(!xMax || particles[i].x > xMax) xMax = particles[i].x;
    if(!yMin || particles[i].y < yMin) yMin = particles[i].y;
    if(!yMax || particles[i].y > yMax) yMax = particles[i].y;
  }
  
  let areaWidth = xMax - xMin;
  let areaHeight = yMax - yMin;
  
  
  for (var i = 0; i < particles.length; i++)
  {
    let x = ((particles[i].x - xMin) / areaWidth) * 100;
    let y = ((particles[i].y - yMin) / areaHeight) * 100;
    //console.log(((particles[i].x + (sim.width/2)) / sim.width) * 100, Math.floor(particles[i].y))
    stage.newParticle(getPixel(imageData, x, y));
  }

  function playSim() 
  {
    //sim.step();

    var particles = simOutput[frame];
    for (var i = 0; i < particles.length; i++)
    {
      let p = !stage.particles[i] ? stage.newParticle(0x666666) : stage.particles[i];
      p.position.set(particles[i].x, particles[i].y); 
    }

    frame++;
    if(frame < simOutput.length) requestAnimationFrame(playSim);
    else requestAnimationFrame(realtimeTick);
  }

  playSim();
}

function realtimeTick() 
{
    sim.step();

    var particles = sim.getParticles();
    for (var i = 0; i < particles.length / 2; i++)
    {
    let p = !stage.particles[i] ? stage.newParticle() : stage.particles[i];
    
    if(p.position.y > window.innerHeight/2 && !p.removed)
    {
      stage.remove(p, p.index);
      p.removed = true;
    }
    else
    {
      var x = (sim.width/2) - particles[i * 2] * sim.METER + sim.OFFSET_X;
      var y = (sim.height/2) - (sim.height - particles[(i * 2) + 1] * sim.METER + sim.OFFSET_Y);
      p.position.set(x, y);
    }
    }

    requestAnimationFrame(realtimeTick);
}

//     requestAnimationFrame(tick);
// }

// window.addEventListener('click', () => { sim.addParticles(); })
// window.addEventListener('touchstart', () => { sim.addParticles(); })

// if(location.pathname.match(/fullcpgrid/i))
// {
//  document.getElementById('info').style.visibility = "hidden";
//  setInterval(() => {sim.addParticles()}, 500);
// }

// tick();

// var img = new Image();
let imageData;

// img.onload = function() 
// {
//  imageData = getImageData(img);
//     init();
// };
// img.src = ;

const loader = new PIXI.loaders.Loader();
loader.add('hello', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/557388/HELLO.png')
loader.load((loader, resources) => {
   // resources.bunny
   // resources.spaceship
  console.log(resources.hello);
  imageData = getImageData(resources.hello.data);
  //console.log(getPixel(imageData, 0, 0));
  init();
});

function getImageData( image ) {

    var canvas = document.createElement( 'canvas' );
    canvas.width = image.width;
    canvas.height = image.height;

    var context = canvas.getContext( '2d' );
    context.drawImage( image, 0, 0 );

    return context.getImageData( 0, 0, image.width, image.height );

}

function getPixel(imgData, percentX, percentY) 
{
  let x = Math.round((percentX / 100) * imageData.width);
  let y = Math.round((percentY / 100) * imageData.height);
  
  if(x < 0) x = 0;
  if(x > imageData.width) x = imageData.width;
  if(y < 0) y = 0;
  if(y > imageData.height) y = imageData.height;
  
  //console.log('x', x, 'y', y, 'width', imageData.width, 'height', imageData.height)
  var r, g, b, a, offset = x * 4 + y * 4 * imgData.width;
  if(offset + 3 > imgData.data.length) offset = imgData.data.length - 4;
  //if(percentX > 99) console.log(x)
  //if(percentY > 98 && percentX > 98) console.log(x, y)
  r = imgData.data[offset];
  g = imgData.data[offset + 1];
  b = imgData.data[offset + 2];
  
  let str = "0x" + componentToHex(r) + componentToHex(g) + componentToHex(b);
    //console.log(str);
  return parseInt(str);


}

function componentToHex(c) {
    var hex = c.toString(16);
    return hex.length == 1 ? "0" + hex : hex;
}