<%@ 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://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
    
		<div class="mapUIWrap statistic">
			<div class="mapTop">
				<dl class="f-clear">
					<dt><a href="javascript:void(0)" title="차량검지기 구간목록">검지기 구간목록</a>
					<a href="javascript:sideListShow()" title="차량검지기 구간목록숨김" class="hideShowButton"></a></dt>
				</dl>
				<!--모바일인 경우-->
				<div class="trafficListM">
					<label for="trafficSelect"></label>
					<select class="trafficSelect" id="trafficSelect" onchange="showVdsStatsInfo(this.value)">
						<option value="">도로 구간 선택</option>
						<c:forEach var="item" items="${vdsCtlrList }">
						<option value="${item.LINK_ID }">${item.STR_NAME } &rarr; ${item.END_NAME }</option>
						</c:forEach>
					</select>
				</div>
			</div>
			<div class="mapContent">
				<div class="sideInfoList">
					<div class="infoScroll">
						<ul class="list control" id="vdsList">
							<c:forEach var="item" items="${vdsCtlrList }">
							<li><a href="javascript:showVdsStatsInfo(${item.LINK_ID })" title="${item.STR_NAME } &rarr; ${item.END_NAME }">${item.STR_NAME } &rarr; ${item.END_NAME }</a></li>
							</c:forEach>
						</ul>
					</div>
				</div>
				<aside class="staticMapRoadList" style="display:block !important">
					<div class="staticSearchArea volume">
						<ul class="f-clear">
							<li>
							<label for="vdsListSub">도로 구간 선택</label>
								<a href="javascript:void(0)" id="contents" style="position:absolute;left:-9999px" tabIndex="19"></a>
								<select class="select w200" id="vdsListSub" tabIndex="19">
									<option value="">선택</option>
									<c:forEach var="item" items="${vdsCtlrList }">
									<option value="${item.LINK_ID }">${item.STR_NAME } &rarr; ${item.END_NAME }</option>
									</c:forEach>
								</select>
								<select class="select w80" id="statsStrtYear" tabIndex="20">
									<c:forEach begin="${thisYear - 1}" end="${thisYear}" varStatus="status">
									<option value="${status.current}" <c:if test="${status.current == thisYear}">selected</c:if>>${status.current}</option>
									</c:forEach>
								</select><span class="text"><label for="statsStrtYear">년</label></span>
								<select class="select w70" id="statsStrtMonth" onchange="getLastDay(this.value)" tabIndex="21">
									<c:forEach begin="1" end="12" varStatus="status">
									<option value="<fmt:formatNumber pattern="00" value="${status.current}"/>" <c:if test="${status.current == thisMonth}">selected</c:if>><fmt:formatNumber pattern="00" value="${status.current}"/></option>
									</c:forEach>
								</select><span class="text"><label for="statsStrtMonth">월</label></span>
								<select class="select w70" id="statsStrtDay" tabIndex="22">
									<c:forEach begin="1" end="${lastDay }" varStatus="status">
									<option value="<fmt:formatNumber pattern="00" value="${status.current}"/>" <c:if test="${status.current == thisDate}">selected</c:if>><fmt:formatNumber pattern="00" value="${status.current}"/></option>
									</c:forEach>
								</select><span class="text"><label for="statsStrtDay">일</label></span> ~ 
								<select class="select w80" id="statsEndYear" tabIndex="23">
									<c:forEach begin="${thisYear - 1}" end="${thisYear}" varStatus="status">
									<option value="${status.current}" <c:if test="${status.current == thisYear}">selected</c:if>>${status.current}</option>
									</c:forEach>
								</select><span class="text"><label for="statsEndYear">년</label></span>
								<select class="select w70" id="statsEndMonth" onchange="getLastDay(this.value)" tabIndex="24">
									<c:forEach begin="1" end="12" varStatus="status">
									<option value="<fmt:formatNumber pattern="00" value="${status.current}"/>" <c:if test="${status.current == thisMonth}">selected</c:if>><fmt:formatNumber pattern="00" value="${status.current}"/></option>
									</c:forEach>
								</select><span class="text"><label for="statsEndMonth">월</label></span>
								<select class="select w70" id="statsEndDay" tabIndex="25">
									<c:forEach begin="1" end="${lastDay }" varStatus="status">
									<option value="<fmt:formatNumber pattern="00" value="${status.current}"/>" <c:if test="${status.current == thisDate}">selected</c:if>><fmt:formatNumber pattern="00" value="${status.current}"/></option>
									</c:forEach>
								</select><span class="text"><label for="statsEndDay">일</label></span>
							</li>
						</ul>
	                    <div class="mapButton">
	                        <div class="buttonGroup">
	                            <a href="javascript:showVdsStatsInfo($('#vdsListSub').val())" title="통계조회" class="bt map" tabIndex="26">통계조회</a>
	                        </div>
	                    </div>
	                </div>
					<div class="flexTable">
						<ul class="thead">
	                        <li>날짜 / 시간</li>
	                        <c:forEach var="i" begin="0" end="23">
							<li><c:choose><c:when test="${i < 10}">0${i }</c:when>
							<c:otherwise>${i }</c:otherwise></c:choose></li>
							</c:forEach>
	                        <li>합계</li>
	                    </ul>
	                    <div class="flexDataTable" id="vdsStatsBody"></div>
	                    <img alt="loading" src="/images/ajax_loading.gif" id="loading" style="display:none;position:absolute;left:50%;z-index:10"/>
	                </div>
	                <article id="highcharts" style="min-width:310px;height:350px;padding:10px;overflow-y:auto;margin:0 auto"></article>
	            </aside>
	        </div>
	    </div>
<script src="/js/highcharts/highcharts.js"  type="text/javascript"></script>
<script src="/js/highcharts/exporting.js"   type="text/javascript"></script>
<script src="/js/trafficStats.js"           type="text/javascript"></script>
	    
	   