<div id="content">

	<header id="page-header">
	<h1>Ready, Set, Go</h1>
	</header>


<!-- could be a main content section -->
	<section id="timing">
		<header class="section-header">
		<h2>Staging Duration (seconds)</h2>
		</header>

		<article class="article1">
			<div id = "buttons" class="durationarray">
				<div class="but durationcell"><input id="but5" type="button" value="5"></div>
				<div class="but durationcell"><input id="but10" type="button" value="10"></div>
				<div class="but durationcell"><input id="but15" type="button" value="15"></div>
			</div>
		</article>
	</section>
	<section id="lights">

		<article class="article1">
		<div id="colorwindow"><h1 id="countdown"><span id="timer"></span></h1></div>
		</article>
	</section>
<!---->
	<footer id="footer">
		<input id="resetbut" type="button" value="Start Over" class="but resetbut">
	</footer>

</div>

html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}

body {
	font-family: arial, sans-serif;
	margin: 0;
	padding: 0;
	background-color: black;
}
#content {
	margin: 0;
	padding: 1em;
}
input, button, reset {
	font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
	color: white;
}
.durationarray {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100%;
  gap: 8px;
  justify-items: stretch;
  height: 5em;
}

.durationcell {
  justify-self: center;
  align-self: center;
  text-align: center;
  width: 100%;
	background-color: #666;
}
input[type="button"],
.but {
  display:block;
  border-radius: 5px;
  font-weight: bold;
  font-size: 2em;
  color: white;
  width: 100%;
	background-color: #666;
}

#resetbut {
  font-size: 3em;
}
#timer {
  display: block;
  margin:auto;
  padding-top:40px;
  text-align:center;
  color: red;
  font-size: 12em;
}

#colorwindow {
	width: 100%;
	height: 400px;
	margin: 1em 0;
	padding: 1em 2em 1em 1em;
}
.black {
	background-color: black;
}
.yellow {
	background-color: yellow;
}
.green {
	background-color: green;
}

const $id = id => document.getElementById(id);
const min = 6;
const max = 17;
let delayA = ""
let delayB = "";
let delayC = ""
let div = $id('colorwindow');
const setDelays = ev => {
	let randNr = Math.floor(Math.random() * (max - min) + min);

	let tgt = ev.target;
	delayA = ev.target.value;
	delayB = +randNr;
	delayC = 5;
	action();
}

const showCountDown = ticks => {
	let el = $id('timer');
	if(ticks < 1) {
		el.innerHTML = "";
	} else {
		el.innerHTML = ticks;
		let tickCounter = () => {
			if(ticksLeft < 1) {
				clearTimeout(timerTick);
				el.innerHTML = "";
			} else {
				el.innerHTML = ticksLeft - 1;
				ticksLeft--;
			}
		}
		let ticksLeft = ticks;
		let timerTick = setInterval(tickCounter, 1000);
	}
}

const action = () => {
	console.log(`Delays are: ${delayA}, ${delayB} and ${delayC}`);
	$id("buttons"),addEventListener('click', setDelays, false);
	$id('colorwindow').classList.add("black");
	showCountDown(delayA);
	setTimeout(() => {
		showCountDown(delayB);
		console.log(`Changing to yellow after ${delayA} Secs` );
		div.classList.remove("black");
		div.classList.add("yellow");
		setTimeout(() => {
			showCountDown(delayC);
			console.log(`Changing to green after ${delayB} Secs` );
			div.classList.remove("yellow");
			div.classList.add("green")
			setTimeout(() => {
				showCountDown(-1);
				console.log(`Changing to black after ${delayC} Secs` );
				div.classList.remove("green");
				div.classList.add("black")},
				delayC * 1000);


			},
			delayB * 1000);


		},
		delayA * 1000);

}

$id("buttons").addEventListener('click', setDelays, false);