// ==== Starter World =================================================================================================
// This code is designed for use on the Ancient Brain site.
// This code may be freely copied and edited by anyone on the Ancient Brain site.
// To include a working run of this program on another site, see the "Embed code" links provided on Ancient Brain.
// ====================================================================================================================




// Starter World for "Web page" API 
// Just use JS to make a web page

// This page gets images from Flickr  
// Makes JSONP call to Flickr to get images of some tag 


// default body is margin 0 and padding 0 

  $('body').css( "margin", "20px" );
  $('body').css( "padding", "20px" );



// ===================================================================================================================
// === Start of tweaker's box ======================================================================================== 
// ===================================================================================================================

const thetag 	= "lamborghini"; 		// tag to fetch 
const MAX 		= 10;					// number of images to fetch 

// ===================================================================================================================
// === End of tweaker's box ==========================================================================================
// ===================================================================================================================





  
// --- document.write (tags) --------------------------------------------------------------------------------------------------------------------
// Use JS to write HTML and data to page "here" 
// document.write ( "regular string" ); 
// document.write ( `multi-line string` );
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals


document.write ( `

<h1> Flickr web page </h1>
Demo of using JS to just write HTML and data to a web page.

` );




// Image from:
// https://commons.wikimedia.org/wiki/Category:Lamborghini 

document.write ( `

<div style='margin-top:50px; padding:20px;  border: 2px solid black; '>

<h1> document.write (tags) </h1> 

<p> This section writes some hard-coded HTML. </p>

<img border=1 width=400 src="/uploads/starter/lamborghini.1963.jpg"><br> 
Giotto Bizzarrini, Ferruccio Lamborghini and Gian Paolo Dallara at Sant'Agata Bolognese in 1963, with a Lamborghini V12 engine prototype.<br>
From <a href="https://commons.wikimedia.org/wiki/File:Bizzarrini_Lamborghini_Dallara.jpg">here</a>.

</div>

` );




// --- Launch buttons --------------------------------------------------------------------------------------------------------------------

document.write ( `

<div style='margin-top:50px; padding:20px;  border: 2px solid black; '>

<h1> Launch buttons </h1>

Demo of "launch buttons" using <a href="https://ancientbrain.com/docs.ab.php">AB functions</a>.
A nice way to launch a run from your page.

	` );

document.write ( " <p> Using AB.launchWorld: </p> " );
document.write ( "<center>" + 	AB.launchWorld ( "5205815204", "Blank Three.js World" ) 						+ "</center>" );

document.write ( " <p> Using AB.launchWorldMind: </p> " );
document.write ( "<center>" + 	AB.launchWorldMind ( "complex", "Complex World", "complex", "Complex Mind" ) 	+ "</center>" );

document.write ( "</div>" );




  
// --- JSONP --------------------------------------------------------------------------------------------------------------------
  
	const thefn 	= "callbackfn";			// JSONP callback function name as a string 
	const theurl 	= "https://api.flickr.com/services/feeds/photos_public.gne?format=json&jsoncallback=" + thefn + "&tags=" + thetag;

document.write ( `

<div style='margin-top:50px; padding:20px;  border: 2px solid black; '>
<h1> Demo of JSONP </h1> 

` );

document.write ( " <p> Latest Flickr images tagged with:  \"" + thetag + "\"  </p> " );

// div to write output to: 
document.write ( " <div id=theoutput> </div> " );
document.write ( "</div>" );
	
	
	
	
	// JSONP is a one-liner with jquery:
	
	$.getScript ( theurl );

	
	
	
// define JSONP callback function

function callbackfn ( data ) 
{
    var s = "";
    
	for ( var i = 0; i < MAX ; i++ ) 
	{
//		var imgurl = data.items[i].media.m;
//		s = s + " <img border=1 src=" + imgurl + "> ";
	  
		var htmlblock = data.items[i].description;
		s = s + " <div style='margin-top:50px;'> <hr> " + htmlblock + " </div> " ;
	}
 
	// callback function needs to write to div - cannot do document.write 
 
	$("#theoutput").html ( s );
}