// This is needed to keep track of when we are hovering
// over the "Sign In" button.
var login_hover = 0;


$(document).ready(function(){

	// ...and be sure that anytime a different plan is selected...
	$('div.plan_tile').click(function(){
		if($(this).attr('desc')) {
			$('.plan_tile_duplicate').html($(this).html());
			//$('span.choosen_plan_desc').html($(this).attr('desc'));
			$('div.plan_tile').removeClass('plan_tile_selected');
			$(this).addClass('plan_tile_selected');
		}
	});
	$('div.plan_tile').first().click();



	// Code for the dynamic "Sign In" button drop down
	$('.login_button').click(function(){
		if(!$('#login_form').is(':visible')) {
			$('a.login_button').addClass('login_button_active');
			$('#login_form').show('slide',{direction: 'up'},500);
		}
	});
	// The next few blocks keep track of when we are and are not
	// "hovering" over the sign in button or the sign in form itself.
	$('.login_button').mouseover(function(){
		login_hover = 1;
	});
	$('.login_button').mouseout(function(){
		login_hover = 0;
	});
	$('#login_form').mouseover(function(){
		login_hover = 1;
	});
	$('#login_form').mouseout(function(){
		login_hover = 0;
	});
	// Now that we have the above keeping track of when we are hovered over
	// the sign in stuff, we bind a global click event to the entire document...
	$(document).click(function(){
		// ...and if we click anywhere on the document while NOT hovering
		//    over any of the sign in stuff...
		if(login_hover==0 && $('#login_form').is(':visible')) {
			// ...then hide the sign in form and remove the "login_button_active"
			//    class from the sign in button itself.
			$('a.login_button').removeClass('login_button_active');
			$('#login_form').hide('slide',{direction: 'up'},500);
			$('#login_error').hide();
		}
	});

	// These next 4 blocks provide the default text removal/addition in the
	// login form that drops down from the "Sign In" button.
	$('input[name=login_email]').focus(function(){
		if($(this).val()=='Email Address') {
			$(this).val('');
		}
	});
	$('input[name=login_email]').blur(function(){
		if($(this).val()=='') {
			$(this).val('Email Address');
		}
	});
	$('input[name=login_password]').focus(function(){
		if($(this).val()=='Password') {
			$(this).val('');
		}
	});
	$('input[name=login_password]').blur(function(){
		if($(this).val()=='') {
			$(this).val('Password');
		}
	});
	
	// This if for the default text removal/addition in the request-an-invite
	// section...
	$('input[name=request_invite_email]').focus(function(){
		if($(this).val()=='Email Address') {
			$(this).val('');
		}
	});
	$('input[name=request_invite_email]').blur(function(){
		if($(this).val()=='') {
			$(this).val('Email Address');
		}
	});
	// First and Last name default text
	$('input[name=first_name]').focus(function(){
		if($(this).val()=='First') {
			$(this).val('');
		}
	});
	$('input[name=first_name]').blur(function(){
		if($(this).val()=='') {
			$(this).val('First');
		}
	});
	$('input[name=last_name]').focus(function(){
		if($(this).val()=='Last') {
			$(this).val('');
		}
	});
	$('input[name=last_name]').blur(function(){
		if($(this).val()=='') {
			$(this).val('Last');
		}
	});


	// This next section handles the dynamic page transitions that
	// slide in and out for the main "pages". This does NOT handle the
	// page sliding transitions for the signup sub-section!
	
	// First, we add an index value to each of the sliding divs. This allows us
	// to easily determine in wich order each one is in relation to the other.
	var div_index = 0;
	$('div.main_window').each(function(){
		$(this).attr('index',div_index);
		div_index++;
	});
	// Now for the actual logic that handles the sliding transitions.
	$('ul#main_menu > li > a').click(function(){
		// Determine the IDs of the old and new div
		var new_div_id = $(this).attr('href').replace('#','');
		//$('div.main_window').filter(':visible').attr('id')
		var old_div_id = $('div.main_window').filter(':visible').attr('id').replace('#','');
		// If we clicked the same link as what is already displayed,
		// then there is nothing to do.
		if(new_div_id==old_div_id) {
			return false;
		}
		// If the new divs index value is larger than the current...
		if($('div#'+new_div_id).attr('index') > $('div.main_window').filter(':visible').attr('index')) {
			// ...then we are going to slide the old out to the left and slide
			//    the new one in from the right.
			$('div#'+old_div_id).hide('slide',{direction: 'left'},500,function(){
				$('div#'+new_div_id).show('slide',{direction: 'right'},500);
			});
		}
		// ...but if the new divs index value is smaller than the current...
		if($('div#'+new_div_id).attr('index') < $('div.main_window').filter(':visible').attr('index')) {
			// ...then we are going to slide the old out to the right and
			//    slide the new one in from the left.
			$('div#'+old_div_id).hide('slide',{direction: 'right'},500,function(){
				$('div#'+new_div_id).show('slide',{direction: 'left'},500);
			});
		}
		// Finally, we remove the "active" class from the current <a> and add it
		// the new one.
		$('#main_menu > li > a').removeClass('active');
		$(this).addClass('active');
		return false;
	});

	$('a[rel=fancybox]').fancybox();

});

/*
 * The login function
 */
function login() {
	var postdata = {
		login: $('input[name=login_email]').val(),
		password: $('input[name=login_password]').val()
	};
	$.ajax({
		type:	"POST",
		url:	'/api/login',
		async:	false,
		data:	postdata,
		success: function(response) {
			if(response=='1') {
				document.location = '/account';
			} else {
				$('#login_error').html('Invalid email and/or password');
				$('#login_error').show();
			}
		}
	});
}
function nothing() {
	return false;
}

 
/* 
 * -------------------------------------------
 * Functionf for the request and invite section
 * --------------------------------------------
 */
function submit_invite_request() {
	$('#invite_request_error').hide();
	postdata = {};
	postdata.email = $('[name=request_invite_email]').val();
	$.ajax({
		type:	"POST",
		url:	'/invite/request',
		async:	false,
		data:	postdata,
		success: function(response) {
			if(response=='1') {
				$('#invite_request_form').hide();
				$('#invite_almost_done').show();
			} else {
				$('#invite_request_error').html(response);
				$('#invite_request_error').show();
			}
		}
	});
}


/*
 * --------------------------------
 * Functions for the signup section
 * --------------------------------
 */

// Keeps track of which sichup step we are on
var current_step = 1;

// Move to step 1
function signup_step1() {
	// Since we can only go to step1 from step2, theres only one way to slide
	$('div#signup_step2').hide('slide',{direction: 'right'},500,function(){
		$('div#signup_step1').show('slide',{direction: 'left'},500);
	});
	// Update the current step var
	current_step=1;
}

// Move to step 2
function signup_step2() {
	// Are we coming from step1?
	if(current_step==1) {
		// ...then slide out to the right and in from the left
		$('div#signup_step1').hide('slide',{direction: 'left'},500,function(){
			$('div#signup_step2').show('slide',{direction: 'right'},500);
		});
	}
	// Or are we coming from step3?
	if(current_step==3) {
		// ...then slide out to the left and in from the right
		$('div#signup_step3').hide('slide',{direction: 'right'},500,function(){
			$('div#signup_step2').show('slide',{direction: 'left'},500);
		});
	}
	// Update the current step var
	current_step=2;
}

// Move to step 3
function signup_step3() {
	$('#goto_step3').html('Validating');
	$('#goto_step3').attr('href','#');
	$('#step2_error').hide();
	
	// First we validate
	var postdata = {
		invite_code	: $('input[name=invite_code]').val(),
		email		: $('input[name=email]').val()
	}
	var password1 = $('input[name=password1]').val()
	var password2 = $('input[name=password2]').val()
	if(password1!=password2) {
		$('#step2_error').html('Passwords do not match');
		$('#step2_error').show();
		$('#goto_step3').html('Next');
		$('#goto_step3').attr('href','javascript:signup_step3()');
		return;
	}
	$.ajax({
		type: 'POST',
		url:	'/signup/validate_step2',
		async:	false,
		data:	postdata,
		success: function(response) {
			if(response!='1') {
				$('#step2_error').html(response);
				$('#step2_error').show();
				$('#goto_step3').html('Next');
				$('#goto_step3').attr('href','javascript:signup_step3()');
				return;
			} else {
				// Theres only one way to get to step 3 and that is from step 2!
				$('div#signup_step2').hide('slide',{direction: 'left'},500,function(){
					$('div#signup_step3').show('slide',{direction: 'right'},500);
				});
				current_step=3;
				$('#goto_step3').html('Next');
				$('#goto_step3').attr('href','javascript:signup_step3()');
			}
		}
	});
	/*
	$('div#signup_step2').hide('slide',{direction: 'left'},500,function(){
		$('div#signup_step3').show('slide',{direction: 'right'},500);
	});
	current_step=3;
	$('#goto_step3').html('Next');
	$('#goto_step3').attr('href','javascript:signup_step3()');
	*/
}

// Submit a new sign-up
function submit_signup() {
	$('#submit_signup').html('Please Wait...');
	$('#submit_signup').attr('href','#');
	$('#step3_error').hide();
	var postdata = {
		invite_code	: $('input[name=invite_code]').val(),
		email		: $('input[name=email]').val(),
		password	: $('input[name=password1]').val(),
		first_name	: $('input[name=first_name]').val(),
		last_name	: $('input[name=last_name]').val(),
		plan_code	: $('.plan_tile_selected').attr('value'),
		cc_number	: $('input[name=cc_number]').val(),
		cc_year		: $('input[name=cc_year]').val(),
		cc_month	: $('input[name=cc_month]').val(),
		cc_cvv		: $('input[name=cc_cvv]').val()
	};
	$.ajax({
		type: 'POST',
		url:	'/signup/submit',
		async:	false,
		data:	postdata,
		success: function(response) {
			if(response!='1') {
				$('#step3_error').html(response);
				$('#step3_error').show();
				$('#submit_signup').html('Submit Registration');
				$('#submit_signup').attr('href','javascript:submit_signup()');
				return;
			} else {
				$('input[name=login_email]').val(postdata.email);
				$('input[name=login_password]').val(postdata.password);
				login();
			}
		}
	});
	
}