$(document).ready(() => {
  $(window).on('resize', () => {
    let rows = Math.max(Math.floor(($(window).height() - 16 + 128) / (128 + 8)), 2);
    let cols = Math.max(Math.floor(($(window).width() - 16) / (128 + 8)), 3);
    let pageWidth = cols * (128 + 8);
    let margin = Math.max(($(window).width() - pageWidth + 8) / 2, 0);
    $("div#page").css({
      'width': pageWidth,
      'margin-left': margin
    });
  }).resize();

  var scroll = false;
  $("body").on('DOMMouseScroll mousewheel', function(e) {
    e.preventDefault();
    if(!scroll) {
      scroll = true;
      $("#thumbs").animate({
        top: `${(parseInt($("#thumbs").css("top").replace("px","")) + (e.deltaY * 128))}px`
      }, 200, () => {
        scroll = false;
      });
    }
  });

});