var listScroll = 0;
var stories_swiper;
var sliderInit = false;
var isScroll = false; //상세 초기값

// 스토리 리스트 삽입
function dataList(){
    var listLength = htmlData.length;
    var html_list = "";    
    for(var i=0; i<listLength; i++){
        if(i < 3) { // 최신 3개
            html_list +=' <li class="motion">';
            html_list +='     <a href="#detail" data-seq="' + htmlData[i].SEQ + '">';
            html_list +='         <div class="title table">';
            html_list +='             <div class="table_cell">';
            html_list +='                 <p class="date">' + htmlData[i].INPUT_DATE + '</p>';
            html_list +='                 <p class="txt"><span>' + htmlData[i].INPUT_PROJECT + '</span><span>' + htmlData[i].INPUT_CLIENT + '</span></p>';
            html_list +='             </div>';
            html_list +='         </div>';
            html_list +='         <div class="img"><img src="' + htmlData[i].TEMP_FILE1 + '" alt=""></div>';
            html_list +='     </a>';
            html_list +=' </li>';
        }

        if(htmlData[i].MAIN_TYPE == "Y"){
            $(".contents_stories .main_banner .tit1").text(htmlData[i].INPUT_MAIN);
            $(".contents_stories .main_banner .tit2").text(htmlData[i].INPUT_PROJECT);
            $(".contents_stories .main_banner .date").text(htmlData[i].INPUT_DATE);
            // $(".contents_stories .main_banner .img").attr("src", htmlData[i].TEMP_FILE_MAIN);
            $(".contents_stories .main_banner").css("background", "url(" + htmlData[i].TEMP_FILE_MAIN + ") 50% 50% / cover no-repeat");
            $(".contents_stories .main_banner .btn_view").attr("data-seq", htmlData[i].SEQ);
        }

        // 더보기버튼 노출/비노출
        if(i < 3) {
            $(".contents_stories .btn_more").hide(); 
        } else {
            $(".contents_stories .btn_more").show(); 
        }
    }
    $(".contents_stories .list").html(html_list);
}

// 스토리 리스트 더보기
function moreData(count) {    
    var listLength = htmlData.length;
    var html_list_more = "";    
    for(var i=0; i<listLength; i++){        
        if(i < 3+count){
            html_list_more +=' <li class="motion">';
            html_list_more +='     <a href="#detail" data-seq="' + htmlData[i].SEQ + '">';
            html_list_more +='         <div class="title table">';
            html_list_more +='             <div class="table_cell">';
            html_list_more +='                 <p class="date">' + htmlData[i].INPUT_DATE + '</p>';
            html_list_more +='                 <p class="txt"><span>' + htmlData[i].INPUT_PROJECT + ' </span><span>' + htmlData[i].INPUT_CLIENT + '</span></p>';
            html_list_more +='             </div>';
            html_list_more +='         </div>';
            html_list_more +='         <div class="img"><img src="' + htmlData[i].TEMP_FILE1 + '" alt=""></div>';
            html_list_more +='     </a>';
            html_list_more +=' </li>';
        }            
    }     
    $(".contents_stories .list").html(html_list_more);
    if(listLength <= 3+count) $(".contents_stories .btn_more").hide(); //더보기 숨김
    // console.log(listLength, 3+count);
    $(window).scrollTop($(".contents_stories").height());
}

function dataDetail(seq){
    var listLength = htmlData.length;  
    if($("#stories_sub").is(":hidden")) listScroll = $(window).scrollTop();              

    for(var i=0; i<listLength; i++){
        if(htmlData[i].SEQ == seq){
            var req = htmlData[i].INPUT_MEMO;
            req = (req.replace("/#/&lt;", "<")).replace("/#/&gt;", ">"); 
            
            $("#stories_sub .slide_tit p").html(req);
            $("#stories_sub .title .date").text(htmlData[i].INPUT_DATE);
            $("#stories_sub .title .dataTit1").text(htmlData[i].INPUT_PROJECT);
            $("#stories_sub .title .dataTit2").text(htmlData[i].INPUT_CLIENT);             
            $("#stories_sub .dataImg1").attr("src", htmlData[i].TEMP_FILE1);
            $("#stories_sub .dataImg2").attr("src", htmlData[i].TEMP_FILE3);
            $("#stories_sub .dataImg3").attr("src", htmlData[i].TEMP_FILE2);
            $("#stories_sub .dataImg4").attr("src", htmlData[i].TEMP_FILE4);
            $("#stories_sub .dataImg5").attr("src", htmlData[i].TEMP_FILE5);
            $("#stories_sub .dataImg6").attr("src", htmlData[i].TEMP_FILE6);
            $("#stories_sub .dataImg7").attr("src", htmlData[i].TEMP_FILE7);            

            // 다음 프로젝트
            if(typeof htmlData[i+1] != "undefined") {
                $("#stories_sub .btn_next, #stories_sub .img_next").attr("data-seq", htmlData[i+1].SEQ);            
                $("#stories_sub .next_project .client").text(htmlData[i+1].INPUT_CLIENT);          
                $("#stories_sub .next_project .dataTit1").text(htmlData[i+1].INPUT_PROJECT);          
                $("#stories_sub .next_project .dataTit2").text(htmlData[i+1].INPUT_CLIENT); 
            // 처음 프로젝트로         
            } else {
                $("#stories_sub .btn_next, #stories_sub .img_next").attr("data-seq", htmlData[0].SEQ);        
                $("#stories_sub .next_project .client").text(htmlData[0].INPUT_CLIENT);          
                $("#stories_sub .next_project .dataTit1").text(htmlData[0].INPUT_PROJECT);          
                $("#stories_sub .next_project .dataTit2").text(htmlData[0].INPUT_CLIENT);                
            }
        }
    }

    $("#container").css("height",0);
    $("#stories_sub").show().scrollTop(0);

    var motionIdx = 0;
    $("#stories_sub .title .date").removeClass("on");
    $("#stories_sub .title .dataTit1").removeClass("on");
    $("#stories_sub .title .dataTit2").removeClass("on");
    $("#stories_sub .title .btn_next").removeClass("on");
    $("#stories_sub .main_img_box").removeClass("on");
    var motionTimer = setInterval(function(){
        if(4 <= motionIdx) clearInterval(motionTimer); 
        if(motionIdx == 0) $("#stories_sub .title .date").addClass("on");
        if(motionIdx == 1) $("#stories_sub .title .dataTit1").addClass("on");
        if(motionIdx == 2) $("#stories_sub .title .dataTit2").addClass("on");
        if(motionIdx == 3) $("#stories_sub .title .btn_next").addClass("on");
        if(motionIdx == 0) $("#stories_sub .main_img_box").addClass("on");
        // console.log(motionIdx);
        motionIdx++;                
    },100);

    // 슬라이더 초기화
    if(!sliderInit) stories_swiper.init(); //첫접근   
    else stories_swiper.update(); //후접근
    stories_swiper.slideTo(0);
    sliderInit = true;

    $("header").addClass("on");

    isScroll = false;
}

function bottomNextColor(){
    if(!isScroll) nextOffsetY = $(".next_project").offset().top;    
    if(nextOffsetY < $("#stories_sub").scrollTop()) {
        $("header").addClass("white");
    } else {
        $("header").removeClass("white");
    }
    isScroll = true;
}

// 이벤트 함수
$(function(){
    dataInit("story"); //데이터 가져오기

    /* 뒤로가기버튼 상세팝업닫기 */
    window.addEventListener("hashchange", function(e) {
        if(location.href.indexOf("#detail") == -1) {
            $("#stories_sub").hide();
            $("header").removeClass("on");
            $("#container").css("height","auto");      
            $(window).scrollTop(listScroll);
        }     
    });

    //초기 높이 설정 (width 720 보다 작을때)
    // var WindowWidth = $(window).innerWidth();
    // if(WindowWidth < 720) BannerHeight();

    //Web-Stories-Sub 스와이프
    stories_swiper = new Swiper('#stories_swiper', {
        init: false,
        slidesPerView: 'auto',
        centeredSlides: true,
        mousewheel: false,
        loop: false,
        navigation: {
            nextEl: '#stories_sub .slide_btns a.btn_next',
            prevEl: '#stories_sub .slide_btns a.btn_prev',
        },
        breakpoints: {
            960: {
                centeredSlides: false
            }
        },     
    }); 
    
    /* 리스트 페이지 */    
    $(document).on("click", ".contents_stories .list li a, .contents_stories .main_banner .btn_view", function(){
        var listSeq = $(this).attr("data-seq");
        dataDetail(listSeq);    
    });

    // 더보기 버튼
    var count = 0;
    $(".contents_stories .btn_more a").on("click", function(){
        count = count+3;
        moreData(count);
    });

    /* 상세 페이지 */
    // 상단, 하단 다음버튼
    $(document).on("click", "#stories_sub .title .btn_next, #stories_sub .next_project .btn_next", function(){
        var detailSeq = $(this).attr("data-seq");
        dataDetail(detailSeq);
    });

    // 프로젝트 상세 스크롤
    $("#stories_sub").on("scroll" ,function (){
        bottomNextColor();
        showMotion();
    });
});


// $(window).on("resize", function () {
//     var WindowWidth = $(window).innerWidth();
//     if(WindowWidth < 720){
//         BannerHeight();
//     }else{
//         $(".contents_stories .main_banner").css('height','auto');
//     }
// });

// //배너 이미지 높이 설정
// function BannerHeight(){
//     var BannerHeight = $(window).innerHeight();
//     $(".contents_stories .main_banner").height(BannerHeight);
// }