$(document).ready(function() { 
    var timeout;
    var currentSubar = null; // 현재 활성화된 서브바를 저장할 변수
    var currentActive = $(".vdbk_total_wrap > .left_bar > .nv-row.active");

    $(".vdbk_total_wrap > .left_bar > .nv-row").mouseenter(function() {
        var $this = $(this);
        clearTimeout(timeout); // 이전 타임아웃 초기화

        // vido-로 시작하는 클래스 찾기
        var targetClass = $this.attr('class').split(' ').find(cls => cls.startsWith('vido-'));
        var relatedSubar = $('.left_subar_' + targetClass);

        // 서브바가 없으면 빈칸 처리를 추가
        if (!relatedSubar.length) {
            //console.log('관련된 서브바가 없어 빈칸으로 처리합니다:', targetClass);
            relatedSubar = $('<div class="left_subar_' + targetClass + '" style="display: none;"></div>');
            $(".vdbk_total_wrap").append(relatedSubar); // 빈 서브바를 동적으로 추가
            // console.error('관련된 서브바를 찾을 수 없습니다: ' + targetClass);
            // return;
        }

        // active 클래스 업데이트
        $(".vdbk_total_wrap > .left_bar > .nv-row").removeClass("active");
        $this.addClass("active");

        // 현재 활성화된 서브바가 다르면 처리
        if (currentSubar !== relatedSubar) {
            if (currentSubar) {

                currentSubar.stop(true, true).animate({ left: '0px', opacity: 0 }, 200, function() {
                    $(this).css({ display: 'none' });
                });
            }
            currentSubar = relatedSubar;
        }
        
        // 서브바를 활성화
        timeout = window.setTimeout(function() {

            relatedSubar.css({ left: '0px', opacity: 0, display: 'block', visibility: 'visible' }) // 초기 상태 설정 (투명도 0)
            .animate({ left: '260px', opacity: 1 }, 200, 'swing'); // 슬라이드하며 서서히 나타나기
        }, 400);

    }).mouseleave(function() {
        var $this = $(this);
        clearTimeout(timeout);

        // left_subar_로 시작하는 클래스를 찾기
        //var relatedClass = $this.attr('class').split(' ').find(cls => cls.startsWith('left_subar_'));
        var relatedClass = $this.attr('class').split(' ').find(cls => !cls.startsWith('nv-row')); 
        var relatedSubar = $('.left_subar_' + relatedClass);
        console.log("관련된 서브바: ", relatedClass);

        // 서브바가 없으면 빈칸 처리를 추가(전체보기 때문에 만들었는데 주석처리, 전체가 다시 생기면 주석해제필수.)
        // if (!relatedSubar.length) {
        //     //console.log('관련된 서브바가 없어 빈칸으로 처리합니다:', relatedClass);
        //     relatedSubar = $('<div class="left_subar_' + relatedClass + '" style="display: none;"></div>');
        //     $(".vdbk_total_wrap").append(relatedSubar); // 빈 서브바를 동적으로 추가
        //     // console.error('관련된 서브바를 찾을 수 없습니다: ' + targetClass);
        //     // return;
        // }

        // 타이머로 딜레이를 주고 서브바를 사라지게 한다.
        timeout = window.setTimeout(function() {
            
            //active 클래스 제거
            $(".vdbk_total_wrap > .left_bar > .nv-row").removeClass("active");
            currentActive.addClass("active");

            relatedSubar.animate({ left: '0px', opacity: 0 }, 100, function() {
                $(this).css({ display: 'none' });
            });
        }, 200);
    });

    // 마우스가 서브바 위에 있을 때는 사라지지 않게 설정
    $(".left_subar").mouseenter(function() {
        clearTimeout(timeout); // 서브바 위에 있을 때 타이머 초기화
        
        // 관련된 nv-row를 다시 active 상태로 설정
        var targetClass = $(this).attr('class').split(' ').find(cls => cls.startsWith('left_subar_')).replace('left_subar_', 'vido-');
        var relatedNvRow = $(".vdbk_total_wrap > .left_bar > .nv-row." + targetClass);
        if (relatedNvRow.length) {
            $(".vdbk_total_wrap > .left_bar > .nv-row").removeClass("active");
            relatedNvRow.addClass("active");
        }

    }).mouseleave(function() {
        var $this = $(this);

        // active 클래스 제거
        $(".vdbk_total_wrap > .left_bar > .nv-row").removeClass("active");
        currentActive.addClass("active");
        
        timeout = window.setTimeout(function() {
            
            // active 클래스 제거
            $(".vdbk_total_wrap > .left_bar > .nv-row").removeClass("active");
            currentActive.addClass("active");

            $this.animate({ left: '0px', opacity: 0 }, 100, function() {
                $(this).css({ display: 'none' });
            });
        }, 10); // 서브바에서 나가면 타이머 설정 후 사라지게 함
    });
});