/* Colormatch Shade Selector Scripts */

// Accordion variables
var lastPanel;
var maxWidth = 715;
var minWidth = 0;

function triggerAccordion(triggerobject) {
    // Get the div we want to expand
    var newPanel = $(triggerobject).parent("div");
    var newPanelID = $(newPanel).attr("id");
    if (ValidateShade(newPanelID)) {
        if(newPanelID == 'step2')
        {
          $('#errorStep1').hide();
          $('.errorcnt-box').hide();
        }
        else if(newPanelID == 'step3')
        {
          $('#errorStep2').hide();
          $('.errorcnt-box2').hide();
          
        }
        else if(newPanelID == 'step4')
        {
          $('#errorStep3').hide();
          $('.errorcnt-box3').hide();          
        } 
        // Show the content of the new selected panel
        $(newPanel).find("div.stepcontent").show();

        // Animate the blocks to the new configuration
        $(lastPanel).animate({ width: minWidth + "px" }, { queue: false, duration: 395 });
        $(newPanel).animate(
		{ width: maxWidth + "px" },
		400,
		function() {
		    $("#cmpanels .panel").not("#" + newPanelID).find("div.stepcontent").hide();

		    // forces IE to recalculate, to avoid selected items jumping on slide
		    if ($(newPanel).find("div.selectedshade").length > 0) {
		        $(newPanel).find("div.selectedshade").addClass("IEFix");
		    }
		    if ($(newPanel).find("div.selectedshade").length > 0) {
		        $(newPanel).find("div.selectedshade").removeClass("IEFix");
		    }
		}
	);

        // Set the classes for active numbers
        $("#cmpanels .panel").removeClass("activepanel");
        $(newPanel).addClass("activepanel");

        var selectedClass = newPanelID + "active";
        $("#cmpanels").removeClass().addClass("floatwrapper").addClass(selectedClass);

        // Set the lastBlock to our new expanded div
        lastPanel = newPanel;
    }
    else {
        //alert('Select a value'+newPanelID);
        if(newPanelID == 'step2')
        {
            $('#errorStep1').show();
            $('.errorcnt-box').show();
        }
        else if(newPanelID == 'step3')
        {
            $('#errorStep2').show();
            $('.errorcnt-box2').show();
            $('.errorcnt-box').hide();
            $('#errorStep1').hide();
        }
        else if(newPanelID == 'step4')
        {
            $('#errorStep3').show();
            $('.errorcnt-box3').show();
            $('#errorStep2').hide();
            $('.errorcnt-box2').hide();
        }
        
       
    }
}

CoverGirl.enableShadeSelectorAccordion = function() {
   

    /* Initialize accordion container */
    $("#cmpanels")
		.addClass("step1active");

    $("#cmpanels div.panel:first").addClass("activepanel");

    /* Hide content of compressed sections to initialize (to avoid tabbing problems) */
    $("#cmpanels div.panel:not(.activepanel) div.stepcontent").hide();

    /* Bind accordion events */
    $("#cmpanels .panel .number")
//		.focus(function() {
//		    $(this).addClass("numberfocus");
    //		})
               .focus( function() {
                       //sometimes blur doesn't seem to fire, so always clear focus class first
                       $("#cmpanels .panel .number").removeClass("numberfocus"); 
                       $(this).addClass("numberfocus");

               })

		.blur(function() {
		    $(this).removeClass("numberfocus");
		})
		.click(function() {
		    triggerAccordion(this);
		    $(this).trigger("blur");
		    return false;
		});

    $("#cmpanels .panel a.nextbutton")
		.focus(function() {
		    $(this).addClass("focusbuttonlink");
		})
		.blur(function() {
		    $(this).removeClass("focusbuttonlink");
		})
		.click(function() {
		    var nextPanelNumber = $(this).parent("div").parent("div").next("div.panel").find(".number");
		    var nextPanelId = $(this).parent("div")[0].id;
		    if (ValidateShade(nextPanelId)) {
		        if(nextPanelId == "step3content"){$('#errorStep3').hide();$('.errorcnt-box3').hide();}
		        triggerAccordion(nextPanelNumber);
		        $(nextPanelNumber).focus();
		        $(this).removeClass("focusbuttonlink");
		        return false;
		    }
		    else {
		       // alert('Select a value thisone'+nextPanelId);
		         if(nextPanelId == "step1content")
		         {
		           $('.errorcnt-box').show();
		           $('#errorStep1').show();
		         }
		         else if(nextPanelId == "step2content")
		         {
		           $('#errorStep2').show();
		           $('.errorcnt-box2').show();
		           $('#errorStep1').hide();
		           $('.errorcnt-box').show();
		         }
		         else if(nextPanelId == "step3content")
		         {
		           $('#errorStep3').show();
		           $('.errorcnt-box3').show();
		           $('#errorStep2').hide();
		           $('.errorcnt-box2').hide();
		         }		        
		        return false;
		    }

		});

    /* testing */
    /*$("#cmpanels input[type=radio]").focus(function() {
    alert("focused!");
    })*/
}

/* Shade Selector variables */

function bindShadeEvents(shadediv) {
    $(shadediv)
		.attr('tabindex', 0)
		.keyup(function(e) {
		    if (e.keyCode == 32) {
		        $(this).trigger("click");
		    }
		})
		.click(function() {
		   
		    var activeStep = $(this).parents(".panel");

		    /* Clear all radio buttons in the selected step */
		    $(activeStep).find("input[type=radio]").attr("checked", "");

		    /* Clear any existing div selected classes in Step 1 */
		    $(activeStep).find("div.selectedshade").removeClass("selectedshade");

		    /* Add the selected class to the clicked one */
		    $(this).addClass("selectedshade");
		   
		    /* Change the hidden radio button value to match */
		    $(this).find("input[type=radio]").attr("checked", "checked");
		    return false;
		})
		.focus(function() {
		    $(this).addClass('hovershade');
		    var thisRadio = $(this).find("input[type=radio]");
		    if (thisRadio.is(':checked')) {
		        $(this).addClass('selectedhovershade');
		    }
		})
		.blur(function() {
		    $(this).removeClass('hovershade selectedhovershade');
		})
		.hover(function() {
		    $(this).trigger("focus");
		}, function() {
		    $(this).trigger("blur");
		})
}

function testFormSubmit() {
	var selectedItems = $("#cmpanels input:checked");
	var formOutput = "";
	$.each(selectedItems, function(i) {
	    var name = $(this).attr("name");
	    name = name.replace("ctl00$ctl00$MainContent$CMContentPlaceHolder$", "");
	    var value = $(this).val();
	    value = value.replace("rbtn", "");
	    formOutput += name + ": " + value + "; ";
	});
if (formOutput=="")
	{
	
	}
	else
	{
	/*  alert("Selected items -- "+formOutput);*/
	}
}

CoverGirl.enableShadeSelectorFormFunctionality = function () {
	
	/* Move all radio buttons WAY up the tab index so they won't be selected */
	$("#cmpanels input[type=radio]").each(function(i) {
		$(this).attr("tabindex",30000+i);
	})
	
	/* Replace all radio button labels with H3 tags */
	$("#cmpanels label").each(function() {
		var content = $(this).html();
		var myclass = $(this).attr("class");
		var html = '<h3 class="'+myclass+'">'+content+'</h3>';
		$(this).after(html).remove(); // add new, then remove original label
	})
	
	/* In case of browsers that remember radio button selection states on refresh, have the script run through and look for checked radio buttons, then check them */
	var selecteditems = $("#cmpanels input:checked");
	
	$.each(selecteditems, function(i) {
		$(this).parent("div").addClass("selectedshade");
	});
	
	/* Initialize Step forms */
	bindShadeEvents($("#cmpanels #step1 div.shadefamily"));
	bindShadeEvents($("#cmpanels #step2 div.skinshade"));
	bindShadeEvents($("#cmpanels #step3 div.eyeshade"));
	bindShadeEvents($("#cmpanels #step4 div.hairshade"));
	
	$("#cmpanels #step4 input.importantbutton").click( function() {
	ValidateAllShades();
	})
	
}

CoverGirl.enableShadeSelectorResults = function () {
	$("#shadecta area")
		.click(function() {
			var regionPop = '#'+$(this).attr('id')+'_pop';
			$(regionPop).css('display', 'block').addClass("selected");
			$(this).blur();
			$(regionPop).find("a:first").focus();
		})
		.mouseover(function(){
			var regionPop = '#'+$(this).attr('id')+'_pop';
			$(regionPop).css('display', 'block').addClass("selected");
		})
		.mouseout(function(){
			var regionPop = '#'+$(this).attr('id')+'_pop';
			$(regionPop).css('display', 'none').removeClass("selected");
		});
	
	$("#shadecta .resultspop")
		.mouseover(function() {
			$(this).css('display', 'block').addClass("selected");
		})
		.mouseout(function(){
			$(this).css('display', 'none').removeClass("selected");
		});
	
	$("#shadecta .resultspop .close").click(function() {
		var regionPop = $(this).parents("div.resultspop");
		$(regionPop).css('display', 'none').removeClass("selected");
		var regionPopId = $(regionPop).attr("id");
		switch (regionPopId) {
			case "liparea_pop":
				$("#eyearea").focus();
				break;
			case "facearea_pop":
				$("#liparea").focus();
				break;
			default:
				$("#footer a:first").focus();
				break;
		}
	});
}
 
/* Initialize everything when page is ready */
$(document).ready(function() {
	lastPanel = $("#step1");  // this sets initial state, assuming it always opens at step 1
	CoverGirl.enableShadeSelectorAccordion();
	CoverGirl.enableShadeSelectorFormFunctionality();
	CoverGirl.enableShadeSelectorResults();
})