loadCss('http://images.barnesandnoble.com/css/tellafriend.css');

var windowId = "window_id"

var emailForm = "emailForm"; // Element id that contains the email form
var errorContainerId = "errorContainer"; // Element id that will contain the error messages

var captchaLayer = "captchaWrapper";
var captchaErrorContainerId = "captchaErrorContainer"

var ean, productType;
var recipientEmail, senderEmail, senderName, personalNote; // holds the value of the input text fields
var isCopyToBeSent = false;

// whitespace characters
var whitespace = " \t\n\r";
var defaultTextColor = "#333";
var errorTextColor = "#c00";

var msgRequiredField = "Some required fields have been left blank. Please fill in the designated fields below.";
var msgInvalidSenderEmail = "Your email address was not formatted correctly. Please reenter it. Each address must follow this format: yourname@domain.com.";
var msgInvalidRecipientEmails = "The recipient email address you entered was not formatted correctly. Please check the email address and reenter it. Each address must follow this format: recipientname@domain.com."
var msgTooManySenderEmails = "Only one sender address can be used for Email a Friend. Please edit your entry.";
var msgTooManyEmails = "You have exceeded the limit of 5 recipients per email. Please edit your recipient email addresses. You can always send a second email to additional recipients."
var msgCharsNotAllowed = "Your message contains one or more characters that cannot be used by this email system for security reasons.  Please remove any of the following characters  : ; $ <> () ! # % +  from your message."

var instructionRecipientEmails = "Enter up to five email addresses, separated by commas.";
var instructionPersonalNote = "Limit:250 characters.";
var instructionCaptcha = "You may use upper- or lower-case letters";

var findEAN = new RegExp("(?:EAN|ISBN)=([0-9]{10,13})&?", "i");
var findProductType = new RegExp("(?:&|&amp;)(?:ProductType)=([A-Z]{2})&?", "i");

function addEvent(obj, evType, fn, useCapture){
	if (obj.addEventListener) {
		obj.addEventListener(evType, fn, useCapture);
		return true;
	} else if (obj.attachEvent) {
		var r = obj.attachEvent("on"+evType, fn);
		return r;
	} else {
		alert("Handler could not be attached");
	}
}

function buildForm() {
	
	var string = "\
		<div id='" + emailForm + "'>" + "\
		<h1>Email a friend</h1><div id='" + errorContainerId + "' style='display: none;'><div class='exclaim'>! </div><div id='errorMsg'></div><div style='clear:both'></div></div>\
		<div id='content'><h2 id='intro' style='display: none'>Tell a friend about this item at Barnes & Noble.com.</h2><div id='productDataSpinner'>Loading...</div>\
			</div>\
			<div id='confirmation' style='display:none'></div>\
			<div id='formContents'>\
				<div class='row'><label class='fieldLabel' for='RecipientEmails'>To:<span class='required'>*</span></label><textarea id='RecipientEmails' wrap='physical' rows='4' cols='50' onkeyup='validateTextArea(\"RecipientEmails\")' style='overflow:visible'>" + instructionRecipientEmails + "</textarea></div>\
				<div class='row'><label class='fieldLabel' for='PersonalNote'>Personal Message:</label><textarea class='inputTextarea' ID='PersonalNote' rows='4' cols='50' wrap='physical' onkeyup='validateTextArea(\"PersonalNote\")' style='overflow:visible'>" + instructionPersonalNote + "</textarea></div>\
				<div class='row'><label class='fieldLabel' for='SenderName'>Your Name:<span class='required'>*</span></label><input class='inputText' id='SenderName' maxlength='50' /></div>\
				<div class='row'><label class='fieldLabel' for='SenderEmail'>Your Email Address:<span class='required'>*</span></label><input class='inputText' id='SenderEmail' maxlength='50' /></div>\
				<div class='row'><label class='fieldLabel'>&nbsp;</label><input type='checkbox' id='sendCopyCheckBox' /><label for='sendCopyCheckBox'>Send me a copy of this email</label></div>\
				<div class='row'><label class='fieldLabel'>&nbsp;</label><button id='PreviewEmail' type='button'>Preview</button> <button id='ContinueButton' type='button'>Continue</button></div>\
				<div id='spinner'><div id='indicator'></div></div>\
				<br class='clearfix' />\
				<div id='privacy'>\
					<hr />\
					<span class='field'><span class='required'>*</span>Required Field</span>\
					Email address will only be used to send this message. They will not be used for promotional purposes. See our <a href='http://www.barnesandnoble.com/help/cds2.asp?PID=8104&z=y' target='_blank'>Privacy Policy</a>.\
				</div>\
			</div>\
		</div>\
		<div id='captchaWrapper' class='fauxWindow' style='display:none'></div>\
		";

	return string;
}

function buildCaptcha()
{
	var captchaBlock = "\
		<h3>You're almost done</h3>\
		<div class='dialog_close' onclick='stepBackFromCaptcha()'></div>\
		<div id='captchaErrorContainer' style='display: none'><div class='exclaim'>! </div><div id='captchaErrorMsg'></div></div>\
		<p><span class='required'>*</span>As a final step, please enter the characters below into the box provided. This system protects our customers from computer-generated spam and is the last step in sending your email.</p>\
		<p>Can't see the image? <a href='http://portal.barnesandnoble.com/tellafriend/CAPTCHAaudio.asp'>Listen to the audio version</a></p>\
		<div id='captchaRow'>\
			<div class='captchaDiv'>\
				<div class='captchaImageContainer'><img id='captchaImage' src='http://portal.barnesandnoble.com/tellafriend/CAPTCHAimage.asp' /></div>\
				<div id='refresh-link'>&raquo;&nbsp;<a href='#' onclick='refreshOnClick(); return false;'>Refresh this image</a></div>\
			</div>\
			<div id='captchaButtons'>\
				<label><span class='required'>*</span>Enter Characters:</label><br /><input ID='SecurityCode' value='" + instructionCaptcha + "' onclick='resetSecurityCode()' maxlength='40' />\
				<button id='SendEmail' type='submit' onclick='sendEmail()'>Send Email</button>\
			</div>\
		</div>\
	";
	
	return captchaBlock;
}

function getProductData()
{
	var link = $("tellafriendLink");
	var found = link.href.match(findEAN);
	if (found && found.length==2)
		ean = found[1];
	
	var foundProductType = link.href.match(findProductType);
	if (foundProductType && foundProductType.length==2)
		productType = foundProductType[1];
	
	var url = "http://portal.barnesandnoble.com/TellAFriend/ajax_ProductData.asp?CBF=insertProductData&ean=" + ean + "&ProductType=" + productType

	loadScript(url, "productDataScript");
}

function insertProductData(response)
{
	Element.hide("productDataSpinner");
	if (response.status=="0") 
		$("content").innerHTML += response.innerhtml;
	else
		$("content").innerHTML += response.errors[0].desc;
}	

function getUserData()
{
	var url = "http://portal.barnesandnoble.com/TellAFriend/ajax_BNPDS.asp?CBF=insertUserData";
	
	loadScript(url, "userData");
}

function insertUserData(response)
{
	if (response.status=="0")
	{
		$("SenderEmail").value = response.senderemail;
		$("SenderName").value = response.sendername;
	}
}

function getInputFieldValues()
{
	recipientEmail = $F("RecipientEmails");
	senderEmail = $F("SenderEmail");
	senderName = $F("SenderName");
	personalNote = $F("PersonalNote");
	isCopyToBeSent = $("sendCopyCheckBox").checked;
}

function buildPreview()
{
	getInputFieldValues();
	
	var previewWrapper = $("taf-preview");
	
	var preview = "<div id='taf-preview'></div>\
	<div id='previewButtons' style='display: none'>&nbsp;<button type='button' id='EditButton' onclick='editEmailForm()'>Edit</button><button type='button' id='ContinueButton' onclick='continueFromPreview()'>Continue</button></div>\
	"
	
	// preview is built for the first time
	if (previewWrapper==null)
		$("window_id_content").innerHTML += preview;
	
	restoreInputFieldValues();
	showOverlay();
	Element.show($("spinner"));
	getPreview();
}

function buildConfirmation()
{	
	var confirmation="\
	<h3>Thank you for using Email A Friend</h3>\
	<strong>We have sent your email to the following address(es):</strong>\
	<div id='emailList'>" + getListOfRecipients() + "</div>\
	";
	
	Element.show("SendAnotherButton");
	
	var confirmationWrapper = $("confirmation");
	confirmationWrapper.innerHTML = confirmation;
	
	if (isCopyToBeSent)
		renderCopySent();
		
	hideCaptcha();
	var form = $("formContents");
	Element.show(confirmationWrapper);
	Element.hide("intro");
	Element.hide(form);
	
	hidePreview();
}

function getListOfRecipients()
{
	var emails = recipientEmail.split(",");
	
	var list = "";
	for (var i=0; i<emails.length; i++)
	{
		list += emails[i] + "<br />"
	}
	
	return list;
	
}

function renderCopySent()
{
	$("emailList").innerHTML += "<div id='copySent'>\
		<strong>We also sent a copy to you at: </strong><span>" + senderEmail + "</span>\
	</div>\
	"
}

function resetInputField(inputObj)
{
	inputObj.value="";
}

function resetRecipientEmails()
{
	var recipientEmailsField = $("RecipientEmails")
	recipientEmailsField.style.color = defaultTextColor;
	if (recipientEmailsField.value == instructionRecipientEmails)
		resetInputField(recipientEmailsField);
}

function resetSenderName()
{
	var senderEmailField = $("SenderName")
	senderEmailField.style.color = defaultTextColor;
}

function resetSenderEmail()
{
	var senderEmailField = $("SenderEmail")
	senderEmailField.style.color = defaultTextColor;
}

function resetPersonalNote()
{
	var personalNoteField = $("PersonalNote")
	personalNoteField.style.color = defaultTextColor;
	if (personalNoteField.value == instructionPersonalNote)
		resetInputField(personalNoteField);
}

function resetSecurityCode()
{
	var securityCodeField = $("SecurityCode");
	securityCodeField.style.color = defaultTextColor;
	if (securityCodeField.value == instructionCaptcha)
		resetInputField(securityCodeField);
}

// Check whether string s is empty.
function isEmpty(s) {   
	return ((s == null) || (s.length == 0))
}

/* Returns true if string s is empty or whitespace characters only. */
function isWhitespace(s) {   
	var i;
    if (isEmpty(s)) return true;

    /*	Search through string's characters one by one
		until we find a non-whitespace character.
		When we do, return false; if we don't, return true. 
	*/
    for (i = 0; i < s.length; i++)
    {   
		// Check that current character isn't whitespace.
		var c = s.charAt(i);
		if (whitespace.indexOf(c) == -1) return false;
    }
    // All characters are whitespace.
    return true;
}

function validate()
{
	resetErrorMessage(emailForm);
	var requiredFieldsVaildated = validateAllRequiredFields();
	var recipientEmailsVaildated = validateRecipientsEmailField($("RecipientEmails"));
	var senderEmailValidated = validateSenderEmailField($("SenderEmail"));
	//var personalNoteValidated = validatePersonalMessage();
	var senderNameValidated = validateSenderName();
	if (requiredFieldsVaildated && recipientEmailsVaildated && senderEmailValidated && senderNameValidated)	
		return true;
	return false;
}

function validateAllRequiredFields()
{
	var inputFields = $("RecipientEmails","SenderName","SenderEmail");
	var numOfErrors = 0;
	for(i=0; i<inputFields.length; i++)
	{
		var valid = validateRequiredField(inputFields[i]);
		
		// unhighlight first so if user corrects the field the second time, it won't be highlighted as an error
		unHighlightField(inputFields[i]);
		if (!valid) {
			highlightField(inputFields[i]);
			numOfErrors++
		}
	}
	
	// Should only display msgRequiredField once even when more than one fields are empty
	if (numOfErrors > 0) {
		setErrorMessage(emailForm, msgRequiredField); 
		return false;
	}
	
	return true;
}

function validateRequiredField(inputFieldObj)
{
	var strField = $F(inputFieldObj);
	if (isWhitespace(strField) || strField==instructionRecipientEmails)
		return false;

	return true;
}

function resetErrorMessage(layer)
{
	var containerId, msgDivId;
	if (layer == emailForm) {
		containerId = errorContainerId;
		msgDivId = "errorMsg";
	}
	
	$(msgDivId).innerHTML = "";
	Element.hide(containerId);
}

function setErrorMessage(layer, msg)
{
	var containerId, msgDivId;
	if (layer == emailForm)
	{
		containerId = errorContainerId;
		msgDivId = "errorMsg";
	}
	else if (layer = captchaLayer)
	{
		containerId = captchaErrorContainerId;
		msgDivId = "captchaErrorMsg"
	}
	
	Element.show(containerId);
	var errorMessage = $(msgDivId).innerHTML;
	if (errorMessage != "" && errorMessage != "&nbsp;")
		$(msgDivId).innerHTML += "<br />" + msg + "<br />";
	else
		$(msgDivId).innerHTML = msg + "<br />";
}

function validatePersonalMessage()
{
	unHighlightField($("PersonalNote"));
	var illegalChars = /[\(\)\<\>\;\:\\\"\[\]\*\/\#\%\$\&\@\^\{\}\|\+\=\~\`\!]/
	
	var message = $F("PersonalNote");
	
	if (message.length > 250)
	{
		setErrorMessage(emailForm, "The personal note is limited to 250 characters.");
		highlightField($("PersonalNote"));
		return false;
	}
	
	if (message != instructionPersonalNote) {
		if (message.match(illegalChars)) {
			setErrorMessage(emailForm, msgCharsNotAllowed);
			highlightField($("PersonalNote"));
			return false;
		}
	}
	return true;

}

function validateSenderName()
{
	var illegalChars = /[\(\)\<\>\,\;\:\\\"\[\]\*\/\#\%\$\!\&\@\.\^\+\=\{\}\|\?\~\`]/
	var senderNameValue = $F("SenderName");
	if (senderNameValue.match(illegalChars))
	{
		setErrorMessage(emailForm, "Your name contains one or more characters that cannot be used by this email system for security reasons. Please remove any of the following characters : ; $ &lt;&gt; () ! # % + from your name.");
		highlightField($("SenderName"));
		return false;
	}
	
	return true;
}

function validateSenderEmailField(inputObj)
{
	var strng = $F(inputObj);
	try {
		if (strng=="")
			return false;
		if (strng.split(",").length > 1)
			setErrorMessage(emailForm, msgTooManySenderEmails);
		if (!validateEmail(strng)) {
			setErrorMessage(emailForm, msgInvalidSenderEmail);
			highlightField(inputObj);	
			return false;
		}
		return true;
	}
	catch(e) { return false; }
}

function validateRecipientsEmailField(inputObj)
{
	var numOfErrors = 0;
	var numOfInvalidEmails = 0;
	var strng = $F(inputObj);
	
	if (strng==instructionRecipientEmails || strng=="")
	{
		highlightField(inputObj);
		return false;
	}
	
	if (strng.length > 250) {
		setErrorMessage(emailForm, "The recipient field is limited to 250 characters.")
		highlightField(inputObj);
		return false;
	}
	
	var emails;
	if (strng.indexOf(";")>-1)
		emails = formatEmails(strng).split(",");
	else
		emails = strng.split(",");
	
	if (emails.length > 5) {
		setErrorMessage(emailForm, msgTooManyEmails);
		numOfErrors++
	}
	
	for (var i=0; i<emails.length; i++)
	{
		if (!validateEmail(emails[i])) {
			numOfInvalidEmails++
			numOfErrors++;
		}
	}
	
	if (numOfInvalidEmails > 0)
		setErrorMessage(emailForm, msgInvalidRecipientEmails);
	
	if (numOfErrors > 0) {
		highlightField(inputObj);
		return false;
	 }
	
	return true;
}

function validateTextArea(textArea)
{
	var strng = $F(textArea);
	$(textArea).style.overflow = "visible";
	if (strng.length > 50) {
		$(textArea).style.overflow = "";
	}
	if (strng.length > 250) {
		$(textArea).value =  $F(textArea).substring(0, 250);
	}
}

function highlightField(inputObj) {
	rowObj = inputObj.parentNode;
	inputObj.style.color = errorTextColor;
	rowObj.className = "error";
}

function unHighlightField(inputObj) {
	rowObj = inputObj.parentNode;
	rowObj.className = "row";
}

/****************************************************************/

function showWindow()
{
	var win = new Window(windowId, {className: "dialog", width: 520, left: 228, top: 155, zIndex: 5}) 
	win.getContent().innerHTML = buildForm();
	getUserData();
	getProductData();
	win.show();
	win.setDestroyOnClose(); 

	initializeEmailForm();
}

function initializeEmailForm()
{
	Element.hide($("overlay-div"));
	Element.hide($("spinner"));
	Element.hide($("SendAnotherButton"));
	Element.show($("intro"));
	addEvent($("RecipientEmails"), "focus", resetRecipientEmails, false);
	addEvent($("SenderName"), "focus", resetSenderName, false);
	addEvent($("SenderEmail"), "focus", resetSenderEmail, false);
	addEvent($("PersonalNote"), "focus", resetPersonalNote, false);

	addButtonEvents();
}

function addButtonEvents()
{
	addEvent($("ContinueButton"), "click", runContinueEvents, false);
	addEvent($("PreviewEmail"), "click", runPreviewEvents, false);
}

function runPreviewEvents()
{
	if (validate()) {
		buildPreview();
	}
}

function continueFromPreview()
{
	showCaptcha();
}

function restoreInputFieldValues()
{
	$("RecipientEmails").value = recipientEmail;
	$("PersonalNote").value = personalNote;
	$("SenderName").value = senderName;
	$("SenderEmail").value = senderEmail;
	$("sendCopyCheckBox").checked = isCopyToBeSent; 
}

function editEmailForm()
{
	restoreInputFieldValues();
	
	Element.hide($("taf-preview"));
	Element.hide($("previewButtons"));
	Element.show($(emailForm));
		
	initializeEmailForm();
}

function runContinueEvents()
{
	if (validate())
		showCaptcha();
}

function showCaptcha()
{
	getInputFieldValues();
	
	showOverlay();
	
	restoreInputFieldValues();

	
	var captchaContainer = $("captchaWrapper");
	
	captchaContainer.innerHTML = buildCaptcha();

	refreshImage();
	Element.show(captchaContainer);
}

function hideCaptcha()
{
	hideOverlay();
	var captchaContainer = $("captchaWrapper");
	Element.hide(captchaContainer);
}

function stepBackFromCaptcha()
{
	hideCaptcha();
	restoreInputFieldValues();
	
	initializeEmailForm();
}

function showOverlay()
{
	try {
		var overlay = $("overlay-div");
		Element.show(overlay);
		overlay.style.width = $("dialog_row1").clientWidth + 1 + 'px'
		overlay.style.height = $("dialog_row1").clientHeight + 1 + 'px';
		overlay.style.display = "block";
	}
	catch(e) {
		alert("Overlay cannot be displayed - dialog id cannot be found");
	}
}

function hideOverlay()
{
	var overlay = $("overlay-div");
	Element.hide(overlay);
}

function hidePreview()
{
	var previewContainer = $("taf-preview");
	if (previewContainer) {
		Element.hide(previewContainer);
		Element.hide($("previewButtons"));
	}
	Element.show($(emailForm));
}

function refreshImage()
{
	$("captchaImage").src="http://portal.barnesandnoble.com/tellafriend/CAPTCHAimage.asp?" + Math.random();
}

function refreshOnClick()
{
	refreshImage();
	$("SecurityCode").value = "";
}

function getFormFields()
{
	getInputFieldValues();
	
	var params = "SenderName=" + encodeURIComponent(senderName)
		+ "&" + "SenderEmail=" + encodeURIComponent(senderEmail)
		+ "&" + "RecipientEmails=" + encodeURIComponent(recipientEmail);
	
	if (isCopyToBeSent)
		params += "," + senderEmail;
		
	if (personalNote!=instructionPersonalNote)
		params += "&" + "PersonalNote=" + encodeURIComponent(personalNote);
	
		
	return params;
}

function getPreview()
{
	var params = getFormFields();
		
	var url = "http://portal.barnesandnoble.com/TellAFriend/ajax_EmailPreview.asp?CBF=showPreview&" + params +
	"&PageURL=" + encodeURIComponent(location.href) +
	"&PageTitle=" + encodeURIComponent("Tell a friend") +
	"&ProductType=" + productType + 
	"&ean=" + ean;
	
	loadScript(url, "previewScript");
}

function showPreview(response) {

	if (response.status=="0") {
		Element.hide($(emailForm));
		hideOverlay();
		$("taf-preview").innerHTML = response.innerhtml;
		Element.show($("taf-preview"));
		Element.show($("previewButtons"));
	}
	else {
		setErrorMessage(emailForm, response.errors[0].desc);
		initializeEmailForm();
	}
	
}

function sendEmail()
{
	if (validateCaptcha())
	{
		var params = getFormFields();
		var securityCode = $F("SecurityCode");
		
		var url = "http://portal.barnesandnoble.com/TellAFriend/ajax_SendingEmail.asp?CBF=sendEmailCallback&" + params +
		"&PageURL=" + encodeURIComponent(location.href) +
		"&PageTitle=" + encodeURIComponent("Tell a friend") +
		"&ProductType=" + productType +
		"&ean=" + ean +
		"&SecurityCode=" + securityCode;
		
		loadScript(url, "sendScript");	
	}
}

function sendEmailCallback(response)
{
	if (response.status=="0")
		buildConfirmation();
	else {
		setErrorMessage(captchaLayer, response.errors[0].desc);
		$("captchaRow").className = "error";
		$("SecurityCode").value="";
		refreshImage();
		hidePreview();
	}
		
}

function validateCaptcha()
{
	$("captchaRow").className = "";
	$("captchaErrorMsg").innerHTML = "";
	Element.hide(captchaErrorContainerId);

	var illegalChars = /[\(\)\<\>\,\;\:\\\"\[\]\*\/\#\%\$\!\&\@\.\^\+\=\{\}\|\?\~\`]/;
	
	var code = $F("SecurityCode");
	
	if (code.length == 0 || code == instructionCaptcha) {
		setErrorMessage(captchaLayer, "Please enter the word shown in the box below.");	
		$("captchaRow").className = "error";
		return false;
	}
	if (code.match(illegalChars)) {
		setErrorMessage(captchaLayer,"Your entry did not match the word shown in the box below. Please try again.");	
		$("captchaRow").className = "error";
		return false;
	}
	
	return true;
}

function sendAnother()
{
	Element.show($("formContents"));
	Element.hide($("confirmation"));
	
	initializeEmailForm();
	
	$("RecipientEmails").value = "";
	$("PersonalNote").value = "";
	$("sendCopyCheckBox").checked = false;

}

function loadScript(url, id)
{
	var script = $(id);
	if (script) {
		script.parentNode.removeChild(script);
	}

	script = document.createElement("script");
	script.type = "text/javascript";
	script.id = id;	
	
	script.src = url;
		
	document.getElementsByTagName("head")[0].appendChild(script);
}
function validateEmail(email_address)
{
	at = email_address.indexOf('@');
	dot = email_address.indexOf('.');

	if(at == -1 || dot == -1 || dot == 0 || dot == email_address.length - 1)
		return false;

	user_name = email_address.substr(0, at);
	domain_name = email_address.substr(at + 1, email_address.length);                  

	if(containsValidCharacters(trimString(user_name)) == false || containsValidCharacters(trimString(domain_name)) == false)
		return false;           
	
	var emailFilter = /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/
	if (!(emailFilter.test(email_address)))
		return false;           

	return true;
}

function containsValidCharacters(strng)
{
	var valid_chars = "1234567890-_.abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
	var character = "";
	
	if(strng == null || strng == "")
		return true;

	for(index = 0; index < strng.length; index++)
	{
		character = strng.substr(index, 1);                        
		if(valid_chars.indexOf(character) == -1)
			return false;
	}                     
	return true; 
}
function trimString(str) {
  if (str)
	return str.replace(/^\s+/g, '').replace(/\s+$/g, '');
}
function formatEmails(emails)
{
	delim = ",;";
	strng = "";
	i = 0;
	for(index = 0; index < emails.length; index++)
	{
		character = emails.substr(index, 1);                        
		if(delim.indexOf(character) > -1)
		{
			strng += emails.substring(i, index) + ",";
			i = index+1;
		}
	}
	
	strng += emails.substring(i, emails.length);
	
	$("RecipientEmails").value = strng;
	return strng;    
}