// -------------------------------------------------------------------------------------------------------------------
// Variables

// Updated as user moves through the various sections of the app form. "intro" is default when the page loads
var currentSection = "overview";



// -------------------------------------------------------------------------------------------------------------------
// Preloads and manage rollovers for all subnav images 


function preloadSubnavImages() {
	if (document.images) {
		if (typeof(document.subnavImages) == 'undefined'){
     		document.subnavImages = new Object();
    	}
    	document.subnavImages.rolloverImages = new Array();
			// Rollover Images
    		document.subnavImages.rolloverImages[0] = new Image();
    		document.subnavImages.rolloverImages[0].src = '/images/admissionApp/subnav_overview_over.gif';
    		document.subnavImages.rolloverImages[1] = new Image();
    		document.subnavImages.rolloverImages[1].src = '/images/admissionApp/subnav_step1_over.gif';
    		document.subnavImages.rolloverImages[2] = new Image();
    		document.subnavImages.rolloverImages[2].src = '/images/admissionApp/subnav_step2_over.gif';
    		document.subnavImages.rolloverImages[3] = new Image();
    		document.subnavImages.rolloverImages[3].src = '/images/admissionApp/subnav_step3_over.gif';
			document.subnavImages.rolloverImages[4] = new Image();
    		document.subnavImages.rolloverImages[4].src = '/images/admissionApp/subnav_step4_over.gif';
			document.subnavImages.rolloverImages[5] = new Image();
    		document.subnavImages.rolloverImages[5].src = '/images/admissionApp/subnav_step5_over.gif';
			
			// "On-State" Images
			document.subnavImages.indicatorImages = new Array();
    		document.subnavImages.indicatorImages[0] = new Image();
    		document.subnavImages.indicatorImages[0].src = '/images/admissionApp/subnav_overview_on.gif';
    		document.subnavImages.indicatorImages[1] = new Image();
    		document.subnavImages.indicatorImages[1].src = '/images/admissionApp/subnav_step1_on.gif';
    		document.subnavImages.indicatorImages[2] = new Image();
    		document.subnavImages.indicatorImages[2].src = '/images/admissionApp/subnav_step2_on.gif';
    		document.subnavImages.indicatorImages[3] = new Image();
    		document.subnavImages.indicatorImages[3].src = '/images/admissionApp/subnav_step3_on.gif';
			document.subnavImages.indicatorImages[4] = new Image();
    		document.subnavImages.indicatorImages[4].src = '/images/admissionApp/subnav_step4_on.gif';
			document.subnavImages.indicatorImages[5] = new Image();
    		document.subnavImages.indicatorImages[5].src = '/images/admissionApp/subnav_step5_on.gif';

	}	
}


// -------------------------------------------------------------------------------------------------------------------
// Rollover functionality

// This function swaps menu images when user rolls over them

function swapSubnavItem ( currentSection, swapSection) {
	// If the page calling this script falls under one of the main sections, dpo this script.
	// Additional pages like "email.htm" don't fall under any section so current Section is set as "false on those pages.
	if (currentSection) {	
		// If User is not mousing over the Menu Button for the section of the website that User is currently in,
		// swap the "off state" for the "on state" of the Menu Button that the User is mousing over.
		if (swapSection != currentSection) {
				var swapSection_img = '/images/admissionApp/subnav_' + swapSection + '_over.gif'
				document.getElementById('subnav_' + swapSection).src = swapSection_img;	
		}
	}
 }
 
 
// This function swaps menu images back when user rolls back out

function swapSubnavItemBack ( currentSection, swapBackSection) {
	// If the page calling this script falls under one of the main sections, dpo this script.
	// Additional pages like "email.htm" don't fall under any section so current Section is set as "false on those pages.
	if (currentSection) {	
		// If User is not mousing out of the Menu Button for the section of the website that User is currently in,
		// swap the "on state" back to the "off state" of the Menu Button that the User is mousing out of.
		if (swapBackSection != currentSection) {
				var swapBackSection_img = '/images/admissionApp/subnav_' + swapBackSection + '_off.gif';
				document.getElementById('subnav_' + swapBackSection).src = swapBackSection_img;
		}
	}
}



// -------------------------------------------------------------------------------------------------------------------
// Show and hide the various form sections and update the subnav bar as thse user


// This function is called as the user moves through the various sections of the admission form.

function switchSection (newSection) {
	
	// Update for the new section the user has selected 
	currentSection = newSection;
	
	// 1. Update the Subnav graphic to reflect the section change
	// Set all subnav Buttons to their "off-state"
	document.getElementById('subnav_overview').src = '/images/admissionApp/subnav_overview_off.gif';
	document.getElementById('subnav_step1').src = '/images/admissionApp/subnav_step1_off.gif';
	document.getElementById('subnav_step2').src = '/images/admissionApp/subnav_step2_off.gif';
	document.getElementById('subnav_step3').src = '/images/admissionApp/subnav_step3_off.gif';
	document.getElementById('subnav_step4').src = '/images/admissionApp/subnav_step4_off.gif';
	document.getElementById('subnav_step5').src = '/images/admissionApp/subnav_step5_off.gif';

	
	// 2. Display the selected section of the form the user is navigating to
	// Hide all sections of the form
	document.getElementById('overview').style.display="none";
	document.getElementById('step1').style.display="none";
	document.getElementById('step2').style.display="none";
	document.getElementById('step3').style.display="none";
	document.getElementById('step4').style.display="none";
	document.getElementById('step5').style.display="none";
	
	// Then display the section of the form the user has navigated to
	document.getElementById(currentSection).style.display="block";
	
	// Then set the subnav button for the current section to its "on-state"
	var currentSection_img = '/images/admissionApp/subnav_' + currentSection + '_on.gif';
	document.getElementById('subnav_' + currentSection).src = currentSection_img;

	// Re-position the document back up to the top left corner for the next section
	window.scrollTo(0,0);
}


// -------------------------------------------------------------------------------------------------------------------
// Show/hide related "Additional Info" form elements when users click on a checkbox

function show_InfoArea (elementType, infoSubject) {
	
		if (elementType == 'radioBtn') {
			if(document.getElementById(infoSubject + '-yes').checked == true)  {
				document.getElementById(infoSubject + '_addInfoArea').style.display="block";				   
			}
			else if(document.getElementById(infoSubject + '-no').checked == true)  {
				document.getElementById(infoSubject + '_addInfoArea').style.display="none";	
				//document.getElementById(infoSubject + '_addInfoArea').value="";	
			}
		}
		else if (elementType == 'checkBox') {
			if(document.getElementById(infoSubject).checked == true)  {
				document.getElementById(infoSubject + '_addInfoArea').style.display="block";				   
			}
			if(document.getElementById(infoSubject).checked == false)  {
				document.getElementById(infoSubject + '_addInfoArea').style.display="none";	
				//document.getElementById(infoSubject + '_addInfoArea').value="";	
			}
		}

}


// -------------------------------------------------------------------------------------------------------------------
// Show/hide "Credit Card Authorization Agreement" checkbox & determine required status for form validation


var creditCard_selected;	// Used to check to see if "authorization statement" form element is required for form submission/validation.
							// If the user has selected "VISA or MasterCard" as their "Preferred Method of Payment", then Odyssey needs the 
							// user to click on the "agree" box and it needs to be validated for form submission. But if the user selects 
							// another payment option, them we don't need to validate for the "agree" box, In fact it will be hidden from view
							// by the script below...


function displayAuthorizationBox() {
	// If the user has selected "Visa or Mastercard" and the CC Authorization Box is currently hidden...
	if ((document.admissionApp.preferredPayment[2].checked) && (document.getElementById('authorizationBox').style.display="none")) {
		document.getElementById('authorizationBox').style.display="block";	// Show authorzation box
		creditCard_selected = true;		// Set for validation when form is submitted
	}
	// Or if the user has clicked on one of the other options instead...
	else {
		document.getElementById('authorizationBox').style.display="none";	// Hide authorzation box
		creditCard_selected = false;	// Set so this element isn't validated at time for form submission
	}
}


// -------------------------------------------------------------------------------------------------------------------
// Called at the bottom of the page, handles page initialization after document loads

function pageInit() {
	// preload rollover images
	preloadSubnavImages();	
}



// -------------------------------------------------------------------------------------------------------------------
// Preloads and manages rollovers for submit button

function preloadSubmitImage() {
	if (document.images) {
			if (typeof(document.submitImages) == 'undefined'){
      document.subscribeImages = new Object();
    	}
    	document.submitImages.loadedImages = new Array();
    		document.submitImages.loadedImages[0] = new Image();
    		document.submitImages.loadedImages[0].src = '/images/admissionApp/btn_submit_on.gif';
	}	
}



// This function swaps menu images when user rolls over them
function swapSubmitBtn ( ) {
	var submitBtn_img = '/images/admissionApp/btn_submit_on.gif'
	document.getElementById('submitBtn').src = submitBtn_img;	
 }
 
 
// This function swaps menu images back when user rolls back out
function swapSubmitBtn_back ( ) {
	var submitBtn_img = '/images/admissionApp/btn_submit_off.gif'
	document.getElementById('submitBtn').src = submitBtn_img;	
 }






// ------------------------------------------------------------------------------------------------ 
// These functions validate the form after the user submits but before data is transmitted
// ------------------------------------------------------------------------------------------------ 

// Initialize an error message to be displayed in a js alert window
var errorMsg = "";
var ccErrorMsg = "";

// Validate "applicantName" field
function validateApplicant() {
	var strValue = document.admissionApp.applicant.value;
	// If the form field is empty or is the "Required FIeld" messaging...
	if ((strValue == '') || (strValue == 'Required Field')) {
		// Update the style and content in the text field to call attention to it
		document.getElementById('applicant').style.backgroundColor="#C9CDB2";
		document.getElementById('applicant').style.color="#01415B";
		document.getElementById('applicant').value="Required Field";
		// Add this field into the error message
		errorMsg += "\"Person filling out this form\" is a required field. ";
		return false;
	}
	// If the form field  was filled out correctly...
	else {
		// Reset the form element's style back to normal if the user has gone back and input the info correctly
		document.getElementById('applicant').style.backgroundColor="#FDFBEF";
		document.getElementById('applicant').style.color="#705200";
		return true;
	}
}


function validateApplicantEmail() {
	var objRegExp  = /^[a-z0-9]([a-z0-9_\-\.]*)@([a-z0-9_\-\.]*)(\.[a-z]{2,3}(\.[a-z]{2}){0,2})$/i;
	var strValue = document.admissionApp.applicantEmail.value;
	// If the form field is empty or is the "Required FIeld" messaging...
	if ((strValue == '') || (strValue == 'Required Field')) {
		// Update the style and content in the text field to call attention to it
		document.getElementById('applicantEmail').style.backgroundColor="#C9CDB2";
		document.getElementById('applicantEmail').style.color="#01415B";
		document.getElementById('applicantEmail').value="Required Field";
		// Add this field into the error message
		errorMsg += "\"Email Address\" is a required field. ";
		return false;
	}
	// Or if the form field has user input, but isn't in the right format for an email address...
	else if (!(objRegExp.test(strValue))) {
		// Update the style and content in the text field to call attention to it
		document.getElementById('applicantEmail').style.backgroundColor="#C9CDB2";
		document.getElementById('applicantEmail').style.color="#01415B";
		// Add this field into the error message
		errorMsg += "Please check \"Email Address\" for errors. ";
		return false;
	}
	// If the form field  was filled out correctly...
	else if (objRegExp.test(strValue)){
		// Reset the form element's style back to normal if the user has gone back and input the info correctly
		document.getElementById('applicantEmail').style.backgroundColor="#FDFBEF";
		document.getElementById('applicantEmail').style.color="#705200";
		return true;
	}	
}


function validatePreferredPayment() {
	
	// Set initial variable for determining if one of these buttons are checked
	var buttonChecked = false;
	
	/*// Determine how many radio buttons make up this form element
	var elementOptions = document.admissionApp.preferredPayment.length;
	// Go through each radio button to see if it's checked...
	for (i=0; i<=elementOptions; i++) {
		if (document.admissionApp.preferredPayment[i].checked) {
			buttonChecked = true;
		}
	}*/
	
	if (document.admissionApp.preferredPayment[0].checked) { buttonChecked = true; }
	if (document.admissionApp.preferredPayment[1].checked) { buttonChecked = true; }
	if (document.admissionApp.preferredPayment[2].checked) { buttonChecked = true; }
	
	// If none of the radio buttons have been checked...
	if (!buttonChecked) {
		// Update the style and content in the text field to call attention to it
		document.getElementById('prefPaymentButtons').style.backgroundColor="#C9CDB2";
		document.getElementById('prefPaymentButtons').style.color="#01415B";
		// Add this field into the error message
		errorMsg += "\"Preferred Method of Payment\" is a required field. ";
		return false;
	}
	// If the form field  was filled out correctly...
	else {
		// Reset the form element's style back to normal if the user has gone back and input the info correctly
		document.getElementById('prefPaymentButtons').style.backgroundColor="#FAF6DE";
		document.getElementById('prefPaymentButtons').style.color="#705200";
		return true;
	}
}


// Validate "ccCardNumber" field
function validateCardNumber() {
	var strValue = document.admissionApp.ccCardNumber.value;
	// If the form field is empty or is the "Required FIeld" messaging...
	if ((strValue == '') || (strValue == 'Required Field')) {
		// Update the style and content in the text field to call attention to it
		document.getElementById('ccCardNumber').style.backgroundColor="#C9CDB2";
		document.getElementById('ccCardNumber').style.color="#01415B";
		document.getElementById('ccCardNumber').value="Required Field";
		// Add this text into the credit card error message
		if (ccErrorMsg == "") {
			ccErrorMsg = "Please make sure you've completed all credit card information. ";
		}
		return false;
	}
	// If the form field  was filled out correctly...
	else {
		// Reset the form element's style back to normal if the user has gone back and input the info correctly
		document.getElementById('ccCardNumber').style.backgroundColor="#FDFBEF";
		document.getElementById('ccCardNumber').style.color="#705200";
		return true;
	}
}

// Validate "ccSecurityCode" field
function validateSecCode() {
	var strValue = document.admissionApp.ccSecurityCode.value;
	// If the form field is empty or is the "Required FIeld" messaging...
	if ((strValue == '') || (strValue == 'Required Field')) {
		// Update the style and content in the text field to call attention to it
		document.getElementById('ccSecurityCode').style.backgroundColor="#C9CDB2";
		document.getElementById('ccSecurityCode').style.color="#01415B";
		document.getElementById('ccSecurityCode').value="Required Field";
		// Add this text into the credit card error message
		if (ccErrorMsg == "") {
			ccErrorMsg = "Please make sure you've completed all credit card information. ";
		}
		return false;
	}
	// If the form field  was filled out correctly...
	else {
		// Reset the form element's style back to normal if the user has gone back and input the info correctly
		document.getElementById('ccSecurityCode').style.backgroundColor="#FDFBEF";
		document.getElementById('ccSecurityCode').style.color="#705200";
		return true;
	}
}

// Validate "ccExpDate" field
function validateExpDate() {
	var strValue = document.admissionApp.ccExpDate.value;
	// If the form field is empty or is the "Required FIeld" messaging...
	if ((strValue == '') || (strValue == 'Required Field')) {
		// Update the style and content in the text field to call attention to it
		document.getElementById('ccExpDate').style.backgroundColor="#C9CDB2";
		document.getElementById('ccExpDate').style.color="#01415B";
		document.getElementById('ccExpDate').value="Required Field";
		// Add this text into the credit card error message
		if (ccErrorMsg == "") {
			ccErrorMsg = "Please make sure you've completed all credit card information. ";
		}
		return false;
	}
	// If the form field  was filled out correctly...
	else {
		// Reset the form element's style back to normal if the user has gone back and input the info correctly
		document.getElementById('ccExpDate').style.backgroundColor="#FDFBEF";
		document.getElementById('ccExpDate').style.color="#705200";
		return true;
	}
}

// Validate "ccCardHolder" field
function validateCardholder() {
	var strValue = document.admissionApp.ccCardholder.value;
	// If the form field is empty or is the "Required FIeld" messaging...
	if ((strValue == '') || (strValue == 'Required Field')) {
		// Update the style and content in the text field to call attention to it
		document.getElementById('ccCardholder').style.backgroundColor="#C9CDB2";
		document.getElementById('ccCardholder').style.color="#01415B";
		document.getElementById('ccCardholder').value="Required Field";
		// Add this text into the credit card error message
		if (ccErrorMsg == "") {
			ccErrorMsg = "Please make sure you've completed all credit card information. ";
		}
		return false;
	}
	// If the form field  was filled out correctly...
	else {
		// Reset the form element's style back to normal if the user has gone back and input the info correctly
		document.getElementById('ccCardholder').style.backgroundColor="#FDFBEF";
		document.getElementById('ccCardholder').style.color="#705200";
		return true;
	}
}

// Validate "ccDate" field
function validateDate() {
	var strValue = document.admissionApp.ccDate.value;
	// If the form field is empty or is the "Required FIeld" messaging...
	if ((strValue == '') || (strValue == 'Required Field')) {
		// Update the style and content in the text field to call attention to it
		document.getElementById('ccDate').style.backgroundColor="#C9CDB2";
		document.getElementById('ccDate').style.color="#01415B";
		document.getElementById('ccDate').value="Required Field";
		// Add this text into the credit card error message
		if (ccErrorMsg == "") {
			ccErrorMsg = "Please make sure you've completed all credit card information. ";
		}
		return false;
	}
	// If the form field  was filled out correctly...
	else {
		// Reset the form element's style back to normal if the user has gone back and input the info correctly
		document.getElementById('ccDate').style.backgroundColor="#FDFBEF";
		document.getElementById('ccDate').style.color="#705200";
		return true;
	}
}

// Validate "ccAddress" field
function validateAddress() {
	var strValue = document.admissionApp.ccAddress.value;
	// If the form field is empty or is the "Required FIeld" messaging...
	if ((strValue == '') || (strValue == 'Required Field')) {
		// Update the style and content in the text field to call attention to it
		document.getElementById('ccAddress').style.backgroundColor="#C9CDB2";
		document.getElementById('ccAddress').style.color="#01415B";
		document.getElementById('ccAddress').value="Required Field";
		// Add this text into the credit card error message
		if (ccErrorMsg == "") {
			ccErrorMsg = "Please make sure you've completed all credit card information. ";
		}
		return false;
	}
	// If the form field  was filled out correctly...
	else {
		// Reset the form element's style back to normal if the user has gone back and input the info correctly
		document.getElementById('ccAddress').style.backgroundColor="#FDFBEF";
		document.getElementById('ccAddress').style.color="#705200";
		return true;
	}
}

// Validate "ccCity" field
function validateCity() {
	var strValue = document.admissionApp.ccCity.value;
	// If the form field is empty or is the "Required FIeld" messaging...
	if ((strValue == '') || (strValue == 'Required Field')) {
		// Update the style and content in the text field to call attention to it
		document.getElementById('ccCity').style.backgroundColor="#C9CDB2";
		document.getElementById('ccCity').style.color="#01415B";
		document.getElementById('ccCity').value="Required Field";
		// Add this text into the credit card error message
		if (ccErrorMsg == "") {
			ccErrorMsg = "Please make sure you've completed all credit card information. ";
		}
		return false;
	}
	// If the form field  was filled out correctly...
	else {
		// Reset the form element's style back to normal if the user has gone back and input the info correctly
		document.getElementById('ccCity').style.backgroundColor="#FDFBEF";
		document.getElementById('ccCity').style.color="#705200";
		return true;
	}
}

// Validate "ccState" field
function validateState() {
	var strValue = document.admissionApp.ccState.value;
	// If the form field is empty or is the "Required FIeld" messaging...
	if ((strValue == '') || (strValue == 'Required Field')) {
		// Update the style and content in the text field to call attention to it
		document.getElementById('ccState').style.backgroundColor="#C9CDB2";
		document.getElementById('ccState').style.color="#01415B";
		document.getElementById('ccState').value="Required Field";
		// Add this text into the credit card error message
		if (ccErrorMsg == "") {
			ccErrorMsg = "Please make sure you've completed all credit card information. ";
		}
		return false;
	}
	// If the form field  was filled out correctly...
	else {
		// Reset the form element's style back to normal if the user has gone back and input the info correctly
		document.getElementById('ccState').style.backgroundColor="#FDFBEF";
		document.getElementById('ccState').style.color="#705200";
		return true;
	}
}

// Validate "ccZip" field
function validateZip() {
	var strValue = document.admissionApp.ccZip.value;
	// If the form field is empty or is the "Required FIeld" messaging...
	if ((strValue == '') || (strValue == 'Required Field')) {
		// Update the style and content in the text field to call attention to it
		document.getElementById('ccZip').style.backgroundColor="#C9CDB2";
		document.getElementById('ccZip').style.color="#01415B";
		document.getElementById('ccZip').value="Required Field";
		// Add this text into the credit card error message
		if (ccErrorMsg == "") {
			ccErrorMsg = "Please make sure you've completed all credit card information. ";
		}
		return false;
	}
	// If the form field  was filled out correctly...
	else {
		// Reset the form element's style back to normal if the user has gone back and input the info correctly
		document.getElementById('ccZip').style.backgroundColor="#FDFBEF";
		document.getElementById('ccZip').style.color="#705200";
		return true;
	}
}

function validateAuthorization() {
	if(document.admissionApp.ccAuthorization.checked) {
		return true;
	}
	else {
		ccErrorMsg += "Please make sure you've authorized Odyssey Wilderness Programs to use your credit card. "
		return false;
	}
}




function validateForm() {
	
	// Reset the error message if the user is giving it another shot
	errorMsg = "";
	ccErrorMsg = "";
	
	// Set variable up here. If one or more of the form elements isn't set correctly, 'passValidation' will be set to 'false'
	var passValidation = true;
	
	if (!(validateApplicant()))			{passValidation = false;}
	if (!(validateApplicantEmail()))		{passValidation = false;}
	if (!(validatePreferredPayment()))		{passValidation = false;}
	if (!(validateCardNumber()))			{passValidation = false;}
	if (!(validateSecCode()))				{passValidation = false;}
	if (!(validateExpDate()))				{passValidation = false;}
	if (!(validateCardholder()))			{passValidation = false;}
	if (!(validateDate()))					{passValidation = false;}
	if (!(validateAddress()))				{passValidation = false;}
	if (!(validateCity()))					{passValidation = false;}
	if (!(validateState()))				{passValidation = false;}
	if (!(validateZip()))					{passValidation = false;}
	if (creditCard_selected) {
		if (!(validateAuthorization()))	{passValidation = false;}	// Only check for this if the user has selected "Visa or Mastercard" as method of payment.
	}
	
	errorMsg = errorMsg + ccErrorMsg;
	
	// If one or more of the form elements isn't set correctly, 'passValidation' will be set to 'false', alert the user
	if (!(passValidation)) {
		
		// Update for the "step 1" section so the subnavigation functionality works correctly 
		currentSection = "step1";
		
		// Update the subnavigation to reflect that the user has been bounced back to step 1
		document.getElementById('subnav_overview').src = '/images/admissionApp/subnav_overview_off.gif';
		document.getElementById('subnav_step1').src = '/images/admissionApp/subnav_step1_on.gif'; 	      // on-state
		document.getElementById('subnav_step2').src = '/images/admissionApp/subnav_step2_off.gif';
		document.getElementById('subnav_step3').src = '/images/admissionApp/subnav_step3_off.gif';
		document.getElementById('subnav_step4').src = '/images/admissionApp/subnav_step4_off.gif';
		document.getElementById('subnav_step5').src = '/images/admissionApp/subnav_step5_off.gif';
		
		// Hide all sections of the form but step 1
		document.getElementById('overview').style.display="none";
		document.getElementById('step1').style.display="block";		// visible
		document.getElementById('step2').style.display="none";
		document.getElementById('step3').style.display="none";
		document.getElementById('step4').style.display="none";
		document.getElementById('step5').style.display="none";

		// Display the final error message in a js window
		alert (errorMsg);
	}	

	// If 'passValidation' is 'true' go ahead and submit the form...
	return passValidation;

}