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

<div class="container">
    <div class="subHeader">
        <h1 class="logo">안동시 교통정보센터</h1>
        <div class="pageLocation">
            <%@ include file="/WEB-INF/jsp/egovframework/include/userSubMenu.jsp" %>
        </div>
    </div>
    <div class="trafficWrap realtime">
        <div class="searchBox">
            <div class="searchBox-cont">
                <div class="upload">
                    <span>평균속도 : <span class="upload-sped">-</span> km</span>
                    <span>&nbsp;거리 : <span class="upload-lngt">-</span> m</span>
                </div>
                <div class="dnload">
                    <span>평균속도 : <span class="dnload-sped">-</span> km</span>
                    <span>&nbsp;거리 : <span class="dnload-lngt">-</span> m</span>
                </div>
            </div>
            <div class="stmaptab">
                <a href="javascript:typeOfMap()" title="소통정보 지도에서 보기" class="bt map on mapBtn">지도</a>
                <a href="javascript:typeOfLetters()" title="소통정보 문자로 보기" class="bt roadList textBtn">문자</a>
            </div>
        </div>

        <div class="mapAreaWrap">
            <!-- 좌측목록 지도 영역 -->
            <div class="left-Area">
                <div class="left-list">
                    <div class="road-list">
                        <button class="list-button" type="button">도로목록</button>
                        <ul class="road">
                            <c:if test="${empty atrdNmList}">
                                <div class="road-empty">표출할 도로 목록이 없습니다.</div>
                            </c:if>
                            <c:if test="${!empty atrdNmList}">
                                <c:forEach var="item" items="${atrdNmList }" varStatus="status">
                                    <li class="atrd${status.index}"><a href="javascript:atrdTrfInfo('${item.atrd_id},${status.index}')" title="${item.atrd_nm }">${item.atrd_nm }</a></li>
                                </c:forEach>
                            </c:if>
                        </ul>
                    </div>
                    <div class="traffic-list-select">
                        <select id="atrdList" onchange="atrdTrfInfo(this.value)">
                            <option value="">도로목록</option>
                            <c:forEach var="item" items="${atrdNmList }" varStatus="status">
                                <option value="${item.atrd_id},${status.index}">${item.atrd_nm }</option>
                            </c:forEach>
                        </select>
                        <label for="atrdList"></label>
                    </div>
                </div>
            </div>
            <!-- // 좌측목록 지도 영역 -->
            <div class="mapContent map">
                <div id="map" style="width: 100%;height: 100%;"></div>
            </div>
            <div class="mapContent traffic-realtime-wrap hide">
                <ul class="traffic-list" id="mapOfLetters">
                </ul>
            </div>
        </div>
        <!-- // 서브 지도 영역 -->
    </div>
</div>

<%@ include file="/WEB-INF/jsp/egovframework/include/daumApiKey.jsp" %>
<script src="/js/main.js" type="text/javascript"></script>
<script src="/js/common.js" type="text/javascript"></script>
<script src="/js/traffic.js" type="text/javascript"></script>
<script type="text/javascript">
    _TrafficFlag = false;
    setInterval(getVertexArr, 1000 * 60 * 5);
    getVertexArr();

    $(".textBtn").on('click',function (){
        $(".textBtn").addClass("on");
        $(".mapBtn").removeClass("on");
    })
    $(".mapBtn").on('click',function (){
        $(".mapBtn").addClass("on");
        $(".textBtn").removeClass("on");
    })
    _Map.setMaxLevel(10);
</script>