attributes = new Array();
attributes2 = new Array();
attr1ShowOnPage = new Array();
attr2ShowOnPage = new Array();
attributesCatEntryIds = new Array();
attributes2CatEntryIds = new Array();

attr1image = new Object();
attr2image = new Object();

itemImageMap1 = new Object();
itemImageMap2 = new Object();

var selectedAttr2DivId;
var attr2CategoryName;
var pleaseSelectMsg;

// This function is called when an attr1 (i.e. primary) swatch has been clicked.  It displays the selected primary attribute, 
// clears the secondary attribute selection and sets the selected catentry Id.  
// The main image switches to the product image, and loadSecondaryAttributes() is called.
function selectAttr1(selectedValue, selectedValueCatEntId, fullImage){
	// load required attribute related arrays for use by javascript functions
	loadArraysFromMiniProdDisplay();
	
	// set the catentry Id of the selected attribute
	document.OrderItemAddForm.attr1.options[document.OrderItemAddForm.attr1.selectedIndex].value = selectedValueCatEntId;
	
	// display the selected primary attribute value and clear the secondary attribute selection if any
	document.getElementById('attrib1SelectedValue').innerHTML = selectedValue;
	if (eval(document.getElementById('attrib2SelectedValue'))) document.getElementById('attrib2SelectedValue').innerHTML = pleaseSelectMsg + ' ' + attr2CategoryName;
	
	// change image to the product full image when a primary attribute is clicked
	Rotate(fullImage, 'mainImage', true);
	
	// re-load secondary attributes available for the selected primary attribute
	loadSecondaryAttributes(document.OrderItemAddForm);

	// if there is a 2ndary attribute, disable add to cart until the 2nd attribute is selected
	if( attributes2.length > 0 ){
		isAttr2Selected = false;
		var target = document.getElementById( selectedAttr2DivId );

		if( target != null ){
			generateClick( target ); // try to reselect the previously selected 2nd attribute
		}		
	}	
	
}

// This function is called when an attr2 (i.e. secondary) swatch has been clicked.  It is used *ONLY* after the initial load.
// It displays the selected attribute.  The main image switches to the item image if available, and loadSecondaryAttributes() is called.
// Subsequent attr2 clicks are supported by the dynamic javascript div object creation, see loadSecondaryAttributes() function.
function selectAttr2(selectedValue, selectedValueCatEntId){
	// load required attribute related arrays for use by javascript functions
	loadArraysFromMiniProdDisplay();
	
	// set and display the selected secondary attribute value
	document.getElementById('attrib2SelectedValue').innerHTML = selectedValue;
	
	selectedAttr2DivId = 'a_' + selectedValue; // update the selected 2ndary attribute for the generateClick call later
	
	// change image to the image associated with the selected secondary attribute value
	for(j=0;j<attributes2.length;j++){
		if(attributes2[j] == selectedValue){
			Rotate('//' + itemImageMap2[j], 'mainImage', true);
			break;
		}
	}
	// re-load secondary attributes available for the selected primary attribute
	loadSecondaryAttributes(document.OrderItemAddForm);
	
	isAttr2Selected = true; // enable add to cart now that the 2nd attribute has been selected
}

function loadSecondaryAttributes(form){
	// set the selected primary attribute Name
	attributeName = document.getElementById('attrib1SelectedValue').innerHTML;
	// variables used to find the correct secondary attribute value mappings
	unsortedAttr2Array = new Array();
	unsortedAttr2Catentry = new Array();
	sortedAttr2Array = new Array();
	sortedAttr2Catentry = new Array();
	var swatchImage;
	var itemImage;

	// figure out which secondary attribute values, i.e. colors, are available for the current selected primary swatch
	// unsortedAttr2Array contains an unsorted list of available-to-be-click secondary attributes.
	// unsortedAttr2Catentry contains the corresponding catentry Id values.
	counter = 0;
	if(attributes2.length > 0){
		for(j=0;j<attributes.length;j++){
			if(attributes[j] == attributeName){
				// this attribute value matches the current swatch, now check which secondary attribute value is available
				if(findAttributeByCatentry(attributesCatEntryIds[j]) != null){
					unsortedAttr2Array[counter] = findAttributeByCatentry(attributesCatEntryIds[j]);
					unsortedAttr2Catentry[counter] = attributesCatEntryIds[j];
					counter++;
				}
			}
		}

		counter2 = 0;
		// create a color block element for appending div swatch objects later
		var colorBlock = document.getElementById('colorBlock');
		colorBlock.innerHTML = '';

		// reorder the array based on sequence of the secondary attribute.  This step is required to support finding 
		// the correct catentry Id value to use with the primary-secondary attribute combination
		// sortedAttr2Array contains a sorted list of available-to-be-click secondary attributes.
		// sortedAttr2Catentry contains the corresponding catentry Id values.
		for(j=0;j<attributes2.length;j++){
			if (counter2==0 || attributes2[j] != sortedAttr2Array[counter2-1]) {
				for (m=0; m<counter; m++) {
					if(attributes2[j] == unsortedAttr2Array[m]){
						sortedAttr2Array[counter2] = unsortedAttr2Array[m];
						sortedAttr2Catentry[counter2] = unsortedAttr2Catentry[m];
						counter2++;
						m=counter;
					}
				}
			}
		}

		// create secondary attribute swatch div objects with correct swatch image, item image (if any), corresponding catentry Id
		lastAttribute2 = '';
		counter3=0;
		for(j=0;j<attributes2.length;j++){
			// the lastAttribute2 != attributes2[j] will ensure we're only dealing with unique swatches
			if ( typeof(attributes2[j]) != 'undefined' && lastAttribute2 != attributes2[j] ){					
				div = document.createElement('div');
				div.setAttribute( 'id', attributes2[j] );

				// get the swatch image
				swatchImage = attr2image[j];
				if( swatchImage != '' ){
					swatchImage = '//' + swatchImage;
					swatchImage = '<img alt="' + attributes2[j] + '" src="' + swatchImage + '"/>';
				}else{
					// use attribute value if there is no swatch image
					swatchImage = attributes2[j]; 
				}
				
				// if the current swatch matches the sorted available-to-be-click list, append the Rotate image function + display
				// secondary attribute call + modify catentry Id call + append the swatch image, 
				// o/w just insert the swatch image without the onclick element
				if (attributes2[j] == sortedAttr2Array[counter3]) {
					itemImage = '//' + itemImageMap2[j];
					div.innerHTML = '<a id=\'a_' + attributes2[j] + '\' onclick="selectedAttr2DivId = \'a_' + attributes2[j] + '\';Rotate(\'' + itemImage + '\',\'mainImage\',true);document.getElementById( \'attrib2SelectedValue\' ).innerHTML = \'' + attributes2[j] + '\';document.OrderItemAddForm.attr2.options[document.OrderItemAddForm.attr2.selectedIndex].value=\'' + sortedAttr2Catentry[counter3] + '\'; isAttr2Selected = true; ">' + swatchImage + '</a>';			
					counter3++;
				} else {
					// not part of the available list found in sortedAttr2Array, set unavailable class tag
					div.innerHTML = '<a>' + swatchImage + '</a>';
					div.className = 'unavail';
				}
				colorBlock.appendChild(div);
				lastAttribute2 = attributes2[j];
			}			
		}
	}

	// set the catentry Id of the selected secondary attribute, this is required to support
	// switching of the available secondary attribute values upon initial load, secondary attribute exists
	if (eval(document.getElementById('attrib2SelectedValue')) && sortedAttr2Array.length >0 ) {
		var selectedAttr2Name = document.getElementById('attrib2SelectedValue').innerHTML;

		// default the secondary attribute catentry Id to the first one in the sorted list, this is for the case where 
		// the user has clicked on a primary attribute and the previously selected secondary list attribute has to reset
		document.OrderItemAddForm.attr2.options[document.OrderItemAddForm.attr2.selectedIndex].value = sortedAttr2Catentry[0];

		// now change the secondary attribute catentry Id if the selected attribute value is found in the sorted list
		for(k=0;k<sortedAttr2Array.length;k++){
			if (selectedAttr2Name == sortedAttr2Array[k]) {
				document.OrderItemAddForm.attr2.options[document.OrderItemAddForm.attr2.selectedIndex].value = sortedAttr2Catentry[k];
				break;
			}
		}
	}
}

function collectionToArray(collection) { 
	var myArray = []; 
	if (collection != null && collection != "") {
		for(var i=0; i < collection.length; i++) {
			myArray.push(collection[i].value);
		}
	}
	return myArray;
}                       


// finds attributes in the secondary attributes select object using the catentryId as the key
function findAttributeByCatentry(catentryId){
	for(i=0;i<attributes2CatEntryIds.length;i++){
		if(attributes2CatEntryIds[i] == catentryId && shouldCatentryBeShown(catentryId) == true){
			return attributes2[i];
		}
	}
	return null;
}

// checks if this attribute should be shown on page
function shouldCatentryBeShown(catentryId){
	for(i=0;i<attr2ShowOnPage.length;i++){
		if(attr2ShowOnPage[i] == catentryId){
			return true;
		}
	}
	return false;
}

// checks if attribute already exists in Select object
function doesAttributeAlreadyExist(selectObject, attributeName){
	for(i=0;i<selectObject.length;i++){
		if(selectObject.options[i].value == attributeName){
			return true;
		}
	}
	return false;
}

// load the primary and secondary attribute arrays created in hidden div tags from initial load of the MiniProductDisplay page
function loadArraysFromMiniProdDisplay(){
	// reset the variables before populating them, this has to be done to avoid variables getting re-used 
	// incorrected by a different quickview request on the same page
	attributes = new Array();
	attributes2 = new Array();
	attr1ShowOnPage = new Array();
	attr2ShowOnPage = new Array();
	attributesCatEntryIds = new Array();
	attributes2CatEntryIds = new Array();
	
	attr1image = new Object();
	attr2image = new Object();
	
	itemImageMap1 = new Object();
	itemImageMap2 = new Object();	
	
	attr2CategoryName = '';

	var c=0;
	while (eval(document.getElementById("attributes["+c+"]"))) {
		attributes[c]=document.getElementById("attributes["+c+"]").innerHTML;
		c++;
	}
	c=0;
	while (eval(document.getElementById("attributes2["+c+"]"))) {
		attributes2[c]=document.getElementById("attributes2["+c+"]").innerHTML;
		c++;
	}
	c=0;
	while (eval(document.getElementById("attr1ShowOnPage["+c+"]"))) {
		attr1ShowOnPage[c]=document.getElementById("attr1ShowOnPage["+c+"]").innerHTML;
		c++;
	}
	c=0;
	while (eval(document.getElementById("attr2ShowOnPage["+c+"]"))) {
		attr2ShowOnPage[c]=document.getElementById("attr2ShowOnPage["+c+"]").innerHTML;
		c++;
	}
	c=0;
	while (eval(document.getElementById("attributesCatEntryIds["+c+"]"))) {
		attributesCatEntryIds[c]=document.getElementById("attributesCatEntryIds["+c+"]").innerHTML;
		c++;
	}
	c=0;
	while (eval(document.getElementById("attributes2CatEntryIds["+c+"]"))) {
		attributes2CatEntryIds[c]=document.getElementById("attributes2CatEntryIds["+c+"]").innerHTML;
		c++;
	}
	c=0;
	while (eval(document.getElementById("attr1image["+c+"]"))) {
		attr1image[c]=document.getElementById("attr1image["+c+"]").innerHTML;
		c++;
	}
	c=0;
	while (eval(document.getElementById("attr2image["+c+"]"))) {
		attr2image[c]=document.getElementById("attr2image["+c+"]").innerHTML;
		c++;
	}
	c=0;
	while (eval(document.getElementById("itemImageMap1["+c+"]"))) {
		itemImageMap1[c]=document.getElementById("itemImageMap1["+c+"]").innerHTML;
		c++;
	}
	c=0;
	while (eval(document.getElementById("itemImageMap2["+c+"]"))) {
		itemImageMap2[c]=document.getElementById("itemImageMap2["+c+"]").innerHTML;
		c++;
	}
    
    if( eval(document.getElementById("attr2CategoryName")) ){
		attr2CategoryName = document.getElementById("attr2CategoryName").innerHTML;	
	}
	if( eval(document.getElementById("pleaseSelectMsg")) ){
		pleaseSelectMsg = document.getElementById("pleaseSelectMsg").innerHTML;	
	}
}

function generateClick(target){
  if (typeof target.dispatchEvent != 'undefined' ){
    var clickevent=document.createEvent("MouseEvents")
    clickevent.initEvent("click", true, true);
    target.dispatchEvent(clickevent);
  } else {
    // IE support
    target.fireEvent("onclick");
  }    
}