<%@ 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/functions" prefix="fn" %>
<!doctype html>
<html lang="ko">
<head>

    <%@ include file="/WEB-INF/jsp/common.jsp" %>
    <meta name="_csrf" content="${_csrf.token}"/>
    <meta name="_csrf_header" content="${_csrf.headerName}"/>
    <meta http-equiv="X-UA-Compatible" content="IE=10; IE=9; IE=8; IE=7; IE=EDGE"/>
    <meta name="Description" content="신호관제"/>
    <meta name="Keywords" content="신호관제"/>
    <link rel="icon" href="data:;base64,iVBORw0KGgo=">
    <link rel="stylesheet" type="text/css" href="${contextRoot }/css/common.css"/>
    <link rel="stylesheet" type="text/css" href="${contextRoot }/css/main.css"/>
    <link rel="stylesheet" type=iframe"text/css" href="${contextRoot }/css/themes/default/style.css"/>
    <link rel="icon" type="text/css" href="data:;base64,iVBORw0KGgo="/>

    <script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>
    <script type="text/javascript" src="${contextRoot }/js/common/moment.js"></script>
    <script src="${contextRoot }/js/common/hashmap.js" type="text/javascript"></script>
    <script src="${contextRoot }/js/common/common-all.js" type="text/javascript"></script>
    <script src="${contextRoot }/js/common/common.js" type="text/javascript"></script>
    <script src="${contextRoot }/js/common/jstree.min.js" type="text/javascript"></script>

    <script src="${contextRoot }/js/map.js" type="text/javascript"></script>
    <script src="${contextRoot }/js/signal.js" type="text/javascript"></script>

    <script src="${contextRoot }/js/cvib.js" type="text/javascript"></script>

    <title>CVIM_MAP</title>
</head>
<body class="sang">
<input type="hidden" name="min_x" id="min_x" value=""/>
<input type="hidden" name="min_y" id="min_y" value=""/>
<input type="hidden" name="max_x" id="max_x" value=""/>
<input type="hidden" name="max_y" id="max_y" value=""/>
<input type="hidden" name="regionCd" id="regionCd" value=""/>
<input type="hidden" name="regionId" id="regionId" value=""/>
<input type="hidden" name="intNo" id="intNo" value=""/>
<input type="hidden" name="intNm" id="intNm" value=""/>
<input type="hidden" name="intLcType" id="intLcType" value=""/>
<input type="hidden" name="intLampType" id="intLampType" value=""/>
<input type="hidden" name="groupNo" id="groupNo" value=""/>
<input type="hidden" name="mainIntNo" id="mainIntNo" value=""/>
<input type="hidden" name="treeXCoord" id="treeXCoord" value=""/>
<input type="hidden" name="treeYCoord" id="treeYCoord" value=""/>
<input type="hidden" name="XCoord" id="XCoord" value="126.978087"/>
<input type="hidden" name="YCoord" id="YCoord" value="37.560684"/>
<input type="hidden" name="sigunguCd" id="sigunguCd" value=""/>
<input type="hidden" name="intMainphase" id="intMainphase" value=""/>
<input type="hidden" name="networkType" id="networkType" value=""/>
<input type="hidden" name="modemIp" id="modemIp" value=""/>

<div class="headMenu">
    <h1><a href="main.do" title="로고"><img src="images/logo.png" alt="로고" style="width: 250px;margin: 3px;"></a></h1>
    <ul>
        <!--
	    <li class="toggleBtn">
	    	<a href="javascript:void(0)" class="ims"><img src="${contextRoot}/images/btn_04.png" id="ims" class="road_off" alt="돌발정보"></a>
	    </li>
	     -->
      <%--
      <c:if test="${userType == 'SA' }">
            <li class="toggleBtn">
                <a href="javascript:void(0)" class="center"><img src="${contextRoot}/images/btn_02.png" id="center"
                                                                 class="road_off" alt="신호센터"></a>
            </li>
            <li class="toggleBtn">
                <a href="javascript:void(0)" class="event"><img src="${contextRoot}/images/btn_03.png" id="event"
                                                                class="road_off" alt="로그관리"></a>
            </li>
            <li class="toggleBtn">
                <a href="javascript:void(0)" class="addSignal"><img src="${contextRoot}/images/btn_05.png"
                                                                    id="addSignal" class="road_off" alt="정보관리"></a>
            </li>
        </c:if>
        --%>
    </ul>
</div>
<%--<div class="hline" id="hline"></div>--%>
<div id="container" class="container">
    <iframe src="/getTreeListFrame.do" id="iframeTreeList" class="iframeTreeList"></iframe>
    <div id="mapWrapper">
        <div id="map" class="map">
            <div class="wideMap"><img alt="지도확대축소" src="images/arrow_left.png"/></div>
            <div class="upDownMap"><img alt="지도확대축소" src="images/arrow_down.png"/></div>
            <!-- 검색값-->
            <div class="bg_white" id="menu_wrap">
                <div class="option">
                    <p></p>
                    키워드 :
                    <input id="keyword" type="text" size="15" maxlength="50" value="">
                    <button type="submit" class="searchBtn" onclick="searchPlaces();">검색하기</button>
                    <p></p>
                </div>
                <hr>
                <ul id="placesList"></ul>
            </div>
            <!-- 검색값끝-->
            <!-- 로드뷰 -->
            <div class="mapToggle">
                <ul style="width:100%; display:block;">
                    <li class="toggleBtn" style="float:left;"><a href="javascript:void(0)" class="place"><img id="place"
                                                                                                              class="road_off"
                                                                                                              src="${contextRoot}/images/find_location_off.png"
                                                                                                              alt="위치찾기"/></a>
                    </li>
                    <li class="toggleBtn" style="margin-left:5px;float:left;"><a href="javascript:getRoadView();"
                                                                                 class="road" id="roadviewControl"><img
                            id="road" class="road_off" src="${contextRoot}/images/road_view.gif" alt="로드뷰오프"/></a></li>
                    <li class="toggleBtn" style="margin-left:5px; float:left;"><a href="javascript:getDrawRoad();"
                                                                                  class="draw"><img id="draw"
                                                                                                    class="road_off"
                                                                                                    src="${contextRoot}/images/distance.png"
                                                                                                    alt="거리재기"/></a>
                    </li>
                    <li class="toggleBtn" style="margin-left:5px; float:left;"><a href="javascript:getDrawArea();"
                                                                                  class="area"><img id="area"
                                                                                                    class="road_off"
                                                                                                    src="${contextRoot}/images/area.png"
                                                                                                    alt="면적재기"/></a>
                    </li>
                    <%-- <li class="toggleBtn" style="margin-left:5px; float:left;"><a href="javascript:toggleSiginfo();"
                                                                                   class="toggle_siginfo"><img
                             id="toggle_siginfo" class="road_off" src="${contextRoot}/images/toggle_siginfo_off.png"
                             alt="신호정보토글"/></a></li>--%>
                    <li class="toggleBtn" style="margin-left:5px; float:left;"><a href="javascript:getMyLocation();"
                                                                                  class="mylocation"><img id="position"
                                                                                                          class="mylocation"
                                                                                                          src="${contextRoot}/images/position.png"
                                                                                                          alt="현재위치"/></a>
                    </li>
                </ul>
            </div>
            <!-- <img src="images/bg_traffic04.png" alt="범례" class="bumImage" /> -->
        </div>
    </div>
    <!-- 로드뷰 -->
    <div id="rvWrapper">
        <div id="roadview" class="roadview">
            <div id="roadviewClose" title="로드뷰닫기" onclick="closeRoadview()"><span class="img"></span></div>
        </div>
    </div>
    <!-- //로드뷰-->
    <iframe src="/getBottomListFrame.do" id="iframeBottomList" class="iframeBottomList"></iframe>
    <!-- 모바일인경우 현재위치버튼 변경 -->
    <div class="mylocationMob" style="display:none;position:absolute;bottom:calc(25% + 35px);left:335px;z-index:10;">
        <a href="javascript:getMyLocation();" class="mylocationMobA">
            <img id="position" class="road_off" src="${contextRoot}/images/position_m.png" alt="현재위치" style="width:75px;height:75px"/>
        </a>
    </div>
</div>

<script src="${contextRoot }/js/common/webSocket.js" type="text/javascript"></script>
<script type="text/javascript">


    var centerPopId = null;
    var eventPopId = null;
    var signalPopId = null;


    /********************************************************************************
     * 위치검색
     *********************************************************************************/

    $(".toggleBtn > a").click(function () {

        var obj = $(this).attr("class");
        var iconBtn = $("#" + obj).attr("class");

        $("#" + obj).toggleClass('road_on road_off');

        if (obj == "center") {
            if (iconBtn == "road_on") {
                $("#center").attr("src", BTN_IMAGE_PATH + "btn_02.png");
                if (centerPopId != null) centerPopId.close();
            } else {
                $("#center").attr("src", BTN_IMAGE_PATH + "btn_02_on.png");
                var url = 'updateCenter.do';
                var options = 'scrollbars=no,toolbar=no,location=no,resizable=no,status=no,menubar=no,width=908px,height=435px,left=400,top=0';
                centerPopId = window.open(url, 'updateCenter', options);
            }
        }
        if (obj == "event") {
            if (iconBtn == "road_on") {
                $("#event").attr("src", BTN_IMAGE_PATH + "btn_03.png");
                if (eventPopId != null) eventPopId.close();
            } else {
                $("#event").attr("src", BTN_IMAGE_PATH + "btn_03_on.png");
                var url = 'openEventHistory.do';
                var options = 'scrollbars=no,toolbar=no,location=no,resizable=no,status=no,menubar=no,width=908px,height=845px,left=200,top=0';
                eventPopId = window.open(url, 'openEventHistory', options);
            }
        }
        if (obj == "ims") {
            if (iconBtn == "road_on") {
                $("#ims").attr("src", BTN_IMAGE_PATH + "btn_04.png");
                markerRemove("ims");
            } else {
                $("#ims").attr("src", BTN_IMAGE_PATH + "btn_04_on.png");
                getIMS();
            }
        }
        if (obj == "addSignal") {
            if (iconBtn == "road_on") {
                $("#addSignal").attr("src", BTN_IMAGE_PATH + "btn_05.png");
                if (signalPopId != null) signalPopId.close();
            } else {
                $("#addSignal").attr("src", BTN_IMAGE_PATH + "btn_05_on.png");
                var regionCd = $('#regionCd').val();
                var intNo = $('#intNo').val();
                var url = 'updateSignal.do?regionCd=' + regionCd + '&intNo=' + intNo;
                var options = 'scrollbars=no,toolbar=no,location=no,resizable=no,status=no,menubar=no,width=908px,height=880px,left=200,top=0';
                signalPopId = window.open(url, 'addSignal', options);
            }
        }

        //서울 신호좌표데이터 각도데이터로 변경

        if (obj == "addPhase") {
            transAngle();
        }

        //위치검색
        if (obj == "place") {
            if (iconBtn == "road_on") {
                markerRemove('search');
                markerRemove('infowindow');
                $("#place").attr("src", BTN_IMAGE_PATH + "find_location_off.png");
                $("#keyword").val("");
                $("#menu_wrap").css("display", "none");
            } else {
                $("#menu_wrap").css("display", "block");
                $("#keyword").focus();

                $("#place").attr("src", BTN_IMAGE_PATH + "find_location_on.png");
                $("#road").attr("src", BTN_IMAGE_PATH + "road_view.gif");
                $("#draw").attr("src", BTN_IMAGE_PATH + "distance.png");
                $("#area").attr("src", BTN_IMAGE_PATH + "area.png");
                $("#toggle_siginfo").attr("src", BTN_IMAGE_PATH + "toggle_siginfo_off.png");
                $("#area").removeClass("road_on").addClass("road_off");
                $("#draw").removeClass("road_on").addClass("road_off");
                $("#toggle_siginfo").removeClass("road_on").addClass("road_off");
            }
        }

        //로드뷰
        if (obj == "road") {
            if (iconBtn == "road_on") {
                $("#road").attr("src", BTN_IMAGE_PATH + "road_view.gif");
            } else {
                $("#road").attr("src", BTN_IMAGE_PATH + "road_viewon.gif");
                $("#draw").attr("src", BTN_IMAGE_PATH + "distance.png");
                $("#area").attr("src", BTN_IMAGE_PATH + "area.png");
                $("#toggle_siginfo").attr("src", BTN_IMAGE_PATH + "toggle_siginfo_off.png");
                $("#area").removeClass("road_on").addClass("road_off");
                $("#draw").removeClass("road_on").addClass("road_off");
                $("#toggle_siginfo").removeClass("road_on").addClass("road_off");
            }
        }

        //거리재기
        if (obj == "draw") {
            if (iconBtn == "road_on") {
                $("#draw").attr("src", BTN_IMAGE_PATH + "distance.png");
            } else {
                $("#road").attr("src", BTN_IMAGE_PATH + "road_view.gif");
                $("#draw").attr("src", BTN_IMAGE_PATH + "distanceon.png");
                $("#area").attr("src", BTN_IMAGE_PATH + "area.png");
                $("#toggle_siginfo").attr("src", BTN_IMAGE_PATH + "toggle_siginfo_off.png");
                $("#area").removeClass("road_on").addClass("road_off");
                $("#road").removeClass("road_on").addClass("road_off");
                $("#toggle_siginfo").removeClass("road_on").addClass("road_off");
            }
        }

        //면적재기
        if (obj == "area") {
            if (iconBtn == "road_on") {
                $("#area").attr("src", BTN_IMAGE_PATH + "area.png");
            } else {
                $("#road").attr("src", BTN_IMAGE_PATH + "road_view.gif");
                $("#draw").attr("src", BTN_IMAGE_PATH + "distance.png");
                $("#area").attr("src", BTN_IMAGE_PATH + "areaon.png");
                $("#toggle_siginfo").attr("src", BTN_IMAGE_PATH + "toggle_siginfo_off.png");
                $("#draw").removeClass("road_on").addClass("road_off");
                $("#road").removeClass("road_on").addClass("road_off");
                $("#toggle_siginfo").removeClass("road_on").addClass("road_off");
            }
        }

        //신호정보 토글
        if (obj == "toggle_siginfo") {
            if (iconBtn == "road_on") {
                $("#toggle_siginfo").attr("src", BTN_IMAGE_PATH + "toggle_siginfo_off.png");
            } else {
                $("#area").attr("src", BTN_IMAGE_PATH + "area.png");
                $("#draw").attr("src", BTN_IMAGE_PATH + "distance.png");
                $("#road").attr("src", BTN_IMAGE_PATH + "road_view.gif");
                $("#toggle_siginfo").attr("src", BTN_IMAGE_PATH + "toggle_siginfo_on.png");
                $("#road").removeClass("road_on").addClass("road_off");
                $("#draw").removeClass("road_on").addClass("road_off");
                $("#area").removeClass("road_on").addClass("road_off");
            }
        }

    });

    $("#keyword").keydown(function (key) {
        if (key.keyCode == 13) {
            searchPlaces();
        }
    });

    //메뉴창 숨기기

    var UserAgent = window.navigator.userAgent;
    var wideFlag = false;
    var upDownFlag = false;

    $('.wideMap').click(function () {
        if (wideFlag == false) {
            $('.wideMap img').attr('src', '/images/arrow_right.png');
            $('.iframeTreeList').hide();
            $('#mapWrapper').css({
                width: 'calc(100% - 10px)',
                margin: '5px 0 0 5px'
            });
            $('.iframeBottomList').css({
                width: 'calc(100% - 10px)',
                margin: '0 0 0 5px'
            });

            if (UserAgent.match(/iPhone|iPod|Android|Windows CE|BlackBerry|Symbian|Windows Phone|webOS|Opera Mini|Opera Mobi|POLARIS|IEMobile|lgtelecom|nokia|SonyEricsson/i) != null || UserAgent.match(/LG|SAMSUNG|Samsung/) != null)
                $('.mylocationMob').css('left', '25px');
            wideFlag = true;
        } else if (wideFlag == true) {
            $('.wideMap img').attr('src', '/images/arrow_left.png');
            $('.iframeTreeList').show();
            $('#mapWrapper').css({
                width: 'calc(100% - 338px)',
                margin: '5px 0 0 332px'
            });
            $('.iframeBottomList').css({
                width: 'calc(100% - 337px)',
                margin: '0 0 0 2px'
            });

            if (UserAgent.match(/iPhone|iPod|Android|Windows CE|BlackBerry|Symbian|Windows Phone|webOS|Opera Mini|Opera Mobi|POLARIS|IEMobile|lgtelecom|nokia|SonyEricsson/i) != null || UserAgent.match(/LG|SAMSUNG|Samsung/) != null)
                $('.mylocationMob').css('left', '335px');
            wideFlag = false;
        }
        map.relayout();
    });

    $('.upDownMap').click(function () {
        if (upDownFlag == false) {
            //확대
            $('.upDownMap img').attr('src', 'images/arrow_up.png');
            $('.iframeBottomList').hide();
            $('#mapWrapper').css('height', 'calc(100% - 12px)');
            if (UserAgent.match(/iPhone|iPod|Android|Windows CE|BlackBerry|Symbian|Windows Phone|webOS|Opera Mini|Opera Mobi|POLARIS|IEMobile|lgtelecom|nokia|SonyEricsson/i) != null || UserAgent.match(/LG|SAMSUNG|Samsung/) != null)
                $('.mylocationMob').css('bottom', '35px');
            upDownFlag = true;
        } else if (upDownFlag == true) {
            //축소
            $('.upDownMap img').attr('src', 'images/arrow_down.png').slide;
            $('.iframeBottomList').show();
            $('#mapWrapper').css('height', 'calc(75% - 10px)');
            if (UserAgent.match(/iPhone|iPod|Android|Windows CE|BlackBerry|Symbian|Windows Phone|webOS|Opera Mini|Opera Mobi|POLARIS|IEMobile|lgtelecom|nokia|SonyEricsson/i) != null || UserAgent.match(/LG|SAMSUNG|Samsung/) != null)
                $('.mylocationMob').css('bottom', 'calc(25% + 35px)');
            upDownFlag = false;
        }
        map.relayout();
    });

    /********************************************************************************
     * header display
     *********************************************************************************/

    var headFlag = false;
    $("#hline").click(function () {
        if (headFlag == false) {
            $('.headMenu').slideUp();
            $('.container').css('height', '100%');
            headFlag = true;
        } else {
            $('.headMenu').slideDown();
            $('.container').css('height', 'calc(100% - 66px)');
            headFlag = false;
        }

    });

    function closeTopMenu(obj) {
        mapZoomBound();
        $('#' + obj).attr("class", "road_off");
        if (obj == "center") {
            $("#center").attr("src", BTN_IMAGE_PATH + "btn_02.png");
            setTimeout(function () {
                location.reload(true);
            }, 100 * 1);
        }
        if (obj == "event") $("#event").attr("src", BTN_IMAGE_PATH + "btn_03.png");
        if (obj == "addSignal") {
            $("#addSignal").attr("src", BTN_IMAGE_PATH + "btn_05.png");
            setTimeout(function () {
                location.reload(true);
            }, 100 * 1);
        }
    }

    //모바일 인경우 현재위치버튼 변경
    if (UserAgent.match(/iPhone|iPod|Android|Windows CE|BlackBerry|Symbian|Windows Phone|webOS|Opera Mini|Opera Mobi|POLARIS|IEMobile|lgtelecom|nokia|SonyEricsson/i) != null || UserAgent.match(/LG|SAMSUNG|Samsung/) != null) {
        $('.mylocation').hide();
        $('.mylocationMob').show();
    }

    $(window).bind("beforeunload", function (e) {
        if (siginfoPhaseDetailWin != null) siginfoPhaseDetailWin.close();
        if (signalPopId != null) signalPopId.close();
    });

</script>
</body>
</html>
