var camera = new Object();
var scene = new Object();
var renderer = new Object();
var init_width = 0;
var init_height = 0;
var panorama_flag = 0;
var element_360 = [];
var zoom = 45;
var level; /* 지도 레벨 */
var section_scope = 100;
var isUserInteracting = false,
onMouseDownMouseX = 0, onMouseDownMouseY = 0,
lon = 0, onMouseDownLon = 0,
lati = 0, onMouseDownLat = 0,
phi = 0, theta = 0;

if(typeof kakao !== "undefined") {

	var map;
	var mapTypes = {
		terrain : kakao.maps.MapTypeId.TERRAIN,    
		traffic :  kakao.maps.MapTypeId.TRAFFIC,
		bicycle : kakao.maps.MapTypeId.BICYCLE,
		useDistrict : kakao.maps.MapTypeId.USE_DISTRICT
	};

	
	var placeOverlay = new kakao.maps.CustomOverlay({zIndex:1}), 
		contentNode = document.createElement('div'), // 커스텀 오버레이의 컨텐츠 엘리먼트 입니다 
		markers = [], // 마커를 담을 배열입니다
		currCategory = ''; // 현재 선택된 카테고리를 가지고 있을 변수입니다
	var ps; 

	contentNode.className = 'placeinfo_wrap';
	// 커스텀 오버레이의 컨텐츠 노드에 mousedown, touchstart 이벤트가 발생했을때
	// 지도 객체에 이벤트가 전달되지 않도록 이벤트 핸들러로 kakao.maps.event.preventMap 메소드를 등록합니다 
	addEventHandle(contentNode, 'mousedown', kakao.maps.event.preventMap);
	addEventHandle(contentNode, 'touchstart', kakao.maps.event.preventMap);

	// 커스텀 오버레이 컨텐츠를 설정합니다
	placeOverlay.setContent(contentNode);  
	// 각 카테고리에 클릭 이벤트를 등록합니다
		addCategoryClickEvent();
	// 각 카테고리에 클릭 이벤트를 등록합니다
	
    // area toggle 처리용
    document.querySelectorAll('.toggle-area').forEach(item => {
        item.addEventListener('click', function() {
            let metric = this.getAttribute('data-metric') + '㎡';
            let imperial = this.getAttribute('data-imperial') + '평';
            let currentUnit = this.getAttribute('data-unit');

            if (currentUnit === 'metric') {
                this.childNodes[0].nodeValue = imperial;
                this.setAttribute('data-unit', 'imperial');
            } else {
                this.childNodes[0].nodeValue = metric;
                this.setAttribute('data-unit', 'metric');
            }
        });
    });


} 

// 엘리먼트에 이벤트 핸들러를 등록하는 함수입니다
function addEventHandle(target, type, callback) {
    if (target.addEventListener) {
        target.addEventListener(type, callback);
    } else {
        target.attachEvent('on' + type, callback);
    }
}

/* 카테고리 검색을 요청하는 함수입니다 */
function searchPlaces() {
    if (!currCategory) {
        return;
    }
    
    // 커스텀 오버레이를 숨깁니다 
    placeOverlay.setMap(null);

    // 지도에 표시되고 있는 마커를 제거합니다
    removeMarker();
    ps.categorySearch(currCategory, placesSearchCB, {useMapBounds:true}); 
}

/* 장소검색이 완료됐을 때 호출되는 콜백함수 입니다 */
function placesSearchCB(data, status, pagination) {
    if (status === kakao.maps.services.Status.OK) {

        // 정상적으로 검색이 완료됐으면 지도에 마커를 표출합니다
        displayPlaces(data);
    } else if (status === kakao.maps.services.Status.ZERO_RESULT) {
        // 검색결과가 없는경우 해야할 처리가 있다면 이곳에 작성해 주세요

    } else if (status === kakao.maps.services.Status.ERROR) {
        // 에러로 인해 검색결과가 나오지 않은 경우 해야할 처리가 있다면 이곳에 작성해 주세요
        
    }
}

// 지도에 마커를 표출하는 함수입니다
function displayPlaces(places) {

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

            // 마커를 생성하고 지도에 표시합니다
            var marker = addMarker(new kakao.maps.LatLng(places[i].y, places[i].x));

            // 마커와 검색결과 항목을 클릭 했을 때
            // 장소정보를 표출하도록 클릭 이벤트를 등록합니다
            (function(marker, place) {
                kakao.maps.event.addListener(marker, 'click', function() {
                    displayPlaceInfo(place);
                });
            })(marker, places[i]);
    }
}

// 마커를 생성하고 지도 위에 마커를 표시하는 함수입니다
function addMarker(position) {
    var imageSrc = '/assets/img/place.png', // 마커 이미지 url, 스프라이트 이미지를 씁니다
        imageSize = new kakao.maps.Size(27, 28),  // 마커 이미지의 크기
        imgOptions =  {
            offset: new kakao.maps.Point(11, 28) // 마커 좌표에 일치시킬 이미지 내에서의 좌표
        },
        markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imgOptions),
            marker = new kakao.maps.Marker({
            position: position, // 마커의 위치
            image: markerImage 
        });

    marker.setMap(map); // 지도 위에 마커를 표출합니다
    markers.push(marker);  // 배열에 생성된 마커를 추가합니다

    return marker;
}

// 지도 위에 표시되고 있는 마커를 모두 제거합니다
function removeMarker() {
    for ( var i = 0; i < markers.length; i++ ) {
        markers[i].setMap(null);
    }   
    markers = [];
}

// 클릭한 마커에 대한 장소 상세정보를 커스텀 오버레이로 표시하는 함수입니다
function displayPlaceInfo (place) {
    var content = '<div class="placeinfo">' +
                    '   <div class="title" >' + place.place_name + '</div>';   

    if (place.road_address_name) {
        content += '    <span title="' + place.road_address_name + '">' + place.road_address_name + '</span>';
    }  else {
        content += '    <span title="' + place.address_name + '">' + place.address_name + '</span>';
    }                
   
    content += '    <span class="tel">' + place.phone + '</span>' + 
                '</div>' + 
                '<div class="after"></div>';

    contentNode.innerHTML = content;
    placeOverlay.setPosition(new kakao.maps.LatLng(place.y, place.x));
    placeOverlay.setMap(map);  
}

function addCategoryClickEvent() {
    var category = document.getElementById('map_category'),
        children = category.children;

    for (var i=0; i<children.length; i++) {
        children[i].onclick = onClickCategory;
    }
}

// 카테고리를 클릭했을 때 호출되는 함수입니다
function onClickCategory() {
    var id = this.id,
        className = this.className;

    placeOverlay.setMap(null);

    if (className === 'on') {
        currCategory = '';
        changeCategoryClass();
        removeMarker();
    } else {
        currCategory = id;
        changeCategoryClass(this);
        searchPlaces();
    }
}

// 클릭된 카테고리에만 클릭된 스타일을 적용하는 함수입니다
function changeCategoryClass(el) {
    var category = document.getElementById('map_category'),
        children = category.children,
        i;

    for ( i=0; i<children.length; i++ ) {
        children[i].className = '';
    }

    if (el) {
        el.className = 'on';
    } 
} 



$(function(){

	/* 모바일에서만 동작 */
	$(".goBack").click(function(){
		self.close();
	});

		/**
	$.ajax({
		type: 'POST',
		url: "/danzi/detail",
		data: {id:
<div style="border:1px solid #990000;padding-left:20px;margin:0 0 10px 0;">

<h4>A PHP Error was encountered</h4>

<p>Severity: Notice</p>
<p>Message:  Undefined variable: danzi</p>
<p>Filename: custom/view.php</p>
<p>Line Number: 258</p>


	<p>Backtrace:</p>
	
		
	
		
	
		
			<p style="margin-left:10px">
			File: /home/basezon/application/views/custom/view.php<br />
			Line: 258<br />
			Function: _error_handler			</p>

		
	
		
	
		
	
		
			<p style="margin-left:10px">
			File: /home/basezon/application/controllers/Script.php<br />
			Line: 106<br />
			Function: view			</p>

		
	
		
	
		
	
		
			<p style="margin-left:10px">
			File: /home/basezon/index.php<br />
			Line: 316<br />
			Function: require_once			</p>

		
	

</div>},
		dataType: 'html',
		success: function(data){
			$("#danzi-body").html(data);
			danzi_init();
		}
	});
	**/
	
		if(typeof kakao !== "undefined") {
		var mapContainer = document.getElementById('map_detail');

		mapOption = { 
			center: new daum.maps.LatLng(lat, lng),
			level: 4
		};

		map = new daum.maps.Map(mapContainer, mapOption);
		map.setZoomable(false);

		var zoomControl = new kakao.maps.ZoomControl();
		map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
		ps = new kakao.maps.services.Places(map); 

		var circle = new kakao.maps.Circle({
			map: map,
			center : new kakao.maps.LatLng(lat, lng),
			radius: section_scope,
			strokeWeight: 3,
			strokeColor: '#75B8FA',
			strokeOpacity: 1,
			strokeStyle: 'dashed',
			fillColor: '#CFE7FF',
			fillOpacity: 0.7
		}); 

		$(".vr_wrapper").find("img").each(function(){
			init_360($(this).attr("id"),$(this).attr("src"));
		});

		var position = new kakao.maps.LatLng(lat, lng);

		/*줌 레벨이 설정된 이상으로는 확대되지 않도록 하는 기능*/
		kakao.maps.event.addListener(map, 'zoom_changed', function() {        
			level = map.getLevel();
			
			if(level<1){
				alarm("지도 확대 제한","더 이상 지도가 확대되지 않습니다.");
				zoomOut();
			}
		});

		//setOverlayMapTypeId();
	}
	
	
	animate();
	init_zzim();

    $('.slider-for2').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        fade: true,
        asNavFor: '.slider-nav2'
    });
    $('.slider-nav2').slick({
        slidesToShow: 4,
        slidesToScroll: 4,
        vertical:true,
        asNavFor: '.slider-for2',
        dots: false,
        focusOnSelect: true,
        verticalSwiping:true
    });

    $('.portfolio-item').magnificPopup({
        delegate: 'a',
        type: 'image',
        gallery:{enabled:true}
    });

	$("#ask_form input[name='phone']").click(function(){
		$("#ask_form").attr("action","/ask/add_action");
	});

	$("#ask_form").ajaxForm({
		success:function(text){
			if(text.trim()=="1") {
				alarm("문의 등록","문의가 등록되었습니다. <br>빠른 시간내에 연락드리겠습니다.");
				if($("#ask_form").length>0) $("#ask_form")[0].reset();
			} else {
				alarm("등록실패","문의 내용을 정확하게 입력해 주세요.");
			}
		}
	});

	        $(".content-body p img").each(function(index, item){
            var watermarkImage = obje($config, "watermark") != "" ? "https://dungzi.kr.object.iwinv.kr/10118/fa1fbb87ec9cbb8c1a043086fd002d81.jpg" : "https://dungzi.kr.object.iwinv.kr/10118/fa1fbb87ec9cbb8c1a043086fd002d81.jpg";
            var html = "<div class='img_wrapper'><img src='"+$(item).context.currentSrc+"'><div class='watermark'><img src='"+watermarkImage+"'></div></div>";
            $(this).replaceWith(html);
        });
    
});

function zoomOut() {  
	level = level + 1;
	map.setLevel(level);
}

function setOverlayMapTypeId() {
    var chkTerrain = document.getElementById('chkTerrain'),  
        chkTraffic = document.getElementById('chkTraffic'),
        chkBicycle = document.getElementById('chkBicycle'),
        chkUseDistrict = document.getElementById('chkUseDistrict');
    
    // 지도 타입을 제거합니다
    for (var type in mapTypes) {
        map.removeOverlayMapTypeId(mapTypes[type]);    
    }

    // 지적편집도정보 체크박스가 체크되어있으면 지도에 지적편집도정보 지도타입을 추가합니다
    if (chkUseDistrict.checked) {
        map.addOverlayMapTypeId(mapTypes.useDistrict);    
    }
    
    // 지형정보 체크박스가 체크되어있으면 지도에 지형정보 지도타입을 추가합니다
    if (chkTerrain.checked) {
        map.addOverlayMapTypeId(mapTypes.terrain);    
    }
    
    // 교통정보 체크박스가 체크되어있으면 지도에 교통정보 지도타입을 추가합니다
    if (chkTraffic.checked) {
        map.addOverlayMapTypeId(mapTypes.traffic);    
    }
    
    // 자전거도로정보 체크박스가 체크되어있으면 지도에 자전거도로정보 지도타입을 추가합니다
    if (chkBicycle.checked) {
        map.addOverlayMapTypeId(mapTypes.bicycle);    
    }
} 

function mine(){ $(event.target).select(); }
function init_zzim(){

	$(".property-zzim span").click(function(){

					if(confirm("로그인하시겠습니까?")){
				location.href="/member/signin";
			}
				
	});
}

function share_naver() {
	var share_url = "https://share.naver.com/web/shareView.nhn?url=" + encodeURI(encodeURIComponent(url)) + "&title=" + title;
	window.open(share_url,"_blank");
}

function share_facebook(){
	var share_url="https://www.facebook.com/sharer/sharer.php?u="+url+"&display=popup&ref=plugin&src=share_button";
	window.open(share_url,"_blank");
}

function share_band(){
	var share_url="https://band.us/plugin/share?body="+title+"&route="+url;
	window.open(share_url,"_blank");
}

function share_kakao(){
console.log(url);
       Kakao.Link.sendDefault({
        objectType: 'feed',
        content: {
          title: title,
          //description: '자세히보기',
          imageUrl: share_img,
          link: {
            //mobileWebUrl: encodeURI(encodeURIComponent(url)),
            //webUrl: encodeURI(encodeURIComponent(url))
            mobileWebUrl: url,
            webUrl: url
          }
        },
        buttons: [
          {
            title: '바로가기',
            link: {
              mobileWebUrl: url,
              webUrl: url
              //mobileWebUrl: encodeURI(encodeURIComponent(url)),
              //webUrl: encodeURI(encodeURIComponent(url))
            }
          }
        ]
      });

	//var share_url="https://tbest.kr/property/kakaolink?title="+title+"&url="+encodeURI(encodeURIComponent(url))+"&key="+map_key;
	//	window.open(share_url,"_blank");
}

function share_link(){
	$("#urlModal").modal("show");
}

function init_360(element_id,img_src) {
	var container, mesh;

	//view_modal이 아닌 view에서는 타이밍 문제로 인하여 아래와 같이 크기를 설정하도록 수정하였다.
	if(init_width==0 && init_height==0){
		init_width = $("#"+element_id).parent().width();
		init_height = $("#"+element_id).parent().height();	
	}
	container = document.getElementById("wrapper_"+element_id);

	if(container && !($.inArray(element_id,element_360) > -1)){
		element_360.push(element_id);

		$("#"+element_id).hide();

		camera[element_id] = new THREE.PerspectiveCamera(zoom, init_width / init_height, 1, 1000 );
		camera[element_id].target = new THREE.Vector3( 0, 0, 0 );
		camera[element_id].position.set(0,20,35);
		scene[element_id] = new THREE.Scene();
		var geometry = new THREE.SphereGeometry( 500, 60, 40 );
		geometry.scale( - 1, 1, 1 );
		
		var loader = new THREE.TextureLoader()
		loader.setCrossOrigin( '' );

		var material = new THREE.MeshBasicMaterial( {
			map: loader.load( img_src )
		} );


		mesh = new THREE.Mesh( geometry, material );
		scene[element_id].add( mesh );

		
		//THREE.DefaultLoadingManager.onProgress = function ( item, loaded, total ) {
			/** console.log( item, loaded, total ); **/
		//	$(".loading360").fadeOut();
		//};

		renderer[element_id] = new THREE.WebGLRenderer();
		renderer[element_id].setPixelRatio( window.devicePixelRatio );
		renderer[element_id].setSize( init_width, init_height*1.2 );

		container.appendChild( renderer[element_id].domElement );
		container.addEventListener( 'mousedown', onDocumentMouseDown, false );
		container.addEventListener( 'mousemove', onDocumentMouseMove, false );
		container.addEventListener( 'mouseup', onDocumentMouseUp, false );
		container.addEventListener( 'touchstart', onDocumentTouchStart, false );
		container.addEventListener( 'touchmove', onDocumentTouchMove, false );
		container.addEventListener( 'touchend', onDocumentTouchEnd, false );
		//window.addEventListener( 'resize', onWindowResize, false );
	}
}

/**
 * resize인데 모바일에서는 resize가 필요 없기 때문에 이 함수는 웹에서만 동작한다.
 */
function resize(){
	for (var key in camera) {
		camera[key].aspect = $(".rsContainer").width() / $(".rsContainer").height();
		camera[key].updateProjectionMatrix();
		renderer[key].setSize( $(".rsContainer").width(), $(".rsContainer").height() );
	}
}

function onDocumentMouseDown( event ) {
	event.preventDefault();
	isUserInteracting = true;
	onPointerDownPointerX = event.clientX;
	onPointerDownPointerY = event.clientY;
	onPointerDownLon = lon;
	onPointerDownLat = lati;
}

function onDocumentMouseMove( event ) {
	if ( isUserInteracting === true ) {
		lon = ( onPointerDownPointerX - event.clientX ) * 0.1 + onPointerDownLon;
		lati = ( event.clientY - onPointerDownPointerY ) * 0.1 + onPointerDownLat;
	}
}
function onDocumentMouseUp( event ) {
	panorama_flag = 1;
	event.preventDefault();
	setTimeout(function() {
      panorama_flag = 0;
	}, 1000);
	isUserInteracting = false;
	event.stopPropagation();
}

/**
 * 모바일에서는 터치로 한다.
 */

function onDocumentTouchStart( event ) {
	if ( event.touches.length === 1 ) {

		event.preventDefault();
		isUserInteracting = true;
		onPointerDownPointerX = event.touches[ 0 ].pageX;
		onPointerDownPointerY = event.touches[ 0 ].pageY;
		onPointerDownLon = lon;
		onPointerDownLat = lati;

	}
}

/**
 * 모바일에서는 터치로 한다.
 */
function onDocumentTouchMove( event ) {

	if ( event.touches.length === 1 ) {
		event.preventDefault();

		lon = ( onPointerDownPointerX - event.touches[ 0 ].pageX ) * 0.1 + onPointerDownLon;
		lati = ( event.touches[ 0 ].pageY - onPointerDownPointerY ) * 0.1 + onPointerDownLat;
	}	

}

function onDocumentTouchEnd( event ) {
	isUserInteracting = false;
}


function animate() {

	try {
	    ani = requestAnimationFrame( animate );
		update();
	}
	catch(e) {
	    
	}
}

function update() {

	if ( isUserInteracting === false ) {
		lon += 0.07;
	}

	lati = Math.max( - 85, Math.min( 85, lati ) );
	phi = THREE.Math.degToRad( 90 - lati );
	theta = THREE.Math.degToRad( lon );

	for (var key in camera) {

		camera[key].target.x = 500 * Math.sin( phi ) * Math.cos( theta );
		camera[key].target.y = 500 * Math.cos( phi );
		camera[key].target.z = 500 * Math.sin( phi ) * Math.sin( theta );
		camera[key].lookAt( camera[key].target );
	
		// distortion
		//camera.position.copy( camera.target ).negate();
		renderer[key].render( scene[key], camera[key] );
	}
}

	$(".donginfo").on("click",function(){
		var building_id = $(this).data("buildingid");
		$(".donginfo").removeClass("donginfo_active");
		$(this).addClass("donginfo_active");
		$.ajax({
			type: 'POST',
			url: "/property/ajax_building/",
			data: {
				building_id:building_id
			},
			dataType: 'json',
			success: function(data){
				$("#building_nm_txt").html(data.building.building_nm);
				$("#sede_cnt_txt").html(data.building.sede_cnt+"세대");
				$("#build_date_txt").html(data.building.build_date);

				$("#area_land_txt").html(data.building.area_land_txt);
				$("#area_bld_txt").html(data.building.area_bld_txt);
				$("#area_total_txt").html(data.building.area_total_txt);

				$("#floor_txt").html("(지상) "+data.building.floor_up+"층 (지하) "+data.building.floor_down+"층 (높이) "+data.building.height+"m");
				$("#elevator_txt").html("(승객용) "+data.building.elevator_ride+"대 (비상용) "+data.building.elevator_emgen+"대");
				$("#park_txt").html("(옥내) 자주식 "+data.building.park_auto_in+"대, 기계식 "+data.building.park_mech_in+"대<br>(옥외) 자주식 "+data.building.park_auto_out+"대, 기계식 "+data.building.park_mech_out+"대");

				$("#main_yongdo_txt").html(data.building.main_yongdo);
				$("#sub_yongdo_txt").html(data.building.sub_yongdo);
				$("#structure_txt").html(data.building.structure);

				$("#property_floor").html(data.building_floor_table);
			}
		});
	});






function modal_init(lat,lng,id,title){


    $('.portfolio-item').magnificPopup({
        delegate: 'a',
        type: 'image',
        gallery:{enabled:true}
    });

	$("#ask_form input[name='phone']").click(function(){
		$("#ask_form").attr("action","/ask/add_action");
	});

	$("#ask_form").ajaxForm({
		success:function(text){
			if(text.trim()=="1") {
				alarm("문의 등록","문의가 등록되었습니다. <br>빠른 시간내에 연락드리겠습니다.");
				if($("#ask_form").length>0) $("#ask_form")[0].reset();
			} else {
				alarm("등록실패","문의 내용을 정확하게 입력해 주세요.");
			}
		}
	});


	console.log("initend");
	
}