var lettering = null;
	var letteringAlign = null;
	var rowids = null;
	var product = new Object;

	var formatDesignForm = 'formatDesign'; // add chunk to table form
	var orderPreviewForm = 'orderPreview'; // form wrapped around preview table
	var orderPreviewTable = 'PreviewDesign'; // actual table id
	var fontPreviewImg = 'fontPreview'; // id of image for font preview
	var priceCurrentNode = 'priceCurrent'; // running total text node

	function previewFont(myform)
	{
		// default to "style unavailable"
		// var href="http://www.tshirtmagic.com/lettering/style_unavailable.gif";
		// get the style/forecolor/backcolor to match on
		var styleID = parseInt(document.forms[myform].FontStyle[document.forms[myform].FontStyle.selectedIndex].value);
		var fillColorID = parseInt(document.forms[myform].FontColor[document.forms[myform].FontColor.selectedIndex].value)
		var shadowColorID = parseInt(document.forms[myform].FontColor2[document.forms[myform].FontColor2.selectedIndex].value)
		// translate these into their codes
		var styleCode = getStyleCode(styleID);
		var fillColorCode = getColorCode(fillColorID);
		if(shadowColorID != null && shadowColorID > 0 )
		{
			var shadowColorCode = getColorCode(shadowColorID);
		}
		var sizeID = parseInt(document.forms[myform].FontSize[document.forms[myform].FontSize.selectedIndex].value);
		var sizeCode ='';
		if(sizeID==1)
		{
			sizeCode = 's';
		}
		else if(sizeID==3)
		{
			sizeCode = 'l';
		}
		else
		{
			sizeCode = 'm';
		}
			
		// build the image URL
		var href = 'http://www.tshirtmagic.com/lettering/' + styleCode + '_' + sizeCode + '-' + fillColorCode;
		if(shadowColorID != null && shadowColorID > 0)
		{
			href = href + '-' + shadowColorCode;
		}
		href = href + '.gif';
		// now set the image appropriately.
		if (document.getElementById == null)
		{
			for (var i=0;i<document.images.length;i++)
			{
				if (document.images[i].name == fontPreviewImg)
				{
					document.images[i].src = href;
					return;
				}
			}
		}
		else
		{
			document.getElementById(fontPreviewImg).src = href;
		}
		// debug
		//alert('The image URL is ' + href);
	}

	function genPreviewFontUrl(chunk)
	{
		// default to "style unavailable"
		// var href="http://www.tshirtmagic.com/lettering/style_unavailable.gif";
		// get the style/forecolor/backcolor to match on
		var styleCode = getStyleCode(parseInt(chunk['FontStyle']));
		var fillColorCode = getColorCode(parseInt(chunk['FontColor']));
		var sizeCode ='';
		if(parseInt(chunk['FontSize'])==1)
		{
			sizeCode = 's';
		}
		else if(parseInt(chunk['FontSize'])==3)
		{
			sizeCode = 'l';
		}
		else
		{
			sizeCode = 'm';
		}

		// build the image URL
		var href = 'http://www.tshirtmagic.com/lettering/' + styleCode + '_' + sizeCode + '-' + fillColorCode;

		// build the image URL
		// var href = 'http://www.tshirtmagic.com/lettering/' + styleCode + '-' + fillColorCode;
		if(parseInt(chunk['FontColor2'])>0)
		{
			var shadowColorCode = getColorCode(parseInt(chunk['FontColor2']));
			href = href + '-' + shadowColorCode;
		}
		href = href + '.gif';
		return href;
	}

	function update_price2()
	{
		// var total = new Number(product.BasePrice + product.SizePrice);
		var total = new Number(product.BasePrice2);
		var total_per_type = Array(1);
		total.toPrecision(2);
		var i = '';
		var firstword_type = '';
		var y = 0;

		if(lettering.length > 0)
		{
			for(line=0; line < lettering.length; line++)
			{
				for(pos=0; pos < lettering[line].length; pos++)
				{
					i = 'style_' + parseInt(lettering[line][pos]['FontStyle']);
					if(total_per_type[i] == null)
					{
						total_per_type[i]=Array(2);
						total_per_type[i]['words']=0;
						total_per_type[i]['words2']=0;
					}
					if(pos == 0)
					{
						firstword_type=parseInt(lettering[line][pos]['FontStyle']);
					}
					total_per_type[i]['words']++;
					total = total + letterSizePricing[ (lettering[line][pos]['FontSize']) ];

					if(parseInt(lettering[line][pos]['FontColor2'])>0)
					{
						total_per_type[i]['words2']++;
						total = total + letterSizePricing[ (lettering[line][pos]['FontSize']) ];
					}

					total_per_type[i]['style']=parseInt(lettering[line][pos]['FontStyle']);

					if(letterExtraOptsPricing[(lettering[line][pos]['Options'])] != null)
					{
						if(letterExtraOptsPricing[(lettering[line][pos]['Options'])] > 0)
						{
							total = total + letterExtraOptsPricing[ (lettering[line][pos]['Options']) ];
						}
					}

					// check if we need to double the word count for CAD pricing

					//if(parseInt(lettering[line][pos]['FontColor2'])>0 && lettering[line][pos]['FontColor2']))
					//{

					//}
					//lettering[line][pos]['Chunk'] = document.forms[myform].Chunk.value;
					//lettering[line][pos]['FontStyle'] = document.forms[myform].FontStyle.value;
					//lettering[line][pos]['FontSize'] = document.forms[myform].FontSize.value;
				}
			}
		}
		for(x in total_per_type)
		{
			// alert(total_per_type[x]['style'] + ' ' + total_per_type[x]['words']);
			i = total_per_type[x]['style'];
			// alert('i=' + i + ' fwt=' + firstword_type );
			if(i == firstword_type && Number(product.UseSecondWordPrice2)<1)
			{
				total = total + letterStylePricing[i]['FirstWordPrice2'];
				if(total_per_type[x]['words'] > 1)
				{
					total = total + (letterStylePricing[i]['SecondWordPrice2'] * (total_per_type[x]['words'] - 1));
				}
			}
			else
			{
				total = total + (letterStylePricing[i]['SecondWordPrice2'] * total_per_type[x]['words']);
			}
			if(total_per_type[x]['words2'] > 0)
			{
				total = total + (letterStylePricing[i]['SecondColourPrice'] * (total_per_type[x]['words2']));
			}
		}
		if(document.getElementById(priceCurrentNode).hasChildNodes())
		{
			document.getElementById(priceCurrentNode).replaceChild(document.createTextNode('$' + Math.round(total * 100)/100),document.getElementById(priceCurrentNode).firstChild);
		}
		else
		{
			document.getElementById(priceCurrentNode).appendChild(document.createTextNode('$' + total.toString()));
		}

		// document.getElementById('price_current').appendChild(document.createTextNode('$' + price));
	}

	function old_update_price2()
	{
		var total = new Number(product.BasePrice2 + product.SizePrice);
		var total_per_type = Array(1);
		total.toPrecision(2);
		var i = '';

		if(lettering.length > 0)
		{
			for(line=0; line < lettering.length; line++)
			{
				for(pos=0; pos < lettering[line].length; pos++)
				{
					i = 'style_' + parseInt(lettering[line][pos]['FontStyle']);
					if(total_per_type[i] == null)
					{
						total_per_type[i]=Array(2);
						total_per_type[i]['words']=0;
						total_per_type[i]['words2']=0;
					}
					total_per_type[i]['words']++;
					total = total + letterSizePricing[ (lettering[line][pos]['FontSize']) ];

					if(parseInt(lettering[line][pos]['FontColor2'])>0)
					{
						total_per_type[i]['words2']++;
						total = total + letterSizePricing[ (lettering[line][pos]['FontSize']) ];
					}

					total_per_type[i]['style']=parseInt(lettering[line][pos]['FontStyle']);

					if(letterExtraOptsPricing[(lettering[line][pos]['Options'])] != null)
					{
						if(letterExtraOptsPricing[(lettering[line][pos]['Options'])] > 0)
						{
							total = total + letterExtraOptsPricing[ (lettering[line][pos]['Options']) ];
						}
					}

					// check if we need to double the word count for CAD pricing

					//if(parseInt(lettering[line][pos]['FontColor2'])>0 && lettering[line][pos]['FontColor2']))
					//{

					//}
					//lettering[line][pos]['Chunk'] = document.forms[myform].Chunk.value;
					//lettering[line][pos]['FontStyle'] = document.forms[myform].FontStyle.value;
					//lettering[line][pos]['FontSize'] = document.forms[myform].FontSize.value;
				}
			}
		}
		for(x in total_per_type)
		{
			// alert(total_per_type[x]['style'] + ' ' + total_per_type[x]['words']);
			i = total_per_type[x]['style'];
			total = total + letterStylePricing[i]['FirstWordPrice2'];
			if(total_per_type[x]['words'] > 1)
			{
				total = total + (letterStylePricing[i]['SecondWordPrice2'] * (total_per_type[x]['words'] - 1));
			}
			if(total_per_type[x]['words2'] > 0)
			{
				total = total + (letterStylePricing[i]['SecondColourPrice2'] * (total_per_type[x]['words2']));
			}
		}
		if(document.getElementById(priceCurrentNode).hasChildNodes())
		{
			document.getElementById(priceCurrentNode).replaceChild(document.createTextNode('$' + Math.round(total * 100)/100),document.getElementById(priceCurrentNode).firstChild);
		}
		else
		{
			document.getElementById(priceCurrentNode).appendChild(document.createTextNode('$' + total.toString()));
		}

		// document.getElementById('price_current').appendChild(document.createTextNode('$' + price));
	}

	function validateChunk(myform)
	{
		var Chunk = document.forms[myform].Chunk;
		if (Chunk == null || Chunk.value =='')
		{
			alert('You must enter a word or phrase / To insert blank space between rows type three dashes "---"');
			Chunk.focus();
			return false;
		}
		return true;
	}

	function updateFormatForm()
	{
		var myform = formatDesignForm;

		if(lettering != null)
		{
			if(lettering.length > 0)
			{
				// alert('form length: ' + document.forms[myform].Position.length + ', lettering length: ' + lettering.length);
				// make sure that we have enough sizes
				if(document.forms[myform].Position.length <= lettering.length)
				{
					document.forms[myform].Position.length++;
					document.forms[myform].Position[lettering.length].value = lettering.length;
					document.forms[myform].Position[lettering.length].text = 'Line ' + (lettering.length + 1);
				}
				else if(document.forms[myform].Position.length > lettering.length + 1)
				{
					while(document.forms[myform].Position.length > lettering.length + 1)
					{
						document.forms[myform].Position.length--;
					}
				}
				else
				{
					// alert('Pos: ' + document.forms[myform].Position.length + ' Lettering: ' + lettering.length);
				}
			}
			else
			{
				while(document.forms[myform].Position.length > 1)
				{
					document.forms[myform].Position.length--;
				}
			}
		}
	}

	function populateProductColors(sizeID)
	{
		// get an object pointer to the list
		var ProductColorObj = document.forms['details'].ProductColorID;
		// empty the list
		ProductColorObj.length = 1;
		// add items
		for (i=0; i<1000 && productColorsBySize[sizeID] != null; i++) {
			if (productColorsBySize[sizeID][i] != null && productColorsBySize[sizeID][i] != '') {
				ProductColorObj.length++;
				ProductColorObj.options[ProductColorObj.length-1].value = i;
				ProductColorObj.options[ProductColorObj.length-1].text = productColorsBySize[sizeID][i];
			}
		}
	}

	function populateProductColors(sizeID)
	{
		// get an object pointer to the list
		var ProductColorObj = document.forms['details'].ProductColorID;
		// empty the list
		ProductColorObj.length = 1;
		// deal with sort col
		if(productColorsSortCol != null)
		{

			var scolor = 0;
			for (i=0; i < productColorsSortCol.length; i++)
			{
				scolor = productColorsSortCol[i];
				if (productColorsBySize[sizeID][scolor] != null && productColorsBySize[sizeID][scolor] != '')
				{
					ProductColorObj.length++;
					ProductColorObj.options[ProductColorObj.length-1].value = scolor;
					ProductColorObj.options[ProductColorObj.length-1].text = productColorsBySize[sizeID][scolor];

				}
			}

		}
		else
		{
			// add items
			for (i=0; i<1000 && productColorsBySize[sizeID] != null; i++)
			{
				if (productColorsBySize[sizeID][i] != null && productColorsBySize[sizeID][i] != '')
				{
					ProductColorObj.length++;
					ProductColorObj.options[ProductColorObj.length-1].value = i;
					ProductColorObj.options[ProductColorObj.length-1].text = productColorsBySize[sizeID][i];
				}
			}
		}
	}

	function updateLetteringAlign(line,value)
	{
		if(letteringAlign == null)
		{
			letteringAlign =  new Array(1);
		}
		letteringAlign[line] = value;
	}

	function addChunkToTable()
	{
		var myform = formatDesignForm;
		var x = 0;

		if(!validateChunk(myform))
		{
			return false;
		}

		var line = document.forms[myform].Position.value;
		// alert ('editing line ' + line);
		var pos = 0;
		var makeline = 0;
		if (lettering == null)
		{
			lettering = new Array(1);

			rowids = new Array(1);
			line = 0;
		}
		if(lettering[line] == null)
		{
			if(line > lettering.length)
			{
				line = lettering.length;
			}
			lettering[line] = new Array(1);
			makeline = 1;
			lettering[line][pos] = new Array(6);
		}
		else
		{
			lettering[line][(lettering[line].length)] = new Array(6);
			pos = lettering[line].length - 1;
		}

		if(letteringAlign == null)
		{
			letteringAlign =  new Array(1);
		}
		else if(letteringAlign[line] == null)
		{
			letteringAlign[line] = 'center';
		}
		// see if we have one word or a bunch of them
		var regexp = /[\b ]+/;
		var wordlist = lettering[line][pos]['Chunk'] = document.forms[myform].Chunk.value.split(regexp);

		// now check for dummy entries
		for(x = 0; x < wordlist.length; x++)
		{
			if(wordlist[x].match(/[^[\b ]+/) == null)
			{
				wordlist.splice(x,1);
			}
		}
		// now add words to lettering array

		for(x = 0; x < wordlist.length; x++)
		{
			if(lettering[line].length - 1 < pos + x)
			{
				 lettering[line][pos + x] = new Array(6);
			}
			// now record details about chunk in question
			lettering[line][pos + x]['Chunk'] = wordlist[x];
			lettering[line][pos + x]['FontStyle'] = document.forms[myform].FontStyle.value;
			lettering[line][pos + x]['FontSize'] = document.forms[myform].FontSize.value;
			lettering[line][pos + x]['FontColor'] = document.forms[myform].FontColor.value;
			lettering[line][pos + x]['FontColor2'] = document.forms[myform].FontColor2.value;
			lettering[line][pos + x]['Options'] = document.forms[myform].Options.value;

			// alert('lettering length at start: ' + lettering.length);

			// alert(wordlist[x]);

			if( makeline )
			{
				// expand table for new line
				rowids[line]=genUniqID();

				addRowToTable(orderPreviewTable);
				// alert('lettering length at end (add): ' + lettering.length);
				makeline = 0;
			}
			else
			{
				// adjust text on table
				updateTable(orderPreviewTable,line);
				// alert('lettering length at end (update): ' + lettering.length);
			}
			// redraw order total
			// updateorder();
		}
		updateFormatForm(myform);
		update_price2();
		document.forms[myform].Chunk.value="";
		document.forms[myform].Options.selectedIndex=0;
		if(document.forms[myform].FontSize.length>1)
		{
			document.forms[myform].FontSize.selectedIndex=1;
		}
		document.forms[myform].FontStyle.selectedIndex=0;
		populateFontColors('FontStyle','FontColor','FontColor2'); 
		previewFont('formatDesign');
	}

	function updateTable(myname,line)
	{
		// delete existing contents
		// redraw table
		// table = myname
		var label = rowids[line];

		var cells = document.getElementById(label).cells;

		if(cells[cells.length - 1].hasChildNodes())
		{
			lastRow = cells.length - 1;
			cells[lastRow].replaceChild(createPreviewTable(line),cells[lastRow].childNodes[0]);
		}
		else
		{
			alert('no child nodes');
		}
	}

	function iesucksOnClickUpdate(myid)
	{
		if(!document.all)
		{
			removeRowFromTable(orderPreviewTable,this.name);
			// alert('THIS->ID=' + this.name);
		}
		else
		{
			removeRowFromTable(orderPreviewTable,myid);
			// alert('NOT NULL THIS->ID=' + this.id);
		}
		updateFormatForm(formatDesignForm);
		update_price2();
	}

	// update alignment for given line in form
	function iesucksOnChangeUpdateAlign(myid)
	{
		// first update the letterinAlign array
		// then call the global update function
		// alert(this.id + ' ' + this.name);


		if(!document.all)
		{
			var line = parseInt(this.name.substring(10));
			var myElement=document.getElementById(this.name);
		}
		else
		{
			// alert(myid);
			var a = myid;
			var line = parseInt(a.substring(10));
			// alert(line)
			var myElement=document.getElementById(myid);

		}

		// var line = parseInt(a.substring(10));

		if(letteringAlign == null)
		{
			letteringAlign =  new Array(1);
		}

		// alert(myElement[myElement.selectedIndex].value + ' ' + myElement.selectedIndex);
		letteringAlign[line]=myElement[myElement.selectedIndex].value;

		updateTable(orderPreviewTable,line);
	}

	function addRowToTable(myname)
	{
		// table = myname
		// form to update = myform

		// ids start at 0 and are referenced to the lettering array

		var tbl = document.getElementById(myname);
		var line = lettering.length - 1;

		var offset = tbl.rows.length - lettering.length; // how many leading rows

		var lastRow = tbl.rows.length;

		// if there's no header row in the table, then iteration = lastRow + 1
		var iteration = lastRow;
		var row = tbl.insertRow(lastRow);
		row.setAttribute('id', rowids[line]);
		// alert('setting: ' + row.getAttribute('id'));

		// add line title
		var cellRow = row.insertCell(0);
		var textNode = document.createTextNode(iteration - offset );
		cellRow.appendChild(textNode);

		// add edit option
		var cellEdit = row.insertCell(-1);

		var del = document.createElement('input');
		del.setAttribute('type', 'button');
		del.setAttribute('value', 'Remove');
		del.setAttribute('name', rowids[line]);
		// alert('input name setting: ' + del.getAttribute('name'));

		if(document.all)
		{
			// IE
			del.onclick=function() { iesucksOnClickUpdate(row.getAttribute('id'))  };
		}
		else
		{
			// Mozilla / Firefox
			// del.addEventListener('click', function() { iesucksOnClickUpdate(orderPreviewTable,('delRow' + line),formatDesignForm) }, true);
			del.addEventListener('click', iesucksOnClickUpdate , true);
		}

		cellEdit.appendChild(del);
		// alert(del.getAttribute('onclick'));

		// deal with Alignment select
		if(letteringAlign == null)
		{
			letteringAlign =  new Array(1);
		}

		// alert(myElement[myElement.selectedIndex].value + ' ' + myElement.selectedIndex);

		letteringAlign[line]='center';

		var cellAlignment = row.insertCell(-1);
		var Alignment = document.createElement('select');
		Alignment.setAttribute('name', 'lineAlign_' + line);
		Alignment.setAttribute('id', 'lineAlign_' + line);


		var anOption = document.createElement('option');
		Alignment.options.add(anOption);
		anOption.innerText = "center";
		anOption.Value = "center";

		Alignment.options[Alignment.length-1].value = 'center';
		Alignment.options[Alignment.length-1].text = 'center';

		var anOption = document.createElement('option');
		Alignment.options.add(anOption);
		anOption.innerText = "left";
		anOption.Value = "left";

		Alignment.options[Alignment.length-1].value = 'left';
		Alignment.options[Alignment.length-1].text = 'left';

		var anOption = document.createElement('option');
		Alignment.options.add(anOption);
		anOption.innerText = "right";
		anOption.Value = "right";

		Alignment.options[Alignment.length-1].value = 'right';
		Alignment.options[Alignment.length-1].text = 'right';

		if(document.all)
		{
			// IE
			Alignment.onchange=function() { iesucksOnChangeUpdateAlign(Alignment.getAttribute('id'))  };
		}
		else
		{
			// Mozilla / Firefox
			// del.addEventListener('click', function() { iesucksOnClickUpdate(orderPreviewTable,('delRow' + line),formatDesignForm) }, true);
			Alignment.addEventListener('change', iesucksOnChangeUpdateAlign , true);
		}

		cellAlignment.appendChild(Alignment);

		// show preview
		var cellText = row.insertCell(-1);
		var PreviewTable = createPreviewTable(line);
		cellText.appendChild(PreviewTable);
	}

	function removeRowFromTable(myname,myid)
	{
		// myname = table, myid = row
		// alert(myname + ' ' + myid);

		var row = document.getElementById(myid);
		var tbl = document.getElementById(myname);
		var line = 0;

		var offset = tbl.rows.length - lettering.length;

		// alert('removeRowFromTable: ' + myname + myid);
		// alert('myid: ' + myid + ' offset :' + offset + ',tbl ' + tbl.rows.length + ',ltr ' + lettering.length);
		// first delete table row then record line of lettering array to clear
		for(var x=offset; x < tbl.rows.length; x++)
		{
			if(tbl.rows[x].getAttribute('id') == myid)
			{
				tbl.deleteRow(x);
				// alert('tbl ' + tbl.rows.length + ',ltr ' + lettering.length);
				line = x - offset
				break;
			}
			else
			{
				// alert('ignoring id=' + tbl.rows[x].getAttribute('id'));
			}
		}

		// now tidy up table ids and text
		var cells;

		for(x=0; x < lettering.length; x++)
		{
			if(x == line)
			{
				lettering.splice(x,1);
				rowids.splice(x,1);
				letteringAlign.splice(x,1);
			}
		}

		var i = 1;
		var y = 0;
		for(x = 0; x < lettering.length; x++)
		{
			// label ids start at zero
			row = document.getElementById(rowids[x]);
			if(row != null)
			{
				// cell.value = previewText;
				if(row.cells[row.cells.length  - 1].hasChildNodes)
				{
					// update row cell
					row.cells[0].childNodes[0].data=i;

					i++;
					y++;
				}
			}
		}

		// now clean up the line array
		// var newlettering = Array(lettering.length -1);


		// have to use .splice method to clear up the table
		//lettering = null;
		//lettering = newlettering;
	}

	function createPreviewTable(line)
	{
		// create table containing preview of current lettering array
		// contents and return it

		var previewTbl = document.createElement('table');
		previewTbl.setAttribute('width','100%');
		previewTbl.setAttribute('border','1');
		previewTbl.id='displayPreviewLine' + line;
		//previewTbl.border=0;

		var row1 = previewTbl.insertRow(0); // image
		var row2 = previewTbl.insertRow(1); // extra style stuff
		var row3 = previewTbl.insertRow(2); // words

		var cell = null;
		var Node = null;
		var blurb = '';
		var pos = 0;
		var list = null;
		var insert = 0;

		var cellAlign = 'center';
		if(letteringAlign != null)
		{
			if(letteringAlign[line] != null)
			{
				cellAlign=letteringAlign[line];
			}
		}

		for(pos = 0; pos < lettering[line].length; pos++)
		{
			if(pos == 0)
			{
				insert = 0;
			}
			else
			{
				insert = -1;
			}
			// deal with preview image
			cell = row1.insertCell(insert);
			cell.setAttribute('align',cellAlign);
			Node = document.createElement('img');
			Node.setAttribute('src',genPreviewFontUrl(lettering[line][pos]));
			cell.appendChild(Node);

			/*
			// deal with style details
			cell = row2.insertCell(insert);
			cell.setAttribute('align',cellAlign);

			blurb = getStyleCode(parseInt(lettering[line][pos]['FontStyle']));
			blurb = blurb + ', ' + getSizeCode(parseInt(lettering[line][pos]['FontSize']));
			blurb = blurb + ', ' + getColorCode(parseInt(lettering[line][pos]['FontColor']));
			if(parseInt(lettering[line][pos]['FontColor2'])>0)
			{
				blurb = blurb + ', ' + getColorCode(parseInt(lettering[line][pos]['FontColor2']));
			}
			if(lettering[line][pos]['Options'].length>0)
			{
				blurb = blurb + ', ' + lettering[line][pos]['Options'];
			}
			// blurb = blurb + ', ' + lettering[line][pos]['FontPosition'];

			Node = document.createTextNode(blurb);
			cell.appendChild(Node);
			*/

			// deal with text
			cell = row3.insertCell(insert);
			cell.setAttribute('align',cellAlign);
			Node = document.createElement('b');
			cell.appendChild(Node);
			Node2 = document.createTextNode(lettering[line][pos]['Chunk']);
			Node.appendChild(Node2);

			//lettering[line][pos]['Chunk'] = document.forms[myform].Chunk.value;
			//lettering[line][pos]['FontStyle'] = document.forms[myform].FontStyle.value;
			//lettering[line][pos]['FontSize'] = document.forms[myform].FontSize.value;
			//lettering[line][pos]['FontColor'] = document.forms[myform].FontColor.value;
			//lettering[line][pos]['FontColor2'] = document.forms[myform].FontColor2.value;
			//lettering[line][pos]['FontPosition'] = document.forms[myform].FontPosition.value;
		}
		return previewTbl;
	}

	// work around for IE
	function mySetOnClick(object,option)
	{
		object.myFunction
		if(document.all)
		{
			// IE


			object.onclick=function() { option };
			// alert('IE ' + option);

		}
		else
		{
			// object.setAttribute('onclick', option);
			// Mozilla / Firefox
			object.addEventListener('click', function() { option }, true);
			// alert('Mozilla ' + option);
		}

	}

	function genUniqID()
	{
		var id = 'u_';
		for(x=0; x < 30; x++)
		{
			id = id + String.fromCharCode(Math.floor(Math.random() * 26) + 65);
		}
		return id;
	}

	function doSubmit()
	{
		// create form with order, send it off
		if(lettering==null)
		{
			alert('Please complete your order by entering your desired text');
			return false;
		}
		else
		{
			// alert(lettering.length);
		}

		var order=document.getElementById('doOrder');

		var i = document.createElement('input');
		var line = null;
		var pos = null;

		i.setAttribute('type', 'hidden');
		i.setAttribute('value', 'step5');
		i.setAttribute('name', 'action');
		order.appendChild(i);

		var i = document.createElement('input');
		i.setAttribute('type', 'hidden');
		i.setAttribute('value', product.ProductID );
		i.setAttribute('name', 'ProductID');
		order.appendChild(i);

		var i = document.createElement('input');
		i.setAttribute('type', 'hidden');
		i.setAttribute('value', product.PlacementID);
		i.setAttribute('name', 'PlacementID');
		order.appendChild(i);

		var i = document.createElement('input');
		i.setAttribute('type', 'hidden');
		i.setAttribute('value',product.ProductColorID);
		i.setAttribute('name', 'ProductColorID');
		order.appendChild(i);

		for(line in lettering)
		{
			var i = document.createElement('input');
			i.setAttribute('type', 'hidden');
			i.setAttribute('value', letteringAlign[line]);
			i.setAttribute('name', 'line_' + line + '_' + 'alignment');
			order.appendChild(i);

			for(pos in lettering[line])
			{
				var i = document.createElement('input');
				i.setAttribute('type', 'hidden');
				i.setAttribute('value', lettering[line][pos]['Chunk'].replace('"','\"'));
				i.setAttribute('name', 'line_' + line + '_' + pos + '_Chunk');
				order.appendChild(i);

				var i = document.createElement('input');
				i.setAttribute('type', 'hidden');
				i.setAttribute('value', lettering[line][pos]['FontStyle']);
				i.setAttribute('name', 'line_' + line + '_' + pos + '_FontStyle');
				order.appendChild(i);

				var i = document.createElement('input');
				i.setAttribute('type', 'hidden');
				i.setAttribute('value', lettering[line][pos]['FontSize']);
				i.setAttribute('name', 'line_' + line + '_' + pos + '_FontSize');
				order.appendChild(i);

				var i = document.createElement('input');
				i.setAttribute('type', 'hidden');
				i.setAttribute('value', lettering[line][pos]['FontColor']);
				i.setAttribute('name', 'line_' + line + '_' + pos + '_FontColor');
				order.appendChild(i);

				var i = document.createElement('input');
				i.setAttribute('type', 'hidden');
				i.setAttribute('value', lettering[line][pos]['FontColor2']);
				i.setAttribute('name', 'line_' + line + '_' + pos + '_FontColor2');
				order.appendChild(i);

				var i = document.createElement('input');
				i.setAttribute('type', 'hidden');
				i.setAttribute('value', lettering[line][pos]['Options'].replace('"','\"'));
				i.setAttribute('name', 'line_' + line + '_' + pos + '_Options');
				order.appendChild(i);
			}
		}
		order.submit();
	}

	// lettering functions
	function populateFontColors(parentID,childID,gchildID)
	{
		// restrict colour list to that allowed for style and firstcolour
		var p = document.getElementById(parentID); // style
		var c = document.getElementById(childID); // second colour
		var StyleID = parseInt(p[p.selectedIndex].value);

		c.length=1;
		c.options[0].value='';
		c.options[0].text='';
		// now cycle through global style
		if(letterStyle2Color[StyleID] != null)
		{
			for(var x in letterStyle2Color[StyleID])
			{
				if(parseInt(x) > 0)
				{
					if(getColorName(parseInt(x)) != '')
					{
						//alert('text=' + getColorName(parseInt(x)) + ' ' + x);
						c.length++;
						c.options[c.length-1].value = parseInt(x);
						c.options[c.length-1].text = getColorName(parseInt(x));
					}
				}
			}
		}
		populateFontColors2(parentID,childID,gchildID)
	}

	function populateFontColors2(gparentID,parentID,childID)
	{
		// restrict second colour list to that allowed for style and firstcolour



		// first grab list of colours from parent form
		// then iterate through list skipping over selected colour
		var s = document.getElementById(gparentID);  // style
		var p = document.getElementById(parentID); // first colour
		var c = document.getElementById(childID); // second colour
		var StyleID = parseInt(s[s.selectedIndex].value);
		var ColorID = parseInt(p[p.selectedIndex].value);

		c.length=1;
		c.options[0].value='';
		c.options[0].text='';

		// now cycle through global style
		if(letterStyle2Color[StyleID] != null)
		{
			//alert(StyleID + ' ' + ColorID);
			if(letterStyle2Color[StyleID][ColorID] != null)
			{
				//alert(ColorID);
				if(letterStyle2Color[StyleID][ColorID][0]>0)
				{
					for(x=0; x < letterStyle2Color[StyleID][ColorID].length; x++)
					{
						if(getColorName(letterStyle2Color[StyleID][ColorID][x]) != '')
						{
							//alert(letterStyle2Color[StyleID][ColorID][x]);
							c.length++;
							c.options[c.length-1].value = letterStyle2Color[StyleID][ColorID][x];
							c.options[c.length-1].text = getColorName(letterStyle2Color[StyleID][ColorID][x]);
						}
					}
				}
			}
		}
	}