const frame = new Frame("fit", 1024, 768, "#DDD", "#555");
frame.on("ready", ()=>{ 
	zog("ready from ZIM Frame"); // logs in console (F12 - choose console)

	// often need below - so consider it part of the template
	const stage = frame.stage;
	const stageW = frame.width;
	const stageH = frame.height;

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

  // CODE HERE

  const content = new Container(stageW, stageH).addTo();
  const layers = new Container(stageW, stageH-50).loc(0,50); // keep the layer titleBars under the top bar

  // styles are optional - any DisplayObject parameters can be used as a style
  // these styles are applied to a type of object
  // styles can also be applied in general (put them outside type:{}) or to a group id (like a class in CSS)
  STYLE = {
    type:{
      Layer:{
        // titleBarHeight:30,
        // titleBarWidth:70,
        // size:14,
        titleBarX:0, // this will start the titleBars docked to the left edge (optional)
        titleBarY:series(50, 100, 150, 200), // each title bar made gets the next in the series
        titleBarDraggable:false,
        titleBarContainer:layers // this requires layers to exist - which it does above
      },
      Blob:{
        // use a series to apply the color and radius in order of Blob creation
        color:series(blue, blue, darker, darker, red, convertColor(dark, "rgba", .3)),
        radius:series(50,50,30,30,50,30), onTop:false, showControls:false
      },
      CheckBox:{size:22, startChecked:true, color:light}
    }
  }

  const head = new Layer(500, 500, "HEAD").center(content);
  new Circle(250, brown).center(head); // or we could apply transform to scale head independently of Layer scale
  new Circle(200, white).alp(.2).pos(0,20,CENTER,CENTER,head).transform({onTop:false, visible:false});

  const eyes = new Layer(300,100,"EYES").pos(0,-60,CENTER,CENTER,head);
  new Blob().center(eyes).mov(-100);
  new Blob().center(eyes).mov(100);
  new Blob().center(eyes).mov(-100);
  new Blob().center(eyes).mov(100);

  const nose = new Layer(350,220,"NOSE").pos(0,50,CENTER,CENTER,head);
  new Triangle(70,150,150,dark).alp(.3).pos(0,0,CENTER,TOP,nose).transform({onTop:false, visible:false});
  new Squiggle({color:dark, thickness:5, points:3, showControls:false})
    .transformPoints("scaleY", .5)
    .rot(180).pos(0,20,CENTER,BOTTOM,nose); 

  const mouth = new Layer(250,120,"MOUTH").center(head).mov(0,160);
  new Blob().center(mouth);
  new Blob().center(mouth);


  // TOP BAR
  new Rectangle(stageW, 50, dark).addTo();
  new Label({text:"ZIM Head", color:white}).sca(.7).alp(.7).pos(20,14);
  new CheckBox({label:"LAYERS"}).pos(20, 12, RIGHT).change(e=>{
    layers.visible = e.target.checked;
    // the code below would hide the ghosts when the layers are hidden
    // layers.loop(function (titleBar) {
    //     if (!layers.visible || ghosts.checked) titleBar.layer.transformControls.toggleGhost(layers.visible);
    // });
    stage.update();
  });
  const ghosts = new CheckBox({label:"GHOSTS"}).pos(150, 12, RIGHT).change(e=>{
    layers.loop((titleBar)=>{
      titleBar.layer.transformControls.toggleGhost(e.target.checked);
    });
    stage.update();
  });
  let docked = true;
  new CheckBox({label:"DOCK"}).pos(300, 12, RIGHT).change(e=>{
    docked = !docked;
    layers.loop((titleBar)=>{
      var layer = titleBar.layer;
      if (docked) layer.titleBarPos(layer.titleBarStartX, layer.titleBarStartY);
      else layer.resetTitleBar();
      layer.titleBarDraggable = !docked;
    });
    stage.update();
  });

  new TransformManager([nose], "layertest2")


  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=Circle
  // https://zimjs.com/docs.html?item=Rectangle
  // https://zimjs.com/docs.html?item=Triangle
  // https://zimjs.com/docs.html?item=Squiggle
  // https://zimjs.com/docs.html?item=Blob
  // https://zimjs.com/docs.html?item=Label
  // https://zimjs.com/docs.html?item=CheckBox
  // https://zimjs.com/docs.html?item=Layer
  // https://zimjs.com/docs.html?item=change
  // https://zimjs.com/docs.html?item=transform
  // https://zimjs.com/docs.html?item=loop
  // 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=rot
  // https://zimjs.com/docs.html?item=sca
  // https://zimjs.com/docs.html?item=addTo
  // https://zimjs.com/docs.html?item=center
  // https://zimjs.com/docs.html?item=loop
  // https://zimjs.com/docs.html?item=convertColor
  // https://zimjs.com/docs.html?item=transformPoints
  // https://zimjs.com/docs.html?item=zog
  // https://zimjs.com/docs.html?item=STYLE

  // FOOTER
	// call remote script to make ZIM icon - you will not need this
	createIcon(); 

}); // end of ready