$(document).ready(function() {

	var canvas = document.getElementById('canvas');

    //Find a function to get the Canvas height and width
	var cHeight = $("canvas").height();
	var cWidth = $("canvas").width();

    //Generate Random RBG Values
	function randRGB() {
		var random = Math.floor(Math.random()*257);
		return random;
	}

	//Generate Random Transparency Setting
	function randA() {
		var random = Math.round(Math.random(), -2);
		random = 0.7 //Only Until I figure out the round function
		return random;

	}
	//Build out RGB String
	function buildRgbString() {
		var RGB = "rgba(" + randRGB() + "," + randRGB() + "," + randRGB() + "," + randA() + ")";
		return RGB;
	}

    function pickX() {
		var x = Math.floor(Math.random()*(cWidth+1));
		return x;
	}

	function pickY() {
		var y = Math.floor(Math.random()*(cHeight+1));
		return y;
	}

    //Picks a starting point along the edge of the frame
    function getStartPoint() {
    		var edges = ['top', 'bottom', 'left', 'right'];
			var startPoint = [0,0];
			switch (edges[Math.floor(Math.random()*4)]) {
				case 'top':
					startPoint[0] = pickX();
					startPoint[1] = 0;
					break;
				case 'bottom':
					startPoint[0] = pickX();
					startPoint[1] = cHeight;
					break;
				case 'left':
					startPoint[0] = 0;
					startPoint[1] = pickY();
					break;
				case 'right':
					startPoint[0] = cWidth;
					startPoint[1] = pickY();
					break;
				default:
					alert('No Edge was Choosen');

			} // end switch
			return startPoint;
		} // end getStartPoint()

	function growSingleDirection(currentPoint) {
		//Function grows out a line in a single direction
		// TODO Think about this
		// STUB FUNCTION
		/* The idea is to pick points in the general direction of first
		step so that it appers like 'growth' is occuring*/
		var nextPoint = [0,0];

			nextPoint[0] = currentPoint[0];
			nextPoint[1] = currentPoint[1];

		return nextPoint;
	} // end growSingleDirection()

	//Draw Demo 1
	function draw() {
		var start = getStartPoint();
		var firstStep = [pickX(), pickY()];

		ctx.beginPath();
		ctx.moveTo(start[0],start[1]);
		ctx.lineTo(firstStep[0], firstStep[1]);
		for(var i=0; i<5; i++){
			var next = growSingleDirection(firstStep);
			ctx.lineTo(next[0], next[1]);
		}
		//ctx.closePath();
		ctx.stroke();

		ctx.fillStyle = buildRgbString();
		ctx.fillRect (10,10,100,150);

		return start;
	}//end draw

	//Draw a branching stick
	function draw2() {
		var start = getStartPoint();
		var firstStep = [pickX(), pickY()];

		ctx.beginPath();
		ctx.moveTo(start[0],start[1]);
		ctx.lineTo(firstStep[0], firstStep[1]);
		for(var i=0; i<5; i++){
			ctx.lineTo(pickX(),pickY());
		}
		ctx.stroke();

		ctx.fillStyle = buildRgbString();
		ctx.fillRect (10,10,100,150);

		return start;
	}// end draw 2

	if (canvas && canvas.getContext) {

		var ctx = canvas.getContext('2d');

		 //setInterval(draw, 100);
		 var msg = draw();

		}

	(function() {
		document.getElementById("test").innerHTML= buildRgbString();
		document.getElementById("test").innerHTML+= "<br/>" + buildRgbString();
		document.getElementById("test").innerHTML+= "<br/> Canvas Height: " + cHeight;
		document.getElementById("test").innerHTML+= "<br/> Canvas Width: " + cWidth;
		document.getElementById("test").innerHTML+= "<br/> Start: " + msg;
	})(); // end anyonomous function
}); // end ready