const frame = new Frame("fit", 1024, 768, white, dark);
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
	
		// A flippable container with ZIM at 47% the Flutter code (commented at bottom)
		// did not bother animating size - it could be done with a proportion of the scale change
   
    class Flipper extends Container {
        constructor(front, back, time=200, vertical=false, isFlipped=false, ease="quad") {
            if (isFlipped) [front,back]=[back,front];
            const w = Math.max(front.width,back.width);
            const h = Math.max(front.height,back.height);
            super(w,h);
            this.cur();
            this.isFlipped = isFlipped;
            const that = this;

            front.centerReg(this);
            front.on("mousedown", ()=>{spin(front,back);});
            back.on("mousedown", ()=>{spin(back,front,-1);});

            function spin(f, b, d=1) { // current front, back, direction
                that.isFlipped = !that.isFlipped;
                if (vertical) {
                    var props1 = {skewX:-90*d, scaleY:.5};
                    var props2 = {skewX:0, scaleY:1}
                    b.ske(90*d,0).sca(1,.5); 
                } else {
                    var props1 = {skewY:-90*d, scaleX:.5};
                    var props2 = {skewY:0, scaleX:1}
                    b.ske(0,90*d).sca(.5,1);
                }
                f.animate({
                    props:props1,
                    time:time,
                    ease:ease+"In",
                    call:() => {
                        f.removeFrom();
                        b.centerReg(that).animate({
                            props:props2,
                            time:time,
                            ease:ease+"Out"
                        });
                    }
                });
            }
        }
    }
    const page1 = new Panel(350,450,"CIRCLES");
		new Tile(new Circle(40,pink), 2, 3, 40, 30).center(page1).mov(0,10); // not counted in size compare
	
    const page2 = new Panel(300,500,"SQUARES");
		new Tile(new Rectangle(70,70,green), 2, 4, 40, 30).center(page2).mov(0,10); // not counted in size compare	
	
    new Flipper(page1, page2).center();
	
    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=Circle
		// https://zimjs.com/docs.html?item=Rectangle
		// https://zimjs.com/docs.html?item=Panel
		// https://zimjs.com/docs.html?item=animate
		// https://zimjs.com/docs.html?item=cur
		// https://zimjs.com/docs.html?item=mov
		// https://zimjs.com/docs.html?item=ske
		// https://zimjs.com/docs.html?item=sca
		// https://zimjs.com/docs.html?item=removeFrom
		// https://zimjs.com/docs.html?item=centerReg
		// https://zimjs.com/docs.html?item=center
		// https://zimjs.com/docs.html?item=Tile
		// https://zimjs.com/docs.html?item=zog
  
    // FOOTER
    // call remote script to make ZIM Foundation for Creative Coding icon
    createIcon(); 
		createGreet();

}); // end of ready

    /*
		
    // ZIM is 47% the following Flutter code:
		// https://blog.gskinner.com/archives/2020/02/flutter-creating-a-flippable-card-with-tweenanimationbuilder.html
    // https://pub.dev/packages/flippable_box/versions/1.0.6
		// FLUTTER CODE:

    GestureDetector(
        onTap: () => setState(() => _isFlipped = !_isFlipped),
        child: FlippableBox(
            front: Container(width: 200, height: 200, color: Colors.white),
            back: Container(width: 300, height: 300, color: Colors.white),
            isFlipped: _isFlipped,
        ),
    )

    FlippableBox(
        front: child1,
        back: child2,
        isFlipped: _isFlipped,
        borderRadius: 32,
        bg: BoxDecoration(color: Colors.white),
        duration: 0.5,
        flipVt: true,
        curve: Curves.easeOut,
    )

    class FlippableBox extends StatelessWidget {
      final double clipRadius;
      final double duration;
      final Curve curve;
      final bool flipVt;
      final BoxDecoration bg;
      final Container front;
      final Container back;

      final bool isFlipped;

      const FlippableBox({Key key, this.isFlipped = false, this.front, this.back, this.bg, this.clipRadius, this.duration = 1, this.curve = Curves.easeOut, this.flipVt = false}) : super(key: key);

      @override
      Widget build(BuildContext context) {
        return TweenAnimationBuilder(
          duration: Duration(milliseconds: (duration * 1000).round()),
          curve: Curves.easeOut,
          tween: Tween(begin: 0.0, end: isFlipped ? 180.0 : 0.0),
          builder: (context, value, child) {
            var content = value >= 90 ? back : front;
            return Rotation3d(
              rotationY: !flipVt? value : 0,
              rotationX: flipVt? value : 0,
              child: Rotation3d(
                rotationY: !flipVt? (value > 90 ? 180 : 0) : 0,
                rotationX: flipVt? (value > 90 ? 180 : 0) : 0,
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(clipRadius ?? 0),
                  child: AnimatedBackground(
                    decoration: bg,
                    child: content,
                  ),
                ),
              ),
            );
          },
        );
      }
    }

    class Rotation3d extends StatelessWidget {
      static const double degrees2Radians = pi / 180;

      final Widget child;
      final double rotationX;
      final double rotationY;
      final double rotationZ;

      const Rotation3d({Key key, @required this.child, this.rotationY = 0, this.rotationZ = 0, this.rotationX}) : super(key: key);

      @override
      Widget build(BuildContext context) {
        return Transform(
            alignment: FractionalOffset.center,
            transform: Matrix4.identity()
              ..setEntry(3, 2, 0.001)
              ..rotateX(rotationX * degrees2Radians)
              ..rotateY(rotationY * degrees2Radians)
              ..rotateZ(rotationZ * degrees2Radians),
            child: child);
      }
    }

    class AnimatedBackground extends StatelessWidget {
      final Container child;
      final BoxDecoration decoration;

      const AnimatedBackground({Key key, this.child, this.decoration}) : super(key: key);

      @override
      Widget build(BuildContext context) {
        return AnimatedContainer(
            width: child.constraints.maxWidth,
            height: child.constraints.maxHeight,
            decoration: decoration,
            duration: Duration(milliseconds: 700),
            curve: Curves.easeOut,
            child: child);
      }
    }

    */