var currentInput;

$(document).ready(function(){
						   
	$('.textBoxContainer input:text').hint();					    
	$('.textBoxContainer input:text:first').show();
	$('#' + $('.textBoxContainer input:text:first').attr('id') + 'Content').show();
	$('.next').click(nextInput);
	$('.prev').click(prevInput);
	$('.finish').click(finish);
	
	$("#eKlub").validate({
	  errorLabelContainer: "#containererreurtotal",
	  errorPlacement: function(error, element){
      },
      wrapper: "p",
      errorClass: "error",
	  rules: {
		field: {
		  required: true,
		  email: true
		}
	  }
	});

	// Addon method for validating postal codes. Valid
	// formats are (X1X 1X1) or (X1X1X1) or (X1X-1X1).
	$.validator.addMethod("postalCode", function(value) {
		 return value.match(/^[a-zA-Z][0-9][a-zA-Z](-| )?[0-9][a-zA-Z][0-9]$/);
	}, 'Please enter a valid postal code');
	
	$.validator.addMethod("alphanumeric", function(value, element) {
		return this.optional(element) || /^\w+$/i.test(value);
	}, "Letters, numbers, spaces or underscores only please"); 
	
});

function finish(){
	var tempObj = $('.textBoxContainer input:text:visible');
	if (tempObj.valid() && (tempObj.val() != tempObj.attr('title'))){
		$('.textBoxContainer input:text').each(function(){
			var elm = $(this);
		});
			var tempObj = $('.textBoxContainer input:text:visible');
			$('#' + $(tempObj).attr('id') + 'Content').fadeOut();	
			$('.controls').fadeOut();
				
			
			 $.ajax({
				  url: "/eKlub/SignUp.asmx/QuickSignUp",
				  global: false,
				  type: "POST",
				  data: ({ host: location.hostname, email: $("#emailaddress").val(), fname: $("#firstname").val(), lname: $("#lastname").val(), pcode: $("#postalcode").val() }),
				  dataType: ($.browser.msie) ? "text" : "xml",
				  success:function(xml){
					 $('#thankyou').fadeIn();					 
				  },
				  error:function(request){
					  $('#signuperror').fadeIn();					  
				  }
			   }
			);	
	}	
	else{
		tempObj.parent().addClass("signupError");
	}
}

function nextInput(){ // Show Next Input area
	var tempObj = $('.textBoxContainer input:text:visible');
	tempObj.parent().removeClass("signupError");
	if (tempObj.valid() && (tempObj.val() != tempObj.attr('title'))){
		$(".error").remove();
		var tempObjNext = $('.textBoxContainer input:text:visible').next('input:text:first');
		var tempObj = $('.textBoxContainer input:text:visible');
		
		if(tempObjNext.length > 0){
			checkNextPrev(tempObjNext);
			$('#' + $(tempObj).attr('id') + 'Content').fadeOut();
			tempObj.hide( 'slide', {direction: 'up'}, 100, function(){																
				tempObjNext.show( 'slide', {direction: 'down'});
				$('#' + $(tempObjNext).attr('id') + 'Content').fadeIn();
			});
		} 
	}	
	else{
		tempObj.parent().addClass("signupError");
	}
	
};

function prevInput(){ // Show Previous Input area
	var tempObjPrev = $('.textBoxContainer input:text:visible').prev('input:text:first');
	var tempObj = $('.textBoxContainer input:text:visible');
	tempObj.parent().removeClass("signupError");
	$(".error").remove();
	if(tempObjPrev.length > 0){
		checkNextPrev(tempObjPrev);
		$('#' + $(tempObj).attr('id') + 'Content').fadeOut();
		tempObj.hide( 'slide', {direction: 'down'}, 100, function(){
			tempObjPrev.show('slide', {direction: 'up'});
			$('#' + $(tempObjPrev).attr('id') + 'Content').fadeIn();
		});			
	}
	
};

function checkNextPrev(tempObj){ // Check if buttons are needed

	var tempObjPrev = tempObj.prev('.textbox');
	var tempObjNext = tempObj.next('.textbox');

	// Check Previous	
	if(tempObjPrev.length > 0){
		if ($('.prev').css('visibility') == "hidden"){
			$('.prev').hide().css('visibility', 'visible').fadeIn(1000);
		}
	}
	else {
		$('.prev').animate({opacity: "0"}, 1000, function(){
			$('.prev').css('visibility', 'hidden').css('opacity',1)
		}); 
	}
	
	if(tempObjNext.length > 0){
		
		$('.finish').animate({opacity: "0"}, 1000, function(){
			$('.finish').css('visibility', 'hidden').css('opacity',1).hide();
			if ($('.next').css('visibility') == "hidden"){
				$('.next').hide().css('visibility', 'visible').fadeIn(1000);
			}
		}); 
		
	}
	else {
		$('.next').animate({opacity: "0"}, 1000,	function(){
				$('.next').css('visibility', 'hidden').css('opacity',1).hide();
				if ($('.finish').css('visibility') == "hidden"){
					$('.finish').hide().css('visibility', 'visible').fadeIn(1000);
				}
			}); 
	}
	
}