const frame = new Frame();
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;
    frame.color = frame.dark;

    // 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
   
		// ZIM VR
		// http://zimjs.com/vr.html
		// Takes content and displays it in left and right channels with position shift to look 3D.
		// This example is to be viewed in a VR headset that uses a mobile phone.
		// Have a good read over the docs at http://zimjs.com/code/docs.html?item=vr
		// On the PC, the content can be swiped for testing
		// but the visual effect is obviously not the same.
		// You can turn on the VR adjuster to help you bring the images closer together
		// so that you can use the cross-eyed technique to get a 3D effect.

		// PROPORTION - not really part of VR - just using to set depths and scales to circles
		// we will have six circles indexed 0 - 5
		// the 0 circle is the big orange one and the 5 circle is the small dark grey one
		// 0 circle will animate to 20 depth which is positive coming out of the screen (which is at 0)
		// 5 circle will animate to 5 depth so much less out of the screen
		// we will also animate the scale up to 2.1 for the outer circle and 1.2 for the inner circle
		// the rest of the circles animate proportionally between these bounds for both depth and scale
		// Proportion lets us do this without thinking:
		// baseMin, baseMax, targetMin, targetMax, factor, targetRound
   	const depth = new Proportion(0, 5, 20, 5);
   	const size = new Proportion(0, 5, 2.1, 1.2);

    // Prepare content
		// put inside one container with everything as if there is no depth shifting
		// keep content regX at 0 - which is the default - so do not centerReg() for instance
   	const content = new Container(stageW/2, stageH); // although it is okay to go outside these bounds
	
		// outer radius and true means to make the circles individual Circle objects rather than one shape
		// makeCircles is just a little function ZIM added for promotional purposes 
		// the circles are also used to show broken images ;-)
   	const circles = frame.makeCircles(50, true) 
        .centerReg(content);
    const label = new Label({
        text:"ZIM VIRTUAL REALITY",
        size:20,
        color:frame.light
    })
        .centerReg(content, 0)
        .cache()
        .pos(null, stageH*.2)
        .dep(0); // screen depth

    // loop through the circles and give them depths
    // we can start them off in 3D already by giving them different starting depths
    // but we will start them at 0 and animate their depths
    loop(circles, function(circle, i, total) {
        // circle.dep((total-i)*3);
        circle.dep(0);
    });

    // content, angle, distance, parallax, parallaxAngle, damp, parallaxDamp, 
		// startAngle, negativeParallax, boundaryMarkers, swiper, holder
    var vr = new VR({
			content:content,
			angle:150,
			distance:400,
			parallax:3,
			parallaxAngle:60,
			boundaryMarkers:true,
			swiper:true
		}).center(stage);

    // optionally animate the circles - the text is child 0
    loop(vr.contentLeft.getChildAt(1), animateCircle);
    loop(vr.contentRight.getChildAt(1), animateCircle);
    function animateCircle(circle, i) {
        circle.animate({
            obj:{depth:depth.convert(i), scale:size.convert(i)},
            time:3000,
            rewind:true,
            loop:true
        });
    }

    frame.on("resize", ()=>{
        vr.resize();
    });

    // timeout(1000, function() {vr.remove(label)});
    // timeout(1000, function() {vr.position(circles.getChildAt(2), 50);});

    // stage.on("stagemousedown", ()=>{
    //     vr.showAdjuster();
    // });

    vr.on("boundaryout", e=>{
			frame.color = frame.yellow;
    });

    vr.on("boundaryin", e=>{
        frame.color = frame.dark;
    });
  
  
    // DOCS FOR ITEMS USED
		// 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=dep
		// https://zimjs.com/docs.html?item=centerReg
		// https://zimjs.com/docs.html?item=center
		// https://zimjs.com/docs.html?item=VR
		// https://zimjs.com/docs.html?item=loop
		// https://zimjs.com/docs.html?item=timeout
		// https://zimjs.com/docs.html?item=Proportion
		// https://zimjs.com/docs.html?item=zog
  
    // FOOTER
    // call remote script to make ZIM Foundation for Creative Coding icon
    createIcon(frame, 780, 600); 

}); // end of ready