qBittorrent/src/webui/www/public/scripts/progressbar.js

var ProgressBar = new Class({
	initialize: function(value, parameters) {
		var vals = {
			'id': 'progressbar_' + (ProgressBars++),
			'value': $pick(value, 0),
			'width': 0,
			'height': 0,
			'darkbg': '#006',
			'darkfg': '#fff',
			'lightbg': '#fff',
			'lightfg': '#000'
		};
		if (parameters && $type(parameters) == 'object') $extend(vals, parameters);
		if (vals.height < 12) vals.height = 12;
		var obj = new Element('div', {
			'id': vals.id,
			'class': 'progressbar_wrapper',
			'styles': {
				'border': '1px solid #000',
				'width': vals.width,
				'height': vals.height,
				'position': 'relative'
			}
		});
		obj.vals = vals;
		obj.vals.value = $pick(value, 0); // Fix by Chris
		obj.vals.dark = new Element('div', {
			'id': vals.id + '_dark',
			'class': 'progressbar_dark',
			'styles': {
				'width': vals.width,
				'height': vals.height,
				'background': vals.darkbg,
				'color': vals.darkfg,
				'position': 'absolute',
				'text-align': 'center',
				'left': 0,
				'top': 0,
				'line-height': vals.height - 2
			}
		});
		obj.vals.light = new Element('div', {
			'id': vals.id + '_light',
			'class': 'progressbar_light',
			'styles': {
				'width': vals.width,
				'height': vals.height,
				'background': vals.lightbg,
				'color': vals.lightfg,
				'position': 'absolute',
				'text-align': 'center',
				'left': 0,
				'top': 0,
				'line-height': vals.height - 2
			}
		});
		obj.appendChild(obj.vals.dark);
		obj.appendChild(obj.vals.light);
		obj.getValue = ProgressBar_getValue;
		obj.setValue = ProgressBar_setValue;
		if (vals.width) obj.setValue(vals.value);
		else setTimeout('ProgressBar_checkForParent("' + obj.id + '")', 1);
		return obj;
	}
});

function ProgressBar_getValue() {
	return this.vals.value;
}

function ProgressBar_setValue(value) {
	value = parseFloat(value);
	if (isNaN(value)) value = 0;
	if (value > 100) value = 100;
	if (value < 0) value = 0;
	this.vals.value = value;
	this.vals.dark.empty();
	this.vals.light.empty();
	this.vals.dark.appendText(value + '%');
	this.vals.light.appendText(value + '%');
	var r = parseInt(this.vals.width * (value / 100));
	this.vals.dark.setStyle('clip', 'rect(0,' + r + 'px,' + this.vals.height + 'px,0)');
	this.vals.light.setStyle('clip', 'rect(0,' + this.vals.width + 'px,' + this.vals.height + 'px,' + r + 'px)');
}

function ProgressBar_checkForParent(id) {
	var obj = $(id);
	if (!obj) return;
	if (!obj.parentNode) return setTimeout('ProgressBar_checkForParent("' + id + '")', 1);
	obj.setStyle('width', '100%');
	var w = obj.offsetWidth;
	obj.vals.dark.setStyle('width', w);
	obj.vals.light.setStyle('width', w);
	obj.vals.width = w;
	obj.setValue(obj.vals.value);
}

var ProgressBars = 0;