function ShowMailingListForm()
{
	//note the MailChimp URL is also set in Config.php

	var PopupHTML = "";
	PopupHTML	+= "<div id='MailingListFormWrapper'>";
	PopupHTML	+= "	<p>Enter your e-mail address below and we will keep you up to date on our newest products and promotions!</p>";
	PopupHTML	+= 	"<form name='MailingListForm'>";
	PopupHTML	+= 		"<table cellpadding='5' cellspacing='0' border='0' width='100%'>";
	PopupHTML	+= 			"<tr>";
	PopupHTML	+= 				"<td>E-mail:</td>";
	PopupHTML	+= 				"<td><input style='width: 100%; ' type='text' id='SignUpInput' name='email' value='' /></td>";
	PopupHTML	+= 			"</tr>";
	PopupHTML	+= 			"<tr>";
	PopupHTML	+= 				"<td colspan='2' align='center'>";
	PopupHTML	+= 					"<input type='button' name='Submit' value='Submit' onclick='SubmitMailingListForm(); return false;' />";
	PopupHTML	+= 				"</td>";
	PopupHTML	+= 			"</tr>";
	PopupHTML	+= 			"<tr>";
	PopupHTML	+= 				"<td colspan='2'>";
	PopupHTML	+= 					"<div id='FormError' style='color: red; font-weight: bold;'></div>";
	PopupHTML	+= 				"</td>";
	PopupHTML	+= 			"</tr>";
	PopupHTML	+= 		"</table>";
	PopupHTML	+= 	"</form>";
	PopupHTML	+= "</div>";

	ShowPopup("Mailing List", PopupHTML);
}


function SubmitMailingListForm()
{
	//1.	Ensure entered valid e-mail
	//2.	Submit form via AJAX
	//3.	Show success message.
	
	//1.
	if (!IsValidEmail(document.MailingListForm.email.value))
	{
		document.getElementById('FormError').innerHTML = "Please enter a valid e-mail address.";
		FocusOnField(document.MailingListForm.email);
		return false;
	}

	var EmailValue	= document.MailingListForm.email.value;			//copy the value before removing the HTML
	document.getElementById('MailingListFormWrapper').innerHTML = "<p style='text-align: center;'><img src='/images/Loading.gif' alt='Loading...' /></p>";
	
	//2.
	var Parameters = "JoinMailingList=1&EmailAddress=" + EmailValue;
	var MyAjax = new AjaxConnection("/ajax/ajax_join_our_mailing_list.php", Parameters, "AfterSubmitMailingListForm"); 
}


function AfterSubmitMailingListForm(xml, text)
{
	var ErrorMessage = "";
	
	if (xml.getElementsByTagName('ErrorMessage')[0].childNodes[0])
		ErrorMessage = xml.getElementsByTagName('ErrorMessage')[0].childNodes[0].nodeValue;

	if (ErrorMessage.length <= 0)
		document.getElementById('MailingListFormWrapper').innerHTML = "Thank you!  You will receive a confirmation e-mail to finalize the sign-up process.";
	else
		document.getElementById('MailingListFormWrapper').innerHTML = "Error! " + ErrorMessage;
}


function SetBackgrounds(elem)
{
	//1.	Remove background-color from all elements
	//2.	Add background-color to this element

	//1.
	//ClearBackgrounds();

	//2.
	elem.style.backgroundColor = "#FFFF99";
}


function ClearBackgrounds(MyForm)
{
	for(i = 0; i < MyForm.elements.length; i++)
		MyForm.elements[i].style.backgroundColor = "";
}


function CentreImages()
{
	//1.	Go over the children of "CategoryContentWrapper"
	//2.	If the class is "ProductPreview", align it

	var IMAGE_WRAPPER_WIDTH = 200;
	var MyImage;

	//1.
	for (var i = 0; i < document.getElementById('CategoryContentWrapper').getElementsByTagName('img').length; i++)
	{
		if (document.getElementById('CategoryContentWrapper').getElementsByTagName('img')[i].className == "ProductPreview")
		{
			MyImage = document.getElementById('CategoryContentWrapper').getElementsByTagName('img')[i];

			//2.
			if (MyImage.width > IMAGE_WRAPPER_WIDTH)
			{
				MyImage.style.position = "relative";
				MyImage.style.left = "-" + ((MyImage.width - IMAGE_WRAPPER_WIDTH) / 2) + "px";
			}
		}
	}
}