/****************************************************************************************************
* 시내도로 CCTV 동영상호출
* @param Icon
* @param points
* @param title
****************************************************************************************************/
var cnt = 10;
var MAX_STREAM_CNT = 12;

function getCctvPop(Icon, points, title) {
	if (detectIOS() || detectSafari()) {
		alert('ios 및 safari에서는 CCTV 서비스가 지원되지 않습니다.');
		return;
	}

	cnt++;

	//같은 마커클릭일 경우 동영상닫기.
	cctvClose(points[4]);

	var lon = points[1] + 20;
	var lat = points[0] + 10;
	var position = new daum.maps.LatLng(lat, lon);
	var content = document.createElement('div');

	content.setAttribute("id", points[4]);
	content.setAttribute("class", "cctvDiv");

	/*
	[0]: x좌표 
	[1]: y좌표 
	[2]: cctvIp 
	[3]: streamsession 
	[4]: cctvId 
	[5]: cctvPort 
	*/
	var timestamp = (new Date()).getTime();
	var output = '<table  width="325" height="240"	cellspacing="0" cellpadding="0" border="0" summary="팝업 상황박스입니다." class="pop_table2">';

	output += '<caption>' + title + 'CCTV동영상</caption>';
	output += '<colgroup><col style="width:12%;"><col style="width:*"></colgroup><thead>';
	output += '<tr>';
	output += '<th><img src="' + CONTEXTROOT + '/images/icon02.png?' + timestamp + '" alt="타이틀 블릿" loading="lazy"/>' + title + '<span><a onclick="cctvClose(\'' + points[4] + '\');">'
	output += '<img src="' + CONTEXTROOT + '/images/close_btn2.gif?' + timestamp + '" alt="close_btn2" loading="lazy"/></a></span></th>';
	output += '</tr>';
	output += '<tbody>';
	output += '<tr>';
	output += '<td>';
	output += '<div id="mmp-div_' + points[4] + '" style="z-index:0;">';
	output += '<div class="video-placeholder">';
	output += '<p>' + title + ': <span>영상을 로드하는 중</span></p>';
	output += '</div>';
	output += '<video muted autoplay playsinline controls id="' + points[3] + '" width="320" height="240"/>';
	output += '</div>';
	output += '</td>';
	output += '</tr>';
	output += '</tbody>';
	output += '<tfoot>';
	output += '<tr>';  //테이블 푸터 여백 지우면안됨
	output += '<td>';
	output += '</td>';
	output += '</tr>';
	output += '</tfoot>';
	output += '</table>';

	content.innerHTML = output;

	checkMaxWindows();

	cctvInfoWindow = new daum.maps.InfoWindow({
		position: position,
		content: content,
		removable: false,
		zIndex: cnt,
	});

	cctvInfoWindow.open(map, Icon);
	cctvInfoWindow.myId = points[4];
	cctvInfoWindow.streamSession = points[3];
	cctvInfo.push(cctvInfoWindow);

	cctvPlayer(cctvInfoWindow.streamSession, cctvInfoWindow.myId);

	$(".cctvDiv").mouseover(function() {

		var cctvDiv = $(this).attr("id");
		var clickInfo = document.getElementById(cctvDiv);
		for (var i = 0; i < cctvInfo.length; i++) {

			if (cctvInfo[i].myId == cctvDiv) {

				$("#cctvDiv").val(cctvDiv);

				//infoWindow에 mousedown이벤트를 등록합니다 
				addEventHandle(clickInfo, 'mousedown', onMouseDown);

				//mouseup 이벤트가 일어났을때 mousemove 이벤트를 제거하기 위해
				//document에 mouseup 이벤트를 등록합니다 
				addEventHandle(document, 'mouseup', onMouseUp);
			}
		}
	});
}

var webRtc;

/****************************************************************************************************
 * WebRtc 동영상 재생
****************************************************************************************************/
function cctvPlayer(cctvStreamSession, cctvId) {
	let item = sessionList.find(function(element) {
		if (element.f1 === cctvStreamSession) {
			return true;
		} else {
			return element.f1.indexOf(cctvId) !== -1;
		}
	});

	if(!item){
		console.log('sessionList에 cctv 정보가 없습니다.');
	}

	open_video(item, cctvStreamSession);
}

/****************************************************************************************************
 * CCTV infoWindow 이동 함수(mousedown)
****************************************************************************************************/
function onMouseDown(e) {

	// infoWindow를 드래그 할 때, 내부 텍스트가 영역 선택되는 현상을 막아줍니다.

	if (e.preventDefault) {
		e.preventDefault();
	} else {
		e.returnValue = false;
	}

	var clickInfo = "";
	var overlayPos = "";

	var proj = map.getProjection() // 지도 객체로 부터 화면픽셀좌표, 지도좌표간 변환을 위한 MapProjection 객체를 얻어옵니다 

	for (var i = 0; i < cctvInfo.length; i++) {

		if (cctvInfo[i].myId == $("#cctvDiv").val()) {
			overlayPos = cctvInfo[i].getPosition(); //infoWindow의 현재 위치를 가져옵니다
		}
	}

	// 커스텀오버레이에서 마우스 관련 이벤트가 발생해도 지도가 움직이지 않도록 합니다
	daum.maps.event.preventMap();

	// mousedown된 좌표를 설정합니다 
	startX = e.clientX;
	startY = e.clientY;

	// mousedown됐을 때의 infoWindow의 좌표를
	// 지도 컨테이너내 픽셀 좌표로 변환합니다 
	startOverlayPoint = proj.containerPointFromCoords(overlayPos);

	// document에 mousemove 이벤트를 등록합니다 
	addEventHandle(document, 'mousemove', onMouseMove);

}

/****************************************************************************************************
//infoWindow에 mousedown 한 상태에서 
//mousemove 하면 호출되는 핸들러 입니다 
****************************************************************************************************/
function onMouseMove(e) {

	// infoWindow를 드래그 할 때, 내부 텍스트가 영역 선택되는 현상을 막아줍니다.
	if (e.preventDefault) {

		e.preventDefault();

	} else {

		e.returnValue = false;
	}

	var proj = map.getProjection(),// 지도 객체로 부터 화면픽셀좌표, 지도좌표간 변환을 위한 MapProjection 객체를 얻어옵니다 
		deltaX = startX - e.clientX, // mousedown한 픽셀좌표에서 mousemove한 좌표를 빼서 실제로 마우스가 이동된 픽셀좌표를 구합니다 
		deltaY = startY - e.clientY,
		// mousedown됐을 때의 infoWindow의 좌표에 실제로 마우스가 이동된 픽셀좌표를 반영합니다 
		newPoint = new daum.maps.Point(startOverlayPoint.x - deltaX, startOverlayPoint.y - deltaY),
		// 계산된 픽셀 좌표를 지도 컨테이너에 해당하는 지도 좌표로 변경합니다 
		newPos = proj.coordsFromContainerPoint(newPoint);

	for (var i = 0; i < cctvInfo.length; i++) {
		if (cctvInfo[i].myId == $("#cctvDiv").val()) {
			cctvInfo[i].setPosition(newPos); //선택한 infoWindow 좌표를 설정합니다 
		}
	}
}

/****************************************************************************************************
 * CCTV 인포윈도우 mouseup 
****************************************************************************************************/
function onMouseUp(e) {

	// 등록된 mousemove 이벤트 핸들러를 제거합니다 
	removeEventHandle(document, 'mousemove', onMouseMove);
}

/****************************************************************************************************
 * 바운더리 밖에있는 인포윈도우 체크
****************************************************************************************************/
function cctvBound() {
	var len = cctvInfo.length;

	if (len > 0) {

		var cctvIdArr = "";
		var proj = map.getProjection();
		// 지도의 영역을 구합니다.
		var bounds = map.getBounds();
		// 지도의 영역을 기준으로 확장된 영역을 구합니다.
		var extBounds = extendBounds(bounds, proj);

		for (var j = 0; j < cctvMarker.length; j++) {
			// target이 확장된 영역에 속하는지 판단하고
			if (extBounds.contain(cctvMarker[j].getPosition())) {
				if (j == 0) {
					cctvIdArr += cctvMarkerId[j];
				} else {
					cctvIdArr += "," + cctvMarkerId[j];
				}
			}
		}

		cctvBoundClose(cctvIdArr);
	}

}

/****************************************************************************************************
 * CCTV 인포윈도우
 * 바운더리 밖에있는 인포윈도우 닫음
****************************************************************************************************/
function cctvBoundClose(cctvIdArr) {
	for (var i = 0; i < cctvInfo.length; i++) {
		if (cctvIdArr.indexOf(cctvInfo[i].myId) < 0) {
			let activeElement = activeList[cctvInfo[i].streamSession];

			if (activeElement && (activeElement.hds7000 || activeElement.videoObj)) {
				closeVideoElement(activeElement);
			}
			 
			closeCctvInfo(i);
			i--;
		}
	}
}

/****************************************************************************************************
 * CCTV 인포윈도우(선택/전체)닫기
****************************************************************************************************/
function cctvClose(divId) {
	var divId = nvl(divId, "");

	for (var i = 0; i < cctvInfo.length; i++) {
		if (cctvInfo[i]) {
			let activeElement = activeList[cctvInfo[i].streamSession];

			if (divId != "") {
				if (cctvInfo[i].myId == divId) {
					if (activeElement && (activeElement.hds7000 || activeElement.videoObj)) {
						closeVideoElement(activeElement);
					}
					 
					closeCctvInfo(i);
					i--;
				}
			} else {
				//전체닫기
				if (activeElement && (activeElement.hds7000 || activeElement.videoObj)) {
					closeVideoElement(activeElement);
				}
				
				closeCctvInfo(i);
				i--;
			}
		}
	}
}

function cctvCloseAll() {
	cctvClose();
	roadCctvClose();
	roadCctvE05Close();

	markerRemove("cctv");
	markerRemove("roadCctv");
	markerRemove("roadCctvE05");

	$("#cctv").attr('class', 'road_off');
	$("#roadCctv").attr('class', 'road_off');
	$("#roadCctvE05").attr('class', 'road_off');
	$("#cctv").attr('src', CONTEXTROOT + '/images/btn03.gif');
	$("#roadCctv").attr('src', CONTEXTROOT + '/images/btn05.gif');
	$("#roadCctvE05").attr('src', CONTEXTROOT + '/images/btn07.gif');
	$("#cctv_m").removeClass('on');
	$("#roadCctv_m").removeClass('on');
	$("#roadCctvE05_m").removeClass('on');
}

function checkMaxWindows() {
	let totalWindows = getTotalCctvWindows();

	while (totalWindows >= MAX_STREAM_CNT) {
		let cctvWindow = getFirstCctvWindow();

		if (cctvWindow) {
			let activeCctv = activeList[cctvWindow.streamSession];
			let cctvElement = document.getElementById(cctvWindow.myId);

			if (activeCctv) {
				activeCctv.shutdown();
			}

			if (cctvElement && cctvElement.parentElement && cctvElement.parentElement.parentElement) {
				cctvElement.parentElement.parentElement.remove();
				
				let cctvIndex = cctvInfo.findIndex(elm => elm.myId === cctvWindow.myId);
				let roadCctvIndex = roadCctvInfo.findIndex(elm => elm.myId === cctvWindow.myId);
				let roadCctvE05Index = roadCctvE05Info.findIndex(elm => elm.myId === cctvWindow.myId);
				
				if(cctvIndex && cctvIndex !== -1){
					closeCctvInfo(cctvIndex);
				}
				
				if(roadCctvIndex && roadCctvIndex !== -1){
					closeRoadCctvInfo(roadCctvIndex);
				}
				
				if(roadCctvE05Index && roadCctvE05Index !== -1){
					closeRoadCctvE05Info(roadCctvE05Index);
				}
			}

			totalWindows--;
		}
	}
}

function getTotalCctvWindows() {
	let totalWindows = 0;

	for (let i = 0; i < cctvInfo.length; i++) {
		let info = cctvInfo[i];

		if (info && info.myId) {
			let cctvElem = document.getElementById(info.myId);
			if (cctvElem && cctvElem.checkVisibility()) {
				totalWindows++;
			}
		}
	}

	for (let i = 0; i < roadCctvInfo.length; i++) {
		let info = roadCctvInfo[i];

		if (info && info.myId) {
			let cctvElem = document.getElementById(info.myId);
			if (cctvElem && cctvElem.checkVisibility()) {
				totalWindows++;
			}
		}
	}

	for (let i = 0; i < roadCctvE05Info.length; i++) {
		let info = roadCctvE05Info[i];

		if (info && info.myId) {
			let cctvElem = document.getElementById(info.myId);
			if (cctvElem && cctvElem.checkVisibility()) {
				totalWindows++;
			}
		}
	}

	return totalWindows;
}

function getFirstCctvWindow() {
	let minZIndex = null;
	let firstCctvInfo = null;

	for (let i = 0; i < cctvInfo.length; i++) {
		let info = cctvInfo[i];

		if (info) {
			let cctvWindow = document.getElementById(info.myId);

			if (cctvWindow && cctvWindow.checkVisibility()) {
				if (minZIndex === null || minZIndex > info.getZIndex()) {
					minZIndex = info.getZIndex();
					firstCctvInfo = info;
				}
			}
		}
	}

	for (let i = 0; i < roadCctvInfo.length; i++) {
		let info = roadCctvInfo[i];

		if (info) {
			let cctvWindow = document.getElementById(info.myId);

			if (cctvWindow && cctvWindow.checkVisibility() && (minZIndex === null || minZIndex > info.getZIndex())) {
				minZIndex = info.getZIndex();
				firstCctvInfo = info;
			}
		}
	}

	for (let i = 0; i < roadCctvE05Info.length; i++) {
		let info = roadCctvE05Info[i];

		if (info) {
			let cctvWindow = document.getElementById(info.myId);

			if (cctvWindow && cctvWindow.checkVisibility() && (minZIndex === null || minZIndex > info.getZIndex())) {
				minZIndex = info.getZIndex();
				firstCctvInfo = info;
			}
		}
	}

	return firstCctvInfo;
}

function closeCctvInfo(i){
	cctvInfo[i].close();
	cctvInfo.splice(i, 1);
}

function closeRoadCctvInfo(i){
	roadCctvInfo[i].close();
	roadCctvInfo.splice(i, 1);
}

function closeRoadCctvE05Info(i){
	roadCctvE05Info[i].close();
	roadCctvE05Info.splice(i, 1);
}