$(document).ready(function() {
	$('a.fancybox').fancybox();
	
	//add a validator to cover default form values: 
	jQuery.validator.addMethod("defaultInvalid", function(value, element) {
		switch(value) {
			case 'first name': if ('gc_to_first' == $(element).attr('id')) return false;
			case 'last name': if ('gc_to_last' == $(element).attr('id')) return false;
			case 'name': if ('gc_from' == $(element).attr('id')) return false;
		}
		return true;
	}, "This field is required.");
	
	
	$('#gift-certificates').validate({
		submitHandler: function (form) {
			if (0 == $('.selected').length) {
				alert('Click either image to select a design.');
			} else {
				form.submit();
			}
		}
	});
	
	//"hide" radio buttons
	$(':radio').css({ position: 'absolute', left: '10000px'});
	
	//clear default form text:
	$('#gc_to_first').focus(function() { if ('first name' == $(this).val()) $(this).val(''); });
	$('#gc_to_last').focus(function() { if ('last name' == $(this).val()) $(this).val(''); });
	$('#gc_from').focus(function() { if ('name' == $(this).val()) $(this).val(''); });
	$('#gc_message').focus(function() { if ('add a personal message' == $(this).val()) $(this).val(''); });
	
	//turn pictures into form selectors:
	$('.selector').hover(function(){
		$(this).css({cursor: 'pointer'});
	}).toggle(
		function () {
			//deselect other card (if selected):
			$('.selected').removeClass('selected').trigger('click');
			$(this).addClass('selected');
			
			//create overlay: 
			$('<div>').attr('class', 'overlay').css({ 
				width: '142px', 
				height: '100px', 
				background: '#fff', 
				opacity: '.8', 
				padding: '100px 0 0 100px', 
				position: 'absolute', 
				top: '18px', 
				left: '1px',
				zIndex: '2' 
			}).html('selected').appendTo($(this));
			//update radio value: 
			if ('design_one' == $(this).find('img').attr('id')) {
				$('#template_1').click();
			} else {
				$('#template_2').click();
			}
		}, 
		function () {
			$(this).removeClass('selected').find('.overlay').remove();
			//update radio value: 
			if ('design_one' == $(this).find('img').attr('id')) {
				$('#template_1').attr('checked', false);
			} else {
				$('#template_2').attr('checked', false);
			}
		}
	);

});