//ethrectdrawer.js
var count = 2;
var colors = new Array(
					   "rgb(113, 199, 213)",
					   "rgb(217,  60, 143)",
					   "rgb(121, 191,  38)",
					   "rgb(134,  51, 142)",
					   "rgb( 45, 145,  58)",
					   "rgb(232, 203,  37)",
					   "rgb(254, 250, 252)",
					   "rgb( 53, 140, 205)"
					   );
var validVals = new Array(
					   1,2,3,4,5,6,10,12,15,20,25,30,50,60,75,100,300,-1
					   );

function draw(){
	drawColorTiles(validVals[count]);
}

function getColor(){
	var randnum = Math.floor( Math.random() * colors.length );
	return colors[randnum];
}

function drawRect(x,y,w){
	var canvas = document.getElementById('canvastest');  
	if (canvas.getContext){  
	  var ctx = canvas.getContext('2d');  
	  // drawing code here
	  ctx.fillStyle = getColor();
	  ctx.fillRect(x,y,w,w);
	} else {  
	  // canvas-unsupported code here  
	}  
}

function drawRectMatrix( row, col, len )
{
	var canvasSize = 300; // should be static value.
	var cellSize = Math.floor(canvasSize / len);
	var yPos = row * cellSize;
	var xPos = col * cellSize;
	drawRect( xPos, yPos, cellSize );
}

function drawColorTiles( len )
{
	for( i = 0; i < len; ++i )
	{
		for( j = 0; j < len; ++j )
		{
			drawRectMatrix(i,j,len);
		}
	}
}

function plusVal()
{
	if( count < validVals.length - 1)
	{
		++count;
	}
	else
	{
		count = 0;
	}
	draw();
}

function minusVal()
{
	if(count > 0)
	{
		--count;
	}
	else
	{
	}
	draw();
}