// JavaScript Document

	/* Custom validation method to check phone field */
	jQuery.validator.addMethod( 'phone', function( value, element ) {
		/* Strip out all spaces, periods, dashes, parentheses, and plus signs */
		value = value.replace(/[\+\s\(\)\.\-\ ]/g, '');

		return this.optional(element) || value.length > 9 &&
			value.match( /^((\+)?[1-9]{1,2})?([-\s\.])?((\(\d{1,4}\))|\d{1,4})(([-\s\.])?[0-9]{1,12}){1,2}$/ );

		}, 'Please enter a valid phone number.'
	);
	/*custom validation for first name*/
	jQuery.validator.addMethod( 'firstName', function( value, element ) {
		if( jQuery.trim(value) == jQuery.trim("First Name")){
			return false;
		}else{ return true; }
		},'Your name is required.'
	);
	/*custom validation for last name*/
	jQuery.validator.addMethod( 'lastName', function( value, element ) {
		if( jQuery.trim(value) == jQuery.trim("Last Name") ){
			return false;
		}else{ return true; }
		},'Your last name is required.'
	);
	/*custom validation for address*/
	jQuery.validator.addMethod( 'address', function( value, element ) {
		if( jQuery.trim(value) == jQuery.trim("Address") ){
			return false;
		}else{ return true; }
		},'Your address is required.'
	);
	/*custom validation for city*/
	jQuery.validator.addMethod( 'city', function( value, element ) {
		if( jQuery.trim(value) == jQuery.trim("City") ){
			return false;
		}else{ return true; }
		},'Your city is required.'
	);
	/*custom validation for city*/
	jQuery.validator.addMethod( 'postal', function( value, element ) {
		if( jQuery.trim(value) == jQuery.trim("Postal") ){
			return false;
		}else{ return true; }
		},'Your postal code is required. ex: M2J 5B8'
	);
	
	/*custom validation for Account Number*/
	jQuery.validator.addMethod( 'account', function( value, element ) {
		if( jQuery.trim(value) == jQuery.trim("Account Number") ){
			return false;
		}else{ return true; }
		},'Your account number is required.'
	);
	
//Document Ready function
  jQuery(document).ready(function() {

//add account
jQuery('#addAccount').click( function(){
	var noOfElements = updateAcctElements();
	jQuery('#accountField').clone(true).insertBefore(jQuery('#btn-container'));
	jQuery('.account').last().attr('id','account').attr('name','Account_'+noOfElements).val('Account Number').parent().find('.status').remove().end().append('<span id="removeAccount" style="cursor:pointer">-</span>');
	jQuery('.bg_large').redrawShadow(); 
});
function updateAcctElements(){ //function to re-number Account name with index
	var noOfElements = jQuery('input.account').length;
	var count = 1;
	jQuery('input.account').each( function(index,element){
		//var newElem = element.attr('name').split("_");
		jQuery(element).attr('name','Account_'+count);
		count++;
	});
	return count;
}
function getAccounts(){ 
	var accounts = "";
	jQuery('#accountField').css("display","none");
	var count = 1;
	jQuery('.account').each( function(index,element ){
		if(jQuery(element).val() != jQuery.trim("Account Number")){
			accounts += "#"+count + " " + jQuery(element).val() + "<br>Account: ";
			count++;
		}
	});
	jQuery('.account').last().val(accounts);
	return accounts;
}

//remove account
jQuery('#removeAccount').live('click', function(){
	jQuery(this).parent().parent().remove();
	updateAcctElements();
	jQuery('.bg_large').redrawShadow(); 
});
	
	 jQuery("#signup_pin").validate({
		rules: {
			first_name: {
				required: true,
				minlength: 2,
				firstName: true
			},
			last_name: {
				required: true,
				minlength: 2,
				lastName:true
			},
			address: {
				required: false,
				minlength: 3
			},
			city: {
				required: false,
				minlength: 3
			},
			postal: {
				required: false,
				minlength: 6
			},
			email: {
				required: true,
				email: true
			},
			phone: {
				required: false,
				phone: true
			},
			account: {
				required: true,
				minlength: 3,
				account:true
			}
		},
		messages: {
			first_name: {
				required: "Your name is required.",
				minlength: jQuery.format("Enter at least {0} characters")
			},
			last_name: {
				required: "Your last name is required.",
				rangelength: jQuery.format("Enter at least {0} characters")
			},
			address: {
				required: "Your address is required.",
				rangelength: jQuery.format("Enter at least {0} characters")
			},
			city: {
				required: "Your city is required.",
				rangelength: jQuery.format("Enter at least {0} characters")
			},
			postal: {
				required: "Your postal code is required.",
				rangelength: jQuery.format("Enter at least {0} characters")
			},
			email: {
				required: "Please enter your email address",
				minlength: "Please enter a valid email address"
			}
		},
		// the errorPlacement has to take the table layout into account
		errorPlacement: function(error, element) {
			if ( element.is(":radio") )
				error.appendTo( element.parent().next().next() );
			else if ( element.is(":checkbox") )
				error.appendTo ( element.next() );
			else

				error.appendTo( jQuery('.status', element.parent()) );
		},

         submitHandler: function(form) {
        	//getAccounts();
			form.submit();
		},

		// specifying a submitHandler prevents the default submit
		// set this class to error-labels to indicate valid fields
		success: function(label) {
			// set &nbsp; as text for IE
			//label.html("").addClass("checked");
            // form.submit();
		}
	});
	
 jQuery("#address").validate({
		rules: {
			first_name: {
				required: true,
				minlength: 2,
				firstName: true
			},
			last_name: {
				required: true,
				minlength: 2,
				lastName:true
			},
			address: {
				required: true,
				minlength: 3,
				address:true
			},
			city: {
				required: true,
				minlength: 3,
				city:true
			},
			postal: {
				required: true,
				minlength: 6,
				postal: true
			},
			email: {
				required: true,
				email: true
			},
			phone: {
				required: true,
				phone: true
			},
			account: {
				required: true,
				minlength: 3,
				account:true
			}
		},
		messages: {
			first_name: {
				required: "Your name is required.",
				minlength: jQuery.format("Enter at least {0} characters")
			},
			last_name: {
				required: "Your last name is required.",
				rangelength: jQuery.format("Enter at least {0} characters")
			},
			address: {
				required: "Your address is required.",
				rangelength: jQuery.format("Enter at least {0} characters")
			},
			city: {
				required: "Your city is required.",
				rangelength: jQuery.format("Enter at least {0} characters")
			},
			postal: {
				required: "Your postal code is required.",
				rangelength: jQuery.format("Enter at least {0} characters")
			},
			email: {
				required: "Please enter your email address",
				minlength: "Please enter a valid email address"
			}
		},
		// the errorPlacement has to take the table layout into account
		errorPlacement: function(error, element) {
			if ( element.is(":radio") )
				error.appendTo( element.parent().next().next() );
			else if ( element.is(":checkbox") )
				error.appendTo ( element.next() );
			else

				error.appendTo( jQuery('.status', element.parent()) );
		},

         submitHandler: function(form) {
			form.submit();
		},

		// specifying a submitHandler prevents the default submit
		// set this class to error-labels to indicate valid fields
		success: function(label) {
			// set &nbsp; as text for IE
			//label.html("").addClass("checked");
            // form.submit();
		}
	});
	
	
  jQuery("#general").validate({
		rules: {
			first_name: {
				required: true,
				minlength: 2,
				firstName: true
			},
			last_name: {
				required: true,
				minlength: 2,
				lastName:true
			},
			address: {
				required: false,
				minlength: 3
			},
			city: {
				required: false,
				minlength: 3
			},
			postal: {
				required: false,
				minlength: 6
			},
			email: {
				required: true,
				email: true
			},
			phone: {
				required: true,
				phone: true
			}
		},
		messages: {
			first_name: {
				required: "Your name is required.",
				minlength: jQuery.format("Enter at least {0} characters")
				
			},
			last_name: {
				required: "Your last name is required.",
				rangelength: jQuery.format("Enter at least {0} characters")
			},
			address: {
				required: "Your address is required.",
				rangelength: jQuery.format("Enter at least {0} characters")
			},
			city: {
				required: "Your city is required.",
				rangelength: jQuery.format("Enter at least {0} characters")
			},
			postal: {
				required: "Your postal code is required.",
				rangelength: jQuery.format("Enter at least {0} characters")
			},
			email: {
				required: "Please enter your email address",
				minlength: "Please enter a valid email address"
			}
		},
		// the errorPlacement has to take the table layout into account
		errorPlacement: function(error, element) {
			if ( element.is(":radio") )
				error.appendTo( element.parent().next().next() );
			else if ( element.is(":checkbox") )
				error.appendTo ( element.next() );
			else
				error.appendTo( jQuery('.status', element.parent()) );
		},

         submitHandler: function(form) {
			 //e.preventDefault();
		  form.submit();
		},

		// specifying a submitHandler prevents the default submit
		// set this class to error-labels to indicate valid fields
		success: function(label) {
			// set &nbsp; as text for IE
			//label.html("").addClass("checked");
		}
	});

  });