<script>
    $(document).ready(function () {
        var elts = $('.resource-children-item');
        var div = "<div id='pagination'>";
        window.m = Math.floor(elts.length/10);
        for(var i=1; i<=window.m;i++){
            if(i==1){
                div = div + "<a class='prev inactive'>&larr; Предыдущая</a>";
            }
            div = div + "<a class='pag-a' data-p='" + i + "'>" + i + "</a>";
        }
        div = div + "<a class=next>Следующая &rarr;</a></div>";
        $('.resource-view').append(div);
        $(".pag-a").eq(0).addClass("active");
        var act = $(".pag-a.active").attr("data-p");
        $('.block_' + act).addClass('active');
        
        
        $(".pag-a").click(function(){
            var act = $(this).text();
            $('.resource-children-item, .pag-a').removeClass('active');
            $('.block_' + act).addClass('active');
            $(this).addClass('active');
            $('.prev, .next').removeClass('inactive');
            if(act == 1){
                $('.prev').addClass('inactive');
            }
            if(act == window.m){
                $('.next').addClass('inactive');
            }
        });
        $(".next").click(function() {
        var ind = parseInt($(".pag-a.active").text());
                $('.resource-children-item, .pag-a').removeClass('active');
                $('.block_' + (ind + 1)).addClass('active');
                $(".pag-a").eq(ind).addClass('active');
                $('.prev, .next').removeClass('inactive');
                if(ind == parseInt(window.m)-1){
                    $('.next').addClass('inactive');
                }
        });
        $(".prev").click(function(){    
        var ind = parseInt($(".pag-a.active").text());
                $('.resource-children-item, .pag-a').removeClass('active');
                $('.block_' + (ind - 1)).addClass('active');
                $(".pag-a").eq(ind - 2).addClass('active');
                $('.prev, .next').removeClass('inactive');
                if(ind == 2){
                    $('.prev').addClass('inactive');
                }
        });    
    })
    $(document).keydown(function(e) {
    var ind = parseInt($(".pag-a.active").text());
        console.log(e.keyCode + ',' + window.m + "," + ind );
        if(e.keyCode == 39 && ind < window.m){
            $('.resource-children-item, .pag-a').removeClass('active');
            $('.block_' + (ind + 1)).addClass('active');
            $(".pag-a").eq(ind).addClass('active');
            $('.prev, .next').removeClass('inactive');
            if(ind == parseInt(window.m)-1){
                $('.next').addClass('inactive');
            }
            
        }
        if(e.keyCode == 37 && ind > 1){
            $('.resource-children-item, .pag-a').removeClass('active');
            $('.block_' + (ind - 1)).addClass('active');
            $(".pag-a").eq(ind - 2).addClass('active');
            $('.prev, .next').removeClass('inactive');
            if(ind == 2){
                $('.prev').addClass('inactive');
            }
        }
    
    });
    
</script>