/** 반응형 웹 표출 상태 */
var DISPLAY_PC = 0;
var DISPLAY_MOBILE = 1;
var displayType = DISPLAY_PC;
/**************************************************************
 * 디자인 관련 js 
 **************************************************************/
function switchViewControl(mode) {
	switch (mode) {
		case 'street':
			$('#btnStreetView').removeClass('ico_sky');
			$('#btnStreetView').addClass('ico_sky_on');
			$('#btnSateliteView').removeClass('ico_earth_on');
			$('#btnSateliteView').addClass('ico_earth');
			break;
		case 'satelite':
			$('#btnStreetView').removeClass('ico_sky_on');
			$('#btnStreetView').addClass('ico_sky');
			$('#btnSateliteView').removeClass('ico_earth');
			$('#btnSateliteView').addClass('ico_earth_on');
			break;
		default:
			break;
	}
}

function checkDisplayType() {
	let traffic = $('#traffic').attr('class').indexOf("road_on") !== -1;
	let orgDisplayType = displayType;

	if (window.innerWidth <= 1024) { // mobile

		displayType = DISPLAY_MOBILE;

		if (map) {
			map.removeControl(zoomControl, kakao.maps.ControlPosition.TOPRIGHT);
			map.removeControl(mapTypeControl, kakao.maps.ControlPosition.TOPRIGHT);
		}

		if (traffic) {
			$('.info_wrap').show();
		} else {
			$('.info_wrap').hide();
		}

		$('#trafficInfoBox').hide();
		$('.slide').css('left', '0px');
		$('.header').show();
		if($('#cctvList').attr('class').indexOf('road_on') !== -1){	
			$('.submenu_wrap').show();
		}
		
	} else { // pc
		displayType = DISPLAY_PC;

		if (map) {
			map.addControl(zoomControl, kakao.maps.ControlPosition.TOPRIGHT);
			map.addControl(mapTypeControl, kakao.maps.ControlPosition.TOPRIGHT);
		}

		if (traffic) {
			$('#trafficInfoBox').show();
		} else {
			$('#trafficInfoBox').hide();
		}

		$('.info_wrap').hide();
		$('.submenu_wrap').hide();
		
		if($('#cctvList').attr('class').indexOf('road_on') !== -1){	
			$('.slide').css('left', '0px');
		}else{
			$('.slide').css('left', '-430px');
			$('.header > .i_p00 > li:nth-child(6)').css('left', '-431px');
			$('.header > .i_p00 > li:nth-child(7)').css('left', '-431px');
		}
	}

	// 지도 표출 모드 확인해서 버튼 표출 갱신
	if (map) {
		let mapType = map.getMapTypeId();

		switch (mapType) {
			case kakao.maps.MapTypeId.ROADMAP:
				switchViewControl('street');
				break;
			case kakao.maps.MapTypeId.HYBRID:
				switchViewControl('satelite');
				break;
			default:
				break;
		}
	}

	if (orgDisplayType !== displayType) {
		$('.i_p00').css('left', '0px');
	}
}

function draggable(element) {
	var dragging = null;

	element.addEventListener("mousedown", function(e) {
		var e = window.event || e;

		if(e.target.getAttribute('id').indexOf('_m') !== -1 || e.target.getAttribute('id').indexOf('input2') !== -1){
			return;
		}
				
		if(e.preventDefault){
			e.preventDefault();
		} else {
			e.returnValue = false;
		}

		dragging = {
			mouseX: e.clientX,
			startX: parseInt($(element).offset().left),
		};
		if (element.setCapture) element.setCapture();
	});

	element.addEventListener("losecapture", function() {
		dragging = null;
	});

	document.addEventListener("mouseup", function(e) {
		if (dragging) {
			e.preventDefault();
			dragging = null;
		}
	}, true);

	var dragTarget = element.setCapture ? element : document;

	dragTarget.addEventListener("mousemove", function(e) {
		if (!dragging) return;

		var e = window.event || e;
		var dx = e.clientX - dragging.mouseX;
		var left = dragging.startX + dx;
		var box = document.getElementById('selectRegion').getBoundingClientRect();
		var isOverflow = box.x + box.width > window.innerWidth;
	
		if ((left < 0 && dx >= 0) || (isOverflow && dx < 0)) {
			element.style.left = left + "px";
		}
		
	}, true);

	mapTouchEvent(dragTarget);
}

var mapTouchEvent = function(dragTarget) {
    dragTarget.addEventListener('touchstart', handler, true);
    dragTarget.addEventListener('touchmove', handler, true);
    dragTarget.addEventListener('touchend', handler, true);
    dragTarget.addEventListener('touchcancel', handler, true);        
};

var handler = function(event) {
    var touch = event.changedTouches[0],
        simulatedEvent = document.createEvent('MouseEvent');

    simulatedEvent.initMouseEvent(
         { touchstart: 'mousedown', touchmove: 'mousemove', touchend: 'mouseup' } [event.type],
         true, true, window, 1, 
         touch.screenX, touch.screenY, touch.clientX, touch.clientY,
         false, false, false, false, 0, null);

    touch.target.dispatchEvent(simulatedEvent);
};