$(function() {
	var FORM = $('form'), LOADING = $('#loading'), INACTIVE_CARD = $('#inactive-card'), ACTIVE_CARD = $('#active-card'), HEADING = $('h1'), DESCRIPTION = $('b.grey');

	// Validate form entry
	$.validator.addMethod("lettersonly", function(value, element) {
		return this.optional(element) || /^[a-z,-]+$/i.test(value);
	}, "Letters only please.");
	function initValidate() {
		$('form').validate({
			rules : {
				firstname : {
					required : true,
					lettersonly : true
				},
				surname : {
					required : true,
					lettersonly : true
				},
				address1 : {
					required : true,
					minlength : 4
				},
				suburb : "required",
				state : "required",
				postcode : {
					required : true,
					minlength : 4,
					number : true
				},
				country : "required",
				contactnumber : {
					required : true,
					number : true
				},
				email : {
					required : true,
					email : true
				},
				email2 : {
					required : true,
					email : true,
					equalTo : 'input[name=email]'
				}
			},
			messages : {
				email2 : {
					equalTo : 'Please enter the same email as above'
				}
			},
			submitHandler : function() {
				// Show and hide button panels
				$('#buttonForm, select, input[type=text]').hide();
				$('#buttonConfirm, table tr td b').show();
				$('#btnConfirm').focus();

				// Render description
				DESCRIPTION.html('To confirm that your details are correct, click on <b>CONFIRM &amp; ACTIVATE.</b><br />If you\'ve made an error and want you change your details, click on <b>GO BACK.</b>');

				// Render text version of all fields for confirmation page
				$('select, input[type=text]').each(function() {
					name = $(this).attr('name');
					// if(name == 'locationId') {
						// // show select box text instead of value for locationId
						// $('b.confirm-' + name).html($("#locationId option:selected").text());
					// } else 
					if (name == 'firstName' || name == 'lastName' || name == 'address1' || name == 'address2') {
						$('b.confirm-' + name).html('<span class="capitalize">' + $(this).val() + '</span>');
					} else {
						$('b.confirm-' + name).html($(this).val());
					}
				});
				// Render breadcrumb
				$('#navigationInner ul li:eq(1)').addClass('done');

				// Remove error messages
				$("#responseWrapper").html('');
				return;
			}
		});
	};

	initValidate();
	$('#btnGoBack').click(function(e) {
		// Show and hide button panels
		$('#buttonForm, select, input[type=text]').show();
		$('#buttonConfirm, table tr td b').hide();

		// Render breadcrumb
		$('#navigationInner ul li:eq(1)').removeClass('done');
	});
	$('#btnConfirm').click(function(e) {
		$.ajax({
			url : '/vip/index/activate',
			data : $("#applicationForm").serialize(),
			type : 'POST',
			beforeSend : function() {
				LOADING.show();
				$('#buttonConfirm').hide();
				$("#responseWrapper").html('');
			},
			success : function(data) {
				var obj = jQuery.parseJSON(data);
				if(obj['success'] === true) {
					FORM.hide();
					INACTIVE_CARD.fadeOut(500, function() {
						ACTIVE_CARD.fadeIn(500);
					});

					HEADING.html('Welcome ' + $('.txtFirstname').first().text() + '!');
					DESCRIPTION.html('<p>Your card has now been activated and you can start enjoying<br />the benefits of VIP membership immediately.</p><p>Enjoy being a member of the the Club within <b>The Club!</b></p><p>Did you know the average member saves over $450 per year?<br> and there are over 270 locations worldwide.</p><p>We look forward to meeting you soon at The Coffee Club.</p><p>Warm regards,</p><p>John Lazarou<br><img src="../assets/images/sig_white.png" /><br>Public Relations Director</p><br><br><br>');

					$('#facebookLikeButton').show();
					// Render activated card
					$('.vipCard').removeClass('vipCard').addClass('vipCardUnLocked').find('h4').html('- VIP CARD ACTIVATED -').end().hide().fadeIn(1000, function() {
						$('#voucher').show().css({
							opacity : 0
						}).animate({
							opacity : 1,
							left : '15px'
						}, 700);
					});
					// Render breadcrumb
					$('#navigationInner ul li:eq(2)').addClass('done');
				} else if(obj['message'] !== '') {
					$("#responseWrapper").html(obj['message']);
					LOADING.hide();
					// Show and hide button panels
					$('#buttonForm, select, input[type=text]').show();
					$('#buttonConfirm, table tr td b').hide();

					// Render breadcrumb
					$('#navigationInner ul li:eq(1)').removeClass('done');
				}
			}
		});
	});
	// Create text version of all fields for confirmation page
	$('select, input[type=text]').each(function() {
		var $this = $(this);
		$this.after('<b class="confirm-' + $this.attr('name') + '">' + $this.val() + '</b>');
		// if($(this).attr('name') == 'locationId') {
			// // show select box text instead of value for locationId
			// $('b.confirm-' + $(this).attr('name')).html($("#locationId option:selected").text());
		// } else {
			// $('b.confirm-' + $(this).attr('name')).html($(this).val());
		// }
	});
	// Turn on off state
	var trState = $('#state');
	$('select[name=country]').change(function() {
		if($(this).val() == "Australia") {
			$('#stateWrapper').append(trState);
		} else {
			$('#state').remove();
		}
	});
	// Auto update card names when typing
	var txtF = $('.txtFirstname'), txtS = $('.txtSurname'), fldF = $('input[name=firstName]'), fldS = $('input[name=lastName]');
	$('input[name=firstName], input[name=lastName]').keyup(function() {
		txtF.text(fldF.val());
		txtS.text(fldS.val());
	});
	// Auto complete state, postcode fields when type in suburb (CACHED to speed up)
	var suburbCache = {};
	var suburbTemp = '';
	$("input[name=suburb]").autocomplete({
		source : function(request, response) {
			var term = request.term + $('select[name=country]').val();
			if( term in suburbCache) {
				response($.map(suburbCache[term], function(suburb) {
					return {
						label : suburb.suburb + " (" + suburb.state + ", " + suburb.postcode + ")",
						value : suburb
					}
				}));
			}

			$.post('/vip/index/list-suburbs', {
				'term' : request.term,
				'country' : $('select[name=country]').val()
			}, function(data) {
				var suburbData = jQuery.parseJSON(data);
				suburbCache[term] = suburbData;
				response($.map(suburbData, function(suburb) {
					return {
						label : suburb.suburb + " (" + suburb.postcode + ", " + suburb.state + ")",
						value : suburb
					}
				}));
			});
		},
		minLength : 2,
		select : function(event, ui) {
			// need to hold suburb text temporarily and replace it in the 'close' event as we cannot set it here
			suburbTemp = ui.item.value.suburb;
			$("#state").val(ui.item.value.state);
			$("input[name=postcode]").val(ui.item.value.postcode);
		},
		close : function(event, ui) {
			if (suburbTemp != '') {
				$("input[name=suburb]").val(suburbTemp);
				delete suburbTemp;
			}
		}
	});

	// Auto complete state, postcode fields when type in suburb (CACHED to speed up)
	var postcodeCache = {};
	var postcodeTemp = '';
	$("input[name=postcode]").autocomplete({
		source : function(request, response) {
			var term = request.term + $('select[name=country]').val();
			if( term in postcodeCache) {
				response($.map(postcodeCache[term], function(suburb) {
					return {
						label : suburb.postcode + " (" + suburb.suburb + ", " + suburb.state + ")",
						value : suburb
					}
				}));
			}

			$.post('/vip/index/list-postcodes', {
				'term' : request.term,
				'country' : $('select[name=country]').val()
			}, function(data) {
				var suburbData = jQuery.parseJSON(data);
				postcodeCache[term] = suburbData;
				response($.map(suburbData, function(suburb) {
					return {
						label : suburb.postcode + " (" + suburb.suburb + ", " + suburb.state + ")",
						value : suburb
					}
				}));
			});
		},
		minLength : 2,
		select : function(event, ui) {
			// need to hold suburb text temporarily and replace it in the 'close' event as we cannot set it here
			postcodeTemp = ui.item.value.postcode;
			$("input[name=suburb]").val(ui.item.value.suburb);
			$("#state").val(ui.item.value.state);
		},
		close : function(event, ui) {
			if (postcodeTemp != '') {
				$("input[name=postcode]").val(postcodeTemp);
				$("input[name=email]").focus();
				delete postcodeTemp;
			}
		}
	});
	
	// Auto complete state, postcode fields when type in suburb (CACHED to speed up)
	var storeCache = {};
	var storeTemp = '';
	$("input[name=location]").autocomplete({
		source : function(request, response) {
			var term = request.term;
			if( term in storeCache) {
				response($.map(storeCache[term], function(store) {
					return {
						label : store.strStore,
						value : store
					}
				}));
			}

			$.post('/vip/index/list-stores', {
				'term' : request.term
			}, function(data) {
				var storeData = jQuery.parseJSON(data);
				storeCache[term] = storeData;
				response($.map(storeData, function(store) {
					return {
						label : store.strStore,
						value : store
					}
				}));
			});
		},
		minLength : 1,
		select : function(event, ui) {
			storeTemp = ui.item.value;
		},
		close : function(event, ui) {
			//$("input[name=location]").val('');
			$("input[name=locationId]").val('');
			if (storeTemp != '') {
				$("input[name=location]").val(storeTemp.strStore);
				$("input[name=locationId]").val(storeTemp.intInternalID);
			}
			delete storeTemp;
		}
	});
});