//템플릿로드
function loadTemplate(url, func) {
    var xhr = (window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"));
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            if (typeof func === 'function') func(xhr.responseText);
        }
    }
    xhr.open("GET", url, true);
    xhr.send();
}


//퀵메뉴
$(function () {
    $(window).scroll(function () {
        var windowH = $(window).height(),
            scrollY = $(window).scrollTop();

        $('.quick').each(function () {
            var elPosition = $(this).offset().top;
            if (scrollY > elPosition - windowH) {
                $('.quick>div').addClass('actives')
            }
            else {
                $('.quick>div').removeClass('actives')
            }


        })
    });
});

//팝업 닫기
function popUpClose(id, location, func) {
    location = typeof location !== 'undefined' ? location : 'reload';
    func = typeof func !== 'undefined' ? func : '';
    $('#' + id).css('display', 'none');
    if (location == 'reload') {
        window.location.reload();
    }
    else if (location == 'referrer') {
        history.back();
    }
    else if (location == 'N') {
        if (typeof func === 'function') func(response);
    }
    else {
        window.location.href = location;
    }
}

//맨위로 버튼
$(function () {
    $(window).scroll(function () {
        if ($(this).scrollTop() > 500) {
            $('.go-top').fadeIn();
        } else {
            $('.go-top').fadeOut();
        }
    });
    $(".go-top").click(function () {
        $('html, body').animate({
            scrollTop: 0
        }, 400);
        return false;
    });
});


//page copy
$('*[data-event="copy_page"]').click(function () {
    var tempElem = document.createElement('textarea');
    var html = '';
    var target = $(this).attr('data-target');
    if (target != undefined && target != '') {
        html = $('#' + target).clone();
    } else {
        html = $(this).clone();
    }
    if (html.length > 0) {
        html = html[0].outerHTML;
        html = html.replace('data-event="copy_code"', '');
        html = html.replace('id="' + target + '"', '');
        html = formatFactory(html)
        tempElem.value = html;
        document.body.appendChild(tempElem);

        tempElem.select();
        document.execCommand("copy");
        document.body.removeChild(tempElem);
        alert('Success copy this code.');
    } else {
        alert('Html code is empty.')
    }

});

//html code copy
$('*[data-event="copy_code"]').click(function () {
    var tempElem = document.createElement('textarea');
    var html = '';
    var target = $(this).attr('data-target');
    if (target != undefined && target != '') {
        html = $('#' + target).clone();
    } else {
        html = $(this).clone();
    }
    if (html.length > 0) {
        html = html[0].outerHTML;
        html = html.replace('data-event="copy_code"', '');
        html = html.replace('id="' + target + '"', '');
        html = formatFactory(html)
        tempElem.value = html;
        document.body.appendChild(tempElem);

        tempElem.select();
        document.execCommand("copy");
        document.body.removeChild(tempElem);
        alert('Success copy this code.');
    } else {
        alert('Html code is empty.')
    }
});

//code copy
$('*[data-event="copy_clipboard"]').click(function () {
    //data-clipboard-text
    var tempElem = document.createElement('textarea');
    var code = '';
    var target = $(this).attr('data-target');
    var currentText = $(this).html();


    //attr data-clipboard-text 복사할 텍스트 에서 가져온다
    code = $(this).attr('data-clipboard-text');

    // Create a temporary element to copy the code to clipboard
    tempElem.value = code;
    document.body.appendChild(tempElem);
    tempElem.select();
    document.execCommand("copy");
    document.body.removeChild(tempElem);

    // Show tooltip
    var tooltipElem = $('<div class="tooltip"><span class="material-symbols-outlined">done</span>Success</div>');
    $(this).text('');
    $(this).append(tooltipElem);
    setTimeout(function () {
        tooltipElem.remove();
        $(this).html(currentText);
    }.bind(this), 2000);
});

//html formater
function formatFactory(html) {
    function parse(html, tab = 0) {
        var tab;
        var html = $.parseHTML(html);
        var formatHtml = new String();
        function setTabs() {
            var tabs = new String();
            for (i = 0; i < tab; i++) {
                tabs += '\t';
            }
            return tabs;
        };
        $.each(html, function (i, el) {
            if (el.nodeName == '#text') {
                if (($(el).text().trim()).length) {
                    formatHtml += setTabs() + $(el).text().trim() + '\n';
                }
            } else {
                var innerHTML = $(el).html().trim();
                $(el).html(innerHTML.replace('\n', '').replace(/ +(?= )/g, ''));


                if ($(el).children().length) {
                    $(el).html('\n' + parse(innerHTML, (tab + 1)) + setTabs());
                    var outerHTML = $(el).prop('outerHTML').trim();
                    formatHtml += setTabs() + outerHTML + '\n';

                } else {
                    var outerHTML = $(el).prop('outerHTML').trim();
                    formatHtml += setTabs() + outerHTML + '\n';
                }
            }
        });
        return formatHtml;
    };
    return parse(html.replace(/(\r\n|\n|\r)/gm, " ").replace(/ +(?= )/g, ''));
};

// Function to Convert rgb to rgba
function rgb2rgba(rgb, opacity) {
    var rgbaValue = 'rgba(' + rgb.split('(')[1].split(')')[0].split(',').join(', ') + ', ' + opacity + ')';
    return rgbaValue;
}
//change rgba
function changeRgba(rgba, opacity) {
    var rgbaValue = 'rgba(' + rgba.split('(')[1].split(')')[0].split(',').join(', ') + ', ' + opacity + ')';
    return rgbaValue;
}

//반복 스타일 생성
function createStyleForeach(dom, style, defaultValue, value, math = "+") {
    var onlyNumDefault = defaultValue.replace(/[^0-9]/g, '');
    var onlyNumValue = value.replace(/[^-0-9]/g, '');
    var onlyUnitDefault = defaultValue.replace(/[^a-z]/gi, '');  //ms
    // var thisStyle = defaultValue;
    for (var i = 0; i < $(dom).length; i++) { // 배열 arr의 모든 요소의 인덱스(index)를 출력함.
        var li = $(dom)[i];
        if (i == 0) {
            $(li).css(style, defaultValue);
            continue;
        }
        // console.log(onlyNumValue); 
        var newNum = parseInt(onlyNumDefault) + (parseInt(onlyNumValue) * i);
        var newStyle = newNum + onlyUnitDefault;
        // var newStyle = `calc(${thisStyle} ${math} ${value})`;
        // console.log(newStyle); 
        $(li).css(style, newStyle);
        // thisStyle = $(li).css(style);
    }
}

// 스크롤 고정 컨텐츠 함수
function fixedScrollAdd(id) {
    var fixedScroll = id + ' .fixed-item';
    var imageScroll = id + ' .scroll-item';
    var imageScrollValue = $(imageScroll).offset().top;
    var fixedScrollHeight = $(fixedScroll).height();
    $(window).scroll(function () {
        var scrollTop = $(window).scrollTop();
        console.log(scrollTop);
        if (scrollTop > imageScrollValue) {
            $(fixedScroll).addClass('fixed');
        } else {
            $(fixedScroll).removeClass('fixed');
        }
        var fixedScrollBottom = $(fixedScroll).offset().top + fixedScrollHeight;
        var imageScrollBottom = $(imageScroll).offset().top + $(imageScroll).height();
        if (fixedScrollBottom > imageScrollBottom) {
            $(fixedScroll).removeClass('fixed');
            $(id + ' .fixed-area').addClass('fixed-end');
        } else {
            $(id + ' .fixed-area').removeClass('fixed-end');
        }

    });
}


//복사
function copyText() {
    $('.copy').click(function () {
        var text = $(this).text().trim(); // 앞뒤 공백 제거
        var $temp = $("<textarea>"); // <textarea>를 사용하여 줄바꿈 포함 복사
        $("body").append($temp);
        $temp.val(text).select();
        document.execCommand("copy");
        $temp.remove();

        var text_short = text;
        if (text.length > 15) {
            text_short = text.substring(0, 15) + '...';
        }
        showNotificationsAlert('success', '복사', text_short + '');
    });
}
copyText();

// 복사
function copyAny(val, noti, func) {
    noti = typeof noti !== 'undefined' ? noti : false;
    func = typeof func !== 'undefined' ? func : '';
    var text = val;
    var $temp = $("<input>");
    $("body").append($temp);
    $temp.val(text).select();
    document.execCommand("copy");
    $temp.remove();
    var text_short = text;
    if (text.length > 15) {
        text_short = text.substring(0, 15) + '...';
    }
    if (noti) {
        showNotificationsAlert('success', '복사', text_short + '');
    }

    if (typeof func === 'function') func(val);

}

// sticky 상태인지 체크
function throttle(func, limit) {
    let inThrottle;
    return function () {
        const args = arguments;
        const context = this;
        if (!inThrottle) {
            func.apply(context, args);
            inThrottle = true;
            setTimeout(() => inThrottle = false, limit);
        }
    };
}

function checkStickyState(domID, callback) {
    var stickyElement = document.getElementById(domID);
    //stickyElement 존재
    if (!stickyElement) {
        return;
    }
    var originalOffsetTop = stickyElement.offsetTop;

    const throttledScroll = throttle(function () {
        var scrollPosition = window.scrollY;
        var isSticky = scrollPosition >= (originalOffsetTop - 50); // 50px 더 일찍 sticky 적용
        callback(domID, isSticky);
    }, 200); // 적절한 시간 간격을 설정해보세요.

    window.addEventListener('scroll', throttledScroll);
}

// CSS 변수의 값을 가져오는 함수
function getCSSVariableValue(variableName) {
    // 현재 문서의 루트 요소에 대한 스타일을 가져옴
    var rootStyles = getComputedStyle(document.documentElement);

    // 변수 이름을 이용하여 값을 가져옴
    return rootStyles.getPropertyValue(`--${variableName}`).trim();
}

//팝업 새창
function popup_open(url, name, width, height, position_x, position_y) {
    position_x = typeof position_x !== 'undefined' ? position_x : 100;
    position_y = typeof position_y !== 'undefined' ? position_y : 100;

    // 현재 창의 화면 크기 가져오기
    var screenLeft = window.screenLeft !== undefined ? window.screenLeft : window.screenX;
    var screenTop = window.screenTop !== undefined ? window.screenTop : window.screenY;

    var screenWidth = window.innerWidth || document.documentElement.clientWidth || screen.width;
    var screenHeight = window.innerHeight || document.documentElement.clientHeight || screen.height;

    // 팝업 창의 위치 계산 (가로/세로 중앙으로 설정)
    var left = screenLeft+position_x;
    var top = screenTop+position_y;

    // 팝업 창 열기
    window.open(url, name, 'width=' + width + ',height=' + height + ',scrollbars=yes, left=' + left + ', top=' + top);
}

 // 타겟안에서 마우스 스크롤 터치 구현
 function bind_drag_to_scroll(dom) {
    let isDragging = false;
    let startX = 0;
    let scrollLeft = 0;
    let preventClick = false;

    // 마우스 다운 이벤트 등록 (dom 내부에서만 작동)
    dom.on("mousedown", function (e) {
        if (!$(e.target).closest(dom).length) return; // dom 내부에서만 작동하도록 제한

        isDragging = true;
        startX = e.pageX;
        scrollLeft = dom.scrollLeft();
        dom.css("cursor", "grabbing");
        $(e.target).css("cursor", "grabbing");  // 클릭한 a 태그에도 커서 적용

        // 드래그 중에 텍스트 선택 방지
        dom.css("user-select", "none");

        // 링크 클릭 방지
        e.preventDefault();
    });

    // 마우스 이동 이벤트 등록
    $(document).on("mousemove", function (e) {
        if (!isDragging) return;

        const dx = e.pageX - startX;
        dom.scrollLeft(scrollLeft - dx);
    });

    // 마우스 업 이벤트 등록
    $(document).on("mouseup", function (e) {
        if (!isDragging) return;

        isDragging = false;
        dom.css("cursor", "grab");
        $(e.target).css("cursor", "pointer");  // 클릭한 a 태그 커서 리셋

        // 드래그 종료 후 텍스트 선택 가능하게 설정
        dom.css("user-select", "auto");

        // 드래그 종료 후 링크 클릭 방지
        preventClick = true;
        setTimeout(function () {
            preventClick = false; // 일정 시간 후 클릭 방지 해제
        }, 200);  // 200ms 동안 클릭 방지

        // 링크 클릭 방지 해제 (드래그 끝나면 클릭이 정상적으로 동작)
        e.preventDefault();
    });

    // a 태그 클릭 방지 (드래그 종료 후)
    $(document).on("click", "a", function (e) {
        if (preventClick) {
            e.preventDefault(); // 클릭 이벤트 방지
        }
    });
}