/* Volunteer Form JS - Coded by J. Michael Wender */
jQuery.noConflict();
jQuery(document).ready(function(){	
	// Enable validation and handle submission
	var dramacast = jQuery('input[@name="drama-cast"]').getValue();
	if(dramacast == 'Drama Cast') showDramaCast(true);
	jQuery('#volunteerform').submit(function(){
		var validate = validateForm();
		if(validate == true){
			jQuery(this).ajaxSubmit(function(msg){
				jQuery('#ClientValidationSummary').html(msg);
				jQuery('#ClientValidationSummary').jqm().jqmShow();
				jQuery(this).resetForm();			
			});
		} 
		return false;
	});
	// Please indicate your age group:
	var showgradeselect = {};
	jQuery('input[@name="agegrp"]').click(function(){
		var agegrp = jQuery(this).val();
		if(agegrp == 'Grade School'){
			jQuery('#gradeselect').slideDown(500);
			showgradeselect = true;
			// if showgradeselect == true, #grade becomes a required field
			jQuery('#grade').addClass('required');
		} else {
			if(showgradeselect == true){
				jQuery('#gradeselect').slideUp(500);
				showgradeselect = false;
				jQuery('#grade').removeClass('required');	
			}
		}
	});
	// Are you interested in a Small Group?
	var showsmlgrpno = '';
	var showsmlgrpyes = '';
	jQuery('input[@name="smlgrp"]').click(function(){
		var smlgrp = jQuery(this).val();
		//alert('smlgrp = ' + smlgrp);
		if(smlgrp == 'Yes'){
			if(showsmlgrpno == true){
				jQuery('#smlgrpno').slideUp(500);
				showsmlgrpno = false;
			}
			jQuery('#smlgrpyes').slideDown(500);
			showsmlgrpyes = true;			
		} else {
			if(showsmlgrpyes == true){
				jQuery('#smlgrpyes').slideUp(500);
				showsmlgrpyes = false;
			}
			jQuery('#smlgrpno').slideDown(500);
			showsmlgrpno = true;		
		}
	});
	// I would be willing to serve in the following areas:
	jQuery('.servicearea').cluetip({
		width:			500,
		height: 		400,
		sticky: 		true,
		mouseOutClose:	false,		
		showTitle:		true,
		closePosition:	'title',
		activation:		'click'	
	});	
	// Activate Shirt Size and Height fields upon selection of Drama Cast
	var showdramacast = false;
	jQuery('input[@value="Drama Cast"]').click(function(){
		var value = jQuery(this).getValue();
		if(value == 'Drama Cast'){
			showDramaCast(true);			
		} else {
			showDramaCast(false);		
		}
	});	
});

function validateForm(){

	var firstname = jQuery('#firstname').getValue();
	var lastname = jQuery('#lastname').getValue();
	var address = jQuery('#address').getValue();
	var city = jQuery('#city').getValue();
	var state = jQuery('#state').getValue();
	var zip = jQuery('#zip').getValue();
	var email = jQuery('#email').getValue();
	var phone1 = jQuery('#phone1').getValue();
	var agegrp = jQuery('input[@name="agegrp"]').getValue();
	var valid = true;
	var message = '';
	if(firstname == ''){ valid = false;	message = '<li>Please enter your <strong>First Name</strong>.</li>'; jQuery('#firstname').addClass('formerror'); }
	if(lastname == ''){	valid = false; message += '<li>Please enter your <strong>Last Name</strong>.</li>'; jQuery('#lastname').addClass('formerror'); }
	if(address == ''){ valid = false; message += '<li>Please enter your <strong>Address</strong>.</li>'; jQuery('#address').addClass('formerror'); }
	if(city == ''){	valid = false;	message += '<li>Please enter your <strong>City</strong>.</li>'; jQuery('#city').addClass('formerror'); }
	if(state == ''){ valid = false;	message += '<li>Please enter your <strong>State</strong>.</li>'; jQuery('#state').addClass('formerror'); }
	if(zip == ''){ valid = false; message += '<li>Please enter your <strong>Zip Code</strong>.</li>'; jQuery('#zip').addClass('formerror'); }
	if(email == ''){ valid = false;	message += '<li>Please enter your <strong>Email address</strong>.</li>'; jQuery('#email').addClass('formerror'); }
	if(phone1 == ''){ valid = false; message += '<li>Please enter your <strong>Phone number</strong>.</li>'; jQuery('#phone1').addClass('formerror'); }
	if(agegrp == ''){ valid = false; message += '<li>Please select your <strong>Age Group</strong>.</li>'; jQuery('#agegrp').addClass('formerror'); }								
	if(jQuery('#grade').hasClass('required')){
		var grade = jQuery('#grade').getValue();
		if(grade == ''){valid = false; message += '<li>Please select your <strong>Grade</strong>.</li>'; jQuery('#grade').addClass('formerror');}
	}
	if(jQuery('#shirtsize').hasClass('required')){
		var shirtsize = jQuery('#shirtsize').getValue();
		var height_feet = jQuery('#height_feet').getValue();
		var height_inches = jQuery('#height_inches').getValue();
		if(shirtsize == ''){ valid = false;	message += '<li>Please select your <strong>T-Shirt Size</strong>.</li>'; jQuery('#shirtsize').addClass('formerror'); }
		if(height_feet == ''){ valid = false; message += '<li>Please enter the <strong>feet</strong> value for <strong>Height</strong>.</li>'; jQuery('#height_feet').addClass('formerror'); }
		if(height_inches == ''){ valid = false; message += '<li>Please enter the <strong>inches</strong> value for <strong>Height</strong>.</li>'; jQuery('#height_inches').addClass('formerror'); }				
	}
	var message = '<h3 style="margin-top: .5em;">Form Errors</h3><p>There were some errors with the data you filled in. Please correct the following:</p><ul>' + message + '</ul>';
	if(valid == false){
		jQuery('#ClientValidationSummary').html(message);
		jQuery('#ClientValidationSummary').jqm().jqmShow();
	}
	return valid;
}

function showDramaCast(show){
	if(show == true){
		jQuery('#dramacast').slideDown(500);
		showdramacast = true;
		jQuery('#shirtsize').addClass('required');
		jQuery('#height_feet').addClass('required');
		jQuery('#height_inches').addClass('required');			
	} else {
		if(showdramacast == true){
			jQuery('#dramacast').slideUp(500);
			jQuery('#shirtsize').removeClass('required');
			jQuery('#height_feet').removeClass('required');
			jQuery('#height_inches').removeClass('required');				
		}
		showdramacast = false;		
	}	
}