<!DOCTYPE html>
<html lang="en" xmlns:th=http://www.thymeleaf.org>
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width,initial-scale=1"/>
        <meta name="theme-color" content="#000000"/>
        <meta name="description" content="포항시 교통정보센터입니다"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <title>포항시 교통정보센터</title>
        <th:block th:include="/include/head.html"></th:block>
        <link rel="stylesheet" th:href="@{/css/main.css}">
    </head>
    <body id="body">
        <th:block th:include="/include/header.html"></th:block>
        <div class="mainWrap">
            <div class="main">
                <div class="main-menu">
                    <div class="top">
                        <div title="포항시 교통 CCTV 영상을 확인할 수 있습니다." class="first-bg" th:onclick="movePath('/trafficMap/cctvMap')">
                            <div>교통CCTV</div>
                        </div>
                        <div title="포항시 실시간 도로 소통 정보를 확인할 수 있습니다." class="other-bg road-bg" th:onclick="movePath('/trafficMap/realtimetraffic')">
                            <div>실시간소통정보</div>
                        </div>
                        <div title="포항시 교통 통계를 제공합니다." class="other-bg stat-bg" th:onclick="movePath('/statistics/traffic01')">
                            <div>교통통계</div>
                        </div>
                        <div title="포항시 주차정보를 제공합니다." class="other-bg parking-bg" th:onclick="movePath('/trafficMap/parking')">
                            <div>주차정보</div>
                        </div>
                        <div title="포항시 버스정보시스템 홈페이지로 이동합니다.(새 창 열기)" class="other-bg bus-bg" th:onclick="openBusSite(0)">
                            <div>
                                버스정보시스템
                                <img class="bus-direction" src="/images/icon/direction.png" alt="새 창 열기">
                            </div>
                        </div>
                    </div>
                    <div class="mid">
                        <div class="notice">
                            <div>
                                <img src="/images/icon/alarm.png" alt="">
                                <span>공지사항</span>
                                <a href="/notice/list">+</a>
                            </div>
                            <div class="content">
                                <div th:if="${notice != null && notice.size() > 0}" th:onclick="moveNoticeView([[${item.getBoardNo()}]], false)" th:each="item, i:${notice}">
                                    <div th:title="${item.getBSubject()}" th:text="${item.getBSubject()}"></div>
                                    <span th:text="${item.getRegDate()}"></span>
                                </div>
                                <div th:if="${notice == null} or ${notice.size() == 0}">데이터가 없습니다.</div>
                            </div>
                        </div>
                        <div class="incd">
                            <div>
                                <img src="/images/icon/incd.png" alt="">
                                <span>돌발정보</span>
                                <a href="/trafficMap/incidents">+</a>
                            </div>
                            <div class="incd-content">
                                <div th:if="${incident != null and incident.size() > 0}" th:each="item, i:${incident}">
                                    <div th:onclick="movePath([['/trafficMap/incidents/'+ ${item.getIncdOcrrId()}]])" th:title="${item.getIncdTitl()}" th:text="${item.getIncdTitl()}"></div>
                                    <span th:text="${item.getAgoMinutes()}"></span>
                                </div>
                                <div th:if="${incident == null} or ${incident.size() == 0}">데이터가 없습니다.</div>
                            </div>
                        </div>
<!--                        <div class="center" onclick="movePath('/center/center')">-->
<!--                            <div>교통정보센터 소개 ></div>-->
<!--                        </div>-->
                    </div>
                    <div class="bottom">
                        <div class="center" onclick="movePath('/center/center')">
                            <div>교통정보센터 소개 ></div>
                        </div>
                        <div>
                            <div><img src="/images/icon/video.png" alt="동영상 아이콘">홍보 동영상</div>
                            <video controls>
                                <source src="https://wowza.pohang.go.kr/live/23.stream/playlist.m3u8" preload="metadata" type="video/mp4">
                                이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
                            </video>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <th:block th:include="/include/footer.html"></th:block>
    </body>
</html>

<script th:inline="javascript">
    //    let isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
    const popup = [[${popup}]];
    if (popup && popup.length > 0) {
        let top = $('header').innerHeight();
        let left = 0;
        let gap  = 10;
        popup.forEach((obj, idx)=>{
            const cookieName = 'p_' + obj.popupid;
            const cookieInfo = getCookie(cookieName);

            if (!cookieInfo) {
                setCookie(cookieName, 'Y', null);
            }
            if (cookieInfo === 'N') {
                return;
            }
            const popupDiv = $(`<div id="popup_${obj.popupid}" class="popup_content">
                                    <div id="${obj.popupid}_div">
                                        ${obj.pcontent}
                                    </div>
                                    <div class="close-box">
                                        <label for="popup_check_${obj.popupid}">오늘 하루 열지 않기</label>
                                        <input id="popup_check_${obj.popupid}" type="checkbox" value="${obj.popupid}">
                                        <div onclick="closePopup(${obj.popupid})"> [닫기]</div>
                                    </div>
                                </div>`);
            $('body').append(popupDiv);

            popupDiv.draggable({containment: 'body', handle : '#'+obj.popupid +'_div'});

            let incGap = gap * idx;
            let incTop = incGap + top;
            let incLeft = incGap + left;
            popupDiv.css({
                top : incTop + 'px',
                left : incLeft + 'px'
            })
        })
        const popupAlinkArr = $('.popup_content  a');
        if (popupAlinkArr.length > 0) {
            popupAlinkArr.attr({target : '_blank', rel : 'noreferrer noopener'});
        }
    }

</script>