$(document).ready(function () {
  const resizer = $('#resizer');
  const leftSide = resizer.prev();
  const rightSide = resizer.next();
  let x = 0;
  let leftWidth = 0;

  const mouseDownHandler = function (e) {
    x = e.clientX;
    leftWidth = leftSide.width();

    $(document).on('mousemove', mouseMoveHandler);
    $(document).on('mouseup', mouseUpHandler);
  };

  const mouseMoveHandler = function (e) {
    const dx = e.clientX - x;
    const newLeftWidth = ((leftWidth + dx) * 100) / resizer.parent().width();
    leftSide.css('width', `${newLeftWidth}%`);
  };

  const mouseUpHandler = function () {
    $(document).off('mousemove', mouseMoveHandler);
    $(document).off('mouseup', mouseUpHandler);
  };

  resizer.on('mousedown', mouseDownHandler);

  // Tab and content handling
  const contents = $('.content-tab');
  const tab = $('.tab');

  tab.on('click', function () {
    const id = $(this).data('content');
    tab.removeClass('active');
    $(this).addClass('active');
    contents.removeClass('active');
    $(`#${id}`).addClass('active');



    if (id === 'about') {
      $.when(
        $.getScript('sketch.js'),
        $.getScript('box.js')
      ).done(function () {
        initMatterJS();
        createBoxes();
      });
    }
  });

  const subtab = $('.subtab');
  subtab.on('click', function () {
    const id = $(this).data('content');
    $(this).addClass('active');
    contents.removeClass('active');
    $(`#${id}`).addClass('active');

  });

  // Initially show the about tab
  $('.tab[data-content="about"]').click();
});