$('[name=psani]').keyup(function(){
    
    var chars = $(this).val().split("");
    var vzor = $("#vzor").text().split("");
    var correctIndex = -1;
    for(var i in chars){
        if(chars[i] == vzor[i]){
            correctIndex = parseInt(i);
        }else{
            break;
        }
    }
    var correct = '';
    var wrong = '';
    
    if(correctIndex !== -1){
        var correct = $("#vzor").text().substring(0,correctIndex+1);
    }
    if(chars.length > correctIndex+1){
        var wrong = $("#vzor").text().substring(correctIndex+1, chars.length);
    }
    var rest = $("#vzor").text().substring(chars.length, vzor.length-1);
    
    $('#display')
    .html('<span id="correct">'+correct+'</span><span id="wrong">'+wrong+'</span>'+rest);
    
    $('#auticko').css('left', $('#draha').width() * ((correctIndex+1) / vzor.length));
    
}).keyup();