$(document).ready(function() {
	
	$('#diffadd').click(function() {
		$('#billinginfo').toggle();
		
		// Hide the popovers if the billing checkbox is ticked
		$('#cardnumber').popover('hide');
		$('#cardnumber').removeAttr('rel');
		$('#expyear').popover('hide');
		$('#expyear').removeAttr('rel');
		
		if( $('[name=diffadd]').attr('checked') == 'checked' ) {
			$('[name=bfname]').addClass("required");
			$('[name=blname]').addClass("required");
			$('[name=badd1]').addClass("required");
			$('[name=bcity]').addClass("required");
			$('[name=bcountry]').addClass("required");			
			$('[name=bstate]').addClass("required");
			$('[name=bzip]').addClass("required");
		} else {
			//Remove rules from validation plugin
			$('[name=bfname]').removeClass("required");
			$('[name=blname]').removeClass("required");
			$('[name=badd1]').removeClass("required");
			$('[name=bcity]').removeClass("required");
			$('[name=bcountry]').removeClass("required");			
			$('[name=bstate]').removeClass("required");
			$('[name=bzip]').removeClass("required");			
		}			

	});
		
	$.validator.addMethod('CCExp', function(value, element, params) {
		// Add this marker after the first test so onchange expmonth valid check will trigger
		$('#expyear').attr('data-error','checked');
		
		var minMonth = new Date().getMonth() + 1;
		var minYear = new Date().getFullYear();
		var month = parseInt($(params.month).val(), 10);
		var year = parseInt($(params.year).val(), 10);
		return (year > minYear || (year === minYear && month >= minMonth));
	}, 'Expired date.');
	
	$('#expmonth').change(function(){
		// Expmonth onchange check only fires once the expyear CCexp runs
		// I didn't want the expiration popup to fire until the user at least changed the year once
		if($('#expyear').attr('data-error') == 'checked') {
			$('#expyear').valid();	
		}
	});

	$('input[name=phone]').mask("(999) 999-9999");
	$.mask.definitions['~']='-*';
	$('input[name=szip],input[name=bzip]').mask('99999?~9999',{placeholder: " "});
	$('input[name=cvv2]').mask("99?99",{placeholder: " "});
	
	//Form submission validation plugin
	$('#form').validate({
		rules: {
			email: {
				required: true,
				email: true
			},
			cardnumber: {
				required: true,
				creditcard: true,
				minlength: 12
			},
			expyear: {
			  CCExp: {
				month: '#expmonth',
				year: '#expyear'
			  }				
			}
		},
		submitHandler: function(form) {
			$('.loading').show();
			$('#form').attr('action','receipt.php');
			form.submit();
		},		
		errorPlacement: function(error, element) {
			
			if(error[0].htmlFor == 'email') {
				// Popover code for email errors
				if($('#email').attr('rel') != 'popover') {
					$('#email').attr('data-content', 'Please enter a valid email address.');
					$('#email').attr('data-original-title','Invalid Email');
					$('#email').attr('rel','popover');
					$('#email').popover({offset: -785, trigger: 'manual'});
					$('#email').popover('show');					
				}
			} else if(error[0].htmlFor == 'cardnumber') {
				// Popover code for card errors
				if($('#cardnumber').attr('rel') != 'popover') {
					$('#cardnumber').attr('data-content', 'Please enter a valid credit card.');
					$('#cardnumber').attr('data-original-title','Invalid Card');
					$('#cardnumber').attr('rel','popover');
					$('#cardnumber').popover({offset: -785, trigger: 'manual'});
					$('#cardnumber').popover('show');					
				}
			} else if(error[0].htmlFor == 'expyear') {
				// Popover code for expiration errors
				$('#expmonth').addClass('req_error'); // Add error class to month because it looks better ^^
				
				if($('#expyear').attr('rel') != 'popover') {
					$('#expyear').attr('data-content', 'Please enter a valid expiration date.');
					$('#expyear').attr('data-original-title','Expired');
					$('#expyear').attr('rel','popover');
					$('#expyear').popover({offset: -785, trigger: 'manual'});
					$('#expyear').popover('show');					
				}
				
			}
		},
		highlight: function(element) {
			$(element).addClass('req_error');
			var $name = $(element).attr('name');
			if( $('#'+ $name + '_asterisk').length == 0 ) {
				var $asterisk = $('<span>').attr('id',$name + '_asterisk').append('*');
				$(element).parent().prev("label").append($asterisk);
			}
		},
		unhighlight: function(element) {
			if( $(element).attr('name') == 'email' ) {
				$('#email').removeAttr('rel');
				$('#email').popover('hide');
			}
			
			if( $(element).attr('name') == 'cardnumber' ) {
				$('#cardnumber').removeAttr('rel');
				$('#cardnumber').popover('hide');
			}
			
			if( $(element).attr('name') == 'expyear' ) {
				// Remove error class from exp month
				$('#expmonth').removeClass('req_error');
				$('#expyear').removeAttr('rel');
				$('#expyear').popover('hide');
			}

			$(element).removeClass('req_error');
			var $name = $(element).attr('name');
			$('#'+ $name + '_asterisk').remove();
		}	
	});
	$.extend($.validator.messages, {
		required: "",
		email: "Please enter a valid email address.",
		creditcard: "This is not a valid credit card."
	});
	/*
	jQuery.extend(jQuery.validator.messages, {
		required: "This field is required.",
		remote: "Please fix this field.",
		email: "Please enter a valid email address.",
		url: "Please enter a valid URL.",
		date: "Please enter a valid date.",
		dateISO: "Please enter a valid date (ISO).",
		number: "Please enter a valid number.",
		digits: "Please enter only digits.",
		creditcard: "Please enter a valid credit card number.",
		equalTo: "Please enter the same value again.",
		accept: "Please enter a value with a valid extension.",
		maxlength: jQuery.validator.format("Please enter no more than {0} characters."),
		minlength: jQuery.validator.format("Please enter at least {0} characters."),
		rangelength: jQuery.validator.format("Please enter a value between {0} and {1} characters long."),
		range: jQuery.validator.format("Please enter a value between {0} and {1}."),
		max: jQuery.validator.format("Please enter a value less than or equal to {0}."),
		min: jQuery.validator.format("Please enter a value greater than or equal to {0}.")
	});
	*/
	
});