window.onload = function(){
	var img = new Image();

	var canvas = document.getElementById("canvas");
	var ctx = canvas.getContext("2d");

	//Ładowanie obrazka
	img.src = "img/image.png";
	img.onload = function() {
		ctx.drawImage(img, 0,0);
	}

	var red = document.getElementById("r-color-range");
	var green = document.getElementById("g-color-range");
	var blue = document.getElementById("b-color-range");
	var brightness = document.getElementById("brightness-range");
	var contrast = document.getElementById("contrast-range");
	var invert = document.getElementById("invert-range");
	var gray = document.getElementById("gray-range");


	// Zmiana koloru czerwonego
	red.oninput = function() {
		ctx.drawImage(img, 0,0);
		imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
		for (var i = 0; i < imageData.data.length; i += 4) {
			imageData.data[i] += parseInt(red.value);
		}
		ctx.putImageData(imageData, 0, 0);
	}

	// Zmiana koloru zielonego
	green.oninput = function() {
		ctx.drawImage(img, 0,0);
		imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
		for (var i = 0; i < imageData.data.length; i += 4) {
			imageData.data[i+1] += parseInt(green.value);
		}
		ctx.putImageData(imageData, 0, 0);
	}

	// Zmiana koloru niebieskiego
	blue.oninput = function() {
		ctx.drawImage(img, 0,0);
		imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
		for (var i = 0; i < imageData.data.length; i += 4) {
			imageData.data[i+2] += parseInt(blue.value);
		}
		ctx.putImageData(imageData, 0, 0);
	}

	// Zmiana jasności
	brightness.oninput = function() {
		ctx.drawImage(img, 0,0);
		imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
		for (var i = 0; i < imageData.data.length; i+= 4) {
			imageData.data[i] += 255 * (parseInt(brightness.value) / 100);
			imageData.data[i+1] += 255 * (parseInt(brightness.value) / 100);
			imageData.data[i+2] += 255 * (parseInt(brightness.value) / 100);
	  }
	  ctx.putImageData(imageData, 0, 0);
	}

	// Kontrast
	function truncateColor(value) {
	  if (value < 0) {
		value = 0;
	  } else if (value > 255) {
		value = 255;
	  }

	  return value;
	}
	contrast.oninput = function() {
		var factor = (259.0 * (parseInt(contrast.value) + 255.0)) / (255.0 * (259.0 - parseInt(contrast.value)));

		ctx.drawImage(img, 0,0);
		imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
		for (var i = 0; i < imageData.data.length; i+= 4) {
			imageData.data[i] = truncateColor(factor * (imageData.data[i] - 128.0) + 128.0);
			imageData.data[i+1] = truncateColor(factor * (imageData.data[i+1] - 128.0) + 128.0);
			imageData.data[i+2] = truncateColor(factor * (imageData.data[i+2] - 128.0) + 128.0);
	  }
	  ctx.putImageData(imageData, 0, 0);
	}

	// OdwrĂłcenie kolorĂłw

	invert.oninput = function() {
		imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
		for (var i = 0; i < imageData.data.length; i+= 4) {
			imageData.data[i] = imageData.data[i] ^ 255;
			imageData.data[i+1] = imageData.data[i+1] ^ 255;
			imageData.data[i+2] = imageData.data[i+2] ^ 255;
	  }
	  ctx.putImageData(imageData, 0, 0);
	}

	// Skala szarości
	gray.oninput = function() {
		if(gray.checked == false){
			ctx.drawImage(img, 0,0);
			imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
		}
		else{
			imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
			for (var i = 0; i < imageData.data.length; i += 4) {
				var avg = (imageData.data[i] + imageData.data[i + 1] + imageData.data[i + 2]) / 3;
				imageData.data[i]     = avg;
				imageData.data[i + 1] = avg;
				imageData.data[i + 2] = avg;
			}
		}
		ctx.putImageData(imageData, 0, 0);

}
}