Cacher is the code snippet organizer for pro developers

$.fn.extend({
  animateCss: function(animationName) {
    var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
    $(this).addClass('animated ' + animationName).one(animationEnd, function() {
      $(this).removeClass('animated ' + animationName);
    });
  }
});
(function($) {
  $.fn.extend({
    // get page height

    MyPagination: function(options) {
      var defaults = {
        height: '400',
        fadeSpeed: 2000
      };
      var options = $.extend(defaults, options);

      //Creating a reference to the object
      var objContent = $(this);

      // other inner variables
      var fullPages = new Array();
      var subPages = new Array();
      var height = 0;
      var lastPage = 1;
      var paginatePages;

      // initialization function
      init = function() {
        objContent.children().each(function(i) {
          if (height + this.clientHeight > options.height) {
            fullPages.push(subPages);
            subPages = new Array();
            height = 0;
          }

          height += this.clientHeight;
          subPages.push(this);
        });

        if (height > 0) {
          fullPages.push(subPages);
        }

        // wrapping each full page
        $(fullPages).wrap("<div class='page-in'></div>");

        // hiding all wrapped pages
        objContent.children().hide();

        // making collection of pages for pagination
        paginatePages = objContent.children();

        // show first page
        showPage(lastPage);

        // draw controls
        showPagination($(paginatePages).length);

      };

      // update counter function
      updateCounter = function(i) {
        $('#page_number').html(i);
        addCurrentClass(i);
      };

      addCurrentClass = function(i) {
        $('.page-pagin-current').removeClass('page-pagin-current');
        $('.page-pagin-' + i).addClass('page-pagin-current');

        if (isEven(i)) {
          $('body').removeClass('background-white');
          $('body').addClass('background-darkblue');
        } else {
          $('body').removeClass('background-darkblue');
          $('body').addClass('background-white');
        };

        if ($('.pagination-inpage ul li:nth-child(2)').hasClass('page-pagin-current')) {
          $('.prevnext-prev').addClass('x-hidden');
        } else {
          $('.prevnext-prev').removeClass('x-hidden');
        };

        if ($('.pagination-inpage ul li:last-child').hasClass('page-pagin-current')) {
          $('.prevnext-next').addClass('x-hidden');
        } else {
          $('.prevnext-next').removeClass('x-hidden');
        };
      }

      // show page function
      showPage = function(page) {
        i = page - 1;
        if (paginatePages[i]) {
          // hiding old page, display new one



          var currPage = lastPage;
          lastPage = i;

          if (currPage === '0' && lastPage === '1') {
            $('.page-in').removeClass('page-in-currents');
            $('.page-in:first-child').addClass('page-in-currents');
          } else {
            $('.page-in').removeClass('page-in-currents');
            $(paginatePages[lastPage]).addClass('page-in-currents');
          }


          if (currPage < lastPage) {

            console.log('currPage ' + currPage + ' < ' + 'lastPage ' + lastPage)

            $(paginatePages[lastPage]).fadeOut('1000');
            $(paginatePages[lastPage]).animateCss('fadeOutUp');
            $(paginatePages[lastPage]).removeClass('fromBottom');
            $(paginatePages[lastPage]).css('display', 'none');



            console.log('down');




            $(paginatePages[lastPage]).fadeIn('1000');
            $(paginatePages[lastPage]).addClass('fromBottom');


          } else {

            console.log('currPage ' + currPage + ' < ' + 'lastPage ' + lastPage)

            $(paginatePages[lastPage]).fadeOut('1000');
            $(paginatePages[lastPage]).animateCss('fadeOutUp');
            $(paginatePages[lastPage]).removeClass('fromBottom');
            $(paginatePages[lastPage]).css('display', 'none');


            console.log('up')

            $(paginatePages[lastPage]).fadeIn('1000');
            $(paginatePages[lastPage]).addClass('fromBottom');
          }





          // and updating counter
          updateCounter(page);
          addCurrentClass(page);
        }
      };

      // show pagination function (draw switching numbers)
      showPagination = function(numPages) {
        var pagins = '';
        for (var i = 1; i <= numPages; i++) {
          pagins += '<li class="page-pagin page-pagin-' + i + '"><a href="#" data-page-id="' + i + '">' + i + '</a></li>';
        }
        $('.pagination-inpage li:first-child').after(pagins);
        $('.page-pagin-1').addClass('page-pagin-current');
        $('.prevnext-prev').addClass('x-hidden');
      };


      // perform initialization
      init();

      $(document).keydown(function(e) {
        // if DOWN pressed
        if (e.keyCode == '40' || e.keyCode == '32') {
          showPage(lastPage + 2);
          // if UP pressed
        } else if (e.keyCode == '38') {
          showPage(lastPage);
        }
      });

      // on mouse scroll display next and prev page
      $(window).bind('mousewheel', function(event) {
        if (event.originalEvent.wheelDelta >= 0) {
          showPage(lastPage);
        } else {
          showPage(lastPage + 2);
        }
      });

      // and binding 2 events - on clicking to Prev
      $('.prevnext #prev').click(function() {
        showPage(lastPage);
      });

      // and Next
      $('.prevnext #next').click(function() {
        showPage(lastPage + 2);
      });

      // check current clicked nav button ID  and go to assotiated page
      $('.pagination-inpage a').on('click', function(event) {
        event.preventDefault();
        var navToPage = $(this).attr('data-page-id');
        showPage(navToPage);
      });
    }
  });
})(jQuery);

// custom initialization
jQuery(window).load(function() {
  $('.container-page-content').MyPagination({
    height: ContentCalHeight,
    fadeSpeed: 1000
  });
});