var step = 1;

var nameAvailability=0;
var emailAvailability=0;

$(function(){
	//Auto transitioning of the "How it works" section
	$('#workstep1').everyTime(10000, changeStep);
	
	//Form UI stuff. Must be done in javascript since IE doesn't support the pseudo tags in CSS.
	var inputs = $('#demo-form>:input:not(:button),#teachers-only>:input(:button)');
	$(inputs).each(function(){
		$(this).focus(function(){
			$(this).css({'border':'#0071bc solid medium','background':'#f7f7f7'})
		});
	});
	$(inputs).each(function(){
		$(this).blur(function(){
			$(this).css({'border':'#ececec solid medium','background':'none'})
		});
	});

	//make them like this for ie6
	$(inputs).each(function(){
			$(this).css({'border':'#ececec solid medium','background':'none'})
	});
	
	$('#demo-email').blur(function() {
		validateEmail();
	});
});

function changeStepQuick(goToStep){
	$('.textstep:visible').fadeOut(700);
	$('#step'+step).attr('src',mediaURL+'images/workstep'+step+'.png');
	step = goToStep;
	$('#step'+step).attr('src',mediaURL+'images/workstep'+step+'active.png');
	
	$('.workstep:visible').hide('drop', {direction:'right'}, 700, function(){
		$('#workstep'+step).show('drop', {}, 700);
		$('#textstep'+step).fadeIn(700);
		
		//reset timer
		$('#workstep1').stopTime();
		$('#workstep1').everyTime(10000, changeStep);
	})
}

function changeStep(){
	$('#textstep'+step).fadeOut(700);
	$('#workstep'+step).hide('drop', {direction:'right'}, 700, function(){
		$('#step'+step).attr('src',mediaURL+'images/workstep'+step+'.png');
		if (step < 3){
			step += 1;
		}else{
			step = 1;
		}
		$('#step'+step).attr('src',mediaURL+'images/workstep'+step+'active.png');
		$('#workstep'+step).show('drop', {}, 700);
		$('#textstep'+step).fadeIn(700);
	})
}
function setUsername(){
	var username = $.trim($('#firstname').val().substr(0, 1) + $('#lastname').val()).replace(/ /, '').toLowerCase();
	if (username.match(/^\w+$/)) {
		$('#username').val(username);
	}
}

function checkUsername() {
	$('#usernamestatus').text('.');
	
	if ($('#username').val().match(/\W/)) {
		$('#usernamestatus').css('color','red');
		$('#usernamestatus').text('Username contain invalid charchters');
		nameAvailability = -1;
		return false;
	}
	
	$.post('/usernamecheck/', {username :  $('#username').val() }, 
		function(data) {
			if (data == '1') {
				$('#usernamestatus').css('color','red');
				$('#usernamestatus').text('Username already taken');
				nameAvailability = -1;
			}
			else {
				$('#usernamestatus').css('color','green');
				$('#usernamestatus').text('Username free');
				nameAvailability = 1;
			}
		},
		"text");
	if ($('#demo-email').val() != '') {
	$.post('/emailcheck/', {email : $('#demo-email').val() }, 
		function(data) {
			if (data == '1') {
				emailAvailability = -1; // HACK FOR EMAIL CHECKING! AHHH
			}
			else {
				emailAvailability = 1;
			}
		},
		"text");
}
}


function validateForm() {
	if (validateTextInputs() && validateSelectBoxes() && validateEmail()) {
		$('#demo-form').submit()
		//$('#demo-form').animate({opacity: "0"}, 1600, "", function(){ 
			
		//});
		//$('#thankyou').fadeIn(2500);
		
	}

}

function validateSelectBoxes() {
	var validated = true;
	
	$('#demo-form>select').each(function(){
		if ($(this).val() == 'null'){
			$(this).css({'background':'#f88989'});
			$('#form-error').text('Please choose an option from the dropdown menu.').fadeIn('slow');
			validated = false;
		}
	});
	
	return validated;
}

//Note that the state field is not required.
function validateTextInputs() {
	var requiredInputs = $.makeArray($('#demo-form>:text:not(#demo-state),#demo-form>:password:not(#demo-state)'));
	var validated = true;
	
	for (input in requiredInputs) {
		if ($(requiredInputs[input]).val() == ""){
			$(requiredInputs[input]).css({'border':'#0071bc solid medium','background':'#f7f7f7'});
			$('#form-error').text('Please fill in the highlighted fields above.').fadeIn('slow');
			validated = false;
		}
	}
	
	if ($('#password').val() != $('#password2').val()) {
			$('#form-error').text('Passwords must match!').fadeIn('slow');
			validated = false;
	}
		
	if (nameAvailability == 0) {
		checkUsername();
		setTimeout('validateForm()',1000);
		validated = false;
	}
	
	if ($('#usernamestatus').text() == 'Username already taken') {
		validated = false;
		$('#form-error').text('Please choose a different username.').fadeIn('slow');
	}
	
	if ($('#username').val().match(/\W/)) {
		$('#usernamestatus').css('color','red');
		$('#usernamestatus').text('Username contain invalid charchters');
		nameAvailability = -1;
		$('#form-error').text('Please only use unaccented letters, numbers, and the underscore in your username.').fadeIn('slow');
		validated = false;
	}
	
	return validated;
}

function validateEmail() {
	//Check that a valid email address has been entered.
	if ($('#demo-email').val().search(/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i) == -1 && $('#demo-email').val() != ""){
		$('#demo-email').css({"border":"#f88989 solid medium","background":"#f7f7f7"});
		$('#email-error').text('This is not a valid email address.').fadeIn('slow');
		return false;
	}
	else if (emailAvailability == -1) {
			$('#demo-email').css({"border":"#f88989 solid medium","background":"#f7f7f7"});
			$('#email-error').text('This email address is already taken.').fadeIn('slow');	
			$('#form-error').text('Please correct the email error above.').fadeIn('slow');	
	}
	else if (emailAvailability == 0) {
		checkUsername();
		setTimeout('validateEmail()',1000);
	} 
	else {
		$('#email-error').fadeOut('slow');
		return true;
	}
}