var undef;

var allFloatObjs = new Array();
var curfloat     = undef;

var fieldsOffsetX, fieldsOffsetY; // X and Y offset of the fields_div layer
var floatOffsetX, floatOffsetY;   // X and Y offset of the float_div layer

var isIE  = (navigator.appName.indexOf("Microsoft") != -1);
var isMac = (navigator.platform.indexOf("Mac") != -1);


// Variables used by the controls
var g_border_style = "1px solid black";


var g_aTextColors = new Array();
g_aTextColors[" "]      = "";
g_aTextColors["black"]  = "Black";
g_aTextColors["white"]  = "White";
g_aTextColors["red"]    = "Red";
g_aTextColors["green"]  = "Green";
g_aTextColors["blue"]   = "Blue";
g_aTextColors["yellow"] = "Yellow";
g_aTextColors["gold"]   = "Gold";
g_aTextColors["silver"] = "Silver";
g_aTextColors["#f2490e"] = "Orange";
g_aTextColors["#e21ac3"] = "Deep Pink";
g_aTextColors["#8734c1"] = "Med Purple";

var g_aBgColors = new Array();
g_aBgColors[""]       = "";
g_aBgColors["black"]  = "Black";
g_aBgColors["white"]  = "White";
g_aBgColors["red"]    = "Red";
g_aBgColors["green"]  = "Green";
g_aBgColors["blue"]   = "Blue";
g_aBgColors["yellow"] = "Yellow";

var g_aFontSizes = new Array();
g_aFontSizes[""]     = "";
g_aFontSizes["6pt"]  = "6pt";
g_aFontSizes["7pt"]  = "7pt";
g_aFontSizes["8pt"]  = "8pt";
g_aFontSizes["9pt"]  = "9pt";
g_aFontSizes["10pt"] = "10pt";
g_aFontSizes["11pt"] = "11pt";
g_aFontSizes["12pt"] = "12pt";
g_aFontSizes["14pt"] = "14pt";
g_aFontSizes["16pt"] = "16pt";

var g_aFontWeights = new Array();
g_aFontWeights[""]       = "";
g_aFontWeights["normal"] = "Normal";
g_aFontWeights["bold"]   = "Bold";

var g_aWidths = new Array();
g_aWidths[""]  = "";
g_aWidths["1"]   = 1;
g_aWidths["2"]   = 2;
g_aWidths["3"]   = 3;
g_aWidths["4"]   = 4;
g_aWidths["5"]   = 5;
g_aWidths["6"]   = 6;
g_aWidths["7"]   = 7;
g_aWidths["8"]   = 8;
g_aWidths["9"]   = 9;
g_aWidths["10"]  = 10;
g_aWidths["11"]  = 11;
g_aWidths["12"]  = 12;
g_aWidths["13"]  = 13;
g_aWidths["14"]  = 14;
g_aWidths["15"]  = 15;

// Default control values.
var pers_layout = new Object();
pers_layout.num_fields  = 0;
pers_layout.border      = 0;
pers_layout.bg_color    = "";

// defaults for pers_layout_fields
default_text_color  = "black";
default_font_size   = "12pt";
default_font_weight = "normal";
default_width       = 10;

var pers_layout_fields = new Array();

// this will contain both pers_sugg and pers_sugg_fields data
var pers_sugg;

// field number of field that is being editted by the Field Controls
var cur_edit_field_no = -1;

function initPersFields(edit_screen)
/*
 * Initializes all the fields and such.  The edit_screen parameter determines what is
 * displayed.  Expected values are:
 *   layout - show screen to edit the layout of the personalization fields
 *   suggestion - show the screen to edit the suggestions
 *   user - load only those parts necessary to view the ornament with the personalization
 *          fields properly placed and the ability to enter text for those fields.
 * edit the field suggestions.
 */
{
	var isLayout = (edit_screen == "layout");
	var isSugg   = (edit_screen == "suggestion");
	var isUser   = (edit_screen == "user");

	var body = document.getElementsByTagName("BODY").item(0);
	var img = document.getElementById("ornament_img");

	var frm = document.getElementById("fields_form");
	     if( isLayout ) { frm.onsubmit = saveLayout;     }
	else if( isSugg   ) { frm.onsubmit = saveSuggestion; }

	// populate global table variables
	loadPersLayout();
	loadPersLayoutFields();

	if( isSugg || isUser )
	{
		loadPersSugg();
		loadPersSuggFields();
	}

	// the DIV to contain the floating text
	var float_div = document.createElement("DIV");
	float_div.setAttribute("id", "float_div");
	float_div.style.position = "absolute";
	float_div.style.top  = getAbsoluteOffsetTop(img);
	float_div.style.left = getAbsoluteOffsetLeft(img);

	floatOffsetX = parseInt(float_div.style.left,10);
	floatOffsetY = parseInt(float_div.style.top,10);

	if( isLayout || isSugg )
	{
		// the DIV to contain all the other junk
		var fields_div = document.createElement("DIV");
		fields_div.setAttribute("id", "fields_div");
		fields_div.style.position = "absolute";
		fields_div.style.top  = float_div.style.top;
		fields_div.style.left = parseInt(float_div.style.left,10) + img.offsetWidth + 35;
	
		//
		// All the floating text layers will be children of this parent div.  Because of this,
		// if you set the children's style.position property to 'absolute', it is still relative
		// to this parent layer.  So we have to store these offsets to get the "real" locations
		// of the floating text.
		//
		fieldsOffsetX = parseInt(fields_div.style.left,10);
		fieldsOffsetY = parseInt(fields_div.style.top,10);
	
		// create the header DIV
		var fields_head_div = document.createElement("DIV");
		fields_head_div.setAttribute("id", "fields_head");
	
		if( isLayout )
		{
			var num_fields_lbl = document.createElement("B");
			num_fields_lbl.appendChild(document.createTextNode("Number of fields: "));
	
			var num_fields_fld = document.createElement("INPUT");
			num_fields_fld.setAttribute("maxLength", 2);
			num_fields_fld.setAttribute("name", "num_fields");
			num_fields_fld.setAttribute("id", "num_fields");
			num_fields_fld.setAttribute("size", 4);
			num_fields_fld.onkeyup = generateFields;
	
			fields_head_div.appendChild(num_fields_lbl);
			fields_head_div.appendChild(num_fields_fld);
		}
		else
		{
			var sugg_list_lbl = document.createElement("B");
			sugg_list_lbl.appendChild(document.createTextNode("Saved Suggestions: "));
	
			var sugg_name_lbl = document.createElement("B");
			sugg_name_lbl.appendChild(document.createTextNode("Suggestion Name: "));
	
			var sugg_name_fld = document.createElement("INPUT");
			sugg_name_fld.setAttribute("name", "sugg_name");
			sugg_name_fld.setAttribute("id", "sugg_name");
			sugg_name_fld.setAttribute("size", 22);
			sugg_name_fld.setAttribute("maxLength", 20);
	
			fields_head_div.innerHTML = "<B>Saved Suggestions:</B> ";
			//fields_head_div.appendChild(buildSuggSelectNode());
			fields_head_div.innerHTML += buildSuggSelectHTML();
			fields_head_div.appendChild(document.createElement("BR"));
			fields_head_div.appendChild(document.createElement("BR"));
			fields_head_div.appendChild(sugg_name_lbl);
			fields_head_div.appendChild(sugg_name_fld);
		}
	
		fields_div.appendChild(fields_head_div);
		fields_div.appendChild(document.createElement("BR"));
	
		// create the detail DIV
		var fields_dtl_div = document.createElement("DIV");
		fields_dtl_div.setAttribute("id", "fields_dtl");
		fields_div.appendChild(fields_dtl_div);
	
		// create the footer DIV
		var fields_foot_div = document.createElement("DIV");
		fields_foot_div.setAttribute("id", "fields_foot");
	
		if( isLayout )
		{
			//
			// As of now, the newest version of IE for Mac apparently doesn't support creating INPUT elements
			// other than text boxes.  So, I have to use the depreciated innerHTML for this part, for now.
			//
			var foot_html = "<BR><BR><TABLE><TR><TD COLSPAN=2><B>General Controls:</B></TD></TR>"
				+ "<TR><TD ALIGN='right'>Borders:</TD><TD><INPUT TYPE='checkbox' NAME='border' onmouseup='setBorders(this)'"
				+ ((pers_layout.border)?" CHECKED":"") + "></TD></TR>\n"
				+ "<TR><TD ALIGN='right'>Background Color:</TD><TD><SELECT NAME='bg_color' ONCHANGE='setBgColor(this.value)'>";
		
			for( var colval in g_aBgColors )
			{
				foot_html += "<OPTION VALUE='" + colval + "'" + ((colval==pers_layout.bg_color)?" SELECTED":"") + ">"
					+ g_aBgColors[colval] + "</OPTION>";
			}
		
			foot_html += "</SELECT></TD></TR>"
				+ "<TR><TD COLSPAN=2>&nbsp;</TD></TR>"
				+ "<TR><TD><B>Field Controls:</B></TD><TD>"
				+ "<SELECT NAME='field_edit_sel' ID='field_edit_sel' ONCHANGE='setCurEditField(this.value)'>"
				+ "<OPTION VALUE=-1></OPTION></SELECT>"
				+ "</TD></TR>"
				+ "<TR><TD ALIGN='right'>Text Color:</TD>"
				+ "<TD><SELECT NAME='text_color' ID='text_color' ONCHANGE='setTextColor(this.value)'>";
		
			for( var colval in g_aTextColors )
			{
				foot_html += "<OPTION VALUE='" + colval + "'>" + g_aTextColors[colval] + "</OPTION>";
			}
		
			foot_html += "</SELECT></TD></TR>"
				+ "<TR><TD ALIGN='right'>Font Size:</TD>"
				+ "<TD><SELECT NAME='font_size' ID='font_size' ONCHANGE='setFontSize(this.value)'>";
		
			for( var colval in g_aFontSizes )
			{
				foot_html += "<OPTION VALUE='" + colval + "'>" + g_aFontSizes[colval] + "</OPTION>";
			}
		
			foot_html += "</SELECT></TD></TR>"
				+ "<TR><TD ALIGN='right'>Font Weight:</TD>"
				+ "<TD><SELECT NAME='font_weight' ID='font_weight' ONCHANGE='setFontWeight(this.value)'>";
		
			for( var colval in g_aFontWeights )
			{
				foot_html += "<OPTION VALUE='" + colval + "'>" + g_aFontWeights[colval] + "</OPTION>";
			}
		
			foot_html += "</SELECT></TD></TR>"
				+ "<TR><TD ALIGN='right'>Field Width:</TD>"
				+ "<TD><SELECT NAME='width' ID='width' ONCHANGE='setWidth(this.value)'>";
		
			for( var colval in g_aWidths )
			{
				foot_html += "<OPTION VALUE='" + colval + "'>" + g_aWidths[colval] + "</OPTION>";
			}
		
			foot_html += "</SELECT></TD></TR>"
				+ "<TR><TD COLSPAN=2 ALIGN='right'><INPUT TYPE='submit' VALUE='Save Layout' ONCLICK='saveLayout();'></TD></TR>"
				+ "</TABLE>"
				+ "<BR><B>Suggestions:</B><BR>"
				+ "<INPUT TYPE='button' VALUE='Edit Suggestions' ONCLICK='editSuggestions()'>";
		}
		else
		{
			foot_html = "<BR><BR><INPUT TYPE='submit' VALUE='Save Suggestion' ONCLICK='saveSuggestion();'>";
		}
	
		fields_foot_div.innerHTML = foot_html;
	
		fields_div.appendChild(fields_foot_div);
	
		body.appendChild(fields_div);
	}

	body.appendChild(float_div);

	// if there are previously saved values, then we initialize those fields
	if( pers_layout_fields.length )
	{
		if( isLayout ) { document.getElementById("num_fields").value = pers_layout.num_fields; }
		generateFields(1, edit_screen);
	}
	// else, if there are a default number of fields, generate those
	else if( pers_layout.num_fields && !isUser )
	{
		if( isLayout ) { document.getElementById("num_fields").value = pers_layout.num_fields; }
		generateFields(0, edit_screen);
	}
}

function initPersFieldsView(view_array)
/*
 * The purpose of this function is to display a view only version of an ornament already personalized
 * by the user.  It allows for multiple ornaments being shown at once (see the parameter description
 * below).
 *
 * The view_array is structured as follows: view_array[<Image ID>][<Field Number>].<Field Attribute>,
 * where <Image ID> is the ID tag associated with the image we are placing fields on, <Field Number>
 * is the the field_id of the field we are to place, and <Field Attribute> is values such as x, y, value,
 * font_weight, etc.
 */
{
	if( !view_array ) { return; }

	var body = document.getElementsByTagName("BODY").item(0);
	for( var img_id in view_array )
	{
		var img = document.getElementById(img_id);
		var fields_array = view_array[img_id];

		// the DIV to contain the floating text
		var float_div = document.createElement("DIV");
		float_div.style.position = "absolute";
		float_div.style.top  = getAbsoluteOffsetTop(img);
		float_div.style.left = getAbsoluteOffsetLeft(img);

		for( var field_id in fields_array )
		{
			// span to contain floating text
			var span = document.createElement("SPAN");
			span.style.textAlign  = "center";
			span.style.fontFamily = "comic, comic sans MS";
			span.style.position   = "absolute";
			span.style.left       = fields_array[field_id].x;
			span.style.top        = fields_array[field_id].y;
			span.style.color      = fields_array[field_id].text_color;
			span.style.fontSize   = fields_array[field_id].font_size;
			span.style.fontWeight = fields_array[field_id].font_weight;
			span.style.width      = charsToWidth(fields_array[field_id].width)

			var text = document.createTextNode(fields_array[field_id].value.toUpperCase());
			span.appendChild(text);

			float_div.appendChild(span);
		}

		body.appendChild(float_div);
	}
}

function generateFields(init, edit_screen)
{
	var isLayout = (!edit_screen || edit_screen == "layout");
	var isSugg   = ( edit_screen && edit_screen == "suggestion");
	var isUser   = ( edit_screen && edit_screen == "user");

	var float_div      = document.getElementById("float_div");
	var fields_dtl_div = document.getElementById("fields_dtl");

	var num_fields;
	// if we are in layout edit mode, and this isn't the initialization call, then
	// we get num_fields from the text box and update pers_layout.num_fields
	if( isLayout && !init )
	{
		var txt_num_flds = document.getElementById("num_fields");
		num_fields = parseInt(txt_num_flds.value,10);

		if( num_fields && !Number(num_fields) )
		{
			alert("Must be a number.");
			return false;
		}

		pers_layout.num_fields = num_fields;
	}
	else
	{
		num_fields = pers_layout.num_fields;
	}

	// remove all previous floating text
	while( float_div.lastChild )
	{
		float_div.removeChild(float_div.lastChild);
	}

	if( isLayout || isSugg )
	{
		// remove all previous text boxes
		while( fields_dtl_div.lastChild )
		{
			fields_dtl_div.removeChild(fields_dtl_div.lastChild);
		}
	}

	if( isLayout )
	{
		// reset the Field Controls select box
		var sel = document.getElementById("field_edit_sel");
		while( sel.options.length ) { sel.options[sel.options.length - 1] = null; }
		sel.options[sel.options.length] = new Option("",-1, false, true);
		cur_edit_field_no = -1;
	}

	allFloatObjs = new Array();
	for( var i = 0; i < num_fields; i++ )
	{
		var fld;
		if( isLayout || isSugg )
		{
			// label for the label or suggestion field
			if( isLayout )
			{
				sel.options[sel.options.length] = new Option("Label " + (i + 1), i, false, false);
				fields_dtl_div.appendChild(document.createTextNode("Label " + (i + 1) + ": "));
			}
			else if( isSugg )
			{
				fields_dtl_div.appendChild(document.createTextNode(pers_layout_fields[i].label + ": "));
			}

			// input field for the label name or suggestion value
			fld = document.createElement("INPUT");
			fld.setAttribute("name", "field_" + i);
			fld.setAttribute("id",   "field_" + i);
			fld.setAttribute("size", parseInt(default_width,10) + 5);
			fld.setAttribute("maxLength", default_width);
			fld.onkeyup = setFloatingText;

			fields_dtl_div.appendChild(fld);
			fields_dtl_div.appendChild(document.createElement("BR"));
		}
		else
		{
			fld = document.getElementById("field_" + i);
		}

		// span to contain floating text
		var span = document.createElement("SPAN");
		span.setAttribute("id", "float_" + fld.getAttribute("name"));
		span.style.textAlign  = "center";
		span.style.fontFamily = "comic, comic sans MS";
		span.style.color      = default_text_color;
		span.style.fontSize   = default_font_size;
		span.style.fontWeight = default_font_weight;
		span.style.width      = charsToWidth(default_width);

		if( !isUser )
		{
			if( pers_layout.border ) {
			span.style.border = g_border_style;
			}
			span.style.backgroundColor = pers_layout.bg_color;
			span.onclick = floatTextClick;
		}

		allFloatObjs[i] = span;

		float_div.appendChild(span);

		// set the proper location of the floating text
		var img = document.getElementById("ornament_img");
		span.style.position = "absolute";

		if( init )
		{
			// there are previoiusly stored values, so use those
			span.style.left       = pers_layout_fields[i].x;
			span.style.top        = pers_layout_fields[i].y;
			span.style.color      = pers_layout_fields[i].text_color;
			span.style.fontSize   = pers_layout_fields[i].font_size;
			span.style.fontWeight = pers_layout_fields[i].font_weight;
			span.style.width      = charsToWidth(pers_layout_fields[i].width)

			if( isLayout ) { fld.value = pers_layout_fields[i].label; }

			fld.setAttribute("size",      pers_layout_fields[i].width + 5);
			fld.setAttribute("maxLength", pers_layout_fields[i].width);
			fld.onkeyup();
		}
		else
		{
			// we are starting fresh, so put the floating text next to the corrisponding input field
			span.style.left = getAbsoluteOffsetLeft(fld) - floatOffsetX + fld.offsetWidth + 5;
			span.style.top  = getAbsoluteOffsetTop(fld)  - floatOffsetY;

			// and setup default values for pers_layout_fields
			pers_layout_fields[i] = new Object();
			pers_layout_fields[i].text_color  = default_text_color;
			pers_layout_fields[i].font_size   = default_font_size;
			pers_layout_fields[i].font_weight = default_font_weight;
			pers_layout_fields[i].width       = default_width;
		}
	}
	return 1;
}

function editSuggestions()
{
	var item_id = document.getElementsByName("id").item(0).value;
	window.location = "addmodsuggestions.taf?id=" + item_id;
}

function saveLayout()
{
	var frm = document.getElementById("fields_form");

	// IE doesn't like it when you try to set the backgroundColor propery to a space (' ').  However, Tango's
	// tokenizer interprets multiple adjacent delimiters as a single delimiter.  So, "...black,,14pt..." will
	// only parse to 2 fields, not 3 with the middle one being empty.  So we must juggle the -Clear- value.
	if( pers_layout.bg_color == ""   ) { pers_layout.bg_color = " ";   }

	var pers_layout_value = pers_layout.num_fields + "," + ((pers_layout.border)?1:0) + "," + pers_layout.bg_color;

	var pers_layout_fields_value = '';
	for( var i = 0; i < pers_layout.num_fields; i++ )
	{
		var fld = document.getElementById("field_" + i);
		if( !fld.value ) { alert("You must enter a lable name for each field.  Save failed."); return; }

		var img = document.getElementById("ornament_img");
		var x = parseInt(allFloatObjs[i].style.left,10);
		var y = parseInt(allFloatObjs[i].style.top,10);
		pers_layout_fields_value += ((i)?"|":"") + i + "," + fld.value + "," + x + "," + y + "," + pers_layout_fields[i].text_color
			+ "," + pers_layout_fields[i].font_size + "," + pers_layout_fields[i].font_weight + "," + pers_layout_fields[i].width;
	}

	document.getElementById("pers_layout").value        = pers_layout_value;
	document.getElementById("pers_layout_fields").value = pers_layout_fields_value;

	frm.submit();
}

function saveSuggestion()
/*
 * From the database, the pers_sugg and pers_sugg_fields hidden form values contain
 * all the suggestions and field values for every suggestion for an item.  But, when
 * sending back to the database, all we need to store is one suggestion and a single
 * set of fields, so the format of pers_sugg and pers_sugg_fields is different on the
 * way out from on the way in.
 */
{
	var sugg_name = document.getElementById("sugg_name");

	if( !sugg_name.value )
	{
		alert("You must enter a suggestion name.");
		sugg_name.focus();
		sugg_name.select();
		return;
	}

	var pers_sugg = document.getElementById("pers_sugg");
	var sugg_list = document.getElementById("sugg_list");

	pers_sugg.value = sugg_list.options[sugg_list.selectedIndex].value + "," + sugg_name.value;

	var pers_sugg_fields = document.getElementById("pers_sugg_fields");
	var sugg_fields_value = "";
	for( var i = 0; i < pers_layout.num_fields; ++i )
	{
		var fld = document.getElementById("field_" + i);
		sugg_fields_value += ((i)?"|":"") + i + "," + ((fld.value)?fld.value:" ");
	}

	pers_sugg_fields.value = sugg_fields_value;

	document.getElementById("fields_form").submit();
}

function loadPersLayout()
//
// Loads the pers_layout global variable.
//
{
	tmp = document.getElementById("pers_layout").value.split(",");

	if( tmp[0] ) { pers_layout.num_fields  = parseInt(tmp[0],10); }
	if( tmp[1] ) { pers_layout.border      = parseInt(tmp[1],10); }
	if( tmp[3] ) { pers_layout.bg_color    = ((tmp[2]==" ")?"":tmp[2]); }
}

function loadPersLayoutFields()
//
// Loads the pers_layout_fields global variable.
//
{
	var field_rows = new Array();
	var field_row  = new Array();

	field_rows = document.getElementById("pers_layout_fields").value.split("|");
	pers_layout_fields = new Array();
	for( var i = 0; i < field_rows.length; ++i )
	{
		field_row = field_rows[i].split(",");
		pers_layout_fields[field_row[0]] = new Object();
		pers_layout_fields[field_row[0]].label       = field_row[1];
		pers_layout_fields[field_row[0]].x           = field_row[2];
		pers_layout_fields[field_row[0]].y           = field_row[3];
		pers_layout_fields[field_row[0]].text_color  = ((field_row[4])?field_row[4]:default_text_color);
		pers_layout_fields[field_row[0]].font_size   = ((field_row[5])?field_row[5]:default_font_size);
		pers_layout_fields[field_row[0]].font_weight = ((field_row[6])?field_row[6]:default_font_weight);
		pers_layout_fields[field_row[0]].width       = ((parseInt(field_row[7],10))?parseInt(field_row[7],10):default_width);
	}
}

function loadPersSugg()
//
// Loads the pers_sugg global variable.
//
{
	var sugg_rows = new Array();
	var sugg_row  = new Array();

	pers_sugg = new Array();

	pers_sugg[" "] = new Object();
	pers_sugg[" "].name = " ";

	if( document.getElementById("pers_sugg").value )
	{
		sugg_rows = document.getElementById("pers_sugg").value.split("|");
		for( var i = 0; i < sugg_rows.length; ++i )
		{
			sugg_row = sugg_rows[i].split(",");
			pers_sugg[sugg_row[0]] = new Object();
			pers_sugg[sugg_row[0]].name = sugg_row[1];
		}
	}
}

function loadPersSuggFields()
//
// Loads the 'fields' property of the pers_sugg global variable.
//
{
	var sugg_rows = new Array();
	var sugg_row  = new Array();

	pers_sugg[" "].fields = new Array();

	if( document.getElementById("pers_sugg_fields").value )
	{
		sugg_rows = document.getElementById("pers_sugg_fields").value.split("|");
		for( var i = 0; i < sugg_rows.length; ++i )
		{
			sugg_row = sugg_rows[i].split(",");
			if(!pers_sugg[sugg_row[0]].fields) { pers_sugg[sugg_row[0]].fields = new Array(); }
			pers_sugg[sugg_row[0]].fields[sugg_row[1]] = sugg_row[2];
		}
	}
}

function buildSuggSelectHTML()
{
	var sugg_sel = "<SELECT NAME='sugg_list' ID='sugg_list' ONCHANGE='suggSelChange(this)'>";
	for( var idx in pers_sugg )
	{
		sugg_sel += "<OPTION VALUE='" + idx + "'>" + pers_sugg[idx].name + "</OPTION>";
	}
	sugg_sel += "</SELECT>";
	return sugg_sel;
}

function suggSelChange(sugg_sel)
{
	if( !sugg_sel ) { sugg_sel = this; }
	var fields = new Array();

	// set the suggestion name
	document.getElementById("sugg_name").value = sugg_sel.options[sugg_sel.selectedIndex].text;

	showSuggestion(sugg_sel.options[sugg_sel.selectedIndex].value);
}

function showSuggestion(sugg_id)
{
	// set the suggestion fields
	var fields = pers_sugg[sugg_id].fields;

	for( var i = 0; i < pers_layout.num_fields; ++i )
	{
		var fld = document.getElementById("field_" + i);
		fld.value = ((fields && fields[i])?fields[i]:"");
		fld.onkeyup();
	}
}

function clearFields()
{
	for( var i = 0; i < pers_layout.num_fields; ++i )
	{
		var fld = document.getElementById("field_" + i);
		fld.value = "";
		fld.onkeyup();
	}
}

function setFloatingText(txtbox)
/*
 * Sets the text in the layer to txtbox.value.  Or, if the layer already
 * exists, simply replaces the text already there with the current value
 * of the text box.
 */
{
	if( !txtbox ) { txtbox = this; }

	var floattxt = document.getElementById("float_" + txtbox.name);
	var textel   = document.createTextNode(txtbox.value.toUpperCase());

	if( floattxt.firstChild ) { floattxt.removeChild(floattxt.firstChild); }
	floattxt.appendChild(textel);
}

function floatTextClick(ev)
/*
 * onClick event for the floating text layer.  sets the global curfloat to the
 * layer clicked and records the pointers X and Y offset from the top-left corner
 * of the layer (those values are used later in moving the layer).  or, clears
 * the curfloat if the layer is already clicked.
 */
{
	var body = document.getElementsByTagName('BODY').item(0);

	if(window.event) { ev = window.event; }

	if( curfloat )
	{
		curfloat = undef;
		body.onmousemove = '';
	}
	else
	{
		curfloat = this;
		body.onmousemove = floatTextMouseMove;
	}
}

function floatTextMouseDown(ev)
{
	var body = document.getElementsByTagName('BODY').item(0);

	curfloat = this;
	body.onmousemove = floatTextMouseMove;
}

function floatTextMouseUp(ev)
{
	var body = document.getElementsByTagName('BODY').item(0);

	curfloat = undef;
	body.onmousemove = '';
}

function floatTextMouseMove(ev)
/*
 * onMouseMove event for the floating text layer.  moves the layer by the
 * apropriate amount relative to the pointer.
 */
{
	var body = document.getElementsByTagName("BODY").item(0);
	var movx, movy;

	if(ev)         { movx = ev.pageX; movy = ev.pageY; }
	else if(event) { movx = event.x;  movy = event.y;  }

	curfloat.style.position = "absolute";
	curfloat.style.left = movx - floatOffsetX + body.scrollLeft - (curfloat.offsetWidth / 2);
	curfloat.style.top  = movy - floatOffsetY + body.scrollTop  - (curfloat.offsetHeight / 2);
}

//
// Control set Functions
//
function setBorders(check_el)
{
	var border = ''; pers_layout.border = 0;
	if( !check_el.checked ) { border = g_border_style; pers_layout.border = 1; }

	for ( var i = 0; i < allFloatObjs.length; ++i )
	{
		var obj = allFloatObjs[i];
		obj.style.border = border;
	}
}

function setBgColor(color)
{
	pers_layout.bg_color = color;
	for ( var i = 0; i < allFloatObjs.length; ++i )
	{
		allFloatObjs[i].style.backgroundColor = color;
	}
}

function setCurEditField(field_no)
{
	cur_edit_field_no = parseInt(field_no,10);

	if( cur_edit_field_no >= 0 )
	{
		var sel = document.getElementById("text_color");
		for( var i = 0; i < sel.options.length; ++i )
		{
			if( sel.options[i].value == pers_layout_fields[field_no].text_color ) { sel.options[i].selected = true; }
		}

		var sel = document.getElementById("font_size");
		for( var i = 0; i < sel.options.length; ++i )
		{
			if( sel.options[i].value == pers_layout_fields[field_no].font_size ) { sel.options[i].selected = true; }
		}

		var sel = document.getElementById("font_weight");
		for( var i = 0; i < sel.options.length; ++i )
		{
			if( sel.options[i].value == pers_layout_fields[field_no].font_weight ) { sel.options[i].selected = true; }
		}

		var sel = document.getElementById("width");
		for( var i = 0; i < sel.options.length; ++i )
		{
			if( sel.options[i].value == pers_layout_fields[field_no].width ) { sel.options[i].selected = true; }
		}
	}
}

function setTextColor(color)
{
	if( cur_edit_field_no >= 0 && color != '' )
	{
		pers_layout_fields[cur_edit_field_no].text_color = color;
		for ( var i = 0; i < allFloatObjs.length; ++i )
		{
			allFloatObjs[cur_edit_field_no].style.color = color;
		}
	}
}

function setFontSize(size)
{
	if( cur_edit_field_no >= 0 && size != '' )
	{
		pers_layout_fields[cur_edit_field_no].font_size = size;
		for ( var i = 0; i < allFloatObjs.length; ++i )
		{
			allFloatObjs[cur_edit_field_no].style.fontSize = size;
		}
	}
}

function setFontWeight(weight)
{
	if( cur_edit_field_no >= 0 && weight != '' )
	{
		pers_layout_fields[cur_edit_field_no].font_weight = weight;
		for ( var i = 0; i < allFloatObjs.length; ++i )
		{
			allFloatObjs[cur_edit_field_no].style.fontWeight = weight;
		}
	}
}

function setWidth(width)
{
	if( cur_edit_field_no >= 0 && width != '' )
	{
		var fld = document.getElementById("field_" + cur_edit_field_no);
		fld.setAttribute("size",      parseInt(width,10) + 5);
		fld.setAttribute("maxLength", width);
		pers_layout_fields[cur_edit_field_no].width = width;
		for ( var i = 0; i < allFloatObjs.length; ++i )
		{
			allFloatObjs[cur_edit_field_no].style.width = charsToWidth(width);
		}
	}
}

//
// Utility Functions
//
function getAbsoluteOffsetTop(el)
{
	if( !el ) { return 0; }

	var offsetTop = parseInt(el.offsetTop,10);
	var tmp_el = el.offsetParent;
	while( tmp_el && tmp_el.offsetTop != undef )
	{
		offsetTop += parseInt(tmp_el.offsetTop,10);
		tmp_el = tmp_el.offsetParent;
	}

	//
	// when IE for Mac calculates the absolute offset, it doesn't take into account
	// the margins on the BODY tag, so we must account for that here. Also, to make
	// it even more complicated, if there is no style.marginWhatever property, then
	// the default margins are body.topMargin, body.leftMargin, etc.
	//
	if( isIE && isMac )
	{
		var body = document.getElementsByTagName("BODY").item(0);
		if( body.style.marginTop != '' )
		{
			offsetTop += parseInt(body.style.marginTop,10);
		}
		else
		{
			offsetTop += parseInt(body.topMargin,10);
		}
	}

	return offsetTop;
}

function getAbsoluteOffsetLeft(el)
{
	if( !el ) { return 0; }

	var offsetLeft = parseInt(el.offsetLeft,10);
	var tmp_el = el.offsetParent;
	while( tmp_el && tmp_el.offsetLeft != undef )
	{
		offsetLeft += parseInt(tmp_el.offsetLeft,10);
		tmp_el = tmp_el.offsetParent;
	}

	// see comment in above function
	if( isIE && isMac )
	{
		var body = document.getElementsByTagName("BODY").item(0);
		if( body.style.marginLeft != '' )
		{
			offsetLeft += parseInt(body.style.marginLeft,10);
		}
		else
		{
			offsetLeft += parseInt(body.leftMargin,10);
		}
	}
	return offsetLeft;
}

function charsToWidth(chars)
{
	return (parseInt(chars,10) / 1.25) + "em";
}

//
// Debugging functions.
//
function alprops(el)
{
	var alert_str = '';
	for( var prop in el )
	{
		alert_str += prop + ":" + eval('el.' + prop) + '\n';
	}
	alert(alert_str);
}