// begin accessing JSON data here
var data = JSON.parse(localStorage.getItem("AZAR"));

// grabs the page with home id
var page = document.getElementById("home");

// assigns a random number to randomly determine which image and information to display in the home page.
// Then it grabs the image container of the card, and inserts the random image. It also garbs the content container
// and puts the corresponding title and description. This section activates on application startup.
var aleatorio = Math.floor(Math.random()*52);
document.getElementById("image").innerHTML = `<img src="img/${aleatorio}.jpg" width="100%" height="350px">`;
document.getElementById("Content").innerHTML = "<br><h4>" + data[aleatorio].titulo + "</h4>" + data[aleatorio].texto; 

// This section activates every time you switch back to the home tab. It first empties the content on the card
// and then it newly assigns a new random number to fetch a new random image and description to display on home.
page.addEventListener("show", function(event){
    document.getElementById("image").innerHTML='';
    document.getElementById("Content").innerHTML='';
    var aleatorio = Math.floor(Math.random()*32);
    document.getElementById("image").innerHTML = `<img src="img/${aleatorio}.jpg" width="100%" height="350px">`;
    document.getElementById("Content").innerHTML = "<br><h4>" + data[aleatorio].titulo + "</h4>" + data[aleatorio].texto;
    });