const frame = new Frame("fit", 800, 600, lighter, grey);
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
    // ZIM Pizzazz 3 provides animated patterns - see http://zimjs.com/patterns.html
    // example with ProgressBar - only for barType == "rectangle" not the default "circle"
    // this is what a real progress bar with animated backing might look like:
    // btw the ProgressBar does not need animated backings
    // you can just set it to new ProgressBar(); and adjust its color parameters, etc.

    // const bar = new ProgressBar({
    //     type:"rectangle",
    //     backing:pizzazz.makePattern({colors:[blue, green], interval:100})
    // });
    // const frame = new Frame("fit", 1024, 768, black, white, "assets.mp3", "sounds/", bar);
    // frame.on("ready", ()=>{
    //     var circle = new Circle(100, red).center();
    //     circle.on("click", ()=>{
    //         frame.asset("sound.mp3").play();
    //     });
    // });

    // Below, we are going to show a series of patterns
    // and run a demonstration progress bar repeatedly with new patterns

    const patterns = [
        // makePattern(type, colors, size, cols, rows, spacingH, spacingV, interval, startPaused, cache)
        // these are animated (optional) and all but the first is started paused (optional) 
				// we unpause when shown in the bar
        pizzazz.makePattern({
					type:"slants", colors:makeSeries([brown, grey]), 
					size:5, rows:20, cols:60, interval:500
				}),
        pizzazz.makePattern({
					type:"pixels", colors:[blue, green], 
					interval:100, startPaused:true
				}),
        pizzazz.makePattern({
					type:"hatch", colors:pink, 
					interval:1000, startPaused:true
				}),
        pizzazz.makePattern({
					type:"dots", colors:[blue, green], 
					size:7, rows:3, interval:100, startPaused:true, cache:false
				}),
        pizzazz.makePattern({
					type:"plaid", colors:makeSeries([green, grey, green, blue]), 
					size:5, rows:20, cols:60, interval:500, startPaused:true
				}),
        pizzazz.makePattern({
					type:"noise", colors:[orange, yellow], 
					interval:100, startPaused:true
				}),
        pizzazz.makePattern({
					type:"stripes", colors:makeSeries([purple, pink]), 
					gradient:.2, rows:3, interval:500, startPaused:true
				}),
        pizzazz.makePattern({
					type:"bling", colors:["#999", "#aaa", "#bbb"], 
					size:25, rows:5, cols:15, backgroundColor:darker, 
					interval:100, startPaused:true
				})
    ];

		// anytime series is called it returns the next item in the pattern array
    const series = makeSeries(patterns); 
		// for example - this will be the slants pattern
    const firstPattern = series(); 

    const bar = new ProgressBar({
        barType:"Rectangle",
        foregroundColor:dark,
        backingColor:grey, // some patterns are partially transparent so this may affect colors
        borderColor:dark,
        backing:firstPattern,

        // corner:0,
        // borderWidth:10,
        // label:"LOADING",
        // labelPosition:"above",
        // padding:3,
        percentage:true,
        // fastClose:true
    }).show();

    interval(30, (obj)=>{ // note, the ZIM interval() is a little different than setInterval()
        if (obj.count <= 100) {
            bar.percent = obj.count; // manually change the progress bar
        } else if (obj.count == 101) {
            // once the bar reaches 100 it will automatically hide
            // This just swaps the backing with the next backing
            // for demonstration purposes only - normally, you would not do all this
           	bar.backing.pattern.pauseInterval(); // pause existing animation
            bar.setBacking(series()); // set the backing of the bar to the new pattern
            timeout(1000, ()=>{ // note, the ZIM timeout() is a little different than setTimeout()
                obj.count = 0;
                bar.backing.pattern.pauseInterval(false); // start the new pattern
                bar.show();
            });
        }
    });
	
		new Label("Example Animated Progress Bar Backings in ZIM").sca(.8).center().mov(0,-200).alp(.5);

    stage.update(); 
  
    // DOCS FOR ITEMS USED
    // https://d309knd7es5f10.cloudfront.net/pizzazz_03.js	
    // http://zimjs.com/docs.html?item=progressbar
    // http://zimjs.com/docs.html?item=setSeries
    // http://zimjs.com/docs.html?item=timeout
    // http://zimjs.com/docs.html?item=interval
    // http://zimjs.com/docs.html?item=frame
  
    // FOOTER
    // call remote script to make ZIM Foundation for Creative Coding icon
    createIcon(frame); 

}); // end of ready