function getKeyboard(option, numbers_only=0, accents=1, big_letters_only=0) {
    console.log("open keyboard")
    document.getElementById("keyboard").innerHTML = '<div id="'+option+'" class="softkeys" data-target="input[name='+option+']"></div>';
    if (big_letters_only==1){
        keyboard(0, 0, 0, 1)
    }
    else{
        if (numbers_only==0){
            if (accents==1){
                keyboard();
            }
            else{
                keyboard(0, 0, 0)
            }
        }
        else{
            keyboard(1, option);
        }
    }
}

function closeKeyboard(){
    console.log("close keyboard")
    try{
      document.getElementById("keyboard").innerHTML = "";
    }
    catch(error){
        console.log(error)
    }
}


function keyboard(numbers=0, target_name=0, accents=1, big_letters_only=0){
//    option

    $(document).ready(function(){
        if (big_letters_only==1){
            $('.softkeys').softkeys({
                        target : $('.softkeys').data('target'),
                        layout : [
                            [
                                '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'
                            ],
                            [
                                'Q','W','E','R','T','Z','U','I','O','P'
                            ],
                            [
                                'A','S','D','F','G','H','J','K','L'
                            ],
                            [
                                'hide', 'Y','X','C','V','B','N','M', 'delete'
                            ]
                        ],
                    numbers_only: 0
                    });
        }
        else{
            if (numbers==0){
                if (accents==1){
                    $('.softkeys').softkeys({
                        target : $('.softkeys').data('target'),
                        layout : [
                            [
                                ['0','§'],
                                ['1',"'"],
                                ['2','"'],
                                ['3','+'],
                                ['4','!'],
                                ['5','%'],
                                ['6','/'],
                                ['7','='],
                                ['8','('],
                                ['9',')'],
                                'ö','ü'
                            ],
                            [
                                'q','w','e','r','t','z','u','i','o','p','ő','ú'
                            ],
                            [
                                'a','s','d','f','g','h','j','k','l','é','á','ű'
                            ],
                            [
                                'shift', '@',
                                'í','y','x','c','v','b','n','m','ó',
                                'delete'
                            ],
                            [
                                'hide',
                                'space',
                                [',','?'],
                                ['.',':'],
                                ['-','_']
                            ]
                        ],
                    numbers_only: 0
                    });
                }
                else{
                    $('.softkeys').softkeys({
                        target : $('.softkeys').data('target'),
                        layout : [
                            [
                                ['0','§'],
                                ['1',"'"],
                                ['2','"'],
                                ['3','+'],
                                ['4','!'],
                                ['5','%'],
                                ['6','/'],
                                ['7','='],
                                ['8','('],
                                ['9',')']
                            ],
                            [
                                'q','w','e','r','t','z','u','i','o','p'
                            ],
                            [
                                'a','s','d','f','g','h','j','k','l'
                            ],
                            [
                                'shift', '@',
                                'y','x','c','v','b','n','m',
                                'delete'
                            ],
                            [
                                'hide',
                                'space',
                                [',','?'],
                                ['.',':'],
                                ['-','_']
                            ]
                        ],
                    numbers_only: 0
                    });
                }
             }
             else{
                $('.softkeys').softkeys({
                    target : $('.softkeys').data('target'),
                    layout : [
                        [
                            ['1'],
                            ['2'],
                            ['3']
                        ],
                        [
                            ['4'],
                            ['5'],
                            ['6']
                        ],
                        [
                            ['7'],
                            ['8'],
                            ['9']
                        ],
                        [
                            ['-'],
                            ['0'],
                            'delete',
                        ]
                    ],
                    numbers_only: 1,
                    target_friendly_name: target_name
                });
             }
        }
    });
};

(function ($) {$.fn.softkeys = function(options) {
        var settings = $.extend({
                layout : [],
                target : '',
                rowSeperator : 'br',
                buttonWrapper : 'li',
                numbers_only: 0,
                target_friendly_name: 0
            },  options);

        console.log("Numbers only: " + settings.numbers_only);

        var createRow = function(obj, buttons) {
                for (var i = 0; i < buttons.length; i++) {
                    createButton(obj, buttons[i]);
                }

                obj.append('<'+settings.rowSeperator+'>');
            },

            createButton = function(obj, button) {
                var character = '',
                    type = 'letter',
                    styleClass = '';

                switch(typeof button) {
                    case 'array' :
                case 'object' :
                        if(typeof button[0] !== 'undefined') {
                            character += '<span>'+button[0]+'</span>';
                        }
                        if(typeof button[1] !== 'undefined') {
                            character += '<span>'+button[1]+'</span>';
                        }
                        type = 'symbol';
                        break;

                    case 'string' :
                        switch(button) {
                            case 'hide':
                                character = '<span>Hide</span>';
                                type = 'hide';
                                break;

                            case 'capslock' :
                                character = '<span><img class="keyboard_img" src="../keysafe_webgui/karc_frame/keyboard/capslock.png" ></span>';
                                type = 'capslock';
                                break;

                            case 'shift' :
                                character = '<span>Shift</span>';
                                type = 'shift';
                                break;

                            case 'return' :
                                character = '<span>Return</span>';
                                type = 'return';
                                break;

                            case 'tab' :
                                character = '<span>Tab</span>';
                                type = 'tab';
                                break;

                            case 'space' :
                                character = '<span>&emsp;</span>';
                                type = 'space';
                                styleClass = 'softkeys__btn--space';
                                break;

                            case 'delete' :
//                                character = '<span><img class="keyboard_img" src="../keysafe_webgui/karc_frame/keyboard/backspace.png" ></span>';
//                                character = '<span><i class="bi bi-backspace"></i></span>';
                                character = '<span><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-backspace" viewBox="0 0 16 16">'
                                character += '<path d="M5.83 5.146a.5.5 0 0 0 0 .708L7.975 8l-2.147 2.146a.5.5 0 0 0 .707.708l2.147-2.147 2.146 2.147a.5.5 0 0 0 .707-.708L9.39 8l2.146-2.146a.5.5 0 0 0-.707-.708L8.683 7.293 6.536 5.146a.5.5 0 0 0-.707 0z"/>'
                                character += '<path d="M13.683 1a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-7.08a2 2 0 0 1-1.519-.698L.241 8.65a1 1 0 0 1 0-1.302L5.084 1.7A2 2 0 0 1 6.603 1h7.08zm-7.08 1a1 1 0 0 0-.76.35L1 8l4.844 5.65a1 1 0 0 0 .759.35h7.08a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1h-7.08z"/>'
                                character += '</svg></span>';
                                type = 'delete';
                                break;

                            default :
                                character = button;
                                type = 'letter';
                                break;
                        }

                        break;
                }
                if (settings.numbers_only == 0){
                    obj.append('<'+settings.buttonWrapper+' class="softkeys__btn  '+styleClass+'" data-type="'+type+'">'+character+'</'+settings.buttonWrapper+'>');
                }
                else {
                    obj.append('<'+settings.buttonWrapper+' class="softkeys__numbers__btn  '+styleClass+'" data-type="'+type+'">'+character+'</'+settings.buttonWrapper+'>');
                }
            },

            bindKeyPress = function(obj) {
                obj.children(settings.buttonWrapper).on('click touchstart', function(event){
                    event.preventDefault();

                    var character = '',
                        type = $(this).data('type'),
                        targetValue = $(settings.target).val();

                    switch(type) {
                        case 'hide':
                            closeKeyboard();
                            break;

                        case 'capslock' :
                            toggleCase(obj);
                            break;

                        case 'shift' :
                            toggleCase(obj);
                            toggleAlt(obj);
                            break;

                        case 'return' :
                            character = '\n';
                            break;

                        case 'tab' :
                            character = '\t';
                            break;

                        case 'space' :
                            character = ' ';
                            break;

                        case 'delete' :
                            targetValue = targetValue.substr(0, targetValue.length - 1);
                            break;

                        case 'symbol' :
                            if(obj.hasClass('softkeys--alt')) {
                                character = $(this).children('span').eq(1).html();
                            } else {
                                character = $(this).children('span').eq(0).html();
                            }
                            break;

                        case 'letter' :
                            character = $(this).html();

                            if(obj.hasClass('softkeys--caps')) {
                                character = character.toUpperCase();
                            }

                            break;
                    }

                    if (settings.target_friendly_name != 0){
                        var max_len = document.getElementById(settings.target_friendly_name).maxLength;
                        if (max_len != -1){
                            if (targetValue.length < max_len){
                                $(settings.target).focus().val(targetValue + character);
                            }
                        }
                        else {
                            $(settings.target).focus().val(targetValue + character);
                        }
                        document.getElementById(settings.target_friendly_name).oninput();
                    }
                    else{
                        $(settings.target).focus().val(targetValue + character);
                    }

                });
            },

            toggleCase = function(obj) {
                obj.toggleClass('softkeys--caps');
            },

            toggleAlt = function(obj) {
                obj.toggleClass('softkeys--alt');
            };

        return this.each(function(){
            for (var i = 0; i < settings.layout.length; i++) {
                createRow($(this), settings.layout[i]);
            }

            bindKeyPress($(this));
        });
    };

}(jQuery));