// JavaScript Document

// increase the default animation speed to exaggerate the effect
//	$.fx.speeds._default = 500;

$(document).ready(function(){
	
	/*	$( "#errorMessage" ).dialog({
			autoOpen: false,
			show: "clip",
			hide: "explode",
			width:500			
		});
   */
   $('.beginButton').hover(function(){
		$('.begin').css("backgroundPosition" , "bottom");
		$('.beginButton').css("cursor" , "pointer");
		  },
		  function () {
		$('.begin').css("backgroundPosition" , "top");
	 });
   
   $('.doorButton').hover(function(){
		$('.openDoor').css("backgroundPosition" , "bottom");
		$('.doorButton').css("cursor" , "pointer");
		  },
		  function () {
		$('.openDoor').css("backgroundPosition" , "top");
	 });
   

   $('.radioLabel').hover(function(){$(this).css("cursor" , "pointer");  
												 
		var radioCk = $(this).attr('id');
		switch(radioCk){
			case 'emailLabel':
			var titleAtt = 'Your reply will be sent as an Email';
			break;
			case 'postLabel':
			var titleAtt = 'Your reply will be sent using Royal Mail';
			break;
			case 'webLabel':
			var titleAtt = 'Your reply will be displayed as a Web page';
			break;
		}//end switch
		$(this).attr("title", titleAtt);
												 },
		  function () {	$(this).css("cursor" , "crosshair"); 	$(this).removeAttr("title");
	 });

/*
    <div id="replyEmailWrap"><div id="emailLabel" class="radioLabel">&nbsp;</div><input type="radio" name="deliveryType" value="email" id="deliveryType_0" class="typeRadio" /></div>
    <div id="replyPostWrap"><div id="postLabel" class="radioLabel">&nbsp;</div><input type="radio" name="deliveryType" value="post" id="deliveryType_1" class="typeRadio"  /></div>
    <div id="replyWebWrap"><div id="webLabel" class="radioLabel">&nbsp;</div><input type="radio" name="deliveryType" value="web" id="deliveryType_2"  class="typeRadio" /></div>
*/


	function isValidEmailAddress(emailAddress) {
 		var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
 		return pattern.test(emailAddress);
	}



	$('.radioLabel').click(function(){
		var radioCk = $(this).attr('id');
		// alert(radioCk);
		switch(radioCk){
			case 'emailLabel':
			$("input[name='deliveryType']").val("email");
			$("#deliveryType_0").attr("checked", "checked"); 
		$('#santaMessage').css('fontStyle', 'normal');
			var santaMes = '<p><strong>Writing your &nbsp;&nbsp;&nbsp;&nbsp;<br />letter is really easy. &nbsp;&nbsp;</strong></p><p><strong>First</strong> tell me your first &nbsp;<br />and last name.</p><p><strong>Second</strong> select how you<br />&nbsp; would like me to reply.</p><p>&nbsp;&nbsp;&nbsp;&nbsp;<strong>Third</strong> click \'next\' to<br /> &nbsp; tell me about your presents.</p>';
			break;
			case 'postLabel':
			$("input[name='deliveryType']").val("post");
			$("#deliveryType_1").attr("checked", "checked"); 
		$('#santaMessage').css('fontStyle', 'italic');
			var santaMes = '<em><p><strong>Hello there !!&nbsp;&nbsp;&nbsp;</strong></p><p>I can see that you<br />chose a <strong>Postal Reply</strong>.</p> <p>Please remember that<br />there is a charge for<br />Postal Letters, which<br />needs to be <strong>paid before</strong><br />you have told me<br /> about your present <br />ideas....</p></em>';
			break;
			case 'webLabel':
			$("input[name='deliveryType']").val("web");
			$("#deliveryType_2").attr("checked", "checked"); 
		$('#santaMessage').css('fontStyle', 'normal');
			var santaMes = '<p><strong>Writing your &nbsp;&nbsp;&nbsp;&nbsp;<br />letter is really easy. &nbsp;&nbsp;</strong></p><p><strong>First</strong> tell me your first &nbsp;<br />and last name.</p><p><strong>Second</strong> select how you<br />&nbsp; would like me to reply.</p><p>&nbsp;&nbsp;&nbsp;&nbsp;<strong>Third</strong> click \'next\' to<br /> &nbsp; tell me about your presents.</p>';
			break;
						
		}//end switch
		
		$('#santaMessage').html(santaMes);
		
	});

   $('.buttonNext').hover(function(){
		$('.buttonNext').css("backgroundPosition" , "0px -36px"); 		$('.buttonNext').css("cursor" , "pointer");
		  },
		  function () {
		$('.buttonNext').css("backgroundPosition" , "0px 0px");
	 });

   $('#rewindOrange').hover(function(){
		$('#rewindOrange').css("backgroundPosition" , "-200px -36px");		$('#rewindOrange').css("cursor" , "pointer");
		  },
		  function () {
		$('#rewindOrange').css("backgroundPosition" , "-200px 0px");
	 });

   $('#moveOrange').hover(function(){
		$('#moveOrange').css("backgroundPosition" , "-100px -36px");		$('#moveOrange').css("cursor" , "pointer");
		  },
		  function () {
		$('#moveOrange').css("backgroundPosition" , "-100px 0px");
	 });

   $('.buttonSend').hover(function(){
		$(this).css("backgroundPosition" , "-100px -36px");		$(this).css("cursor" , "pointer");
		  },
		  function () {
		$(this).css("backgroundPosition" , "-100px 0px");
	 });

   $('.buttonBack').hover(function(){
		$(this).css("backgroundPosition" , "-200px -36px");		$(this).css("cursor" , "pointer");
		  },
		  function () {
		$(this).css("backgroundPosition" , "-200px 0px");
	 });

   $('.buttonAnother').hover(function(){
		$(this).css("backgroundPosition" , "0px bottom");		$(this).css("cursor" , "pointer");
		  },
		  function () {
		$(this).css("backgroundPosition" , "0px 0px");
	 });


	$('.typeRadio').click(function(){
		var radioCk = $(this).attr('id');
		// alert(radioCk);
		switch(radioCk){
			case 'deliveryType_0':
		$('#santaMessage').css('fontStyle', 'normal');
			var santaMes = '<p><strong>Writing your &nbsp;&nbsp;&nbsp;&nbsp;<br />letter is really easy. &nbsp;&nbsp;</strong></p><p><strong>First</strong> tell me your first &nbsp;<br />and last name.</p><p><strong>Second</strong> select how you<br />&nbsp; would like me to reply.</p><p>&nbsp;&nbsp;&nbsp;&nbsp;<strong>Third</strong> click \'next\' to<br /> &nbsp; tell me about your presents.</p>';
			break;
			case 'deliveryType_2':
			
			$('#santaMessage').css('fontStyle', 'normal');
			var santaMes = '<p><strong>Writing your &nbsp;&nbsp;&nbsp;&nbsp;<br />letter is really easy. &nbsp;&nbsp;</strong></p><p><strong>First</strong> tell me your first &nbsp;<br />and last name.</p><p><strong>Second</strong> select how you<br />&nbsp; would like me to reply.</p><p>&nbsp;&nbsp;&nbsp;&nbsp;<strong>Third</strong> click \'next\' to<br /> &nbsp; tell me about your presents.</p>';
			break;
			case 'deliveryType_1':
	$('#santaMessage').css('fontStyle', 'italic');
			var santaMes = '<em><p><strong>Hello there !!&nbsp;&nbsp;&nbsp;</strong></p><p>I can see that you<br />chose a <strong>Postal Reply</strong>.</p> <p>Please remember that<br />there is a charge for<br />Postal Letters, which<br />needs to be <strong>paid before</strong><br />you have told me<br /> about your present <br />ideas....</p></em>';
			break;
			
			
			
			
		}//end switch
		
		$('#santaMessage').html(santaMes);
		
	});


$.ltfcVars = {};  //set jQuery object to hold vars set by script
$.ltfcVars.first = 0; $.ltfcVars.last = 0; $.ltfcVars.firstValid = 0; $.ltfcVars.lastValid = 0;


		function checkRegexp( o, regexp, z ) { //alert('checking');
			if ( !( regexp.test( o.val() ) ) ) {
				//o.addClass( "ui-state-error" );
				o.css("borderColor", "yellow");o.css("backgroundColor", "#666"); o.css("color", "#FFF");
				$('#santaMessage').css('fontStyle', 'normal');
				var santaMes = '<p>&nbsp;</p><p><strong>Sorry....</strong><br />Please enter your<br /> first and last names,<br />&nbsp;&nbsp; using only letters. <br />Dashes and a space <br/>in your name are OK<br /> but please take care !</p>';
				$('#santaMessage').html(santaMes);
				return false;
			} else {
				if(	$.ltfcVars.firstValid == 1 && $.ltfcVars.lastValid == 1){
				o.css("borderColor","#006"); o.css("backgroundColor", "#FFF"); o.css("color", "#000");
				$('#santaMessage').css('fontStyle', 'normal');
				var santaMes = '<p><strong>Writing your &nbsp;&nbsp;&nbsp;&nbsp;<br />letter is really easy. &nbsp;&nbsp;</strong></p><p><strong>First</strong> tell me your first &nbsp;<br />and last name.</p><p><strong>Second</strong> select how you<br />&nbsp; would like me to reply.</p><p>&nbsp;&nbsp;&nbsp;&nbsp;<strong>Third</strong> click \'next\' to<br /> &nbsp; tell me about your presents.</p>';
				$('#santaMessage').html(santaMes);
				
				}//end if
				return true;
			}
		}//end function


	//validate first and last name boxes
		$('#firstname').blur(function() { 
			var 	firstname = $( "#firstname" ), lastname = $('#lastname');	
				if(checkRegexp( firstname, /^[a-z]([0-9a-z -])+$/i  , lastname)){
					$.ltfcVars.firstValid = 1;	
				}else{
					$.ltfcVars.firstValid = 0;	
				}//end if
			$.ltfcVars.first = 1;
		 });

		$('#firstname').keyup(function(){
			if ($.ltfcVars.first == 1){ //prevent key up validation first time which may confuse child
			var 	firstname = $( "#firstname" ), lastname = $('#lastname');	
					if(checkRegexp( firstname, /^[a-z]([0-9a-z -])+$/i  , lastname)){
						$.ltfcVars.firstValid = 1;	
					}else{
						$.ltfcVars.firstValid = 0;	
					}//end if
			}//end if
		 });

		$('#lastname').blur(function() { 
			var 	firstname = $( "#firstname" ), lastname = $('#lastname');	
			if(checkRegexp( lastname, /^[a-z]([0-9a-z -])+$/i  , firstname)){
					$.ltfcVars.lastValid = 1;	
				}else{
					$.ltfcVars.lastValid = 0;	
					}//end if
			$.ltfcVars.last = 1;
		 });

		$('#lastname').keyup(function(){
			if ($.ltfcVars.last == 1){ //prevent key up validation first time which may confuse child
			var 	firstname = $( "#firstname" ), lastname = $('#lastname');	
			if(checkRegexp( lastname, /^[a-z]([0-9a-z -])+$/i  , firstname)){
					$.ltfcVars.lastValid = 1;				
				}else{
					$.ltfcVars.lastValid = 0;	
					}//end if
			}//end if
		 });


	//clicknext button  - submit form
		$('.buttonNext').click(function() { 	
										
			var 	firstname = $( "#firstname" ), lastname = $('#lastname');	
			if(checkRegexp( lastname, /^[a-z]([0-9a-z -])+$/i  , firstname)){
					$.ltfcVars.lastValid = 1;	}else{$.ltfcVars.lastValid = 0;	}//end if
										
			  if(checkRegexp( firstname, /^[a-z]([0-9a-z -])+$/i  , lastname)){
				  $.ltfcVars.firstValid = 1;  }else{$.ltfcVars.firstValid = 0;	}//end if
										
				if(	$.ltfcVars.firstValid == 1 && $.ltfcVars.lastValid == 1){	
					$("#writingForm").submit();	
				}else{
				  var santaMes = '<p>&nbsp;</p><p><strong>Sorry....</strong><br />Please enter your<br /> first and last names,<br />&nbsp;&nbsp; using only letters. <br />Dashes and a space <br/>in your name are OK<br /> but please take care !</p>';
				  $('#santaMessage').html(santaMes);
				  
				  if($.ltfcVars.lastValid != 1){$("#lastname").css("borderColor", "yellow");$("#lastname").css("backgroundColor", "#666"); $("#lastname").css("color", "#FFF"); }
				  if($.ltfcVars.firstValid != 1){  $("#firstname").css("borderColor", "yellow"); $("#firstname").css("backgroundColor", "#666");  $("#firstname").css("color", "#FFF"); }
			  }//end 
		});



	/*		case 'nameLabelERR':
		$('#santaMessage').css('fontStyle', 'normal');
			var santaMes = '<p><strong>Sorry....</strong><br />Please only use letters in your name.</p>';
			break;
			
			case 'nameLabelOK':
		$('#santaMessage').css('fontStyle', 'normal');
			var santaMes = '<p><strong>Writing your &nbsp;&nbsp;&nbsp;&nbsp;<br />letter is really easy. &nbsp;&nbsp;</strong></p><p><strong>First</strong> tell me your first &nbsp;<br />and last name.</p><p><strong>Second</strong> select how you<br />&nbsp; would like me to reply.</p><p>&nbsp;&nbsp;&nbsp;&nbsp;<strong>Third</strong> click \'next\' to<br /> &nbsp; tell me about your presents.</p>';
			break;
			
		}//end switch
		
		$('#santaMessage').html(santaMes);
*/
	$('.cards').focus(function(){ $(this).css('border' , '2px solid #006'); $(this).css('backgroundColor' , '#FFF'); $(this).css('color' , '#000');});
	$('.cards').blur(function(){ $(this).css('border' , 'none'); $(this).css('backgroundColor' , '#CCC'); $(this).css('color' , '#000'); });
	
	$('#cardFdName').focus(function(){
	var  value=$(this).val();
	if(  jQuery.trim(value) == 'Your Friend\'s Name'){$(this).attr("value",""); }		  
	});
	
	$('#cardFdEmail').focus(function(){
	var  value=$(this).val();
	if(  jQuery.trim(value) == 'Your Friend\'s Email Address'){$(this).attr("value",""); }		  
	});
	
	$('#message').focus(function(){
	var  value=$(this).val();
	if(  jQuery.trim(value) == 'Your message to your friend'){$(this).attr("value",""); }		  
	});

	$('#cardEmail').focus(function(){
	var  value=$(this).val();
	if(  jQuery.trim(value) == 'Your Email Address'){$(this).attr("value",""); }		  
	});

	$('#cardName').focus(function(){
	var  value=$(this).val();
	if(  jQuery.trim(value) == 'Your Name'){$(this).attr("value",""); }		  
	});

	// ######
	
	$('#cardFdName').blur(function(){
	var  value=$(this).val();
	if(  jQuery.trim(value) == ''){$(this).attr("value","Your Friend\'s Name"); }		  
	});
	
	$('#cardFdEmail').blur(function(){
	var  value=$(this).val();
	if(  jQuery.trim(value) == ''){$(this).attr("value","Your Friend\'s Email Address"); }		  
	});
	
	$('#message').blur(function(){
	var  value=$(this).val();
	if(  jQuery.trim(value) == ''){$(this).attr("value","Your message to your friend"); }		  
	});

	$('#cardEmail').blur(function(){
	var  value=$(this).val();
	if(  jQuery.trim(value) == ''){$(this).attr("value","Your Email Address"); }		  
	});

	$('#cardName').blur(function(){
	var  value=$(this).val();
	if(  jQuery.trim(value) == ''){$(this).attr("value","Your Name"); }		  
	});

	
	
	
//animate postcards 

$('#moveCardPost').click(function() {// validation for red slide here
$("#postcardWrappers").animate({"left": "-640px"}, "slow"); 

$('#elfMessage').html('<p>&nbsp;<strong>Great, your friend will love this !!</strong><br />Lastly fill in all the boxes on the postcard and click \'Send\'. </p><p class="tinyText">( To select a different picture for the front click \'Change\' ... )</p>'); 
							 });


$('#backCard').click(function() {// validation for red slide here
$("#postcardWrappers").animate({"left": "0px"}, "slow"); 

$('#elfMessage').html('<p>&nbsp;<strong>Why not send a card to your friend ?</strong><br />First choose your favourite design and click \'next\'. &nbsp;</p><p class="tinyText">( To see a larger image click the Christmas card designs... )</p>'); 
							 });



// big image select
$.ltfcVars.cardBack = 9; //starting point

	$('.cardRadio').click(function(){
	var currID = $(this).attr('id');   // thumbDesign_9		  
	var indexID = currID.split('_');
								   
	 var cardText =  ('#postThumb_'+ indexID[1]);
	 var cardBack = ('#thumbDesign_'+ indexID[1]);
	$(cardBack).css('border', 'solid 2px #FF00FF');
	$(cardText).html('<strong><u>My Choice</u></strong>');
	
	var currBack = ('#thumbDesign_'+$.ltfcVars.cardBack);
	var currText = ('#postThumb_'+$.ltfcVars.cardBack);
	$(currBack).css('border', 'solid 2px #FFFFFF');
	$(currText).html('Choose');
    $.ltfcVars.cardBack = indexID[1];	
								   });



//postcard validation
$.ltfcVars.friendNameValid = 0;	
$.ltfcVars.friendEmailValid = 0;	
$.ltfcVars.myNameValid = 0;	
$.ltfcVars.myEmailValid = 0;	
$.ltfcVars.messageValid = 0;

$.ltfcVars.friendName = 0;	
$.ltfcVars.friendEmail = 0;	
$.ltfcVars.myName = 0;	
$.ltfcVars.myEmail = 0;	
$.ltfcVars.message = 0;

function testMe(){alert('hello');}

function cardFriendEmail(){
	var friendemail = jQuery.trim($('#cardFdEmail').val());
	if(friendemail == '' || friendemail == "Your Friend's Email Address"){
		//validation fail 
		$("#cardFdEmail").css("border", "solid 2px yellow");$("#cardFdEmail").css("backgroundColor", "#666"); $("#cardFdEmail").css("color", "#FFF"); $('#fde').html('<span class="emailError">&nbsp;</span>'); $.ltfcVars.friendEmailValid = 0;
	}else{
		//test for email chars and pattern only
			if(friendemail != 0)	{
					if(isValidEmailAddress(friendemail)){	$("#cardFdEmail").css("border", "none"); $("#cardFdEmail").css("backgroundColor", "#CCC"); $("#cardFdEmail").css("color", "#000"); $('#fde').html('<span class="emailVaid">&nbsp;</span>'); $.ltfcVars.friendEmailValid = 1;// #006
					} else { $("#cardFdEmail").css("border", "solid 2px yellow");$("#cardFdEmail").css("backgroundColor", "#666"); $("#cardFdEmail").css("color", "#FFF"); $('#fde').html('<span class="emailError">&nbsp;</span>'); $.ltfcVars.friendEmailValid = 0;}//end if
					$.ltfcVars.friendEmail = 1;	
			} else {
				$("#cardFdEmail").css("border","none"); $("#cardFdEmail").css("backgroundColor", "#FFF"); $("#cardFdEmail").css("color", "#CCC");
				$('#fde').html('<a href="#" >&nbsp;</a>');$.ltfcVars.friendEmail = 1;	 $.ltfcVars.friendEmailValid = 0;
		}//end if
	}//end if
}//end funciton


function cardMyEmail(){
	var email = jQuery.trim($('#cardEmail').val());	
	if(email == '' || email == "Your Email Address"){
		//validation fail 
		$("#cardEmail").css("border", "solid 2px yellow");$("#cardEmail").css("backgroundColor", "#666"); $("#cardEmail").css("color", "#FFF"); $('#mye').html('<span class="emailError">&nbsp;</span>'); $.ltfcVars.myEmailValid = 0;
	}else{
		//test for email chars and pattern only
			if(email != 0)	{
					if(isValidEmailAddress(email)){	$("#cardEmail").css("border", "none"); $("#cardEmail").css("backgroundColor", "#CCC"); $("#cardEmail").css("color", "#000"); $('#mye').html('<span class="emailVaid">&nbsp;</span>'); $.ltfcVars.myEmailValid = 1;// #006
					} else { $("#cardEmail").css("border", "solid 2px yellow");$("#cardEmail").css("backgroundColor", "#666"); $("#cardEmail").css("color", "#FFF"); $('#mye').html('<span class="emailError">&nbsp;</span>'); $.ltfcVars.myEmailValid = 0;}//end if
					$.ltfcVars.myEmail = 1;	
			} else {
				$("#cardEmail").css("border","none"); $("#email").css("backgroundColor", "#FFF"); $("#cardEmail").css("color", "#CCC");
				$('#mye').html('<a href="#" >&nbsp;</a>'); $.ltfcVars.myEmail = 1;	 $.ltfcVars.myEmailValid = 0;
			}//end if
	}//end if
}//end function


function cardMessage(){
			var message = jQuery.trim($('#message').val());
			var regexpTextNumb = /^([0-9a-zA-Z .,-_\Q')(\E])+$/ ;  //  /^[a-z]([0-9 a-z -,.'])+/i;
			if(message == '' || message == "Your message to your friend"){
			//validation fail 
			$.ltfcVars.messageValid = 0;	$('#message').css('border' , '2px solid yellow'); $('#message').css("backgroundColor", "#666"); $('#message').css("color", "#FFF"); 
		}else{
			//test for A - Z letters only
			// Message
				if ( !( regexpTextNumb.test(message) ) ) {
					$.ltfcVars.messageValid = 0;	$('#message').css('border' , '2px solid yellow'); $('#message').css("backgroundColor", "#666");// validation FAIL
				}else{$.ltfcVars.messageValid = 1;	$('#message').css('border' , 'none'); $('#message').css("backgroundColor", "#CCC");}//validation PASS
		}//end if
$.ltfcVars.message = 1;	
}//end function


function  cardName(){
			var name = jQuery.trim($('#cardName').val());
			var regexpText = /^[a-z]([a-z -])+$/i;
			  if(name == '' || name == "Your Name"){
			  //validation fail 
			  $.ltfcVars.myNameValid = 0;	$('#cardName').css('border' , '2px solid yellow'); $('#cardName').css("backgroundColor", "#666");$('#cardName').css("color", "#FFF"); 
		  }else{
			  //test for A - Z letters only
			  // My Name	
				  if ( !( regexpText.test(name) ) ) {
					  $.ltfcVars.myNameValid = 0;	$$('#cardName').css('border' , '2px solid yellow'); $('#cardName').css("backgroundColor", "#666");// validation FAIL
				  }else{$.ltfcVars.myNameValid = 1;	$('#cardName').css('border' , 'none'); $('#cardName').css("backgroundColor", "#CCC");}//validation PASS
		  }//end if
$.ltfcVars.name = 1;	
}//end function

function cardFriendName(){
		var	friendName = jQuery.trim($('#cardFdName').val());
		var regexpText = /^[a-z]([a-z -])+$/i;
		  if(friendName == '' || friendName == "Your Friend's Name"){
			  //validation fail 
			  $.ltfcVars.friendNameValid = 0;	$('#cardFdName').css('border' , '2px solid yellow'); $('#cardFdName').css("backgroundColor", "#666");$('#cardFdName').css("color", "#FFF"); 
		  }else{
			  //test for A - Z letters only
			  // Friend Name	
			  if ( !( regexpText.test(friendName) ) ) {
				  $.ltfcVars.friendNameValid = 0;	$('#cardFdName').css('border' , '2px solid yellow');$('#cardFdName').css("backgroundColor", "#666");// validation FAIL
			  }else{$.ltfcVars.friendNameValid = 1;	$('#cardFdName').css('border' , 'none');$('#cardFdName').css("backgroundColor", "#CCC");}//validation PASS
		  }//end if
$.ltfcVars.friendName =1;
}//end function


$('#sendCard').click(function(){
	// validation  functions 
	var fdn =  cardFriendName(); //validate friend name
	var myn = cardName(); // validate my name
	var mess = cardMessage(); // validate message box
	var fde  = cardFriendEmail(); //validate friend email
	var mye = 	cardMyEmail(); // validate my email
	
	var cardValid = ($.ltfcVars.friendNameValid + $.ltfcVars.friendEmailValid  + $.ltfcVars.myNameValid + $.ltfcVars.myEmailValid + $.ltfcVars.messageValid);
	if( cardValid ==5){//then this is valid
	// submit form
		$('#postcards').submit();
	}else{
		// error message
		
				
			var diagMess = '<p>We are sorry but you need to correct the following errors :</p> <ul>';
				if($.ltfcVars.friendNameValid == 0 ){ diagMess += ' <li>Please enter your friend\'s name.</li>';};
				if($.ltfcVars.friendEmailValid == 0 ){ diagMess += '<li>Enter your friend\'s Email Address</li>';};
				if($.ltfcVars.messageValid == 0 ){ diagMess += '<li>Enter a message - Only using  these characters A-Z, 0-9 ,.\'()-_  </li> ';};
				if($.ltfcVars.myEmailValid == 0 ){ diagMess += ' <li>Enter your email address</li>';};
				if($.ltfcVars.myNameValid == 0 ){ diagMess += '<li>Enter Your name</li>';};
				diagMess += '</ul>';
			var diagTitle = 'Please correct  these errors'; 
		
			$( "#errorMessage" ).dialog("option", "title" , diagTitle); //diagTitle);
			$( "#errorMessage" ).html(diagMess);
			$( "#errorMessage" ).dialog( "open" );
	//	alert('errors ' + $.ltfcVars.friendNameValid + $.ltfcVars.friendEmailValid  + $.ltfcVars.myNameValid + $.ltfcVars.myEmailValid + $.ltfcVars.messageValid);
	}//end if
							  });




 $('#cardFdEmail').blur(function(){ if($.ltfcVars.friendEmail ==1){var d = cardFriendEmail();  }	  });
 $('#cardFdName').blur(function(){ if( $.ltfcVars.friendName==1){ var d = cardFriendName();  }	  });
 $('#cardName').blur(function(){ if($.ltfcVars.name ==1){ var d= cardName(); }	  });
$('#message').blur(function(){ if($.ltfcVars.message ==1){var d= cardMessage();  }	  });
$('#cardEmail').blur(function(){ if( $.ltfcVars.myEmail ==1){ var d=cardMyEmail();  }	  });
















// ##########################################################################################
/*	$('input, textarea').focus(function() {
			value=$(this).val();
			$(this).attr("value","");
		});
		$('input, textarea').blur(function() {
			if($(this).val()=="") {
				$(this).val(value);
			}
		});
	
	*/





	
   // end jquery            	
 });


function rollButton(buttonName){
	document.getElementById(buttonName).style.backgroundPosition = "bottom left";	
}