// ===========================
// ページャー
// ------------------------------
.main {
  position: relative;
}
.pager {
  position: fixed;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  padding: 0;
  li {
    display: block;
    margin: 20px;
    a {
      display: block;
      width: 10px;
      height: 10px;
      background: #fff;
      border-radius: 50%;
    }
  }
  .is-current {
    a {
      background: #232323;
    }
  }
}



// ===========================
// section
// ------------------------------
.section {
  width: 100%;
}
.section-content {
  max-width: 300px;
  margin: 0 auto;
  padding: 40px 60px;
  text-align: center;
}

h2 {
  color: #232323;
  &:first-child {
    margin-top: 0;
  }
}

h3 {
  color: #232323;
}

p {
  color: #232323;
}

.section-red {
  background-color: #ff6363;
}

.section-blue {
  background-color: #8fbbff;
}

.section-green {
  background-color: #fff;
}

var $section = $('.js-section'); // 各スライド
var $pager = $('#js-pager'); // ページャー枠

// scrollifyのオプション設定
var option = {
  section : '.js-section',
  easing: "swing",
  scrollSpeed: 600,
  scrollbars: true,
  before:function(index) {
    pagerCurrent(index); // ページャーに対応する順番にクラス名を付与
  },
  afterRender:function() {
    createPager(); // ページャーの作成
  }
};

$(function() {
  $.scrollify(option); // scrollifyの実行
});



// ==============================
// functions
// ------------------------------

// ページャーに対応する順番にクラス名を付与
function pagerCurrent(index = 0) {
  var $li = $pager.find('li');
  $li.removeClass('is-current');
  $li.eq(index).addClass('is-current');
}

// ページャーの作成
function createPager() {
  $section.each(function(i, e){
    // ページ内リンク先の作成
    var sectionName = $(e).attr('data-section-name');
    // 最初のliにはクラスを付与
    var addClass = '';
    if (i === 0) {
        addClass = 'is-current';
    }
    // liのHTML作成
    var html = '';
    html += '<li class="' + addClass + '">';
    html += '<a href="#' + sectionName + '"></a>';
    html += '</li>';
    $pager.append(html);
  });
  
  pagerLink();
}

// ページャーでaタグをクリックされたらスクロールする
function pagerLink () {
  $pager.find('a').on('click', function() {
    $.scrollify.move($(this).attr("href"));
  });
}