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

<!--contents-->
<div id="divContent">
    <section >
        <div class="mapUIWrap">
        	<h1>소통 정보</h1>
            <div class="mapTop">
               <h2>사이드 정보 목록</h2>
                <dl class="f-clear">
                    <dt>
                    	<h3>도로목록</h3>
                        <a href="javascript:void(0)" title="도로목록">도로 목록</a>
                        <a href="javascript:sideListShow('도로')" title="도로목록숨김" class="hideShowButton" ></a></dt>
                    <dd>
                    	<h3>소통정보 속도별 색정보</h3>
                        <span>원활</span>
                        <span>
                            <img src="/images/mapping-green.png" width="65" height="10" alt="도로소통정보범례(소통정보원활)" style="margin:0 -40px 0 0">
                            <img src="/images/mapping-yellow.png" width="90" height="10" alt="도로소통정보범례(소통정보지체)" style="margin:0 -40px 0 0">
                            <img src="/images/mapping-red.png" width="60" height="10" alt="도로소통정보범례(소통정보정체)" style="margin:0 0 0 0">
                        </span>
                        <span>정체</span>
                    </dd>
                </dl>
                <!--모바일인 경우-->
                <div class="trafficListM">
                	<h3>모바일 도로목록</h3>
                    <label for="trafficSelect"></label>
                    <select class="trafficSelect" id="trafficSelect" onchange="atrdTrfInfo(this.value)">
                        <option value="">도로선택</option>                            
						<c:forEach var="item" items="${atrdNmList }">
						<option value="${item.atrd_id }">${item.atrd_nm }</option>
						</c:forEach>                     
                    </select>
                </div>
                <div class="commu_info" id="trafficInfo">
                	<h3>상하행 문자정보</h3>
                    <dl>
                        <dt><a href="javascript:void(0)" title="상행">상행</a></dt>
                        <dd>
                            <a href="javascript:void(0)" title="평균속도 : 0 km/h거리 : 0 km">
                                <span>평균속도 : 0 km/h</span>
                                <span>거리 : 0 km</span>
                            </a>
                        </dd>
                    </dl>
                    <dl>
                        <dt>
                            <a href="javascript:void(0)" title="하행">하행</a>
                        </dt>
                        <dd>
                            <a href="javascript:void(0)" title="평균속도 : 0 km/h거리 : 0 km">
                                <span>평균속도 : 0 km/h</span>
                                <span>거리 : 0 km</span>
                            </a>
                        </dd>
                    </dl>
                </div>
            </div>

            <div class="mapContent">
            	<h2>소통 정보 컨텐츠</h2>
           		<div class="mapButton" id="contents">
           			<h3>소통정보 방식선택</h3>
                    <a href="javascript:typeOfMap()" title="소통정보 지도에서 보기" class="bt map">지도</a>
                    <a href="javascript:typeOfLetters()" title="소통정보 문자로 보기" class="bt roadList">문자</a>
                </div>
                <div class="sideInfoList">
                	<h3>도로 목록</h3>
                    <div class="infoScroll">
                   		
                        <ul class="list control">
							<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>

                <aside class="mapRoadList" style="display: none;">
                    <div class="tableStyle">
                    	<h3 id="selectRoadFont">도로 문자정보</h3>
                        <table class="table">
                            <caption>문자소통정보</caption>
							<thead>
								<tr>
									<th scope="col">방향/도로명/속도</th>
									<th scope="col">진행방향</th>
									<th scope="col">소통정보</th>
								</tr>
							</thead>
                            <tbody id="mapOfLetters">
                            </tbody>
                        </table>
 
                    </div>

                </aside>
				<!-- 맵 div -->
				<img alt="loading" src="/images/ajax_loading.gif" id="loading" style="display:none;position:absolute;left:50%;top:25%;z-index:10"/>
				<div id="map" class="mapArea" style="width: 100%; height: 750px; float:left; display:block;"><h3 id="selectRoad">지도소통정보</h3></div>
				
            </div>
        </div>
    </section>
</div>
    
    <!--//contents-->
<%@ 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();
	//간선도로를 선택하면 줌 레벨에 상,하향 색상을 바꿔준다..
	daum.maps.event.addListener(_Map, 'zoom_changed', function() {
		if(_AtrdId != null) showAtrdTrfInfo();
	});
	sideInfoList = true;

</script>
