/*
 * 마우스 이벤트
 * 지도 영역에서 마우스로 특정 동작을 취했을 때 발생되는 이벤트로
 * 발생될 때 마다 이벤트 정보가 들어있는 이벤트 인수와 함께 호출됩니다.
 */
	 
/* 리턴 되는 이벤트 인수
 * 1) type : 이벤트 타입 입니다.
 * 2) target : 이벤트를 발생시킨 객체입니다. 
 * 3) latlng : 마우스 이벤트가 발생한 지점의 좌표값이 리턴됩니다.
 * 4) layerPoint : 지도 레이어를 기준으로 마우스 이벤트가 발생한 지점의 픽셀 좌표가 리턴됩니다.
 * 5) containerPoint : 마우스 이벤트가 발생한 지점의 픽셀 좌표가 리턴됩니다.
 * 6) originalEvent : 이벤트를 발생시킨 DOMMouseEvent 또는 DOMTouchEvent 속성값을 리턴됩니다.
 */
	
/*
 * Click Event 
 * 지도 영역에서 사용자가 마우스를 클릭하거나 탭할때 발생하는 이벤트입니다
 * type : 'click'
 */
mymap.on('click', function(e){
   // Click Event 발생 시 상단 텍스트에 스타일을 적용 하여 가시화
   var event = document.getElementById('event_click');
   event.classList.add('mouse_active');
            
   // 1초 경과 시 스타일적용 해제
   var timeout = setTimeout(function() {
      event.classList.remove('mouse_active');
   }, 1000);
});

/*
 * Double Click Event 
 * 지도 영역에서 사용자가 마우스를 더블클릭 하거나 두 번 탭 할때 발생하는 이벤트입니다
 * type : 'dblclick'
 */
mymap.on('dblclick', function(e){
   // Double Click Event 발생 시 상단 텍스트에 스타일을 적용 하여 가시화 
   var event = document.getElementById('event_dblclick');
   event.classList.add('mouse_active');
   
   // 1초 경과 시 스타일적용 해제
   var timeout = setTimeout(function() {
      event.classList.remove('mouse_active');
   }, 1000);			   
});

/*
 * Mousemove Event
 * 지도 영역에서 사용자가 마우스를 움직였을 때 발생하는 이벤트입니다
 * type : 'mousemove'
 */			
mymap.on('mousemove', function(e){
   // Mousemove Event 발생 시 상단 텍스트에 스타일을 적용 하여 가시화 	
   var event = document.getElementById('event_mousemove');
   event.classList.add('mouse_active');
   
   // 1초 경과 시 스타일적용 해제
   var timeout = setTimeout(function() {
      event.classList.remove('mouse_active');
   }, 1000);			   
});

/*
 * Mousedown Event
 * 지도 영역에서 사용자가 마우스를 눌렀을 때 발생하는 이벤트입니다
 * type : 'mousedown'
 */			
mymap.on('mousedown', function(e){
   // Mousedown Event 발생 시 상단 텍스트에 스타일을 적용 하여 가시화
   var event = document.getElementById('event_mousedown');
   event.classList.add('mouse_active');
            
   // 1초 경과 시 스타일적용 해제
   var timeout = setTimeout(function() {
      event.classList.remove('mouse_active');
   }, 1000);			   
});

/*
 * Mouseup Event
 * 지도 영역에서 사용자가 마우스를 놓았을 때 발생하는 이벤트입니다
 * type : 'mouseup'
 */			
mymap.on('mouseup', function(e){
   // Mouseup Event 발생 시 상단 텍스트에 스타일을 적용 하여 가시화 
   var event = document.getElementById('event_mouseup');
   event.classList.add('mouse_active');
            
   // 1초 경과 시 스타일적용 해제
   var timeout = setTimeout(function() {
      event.classList.remove('mouse_active');
   }, 1000);		   
});

/*
 * Mouseover Event
 * 마우스가 지도 영역에 접근 했을 때 발생되는 이벤트입니다
 * type : 'mouseover'
 */			
mymap.on('mouseover', function(e){
   // Mouseover Event 발생 시 상단 텍스트에 스타일을 적용 하여 가시화
   var event = document.getElementById('event_mouseover');
   event.classList.add('mouse_active');
	
   // 1초 경과 시 스타일적용 해제
   var timeout = setTimeout(function() {
      event.classList.remove('mouse_active');
   }, 1000);	   
});	

/*
 * Mouseout Event
 * 마우스가 지도 영역에 벗어났을 때 발생되는 이벤트입니다
 * type : 'mouseout'
 */			
mymap.on('mouseout', function(e){
   // Mouseup Event 발생 시 상단 텍스트에 스타일을 적용 하여 가시화
   var event = document.getElementById('event_mouseout');
   event.classList.add('mouse_active');
   
   // 1초 경과 시 스타일적용 해제
   var timeout = setTimeout(function() {
      event.classList.remove('mouse_active');
   }, 1000);			   
});