<%@ 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" %> 
<%@ page session="false" %>
<!doctype html>
<html lang="ko">
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/>
	<meta name="Description" content="사이트설명" />
	<meta name="Keywords" content="키워드" />
	
	<%@ include file="/WEB-INF/views/common.jsp" %>
	
	<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" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" />
	
	<title>TEST</title>
</head>
<body class="sang">
<div class="popContainer">
	<div class="cvibInfoTop">
		<ul class="tabs">
			<li><a href="javascript:showCvibDetailInfo()" class="tab" id="cTab1"><img src="images/cvibTab_on.png" alt="현시구성정보" /></a></li>
			<li><a href="javascript:showCvibEventHistory()" class="tab" id="cTab2"><img src="images/tab05_off.png" alt="이벤트이력정보" /></a></li>
			<li class="regionIntNm"><strong id="regionIntNm"></strong></li>
		</ul>
	</div>
	<div class="cvibMapAndInfo" >
	<!--  픽셀  북 : 450 80  -->
		<div class="crossLoadMap">
			<div style="float:left;background-image: url(images/cvib/CrossLoadBG.png); width:100%; height: 100%; background-repeat: no-repeat;background-position: center;background-size: 500px;"></div>
			<div id='cvibMap'></div>
		</div>
		
		<div class="crossLoadInfo">
			
			<div class="bottomInfo">
			<div class="bottomInfoBottom">
				<div class="bottomInfoHead">
					<table>
						<colgroup><col width="10%"><col width="15%"><col width="15%"><col width="15%">
						<col width="15%"><col width="15%"><col width="15%"></colgroup>
						<thead>
							<tr>
								<td colspan="2">방향정보</td>
								<td colspan="3">출력정보</td>
								<td colspan="2">기타</td>
							</tr>
							<tr>
								<td>보행자</td>
								<td>방향코드</td>
								<td>시간신뢰성</td>
								<td>출력형태</td>
								<td>신호등상태</td>
								<td>잔여시간</td>
								<td>표출시간</td>
							</tr>
						</thead>
					</table>
				</div>
				<div class="bottomInfoBody">
					<table>
						<colgroup><col width="10%"><col width="15%"><col width="15%"><col width="15%">
						<col width="15%"><col width="15%"><col width="15%"></colgroup>
						<tbody id="bottomInfoBottom"></tbody>
					</table>
				</div>
			</div>
			</div>
			
			
		</div>
		
	</div>
	<div class="bottomInfo">
		<div class="bottomInfoTop">
			<table>
				<thead>
					<tr>
						<th colspan="2">교차로정보</th>
						<th colspan="5">운영정보</th>
						<th colspan="5">고장정보</th>
						<th colspan="3">기타</th>
					</tr>
					<tr>
						<th>지역센터</th>                                                                                          
						<th>번호</th>
						<th>전이</th>
						<th>감응</th>
						<th>소등</th>
						<th>점멸</th>
						<th>수동</th>
						<th>BUS</th>
						<th>DB</th>
						<th>SCU</th>
						<th>센터</th>
						<th>모순</th>
						<th>신호주기</th>
						<th>정보개수</th>
						<th>교차로시각</th>
					</tr>
				</thead>
				<tbody id="bottomInfoTop">
					<tr>
						<td id="regionCd"></td>
						<td id="intNo"></td>
						<td id="oprTrans"></td>
						<td id="oprInd"></td>
						<td id="oprTurnoff"></td>
						<td id="oprBlink"></td>
						<td id="oprManual"></td>
						<td id="errBus"></td>
						<td id="errDb"></td>
						<td id="errScu"></td>
						<td id="errCenter"></td>
						<td id="errCont"></td>
						<td id="cycleCounter"></td>
						<td id="dataCount"></td>
						<td id="intTime"></td>
					</tr>
				</tbody>
			</table>
		</div>
		<!--   <div class="bottomInfoBottom">
				<div class="bottomInfoHead">
					<table>
						<colgroup><col width="10%"><col width="15%"><col width="15%"><col width="15%">
						<col width="15%"><col width="15%"><col width="15%"></colgroup>
						<thead>
							<tr>
								<td colspan="2">방향정보</td>
								<td colspan="3">출력정보</td>
								<td colspan="2">기타</td>
							</tr>
							<tr>
								<td>보행자</td>
								<td>방향코드</td>
								<td>시간신뢰성</td>
								<td>출력형태</td>
								<td>신호등상태</td>
								<td>잔여시간</td>
								<td>표출시간</td>
							</tr>
						</thead>
					</table>
				</div>
				<div class="bottomInfoBody">
					<table>
						<colgroup><col width="10%"><col width="15%"><col width="15%"><col width="15%">
						<col width="15%"><col width="15%"><col width="15%"></colgroup>
						<tbody id="bottomInfoBottom"></tbody>
					</table>
				</div>
			</div> -->
		<div class="bottomEvent">
			<div class="collctDtime">
				수집일시 : <input type="text" id="fromPopYMD" style="width:100px;" value="" /><label for="fromPopYMD">일</label> 
				<select id="fromPopHour">
					<c:forEach var="i" begin="1" end="24" step="1">
						<c:choose>
							<c:when test="${i < 10 }"><c:set var="ii" value="0${i }"></c:set></c:when>
							<c:otherwise><c:set var="ii" value="${i }"></c:set></c:otherwise>
						</c:choose>
						<option value="${ii }">${ii}</option>
					</c:forEach>
				</select><label for="fromPopHour">시</label>
				<select id="fromPopMin">
					<c:forEach var="i" begin="0" end="59" step="1">
						<c:choose>
							<c:when test="${i < 10 }"><c:set var="ii" value="0${i }"></c:set></c:when>
							<c:otherwise><c:set var="ii" value="${i }"></c:set></c:otherwise>
						</c:choose>
						<option value="${ii }">${ii}</option>
					</c:forEach>
				</select><label for="fromPopMin">분</label>
				~ <input type="text" id="toPopYMD" style="width:100px;" value="" /><label for="toPopYMD">일</label>
				<select id="toPopHour">
					<c:forEach var="i" begin="1" end="24" step="1">
						<c:choose>
							<c:when test="${i < 10 }"><c:set var="ii" value="0${i }"></c:set></c:when>
							<c:otherwise><c:set var="ii" value="${i }"></c:set></c:otherwise>
						</c:choose>
						<option value="${ii }">${ii}</option>
					</c:forEach>
				</select><label for="toPopHour">시</label>
				<select id="toPopMin">
					<c:forEach var="i" begin="0" end="59" step="1">
						<c:choose>
							<c:when test="${i < 10 }"><c:set var="ii" value="0${i }"></c:set></c:when>
							<c:otherwise><c:set var="ii" value="${i }"></c:set></c:otherwise>
						</c:choose>
						<option value="${ii }">${ii}</option>
					</c:forEach>
				</select><label for="toPopMin">분</label>
				<label for="eventPopCd" style="padding-left:19px">이벤트코드명 : </label>
				<select id="eventPopCd">
					<option value="">전체</option>
					<option value="04,05">통신</option>
					<option value="08,09">시차제</option>
					<option value="10,11">점멸</option>
					<option value="20,21">소등</option>
					<option value="40,41">모순</option>
					<option value="80,81">수동</option>
				</select>
				<img src="images/btn_pop5.png" alt="이벤트이력검색" onClick="getCvibEventList()" />
			</div>
			<div class="eventPopListTable">
				<span id="eventPopListCnt"></span>
				<div class="eventPopListHead">
					<table>
						<colgroup>
							<col width="30%"/>
							<col width="15%"/>
							<col width="15%"/>
							<col width="20%"/>
							<col width="20%"/>
						</colgroup>
						<thead>
							<tr>
								<th>수집 일시</th>
								<th>지역 코드</th>
								<th>지역 명</th>
								<th>제어기 번호</th>
								<th>이벤트코드</th>
							</tr>
						</thead>
					</table>
				</div>
				<div class="eventPopListBody">
					<table>
						<colgroup>
							<col width="30%"/>
							<col width="15%"/>
							<col width="15%"/>
							<col width="20%"/>
							<col width="20%"/>
						</colgroup>
						<tbody id="eventPopList"></tbody>
					</table>
				</div>
			</div>
			<img src="images/loading.gif" alt="로딩바" class="cvibLoading" />
		</div>
	</div>
</div>

<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/signal.js" type="text/javascript" ></script>
<script src="${contextRoot }/js/cvib.js" type="text/javascript" ></script>
<script type="text/javascript">

var cvibMapArr = [];
var cvibObj    = opener._CvibObjArr[0];
var xCoord = cvibObj.centerPos.Lng;
var yCoord = cvibObj.centerPos.Lat;
var cvibObjPop = null;
var cvibPopTimeId = null;
var cvibDetailInfoTimeId = null;

$('#regionIntNm').html('[' + cvibObj.regionNm + ']' + cvibObj.intNm);


drawCvibInfo();
showCvibDetailInfo();


  /**
	Map 매칭 방안에 따른 방향 코드-신호등정보(미지정(0), 북(1), 동(2), 남(3), 서(4), 북동(5), 남동(6), 남서(7), 북서(8))'
	출력형태 : 미지정(0), 직진(1), 좌회전(2), 보행(3), 자전거(4), 우회전(5), 버스(6), 유턴(7)'
	신호등상태: 소등(0), 적색점등(1), 황색점등(2), 녹색점등(3), 적색점멸(4), 황색점멸(5), 녹색점멸(6)'
**/
function drawCvibInfo(){
 	  var cvibMap ='';
	  cvibObj = opener._CvibObjArr[0];
	  var cwlightpos = [0,90,180,270 , 135,225,315,45];
	  for(var ii = 0; ii < cvibObj.lightPosArr.length; ii++){
		  var overlayId = cvibObj.lightPosArr[ii];
			var overlaycwId = cwlightpos[ii];
			var lightImg = cvibObj.lightStsArr[ii].substring(0,3);
			//CrossWalkON OFF
			var cwlightImg = '';
			var tempcwlight= cvibObj.lightStsArr[ii].substring(4,5);
			
			if(tempcwlight== '3'|| tempcwlight =='6'){
				cwlightImg='ON';
			}else if(tempcwlight == '1'){
				cwlightImg='OFF';
			}
			  if(lightImg!='9_9'){
				  cvibMap += '<div  style="background-image: url(images/cvib/CvibLight_'+lightImg+'.gif); width:40%;height: 100%; background-repeat: no-repeat; background-position: 245px 50px;background-size: 100px; transform:rotate('+overlayId+'deg); position: absolute;"></div>';
			  }
			  
			  if(cwlightImg != ''){
				  cvibMap += '<div  style="background-image: url(images/cvib/CrossWalk'+cwlightImg+'.png); width:40%;height: 100%; background-repeat: no-repeat; background-size: 40px; background-position: 365px 90px; transform:rotate('+overlaycwId+'deg); position: absolute;"></div>';  
			  }
			  
			  
	  }
	
	  $('#cvibMap').empty().html(cvibMap);
	  cvibPopTimeId = setTimeout(drawCvibInfo, 1000 * 1); 
  }

function showCvibDetailInfo() {
	
	if(cvibDetailInfoTimeId != null) clearTimeout(cvibDetailInfoTimeId);
	$('#cTab1 img').attr('src','images/cvibTab_on.png');
	$('#cTab2 img').attr('src','images/tab05_off.png');

	$('.bottomEvent').hide();
	$('.bottomInfoTop').show();
	$('.bottomInfoBottom').show();
	$('.cvibLoading').hide();
	
	$('#regionCd').text(cvibObj.regionCd);
	$('#intNo').text(cvibObj.intNo);
	$('#oprTrans').text(cvibObj.oprTrans);
	$('#oprInd').text(cvibObj.oprInd);
	$('#oprTurnoff').text(cvibObj.oprTurnoff);
	$('#oprBlink').text(cvibObj.oprBlink);
	$('#oprManual').text(cvibObj.oprManual);
	$('#errBus').text(cvibObj.errBus);
	$('#errDb').text(cvibObj.errDb);
	$('#errScu').text(cvibObj.errScu);
	$('#errCenter').text(cvibObj.errCenter);
	$('#errCont').text(cvibObj.errCont);
	$('#cycleCounter').text(cvibObj.cycleCounter);
	$('#dataCount').text(cvibObj.dataCount);
	$('#intTime').text(cvibObj.intTime);
	
	$.ajax({
		type:"POST",
		url:'getCvibInfoDetail.do',
		data:'regionCd=' +cvibObj.regionCd+
		     '&intNo=' + cvibObj.intNo,
		success: function(data) {
			if(data.length > 0)
			{
				var bottom = '';
				for(var ii = 0; ii < data.length; ii++)
				{
					var lightTxt = '';
					var outputTxt = '';
					
					if(data[ii].OUTPUT_TP == 1) outputTxt = '직진';
					else if(data[ii].OUTPUT_TP == 2) outputTxt = '좌회전';
					else if(data[ii].OUTPUT_TP == 3) outputTxt = '보행';
					else  outputTxt = '';
						
					outputTxt += '('+data[ii].OUTPUT_TP+')';
					
					if(data[ii].LIGHT_STS == 1) lightTxt = '적색'
					else if(data[ii].LIGHT_STS == 2) lightTxt = '황색';
					else if(data[ii].LIGHT_STS == 3) lightTxt = '녹색';
					else lightTxt = '';
					
					lightTxt += '점등('+data[ii].LIGHT_STS+')';
					
					bottom += '<tr>';
					bottom += '<td>'+data[ii].WALK+'</td>';
					bottom += '<td>'+data[ii].MAP_DIR+'</td>';
					bottom += '<td>'+data[ii].TM_FLAG+'</td>';
					bottom += '<td>'+outputTxt+'</td>';
					bottom += '<td class="cvibLightsBack_'+data[ii].LIGHT_STS+'">'+lightTxt+'</td>';
					bottom += '<td>'+data[ii].REMAIN_TM+'</td>';
					bottom += '<td>'+data[ii].DISP_TM+'</td>';
					bottom += '</tr>';
				}
				
				$('#bottomInfoBottom').empty().html(bottom);
			}
		},
		
		error: function(e) {
			
		}
	});
	
	cvibDetailInfoTimeId = setTimeout(showCvibDetailInfo, 1000 * 1);
	
}

function showCvibEventHistory() {
	if(cvibDetailInfoTimeId != null) clearTimeout(cvibDetailInfoTimeId);
	$('#cTab1 img').attr('src','images/cvibTab_off.png');
	$('#cTab2 img').attr('src','images/tab05_on.png');
	$('.bottomInfoTop').hide();
	$('.bottomInfoBottom').hide();
	$('.bottomEvent').show();
	
	var thisDate = new Date();
	var thisYy = thisDate.getFullYear();
	var thisMn = thisDate.getMonth()+1;
	var thisDd = thisDate.getDate();
	var thisDy = thisDate.getDay();
	var thisHh = thisDate.getHours();
	var thisMi = thisDate.getMinutes();
	
	var eventToday = thisYy+'-'+plusZero(thisMn)+'-'+plusZero(thisDd);
	
	$('#fromPopYMD').val(eventToday);
	$('#toPopYMD').val(eventToday);
	$('#fromPopHour').val(plusZero(thisHh)).prop('selected',true);
	$('#fromPopMin').val(plusZero(thisMi)).prop('selected',true);
	$('#toPopHour').val(plusZero(thisHh)).prop('selected',true);
	$('#toPopMin').val(plusZero(thisMi)).prop('selected',true);
	
}

function getCvibEventList() {
	var fromYMD  = $('#fromPopYMD').val();
	var fromHour = $('#fromPopHour').val();
	var fromMin  = $('#fromPopMin').val();
	var toYMD    = $('#toPopYMD').val();
	var toHour   = $('#toPopHour').val();
	var toMin    = $('#toPopMin').val();
	var eventCd  = $('#eventPopCd').val();
	
	var collctDtimeS = fromYMD + ' ' + fromHour + ':' + fromMin;
	var collctDtimeE = toYMD + ' ' + toHour + ':' + toMin;
	
	//$('.cvibLoading').css('display','block');
	
	var url = 'getCvibEventHistory.do';
	var param = 'collctDtimeS='+collctDtimeS+'&collctDtimeE='+collctDtimeE
	          + '&regionCd='+_RegionCd+'&intNo='+_IntNo+'&eventCd='+eventCd;

	//requestService(url, param, getCvibEventHistoryCallback);
}

function getCvibEventHistoryCallback(data) {
	
}

function plusZero(str)
{
	if(str < 10) str = '0'+str;
	return str;
}

$.datepicker.setDefaults({
    dateFormat: 'yy-mm-dd',
    prevText: '이전 달',
    nextText: '다음 달',
    monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
    monthNamesShort: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
    dayNames: ['일', '월', '화', '수', '목', '금', '토'],
    dayNamesShort: ['일', '월', '화', '수', '목', '금', '토'],
    dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'],
    showMonthAfterYear: true,
    yearSuffix: '년'
});

$("#fromPopYMD").datepicker({
    changeMonth: true,
    changeYear: true,
    dateFormat: 'yy-mm-dd'
});

$("#toPopYMD").datepicker({
    changeMonth: true,
    changeYear: true,
    dateFormat: 'yy-mm-dd'
});

</script>

</body>
</html>
