(function ($) {
  'use strict';

/* ビジュアルアニメーション */
{
  
  const $target = $('.js-top-visual, .js-dummy-header');

  const doanimation = function () {
    $target.addclass('is-animated');
  };

  // 画像・動画ロード
  const $media = $('.js-top-visual-media');
  let loaded = 0;

  const loadedfunc = function () {
    if (++loaded === $media.length) { doanimation(); }
  };

  // 画像の場合
  $media.filter('img').each(function () {
    if (this.complete) {
      loadedfunc();
    } else {
      this.addeventlistener('load', loadedfunc);
    }
  });

  // 動画の場合
  $media.filter('video').each(function () {
    if (this.readystate > 1) {
      loadedfunc();
    } else {
      this.addeventlistener('loadeddata', loadedfunc);
    }
  });

  $('.js-top-visual-trigger').one('animationend', function () {
    $target.addclass('is-done').removeclass('is-animated');
  });
}

/* サービスラインナップのスライダー */
{
  const $slidewrapper = $('.js-service-slide');
  const $slidepagenation = $('.js-service-slide__page');
  const $slidebutton = $('.js-service-slide__button');

  // スライダー要素
  const $slideitems = $slidewrapper.children();

  // スライダーの数だけページネーションの追加
  for (let i = 0; i < $slideitems.length; i++) {
    const $page = $('<button type="button">').addclass('p-top-service__page');
    $page.data({ index: i }).text(('00' + (i + 1)).slice(-2));
    if (i === 0) { $page.addclass('is-current'); }
    $slidepagenation.append($page);
  }

  // スライダーが1個の場合ボタンを表示しない
  if ($slideitems.length === 1) {
    $slidebutton.hide();
  }

  // 現在位置
  let current = 0;
  $slideitems.eq(0).addclass('is-current');

  // スライド開始
  const doslide = function (target) {
    current = target;
    $slidepagenation.children().removeclass('is-current').eq(target).addclass('is-current');
    $slideitems.removeclass('is-current').eq(target).addclass('is-current');
  };

  // ページネーション
  $slidepagenation.on('click', 'button', function () {
    const $this = $(this);
    if (!$this.hasclass('is-current')) {
      doslide($this.data('index'));
    }
  });

  // 前/次
  $slidebutton.on('click', 'button', function () {
    let target = current + $(this).data('relative');

    if (target < 0) {
      target = $slideitems.length - 1;
    } else if (target >= $slideitems.length) {
      target = 0;
    }

    doslide(target);
  });

  /* スマホ向け */
  const $items = $slidewrapper.find('li');

  // スマホ用のクラスを付与
  $items.slice(4).addclass('is-sp-hidden');

  const $morebutton = $('.js-slide-more');
  $morebutton.find('button').on('click', function () {
    $slidewrapper.find('.is-sp-hidden').slice(0, 4).removeclass('is-sp-hidden').addclass('is-sp-visible');
    if ($slidewrapper.find('.is-sp-hidden').length === 0) {
      $morebutton.hide();
    }
  });
}

/* cookie consent */
{
  const template = $('#js-cookie')[0];

  if (template) {
    // フラグ取得
    const cookieflag = cookies.get('cookie_consent');

    if (cookieflag !== 'ok') {
      // 要素の挿入
      $(template.text).appendto('body');

      // okをクリックした時
      const $cookiebody = $('.js-cookie-body');
      $('.js-cookie-ok').on('click', function () {
        // cookieをセット（期限は365日）
        cookies.set('cookie_consent', 'ok', { expires: 365, path: '/' });
        $cookiebody.fadeout(300, function () { $cookiebody.remove(); });
      });
    }
  }
}

/* ふわっとアニメーション */
{
  const $target = $('.l-wrap > :not(.l-wrap__inner), .l-grid');

  $target.each(function () {
    if (window.innerheight < this.getboundingclientrect().top) {
      $(this).addclass('is-fade-element is-fade-standby');
    }
  });

  const $fadeelem = $('.is-fade-element');
  let length = $fadeelem.length;

  const observer = new intersectionobserver(function (entries) {
    for (let i = 0; i < entries.length; i++) {
      const entry = entries[i];

      if (entry.isintersecting || entry.boundingclientrect.top < 0) {
        entry.target.classlist.remove('is-fade-standby');

        if (--length > 0) {
          observer.unobserve(entry.target);
        } else {
          observer.disconnect();
        }
      }
    }
  });

  $fadeelem.on('transitionend.fade-element', function (event) {
    if (event.target === event.currenttarget) {
      $(this).removeclass('is-fade-element').off('transitionend.fade-element');
    }
  }).each(function () { observer.observe(this); });
}


/* 重要なニュースjson取得 */
{
  const $news = $('.js-top-news-area');
  
  if($news && $news.length > 0){

    const topurl = $news.find('.js-top-news-json')[0].value;

    const $wrapper = $news.find('.js-top-news-wrapper');

    // text template
    const itemtemplate = $news.find('.js-top-news-item-template')[0].text;

    const assignhtml = function (template, data) {
      return template.replace(/\{\{\s*(\w+)\s*\}\}/g, function (_, name) { return data[name] || ''; });
    };

    $.getjson(topurl).then(function (data) {

      // entry
      const createhtml = function (entry) {
        return assignhtml(itemtemplate, {
          link: entry.link,
          target: entry.target,
          date: entry.date,
          title: entry.title
        });
      };

      for (let i = 0; i < data.length; i++) {
        const html = createhtml(data[i]);
        $wrapper.append(html);
      }
    });
  }
}

/* ニュースjson取得 */
{
  const $news = $('.js-news-area');

  const url = $news.find('.js-news-json')[0].value;

  const $categories = $news.find('.js-news-categories');
  const $wrapper = $news.find('.js-news-wrapper');

  // template
  const $wrapperitem = $('<div class="p-news-release__wrapper-item">');
  const $newslist = $('<ul class="p-news-release__list">');

  // text template
  const catetemplate = $news.find('.js-news-cate-template')[0].text;
  const itemtemplate = $news.find('.js-news-item-template')[0].text;

  const assignhtml = function (template, data) {
    return template.replace(/\{\{\s*(\w+)\s*\}\}/g, function (_, name) { return data[name] || ''; });
  };

  $.getjson(url).then(function (data) {

    const colors = {};
    //jsonデータのカラーコードを下記のコードで上書き
    const colorsbyslug = {
      corporate: '#00bfb3',
      service: '#002855',
      event: '#ffb81c',
      research: '#e5a723',
      others: '#c6858f'
    }

    // tab
    $.each(data.bycategory, function (_, item) {
      const cate = item.category;
      colors[cate.slug] = colorsbyslug[cate.slug];

      const html = assignhtml(catetemplate, {
        slug: cate.slug,
        // color: cate.color,
        color: colorsbyslug[cate.slug],
        name: cate.name,
      });

      $categories.append(html);

      var eirtab = document.getelementbyid('js-eir-tab');
      $categories.append(eirtab);

    });

    // entry
    const createhtml = function (entry) {
      let tags = '';

      for (let i = 0; i < entry.cat.length; i++) {
        const $tag = $('<span>');
        $tag.css({ color: colors[entry.cat[i].slug] }).text(entry.cat[i].name);
        tags += $tag[0].outerhtml;
      }

      return assignhtml(itemtemplate, {
        link: entry.link,
        target: entry.target,
        date: entry.date,
        title: entry.title,
        tags: tags,
      });
    };

    // all
    const $allitem = $wrapperitem.clone().appendto($wrapper);
    $allitem.addclass('js-news-category-all is-current');

    const $alllist = $newslist.clone().appendto($allitem);

    for (let i = 0; i < data.all.length; i++) {
      const html = createhtml(data.all[i]);
      $alllist.append(html);
    }


    // categories
    $.each(data.bycategory, function (_, item) {
      const $cateitem = $wrapperitem.clone().appendto($wrapper);
      $cateitem.addclass('js-news-category-' + item.category.slug);

      const $list = $newslist.clone().appendto($cateitem);

      for (let i = 0; i < item.posts.length; i++) {
        const html = createhtml(item.posts[i]);
        $list.append(html);
      }

    });
  });
}


// ing
/* ニュースjson取得 */
{
  const $ing = $('.js-ing-area');
  const url = $ing.find('.js-img-json')[0].value;
  const $wrapper = $ing.find('.js-ing-wrapper');

  //カテゴリ用
  const taginfo = {
    news        :   { color: '#00bfb3', title: 'news'},
    interview   :   { color: '#ffb81c', title: 'interview'},
    eventreport :   { color: '#c6858f', title: 'event report'},
    special     :   { color: '#002855', title: 'special'}
  }

  // // text template
  const sizeltemplate = $ing.find('.js-ing-item-template-l')[0].text;
  const sizemtemplate = $ing.find('.js-ing-item-template')[0].text;

  const assignhtml = function (template, data) {
    return template.replace(/\{\{\s*(\w+)\s*\}\}/g, function (_, name) { return data[name] || ''; });
  };

  $.getjson(url).then(function (data) {
    // const colors = {};

    // tab
    $.each(data, function (i, item) {
      let html = '',
          tagmain = item.tag_main.tolowercase().replace(/\s+/g, "");
      
      if ( i == 0 ) {
        html += assignhtml(sizeltemplate, {
          link: item.pageurl,
          image: item.image,
          color: taginfo[tagmain].color,
          tag: taginfo[tagmain].title,
          title: item.title
        });
      } else {
        html += assignhtml(sizemtemplate, {
          link: item.pageurl,
          image: item.image,
          color: taginfo[tagmain].color,
          tag: taginfo[tagmain].title,
          title: item.title
        });
      }
      $wrapper.append(html);
    });
  });
}

})(jquery);