// jQuery script to handle new user registration
jQuery(document).ready(function($){

	// display user-specific fields in the register form
	$('#radio_user').bind (
		'click',
		function(){
			
			$('#registerBandFields').hide();
			$('#notificationBand').hide();
			$('#registerUserFields').show();
			$('#notificationUser').show();
								
		}
	);

	// display band-specific fields in the register form	
	$('#radio_band').bind (
		'click',
		function(){
			
			$('#registerUserFields').hide();
			$('#notificationUser').hide();
			$('#notificationBand').show();
			$('#registerBandFields').show();
							
		}
	);
	
	// username validator, see http://jqueryfordesigners.com/using-ajax-to-validate-forms/
	var validateUsername = $('#validateUsername');
	$('#usernameRegistration').keyup(function () {
		var t = this; 
		if (this.value.length < 5) {
			validateUsername.html('<img src="http://images01.pickrset.com/icons/exclamation.png" width="16" height="16" alt="Error" class="smallIcon" /> <span class="bold red">Username must be at least 5 characters.</span>');
		} else {
			if (this.value.length >= 5 && this.value != this.lastValue) {
				if (this.timer) clearTimeout(this.timer);
				validateUsername.html('<img src="http://images01.pickrset.com/icons/ajax-loader.gif" height="16" width="16" alt="Loading..." /> Checking availability...');
		      
				this.timer = setTimeout(function () {
					
					// AJAX call to check if username is already in use
					$.ajax({
						url: '/ajax/userExists.php',
						data: 'username=' + t.value,
						type: 'post',
						success: function (j) {
							validateUsername.html(j);
						}
					});
				}, 200);
		      
				this.lastValue = this.value;
			} else {
				validateUsername.html('');
			}
		}
  	});
  	
  	// bandname validator, see http://jqueryfordesigners.com/using-ajax-to-validate-forms/
	var validateBandname = $('#validateBandname');
	$('#bandnameRegistration').keyup(function () {
		var t = this; 
		if (this.value.length >= 3 && this.value != this.lastValue) {
			if (this.timer) clearTimeout(this.timer);
			validateBandname.html('<img src="http://images01.pickrset.com/icons/ajax-loader.gif" height="16" width="16" alt="Loading..." /> Checking availability...');
	      
			this.timer = setTimeout(function () {
				
				// AJAX call to check if username is already in use
				$.ajax({
					url: '/ajax/bandExists.php',
					data: 'bandname=' + t.value,
					type: 'post',
					success: function (j) {
						validateBandname.html(j);
					}
				});
			}, 200);
	      
			this.lastValue = this.value;
		} else {
			validateBandname.html('');
		}
  	});
  	
  	// password validator, make sure passwords match
	var validatePassword 	= $('#validatePassword');
	var status_text;
	$('#password2').keyup(function () {
		var password = $('#passwordRegistration').val();
		var t = this; 
		if (this.value.length > 0 && this.value != this.lastValue) {

			// check if passwords match
			if (t.value == password) {
				status_text = '<img src="http://images01.pickrset.com/icons/tick.png" width="16" height="16" alt="Ok" class="smallIcon" /> <span class="bold green">Passwords match!</span>';
			} else {
				status_text = '<img src="http://images01.pickrset.com/icons/exclamation.png" width="16" height="16" alt="Error" class="smallIcon" /> <span class="bold red">Passwords do not match!</span>';
			}
			validatePassword.html(status_text);

			this.lastValue = this.value;
		} else {
			validatePassword.html('');
		}
  	});

});