// 
// Use openingtimes to dynamically generate the end date for the timer based on the current day of the week.
// The format inside the setHours function is as follows: setHours(hour, min, sec, millisec).
// 
var openingtimes = {

0: {
label: 'Sunday',
start: new Date().setHours(8,30,0),
end: new Date().setHours(17,0,0)
}, 
1: {
label: 'Monday',
start: new Date().setHours(8,30,0),
end: new Date().setHours(20,0,0)
},
2: {
label: 'Tuesday',
start: new Date().setHours(8,30,0),
end: new Date().setHours(20,0,0)
},
3: {
label: 'Wednesday',
start: new Date().setHours(8,30,0),
end: new Date().setHours(20,0,0)
},
4: {
label: 'Thursday',
start: new Date().setHours(8,30,0),
end: new Date().setHours(20,0,0)
},
5: {
label: 'Friday',
start: new Date().setHours(8,30,0),
end: new Date().setHours(20,0,0)
},
6: {
label: 'Saturday',
start: new Date().setHours(8,30,0),
end: new Date().setHours(17,0,0)
}

};
datatricsFn.datatricsCountdown({
// CSS Selector which the timer will be placed in.
element: '#datatrics-countdown',
// Should the timer show a day? Set to false to disable.
include_days: true,
// Set an end date for the timer. Use a dynamically generated end date or a specific end date.
// Generated: new Date(openingtimes[new Date().getDay()].end)
// Specific: new Date('06/22/2030 18:00:00')
end_date: new Date(openingtimes[new Date().getDay()].end),
// Set a time in milliseconds how often the timer should update.
interval: 1000,
// Set labels that are used inside the timer.
days_label: 'days',
hours_label: 'hours',
minutes_label: 'minutes',
seconds_label: 'seconds',
expired_label: 'Order now and receive in two days'
});

var datatricsFn = { // Create a variable that contains the function
datatricsCountdown: function (payload){ // Create function with "payload" as a parameter
const el = document.querySelector(payload.element); // Creates const "el" that checks the DOM for a payload.element
function render() { // Creates a function called "render"
const now = new Date().getTime(); // create const called now that gets the current time
const distance = payload.end_date - now; // Create const distance that subtracts now from the end date to get remaining time.
let html = ''; // Creates let html without a value
if (distance > 0) { // Checks if there is still remainingtime in the day
let d = Math.floor(distance / (1000 * 60 * 60 * 24)); // Sets a let for days
let h = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); // Sets a let for hours
let m = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); // Sets a let for minutes
let s = Math.floor((distance % (1000 * 60)) / 1000); // Sets a let for seconds

d = d < 10 ? '0' + d : d; // If d is < 10, d = 0 + d. If not, d = d.
h = h < 10 ? '0' + h : h; // If d is < 10, d = 0 + d. If not, d = d.
m = m < 10 ? '0' + m : m; // If d is < 10, d = 0 + d. If not, d = d.
s = s < 10 ? '0' + s : s; // If d is < 10, d = 0 + d. If not, d = d.

if (payload.include_days) { // Checks if the payload contains the field "include_days"
html += `<div class="days" data-label="${payload.days_label}">${d}</div>`; // Sets html to also show days
}
html += `<div class="hours" data-label="${payload.hours_label}">${h}</div>`; // Sets html to also show hours
html += `<div class="minutes" data-label="${payload.minutes_label}">${m}</div>`; // Sets html to also show minutes
html += `<div class="seconds" data-label="${payload.seconds_label}">${s}</div>`; // Sets html to also show seconds
} else {
html = `<div class="expired">${payload.expired_label}</div>`; // If there is no remaining time, show expired label
clearInterval(interval);
}
el.innerHTML = `<div class="datatrics-countdown">${html}</div>`;// Shows outcome of html
}
render(); // render the outcome once
let interval = setInterval(function() { // render the outcome at the specified interval in the payload
render(); 
}, payload.interval);
} 
};

#datatrics-box-container.datatrics-box--timer .datatrics-countdown {
	display: flex;
	align-items: stretch;
	justify-content: center;
	height: 70px;
}
#datatrics-box-container.datatrics-box--timer .datatrics-countdown div {
	padding: 10px;
	font-size: 24px;
	color: #ccc;
	text-align: center;
	border-radius: dtBorderRadiuspx;
	color: dtPrimaryColor;
	border: 1px solid dtPrimaryColor;
	font-weight: bold;
	flex: 70px 0 0;
	margin: 0 2px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
#datatrics-box-container.datatrics-box--timer .datatrics-countdown div:after {
	content: attr(data-label);
	display: block;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 8px;
	margin-top: 5px;
}
#datatrics-box-container.datatrics-box--timer .datatrics-countdown .expired {
	flex: 100% 0 0;
}
#datatrics-box-container.datatrics-box--timer.datatrics-box--smaller .datatrics-countdown {
	height: 60px;
}
#datatrics-box-container.datatrics-box--timer.datatrics-box--smaller .datatrics-countdown div {
	font-size: 18px;
	flex: 60px 0 0;
}
#datatrics-box-container.datatrics-box--timer.datatrics-box--smaller .datatrics-countdown div:after {
	font-size: 6px;
}
#datatrics-box-container.datatrics-box--timer.datatrics-box--inverse .datatrics-countdown div {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.3);
}

#datatrics-box-container .datatrics-box-caption {
text-align: center;
margin-top: 10px;
}