$(document).ready(function () {

    var canvas = $("#myCanvas")[0];
    var ctx = canvas.getContext("2d");
    var w = $("#myCanvas").width();
    var h = $("#myCanvas").height();
    var cw = 15;
    var food;
    var snake;
    var d = "RIGHT";
    var gameloop;
   
    function start(gameloop){
        gameloop = setInterval(update, 100);
        return gameloop
    }
    function reset() {
        window.location.reload()
    }
    function stop(gameloop){
        clearInterval(gameloop);
    }

    function getSessionScore(){
        var sessionScore = localStorage.getItem("session_score");
         return sessionScore;
    }
    function getCurrentScore(){
        var currentScore = localStorage.getItem("current");
        return currentScore;
    }
    function setSessionScore(score){
        localStorage.setItem("session_score", score);
    }
    function setCurrentScore(score){
        localStorage.setItem("current", score);
    }
    function checkScore(score){
         var session = getSessionScore();
         var current = getCurrentScore();
        if(current === null){
           setCurrentScore(score);
           setSessionScore(score);
        }
        if (session < score){
            current = 0;
            setCurrentScore(score);
            setSessionScore(score);
        }
    }
    $('#popup_question').submit(function(e){
         var form = $(this).serializeArray();
         e.preventDefault();
         form = JSON.stringify(form);
         localStorage.setItem("new_question",form);
         
    });
    $('#add_question').click(function(){
        var isHidden = localStorage.getItem('isHidden');
        if(isHidden === null){
            isHidden = 'true';
        }
        if(isHidden === 'true'){
            $('#popup_question').fadeIn();
            localStorage.setItem('isHidden', 'false');
        }else if(isHidden === 'false'){
            $('#popup_question').fadeOut();
            localStorage.setItem('isHidden', 'true');
        }
    })
    

    $('#session').text(getSessionScore())

    function update() {
        if (d == "RIGHT")
            snake.x = snake.x + 1;
        else if (d == "LEFT")
            snake.x = snake.x - 1;
        else if (d == "UP")
            snake.y = snake.y - 1;
        else if (d == "DOWN")
            snake.y = snake.y + 1;

        check_borders();
        check_food();
        blank();
        paint_cell(food.x, food.y, "grey");
        paint_cell(snake.x, snake.y, "green");
    }

    function showGameOver() {

        var current = $('#current').text();
        $('#final').text(current);
        $('#popup').fadeIn();
        $('#yes').click(function () {
            if ($('#yes').is(':checked')) {
                $('#correct').fadeIn('slow');
                $('#session').text(getSessionScore());
                $('#no').attr('disabled','disabled');
            }
        });
        $('#no').click(function(){
            if($('#no').is(':checked')){
                $('#incorrect').fadeIn('slow');
                $('#yes').attr('disabled','disabled');
            }
        })
    }

    function updateHighScore() {
        var current = $("#current").text();
        var highest = $("#highest").text();
        if (parseInt(current) > parseInt(highest)) {
            $('#highest').text(current)
        }

    }

    function placeFood() {
        food = {
            x: Math.round(Math.random() * (w - cw) / cw),
            y: Math.round(Math.random() * (h - cw) / cw)
        }
    }

    function placeSnake() {
        snake = {
            x: Math.round(Math.random() * (w - cw) / cw),
            y: Math.round(Math.random() * (h - cw) / cw)
        }
    }

    function blank() {
        //Paint The Canvas
        ctx.fillStyle = "black";
        ctx.fillRect(0, 0, w, h);
        ctx.strokeStyle = "white";
        ctx.strokeRect(0, 0, w, h);

    }

    function check_borders() {
        if (snake.x < 0 || snake.x > (w - cw) / cw || snake.y < 0 || snake.y > (h - cw) / cw) {
            stop(gameloop);
            showGameOver();
        }
    }

    function paint_cell(x, y, color) {
        ctx.fillStyle = color;
        ctx.fillRect(x * cw, y * cw, cw, cw);
        ctx.strokeStyle = "white";
        ctx.strokeRect(x * cw, y * cw, cw, cw);
    }

    function check_food() {
        if (food.x == snake.x && food.y == snake.y) {
            var current = parseInt($('#current').text());
            current += 1;
            $('#current').text(current);
            checkScore(current);
            placeFood();
        }


    }

    gameloop = start();

    placeFood();
    paint_cell(food.x, food.y, "grey");
    placeSnake();
    paint_cell(snake.x, snake.y, "green");

    //Keyboard Controller
    $(document).keydown(function (e) {
        //39: RIGHT
        //37: LEFT
        //38: UP
        //40: DOWN
        var key = e.which;
        if (key == "37") {
            snake.x -= 1;
            d = "LEFT";
        } else if (key == "38") {
            snake.y -= 1;
            d = "UP";
        } else if (key == "39") {
            snake.x += 1;
            d = "RIGHT";
        } else if (key == "40") {
            snake.y += 1;
            d = "DOWN";
        } else if(key == "32"){
            reset();
        }

        check_food();
        blank();
        color = "grey";
        paint_cell(food.x, food.y);
        color = "green";
        paint_cell(snake.x, snake.y);

    });

});