const frame = new Frame("fit", 800, 600, "#000", "#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

  // we will make a bunch of circles and each time we get the next color in the series
  const colors = series(blue, pink, green, yellow);

  // make a new parallax object
  // usually will pass array of parallax objects here 
  // but this time we are dynamically creating them so addLayer() is just as easy
  const parallax = new Parallax();

  // a zim loop - just an easier format of a traditional for loop
  loop(7, i=>{

    // make circles - from small to big but add them at the bottom each time
    // note we use the series for the color
    let circle = new Circle((i+2)*(i+2)*3, colors()).center().bot();

    // add the circle to the parallax
    // here we set three parallax effects on each circle 
    // x, y motion and scale 
    // we change the value to be bigger for each layer
    // set object, property, change of property and input (default is mouseX)
    parallax.addLayer({
      obj:circle,
      prop:"x",
      propChange:i*40
    });
    parallax.addLayer({
      obj:circle,
      prop:"y",
      input:"mouseY",
      split:true, // start in middle (x automatically is true - y is false to "ground" most scenes)
      propChange:i*10
    });
    parallax.addLayer({
      obj:circle,
      prop:"scale",
      propChange:2,
      input:"mouseY"
    });

    // mask the last circle - really need to nest circles too - but this will do
    // the true parameter is for dynamic masks
    // it defaults to false except when using drag() and animate()
    if (i>0) stage.getChildAt(1).setMask(stage.getChildAt(0), true);
  });    
  
	new Label({text:"ZIM - Parallax", color:white}).alp(.7).sca(.7).pos(50,50);

  stage.update(); // this is needed to show any changes
  
  // DOCS FOR ITEMS USED
  // http://zimjs.com/docs.html?item=parallax
  // http://zimjs.com/docs.html?item=loop
  // http://zimjs.com/docs.html?item=makeSeries
  // http://zimjs.com/docs.html?item=Circle
  // http://zimjs.com/docs.html?item=setMask
  // http://zimjs.com/docs.html?item=frame  
  
  // FOOTER
	// call remote script to make ZIM icon - you will not need this
	createIcon(); 

}); // end of ready