var isScroll = false;

// 메인 데이터 삽입
function dataList(){
    var listLength = htmlData.length;
    var html_list = "";
    for(var i=0; i<listLength; i++){
        // console.log(i);
        html_list += '<div class="section" style="background-image:url(' + htmlData[i].TEMP_FILE_MAIN + ');">';
        html_list += '    <div class="title"><div class="inner"><h2><span>' + htmlData[i].INPUT_CLIENT + '</span>'  + htmlData[i].INPUT_TEXT1 + '</h2></div></div>';
        html_list += '    <div class="btn_view"><a href="#detail" data-seq="' + htmlData[i].SEQ + '">View project</a></div>';
        html_list += '</div>';                
    }
    $("#fullpage").append(html_list);

    // 페이지전환
    var length = $(".section").length;
    $(".page_num li:last-child").text(("0"+(length)).substr(-2));
    $('#fullpage').fullpage({        
        verticalCentered: false,
        scrollingSpeed: 800,
        css3: false,
        easingcss3: 'cubic-bezier(.93,-0.05,.59,.9)',
        onLeave: function (anchorLink, index) {            
            $(".page_num li:first-child").text(("0"+(index)).substr(-2));    
            if(index == 1) {
                $("#kvVideo")[0].play();
            }
        }     
    });
}

// 프로젝트 상세 삽입
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");
    $(".btn_list").hide();
    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");
            $(".btn_list").fadeIn();
        }
        motionIdx++;                
    },100); 
    
    
    isScroll = false;
}

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

$(function(){
    dataInit("main"); //데이타 가져오기

    // 마우스포인터
    $(document).on("mouseenter", "a", function(){
        $(".pointer").addClass("on");
    });

    $(document).on("mouseleave", "a", function(){
        $(".pointer").removeClass("on");
    });

    // 쇼릴영상
    $(".btn_video").on("click", function(){
        $("#showreelVideo")[0].play();
    });
    $(".layer_showreel .btn_close").on("click", function(){
        $("#showreelVideo")[0].pause();
    });

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

    // 리스트 페이지 
    $(document).on("click", ".contents_main .btn_view a", function(){
        var listSeq = $(this).attr("data-seq");
        dataDetail(listSeq); 
        // console.log("프로젝트 상세");
    });    

    /* 상세 페이지 */
    // 상단 다음버튼 (오버효과)
    $("#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);
    });

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

    // sec1 : title
    var fadeSpeed = 5000; //텍스트 전환속도
    var showSpeed = 50; //텍스트 모션속도
    var titleIdx = 0;
    var timer,         
        thisSpan,
        numSpan;

    // 시작점모션
    var firstIdx = 0; 
    var firstArray = new Array();
    for(var num=0; num<$(".sec1 .title:first-child span").length; num++){   
        firstArray.push(num);  
        firstArray.sort(function(){
            return Math.random() - Math.random();
        })   
        setTimeout(function(){            
            $(".sec1 .title:first-child span").eq(firstArray[firstIdx]).addClass("on");
            firstIdx++;
        }, num*showSpeed);
    }
    
    // 시작이후모션
    var sec1_slider = function(){
        var array = new Array();        
        var arrayHide = new Array();        
        timer = setInterval(function(){
            array = [];
            arrayHide = [];
            var spanIdx = 0;
            var spanIdxHide =0;
            if(titleIdx>=2) titleIdx=-1;     
            titleIdx++; 
            
            thisSpan = $(".sec1 .title").eq(titleIdx).find("span");
            numSpan = thisSpan.length;

            //사라지는 모션
            // $(".sec1 .title span").removeClass("on");
            for(var num=0; num<$(".sec1 .title").eq(titleIdx-1).find("span").length; num++){   
                arrayHide.push(num);  
                arrayHide.sort(function(){
                    return Math.random() - Math.random();
                })                
                setTimeout(function(){
                    $(".sec1 .title").eq(titleIdx-1).find("span").eq(arrayHide[spanIdxHide]).removeClass("on");  
                    // console.log(spanIdxHide); 
                    spanIdxHide++;                
                }, num*showSpeed);
            }            
                        
            //나타나는 모션 
            setTimeout(function(){
                for(var num=0; num<numSpan; num++){   
                    array.push(num);  
                    array.sort(function(){
                        return Math.random() - Math.random();
                    })                
                    setTimeout(function(){
                        thisSpan.eq(array[spanIdx]).addClass("on");   
                        // console.log(spanIdx);
                        spanIdx++;                
                    }, num*showSpeed);
                }  
            },1300);  

        }, fadeSpeed);    
    }
    sec1_slider();

});

$(document).mousemove(function(e){
    var pointSize = $(".pointer").width()/2;
    $('.pointer').css("top", e.pageY-pointSize);
    $('.pointer').css("left", e.pageX-pointSize);
});