<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles" %>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content= "text/html; charset= utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no">
    <link rel="favicon" href="/images/favicon.ico">
    <title>안동시 교통정보센터 - ${subTitle}</title>

<%--    <link href="/common/bootstrap-5.1.3-dist/css/bootstrap.min.css" rel="stylesheet">--%>
    <link rel="stylesheet" type="text/css" href="/css/reset.css" />
    <link rel="stylesheet" type="text/css" href="/css/style.css" />
    <c:if test="${siteSubInfo ne 'mainWrap'}">
        <link rel="stylesheet" type="text/css" href="/css/contents.css" />
    </c:if>
    <link rel="stylesheet" type="text/css" href="/css/responsive.css" />
    <link rel="stylesheet" type="text/css" href="/common/css/jquery-ui-1.13.2.min.css">
    <link rel="stylesheet" type="text/css" href="/css/admin.css" />
    <script type="text/javascript" src="/js/jquery-3.7.0.min.js"></script>
    <script type="text/javascript" src="/js/jquery-ui-1.13.2.min.js"></script>
    <script type="text/javascript" src="/js/common.js"></script>
</head>
<body class="<c:if test="${siteSubInfo eq 'mainWrap'}">${siteSubInfo}</c:if>">
<div id="wrap" class="<c:if test="${siteSubInfo ne 'mainWrap'}">${siteSubInfo}</c:if>">
    <tiles:insertAttribute name="header"/>
    <tiles:insertAttribute name="content"/>
    <tiles:insertAttribute name="footer"/>
</div>
</body>
</html>

<script type="text/javascript">
    // if (document.location.protocol == 'http:') {
    //     document.location.href = document.location.href.replace('http:', 'https:');
    // }
    let con_width = $(window).innerWidth();
    let con_height = $(window).height();

    /* 서브 탑메뉴 */
    if ( $("#subMenu").length > 0 ) {
        if ( con_width < 623 ) {
            $("#subMenu li").css("width",(100/$("#subMenu li").size())+"%");
        }else {
            $("#subMenu li").css("width","auto");
        }
    }

    $(window).resize(function  () {
        con_width = $(window).innerWidth();
        con_height = $(window).height();

        if ( $("#subMenu").length > 0 ) {
            if ( con_width < 623 ) {
                $("#subMenu li").css("width",(100/$("#subMenu li").size())+"%");
            }else {
                $("#subMenu li").css("width","auto");
            }
        }
    });

    /* 교통정보 리스트 버튼  */
    $("#trafficLeftBar h1 a").click(function  () {
        $(".traffic-list-box").toggle();
        return false;
    });
    /* TOP 버튼 */
    $("a.to-top").on("click",function  () {
        $("html, body").animate({scrollTop:0},400,"easeInOutCubic");
        return false;
    })

    /* 패밀리사이트 */
    $(".family-open-btn").click(function  () {
        $(this).siblings("ul").stop().slideToggle(200);
        return false;
    });

    /* 교통정보 롤링 */
    $(".rolling-box").each(function  () {
        var $itemList = $(this).children("ul");
        var itemNum = $itemList.children("li").size();
        var itemHeight =$itemList.children("li").outerHeight();
        var itemMinNum = 4; // 자동롤링이 시작되어야 하는 갯수

        //$itemList.css("width", itemNum * itemHeight +"px");
        if ( itemMinNum <= itemNum  ) {
            $itemList.find("li:last").prependTo($itemList);
            $itemList.css("marginTop","-"+itemHeight+"px");

            function itemRolling () {
                $itemList.not(":animated").animate({
                    marginTop:parseInt($itemList.css("margin-top"))-itemHeight+"px"
                },600,"swing",function(){
                    $itemList.css("margin-top","-"+itemHeight+"px");
                    $itemList.find("li").first().appendTo($itemList);
                });
            }
            var timer = setInterval(function(){
                itemRolling();
            },2000);
        }
    });
    /* GNB 오픈 */
    var menu = "close";

    $("#header .gnb-right-btn").click(function  () {
        if (con_width < 623) {
            if ( menu == "open" ) {
                menuClose();
                menu = "close";
            }else {
                menuOpen();
                menu = "open";
            }
            return false;
        }
    });


    $(function(){

        var gnbInit = function() {
            var _target = $('.header_inner .navlist > li > a');
            $('.header_inner').removeClass("on");
            _target.parent().each(function(index, element) {
                $(element).find(".dp2").removeAttr('style');
                var dp2OtherWd = parseInt($(element).find(".dp2").outerWidth());
                $(element).find(".dp2").css("margin-left", -(parseInt(0)));
            });

            _target.parent().hover(
                function() {
                    var _this = $(this);
                    var _thispt = _this.parent();

                    $('.header_inner .navlist > li').removeClass("on");
                    _this.addClass("on");
                },
                function() {
                    var _this = $(this);
                    var _thispt = _this.parent();
                    _this.removeClass("on");
                }
            );
        };

        var gnbMobileLink = function() {

            var _target = $('.header_inner .navlist > li > a');
            $('.header_inner .navlist .dp2').removeAttr('style');
            _target.on("click", function(e) {
                var _this = $(this);
                var _thispt = _this.parent();
                if(_thispt.hasClass("on")) {
                    _thispt.removeClass("on");
                    _thispt.find(".dp2").slideUp();
                } else {
                    $('.header_inner .navlist > li').removeClass("on");
                    _thispt.addClass("on");
                    $('.header_inner .navlist .dp2').slideUp();
                    _thispt.find(".dp2").slideDown();
                }
            });
        };

        $('.navtoggle .toggle').on("click", function(e) {
            e.preventDefault();
            var _this = $(this);
            var _targetNav = _this.parents("nav");
            if(_targetNav.hasClass("on")) {
                _targetNav.removeClass("on");
            } else {
                _targetNav.addClass("on");
            }
        });



        function gnbResponse(e) {

            var winWH = $(window).width();
            var natTargetOrigin = $('.header_inner .navlist > li > a');
            if(winWH < 1280) {
                natTargetOrigin.off("click");
                gnbMobileLink(e);
                natTargetOrigin.parent().off("mouseenter");
                natTargetOrigin.parent().each(function(index, element) {
                    $(element).find(".dp2").parents("li").addClass("act");
                });
                //$("#talkFloat").removeClass("on");
                //$("#talkFloat").addClass("mb");

            } else {
                gnbInit();
                natTargetOrigin.off("click");
                natTargetOrigin.parent().removeClass("act");
                //$("#talkFloat").addClass("on");
            }

            if(winWH < 768) {
                $("#talkFloat").addClass("on");
                $("#talkFloat").addClass("moff");
            } else {
                //$("#talkFloat").addClass("on");
                $("#talkFloat").removeClass("moff");
                $("#talkFloat").removeClass("mon");
            }
        }
        gnbResponse();


        $(window).resize(function() {
            gnbResponse();
        });

    });

</script>