// ZIM Frame to load canvas and stage for ZIM components 
// colorRange is being used to return a darker version of ZIM green 
const frame = new Frame("fit", 500, 800, green, colorRange(green,black,.2));
frame.on("ready", ()=>{ // ES6 Arrow Function - similar to function(){}
	zog("ready from ZIM Frame"); // logs in console (F12 - choose console)

	// often need below - so consider it part of the template
	const stage = frame.stage;
	const stageW = frame.width;
	const stageH = frame.height;

	// REFERENCES for ZIM at https://zimjs.com
	// see https://zimjs.com/intro.html for an intro example
	// see https://zimjs.com/learn.html for video and code tutorials
	// see https://zimjs.com/docs.html for documentation

	// CODE HERE
	
	// this code is a mix of ZIM and ThreeJS 
	// ThreeJS is used for the model and the picture plane
	
	// use the ZIM three helper library to set up ThreeJS
	const display = new zim.Three({
		frame:frame,
		width:500,
		height:800,
		cameraPosition:new THREE.Vector3(0, 0, 250)
	});

	if (display.success) { // otherwise no WebGL

		const scene = display.scene;
		const camera = display.camera;

		// we are loading the JSON for the model in the phone.js file
		// in there is a global variable called phoneData
		// this allows us to manipulate materials with JavaScript
		// colors are in decimal number so convert from hex (remove # first)
		// in this case we could have gone into the data and hard coded the color 
		// but here: https://zimjs.com/three - we let the user change the color
		phoneData.materials[0].color = parseInt(white.slice(1), 16);
		phoneData.materials[2].color = parseInt(white.slice(1), 16);
		phoneData.materials[11].color = parseInt(white.slice(1), 16);

		// create a ZIM rectangle behind phone that can be used to capture swiping 	
		const swiperRect = new Rectangle(500,500,frame.color).centerReg(stage);

		// load in the phone model
		// would use loader.load() if loading from a JSON file
		// but we already have the JSON file in our phoneData global variable from phone.js
		loader = new THREE.ObjectLoader();
		loader.parse(phoneData, function(phone){

			phone.position.set(0,-115,0);
			
			// bring in the pictures as materials with textures
			const path = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/2104200/";
			const pics = [];
			loop(9, i=>{
				let picTexture = new THREE.ImageUtils.loadTexture(`${path}pic${i}.jpg`);
				pics.push(new THREE.MeshBasicMaterial({map:picTexture}));
			});

			// add to picture plane to model so they spin together
			// had to eyball the fit and positioning
			const picGeometry = new THREE.PlaneGeometry(99, 172, 4, 4);
			const pic = new THREE.Mesh(picGeometry, pics[0]);
			pic.position.z = 7.95;
			pic.position.y = 118.8;
			phone.add(pic); 
			timeout(200, ()=>{				
				scene.add(phone); // otherwise material flashes pic loads
			});
			
			// ZIM Swiper for controlling the rotation of the model in two directions
			// set swipe controls for rotating phone
			// swipeOn, target, property, sensitivity, horizontal, min, max, damp
			// let the phone rotate 40 Degrees past its two ends
			const swiperX = new Swiper(swiperRect, phone.rotation, "x", .001, false, -.2, 0);
			const swiperY = new Swiper(swiperRect, phone.rotation, "y", .01, true, -360*RAD*8-40*RAD, 40*RAD);
	
			// ZIM Indicator at bottom			
			const indicator = new Indicator({
				width:300,
				height:30,
				num:9,
				interactive:true
			})
				.pos(0,44,CENTER,BOTTOM)
				.alp(0)
				.animate({alpha:1})
				.change(() => {
					// disable swiper when clicking indicator
					swiperY.enabled = false;
					// end rotation is selectedIndex times 360 in Radians
					let rotation = -indicator.selectedIndex*360*RAD;
					// diff is used to figure out the time to rotate
					let diff = Math.abs(rotation-phone.rotation.y);
					// prevent the indicator from flashing to selectedIndex
					indicator.selectedIndex = lastIndex;
					// to animate ThreeJS object use animate function not method
					// then we specify the ThreeJS object as the target
					// use a strin for rotatiting a dot property
					animate({
						target:phone,
						props:{"rotation.y":rotation},
						time:diff*DEG*2.5,
						ease:"sineInOut",
						call:()=>{
							// turn the swiper back on when animation is done 
							// and set its value right away
							swiperY.immediate(phone.rotation.y);
							swiperY.enabled = true;
						}
					});
				});
			let lastIndex = indicator.selectedIndex = 0;

			// ZIM Ticker
			// constantly check if swiping has moved the indicator
			// change the indicator on the backside of the phone 
			// and at this time, swap the material (picture)
			Ticker.add(() => {
				let newIndicator = Math.abs(Math.floor((phone.rotation.y*DEG+180)/360));
				if (indicator.selectedIndex != newIndicator) {
					lastIndex = indicator.selectedIndex = newIndicator;					
					pic.material = pics[indicator.selectedIndex];
				}
			});
			
		}); // end of phone model loading

		const light = new THREE.DirectionalLight(0xffffff);
		light.position.set(0,250,100);
		scene.add(light);

		const light2 = new THREE.PointLight(0xffffff);
		light2.position.set(100,250,100);
		scene.add(light2);

	} else { // no WebGL
		// ZIM Pane to display message
		const pane = new Pane(stageW+100, 200, "SORRY - NEEDS WEBGL", light);
		pane.show();
	}
	
	// ZIM STYLE and LabelLetters for top title
	STYLE = {
		color:white,
		size:[18,20,22],
		delayPick:true
	}
	new LabelLetters({label:"DR ABSTRACT CLUBBING!", valign:TOP})
		.pos(0,25,CENTER)
		.alp(0)
		.animate({
			props:{alpha:1},
			time:700,
			wait:300
		});
	STYLE = {};
	
	
	stage.update(); // this is needed to show any changes

	// DOCS FOR ITEMS USED
	// https://zimjs.com/docs.html?item=Frame
	// https://zimjs.com/docs.html?item=Rectangle
	// https://zimjs.com/docs.html?item=LabelLetters
	// https://zimjs.com/docs.html?item=Pane
	// https://zimjs.com/docs.html?item=Indicator
	// https://zimjs.com/docs.html?item=change
	// https://zimjs.com/docs.html?item=animate
	// https://zimjs.com/docs.html?item=loop
	// https://zimjs.com/docs.html?item=pos
	// https://zimjs.com/docs.html?item=alp
	// https://zimjs.com/docs.html?item=centerReg
	// https://zimjs.com/docs.html?item=Swiper
	// https://zimjs.com/docs.html?item=timeout
	// https://zimjs.com/docs.html?item=colorRange
	// https://zimjs.com/docs.html?item=zog
	// https://zimjs.com/docs.html?item=STYLE
	// https://zimjs.com/docs.html?item=Ticker

	// FOOTER
	// call remote script to make ZIM icon - you will not need this
	createIcon(); 

}); // end of ready