let _layout = {
  items: {
    size: 128,
    gutter: 8
  },
  min_margin: 16,
  min_rows: 2,
  min_cols: 3
};
_tpl = {
  item: ({ id }) => `<article id="id${id}"><a href="#id${id}"><img src="//f0ck.me/t/${id}.png" /></a><div class="info"><div class="description"><h1>${id}</h1><p>Penis</p></div><ol><li>Infos lol</li><li>und so</li></ol></div></article>`
};
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 = {
  page: document.querySelector("div#page"),
  wall: document.querySelector("section#wall")
};

window.onload = () => {
  function init() {
    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.wall.style.top.replace("px",""));
      let go = `${(top + (-deltaY * ((_layout.items.size + _layout.items.gutter) * _scrollrows)))}`;
      _container.wall.animate( [{ top: `${top}px` }, { top: `${go}px` } ], { duration: dura } );
      setTimeout(() => { // after scroll
        _container.wall.style.top = `${go}px`;
        _scroll = false;
      }, dura);
    }
  }
  //document.addEventListener("wheel", scroll);

  function render() {
    let blah = "";
    _cache.forEach(e => {
      blah += [{ id: e.id }].map(_tpl.item).join``;
    });
    _container.wall.innerHTML = blah;
  }

  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));
  }

  //api.allorigins.win/raw?url=https:
  function getItems(sum = 0, pos = "bottom") { // top/bottom
    fetch(`//f0ck.me/api/user/${rt.user}`)
      .then(res => res.json())
      .then(data => _cache = data);
  }

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