$(function () {

  // Main Visual
  var mv = $('.mv');
  mv.slick({
    dots: true,
    arrows: false,
    infinite: true,
    speed: 300,
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 7000,
    fade: true,
    cssEase: 'linear',
    slide: '.items'
  })

  $('.mv .items.slick-current').find('.items__txt > p').addClass('on')
    .parent().siblings('.items__bg').addClass('on');

  mv.on('beforeChange', function (e, s, c, n) {
    $(s.$slides[c]).find('.items__txt > p').removeClass('on')
      .parent().siblings('.items__bg').removeClass('on');
  })

  mv.on('afterChange', function (e, s, c) {
    $(s.$slides[c]).find('.items__txt > p').addClass('on')
      .parent().siblings('.items__bg').addClass('on');
  })

  var mvPrev = $('.mv__arrow .arrow__prev');
  var mvNext = $('.mv__arrow .arrow__next');

  mvPrev.on('click', function () {
    mv.slick('slickPrev')
  })

  mvNext.on('click', function () {
    mv.slick('slickNext')
  })


  // Business
  // 수정함
  var productList = $('.product__list');
  var businessList = $('.business__list > li');
  var productWrap;
  var productClose = $('.business__product .product__close, .business__dim');
  var productTab = $('.product__tab > li');

   businessList.on('click', function () {
	  if($(this).index() == 0){
		  location.href = './business/module.do';
	  		return false;
	  }else if($(this).index() == 1){
	  		location.href = './business/solar.do';
	  		return false;
	  }else if($(this).index() == 2){
		  location.href = './business/solar2.do';
	  		return false;
	  }else if($(this).index() == 3){
	  	location.href = './business/solar3.do';
  		return false;
  	}
  
      //수정함
  	  productWrap = $('.business__product:eq(' + $(this).index() + '), .business__dim');
      productWrap.show().stop()
      .animate({
        opacity: 1
      }, 300)
      
    productList = productWrap.find('.product__list');
    productList.slick({
      dots: true,
      arrows: true,
      infinite: true,
      speed: 300,
      slidesToShow: 3,
      slidesToScroll: 1,
      autoplay: true,
      fade: false,
      cssEase: 'linear',
      slide: '.items',
      responsive: [
        {
          breakpoint: 1025,
          settings: {
            slidesToShow: 2,
          }
        }
      ]
    })
  }) 

  productClose.on('click', function () {
    productWrap.stop()
      .animate({
        opacity: 0
      }, 300, function () {
        $(this).hide();
      })
  })

  productTab.on('click', function(){
    //수정함
    var idx = $(this).index();

	productWrap.find('.product__tab > li').not($(this)).removeClass('active');
	productWrap.find('.product__list').addClass('hiding');
	productWrap.find('.product__list').eq(idx).removeClass('hiding');
	$(this).addClass('active');
  })


  //World Best
  var mainBest = $('.main__best .slide__txt');
  for (var i = 0; i < mainBest.find('.items').length; i++) {
    $('.main__best .slick__dots').append('<button>' + i + '</button>')
  }
  mainBest.slick({
    dots: false,
    arrows: true,
    infinite: true,
    speed: 300,
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 7000,
    fade: true,
    cssEase: 'linear',
    slide: '.items',
    responsive: [
      {
        breakpoint: 769,
        settings: {
          arrows: false
        }
      }
    ]
  
  })

  $('.main__best .slick__dots button').eq(0).addClass('active')
  $('.main__best .slick__dots button').on('click', function () {
    var idx = $(this).index();
    $('.main__best .slick__dots button').not($(this)).removeClass('active');
    $(this).addClass('active')
    mainBest.slick('slickGoTo', idx);
  })

  $('.slide__bg > img').eq(0).addClass('on');
  $('.slide__txt').addClass('on');
  $('.slide__txt .items.slick-current > p').addClass('on');


  mainBest.on('beforeChange', function (e, s, c, n) {
    $(s.$slides[c]).find('p').removeClass('on')
    $('.slide__bg > img').removeClass('on')
      .eq(n).addClass('on');

    $('.main__best .slick__dots button').not($('.main__best .slick__dots button').eq(n)).removeClass('active');
    $('.main__best .slick__dots button').eq(n).addClass('active')

    $('.slide__txt').removeClass('on');
  })

  mainBest.on('afterChange', function (e, s, c) {
    $(s.$slides[c]).find('p').addClass('on')
    $('.slide__txt').addClass('on');
  })


  // Portfolio
  var portfolioList = $('.portfolio__list');

   for (var i = 0; i < portfolioList.find('.items').length; i++) {
    $('.main__portfolio .slick__dots').append('<button>' + i + '</button>')
  }

  portfolioList.slick({
    dots: false,
    arrows: true,
    infinite: true,
    speed: 300,
    slidesToShow: 4,
    slidesToScroll: 1,
    variableWidth: true,
    centerMode: true,
    autoplay: true,
    autoplaySpeed: 7000,
    fade: false,
    cssEase: 'linear',
    slide: '.items',
    responsive: [
      {
        breakpoint: 1201,
        settings: {
          centerMode: false,
          arrows: false,
        }
      }
    ]
  })


  $('.main__portfolio .slick__dots button').eq(0).addClass('active')
  $('.main__portfolio .slick__dots button').on('click', function () {
    var idx = $(this).index();
    $('.main__portfolio .slick__dots button').not($(this)).removeClass('active');
    $(this).addClass('active')
    portfolioList.slick('slickGoTo', idx);
  })

  portfolioList.on('beforeChange', function (e, s, c, n) {
    $('.main__portfolio .slick__dots button').not($('.main__portfolio .slick__dots button').eq(n)).removeClass(
      'active');
    $('.main__portfolio .slick__dots button').eq(n).addClass('active')
  }) 


  //Video
  var mainVideo = $('.main__video .video__icon');
  var videoPopup = $('.video__popup, .video__dim');
  var videoClose = $('.video__popup .popup__close, .video__dim');

  mainVideo.on('click', function () {
    videoPopup.show().stop()
      .animate({
        opacity: 1
      }, 300)

      $('.popup__video').find('iframe').attr('src', 'https://www.youtube.com/embed/AfTB9CvuPfA?cc_lang_pref=ko&cc_load_policy=1&enablejsapi=1&loop=1&playlist=AfTB9CvuPfA&playsinline=1')
  })

  videoClose.on('click', function () {
    videoPopup.stop()
      .animate({
        opacity: 0
      }, 300, function () {
        $(this).hide();
      })

      mainVideo.focus();

      $('.popup__video').find('iframe').attr('src', '');

      return false;
  })


  // News
  var newsList = $('.news__list');

  for (var i = 0; i < newsList.find('.items').length; i++) {
    $('.main__news .slick__dots').append('<button>' + i + '</button>')
  }

  newsList.slick({
    dots: false,
    arrows: true,
    infinite: true,
    speed: 300,
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 7000,
    fade: true,
    cssEase: 'linear',
    slide: '.items',
    responsive: [
      {
        breakpoint: 1601,
        settings: {
          arrows: false,
        }
      }
    ]
  })


  $('.main__news .slick__dots button').eq(0).addClass('active')
  $('.main__news .slick__dots button').on('click', function () {
    var idx = $(this).index();
    $('.main__news .slick__dots button').not($(this)).removeClass('active');
    $(this).addClass('active')
    newsList.slick('slickGoTo', idx);
  })

  newsList.find('.items.slick-current .items__cont > p').addClass('on')

  newsList.on('beforeChange', function (e, s, c, n) {
    $('.main__news .slick__dots button').not($('.main__news .slick__dots button').eq(n))
      .removeClass(
        'active');
    $('.main__news .slick__dots button').eq(n).addClass('active')

    $(s.$slides[c]).find('.items__cont > p').removeClass('on')
  })

  newsList.on('afterChange', function (e, s, c, n) {
    $(s.$slides[c]).find('.items__cont > p').addClass('on')
  })
})