
//  renderri.js 2021, draws animated waves,  
//  Use with bezri.html,
//  requestAnimationFrame.js, surf3.js and Tile25.png

var	canvas = null  ; //document.getElementById("myCanvas");
var readout = null ; //document.getElementById('readout'); // canvas DOM object  
var	context = null ; //canvas.getContext("2d");
var Surf = null ; 
var spritesheet  ; // = new Image() ;
var lmw = 0 ;  // lead most wave
var wav = null;
var bk = null;
var drMot = false ;
var animating = true ; 
var lastPressed = "null" ;
// window.alert("drMot is " +  String(drMot ));
    var Surf = new surf(
	[
		 [ 300, 330, 380, 380, 380, 410, 450 ]
		,[ 200, 200, 160, 100, 160, 200, 200 ]
		,[ 160, 190, 210, 210, 210, 240, 270 ]
		,[ 200, 200, 160, 100, 160, 200, 200 ]
	//	,[ 20,  50,   80, 80,   80, 110, 140 ]
	//  ,[ 200, 200, 160, 100, 160, 200, 200 ]
	]
);
var instrs =  ["Animated Waves",
               "Start", "Stop",
     "Reverse", "Reverse",
               "button pressed once",
               "e.o.array"   ];

function init(){
	canvas=document.getElementById("myCanvas");
    readout = document.getElementById('readout'); // canvas DOM object  
	context=canvas.getContext("2d");    
	spritesheet = new Image();  // canvas context
    spritesheet.src = 'Tile25.png';
    spritesheet.onload = function(e){
 // context.drawImage(spritesheet); 
	};
	var startButton = document.getElementById('startButton');
	var directionB  = document.getElementById('directionB');
	var glasspane = document.getElementById('glasspane');
	var glassp2   = document.getElementById('glassp2');
	//initStageObjects();
	// Two Colour Wave, horizontal line in mid-wave
	wav = context.createLinearGradient(0, 40,  0, 200 );
	wav.addColorStop(.4, 'rgb(128, 128, 128)'); //Grey    TOP
	wav.addColorStop(.8, 'rgb(220, 219, 219)'); //White    MIDDLE
	wav.addColorStop( 1, 'rgb(7,   125, 61 )'); //Mid Green  BOTTOM

	// Two Colour Background 
	bk = context.createLinearGradient( 240, 50, 240, 180 );
	bk.addColorStop(0, 'rgb(   0, 120, 120 )');  // Light Greenish Blue
	bk.addColorStop(.8,'rgb( 128, 128, 128 )');  // Grey
	bk.addColorStop(1, 'rgb(  0,   80,  80 )');  // Greenish Blue

	startAnimation();
 }   //  init()
  // Radio Buttons
  
  function ltoR(){
	//	alert("In ltoR()"); 
		if(lastPressed !=  "ltoR"){
		animating = true; 
		drMot = true ;
		drawStageObjects();
		lastPressed = "ltoR" ;
		} 
	}
	function mstop(){
	//	alert("In mstop()");
if(lastPressed !=  "stop"){
		animating = false ;
		lastPressed = "stop" ;		
		}
	}
	
	function rtoL(){
	//	alert("In rtoL()");
if(lastPressed !=  "rtoL"){	
	    animating = true; 
		drMot = false ;
		drawStageObjects();
		lastPressed = "rtoL" ;		
		}
	}
 
  
  function startAnimation()
 {
//	 window.alert("waves.length is ", Surf.getWaveCount());
  
	setInterval(drawStageObjects, 10000);   //();
 }
 
function  drawStageObjects() {
	updateStage(); 		 
	var nwaves = Surf.getWaveCount();
	var k = 0  ; 
	var dummy = lmw ;
	//      var dummy = 0 ;
	context.beginPath();
	// j < nwaves, below
	for(var j = 0 ; j < nwaves ; j = j + 1,
		dummy = dummy + 2 ){
		if(dummy > 3 ){
			dummy = 0 ;    
		}  //if 
		k = dummy + 1 ;
	//  for(var h = 0 ; h < 6 ; h += 2	) {
			//  room for another if stmt	
			
		// }  // for(h
		//  drawing wave(s)
		context.moveTo(Surf.getWaves()[dummy][0], Surf.getWaves()[k][0]);
		context.bezierCurveTo(Surf.getWaves()[dummy][1], Surf.getWaves()[k][1],
		Surf.getWaves()[dummy][2], Surf.getWaves()[k][2],
							Surf.getWaves()[dummy][3], Surf.getWaves()[k][3] );
		context.bezierCurveTo(Surf.getWaves()[dummy][4], Surf.getWaves()[k][4],
		Surf.getWaves()[dummy][5], Surf.getWaves()[k][5],
		Surf.getWaves()[dummy][6], Surf.getWaves()[k][6] );                                        
		context.strokeStyle = wav  ;
		context.fillStyle = wav  ;
		context.fill();
			var halfx = Surf.getWaves()[dummy][3]  ;
			var halfy = Surf.getWaves()[k][3] ;
		if(((halfx < 200)&&(drMot))||((halfx > 200)&&(!drMot))){
			halfx +=30 ;
			if(drMot){
				halfx -= 60 ;
			}
			context.drawImage(spritesheet, 12, 12, 40, 40, halfx, halfy, 40, 40	);
			}	
		} // for var j
	// context.closePath();   
	//  drawing background
	context.rect(0,0,canvas.width, canvas.height );
	context.strokeStyle = bk  ;
	context.fillStyle   = bk  ;
	context.fill();
	if (animating){
		window.requestNextAnimationFrame(drawStageObjects);
		}
	// } //  for var j
}  // drawStageObjects

function updateStage() {
	clearCanvas();
	 
	if( animating && !drMot ){		
		Surf.updateStageObjects();
	
		}
	if(animating && drMot ){		
		Surf.updateSO();		
		
	}
}
function clearCanvas() {
	context.clearRect(0,0,canvas.width, canvas.height);
}
//  E.O.P.
 