//
// Code block 1: add new HTML element to the page
//
document.body.innerHTML += "<h3>Wherein we learn some JavaScript tricks.</h3>";



//
// Code block 2: create API request
//
var APIrequest = new XMLHttpRequest();
var query = "karel+appel";
var APIkey = "<ADD-YOUR-API-KEY-HERE>";
var rijksUrl = "https://www.rijksmuseum.nl/api/nl/collection?key=" + APIkey + "&format=json&ps=100&q=" + query



//
// Code block 3: make API request, show response
//
function makeRequest() {
	APIrequest.onreadystatechange = processData;
	APIrequest.open('GET', rijksUrl);
	APIrequest.send();
}
makeRequest();

function processData() {
	if (APIrequest.readyState === 4) {
		console.log(APIrequest.responseText);
	}
}



//
// Code block 4: make API request, show painting titles
//
function processData() {
	if (APIrequest.readyState === 4) {
		var data = JSON.parse(APIrequest.responseText);
		var objects = data.artObjects;
		objects.forEach(function(object) { 
			console.log(object.title);
		});
	}
}
makeRequest();



//
// Code block 5: make API request, show production places
//
function processData() {
	if (APIrequest.readyState === 4) {
		var data = JSON.parse(APIrequest.responseText);
		var objects = data.artObjects;
		objects.forEach(function(object) {
			object.productionPlaces.forEach(function(place) {
				console.log(place);
			});
		});
	}
}
makeRequest();



//
// Code block 6: make API request, count production places
//
function processData() {
	if (APIrequest.readyState === 4) {
		var data = JSON.parse(APIrequest.responseText);
		var objects = data.artObjects;
		var placeCount = {};
		objects.forEach(function(object) {
			object.productionPlaces.forEach(function(place) {
				if (typeof(placeCount[place]) === 'undefined') {
					placeCount[place] = 1;
				}
				else {
					placeCount[place]++;
				}
			});
		});
		console.log(placeCount);
	}
}
makeRequest();



//
// Code block 7: make API request, make a bar chart
//
function processData() {
	if (APIrequest.readyState === 4) {
		var data = JSON.parse(APIrequest.responseText);
		var objects = data.artObjects;
		var placeCount = {};
		objects.forEach(function(object) {
			object.productionPlaces.forEach(function(place) {
				if (typeof(placeCount[place]) === 'undefined') {
					placeCount[place] = 1;
				}
				else {
					placeCount[place] += 1;
				}
			});
		});

		for (place in placeCount) {
			console.log(place);
			document.body.innerHTML += "<div style='display: inline'>" + place + "</div>\n";
			document.body.innerHTML += "<div style='width: " + placeCount[place] * 10 + "px; background-color: #00fff0'>" + placeCount[place] + "</div>\n";
		}
	}
}
makeRequest();