canvas = document.getElementById('gameCanvas');
ctx = canvas.getContext('2d');


var canvas;
var ctx;
var paddleX = canvas.width/2;
const PADDLE_WIDTH = 100;
var ballX = canvas.width/2;
var ballY = canvas.height/2;
var ballSpeedX = 4;
var ballSpeedY = 4;
const BALL_RADIUS = 10;
const BRICK_WIDTH = 100;
const BRICK_HEIGHT = 15;
var gameRunning = 0;

window.onload=function(){


	blocksLogic();
	setInterval(update,1000/60);
	gameRunning = 1;
}
function update(){
	draw();
	move();
	blocksLogic();

}
function draw(){
	//clear canvas
	colorRect(0,0,canvas.width,canvas.height,'black');
	//draw paddle
	colorRect(paddleX - (PADDLE_WIDTH/2), 400, PADDLE_WIDTH, 10, 'white' );
	//draw ball
	colorCircle(ballX, ballY, BALL_RADIUS, 'white');
	//draw blocks
	drawBlocks();
}
function move(){
	ballX += ballSpeedX;
	ballY += ballSpeedY;
	if(ballY > canvas.height + BALL_RADIUS){
		reset();
	}
	if(ballX > canvas.width - BALL_RADIUS){
		ballSpeedX = -ballSpeedX;
	}
	if(ballX < 0 + BALL_RADIUS){
		ballSpeedX = -ballSpeedX;
	}
	if(ballY < 0 + BALL_RADIUS){
		ballSpeedY = -ballSpeedY;
	}
	if (ballX <= paddleX + PADDLE_WIDTH && ballY == 400 - BALL_RADIUS && ballX >= paddleX -PADDLE_WIDTH && ballX < paddleX + PADDLE_WIDTH - 40){

		ballSpeedY = -ballSpeedY;
	}
	ai1();

}
function colorRect(leftX, topY, width, height, drawColor){
	ctx.fillStyle = drawColor;
	ctx.fillRect(leftX, topY, width, height);
}
function colorCircle(centerX, centerY, radius, drawColor){
	ctx.fillStyle = drawColor;
	ctx.beginPath();
	ctx.arc(centerX, centerY, radius ,0,Math.PI*2, true);
	ctx.fill();
}
function reset(){
	ballSpeedX = -ballSpeedX;
	ballSpeedY = -ballSpeedY;
	ballX = canvas.width/2;
	ballY = canvas.height/2;
	paddleX = canvas.width/2;
}
function ai1(){
	if(paddleX != 100 || paddleX - PADDLE_WIDTH != canvas.width){
		if(ballX > paddleX + PADDLE_WIDTH/2){
			paddleX +=4;
		} else if(ballX < paddleX){
			paddleX -=4;
		}

	}
}
function drawBlocks(){
	var storedX;
	var storedY;
	for(var x= 0; x < 7; x++){
		for(var y = 0; y < 7; y++){
			colorRect(x*105 + 34, y*25 + 10, BRICK_WIDTH, BRICK_HEIGHT, 'blue');
			storedX = x;
			storedY = y;
		}

	}

}
function blocksLogic(){

	if(gameRunning == 0){
		var blocks = new Array(7);
		for(var i=0; i <7; i++){
			blocks[i] = new Array(7);
		}
		for(var x=0; x < 7; x++){
			for(var y=0; y < 7; y++){
				blocks[x][y] = false;
				console.log(blocks[x][y]);
			}
		}
	}
	console.log("gamerunning function ran");
	// COLLISION!!!!!!!
	for(var brickX = 0; x < 7; x++){
		console.log("for x has been run!");
		for( var brickY = 0; y < 7; y++){
				console.log("for y has been run!");
				var tempBrickX = brickX * 105 + 34;
				var tempBrickY = brickY * 25 - 10;
				//top collision
			if(ballY >= tempBrickX && ballX >= tempBrickX && ballX <= tempBrickX + BRICK_WIDTH){
				console.log("The top of this block has been hit!");
				ballSpeedX = -ballSpeedX;
				ballSpeedY = -ballSpeedY;
			}
				//bottom collision
			if(ballY <= tempBrickY + BRICK_HEIGHT && ballX >= tempBrickX  && ballX >= tempBrickX){
				console.log("The bottom of this brick has been hit!");
				ballSpeedX = -ballSpeedX;
				ballSpeedY = -ballSpeedY;
			}
		}
	}



}