'use strict';
console.log('ACTUS 3D');


// ≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣
// ≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣ ACTUS 3D
var A3D = {
	defaults 	: {
		time	: 1,
		ease	: 'ease-in-out', 
		scene 	: {
			pos : [0,0,0],
			rot : [0,0,0],
			scl : 1,
			content : '',
			preserve : true,
		},
		take 	: {
			pos : [0,0,0],
			rot : [0,0,0],
			time : 3,
			ease : 'ease-in-out',
			next : '',
		},
		object 	: {
			pos 	: [0,0,0],
			rot 	: [0,0,0],
			width	: '100vw',
			height	: '',
			scl 	: 1,
			type 	: 'plane',
			html 	: '',
			img  	: '',
			link 	: '',
			classes : '',
			parse 	: '',
			mask 	: '',
			tex 	: '', 
			preserve : true,
			linkTarget : '_blank',
		},
	},
    c	     	: { scene: 'home' },
    data	 	: {},
	clearTime 	: {},
	camTime 	: {},
	rndTime 	: 15,
	rndInterval : {},
	responsive	: [ 10000, 1280, 800 ],
	
	scenes : {
		home    : [     0,    0,     0,     0, 0, 0 ],
		web     : [   650,  250,  -600,     5,-5,-6 ],
	},
	
	zoomLevel 	: 0,
	navX 	: 0,
	navY 	: 0,
}



// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅ PANEL
A3D.panel = {
	
	create	: () =>{
		A3D.$panel = $('<div class="A3D-PANEL">')
			.appendTo('body')
		
		A3D.$timeline = $('<div class="A-timeline">')
			.appendTo( A3D.$panel )
		
		$('<div class="A3D-period">')
			.html('1300<br>1357')
			.attr('data-gotoScene', 'home')
			.attr('data-gotoTake', 'A')
			.attr('alt', 'A')
			.appendTo( A3D.$timeline )
			.click( A3D.clickPeriod )
			.mouseover( A3D.hoverPeriod )
			.mouseleave( A3D.leavePeriod )
		
		$('<div class="A3D-period">')
			.html('1357<br>1389')
			.attr('data-gotoScene', 'home')
			.attr('data-gotoTake', 'B')
			.attr('alt', 'B')
			.appendTo( A3D.$timeline )
			.click( A3D.clickPeriod )
			.mouseover( A3D.hoverPeriod )
			.mouseleave( A3D.leavePeriod )
		
		$('<div class="A3D-period">')
			.html('1389<br>1512')
			.attr('data-gotoScene', 'home')
			.attr('data-gotoTake', 'C')
			.attr('alt', 'C')
			.appendTo( A3D.$timeline )
			.click( A3D.clickPeriod )
			.mouseover( A3D.hoverPeriod )
			.mouseleave( A3D.leavePeriod )
		
		$('<div class="A3D-period">')
			.html('1512<br>1683')
			.attr('data-gotoScene', 'home')
			.attr('data-gotoTake', 'D')
			.attr('alt', 'D')
			.appendTo( A3D.$timeline )
			.click( A3D.clickPeriod )
			.mouseover( A3D.hoverPeriod )
			.mouseleave( A3D.leavePeriod )
		
		
		$('<div class="A-timeline-scale">')
			.html(`
			<p>1300</p>
			<p>1350</p>
			<p>1400</p>
			<p>1450</p>
			<p>1500</p>
			<p>1550</p>
			<p>1600</p>
			<p>1650</p>
			<p>1700</p>
			`)
			.appendTo( A3D.$timeline )
		
		
	},
	 
}
A3D.clickPeriod = (e) =>{
	let v = $(e.target).attr('alt')
	$(e.target).siblings().removeClass('on')
	$(e.target).addClass('on')
	//$(`.A3D-obj.period`).removeClass('on')
	//$(`[data-name="map${v}"]`).addClass('on')')
	$(`.A3D-obj.period:not([data-name="map${v}"])`).fadeOut(1500)
	$(`.period[data-name="map${v}"]`).fadeIn(1500)
}
A3D.hoverPeriod = (e) =>{
return;
	let v = $(e.target).attr('alt')
	$(`[data-name="map${v}"] svg path`).css({
		fill : '#FFFFFF !important',
		stroke : 'white',
		stroke : 'hsla(0, 0%, 100%, 0.6)',
		'stroke-width' : 0.2,
	})
}
A3D.leavePeriod = (e) =>{
	let v = $(e.target).attr('alt')
	$(`[data-name="map${v}"] svg path`).css({
		stroke : 'transparent',
		'stroke-width' : 0,
	})
}


// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅ CREATE
A3D.CREATE = {
	
	// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅
	scene 		: ( scene, target, callback ) =>{
		callback = callback || function(){};
		scene = scene || 'home';
		
		
		/* ???
		if (typeof A3D.clearTime[scene] !== 'undefined') {
			clearTimeout(A3D.clearTime[scene]);
			delete A3D.clearTime[scene];
		}
		*/
		
		$('.A3D-scene[data-name="' + scene + '"]').show();

		if ( A3D.data.scenes[scene].exists ) {
			$('body').trigger('scene-' + scene + '-init');
			callback();
			return;
		}
		A3D.CREATE.sceneData(scene);
		A3D.CREATE.sceneElement(scene, target);
		A3D.CREATE.sceneContent(scene, callback);
		//A3D.CREATE.sceneObjects(scene);
		A3D.CREATE.position( A3D.data.scenes[scene] );

		A3D.data.scenes[scene].exists = true;
		$('body').trigger('scene-' + scene + '-init');
		if (  A3D.data.scenes[scene].content == '' ) {
			 A3D.data.scenes[scene].loaded = true;
			$('body').trigger('scene-' + scene + '-loaded');
			callback(); 
		}
	},
	sceneData	: ( scene ) =>{
		
		 A3D.data.scenes[scene] = 
			 $.extend( {}, A3D.defaults.scene,  A3D.data.scenes[scene] );
		
		if (typeof  A3D.data.scenes[scene].scl == 'number')
			 A3D.data.scenes[scene].scl =
				 [A3D.data.scenes[scene].scl,  A3D.data.scenes[scene].scl];
	},
	sceneElement: ( scene, target ) =>{
		
		 A3D.data.scenes[scene].element = $('<div>').addClass('A3D-scene')
			.attr('data-name',  scene)
			.css('position', 'absolute')
			.appendTo('#A3D-SCENES');
			//.appendTo(target);
		
		if ( A3D.data.scenes[scene].preserve )
			 A3D.data.scenes[scene].element
				 .css('transform-style', 'preserve-3d');
	},
	sceneContent: ( scene, callback ) =>{
		callback = callback || function(){};
		
		if (  A3D.data.scenes[scene].content != '' ) {
			let url = `parts/${A3D.data.scenes[scene].content}.php`;
			
			A3D.data.scenes[scene].element.load( url, {}, function(){
				A3D.CREATE.sceneObjects(scene);
				A3D.data.scenes[scene].loaded = true;
				callback();
			})
		} else {
			A3D.CREATE.sceneObjects(scene);
		} 
	},
	sceneObjects: ( scene ) =>{
				
		$.each( A3D.data.scenes[scene].obj, function(name, obj){
			A3D.c.obj =  A3D.data.scenes[scene].obj[ name ];
			A3D.CREATE.object( name, scene );
		})
	},
	

	// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅
	object 		: ( name, scene ) =>{
		A3D.CREATE.objData( name );
		A3D.CREATE.objElement(scene);
		A3D.CREATE.objContent();
		A3D.CREATE.objTexture();
		A3D.CREATE.objStyles();
		A3D.CREATE.position(A3D.c.obj);
	},
	objData		: ( name ) =>{
		A3D.c.obj.name = name;
		A3D.c.obj = $.extend( {},
							 A3D.defaults.object,
							 A3D.c.obj );
		
		A3D.c.obj.height =
			A3D.c.obj.height ||
			A3D.c.obj.width;
		
		
		if ( A3D.c.obj.resolution ) {
			let res = A3D.c.obj.resolution
			let WW = $(window).width()
			if ( WW < A3D.responsive[2] ) {
				if ( res[2] ) {
					A3D.c.obj.width  *= res[2]
					A3D.c.obj.height *= res[2]
					A3D.c.obj.scl = [1/res[2], 1/res[2]]
				}
			} else if ( WW < A3D.responsive[1] ) {
				if ( res[1] ) {
					A3D.c.obj.width  *= res[1]
					A3D.c.obj.height *= res[1]
					A3D.c.obj.scl = [1/res[1], 1/res[1]]
				}
			} else {
			//if ( WW < A3D.responsive[0] ) {
				if ( res[0] ) {
					A3D.c.obj.width  *= res[0]
					A3D.c.obj.height *= res[0]
					A3D.c.obj.scl = [1/res[0], 1/res[0]]
				}
			//}
			}
			
		}
		
		
		if ( $.isNumeric(A3D.c.obj.width) )
			A3D.c.obj.width += 'vw'
		if ( $.isNumeric(A3D.c.obj.height) )
			A3D.c.obj.height += 'vw'
		
		
		let units = ''
		if ( ! $.isNumeric(A3D.c.obj.height) )
			units = A3D.c.obj.height
				.replace(/\d+/g, '').replace('.', '')
		if ( typeof A3D.c.obj.top == 'undefined' )
			A3D.c.obj.top = 
			-( parseFloat(A3D.c.obj.height)/2 ) + units;
		
		units = ''
		if ( ! $.isNumeric(A3D.c.obj.height) )
			units = A3D.c.obj.width
				.replace(/\d+/g, '').replace('.', '')
		if ( typeof A3D.c.obj.left == 'undefined' )
			A3D.c.obj.left = 
				-( parseFloat(A3D.c.obj.width)/2 ) + units;
		

		if (typeof A3D.c.obj.scl == 'number')
			A3D.c.obj.scl = [A3D.c.obj.scl, A3D.c.obj.scl];
		
		if ( $.isNumeric(A3D.c.obj.left) )
			A3D.c.obj.left += 'vw'
		if ( $.isNumeric(A3D.c.obj.top) )
			A3D.c.obj.top += 'vw'
		
		
			
			
	},
	objElement 	: ( scene ) =>{
		// Element
		A3D.c.obj.element = $('<div>')
			.addClass( A3D.c.obj.classes )
			.addClass('A3D-obj A3D-' + A3D.c.obj.type)
			.attr('data-name',  A3D.c.obj.name)
			.css('position', 'absolute')
			.css('width', A3D.c.obj.width)
			.css('height', A3D.c.obj.height)
			.appendTo(  A3D.data.scenes[scene].element );
		
		//A3D.c.obj.scl = [0.1,0.1]
		
		if ( A3D.c.obj.frameObject )
			A3D.c.obj.element
				.attr('data-frameObject',  true)
		
		if ( A3D.c.obj.clickScene )
			A3D.c.obj.element
				.attr('data-gotoScene',  A3D.c.obj.clickScene)
		
		if ( A3D.c.obj.gotoTake )
			A3D.c.obj.element
				.attr('data-gotoTake',  A3D.c.obj.gotoTake)
		
		if ( A3D.c.obj.randomizer )
			A3D.c.obj.element
				.attr('data-randomizer',  A3D.c.obj.randomizer)
			
		if ( A3D.c.obj.preserve )
			A3D.c.obj.element.css('transform-style', 'preserve-3d');

	},
	objContent 	: () =>{
		// Image
		if ( A3D.c.obj.img != '' ) {
			A3D.c.obj.html += `<img class="abs" src="${A3D.c.obj.img}">`;
		}
		// SVG
		if ( A3D.c.obj.svg &&
		     A3D.svg[ A3D.c.obj.svg ] ) {
			A3D.c.obj.html += A3D.svg[ A3D.c.obj.svg ];
		}
		// Link
		if ( A3D.c.obj.link != '' ) {
			A3D.c.obj.html = 
				`<a href="${A3D.c.obj.link}" target="${A3D.c.obj.linkTarget}">` +
				A3D.c.obj.html + '</a>';
		}
		// Content
		if ( A3D.c.obj.content ) {
			//let url = `parts/${A3D.c.obj.content}.php`;
			let url = A3D.c.obj.content;
console.log('url', url)
			A3D.c.obj.element.load( url, {}, function(){
				
			})
		}
		// HTML
		if ( A3D.c.obj.html ) {
			let html = A3D.c.obj.element.html()
			A3D.c.obj.element
				.html( html + A3D.c.obj.html );
		}

		// Parse
		if ( A3D.c.obj.parse != '' ) {
			$( A3D.c.obj.parse ).appendTo( A3D.c.obj.element );
		}
	},
	objTexture 	: () =>{
		if ( A3D.c.obj.tex != '' ) {
			A3D.c.obj.element.css('background', 'url(' + A3D.data.tex[ A3D.c.obj.tex ] + ')');
		}
		if ( A3D.c.obj.texScale ) {
			A3D.c.obj.element.css('background-size',
								  A3D.c.obj.texScale);
		}
		if ( A3D.c.obj.mask != '' ) {
			A3D.c.obj.element.css( A3D.data.tex[ A3D.c.obj.mask ] );
		}
	},
	objStyles 	: () =>{
		if ( A3D.c.obj.styles ) {
			A3D.c.obj.element.css( A3D.c.obj.styles );
		}
	},


	// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅
	position 	: function(item){
		let pos = [...item.pos];
		let rot = item.rot;
		let scl = item.scl;
		if ($.isNumeric(pos[0])) pos[0] += 'vw';
		if ($.isNumeric(pos[1])) pos[1] += 'vw';
		if ($.isNumeric(pos[2])) pos[2] += 'vw';
		item.element.css('transform', `translate3d(${pos[0]}, ${pos[1]}, ${pos[2]}) rotateX(${rot[0]}deg) rotateY(${rot[1]}deg) rotateZ(${rot[2]}deg) scale(${scl[0]},${scl[1]})`);

		if ( item.top )
			item.element.css('top', item.top);
		if ( item.left )
			item.element.css('left', item.left);

	}
	
	
}



// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅ CAMERA
A3D.CAM = {

	random		: ( values, take ) =>{
		values = values || A3D.data.rnd.home;
		take = take || A3D.c.take || A3D.defaults.take;

		let time = values.time || A3D.rndTime
		
		clearInterval( A3D.rndInterval )
		A3D.CAM.randomCam(values);
		A3D.rndInterval = setInterval(function(){
			A3D.CAM.randomCam(values);
		}, time * 1000);
	},
	randomCam	: ( v, take, time ) =>{
		time = time || A3D.rndTime;
		take = take || A3D.c.take || A3D.defaults.take;

		
		let pos = take.pos
		let rot = take.rot
		let resp = take.responsive || {}
		if ( $(window).width() < 1280 && resp.laptop ) {
			pos = resp.laptop.pos || pos
			rot = resp.laptop.rot || rot
		}
		if ( $(window).width() < 1024 && resp.tablet ) {
			pos = resp.tablet.pos || pos
			rot = resp.tablet.rot || rot
		}
		if ( $(window).width() < 700 && resp.mobile ) {
			pos = resp.mobile.pos || pos
			rot = resp.mobile.rot || rot
		}
		if ( $(window).width() < 480 && resp.mobile2 ) {
			pos = resp.mobile2.pos || pos
			rot = resp.mobile2.rot || rot
		}
		pos = pos || [[],[],[]]
		rot = rot || [[],[],[]]
		
		let newTake = {
			pos : [ pos[0] + A3D.f.rnd(v.pos[0][0],v.pos[0][1]),
					pos[1] + A3D.f.rnd(v.pos[1][0],v.pos[1][1]),
					pos[2] + A3D.f.rnd(v.pos[2][0],v.pos[2][1]) ],
			rot : [ rot[0] + A3D.f.rnd(v.rot[0][0],v.rot[0][1]),
					rot[1] + A3D.f.rnd(v.rot[1][0],v.rot[1][1]),
					rot[2] + A3D.f.rnd(v.rot[2][0],v.rot[2][1]) ],
		}
		
		
		if ( A3D.c.scene == "home" ) {
			if ( newTake.pos[0] > 0 ) {
				if ( newTake.rot[1] < 0 )
					newTake.rot[1] = -newTake.rot[1];
			} else {
				if ( newTake.rot[1] > 0 )
					newTake.rot[1] = -newTake.rot[1];
			}

			if ( newTake.pos[1] > 0 ) {
				if ( newTake.rot[0] > 0 )
					newTake.rot[0] = -newTake.rot[0];
			} else {
				if ( newTake.rot[0] < 0 )
					newTake.rot[0] = -newTake.rot[0];
			}
		}
		
//console.log('newTake:', newTake.pos, newTake.rot);

		let transformValue = A3D.CAM.buildTransformValue( newTake, '' );
		let transitionValue = time + 's transform ' + A3D.data.ease.homeRnd;
		

		let _pos = [...A3D.data.scenes[A3D.c.scene].pos]
		let origin = [..._pos]
		if ( A3D.data.scenes[A3D.c.scene].origin )
			origin = [...A3D.data.scenes[A3D.c.scene].origin]
		if ( take.origin )
			origin = [...take.origin]
		
	
		if ( $.isNumeric(_pos[0]) ) _pos[0] += 'vw'
		if ( $.isNumeric(_pos[1]) ) _pos[1] += 'vw'
		if ( $.isNumeric(_pos[2]) ) _pos[2] += 'vw'
		
		if ( $.isNumeric(origin[0]) ) origin[0] += 'vw'
		if ( $.isNumeric(origin[1]) ) origin[1] += 'vw'
		if ( $.isNumeric(origin[2]) ) origin[2] += 'vw'

		

		$('#actus-3D').css({
			transform: transformValue,
			transition: transitionValue,
			transformOrigin: `${origin[0]} ${origin[1]} ${origin[2]}`
		})
	},

	moveTo		: ( scene, take, time, rand ) =>{
		if ( ! A3D.data.scenes[scene] ) return;
		
		scene = scene || '';
		take  = take  || 'A';
		time  = time  || 0;
		rand  = rand  || null;
		let takeName = '';
		if (typeof take === 'string') {
			takeName = take;
			take = A3D.data.scenes[scene].takes[ take ];
		}
		if ( typeof scene === 'undefined' ) return;
		if ( typeof take === 'undefined' ) return;
		if ( take === 'undefined' ) return;
		A3D.c.prevScene = A3D.c.scene.slice();
		A3D.c.scene = scene;
		A3D.c.take = take;



		clearTimeout( A3D.camTime );
		clearInterval( A3D.rndInterval );

		let mode = '';
		if ( time == 'fast' ) { time = 1; mode = 'fast'; }

		//if ( takeName != '')
			//$('.fast-icon').attr('data-take', takeName);

		if ( time == 0 ) 
			time = take.time || A3D.defaults.time;
		let ease = take.ease;
		if ( typeof ease == 'undefined' )
			ease = A3D.defaults.ease;

		$('body').trigger('CAMERA', [scene, take, time]);

		
		A3D.CREATE.scene(scene, '#actus-3D', function(){

			//$('.fast-icon').removeClass('off');

			// Fade Home
			// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅
			if ( A3D.c.prevScene != A3D.c.scene ) {
				setTimeout(r=>{
					$(`.A3D-scene[data-name="${A3D.c.prevScene}"] > *`)
					.fadeOut( (time*1000)/2 )
				}, (time*1000)/4)
				
				setTimeout(r=>{
				$(`.A3D-scene[data-name="${A3D.c.scene}"] > *`)
				.fadeIn(1000)
				}, 200)
			}
			
			
			setTimeout(r=>{
				$('body').trigger('scene-' + A3D.c.scene + '-in');
			}, time*1000)
			$('body').trigger('scene-' + A3D.c.prevScene + '-out');
			
			
			/*
			if ( A3D.c.prevScene != A3D.c.scene ) {
				setTimeout(r=>{
					$(`.A3D-scene[data-name="${A3D.c.prevScene}"]`)
					.fadeTo((time*1000)/2, 0)
				}, (time*1000)/3)
				
					$(`.A3D-scene[data-name="${A3D.c.scene}"]`)
					.fadeTo(600, 1)
			}
			
			/*
			if ( scene != 'home' )
				setTimeout(r=>{
					$('.A3D-scene[data-name="home"]')
					.fadeTo((time*1000)/2, 0)
				}, (time*1000)/3)
			else
				$('.A3D-scene[data-name="home"]')
					.fadeTo(600, 1) 
			*/
			
			

			let transformValue = A3D.CAM.buildTransformValue( take, mode );
			let transitionValue = time + 's transform ' + ease + ', ' + time + 's transform-origin ease-in-out';
			
			
			let pos = [...A3D.data.scenes[scene].pos]
			if ( $.isNumeric(pos[0]) ) pos[0] += 'vw'
			if ( $.isNumeric(pos[1]) ) pos[1] += 'vw'
			if ( $.isNumeric(pos[2]) ) pos[2] += 'vw'

			
			let origin = A3D.data.scenes[scene].origin || pos
			
			$('#actus-3D')
				.attr('data-scene', scene)
				.attr('data-take', takeName)
				.css({
					transform: transformValue,
					transition: transitionValue,
					transformOrigin: `${origin[0]} ${origin[1]} ${origin[2]}`
				})


			if ( scene != 'home' ) $('.back-icon').removeClass('off');

			
			rand = take.randomizer || rand

			A3D.camTime = setTimeout(function(scene, take){
				$('.fast-icon').addClass('off');
				let next = take.next || '';
				if (next != '') {
					$('.fast-icon').removeClass('off');
					A3D.CAM.moveTo( scene, take.next );
				} else {
					if ( rand ) {
						rand = A3D.data.rnd[ rand ]
						if ( rand )
							setTimeout(function(){
								A3D.CAM.random( rand )
							}, 50 );
					}
				}
			}, time * 1000, scene, take )
		})

	},
	buildTransformValue: ( take, mode ) =>{
		mode = mode || '';
		
		let pos = take.pos
		let rot = take.rot
		let resp = take.responsive || {}
		if ( $(window).width() < 1280 && resp.laptop ) {
			pos = resp.laptop.pos || pos
			rot = resp.laptop.rot || rot
		}
		if ( $(window).width() < 1024 && resp.tablet ) {
			pos = resp.tablet.pos || pos
			rot = resp.tablet.rot || rot
		}
		if ( $(window).width() < 700 && resp.mobile ) {
			pos = resp.mobile.pos || pos
			rot = resp.mobile.rot || rot
		}
		if ( $(window).width() < 480 && resp.mobile2 ) {
			pos = resp.mobile2.pos || pos
			rot = resp.mobile2.rot || rot
		}
		
		
		if ( mode == 'fast' ) { pos[0] += 1; }
		return `translate3d(${pos[0]}vw, ${pos[1]}vw, ${pos[2]}vw) rotateX(${rot[0]}deg) rotateY(${rot[1]}deg) rotateZ(${rot[2]}deg)`;
	},

}



// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅ EVENTS
A3D.events = function(){
	$('body').off('click', '.A3D-button');
	$('body').on('click', '.A3D-button', A3D.f.buttonClick);
	$('body').off('click', '[data-gotoTake]');
	$('body').on('click', '[data-gotoTake]', A3D.f.takeClick);
	$('body').off('click', '[data-gotoScene]');
	$('body').on('click', '[data-gotoScene]', A3D.f.sceneClick);
	$('body').off('click', '[data-frameObject]');
	$('body').on('click', '[data-frameObject]', A3D.f.frameObject);
	
	
    $('body').on('click', A3D.f.clickMove)
	
	
    $('body').bind('mousewheel', function(e){
        if(e.originalEvent.wheelDelta /120 > 0) {
			A3D.zoomLevel++
			if ( A3D.zoomLevel > 20 ) A3D.zoomLevel = 20
        }
        else{
			A3D.zoomLevel--
			if ( A3D.zoomLevel < -10 ) A3D.zoomLevel = -10
        }
		$('#A3D-SCENES').css('transform', `translate3d(${A3D.navX}vw,${A3D.navY}vw,${A3D.zoomLevel}vw)`)
//console.log('A3D.zoomLevel', A3D.zoomLevel)
    });
	
	
}
		
		
		
// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅ HELPERS
A3D.f = {
	clickMove : ( e ) =>{

		let XX = e.pageX
		let YY = e.pageY
		let WW = $(window).width()
		let HH = $(window).height()
console.log('---->', XX, YY, WW, HH)
		
		let stepX = 0
		let stepY = 0
		if ( XX < WW/3 ) stepX = 2
		if ( XX > (WW/3)*2 ) stepX = -2
		if ( YY < (HH/3) ) stepY = 2
		if ( YY > (HH/3)*2 ) stepY = -2
console.log('stepX', stepX)
console.log('stepY', stepY)
		A3D.navX += stepX
		A3D.navY += stepY
		
		$('#A3D-SCENES').css('transform', `translate3d(${A3D.navX}vw,${A3D.navY}vw,${A3D.zoomLevel}vw)`)
		
		
		
	},
	buttonClick : () =>{
		return;
		let scene = $(this).attr('data-gotoScene') || A3D.c.scene || '';
		let back  = $(this).attr('data-back')  || '';
		let fast  = $(this).attr('data-fast')  || '';
		let take  = $(this).attr('data-gotoTake')  || 'A';
		let time  = $(this).attr('data-clicktime')  || 0;

		if ( back == 'true' ) {
			$('.show').removeClass('show');
			$('.fast-icon').addClass('off');
			$('.back-icon').addClass('off');
			A3D.f.clearScene( A3D.c.scene, 2);
		}

		if ( scene != '' ) {
			A3D.c.take  = 'A';
//console.log('>>>>>>>>>> buttonClick 1')
			A3D.CAM.moveTo( scene, take, time );
		}

		if ( fast == 'true' ) {
			let next =  A3D.data.scenes[scene].takes[ take ].next || take;
			$('.fast-icon').addClass('off');
//console.log('>>>>>>>>>> buttonClick 2')
			A3D.CAM.moveTo( scene, next, 'fast' );
		}
	},
	sceneClick : ( e ) =>{
		let scene = $(e.currentTarget).attr('data-gotoScene') || A3D.c.scene || '';
		let take  = $(e.currentTarget).attr('data-gotoTake')  || 'A';
		let time  = $(e.currentTarget).attr('data-clicktime')  || 0;
		let rand  = $(e.currentTarget).attr('data-randomizer')  || null;
		
		if ( scene != '' ) {
			A3D.CAM.moveTo( scene, take, time );
		}
	},
	takeClick : ( e ) =>{
		if ( $(e.currentTarget).attr('data-gotoScene') )
			return;
		let scene = A3D.c.scene || '';
		let take  = $(e.currentTarget).attr('data-gotoTake')  || 'A';
		let time  = $(e.currentTarget).attr('data-clicktime')  || 0;
		let rand  = $(e.currentTarget).attr('data-randomizer')  || null;
		
		if ( scene != '' ) {
			clearInterval( A3D.rndInterval )
			A3D.CAM.moveTo( scene, take, time );
		}
		
	},
	frameObject : ( e ) =>{

		let name  = $(e.currentTarget).attr('data-name')  || '';
		let time  = $(e.currentTarget).attr('data-clicktime')  || 1;
		let scene = A3D.c.scene || '';
		
		let obj = A3D.data.scenes[scene].obj[name]
		let objectTake = {
			pos			: [0,0,0],
			rot			: [0,0,0],
			time		: 1,
			randomizer	: scene,
			origin		: [0,0,0],
			responsive	: {
				//laptop 	: { pos : [0,6,65] },
				//tablet 	: { pos : [-1,6,95] },
				//mobile 	: { pos : [-2,6,170] },
				//mobile2 : { pos : [-2,6,220] },
			}
		}
		let current = A3D.data.scenes[scene].pos
		objectTake.pos = [
			-(current[0] + obj.pos[0]),
			-(current[1] + obj.pos[1]),
			0,
		]
		
		if ( scene != '' ) {
			clearInterval( A3D.rndInterval )
			A3D.CAM.moveTo( scene, objectTake, time );
		}
		
	},
	clearScene	: ( scene, delay, fade ) =>{
		delay = delay || 2;
		fade  = fade  || 0;
		if ( fade > 0 )
			$('.A3D-scene[data-name="' + scene + '"]').fadeOut( fade * 1000 );
		A3D.clearTime[scene] = setTimeout(function(){
			$('.A3D-scene[data-name="' + scene + '"]').remove();
			A3D.data.scenes[scene].exists = false;
			A3D.data.scenes[scene].loaded = false;
		}, delay * 1000)
	},
	rnd			: ( min, max ) =>{
		return Math.floor(Math.random() * (max - min + 1) + min);
	},
	getDistance : (p2, p1) =>{
//console.log('>>>>>', p1, p2)
		var dx = p2[0] - p1[0];
		var dy = p2[1] - p1[1];
		var dz = p2[2] - p1[2];

		
  		var distance = Math.sqrt(dx*dx + dy*dy + dz*dz);
		
		return 100 - distance;
	},
}
function addVectors(v1, v2) {
    return v1.map((x, i) => x + v2[i]);
}

function scalarMultiply(v, c) {
    return v.map(x => x*c);
}

function getLength(v) {
    return Math.hypot(...v);
}










		
// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅ INIT
A3D.init = () =>{
	let target = '#actus-3D';
	if ( ! $( target ).length ) return;
	$( target )
		.addClass('actus-3D')
		.attr('data-scene', 'home')
	
	$('<div id="A3D-SCENES">').appendTo( target )

	//$.getScript( "A3D-svg.js" ).then(function(){
		//A3D.svg = A3Dsvg;
		A3D.svg = {};
		$.getScript( "A3D-data.js" ).then(function(){
			//A3D.panel.create();
			A3D.CREATE.scene('home', target);
			A3D.CAM.random( A3D.data.rnd.home )
			//A3D.c.scene = A3D.data.scenes[ 'web' ];
			//A3D.CREATE.scene();
			A3D.events();
		})
	//})
	
}



A3D.init();




// ≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣
// ≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣≣ EVENT ACTIONS
$('body').on('scene-home-init', function(e,data){
	console.log('HOME INIT');
	
	/*
	A3D.homeIntv = setInterval(r=>{
		let id = A3D.f.rnd(1,7)
		if ( id == 3 ) return;
		if ( id > 5 ) return;
		let name = `.gear${id}`;
		
		$(`[data-name="home"] svg *`)
			.attr('pathLength', 100)
		$(`[data-name="home"] ${name}`)
			.addClass('stroke1')
		setTimeout(r=>{
		$(`[data-name="home"] ${name}`)
			.removeClass('stroke1')
		}, 20100)
		
	}, 10000)
	*/
})
$('body').on('scene-home-out', function(e,data){
	clearInterval( A3D.homeIntv )
})
$('body').on('scene-code-init', function(e,data){
	console.log('CODE INIT');

})
$('body').on('scene-code-in', function(e,data){
	console.log('CODE IN');
	$('.code-back').css({
		height: '30vw',
		top: '-15vw',
	})
})
$('body').on('scene-code-out', function(e,data){
	console.log('CODE OUT');
	$('.code-back').css({
		height: '0vw',
		top: '0vw',
	})
})
$('body').on('scene-about-init', function(e,data){
	A3D.words.init({
		target : '.A3D-scene[data-name="about"]',
	})
})
$('body').on('scene-about-out', function(e,data){
	A3D.words.stop()
})


