/* *************************************************

		GLOBALS - CONSTANTS, FUNCTIONS

***************************************************** */

//  CALLBACKS are at the end of the script

window.onresize=resized;

const buttonDisabledColor = "hsl(0,0%,60%)";
const buttonActiveColor = "hsl(50,80%,75%)";
const buttonClickColor = "hsl(50,80%,95%)";  // SYNCH WITH STYLE SHEET
const imageClickOpacity = .3;
const imageBackgroundColor = "white";
const boxClickColor = "hsl(275,80%,90%)";
const boxErrorColor = "hsl(0,0%,30%)";
const buttonNormalBorder="1px solid hsl(0,0%,50%)";
const rbOffColor="hsl(50,30%,50%)"; // for radio button not selected

// FOR CLASSES Rectangle, ImageRectangle
const edgeFract = .05; // indentation
const heightFract = .5; // ratio of box height to width
const maxWinWidth = 800; // convert to pixels eventually
const minWinWidth = 300;
const topRow = 100; // pixels - space at top of screen

// FOR CLASS SimpleButton
const simpleButtonMaxHeight = 20;
const simpleButtonMinHeight = 10;
const simpleButtonMaxWidth = 70; 
const simpleButtonMinWidth= simpleButtonMaxWidth*(simpleButtonMinHeight/simpleButtonMaxHeight);
const sbMaxFontSize = 17;
const sbMinFontSize = 10;

// FOR IMAGE SELECTORS
const imageHeightFract = .25;

// FOR RADIO BUTTONS
const radioButtonMaxHeight = 25;
const radioButtonMinHeight = 12;
const rbMaxFontSize = 20;
const rbMinFontSize = 10;
const radioButtonMaxWidth = 80;
const radioButtonMinWidth = radioButtonMaxWidth*(radioButtonMinHeight/radioButtonMaxHeight);

// FOR TEXT
txtMinFontSize = 14;
txtMaxFontSize = 35;


// MAX NUMBER OF MEMORIZE STEPS
const maxNumStore = 20;

// STRICT/NONSTRICT
const STRICT = 0
const NONSTRICT = 1;

const TONE = 0;
const CHORD = 1;

/* Returns a random integer between min (included) and max (excluded)
Using Math.round() will give you a non-uniform distribution!
This is stolen directly from the MDN web site. */
function getRandomInt(min, max) {
  	min = Math.ceil(min);
  	max = Math.floor(max);
  	return Math.floor(Math.random() * (max - min)) + min;
}

function interpolate(min, max){
	var factor = (windowWidth()-minWinWidth)/(maxWinWidth-minWinWidth);
	return min + (max - min)*factor;
}


function windowWidth(){
		var w = window.innerWidth;
		if(w > maxWinWidth) w = maxWinWidth;
		return w;
}

function pix(num){ return (num + "px");}



class BoxConfiguration{
	constructor(){
		this.type="initial";
		this.boxColors = ["red","yellow","green","blue"];
		this.soundType = "tone";
		this.faceType = "color";
		this.algorithm = "normal";
	};
};

/* *************************************************

			class RECTANGLE

***************************************************** */

class Rectangle{
	constructor(id, type, rowNum, colNum, color){
		this.id = id;
		this.element = document.getElementById(id);
		this.colNum = colNum; // 0,1,2
		this.rowNum = rowNum; // 0,1,2
		this.color = color; // background color
		this.audio; // instance of class Audio
	};

	width(){
		return ( (windowWidth()/3)*(1 - 2*edgeFract) );
	};

	height(){
		return heightFract*this.width();
	};

	edgeWidth(){
		return windowWidth()*edgeFract;
	};

	setColor(col){
		if(col === undefined)
			this.element.style.backgroundColor = this.color;
		else
			this.element.style.backgroundColor = col;
	};

	xPos(){
		return ( this.edgeWidth() + this.colNum*this.width() );
	};

	yPos(){
		return ( topRow + this.rowNum*this.height() );
	};

	setAudio(audioObj){
		this.audio = audioObj;
	};

	render(){
		this.element.style.top = pix( this.yPos() );
		this.element.style.left = pix( this.xPos() );
		this.element.style.width = pix( this.width() );
		this.element.style.height = pix( this.height() );
		this.setColor();
	};

	setIndicatorForMemorization(){
		this.setColor(boxClickColor);
		this.audio.play();
	};

	undoIndicatorForMemorization(){
		this.setColor(); // sets to usual color
		this.audio.stop();
	};

	setIndicatorForUserClick(){
		this.setColor(boxClickColor);
		this.audio.play();
	};

	undoIndicatorForUserClick(){
		this.setColor();
		this.audio.stop();
	};

	setIndicatorForError(){
		this.setColor(boxErrorColor);
      this.audio.play();
	};

	undoIndicatorForError(){
		this.setColor();
      this.audio.stop();
	};

	cleanup(){
	};

	showImage(){
	};

	log(){
		console.log("id: " + this.id + "  col: " + this.colNum + "  row: " + this.rowNum);
		console.log("window width: " + windowWidth());
		console.log("xPos: " + this.xPos());
		console.log("yPos: " + this.yPos());
		console.log("width: " + this.width());
		console.log("height: " + this.height());
		console.log("color: " + this.color);

	};
}; // end Rectangle


/* *************************************************

			class IMAGE RECTANGLE

***************************************************** */
/*
class ImageRectangle puts an image in the clickable boxes instead of colors.
rect is a Rectangle object - the same box, but configured with a color.
This class configures it with an image.
*/

class ImageRectangle extends Rectangle{
	constructor(rect, imageId, imagePath){
		super(rect.id, rect.type,rect.rowNum, rect.colNum, imageBackgroundColor);
		this.imageId = imageId;
		this.imageElement = document.getElementById(imageId);
		this.imagePath = imagePath;
		this.setAudio(rect.audio);
		
		
	};

	showImage(){
		this.imageElement.style.display="block";
		this.imageElement.style.opacity = 1;
		this.imageElement.src = this.imagePath;
	};

	cleanup(){
		this.imageElement.style.display="none";
		this.imageElement.style.opacity = 1;
	};

	setIndicatorForMemorization(){
		this.imageElement.style.opacity = imageClickOpacity;
		this.audio.play();
	};

	undoIndicatorForMemorization(){
		this.imageElement.style.opacity = 1;
		this.audio.stop();
	};

	setIndicatorForUserClick(){
		this.imageElement.style.opacity = imageClickOpacity;
		this.audio.play();
	};

	undoIndicatorForUserClick(){
		this.imageElement.style.opacity = 1;
		this.audio.stop();
	};

	setIndicatorForError(){
		this.imageElement.style.opacity = imageClickOpacity;
    this.audio.play();
	};

	undoIndicatorForError(){
		this.imageElement.style.opacity = 1;
    this.audio.stop();
	};
}; // end class ImageRectangle


/* *************************************************

			class AUDIO

***************************************************** */
/*
directory should include "/" at end
id is id of audio element
We assume two sounds available, indexed by 0 and 1.
*/
class Audio{
	constructor(id, dir, fileName0, fileName1){
		
		this.dir = dir;
		this.fileNames = [fileName0, fileName1];
		this.playing = 0;
		this.context = new webkitAudioContext();
		this.source;
		this.buffers=[undefined,undefined]; //AudioBuffer fo each source
		this.loadFiles(0);
		this.loadFiles(1);
		/*
		this.id = id;
		this.element = document.getElementById(id);
		this.element.src = dir + fileName0;
		this.element.load();
		*/
		}; // end construtor

	loadFiles(i){
		var what = this;
		
			var url = this.dir + this.fileNames[i];
			console.log(url);
			var request = new XMLHttpRequest();
			request.responseType = 'arraybuffer';
			request.onload = function() {
      	 			what.context.decodeAudioData(request.response, function(buffer)
					{
					console.log(request.response);
					console.log(buffer);
       					what.buffers[i] = buffer; // an AudioBuffer instance
    					}
				);
  			}
 			request.open('GET', url, true);
 			request.send(); 
		
	}; // end loadFiles
		

	play(){
		//this.element.play();
		this.source = this.context.createBufferSource(); // must do this each time
  		this.source.buffer = this.buffers[this.playing];   // tell the source which sound to play

  		this.source.connect(this.context.destination);
   		this.source.start(0);  
	};

	stop(){
		this.source.stop();
	};

	setPlaying(num){
		this.playing = num;
	};



}; // end class Audio


/* *************************************************

			class FACE TYPE SELECTORS

***************************************************** */
/*
class FaceTypeSelectors are for the selectors in the upper left corner.
If imagePath is undefined,this just draws a rectangle with a color..
colNum is not used.
*/
class FaceTypeSelectors extends Rectangle{
	constructor(id, type, rowNum, graphicImageId, color, parentObj, imagePath){
		super(id,type,rowNum, undefined, color);
		this.imagePath = imagePath;
		this.parentObj = parentObj;
		this.graphicImageId = graphicImageId;
		this.imageElement;
		if(graphicImageId !== undefined){
			this.imgElement = document.getElementById(graphicImageId);
			if(imagePath !== undefined) this.imgElement.src=imagePath;
		}
	};

	width(){
		var wid = this.parentObj.width();
		return  (wid* imageHeightFract);
	};

	height(){
		return this.parentObj.height()*imageHeightFract;
	};

	edge(){
		return 0;
	};

	xPos(){
		return ( (this.parentObj.width() - this.width())/2 );
	};

	yPos(){
		var ht0 = 3*this.height();
		var pht = this.parentObj.height();
		var tp = Math.floor((pht - ht0)/4);
		if(tp < 0) tp=0;
		return tp + this.rowNum*(tp + this.height());
	};


};// end class FaceTypeSelectors

/* *************************************************

			class SIMPLE BUTTON

***************************************************** */

/*
class SimpleButton is for the orange buttons in the lower right corner.
*/
class SimpleButton{
	constructor(id, rowNum, parent){
		this.id = id;
		this.parent = parent; // an instance of Rectangle
		this.element = document.getElementById(id);
		this.rowNum = rowNum; //0,1,2
		this.disabled = false;
		//this.element.addEventListener("mouseenter",this.mouseEnter);
		//this.element.addEventListener("mouseleave", this.mouseLeave);
		this.element.onmouseenter = this.mouseEnter.bind(this);
		this.element.onmouseleave = this.mouseLeave.bind(this);
		this.element.onmousedown = this.mouseDown.bind(this);
		this.element.onmouseup = this.mouseUp.bind(this);
			
		console.log("done construct");
/*
color: red;
	cursor: pointer;
	box-sizing: content-box;
	border: 1px solid red;
*/
	};

	width(){
		return interpolate(simpleButtonMinWidth, simpleButtonMaxWidth);
	}

	height(){
		return interpolate(simpleButtonMinHeight, simpleButtonMaxHeight);
	};

	fontSize(){
		return interpolate(sbMinFontSize, sbMaxFontSize);
	};

	xPos(){
		return (this.parent.width() - this.width())/2;
	}

	yPos(){
		var ht0 = this.height();
		var tp = Math.floor( (this.parent.height() - 3*ht0 )/4 );
		if(tp < 0) tp = 0;
		return (tp + this.rowNum*(ht0+tp) );

	};

	render(){
		this.element.style.top = pix( this.yPos() );
		this.element.style.left = pix( this.xPos() );
		this.element.style.width = pix( this.width() );
		this.element.style.height = pix( this.height() );
		this.element.style.fontSize = pix( this.fontSize() );
		var col = buttonActiveColor;
		if(this.disabled) col = buttonDisabledColor;
		this.element.style.backgroundColor = col;
	};

	disable(){
		this.disabled=true;
		this.element.style.backgroundColor = buttonDisabledColor;
	}

	enable(){
		this.disabled=false;
		//this.element.style.backgroundColor = buttonActiveColor;
     this.mouseLeave();
	};

	mouseEnter(){
		if(this.disabled) return;
		this.element.style.color = "red";
		this.element.style.border="1px solid red";
		this.element.style.cursor = "pointer";
		
	};

	mouseLeave(){
		if(this.disabled) return;
		this.element.style.backgroundColor = buttonActiveColor;
		this.element.style.color = "black"
		this.element.style.border=buttonNormalBorder;
		this.element.style.cursor = "text";

	};

	mouseDown(){
		if(this.disabled) return;
		this.element.style.backgroundColor = buttonClickColor;
	};

	mouseUp(){
		if(this.disabled) return;
		this.element.style.backgroundColor = buttonActiveColor;
		this.mouseLeave();
	}

	cleanup(){
	};


}; // end class SimpleButton

/* *************************************************

		class RADIO BUTTON CONTROLLER

***************************************************** */

class RadioButtonController{
	constructor(button0, button1){
		this.button0 = button0;
		this.button1 = button1;
		this.buttons= [this.button0, this.button1];
		this.otherButton = [this.button1, this.button0];
		
	};

	clicked(buttonNum){

	};

	

	render(){
		this.button0.render();
		this.button1.render();
	};

	buttonClicked(buttonNum){
		var butn = this.buttons[buttonNum];
		if(butn.on) return undefined;// button was already on

		this.otherButton[buttonNum].turnOff();	
		return butn.turnOn();
	};
		



}; // end class RadioButtonController





/* *************************************************

			class RADIO BUTTON

***************************************************** */

/*
"on" is true or false - is initial state
"id" is the id of the corresponding HTML element.
"num" is 0 or 1
"parentObj" is a Rectangle
"returnVal" is an array which is the value returned from the click
	for buttons 0 and 1 respectively
*/

class RadioButton{
	constructor(rawIdString, num, offColor, onColor, on, parentObj,returnVal){
		this.buttonNumber = num;
		this.rawIdString = rawIdString;
		this.id = rawIdString + num;
		this.element = document.getElementById(this.id);
		this.on = on;
		this.offColor = offColor;
		this.onColor = onColor;
		if(on)
			this.element.style.backgroundColor = this.onColor;
		else
			this.element.style.backgroundColor = this.offColor;
		this.parent = parentObj;
		this.returnVal = returnVal; // keyed by buttonNumber
						// horribly unstructured
						// but good enuff for here
	};

	turnOff(){
		this.element.style.backgroundColor = this.offColor;
		this.on = false;
	};

	width(){
		return interpolate(radioButtonMinWidth, radioButtonMaxWidth);
	};

	height(){
		return interpolate(radioButtonMinHeight, radioButtonMaxHeight);

	};

	fontSize(){
		return interpolate(rbMinFontSize, rbMaxFontSize);
	}

	
	xPos(){
		return (this.parent.width() - this.width())/2;
	};

	yPos(){
		var ht0 = this.height();
		var tp = Math.floor( (this.parent.height() - 2*ht0 )/3 );
		if(tp < 0) tp = 0;
		return (tp + this.buttonNumber*(ht0+tp) );

	};

	render(){
		this.element.style.width = pix( this.width() );
		this.element.style.height = pix( this.height() );
		this.element.style.top = pix( this.yPos() );
		this.element.style.left = pix( this.xPos() );
		this.element.style.fontSize = pix( this.fontSize() );
	};

	cleanup(){
	};

	turnOn(){
		this.on = true;
		this.element.style.backgroundColor = this.onColor;
		return this.returnVal[this.buttonNumber];
	};




}; // end class Radio Button

/* *************************************************

			class SIMPLE TEXT

***************************************************** */


class SimpleText{
	constructor(id, parentObj){
		this.id = id;
		this.element = document.getElementById(id);
		this.parentObj = parentObj;
	};

	fontSize(){
		return interpolate(txtMinFontSize, txtMaxFontSize );
	};

	yPos(){
		return ( this.parentObj.height() - this.fontSize())/2;
	};

	width(){
		return this.parentObj.width();
	};

	render(){
		this.element.style.fontSize = pix( this.fontSize() );
		this.element.style.top = pix( this.yPos() );
		this.element.style.width = pix( this.width() );
		this.element.style.lineHeight = .8;
	};
}; // end class SimpleText


/* *************************************************

			class NUMBER FIELD

***************************************************** */

class NumberField extends SimpleText{
	constructor(id, parentObj){
		super(id,parentObj);
		this.element.textContent = 0;
		this.value = 0;
	};

	render(){
		super.render();
		//this.element.style.lineHeight = .1;
	};

	width(){
		return this.parentObj.parentObj.width();
	};

	yPos(){
		return .73*this.parentObj.parentObj.height();
	};

	fontSize(){
		return interpolate(rbMinFontSize ,rbMaxFontSize);
	};

	setValue(num){
		this.element.textContent = num; 
		this.value = num; // could be text
	};

	getValue(){
		return this.value;
	};


}; // end class NumberField


/* *************************************************

			class GAME BOARD

***************************************************** */

/*
Class GameBoard and the utility classes Rectangle, SimpleButton, etc, all comprise
the VIEW.In general, anything that modifies the "look" of the board goes thruggh
here.
*/
class GameBoard{
	constructor(){
		this.boxes = []; // array of Rectangle instances - the boxes to click
		this.boxesBackup = []; //copy of boxes
		this.controlBoxes = []; // array of Rectangle instances - with buttons, etc
		this.graphicBoxes = []; // if needed 
		this.textureBoxes = [];
		this.adminButtons = []; 
		this.faceTypeSelectors=[];
		this.audios = []; // Audio instances
		this.simpleText; // SimpleText instance
		this.moveNumber; //NumberField instance

		this.faceType;
		this.algorithm;
		this.sound;
		this.admin;
		this.middle;

		this.startButton;
		this.stopButton;
		this.resetButton;

		this.colorSelector;
		this.graphicSelector;
		this.textureSelector;

		this.toneButtonController; // RadioButtonController object
		this.algorithmController;   // ditto
		
	};

	resized(){
		for(let i=0;i<this.boxes.length;i++)this.boxes[i].render();
		for(let i=0;i<this.controlBoxes.length;i++)this.controlBoxes[i].render();
		for(let i=0;i<this.adminButtons.length;i++) this.adminButtons[i].render();
		for(let i=0;i<this.faceTypeSelectors.length;i++) 		
					this.faceTypeSelectors[i].render();
		this.algorithmController.render();
		this.toneButtonController.render();
		this.simpleText.render();
		this.moveNumber.render();
	};

	setup(){ //(id, type, rowNum, colNum, color)
		var col = "hsl(0,0%,72%)";
		this.faceType = new Rectangle("faceType","ctrl",0,0,col);
		this.algorithm = new Rectangle("algorithm", "ctrl", 0,2,col);
		this.sound = new Rectangle("sound", "ctrl", 2,0,col);
		this.admin = new Rectangle("admin", "ctrl", 2,2,col);
		this.middle = new Rectangle("mdl", "ctrl",1,1,col);
		this.controlBoxes = 
			[this.faceType,this.algorithm,this.sound,this.admin,this.middle];

		// constructor(id, rowNum, parent)
		this.startButton = new SimpleButton("start", 0,this.admin);
		this.stopButton = new SimpleButton("stop", 1, this.admin);;
		this.resetButton = new SimpleButton("reset", 2, this.admin);
		this.adminButtons = [this.startButton, this.stopButton, this.resetButton];

		//FaceTypeSelectors extends Rectangle{
		//constructor(id, type, rowNum, graphicImageId, color, parentObj, imagePath)

		this.colorSelector = new FaceTypeSelectors("color","ctrl",
					0,undefined,"purple", this.faceType, undefined);

      var dir = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/946167/";
		this.graphicSelector = new FaceTypeSelectors("graphic","ctrl",
				1,"graphicImage","white",this.faceType,
					dir + "graphicImage1.jpg");

		this.textureSelector = new FaceTypeSelectors("texture", "ctrl",2,
				"textureImage","white",this.faceType,
					dir + "textureImage1.jpg");

		//this.colorSelector.log();
		//this.graphicSelector.log();
		this.faceTypeSelectors=[this.colorSelector, this.graphicSelector,
						this.textureSelector];

		// constructor(rawIdString, num, offColor, onColor, on, parentObj)
		var ret = [NONSTRICT, STRICT];
		var rbt0 = new RadioButton("algorithm", 0, rbOffColor, 
			buttonActiveColor,true, this.algorithm, ret);
		var rbt1 = new RadioButton("algorithm", 1, rbOffColor, 
			buttonActiveColor,false, this.algorithm, ret);

		// constructor(button0, button1
		this.algorithmController = new RadioButtonController(rbt0, rbt1);

		ret = [TONE, CHORD];

		rbt0 = new RadioButton("sound", 0, rbOffColor, 
			buttonActiveColor,true, this.sound, ret);
		rbt1 = new RadioButton("sound", 1, rbOffColor, 
			buttonActiveColor,false, this.sound, ret);
		this.toneButtonController = new RadioButtonController(rbt0,rbt1);

		this.simpleText = new SimpleText("simon", this.middle);
		this.moveNumber = new NumberField("nmbr", this.simpleText);


		
	};

	setupColorBoxes(){
		this.boxes.push( new Rectangle("b0","box",0,1,"red") );
		this.boxes.push( new Rectangle("b1", "box", 1,0,"yellow") );
		this.boxes.push( new Rectangle("b2", "box", 2,1,"green") );
		this.boxes.push( new Rectangle("b3", "box", 1,2,"blue") );

		var audioDir = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/946167/";
		var aud = new Audio("tone0", audioDir, "toneC2.mp3", "chord1.mp3");
		this.boxes[0].setAudio(aud);
		this.audios.push(aud);
		aud = new Audio("tone1", audioDir, "toneG2.mp3", "chord2.mp3");
		this.boxes[1].setAudio(aud);
		this.audios.push(aud);
		aud = new Audio("tone2", audioDir, "toneC3.mp3", "chord3.mp3");
		this.boxes[2].setAudio(aud);
		this.audios.push(aud);
		aud = new Audio("tone3", audioDir, "toneG3.mp3","chord4.mp3");
		this.boxes[3].setAudio(aud);
		this.audios.push(aud);

		this.backupBoxes(); // DO ONCE HERE
	};

	setupGraphicBoxes(){
		
		//constructor(rect, imageId, imagePath)

		this.graphicBoxes = [];
    var dir = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/946167/";
		var gbox = new ImageRectangle(this.boxes[0],"boxImg0",dir+"graphicImage1.jpg");
		this.graphicBoxes.push(gbox);
		gbox = new ImageRectangle(this.boxes[1],"boxImg1",dir + "graphicImage2.jpg");
		this.graphicBoxes.push(gbox);
		gbox = new ImageRectangle(this.boxes[2],"boxImg2",dir + "graphicImage3.jpg");
		this.graphicBoxes.push(gbox);
		gbox = new ImageRectangle(this.boxes[3],"boxImg3",dir +"graphicImage4.jpg");
		this.graphicBoxes.push(gbox);
	};

	setupTextureBoxes(){
		this.textureBoxes = [];
     var dir = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/946167/";
		var gbox = new ImageRectangle(this.boxes[0],"boxImg0",dir +"textureImage1.jpg");
		this.textureBoxes.push(gbox);
		gbox = new ImageRectangle(this.boxes[1],"boxImg1",dir +"textureImage2.jpg");
		this.textureBoxes.push(gbox);
		gbox = new ImageRectangle(this.boxes[2],"boxImg2",dir +"textureImage3.jpg");
		this.textureBoxes.push(gbox);
		gbox = new ImageRectangle(this.boxes[3],"boxImg3",dir +"textureImage4.jpg");
		this.textureBoxes.push(gbox);

	};

	backupBoxes(){
		this.backupBoxes=[];
		for(let i=0;i<this.boxes.length;i++)
			this.backupBoxes.push(this.boxes[i]);
	};

	setIndicatorForMemorization( boxNum){
		this.boxes[boxNum].setIndicatorForMemorization()
	};

	undoIndicatorForMemorization(boxNum){
		this.boxes[boxNum].undoIndicatorForMemorization(); 
	};

	setIndicatorForUserClick(boxNum){
		this.boxes[boxNum].setIndicatorForUserClick();
	};

	undoIndicatorForUserClick(boxNum){
		this.boxes[boxNum].undoIndicatorForUserClick();
	};

	showMemoryError(what){
		var what=this;
		setTimeout( function(){
			for(let i=0;i<=3;i++)what.boxes[i].setIndicatorForError(i);
			setTimeout(function(){
				for(let i=0;i<=3;i++)what.boxes[i].undoIndicatorForError(i);
			},
			500);
		},
		100);

	};

	doGameOver(){
		this.moveNumberValue("GAME OVER");
		//console.log("game over");
	};

	displayImageGraphics(){
		this.boxes=[];
		for(let i=0;i<4;i++){
			this.boxes.push(this.graphicBoxes[i]);
			this.graphicBoxes[i].showImage();
		}
		this.resized();

	};

	displayColors(){
		
		for(let i=0;i<4;i++)this.boxes[i].cleanup();
		this.boxes=[];
		for(let i=0;i<4;i++){
			this.boxes.push(this.backupBoxes[i]);
		}
		this.resized();
	};

	displayTextureGraphics(){
		this.boxes=[];
		for(let i=0;i<4;i++){
			this.boxes.push(this.textureBoxes[i]);
			this.textureBoxes[i].showImage();
		}
		this.resized();

	};

	// return the alorithm selected, or undefined if it is already selected
	algorithmButtonClick(n){
		return this.algorithmController.buttonClicked(n);
	};

	soundButtonClick(n){
		var num = this.toneButtonController.buttonClicked(n);
		// num is TONE, CHORD, which are 0,1;
		for(let i=0;i<this.audios.length;i++){
			this.audios[i].setPlaying(num);
		}
	};

	moveNumberValue(num){
		this.moveNumber.setValue(num);
	};

	getMoveNumberValue(){
		return this.moveNumber.getValue();
	};

	resetColors(){

	};

	
	disableStartButton(){this.startButton.disable();};
	enableStartButton() {this.startButton.enable();}
	disablePauseButton(){this.stopButton.disable();}
	enablePauseButton(){this.stopButton.enable();}
	disableResetButton(){this.resetButton.disable();}
	enableResetButton(){this.resetButton.enable();}

	doSimpleButtons(start, pause, reset){
		start? this.enableStartButton():this.disableStartButton();
		pause? this.enablePauseButton():this.disablePauseButton();
		reset? this.enableResetButton():this.disableResetButton();
	};
		


	isStartButtonDisabled(){return this.startButton.disabled;};
	isPauseButtonDisabled(){return this.stopButton.disabled;};
	isResetButtonDisabled(){return this.resetButton.disabled;};
		
	

	log(){
		for(let i=0;i<this.boxes.length;i++) this.boxes[i].log();
		for(let i=0;i<this.controlBoxes.length;i++) this.controlBoxes[i].log();
	};

}; // end class GameBoard


/* *************************************************

			class BOX PATTERN

***************************************************** */


/* class BoxPattern holds the pattern of clicks to be remembered
memorizeMoveNum is the number of moves by the player on the current
turn.
*/
class BoxPattern{
	constructor(){
		this.arr = [];
		for(let i=0;i<maxNumStore;i++)
			this.arr.push(getRandomInt(0,4));
		this.memorizeMoveNum = 1;
	};

	getBox(indx){
		if( (indx < 0)||(indx >= maxNumStore))return undefined;
		return this.arr[indx];
	};

	getMoveNum(){return this.memorizeMoveNum;};

	incrMoveNum(){this.memorizeMoveNum++;};

	// allows to use same pattern, from beginning- for strict mode
	startAgain(){this.memorizeMoveNum = 1;}

}; // end BoxPattern
		
/* *************************************************

			class CONTROLLER

***************************************************** */

/*
The control of the game itself is in four functions: 
		schedule(), runGame(), runGame1(), continueGame(). 
DO NOT MESS WITH THESE UNLESS YOU REALLY KNOW WHAT YOU ARE
DOING AS THE TIMING CAN GET REALLY GET FOO-BAR'D.
*/

class Controller{
	constructor(){
		this.pattern = new BoxPattern(); // sequence of moves to be remembered
		this.allowBoxClick = false; // flag to disable clicks on boxes
		this.playerMoveNum = undefined;// when player is remembering, this keeps
						// track of the number of clicks
						// not same as pattern.memorizeMovNum
		this.isStrict = false;		// strict MODE (not a state)
		this.state = "begin";		/* states are:
						begin, playing, paused, resetting.
						States managed in method schedule(). */
		this.noActions = false;	//  If true, NO button works.
	};

	schedule(action){
		// game loaded
		// in call board.doSimpleButtons(s,p,r), s is for start, p is for pause, r is for
		// reset. If true, corresponding button is enabled. If false, corresponding
		// button is disabled.

		const what = this;
		
		if( (action == "start") && (this.board.isStartButtonDisabled()) ) return;
		if( (action =="pause") && (this.board.isPauseButtonDisabled()) )return;
		if( (action == "reset") && (this.board.isResetButtonDisabled()) ) return;
		

		// BEGIN
		if( (this.state == "begin") && (action == "go") ){
			this.setup();
			this.board.resized();
			this.board.doSimpleButtons(true,false,false);
			this.board.moveNumberValue("'start' to begin");
			return;
		}

		// start button clicked
		if( (this.state == "begin") && (action == "start")){
			this.board.doSimpleButtons(false, true, true);
			this.resetGame();
			this.pattern = new BoxPattern();
			this.state = "playing";
			this.runGame();
			return;
		}
		
		if(this.state == "begin") return;

		
		// PLAYING
		if( (this.state == "playing") && (action == "error") ){
			var val = this.board.getMoveNumberValue();
			this.board.moveNumberValue("try again");
			this.board.showMemoryError(this); // 600 ms delay
			this.board.doSimpleButtons(false,false,false);		
			setTimeout(function(){
				if(this.state=="resetting") return;
				what.allowBoxClick = false;
				what.playerMoveNum = undefined;
				if(what.isStrict) {
					what.pattern.startAgain();
					what.board.moveNumberValue(1);
				}else{
					what.board.moveNumberValue(val);
				}
				// state is still "playing"
				what.board.doSimpleButtons(false,true,true);
				what.runGame1(0, what);
			},
			1500);
			return;
		}

		if( (this.state == "playing") && (action == "reset") ){
			this.state="resetting";
			what.board.moveNumberValue("****RESETTING****");
			this.board.doSimpleButtons(false,false,false);
			this.noActions = true;
			setTimeout(function(){
				what.resetGame();
				what.pattern = new BoxPattern();
				what.state = "begin";
				what.board.resized();
				what.board.doSimpleButtons(true,false,false);
				what.noActions = false;
				what.board.moveNumberValue("'start' to begin");
				return;
			},
			2000);
		return;
		}

		if( (this.state=="playing") && (action == "pause") ){
			this.state = "paused";
			this.board.doSimpleButtons(true, false, true);
			this.allowBoxClick=false;
			return;
		}

		if( (this.state ==  "playing") && (action == "gameOver") ){
			console.log("sched game over");
			this.board.doSimpleButtons(false,false,false);
			this.board.doGameOver();
			this.noActions = true;
			setTimeout(function(){
				what.board.doSimpleButtons(true,false,false);
				what.board.moveNumberValue("'start' to begin");
				what.noActions = false;
				what.board.doSimpleButtons(true,false,false);
			},
			1500);
			this.state="begin";
			this.allowBoxClick = false;
			this.playerMoveNum = undefined;
			this.board.resized();
			this.pattern = new BoxPattern();
			return;
		}	


		if(this.state == "playing") return;

		//PAUSED
		if( (this.state == "paused" )&& (action == "start") ){
			this.board.doSimpleButtons(false, true,true);
			this.board.resized();
			this.state = "playing";
			this.allowBoxClick = false;
			this.playerMoveNum = undefined;
			return this.runGame1(0, this);
		}

		if( (this.state=="paused") && (action == "reset") ){
			this.board.doSimpleButtons(false,false,false);
			what.board.moveNumberValue("****RESETTING****");
			this.noActions = true;
			this.board.resized();
			this.state = "begin";
			this.resetGame();
			this.pattern = new BoxPattern();
			setTimeout(function(){
				what.board.doSimpleButtons(true,false,false);
				what.noActions = false;
				what.board.moveNumberValue("'start' to begin");
			},
			1000);
			return;
		}

		if(this.state == "paused" ) return;

		// RESETTING
		if(this.state == "resetting") return;

	}; // end schedule()

	resetGame(){
		this.allowBoxClick = false;
		this.playerMoveNum = undefined;
		this.board.moveNumberValue(1);
		this.board.resetColors();
	};

	// this is called only when "start" button is pushed.
	runGame(){
		const what = this;
		// after this next function, wait for click from player
		setTimeout(function(){
			what.runGame1(0, what);
		},
		500);
	};

	/* This generates the sequence to be remembered. The quantity "i+1" is
	length of the pattern generated. This is called with i=0,1,2,....
	The variable "what" is this controller - used because "this" does not
	work correctly in nested methods.
	*/
	runGame1(i, what){
		if(what.state == "paused") return;
		if(what.state=="resetting") return;
		var boxNum = what.pattern.getBox(i);
		what.board.setIndicatorForMemorization( boxNum);
		setTimeout(function(){
			what.board.undoIndicatorForMemorization(boxNum);
			if(this.state=="resetting") return;
			i++;// this is 1 for 1st move, 2 for 2nd, etc
			if(i < what.pattern.getMoveNum() ){
				setTimeout(function(){what.runGame1(i, what);},
				700);
			}else{
				// now the player must repeat the pattern
				what.playerMoveNum = 0;
				what.allowBoxClick = true;
			}
		}, 500);
	};

	/*user is repeating the sequence - he clicks on box n. 
	*/
	continueGame(n){
		if(this.state == "paused") return; 
		if(this.state=="resetting") return;
		this.allowBoxClick = false; // disable clicks until this method and timeout
					    //   are  finished
		const what = this;
		if(n != this.pattern.getBox(this.playerMoveNum)) {
			return this.schedule("error");	
		}
		if(this.state == "paused") return; 

		this.board.setIndicatorForUserClick(n);
		
		setTimeout(function(){
			if(what.state=="resetting")return;
			what.board.undoIndicatorForUserClick(n);
			what.playerMoveNum++;
			what.allowBoxClick = true;
			if(what.playerMoveNum >= what.pattern.getMoveNum() ){
				setTimeout(function(){	
					if(what.state=="resetting")return;
					what.allowBoxClick = false;
					what.playerMoveNum = undefined;
					what.pattern.incrMoveNum();
					what.board.moveNumberValue( what.pattern.getMoveNum() );
					if(what.pattern.getMoveNum() > maxNumStore){
						if(what.state=="resetting")return;
						return what.schedule("gameOver");
					}
					what.runGame1(0, what);
				},
				800);
			}// if
		},
		600);
	};

	setup(){
		this.board = new GameBoard(); 
		this.board.setup();
		this.board.setupColorBoxes();
		this.board.setupGraphicBoxes();
		this.board.setupTextureBoxes();
		this.state = "begin";
		this.schedule();
	};


	displayImageGraphics(){
		this.board.displayImageGraphics();
		//this.schedule("reset");
	};

	displayColors(){
		this.board.displayColors();
		//this.schedule("reset");
	};

	displayTextureGraphics(){
		this.board.displayTextureGraphics();
		//this.schedule("reset");
	};

	
	algorithmButtonClick(n){
		var algChosen = this.board.algorithmButtonClick(n);
		if(algChosen === undefined) return;
		this.changeAlgorithmTo(algChosen);
	};

	changeAlgorithmTo(algChosen){
		console.log("algorithm");
		if(algChosen === NONSTRICT){
			this.isStrict = false;
		}else{
			this.isStrict = true;
		}
		this.schedule("reset");

	};

	soundButtonClick(n){
		this.board.soundButtonClick(n);
	};

	resized(){
		this.board.resized();
	};
};

/* *************************************************

			CALLBACKS

***************************************************** */
		
const control = new Controller();

// this is called by window on resizing
function resized(){
	control.resized();
}

function go(){
	control.schedule("go");
}

function adminStart(){
	control.schedule("start");
	
}

function adminPause(){
	control.schedule("pause"); 
}

function adminReset(){
	control.schedule("reset")
}

function boxClick(n){
	if(control.noActions) return;
	if(! control.allowBoxClick) return;
	control.continueGame(Number(n));

}

function imageColor(){
	if(control.noActions) return;
	control.displayColors();

}

function imageGraphic(){
	if(control.noActions) return;
	control.displayImageGraphics();

}

function imageTexture(){
	if(control.noActions) return;
	control.displayTextureGraphics();

}

function algorithmButtonClick(n){
	if(control.noActions) return;
	control.algorithmButtonClick(Number(n));
}

function soundButtonClick(n){
	if(control.noActions) return;
	control.soundButtonClick(Number(n));
};

function mouseEnter(){
	console.log("mouse enter function");
}