window.virConsole = {
	evtCount : 0,
	updateCounterElem(){
		document.querySelector(".countInt").innerText = this.evtCount.toString();
	},
	getElem : function(){
		return document.querySelector(".console");
	},
	reset : function(){
		this.getElem().innerHTML = "";
		this.logMsg("Event Log:");
		this.evtCount = 0;
		this.updateCounterElem();
	},
	createRowElem : function(text){
		var row = document.createElement("div");
		row.classList.add("row");
		row.innerText = text;
		return row;
	},
	simplifyJsEventObj : function(evt){
		return {
			type : evt.type,
			srcElement : evt.srcElement.outerHTML,
			target : evt.target.outerHTML,
			bubbles : evt.bubbles
		}
	},
	autoScroll : function(){
		var console = this.getElem();
		console.scrollTo(0,console.scrollHeight);
	},
	logMsg: function(text){
		this.getElem().appendChild(this.createRowElem(text));
	},
	logEvent : function(evt){
		var evtText = JSON.stringify(this.simplifyJsEventObj(evt),null,4);
		var evtText = "Fired @" + (new Date()).getTime() + " || " +  "Event Type: " + evt.type.toString();
		this.evtCount++;
		this.updateCounterElem();
		this.getElem().appendChild(this.createRowElem(evtText));
		this.autoScroll();
	}
}

// https://gist.github.com/PaulKinlan/45de2fb55c1390d871b3a67f72ae730c
function monitorEvents(element,cb) {
	var log = typeof(cb) === "function" ? cb : function(e) { console.log(e);};
	var events = [];
	for(var i in element) {
		if(i.startsWith("on")) events.push(i.substr(2));
	}
	events.forEach(function(eventName) { 
		element.addEventListener(eventName, log); 
	}); 
}

window.distributeEvent = function(evt){
	console.log(evt);
	virConsole.logEvent(evt);
}
monitorEvents(document.querySelector(".left"),function(evt){
	distributeEvent(evt);
});
// Since video events don't bubble by default, capture separately
var mediaEventStrings = ["audioprocess", "canplay", "canplaythrough", "complete", "durationchange", "emptied", "ended", "loadeddata", "loadedmetadata", "pause", "play", "playing", "ratechange", "seeked", "seeking", "stalled", "suspend", "timeupdate", "volumechange", "waiting"];
document.querySelectorAll("video").forEach(function(elem){
	mediaEventStrings.forEach(function(evtString){
		elem.addEventListener(evtString,function(evt){
			distributeEvent(evt);
		});
	});
});
// Add page load events
window.addEventListener('load',distributeEvent);
// Lazy css alternative - set equal height columns
var left = document.querySelector(".left");
var right = document.querySelector(".right");
var maxHeight = getComputedStyle(left).height > getComputedStyle(right).height ? getComputedStyle(left).height : getComputedStyle(right).height;
left.style.minHeight = maxHeight;
right.style.minHeight = maxHeight;
virConsole.getElem().style.height = maxHeight;