
    var input_key_pos = 0 ;


    function prepare_keyborad() {
        var input = $('<input id="keyboard_input" type="text">');
        var cont = $('<div class="con"></div>');
        var tab_labels = ['Latinka','Cyrilice','Řečtina','Různé znaky','Hlaholice'];

        for(var i in tab_labels){
            $('#tabs ul').append('<li><a href="#tabs-'+i+'">'+tab_labels[i]+'</a></li>')
        }
        /**************************************************************/

        var cont = $('<div id="tabs-0"></div>');
        $('#tabs_content').append(cont)
        for(var i in basic_latin){
            var char = $('<div class="char first_chars basic_latin" title="'+basic_latin[i].description+'" code="'+basic_latin[i].code+'">'+basic_latin[i].char+'</div>');
            cont.append(char);
        }

        for(var i in latin_1_supplement){
            var char = $('<div class="char second_chars latin_1_supplement" title="'+latin_1_supplement[i].description+'" code="'+latin_1_supplement[i].code+'">'+latin_1_supplement[i].char+'</div>');
            cont.append(char);
        }

        for(var i in latin_extended_a){
            var char = $('<div class="char third_chars latin_extended_a" title="'+latin_extended_a[i].description+'" code="'+latin_extended_a[i].code+'">'+latin_extended_a[i].char+'</div>');
            cont.append(char);
        }

        for(var i in latin_extended_b){
            var char = $('<div class="char fourth_chars  latin_extended_b" title="'+latin_extended_b[i].description+'" code="'+latin_extended_b[i].code+'">'+latin_extended_b[i].char+'</div>');
            cont.append(char);
        }


        var cont = $('<div id="tabs-1"></div>');
        $('#tabs_content').append(cont)
        for(var i in cyrillic){
            var char = $('<div class="char first_chars cyrillic" title="'+cyrillic[i].description+'" code="'+cyrillic[i].code+'">'+cyrillic[i].char+'</div>');
            cont.append(char);
        }

        for(var i in cyrillic_extended_a){
            var char = $('<div class="char second_chars cyrillic_a" title="'+cyrillic_extended_a[i].description+'" code="'+cyrillic_extended_a[i].code+'">'+cyrillic_extended_a[i].char+'</div>');
            cont.append(char);
        }

        for(var i in cyrillic_extended_b){
            var char = $('<div class="char third_chars cyrillic_b" title="'+cyrillic_extended_b[i].description+'" code="'+cyrillic_extended_b[i].code+'">'+cyrillic_extended_b[i].char+'</div>');
            cont.append(char);
        }


        var cont = $('<div id="tabs-2"></div>');
        $('#tabs_content').append(cont)
        for(var i in greek_and_coptic ){
            var char = $('<div class="char first_chars greek_and_coptic" title="'+greek_and_coptic[i].description+'" code="'+greek_and_coptic[i].code+'">'+greek_and_coptic[i].char+'</div>');
            cont.append(char);
        }

        for(var i in  greek_extended ){
            var char = $('<div class="char second_chars greek_extended" title="'+ greek_extended[i].description+'" code="'+ greek_extended[i].code+'">'+ greek_extended[i].char+'</div>');
            cont.append(char);
        }

        var cont = $('<div id="tabs-3"></div>');
        $('#tabs_content').append(cont)
        for(var i in  general_punctuation ){
            var char = $('<div class="char first_chars  general_punctuation" title="'+general_punctuation[i].description+'" code="'+general_punctuation[i].code+'">'+general_punctuation[i].char+'</div>');
            cont.append(char);
        }

       var cont = $('<div id="tabs-4"></div>');
        $('#tabs_content').append(cont);
        for(var i in  glagolitic ){
            var char = $('<div class="char first_chars miscellaneous_symbols" title="'+glagolitic[i].description+'" code="'+glagolitic[i].code+'">'+glagolitic[i].char+'</div>');
            cont.append(char);
        }
        $( "#tabs" ).tabs();
        $('#tabs').append(input);

        $('.char').click(function(){


            var arr = input.val().split('')
            arr.splice(input_key_pos, 0,  $(this).text());
            $('#keyboard_input').val(arr.join(''));
            input_key_pos++;
            input.focus().setCursorPosition(input_key_pos);

        });

        $('#keyboard_input').click(function(e){
            input_key_pos = e.target.selectionStart;
        });

        $('#keyboard_input').keyup(function(e){
            if(e.keyCode == 37 && input_key_pos-1 >= 0){
                input_key_pos--;
            }
            if(e.keyCode == 39 && input_key_pos+1 <= $('#keyboard_input').val().length){
                input_key_pos++;
            }
             if(e.keyCode == 8 && input_key_pos-1 >= 0){
                input_key_pos--;
             }
        });
}

function update_input_keyboard() {
    input_key_pos = 0 ;
    if ($(pageparts).children().find(input).length == 1) {
        $(pageparts).children().find('input').val($('#keyboard_input').val());
        $(pageparts).children().find('input').focus();
        $(pageparts).children().find('input').width(String($('#keyboard_input').val()).length * cache.input_length_const);
    }
}




$.fn.setCursorPosition = function (pos) {
    this.each(function (index, elem) {
        if (elem.setSelectionRange) {
            elem.setSelectionRange(pos, pos);
        } else if (elem.createTextRange) {
            var range = elem.createTextRange();
            range.collapse(true);
            range.moveEnd('character', pos);
            range.moveStart('character', pos);
            range.select();
        }
    });
    return this;
};
