// Starter World for canvas API (no graphics library)
// 2D rendering 
// getContext("2d");



AB.clockTick       = 20;            // many frames per second, with small moves, looks best  

AB.screenshotStep  = 5;   
  
AB.maxSteps        = 1000;     
	


const SKYCOLOR 	= "#ffffcc";				// this usage will be of color as a string, not as a number 

const MUSIC_BACK  = '/uploads/starter/Defense.Line.mp3' ;



// Warning: caution with making SQUARESIZE a fixed size 
// because this may run on phone with small canvas

var SQUARESIZE;
var MOVESIZE;



function initMusic()
{
	// put music element in one of the spans
	
        var x = "<audio  id=theaudio  src=" + MUSIC_BACK + "   autoplay  loop> </audio>" ;
        $("#user_span1").html( x );
} 

  


function randomfloatAtoB ( A, B )			 
{
 return ( A + ( Math.random() * (B-A) ) );
}

function randomintAtoB ( A, B )			 
{
 return  ( Math.round ( randomfloatAtoB ( A, B ) ) );
}


function randomMove()       // square makes random move of this size
{
    return ( randomintAtoB ( - MOVESIZE , MOVESIZE ) ); 
}


function goodPoint ( x, y )      
// x,y is top LHS point of square
{
    if ( x < 0 ) return false;
    if ( y < 0 ) return false;
    if ( x + SQUARESIZE > threeworld.canvas.width ) return false;
    if ( y + SQUARESIZE > threeworld.canvas.height ) return false;
    return true;
}


 




function World() { 

var x, y;           // current location of square 
 
var dx;             // current move increment per step
var dy;

var img = new Image();
var step = 1;



function draw() 
{
	var ctx = threeworld.getContext ( "2d" );
	
	                    
    // clear the whole canvas:
    //      ctx.clearRect( 0, 0, threeworld.canvas.width, threeworld.canvas.height );
 
	// clear the last drawn square: 
    //        ctx.clearRect ( x-1, y-1, SQUARESIZE+1, SQUARESIZE+1 );

// draw entire canvas in background color or else get black background in screenshots:
    ctx.fillStyle = SKYCOLOR;
    ctx.fillRect ( 0, 0, threeworld.canvas.width, threeworld.canvas.height );

    
    if ( ! goodPoint ( x + dx, y + dy ) )       // hit bounds, need to change direction 
    {
     do
     {
         dx = randomMove();
         dy = randomMove();
     }
     while ( ! goodPoint ( x + dx, y + dy ) );
    }
    
    // move the square and draw it 
    x = x + dx;
    y = y + dy;
    
//    	ctx.fillStyle = '#000000';								// set up foreground color
//      ctx.fillRect ( x, y, SQUARESIZE, SQUARESIZE );          // fill with solid color 
    
        ctx.drawImage( img, x, y, SQUARESIZE, SQUARESIZE );     // fill with image 
}


	



this.newRun = function() 
{
    threeworld.init (  SKYCOLOR  ); 

// now that canvas exists:	

 SQUARESIZE  = threeworld.canvas.width / 5;     // square size relative to canvas width 
 MOVESIZE    = SQUARESIZE / 20;                 // small moves per frame, lots of frames per second  
 
 x = threeworld.canvas.width / 2;               // initial position 
 y = threeworld.canvas.height / 2;
 
         dx = randomMove();                     // initial direction 
         dy = randomMove();

    img.src = '/uploads/starter/latin.jpg';		// set up image 

    initMusic();
};



this.nextStep = function()
{
    $("#user_span2").html( "Step: " + step );
	draw();
	step++;
};



this.endRun = function()
{
};

 
 

}