/* =========================================================
   VERSION 1
   mousemove 사용
   마우스 커서를 따라가는 Tooltip
   ========================================================= */

scwin.onpageload = function() {

    scwin.initTooltip(
        grpPink.getID(),
        "분홍색 영역입니다.\n마우스를 움직이면 풍선말이 따라옵니다."
    );

    scwin.initTooltip(
        grpLime.getID(),
        "연두색 영역입니다.\n마우스를 움직이면 풍선말이 따라옵니다."
    );

};


scwin.initTooltip = function(targetRealId, tooltipHtml) {

    var targetDom =
        document.getElementById(targetRealId);

    if (!targetDom) {
        return;
    }

    /* 마우스 진입 */
    targetDom.addEventListener("mouseenter", function(e) {

        scwin.showTooltip(
            e,
            tooltipHtml
        );

    });

    /* 마우스 이동 */
    targetDom.addEventListener("mousemove", function(e) {

        scwin.moveTooltip(e);

    });

    /* 마우스 이탈 */
    targetDom.addEventListener("mouseleave", function() {

        scwin.hideTooltip();

    });

};


scwin.showTooltip = function(e, html) {

    var tooltipDom =
        document.getElementById(tooltip.getID());

    var contentDom =
        document.getElementById(tooltipContent.getID());

    if (!tooltipDom || !contentDom) {
        return;
    }

    /* tooltipContent에 내용 삽입 */
    contentDom.innerHTML =
        html.replace(/\n/g, "<br>");

    /* 툴팁 표시 */
    tooltipDom.classList.add("tooltipShow");

    /* 마우스 위치로 이동 */
    scwin.moveTooltip(e);

};


scwin.moveTooltip = function(e) {

    var tooltipDom =
        document.getElementById(tooltip.getID());

    if (!tooltipDom) {
        return;
    }

    var gapX = 15;
    var gapY = 15;

    var left =
        e.clientX + gapX;

    var top =
        e.clientY + gapY;

    tooltipDom.style.left =
        left + "px";

    tooltipDom.style.top =
        top + "px";

};


scwin.hideTooltip = function() {

    var tooltipDom =
        document.getElementById(tooltip.getID());

    if (!tooltipDom) {
        return;
    }

    tooltipDom.classList.remove("tooltipShow");

};

/* =========================================================
   VERSION 2
   mousemove 없음
   특정 영역 위쪽에 고정되는 Tooltip
   ========================================================= */

scwin.onpageload = function() {

    scwin.initTooltip(
        grpPink.getID(),
        "분홍색 영역입니다.\n마우스를 움직여도 풍선말은 고정됩니다."
    );

    scwin.initTooltip(
        grpLime.getID(),
        "연두색 영역입니다.\n마우스 아웃 시 자연스럽게 사라집니다."
    );

};


scwin.initTooltip = function(targetRealId, tooltipHtml) {

    var targetDom =
        document.getElementById(targetRealId);

    if (!targetDom) {
        return;
    }

    /* 마우스 진입 */
    targetDom.addEventListener("mouseenter", function() {

        scwin.showTooltip(
            targetDom,
            tooltipHtml
        );

    });

    /* mousemove 없음 */

    /* 마우스 이탈 */
    targetDom.addEventListener("mouseleave", function() {

        scwin.hideTooltip();

    });

};


scwin.showTooltip = function(targetDom, html) {

    var tooltipDom =
        document.getElementById(tooltip.getID());

    var contentDom =
        document.getElementById(tooltipContent.getID());

    if (!tooltipDom || !contentDom) {
        return;
    }

    /* tooltipContent에 내용 삽입 */
    contentDom.innerHTML =
        html.replace(/\n/g, "<br>");

    /* 툴팁 표시 */
    tooltipDom.classList.add("tooltipShow");

    /* 특정 영역 기준으로 위치 설정 */
    scwin.positionTooltip(
        targetDom,
        tooltipDom
    );

};


scwin.positionTooltip = function(targetDom, tooltipDom) {

    var rect =
        targetDom.getBoundingClientRect();

    var gap = 15;

    var tooltipWidth =
        tooltipDom.offsetWidth;

    var tooltipHeight =
        tooltipDom.offsetHeight;

    /* 대상 영역의 가로 중앙 */
    var left =
        rect.left +
        (rect.width - tooltipWidth) / 2;

    /* 대상 영역의 위쪽 */
    var top =
        rect.top -
        tooltipHeight -
        gap;

    tooltipDom.style.left =
        left + "px";

    tooltipDom.style.top =
        top + "px";

};


scwin.hideTooltip = function() {

    var tooltipDom =
        document.getElementById(tooltip.getID());

    if (!tooltipDom) {
        return;
    }

    tooltipDom.classList.remove("tooltipShow");

};