import zim from "https://zimjs.org/cdn/016/zim";

// This is a rough comparison with the cool HTML / CSS Pen:
// https://codepen.io/argyleink/pen/ZEdrzJZ
// ZIM is at 18 percent the code the developer would code 
	
const frame = new Frame(FIT, 1024, 768, darker, dark, ready, "gf_Fascinate+Inline");
function ready() {

	// given F (Frame), S (Stage), W (width), H (height)
   // put code here
	
	STYLE = {borderWidth:0, width:60, height:30, once:true}
	const slider = new Slider({		
		max:100,
		barWidth:30,
		barLength:H,
		inside:true,
		damp:.1
	})
		.rot(90)
		.pos(0,0,RIGHT);
	
	const instruct = new Label("Use Scrollbar to see effect", 50, null, light).center();
	slider.on("mousedown", ()=>{
		instruct.animate({alpha:0});
	}, null, true); // true for once
		
	const holder = new Container(W,H).addTo();
	
	const words = ["ZIM", "JavaScript", "Canvas", "Framework", "Code", "Creativity", "STYLE", "Components", "Conveniences", "Controls", "Games", "Puzzles", "Art", "Data Vis", "Interactive Logos", "InfoActives", "Physics", "Sockets", "Cam", "3D", "ZIM"]
		
	loop(words, (word,i,t)=>{
		// The label with ZIM in it, is treated a little differently.
		// It is bigger, slower and only animates scale
		// so some of the values are more complicated because of this
		const first = i==0;
		const w = new Label(word, first?100:null, "Fascinate Inline", [pink,blue,orange,yellow,green])
			.centerReg(holder)
			.alp(0)
			.effect(new BlurEffect(0,0)) // blur is a little expensive on canvas...
			.animate({
				// animate x across width and y to either above or below the stage 
				// leave the first at half the stage width and height (the middle)
				props:{x:first?W/2:rand(W), y:first?H/2:[-100,H+100], scale:3},
				wait:i*2, // stagger the start times
				time:t-i+1 // adjust the animation times how we want
			})
			.animate({
				props:{alpha:1},
				wait:i*2+(first?0:2),
				time:(t-i+1)/3-(first?-.5:1),
				rewind:true
			})			
			.pauseAnimate();	// let the Slider change the percentComplete			
	});
	
	// we could put this in a change event on the Slider 
	// but we are using damping on the Slider (optional) 
	// which means we need to use a Ticker - like requestAnimationFrame() 
	
	Ticker.add(()=>{		
		holder.loop((word,i)=>{
			// slow the ZIM label's animation
			word.percentComplete = i==0?slider.currentValue*.7:slider.currentValue;
			
			// adjust blur from scale 2-3
			const blur = word.effects.blur;
			const amount = (word.scale-2)*100; 
			blur.blurX = blur.blurY = amount;
			word.updateEffects();
		});
	});	
	
}


// 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

// Docs for items used:
// https://zimjs.com/docs.html?item=Frame
// https://zimjs.com/docs.html?item=Container
// https://zimjs.com/docs.html?item=Label
// https://zimjs.com/docs.html?item=Slider
// https://zimjs.com/docs.html?item=effect
// https://zimjs.com/docs.html?item=updateEffects
// https://zimjs.com/docs.html?item=animate
// https://zimjs.com/docs.html?item=pauseAnimate
// 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=rot
// 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=BlurEffect
// https://zimjs.com/docs.html?item=STYLE
// https://zimjs.com/docs.html?item=Ticker