window.addEventListener('load', () => {
  var
  carousels = document.querySelectorAll('.carousel');


  for (var i = 0; i < carousels.length; i++) {if (window.CP.shouldStopExecution(0)) break;
    carousel(carousels[i]);
  }window.CP.exitedLoop(0);
});

function carousel(root) {
  var
  figure = root.querySelector('.carousel figure'),
  nav = root.querySelector('.carousel nav'),
  images = figure.children,
  n = images.length,
  gap = root.dataset.gap || 0,
  bfc = ('bfc' in root.dataset),

  theta = 2 * Math.PI / n,
  currImage = 0;

  drag = {'start':{'x':0, 'y':0}, 'end':{'x':0, 'y':0}} // pp add

  setupCarousel(n, parseFloat(getComputedStyle(images[0]).width));
  window.addEventListener('resize', () => {
    setupCarousel(n, parseFloat(getComputedStyle(images[0]).width));
  });

  setupNavigation();

  function setupCarousel(n, s) {
    var
    apothem = s / (2 * Math.tan(Math.PI / n));


    figure.style.transformOrigin = `50% 50% ${-apothem}px`;

    for (var i = 0; i < n; i++) {if (window.CP.shouldStopExecution(1)) break;
      images[i].style.padding = `${gap}px`;}window.CP.exitedLoop(1);
    for (i = 1; i < n; i++) {if (window.CP.shouldStopExecution(2)) break;
      images[i].style.transformOrigin = `50% 50% ${-apothem}px`;
      images[i].style.transform = `rotateY(${i * theta}rad)`;
    }window.CP.exitedLoop(2);
    if (bfc) {
      for (i = 0; i < n; i++) {if (window.CP.shouldStopExecution(4)) break;if (window.CP.shouldStopExecution(3)) break;
        images[i].style.backfaceVisibility = 'hidden';}window.CP.exitedLoop(4);window.CP.exitedLoop(3);}

    rotateCarousel(currImage);
  }

  function setupNavigation()
	{
	// on button prev, next click event
	nav.addEventListener('click', onClick, true);
	function onClick(e)
		{
		e.stopPropagation();
		var t = e.target;
		if (t.tagName.toUpperCase() != 'BUTTON')
			return;
		if (t.classList.contains('next'))
			{currImage++;} else {currImage--;}
		rotateCarousel(currImage);
		}

	// mouse drag event
	figure.addEventListener('mousedown', onMouseDown, true);
	figure.addEventListener('mousemove', onMouseMove, true);
	figure.addEventListener('mouseup', onMouseUp, true);

	function onMouseDown(e)
		{
		e.stopPropagation();
		var t = e.target;
		if (t.tagName.toUpperCase() == 'IMG')//SPAN' && t.className=="item")
			{drag.start.x = e.pageX;}
		return false;
		}

	function onMouseMove(e)
		{
		e.stopPropagation();
		var t = e.target;
		if (t.tagName.toUpperCase() == 'IMG' && drag.start.x>0)//SPAN' && t.className=="item")
			{drag.end.x = e.pageX; rotateByDrag();}
		return false;
		}
	function onMouseUp(e)
		{
		e.stopPropagation();
		var t = e.target;
		if (t.tagName.toUpperCase() == 'IMG' && drag.start.x>0)//SPAN' && t.className=="item")
			{drag.start.x = 0; drag.end.x = 0;}
		return false;
		}

	function rotateByDrag()
		{
		var diff = drag.end.x - drag.start.x;
		if (Math.abs(diff)>50)
			{
		      	if (diff > 0)
				{currImage++;} else {currImage--;}
			rotateCarousel(currImage);
			drag.start.x = 0; drag.end.x = 0;
			}
		}
	}

  function rotateCarousel(imageIndex) {
    figure.style.transform = `rotateY(${imageIndex * -theta}rad)`;
  }

}
