lotsa pagination problems

pagination.js

// create pagintaion
function display_pagination(total) {
    var pages = total / 8;
    var pagination_top = pages - 4;
    var dots = false;
    var pagination_html = '<nav aria-label="Blog Listing Navigation" class="col-md-10 col-md-offset-1"><ul class="pagination">';
    pagination_html += '<li id="pagination-back" class="pagination-link arrow page-item" data-start="BACK" data-end="BACK"><span aria-label="Previous" class="arrow-nobg page-link"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></span></li>';
    var pagination_start = 0;
    var pagination_end = total < 8 ? total % 8 : 7;
    for(var i = 0; i < pages; i++) {
        if(pagination_start > 0) {
            pagination_end = (total - pagination_start) > 8 ? pagination_start + 7 : pagination_start + ((total % 8) - 1);
            pagination_html += '<li class="pagination-link page-item" data-start="' + pagination_start + '" data-end="' + pagination_end + '"><span class="page-link">' + (i+1) + '</span></li>';
            pagination_start = pagination_end + 1;
        } else {
            pagination_html += '<li class="pagination-link page-item" data-start="' + pagination_start + '" data-end="' + pagination_end + '"><span class="page-link">' + (i+1) + '</span></li>';
            pagination_start = pagination_end + 1;
        }
    }

    pagination_html += '<li id="pagination-next" class="pagination-link arrow page-item" data-start="NEXT" data-end="NEXT"><span aria-label="Next" class="arrow-nobg page-link"><span aria-hidden="true">&raquo;</span><span class="sr-only">Next</span></span></li>';
    pagination_html += '</ul></nav>';
    hasPagination = $('#pagination').length;
    if(hasPagination) {
        $('#pagination').html(pagination_html).ready(function() {
            $('.pagination li').eq(1).addClass('active')
        });
    } else {
        $('.resource-wrapper').append('<div id="pagination">' + pagination_html + '</div>');
    }
}


/*
 * loop through all the pagination values (this is ALL of them if we have 500 posts,
 * we loop through them all and hide/show/activate them)
 * we use $(this) to show what we are changing on the DOM
 * we use $this to reference the current page item in the loop
 */

$('.page-item').each(function() {
    $elem = $(this);
    var page_item = {
        'elem': $elem,
        'index': $elem.index(),
        'start': $elem.data('start'),
        'is_disabled': $elem.hasClass('disabled'),
        'is_skipped': $elem.hasClass('pagination-skip'),
        'is_arrow': $elem.hasClass('arrow'),
        'is_active': $elem.hasClass('active'),
        'id': $elem.attr('id')
    };

    if(page_item.start === start && !page_item.is_disabled) {
        if(!page_item.is_arrow) {
            $(this).addClass('active');
            pagination.base_index == page_item.index;
        }
    }
    // these guys will just be fine - we want them to display. They already should, we will hide the others
    // console.log(pagination);
    // console.log(pagination.range);

    if(page_item.index >= pagination.range[0] && page_item.index <= pagination.range[1]) {
        pagination.active++;
    } else if(page_item.index == 1) {

    } else if(page_item.index == pagination.ceiling) {

    } else if(pagination.active < 4 && page_item.index > (pagination.ceiling - 10)) {

    } else if(pagination.is_skipped) {


    } else {
        $(this).addClass('hidden');
    }

    // for the back pagination
    if(page_item.id == 'pagination-back') {
        $(this).removeClass('hidden');
        switch(start) {
            case 0:
                $(this).addClass('disabled');
                break;
            default:
                var new_finish = start - 1
                var new_start = new_finish - 7;
                $(this).removeClass('disabled').data('end', new_finish).data('start', new_start);
        }
    }

    // for the next pagination
    if(page_item.id == 'pagination-next') {
        $(this).removeClass('hidden');
        switch(finish) {
            case (current_posts.length - 1):
                $(this).addClass('disabled')
                break;
            default:
                var new_start = finish + 1;
                var new_finish = new_start + 7 > (current_posts.length - 1) ? current_posts.length - 1 : new_start + 7;
                $(this).removeClass('disabled').data('end', new_finish).data('start', new_start);
        }
    }
    // for our dot dot dot but this isn't active atm but is a JUST IN EDGE CASE
    // if(page_item.is_skipped) {
    //     $(this).removeClass('active').addClass('disabled');
    // }
});
// create dot dots in place if range doesn't touch the beginning and end of pagination

if($('.page-item').eq(2).hasClass('hidden') && $('.pagination-skip-start').length != 1) {
    // console.log('inserting after first pagination item')
    $('.page-item').eq(2).after(pagination.skip_html_start);
}
// console.log(pagination)
var pagination_adjusted = pagination.ceiling - pagination.skipped - 1;
// console.log('checking on eq(' + pagination_adjusted + ')' );
// console.log($('.page-item').eq(pagination_adjusted));
// console.log('skip end length: ' + pagination_adjusted);
if($('.page-item').eq(pagination_adjusted).hasClass('hidden')) {
    // console.log('adding the end dot dot dot')
    // insert before last pagination item
    $('.page-item').eq(pagination_adjusted).before(pagination.skip_html_end);
}

// after making the pagination look right, then return the valid html we built earlier in function
// this function is a little long and could be broken down
return pagination.html;
}