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

// 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
	
const assets = ["fascination3.jpg", "dancing_square.jpg", "dancing_fascination.jpg"];
const path = "https://assets.codepen.io/2104200/";
const frame = new Frame(FIT, 2000, 1000, black, black, ready, assets, path);
function ready() {

	// given F (Frame), S (Stage), W (width), H (height)
   // put code here
	const mask = new Rectangle(W,H*.75).reg(CENTER).pos(0,H*.05,CENTER);

	const one = new Pic("dancing_square.jpg").scaleTo(S,null,100).addTo().ble("screen").setMask(mask, true);
	const two = new Pic("fascination3.jpg").scaleTo(S,null,100).pos(0,0,RIGHT).ble("screen").setMask(mask, true);
	const pic = new Pic("dancing_fascination.jpg").scaleTo(S,100).center().ble("screen").setMask(mask, true);
	
	const loader = new Loader();
	const save = new Button({label:"SAVE"}).tap(()=>{		
		const bounds = mask.boundsToGlobal();
		// usually we just loader.save(S) or some other container but here we crop
		loader.save(S, null, bounds.x, bounds.y, bounds.width, bounds.height);
	});
	const slider = new Slider({range:true, max:1}).change(()=>{
		one.x = slider.rangeSliderA.value*W/2;
		two.x = slider.rangeSliderB.value*W/2;
	}).sca(1.8);
	const slider2 = new Slider({range:true, max:1}).change(()=>{
		mask.widthOnly = (slider2.rangeMax-slider2.rangeMin)*W;
		mask.x = slider2.rangeAve*W;
		S.update();
	}).sca(1.8);
	slider.rangeMax = 1;
	slider2.rangeMax = 1;
	const icon = F.makeIcon({box:faint}).tap(()=>{zgo("https://zimjs.com")});
	STYLE = {valign:CENTER}
	new Tile([save, slider, slider2, icon],4,1,100,0,true).pos(0,15,CENTER,BOTTOM);
	
}

// Docs for items used:
// https://zimjs.com/docs.html?item=Frame
// https://zimjs.com/docs.html?item=Pic
// https://zimjs.com/docs.html?item=Rectangle
// https://zimjs.com/docs.html?item=Button
// https://zimjs.com/docs.html?item=Slider
// https://zimjs.com/docs.html?item=Loader
// https://zimjs.com/docs.html?item=tap
// https://zimjs.com/docs.html?item=change
// https://zimjs.com/docs.html?item=boundsToGlobal
// https://zimjs.com/docs.html?item=pos
// https://zimjs.com/docs.html?item=ble
// https://zimjs.com/docs.html?item=reg
// 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=center
// https://zimjs.com/docs.html?item=setMask
// https://zimjs.com/docs.html?item=Tile
// https://zimjs.com/docs.html?item=STYLE