// Cloned by test2 on 15 Mar 2019 from World "Flickr World" by Starter user 
// Please leave this clone trail here.
 



// ==== Starter World ===============================================================================================
// (c) Ancient Brain Ltd. All rights reserved.
// This code is only for use on the Ancient Brain site.
// This code may be freely copied and edited by anyone on the Ancient Brain site.
// This code may not be copied, re-published or used on any other website.
// To include a run of this code on another website, see the "Embed code" links provided on the Ancient Brain site.
// ==================================================================================================================




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





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

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

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





  
// --- Start of document.write (tags) --------------------------------------------------------------------------------------------------------------------
// One way of using JS to write HTML and data is with a multi-line string
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

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

document.write ( `


<h1> Flickr web page </h1>

Demo of just using JS to write HTML and data to a web page.

<pre>

</pre>

<hr>

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

<img border=1 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>.
<p><br>


` );

// --- End of document.write (tags) --------------------------------------------------------------------------------------------------------------------






  
// --- Start of 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;'> <hr> <h1> Demo of JSONP </h1> </div> " );
	document.write ( " <p> Latest Flickr images tagged with: <b> \"" + thetag + "\" </b> </p> " );

	// div to write output to: 
	document.write ( " <div id=theoutput> </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;'> " + htmlblock + " </div> " ;
	}
 
	// callback function needs to write to div - cannot do document.write 
 
	$("#theoutput").html ( s );
}

// --- End of JSONP --------------------------------------------------------------------------------------------------------------------