function createParent(classname, _width, parent, values, maximum) {
	var element = document.createElement('span');
	element.className = classname;
	element.style.width = _width;
	parent.appendChild(element);
	createChild('left', ' ', element);
	createChild('value', values, element);
	if (maximum == true && classname == 'parent blue') {
		createChild('right max', ' ', element);
	}
	else {
		createChild('right', ' ', element);
	};
}

function createChild(classname, value, parent) {
	var element = document.createElement('span');
	element.className = classname;
	element.innerHTML = value;
	parent.appendChild(element);
}

function generator(parent, values, total) {
	var blue = Math.ceil(values[0]/(total/100));
	var white = Math.ceil(values[1]/(total/100));
	var maximum = false;
	if (blue >= white) {maximum = true;};
	createParent('parent blue', blue+'%', parent, values[0], maximum);
	createParent('parent white', white+'%', parent, values[1], maximum);
}

window.onload = function() {
	var em = document.getElementsByTagName('em');
	var total = 0;

	for (j=0; j<em.length; j++) {
		if (em[j].className == 'stat-info') {
			var val = em[j].innerHTML.split('/');
			total = (total < parseFloat(val[0]))?parseFloat(val[0]):total;
			total = (total < parseFloat(val[1]))?parseFloat(val[1]):total;
		};
	};

	for (i=0; i<em.length; i++) {
		if (em[i].className == 'stat-info') {
			var parent = em[i].parentNode;
			var values = em[i].innerHTML.split('/');
			generator(parent, values, total);
		};
	};
}