/*	SONY | SONY STYLE.COM - COLOR COLLAPSE FUNCTIONS
 *	Author(s): 	Branden Thompson	| Front End Architect , Branden.Thompson at am dot sony dot com
 *				Jonathan Cheung 	| Sr. Flash Developer , Jonathan.Cheung at am dot sony dot com
 *
 *	Date:		April 17, 2009
 *
 *	JS FILE PRE-CONDITIONS:
 *	-------------------------------------------------------------------------------------------------
 *
 *		- Prototype must be included before this .js (or included functions) is referenced.
 *		- The Appropriate Event Listener files that call the function must be referenced in the page after this is included.
 *
 *
 *	FUNCTIONALITY THAT THIS JS WILL PROVIDE
 *	-------------------------------------------------------------------------------------------------
 *
 *
*/

/* -------------------------------------------------------------------------------------------
	Method: 			productDetailColorCollapse

	Arguments:
						ourSKU [string]


	Pre-Conditions:
						* Prototype must be included before this file.
						* ourSKU, classToHide must not be null or undefined.
						* ourSKU must correspond to a valid ID that is written on the proper
						  list element link (a.colorChipLink)

						* The Background-color: property MUST be written in-line on the colorChipLink
						  <a>, pulling the HEX value stored in Accelerator

						* The templates (JSP) must write proper SKUs and non-ajax content into
						  the page prior to page serve.  Content within those containers is not
						  as critical as far as the function working.

						* There are several periphery ID's and classes that must exist on the
						  page that this function takes for granted, which is why this function is
						  directly tied to the product detail page template.

	Post-Conditions:
						* On page load, all elements associated with the default SKU will be
						  displayed, all other containers for "color collapse content" will be
						  hidden.

						* When hovering over a color-chip, the Vanity Name (pulled from Accelerator
						  and written in the proper element prior to page serve) will be displayed.

						* Upon user click of a color chip:

						  - Main HERO Image (png) source will be swapped.
						  - Vanity Name will permanently change above the color chips
						  - The Active Colorchip will be highlighted, and any highlights on other color chips will be removed.
						  - Model # Container will change, showing the current SKU and hiding the previous
						  - Additional Image List will change out
						  - Price, Inventory Status, Call to Action Button will all change out to match the SKU
						  - Hover State of the Call to Action button will be set to match the hex value of the color chip

------------------------------------------------------------------------------------------- */
function productDetailColorCollapse(ourSKU)
{

	// Let's initialize and scrape the values that we're going to need:

	/* 	1. 	Let's grab the default CTA Button Color:  Normally this should be Orange.
	 *		We'll need it for resetting the CTA button after the user mouses off the
	 *		button.
	*/

	myDefaultValue = $(ourSKU+'CTAButton').getStyle('background-color');

	/*	2.	We need to set the "vanity name" of our color in the area that shows up right
	 *		above the colorchips.  We're assuming that this value has been written into the
	 *		page for us already from Accelerator by way of the WebSphere Commerce JSP
	 *		templates.
	 *
	*/

	ourCurrentVanityName = $(ourSKU).innerHTML;
	$('currentVanityName').innerHTML = ourCurrentVanityName;

	/*	3.	We need to grab the color of the colorChip.  This is so that we can use this value
	 *		to change the color of our CTA Button to match the colorChip (thus product) color
	 *		when the user hovers over the button.  That means is the color chip is blue, then
	 *		when the user hovers over our button, the color of the button will change to blue.
	*/

	myHexValue = $(ourSKU).getStyle('background-color');

	/*	4.	Set our Default Image:
	 *
	 *		This could be potentially tricky because it relies on a few assumptions:
	 *
	 *		- The variable 'ourDefaultFilePath' has the correct image directory listed. To make
	 *		  things a little easier, I have provided 2 lines of the same variable.  One for use
	 *	      on a local webserver (has a relative path), and one for when the script is injected
	 *		  into our product environment (which has an absoulte path).
	 *
	 *		- The images actually exist.
	 *		- The images follow a naming convention where the FILENAME of the image IS THE SKU ITSELF
	 *		  followed by "_1,"  "_2," "_3," and so on for however many additional images that
	 *		  particular SKU has, WITH A MINIMUM OF HAVING AT LEAST ONE PNG NAMED, '[PRODUCT_SKU]_1.png'
	*/

	//ourDefaultFilePath = "img/718x405/";
	//ourDefaultFilePath = "/wcsstore/SonyStyleStorefrontAssetStore/img/718x405/";
	//$('productDetailActiveImage').src = ourSKU + "_1.png";

	/*	5.	Write our CSS Snippets to change the background color of the CTA button:
	 *
	 *		When the user hovers over and mouses off the button.  our Default Style is what we'll use
	 *		to reset the button back to it's "non-hover" state when the user mouses off the button.
	 *
	 *		ourHoverStyle will be the snippet used to change the color of the button when the user
	 *		mouses over the button.
	 *
	 *		NOTE!	WE ONLY WANT TO CHANGE THE BACKGROUND COLOR!  This is because we are assuming that
	 *				this button has another class on it that applies the PNG "button-shine."  We're we
	 *				to use the CSS shortcut 'background,' we would strip that shine off.
	 *
	*/

	defaultStyle = "background-color:" + myDefaultValue;
	ourHoverStyle = "background-color:" + myHexValue;

	/* 	6.	Scrub/Convert our HEX value into values suitable for making calculations:
	 *
	 *		This is necessary for us to be able to determine if we need to change the color of our
	 *		text and our "button shine" from a very light color (like white), into a darker color
	 *		(like black), if the hover state of our button is a very light color.
	 *
	 *		When we read in the Hex value for "myHexValue" prototpye turns a value like this:
	 *
	 *		#fff
	 *
	 *		into this:
	 *
	 *		rgb(255, 255, 255)
	 *
	 *		This is actually beneficial for us, because we can then split this string into 3
	 *		numerical values from 0 - 255. In order to do this, we'll have to:
	 *
	 *		- Remove the "rgb(" and ")"
	 *		- Split the string into 3 seperate sub strings that contain only the numbers
	 *		- Type change those values from strings to numbers so we can acutally do math with them
	*/

	var colorButtonMatrix = myHexValue.replace("rgb(","");
	colorButtonMatrix = colorButtonMatrix.replace(")","");
	theRGBs = colorButtonMatrix.split(", ");

	/*	6b. Convert our array of strings into 3 seperate numberical variables:
	 *
	 *		So we now have our substrings in an array, but to make it easier to understand
	 *		and to be more semantic, I'm going to place those values into variables named
	 *		redValue, greenValue and blueValue (R, G, B).  If I were to simply assign the contents
	 *		of the array into the variables, they would still be strings.
	 *
	 *		This is bad because if I want to say, add redValue and blueValue together, I would
	 *		be expecting to get something like:
	 *
	 *		500 (255 + 255 = 500)
	 *
	 *		*HOWEVER*  Since they're currently strings, the "+" operator has a completely different
	 *		meaning as far as those variables are concerned, and I would instead get this:
	 *
	 *		255255  ("255" + "255" = "255255") -> This is "string addition/combination"
	 *
	 *		So, this means I need to parse the values, which I can do using the parseFloat() method:
	*/

	redValue = parseFloat(theRGBs[0]);
	greenValue = parseFloat(theRGBs[1]);
	blueValue = parseFloat(theRGBs[2]);

	/*	6c.	Define our Alternative Classes for "dark" text and shine based on some calculations:
	 *
	 *		While it's normally a better practice to place "definitions for variables before you start
	 *		doing some calculations (so they're all at the top), I am placing this down here so it is
	 *		in the same general area as the code block that will use it.
	 *
	 *		These variables answer the questions:
	 *
	 *		1. So what if my button is super light?  What color should the text turn to (if it's currently white)
	 *		2. What color does the "shine" to?  White on white would be kind of dumb.
	 *
	 *		Fortunately, we can use prototype to add and remove classNames onto elements as we need,
	 *		and we can tie that execution to an event listener. So what we're going to do here is:
	 *
	 *		1. Evaluate the Numerical Total of 3 critical combinations:
	 *
	 *			A. If the redValue and greenValue add up to more than 460, then even the button will be a very "whitish-[whatever] color"
	 *			B. If the greenValue and the blueValue add up to more than 460, then the button will also be a very "neonish-whatever color"
	 *			C. If all 3 values add up to more than 600, then we're dealing with off-whites
	 *
	 *		In all 3 cases, having "white" or light text and a button shine is not desirable, so we
	 *		conveniently set up the classes 'darkText' and 'CTAButtonOn.'  These classes have darktext
	 *		and change the background position of our shine .png so that the "black" sheen shows, respectively.
	 *
	 *		If any 1 of these 3 cases are true, then we want create two variables so that we can append
	 *		these classes to our CTA button, and button Text.  If all 3 cases are false, then we'll sinmply
	 *		define those variables as blank, meaning nothing will happen in regards to text and shine color.
	*/

	if((eval(redValue + greenValue)) >= 460 || (eval(greenValue + blueValue)) >= 460 || (eval(redValue + greenValue + blueValue)) >= 600)
	{
		// the button is "really light," so let's make the text and button shine black.
		textClass = "darkText";
		classToAdd = "CTAButtonOn";
	}
	else
	{
		// otherwise, keep them white:
		textClass = '';
		classToAdd = '';
	}

	/*	7.	"Turn on" all the containers that pertain to the SKU that is activated when the user
	 *		clicks on a colorchip:
	 *
	 *		this leverages the method toggleLayer(), whcich is in the JS file ss_tabs_toggler_functions.js.  Since
	 *		we have our SKU, and we're assuming (based upon the front-end framework markup) that this
	 *		SKU is part of several IDs containing relevant data, we can simply "toggle on" the relevant layers
	 *		and "toggleOff" all other layers that share the same CLASS (not ID)
	 *
	*/

	toggleLayer(ourSKU + 'ModelNumberCallout', 'productSkuNumber');
	toggleLayer(ourSKU + 'InventoryStatus','inventoryStatusGroup');
	toggleLayer(ourSKU + 'CTAGroup','ctaGrouping');
	toggleLayer(ourSKU + 'PriceAndFinancingOptions', 'priceFinancingGroup');
	//toggleLayer(ourSKU + 'AdditionalImages', 'additionalImages');

	/*	8.	Set up our sub Event Listeners for the When the user "hovers over" the proper CTA Button:
	 *
	 *		Relatively Straightforward.  Since we have lined up all our data and varables, we're simply
	 *		going to add the classNames to the Text and CTA button, as well as set the background color
	 *		of the CTA button to match the color of the color chip.
	 *
	 *		Once the user mouses out of the button, we'll remove those classes and reset the
	 *		background color to the default (most likley Orange).
	*/

	Event.observe($(ourSKU+'CTAButton'), 'mouseover', function(){

		//	alright, now for some fun - we're going to need to compute a sum of the RGB score,
		//	depending on that score range, we'll have to flip the color of the CTAButton text
		//	to black:

		$(this).setStyle(ourHoverStyle);
		$(this).addClassName(classToAdd);
		$(ourSKU + 'ProductDetailCTAText').addClassName(textClass);


	});// end CTA Button Hover event listener

	Event.observe($(ourSKU+'CTAButton'), 'mouseout', function(){

		$(this).setStyle(defaultStyle);
		$(this).removeClassName(classToAdd);
		$(ourSKU + 'ProductDetailCTAText').removeClassName(textClass);

	});// end CTA Button Hover event listener
}// end productDetailColorCollapse()