// JavaScript Document

// Initials:
var currentStep = 0;
var currentTop = 0;
var currentProduct = 'CS';

// Advance to the next step:
function next_step() {
	
	// Advance the active step:
	currentStep++;
	
 // Slide down to the next step:
	currentTop = currentTop - 500;
	$("div#steps").animate({"top": currentTop + "px"}, 1000);
	
	// Update the instruction heading:
	$("h2#directions").text( $("div.step:eq(" + currentStep + ") > h2").text() ); }
	

function prev_step() {
	
	// Reduce the active step by 1:
	currentStep--;
	
	// Slide up to the previous step:
	currentTop = currentTop + 500;
	$("div#steps").animate({"top": currentTop + "px"}, 1000);
	
	// Update the instruction heading:
	$("h2#directions").text( $("div.step:eq(" + currentStep + ") > h2").text() ); }
	

// Show the right subscription button based on user actions:
function show_subscription() {
	
	// Hide other subscription buttons:
	$("div#paypal_buttons div").hide();
	
	// Show the selected subscription button:
	$("div#paypal_buttons div."+$("ul#products li input:checked").val()+"."+$("select#subscription_term option:selected").val()).fadeIn(2000); }


$(document).ready(function() {
																											
	// Fade out other steps:
	$("img.select").fadeTo("fast", 0.33);
	
	// User has clicked on a back button:
	$("img.back").click(function() {
		
		prev_step();
		
	});
	

 // Fade in the first step:
 $("div#step_1 img.select").fadeTo("fast", 1);

	// Select the service when user clicks on a service image:
	$("ul#products img.product").click(function() {
																																	
		var productIndex = $("ul#products img.product").index(this);
		
		// The corresponding about div is hidden:
		if($("div#about div.product").eq(productIndex).css("display") != 'block') {
		
			// Hide the product information that is showing:
			$("div#about div.product:visible").hide();
				
			// Show the user the product information for the product he/she clicked on:
			$("div#about div.product").eq(productIndex).fadeIn("fast"); }

		// Check the next input element (will be the radio button below image):
	 $(this).next(":radio").attr("checked", "checked");
		$(this).next(":radio").change();
		
	});
	

	// User has clicked on the first step:
	$("div#step_1 img.select").click(function() {
		
		var quarterlyPrice = $("div.price span.quarterly:visible").text();
		var yearlyPrice = $("div.price span.yearly:visible").text();
	
		// Populate the prices in step 2:
		$("div#subscription_options div.quarterly span").text(quarterlyPrice);
		$("div#subscription_options div.yearly span").text(yearlyPrice).text();
	
		// Calculate the discount:
		var discountAmount = ((quarterlyPrice.substring(1) * 4) - yearlyPrice.substring(1)) / quarterlyPrice.substring(1) * 100;
		
		// Show the discount:
		$("div#subscriptions_wrapper div#discount span").text( discountAmount.toFixed(0) + "%");
		
		// Advance to the next step:
		next_step();
		
	});
	
	
	
	// Update the subscription term when a term is picked:
	$("select#subscription_term").change(function() {
		
		// A valid option was choosen:
	 if($("select#subscription_term option:selected").val() != '') { 

		 // Remove the blank option:
		 $("select#subscription_term option.blank").remove();
			
			// Enable the step 2 button:
		 $("div#step_2 img.select").fadeTo("slow", 1); }
	
	});
	

 // User has clicked the submit button (step 2):
 $("div#step_2 img.select").click(function() {
																																											
	 // A valid option was choosen:
	 if($("select#subscription_term option:selected").val() == '') { 
		 return false; }
			
		else {
			next_step(); } });
	
	
	// User has checked the disclaimer box:
	$("div#disclaimer_input input").click(function() {
 
	 // Disable the input:
		$(this).attr("disabled", "disabled");
		
	 // Enable the step 2 button:
		$("div#step_3 img.select").fadeTo("slow", 1);
	
	});
	
	
	// User has clicked the submit button (step 3):
	$("div#step_3 img.select").click(function() {
																																											
	 // A valid option was choosen:
	 if($("div#disclaimer_input input").val() == '') { 
		 return false; }
			
		else {
			next_step();
			show_subscription(); } });
	

});