catalogMenuSlider = document.querySelector('.catalog-menu');
catalogMenuItemsSlider = document.querySelector('.catalog-menu__items');

drag = new DragSlider({
    listener: catalogMenuSlider,
    container: catalogMenuItemsSlider,
    scrollBtnClass: '.catalog-menu__scroll-btn',
    onStop: processDragMenuStop,
});
drag.init();
new ResizeObserver(drag.onResize).observe(catalogMenuSlider);


// Fixed header
catalogMenuSliderFixed = document.querySelector('.catalog-menu-fixed');
catalogMenuItemsSliderFixed = document.querySelector('.catalog-menu-fixed__items');

dragFixed = new DragSlider({
    listener: catalogMenuSliderFixed,
    container: catalogMenuItemsSliderFixed,
    scrollBtnClass: '.catalog-menu-fixed__scroll-btn',
    onStop: processDragMenuStop,
});
dragFixed.init();
new ResizeObserver(dragFixed.onResize).observe(catalogMenuSliderFixed);

/* Обработчик события остановки прокрутки скроллящегося меню */
function processDragMenuStop(slider) {
    leftBtn = document.querySelector(slider.scrollBtnClass + '.-left');
    rightBtn = document.querySelector(slider.scrollBtnClass + '.-right');

    // Отображаем стрелку вправо, если не достигли правого края
    if (slider.target * -1 < (slider.mWidth - slider.vWidth)) {
      rightBtn.style.display = 'block';
    }
    else {
      rightBtn.style.display = 'none';
    }
    console.log('stop', slider.scrollBtnClass, slider.target, slider.mWidth - slider.vWidth);

    // Отображаем стрелку влево, если сместились от левого края
    if (slider.target < 0) {      
      leftBtn.style.display = 'block';
    }
    else {
      leftBtn.style.display = 'none';
    }    
}

/*const slider = document.querySelector('.menu-scrolled');
const container = document.querySelector('.menu-scrolled__items');

let vWidth = 0;
let mWidth = 0;

const ease = .09;
let target = 0, current = 0, rAF = null;

const options = {
  listener: slider,
  multiplier: 1
};
const drag = new Drag(options);
drag.on(calc);

function calc(event) {
  target += event.X;
  clampTarget();
  if (rAF === null) requestAnimationFrame(moveSlider);
}

function moveSlider() {
  const offset = (target - current);
  current += offset * ease;

  // Move the slider content container.
  container.style.transform = `translate3d(${round(current)}px,0,0)`;

  // Stop the loop if there is no move to do.
  if (offset.toFixed(2) == 0.00) {
    rAF = null;
    container.style.pointerEvents = "auto";
  }
  else {
    container.style.pointerEvents = "none";
    rAF = requestAnimationFrame(moveSlider);
  }
};

const clampTarget = function() {
  const max = mWidth - vWidth;
  target = clamp(target, -1*max, 0);
};

const onResize = () => {
  // Items
  vWidth = slider.getBoundingClientRect().width;//window.innerWidth;
  mWidth = container.getBoundingClientRect().width;

  clampTarget();
  rAF = requestAnimationFrame(moveSlider);
};

new ResizeObserver(onResize).observe(slider);
//window.addEventListener('resize', onResize);
onResize();*/