(function() {
  const moviesID = [760,759,758,757,756,755,754,739,732,731,730];
  const moviesFile = ["https:\/\/shabby.jp\/stock_movies\/video\/760\/","https:\/\/shabby.jp\/stock_movies\/video\/759\/","https:\/\/shabby.jp\/stock_movies\/video\/758\/","https:\/\/shabby.jp\/stock_movies\/video\/757\/","https:\/\/shabby.jp\/stock_movies\/video\/756\/","https:\/\/shabby.jp\/stock_movies\/video\/755\/","https:\/\/shabby.jp\/stock_movies\/video\/754\/","https:\/\/shabby.jp\/stock_movies\/video\/739\/","https:\/\/shabby.jp\/stock_movies\/video\/732\/","https:\/\/shabby.jp\/stock_movies\/video\/731\/","https:\/\/shabby.jp\/stock_movies\/video\/730\/"];
  const moviesThumb = ["https:\/\/shabby.jp\/storage\/uploads\/admins\/stock_movies\/thumb\/Uc8JORQWQ9K7WpOR2tuQ11je4yx9aP6m.jpg","https:\/\/shabby.jp\/storage\/uploads\/admins\/stock_movies\/thumb\/OYb4cRyVQxWrSziUMxFyzird6k0Daq7R.jpg","https:\/\/shabby.jp\/storage\/uploads\/admins\/stock_movies\/thumb\/1eZUl3xVtg5LG1lp4GN2t5CDHvKvnXXh.jpg","https:\/\/shabby.jp\/storage\/uploads\/admins\/stock_movies\/thumb\/gUPp7AcCV4VW3LyZ1oKd2JtL4djvMtqC.jpg","https:\/\/shabby.jp\/storage\/uploads\/admins\/stock_movies\/thumb\/l2rK1QnyYPGAHOvYpkNqE6aH0DGckTL9.jpg","https:\/\/shabby.jp\/storage\/uploads\/admins\/stock_movies\/thumb\/WlHw0KkQ4QQ40a3tIdhe87Wt2DcW03of.jpg","https:\/\/shabby.jp\/storage\/uploads\/admins\/stock_movies\/thumb\/EmxjdgbvuvMGzfz3Hcyz7Mx5rqQvJocx.jpg","https:\/\/shabby.jp\/storage\/uploads\/admins\/stock_movies\/thumb\/lFoUC2xMJ9zwcHFDMnXdjqd1EBcaabV3.jpg","https:\/\/shabby.jp\/storage\/uploads\/admins\/stock_movies\/thumb\/6OON3XO1wmusCjwghyA7oQBcvOsSQLeS.jpg","https:\/\/shabby.jp\/storage\/uploads\/admins\/stock_movies\/thumb\/iQ9NkuscL4t9jkoOOhHMeVQVwCOxgStR.jpg","https:\/\/shabby.jp\/storage\/uploads\/admins\/stock_movies\/thumb\/MqDsxu0BOlbbgEQCN4iFgws9078qy4Uq.jpg"];
  const moviesInfoPrimaryField = [null,null,null,null,null,null,null,null,null,null,null];
  const moviesInfoSecondaryField = [null,null,null,null,null,null,null,null,null,null,null];
  const moviesInfoLink = [null,null,null,null,null,null,null,null,null,null,null];
  const pageMode = 1;
  const colsCount = 3;
  const rowsCount = 1;
  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', '3');
  
  const root = document.createElement('div');
  const list = document.createElement('ul');
  const script = document.getElementById('shabby-103');
  

  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%`;
    }
  }

})();