cmx_fun.js

document.observe("dom:loaded", function() {
	console.log('DOM loaded');
	// $$('td').invoke('observe', 'click', setColor); 	
});

var smile = {

	0:[0,0,0,0,0,0,0,0,0,0,0,0,0], // Dont use this row
	1:[0,0,0,1,1,1,1,1,0,0,0,0,0],
	2:[0,0,1,0,0,0,0,0,1,0,0,0,0],
	3:[0,1,0,0,1,0,1,0,0,1,0,0,0],
	4:[0,1,0,0,0,0,0,0,0,1,0,0,0],
	5:[0,1,0,1,0,0,0,1,0,1,0,0,0],
	6:[0,1,0,0,1,1,1,0,0,1,0,0,0],
	7:[0,0,1,0,0,0,0,0,1,0,0,0,0],
	8:[0,0,0,1,1,1,1,1,0,0,0,0,0],

};

var frown = {

	0:[0,0,0,0,0,0,0,0,0,0,0,0,0], // Dont use this row
	1:[0,0,0,1,1,1,1,1,0,0,0,0,0],
	2:[0,0,1,0,0,0,0,0,1,0,0,0,0],
	3:[0,1,0,0,1,0,1,0,0,1,0,0,0],
	4:[0,1,0,0,0,0,0,0,0,1,0,0,0],
	5:[0,1,0,0,1,1,1,0,0,1,0,0,0],
	6:[0,1,0,0,1,0,1,0,0,1,0,0,0],
	7:[0,0,1,0,0,0,0,0,1,0,0,0,0],
	8:[0,0,0,1,1,1,1,1,0,0,0,0,0],

};

var blank = {

	0:[0,0,0,0,0,0,0,0,0,0,0,0,0], // Dont use this row
	
	1:[0,0,0,0,0,0,0,0,0,0,0,0,0],
	2:[0,0,0,0,0,0,0,0,0,0,0,0,0],
	3:[0,0,0,0,0,0,0,0,0,0,0,0,0],
	4:[0,0,0,0,0,0,0,0,0,0,0,0,0],
	5:[0,0,0,0,0,0,0,0,0,0,0,0,0],
	6:[0,0,0,0,0,0,0,0,0,0,0,0,0],
	7:[0,0,0,0,0,0,0,0,0,0,0,0,0],
	8:[0,0,0,0,0,0,0,0,0,0,0,0,0],

};

var newShape = {

	0:[0,0,0,0,0,0,0,0,0,0,0,0,0], // Dont use this row
	
	1:[0,0,0,0,0,0,0,0,0,0,0,0,0],
	2:[0,0,0,0,0,0,0,0,0,0,0,0,0],
	3:[0,0,0,0,0,0,0,0,0,0,0,0,0],
	4:[0,0,0,0,0,0,0,0,0,0,0,0,0],
	5:[0,0,0,0,0,0,0,0,0,0,0,0,0],
	6:[0,0,0,0,0,0,0,0,0,0,0,0,0],
	7:[0,0,0,0,0,0,0,0,0,0,0,0,0],
	8:[0,0,0,0,0,0,0,0,0,0,0,0,0],

};

// function setColor() {
	 
// 	this.setStyle({backgroundColor: 'blue'});

// }


function display(shape, detailColor, backgroundColor) {
	
	// Get all the keys from the shape object
	var shapeRows = Object.keys(shape);

	// Get all the tr tags as array and place in variable tr
  	var tr = $$('tr');

  	// Loop as many times as there are rows in the table
  	for (var i = 0; i < tr.length; i++) {
		
		// Get all the td tags from with the current tr and place in variable td
		var td = tr[i].select('td');

		// Convert the shape key that matches the current row into an integer and place in variable shapeRow
		var shapeRow = parseInt(shapeRows[i]);

		// Loop as many times as there are tds in the current row
		for (var ii = 0; ii < td.length; ii++) {

			td[ii].removeClassName('error');
			td[ii].removeClassName('warn');



			// if the shapes poperty value that matches the current row and collumn is equal to 1
			if ( shape[shapeRow][ii] == 1) {
				if (detailColor) {
					td[ii].setStyle({backgroundColor: detailColor, color: backgroundColor});
				} else {
					td[ii].setStyle({backgroundColor: 'white', color: 'black' });
				}
			} else {
				if (backgroundColor) {
					td[ii].setStyle({backgroundColor: backgroundColor, color: detailColor});
				} else {
					td[ii].setStyle({backgroundColor: 'black', color: 'white' });
				}
			}
		}
	}
}