/* Create a namespace */

var CoverGirl = {};
var chosencategory;
var chosencategoryid;

CoverGirl.enableShadeMatch = function() {

	

	// Step one choice clicking (forward)
	jQuery("div#shadematchcontent div.step1 ul.column li a").click( function() {
		jQuery("#step1default,h2#choosebrand").hide(); //Hide these Options
		jQuery("#step1default,h2#choosebrand").css({"display": "none"}); 
		var chosenbrand = jQuery(this).html(); //Return the HTML between <a></a>
		jQuery("div#step1chosen p").html(chosenbrand); //Throw this choice into a <p></p> of parent stepChosen
		jQuery("div#step1chosen").show(); //Unhide Originally Hidden StepChosen
		jQuery("div#step1chosen").css({"display": "block"}); 
		
		jQuery("div.step1").animate({width: "88px",paddingLeft: "15px",paddingRight: "15px"
		}, {duration:200, queue: false}); //Make Step 1 Smaller
		
		jQuery("div.step1").css({width: "88px",paddingLeft: "15px",paddingRight: "15px"}); //Make Step 1 Smaller
		jQuery("div.step2").css({width: "480px",paddingLeft: "31px",paddingRight: "20px"});
		//Make Step 2 Bigger
		jQuery("div.step2 div#step2default").show();
		jQuery("div.step2 div#step2default").css({"display": "block"});
		jQuery("#shadematchcontent").removeClass("onstepone").addClass("onsteptwo");
		jQuery("div.step1").css({width:"", paddingLeft:"", paddingRight:""});
		jQuery("div.step2").css({width:"", paddingLeft:"", paddingRight:""});
		
		jQuery("div.step2").animate({width: "480px",paddingLeft: "31px",paddingRight: "20px"
		}, 190, function(){ 
		jQuery("div.step2 div#step2default").show();
		jQuery("div.step2 div#step2default").css({"display": "block"});
		jQuery("#shadematchcontent").removeClass("onstepone").addClass("onsteptwo");
		jQuery("div.step1").css({width:"", paddingLeft:"", paddingRight:""});
		jQuery("div.step2").css({width:"", paddingLeft:"", paddingRight:""});
		});
		
		return false;
	});


	// Step two choice clicking (forward)
	jQuery("div#shadematchcontent div.step2 ul.column").click( function() {
		jQuery("#step2default").hide();
		jQuery("#step2default").css({"display": "none"});
		chosencategoryid = jQuery(this).attr("id");
		jQuery("div#step2chosen").show();
		jQuery("div#step2chosen").css({"display": "block"});
		
		jQuery("div.step2")
		.css({left:"129px",right:"auto"})
		.animate({width: "88px",paddingLeft: "15px",paddingRight: "15px"}, {duration:200, queue: false});
		
		jQuery("div.step3 div#step3default").show();
		jQuery("div.step3 div#step3default").css({"display": "block"});
		jQuery("#shadematchcontent").removeClass("onsteptwo").addClass("onstepthree");
		jQuery("div.step2").css({width:"", paddingLeft:"", paddingRight:"", left:"", right:""});
		jQuery("div.step3").css({width:"", paddingLeft:"", paddingRight:""});
		
		jQuery("div.step3").animate({width: "413px",paddingLeft: "31px",paddingRight: "20px"}, 190, 
		function(){
		jQuery("div.step3 div#step3default").show();
		jQuery("div.step3 div#step3default").css({"display": "block"});
		jQuery("#shadematchcontent").removeClass("onsteptwo").addClass("onstepthree");
		jQuery("div.step2").css({width:"", paddingLeft:"", paddingRight:"", left:"", right:""});
		jQuery("div.step3").css({width:"", paddingLeft:"", paddingRight:""});
		});
		
		jQuery("div.step3").css({width: "413px",paddingLeft: "31px",paddingRight: "20px"});	
		jQuery("div#backgroundimages img.category").hide();
		jQuery("div#backgroundimages img.category").css({"display": "none"});
		jQuery("div#backgroundimages img.category").each(
		function() {
		if (jQuery(this).hasClass(chosencategoryid)) 
			{
				jQuery(this).show();
				jQuery(this).css({"display": "block"});
			}
		})
		jQuery("div#backgroundimages img.default").fadeOut("slow");
		return false;
	});
	
	// Step three choice clicking (forward)
	jQuery("div#shadematchcontent div.step3 ul.column").click( function() {
	
		jQuery("#step3default").hide();
		var chosencategory = jQuery("div#shadematchcontent div.step3 ul.column li a").html();
		//jQuery("div#step3chosen p").html(chosencategory);
		jQuery("div#step3chosen").show();
		jQuery("div#step3chosen").css({display: "block"});
		jQuery("div.step3").css({left:"247px",right:"auto"});
		jQuery("div.step3").animate({width: "88px",paddingLeft: "15px",paddingRight: "15px"}, 
		{duration:200, queue: false});
		jQuery("div.step3").css({width: "88px",paddingLeft: "15px",paddingRight: "15px"});
		jQuery("div.step4").css({width: "346px",paddingLeft: "31px",paddingRight: "20px"});
		jQuery("div.step4 div#step4default").show();
		jQuery("div.step4 div#step4default").css({display: "block"});
		jQuery("#shadematchcontent").removeClass("onstepthree").addClass("onstepfour");
		jQuery("div.step3").css({width:"", paddingLeft:"", paddingRight:"", left:"", right:""});
		jQuery("div.step4").css({width:"", paddingLeft:"", paddingRight:""});
		jQuery("div.step4").animate({width: "346px",paddingLeft: "31px",paddingRight: "20px"}, 190, 
		function(){
		jQuery("div.step4 div#step4default").show();
		jQuery("div.step4 div#step4default").css({display: "block"});
		jQuery("#shadematchcontent").removeClass("onstepthree").addClass("onstepfour");
		jQuery("div.step3").css({width:"", paddingLeft:"", paddingRight:"", left:"", right:""});
		jQuery("div.step4").css({width:"", paddingLeft:"", paddingRight:""});
		});
		
		return false;
	});
};

/* Initialize everything when page is ready */

jQuery(document).ready(function() {
	CoverGirl.enableShadeMatch();
	
	jQuery("div#step1chosen p").click(function(){
		jQuery("div#step1chosen,div#step2chosen,div#step3chosen,div#step4chosen,#step2default,#step3default,#step4default").hide();
		jQuery("div#step1chosen,div#step2chosen,div#step3chosen,div#step4chosen,#step2default,#step3default,#step4default").css({display: "none"});
		
		jQuery("div.step2,div.step3,div.step4,div.step step2,div.step step3,div.step step4").css({width: "51px",paddingLeft: "",paddingRight: ""});	

		jQuery("div.step1 div#step1default").show();
		jQuery("div.step1 div#step1default").css({"display": "block"});
		jQuery("#shadematchcontent").removeClass("onsteptwo").addClass("onstepone");
		jQuery("#shadematchcontent").removeClass("onstepthree").addClass("onstepone");
		jQuery("#shadematchcontent").removeClass("onstepfour").addClass("onstepone");
		jQuery("div.step1").css({width:"547px", paddingLeft:"", paddingRight:""});
		
		jQuery("#shadematchbox .onstepone .step1").css({width:"547px"});
		jQuery("#shadematchbox .onsteptwo .step2,#shadematchbox .onstepthree .step3,#shadematchbox .onstepfour .step4").css({width:"88px"});
			 	
	 });
	  
	 /*------------------------------------------------------*/
	 
	jQuery("div#step2chosen").click(function(){ 
		jQuery("#step3default").hide();
		jQuery("div#step2chosen,div#step3chosen,div#step4chosen,#step3default,#step4default").hide();
		
		jQuery("div.step3,div.step4,div.step step3,div.step step4").css({width: "51px",paddingLeft: "",paddingRight: ""});		
	
		jQuery("div.step2 div#step1default").show();
		jQuery("#shadematchcontent").removeClass("onstepthree").addClass("onsteptwo");
		jQuery("div.step3").css({width:"", paddingLeft:"", paddingRight:""});
		jQuery("div.step2").css({width:"", paddingLeft:"", paddingRight:""});	
		jQuery("#shadematchbox .onstepone .step2").css({width:"413px"});
		jQuery("#step2default").show();
		jQuery("div#step2chosen").hide();
		jQuery("#shadematchcontent").removeClass("onstepthree").addClass("onsteptwo");
		jQuery("#shadematchcontent").removeClass("onstepfour").addClass("onsteptwo");
	 });
	 /*-----------------------------------------------------*/

	jQuery("div#step3chosen").click(function(){ 
		jQuery("#step4default").hide();
		jQuery("div.step4,div.step step4").css({width: "51px",paddingLeft: "",paddingRight: ""});
		jQuery("div.step3").animate({width: "346px",paddingLeft: "31px",paddingRight: "20px"}, 190,
		 function(){
		jQuery("div.step3 div#step1default").show();
		jQuery("#shadematchcontent").removeClass("onstepthree").addClass("onstepthree");
		jQuery("div.step4").css({width:"", paddingLeft:"", paddingRight:""});
		jQuery("div.step3").css({width:"", paddingLeft:"", paddingRight:""});
		});
		jQuery("div.step3 div#step1default").show();
		jQuery("#shadematchcontent").removeClass("onstepthree").addClass("onstepthree");
		jQuery("div.step4").css({width:"", paddingLeft:"", paddingRight:""});
		jQuery("div.step3").css({width:"", paddingLeft:"", paddingRight:""});
		jQuery("#shadematchbox .onstepone .step3").css({width:"346px"});
		jQuery("#step3default").show();
		jQuery("div#step3chosen").hide();
		jQuery("#shadematchcontent").removeClass("onstepfour").addClass("onstepthree");

	 });
	 
	 /*-----------------------------------------------------*/


	//fix problem with Firefox not checking radio buttons on load
	if(jQuery.browser.mozilla) jQuery("form").attr("autocomplete", "off"); 	
	 
});