//slick start 상단 비주얼 슬라이드
var slideWrapper = $(".main-slider"),
    iframes = slideWrapper.find('.embed-player'),
    lazyImages = slideWrapper.find('.slide-image'),
    lazyCounter = 0;

// POST commands to YouTube or Vimeo API
function postMessageToPlayer(player, command) {
    if (player == null || command == null) return;
    player.contentWindow.postMessage(JSON.stringify(command), "*");
}

// When the slide is changing
function playPauseVideo(slick, control) {
    var currentSlide, slideType, startTime, player, video;

    currentSlide = slick.find(".slick-current");
    slideType = currentSlide.attr("class").split(" ")[1];
    player = currentSlide.find("iframe").get(0);
    startTime = currentSlide.data("video-start");

    if (slideType === "vimeo") {
        switch (control) {
            case "play":
                if ((startTime != null && startTime > 0) && !currentSlide.hasClass('started')) {
                    currentSlide.addClass('started');
                    postMessageToPlayer(player, {
                        "method": "setCurrentTime",
                        "value": startTime
                    });
                }
                postMessageToPlayer(player, {
                    "method": "play",
                    "value": 1
                });
                break;
            case "pause":
                postMessageToPlayer(player, {
                    "method": "pause",
                    "value": 1
                });
                break;
        }
    } else if (slideType === "youtube") {
        switch (control) {
            case "play":
                postMessageToPlayer(player, {
                    "event": "command",
                    "func": "mute"
                });
                postMessageToPlayer(player, {
                    "event": "command",
                    "func": "playVideo"
                });
                break;
            case "pause":
                postMessageToPlayer(player, {
                    "event": "command",
                    "func": "pauseVideo"
                });
                break;
        }
    } else if (slideType === "video") {
        video = currentSlide.children("video").get(0);
        if (video != null) {
            if (control === "play") {
                video.play();
            } else {
                video.pause();
            }
        }
    }
}

// Resize player
function resizePlayer(iframes, ratio) {
    if (!iframes[0]) return;
    var win = $(".main-slider"),
        width = win.width(),
        playerWidth,
        height = win.height(),
        playerHeight,
        ratio = ratio || 16 / 9;

    iframes.each(function() {
        var current = $(this);
        if (width / ratio < height) {
            playerWidth = Math.ceil(height * ratio);
            current.width(playerWidth).height(height).css({
                left: (width - playerWidth) / 2,
                top: 0
            });
        } else {
            playerHeight = Math.ceil(width / ratio);
            current.width(width).height(playerHeight).css({
                left: 0,
                top: (height - playerHeight) / 2
            });
        }
    });
}

// DOM Ready
$(function() {
    // Initialize
    slideWrapper.on("init", function(slick) {
        slick = $(slick.currentTarget);
        setTimeout(function() {
            playPauseVideo(slick, "play");
        }, 1000);
        resizePlayer(iframes, 16 / 9);
    });
    slideWrapper.on("beforeChange", function(event, slick) {
        slick = $(slick.$slider);
        playPauseVideo(slick, "pause");
    });
    slideWrapper.on("afterChange", function(event, slick) {
        slick = $(slick.$slider);
        playPauseVideo(slick, "play");
    });
    slideWrapper.on("lazyLoaded", function(event, slick, image, imageSource) {
        lazyCounter++;
        if (lazyCounter === lazyImages.length) {
            lazyImages.addClass('show');
            // slideWrapper.slick("slickPlay");
        }
    });

    //start the slider
    slideWrapper.slick({
        // fade:true,
        dots: false,
        infinite: true,
        autoplay: true,
        autoplaySpeed: 5000,
            lazyLoad: "progressive",
        speed: 800,
        arrows: true,
        
        nav: true,
        prevArrow: $('.prev2'),
        nextArrow: $('.next2'),
        cssEase: "cubic-bezier(0.87, 0.03, 0.41, 0.9)"
    });
});

// Resize event
$(window).on("resize.slickVideoPlayer", function() {
    resizePlayer(iframes, 16 / 9);
});



//  인덱스 슬라이드 02
var tag = document.createElement('script');
        tag.id = 'iframe-demo';
        tag.src = 'https://www.youtube.com/iframe_api';
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

        var player;
        function onYouTubeIframeAPIReady() {
            var elems1 = document.getElementsByClassName('yt-player');
            for(var i = 0; i < elems1.length; i++) {
                
                player = new YT.Player(elems1[i], {
                    events: {
                        //'onReady': onPlayerReady,
                        'onStateChange': onPlayerStateChange
                    }
                });
            }
        }
        function onPlayerReady(event) {
            
        }
        function handleVideo(playerStatus) {
            if (playerStatus == -1) {
                // unstarted
                $('.slider03').slick('slickPause');
            } else if (playerStatus == 0) {
                // ended
                $('.slider03').slick('slickPlay');
                
            } else if (playerStatus == 1) {
                // playing = green                
                $('.slider03').slick('slickPause');                
            } else if (playerStatus == 2) {
                // paused = red
                $('.slider03').slick('slickPlay');
            } else if (playerStatus == 3) {
                // buffering = purple
            } else if (playerStatus == 5) {
                // video cued
            }
        }
        function onPlayerStateChange(event) {
            handleVideo(event.data);
        }
       

$('.slider03').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: true,
    fade: false,
    // prevArrow: $('.prev'),
    // nextArrow: $('.next'),
    
    infinite: true, 
    adaptiveHeight: true,
    responsive: [
        {
          
            breakpoint: 600
            , settings: {
                slidesToShow: 1
                , slidesToScroll: 1
                , arrows: false
                , dots:false
                

                
            }
                        }
                      ]
     
  });
 
  $('a[data-slide]').click(function(e) {
    e.preventDefault();
    var slideno = $(this).data('slide');
    $('.slider03').slick('slickGoTo', slideno - 1);
    $('a[data-slide]').removeClass('active');
    this.classList.add('active');
  });


  $('.slider03').on('init', function(event, slick){
    //init code goes here
}).on('afterChange',function(e,o){
    //on change slide = do action
    $('iframe').each(function(){
        $(this)[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');    
    });
}).slick();