// JavaScript for paws-resort.co.za by Claude Müller

var breedsArr = new Array("Chihuahua",
					"Mini Pincher",
					"Mini Yorkie",
					"Border Terrier",
					"Boston Terrier",
					"Dachshund",
					"French Bulldog",
					"Griffon",
					"Jack Russell",
					"King Charles Spaniel",
					"Maltese Poodle",
					"Mini Schnauzer",
					"Pekinese",
					"Shih Tzu",
					"Yorkshire Terrier",
					"Miniature Poodle",
					"Pug",
					"Basenji",
					"Beagle",
					"Border Collie",
					"Cocker Spaniel",
					"Corgi",
					"Fox Terrier",
					"Irish Setter",
					"Scottish Terrier",
					"Springer Spaniel",
					"Wire Hair Terrier",
					"Afghan Hound",
					"Airedale Terrier",
					"Australian Shepard",
					"Basset",
					"Bearded Collie",
					"Blood Hound",
					"Boxer",
					"Bulldog",
					"Dalmation",
					"Doberman",
					"English Setter",
					"German Shepard",
					"Grey Hound",
					"Siberian Husky",
					"Labrador Retriever",
					"English Pointer",
					"German Pointer",
					"Golden Retriever",
					"Rhodesian Ridgeback",
					"Rough Collie",
					"Saluki",
					"Standard Schnauzer",
					"Standard Poodle",
					"Weimaraner",
					"Alsatian",
					"Bernese Mountain Dog",
					"Boerbull",
					"Bull Mastiff",
					"English Mastiff",
					"Great Dane",
					"Malamute",
					"Newfoundland",
					"Rottewelier",
					"St. Bernard",
					"Wolfhound",
					"Bull Terrier",
					"Chow",
					"Kerry Blue",
					"Sharpei",
					"Staffordshire Terrier");
var breeds = "";
breedsArr.sort();
for(var i=0; i<breedsArr.length; i++) {
	breeds = breeds + '									<option value="' + breedsArr[i] + '">' + breedsArr[i] + '</option>\n';
}


$(document).ready(function() { 
		
	// Date Picker
	$(".vacDatepicker").live("focus",function() { $(this).datepicker({ dateFormat: 'dd/mm/yy' }) }); 
	
	$(".datepicker").live("focus",function() { $(this).datepicker({ 
	       	beforeShowDay: noSunday, 
	       	dateFormat: 'dd/mm/yy'
       		//showOn: "both", 
       		//buttonImage: "templates/images/calendar.gif", 
       		//buttonImageOnly: true
		})
    }); 
    function noSunday(date){ 
        var day = date.getDay(); 
        return [(day > 0), '']; 
    };

	
	// Change number of pets input
	$('#no_of_pets').blur(function(){
		i = 0;
		petDetails = $('#petDetails1');
		noOfPets = $('#no_of_pets')
		if($('#no_of_pets').val() > 4) {
			alert('A maximum of 4 pets is allowed.');
			noOfPets.val(4);
		}
		petDetails.html('');
		petDetails.hide();
		j = false;
		while(i < noOfPets.val()) {
			$thisPet =  i+1;
			petDetails.append("<div id='pet" + $thisPet + "' class='displayTable petDetails'>\
										<h2>Pet " + $thisPet + "</h2>\
										<div class='displayTable formLabels'>\
											<label for='petName" + $thisPet + "'>Pet's Name:</label><br />\
											<label for='colour" + $thisPet + "'>Colour:</label><br />\
											<label for='gender" + $thisPet + "'>Gender:</label><br />\
											<label for='type" + $thisPet + "'>Pet Type:</label><br />\
											<div class='breed'>\
												<label for='breed" + $thisPet + "'>Breed:</label><br />\
											</div>\
											<label for='age" + $thisPet + "'>Age:</label><br />\
											<label>Is you pet:</label><br />\
											<label for='vaccinated" + $thisPet + "'>Vaccination record:</label><br />\
											<label for='accType" + $thisPet + "'>Please choose kennel type:</label>\
										</div>\
										<div class='displayTable'>\
											<input type='text' name='petName" + $thisPet + "' name='petName" + $thisPet + "' class='formPetInputs' /><br />\
											<input type='text' name='colour" + $thisPet + "' class='formPetInputs' /><br />\
											<input type='radio' name='gender" + $thisPet + "' value='Male' class='genderRadio'> Male&nbsp;\
											<input type='radio' name='gender" + $thisPet + "' value='Female' class='genderRadio'> Female<br />\
											<input type='radio' name='type" + $thisPet + "' value='dog' class='typeRadio'> Dog&nbsp;\
											<input type='radio' name='type" + $thisPet + "' value='cat' class='typeRadio'> Cat<br>\
											<div class='breed'>\
												<select name='breed" + $thisPet + "' class='formPetInputs' >\
													<option value=''>Choose one</option>\
													" + breeds + "\
												</select>\
											</div>\
											<input type='text' name='age" + $thisPet + "' class='formPetInputs' /><br />\
											<span class='spayedNeutered'>\
												<input type='checkbox' name='spayed" + $thisPet + "' value='Spayed'> Spayed?&nbsp;\
												<input type='checkbox' name='neutered" + $thisPet + "' value='Neutered'> Neutered?\
											</span><br />\
											<div class='vaccinated'>\
												<br />\
											</div>\
											<div class='accType'>\
												<input type='radio' name='accType" + $thisPet + "' value='kennels'> Kennels&nbsp;\
												<input type='radio' name='accType" + $thisPet + "' value='chalets'> Chalets<br />\
											</div>\
											<input type='checkbox' name='heated" + $thisPet + "' value='heated' /> Does your pet require heating?\
										</div>\
									</div>");
			if(j == true) {
				petDetails.append("<br />");
				j = false;
			} else {
				j = true;
			}
			i++;
		}
		petDetails.fadeIn('fast');
	});
	
	// Change spayed or neutered
	$(':radio.genderRadio').live('click', function() {
		$thisPet = $(this).parent();
		if($(this).val() == "Female") {
			$('.spayedNeutered', $thisPet).html('<input type="checkbox" name="spayed1" value="Spayed"> Spayed?');
			$('.he_she', $thisPet).text('he');
		} else {
			$('.spayedNeutered', $thisPet).html('<input type="checkbox" name="neutered1" value="Neutered"> Neutered?');
			$('.he_she', $thisPet).text('she');
		}
	});
	// Change dog or cat
	$(':radio.typeRadio').live('click', function() {
		$thisPet = $(this).parent().parent();
		$thisPetNo = $thisPet.attr('id').replace(/\D/g,'');
		if($(this).val() == "cat") {
			$('.breed', $thisPet).fadeOut('fast');
			$('.breedLabel', $thisPet).fadeOut('fast');
			$('.breed select option', $thisPet).val('Cat');
			$('.accType', $thisPet).html('					<input type="radio" name="accType' + $thisPetNo + '" value="cabanas" checked > Cabanas<br>');
			$('.vaccinated', $thisPet).html('				<table>\
																<tr>\
																	<td>3:1:&nbsp;</td><td><input type="text" name="threeInOne' + $thisPetNo + '" class="vacDatepicker" /></td>\
																</tr><tr>\
																	<td>Rabies:&nbsp;</td><td><input type="text" name="rabies' + $thisPetNo + '" class="vacDatepicker" /></td>\
																</tr><tr>\
																	<td>Snuffles:&nbsp;</td><td><input type="text" name="snuffles' + $thisPetNo + '" class="vacDatepicker" /></td>\
																</tr>\
															</table>');
		} else {
			$('.breed', $thisPet).fadeIn('fast');
			$('.breedLabel', $thisPet).fadeIn('fast');
			$('.accType', $thisPet).html('					<input type="radio" name="accType' + $thisPetNo + '" value="kennels" checked> Kennels&nbsp;\
															<input type="radio" name="accType' + $thisPetNo + '" value="chalets"> Chalets<br />');
			$('.vaccinated', $thisPet).html('				<table>\
																<tr>\
																	<td>5:1:&nbsp;</td><td><input type="text" name="fiveInOne' + $thisPetNo + '" class="vacDatepicker" /></td>\
																</tr><tr>\
																	<td>Rabies:&nbsp;</td><td><input type="text" name="rabies' + $thisPetNo + '" class="vacDatepicker" /></td>\
																</tr><tr>\
																	<td>Kennel Cough:&nbsp;</td><td><input type="text" name="kennelCough' + $thisPetNo + '" class="vacDatepicker" /></td>\
																</tr>\
															</table>');
			//$('#breed select option', $thisPet).val('');
		}
	});
	
	// Error display
	$('label.error').live({mouseenter: function() {
		$(this).css('cursor', 'pointer');
		$('span', this).fadeIn('fast');
	}, mouseleave: function() {
		$('span', this).fadeOut('fast');
	}
	});
	
    
	// Validate form
	// Add new method
	$.validator.addMethod("greaterThan", function(value, element, params) {
        if (!/Invalid|NaN/.test(new Date(value))) {
            return new Date(value) > new Date($(params).val());
        }
        return isNaN(value) && isNaN($(params).val()) || (parseFloat(value) > parseFloat($(params).val())); 
    },'Must be greater than {0}.');

	// Validate
	$("#regularBoardingForm").validate({
		rules: {
			firstname: "required",
			lastname: "required",
			tel: {
				required: true,
				minlength: 10
			},
			email: {
				required: true,
				email: true
			},
			resAddress: "required",
			boarding_from: "required",
			boarding_to: {
				required: true,
				greaterThan: "#boardingFrom"
			},
			no_of_pets: {
				required: true,
				number: true
			},
			petName1: "required",
			colour1: "required",
			gender1: "required",
			type1: "required",
			breed1: "required",
			age1: {
				required: true,
				number: true
			},
			vaccinated1: "required",
			petName2: "required",
			colour2: "required",
			gender2: "required",
			type2: "required",
			breed2: "required",
			age2: {
				required: true,
				number: true
			},
			vaccinated2: "required",
			petName3: "required",
			colour3: "required",
			gender3: "required",
			type3: "required",
			breed3: "required",
			age3: {
				required: true,
				number: true
			},
			vaccinated3: "required",
			petName4: "required",
			colour4: "required",
			gender4: "required",
			type4: "required",
			breed4: "required",
			age4: {
				required: true,
				number: true
			},
			vaccinated4: "required"
		},
		messages: {
			firstname: "<img src='images/error.gif' /><span class='ui-corner-all'>Please enter your first name</span>",
			lastname: "<img src='images/error.gif' /><span class='ui-corner-all'>Please enter your last name</span>",
			tel: {
				required: "<img src='images/error.gif' /><span class='ui-corner-all'>Please enter a contact number</span>",
				minlength: "<img src='images/error.gif' /><span class='ui-corner-all'>Please enter a valid 10 digit telephone number</span>"
			},
			email: "<img src='images/error.gif' /><span class='ui-corner-all'>Please enter a valid email address</span>",
			resAddress: "<img src='images/error.gif' /><span class='ui-corner-all'>Please enter a valid residential address</span>",
			boarding_from: "<img src='images/error.gif' /><span class='ui-corner-all'>Please enter a arrival date</span>",
			boarding_to: {
				required: "<img src='images/error.gif' /><span class='ui-corner-all'>Please enter a departure date</span>",
				greaterThan: "<img src='images/error.gif' /><span class='ui-corner-all'>The departure date needs to be after the arrival</span>"
			},
			no_of_pets: {
				required: "<img src='images/error.gif' /><span class='ui-corner-all'>Please specify the number of pets</span>",
				number: "<img src='images/error.gif' /><span class='ui-corner-all'>Please enter a valid number of pets</span>"
			},
			petName1: "<img src='images/error.gif' /><span class='ui-corner-all'>Please enter your pet's name</span>",
			colour1: "<img src='images/error.gif' /><span class='ui-corner-all'>Please enter your pet's colour</span>",
			gender1: "<img src='images/error.gif' /><span class='ui-corner-all'>Please enter your pet's gender</span>",
			type1: "<img src='images/error.gif' /><span class='ui-corner-all'>Please indicate whether your pet is a dog or cat</span>",
			breed1: "<img src='images/error.gif' /><span class='ui-corner-all'>Please enter your pet's breed</span>",
			age1: "<img src='images/error.gif' /><span class='ui-corner-all'>Please enter your pet's age</span>",
			vaccinated1: "<img src='images/error.gif' /><span class='ui-corner-all'>Has your pet been vaccinated in the past 90 days?</span>",
			petName2: "<img src='images/error.gif' /><span class='ui-corner-all'>Please enter your pet's name</span>",
			colour2: "<img src='images/error.gif' /><span class='ui-corner-all'>Please enter your pet's colour</span>",
			gender2: "<img src='images/error.gif' /><span class='ui-corner-all'>Please enter your pet's gender</span>",
			type2: "<img src='images/error.gif' /><span class='ui-corner-all'>Please indicate whether your pet is a dog or cat</span>",
			breed2: "<img src='images/error.gif' /><span class='ui-corner-all'>Please enter your pet's breed</span>",
			age2: "<img src='images/error.gif' /><span class='ui-corner-all'>Please enter your pet's age</span>",
			vaccinated2: "<img src='images/error.gif' /><span class='ui-corner-all'>Has your pet been vaccinated in the past 90 days?</span>",
			petName3: "<img src='images/error.gif' /><span class='ui-corner-all'>Please enter your pet's name</span>",
			colour3: "<img src='images/error.gif' /><span class='ui-corner-all'>Please enter your pet's colour</span>",
			gender3: "<img src='images/error.gif' /><span class='ui-corner-all'>Please enter your pet's gender</span>",
			type3: "<img src='images/error.gif' /><span class='ui-corner-all'>Please indicate whether your pet is a dog or cat</span>",
			breed3: "<img src='images/error.gif' /><span class='ui-corner-all'>Please enter your pet's breed</span>",
			age3: "<img src='images/error.gif' /><span class='ui-corner-all'>Please enter your pet's age</span>",
			vaccinated3: "<img src='images/error.gif' /><span class='ui-corner-all'>Has your pet been vaccinated in the past 90 days?</span>",
			petName4: "<img src='images/error.gif' /><span class='ui-corner-all'>Please enter your pet's name</span>",
			colour4: "<img src='images/error.gif' /><span class='ui-corner-all'>Please enter your pet's colour</span>",
			gender4: "<img src='images/error.gif' /><span class='ui-corner-all'>Please enter your pet's gender</span>",
			type4: "<img src='images/error.gif' /><span class='ui-corner-all'>Please indicate whether your pet is a dog or cat</span>",
			breed4: "<img src='images/error.gif' /><span class='ui-corner-all'>Please enter your pet's breed</span>",
			age4: "<img src='images/error.gif' /><span class='ui-corner-all'>Please enter your pet's age</span>",
			vaccinated4: "<img src='images/error.gif' /><span class='ui-corner-all'>Has your pet been vaccinated in the past 90 days?</span>"
		}
	});

	
	// Contact AJAX
	$("#contactForm").submit(function(){
		var str = $(this).serialize();

		$.ajax({
			type: "POST",
			url: "files/contact.php",
			data: str,
			success: function(msg){
				$("#note").ajaxComplete(function(event, request, settings){
					if(msg == 'OK') { 
						result = "<div class='menu bookingQuote'>\
									<ul class='ui-widget-header ui-corner-all'>\
										<li><a href='" + document.URL + "' title='Successfully Sent!' class='ui-state-default ui-corner-all repeatBack'>Your message has been sent. Thank you!</a></li>\
									</ul>\
								  </div>";
						$("#fields").hide();
					}
					else {
						result = msg;
					}
					$(this).html(result);
				});
			}
		});
		return false;
	});
	//});
});