//Histogram obrazu
//(c) 2011 by Tomasz Lubinski
//www.algorytm.org

/* Data of the image */
var imageData;
var r, g, b;

/* calculate histogram */
function histogram()
{
	// read the width and height of the canvas
	var canvas = document.getElementById("canvas");
	var width = canvas.width;
	var height = canvas.height;
	
	// arrays with results
	var r = new Array(255);
	var g = new Array(255);
	var b = new Array(255);
	for (var i=0; i<256; i++)
	{
		r[i] = 0;
		g[i] = 0;
		b[i] = 0;
	}
	
	// calculate histogram
	for (var i=0; i<height; i++)
	{
		for (var j=0; j<width; j++)
		{
			index = (i*width+j)*4;
			r[imageData.data[index+0]]++;
			g[imageData.data[index+1]]++;
			b[imageData.data[index+2]]++;
		}
	}

	//find max value	
	var maxValue = 0;
	for (var i=0; i<256; i++)
	{
		if (maxValue < r[i]) maxValue = r[i];
		if (maxValue < g[i]) maxValue = g[i];
		if (maxValue < b[i]) maxValue = b[i];
	}

	// show histogram	
	var histogramCanvas = document.getElementById("histogram_canvas");
	// clear previous
	histogramCanvas.width = histogramCanvas.width;
	var histogramCtx = histogramCanvas.getContext("2d");
	// draw texts
	histogramCtx.font = "10pt Arial";
	histogramCtx.fillStyle = "black";
	histogramCtx.textBaseline = "top";
	histogramCtx.textAlign = "center";
	histogramCtx.fillText("Histogram", 140, 10);
	histogramCtx.font = "8pt Arial";
	histogramCtx.fillText("0", 8, 120);
	histogramCtx.fillText(maxValue, 8, 20);
	histogramCtx.fillText("0", 25, 160);
	histogramCtx.fillText("255", 265, 160);
	// draw vertical arrow
	histogramCtx.moveTo(20, 150);
	histogramCtx.lineTo(20, 0);
	histogramCtx.lineTo(17, 5);
	histogramCtx.lineTo(20, 0);
	histogramCtx.lineTo(23, 5);
	histogramCtx.stroke();
	histogramCtx.moveTo(20, 150);	
	// draw horizontal arrow
	histogramCtx.moveTo(20, 150);
	histogramCtx.lineTo(280, 150);
	histogramCtx.lineTo(275, 153);
	histogramCtx.lineTo(280, 150);
	histogramCtx.lineTo(275, 147);
	histogramCtx.stroke();
	// draw r
	histogramCtx.strokeStyle = "rgba(255,0,0,0.33)";
	histogramCtx.beginPath();
	histogramCtx.moveTo(20, 150);
	for (var i=0; i<256; i++)
	{
		histogramCtx.lineTo(20+i, 150-(130.0*r[i]/maxValue));
	}
	histogramCtx.stroke();
	// draw g
	histogramCtx.strokeStyle = "rgba(0,255,0,0.33)";
	histogramCtx.beginPath();
	histogramCtx.moveTo(20, 150);
	for (var i=0; i<256; i++)
	{
		histogramCtx.lineTo(20+i, 150-(130.0*g[i]/maxValue));
	}
	histogramCtx.stroke();
	// draw b
	histogramCtx.strokeStyle = "rgba(0,0,255,0.33)";
	histogramCtx.beginPath();
	histogramCtx.moveTo(20, 150);
	for (var i=0; i<256; i++)
	{
		histogramCtx.lineTo(20+i, 150-(130.0*b[i]/maxValue));
	}
	histogramCtx.stroke();		
}

/* load image pointed by param_file to canvas */
function loadImage(imgSrc) 
{
	var canvas = document.getElementById("canvas");
	var ctx = canvas.getContext("2d");
	
	// add file:// if user specified local path
	if (imgSrc.indexOf("//") == -1 && imgSrc.indexOf(".") != 0) 
	{
		imgSrc = "file:///" + imgSrc;
	}
	
	// load file into canvas
	var img = new Image();
  	img.onload = function(){
		var width = img.width;
		var height = img.height;
 		canvas.width = width;
  		canvas.height = height;
    		ctx.drawImage(img,0,0);
		// replace transparent with white
		try 
		{
    			imageData = ctx.getImageData(0, 0, width, height);
  		} catch(e) 
  		{
  			netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
  			imageData = ctx.getImageData(0, 0, width, height);
  		}
		for (var i=0; i<height; i++)
		{
			for (var j=0; j<width; j++)
			{
				index = (i*width+j)*4;
				if (imageData.data[index+3] == 0)
				{
					imageData.data[index+3] = 255;
					imageData.data[index+0] = 255;
					imageData.data[index+1] = 255;
					imageData.data[index+2] = 255;
				}
			}
		}
		
		// calculate histogram
  		histogram();
  	}
  	img.src = imgSrc;
}