let video = document.getElementById("video");
let source = document.getElementById("source");


let video_list = document.getElementById("video-list").getElementsByTagName("img");
var i;

for (i = 0; i < video_list.length; i++) {
	video_list[i].addEventListener("click", function() {
		video.setAttribute("poster", this.getAttribute("src"));
		source.setAttribute("src", this.dataset.video);
		video.pause();
		video.currentTime = 0;
		video.load();

		for (i = 0; i < video_list.length; i++) {
			video_list[i].classList.remove("active");
		}
		this.classList.add("active");

		video.style["box-shadow"] = this.dataset.shadow;
	});
}

video.addEventListener("click", function() {

	if (this.muted) {
		this.parentNode.classList.remove("muted");
		this.pause();
		this.muted = false;
		this.currentTime = 0;
		this.play();
		return;
	}

	if (this.paused)
		this.play();
	else
		this.pause();
});