$(document).ready(function(){
	$(".category").click(function(){
		var cat = $(this).val().replace(/ /g,'');
		var spaceCat = $(this).val();
		if ($(this).is(":checked"))
		{
			if(cat == "Tile")
			{
				$('#ceramicTileSize').append('<span class="required">!</span> <label for="tileSize">Tile Size</label><br /><select name="tileSize" id="tileSize"><option value="1x1">1" x 1"</option><option value="2x2">2" x 2"</option><option value="3x3">3" x 3"</option><option value="4x4">4" x 4"</option><option value="5x5">5" x 5"</option><option value="6x6">6" x 6"</option><option value="7x7">7" x 7"</option><option value="8x8">8" x 8"</option><option value="9x9">9" x 9"</option><option value="10x10">10" x 10"</option><option value="11x11">11" x 11"</option><option value="12x12">12" x 12"</option><option value="13x13">13" x 13"</option><option value="14x14">14" x 14"</option><option value="15x15">15" x 15"</option><option value="16x16">16" x 16"</option><option value="17x17">17" x 17"</option><option value="18x18">18" x 18"</option></select>');
			}
			
			$.getJSON("styles.php?product="+cat,
			function(data){
				$('#style').append('<fieldset id="'+ cat + '_styles"><legend>'+spaceCat+' Styles</fieldset>');//create fieldset first
				$.each(data, function(i){
					$('#'+cat+'_styles').append('<label><input type="checkbox" class="style" name="'+cat+'_style[]" value="'+data[i]+'" />'+data[i]+'</label><br />');
			  });
			});
			
			$.getJSON("colors.php?product="+cat,
			function(data){
				$('#color').append('<fieldset id="'+ cat + '_colors"><legend>'+spaceCat+' Colors</fieldset>');//create fieldset first
				$.each(data, function(i){
					$('#'+cat+'_colors').append('<label><input type="checkbox" class="color" name="'+cat+'_color[]" value="'+data[i]+'" />'+data[i]+'</label><br />');
			  });
			});
		}
		else
		{
			$("#"+ cat + "_styles").remove();
			$("#"+ cat + "_colors").remove();
			if(cat == "Tile")
			{
				$('#ceramicTileSize > *').remove();
			}
		}
	});
	$("#shopAtHomeForm").validate({
		rules: {
			name: "required",
			phone: "required",
			email: {
				required: true,
				email: true
			}
		},
		messages: {
			name: "Your name is required.",
			phone: "Your phone number is required.",
			email: "A valid email address is required."
		}
	});
	$.validator.setDefaults({
		submitHandler: function() { alert("submitted!"); }
	});
});