$(document).ready(function() {
  var displayPage = 1;
  var pageSize = 9; // how many thumbs per page
  
  var thumbsCollection = $("#thumbs a");
  var totalThumbs = thumbsCollection.length;
  var totalPages = Math.ceil(totalThumbs / pageSize);      
  //alert("totalThumbs: " + totalThumbs + ", totalPages: " + totalPages);
  
  var sizeCounter = 0;
  var pageCounter = 1;
  
  $(thumbsCollection).each(      
    function (idx) {
      sizeCounter++;
      
      if (sizeCounter > pageSize) {
        sizeCounter = 1;
        pageCounter++;
      }
      
      $(this).attr("rel", "page-"+pageCounter);
      var title = $(this).attr("title");
      
      $(this).tooltip({ bodyHandler: function() {
          return "<div class=\"thumb-tooltip\">" + title + "</div>";
        }, 
        showURL: false, 
        track: true, 
        top: 5,
        left: 10});
  });
  
  // JS is working so show the pager
  $(".thumbs-pager").show();
  
  var prevId = "#prev";
  var nextId = "#next";
  
  SetDisplayPage(displayPage);
  
  $(prevId).click(function(eventObj) {
    eventObj.preventDefault();
    SetDisplayPage(displayPage-1);
  });
  
  $(nextId).click(function(eventObj) {
    eventObj.preventDefault();
    SetDisplayPage(displayPage+1);
  });
  
  function SetDisplayPage(newDisplayPage) {
    if (newDisplayPage > 0 && newDisplayPage <= totalPages) {
      // enable/disable previous and next nav as necessary
      var disabledClass = "disabled";
      if (newDisplayPage == 1) { $(prevId).addClass(disabledClass); }
      else { $(prevId).removeClass(disabledClass); }
      
      if (newDisplayPage == totalPages) { $(nextId).addClass(disabledClass); }
      else { $(nextId).removeClass(disabledClass); }
      
      var thumbRel = '';
      var thumbPage = 0;
      
      $(thumbsCollection).each(
        function() {
          thumbRel = $(this).attr("rel");
          thumbPage = parseInt(thumbRel.substr(thumbRel.indexOf("-")+1));
          
          if (thumbPage == newDisplayPage) { $(this).show(); }
          else { $(this).hide(); }
      });
      
      displayPage = newDisplayPage;
      
      // set pager info message
      $("#info").text("Page: " + displayPage + " of " + totalPages + " (" + totalThumbs + " images)");
    }
  }
});