$(document).ready(function() {
	
	//Initialize
	
	//Add classes to cells (matrix-cell-1 through matrix-cell-900)
	
	var count = 1;
	var group = 1;
	var groupPos = 1;
	var col = 1;
	var row = 0;
	var colMult = 1;
	var rowMult = 0;
	
	$('.matrix-cell').each(function() { // I should have planned this out better.   The cells are organized within divs in the html, so it's hard to get X,Y coords
									
		// figure column
		groupMod = group % 6;
		if (groupMod == 0) { groupMod = 6; } // zero is useless here
		colMult = 5 * (groupMod)
		posMod = groupPos % 5;
		if (posMod == 0) { posMod = 5; } // zero is useless here
		var realCol = (posMod + colMult) - 5;
		
		// figure row
		var realRow = row + ( 5 * rowMult );
		
		// assign group, group position, row and column to rel attribute
		$(this).empty().attr('id',realCol + '-' + realRow); //.attr('rel',group + ',' + groupPos + ',' + realRow + ',' + realCol);
		
		count++;
		groupPos++
		col++;
		if (groupPos == 26) { groupPos = 1; group++; row = 0; }
		if ((group % 6) == 1) { colMult = 1; }
		if (col == 6) { col = 1; row++; }
		if (((group % 6) == 1) && (groupPos == 1)) { rowMult++; }
	});
	
	//Clear out tautologous groups
	
	var count = 1;
	var check = 1;
	
	$('.matrix-group').each(function() {
		if (count == check) {
			$(this).empty();
			check = check + 7;
		}
		count++;
	});
	
	//Create interactivity
	
	$('.matrix-cell').click(function() {
		var contents = $(this).html();
		var index = $(this).attr('id');
		//get pos of comma
		var comma = index.indexOf('-');
		var indexX = index.substring(0,comma);
		comma++;
		var indexY = index.substring(comma);
		var mirrorTile = indexY + '-' + indexX;
		if (contents == 'X' || contents == 'O') {
			$(this).empty().removeClass('redBG');
			$('#'+mirrorTile).empty().removeClass('redBG');
			//$('.matrix-cell[rel='+mirrorTile+']').empty();
		} else {
			$(this).html('X');
			$('#'+mirrorTile).html('X');
			//$('.matrix-cell[rel='+mirrorTile+']').html('X');
		}
		
	}).hover(function() {
		if (!($(this).hasClass('redBG'))) { $(this).css({backgroundColor: '#333'}); }
	}, function() {
		if (!($(this).hasClass('redBG'))) { $(this).css({backgroundColor: 'transparent'}); }
	
	}).dblclick(function() {
		var contents = $(this).html();
		var index = $(this).attr('id');
		//get pos of comma
		var comma = index.indexOf('-');
		var indexX = index.substring(0,comma);
		comma++;
		var indexY = index.substring(comma);
		var mirrorTile = indexY + '-' + indexX;
		$(this).html('O').addClass('redBG').css({backgroundColor: '#400'});
		$('#'+mirrorTile).html('O').addClass('redBG');
	});
	
});