const frame = new Frame("fit", 1024, 768, yellow, darker);
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 "form" is not the best use of ZIM - but it can be done
	// ZIM is very customizable and is easy to animate
	// ZIM works easily with server calls via ZIM async()
	
	// ANIMATE = false; // uncomment to turn off animate() while developing - works well with from:true
	
	const title = new Label({
		text:"GITHUB STARS!\n\nLet's check out each other's\n\nGitHub repositories (so nerdy!)", 
		color:white,
		align:"center",
		padding:60,
		corner:15,
		backing:pizzazz.makePattern({
			type:"slants", backgroundColor:"#111", colors:"#222", size:30, rows:20
		})
	})
		.centerReg() // centers and centers reg so scale animation works from middle
		.mov(50) // relative movement to right
		.pos(null,50) // 50 pixels down from top
		.cache()
		.sha("rgba(0,0,0,.5)",5,5,2)
		.animate({props:{scale:0}, wait:500, time:400, ease:"backOut", from:true});		
	
	const list = new List({
		list:["danzen/zimjs"],
		height:300,
		width:340,
		viewNum:7.5 // set to bigger number to make list elements smaller
	})
		.center()
		.mov(-20) // relative movement to left 20
		.pos(null,40,null,true) // position 40 pixels from bottom
		.animate({props:{y:stageH+20}, wait:800, time:400, ease:"backOut", from:true})
		.tap(()=>{
			zgo("https://github.com/" + list.text, "_blank");
		});
	
	// Get data from database and send callback function
	// See the bottom of the code for an example of the PHP
	async("https://zimjs.com/codepen/github.php", getRepo);
	function getRepo(data) {
		list.addAt(data);
	}		
	
	const instructions = new Label({
		text:"Use soft keyboard to enter GitHub name/repository", 
		color:white,
		padding:20,
		backgroundColor:"rgba(0,0,0,.15)"
	}).center().mov(0,-240).removeFrom(); 
	
	const repo = new Label({
		backing:new Rectangle(640,60,white),
		color:dark,
		text:"",
		lineWidth:630
	}).center().mov(-120,-100).removeFrom();
	
	// optionally set STYLE as we have two buttons that use this style
	STYLE = {
		type:{
			Button:{
				backgroundColor:blue,
				rollBackgroundColor:pink,
				corner:0,
				shadowBlur:5
			}
		}
	}
	
	const submitButton = new Button({label:"SUBMIT"})
		.loc(741, 254) // was calculated using place()
		.removeFrom()
		.tap(()=>{
			if (repo.text == "") {
				submitButton.backgroundColor = red;
				stage.update();
				timeout(600, ()=>{
					submitButton.backgroundColor = blue;
					stage.update();
				})
				return;
			}			
			title.visible = true;
			// could have put these three in a Container...
			instructions.removeFrom();
			repo.removeFrom();
			submitButton.removeFrom();			
			addButton.removeFrom();				
			keyboard.hide();			
			// send data off to server along with callback function for results
			async("https://zimjs.com/codepen/github.php?repo="+encodeURI(repo.text), addRepo);
			stage.update();			
		});
	function addRepo(result) {
		new Label(result).loc(686, 425).alp(.7); // used place() to calculate
		if (result=="Visiting time!") {
			list.addAt(repo.text, list.length);
			list.selectedIndexPlusPosition = list.length-1; // adds and scrolls to index
		}
		stage.update();
	}
	
	const addButton = new Button({label:"ADD"})
		.sca(.8)
		.loc(686, 428) // used place() to locate
		.animate({props:{scaleX:0}, wait:1200, time:400, ease:"backOut", from:true})
		.tap(()=>{
			title.visible = false;
			instructions.addTo();
			repo.addTo();
			submitButton.addTo();			
			keyboard.show();
		});
	
	const keyboard = new Keyboard({
		labels:repo,
		color:white, backgroundColor:green,
		corner:0,
		borderColor:orange, borderWidth:6
	});
	keyboard.on("close", ()=>{
		title.visible = true;
		instructions.removeFrom();
		repo.removeFrom();
		submitButton.removeFrom();		
		stage.update();
	});
	   
  
   // DOCS FOR ITEMS USED
	// https://zimjs.com/docs.html?item=Frame
	// https://zimjs.com/docs.html?item=Rectangle
	// https://zimjs.com/docs.html?item=Label
	// https://zimjs.com/docs.html?item=Button
	// https://zimjs.com/docs.html?item=List
	// https://zimjs.com/docs.html?item=Keyboard
	// https://zimjs.com/docs.html?item=tap
	// https://zimjs.com/docs.html?item=animate
	// https://zimjs.com/docs.html?item=sha
	// https://zimjs.com/docs.html?item=pos
	// https://zimjs.com/docs.html?item=loc
	// https://zimjs.com/docs.html?item=mov
	// https://zimjs.com/docs.html?item=alp
	// https://zimjs.com/docs.html?item=addTo
	// 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=timeout
	// https://zimjs.com/docs.html?item=async
	// https://zimjs.com/docs.html?item=zog
	// https://zimjs.com/docs.html?item=zgo
	// https://zimjs.com/docs.html?item=STYLE
	// https://zimjs.com/docs.html?item=ANIMATE
	
	 ANIMATE = true; // in case set to false above for demonstration (need to animate in icon)
  
    // FOOTER
    // Please see a greeting message - then come visit us at ZIM https://zimjs.com
	 createGreet(100);
	
    // call remote script to make ZIM Foundation for Creative Coding icon
    createIcon(50); 
	
	 stage.update(); // this is needed to show any changes

}); // end of ready


// Here is an example of what the server side PHP would look like 
// <?php
// header('Content-type: text/javascript');
// // change these to your information
// $mysqli = new mysqli("localhost", "username", "password", "database");
// // collect any added data
// $repo = isset($_GET["repo"])?$_GET["repo"]:"";
// if ($repo == "") {
//     // get data from database
//     $query = "SELECT repo FROM zim_github";
//     $result = $mysqli->query($query);
//     while($row = $result->fetch_array()) {
//         $rows[] = $row[0];
//     }
//     echo "async.getRepo(".JSON_encode($rows).")";
// } else {
//     // send data to database - binding protects from SQL injection
//     $query = "INSERT INTO zim_github (repo, date) VALUES (?, NOW())";
//     $stmt = $mysqli->stmt_init();
//     if ($stmt->prepare($query)) {
//         $stmt->bind_param("s", $repo); // matches the ? in the query
//         $stmt->execute();
//         echo "async.addRepo('Visiting time!')";
//     } else {
//         echo "async.addRepo('Sorry - error!')";
//     }
// }
// ?>