var chess = document.getElementById("chess");
var context = chess.getContext("2d");

var me = true;
var chessBoard = [];
for(var i =0;i<15;i++){
   chessBoard[i] = [];
   for(var j=0;j<15;j++){
       chessBoard[i][j] = 0;
   }
}

context.strokeStyle = "#8f8f8f";

var logo = new Image();
logo.src = "images/logo.jpg";
logo.onload = function () {
   context.drawImage(logo,0,0,450,450);
   drawChessBoard()

}


var drawChessBoard = function () {
   for(var i=0;i<15;i++){
       context.moveTo(15 + i*30,15);
       context.lineTo(15 + i*30,435);
       context.stroke();
       context.moveTo(15,15 + i*30);
       context.lineTo(435,15 + i*30);
       context.stroke();
   }
}

var oneStep = function (i,j,me) {
   context.beginPath();
   context.arc(15 + i*30,15 + j*30,13,0,2*Math.PI);
   context.closePath();
   var gradient = context.createRadialGradient(15 + i*30 + 2,15 + i*30 - 2,13,15 + i*30 + 2,15 + i*30 - 2,0);
   if(me){
       gradient.addColorStop(0,"#0A0A0A");
       gradient.addColorStop(1,"#636766");
   }else {
       gradient.addColorStop(0,"#D1D1D1");
       gradient.addColorStop(1,"#F9F9F9");
   }
   context.fillStyle = gradient;
   context.fill()
}


chess.onclick = function (e) {
   var x = e.offsetX;
   var y = e.offsetY;
   var i = Math.floor(x / 30);
   var j = Math.floor(y / 30);
   if(chessBoard[i][j] == 0){
       oneStep(i,j,me);
       if(me){
           chessBoard[i][j] =1;
       }else {
           chessBoard[i][j] = 2;
       }
       me = !me;
   }

}