let ANIMATION_DURATION = 200;

let cy2 = window.cy2 = cytoscape({
  container: document.getElementById('graph2-cy'),
  elements: data.elements,
  style: [
    {
      selector: 'node',
      style: {
        // <= 100 posts: 20px, >= 800 posts: 70px
        width: 'mapData(totalPosts, 100, 800, 20, 70)',
        height: 'mapData(totalPosts, 100, 800, 20, 70)'
      }
    }
  ],
  layout: {
    name: 'grid'
  }
});

// save original size
function saveOriginalSizes() {
  let eles = cy2.nodes();
  for (let i = 0; i < eles.length; i++) {
    let ele = eles[i];
    let widthInPx = ele.style().width;
    ele.data('originalSize', Number(widthInPx.substring(0, widthInPx.length - 2)));
  }
}

function restoreOriginalSizes() {
  console.log('restoring original sizes');
  let eles = cy2.nodes();
  eles.forEach(node => {
    node.style({
      width: node.data('originalSize'),
      height: node.data('originalSize')
    });
  });
}

function animateNode(node) {
  let animationQueue = [];
  let postsByDay = node.data('postsByDay');
  for (let day = 0; day < postsByDay.length; day++) {
    let postCount = postsByDay[day];
    // let widthInPx = node.data('originalSize');
    // let width = Number(widthInPx.substring(0, widthInPx.length - 2));
    let width = node.data('originalSize');
    let newSize = Math.floor(width + 1.4 * postCount);
    animationQueue.push(node.animation({
      style: {
        width: newSize,
        height: newSize
      },
      duration: ANIMATION_DURATION
    }));
  }
  return animationQueue;
}

function animateNodes() {
  if (!cy2.nodes()[0].data('originalSize')) {
    saveOriginalSizes();
  } else {
    restoreOriginalSizes();
  }

  let playQueue = function(queue, position) {
    if (position < queue.length) {
      queue[position].play().promise('complete').then(() => {
        // console.log('going to next animation in queue');
        playQueue(queue, position + 1);
      });
    } else {
      // looping animation
      playQueue(queue, 0);
    }
  };

  let nodes = cy2.nodes();
  for (let i = 0; i < nodes.length; i++) {
    let node = nodes[i];
    let animationQueue = animateNode(node);
    playQueue(animationQueue, 0);
  }
}

Reveal.addEventListener('slidechanged', function(event) {
  if (event.currentSlide.id === 'animation') {
    cy2.resize();
    cy2.layout();
    animateNodes();
  }
});

// let cy2 = window.cy2 = cytoscape({
//   container: document.getElementById('graph2-cy'),
//   elements: [
//     { data: { id: 1 } },
//     { data: { id: 2 } },
//     { data: { id: '1-2', source: 1, target: 2 } }
//   ],
//   layout: {
//     name: 'grid'
//   }
// });

// Reveal.addEventListener('slidechanged', function(event) {
//   if (event.currentSlide.id === 'animation') {
//     cy2.resize();
//     cy2.layout();
//     cy2.nodes().animate({
//       style: {
//         'background-color': 'red'
//       }
//     });
//   }
// });

@@ -682,24 +682,27 @@
 )));%0A  %7D%0A%7D%0A%0A
+// 
 function res
@@ -723,16 +723,19 @@
 zes() %7B%0A
+// 
   consol
@@ -769,18 +769,21 @@
 izes');%0A
+//
   
+ 
 let eles
@@ -798,16 +798,19 @@
 odes();%0A
+// 
   eles.f
@@ -822,24 +822,27 @@
 h(node =%3E %7B%0A
+// 
     node.sty
@@ -846,16 +846,19 @@
 style(%7B%0A
+// 
       wi
@@ -889,16 +889,19 @@
 Size'),%0A
+// 
       he
@@ -936,22 +936,31 @@
 e')%0A
+//
     
+ 
 %7D);%0A
+// 
   %7D);%0A
+// 
 %7D%0A%0Af
@@ -1670,16 +1670,19 @@
 se %7B%0A   
+ //
  restore
@@ -2383,559 +2383,97 @@
 %0A  %7D
-%0A%7D);%0A%0A// let cy2 = window.cy2 = cytoscape(%7B%0A//   container: document.getElementById('graph2-cy'),%0A//   elements: %5B%0A//     %7B data: %7B id: 1 %7D %7D,%0A//     %7B data: %7B id: 2 %7D %7D,%0A//     %7B data: %7B id: '1-2', source: 1, target: 2 %7D %7D%0A//   %5D,%0A//   layout: %7B%0A//     name: 'grid'%0A//   %7D%0A// %7D);%0A%0A// Reveal.addEventListener('slidechanged', function(event) %7B%0A//   if (event.currentSlide.id === 'animation') %7B%0A//     cy2.resize();%0A//     cy2.layout();%0A//     cy2.nodes().animate(%7B%0A//       style: %7B%0A//         'background-color': 'red'%0A//       %7D%0A//     %7D);%0A//   %7D%0A// 
+ else %7B%0A    cy2.nodes().stop(true, false); // stop all animations when leaving slide%0A  %7D%0A
 %7D);%0A

stop animation on leaving slide