/**
 * Style edit: Scripts for edit site style settings in the Clikpic admin system
 *
 * (c) 2008 Clikpic Ltd All rights reserved.
 * 
**/

var settingTypes = ["colour","font","border","padding","margin","image","position","opacity","basic"];

function setCode(settingCode) {
	settingCodeField = document.getElementById("settingCode");
	settingCodeField.value = settingCode;
}

function checkColorScheme(form,field,value) {
	if (form.SITE_COLOUR_SCHEMES_ID.options[form.SITE_COLOUR_SCHEMES_ID.selectedIndex].value == '') {
		return 0;
	}
	return 1;
}

function checkStyle(form,field,value) {
	if (form.site_styles_id.options[form.site_styles_id.selectedIndex].value == '') {
		return 0;
	}
	return 1;
}

function getDisplayText(code) {
	switch (code) {
		case 'style':case 'borderstyle':
		return 'Style';
		case 'width':case 'borderwidth':
		return 'Width';
		case 'attachment':
		return 'Background attachment';
		case 'image':
		return 'Background image';
		case 'repeat':
		return 'Background repeat';
		case 'positiony':
		return 'Vertical position';
		case 'positionx':
		return 'Horizontal position';
		case 'family':
		return 'Font family';
		case 'decoration':
		return 'Text decoration';
		case 'lineheight':
		return 'Line height';
		case 'align':
		return 'Font align';
		case 'letterspacing':
		return 'Letter spacing';
		case 'variant':
		return 'Font variant';
		case 'wordspacing':
		return 'Word spacing';
		case 'transform':
		return 'Transform';
		//case 'family': CASE EXISTS ABOVE
		//return 'Style';
		case 'units':
		return 'Units';
		case 'vertical':
		return 'Vertical';
		case 'zindex':
		return 'Z-Index';
		case 'orientation':
		return 'Orientation';
		case 'horizontal':
		return 'Horizontal';
		case 'position':
		return 'Position';
		case 'image_set':
		return 'Image set';
	}
	return code;
}

function getOptionLabel(code) {
	switch (code) {
case 'underline':
return 'Underline';
case 'overline':
return 'Overline';
case 'line-through':
return 'Line through';
case 'blink':
return 'Horizontal repeat';
case 'top':
return 'Top';
case 'bottom':
return 'Bottom';
case 'middle':
return 'Middle';
case 'scroll':
return 'Scroll';
case 'fixed':
return 'Fixed';
case 'none':
return 'None';
case 'capitalize':
return 'Title case';
case 'uppercase':
return 'Upper case';
case 'lowercase':
return 'Lower case';
case 'ltr':
return 'Left to right';
case 'rtl':
return 'Right to left';
case 'left':
return 'Left';
case 'right':
return 'Right';
case 'center':
return 'Center';
case 'justify':
return 'Justify';
case 'pre':
return 'Pre formatted';
case 'nowrap':
return 'No wrap';
case 'bold':
return 'Bold';
case 'lighter':
return 'Lighter';
case 'small-caps':
return 'Small caps';
case 'left':
return 'Left';
case 'right':
return 'Right';
case 'center':
return 'Center';
case 'no-repeat':
return 'None';
case 'repeat':
return 'Tile';
case 'repeat-x':
return 'Horizontal repeat';
case 'repeat-y':
return 'Vertical repeat';
case 'none':
return 'None';
case 'dotted':
return 'Dotted';
case 'dashed':
return 'Dashed';
case 'solid':
return 'Solid';
case 'double':
return 'Double';
case 'static':
return 'Static';
case 'absolute':
return 'Absolute';
case 'relative':
return 'Relative';
case 'fixed':
return 'Fixed';
case 'topleft':
return 'Top Left';
case 'topright':
return 'Top Right';
case 'bottomright':
return 'Bottom Right';
case 'bottomleft':
return 'Bottom Left';
case 'normal':
return 'Normal';
case 'italic':
return 'Italic';
case 'oblique':
return 'Oblique';
case '%':
return 'percentage';
case 'in':
return 'inch';
case 'cm':
return 'centimeter';
case 'mm':
return 'millimeter';
case 'em':
return 'em';
case 'ex':
return 'x-height';
case 'pt':
return 'point';
case 'pc':
return 'pica';
case 'px':
return 'pixels';}
return code;
}



function closeOtherWindows(settingType){
	for(i in settingTypes){
		if(settingTypes[i] != settingType){
			var windowId = 'edit'+settingTypes[i];
			MM_showHideLayers(windowId,'','hide');
		}		
	}	
}

function closeWindow(settingType){
	var windowId = 'edit'+settingType;
	if(settingType === 'colour'){
		window.frames['colourFrame'].frameClose();
	}
	MM_showHideLayers(windowId,'','hide');
}

function displayColour(settingCode,value){
	if(!testNoColour(value) && value.length > 0 && value.charAt(0) !== '#'){
		value = '#'+value;
	}
	var displayElement = document.getElementById("display_"+settingCode);
	var displayElementText = document.getElementById("display_"+settingCode+"_text");
	displayElementText.firstChild.nodeValue = value;
	if(!testNoColour(value)){
		try{
			displayElement.style.backgroundColor = value;
		}catch(e){}
	}else{
		try{
			displayElement.style.backgroundColor = '#FFFFFF';
		}catch(e){}
	}
}

function updatecolour(settingCode) {
	//debug("updating colour " + settingCode);
	editField = document.getElementById("settingsForm_colour");
	valueElement = "valuesForm_" + settingCode;
	//debug("setting field value for" + valueElement);
	valuesField = document.getElementById(valueElement);
	valuesField.value = editField.value;
	displayColour(settingCode,editField.value);
	var frame = window.frames["colourFrame"];
	frame.document.getElementById("picka").style.backgroundColor = null;
	closeWindow('colour');
}

function editcolour(settingCode) {
	//debug("editing colour " + settingCode);
	closeOtherWindows('colour');
	setHeader(settingCode,'colour');
	setCode(settingCode);
	editField = document.getElementById("settingsForm_colour");
	valuesField = document.getElementById("valuesForm_" + settingCode);
	editField.value = valuesField.value;
	var noColourBox = document.getElementById("settingsForm_colour_none");
	if(testNoColour(valuesField.value)){
		noColourBox.checked = true;
		noColour(noColourBox);
	}else{noColourBox.checked = false;}
	setFrameColours(valuesField.value);
}

function setFrameColours(colour){
	var frame = window.frames["colourFrame"];
	frame.document.getElementById("picka").style.backgroundColor = colour;
	frame.document.getElementById("wheel").style.backgroundColor = colour;
}

function colOnKeyUp(inputElement){
	var val = inputElement.value;
	var regex = new RegExp('^#?[0-9A-Fa-f]{6}$');
	if(regex.test(val)){
		if(val.charAt(0) !== '#'){
			val = '#'+val;
		}
		setFrameColours(val);
	}
}

function testNoColour(value){
	//var regex = new RegExp('none','i');
	var regex = new RegExp('none|inherit|transparent','i');
	return regex.test(value);
}

function noColour(checkBox){
	var editField = document.getElementById("settingsForm_colour");
	if(editField == null){//New styles edit page uses setting codes in fields in the edit window.
		setting_code = document.getElementById("setting_code").value;
		editField = document.getElementById(setting_code+"_valueField");
	}
	if(checkBox.checked){
		setFrameColours(null);
		//editField.value = 'none';
		editField.value = 'transparent';
	}else{
		editField.value = '';
	}
}

function updatemargin(settingCode) {
	//debug("update margin");
	updatebasic(settingCode,"margin");
}
function editmargin(settingCode) {
	//debug("edit margin");
	editbasic(settingCode,"margin");
}
function updatepadding(settingCode) {
	//debug("update padding");
	updatebasic(settingCode,"padding");
}
function editpadding(settingCode) {
	//debug("edit padding");
	editbasic(settingCode,"padding");
}

function updatebasic(settingCode,settingtype) {
	//debug("updating " + settingtype + " " + settingCode);
	editField = document.getElementById("settingsForm_" + settingtype);
	valueElement = "valuesForm_" + settingCode;
	displayField = document.getElementById("value_" + settingCode);
	//debug("setting field value for " + valueElement);
	valuesField = document.getElementById(valueElement);
	valuesField.value = editField.value;
	if (!(displayField == null)) {
		displayField.innerHTML = valuesField.value;
	}
	closeWindow('basic');	
}

function editbasic(settingCode,settingtype) {
	//debug("editing " + settingtype + " " + settingCode);
	closeOtherWindows(settingtype);
	setHeader(settingCode,settingtype);
	setCode(settingCode);
	editField = document.getElementById("settingsForm_" + settingtype);
	valuesField = document.getElementById("valuesForm_" + settingCode);
	editField.value = valuesField.value;
}

function updatefont(settingCode) {
	//debug("updating font " + settingCode);
	var fieldCodes = "family,size,style,weight,align,wordspacing,letterspacing,lineheight,transform";
	var fieldArray = fieldCodes.split(",");
	for (i = 0; i < fieldArray.length; i++) {
		var code = fieldArray[i];
		var editField = document.getElementById("settingsForm_font_" + code);
		var valuesField = document.getElementById("valuesForm_" + settingCode + "_" + code);
		if (code == "family" || code == "size" || code == "letterspacing" || code == "lineheight" || code == "wordspacing") {
			if (valuesField != null) {
				valuesField.value = editField.value;
			}
		}
		if (code == "style" || code == "weight" || code == "align" || code == "transform") {
			if (valuesField != null) {
				valuesField.value = editField.options[editField.selectedIndex].value;
			}
		}
	}
	displayFont(settingCode);
	closeWindow('font');
}

function displayFont(settingCode) {
	var fieldCodes = "family,size,style,weight,align,wordspacing,letterspacing,lineheight,transform";
	var fieldArray = fieldCodes.split(",");
	var displayText = "";
	
	//debug("Displaying font " + settingCode);
	for (i = 0; i < fieldArray.length; i++) {
		var code = fieldArray[i];
		var valuesField = document.getElementById("valuesForm_" + settingCode + "_" + code);
		if (valuesField != null) {
			if (valuesField.value != "") {
				//debug("adding value " + valuesField.value);
				if (displayText != "") displayText = displayText + ", <br>";
				displayText = displayText + '<span class="label">' + getDisplayText(code) + "</span>: " + getOptionLabel(valuesField.value);
			}
		}
		else {
			//debug("No value field found for code " + code + "[valuesForm_" + settingCode + "_" + code + "]");
		}
	}
	////debug("display text = " +displayText);
	var displayField = document.getElementById("display_" + settingCode);
	
	if (displayField != null) {
		displayField.innerHTML = displayText;
	}
	else {
		//debug("display field not found for " + settingCode + "_" + code);
	}
	
}

function editfont(settingCode) {
	//debug("editing font " + settingCode);
	closeOtherWindows('font');
	setHeader(settingCode,'font');
	setCode(settingCode);
	var fieldCodes = "family,size,style,weight,,align,wordspacing,letterspacing,lineheight,transform";
	fieldArray = fieldCodes.split(",");
	for (i = 0; i < fieldArray.length; i++) {
		code = fieldArray[i];
		editField = document.getElementById("settingsForm_font_" + code);
		valuesField = document.getElementById("valuesForm_" + settingCode + "_" + code);
		if (code == "family" || code == "size" || code == "letterspacing" || code == "lineheight" || code == "wordspacing") {
			if (!(valuesField == null)) {
				editField.value = valuesField.value;
			}
			else {
				editField.value = "";
			}
		}
		if (code == "style" || code == "weight" || code == "align" || code == "transform") {
			if (valuesField == null) {
				tmpValue = "";
			}
			else {
				tmpValue = valuesField.value;
			}
			for (j = 0; j < editField.options.length; j++) {
				//debug('Index = ' + editField.options[j].value + ', value is ' + tmpValue);
				if (editField.options[j].value == tmpValue) {
					editField.selectedIndex = j;	
				}
			}
		}
	}
}

function updateposition(settingCode) {
	//debug("updating position " + settingCode);
	fieldCodes = "horizontal,vertical,orientation,position";
	fieldArray = fieldCodes.split(",");
	for (i = 0; i < fieldArray.length; i++) {
		code = fieldArray[i];
		editField = document.getElementById("settingsForm_position_" + code);
		valuesField = document.getElementById("valuesForm_" + settingCode + "_" + code);
		if (code == "horizontal" || code == "vertical") {
			if (!(valuesField == null)) {
				valuesField.value = editField.value;
			}
		}
		if (code == "orientation" || code == "position") {
			if (!(valuesField == null)) {
				valuesField.value = editField.options[editField.selectedIndex].value;
			}
		}
	}
	displayposition(settingCode);
	closeWindow('position');
}

function displayposition(settingCode) {
	fieldCodes = "orientation,horizontal,vertical,position";
	var fieldArray = fieldCodes.split(",");
	var displayText = "";
	
	//debug("Displaying position " + settingCode);
	for (i = 0; i < fieldArray.length; i++) {
		var code = fieldArray[i];
		var valuesField = document.getElementById("valuesForm_" + settingCode + "_" + code);
		if (valuesField.value != "") {
			//debug("adding value " + valuesField.value);
			if (displayText != "") displayText = displayText + ", <br>";
				displayText = displayText + '<span class="label">' + getDisplayText(code) + "</span>: " + getOptionLabel(valuesField.value);
		}
		else {
			//debug("No value set for code " + code + "[valuesForm_" + settingCode + "_" + code + "]");
		}
	}
	var displayField = document.getElementById("display_" + settingCode);
	
	if (displayField != null) {
		displayField.innerHTML = displayText;
	}
	else {
		//debug("display field not found for " + settingCode + "_" + code);
	}
	
}

function editposition(settingCode) {
	//debug("editing position " + settingCode);
	closeOtherWindows('position');
	setHeader(settingCode,'position');
	setCode(settingCode);
	fieldCodes = "horizontal,vertical,orientation,position";
	fieldArray = fieldCodes.split(",");
	for (i = 0; i < fieldArray.length; i++) {
		code = fieldArray[i];
		editField = document.getElementById("settingsForm_position_" + code);
		valuesField = document.getElementById("valuesForm_" + settingCode + "_" + code);
		if (code == "horizontal" || code == "vertical") {
			if (!(valuesField == null)) {
				editField.value = valuesField.value;
			}
			else {
				editField.value = "";
			}
		}
		if (code == "orientation" || code == "position") {
			if (valuesField == null) {
				tmpValue = "";
			}
			else {
				tmpValue = valuesField.value;
			}
			for (j = 0; j < editField.options.length; j++) {
				if (editField.options[j].value == tmpValue) {
					editField.selectedIndex = j;	
				}
			}
		}
	}
}

function updateborder(settingCode) {
	//debug("updating border " + settingCode);
	fieldCodes = "borderwidth,borderstyle";
	fieldArray = fieldCodes.split(",");
	for (i = 0; i < fieldArray.length; i++) {
		code = fieldArray[i];
		editField = document.getElementById("settingsForm_border_" + code);
		valuesField = document.getElementById("valuesForm_" + settingCode + "_" + code);
		displayField = document.getElementById("value_" + settingCode + "_" + code);
		if (code == "borderwidth") {
			if (!(valuesField == null)) {
				valuesField.value = editField.value;
			}
			if (!(displayField == null)) {
				displayField.innerHTML = valuesField.value;
			}
		}
		if (code == "borderstyle") {
			if (!(valuesField == null)) {
				valuesField.value = editField.options[editField.selectedIndex].value;
			}
			if (!(displayField == null)) {
				displayField.innerHTML = editField.options[editField.selectedIndex].text;
			}
		}
	}
	displayborder(settingCode);
	closeWindow('border');
}

function displayborder(settingCode) {
	fieldCodes = "borderwidth,borderstyle";
	var fieldArray = fieldCodes.split(",");
	var displayText = "";
	
	//debug("Displaying border " + settingCode);
	for (i = 0; i < fieldArray.length; i++) {
		var code = fieldArray[i];
		var valuesField = document.getElementById("valuesForm_" + settingCode + "_" + code);
		if (valuesField.value != "") {
			//debug("adding value " + valuesField.value);
			if (displayText != "") displayText = displayText + ", <br>";
			displayText = displayText + '<span class="label">' + getDisplayText(code) + "</span>: " + valuesField.value;
		}
		else {
			////debug("No value found for code " + code + "[valuesForm_" + settingCode + "_" + code + "]");
		}
	}
	////debug("display text = " + displayText);
	var displayField = document.getElementById("display_" + settingCode);
	
	if (displayField != null) {
		displayField.innerHTML = displayText;
	}
	else {
		//debug("display field not found for " + settingCode + "_" + code);
	}
}

function editborder(settingCode) {
	//debug("editing border " + settingCode);
	closeOtherWindows('border');
	setHeader(settingCode,'border');
	setCode(settingCode);
	fieldCodes = "borderwidth,borderstyle";
	fieldArray = fieldCodes.split(",");
	for (i = 0; i < fieldArray.length; i++) {
		code = fieldArray[i];
		editField = document.getElementById("settingsForm_border_" + code);
		valuesField = document.getElementById("valuesForm_" + settingCode + "_" + code);
		if (code == "borderwidth") {
			if (!(valuesField == null)) {
				editField.value = valuesField.value;
			}
			else {
				editField.value = "";
			}
		}
		if (code == "borderstyle") {
			if (valuesField == null) {
				tmpValue = "";
			}
			else {
				tmpValue = valuesField.value;
			}
			for (j = 0; j < editField.options.length; j++) {
				if (editField.options[j].value == tmpValue) {
					editField.selectedIndex = j;	
				}
			}
		}
	}
}

function updatebackground(settingCode) {
	//debug("updating background " + settingCode);
	fieldCodes = "repeat,positionx,positiony,src,attachment,image_set,servers_id";
	fieldArray = fieldCodes.split(",");	
	for (i = 0; i < fieldArray.length; i++) {
		code = fieldArray[i];
		editField = document.getElementById("settingsForm_background_" + code);
		valuesField = document.getElementById("valuesForm_" + settingCode + "_" + code);
		displayField = document.getElementById("value_" + settingCode + "_" + code);
		if (code == "positionx" || code == "positiony" || code == "src" || code == "image_set" || code == "servers_id") {
			if (!(valuesField == null) && !(editField == null)) {
				valuesField.value = editField.value;
			}
			if (!(displayField == null)) {
				displayField.innerHTML = valuesField.value;
			}
		}
		if (code == "repeat" || code == "attachment") {
			if (!(valuesField == null) && !(editField == null)) {
				valuesField.value = editField.options[editField.selectedIndex].value;
			}
			if (!(displayField == null)) {
				displayField.innerHTML = editField.options[editField.selectedIndex].text;
			}
		}		
	}
	displaybackground(settingCode);
	closeWindow('background');
}

function editbackground(settingCode) {
	//debug("editing background " + settingCode);
	closeOtherWindows('background');
	setHeader(settingCode,'background');
	removeChildren('backgroundMessage');
	setCode(settingCode);
	fieldCodes = "repeat,positionx,positiony,src,attachment,image_set,servers_id";
	fieldArray = fieldCodes.split(",");
	for (i = 0; i < fieldArray.length; i++) {
		code = fieldArray[i];
		editField = document.getElementById("settingsForm_background_" + code);
		valuesField = document.getElementById("valuesForm_" + settingCode + "_" + code);
		
		if(!(valuesField == null) && !(editField == null)){
			if (code == "positionx" || code == "positiony" || code == "src" || code == "servers_id") {
				if (!(valuesField == null)) {
					editField.value = valuesField.value;
				}
				else {
					editField.value = "";
				}
			}
			if (code == "repeat" || code == "attachment") {
				if (valuesField == null) {
					tmpValue = "";
				}
				else {
					tmpValue = valuesField.value;
				}
				for (j = 0; j < editField.options.length; j++) {
					if (editField.options[j].value == tmpValue) {
						editField.selectedIndex = j;
					}
				}
			}
			if(code == "image_set" && !(valuesField == null)){
				var imgSetField = document.getElementById("settingsForm_background_image_set_field");
				var uploadField = document.getElementById("settingsForm_background_upload_field");
				if (valuesField != null){
					document.getElementById("settingsForm_background_image_setSelect").disabled = false;
					
					if (valuesField.value != '') {
						editField.value = valuesField.value;
						imgSetField.style.display = "block";
						uploadField.style.display = "none";
					}
					else {
						editField.value = "";
						imgSetField.style.display = "none";
						uploadField.style.display = "block";
					}
				}
				else{
					document.getElementById("settingsForm_background_image_setSelect").disabled = true;
					editField.value = "";
					imgSetField.style.display = "none";
					uploadField.style.display = "block";
				}
			}	
		}
		
	}
	/* we have an extra select list for "none,custom,default" for background type */
	editField = document.getElementById("settingsForm_background_type");
	imgSrcField = document.getElementById("settingsForm_background_src");
	switch (imgSrcField.value) {
		case "none":
		editValue = 'none';
		break;
		case "":
		editValue = 'default';
			if(!(document.getElementById("settingsForm_background_image_set") == null) 
					&& document.getElementById("settingsForm_background_image_set").value != ''){
				editValue = 'image_set';
			}
		break;
		default:
		editValue = 'custom';
	
	}
	for (j = 0; j < editField.options.length; j++) {
		if (editField.options[j].value == editValue) {
			editField.selectedIndex = j;	
		}
	}
	
	servers_id = document.getElementById("settingsForm_background_servers_id").value;
	
	showImage(servers_id);
	
	var frame = window.frames['backgroundFrame'];
	frame.location.href = "styles_image_upload.cfm?settingCode="+settingCode;
}

function displaybackground(settingCode) {
	fieldCodes = "repeat,positionx,positiony,attachment,image_set";
	var fieldArray = fieldCodes.split(",");
	var displayText = "";
	//debug("Displaying background " + settingCode);
	
	var valuesField = document.getElementById("valuesForm_" + settingCode + "_src");
	
	if (valuesField.value == "none") {
		displayText = displayText + "[no image]";
	}
	//else if (valuesField.value == "") {
		//displayText = displayText + "[default image]"; // leave blank
	//}
	else {
		if (valuesField.value == "") {
			//displayText = displayText + "[default image]";
		}
		else{
			displayText = displayText + "[custom image]";
		}
		
		for (i = 0; i < fieldArray.length; i++) {
			var code = fieldArray[i];
			var valuesField = document.getElementById("valuesForm_" + settingCode + "_" + code);
			if (valuesField != null && valuesField.value != '') {
				//debug("adding value " + valuesField.value);
				if (displayText != ""){ displayText = displayText + ", <br>";}
				if(code == 'image_set'){
					displayText = displayText + '<span class="label">' + getDisplayText(code) + "</span>: " + imageSets[valuesField.value];
				}
				else{
					displayText = displayText + '<span class="label">' + getDisplayText(code) + "</span>: " + valuesField.value;
				}
			}
			else if (valuesField != null) {
				//debug("blank value");
			}
			else {
				//debug("No value found for code " + code + "[valuesForm_" + settingCode + "_" + code + "]");
			}
		}
	}
	////debug("display text = " + displayText);
	var displayField = document.getElementById("display_" + settingCode);
	
	if (displayField != null) {
		displayField.innerHTML = displayText;
	}
	else {
		//debug("display field not found for " + settingCode + "_" + code);
	}
}

/* This shows an image in the image editing panel
after upload in IFRAME.  */
function showImage(servers_id,width,height,setting_code) {
	if(setting_code){
		displayField = document.getElementById(setting_code+"_src_valueField");
	}
	else{
		displayField = document.getElementById("settingsForm_background_src");
	}	
	displayContainer = document.getElementById("dspImage");
	if(servers_id && servers_id != ''){
		site_code = document.getElementById("site_code").value;
		imagePath = getServerPath(servers_id,site_code);
	}
	else if(!(document.getElementById("imagePath") == null)){
		imagePath = document.getElementById("imagePath").value;
	}
	else{
		imagePath = '';
	}
	if (displayField.value == '') {
		//debug('Displaying default image');
		displayContainer.innerHTML = "&nbsp;";
		displayContainer.className = "noImage";
	}
	else if (displayField.value == "none") {
		//debug('Displaying no image');
		displayContainer.innerHTML = "&nbsp;";
		displayContainer.className = "noImage";
	}
	else {
		if(width && height){
			img = new Image(width,height);
		}
		else{
			img = new Image();
		}		
		img.src = imagePath+"/" + displayField.value;
		img.id = "image";
		img.onload = imgOnLoad;
		removeChildren(displayContainer);
		displayContainer.appendChild(img);
		// Reset the dimensions on the container.
		displayContainer.style.width = "";
		displayContainer.style.height = "";
		displayContainer.className = "hasImage";
	}
}

function imgOnLoad(){
	// If there're dimensions for the image then set them on the container.
	var dspImage = document.getElementById("image");
	if(typeof dspImage != null){
		width = dspImage.offsetWidth;
		height = dspImage.offsetHeight;	
	}
	if(width != 'undefined' && height != 'undefined'){
		// Do some reduction to accommodate the scrollbars in FF.
		if(width < 280){
			if(width < 20){width = 20;}//Need to increase for very small images.
			width = parseInt(width)+20;
			displayContainer.style.width = width+'px';
		}
		if(height < 180){
			if(height < 20){height = 20;}
			height = parseInt(height)+20;
			displayContainer.style.height = height+'px';
		}
	}
}

function showbackgroundFields(imageOption,settingCode) {
	editField = document.getElementById("settingsForm_background_src");
	removeChildren('backgroundMessage');
	if(imageOption != 'image_set'){
		imageSetField = document.getElementById("settingsForm_background_image_set_field");
		if(!(imageSetField == null)){
			imageSetField.style.display = "none";
		}
		imageSet = document.getElementById("settingsForm_background_image_set");
		if(!(imageSet == null)){
			imageSet.selectedIndex = 0;
		}
		uploadField = document.getElementById("settingsForm_background_upload_field");
		if(!(uploadField == null)){
			uploadField.style.display = "block";
		}
	}
	if (imageOption == 'none') {		
		if(!(editField.value == '' || editField.value == 'none')){
			if(confirm('Remove image and settings?')){deletebackground(settingCode);}
		}
		else{deletebackground(settingCode);}
	}
	else if (imageOption == 'default') {
		if(!(editField.value == '' || editField.value == 'none')){
			if(confirm('Remove image?')){
				editField = document.getElementById("settingsForm_background_src");
				editField.value = "";
			}
		}
		else{editField = document.getElementById("settingsForm_background_src");
			editField.value = "";
		}
	}
	else if (imageOption == 'custom') {
		if(editField.value == '' || editField.value == 'none'){
			addMessage('backgroundMessage','Make sure you upload an image.');
		}
	}
	else if (imageOption == 'image_set') {
		addMessage('backgroundMessage','Make sure you select an image set.');
		document.getElementById("settingsForm_background_image_set_field").style.display = "block";
		document.getElementById("settingsForm_background_upload_field").style.display = "none";
		document.getElementById("settingsForm_background_src").value = "";
	}
	showImage();
}

function deletebackground(settingCode) {
	editField = document.getElementById("settingsForm_background_positionx");
	editField.value = "";
	editField = document.getElementById("settingsForm_background_positiony");
	editField.value = "";
	editField = document.getElementById("settingsForm_background_src");
	editField.value = "none";
	editField = document.getElementById("settingsForm_background_servers_id");
	editField.value = "";
	editField = document.getElementById("settingsForm_background_repeat");
	for (i =0; i < editField.options.length; i++) {
		if (editField.options[i].value == '') {
			editField.options.selectedIndex = i;
		}
	}
	editField = document.getElementById("settingsForm_background_type");
	for (i =0; i < editField.options.length; i++) {
		if (editField.options[i].value == 'none') {
			editField.options.selectedIndex = i;
		}
	}
	displaybackground(settingCode);
}

function defaultbackgroundsettings(settingCode) {
	editField = document.getElementById("settingsForm_background_positionx");
	editField.value = "";
	editField = document.getElementById("settingsForm_background_positiony");
	editField.value = "";
	editField = document.getElementById("settingsForm_background_src");
	editField.value = "";
	editField = document.getElementById("settingsForm_background_servers_id");
	editField.value = "";
	
	optionsElements = "repeat,attachment,image_set";
	optionsElements = optionsElements.split(',');
	
	for(var j=0; j<optionsElements.length; j++){
		editField = document.getElementById("settingsForm_background_"+optionsElements[j]);
		if(!(editField == null)){
			for (i =0; i < editField.options.length; i++) {
				if (editField.options[i].value == '') {
					editField.options.selectedIndex = i;
				}
			}
		}		
	}
	// Default option value is 'default' here.
	editField = document.getElementById("settingsForm_background_type");
	for (i =0; i < editField.options.length; i++) {
		if (editField.options[i].value == 'default') {
			editField.options.selectedIndex = i;
		}
	}
	
	displaybackground(settingCode);
}

function defaultfontsettings(settingCode) {
	setCode(settingCode);
	editField = document.getElementById("settingsForm_font_family");
	editField.value = "";
	editField = document.getElementById("settingsForm_font_size");
	editField.value = "";
	editField = document.getElementById("settingsForm_font_wordspacing");
	editField.value = "";
	editField = document.getElementById("settingsForm_font_letterspacing");
	editField.value = "";
	editField = document.getElementById("settingsForm_font_lineheight");
	editField.value = "";
	editField = document.getElementById("settingsForm_font_style");
	for (i =0; i < editField.options.length; i++) {
		if (editField.options[i].value == '') {
			editField.options.selectedIndex = i;
		}
	}
	editField = document.getElementById("settingsForm_font_weight");
	for (i =0; i < editField.options.length; i++) {
		if (editField.options[i].value == '') {
			editField.options.selectedIndex = i;
		}
	}
	editField = document.getElementById("settingsForm_font_transform");
	for (i =0; i < editField.options.length; i++) {
		if (editField.options[i].value == '') {
			editField.options.selectedIndex = i;
		}
	}
	editField = document.getElementById("settingsForm_font_align");
	for (i =0; i < editField.options.length; i++) {
		if (editField.options[i].value == '') {
			editField.options.selectedIndex = i;
		}
	}
}

function defaultpositionsettings(settingCode) {
	setCode(settingCode);
	editField = document.getElementById("settingsForm_position_horizontal");
	editField.value = "";
	editField = document.getElementById("settingsForm_position_vertical");
	editField.value = "";
	editField = document.getElementById("settingsForm_position_orientation");
	for (i =0; i < editField.options.length; i++) {
		if (editField.options[i].value == '') {
			editField.options.selectedIndex = i;
		}
	}
	editField = document.getElementById("settingsForm_position_position");
	for (i =0; i < editField.options.length; i++) {
		if (editField.options[i].value == '') {
			editField.options.selectedIndex = i;
		}
	}
}

function defaultbordersettings(settingCode) {
	setCode(settingCode);
	editField = document.getElementById("settingsForm_border_borderwidth");
	editField.value = "";
	editField = document.getElementById("settingsForm_border_borderstyle");
	for (i =0; i < editField.options.length; i++) {
		if (editField.options[i].value == '') {
			editField.options.selectedIndex = i;
		}
	}
}

function defaultcoloursettings(settingCode){
	setCode(settingCode);
	editField = document.getElementById("settingsForm_colour");
	editField.value = "";
}

function addMessage(node,message,otherWindow){
	if(typeof node === "string"){
		node = document.getElementById(node);
	}
	node.innerHTML = message;
//	removeChildren(node);
//	if(!otherWindow){
//		var messageNode = document.createTextNode(message);
//	}else{
//		console.info(window.frames[otherWindow]);
//		var messageNode = window.frames[otherWindow].document.createTextNode(message);
//	}	
//	node.appendChild(messageNode);
}

function removeChildren(node){
	if(typeof node === "string"){
		//debug('Node is ' + node);
		node = document.getElementById(node);
	}
	if(node != null){
		while(node.hasChildNodes()){
			try{
				node.removeChild(node.firstChild);
			}catch(e){}
		}
	}
	else {
		//debug('Node is not node');
	}
}

function setHeader(settingCode,settingType){
	var label = document.getElementById(settingCode+'_label');
	var header = document.getElementById('edit'+settingType+'_header_text');
	var children = label.childNodes;
	//debug('Adding header for ' + label);
	addMessage(header,label.firstChild.data);
}