setTimeout(() => {
  switch (document.getElementById('type-convert').value)
  {
    case "Standart RGB":
      document.getElementById('rgb-wrapper').style.display = "none";
      document.getElementById('lab-wrapper').style.display = "none";
      document.getElementById('sum-wrapper').style.display = "none";
      break;
    case "LAB":
      document.getElementById('rgb-wrapper').style.display = "none";
      document.getElementById('lab-wrapper').style.display = "block";
      document.getElementById('sum-wrapper').style.display = "none";
      break;
    case "% RGB":
      document.getElementById('rgb-wrapper').style.display = "block";
      document.getElementById('lab-wrapper').style.display = "none";
      document.getElementById('sum-wrapper').style.display = "inline-block";
      sumRGB();

      break;
    case "Lightness":
      document.getElementById('rgb-wrapper').style.display = "none";
      document.getElementById('lab-wrapper').style.display = "none";
      document.getElementById('sum-wrapper').style.display = "none";
      break;
  }
  converter();
}, 100);
let selectElement = document.getElementById('select-image');
selectElement.addEventListener('change', (event) => {
  let img = document.getElementById('color-img');
  let src = '';
  switch (event.target.value) {
    case "RGB":
      src = "images/1.jpg";
      break;
    case "Pták":
      src = "images/2.jpg";
      break;
    case "Paleta":
      src = "images/3.jpg";
      break;
    case "Balóny":
      src = "images/4.jpg";
      break;
    case "Deštníky":
      src = "images/5.jpg";
      break;
    case "Barevný kouř":
      src = "images/6.jpg";
      break;
    case "Žena":
      src = "images/7.jpg";
      break;
  }
  img.src = src;
  setTimeout(() => { converter() }, 100);
});

function converter() {
  let typeConvertation = document.getElementById('type-convert');
  switch (typeConvertation.value) {
    case "Průměr RGB":
      drawBW();
      break;
    case "LAB":
      drawBW();
      let canvas = document.getElementById('canvas');
      let ctx = canvas.getContext('2d');
      let imageData = ctx.getImageData(0, 0, canvas.height, canvas.width);
      let data = imageData.data;
      let averL = 0;
      let min = 100;
      let max = 0;
      for (let i = 0; i < data.length; i += 4) {
        let L = convertPixeltoLAB([data[i], data[i + 1], data[i + 2]])[0]
        averL += L;
        min = L < min ? L : min;
        max = L > max ? L : max;
      }
      averL /= data.length;
      let L = document.getElementById('range').value;
      let diffL = averL - L;
      for (let i = 0; i < data.length; i += 4) {
        let rgb = [data[i], data[i + 1], data[i + 2]];
        let lab = convertPixeltoLAB(rgb);
        if (diffL > 0) {
          lab[0] += (100 - lab[0]) * (diffL / 100);
        }
        else {
          lab[0] -= lab[0] * (Math.abs(diffL) / 100);
        }
        rgb = convertPixelToRGB(lab);
        data[i] = rgb[0];
        data[i + 1] = rgb[1];
        data[i + 2] = rgb[2];
      }
      ctx.putImageData(imageData, 0, 0);
      break;
    case "% RGB":
      let r = document.getElementById('rangeR').value / 100;
      let g = document.getElementById('rangeG').value / 100;
      let b = document.getElementById('rangeB').value / 100;
      percent([r, g, b])
      break;
    case 'Lightness':
      lightness();
      break;
    case 'Lumino':
      lumino();
      break;
  }
}
function percent(perc) { //metoda % RGB
  if (perc === undefined) perc = [1, 1, 1];
  let image = document.getElementById('color-img');
  let canvas = document.getElementById('canvas');
  let ctx = canvas.getContext('2d');
  ctx.drawImage(image, 0, 0, 400, 400);
  let imageData = ctx.getImageData(0, 0, canvas.height, canvas.width);
  let data = imageData.data;
  for (let i = 0; i < data.length; i += 4) {
    var per = (perc[0] * data[i] + perc[1] * data[i + 1] + perc[2] * data[i + 2]);
    data[i] = per; // red
    data[i + 1] = per; // green
    data[i + 2] = per; // blue
  };
  ctx.putImageData(imageData, 0, 0);
}
function lightness() {// metoda Lightness
  let image = document.getElementById('color-img');
  let canvas = document.getElementById('canvas');
  let ctx = canvas.getContext('2d');
  ctx.drawImage(image, 0, 0, 400, 400);
  let imageData = ctx.getImageData(0, 0, canvas.height, canvas.width);
  let data = imageData.data;
  for (let i = 0; i < data.length; i += 4) {
    let r = data[i];
    let g = data[i + 1];
    let b = data[i + 2];
    let min = 0;
    let max = 0;
    if (r >= g && r >= b) max = r;
    if (g >= r && g >= b) max = g;
    if (b >= g && b >= r) max = b;
    if (r <= g && r <= b) min = r;
    if (g <= r && g <= b) min = g;
    if (b <= g && b <= r) min = b;
    let aver = (min + max) / 2;
    data[i] = data[i + 1] = data[i + 2] = aver;
  }
  ctx.putImageData(imageData, 0, 0);
}
function drawBW() { //metoda prumerovani RGB kanalu (Průměr)
  let image = document.getElementById('color-img');
  let canvas = document.getElementById('canvas');
  let ctx = canvas.getContext('2d');
  ctx.drawImage(image, 0, 0, 400, 400);
  let imageData = ctx.getImageData(0, 0, canvas.height, canvas.width);
  let data = imageData.data;
  for (let i = 0; i < data.length; i += 4) {
    var avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
    data[i] = avg; // red
    data[i + 1] = avg; // green
    data[i + 2] = avg; // blue
  }
  ctx.putImageData(imageData, 0, 0);
}
function lumino() { //metoda lumino
  let image = document.getElementById('color-img');
  let canvas = document.getElementById('canvas');
  let ctx = canvas.getContext('2d');
  ctx.drawImage(image, 0, 0, 400, 400);
  let imageData = ctx.getImageData(0, 0, canvas.height, canvas.width);
  let data = imageData.data;
  for (let i = 0; i < data.length; i += 4) {
    let r = data[i];
    let g = data[i + 1];
    let b = data[i + 2];
    let intensity = 0.299 * r + 0.587 * g + 0.114 * b;
    data[i] = data[i + 1] = data[i + 2] = intensity;
  }
  ctx.putImageData(imageData, 0, 0);
}
function convertPixeltoLAB(rgb) { // funkce pro prepocet rgb pixelu na lab
  let R = (rgb[0] / 255);
  let G = (rgb[1] / 255);
  let B = (rgb[2] / 255);
  if (R > 0.04045) R = Math.pow(((R + 0.055) / 1.055), 2.4);
  else R = R / 12.92;
  if (G > 0.04045) G = Math.pow(((G + 0.055) / 1.055), 2.4);
  else G = G / 12.92;
  if (B > 0.04045) B = Math.pow(((B + 0.055) / 1.055), 2.4);
  else B = B / 12.92;
  R = R * 100;
  G = G * 100;
  B = B * 100;
  let X = R * 0.4124 + G * 0.3576 + B * 0.1805;
  let Y = R * 0.2126 + G * 0.7152 + B * 0.0722;
  let Z = R * 0.0193 + G * 0.1192 + B * 0.9505;

  let ref_X = 95.047;
  let ref_Y = 100.000;
  let ref_Z = 108.883;

  let var_X = X / ref_X;
  let var_Y = Y / ref_Y;
  let var_Z = Z / ref_Z;

  if (var_X > 0.008856) var_X = Math.pow(var_X, (1 / 3));
  else var_X = (7.787 * var_X) + (16 / 116);
  if (var_Y > 0.008856) var_Y = Math.pow(var_Y, (1 / 3));
  else var_Y = (7.787 * var_Y) + (16 / 116);
  if (var_Z > 0.008856) var_Z = Math.pow(var_Z, (1 / 3));
  else var_Z = (7.787 * var_Z) + (16 / 116);


  rgb[0] = (116 * var_Y) - 16;
  rgb[1] = 500 * (var_X - var_Y);
  rgb[2] = 200 * (var_Y - var_Z);
  return rgb;
}

function convertPixelToRGB(lab) { // funkce pro prepocet z lab na rgb
  let ref_X = 95.047;
  let ref_Y = 100.000;
  let ref_Z = 108.883;

  let var_Y = (lab[0] + 16) / 116;
  let var_X = lab[1] / 500 + var_Y;
  let var_Z = var_Y - lab[2] / 200;

  if (Math.pow(var_Y, 3) > 0.008856) var_Y = Math.pow(var_Y, 3);
  else var_Y = (var_Y - 16 / 116) / 7.787;
  if (Math.pow(var_X, 3) > 0.008856) var_X = Math.pow(var_X, 3);
  else var_X = (var_X - 16 / 116) / 7.787;
  if (Math.pow(var_Z, 3) > 0.008856) var_Z = Math.pow(var_Z, 3);
  else var_Z = (var_Z - 16 / 116) / 7.787;

  let X = var_X * ref_X;
  let Y = var_Y * ref_Y;
  let Z = var_Z * ref_Z;

  var_X = X / 100
  var_Y = Y / 100
  var_Z = Z / 100

  var_R = var_X * 3.2406 + var_Y * -1.5372 + var_Z * -0.4986
  var_G = var_X * -0.9689 + var_Y * 1.8758 + var_Z * 0.0415
  var_B = var_X * 0.0557 + var_Y * -0.2040 + var_Z * 1.0570

  if (var_R > 0.0031308) var_R = 1.055 * (Math.pow(var_R, (1 / 2.4))) - 0.055
  else var_R = 12.92 * var_R
  if (var_G > 0.0031308) var_G = 1.055 * (Math.pow(var_G, (1 / 2.4))) - 0.055
  else var_G = 12.92 * var_G
  if (var_B > 0.0031308) var_B = 1.055 * (Math.pow(var_B, (1 / 2.4))) - 0.055
  else var_B = 12.92 * var_B

  lab[0] = var_R * 255;
  lab[1] = var_G * 255;
  lab[2] = var_B * 255;

  return lab;
}

function rangeChange(event) { //funkce pro precteni hodnot L ze slideru
  document.getElementById('range-value').value = event.target.value;
  setTimeout(() => { converter() }, 100);
}
function rangeValueChange(event) {
  if (event.target.value < 0 || event.target.value == "")
    event.target.value = 0;
  if (event.target.value > 100)
    event.target.value = 100;
  document.getElementById('range').value = event.target.value;
  setTimeout(() => { converter() }, 100);
}

function rangeRGBChange(event) { //funkce pro precteni hodnot RGB ze slideru
  let value = document.getElementById('range' + event.target.id[event.target.id.length - 1] + '-value');
  value.value = event.target.value;
  setTimeout(() => { converter() }, 100);
  sumRGB();
}
function rangeValueRGBChange(event) { //funkce pro precteni zadanych hodnot RGB
  let range = document.getElementById('range' + event.target.id[5]);
  if (event.target.value < 0) event.target.value = 0;
  else if (event.target.value > 100) event.target.value = 100;
  range.value = event.target.value;
  setTimeout(() => { converter() }, 100);
  sumRGB();
}
let typeElement = document.getElementById('type-convert');
typeElement.addEventListener('change', (event) => {
  switch (event.target.value) {
    case "Průměr RGB":
      document.getElementById('rgb-wrapper').style.display = "none";
      document.getElementById('lab-wrapper').style.display = "none";
      document.getElementById('sum-wrapper').style.display = "none";
      break;
    case "LAB":
      document.getElementById('rgb-wrapper').style.display = "none";
      document.getElementById('lab-wrapper').style.display = "block";
      document.getElementById('sum-wrapper').style.display = "none";
      break;
    case "% RGB":
      document.getElementById('rgb-wrapper').style.display = "block";
      document.getElementById('lab-wrapper').style.display = "none";
      document.getElementById('sum-wrapper').style.display = "inline-block";
      sumRGB();
      break;
    case "Lightness":
      document.getElementById('rgb-wrapper').style.display = "none";
      document.getElementById('lab-wrapper').style.display = "none";
      document.getElementById('sum-wrapper').style.display = "none";
      break;
    case "Lumino":
      document.getElementById('rgb-wrapper').style.display = "none";
      document.getElementById('lab-wrapper').style.display = "none";
      document.getElementById('sum-wrapper').style.display = "none";
      break;
  }
  setTimeout(() => { converter() }, 100);
}
);
function sumRGB() {
  let r = +document.getElementById('rangeR-value').value;
  let g = +document.getElementById('rangeG-value').value;
  let b = +document.getElementById('rangeB-value').value;
  document.getElementById('sum').innerText = r + g + b + "%";
}