const includes = `
#ifdef GL_ES
precision mediump float;
#endif
#define NUM_OCTAVES 5
float rand(vec2 n) { 
    return fract(sin(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);
}

float noise(vec2 p){
    vec2 ip = floor(p);
    vec2 u = fract(p);
    u = u*u*(3.0-2.0*u);
    
    float res = mix(
        mix(rand(ip),rand(ip+vec2(1.0,0.0)),u.x),
        mix(rand(ip+vec2(0.0,1.0)),rand(ip+vec2(1.0,1.0)),u.x),u.y);
    return res*res;
}

float fbm(vec2 x) {
    float v = 0.0;
    float a = 0.5;
    vec2 shift = vec2(100);
    // Rotate to reduce axial bias
    mat2 rot = mat2(cos(0.5), sin(0.5), -sin(0.5), cos(0.50));
    for (int i = 0; i < NUM_OCTAVES; ++i) {
        v += a * noise(x);
        x = rot * x * 2.0 + shift;
        a *= 0.5;
    }
    return v;
}
`;

const frag = (items) => {
  const ifLoop = items
    .map((item, index) => {
      return `
  if(index == ${index}) {
  return texture2D(textures[${index}], uv);
  }
`;
    })
    .join("else");

  return `
#define MAX ${items.length}
#ifdef GL_ES
precision mediump float;
#endif

uniform float u_time;
uniform vec2 u_resolution;
uniform float timeline;

uniform sampler2D textures[MAX];


uniform float startIndex;
uniform float endIndex;

varying vec3 v_normal;
varying vec2 v_texcoord;

${includes}

vec4 sampleColor(int index, vec2 uv){
 ${ifLoop}
 
}

void main(void)
{
    vec2 uv =  v_texcoord;
    float wave =  fbm(3.5 * uv + 0.2*u_time);
    float strength = smoothstep(0.0, 2.0, timeline)- smoothstep(3.0, 5.0, timeline);
    float distortion = mix(1.0,1.0 + strength,wave);
    uv -= 0.5;
    uv *= distortion;
    uv += 0.5;
    
    if(uv.x < 0.0 || uv.x > 1.0 || uv.y > 1.0 || uv.y < 0.0){
     discard;
    }
    
    // pick images
    vec4 startTexture = sampleColor(int(startIndex), uv);
    vec4 endTexture = sampleColor(int(endIndex), uv);
    
    float changeTimeline = smoothstep(2.0, 3.0,timeline);
    float mixer = 1.0 - step(changeTimeline, wave);
    
    
    vec4 color = mix(startTexture,endTexture, mixer);
    
    gl_FragColor = color;
}
`;
};

const paintings = [
  {
    src: "https://assets.codepen.io/3473719/image1.jpg",
    title: "1 / 6"
  },
  {
    src: "https://assets.codepen.io/3473719/image2.jpg",
    title: "2 / 6"
  },
  {
    src: "https://assets.codepen.io/3473719/image3.jpg",
    title: "3 / 6"
  },
  {
    src: "https://assets.codepen.io/3473719/image4.jpg",
    title: "4 / 6"
  },
  {
    src: "https://assets.codepen.io/3473719/image5.jpg",
    title: "5 / 6"
  },
  {
    src: "https://assets.codepen.io/3473719/image6.jpg",
    title: "6 / 6"
  }
];

const prevTag = document.querySelector("nav a.prev");

const nextTag = document.querySelector("nav a.next");

const descriptionTag = document.querySelector("header div");

const canvas = document.querySelector("div.canvas-holder canvas");

const sandbox = new GlslCanvas(canvas);
sandbox.load(frag(paintings));

let startIndex = 0;
let endIndex = 0;
let timeline = performance.now() - 9999;

const sizer = () => {
  const ww = window.innerWidth;
  const wh = window.innerHeight;

  const s = Math.min(ww, wh);
  const dpi = window.devicePixelRatio;

  canvas.width = s * 0.6 * dpi;
  canvas.height = s * 0.9 * dpi;

  canvas.style.width = s * 0.6 + "px";
  canvas.style.height = s * 0.9 + "px";
};

const update = () => {
  descriptionTag.innerHTML = paintings[endIndex].title;
  sandbox.setUniform("startIndex", startIndex);
  sandbox.setUniform("endIndex", endIndex);
  timeline = performance.now();

  startIndex = endIndex;
  tick();
};

const tick = () => {
  const diff = (performance.now() - timeline) / 1000;
  sandbox.setUniform("timeline", diff);
  requestAnimationFrame(tick);
};

const load = () => {
  sizer();
  tick();
  paintings.forEach((painting, index) => {
    sandbox.setUniform(`textures[${index}]`, painting.src);
  });
};

load();
const next = () => {
  endIndex = endIndex + 1;
  if (endIndex > paintings.length) {
    endIndex = 0;
  }
  update();
};

const prev = () => {
  endIndex = endIndex - 1;
  if (endIndex < 0) {
    endIndex = paintings.length - 1;
  }
  update();
};

// events

window.addEventListener("resize", sizer);

nextTag.addEventListener("click", (event) => {
  event.preventDefault();
  next();
});

prevTag.addEventListener("click", (event) => {
  event.preventDefault();
  prev();
});