var listScroll = 0; //리스트 초기값
var isScroll = false; //상세 초기값

// 프로젝트 리스트 삽입
function dataList(){
    var listLength = htmlData.length;
    var html_list = "";
    var html_list_history = "";    
    for(var i=0; i<listLength; i++){
        // console.log(i);  
        if(i < 6) { //최신 6개
            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_CLIENT + '</p>';
            html_list += '                <p class="txt">' + htmlData[i].INPUT_TEXT1 + '<br>' + htmlData[i].INPUT_TEXT2 +'</p>';
            html_list += '            </div>';
            html_list += '        </div>';
            html_list += '        <div class="img"><img src="static/img/projects/list_thumb.jpg" alt=""><img src="' + htmlData[i].TEMP_FILE_MAIN_TITLE + '" alt="" class="thumb_img"></div>';
            html_list += '    </a>';
            html_list += '</li>';  
        } else { 
            if(i < 12){
                html_list_history += '<li class="motion">';
                html_list_history += '    <span class="category">' + htmlData[i].INPUT_CATEGORY +'</span>';
                html_list_history += '    <span class="title"><a href="#detail" data-seq=' + htmlData[i].SEQ +'><em>' + htmlData[i].INPUT_TEXT1 +'</em> <em>' + htmlData[i].INPUT_TEXT2 +'</em></a></span>';
                html_list_history += '    <span class="date">' + htmlData[i].INPUT_DATE +'</span>';
                html_list_history += '</li>';
            }            
        }     

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

// 프로젝트 리스트 더보기
function moreData(count) {    
    var listLength = htmlData.length;
    var html_list_more = "";    
    for(var i=0; i<listLength; i++){        
        if(i > 5 && i < 13+count){
            html_list_more += '<li class="">';
            html_list_more += '    <span class="category">' + htmlData[i].INPUT_CATEGORY +'</span>';
            html_list_more += '    <span class="title"><a href="#detail" data-seq=' + htmlData[i].SEQ +'><em>' + htmlData[i].INPUT_TEXT1 +'</em> <em>' + htmlData[i].INPUT_TEXT2 +'</em></a></span>';
            html_list_more += '    <span class="date">' + htmlData[i].INPUT_DATE +'</span>';
            html_list_more += '</li>';
        }            
    }     
    $(".contents_projects .history").html(html_list_more);
    if(listLength <= 12+count) $(".contents_projects .btn_more").hide(); //더보기 숨김
    // console.log(listLength, 12+count);
}

// 프로젝트 상세 삽입
function dataDetail(seq){
    var listLength = htmlData.length;  
    if($("#projects_sub").is(":hidden")) listScroll = $(window).scrollTop();

    for(var i=0; i<listLength; i++){
        if(htmlData[i].SEQ == seq){
            $("#projects_sub .title .dataTit1").text(htmlData[i].INPUT_TEXT1);
            $("#projects_sub .title .dataTit2").text(htmlData[i].INPUT_TEXT2);
            $("#projects_sub .info .dataDate").text(htmlData[i].INPUT_DATE);
            $("#projects_sub .info .dataClient").text(htmlData[i].INPUT_CLIENT);
            $("#projects_sub .info .dataCategory").text(htmlData[i].INPUT_CATEGORY);
            $("#projects_sub .main_img .dataThumb").attr("src", htmlData[i].TEMP_FILE_MAIN);             

            // 다음 프로젝트
            if(typeof htmlData[i+1] != "undefined") {
                $("#projects_sub .btn_next, #projects_sub .img_next").attr("data-seq", htmlData[i+1].SEQ);         
                $("#projects_sub .main_img .dataNextThumb").attr("src", htmlData[i+1].TEMP_FILE_MAIN);         
                $("#projects_sub .next_project .client").text(htmlData[i+1].INPUT_CLIENT);          
                $("#projects_sub .next_project .dataTit1").text(htmlData[i+1].INPUT_TEXT1);          
                $("#projects_sub .next_project .dataTit2").text(htmlData[i+1].INPUT_TEXT2); 
            // 처음 프로젝트로         
            } else {
                $("#projects_sub .btn_next, #projects_sub .img_next").attr("data-seq", htmlData[0].SEQ);
                $("#projects_sub .main_img .dataNextThumb").attr("src", htmlData[0].TEMP_FILE_MAIN);         
                $("#projects_sub .next_project .client").text(htmlData[0].INPUT_CLIENT);          
                $("#projects_sub .next_project .dataTit1").text(htmlData[0].INPUT_TEXT1);          
                $("#projects_sub .next_project .dataTit2").text(htmlData[0].INPUT_TEXT2);                
            }
            // 상세 컨텐츠 (IMAGE or VIDEO)
            var videoHtml = "";
            var videoUrl = "";
            var videoS3_URL = 'https://www-thebreeze-co-kr.s3.ap-northeast-2.amazonaws.com';
            if(htmlData[i].UPLOAD_TYPE == "VIDEO") {
                for(var j=1; j<=4; j++){
                    videoUrl = eval("htmlData[" + i + "].TEMP_FILE_SUB_VIDEO" + j);
                    if(videoUrl == "") break;
                    videoHtml += '<video controls playsinline><source src="' + videoS3_URL+videoUrl.replace('./upload', '/upload') + '" type="video/mp4"></video>';                    
                }
                $("#projects_sub .detail_img").html(videoHtml);
                
            } else {
                $("#projects_sub .detail_img").html("<img src='" + htmlData[i].TEMP_FILE_SUB + "' alt=''>");
            }            
        }
    } 

    $("#container").css("height",0);  
    $("#projects_sub").show().scrollTop(0);
    $("header").addClass("on"); 

    var motionIdx = 0;
    $("#projects_sub .title").removeClass("on");
    $("#projects_sub .info dl").removeClass("on");
    $("#projects_sub .main_img").removeClass("on");
    var motionTimer = setInterval(function(){
        if(4 <= motionIdx) clearInterval(motionTimer); 
        if(motionIdx == 0) $("#projects_sub .title").addClass("on");
        if(motionIdx == 1) $("#projects_sub .info dl").eq(0).addClass("on");
        if(motionIdx == 2) $("#projects_sub .info dl").eq(1).addClass("on");
        if(motionIdx == 3) $("#projects_sub .info dl").eq(2).addClass("on");
        if(motionIdx == 0) $("#projects_sub .main_img").addClass("on");
        motionIdx++;                
    },100);  
    
    isScroll = false;
}

function bottomNextColor(){
    if(!isScroll) nextOffsetY = $(".next_project").offset().top;    
    if(nextOffsetY - $(window).height() + 140 < $("#projects_sub").scrollTop()) {
        $(".btn_list").addClass("on");
    } else {
        $(".btn_list").removeClass("on");
    }
    if(nextOffsetY < $("#projects_sub").scrollTop()) {
        $("header").removeClass("on");
    } else {
        $("header").addClass("on");
    }
    isScroll = true;
}

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

    $("body, html").animate({"scrollTop":"0px"}, 0);

    /* 뒤로가기버튼 상세팝업닫기 */
    window.addEventListener("hashchange", function(e) {
        if(location.href.indexOf("#detail") == -1) {
            $("header").removeClass("on");
            $("#container").css("height","auto");        
            $("#projects_sub").hide();
            $(window).scrollTop(listScroll);
        }     
    });
    
    /* 리스트 페이지 */
    $(document).on("click", ".contents_projects .list li a, .contents_projects .history li a", function(){
        var listSeq = $(this).attr("data-seq");
        dataDetail(listSeq);  
    }); 

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

    /* 상세 페이지 */
    // 프로젝트 상세 스크롤
    $("#projects_sub").on("scroll" ,function (){
        bottomNextColor();
    });

    // 상단 다음버튼 (오버효과)
    $("#projects_sub .main_img .btn_next").on({
        "mouseenter": function(){
            $("#projects_sub .main_img .img_next").addClass("on"); 
        },
        "mouseleave": function(){
            $("#projects_sub .main_img .img_next").removeClass("on"); 
        } 
    });

    // 상단, 하단 다음버튼
    $(document).on("click", "#projects_sub .btn_next, #projects_sub .img_next", function(){
        var detailSeq = $(this).attr("data-seq");
        dataDetail(detailSeq);
    });

    // 리스트가기 버튼
    $("#projects_sub .btn_list").on("click", function(){
        $("header").removeClass("on");
        $("#container").css("height","auto");        
        $("#projects_sub").hide();
        $(window).scrollTop(listScroll);
    });

    // 비디오제어
    $(document).on("click", "#projects_sub .detail_img video", function(){
        if($(this)[0].played) {
            $(this).siblings()[0].pause();
        }
    });



});