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

<!-- POPUP -->
<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">

<!--mainContent-->

<section class="main-container">
    <!-- 좌측목록 지도 영역 -->
    <article class="left-Area main">
            <div class="left-Tab">
            <button type="button" title="도로" class="mapRoadList" id="trafficInfo" style="display: none">도로</button>
            <button type="button" title="도로" class="road on" id="roadInfo">도로</button>
            <button type="button" title="돌발" class="outbreak on" id="inciInfo">돌발</button>
            <button type="button" title="CCTV" class="cctv" id="cctvInfo">CCTV</button>
            <button type="button" title="VMS" class="vms" id="VMSInfo">VMS</button>
        </div>
        <div class="left-list">
            <div class="road-list">
                <button class="list-button" type="button" id='show' onclick="dis()">
                    도로목록
                </button>
                <ul class="dis">
                    <c:forEach var="item" items="${atrdNmList }">
                        <li><a href="javascript:atrdTrfInfo('${item.atrd_id }','${item.atrd_nm }')" title="${item.atrd_nm }">${item.atrd_nm }</a></li>
                    </c:forEach>
                </ul>
            </div>
            <div class="traffic-list-select">
                <select id="atrdList" onchange="if(this.value) location.href=(this.value);">
                    <option value="">도로목록</option>
                    <c:forEach var="item" items="${atrdNmList }">
                        <option value="javascript:atrdTrfInfo('${item.atrd_id }','${item.atrd_nm }')">${item.atrd_nm }</option>
                    </c:forEach>
                </select>
                <label for="atrdList"></label>
            </div>
        </div>
    </article>
    <!-- // 좌측목록 지도 영역 -->
    <!-- 서브 지도 영역 -->
    <img alt="loading" src="/images/ajax_loading.gif" id="loading" style="display:none;position:absolute;left:50%;top:40%;z-index:10"/>
    <div class="mapArea" id="map" tabindex="0"></div>
<%--    <div class="custom-speed" onclick="transSpeedGrad()">속도변환</div>--%>
    <img class="legend-img" alt="소통등급" src="/common/images/trafficStatus.png">
</section>

<%--<%@ include file="/WEB-INF/jsp/egovframework/include/daumApiKey.jsp" %>--%>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=${key}"></script>
<script src="/js/main.js?v=20250526"   type="text/javascript"></script>
<script src="/js/common.js?v=20250526" type="text/javascript"></script>
<script src="/js/traffic.js?v=20250526" type="text/javascript"></script>

<script type="text/javascript">
    init();
    $("#trafficInfo").trigger('click');

    //_TrafficFlag = false;
    //간선도로를 선택하면 줌 레벨에 상,하향 색상을 바꿔준다..
    kakao.maps.event.addListener(_Map, 'zoom_changed', function() {
        if(_AtrdId != null) showAtrdTrfInfo();
    });
    sideInfoList = true;

    //팝업 창 띄우기
    let left = 0;
    let t = 0;
    let popupYn;
    <c:forEach var="item" items="${possiblePopupList}">
        popupYn = getCookie('gm-${item.popupid}');

        if (popupYn !== 'Y') {
            let image = new Image();
            let width = 0;
            let height = 0;
            image.src = `/upload/${item.img_id }`;
            image.onload = function() {
                width = this.width;
                height = this.height;
                if (width <= 310) {
                    width = 310;
                }
                if (height <= 383) {
                    height = 383;
                }
                window.open(`/main/popup.do?id=${item.popupid}`, `${item.popupid}`,
                    'width='+(width) + ', height=' + (height + 30) +', left=' +left +', top=' + t);
                left += 50;
                t += 50;
            }
        }
    </c:forEach>
</script>
