<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ include file="/WEB-INF/jsp/egovframework/include/daumApiKey.jsp" %>
<main class="inner_ly">
    <div class="container">
        <div class="mainContent">
            <h1 class="greeting">안동시 교통정보센터</h1>
            <div class="weather">
                <div class="weather-cont">
                    <div class="w-text01 todayImg">
                        <span>오늘의 날씨</span>
                        <span class="todayTemp">- ℃</span>
                    </div>
                    <div class="w-text02">
                        <span>초미세먼지</span>
                        <span class="pm25">- ㎍/㎥ -</span>
                    </div>
                    <div class="w-text02">
                        <span>미세먼지</span>
                        <span class="pm10">- ㎍/㎥ -</span>
                    </div>
                </div>
            </div>
            <div class="contents">
                <div class="mapArea">
                    <div class="mapMenu">
                        <ul>
                            <li class="traf-btn on" ><button title="소통정보">소통정보</button></li>
                            <li class="incd-btn on"><button title="돌발정보">돌발정보</button></li>
<%--                            <li class="cctv-btn"><button title="CCTV">CCTV</button></li>--%>
                            <li class="vms-btn"><button title="VMS">VMS</button></li>
                            <li class="parking-btn"><button title="주차정보">주차정보</button></li>
                        </ul>
                    </div>
                    <div id="map" class="main-map"></div>
                    <div class="traffic-status">
                        <span class="LTC1">원활</span>
                        <span class="LTC2">서행</span>
                        <span class="LTC3">정체</span>
                        <span class="LTC0">정보없음</span>
                    </div>
                </div>
                <div class="traffic-info">
                    <ul class="traffic-tab">
                        <li id="traffic" class="active">
                            <a href="javascript:selectRightTabs('traffic', 'notice')">
                                지체/정체구간<br>소통정보
                            </a>
                        </li>
                        <li id="notice"><a href="javascript:selectRightTabs('notice', 'traffic')">공지사항</a></li>
                    </ul>
                    <div class="rollingOuter">
                        <div class="no-info-box">
                            <img src="/images/main/no_info_icon.png" alt="지정체구간이 없습니다">
                            <p>현재 진행중인<br><strong>지정체구간정보</strong>가 없습니다.</p>
                        </div>
                    </div>
                </div>
                <ul class="quick-link">
                    <li>
                        <a href="/traffic/realtime.do" class="link-traffic" title="교통정보">
                            <p><strong>실시간교통정보</strong><span>Traffic information</span></p>
                            <span>안동시 도로의 실시간<br>교통정보입니다.</span>
                        </a>
                    </li>
                    <li>
                        <a href="/parking/parking.do" class="link-traffic" title="주차정보">
                            <p><strong>주차정보</strong><span>Parking Information</span></p>
                            <span>안동시 주차장 위치정보<br>입니다.</span>
                        </a>
                    </li>
                    <li>
                        <a href="/traffic/incd.do" class="link-traffic" title="돌발정보">
                            <p><strong>돌발정보</strong><span>Incident Information</span></p>
                            <span>안동시 도로의 실시간<br>돌발상황정보 입니다.</span>
                        </a>
                    </li>
                    <li>
                        <a href="/traffic/vms.do" class="link-traffic" title="VMS정보">
                            <p><strong>전광판정보</strong><span>VMS information</span></p>
                            <span>안동시 도로의 실시간<br>전광판(VMS)정보 입니다.</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</main>
<script type="text/javascript" src="/js/main.js"></script>
<script>
    init();
    //팝업 창 띄우기
    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 }.do`;
            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 + 20) + ', height=' + (height + 100) +', left=' +left +', top=' + t);
                left += 50;
                t += 50;
            }
        }
    </c:forEach>
</script>
