function unhide(divID, linkID) {
	var item = document.getElementById(divID);
	if (item) {
		item.className=(item.className=='hidden')?'unhidden':'hidden';
		// alert("more?");
		var link = document.getElementById(linkID);
		link.innerHTML = (link.innerHTML=='more...')?'less...':'more...';
	}
}
 
 
//--------------------------------------------------------------

var canvas, ctx;
var perlin;
var width, height;
var xanchor, yanchor, midx, midy, xposnoise, yposnoise;

var xstart, ystart;
var squaresize;

var interval;
var frameCount;

// var mouseMinX, mouseMaxX, mouseMinY, mouseMaxY;


function setup() {
	width = 1005;
	height = 200;
	
	canvas = document.getElementById("scrawl");
	ctx = canvas.getContext("2d");
    document.addEventListener('mousedown', doc_mousedown, false);
	
	xanchor = 750;
	yanchor = 50;
	
	perlin = new SimplexNoise();
	
	xstart = Math.random() * 10.0;
	ystart = Math.random() * 10.0;
	xposnoise = Math.random() * 10.0;
	yposnoise = Math.random() * 10.0;
	
	squaresize = 22;
	
	// draw();
	startAnim();
}

function startAnim() {
	frameCount = 0;
	interval = setInterval(draw, 100);
}

function doc_mousedown(ev) {
	startAnim();
}

function draw() {
	if (frameCount < 50) {
		ctx.fillStyle = "rgba(255, 255, 255, 0.1)";
		ctx.fillRect (0, 0, width, height);
		
		ctx.strokeStyle = "rgba(0, 0, 0, 0.15)";
		ctx.fillStyle = "rgba(255, 255, 255, 0.6)";
		
		xposnoise += 0.02;
		yposnoise += 0.01;
		midx = xanchor + Math.floor(perlin.noise(xposnoise, 0) * 50);
		midy = yanchor + Math.floor(perlin.noise(yposnoise, 0) * 50);
		
		xstart += 0.02;
		ystart += 0.01;
		
		var ynoise = ystart;
		for (var y = -squaresize; y < squaresize; y++) {
			ynoise += 0.02;
			var xnoise = xstart;
			for (var x = -squaresize; x < squaresize; x++) {
				xnoise += 0.02;
				var nFactor = Math.abs(perlin.noise(xnoise, ynoise));
				drawPoint(x, y, nFactor);
			}
		}
		frameCount++;
	} else {
		clearInterval(interval);
	}
}

function drawPoint(ex, why, noiseFactor) {
	
	var x = midx + (ex * noiseFactor * 13);
	var y = midy + (why * noiseFactor * 9);
	var edgeSize = noiseFactor * 26;
	
	ctx.beginPath();
	ctx.arc(x, y, edgeSize, 0, Math.PI*2,true); // x, y, rad, start angle, end angle, anti/clockwise
	ctx.fill();
	
	ctx.beginPath();
	ctx.arc(x, y, edgeSize, 0, Math.PI*2,true); 
	ctx.stroke();
	
}