var resize_timer;
var call_timer;
var map;
var domain;
var sido_markers = [];
var gugun_markers = [];
var dong_markers = [];
var markers = [];
var click_cluster = false; //매물 클러스터에 클릭이 되어 있는지 여부를 체크하여 지도를 이동,확대시 상태값을 유지하기 위한 변수
var cluster_color = "rgba(250,150,90)";
var list_title = "";

var main_price = [0,100,200,300,400,500,1000,1500,2000,2500,3000,3500,4000,4500,5000,5500,6000,6500,7000,8000,9000,10000,11000,12000,13000,14000,15000,16000,17000,18000,19000,20000,25000,30000,35000,40000,45000,50000,55000,60000,65000,70000,75000,80000,85000,90000,95000,100000,110000,120000,130000,140000,150000];
var main_price_max = 150000;
var sub_price = [0,10,20,30,40,50,60,70,80,90,100,110,120,130,140,150,160,170,180,190,200,250,300,350,400,450,500];
var sub_price_max = 500;
var area = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40];
var area_max = 40;
var local = []; /* 주변정보 보여주는 마커 */

$( window ).resize(function() {
	clearTimeout(resize_timer);
	resize_timer = setTimeout(mapsize_init, 200);
});

$(function(){
	lat = $("#form input[name='lat']").val();
	lng = $("#form input[name='lng']").val();
	level = $("#form input[name='level']").val();
	domain = $("#form input[name='domain']").val();

	mapsize_init();

	var mapContainer = document.getElementById('map'), mapOption;

	if(lat=="" && lng==""){
		mapOption = { 
			center: new kakao.maps.LatLng(37.498746, 127.03663),
			level: 7		};
	} else {
		mapOption = { 
			center: new kakao.maps.LatLng(lat, lng),
			level: level
		};
	}

	map = new kakao.maps.Map(mapContainer, mapOption);
	daum.maps.event.addListener(map, 'idle', mapdraw_event);
	
	mapdraw_event();

	$("#form").change(function(){
		mapdraw_event();
	});

	$(".btn-init").click(function(){

		$(this).parent().parent().find("input:checkbox").each(function(){
			$(this).prop("checked", false);
		});

		$(this).parent().parent().find("input:radio").each(function(){
			$(this).prop("checked", false);
		});

		mapdraw_event();
	});

	$(".btn-init-price").click(function(){
		main_price_range.reset();
		sub_price_range.reset();

		mapdraw_event();
	});

	$(".btn-init-area").click(function(){
		area_range.reset();

		mapdraw_event();
	});

	$(".btn-init-option").click(function(){

		$("#form").find("select").each(function(){
			$(this).val("");
		});

		mapdraw_event();
	});


	$("#sorting").change(function(){
		mapdraw_event();
	});
	
	$('.dropdown-menu').click(function(e) {
		e.stopPropagation();
	});

	init_rangeslider();

	$(".select2").select2();



	/* 2022.04.12 - 단지명 검색 부분 추가 */
	if($("#keyword").length > 0){
		$("#keyword").autocomplete({
			selectFirst: false, 
			autoFill: false,
			autoFocus: false,
			focus: function(event,ui){
				return false;
			},
			delay: 0,
			scrollHeight:40,
			minLength:2,
			select: function(a,b){
				
				if(b.item.type=="danzi"){
					show_danzi(b.item.id, b.item.title);
				} else {
					$("#lat").val(b.item.lat);
					$("#lng").val(b.item.lng);
					move_map(b.item.lat,b.item.lng,4);
					$("#mobile-search-section").removeClass("on");
				}
				
				a.stopPropagation();
				return false;
			},
			source: function(request, response){
				totalSearch(lat,lng, response);
			},
		}).data("ui-autocomplete")._renderItem = autoCompleteRenderSearch;
	}

	if(danzi_id!=""){
		show_danzi(danzi_id, danzi_name);
	}
});

function totalSearch(lat,lng, response){

	//숫자일 경우에는 매물검색으로 인식해서 해당 매물번호로 이동되므로 아무 것도 하지 않는다.
	if($.isNumeric($("#search").val())){

		return;		
	} else {

		$.ajax({
			url: "/search/danzi",
			type: "POST",
			data: {
				keyword : $("#keyword").val(),
			},
			dataType: "json",
			success: function(data) {
				if(data!=""){
					response( $.map( data, function( item ) {
						return {
							id: item.id,
							title: item.title,
							type: item.type,
							lat: item.lat,
							lng: item.lng
						}; 
					}));			
				}
			}
		});

	}
}

function autoCompleteRenderSearch(ul, item) {
	return $("<li class='search_rows'></li>").data("item.autocomplete", item).append('<i class=\"fas fa-map-marker\"></i> '+item.title).appendTo(ul);	
}

function mapsize_init(cnt){
	var all_size = $(window).height();

	var top_size = $(".top-header").outerHeight()+$(".main-header").outerHeight()+$(".band-wrapper").outerHeight();
	$("#map").height(all_size-top_size);

	if(cnt>0) mapdraw();
	//else map.relayout();
}

function mapdraw_event(){
	clearTimeout(call_timer);
	call_timer = setTimeout(mapdraw, 200);
}

function mapdraw(){
	var center = map.getCenter();

	if(danzi_id==""){
		var url = domain + 'lat='+center.getLat()+'&lng='+center.getLng()+'&level='+map.getLevel();
		history.replaceState('', '제목', url);
	}

	list_title 	= "";

	remove_data();
	get_map_data();		/* 지도 매물 마커(시,군,동,지하철 ...) */
	filter_title();		/* 검색버튼 타이틀 수정 */
}

/**
 * 지도 데이터 가져오기
 */
function get_map_data(){
	var formData = $("#form").serialize();
	formData+='&level='+map.getLevel();
	formData+='&swlat='+map.getBounds().getSouthWest().getLat();
	formData+='&nelat='+map.getBounds().getNorthEast().getLat();
	formData+='&swlng='+map.getBounds().getSouthWest().getLng();
	formData+='&nelng='+map.getBounds().getNorthEast().getLng();

	$.ajax({
		type: 'POST',
		url: "/danzi/ajax_map",
		data: formData,
		dataType: 'json',
		success: function(jsonData){

			$.each(jsonData, function(key, val) {
				
				if(key=="marker"){

					draw_marker(val);
					
				} else if(key=="sido"){ //시 클러스터				
					
					draw_sido(val);

				} else if(key=="gugun"){ //구 클러스터
					
					draw_gugun(val);

				} else if(key=="dong"){ //동 클러스터
					
					draw_dong(val);

				}

			}); /** jsonData foreach end **/

			//map.setDraggable(true);
			//map.setZoomable(true);
			//idle_disable = 0;
		}
	});
}

function draw_sido(val){
	$.each(val, function(key, val) {

		sido_markers[key] = new daum.maps.CustomOverlay({
			map: map,
			position: new daum.maps.LatLng(val["lat"], val["lng"]),
			content: "<div class='cluster' id=\"round"+val["id"]+"\" onclick='level_up(\""+val["lat"]+"\",\""+val["lng"]+"\");' style='padding-left:13px;'>"+val["sido"]+"</div>",
			yAnchor: 1 
		});
	});
}

function draw_gugun(val){
	$.each(val, function(key, val) {
		gugun_markers[key] = new daum.maps.CustomOverlay({
			map: map,
			position: new daum.maps.LatLng(val["lat"], val["lng"]),
			content: "<div class='cluster' id=\"round"+val["id"]+"\" onclick='level_up(\""+val["lat"]+"\",\""+val["lng"]+"\");'>"+val["gugun"].replace(" ","<br>")+"</div>",
			yAnchor: 1 
		});
	});
}

function draw_dong(val){

	var dong_id = "";
	var where = "";

	$.each(val, function(key, val) {
		
		dong_markers[key] = new daum.maps.CustomOverlay({
			map: map,
			position: new daum.maps.LatLng(val["lat"], val["lng"]),
			content: "<div class='cluster cluster_dong' data-id='"+val["id"]+"' id=\"round"+val["id"]+"\" onclick='level_up(\""+val["lat"]+"\",\""+val["lng"]+"\");'>"+val["dong"]+"</div>",
			yAnchor: 1 
		});


		//동을 검색했을 경우 해당 동을 선택해준다
		if($("#search_type").val()=="address" && $("#search_value").val()==val["id"]){
			dong_id = val["id"];
			where = val["dong"]+" 검색결과("+val["cnt"]+")";
		}

		//통합검색으로 동을 검색했을 경우 해당 동을 선택해준다
		if($("#search_type").val()=="google" && $("#search_value").val()==val["dong"]){
			dong_id = val["id"];
			where = val["dong"]+" 검색결과("+val["cnt"]+")";			
		}

	});
}

var marker_circle; /* 숫자 클러스터에 마우스를 올리면 나타나는 써클 */

function draw_marker(val){

	var cluster_count = 0;

	$.each(val, function(key1, val1) {
		var loc = new daum.maps.LatLng(val1["lat"], val1["lng"]);
		var c_class = "s";
		if(val1["count"]>=10) c_class = "m";
		else if(val1["count"]>=100) c_class = "l";
		price = "";
		if(val1["price_sell"]) price="<span>"+numberToKorean(val1["price_sell"])+"</span>";
		markers[key1] = new daum.maps.CustomOverlay({
			map: map,
			position: loc,
			content: "<div class='cluster_danzi bg-primary' data-lat='"+val1["lat"]+"' data-lng='"+val1["lng"]+"'><a href='#' onclick='show_danzi(\""+val1["id"]+"\",\""+val1["build_nm"]+"\")'><div class='cluster_"+c_class+"'>"+val1["build_nm"]+"</div>"+price+"</a></div>",
			zIndex: 1
		});

	});
	
	//이미지 클러스터에 오버효과
	$('.cluster_num').parent().hover(function(){
		$(this).children('img:nth-child(2)').css('box-shadow','0 0 7px 7px '+cluster_color);
		$(this).children().css('-webkit-transition','0.3s ease-in-out');
		$(this).children().css('-moz-transition','0.3s ease-in-out');
		$(this).children().css('-o-transition','0.3s ease-in-out');
		$(this).children().css('transition','0.3s ease-in-out');

	},function(){
		if(!$(this).hasClass('hover_active')){
			$(this).children().css('box-shadow','none');
		}
	});
}

function show_danzi(id, build_nm){
	$("#danzicanvasLabel").html(build_nm);
	$.ajax({
		type: 'POST',
		url: "/danzi/detail",
		data: {id:id},
		dataType: 'html',
		success: function(data){
			$("#danzi-body").html(data);

			danzicanvas = document.getElementById('danzicanvas');
			var bsOffcanvas = new bootstrap.Offcanvas(danzicanvas)
			bsOffcanvas.show()
		}
	});
}

function tr_toggle(c){

	$(".table-"+c).toggleClass("active");
	if($(".table-"+c).hasClass("active")){
		$("#btn-"+c).html('줄이기 <i class="fas fa-angle-up"></i>');
	} else {
		$("#btn-"+c).html('늘리기 <i class="fas fa-angle-down"></i>');
	}
}

function remove_data(){

	for (var i = 0; i < markers.length; i++) {
		if(typeof markers[i] !== 'undefined') markers[i].setMap(null);
	}

	if(markers.length>0)	markers = [];


	for (var i = 0; i < sido_markers.length; i++) {
		sido_markers[i].setMap(null);
	}

	if(sido_markers.length>0)	sido_markers = [];

	for (var i = 0; i < gugun_markers.length; i++) {
		gugun_markers[i].setMap(null);
	}

	if(gugun_markers.length>0)	gugun_markers = [];

	for (var i = 0; i < dong_markers.length; i++) {
		dong_markers[i].setMap(null);
	}

}

function move_map(lat,lng, pzoom){
	map.setCenter(new  daum.maps.LatLng(lat, lng));
	map.setLevel(pzoom);
}

function level_up(lat,lng){
	move_map(lat,lng,map.getLevel()-1);
	mapdraw();
}

function init_filter(){

	$("#form").find("input:checkbox").each(function(){
		$(this).prop("checked", false);
	});

	$("#form").find("select").each(function(){
		$(this).val("");
	});
	
	main_price_range.reset();
	sub_price_range.reset();
	area_range.reset();

	mapdraw_event();
}

function filter_title(){
	$("#type_label").html("거래 방식");
	$("#cate_label").html("매물 종류");
	$("#bedcnt_label").html("방 수");
	$("#theme_label").html("테마");
	$("#price_label").html("가격 대");
	$("#area_label").html("면적");
	$("#option_label").html("<i class='fas fa-sliders-h'></i> 상세 검색");

	var title = "";
	var btn = ['type','cate','bedcnt','theme'];
	$.each(btn,function(index,item){
		title = "";
		$("#"+item+"_group input").each(function(){
			if($(this).is(":checked")){
				if(title=="") title = title + $(this).data("title");
				else if(title!="") title = title + "," + $(this).data("title");
			}
		});
		if(title!="") {
			$("#"+item+"_label").removeClass("btn-outline-secondary");
			$("#"+item+"_label").addClass("btn-secondary");
			$("#"+item+"_label").html(title);
		} else {
			$("#"+item+"_label").removeClass("btn-secondary");
			$("#"+item+"_label").addClass("btn-outline-secondary");
		}

	});

	/* 
		가격대 
		- 앞 숫자, 뒷 숫자 모두 보여준다.
		- labeling_main_price
		- labeling_sub_price
	*/
	title = "";
	var main_price = $("#main_price").val();
	var sub_price = $("#sub_price").val();
	
	if(main_price!="null;null" && main_price!="0;"+main_price_max) {
		title = filter_title_price($("#main_price").val(),"main");
	}
	if(sub_price!="null;null" && sub_price!="0;"+sub_price_max) {
		title = title + filter_title_price($("#sub_price").val(),"sub");
	}
	
	if(title.trim()!="") {
		$("#price_label").removeClass("btn-outline-secondary");
		$("#price_label").addClass("btn-secondary");
		$("#price_label").html(title);
	} else {
		$("#price_label").removeClass("btn-secondary");
		$("#price_label").addClass("btn-outline-secondary");
	}	

	/**
	 * 면적
	 */
	title = "";
	var area = $("#area").val();
	
	if(area!="null;null" && area!="0;"+area_max) {
		title = filter_title_area($("#area").val());
	}
	
	if(title.trim()!="") {
		$("#area_label").removeClass("btn-outline-secondary");
		$("#area_label").addClass("btn-secondary");
		$("#area_label").html(title);
	} else {
		$("#area_label").removeClass("btn-secondary");
		$("#area_label").addClass("btn-outline-secondary");
	}	
	
	/* 옵션 */
	//floor, build_date
	title="";

	if($("#form select[name='floor'] option:selected").val()!="") {
		title = $("#form select[name='floor'] option:selected").text()+" ";
	}
	
	if($("#form select[name='build_date'] option:selected").val()!=""){
		title = title + $("#form select[name='build_date'] option:selected").text();
	}

	if(title.trim()!="") {
		$("#option_label").removeClass("btn-outline-secondary");
		$("#option_label").addClass("btn-secondary");
		$("#option_label").html(title);
	} else {
		$("#option_label").removeClass("btn-secondary");
		$("#option_label").addClass("btn-outline-secondary");
	}	
}

function filter_title_price(ts,gubun){

	var r = "";
	var t = ts.split(';');

	
	if(gubun=="main"){

		/* 주가격 */
		if(t[0]!="null" && t[0]!="0") r = r+labeling_main_price(t[0]);
		if(t[1]!="null") r = r+"~"+labeling_main_price(t[1]);
		return r;

	} else {

		/* 보조 가격 */
		if(t[0]!="null" && t[0]!="0") r = r+labeling_sub_price(t[0]);
		if(t[1]!="null") r = r+"~"+labeling_sub_price(t[1]);

		if(r!="") return ",월"+r;
	}
	
	
}

function filter_title_area(ts){

	var r = "";
	var t = ts.split(';');

	/* 주가격 */
	if(t[0]!="null" && t[0]!="0") r = r+t[0]+"평";
	if(t[1]!="null" && t[1]!=area_max) r = r+"~"+t[1]+"평";
	return r;
	
}

function init_rangeslider(){

	$("#main_price").ionRangeSlider({
	  type: 'double',
	  min: 0,
	  max: main_price_max,
	  from: 0,
	  to: main_price_max,
	  values: main_price,
	  grid: false,
	  grid_num:1000,
	  grid_snap: true,
	  skin: 'round',
	  prettify: labeling_main_price,
	});
	
	main_price_range = $("#main_price").data("ionRangeSlider");

	$("#sub_price").ionRangeSlider({
	  type: 'double',
	  min: 0,
	  max: sub_price_max,
	  from: 0,
	  to: sub_price_max,
	  values: sub_price,
	  grid: false,
	  grid_snap: true,
	  skin: 'round',
	  prettify: labeling_sub_price
	});
	
	sub_price_range = $("#sub_price").data("ionRangeSlider");

	$("#area").ionRangeSlider({
	  type: 'double',
	  min: 0,
	  max: area_max,
	  from: 0,
	  to: area_max,
	  values: area,
	  grid: false,
	  grid_snap: true,
	  skin: 'round',
	  prettify: labeling_area
	});
	
	area_range = $("#area").data("ionRangeSlider");

}

function labeling_main_price(ts) {
	if(ts == 0) {
		return "0원"
	} else if(ts >= main_price_max) return "제한없음";
	else return numberToKorean(ts) + "원";
}

/**
 * 월세 가격 검색 보여주기
 */
function labeling_sub_price(ts) {
	if(ts == 0) {
		return "0원"
	} else if(ts >= sub_price_max) return "제한없음";
	else return numberToKorean(ts) + "원";
}

/**
 * 면적 검색 보여주기
 */
function labeling_area(ts) {
	if(ts >= area_max) return "제한없음";
	else return ts + "평";
}

function numberToKorean(number){
	
	number = number *10000; /* 사이트에서 기본으로 1만원 기준으로 하니까 */
    
    var inputNumber  = number < 0 ? false : number; /* 금액이 0보다 작은 것은 성립하지 않는다 */
    var unitWords    = ['', '만', '억', '조', '경'];
    var splitUnit    = 10000;
    var splitCount   = unitWords.length;
    var resultArray  = [];
    var resultString = '';

    for (var i = 0; i < splitCount; i++){
        var unitResult = (inputNumber % Math.pow(splitUnit, i + 1)) / Math.pow(splitUnit, i);
        unitResult = Math.floor(unitResult);
        if(unitResult>=1000){
        	resultArray[i] = unitResult/1000 + "천";
        } else if (unitResult > 0){
            resultArray[i] = unitResult;
        } 
    }

    for (var i = 0; i < resultArray.length; i++){
        if(!resultArray[i]) continue;
        resultString = String(resultArray[i]) + unitWords[i] + resultString;
    }

    return resultString;
}


function zoomIn() {        
	// 현재 지도의 레벨을 얻어옵니다
	var level = map.getLevel();
	
	// 지도를 1레벨 내립니다 (지도가 확대됩니다)
	map.setLevel(level - 1);
}    

function zoomOut() {    
	// 현재 지도의 레벨을 얻어옵니다
	var level = map.getLevel(); 
	
	// 지도를 1레벨 올립니다 (지도가 축소됩니다)
	map.setLevel(level + 1);
}  


/**
 * traffic,roadview,terrain,use_district,skyview,roadview
 */
function setMapType(maptype) { 

	if (maptype == 'ROADMAP') {
		map.addOverlayMapTypeId(kakao.maps.MapTypeId.ROADMAP);
		$("#map-btn").html("일반");
	} else if (maptype == 'USE_DISTRICT') {
		map.addOverlayMapTypeId(kakao.maps.MapTypeId.USE_DISTRICT);
		$("#map-btn").html("지적");
	} else if (maptype == 'SKYVIEW') {
		map.addOverlayMapTypeId(kakao.maps.MapTypeId.SKYVIEW);
		$("#map-btn").html("위성");
	} else if (maptype == 'TRAFFIC') {
		map.addOverlayMapTypeId(kakao.maps.MapTypeId.TRAFFIC);
		$("#map-btn").html("교통");
	} else {
		map.addOverlayMapTypeId(kakao.maps.MapTypeId.HYBRID);    
	}
}

var local_img;
function setLocal(local){
	remove_local();
	var ps = new kakao.maps.services.Places(map); 
	local_img = '/assets/img/local/'+local+'.png';
	ps.categorySearch(local, placesSearchCB, {useMapBounds:true}); 

}

function placesSearchCB (data, status, pagination) {
	if (status === kakao.maps.services.Status.OK) {
		for (var i=0; i<data.length; i++) {
			displayMarker(data[i],i);
		}       
	}
}

var infowindow = new kakao.maps.InfoWindow({zIndex:1});

function displayMarker(place,i) {
	
	var imageSize = new kakao.maps.Size(22, 26), // 마커이미지의 크기입니다
		imageOption = {offset: new kakao.maps.Point(22, 26)}; // 마커이미지의 옵션입니다. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정합니다.
		  
	// 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
	var markerImage = new kakao.maps.MarkerImage(local_img, imageSize, imageOption);

	// 마커를 생성하고 지도에 표시합니다
	local[i] = new kakao.maps.Marker({
		map: map,
		position: new kakao.maps.LatLng(place.y, place.x) ,
		image: markerImage
	});

	// 마커에 클릭이벤트를 등록합니다
	kakao.maps.event.addListener(local[i], 'click', function() {
		// 마커를 클릭하면 장소명이 인포윈도우에 표출됩니다
		infowindow.setContent('<div style="padding:5px;font-size:12px;">' + place.place_name + '</div>');
		infowindow.open(map, local[i]);
	});
}

function remove_local(){
	for (var i = 0; i < local.length; i++) {
		local[i].setMap(null);
	}

}