$(function(){
	var $registrationSteps = $("#registrationSteps");
	
	if ($registrationSteps.find("div.tab").length>1) {
	
		// fields
		var formFields  = [
			//step1
			{},
			//step2
			{
				email : 	{
					required : true,
					email : true
				},
				un : 		"required",
				pw : 		"required",
				pw2 : 		{
					required : true,
					equalTo : "#pw"
				},
				securityQ : "required",
				securityA : "required"
			},
			//step3
			{
				fname : 	"required",
				lname : 	"required",
				address1 : 	"required",
				city : 		"required",
				zip : 		{
					required : true,
					digits : true,
					range : [10000,99999]
				},
				phone1 : 	"required",
				image1 : {
					required : false,
					accept : "jpg|jpeg|gif|png"
				}
			},
			//step4
			{
				hashInput : "required"
			}
		],
		registrationForm = $("#therapistRegister")
			.find("input").add("select").not("input[type=image]")
				.bind("keydown", function(event){
					if(event.keyCode == 13 && $registrationSteps.find(".tab:visible").data("tabIndex")!=2){
						return false; //prevent default
					}
				}).end().end().end()
			.validate({
				focusInvalid : false,
				invalidHandler : function(form,validator){
					var errors = validator.numberOfInvalids();
					if (errors) {
						var message = errors == 1
							? "Whoops! You missed a field."
							: "Whoops! You missed a few fields.";
						$(".errorDisp")
							.find("p")
								.html(message).end()
							.removeClass("hide");
					} else {
						$(".errorDisp").addClass("hide");
					}
				},
				//errorPlacement : function(error, element){},
				errorClass : "invalid",
				ignoreTitle : true,
				highlight : function(element, errorClass){
					$(element).addClass(errorClass);
				},
				unhighlight : function(element, errorClass){
					$(element).removeClass(errorClass);
				}
			});
			
		
		var stepsNavButtonClick = function(event){
			var $currentTab = $registrationSteps.find(".tab:visible");
			if ($(event.currentTarget).hasClass("nextStep")) {
				toSelect = $currentTab.next().data("tabIndex");
			} else {
				toSelect = $currentTab.prev().data("tabIndex");
			}
			// validation
			for (var f in formFields[$currentTab.data("tabIndex")]){
				$("#"+f).rules("add",formFields[$currentTab.data("tabIndex")][f]);
			}
			if (registrationForm.form()) {
				$(".errorDisp").addClass("hide");
				$registrationSteps
					.tabs("enable", toSelect)
					.tabs("select", toSelect)
					.find("#registrationNav li:eq("+$currentTab.data("tabIndex")+")")
						.addClass("complete").end()
					.find("#registrationNav li:eq("+toSelect+")")
						.removeClass("incomplete");
				if (toSelect>0 && $("#currentPlan tr.plan").length==0) {
					showCurrentPlan();
				}
			}
		};
		
		var showCurrentPlan = function(){
			$("#currentPlan").show(100);
			var getPlan = $.ajax({
				url : "http://www.massageusa.com/register/ajax/getPlan.cfm",
				data : "length=" + $("input[name='plan']").getValue(),
				dataType : "json",
				success : function(jsonObject, textStatus){
					$("#currentPlan table tbody")
						.append( $("<tr class=\"plan\"><td class=\"label\">Plan :</td><td>"+jsonObject.data.description+"</td></tr>") );
				}
			});
		}
			
		
		$("#securityA")
			.bind("keypress", function(event){
				if (event.keyCode == 9) {
					$registrationSteps.find(".tab:visible .nextStep").click();
					return false;
				}
			});
		
					
		$registrationSteps
			.find("#registrationNav").css("display","block").end()
			.tabs({
				fx : {
					opacity : "toggle",
					duration : 100
				},
				show : function(event,ui){
					//select first field
					$(ui.panel).find("input:first").focus();
				},
				selected : initTab,
				disabled : [0,1,2,3]
			})
			.find(".tab")
				.each(function(index,item){
					$(item).data("tabIndex",index);
				}).end()
			.find(".tab img.hide")
				.removeClass("hide").end()
			.find(".tab .previousStep").add(".tab .nextStep")
				.bind("click", stepsNavButtonClick);
		
		$("#pg_registration .choices input:checked")
			.parents("div.wrapper")
			.addClass("selected");
		$("#pg_registration .choices label.inlineLabel")
			.bind("click", function(event){
				$(".choices div.selected").removeClass("selected");
				$(event.currentTarget)
					.parents("div.wrapper")
					.addClass("selected");
			});
	
		if (initTab==1) {
			$registrationSteps
				.find("#registrationNav li:eq(0)")
					.removeClass("incomplete")
					.addClass("complete").end()
				.tabs("enable", 0)
				.find("#registrationNav li:eq(1)")
					.removeClass("incomplete");
			showCurrentPlan();
		}
	
	} else {
	
		$registrationSteps
			.find("#registrationNav").css("display","block");
	
	}
});