/*
* General overview of all the methods and variables
* var pieces[] - used to store pieces
* var tiles[] - used to store pieces
* var gameBoard - a 2d array used to store the information about the board
*
* function distance() - used to calculate distance between two cells
* function Piece(element, position) - an object - stores all the information about the piece
* INSIDE PIECE: this.makeKing() - make an element a king - simply assigns the picture to it.
* INSIDE PIECE: this.move = function(tile) - removes the checker from the board cell;
*               updates the board, assigns a new cell for that piece;
*               toggles animation and changes the turn
*
*/
//Script is fired when the entire page loads, including its content


/////////////////////////////////////////////////////////////////////



/////////////////////////////////////////////////////////////////////////////////////////////////////////
//Board object - controls logistics of game



//////////////////////////////////////////////////////////////////////////////////////

function gameState(socket){
  this.player1PieceNum = 12;
  this.player2PieceNum = 12;
  this.playerType = null;

  this.getPlayerType = function () {
    return this.playerType;
  };

  this.setPlayerType = function (p) {
    console.assert(typeof p == "string", "%s: Expecting a string, got a %s", arguments.callee.name, typeof p);
    this.playerType = p;
  };

  this.whoWon = function(){
    if (this.player1PieceNum==0){
      return 2;
    }
    if (this.player2PieceNum==0){
      return 1;
    }
    return null;
  }
  //Initial setup of Game Board
  var gameBoard = [
    [  0,  1,  0,  1,  0,  1,  0,  1 ],
    [  1,  0,  1,  0,  1,  0,  1,  0 ],
    [  0,  1,  0,  1,  0,  1,  0,  1 ],
    [  0,  0,  0,  0,  0,  0,  0,  0 ],
    [  0,  0,  0,  0,  0,  0,  0,  0 ],
    [  2,  0,  2,  0,  2,  0,  2,  0 ],
    [  0,  2,  0,  2,  0,  2,  0,  2 ],
    [  2,  0,  2,  0,  2,  0,  2,  0 ]
  ];

  //arrays to store the instances
  var pieces = [];
  var tiles = [];

  //Distance formula
  var dist = function (x1, y1, x2, y2) {
    return Math.sqrt(Math.pow((x1-x2),2)+Math.pow((y1-y2),2));
  }
  function Piece (element, position) {
    //linked DOM element
    this.element = element;
    //positions on gameBoard array in format row, column
    this.position = position;
    //which player's piece is it
    this.player = '';
    //figure out player by piece id
    if(this.element.attr("id") < 12)
      this.player = 1;
    else
      this.player = 2;

    //makes object a king
    this.king = false;
    this.makeKing = function () {
      this.element.css("backgroundImage", "url('king.png')");
      this.king = true;
    }

    //moves the piece
    this.move = function (tile) {
      this.element.removeClass('selected');
      if(!Board.isValidPlacetoMove(tile.position[0], tile.position[1])) return false;
      //make sure piece doesn't go backwards if it's not a king
      if(this.player == 1 && this.king == false) {
        if(tile.position[0] < this.position[0]) return false;
      } else if (this.player == 2 && this.king == false) {
        if(tile.position[0] > this.position[0]) return false;
      }
      //remove the mark from Board.board and put it in the new spot
      Board.board[this.position[0]][this.position[1]] = 0;
      Board.board[tile.position[0]][tile.position[1]] = this.player;
      this.position = [tile.position[0], tile.position[1]];
      //change the css using board's dictionary
      this.element.css('top', Board.dictionary[this.position[0]]);
      this.element.css('left', Board.dictionary[this.position[1]]);
      //if piece reaches the end of the row on opposite side crown it a king (can move all directions)
      if(!this.king && (this.position[0] == 0 || this.position[0] == 7 ))
        this.makeKing();
      Board.changePlayerTurn();
      return true;
    };

    //tests if piece can jump anywhere
    this.canJumpAny = function(){
      if(this.canOpponentJump([this.position[0]+2, this.position[1]+2]) ||
         this.canOpponentJump([this.position[0]+2, this.position[1]-2]) ||
         this.canOpponentJump([this.position[0]-2, this.position[1]+2]) ||
         this.canOpponentJump([this.position[0]-2, this.position[1]-2])) {
        return true;
      } return false;
    };

    //tests if an opponent jump can be made to a specific place
    this.canOpponentJump = function(newPosition) {
      //find what the displacement is
      var dx = newPosition[1] - this.position[1];
      var dy = newPosition[0] - this.position[0];
      //make sure object doesn't go backwards if not a king
      if(this.player == 1 && this.king == false) {
        if(newPosition[0] < this.position[0]) return false;
      } else if (this.player == 2 && this.king == false) {
        if(newPosition[0] > this.position[0]) return false;
      }
      //must be in bounds
      if(newPosition[0] > 7 || newPosition[1] > 7 || newPosition[0] < 0 || newPosition[1] < 0) return false;
      //middle tile where the piece to be conquered sits
      var tileToCheckx = this.position[1] + dx/2;
      var tileToChecky = this.position[0] + dy/2;
      //if there is a piece there and there is no piece in the space after that
      if(!Board.isValidPlacetoMove(tileToChecky, tileToCheckx) && Board.isValidPlacetoMove(newPosition[0], newPosition[1])) {
        //find which object instance is sitting there
        for(pieceIndex in pieces) {
          if(pieces[pieceIndex].position[0] == tileToChecky && pieces[pieceIndex].position[1] == tileToCheckx) {
            if(this.player != pieces[pieceIndex].player) {
              //return the piece sitting there
              return pieces[pieceIndex];
            }
          }
        }
      }
      return false;
    };

    this.opponentJump = function (tile) {
      var pieceToRemove = this.canOpponentJump(tile.position);
      //if there is a piece to be removed, remove it
      if(pieceToRemove) {
        pieces[pieceIndex].remove();
        return true;
      }
      return false;
    };

    this.remove = function () {
      //remove it and delete it from the gameboard
      this.element.css("display", "none");
      if(this.player == 1) {
        $('#player2').append("<div class='capturedPiece'></div>");
        this.player2PieceNum--;
      }
      if(this.player == 2){
        $('#player1').append("<div class='capturedPiece'></div>");
        this.player1PieceNum--;
      }
      Board.board[this.position[0]][this.position[1]] = 0;
      //reset position so it doesn't get picked up by the for loop in the canOpponentJump method
      this.position = [];
    }
  }
  function Tile (element, position) {
    //linked DOM element
    this.element = element;
    //position in gameboard
    this.position = position;
    //if tile is in range from the piece
    this.inRange = function(piece) {
      if(dist(this.position[0], this.position[1], piece.position[0], piece.position[1]) == Math.sqrt(2)) {
        //regular move
        return 'regular';
      } else if(dist(this.position[0], this.position[1], piece.position[0], piece.position[1]) == 2*Math.sqrt(2)) {
        //jump move
        return 'jump';
      }
    };
    }
    let Board = {
      board: gameBoard,
      playerTurn: 1,
      tilesElement: $('div.tiles'),
      //dictionary to convert position in Board.board to the viewport units
      dictionary: ["0vmin", "10vmin", "20vmin", "30vmin", "40vmin", "50vmin", "60vmin", "70vmin", "80vmin", "90vmin"],
      //initialize the 8x8 board
      initialize: function () {
        var countPieces = 0;
        var countTiles = 0;
        for (row in this.board) { //row is the index
          for (column in this.board[row]) { //column is the index
            //whole set of if statements control where the tiles and pieces should be placed on the board
            if(row%2 == 1) {
              if(column%2 == 0) {
                this.tilesElement.append("<div class='tile' id='tile"+countTiles+"' style='top:"+this.dictionary[row]+";left:"+this.dictionary[column]+";'></div>");
                tiles[countTiles] = new Tile($("#tile"+countTiles), [parseInt(row), parseInt(column)]);
                countTiles += 1;
              }
            } else {
              if(column%2 == 1) {
                this.tilesElement.append("<div class='tile' id='tile"+countTiles+"' style='top:"+this.dictionary[row]+";left:"+this.dictionary[column]+";'></div>");
                tiles[countTiles] = new Tile($("#tile"+countTiles), [parseInt(row), parseInt(column)]);
                countTiles += 1;
              }
            }
            if(this.board[row][column] == 1) {
              $('.player1pieces').append("<div class='piece' id='"+countPieces+"' style='top:"+this.dictionary[row]+";left:"+this.dictionary[column]+";'></div>");
              pieces[countPieces] = new Piece($("#"+countPieces), [parseInt(row), parseInt(column)]);
              countPieces += 1;
            } else if(this.board[row][column] == 2) {
              $('.player2pieces').append("<div class='piece' id='"+countPieces+"' style='top:"+this.dictionary[row]+";left:"+this.dictionary[column]+";'></div>");
              pieces[countPieces] = new Piece($("#"+countPieces), [parseInt(row), parseInt(column)]);
              countPieces += 1;
            }
          }
        }
      },
      //check if the location has an object
      isValidPlacetoMove: function (row, column) {
        console.log(row); console.log(column); console.log(this.board);
        if(this.board[row][column] == 0) {
          return true;
        } return false;
      },
      //change the active player - also changes div.turn's CSS
      changePlayerTurn: function () {
        if(this.playerTurn == 1) {
          this.playerTurn = 2;
          $('.turn').css("background", "linear-gradient(to right, transparent 50%, #BEEE62 50%)");
          return;
        }
        if(this.playerTurn == 2) {
          this.playerTurn = 1;
          $('.turn').css("background", "linear-gradient(to right, #BEEE62 50%, transparent 50%)");
        }
      },
      //reset the game
      clear: function () {
        location.reload();
      }
    }
    //Piece object - there are 24 instances of them in a checkers game


  if (this.playerType == "A" && this.gameBoard.playerTurn == 1 || this.playerType == "B" && this.gameBoard.playerTurn == 2){
    $('.piece').on("click", function () {
      var selected;
      var isPlayersTurn = ($(this).parent().attr("class").split(' ')[0] == "player"+Board.playerTurn+"pieces");
      if(isPlayersTurn) {
        if($(this).hasClass('selected')) selected = true;
        $('.piece').each(function(index) {$('.piece').eq(index).removeClass('selected')});
        if(!selected) {
          $(this).addClass('selected');
        }
      }
    });
    $('.tile').on("click", function () {
      //make sure a piece is selected
      if($('.selected').length != 0) {
        //find the tile object being clicked
        var tileID = $(this).attr("id").replace(/tile/, '');
        var tile = tiles[tileID];
        //find the piece being selected
        var piece = pieces[$('.selected').attr("id")];
        //check if the tile is in range from the object
        var inRange = tile.inRange(piece);
        if(inRange) {
          //if the move needed is jump, then move it but also check if another move can be made (double and triple jumps)
          if(inRange == 'jump') {
            if(piece.opponentJump(tile)) {
              piece.move(tile);
              if(piece.canJumpAny()) {
                 Board.changePlayerTurn(); //change back to original since another turn can be made
                 piece.element.addClass('selected');
              }
            }
            //if it's regular then move it if no jumping is available
          } else if(inRange == 'regular') {
            if(!piece.canJumpAny()) {
              piece.move(tile);
              if (getPlayerType() == "A"){
              var outgoingMsg = messages.O_MOVE_TO_A;
              outgoingMsg.pieceEl = piece.element;
              outgoingMsg.piecePos = piece.position;
              outgoingMsg.tileEl = tile.element;
              outgoingMsg.tilePos = tile.position;
              socket.send(JSON.stringify(outgoingMsg));
              }
              else {
                if (getPlayerType() == "B"){
                  var outgoingMsg = messages.O_MOVE_TO_B;
                  outgoingMsg.pieceEl = piece.element;
                  outgoingMsg.piecePos = piece.position;
                  outgoingMsg.tileEl = tile.element;
                  outgoingMsg.tilePos = tile.position;
                  socket.send(JSON.stringify(outgoingMsg));
                }
              }
            } else {
              alert("You must jump when possible!");
            }
          }
        }
      }
    });
  }
}


(function setup(){
  console.log("setting up..");
  var socket = new WebSocket("ws://localhost:3000");
  var gs = new gameState(socket);
  console.log(typeof gs.Board.initialize);
  // gs.Board.initialize();
  //initialize the board
  socket.onmessage = function (event) {
    let incomingMsg = JSON.parse(event.data);
    if (incomingMsg.type == Messages.T_PLAYER_TYPE){
      gs.setPlayerType( incomingMsg.data );
    }
    if (incomingMsg.type == Messages.T_MOVE_TO_A && gs.getPlayerType() == "B"){
      var tile = new Tile(incomingMsg.tileEl, incomingMsg.tilePos);
      var piece = new Piece(incomingMsg.pieceEl, incomingMsg.piecePos);
      piece.move(tile);
    }
    else {
      if (incomingMsg.type == Messages.T_MOVE_TO_B && gs.getPlayerType() == "A"){
        var tile = new Tile(incomingMsg.tileEl, incomingMsg.tilePos);
        var piece = new Piece(incomingMsg.pieceEl, incomingMsg.piecePos);
        piece.move(tile);
      }
    }

  }
  socket.onopen = function(){
    socket.send("{}");
  };
  socket.onerror = function(){
  };
}());