$(function() {
  
  $("#dir_items").before('<p class="pagination"><a href="#" id="previous" class="paginate-links">&lt; Previous Page</a>&nbsp;<a href="#" id="next" class="paginate-links">Next Page &gt;</a></p>');
  $(".pagination").after('<p id="loading">loading...</p>');
  $("#dir_items").html('');

  var perPage = 20;
  var currentPage = 0;

  var totalItems = items.length;
  var totalPages = Math.ceil(totalItems / perPage);
  var itemIds = '';

  function loadItems(currentPage, perPage) {

        itemIds = '';
        for (var i=currentPage; i < (currentPage+perPage); i++) {
          if (items[i] != undefined) {
            itemIds += "-" + items[i];  
          }
              
        }

    $.ajax({
      url: "/embeds/dir_ajax2/" + itemIds,
      cache: false,
      loading: function(){$("#loading").show();},
      success: function(html){
        $("#loading").hide();
        $("#dir_items").html(html);
      }
    });
  }

  function paginate() {
    currentPage <= 0 ?  $('#previous').hide() : $('#previous').show();
    currentPage >= totalPages-1 ? $('#next').hide() : $('#next').show();
  }

  $('#previous').click(function(){
   $("#dir_items").html('');
    $("#loading").show();
    currentPage--;
    loadItems(currentPage*perPage, perPage);
    paginate();
    return false;
  });

  $('#next').click(function(){
    $("#dir_items").html('');
    $("#loading").show();
    currentPage++;
    loadItems(currentPage*perPage, perPage);
    paginate();
    return false;
  });

  loadItems(currentPage, perPage)
  paginate();

});