const frame = new Frame("fit", 1024, 768, "#333", "#111");
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
    let stage = frame.stage;
    let stageW = frame.width;
    let stageH = frame.height;

    // REFERENCES for ZIM at http://zimjs.com
    // see http://zimjs.com/learn.html for video and code tutorials
    // see http://zimjs.com/docs.html for documentation
    // see https://www.youtube.com/watch?v=pUjHFptXspM for INTRO to ZIM
    // see https://www.youtube.com/watch?v=v7OT0YrDWiY for INTRO to CODE

    // CODE HERE
	
	// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	// This Pen is not just to show video in ZIM 
	// It is more so a greeting to you, the creative people in CodePen
	// Please watch the content - hopefully to the end.
	// You are very much invited to join us building with ZIM!
	// We have a free, friendly forum at https://zimjs.com/slack 	
	// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   
	// This example is quite lengthy because the five control buttons
    // to play video is really just a couple lines (STEP 4)
	// where ZIM reads the video into a Bitmap (thanks CreateJS) 
	// and then we just use HTML 5 commands to work with the video
	// that is playing in the ZIM Bitmap
	

    // 1. get a reference to the video tag in the HTML	
	var source = zid("video"); // ZIM shortform for document.getElementById()

	// 2. when the video is loaded create and animate in control buttons
	let dialCheck = false;
	var playButton, restartButton, soundButton, rotateButton, dial;
	const controls = createControls()
		.alp(0)
		.animate({props:{alpha:1}, time:700, wait:1000}); // wait until player animates in

	// 3. create a player Container that we will place the video in and spin it perhaps
	const w = 640;
	const h = 360;
	const player = new Container(w, w)
		.centerReg()
		.mov(0,-30);

	// 4. read the source of the video into a Bitmap and center in the player
	const video = new Bitmap(source)
	video.setBounds(0,0,w,h)
	video.center(player).mov(6);

	// 5. in this example we mask the video with a circle
	const circle = new Circle(video.width/2-12, "#222")
		.center(player, 0)
		.sca(0)
		.cur();
	video.setMask(circle);
	circle.animate({scale:1}, 3000, "elasticOut"); // animate after the mask is set
	
	var pane = new Pane(500,150,"VIDEO ON CANVAS!",yellow).show();
	pane.on("close", function () {
		source.play();
		controls.animate({props:{alpha:1}, time:.7, wait:1}); // wait until player animates in
	});

	// 6. clicking on the video will pause or play so update the button too
	circle.on("click", ()=>{
		playButton.toggle();
		togglePlay();
	});

	// 7. add the play / pause functionality making use of the Button toggle functionality
	playButton.on("click", togglePlay);
	function togglePlay() {
		if (playButton.toggled) {
			source.pause();
		} else {
			source.play();
		}
	}

	// 8. handle restart by setting source.currentTime = 0
	restartButton.on("click", restart);
	function restart() {
		circle.animate({props:{scale:0}, time:1000, rewind:true, ease:"backIn", rewindCall:function() {
			// player.rotation = 0;
			source.currentTime = 0;
			source.play();
			playButton.toggle(false);
		}});
	}

	// 9. handle sound muting with the source.muted property
	soundButton.on("click", ()=>{
		source.muted = soundButton.toggled;
	});

	var rotateEvent = rotateButton.on("click", ()=>{
		if (!rotateButton.toggled) resetRotation();
	});

	function resetRotation(mode) {
		rotateButton.off("click", rotateEvent);
		rotateButton.enabled = false;
		player.animate({rotation:0}, player.rotation%(360*3)*10, "backInOut", ()=>{
			rotateButton.on("click", rotateEvent);
			rotateButton.enabled = true;
			if (mode == "end") {
				source.currentTime = 0;
				rotateButton.toggle(false);
				playButton.toggle(true);
				playButton.enabled = true;
			}
		});
	}

	// 10. handle what happens when the video ends with an ended event on the source
	source.addEventListener("ended", restart);

	// 11. animate the Dial to show video progress
	Ticker.add(()=>{
		// only have video set dial when dial is not in use
		if (dial && !dialCheck && source.duration && source.duration>0) {
			dial.currentValue = source.currentTime / source.duration;
		}
		if (rotateButton.toggled) player.rotation += .2;
	});

	function createControls() {
		const iconScale = 1.2;
		const iconColor = dark
		const buttonSize = 80;
		const buttonColor = silver;
		const buttonRoll = green;
		const controls = new Tile({
			obj:series(
				playButton = makeButton("pause", "play"),
				restartButton = makeButton("restart"),
				soundButton = makeButton("sound", "mute"),
				rotateButton = makeButton("rotate", "stop"),
				dial = new Dial({
					min:0,
					max:1,
					step:0,
					width:buttonSize,
					backgroundColor:silver,
					indicatorColor:dark
				}).alp(.9)
			),
			cols:1,
			rows:5,
			spacingV:30,
			clone:false
		}).pos(40, 70, true);

		function makeButton(type, toggle) {
			let icon =  pizzazz.makeIcon({
				type:type,
				color:iconColor,
				scale:iconScale
			});

			let toggleIcon;
			if (toggle) {
				toggleIcon = pizzazz.makeIcon({
					type:toggle,
					color:iconColor,
					scale:iconScale
				});
			}
			let button = new Button({
				width:buttonSize,
				height:buttonSize,
				backgroundColor:buttonColor,
				rollBackgroundColor:buttonRoll,
				gradient:.2,
				corner:buttonSize/2,
				icon:icon,
				toggleIcon:toggleIcon
			});
			return button;
		}


		dial.inner.color = dark;
		dial.backing.sha();
		dial.on("mousedown", ()=>{
			dialCheck = true;
			dial.backing.color = green;
		})
		dial.on("pressup", ()=>{
			dialCheck = false;
			dial.backing.color = silver;
			stage.update();
		});
		dial.on("change", ()=>{
			source.currentTime = dial.currentValue * source.duration;
		});

		return controls;
	}

	new Button({
		label:"SEE HD VID",
		backgroundColor:blue,
		rollBackgroundColor:pink,
		width:300,
		corner:[60,0,60,0]
	}).sca(.7).pos(40,40,null,true).tap(()=>{
		source.pause();
		playButton.toggle(true);
		zgo("https://youtu.be/a-qTs91kIug", "_blank");
	}).animate({
		wait:1500,
		from:true,
		props:{x:-400},
		ease:"backOut",
		time:500
	});

	new Label("ZIM VIDEO", 30, null, "#666")
		.pos(60, 40).alp(0).animate({alpha:1}, 3000);

	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=Container
	// https://zimjs.com/docs.html?item=Bitmap
	// https://zimjs.com/docs.html?item=Circle
	// https://zimjs.com/docs.html?item=Label
	// https://zimjs.com/docs.html?item=Button
	// https://zimjs.com/docs.html?item=Pane
	// https://zimjs.com/docs.html?item=Dial
	// https://zimjs.com/docs.html?item=Tile
	// https://zimjs.com/docs.html?item=tap
	// https://zimjs.com/docs.html?item=animate
	// https://zimjs.com/docs.html?item=cur
	// https://zimjs.com/docs.html?item=pos
	// https://zimjs.com/docs.html?item=mov
	// https://zimjs.com/docs.html?item=alp
	// https://zimjs.com/docs.html?item=sca
	// https://zimjs.com/docs.html?item=centerReg
	// https://zimjs.com/docs.html?item=center
	// https://zimjs.com/docs.html?item=setMask
	// https://zimjs.com/docs.html?item=zog
	// https://zimjs.com/docs.html?item=zid
	// https://zimjs.com/docs.html?item=zgo
	// https://zimjs.com/docs.html?item=Ticker
  
    // FOOTER
    // call remote script to make ZIM Foundation for Creative Coding icon
    createIcon(frame); 

}); // end of ready