$(function() {


    // each intersection[x][y] contains arrays of every possible direction from this intersection
    intersections = {};

    colors = ["blue", "green"];
    activeStone = {};
    targetStone = {};
    moveDirection = "";
    activePlayer = "red";

    function updateActivePlayerStones() {
        $(":not([data-color='"+activePlayer+"'])").removeClass("activePlayer");
        $("[data-color='"+activePlayer+"']").addClass("activePlayer");
    }

    function nextPlayer() {
        switch(activePlayer){
            case "blue":
                activePlayer = "red";
                break;
            case "red":
                activePlayer = "blue";
                break;
            default:
                break;
        }
        updateActivePlayerStones();
    }

    function stone(x, y) {
        return $("#intersection_"+x+"_"+y);
    }

    function setStone(x, y, color) {
        clearStone(x,y);
        stone(x,y).attr("data-color", color);
        intersections[x][y]["color"] = color;
        updateActivePlayerStones();
    }

    // board creation
    for(y = 0; y < 5; y++) {


        for(x = 0; x < 9; x++) {

            directions = {};
            color = "";

            if(!(x in intersections)) {
                intersections[x] = [];
            }

            if(x > 0) { directions.left={"x": -1, "y": 0}; }
            if(x < 8) { directions.right={"x": 1, "y": 0}; }
            if(y > 0) { directions.top={"x": 0, "y": -1}; }
            if(y < 4) { directions.bottom={"x": 0, "y": 1}; }
            if((x%2 == 0 && y%2 == 0) || (x%2 != 0 && y%2 != 0)) { // diagonals
                if(x > 0 && y > 0) { directions.topLeft={"x": -1, "y": -1}; }
                if(x < 8 && y < 5) { directions.bottomRight={"x": 1, "y": 1}; }
                if(x > 0 && y < 4) { directions.bottomLeft={"x": -1, "y": 1}; }
                if(x < 8 && y > 0) { directions.topRight={"x": 1, "y": -1}; }
            }
            intersections[x][y] = {};
            intersections[x][y]["directions"] = directions;

            $("#board").append("<div id='intersection_"+x+"_"+y+"' class='intersection' data-x='"+x+"' data-y='"+y+"' data-color='"+color+"'></div>");

            // starting colors
            if(y < 3 && !(x == 4 && y == 2)) {
                setStone(x, y, "blue");
            }
            if((y>1 && x%2 != 0) || y > 2) {
                setStone(x, y, "red");
            }
        }
    }
    nextPlayer();

    function getStoneColor(x, y) {
        // return the color of the stone. Returns empty valye if thre is no stone
        return stone(x,y).attr("data-color");
    }

    function setPossibleMove(x, y, direction) {
        stone(x,y).attr("data-direction", direction);
    }

    function clearStone(x,y) {
        stone(x,y).removeAttr("data-color");
        updateActivePlayerStones();
    }

    function clearPossibleMoves() {
        $("[data-direction]").removeAttr("data-direction");
        $(".intersection.active").removeClass("active");
    }

    clearStone(3,1);
    clearStone(2,1);
    clearStone(3,2);
    clearStone(1,0);
    clearStone(0,1);
    clearStone(1,1);

    function checkPossibleMoves(x, y, color) {
        clearPossibleMoves();

        intersection = intersections[x][y];
        startingIntersections = [];
        $.each(intersection.directions, function(direction, coordinates){
            targetX = parseInt(x)+parseInt(coordinates.x);
            targetY = parseInt(y)+parseInt(coordinates.y);
            // if we are looking for a first empty intersection and there is no stone, we add this intersection to the starting intersections list
            if (!getStoneColor(targetX, targetY)) {
                startingIntersections.push(intersections[targetX, targetY]);
                setPossibleMove(targetX,targetY, direction);
            }
        });
        if(!($.isEmptyObject(startingIntersections))) {
            stone(x,y).addClass("active");
        }
        return startingIntersections;
    }

    moveDirection = "";

    function moveStone() {
        clearPossibleMoves();
        $("[data-direction]").removeAttr("data-direction");
        setStone(activeStone.x, activeStone.y, "");
        setStone(targetStone.x, targetStone.y, activePlayer);
    }

    $("#board").on("click", "[data-color='"+activePlayer+"']", function(){
        console.log(activePlayer);
        console.log($(this).attr("data-color"));
        activeStone["x"] = $(this).attr("data-x");
        activeStone["y"] = $(this).attr("data-y");
        checkPossibleMoves(activeStone["x"],activeStone["y"], "blue");
    });

    $("#board").on("click", "[data-direction]", function(){
        targetStone["x"] = $(this).attr("data-x");
        targetStone["y"] = $(this).attr("data-y");
        moveDirection = $(this).attr("data-y");
        moveStone();
        nextPlayer();
    });

});