// Global variables.
var json;
var url = "https://westmichigan.aiga.org/wp-json/wp/v2/posts?per_page=10";
var keyword;
var words = [];

// Assigning JSON to a variable and preloading all of it up front.
function preload() {
	json = loadJSON(url);
}

// Checking form for keyword and storing it in HTML5 local storage.
function checker() {
	keyword = document.getElementById("myText").value;
	console.log(keyword);
	localStorage.setItem("myText", keyword);
	location.reload(true)
}

// p5.js setup function.
function setup() {
	document.getElementById('site-url').innerHTML = url;
	createCanvas(windowWidth, windowHeight);
	background(32,37,41);
	for (var i = 0; i < json.length; i++) {
		var j = json[i];
		words[i] = new Word(j);
	}
	
	// Showing the entered keyword in the input field.
	document.getElementById("myText").value = localStorage.getItem("myText");
	noStroke();
}

// p5.js draw function.
function draw() {
	// Assigning the number of objects to a variable called 'count'.
	var count = Object.keys(json).length;
	var diameter = 45;
	
	// Looping through the JSON posts.
	for(var i = 0; i <= count; i++) {
		
		// Assigning post content to a variable.
		var content = json[i].content.rendered;
		
		// Searching content of post for specified string.
		// var word_count = (content.match(/diversity/g) || []).length; // This matches a string
		
		// Recalling the value from local storage and counting how many times it appears in each post.
		keyword = localStorage.getItem("myText");
		var word = new RegExp(keyword, 'g');
		var word_count = (content.match(word) || []).length;
		
		// Remapping the x_axis of ellipses
		var x_axis = map(i, 0, count-1, 0 + diameter, width - diameter);
		
		// Display a black ellipse for every post and color posts with specified word blue.
		if (content.indexOf(keyword) > -1) {
			fill(88,200,221); // Blue
		} else {
			fill(0,0,0); 
		}
		noStroke();
		ellipse(x_axis, height/2, diameter + word_count * 10, diameter + word_count * 10);
		
		// Displaying number of times a word is used in post.
		if (content.indexOf(keyword) > -1) {
			fill(255,255,255);
		} else {
			fill(255,255,255, 80);
		}
		textSize(19);
		textAlign(CENTER, CENTER);
		text(word_count, x_axis, height/2);
	}
}