// 마커를 담을 배열입니다
var markers = [];
var x,y;
var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
    mapOption = {
        center: new kakao.maps.LatLng(35.30132428401928, 126.78503023599897), // 지도의 중심좌표
        level: 3 // 지도의 확대 레벨
    };  

// 지도를 생성합니다    
var map = new kakao.maps.Map(mapContainer, mapOption);
map.setZoomable(false);
map.setDraggable(false);    

if(position.length == 0){
	var geocoder = new kakao.maps.services.Geocoder();
		geocoder.addressSearch(area_nm, function(result, status) {
			// 정상적으로 검색이 완료됐으면 
			if (status === kakao.maps.services.Status.OK) {
				var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
				var marker = new kakao.maps.Marker({
					map: map,
					position: coords
				});
				map.setCenter(coords);
			}
		});
}else{
	displayPlaces(position);
}

// 검색 결과 목록과 마커를 표출하는 함수입니다
function displayPlaces(places) {

    var bounds = new kakao.maps.LatLngBounds(), 
    listStr = '';

    // 지도에 표시되고 있는 마커를 제거합니다
    removeMarker();
    for(var i=0; i<places.length; i++){
		//console.log(places[i].y+' '+places[i].x);
        // 마커를 생성하고 지도에 표시합니다
        var placePosition = new kakao.maps.LatLng(places[i].y, places[i].x),
            marker = addMarker(placePosition, i); 
		    addContents(marker,placePosition, i,places[i].title,places[i].addr,places[i].img,places[i].tel,places[i].link); 

        // 검색된 장소 위치를 기준으로 지도 범위를 재설정하기위해
        // LatLngBounds 객체에 좌표를 추가합니다
		bounds.extend(placePosition);

    }
    // 검색된 장소 위치를 기준으로 지도 범위를 재설정합니다
    map.setBounds(bounds);
}

// 마커를 생성하고 지도 위에 마커를 표시하는 함수입니다
function addMarker(position, idx, title) {
    var imageSrc = 'http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_number_blue.png', // 마커 이미지 url, 스프라이트 이미지를 씁니다
        imageSize = new kakao.maps.Size(36, 37),  // 마커 이미지의 크기
        imgOptions =  {
            spriteSize : new kakao.maps.Size(36, 691), // 스프라이트 이미지의 크기
            spriteOrigin : new kakao.maps.Point(0, (idx*46)+10), // 스프라이트 이미지 중 사용할 영역의 좌상단 좌표
            offset: new kakao.maps.Point(13, 37) // 마커 좌표에 일치시킬 이미지 내에서의 좌표
        },
        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 addContents(marker,position,idx,title,addr,img,tel,link){
	var content = '<div id="wrap_'+idx+'" class="wrap wrap_off">' + 
            '    <div class="info">' + 
            '        <div class="title">' + 
            '            '+ title + 
            '            <div class="close" onclick="closeOverlay('+idx+')" title="닫기"></div>' + 
            '        </div>' + 
            '        <div class="body">' + 
            '            <div class="img">' +
            '               <a href="'+link+'">'+ img +'</a>' +
            '           </div>' + 
            '            <div class="desc">' + 
            '                <div class="ellipsis">'+addr+'</div>' + 
			'                <div class="tel ellipsis">'+tel+'</div>' +
            '            </div>' + 
            '        </div>' + 
            '    </div>' +    
            '</div>';

	var overlay = new kakao.maps.CustomOverlay({
					content: content,
					map: map,
					position: position       
				});

	// 마커를 클릭했을 때 커스텀 오버레이를 표시합니다
	kakao.maps.event.addListener(marker, 'click', function() {
		$('#wrap_'+idx).removeClass('wrap_off').addClass('wrap_on');
		overlay.setMap(map);
	});
}

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

// 버튼 클릭에 따라 지도 확대, 축소 기능을 막거나 풀고 싶은 경우에는 map.setZoomable 함수를 사용합니다
function fn_setZoomable(zoomable) {
    // 마우스 휠로 지도 확대,축소 가능여부를 설정합니다
    map.setZoomable(zoomable);
	map.setDraggable(zoomable);  
}

// 커스텀 오버레이를 닫기 위해 호출되는 함수입니다 
function closeOverlay(num) {
	$('#wrap_'+num).removeClass('wrap_on').addClass('wrap_off');
}