let _layout = {
  items: {
    size: 128,
    gutter: 8
  },
  min_margin: 16,
  min_rows: 2,
  min_cols: 3
};
_tpl = {
  row: ({ rowid, items }) => `<div class="row" data-row="${rowid}">${items}</div>`,
  item: ({ id, }) => `<a href="//f0ck.me/${id}" class="thumb" style="background-image:url('//f0ck.me/t/${id}.png')"></a>`,
};
let rt = {
  user: "Flummi",
  mime: "",
  stamp: 1506717559,
  act: 0,
  items: new Map(),
  last: 0,
  first: 0,
};
let _cache = [];
let _dims = null;
let _scroll = false;
let _scrollrows = 4;
let _container = {
  debug: document.querySelector("div.navbar"),
  page: document.querySelector("div#page"),
  thumbs: document.querySelector("div#thumbs")
};

window.onload = () => {
  function resize() {
    let rows = Math.max(~~((window.innerHeight - _layout.min_margin + _layout.items.size) / (_layout.items.size + _layout.items.gutter)), _layout.min_rows);
    let cols = Math.max(~~((window.innerWidth - _layout.min_margin) / (_layout.items.size + _layout.items.gutter)), _layout.min_cols);
    let pageWidth = cols * (_layout.items.size + _layout.items.gutter);
    let margin = Math.max((window.innerWidth - pageWidth + _layout.items.gutter) / _layout.min_rows, 0);
    let page = _container.page;
    page.style.width = pageWidth;
    page.style.marginLeft = margin;
    _dims = {
      rows: rows,
      cols: cols,
      eps: rows * cols,
      pageWidth: pageWidth,
      margin: margin
    };
    render();
  }
  function scroll(e) {
    if(e.preventDefault)
      e.preventDefault();
    let deltaY = e.deltaY < 0?-1:1; // - up, + down

    if(!_scroll) {
      _scroll = true;
      let dura = 500;
      let top = parseInt(_container.thumbs.style.top.replace("px",""));
      let go = `${(top + (-deltaY * ((_layout.items.size + _layout.items.gutter) * _scrollrows)))}`;
      _container.thumbs.animate( [{ top: `${top}px` }, { top: `${go}px` } ], { duration: dura } );
      setTimeout(() => { // after scroll
        _container.thumbs.style.top = `${go}px`;
        _scroll = false;
        //console.log( getpos( thumbs.querySelectorAll("div.row") ) );
        console.log( getposall( thumbs.querySelectorAll("div.row") ) );
      }, dura);
    }
  }
  resize();
  window.addEventListener("resize", resize);
  document.addEventListener("wheel", scroll);

  function render() {
    let items = new Array(_dims.eps).fill({id: 25788}, 0, _dims.eps);
    let rowtpl = "";
    let blah = "";
    let rowid = 0;
    let j = 0;
    items.forEach(e => {
      rowtpl += [{ id: e.id }].map(_tpl.item).join``;
      if(++j % _dims.cols === 0) {
        blah += [{ rowid: rowid++, items: rowtpl }].map(_tpl.row).join``;
        rowtpl = "";
      }
    });
    _container.thumbs.innerHTML = blah;
    //console.log( getpos( thumbs.querySelectorAll("div.row") ) );
    console.log( getposall( thumbs.querySelectorAll("div.row") ) );
  }

  function getpos(elems) {
    return [elems[0], elems[elems.length-1]].map(e => [e.children[0], e.parentNode].reduce((a, b) => a.offsetTop + b.offsetTop));
  }

  function getposall(elems) {
    return [...elems].map(e => [e.children[0], e.parentNode].reduce((a,b) => a.offsetTop + b.offsetTop));
  }

  function getItems(sum = 0, pos = "bottom") { // top/bottom
    sum = sum===0?_dims.eps:sum;
    Promise.all([
      fetch(`/api/test/?user=${rt.user}&mime=${rt.mime}&stamp=${rt.stamp}&eps=${sum}`),
      fetch(`/api/test/?user=${rt.user}&mime=${rt.mime}&stamp=${rt.stamp}&eps=${sum}&get=meta`)
    ])
    .then(res => Promise.all(res.map(muh => muh.json())))
    .then(data => {
      _cache = data[0].items[1].concat(data[0].items[0]).sort().reverse();
      /*return {
        act: data[0].items[0][0],
        items: data[0].items[1].concat(data[0].items[0]),
        items: [...data[0].items[1], ...data[0].items[0]],
        meta: data[1].meta
      };*/
    });
  }

  getItems();
  setTimeout(() => { console.log(_cache); }, 1000);
};