$(document).ready(function() {
    console.log("ready");
    $(document).on('keydown', function(e){
        if(e.which == 37){
            $("#move-left").attr('id','char-pants-left');
            $("#char-arm-left-up").attr('id','char-arm-left');
            $("#char-arm-right-up").attr('id','char-arm-right');
            $("#char-container").css({
                'left': '-=2rem',
            })
            $("#char-pants-left").attr('id','move-left');
            $("#char-pupil-left").attr('id','char-pupil-left-move');
            $("#char-pupil-right").attr('id','char-pupil-right-move');
            $("#char-arm-left").attr('id','char-arm-left-up');
            $("#char-arm-right").attr('id','char-arm-right-up');
        }
        if(e.which == 38){
            $("#char-arm-left-up").attr('id','char-arm-left');
            $("#char-arm-right-up").attr('id','char-arm-right');
            $("#char-container").css({
                'top': '-=2rem',
            })
            $("#char-arm-left").attr('id','char-arm-left-up');
            $("#char-arm-right").attr('id','char-arm-right-up');
        }
        if(e.which == 39){
            $("#move-right").attr('id','char-pants-right');
            $("#char-arm-left-up").attr('id','char-arm-left');
            $("#char-arm-right-up").attr('id','char-arm-right');
            $("#char-container").css({
                'left': '+=2rem',
            })
            $("#char-pants-right").attr('id','move-right');
            $("#char-pupil-left-move").attr('id','char-pupil-left');
            $("#char-pupil-right-move").attr('id','char-pupil-right');
            $("#char-arm-left").attr('id','char-arm-left-up');
            $("#char-arm-right").attr('id','char-arm-right-up');
        }
        if(e.which == 40){
            $("#char-arm-left-up").attr('id','char-arm-left');
            $("#char-arm-right-up").attr('id','char-arm-right');
            $("#char-container").css({
                'top': '+=2rem',
            })
            $("#char-arm-left").attr('id','char-arm-left-up');
            $("#char-arm-right").attr('id','char-arm-right-up');
        }
    })
    //if($('#char-container').
});