function fontPanel(panelID,panelName,plID,styleID) {
	this.plID = plID;
	this.name = panelName;
	this.panelID = panelID;
	this.status = "waiting";
	this.styleID = styleID;
	this.startingText = document.getElementById("inputText").value;
	this.currentText = this.startingText;
	this.state = "interactive";
	this.charImages = new Array();
	this.charImageWidth = 0;
}


fontPanel.prototype.draw = function() {
// create main div
	this.myDiv = document.createElement("div");
	this.myDiv.setAttribute("class","result");
	this.myDiv.setAttribute("className","result");

// create console div for select boxes
	this.myConsole = document.createElement("div");
	this.myConsole.setAttribute("class","consol");
	this.myConsole.setAttribute("className","consol");

	this.myDropDowns = document.createElement("div");
	this.myDropDowns.setAttribute("class","dropdowns");
	this.myDropDowns.setAttribute("className","dropdowns");

	this.selectForm = document.createElement("form");
	this.selectForm.setAttribute("action","#");
	this.selectForm.setAttribute("method","POST");


	this.fontSelect = document.createElement("select");
	this.fontSelect.setAttribute("name","fontSelect03");

	for (var i=0;i<prodNameArray.length;i++) {
		this.fontSelect.appendChild(this.createOption(prodIDArray[i],prodNameArray[i]));
		if (prodIDArray[i] == this.plID) {
			this.fontSelect.selectedIndex = i;	
		}
	}
	this.fontSelect.myParent = this;
	this.fontSelect.onchange = this.featureAddFeatures;


	this.featureSelect = document.createElement("select");
	this.featureSelect.setAttribute("name","featureSelect03");
	this.featureSelect.myParent = this;
	this.featureSelect.onchange = this.checkChange;


	this.selectForm.appendChild(this.fontSelect);
	this.selectForm.appendChild(document.createElement("br"));
	this.selectForm.appendChild(this.featureSelect);
	this.myDropDowns.appendChild(this.selectForm);

	this.myConsole.appendChild(this.myDropDowns);
// draw buttons
	this.buttonDiv = document.createElement("div");
	this.buttonDiv.setAttribute("class","buttons");
	this.buttonDiv.setAttribute("className","buttons");
	
	
	this.intImage = this.createImage("../images/testdriver/td_button_interactive_on.gif","int_"+this.panelID);
	this.intImage.setAttribute("class","intImage");
	this.intImage.setAttribute("className","intImage");
	this.intImage.setAttribute("border","0");
	this.intImage.myParent = this;
	this.intImage.onmouseover = function() {
		if (this.myParent.state == "interactive") {
		}
		else {
			this.src = "../images/testdriver/td_button_interactive_hover.gif";
		}
	}
	this.intImage.onmouseout = function() {
		if (this.myParent.state == "interactive") {
			this.src = "../images/testdriver/td_button_interactive_on.gif";
		}
		else {
			this.src = "../images/testdriver/td_button_interactive_off.gif";
		}
	}
	this.intImage.onmousedown = function() {
	}

	this.buttonDiv.appendChild(this.intImage);
	this.charImage = this.createImage("../images/testdriver/td_button_characters_off.gif","char_"+this.panelID);
	this.intImage.setAttribute("border","0");
	this.charImage.myParent = this;
	this.charImage.onmouseover = function() {
		if (this.myParent.state != "interactive") {
		}
		else {
			this.src = "../images/testdriver/td_button_characters_hover.gif";
		}
	}
	this.charImage.onmouseout = function() {
		if (this.myParent.state != "interactive") {
			this.src = "../images/testdriver/td_button_characters_on.gif";
		}
		else {
			this.src = "../images/testdriver/td_button_characters_off.gif";
		}
	}
	this.charImage.onmousedown = function() {
		this.myParent.showCharacters();
	}
	this.intImage.onmousedown = function() {
		this.myParent.showInteractive();
	}
	this.buttonDiv.appendChild(this.charImage);



	this.myConsole.appendChild(this.buttonDiv)
	this.prodImage = this.createImage("../images/testdriver/td_button_go-to-product.gif","prod_"+this.paneID);
	this.prodImage.setAttribute("border","0");
	this.prodImage.myParent = this;
	this.prodImage.onmouseover = function() {
		this.src = "../images/testdriver/td_button_go-to-product_hover.gif";
	}
	this.prodImage.onmouseout = function() {
		this.src = "../images/testdriver/td_button_go-to-product.gif";
	}
	this.prodImage.onmousedown = function() {
		window.open("/fonts/font_overview.php?productLineID="+this.myParent.getCurrentPlID());
	}
	this.myConsole.appendChild(this.prodImage);
	
	this.myDiv.appendChild(this.myConsole);


	this.flashDiv = document.createElement("div");
	this.flashDiv.setAttribute("class","flash");
	this.flashDiv.setAttribute("className","flash");
	this.flashDiv.style.position = "relative";
	this.flashDiv.style.width = "653px";
	this.flashDiv.style.height = "134px";
	this.flashDiv.style.overflow = "hidden";
	this.imageDiv = document.createElement("div");
	this.imageDiv.style.position = "absolute";

	this.rasterImage = this.createImage("rasterize.php?text="+this.startingText+"&fontName=Whitney&fontFeature=Bold","rast_"+this.paneID);
	this.rasterImage.myParent = this;
	this.flashDiv.appendChild(this.imageDiv);
	this.imageDiv.appendChild(this.rasterImage);
	this.myDiv.appendChild(this.flashDiv);
	this.addFeatures(0);
	return this.myDiv;
}
fontPanel.prototype.createOption = function(value,text) {
	var option = document.createElement("option");
	option.setAttribute("value",value);
	var optionText = document.createTextNode(text);
	option.appendChild(optionText);
	return option;
}
fontPanel.prototype.createImage = function(src,id) {
	var myImage = document.createElement("img");
	myImage.setAttribute("id",id);
	myImage.setAttribute("src",src);
	return myImage;
}

fontPanel.prototype.imageChange = function() {
	var fileName = this.getCurrentFileName();
	if (this.state == "interactive") {
		this.currentText =  document.getElementById("inputText").value;
		this.rasterImage.onload = this.onload;
		this.rasterImage.setAttribute("src","rasterize.php?text="+escape(this.currentText)+"&fileName="+fileName+"&rndnum="+Math.random());
	}
	else {
		this.loadCharSet();
	}
}

fontPanel.prototype.onload = function() {
	this.myParent.status = "waiting";
	if (document.getElementById("inputText")) {
		if (this.myParent.currentText != document.getElementById("inputText").value) {
			this.myParent.checkChange2(true);
		}
	}
}
fontPanel.prototype.checkChange = function(evt) {
	if (this.myParent.state == "characters") {
		this.myParent.loadCharSet();
	}
	else if (this.myParent.status == "waiting") {
		this.myParent.status = "loading"
		this.myParent.imageChange();
	}
}
fontPanel.prototype.checkChange2 = function(reloadChars) {
	if (this.state == "characters") {
		if (reloadChars) {
			this.loadCharSet();
		}
	}
	else if (this.status == "waiting") {
		this.status = "loading";
		this.imageChange();
	}
	else {
	}
	return this.status;
}
fontPanel.prototype.featureAddFeatures = function() {
	this.myParent.addFeatures(0);
}
fontPanel.prototype.addFeatures = function(selectFeature) {
	var plID = this.fontSelect.options[this.fontSelect.selectedIndex].value;
	this.plID = plID;
	var myFileArray = fileArray[plID];
	var myFeatureArray = featureArray[plID];
	while (this.featureSelect.length > 0) {
		this.featureSelect.removeChild(this.featureSelect[0]);
	}
	var selInd = 0;
	for (var i=0;i<myFileArray.length;i++) {
		var fileName = myFileArray[i];
		var fileParts = fileName.split(":");
		var sID = fileParts[0];
		var featureName = myFeatureArray[i];
		this.featureSelect.appendChild(this.createOption(fileName,featureName));
		if (sID == this.styleID) {
			selInd = i;	
		}
	}
	this.featureSelect.selectedIndex = selInd;
	this.checkChange2(true);
}
fontPanel.prototype.showCharacters = function() {
	if (this.state == "characters") return;
	this.state =  "characters";
	this.charImage.setAttribute("src","../images/testdriver/td_button_characters_on.gif");
	this.intImage.onmouseout();
	this.imageDiv.removeChild(this.rasterImage);
	this.flashDiv.removeChild(this.imageDiv);
	var fileName = this.getCurrentFileName();

	this.imageDiv = document.createElement("div");
	this.imageDiv.style.position = "absolute";
	this.imageDiv.style.left = "0px";
	this.flashDiv.appendChild(this.imageDiv);
	this.arrowDiv = document.createElement("div");
	this.arrowDiv.style.position = "absolute";
	this.arrowDiv.style.left = "600px";
	this.arrowDiv.style.top = "120px";
	this.forwardArrow = document.createElement("img");
	this.forwardArrow.setAttribute("src","images/forwardArrow.gif");
	this.forwardArrow.style.marginLeft = "10px";
	this.forwardArrow.myParent = this;
	this.forwardArrow.onmousedown = function() {
		this.myParent.startScroll(-30);	
	}
	this.forwardArrow.onmouseup = function() {
		this.myParent.stopScroll(-30);	
	}
	this.backArrow = document.createElement("img");
	this.backArrow.setAttribute("src","images/backArrow.gif");
	this.backArrow.myParent = this;
	this.backArrow.onmousedown = function() {
		this.myParent.startScroll(30);	
	}
	this.backArrow.onmouseup = function() {
		this.myParent.stopScroll(30);	
	}

	this.arrowDiv.appendChild(this.backArrow);
	this.arrowDiv.appendChild(this.forwardArrow);
	this.flashDiv.appendChild(this.arrowDiv);
	this.loadCharSet();
}
fontPanel.prototype.showInteractive = function() {
	if (this.state == "interactive") return;
	this.state =  "interactive";
	this.charImage.onmouseout();
	this.flashDiv.removeChild(this.imageDiv);
	this.imageDiv = document.createElement("div");
	this.imageDiv.style.position = "absolute";
	this.imageDiv.style.left = "0px";
	this.imageDiv.style.top = "0px";
	this.flashDiv.appendChild(this.imageDiv);
	this.rasterImage = document.createElement("img");
	this.rasterImage.myParent = this;
	this.imageDiv.appendChild(this.rasterImage);
	this.imageChange();
}
	
fontPanel.prototype.moveCharacters = function(amount) {
	
		if (this.charImages.length < 1) return;
		var firstLeft = this.charImages[0].style.left.substr(0,this.charImages[0].style.left.length-2);
		var newFirstLeft = 1.0 * firstLeft + 1.0 * amount;
		if (newFirstLeft > 0) {
			amount = -1 * firstLeft;
		}

		var lastLeft = this.charImages[this.charImages.length-1].style.left.substr(0,this.charImages[this.charImages.length-1].style.left.length-2);
		var newLastLeft = 1.0 * lastLeft + 1.0 * amount;
		var scrollLimit = this.charImages[this.charImages.length-1].firstChild.width -  653;
		if (-1 * newLastLeft > scrollLimit) {
			// amount = 0;
			amount = -1 * scrollLimit - lastLeft;
		}

		for (var i=0;i<this.charImages.length;i++) {
			var currentLeft = this.charImages[i].style.left.substr(0,this.charImages[i].style.left.length-2);
			var newLeft = 1.0 * currentLeft + 1.0 * amount;
			this.charImages[i].style.left = newLeft+"px";
		}
}
fontPanel.prototype.loadCharSet = function() {
	var sID = this.getCurrentStyleID();
	var siQuery = new dbQuery();
	siURL = "getCS.php?styleID="+sID;
 	siQuery.requestData(siURL,this,"loadCS");	

}

fontPanel.prototype.loadCS = function(siQuery) {
// clean stuff up
	var childCount = this.imageDiv.childNodes.length;
	for (var i=0;i<childCount;i++) {
		this.imageDiv.removeChild(this.imageDiv.childNodes[0]);
	}

	this.charImages = new Array();
	var sID = this.getCurrentStyleID();
	var siRecords = siQuery.getRecords();
	for (var i=0;i<siRecords.length;i++) {
		var siRecords = siQuery.getRecords();
		var imageLocation = siRecords[i].getPropertyValue("location");
		newCSDiv = document.createElement("div");
		newCSDiv.style.position = "absolute";
		newCSDiv.style.left = "0px";
		newCSDiv.style.top = "0px";
		var newCSImage = document.createElement("img");
		newCSImage.myParent = this;
		newCSDiv.appendChild(newCSImage);
		this.imageDiv.appendChild(newCSDiv);
		this.charImages.push(newCSDiv);	
		newCSImage.onload = function() {
			this.myParent.positionImages();
		}
		newCSImage.setAttribute("src",imageLocation);
	}
}
fontPanel.prototype.positionImages = function() {
	var currentX = 0;
	for (var i=0;i<this.charImages.length;i++) {
		this.charImages[i].style.left = currentX+"px";
		currentX = 1.0 * currentX + this.charImages[i].firstChild.width;
	}
	this.charImageWidth = currentX;
}
fontPanel.prototype.getCurrentFileName = function() {
	var fileNameParts = this.featureSelect.options[this.featureSelect.selectedIndex].value.split(":");
	this.styleID = fileNameParts[0];
	debug(this.styleID);
	return fileNameParts[1];
}
fontPanel.prototype.getCurrentStyleID = function() {
	var fileNameParts = this.featureSelect.options[this.featureSelect.selectedIndex].value.split(":");
	return fileNameParts[0];
}
fontPanel.prototype.getCurrentPlID = function() {
	var plID = this.fontSelect.options[this.fontSelect.selectedIndex].value;
	return plID;
}
fontPanel.prototype.startScroll = function(speed) {
	scrollCS(this,speed)
}
fontPanel.prototype.stopScroll = function(speed) {
	stopScrollCS(speed);
}