// VALIDATION
jQuery(document).ready(function()
{
	jQuery(".required input[type!='hidden']").change(checkRequired);
	jQuery(".required select").change(checkRequired);
	jQuery("#formBackButton").click(formBack);
	jQuery(".registerRow input#username").change(validateUserName);
	jQuery(".registerRow input#username").alphanumeric({allow:"_-"});
	jQuery(".registerRow input#email").change(validateEmail);
	jQuery("#userRegister").submit(checkSubmit); 
	jQuery("#avatar-file-picker").change(selectImage);
	modal = jQuery('#prompt');
});


function checkSubmit()
{
	var async = false;
	
	// Set all visible rows to loading, so it looks like stuff b happenin 

	jQuery(".required input").each(function() { checkRequired(false, this) });
	jQuery(".required select").each(function() { checkRequired(false, this) });
	validateUserName(false, async);
	validateEmail(false, async);
	validateDob();

	// Check if any crosses are visible
	if (jQuery("#captchaHolder").is(":visible"))
	{
		captchaCheck();
		
		// Check again.
		if (jQuery(".formError").length > 0)
		{
			return false;	
		}
	}
	else
	{
		if (jQuery(".formError").length > 0)
		{
			return false;	
		}
		
		
		// We're on the main screen - take them to the captcha screen (step 1.5).
		jQuery("#mainRegHolder").hide();
		jQuery("#captchaHolder").show();
		
		return false;
	}
	
	return true;	
}

function formBack()
{
	jQuery("#captchaHolder").hide();
	jQuery("#mainRegHolder").show();
	
	return false;
}


function checkRequired(e, elm)
{
	object = (typeof(elm) == "undefined") ? jQuery(this) : jQuery(elm);
	
	// Only check visible elements.
	if (object.is(':visible'))
	{
		object.parents('.registerRow').removeClass('formError');
		object.parents('.registerRow').removeClass('formSuccess');
		
		if (!object.val())
		{
			object.parents('.registerRow').addClass('formError');
			object.parents('.registerRow').find('.errorText').html('This field is required');
			object.parents('.registerRow').find('.errorText').slideDown('fast');
			
			return false;
		}
		
		// Check length 
		if (object.attr('minlength') > 0 && object.val().length < object.attr('minlength')) 
		{
			object.parents('.registerRow').addClass('formError');
			object.parents('.registerRow').find('.errorText').html('This field must contain more than '+object.attr('minlength')+' characters');
			object.parents('.registerRow').find('.errorText').slideDown('fast');
			
			return false;	
		} 
		
		// Check length 
		if (object.attr('maxlength') > 0 && object.val().length > object.attr('maxlength')) 
		{
			object.parents('.registerRow').addClass('formError');
			object.parents('.registerRow').find('.errorText').html('This field must contain less than '+object.attr('minlength')+' characters');
			object.parents('.registerRow').find('.errorText').slideDown('fast');
			
			return false;	
		} 
		
		
		object.parents('.registerRow').removeClass('formError');
		object.parents('.registerRow').addClass('formSuccess');
		object.parents('.registerRow').find('.errorText').slideUp('fast');
		object.parents('.registerRow').find('.errorText').html('');
	}
	
	return true;
}

function validateUserName(e, asyncVar)
{
	// Set default
	if (asyncVar == null)
		var asyncVar = true;
	
	var obj = jQuery('.registerRow input#username');
	var currentUserName = obj.val();
	var registerRow  = obj.parents('.registerRow');

	// Reset
	registerRow.removeClass('formError');
	registerRow.removeClass('formSuccess');
	registerRow.addClass('formLoading');

	
	// First, check the username for standard validation stuff
	// length, characters, that sort of thing. 
	if(!currentUserName)
	{
		registerRow.removeClass('formSuccess');
		registerRow.removeClass('formLoading');
		registerRow.addClass('formError');
		registerRow.find('.errorText').html('You must enter a valid username');
		registerRow.find('.errorText').slideDown('fast');
		
		return false;
	}
	
	if(currentUserName.length < 4)
	{
		registerRow.removeClass('formSuccess');
		registerRow.removeClass('formLoading');
		registerRow.addClass('formError');
		registerRow.find('.errorText').html('Your Username must be at least 4 characters long.');
		registerRow.find('.errorText').slideDown('fast');
		
		return false;
	}
	
	
	var alphanum = /^([a-zA-Z0-9_-]+)$/;
	if(alphanum.test(currentUserName)==false)
	{
		registerRow.removeClass('formSuccess');
		registerRow.removeClass('formLoading');
		registerRow.addClass('formError');
		registerRow.find('.errorText').html('Sorry, that username contains invlalid characters. You may only letters, numbers, underscores and dashes.');
		registerRow.find('.errorText').slideDown('fast');
		
		return false;
	}
	
	jQuery.ajax({url:"/register/ajax_validate_username/"+currentUserName+"/", type:'GET', async:asyncVar, success: function(data)
	{
		registerRow.removeClass('formLoading');
		
		if (data === 'false')
		{
			registerRow.removeClass('formSuccess');
			registerRow.addClass('formError');
			registerRow.find('.errorText').html('Sorry, that username is already in use. Please choose another.');
			registerRow.find('.errorText').slideDown('fast');

			return false;
		}
		
		registerRow.removeClass('formError');
		registerRow.addClass('formSuccess');
		registerRow.find('.errorText').slideUp('fast');
		registerRow.find('.errorText').html('');

		
		return true;
	}});
	
	return true;
}


function validateEmail(e, asyncVar)
{
	// Set default
	if (asyncVar == null)
		var asyncVar = true;
		
	var obj = jQuery('.registerRow input#email');
	var currentEmail = obj.val();
	var registerRow  = obj.parents('.registerRow');

	// Reset
	registerRow.removeClass('formError');
	registerRow.removeClass('formSuccess');
	registerRow.addClass('formLoading');
	
	// First, check the username for standard validation stuff
	// length, characters, that sort of thing. 
	
	var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
	
	if(!pattern.test(currentEmail))
	{
		registerRow.removeClass('formSuccess');
		registerRow.removeClass('formLoading');
		registerRow.addClass('formError');
		registerRow.find('.errorText').html('You must enter a valid email address');
		registerRow.find('.errorText').slideDown('fast');
		
		return false;
	}
	
	// OK, so we got this far - time for an ajax check
	jQuery.ajax({url:"/register/ajax_validate_email/", type:'POST', async:asyncVar, data:'email='+currentEmail, success: function(data)
	{
		registerRow.removeClass('formLoading');
					
		if (data === 'false')
		{
			registerRow.removeClass('formSuccess');
			registerRow.addClass('formError');
			registerRow.find('.errorText').html('Sorry, that email is already in use. Please choose another.');
			registerRow.find('.errorText').slideDown('fast');
				
			return false;
		}
		
		registerRow.removeClass('formError');
		registerRow.addClass('formSuccess');
		registerRow.find('.errorText').slideUp('fast');
		registerRow.find('.errorText').html('');
	}});
	
	return true;
}

function validateDob()
{
	var dayObj 		= jQuery('.registerRow select#dob_day');
	var monthObj 	= jQuery('.registerRow select#dob_month');
	var yearObj 	= jQuery('.registerRow select#dob_year');
	
	var currentDay   = dayObj.val();
	var currentMonth = monthObj.val();
	var currentYear  = yearObj.val();
	var registerRow  = yearObj.parents('.registerRow');
	
	
	// Reset
	registerRow.removeClass('formError');
	registerRow.removeClass('formSuccess');
	
	if (currentDay && currentMonth && currentYear)
	{
		registerRow.removeClass('formError');
		registerRow.addClass('formSuccess');
		registerRow.find('.errorText').slideUp('fast');
		registerRow.find('.errorText').html('');
		return true;
	}
	
	registerRow.addClass('formError');
	registerRow.removeClass('formSuccess');
	registerRow.find('.errorText').html('Please enter your Date of Birth');
	registerRow.find('.errorText').slideDown('fast');
	
	return false;
}

// Take the captcha information, check its validitity and 
// return a captcha ID that we can check when the form submits.
function captchaCheck()
{
	var challengeField = jQuery("input#recaptcha_challenge_field").val();
	var responseField = jQuery("input#recaptcha_response_field").val();	
	var dataPayload = "recaptcha_challenge_field=" + challengeField + "&recaptcha_response_field=" + responseField;
	
	var registerRow  = jQuery('#captchaHolder .registerRow');

	// Reset
	registerRow.removeClass('formError');
	registerRow.removeClass('formSuccess');
	registerRow.addClass('formLoading');
	
	
	if (!challengeField || !responseField)
	{
		  registerRow.removeClass('formSuccess');
		  registerRow.removeClass('formLoading');
		  registerRow.addClass('formError');
		  registerRow.find('.errorText').html('You must enter the text displayed on the image');
		  registerRow.find('.errorText').slideDown('fast');
		  
		  return false;
	}
	
	
	jQuery.ajax({url:"/register/ajax_check_captcha/", type:'POST', async:false, data:dataPayload, success: function(data)
	{
		registerRow.removeClass('formLoading');
		
		if (data === 'false')
		{
			registerRow.removeClass('formSuccess');
			registerRow.addClass('formError');
			Recaptcha.reload();
			registerRow.find('.errorText').html('Sorry, the text you entered was incorrect. Please try again.');
			registerRow.find('.errorText').slideDown('fast');
		}
		else
		{
			// Update the form with the captcha check ID.
			
			jQuery('input#captcha_check_id').attr('value', data);
			
			registerRow.removeClass('formError');
			registerRow.addClass('formSuccess');
			registerRow.find('.errorText').slideUp('fast');
			registerRow.find('.errorText').html('');
		}
	}});
}

/* AVATAR CROPPER */
function dialog(url) 
{
	modal.load(url, function() {
		var buttons = jQuery('button.close', modal).click(function(e) {
			e.preventDefault();
			modal.overlay().close();
		});

		modal.overlay({
			expose: {
				color: '#333',
				loadSpeed: 200,
				opacity: 0.9
			},
			closeOnClick: false,
			api: true
		}).load();

	});
}

function ajaxFileUpload(f) 
{

	jQuery.ajaxFileUpload ({
		url: '/register/avatar_temp/' + MPORA.globalVars.uid + '/',
		secureuri: false,
		fileElementId: 'avatar-file-picker',
		dataType: 'json',
		success: function (data, status) {

			if (typeof(f)  == 'function') {
				f(data);
			}

			jQuery("#avatar-file-picker").change(selectImage);
		},
		error: function (data, status, e) {
			//console.log(data, status, e);
		}
	});

	return false;
}

function selectImage() {
	
	if (jQuery(this).val() == '') return false;
	
	var input = jQuery("#avatar-file-picker").attr('disabled', 'disabled');

	var loader = jQuery('.ajax-loader');
	loader.fadeIn('fast');

	ajaxFileUpload(function(data) {
		
		jQuery("#avatar-file-picker").removeAttr('disabled');

		if (data['error'] == 'FILE TOO SMALL') {

				dialog('/dialogs/image_upload_too_small/');
				loader.fadeOut('fast');
				return false;
		}
		
		modal.css('width', (data['width']+28)+'px');

		modal.load('/dialogs/image_cropper/' + data['filename'] + '/' + data['width'] + '/' + data['height'] + '/profilepic/', function() {
			loader.fadeOut('fast');
			var buttons = jQuery('input.closebtn', modal).click(function(e) {

				e.preventDefault();

				var postData;
				var form = modal.find('form');
				var yes = jQuery(this).hasClass('save');
				var postData = form.serialize();

				if (yes) {
					// confirm and update image
					postData += '&crop=true';
				} else {
					// delete temp image
					postData += '&cancel=true';
				}
				postData += '&ajax=true';

				jQuery.ajax({
					url: form.attr('action'),
					type: "POST",
					data: postData,
					success: function(msg) {

					//	alert(msg);
						
						jQuery('#avatar').fadeOut('fast', function() {
							var timestamp = new Date().getTime();
							var newAvatar = MPORA.globalVars.base_url + 'images/avatar/' + MPORA.globalVars.uid + '/m/'+timestamp;
							jQuery(this).attr('src', newAvatar);
							jQuery('#normalAvatar').attr('src', newAvatar);
							jQuery(this).fadeIn('fast');
						})
					
						
						modal.overlay().close();
					}
				});
			});

			modal.find('img').load(function() {
				// wait until the image has loaded
				imgWidth = data['width'];
				imgHeight = data['height'];

				modal.overlay({
					expose: {
						color: '#333',
						loadSpeed: 200,
						opacity: 0.9
					},
					closeOnClick: false,
					api: true,
					onLoad: function() {
						setUpCropper();
					},
					onClose: function() {
						jQuery("#avatar-file-picker").removeAttr('disabled');
					}, 
					close: 'close'
				}).load();
			});
		});
	});
	return false;
}

function setUpCropper() {

	var crop = jQuery('#crop-profile-image');
	if ( crop.length > 0 ) {
		// Crop image page

		var x 		= jQuery("input[name='x']", crop);
		var y 		= jQuery("input[name='y']", crop);
		var height 	= jQuery("input[name='h']", crop);
		var width 	= jQuery("input[name='w']", crop);

		function processCoords(c) {
			x.val(c.x);
			y.val(c.y);
			width.val(c.w);
			height.val(c.h);
		};

		var api = jQuery.Jcrop('#crop', {
			allowMove: true,
			allowResize: true,
			aspectRatio: 1,
			minSize: [80, 80],
			onSelect: processCoords
		});

		var xQ = imgWidth / 2;
		var yQ = imgHeight / 2;
		var dimensions = [ xQ - 98, yQ - 98, xQ + 98, yQ + 98 ];
		api.setSelect(dimensions);
		processCoords({x: xQ - 98, y: yQ - 98, w: 196, h: 196});

//			jQuery('form', crop).submit();

	};
}