//-Declaring variables
var fpsInterval;
var cells = 0;


var player = {

    x:0,
    y:0
};

var players = [];

//Lets create a function which will help us to create multiple players
function newPlayer()
{
   var player = {
    x:0,
    y:0
};

    this.name;
    this.id = 1;
    this.x=x;
    this.y=y;
    context.drawImage(myImage, shift, 0, frameWidth, frameHeight,
                    player.x,player.y, 50, 50);

    return {'name' : this.name,"x" : this.x,"y" : this.y};
}
//setting variables for the image so that it can be called, creating event listeners for callback, setting the locaiton for the image to be retrieved from
var myImage = new Image();
myImage.src = "https://www.kirupa.com/stuff/sprites_blue.png";


// load image function
function loadImage(e) {
  animate();
}

var shift = 0;
var frameWidth = 300;
var frameHeight = 300;
var totalFrames = 24;
var currentFrame = 0;


/* These two variables control how many cells we divide the canvas into
 * horizontally (cellsWide) and vertically (cellsHigh).
 * They are used in the graphics calculations later, to establish the
 * size of each cell 'on the fly' so that they can change dynamically.
 *
 * They are set upon receipt of the 'maze data' message.
 */
var cellsWide;
var cellsHigh;

/* These three variables hold information about the maze.
 * - maze, a two-dimensional array of objects each containing members:
 * -- x, an integer describing the horizontal position of the cell
 * -- y, an integer the vertical position of the cell
 * -- top, a boolean describing whether the top edge of the cell has a wall
 * -- bottom, a boolean describing whether the bottom edge of the cell has a wall
 * -- left, a boolean describing whether the left edge of the cell has a wall
 * -- right, a boolean describing whether the right edge of the cell has a wall
 * -- set, an integer used in maze generation that can safely be ignored
 *
 * - mazeStart
 * -- x, the row at which players should start in the maze
 * -- y, the column at which players should start in the maze
 *
 * - mazeEnd
 * -- x, the row where the goal space of the maze is located
 * -- y, the column where the goal space of the maze is located
 *
 * These variables are all initialised, and changed, upon receipt of the 'maze data' message.
 */
var maze = [];
var mazeStart = {};
var mazeEnd = {};

/*
 * Establish a connection to our server
 * We will need to reuse the 'socket' variable to both send messages
 * and receive them, by way of adding event handlers for the various
 * messages we expect to receive
 *
 * Replace localhost with a specific URL or IP address if testing
 * across multiple computers
 *
 * See Real-Time Servers III: socket.io and Messaging for help understanding how
 * we set up and use socket.io
 *
 */


var socket = io.connect("http://localhost:8081");

/*
 * This is the event handler for the 'maze data' message
 * When a 'maze data' message is received from the server, this block of code executes
 *
 * The server is sending us either initial information about a maze, or,
 * updated information about a maze, and so we want to replace our existing
 * maze variables with the new information.
 *
 * We know the specification of the information we receive (from the documentation
 * and design of the server), and use this to help write this handler.
 */


//pushing the player data in to the player array and recieving the server info
socket.on("server player", function(data){

    players.push(data);
    console.log(data);
	});

//socket.on("server message", function(data) {
//    console.log(data);
//     socket.emit(newPlayer);
//    players.push(data);
//})


socket.on("maze data", function(data) {
    cellsWide = data.mazeSize.cols;
    cellsHigh = data.mazeSize.rows;
    maze = data.mazeCells;
    mazeStart = data.mazeStart;
    mazeEnd = data.mazeEnd;

});




/*
 * Once our page is fully loaded and ready, we call startAnimating
 * to kick off our animation loop.
 * We pass in a value - our fps - to control the speed of our animation.
 */


/*
 * The startAnimating function kicks off our animation (see Games on the Web I - HTML5 Graphics and Animations).
 */
function startAnimating(fps) {
    fpsInterval = 1000/fps;
    then = Date.now();
    animate();
}

///*
// * The animate function is called repeatedly using requestAnimationFrame (see Games on the Web I - HTML5 Graphics and Animations).
// */
//
//


function animate() {
    requestAnimationFrame(animate);

    //
    var now = Date.now();
    var elapsed = now - then;

    if (elapsed > fpsInterval) {

        then = now - (elapsed % fpsInterval); // matthew added code missed out from skeleton
        // Acquire both a canvas (using jQuery) and its associated context
        var canvas = $("canvas").get(0);
        var context = canvas.getContext("2d");

        // Calculate the width and height of each cell in our maze
        var cellWidth = canvas.width/cellsWide;
        var cellHeight = canvas.height/cellsHigh;





//            //        for multiplayer
////          players in lobby
//         for (var i = 0; i < player.length; i++){
//
//             context.beginPath();
//
//         context.drawImage(myImage, shift, 0, frameWidth, frameHeight,
//                    player.x,player.y, 50, 50);
//    };
//
//         context.beginPath();
//
//
        // Clear the drawing area each animation cycle
        context.clearRect(0,0, canvas.width, canvas.height);


      //draw each frame + place them in the middle

  context.drawImage(myImage, shift, 0, frameWidth, frameHeight,
                    player.x,player.y, 50, 50);


  shift += frameWidth + 1;

  /*
    Start at the beginning once you've reached the
    end of your sprite!
  */
  if (currentFrame == totalFrames) {
    shift = 0;
    currentFrame = 0;
  }
        currentFrame++;


        // Change the current colour to yellow, to draw the 'goal' state
        context.fillStyle = "yellow";
        // The goal is calculated by multiplying the cell location (mazeEnd.x, mazeEnd.y)
        // by the cellWidth and cellHeight respectively
        // Refer to: Games on the Web I - HTML5 Graphics and Animations, Lab Exercise 2
        context.fillRect(mazeEnd.x * cellWidth,
                         mazeEnd.y * cellHeight,
                         cellWidth, cellHeight);



        // Change the current colour to black, and the line width to 2
        context.fillStyle = "black";
        context.lineWidth = 2;


        // Loop through the 2D array, in both rows and columns...
        for (i = 0; i < maze.length; i++) {

            for (j = 0; j < maze[i].length; j++) {

                // ... and for every cell in the maze, check where it has walls
                // For every wall we find, draw that wall in an appropriate place

                if (maze[i][j].top) {
                    context.beginPath();
                    context.moveTo(maze[i][j].x*cellWidth, maze[i][j].y*cellHeight);
                    context.lineTo((maze[i][j].x+1)*cellWidth,maze[i][j].y*cellHeight);
                    context.stroke();
                    context.closePath();
                }

                if (maze[i][j].right) {
                    context.beginPath();
                    context.moveTo((maze[i][j].x+1)*cellWidth,maze[i][j].y*cellHeight);
                    context.lineTo((maze[i][j].x+1)*cellWidth,(maze[i][j].y+1)*cellHeight);
                    context.stroke();
                    context.closePath();
                }

                if (maze[i][j].bottom) {
                    context.beginPath();
                    context.moveTo((maze[i][j].x+1)*cellWidth,(maze[i][j].y+1)*cellHeight);
                    context.lineTo(maze[i][j].x*cellWidth,(maze[i][j].y+1)*cellHeight);
                    context.stroke();
                    context.closePath();
                }

                if (maze[i][j].left) {
                    context.beginPath();
                    context.moveTo(maze[i][j].x*cellWidth,(maze[i][j].y+1)*cellHeight);
                    context.lineTo(maze[i][j].x*cellWidth, maze[i][j].y*cellHeight);
                    context.stroke();
                    context.closePath();
                }

            }
        }
    }
}




$(document).ready(function() {


    $('#upButton').on('touchstart click', function(e){
    e.stopPropagation(); e.preventDefault();

    //your code here
   if (event.type == "touchstart")
        $(this).off('click');
           {
               //move the square up
             player.y = player.y -10;
           }
        // if the player goes above the map, the player will be returned to the bottom
            if (player.y< 0){
            player.y= 500;
          }


});

        $('#downButton').on('touchstart click', function(e){
    e.stopPropagation(); e.preventDefault();
    //your code here
   if (event.type == "touchstart")
       $(this).off('click');
           {
               //move the square down
             player.y = player.y +10;

           }
            // if the player goes below the map, the player will be returned to the top
                      if (player.y>= 500){
            player.y=0;
        }

    console.log(e);
});

            $('#leftButton').on('touchstart click', function(e){
    e.stopPropagation(); e.preventDefault();
    //your code here
   if (event.type == "touchstart")
       $(this).off('click');
           {
                 //move the square left
               player.x = player.x -10; //i = i -1;

           }
            // if the player goes off the left of the map, the player will be returned to the right of the map
            if (player.x< 0){
            player.x= 500 ;
        }

    console.log(e);
});


                $('#rightButton').on('touchstart click', function(e){
    e.stopPropagation(); e.preventDefault();
    //your code here
   if (event.type == "touchstart")
       $(this).off('click');
           {
                //move the square right
              player.x = player.x +10; //i = i +1;

           }
            // if the player goes off the right of the map, the player will be returned to the left of the map
            if (player.x>= 500){
            player.x=0;
        }

    console.log(e);
});




    // moving the player with the keyboard
    // (1) What sort of event handler do we need? What can we attach it to?
    $("body").keydown(function(e) {
        //left 37
        //up 38
        //right 39
        //down 40

       if (e.which == 40)
           {
               //move the square down
               player.y = player.y +10;

           }

       else if (e.which == 39)
           {
               //move the square right
               player.x = player.x +10; //i = i +1;

           }

       else if (e.which == 38)
           {
               //move the square up
               player.y = player.y -10;

           }

        else if (e.which == 37)
           {
               //move the square left
               player.x = player.x -10; //i = i -1;

           }

            // (2) How do we handle when the square goes over an edge?
        if (player.x>= 500){
            player.x= 0;
        }

        if (player.x< 0){
            player.x= 500 -1 ;
        }
          if (player.y>= 500){
            player.y=0;
        }

        if (player.y< 0){
            player.y= 500 -1;
        }
        console.log(e);
    });
 startAnimating(60);
});