var progress = require('./progress');
var fromJson = require('vdom-as-json/fromJson');
var patchElement = require('virtual-dom/patch');
var detailViewOrchestrator = require('./detailViewOrchestrator');
var worker = require('./worker');
var debounce = require('debounce');
var DEBOUNCE_DELAY = 50;
var SCROLL_PREFETCH_OFFSET = 20;
var $ = document.querySelector.bind(document);

var monstersList;
var footerHeight;
var endOfList;

function applyPatch(patchString) {
  console.time('JSON.parse()');
  var patchJson = JSON.parse(patchString);
  console.timeEnd('JSON.parse()');
  console.time('fromJson');
  var patch = fromJson(patchJson);
  console.timeEnd('fromJson');
  console.time('patchElement');
  patchElement(monstersList, patch);
  console.timeEnd('patchElement');
  progress.end();
}

function onFiltered(message) {
  console.timeEnd('worker-filter');
  console.log('worker sent message');

  if (message.type === 'monstersListPatch') {
    applyPatch(message.patch);
    endOfList = message.endOfList;
  }
}

function onMessage(message) {
  if (message.type === 'monstersListPatch') {
    onFiltered(message);
  }
}

function scrolledToBottom() {
  if (!footerHeight) {
    footerHeight = parseInt(getComputedStyle($('#footer')).height, 10);
  }
  // if the user is within SCROLL_PREFETCH_OFFSET pixels,
  // start prefetching the list items we need to append
  return (window.innerHeight + window.scrollY) >=
    (document.body.scrollHeight - footerHeight - SCROLL_PREFETCH_OFFSET);
}

function onScroll() {
  if (scrolledToBottom()) {
    console.log('scrolledToBottom');
    if (endOfList) {
      console.log('no more items to show');
      return;
    }
    console.time('worker-filter');
    progress.start(true);
    worker.postMessage({
      type: 'scrolledToBottom'
    });
  }
}

worker.addEventListener('message', e => {
  onMessage(e.data);
});

document.addEventListener('DOMContentLoaded', () => {
  monstersList = $('#monsters-list');
  monstersList.addEventListener('click', e => {
    e.stopPropagation();
    var el = e.target.parentElement.querySelector('.monster-sprite');
    var nationalId = parseInt(el.dataset.nationalId);
    console.time('worker-detail');
    worker.postMessage({
      type: 'detail',
      nationalId: nationalId
    });
    detailViewOrchestrator.animateInPartOne(nationalId);
  });
}, false);

window.addEventListener('scroll', debounce(onScroll, DEBOUNCE_DELAY));
window.addEventListener('resize', debounce(onScroll, 50));
onScroll();
@@ -1798,218 +1798,30 @@
 %0A%7D%0A%0A
-worker.addEventListener('message', e =%3E %7B%0A  onMessage(e.data);%0A%7D);%0A%0Adocument.addEventListener('DOMContentLoaded', () =%3E %7B%0A  monstersList = $('#monsters-list');%0A  monstersList.addEventListener('click', e =%3E
+function onClick(e)
  %7B%0A
-  
   e.
@@ -1839,18 +1839,16 @@
 tion();%0A
-  
   var el
@@ -1907,18 +1907,16 @@
 rite');%0A
-  
   var na
@@ -1959,18 +1959,16 @@
 nalId);%0A
-  
   consol
@@ -1992,18 +1992,16 @@
 tail');%0A
-  
   worker
@@ -2007,34 +2007,32 @@
 r.postMessage(%7B%0A
-  
     type: 'detai
@@ -2039,18 +2039,16 @@
 l',%0A    
-  
 national
@@ -2062,26 +2062,22 @@
 ionalId%0A
-  
   %7D);%0A
-  
   detail
@@ -2123,16 +2123,292 @@
 nalId);%0A
+%7D%0A%0Aworker.addEventListener('message', e =%3E %7B%0A  onMessage(e.data);%0A%7D);%0A%0Adocument.addEventListener('DOMContentLoaded', () =%3E %7B%0A  monstersList = $('#monsters-list');%0A  monstersList.addEventListener('click', e =%3E %7B%0A    if (e.target.tagName === 'BUTTON') %7B%0A      onClick(e);%0A    %7D%0A
   %7D);%0A%7D,

fix onclick