(function($){
$(document).ready(function(){
$('input.chess.fen').each(function(){
    var input = $(this);
    input.focus(function(ev){
        var editorContainer = $('<div class="container selectfen chess"/>')
            .append('<h3>Sett opp stilling</h3>')
            .append('<div class="chessboard"/>')
            .append('<div class="pieceselector-container"/>');


        editorContainer.mouseleave(function(ev){
            $(this).remove();
        })
        /*input.blur(function(ev){
            editorContainer.remove();
        });*/
        var board = new BoardHelper(editorContainer.find('.chessboard')[0]);
        board.buildDOM();

        if(input.val()) {
            board.loadFEN(input.val())
        }

        var pieces = PieceHelper.SYMBOLS;
        var pieceselectorContainer = editorContainer.find('.pieceselector-container');
        var pieceSelector = $('<table/>').addClass('pieceselector')
                .insertBefore(pieceselectorContainer)
                .append('<tr><td>' + pieces.slice(0, 6).join('</td><td>')  + '</td></tr>')
                .append('<tr><td>' + pieces.slice(6).join('</td><td>')  + '</td></tr>')
                .find('td').click(function(event){
                    $(this).toggleClass('current-piece')
                        .closest('table').find('td').not(this)
                        .removeClass('current-piece');
                }).closest('table');

        var table = $(board.container).find('table.boardfields');
        table.find('td').click(function(event){
            var currentPiece = pieceSelector.find('.current-piece');
            if(currentPiece.length === 1) {
                var piece = currentPiece[0].textContent;
                if(this.textContent == piece) {
                    $(this).empty();
                } else {
                    board.insertPiece(this, piece);
                }
            }
            var simpleFEN = board.getCurrentFEN().split(' ')[0];
            input.val(simpleFEN);
        }).addClass('editable');

        editorContainer.insertAfter(this);
    });
});
});
})(jQuery);