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

<script type="text/javascript">

    function setCookie(name, value, expiredays) {
        var todayDate = new Date();
        todayDate.setDate(todayDate.getDate() + expiredays);
        console.log( todayDate.toGMTString());
        document.cookie = name + "=" + escape(value) + "; path=/; expires=" +
            todayDate.toGMTString() + " Secure;"
    }
    function closeWin(id) {
        if ($("input:checkbox[name='chkbox']").is(":checked")) {
            setCookie("divpop" + id, "done", 1);
        } else {}
        $("#" + id)
            .parent()
            .css('visibility', 'hidden');
    }
    var left = 0;
    var t = 0;
    
    function getCookie (name) {
		var nameOfCookie = name + "=";
        var x = 0; while (x <= document.cookie.length) {
            var y = (x + nameOfCookie.length);
            if (document.cookie.substring(x, y) == nameOfCookie) {
                if ((endOfCookie = document.cookie.indexOf(";", y)) == -1)
                    endOfCookie = document.cookie.length;
                return unescape(document.cookie.substring(y, endOfCookie));
            }
            x = document.cookie.indexOf(" ", x) + 1; if (x == 0)
                break;
        }
        return "";
	}
</script>

<!-- POPUP -->
<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
<c:forEach var="item" items="${possiblePopupList}" begin="0" end="5"  varStatus="status">
	<script>
		var popupYn = getCookie('gm-${item.POPUPID}');
		console.log(popupYn);
		if (popupYn !== 'Y') {
			var image = new Image();
			var width = 0;
			var height = 0;
			image.src = `/images/img_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 + 20) +', height=' + (height + 100) + ', left=' + left + ', top=' + t);
				left += 50;
				t += 50;
			}	
		}
		
	</script>
</c:forEach>

<!--mainContent-->

<section class="main-container">
    <!-- 좌측목록 지도 영역 -->
    <article class="left-Area">
            <div class="left-Tab">
            <button type="button" title="도로" class="mapRoadList" id="trafficInfo" style="display: none">도로</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>
        <script>
        </script>
        <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>
    <img class="legend-img" alt="소통등급" src="/common/images/trafficStatus.png">
</section>

<%@ 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">
    init();
    $("#trafficInfo").trigger('click');


    <c:if test="${possiblePopupList.size() gt 0}">

    var cookiedata = document.cookie;
    <c:forEach var="item" items="${possiblePopupList}" begin="0" end="5" varStatus="status">
    var id = "<c:out value='${item.POPUPID}'/>";
    if ( cookiedata.indexOf("divpop"+id+"=done") < 0 ){
        $("#"+id).parent().css('visibility','visible');
        //document.all['divpop60'].style.visibility = "visible";
    }else {
        $("#"+id).parent().css('visibility','hidden');
        //document.all['divpop'].style.visibility = "hidden";
    }
    </c:forEach>
    </c:if>
</script>

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

</script>
