// JavaScript Document
var regHoursDisplay = document.getElementById("regHoursDisplay");
var overHoursDisplay = document.getElementById("overHoursDisplay");
var totalHoursDisplay = document.getElementById("totalHoursDisplay");
var regPayDisplay = document.getElementById("regPayDisplay");
var overPayDisplay = document.getElementById("overPayDisplay");
var totalPayDisplay = document.getElementById("totalPayDisplay");
var hours = document.getElementById("hours");
var holdHours;
var wage = document.getElementById("wage");
var holdWage;
var computeButton = document.getElementById("compute");
var holdHours;
var rHours;
var otHours;
var tHours;
var rPay;
var otPay;
var tPay;

function reset() {
	regHoursDisplay.textContent = "";
	overHoursDisplay.textContent = "";
	totalHoursDisplay.textContent = "";
	regPayDisplay.textContent = "";
	overPayDisplay.textContent = "";
	totalPayDisplay.textContent = "";
}

computeButton.addEventListener("click", function(){
	holdHours = Number(hours.value);
	holdWage = Number(wage.value);
	if (holdHours <= 40) {
		rHours = holdHours;
		otHours = 0;
		tHours = holdHours;
		rPay = (holdHours*holdWage);
		otPay = 0;
		tPay = (holdHours*holdWage);
	} else if (holdHours > 40) {
		rHours = 40;
		otHours = (holdHours-40);
		tHours = holdHours;
		rPay = (40*holdWage);
		otPay = ((holdHours-40) * holdWage);
		tPay = rPay + otPay;
	}
		displayOutput();
});

hours.addEventListener("change", reset);
wage.addEventListener("change", reset);

function displayOutput() {
	regHoursDisplay.textContent = "Regular Hours Worked: " + rHours;
	overHoursDisplay.textContent = "Overtime Hours Worked: " + otHours;
	totalHoursDisplay.textContent = "Total Hours Worked: " + tHours;
	regPayDisplay.textContent = "Regular Pay: $" + rPay;
	overPayDisplay.textContent = "Overtime Pay: $" + otPay;
	totalPayDisplay.textContent = "Total Pay: $" + tPay;
}