var ChessBoard = function(canvasComp){
    this.canvas = canvasComp;
    this.canvasCtx = this.canvas.getContext("2d");
    this.pictures =[
        {src:"asset/wp.svg", id:"wp"},
        {src:"asset/wn.svg", id:"wn"},
        {src:"asset/wb.svg", id:"wb"},
        {src:"asset/wr.svg", id:"wr"},
        {src:"asset/wq.svg", id:"wq"},
        {src:"asset/wk.svg", id:"wk"},


        {src:"asset/bp.svg", id:"bp"},
        {src:"asset/bn.svg", id:"bn"},
        {src:"asset/bb.svg", id:"bb"},
        {src:"asset/br.svg", id:"br"},
        {src:"asset/bq.svg", id:"bq"},
        {src:"asset/bk.svg", id:"bk"}];
    this.NO_PIECE = "X";
    this.PICTURES_SIZE = 504;
    this.drawnImages = Array();
    this.piecesValues = Array(8); // first dim is for rank, and first index is for rank "1"
    for (var line = 0; line < 8; line++){
        this.piecesValues[line] = Array(8);
    }
    
    /*
    ============
    Constructor
    ============
    */
    this.init = function(){
        var minWindowSize = Math.min(window.innerWidth, window.innerHeight);
        this.canvas.width = minWindowSize;
        this.canvas.height = minWindowSize;
        this.cellSize = Math.floor(minWindowSize / 8);
        
        this.clearValues();
    };
    
    /*
    ==============
    Refresh board
    ==============
    */
    this.updateBoard = function(){
        var outer = this;
        var clearCanvas = function(){
            outer.canvasCtx.clearRect ( 0 , 0 , outer.canvas.width, outer.canvas.height );
            for (currImage in this.drawnImages){
                delete currImage;
            }
        }
        
        var drawSquare = function(line, col){
            var blankCell = (line+col)%2 == 0;
            var cellColor = blankCell ? "#CF3" : "#963";
            var x = col * outer.cellSize;
            var y = line * outer.cellSize;
            outer.canvasCtx.fillStyle = cellColor;
            outer.canvasCtx.fillRect(x, y, outer.cellSize, outer.cellSize);
        }

        var drawGrid = function(){
            for (var line = 0; line < 8; line++){
                for (var col = 0; col < 8; col++){
                    drawSquare(line, col);
                }
            }
        }

        
        var drawPiece = function(kindStr, fileStr, rankStr){
            var drawPicture = function(pictureIndex, x, y){
                var image = new Image();
                image.src = outer.pictures[pictureIndex].src;
                var scaleCoeff = outer.cellSize * 1.0 / outer.PICTURES_SIZE;
                image.addEventListener("load", function(){
                    outer.canvasCtx.save();
                    outer.canvasCtx.translate(x,y);
                    outer.canvasCtx.scale(scaleCoeff, scaleCoeff);
                    outer.canvasCtx.drawImage(image, 0, 0);
                    outer.canvasCtx.restore();
                    
                    outer.drawnImages.push(image);
                });
            }

            var kindIndex = "PNBRQKpnbrqk".indexOf(kindStr);
            var kindExists = kindIndex >= 0;
            var fileIndex = fileStr.toLowerCase().charCodeAt(0) - 'a'.charCodeAt(0);
            var rankIndex = rankStr.charCodeAt(0) - '1'.charCodeAt(0);
            if (kindExists){
                drawPicture(kindIndex, fileIndex*outer.cellSize, (7-rankIndex)*outer.cellSize);
            }
        }
        
        var drawAllPieces = function(){
            for (var rankIndex = 0; rankIndex < 8; rankIndex++){
                for (var fileIndex = 0; fileIndex < 8; fileIndex++){
                    var pieceKind = outer.piecesValues[rankIndex][fileIndex];
                    var isValidPiece = "PNBRQKpnbrqk".indexOf(pieceKind) >= 0;
                    if (isValidPiece) {
                        drawPiece(pieceKind, "ABCDEFGH".charAt(fileIndex), "12345678".charAt(rankIndex));
                    }
                }
            }
        }
        
        clearCanvas();
        drawGrid();
        drawAllPieces();
    }
    
    /*
    ============
    Clears board
    ============
    */
    this.clearValues = function(){
        for (var line = 0; line < 8; line++){
            for (var col = 0; col < 8; col++){
                this.piecesValues[line][col] = this.NO_PIECE;
            }
        }
        this.updateBoard();
    }
    
    /*
        =============
        Puts a piece
        =============
        kindStr => a char in "PNBRQKpnbrqk" string (see chess FEN notation on internet).
                   Or "_" for remove it / set cell as empty.
        fileStr => a char like "A", "B", ... , "H"
        rankStr => a char like "1", "2", ... , "8"
    */
    this.setPieceAt = function(kindStr, fileStr, rankStr){
        var kindIndex = "PNBRQKpnbrqk".indexOf(kindStr);
        var kindExists = kindIndex >= 0 && kindStr.length > 0;
        var fileIndex = fileStr.toLowerCase().charCodeAt(0) - 'a'.charCodeAt(0);
        var rankIndex = rankStr.charCodeAt(0) - '1'.charCodeAt(0);
        if (kindExists){
            this.piecesValues[rankIndex][fileIndex] = kindStr;
        }
        else {
            this.piecesValues[rankIndex][fileIndex] = this.NO_PIECE;
        }
        this.updateBoard();
    }
    
    this.init();
};