<h2>Cat Connector</h2>

<p>
	Use the map below to help find cats who need a new home. Every cat deserves a loving home!
</p>

<div id="map"></div>

#map {
	width: 100%;
	height: 500px;
}

document.addEventListener('DOMContentLoaded', init, false);
async function init() {

	let cats = await getAvailableCats();
	
	let map = L.map('map').setView([30.216667,-92.033333], 12);

	L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
			maxZoom: 19,
			attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
	}).addTo(map);

	cats.forEach(c => {
		let desc = `
<h3>${c.cat.name}</h3>
<p>
${c.cat.name} is a ${c.cat.gender} ${c.cat.breed}.
</p>
<p>
Owner: ${c.owner.name}<br>
Email: ${c.owner.contactEmail}<br>
Tel: ${c.owner.contactPhone}<br>
</p>
		`;
		L.marker([c.location.latitude, c.location.longitude]).addTo(map).bindPopup(desc);
	});
}

async function getAvailableCats() {
	return [
	{
		"cat": {
			"name":"Fluffy",
			"age":5, 
			"gender":"male",
			"breed":"calico"
		},
		"owner": {
			"name":"Raymond Camden",
			"contactEmail":"raymondcamden@gmail.com",
			"contactPhone":"555-555-5555"
		},
		"location": {
			"latitude": 30.227394,
			"longitude": -92.029090
		}
	},
	{
		"cat": {
			"name":"Pig",
			"age":12, 
			"gender":"female",
			"breed":"calico"
		},
		"owner": {
			"name":"Lindy Camden",
			"contactEmail":"lindyjcamden@gmail.com",
			"contactPhone":"555-666-6666"
		},
		"location": {
			"latitude": 30.231695,
			"longitude": -92.007103
		}
	},
	{
		"cat": {
			"name":"Luna",
			"age":9, 
			"gender":"female",
			"breed":"smelly"
		},
		"owner": {
			"name":"Jacob Camden",
			"contactEmail":"jacobacamden@gmail.com",
			"contactPhone":"555-777-7777"
		},
		"location": {
			"latitude": 30.218049,
			"longitude": -92.000747
		}
	},
	{
		"cat": {
			"name":"Elise",
			"age":15, 
			"gender":"female",
			"breed":"ragdoll"
		},
		"owner": {
			"name":"Smith Camden",
			"contactEmail":"raymondcamden@gmail.com",
			"contactPhone":"555-888-8888"
		},
		"location": {
			"latitude": 30.219236,
			"longitude": -92.041630
		}
	},
	{
		"cat": {
			"name":"Zelda",
			"age":4, 
			"gender":"male",
			"breed":"longhair"
		},
		"owner": {
			"name":"Equama Camden",
			"contactEmail":"raymondcamden@gmail.com",
			"contactPhone":"555-888-9999"
		},
		"location": {
			"latitude": 30.256906,
			"longitude": -92.028403
		}
	}
		
	]
}