






// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅
mapEvents()
		  
		  
		  
		  
// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅
let $cam  = $('#camera')
let $axis = $('#axis')
let $grid  = $('<div id="grid">').addClass('plane-3D')
	.appendTo( $axis )
let $map  = $('<div id="map">').addClass('plane-3D')
	.html(`<img src="img/map.svg">`).appendTo( $axis )












// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅
function mapEvents(){
	
	
    $('.hover-1').on('click', ()=>{
		$('main').attr('data-scene', 'italy')
	})
    $('.hover-2').on('click', ()=>{
		$('main').attr('data-scene', 'greece')
	})
    $('.hover-3').on('click', ()=>{
		$('main').attr('data-scene', 'start')
	})
    $('.hover-4').on('click', ()=>{
		$('main').attr('data-scene', 'italy2')
	})
    $('.hover-5').on('click', ()=>{
		$('main').attr('data-scene', 'sicily')
	})
    $('.hover-6').on('click', ()=>{
		$('main').attr('data-scene', 'greece-north')
	})
    $('.hover-7').on('click', ()=>{
		$('main').attr('data-scene', 'greece-main')
	})
    $('.hover-8').on('click', ()=>{
		$('main').attr('data-scene', 'kyklades')
	})
    $('.hover-9').on('click', ()=>{
		$('main').attr('data-scene', 'asia')
	})
	
	
	$('body').on('click', '.nodes .node .image', coinClick)
	
	
	
	let mapX = -11;
	let mapY = 0;
	let mapZoom = 10;
	let mapRot = 45
	if ( $(window).width() <= 800 ) {
		mapX = -12;
		mapY = -3;
		mapZoom = 20;
		mapRot = 25
	}
	if ( $(window).width() <= 480 ) {
		mapX = -10;
		mapY = -3;
		mapZoom = 80;
		mapRot = 25
	}
	
	
    // Scroll wheel event
    $(window).on('mousewheel', function(event) {
		
		let dir = event.originalEvent.deltaY > 0 ? -1 : 1
		
		zoomMap( dir )

    });
	
	
	$('.ctr-button').click(function(){
		let dir = 2;
		if ( $(this).is('.button-1') ) dir = -2
		zoomMap( dir )
	})
	
	
	// ---------------------------------------
	function zoomMap( dir ){
console.log('dir', dir)
		let step = 5;
		if ( $(window).width() <= 640 ) step = 10;
		
		mapZoom = mapZoom + (dir*step)

		
		
		let limitU = 50
		let limitD = -50
		if ( $(window).width() <= 480 ) {
			limitU = 150
			limitD = 40
		}
		
		if ( mapZoom > limitU ) mapZoom = limitU
		if ( mapZoom < limitD ) mapZoom = limitD
		
		
		
		$('[data-scene="start"] #camera').css({
			'transform' : `translate3d(${mapX}vw,${mapY}vw,${mapZoom}vw) rotateX(${mapRot}deg)`
		})
	}
	
	
    let pinchStartDistance = 0;
	
	/*
	$(window).on('touchstart', function(event) {
        if (event.originalEvent.touches.length == 2) {
            var touch1 = event.originalEvent.touches[0];
            var touch2 = event.originalEvent.touches[1];
            pinchStartDistance = Math.sqrt(Math.pow(touch2.pageX - touch1.pageX, 2) + Math.pow(touch2.pageY - touch1.pageY, 2));
        }
    });
    
    $(window).on('touchmove', function(event) {
        if (event.originalEvent.touches.length == 2) {
            var touch1 = event.originalEvent.touches[0];
            var touch2 = event.originalEvent.touches[1];
            var pinchCurrentDistance = Math.sqrt(Math.pow(touch2.pageX - touch1.pageX, 2) + Math.pow(touch2.pageY - touch1.pageY, 2));
            var distanceDiff = pinchCurrentDistance - pinchStartDistance;
            
            
			mapZoom += distanceDiff

			if ( mapZoom > 50 ) mapZoom = 50
			if ( mapZoom < -50 ) mapZoom = -50

			$('[data-scene="start"] #camera').css({
				'transform' : `translate3d(-11vw, 0vw, ${mapZoom}vw) rotateX(45deg)`
			})

            
            pinchStartDistance = pinchCurrentDistance;
        }
    });
	*/
	
	
	
	
	
	// DRAG MAP
	let L1,T1,L2,T2;
	$('main').mousedown(function(e){
		//if ( $(e.target).closest('#words').length ) return;
		L1 = e.pageX
		T1 = e.pageY
	})
	//$('main').touchstart(function(e){
	$(window).on('touchstart', function(e){
		//if ( $(e.target).closest('#words').length ) return;
		L1 = e.pageX || e.originalEvent.touches[0].pageX;
		T1 = e.pageY || e.originalEvent.touches[0].pageY;

	})
	
	
	$('main').mouseup( dragCamera )
	$(window).on('touchmove', dragCamera)
	
	
	function dragCamera( e ){
		let limitL = -40
		let limitR = 25
		if ( $(window).width() <= 800 ) {
			limitL = -50
			limitR = 50
		}
		

		L2 = e.pageX || e.originalEvent.touches[0].pageX;
		T2 = e.pageY || e.originalEvent.touches[0].pageY;

		let offsX = (L2 - L1) / 10;
		let offsY = (T2 - T1) / 10;

		
		mapX = parseFloat(mapX) + parseFloat(offsX)
		mapY = parseFloat(mapY) + parseFloat(offsY)
		if ( mapX < limitL ) mapX = limitL
		if ( mapX > limitR )  mapX = limitR
		if ( mapY > 10 )   mapY = 10
		if ( mapY < -10 ) mapY = -10
		
		mapX = mapX.toFixed(2)
		mapY = mapY.toFixed(2)
		
		
		
		$('#camera').css('transform', `translate3d(${mapX}vw,${mapY}vw,${mapZoom}vw) rotateX(${mapRot}deg)`)
	}
	
	
	
	
}

// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅
function coinClick( e ){
	let $info = infoPopup(e);
	let coin = $(this).closest('.node');
	let place = coin.find('.place').html()
	let type  = coin.find('.type').html()
	let text  = coin.find('.text').html()
	let image  = coin.find('.image img')
	let photo  = coin.find('.photo img')
	
	setTimeout(r=>{
		
		coin.find('.photo').clone().appendTo( $info )
		let $txt = $('<div class="text-block">').appendTo( $info )
		$('<h2>').html( place ).appendTo( $txt )
		$('<br>').appendTo( $txt )
		$('<h3>').html( type ).appendTo( $txt )
		$('<p>').html( text ).appendTo( $txt )
		
		setTimeout(r=>{ $info.find('.photo').addClass('open') }, 10)
		setTimeout(r=>{ $txt.fadeIn( 500 ) }, 200)
		
	}, 400)
}
function infoPopup(e){
	$('#info').remove();
	let $info = $('<div id="info">').appendTo('body')
	
	let XX = e.pageX;
	let YY = e.pageY;
	
	$info.css({
		left: XX + 'px',
		top: YY + 'px',
		width : 'calc(0% - 0px)',
		height : 'calc(0% - 0px)',
		padding : 0,
	})
	
	
	setTimeout(r=>{
		$('<div class="close">').html('×').appendTo( $info )
			.click(function(){
				$info.find('.image').removeClass('open')
				$info.find('.text-block').fadeOut( 300 )
			
				setTimeout(r=>{
					$info.css({
						left: XX + 'px',
						top: YY + 'px',
						width : 'calc(0% - 0px)',
						height : 'calc(0% - 0px)',
						padding : 0,
					})
					setTimeout(r=>{
						$info.remove()
					}, 510)
				}, 150)
			})
	}, 200)
	
	
	setTimeout(r=>{
		
		let pad = 24;
		if ( $(window).width() <= 640 ) pad = 16;
		if ( $(window).width() <= 480 ) pad = 8;
		
		$info.css({
			left: pad+'px',
			top: '120px',
			width : `calc(100% - ${pad*2}px)`,
			height : 'calc(100% - 134px)',
			padding : '40px',
		})
		
	}, 10)
	
	return $info;
}




