setTimeout(() => { 
	drawColor(undefined);
	if (document.getElementById('type-convert ').value === 'RGB gradient') {
		document.getElementById('gradient-controller').style.display = 'block'
	} else document.getElementById('gradient-controller').style.display = 'none'
}, 100);
function drawColor(event) {// metoda vykresleni obrazu
	if (event !== undefined) { 	
		document.getElementById('range').value = 10; 
		document.getElementById('range-value').value = "1.0";
		clearCanvas();
	}
	switch (document.getElementById('type-convert').value) {//volba barvici palety
		case "Jet":
			toJetConvert();
			break;
		case "Cool":
			toCoolConvert();
			break;
		case "Hot":
			toHotConvert();
			break;
		case "HSV":
			toHSVConvert();
			break;
		case "RGB gradient":
			toGradientConvert();
			break;
	}
}
function dropPalete() { // metoda pro vycisteni palety
	let fcCanvas = document.getElementById('fc-palete');
	let fcCtx = fcCanvas.getContext('2d');
	let fcImageData = fcCtx.getImageData(0, 0, fcCanvas.width, fcCanvas.height);
	let fcData = fcImageData.data;
	for (let i = 0; i < fcData.length; i += 4) { // cyksul pro prepsani barvy pixelu na bilou 
		fcData[i] = 255;
		fcData[i + 1] = 255;
		fcData[i + 2] = 255;
		fcData[i + 3] = 255;
	}
	fcCtx.putImageData(fcImageData, 0, 0);

}
let typeConvert = document.getElementById('type-convert');
typeConvert.addEventListener('change', (event) => {
	dropPalete();

	document.getElementById('range').value = 10;// vychozi hondota gama korekce na slideru
	document.getElementById('range-value').value = "1.0"; //  vychozi hondota gama korekce v policku
	clearCanvas();
	if (event.target.value === 'RGB gradient') {
		document.getElementById('gradient-controller').style.display = 'block'; 
	} else document.getElementById('gradient-controller').style.display = 'none';
	drawColor(undefined);// vykresleni vyst.obrazu

})
let imageSelect = document.getElementById('image-select');
imageSelect.addEventListener('change', (event) => {
	document.getElementById('range').value = 10;
	document.getElementById('range-value').value = "1.0";
	clearCanvas(); 
	let img = 'images/'//volba obrazku
	switch (event.target.value) {
		case 'Muž':
			img += '1.jpg'
			break;
		case 'Hory':
			img += '2.jpg'
			break;
		case 'Měsíc 1':
			img += '3.jpg'
			break;
		case 'Moře':
			img += '4.jpg'
			break;
		case 'Rentgen (trup)':
			img += 'body.png'
			break;
		case 'Rentgen (hrudník)':
			img += 'chest.png'
			break;
		case 'Mraky':
			img += 'clouds.jpg'
			break;
		case 'Rentgen (ruce)':
			img += 'hands.jpg'
			break;
		case 'Rentgen (hlava)':
			img += 'head.jpg'
			break;
		case 'Tajfun':
			img += 'typhoon.png'
			break;
		case 'Lineární gradient':
			img += 'linear_gradient.png'
			break;
		case 'Tarantula Nebula':
			img += 'nebula.jpg'
			break;
		case 'Měsíc 2':
			img += 'luna.jpg'
			break;
		case 'Hory 1':
			img += 'landscape.jpg'
			break;
	}
	document.getElementById('img').src = img;
	setTimeout(() => { drawColor(undefined); }, 100);
});
//inspirace https://stackoverflow.com/questions/7706339/grayscale-to-red-green-blue-matlab-jet-color-scale
function toJetConvert() { // funkce pro bareveni obrazu dle palety JET
	let canvas = document.getElementById('canvas');// nacteni canvasu pro vysl. obrazek
	let ctx = canvas.getContext('2d');// nacteni kontextu canvasu
	let img = document.getElementById('img'); // nacteni vychoziho obrazku
	ctx.drawImage(img, 0, 0, canvas.width, canvas.height); // vykresleni puvodniho obrazku v canvasu
	let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); // nacteni parametru puvodniho obrazku
	let data = imageData.data; // nacteni pixelu puvodniho obrazku
	for (let i = 0; i < data.length; i += 4) { //cyklus pro  přepočet sedotonovych pixelu do jet
		let r = data[i] / 255; // prepocet ciselne hodnoty na procent  
		if (r <= 0.5) r = 0;//  do 50% hodnota cervene slozky = 0
		else if (r <= 0.75) r = 255 * (r - 0.5) * 4; //  50% az 75%: cervena slozka postupne nabyva hodnot 0-255
		else r = 255;//  75% az 100% R = 255 vzdy
		data[i] = r;
		let g = data[i + 1] / 255;
		if (g <= 0.25) g = 255 * g * 4; //  0% az 25% G postupne nabyva hodnot 0-255
		else if (g <= 0.75) g = 255; // 25% az 75% G = 255 vzdy 
		else g = 255 - 255 * (g - 0.75) * 4;//  75% az 100% G postupne klesa od 255 po 0
		data[i + 1] = g;
		let b = data[i + 2] / 255;
		if (b <= 0.25) b = 255; //  0% az 25%  B=255 vzdy
		else if (b <= 0.50) b = 255 - 255 * (b - 0.25) * 4;//  25% az 50% hodnoty  slozky B klesaji od 255 po 0
		else b = 0;//  50% az 100% B = 0
		data[i + 2] = b;
	}
	ctx.putImageData(imageData, 0, 0);  // funkce pro vykresleni vysledne palety Jet na obrazovce
	let fcCanvas = document.getElementById('fc-palete');
	let fcCtx = fcCanvas.getContext('2d');
	let fcImageData = fcCtx.getImageData(0, 0, fcCanvas.width, fcCanvas.height);
	let fcData = fcImageData.data;
	for (let i = 0; i < fcData.length; i += 4) {
		let numPix = i / 4;
		let row = numPix / 30 - numPix / 30 % 1;
		let r = 1 - row / fcCanvas.height;
		if (r <= 0.5) r = 0;
		else if (r <= 0.75) r = 255 * (r - 0.5) * 4;
		else r = 255;
		fcData[i] = r;
		let g = 1 - row / fcCanvas.height;
		if (g <= 0.25) g = 255 * g * 4;
		else if (g <= 0.75) g = 255;
		else g = 255 - 255 * (g - 0.75) * 4;
		fcData[i + 1] = g;
		let b = 1 - row / fcCanvas.height;
		if (b <= 0.25) b = 255;
		else if (b <= 0.50) b = 255 - 255 * (b - 0.25) * 4;
		else b = 0;
		fcData[i + 2] = b;
		fcData[i + 3] = 255;
	}
	fcCtx.putImageData(fcImageData, 0, 0);
}
function toCoolConvert() { // funkce pro bareveni obrazu pomoci palety COOL
	let gamma = 2;
	let canvas = document.getElementById('canvas');
	let ctx = canvas.getContext('2d');
	let img = document.getElementById('img');
	ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
	let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
	let data = imageData.data;
	for (let i = 0; i < data.length; i += 4) {
		let r = data[i] / 255;
		r = r <= 0.5 ? 0 : 255 * (r - 0.5) * 2;
		data[i] = r;
		let g = data[i + 1] / 255;
		g = g < 0.5 ? 255 - 255 * g * 2 : 0;
		data[i + 1] = g;
		data[i + 2] = 255;
	}
	ctx.putImageData(imageData, 0, 0);  // funkce pro vykresleni vysledne palety Cool na obrazovce
	let fcCanvas = document.getElementById('fc-palete');
	let fcCtx = fcCanvas.getContext('2d');
	let fcImageData = fcCtx.getImageData(0, 0, fcCanvas.width, fcCanvas.height);
	let fcData = fcImageData.data;
	for (let i = 0; i < fcData.length; i += 4) {
		let numPix = i / 4;
		let row = numPix / 30 - numPix / 30 % 1;
		let r = 1 - row / bwCanvas.height;
		r = r <= 0.5 ? 0 : 255 * (r - 0.5) * 2;
		fcData[i] = r;
		let g = 1 - row / bwCanvas.height;
		g = g < 0.5 ? 255 - 255 * g * 2 : 0;
		fcData[i + 1] = g;
		fcData[i + 2] = 255;
		fcData[i + 3] = 255;
	}
	fcCtx.putImageData(fcImageData, 0, 0);

}
function toHotConvert() { //  funkce pro bareveni obrazu pomoci palety HOT
	let canvas = document.getElementById('canvas');
	let ctx = canvas.getContext('2d');
	let img = document.getElementById('img');
	ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
	let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
	let data = imageData.data;
	for (let i = 0; i < data.length; i += 4) {
		let r = data[i] / 255;
		r = r <= 0.25 ? 255 * r * 4 : 255;
		data[i] = r;
		let g = data[i + 1] / 255;
		if (g <= 0.25) g = 0;
		else if (g <= 0.5) g = 255 * (g - 0.25) * 4;
		else g = 255;
		data[i + 1] = g;
		let b = data[i + 2] / 255;
		b = b <= 0.75 ? 0 : 255 * (b - 0.75) * 4;
		data[i + 2] = b;
	}
	ctx.putImageData(imageData, 0, 0); // funkce pro vykresleni vysledne palety Hot na obrazovce
	let fcCanvas = document.getElementById('fc-palete');
	let fcCtx = fcCanvas.getContext('2d');
	let fcImageData = fcCtx.getImageData(0, 0, fcCanvas.width, fcCanvas.height);
	let fcData = fcImageData.data;
	for (let i = 0; i < fcData.length; i += 4) {
		let numPix = i / 4;
		let row = numPix / 30 - numPix / 30 % 1;
		let r = 1 - row / bwCanvas.height;
		r = r <= 0.25 ? 255 * r * 4 : 255;
		fcData[i] = r;
		let g = 1 - row / bwCanvas.height;
		if (g <= 0.25) g = 0;
		else if (g <= 0.5) g = 255 * (g - 0.25) * 4;
		else g = 255;
		fcData[i + 1] = g;
		let b = 1 - row / bwCanvas.height;
		b = b <= 0.75 ? 0 : 255 * (b - 0.75) * 4;
		fcData[i + 2] = b;
		fcData[i + 3] = 255;
	}
	fcCtx.putImageData(fcImageData, 0, 0);
}
function toHSVConvert() { // funkce pro bareveni obrazu pomoci palety HSV
	let canvas = document.getElementById('canvas');
	let ctx = canvas.getContext('2d');
	let img = document.getElementById('img');
	ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
	let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
	let data = imageData.data;
	for (let i = 0; i < data.length; i += 4) {
		let r = data[i] / 255;
		if (r <= 0.16) r = 255
		else if (r <= 0.33) r = 255 - 255 * (r - 0.16) * 6;
		else if (r <= 0.66) r = 0;
		else if (r <= 0.84) r = 255 * (r - 0.66) * 6;
		else r = 255;
		data[i] = r;
		let g = data[i + 1] / 255;
		if (g <= 0.16) g = 255 * g * 6;
		else if (g <= 0.49) g = 255;
		else if (g <= 0.66) g = 255 - 255 * (g - 0.5) * 6;
		else g = 0;
		data[i + 1] = g;
		let b = data[i + 2] / 255;
		if (b <= 0.33) b = 0;
		else if (b <= 0.49) b = 255 * (b - 0.33) * 6;
		else if (b <= 0.84) b = 255;
		else b = 255 - 255 * (b - 0.84) * 6;
		data[i + 2] = b;
	}
	ctx.putImageData(imageData, 0, 0);  // funkce pro zobrazeni vysledne palety HSV na obrazovce
	let fcCanvas = document.getElementById('fc-palete');
	let fcCtx = fcCanvas.getContext('2d');
	let fcImageData = fcCtx.getImageData(0, 0, fcCanvas.width, fcCanvas.height);
	let fcData = fcImageData.data;
	for (let i = 0; i < fcData.length; i += 4) {
		let numPix = i / 4;
		let row = numPix / 30 - numPix / 30 % 1;
		let r = 1 - row / bwCanvas.height;
		if (r <= 0.16) r = 255
		else if (r <= 0.33) r = 255 - 255 * (r - 0.16) * 6;
		else if (r <= 0.66) r = 0;
		else if (r <= 0.84) r = 255 * (r - 0.66) * 6;
		else r = 255;
		fcData[i] = r;
		let g = 1 - row / bwCanvas.height;
		if (g <= 0.16) g = 255 * g * 6;
		else if (g <= 0.49) g = 255;
		else if (g <= 0.66) g = 255 - 255 * (g - 0.5) * 6;
		else g = 0;
		fcData[i + 1] = g;
		let b = 1 - row / bwCanvas.height;
		if (b <= 0.33) b = 0;
		else if (b <= 0.49) b = 255 * (b - 0.33) * 6;
		else if (b <= 0.84) b = 255;
		else b = 255 - 255 * (b - 0.84) * 6;
		fcData[i + 2] = b;
		fcData[i + 3] = 255;
	}
	fcCtx.putImageData(fcImageData, 0, 0);
}
function rangeChange(event) {
	document.getElementById('range-value').value = event.target.value / 10;
	gammaCorrect(event);
}
function rangeValueChange(event) {
	let rV = event.target.value * 10;
	if (rV < 1) rV = 1;
	else if (rV > 100) rV = 100;
	document.getElementById('range').value = rV;
	gammaCorrect(event);
}
//inspirace https://www.codegrepper.com/code-examples/javascript/javascript+canvas+gamma+correction
function gammaCorrect(event) {
	drawColor(undefined);
	let canvas = document.getElementById('canvas');
	let ctx = canvas.getContext('2d');
	let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
	let data = imageData.data;
	let gamma = document.getElementById('range').value / 10;
	for (let i = 0; i < data.length; i += 4) {
		let r = data[i] / 255;
		data[i] = Math.pow(r, 1 / gamma) * 255;
		let g = data[i + 1] / 255;
		data[i + 1] = Math.pow(g, 1 / gamma) * 255;
		let b = data[i + 2] / 255;
		data[i + 2] = Math.pow(b, 1 / gamma) * 255;
	}
	ctx.putImageData(imageData, 0, 0);
	let fcCanvas = document.getElementById('fc-palete');
	let fcCtx = fcCanvas.getContext('2d');
	let fcImageData = fcCtx.getImageData(0, 0, fcCanvas.width, fcCanvas.height);
	let fcData = fcImageData.data;
	for (let i = 0; i < fcData.length; i += 4) {
		let r = fcData[i] / 255;
		fcData[i] = Math.pow(r, 1 / gamma) * 255;
		let g = fcData[i + 1] / 255;
		fcData[i + 1] = Math.pow(g, 1 / gamma) * 255;
		let b = fcData[i + 2] / 255;
		fcData[i + 2] = Math.pow(b, 1 / gamma) * 255;
	}
	fcCtx.putImageData(fcImageData, 0, 0);
}
function clearCanvas() {
	let canvas = document.getElementById('canvas');
	let ctx = canvas.getContext('2d');
	let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
	let data = imageData.data;
	for (let i = 0; i < data.length; i += 4) {
		data[i] = data[i + 1] = data[i + 2] = 255;
	}
	ctx.putImageData(imageData, 0, 0);
}
function rangeColorChange(event) {
	document.getElementById(event.target.id + '-value').value = event.target.value;
	setTimeout(() => { drawColor(undefined) }, 100);
}
function rangeColorValueChange(event) { 
	if (event.target.value < 0) event.target.value = 0; 
	if (event.target.value > 255) event.target.value = 255; 
	if (event.target.value === '') event.target.value = 0;
	document.getElementById('range' + event.target.id[5]).value = event.target.value;
	setTimeout(() => { drawColor(undefined) }, 100);
}
function toGradientConvert() {// metoda rgb gradient
	let canvas = document.getElementById('canvas');
	let ctx = canvas.getContext('2d');
	let img = document.getElementById('img');
	ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
	let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
	let data = imageData.data;
	let black = document.getElementById('black').checked;
	let endR = +document.getElementById('rangeR').value;
	let endG = +document.getElementById('rangeG').value;
	let endB = +document.getElementById('rangeB').value;
	for (let i = 0; i < data.length; i += 4) {
		let r = data[i] / 255;// intenzita kanal R
		let g = data[i + 1] / 255;// intenzita kanal G
		let b = data[i + 2] / 255;// intenzita kanal B

		if (black) {//koncovy bod cerna
			data[i] = endR - endR * r;// hodnoty RGB rostou od 0 do 255
			data[i + 1] = endG - endG * g;
			data[i + 2] = endB - endB * b;
		}
		else {// koncovy bod bila
			data[i] = (255 - endR) * r + endR;// hodnoty RGB klasaji od 255 do 0
			data[i + 1] = (255 - endG) * g + endG;
			data[i + 2] = (255 - endB) * b + endB;
		}

	}
	ctx.putImageData(imageData, 0, 0);
	let fcCanvas = document.getElementById('fc-palete');//vykresleni palety rgb gradient
	let fcCtx = fcCanvas.getContext('2d');
	let fcImageData = fcCtx.getImageData(0, 0, fcCanvas.width, fcCanvas.height);
	let fcData = fcImageData.data;
	for (let i = 0; i < fcData.length; i += 4) { 
		let numPix = i / 4;
		let row = numPix / 30 - numPix / 30 % 1;
		let r = 1 - row / fcCanvas.height;
		let g = 1 - row / fcCanvas.height;
		let b = 1 - row / fcCanvas.height;

		if (black) {
			fcData[i] = endR - endR * r;
			fcData[i + 1] = endG - endG * g;
			fcData[i + 2] = endB - endB * b;
		}
		else {
			fcData[i] = (255 - endR) * r + endR;
			fcData[i + 1] = (255 - endG) * g + endG;
			fcData[i + 2] = (255 - endB) * b + endB;
		}
		fcData[i + 3] = 255;
	}
	fcCtx.putImageData(fcImageData, 0, 0);
}
let bwCanvas = document.getElementById('bw-palete');//vykresleni sedotonove paelty
let bwCtx = bwCanvas.getContext('2d');
let bwImageData = bwCtx.getImageData(0, 0, bwCanvas.width, bwCanvas.height);
let bwData = bwImageData.data;
for (let i = 0; i < bwData.length; i += 4) {
	let numPix = i / 4;
	let row = numPix / 30 - numPix / 30 % 1;
	bwData[i] = 255 - ((row / bwCanvas.height) * 255);
	bwData[i + 1] = 255 - ((row / bwCanvas.height) * 255);
	bwData[i + 2] = 255 - ((row / bwCanvas.height) * 255);
	bwData[i + 3] = 255;
}
bwCtx.putImageData(bwImageData, 0, 0);
function startColorSelect(event) {
	setTimeout(drawColor(undefined), 100);
}
