(function () {
  'use strict';

  function getSecondList() {
    return (
      document.querySelector('.product_list .collection._2nd_view .grid_small') ||
      document.querySelector('.collection._2nd_view .grid_small')
    );
  }

  function syncSecondViewOrder() {
    var layout = document.querySelector('.shop-layout');
    if (!layout) return;

    var firstItems = [].slice.call(
      layout.querySelectorAll('.product-container.product-item.w-dyn-item[sf-product]')
    );
    if (!firstItems.length) return;

    var list2 = getSecondList();
    if (!list2) return;

    var orderIds = firstItems.map(function (el) { return el.getAttribute('sf-product') || ''; });
    var items2 = [].slice.call(
      list2.querySelectorAll('.product-container.product-item.w-dyn-item[sf-product]')
    );
    if (!items2.length) return;

    var byId = {};
    items2.forEach(function (el) {
      var id = el.getAttribute('sf-product');
      if (id) byId[id] = el;
    });

    orderIds.forEach(function (id) {
      if (id && byId[id]) list2.appendChild(byId[id]);
    });
  }

  function onSortChange() {
    setTimeout(syncSecondViewOrder, 50);
    setTimeout(syncSecondViewOrder, 300);
  }

  function init() {
    var select = document.getElementById('Sort');
    if (!select) return;
    select.addEventListener('change', onSortChange);
    if (document.querySelector('.shop-layout') && getSecondList()) {
      setTimeout(syncSecondViewOrder, 500);
    }
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
})();