Cryptogram v1

HTML

<table>
  <tr><td id="TL">A</td><td id="SC1T">+</td><td id="TM">B</td><td>=</td><td id="TR">C</td></tr>
  <tr><td id="SR1L">&#247;</td><td></td><td id="SR1M">+</td><td></td><td id="SR1R">-</td></tr>
  <tr><td id="ML">D</td><td id="SC1M">+</td><td id="MM">E</td><td>=</td><td id="MR">F</td></tr>
  <tr><td>=</td><td></td><td>=</td><td></td><td>=</td></tr>
  <tr><td id="BL">G</td><td id="SC1B">+</td><td id="BM">H</td><td>=</td><td id="BR">I</td></tr>
</table>


<div id="options">
  <label for="layoutSelect">Layout</label>
  <select id="layoutSelect">
    <option value="layout1" selected>Layout 1</option> 
    <option value="layout2">Layout 2</option>
    <option value="layout3">Layout 3</option>
    <option value="layout4">Layout 4</option>
  </select>

  <input type="checkbox" id="rotateCheckbox" name="rotate" value="Rotate board">
  <label for="rotateCheckbox">Rotate board?</label>
</div>
  

<div id="generator">Generate</div>
<div id="debug"></div>

CSS

td {
//  border:2px solid black;
  width:40px;
  text-align:right;
  }
 
 #generator {
   border:2px solid black;
   background-color:#559955;
   margin: 10px 0 0 80px;
   width:100px;
   text-align:center;
   cursor:pointer;
 }
 
 #debug {
   border:2px solid black;
   background-color:#ccccee;
   margin: 10px 0 0 0;
   width:300px;   
   height:150px;
   white-space:pre-wrap;
 }
 
 #options {
   margin:10px 0 0 0;
 }

JavaScript

$("#generator").click(generate);

function symbols (){
	this.r1l = '';	this.r1m = '';	this.r1r = '';
	this.c1t = '';	this.c1m = '';	this.c1b = '';
  
  this.setRow = function (left, middle, right) { 
		this.r1l = left;	this.r1m = middle;	this.r1r = right;
  }
  this.setColumn = function (top, middle, bottom) { 
		this.c1t = top;	this.c1m = middle;	this.c1b = bottom;
  }
  this.rotate = function(){
		var a = this.r1l,			b = this.r1m,					c = this.r1r;
		this.r1l = this.c1t,	this.r1m = this.c1m,	this.r1r = this.c1b;
    this.c1t = a,					this.c1m = b,					this.c1b = c;
  }
}

function numbers () {
	this.tl = 0;	this.tm = 0;	this.tr = 0;	
	this.ml = 0;	this.mm = 0;	this.mr = 0;	
	this.bl = 0;	this.bm = 0;	this.br = 0;	

  this.rotate = function(){
		var a = this.tm,		b = this.tr,				c = this.mr;
    this.tm = this.ml,	this.tr = this.bl,	this.mr = this.bm;
    this.ml = a,				this.bl = b,				this.bm = c;
  }
}

function board () {
	this.symbols = new symbols();
	this.numbers = new numbers();
  
  this.rotate = function(){
  	this.symbols.rotate();
  	this.numbers.rotate();
  }
  
  this.display = function(){
    $("#SR1L").html(this.symbols.r1l);	$("#SR1M").html(this.symbols.r1m);	$("#SR1R").html(this.symbols.r1r);
    $("#SC1T").html(this.symbols.c1t);	$("#SC1M").html(this.symbols.c1m);	$("#SC1B").html(this.symbols.c1b);
    
    $("#TL").html(this.numbers.tl);			$("#ML").html(this.numbers.ml); 		$("#BL").html(this.numbers.bl);
    $("#TM").html(this.numbers.tm); 			$("#MM").html(this.numbers.mm);	 	$("#BM").html(this.numbers.bm);
    $("#TR").html(this.numbers.tr); 			$("#MR").html(this.numbers.mr);		$("#BR").html(this.numbers.br);  
  }
}

var board = new board();

function generate(){
	var okay = true;
	switch($("#layoutSelect").prop('selectedIndex')){
  case 0: 
  	generateLayout1();
    break;
  case 1: 
  	generateLayout2();
    break;
  case 2: 
  	generateLayout3();
    break;
  case 3: 
  	generateLayout4();
    break;
 default:
  	okay = false;
    break;
...