function keys(of) {
	var keys = new Array();
	for (var key in of) {
		keys.push(key);
	}
	return keys;
}

function Controls(parentNode, text) {
	this.parentNode = parentNode;
	this.family = this.guessFamily();
	this.style = this.guessStyle();
	this.text = text;
	this.install();
}

Controls.prototype.guessFamily = function() {
	var used = Preview.used;
	for (var fam in FONT_LIST) {
		if (used[fam] == null)
			return fam;
	}
	return (keys(FONT_LIST))[0];
}

Controls.prototype.guessStyle = function() {
	var styles = FONT_LIST[this.family];
	var used = Preview.used[this.family];
	var scores = {};
	// Calculate the style scores.
	for (var i=0; i<styles.length; i++) {
		var s = styles[i];
		scores[s] = 0;
		// Choose already displayed style only if there is no choice.
		if ((used != null) && (used[s] != null) && (used[s] > 0))
			scores[s] -= 5;
		// Choose regular, medium and plain styles first.
		if ((s == 'Regular') || (s == 'Medium') || (s == 'Plain') || (s == 'Medium Regular'))
			scores[s] += 1;
	}
	// Pick the style with the best score.
	var bestMatch = styles[0];
	var bestScore = scores[styles[0]];
	for (var i=0; i<styles.length; i++) {
		if (scores[styles[i]] <= bestScore)
			continue;
		bestScore = scores[styles[i]];
		bestMatch = styles[i];
	}
	return bestMatch;
}

/*
	<parentNode>
		<div class="controls">
			<div class="preview">...</div>
			<select families/>
			<select styles/>
		</div>
	</parentNode>
*/
Controls.prototype.install = function() {
	this.wrapper = document.createElement("div");
	this.wrapper.className = "controls";
	this.preview = new Preview(this.wrapper, this.family, this.style, this.text);
	this.wrapper.appendChild(this.familySelector());
	this.wrapper.appendChild(this.styleSelector());
	this.parentNode.appendChild(this.wrapper);
}

Controls.prototype.setText = function(t) {
	this.preview.setText(t);
}

Controls.prototype.changeFamily = function(f) {
	var oldSelector = this.ss;
	this.family = f;
	this.style = this.guessStyle();
	this.preview.setFont(f, this.style);
	this.wrapper.replaceChild(this.styleSelector(), oldSelector);
}

Controls.prototype.familySelector = function() {
	var sel = document.createElement("select");
	var me = this;
    sel.className = "families";
	sel.onchange = function() {
		for (var i=0; i < this.childNodes.length; i++) {
			var child = this.childNodes[i];
			if ((child.nodeName != "OPTION") || (!child.selected))
				continue;
			me.changeFamily(child.getAttribute("value"));
		}
	}
	for (var fam in FONT_LIST) {
		var option = document.createElement("option");
		option.innerHTML = fam;
		option.setAttribute("value", fam);
		option.selected = (fam == this.family);
		sel.appendChild(option);
	}
	return sel;
}

Controls.prototype.styleSelector = function() {
	var values = FONT_LIST[this.family];
	var sel = document.createElement("select");
	var me = this;
	sel.disabled = (values.length == 1);
	sel.onchange = function() {
		for (var i=0; i < this.childNodes.length; i++) {
			var child = this.childNodes[i];
			if ((child.nodeName != "OPTION") || (!child.selected))
				continue;
			me.preview.setStyle(child.getAttribute("value"));
		}
	}
	for (var i=0; i < values.length; i++) {
		var option = document.createElement("option");
		option.innerHTML = values[i];
		option.setAttribute("value", values[i]);
		option.selected = (values[i] == this.style);
		sel.appendChild(option);
	}
	this.ss = sel;
	return sel;
}