// GLOBAL VARIABLES ================================================
var ROWS = 7;
var COLUMNS = 7;
//==================================================================

//==================MODEL CLASS=====================================
function Model(){
	// Local Variables
	// testest
	var grid = initGrid(ROWS, COLUMNS); // calls with global vars

	// Fields
	this.grid = grid;   

	// Public Methods  

	//--Static Methods

	//--Instance Methods               

	// Private Methods
	function initGrid(rows, columns) {
		var grid = [];
		for (var i = 0; i < rows; i++) {
			var row = [];
			for (var j = 0; j < columns; j++) {
				row.push("h");
			}
			grid.push(row);
		}
		return grid;
	};

	//console.table(grid);  (TESTING)

} // end of class
//==================================================================

//==================CONTROLLER CLASS================================


function Controller(){
	var canvasID = document.getElementById('canvas');
	canvasID.addEventListener("click",nextState,false);
	var view = new View(canvasID);
	//view(canvasID);
	Model();


	function nextState(e){
		var x_Pos = e.clientX;
		var y_Pos = e.clientY;
		var position = normalize(x_Pos,y_Pos);
		console.log(position.x+","+position.y);
	}

	function normalize(x_Pos,y_Pos){
		var canvasSize = canvasID.getBoundingClientRect();
		

		var deltaX = (canvasSize.right-canvasSize.left)/COLUMNS;
		var deltaY = (canvasSize.bottom-canvasSize.top)/ROWS;

		// rel_x and rel_y are the grid coordinates starting from (0,0) bottom left
		var rel_x = Math.floor(((x_Pos - canvasSize.left)/(deltaX)));
		var rel_y = Math.floor(((y_Pos + canvasSize.top)/(deltaY)));
		return {x:rel_x,
			y:rel_y};	
	}

	var letter = prompt("Enter a letter");
	view.addLetter(letter,1, 1);


} // end of Controller class
//==================================================================


//==================VIEW CLASS======================================

function View(canvasID){
	var width =50;  // eventually will be globals
	var height =50;  // designating width of each cell
	
	var ctx = canvasID.getContext('2d');

	// Draws the rectangles
	for(var rows = 0; rows < ROWS; rows++) {
		for (var cols = 0; cols < COLUMNS; cols++) {
			ctx.strokeStyle = "black";
			ctx.fillStyle = "yellow";
			ctx.beginPath();
			ctx.lineWidth = 1;
			ctx.rect(width*rows, height*cols, width, height);
			ctx.closePath();
			ctx.fill();
			ctx.stroke(); 
		}
	}

	this.addLetter = function (letter, row, column) {
		ctx.fillStyle="black";
		ctx.font="25px Georgia";
		ctx.fillText(letter,15*row,35*column);
	};


} // end of View Class



@@ -910,16 +910,37 @@
 ller()%7B%0A
+%09// Static Variables%0A
 %09var can
@@ -987,122 +987,138 @@
 );%0A%09
-canvasID.addEventListener(%22click%22,nextState,false);%0A%09var view = new View(canvasID);%0A%09//view(canvasID);%0A%09Model();%0A%0A
+var view = new View(canvasID);%0A%09var model = new Model();%0A%09canvasID.addEventListener(%22click%22,nextState,false);%0A%09%0A%09// Static Methods
 %0A%09fu
@@ -1270,16 +1270,446 @@
 tion.y);
+%0A%0A%09%09// will be moved to its own function in due time.%0A%09%09// quick and dirty check to see if they entered exactly 1 char%0A%09%09// TODO: check if a--%3Ez%0A%09%09var letter = prompt(%22Enter a letter%22);%0A%09%09console.log(letter.length);%0A%09%09if (letter != %22%22 %7C%7C letter != null) %7B  // cancel returns null%0A%09%09%09if (letter.length == 1) %7B%0A%09%09%09%09view.addLetter(letter,position.x, position.y);%0A%09%09%09%7D else %7B%0A%09%09%09%09window.alert(%22please select a valid letter%22);%0A%09%09%09%7D%0A%09%09%7D
 %0A%09%7D%0A%0A%09fu
@@ -2087,17 +2087,17 @@
 ((y_Pos 
-+
+-
  canvasS
@@ -2143,15 +2143,26 @@
 %0A%09%09%09
+    
 y:rel_y
+%0A%09%09%09   
 %7D;%09%0A
@@ -2170,76 +2170,8 @@
 %7D%0A%0A%09
-var letter = prompt(%22Enter a letter%22);%0A%09view.addLetter(letter,1, 1);
 %0A%0A%0A%7D
@@ -2873,19 +2873,12 @@
 er, 
-row, column
+x, y
 ) %7B%0A
@@ -2955,24 +2955,29 @@
 ter,
+(
 15
-*row,35*column
++(x*50)),35+(y*50)
 );%0A%09
@@ -3005,9 +3005,8 @@
  Class%0A%0A
-%0A

Update script.js