const version = "v1a2"


// ============================== VERT ========================================

const shader_vert = `
attribute vec3 aPosition;
attribute vec2 aTexCoord;
varying vec2 vTexCoord;
void main() {
  vTexCoord = aTexCoord;
  vec4 positionVec4 = vec4(aPosition, 1.0);
  positionVec4.xy = positionVec4.xy * 2.0 - 1.0;
  gl_Position = positionVec4;
}`;

// =============================== PRE-SHADER =================================


const preShader_frag = `

precision mediump float;
varying vec2 vTexCoord;

uniform sampler2D img_input;
uniform float cam_mode;

vec2 uv;
vec4 img_output;

void main() {
  
  uv = vTexCoord;
  uv.y = 1.0 - uv.y;
  if (cam_mode==1.0) uv.x = 1.0 - uv.x;
  
  img_output = texture2D(img_input, uv);
  
  gl_FragColor = img_output;

}`;

// =============================== MAIN-SHADER ================================


const mainShader_frag = `

precision mediump float;
#define PI 3.14159265359
#define TWO_PI 6.28318530718
varying vec2 vTexCoord;

uniform sampler2D img_input;
uniform float mode;
uniform float timer;

vec2 uv;
vec4 q1,q2,q3,q4,qt,w1,w2,w3,w4,img_output;

void main() {
  
  uv = vTexCoord;
  uv.y = 1.0 - uv.y;
  
  q1 = texture2D( img_input ,  vec2(	uv.x*0.5	,	uv.y*0.5	) );
  q2 = texture2D( img_input ,  vec2(	uv.x*0.5+0.5,	uv.y*0.5	) );
  q3 = texture2D( img_input ,  vec2(	uv.x*0.5	,	uv.y*0.5+0.5) );
  q4 = texture2D( img_input ,  vec2(	uv.x*0.5+0.5,	uv.y*0.5+0.5) );
  
  w1 = mix(q1,q2,smoothstep( abs(sin(timer*0.4))-0.1 , abs(sin(timer*0.4))+0.1 ,vec4(q2.g,q2.g,q2.g,1.0)));
  w2 = mix(q2,q3,smoothstep( sin(sin(timer*0.5))-0.1 , abs(sin(timer*0.5))+0.1 ,vec4(q3.g,q3.g,q3.g,1.0)));
  w3 = mix(q3,q4,smoothstep( abs(sin(timer*0.6))-0.1 , abs(sin(timer*0.6))+0.1 ,vec4(q4.g,q4.g,q4.g,1.0)));
  w4 = mix(q4,q1,smoothstep( abs(sin(timer*0.7))-0.1 , abs(sin(timer*0.7))+0.1 ,vec4(q1.g,q1.g,q1.g,1.0)));
  
  qt = 1.0-(1.0-q1)*(1.0-q2)*(1.0-q3)*(1.0-q4);
  
		if (mode == 0.0) img_output = 	max(max(q1,q2),max(q3,q4));
  else  if (mode == 1.0) img_output = 	mix(q1,q2,max(q3,q4));
  else  if (mode == 2.0) img_output = 	mix(q1,q2,smoothstep(0.4,0.6,vec4(q3.r,q3.r,q3.r,1.0)));
  else  if (mode == 3.0) img_output = 	max(max(w1,w3),max(w2,w4));
  else  if (mode == 4.0) img_output = 	mix(w1,w2,max(w3,w4));
  else  if (mode == 5.0) img_output = 	mix(w1,w2,smoothstep(0.4,0.6,vec4(w3.r,w3.r,w3.r,1.0)));
  else  if (mode == 6.0) img_output = 	qt;
  else  if (mode == 7.0) img_output = 	dot(qt.rgb, vec3(0.33333))>0.5 ? (qt-0.01)*(qt-0.01)*(qt-0.01) : 1.0 - 3.0*(1.0-qt)*(1.0-qt)*(1.0-qt);
  
  
  // else  if (mode == 1.0) img_output = 	mix(mix(q1,q2,cos(timer)),mix(q3,q4,cos(timer)),sin(timer));	
		
		
  // else  if (mode == 1.0) img_output = 	max(min(q1,q2),max(q3,q4));
  // else  if (mode == 2.0) img_output = 	max(max(q1,q2),min(q3,q4));
  // else  if (mode == 3.0) img_output = 	max(min(q1,q2),min(q3,q4));
  // else  if (mode == 4.0) img_output = 	min(min(q1,q2),min(q3,q4));
  // else  if (mode == 5.0) img_output = 	min(max(q1,q2),max(q3,q4));

  
  gl_FragColor = img_output;

}`;

// =============================== POST-SHADER ================================


const postShader_frag = `

precision mediump float;
varying vec2 vTexCoord;

uniform sampler2D img_input;

vec2 uv;
vec4 img_output;

void main() {
  
  uv = vTexCoord;
  uv.y = 1.0 - uv.y;
  
  img_output = texture2D(img_input, uv);
  //if (uv.y>0.5 && uv.x >0.5) img_output.b = 1.0;
  
  gl_FragColor = img_output;

}`;

// =========================== VARIABLES ======================================

let preShader;
let mainShader;
let postShader;

let set_resolution;

let camera_input;
let camera_mode;

let gui_alpha;

let image_input;
let fb_send;
let fbk = 0.5;

let resolution = 1.0;

// ============================= CLASSES ======================================

class button {
  
  constructor(text, x, y, width, height) {
    this.text = text;
		this.x = x;
		this.y = y;
		this.width = width;
    this.height = height;
    this.over = false;
    this.pressed = false;
    this.clicked = false;
    this.alpha = 0.0;
  }
  
  create() {
    
    if (this.clicked == true) {
      this.clicked = false;
      //print("unclicked: "+ this.text);
    }

    if (mouseX>this.x && mouseX<this.x+this.width && mouseY>this.y && mouseY<this.y+this.height)
      this.over = true;
    else
      this.over = false;
    
    if (this.over && mouseIsPressed) {
      if (this.pressed != true) {
        this.pressed = true;
        this.clicked = true;
        //print("pressed: "+ this.text);
        //print("clicked: "+ this.text);
      }
    }
    else if (this.pressed == true){
      this.pressed = false;
      //print("unpressed: "+ this.text);
    }
    
    
    stroke(0);
    fill(255, this.alpha);
    if (this.clicked==true) this.alpha = 255.0;
    if (this.alpha > 0) this.alpha -= 20.0;
    rect(this.x,this.y,this.width,this.height);
    
    fill(50);
    noStroke();
    textSize(20);
    textAlign(CENTER, CENTER);
    text(this.text, this.x + this.width/2, this.y + this.height/2);
  }    
}

// ============================ MAIN =========================================

// ------------------------------- OBJECTS -----------------------------------

let btn_menu;
let top_mode = 0;

let btn_camtype;
let btn_resolution;
let btn_calibration;


let btn_feedback;
let btn_screenshot;
let btn_left;
let btn_right;

let mode = 0;
let nmodes = 8;
let timer = 0;
let DT = 1;

// ------------------------------- FUNCTIONS ---------------------------------

function create_buttons() {

  btn_screenshot = new button('SCREENSHOT', height*0.1, height*0.9, width-height*0.2, height*0.1);
  btn_left = new button('<', 0, height*0.9, height*0.1, height*0.1);
  btn_right = new button('>', width-height*0.1, height*0.9, height*0.1, height*0.1);
  
}


function draw_buttons() {

  btn_screenshot.create();  
  if (btn_screenshot.clicked==true) {
    save(im2, 'F4_'+version+"-"+year()+nf(month(),2)+nf(day(),2)+"-"+nf(hour(),2)+nf(minute(),2)+nf(second(),2) +'.jpg');
  } 
  
  btn_left.create();
  if (btn_left.clicked==true) {
    if (mode == 0) mode=nmodes-1;
	else mode-=1;
  } 
  
  
  btn_right.create();
  if (btn_right.clicked==true) {
    if (mode == nmodes-1) mode=0;
	else mode+=1;
  } 
  
}



function create_camera() {
  
  camera_mode = getItem('camera_mode');
  if (camera_mode==getItem('empty_item'))
        camera_mode = 0.0;
  //print("camera_mode = " + camera_mode);

  if (windowWidth>windowHeight) {
    createCanvas(windowHeight*4/3, windowHeight);
  } else {
    createCanvas(windowWidth, windowWidth*4/3);
  }
  noStroke();
 
  let camera_mode_string;
 
  if (camera_mode == 0.0)
    camera_mode_string = "environment";
  else
    camera_mode_string = "user";
	
  var camera_settings = {
    audio: false,
    video: {
      // width: {min: 640, ideal: 1280, max: 1920},
      // height: {min: 480, ideal: 720, max: 1080},
      facingMode: "environment"
    }
  };	
  
  camera_input = createCapture(camera_settings);
  //camera_input.size(width, height);
  camera_input.hide();

}






// ---------------------------- SETUP ----------------------------------------

function setup() {

  pixelDensity(1);
  
  set_resolution = getItem('set_resolution');
  if (set_resolution==getItem('empty_item'))
        set_resolution = 1.0;
  //print("set_resolution = " + set_resolution);
  
  create_camera();
  create_buttons();
  
  preImg = createGraphics(width, height, WEBGL);
	preShader = preImg.createShader(shader_vert, preShader_frag);
	preImg.noStroke();
  
  mainImg = createGraphics(width, height, WEBGL);
	mainShader = mainImg.createShader(shader_vert, mainShader_frag);
	mainImg.noStroke();
  
  postImg = createGraphics(width, height, WEBGL);
	postShader = postImg.createShader(shader_vert, postShader_frag);
	postImg.noStroke();
  
  im2 = createGraphics(width, height);
  
  image_input = loadImage('https://sun9-39.userapi.com/ca2jDO-IqtAvr2JF-A-FgvTpkntYeaNOYsiHiw/ednomg14B5k.jpg');
  

}

// ----------------------------- DRAW -----------------------------------------

function draw() {  


timer += 1.0/(frameRate()*2+1);
//print(timer);

/*
  preShader.setUniform('img_input', camera_input);
  //preShader.setUniform('img_input', image_input);
  preShader.setUniform('cam_mode', camera_mode);
  preImg.shader(preShader);
  preImg.rect(0,0,preImg.width, preImg.height);	
*/
 
  mainShader.setUniform('img_input', camera_input);
  mainShader.setUniform('mode', mode);
  mainShader.setUniform('timer', timer);
  mainImg.shader(mainShader);
  mainImg.rect(0,0,mainImg.width, mainImg.height);	

/*
  postShader.setUniform('img_input', camera_input);
  postImg.shader(postShader);
  postImg.rect(0,0,postImg.width, postImg.height);	
*/
  
  im2.image(mainImg,0,0,im2.width, im2.height);	
  image(im2, 0,0,mainImg.width,mainImg.height);	
  
/*  
	fill(0,128);
	rect(0,height*0.5,width,height*0.4);
  
	fill(200);
	noStroke();
	
	textSize(14);
	textAlign(LEFT, TOP);
	text(
        "camera size: " + camera_input.width + "x" + camera_input.height + "\n" +
        "screen size: " + windowWidth + "x" + windowHeight + "\n" +
        "display / pixel density: " + displayDensity() + " / " + pixelDensity() + "\n" +
        "image size: " + im2.width + "x" + im2.height + "\n" +
        "frame rate: " + nf(frameRate(),2,-2)
        , 5, height*0.5 + 5);
*/

    fill(50);
    noStroke();
    textSize(20);
	textAlign(LEFT, TOP);
	text(
        "MODE: " + mode, 5, height*0.9-20);
        
  draw_buttons();

}

// ----------------------------- MOUSE ----------------------------------------


// ------------------------------- GUI ----------------------------------------


// ------------------------------ BUTTONS -------------------------------------


// --------------------------- CALIBRATION ------------------------------------