// Callback function called, when file is "opened"
function handleFileSelect(item) {
	var files = item.files;

	console.log(files);

	for (var i = 0; i < files.length; i++) {
		console.log(files[i], files[i].name, files[i].size, files[i].type);

		// Only process image files.
		if (!files[i].type.match('image.*')) {
			continue;
		}

		var reader = new FileReader();

		// Closure for loading image to memory
		reader.onload = (function(file) {
			return function(evt) {

				var srcImg = new Image();
				srcImg.src = evt.target.result;

				srcImg.onload = function() {
					var srcCanvas = document.getElementById("src");
					var srcContext = srcCanvas.getContext("2d");
					var histCanvas = document.getElementById("histogram");
					var histContext = histCanvas.getContext("2d");

					// Change size of canvas
					srcCanvas.height = srcImg.height;
					srcCanvas.width = srcImg.width;
					histCanvas.width = 256;
					histCanvas.height = 256;

					srcContext.drawImage(srcImg, 0, 0);

					var canvasHeight = srcCanvas.height;
					var canvasWidth = srcCanvas.width;
					var srcImageData = srcContext.getImageData(0, 0, canvasWidth, canvasHeight);

					var histHeight = histCanvas.height;
					var histWidth = histCanvas.width;


					convertImageData(srcImageData, histContext);
				}
			}
		})(files[i]);

		reader.readAsDataURL(files[i]);

		break;
	};
};

function array256(default_value) {
	arr = [];
	for (var i=0; i<256; i++) { arr[i] = default_value; }
  	return arr;
}

function jasArray(red, green, blue) {
	arr = [];

	for (var i=0; i<256; i++) {
	arr[i] = 0.299*red[i] + 0.587*green[i] + 0.114*blue[i];
	}

  	return arr;
}

function histobars(max, vals, color, y, ctx) {
  	ctx.fillStyle = color;

	for(var i = 0; i<vals.length; i++){
		var pct = (vals[i] / max) * 100;
		ctx.fillRect(i, y, 1, -Math.round(pct));
	}
}

// Function for converting raw data of image
function convertImageData(srcImageData, histContext) {
	var srcData = srcImageData.data;
	var ctx = histContext;
	var red, green, blue;

	var redVal = array256(0);
	var greenVal = array256(0);
	var blueVal = array256(0);


	// Go through the image using x,y coordinates
	for (var pixelIndex = 0; pixelIndex < srcData.length; pixelIndex += 4) {
		red   = srcData[pixelIndex + 0];
		green = srcData[pixelIndex + 1];
		blue  = srcData[pixelIndex + 2];
		alpha = srcData[pixelIndex + 3];

		redVal[red]++;
		greenVal[green]++;
		blueVal[blue]++;

		if (pixelIndex < 100) {
			console.log(red, green, blue, alpha);
		}
	}
	var jas = jasArray(redVal, greenVal, blueVal);
	var jasMax = Math.max.apply(null, jas);
	histobars(jasMax, jas, "rgb(0,0,0)", 256, ctx);
};