// Using a Frame for animation and a Frame for interface
// so animation does not have to update interface
// Storing data outside the Frame calls so both Frames can use it

const data = {
	curve:.5,     // curve factor 
	speed:.02,    // speed factor
	delay:.03     // delay of pattern between rings
}

// ~~~~~~~ Rings animation Frame

const scaling = "outside"; // this will resize to fit outside the screen dimensions
const width = 1024;
const height = 768;
const color = black;
const outerColor = black;

// turning off rollovers and press events (last false, false)
const frame = new Frame(scaling, width, height, color, outerColor, null, null, null, false, false);
frame.on("ready", 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
	// see https://codepen.io/topic/zim/ for ZIM on CodePen
	
	// *** NOTE: ZIM Cat defaults to time in seconds
	// All previous versions, examples, videos, etc. have time in milliseconds
	// This can be set back with TIME = "milliseconds" but we suggest you give it a try!
	// There will be a warning in the conslole if your animation is not moving ;-)

	// CODE HERE
	// rings are made with little lines in a ring
	const segments = 180; // how many lines
	const delta = 360/segments; // angle for each line
	const inner = 50; // inner radius - multiplied by 2 at largest ring, etc.
	const outer = 200; // outer radius
	const variation = outer-inner; // maximum noise        
	const colors = series(green, blue, yellow, orange, red, purple);
	let time = 0; 

	// The ZIM Generator() works somewhat like Processing / P5js
	// Setting stamp instead of draw will draw all generations immediately 
	// rather than one generation at a time
	// and then we will call restamp() in a Ticker to animate patterns
	var g = new Generator({
		stamp:gen,
		maxCount:segments      
	});

	// Generator lines do not fill (Generator shapes do)
	// so send info to Shape objects on stage
	var shapes = [];
	loop(6, i=>{
		shapes.push(new Shape(stageW, stageH).addTo());
	});

	function gen(count) {  
		let angle = delta*count*RAD;  // (0-360 degrees in radians)   
		loop(6, i=>{
			let noise = g.noise(data.curve*Math.sin(angle), data.curve*Math.cos(angle), time+i*data.delay);
			let radius = inner+variation*noise;
			g.push().translate(radius*(2-i*.3),0).pop();
			// find global position of generator 
			let p = g.drawing.localToGlobal(g.currentX, g.currentY);   
			// if first time then start the drawing otherwise draw line     
			if (count==1) shapes[i].c().f(colors()).mt(p.x, p.y);
			else shapes[i].lt(p.x, p.y); 
		});
		g.rotate(delta); // rotate delta each time              
	}

	Ticker.add(function () {
		time += data.speed; // set the speed through the noise equation
		g.restamp();        
	});

}); // end of ready


// ~~~~~~~ Interface animation Frame

// will go with full mode (default Frame)
// so interface can be anchored to the bottom 
// as other Frame is outside which takes whole window

const frame2 = new Frame();
frame2.on("ready", ()=>{
	frame2.setDefault(); // so center() etc. defaults to this stage rather than the first Frame stage
	const stage = frame2.stage;
	let stageW = frame2.width; // stageW and stageH change in the resize event
	let stageH = frame2.width;    

	// make interfaces then Tile them 
	// could use a Button with an arrow Icon Triangle and Toggle Icon Triangle
	// but it is as easy to just rotate a Triangle - as long as we do not care about rollover	
	const toggle = new Triangle(70,70,70,grey) 
		.centerReg()
		.expand()
		.rot(-90)
		.tap(()=>{
			// could add 180 each time but we use the rotation to determine the toggle state
			toggle.rotation = toggle.rotation==90?-90:90;  
			// animate in or out the objects in the components array with a sequence
			// we want the farthest one to start (last in tile) so reverse the order
			animate({
				target:components, 
				time:.2,
				props:{alpha:toggle.rotation==90?0:1},
				sequence:.05,
				sequenceReverse:true
			}); 
		}); 
	// List has some compact interface combinations so use the slider 
	// these are stored right on the list as static methods
	// label, min, max, val, call, step, obj, property, paddingLeft, paddingRight, factor, offset
	const curveSlider = List.slider("Curve", 0, 2, .5, null, null, data, "curve", 50, null, 5);
	const speedSlider = List.slider("Speed", -.05, .05, .02, .001, null, data, "speed", 50, null, 200);
	const delaySlider = List.slider("Delay", 0, .1, .03, null, null, data, "delay", 50, null, 100);
	const icon = frame.makeIcon(null,black).sca(.9).tap(()=>{zgo("https://zimjs.com", "_blank")});
	const components = [toggle, curveSlider, speedSlider, delaySlider, icon];
	STYLE = {valign:CENTER}; // for centering height of Triangle
	const panel = new Tile(components, 5, 1, 40, 0, true).sca(.3);
	STYLE = {};
	components.shift(); // remove arrow from array (so we do not animate it out on tap)

	
	createNFT("https://hic.link/199198").sca(.8).loc(30,30)
	
	frame2.on("resize", ()=>{
		panel.scaleTo(stage, 95);
		// like setting minWidth and maxWidth styles 
		// remember to assign results of constrain back
		panel.width = constrain(panel.width, 300, 700);       
		panel.pos(0,30,CENTER,BOTTOM);
	});
});

	// DOCS FOR ITEMS USED
	// https://zimjs.com/docs.html?item=Frame
	// https://zimjs.com/docs.html?item=Shape
	// https://zimjs.com/docs.html?item=Triangle
	// https://zimjs.com/docs.html?item=tap
	// 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=rot
	// https://zimjs.com/docs.html?item=sca
	// https://zimjs.com/docs.html?item=scaleTo
	// https://zimjs.com/docs.html?item=addTo
	// https://zimjs.com/docs.html?item=centerReg
	// https://zimjs.com/docs.html?item=center
	// https://zimjs.com/docs.html?item=expand
	// https://zimjs.com/docs.html?item=Tile
	// https://zimjs.com/docs.html?item=Generator
	// https://zimjs.com/docs.html?item=constrain
	// https://zimjs.com/docs.html?item=series
	// https://zimjs.com/docs.html?item=zog
	// https://zimjs.com/docs.html?item=STYLE
	// https://zimjs.com/docs.html?item=Ticker