$(document).ready(test);

function test() {
	var papers = $('.paper');

	papers.click(choose);

	papers.each(function() {
		draw($(this));
	});
}

function draw(paper, probability) {
	probability = (probability == null) ? 1 : probability;
	var width = paper.width();
	var height = paper.height();

	var context = paper[0].getContext('2d');
	context.lineWidth = 1;
	context.strokeStyle = '#f00';

	var valueR = Math.round(Math.random() * 255);
	var valueG = Math.round(Math.random() * 255);
	var valueB = Math.round(Math.random() * 255);
	for (var y = 0; y < height; y++) {
		for (var x = 0; x < width; x++) {
			var doDraw = (probability == 1 || Math.random() < probability);
			if (doDraw) {
				valueR = Math.abs(((valueR + Math.round(Math.random() * 20) - 10) % 510) - 255);
				valueG = Math.abs(((valueG + Math.round(Math.random() * 20) - 10) % 510) - 255);
				valueB = Math.abs(((valueB + Math.round(Math.random() * 20) - 10) % 510) - 255);
				context.fillStyle = 'rgb(' + valueR + ', ' + valueG + ', ' + valueB + ')';
				context.fillRect(x, y, 1, 1);
			}
		}
	}
}

function choose() {
	var chosenPaper = $(this);
	var papers = $('.paper');
	papers.each(function() {
		var paper = $(this);
		if (paper[0] != chosenPaper[0]) {
			var context = paper[0].getContext('2d');
			context.drawImage(chosenPaper[0], 0, 0);
			draw(paper, 0.05);
		}
	});
}