(function() {
  const moviesID = [1261,1229,1223,1222,1217,1216,1209,1204,1203,1202,1199,1198,1197,1196,1194,1190,1189,1179,1178,1177,1163,1161,1154,1153,1152,1151,1149,1136,1134,1133,1132,1131,761];
  const moviesFile = ["https:\/\/shabby.jp\/stock_movies\/video\/1261\/","https:\/\/shabby.jp\/stock_movies\/video\/1229\/","https:\/\/shabby.jp\/stock_movies\/video\/1223\/","https:\/\/shabby.jp\/stock_movies\/video\/1222\/","https:\/\/shabby.jp\/stock_movies\/video\/1217\/","https:\/\/shabby.jp\/stock_movies\/video\/1216\/","https:\/\/shabby.jp\/stock_movies\/video\/1209\/","https:\/\/shabby.jp\/stock_movies\/video\/1204\/","https:\/\/shabby.jp\/stock_movies\/video\/1203\/","https:\/\/shabby.jp\/stock_movies\/video\/1202\/","https:\/\/shabby.jp\/stock_movies\/video\/1199\/","https:\/\/shabby.jp\/stock_movies\/video\/1198\/","https:\/\/shabby.jp\/stock_movies\/video\/1197\/","https:\/\/shabby.jp\/stock_movies\/video\/1196\/","https:\/\/shabby.jp\/stock_movies\/video\/1194\/","https:\/\/shabby.jp\/stock_movies\/video\/1190\/","https:\/\/shabby.jp\/stock_movies\/video\/1189\/","https:\/\/shabby.jp\/stock_movies\/video\/1179\/","https:\/\/shabby.jp\/stock_movies\/video\/1178\/","https:\/\/shabby.jp\/stock_movies\/video\/1177\/","https:\/\/shabby.jp\/stock_movies\/video\/1163\/","https:\/\/shabby.jp\/stock_movies\/video\/1161\/","https:\/\/shabby.jp\/stock_movies\/video\/1154\/","https:\/\/shabby.jp\/stock_movies\/video\/1153\/","https:\/\/shabby.jp\/stock_movies\/video\/1152\/","https:\/\/shabby.jp\/stock_movies\/video\/1151\/","https:\/\/shabby.jp\/stock_movies\/video\/1149\/","https:\/\/shabby.jp\/stock_movies\/video\/1136\/","https:\/\/shabby.jp\/stock_movies\/video\/1134\/","https:\/\/shabby.jp\/stock_movies\/video\/1133\/","https:\/\/shabby.jp\/stock_movies\/video\/1132\/","https:\/\/shabby.jp\/stock_movies\/video\/1131\/","https:\/\/shabby.jp\/stock_movies\/video\/761\/"];
  const moviesThumb = ["https:\/\/shabby.jp\/storage\/uploads\/admins\/stock_movies\/thumb\/1mvXgOIjfmBvf7egXGBSPvvuEu4LL9gc.jpg","https:\/\/shabby.jp\/storage\/uploads\/admins\/stock_movies\/thumb\/eBSRMbvVgiDTKRyklocTVizrqA3e6SRe.jpg","https:\/\/shabby.jp\/storage\/uploads\/admins\/stock_movies\/thumb\/j12fLh8HL9U0dsdk7KJ4KWxtsVgjiHN8.jpg","https:\/\/shabby.jp\/storage\/uploads\/admins\/stock_movies\/thumb\/yu99fIhdEpFRs9sV0bGg0ACqT3vIS6qm.jpg","https:\/\/shabby.jp\/storage\/uploads\/admins\/stock_movies\/thumb\/06Rd0pBX6nQr2cpBlIjJpVDjfLYZdpcL.jpg","https:\/\/shabby.jp\/storage\/uploads\/admins\/stock_movies\/thumb\/RPYG1haAV7Z78dUaV5TzFjxNpa5Ne0Rb.jpg","https:\/\/shabby.jp\/storage\/uploads\/admins\/stock_movies\/thumb\/Vsa2Z5IFV86Kg797wV13ySMvSXPdvlh9.jpg","https:\/\/shabby.jp\/storage\/uploads\/admins\/stock_movies\/thumb\/HpJyKA9EK7zVlwg1xAAH4I0QYg2VKZWn.jpg","https:\/\/shabby.jp\/storage\/uploads\/admins\/stock_movies\/thumb\/JyQ2XcxWOaFeIILwZDpFTmQXQ2zGbkdr.jpg","https:\/\/shabby.jp\/storage\/uploads\/admins\/stock_movies\/thumb\/OtG3ltXgnedUy8GiUkSMg9xlVHrUnjYs.jpg","https:\/\/shabby.jp\/storage\/uploads\/admins\/stock_movies\/thumb\/dJ2Kq7KuRxzYXLp1mvqZUJsVGNJtRMkd.jpg","https:\/\/shabby.jp\/storage\/uploads\/admins\/stock_movies\/thumb\/SjI43TfT9tv7QHh6UuNoetGw0p8GnVcB.jpg","https:\/\/shabby.jp\/storage\/uploads\/admins\/stock_movies\/thumb\/wzn8GpGqzUIKU1OpWvCNYbeKcz7qw6wv.jpg","https:\/\/shabby.jp\/storage\/uploads\/admins\/stock_movies\/thumb\/5dMoaDWHOeZhpw6ZTLP0hxBdWhzzOD8v.jpg","https:\/\/shabby.jp\/storage\/uploads\/admins\/stock_movies\/thumb\/NCkQjdrtghecblBL7NeRupD8mXZatLY9.jpg","https:\/\/shabby.jp\/storage\/uploads\/admins\/stock_movies\/thumb\/pCu6aWHcD9GlaSSNj5glAYwMehUSjuyn.jpg","https:\/\/shabby.jp\/storage\/uploads\/admins\/stock_movies\/thumb\/MRfFMoDG4O64D0l30kdT7HG4tbDDb0Dj.jpg","https:\/\/shabby.jp\/storage\/uploads\/admins\/stock_movies\/thumb\/zu9Mw52euxhN4BD11sKmzXV2ONmhlyk6.jpg","https:\/\/shabby.jp\/storage\/uploads\/admins\/stock_movies\/thumb\/GctwFHUH7zBQv4stvo1xxpZENo1GMv8Z.jpg","https:\/\/shabby.jp\/storage\/uploads\/admins\/stock_movies\/thumb\/kt1XKKNsEroKeYrl0P0HhnLDTvoOYoaP.jpg","https:\/\/shabby.jp\/storage\/uploads\/admins\/stock_movies\/thumb\/tgIOclki1smsIOnaGRUDY99s3H0d2nSW.jpg","https:\/\/shabby.jp\/storage\/uploads\/admins\/stock_movies\/thumb\/Th4wEg8xoW1XUkLzekgbJv1Q3lyDRCLN.jpg","https:\/\/shabby.jp\/storage\/uploads\/admins\/stock_movies\/thumb\/W2JdSvdDfzMlx40QWQwgRAErSSVEk9sB.jpg","https:\/\/shabby.jp\/storage\/uploads\/admins\/stock_movies\/thumb\/TuPHdkcm6PYUkTks68iR0FUY6Mlt4f04.jpg","https:\/\/shabby.jp\/storage\/uploads\/admins\/stock_movies\/thumb\/Qa5o3KShECCVjoDvMaQznSorNoTkoaFJ.jpg","https:\/\/shabby.jp\/storage\/uploads\/admins\/stock_movies\/thumb\/H1tuy9QFy5idtvjhDUO1IBsCpgyswaXU.jpg","https:\/\/shabby.jp\/storage\/uploads\/admins\/stock_movies\/thumb\/vo6uCbUhIFfGlWlFCs3tSiEtrYzdYBoM.jpg","https:\/\/shabby.jp\/storage\/uploads\/admins\/stock_movies\/thumb\/h7WGPka2w1XF2KxpzYEDVgZkwpR6hVjt.jpg","https:\/\/shabby.jp\/storage\/uploads\/admins\/stock_movies\/thumb\/1lRDxPwFLbBAj33TSV7wB4VgQsRGXOU3.jpg","https:\/\/shabby.jp\/storage\/uploads\/admins\/stock_movies\/thumb\/34axB6U7S3wjwowc0to79kSte6WxpFMh.jpg","https:\/\/shabby.jp\/storage\/uploads\/admins\/stock_movies\/thumb\/2AnVCbFqlvPeG4CvqUIECxlHCCr0sEqL.jpg","https:\/\/shabby.jp\/storage\/uploads\/admins\/stock_movies\/thumb\/NghE4o1POJBBfVtEa7I524ByZBvuGdeu.jpg","https:\/\/shabby.jp\/storage\/uploads\/admins\/stock_movies\/thumb\/QJwuxazkVAxEIbeBHeoMKDaiiMfnQIQM.jpg"];
  const moviesInfoPrimaryField = [null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null];
  const moviesInfoSecondaryField = [null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null];
  const moviesInfoLink = [null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null];
  const pageMode = 1;
  const colsCount = 1;
  const rowsCount = 2;
  let page = 0;
  let currentPage = 0;

  const rootStyles = document.querySelector(':root');
  const styles = document.createElement('link');
  styles.type = 'text/css';
  styles.rel = 'stylesheet';
  styles.href= 'https://shabby.jp/css/common/stock-video-list-tags.css';

    rootStyles.style.setProperty('--shabby-bg-color', '#transparent');
  rootStyles.style.setProperty('--shabby-list-tag-col-numb', '1');
  
  const root = document.createElement('div');
  const list = document.createElement('ul');
  const script = document.getElementById('shabby-139');
  

  root.classList.add('shabby-list-tags');
  list.classList.add('shabby-list-tags__grid');

  root.style.opacity = 0;
  root.append(styles);

  let counts = 0;
  let factor = colsCount * rowsCount;

    for (let i = 0; i < (moviesID.length / factor); i++) {
    const list = document.createElement('ul');
    list.classList.add('shabby-list-tags__grid');
    list.classList.add('js-galleryList');
    
    if (i > 0) {
      list.style.display = 'none';
    }

    for (let j = counts; j < moviesID.length; j++) {

      if (i === 0 && counts === 0) {
        if (j >= 1 * factor) {
          break;
        }
      } else {
        if (j > counts + (counts/i - 1)) {
          break;
        }
      }

      const li = document.createElement('li');
      const link = document.createElement('a');
      const holder = document.createElement('div');
      const img = document.createElement('img');

      link.href = moviesFile[j];
      link.target = '_blank';
      link.rel = 'nofollow';
      link.classList.add('js-shabbyModalTrigger');
      holder.classList.add('shabby-thumb-holder');
      img.src = moviesThumb[j];
      img.alt = '動画のサムネイル画像';

      li.appendChild(link);
      link.appendChild(holder);
      holder.appendChild(img);

            if (moviesInfoPrimaryField[j] || moviesInfoSecondaryField[j] || moviesInfoLink[j]) {
        const dl = document.createElement('dl');
        const dt = document.createElement('dt');
        const dd = document.createElement('dd');

        dl.classList.add('shabby-info-data');
        dt.classList.add('shabby-info-data__dt');
        dd.classList.add('shabby-info-data__dd');
  
        dt.innerHTML = moviesInfoPrimaryField[j];

        if (moviesInfoLink[j]) {
          dd.innerHTML = `<a href="${moviesInfoLink[j]}" target="_blank">${moviesInfoSecondaryField[j]}</a>`;
        } else {
          dd.innerHTML = `${moviesInfoSecondaryField[j]}`
        }
  
        dl.appendChild(dt);
        dl.appendChild(dd);

        li.appendChild(dl);
      }

      list.appendChild(li);
    }

    counts += factor;
    root.append(list);
  }

  script.parentNode.replaceChild(root, script);

  const openModalMovie = (e) => {
    const div = document.createElement('div');
    const div2 = document.createElement('div');
    const closeBtn = document.createElement('button');
    const iframe = document.createElement('iframe');
    let screenW = document.documentElement.clientWidth;
    let screenH = document.documentElement.clientHeight;

    div.id = 'shabby-cinematic-modal';
    div2.id = 'shabby-cinematic-modal__video';

    root.classList.add('has-modal-opened');
    closeBtn.classList.add('close-button');

    iframe.src = e.target.href;
    iframe.setAttribute('allowfullscreen', true);
    iframe.setAttribute('webkitallowfullscreen', true);
    iframe.setAttribute('scrolling', 'no');

    div.appendChild(div2);
    div2.appendChild(iframe);
    div2.appendChild(closeBtn);
    document.body.appendChild(div);

    resizeVideo(div2);
    window.addEventListener('resize', e => resizeVideo(div2));

    div.addEventListener('click', e => {
      if (e.target.id === 'shabby-cinematic-modal') {
        div.remove();
        div2.remove();
        removeEventListener('resize', resizeTimer);
      }
    });

    closeBtn.addEventListener('click', e => {
      div.remove();
      div2.remove();
      removeEventListener('resize', resizeTimer);
    });

  };

  $shabbyVideoLinks = document.querySelectorAll('.js-shabbyModalTrigger');

  $shabbyVideoLinks.forEach(link => {
    link.addEventListener('click', e => {
      e.preventDefault();
      openModalMovie(e);
    });
  });


    const $galleryLists = document.querySelectorAll('.js-galleryList');

  if (pageMode) {
    for(let i = 0; i < moviesID.length; i++) {
      if (i % (colsCount * rowsCount) === 0) {
        page++;
      }
    }

    const  galleryControlsHandler = direction => {
      const $prevBtn = document.querySelector('.shabby-prev-btn');
      const $nextBtn = document.querySelector('.shabby-next-btn');
      
      if (direction === 'next') {
        $prevBtn.removeAttribute('disabled');
      }
  
      if (direction === 'next') {
        currentPage++;
  
        if (currentPage >= page - 1) {
          $nextBtn.setAttribute('disabled', true);
        } else {
          $nextBtn.removeAttribute('disabled');
        }
      } else {
        (currentPage === 0) ? 0 : currentPage--;
        $nextBtn.removeAttribute('disabled');
  
        if (currentPage === 0) {
          $prevBtn.setAttribute('disabled', true);
        }
      }
  
      $galleryLists.forEach((list, i) => {
        if (i === currentPage) {
          list.style.display = 'grid';
        } else {
          list.style.display = 'none';
        }
      });
    };

    $galleryLists.forEach((list, i) => {
      if (i === page - 1 && i !== 0) {
        let lastListItems = list.querySelectorAll('li');

        if (lastListItems.length < factor) {
          let placeHolderCount = factor - lastListItems.length;
          for (i = 0; i < placeHolderCount; i++) {
            const li = document.createElement('li');
            const a = document.createElement('a');
            li.append(a);
            list.appendChild(li);
          }
        }
      }
    });

    if (page > 1) {
      pagerElementsInit();
      const $prevBtn = document.querySelector('.shabby-prev-btn');
      const $nextBtn = document.querySelector('.shabby-next-btn');
      $prevBtn.addEventListener('click', e => galleryControlsHandler('prev'));
      $nextBtn.addEventListener('click', e => galleryControlsHandler('next'));
    }
  }

  function pagerElementsInit() {
    const pagerContainer = document.createElement('div');
    const pagerNextBtn = document.createElement('button');
    const pagerPrevBtn = document.createElement('button');
    const pagerNextTxt = document.createElement('span');
    const pagerPrevTxt = document.createElement('span');

    pagerContainer.classList.add('shabby-list-tags__pager');
    pagerNextBtn.classList.add('shabby-next-btn');
    pagerPrevBtn.classList.add('shabby-prev-btn');

    pagerNextTxt.innerHTML = '＞＞';
    pagerPrevTxt.innerHTML = '＜＜';

    pagerNextBtn.appendChild(pagerNextTxt);
    pagerPrevBtn.appendChild(pagerPrevTxt);
    pagerContainer.appendChild(pagerPrevBtn);
    pagerContainer.appendChild(pagerNextBtn);

    pagerPrevBtn.setAttribute('disabled', true);
    root.appendChild(pagerContainer);
  }

  document.addEventListener('DOMContentLoaded', () => {
    setTimeout(() => root.style.opacity = 1, 100);
  });

  function resizeVideo(video) {
    const winW = window.innerWidth;
    const winH = window.innerHeight;
    let globalRatio = winW / winH;

    if (video == null) return;

    if (winW >= 768) {
      video.style.maxWidth = `${winW / globalRatio + 58}px`;
      video.style.paddingTop = `${winH / winW * 61}vw`; //MAGIC NUMBER
    } else {
      video.style.maxWidth = `1000px`;
      video.style.paddingTop = `53.4%`;
    }
  }

})();