// These vars are used to hold the initial colour values
// which are then used to reset form values.
var colourFirstArr;
var colourSecondArr;
var colourThirdArr;

function getRelatedColours ( ajaxFuncLoc, theSelect )
{	
	// get the selected colour
	var colour = theSelect.options[theSelect.selectedIndex].value;	

	//Only execute if we've actually selected a colour
	if(colour != "__any"){
		// dont allow any other colour to be selected from this 
		// dropdown until the clear button is pressed.
		if(colour != "__none"){
			while ( theSelect.firstChild ) 
			{
				theSelect.removeChild ( theSelect.firstChild );
			}
			
			theSelect.options[0] = new Option ( colour, colour );
			
			// disable the dropdown
			theSelect.disabled = true;
		}
		
	}
	firstSel = document.getElementById ( 'colourFirst' );	
	secondSel = document.getElementById ( 'colourSecond' );
	thirdSel = document.getElementById ( 'colourThird' );
	Val1 = firstSel.options[firstSel.selectedIndex].value;
	Val2 = secondSel.options[secondSel.selectedIndex].value;
	Val3 = thirdSel.options[thirdSel.selectedIndex].value;
	
	if ( theSelect.name == 'colourFirst' )
	{	
		// Populate the hidden field with the colour
		document.getElementById('firstColour').value = colour;		
		
		// Call the execute function for second colours
		// We only want to do this if a value is not already set for it
		if ( Val2 == '__any' ||  Val2 == '__none'  )
		{
			DWREngine._execute ( ajaxFuncLoc, null, 'getSecondColours', colour, Val3, populateSecondColours );
		}
		
		// Call the execute function for third colours
		// We only want to do this if a value is not already set for it
		if ( Val3 == '__any' || Val3 == '__none' )
		{
			DWREngine._execute ( ajaxFuncLoc, null, 'getThirdColours', colour, Val2, populateThirdColours );
		}
	}
	else if ( theSelect.name == 'colourSecond' )
	{
		// Populate the hidden field with the colour
		document.getElementById('secondColour').value = colour;

		// Call the execute function for second colours
		// We only want to do this if a value is not already set for it
		if ( Val1 == '__any' ||  Val1 == '__none'  )
		{
			DWREngine._execute ( ajaxFuncLoc, null, 'getFirstColours', colour, Val3, populateFirstColours );
		}				
		
		// Call the execute function for third colours
		// We only want to do this if a value is not already set for it
		if ( Val3 == '__any' ||  Val3 == '__none' )
		{	
			DWREngine._execute ( ajaxFuncLoc, null, 'getThirdColours', Val1, colour, populateThirdColours );
		}
	}
	else if ( theSelect.name == 'colourThird' )
	{	
		// Populate the hidden field with the colour
		document.getElementById('thirdColour').value = colour;
		
		// Call the execute function for second colours
		// We only want to do this if a value is not already set for it
		if ( Val1 == '__any' ||  Val1 == '__none' )
		{
			DWREngine._execute ( ajaxFuncLoc, null, 'getFirstColours', Val2, colour,  populateFirstColours );
		}
		
		// Call the execute function for third colours
		// We only want to do this if a value is not already set for it
		if ( Val2 == '__any' ||  Val2 == '__none' )
		{
			DWREngine._execute ( ajaxFuncLoc, null, 'getSecondColours', Val1, colour, populateSecondColours );
		}
	}
}



function populateFirstColours ( theResult )
{	
	theSelect = document.getElementById ( 'colourFirst' );
	populateColours ( theResult, theSelect, 'PRODUCTCOLOURFIRST' );
}


function populateSecondColours ( theResult )
{	
	selected = null;
	theSelect = document.getElementById ( 'colourSecond' );
	if(theSelect[theSelect.selectedIndex].value == '__none') selected = '__none';
	populateColours ( theResult, theSelect, 'PRODUCTCOLOURSECOND' );
	if(selected == '__none') theSelect.value = '__none';
}


function populateThirdColours ( theResult )
{	
	selected = null;
	theSelect = document.getElementById ( 'colourThird' );
	if(theSelect[theSelect.selectedIndex].value == '__none') selected = '__none';
	populateColours ( theResult, theSelect, 'PRODUCTCOLOURTHIRD' );
	if(selected == '__none') theSelect.value = '__none';
}



function populateColours ( theResult, theSelect, fieldName )
{	
	while ( theSelect.firstChild ) 
	{
   		theSelect.removeChild ( theSelect.firstChild );
	}
	
	// When all colours have been returned we need to remove any blank values
	var resultWithoutEmpties = new Array();
	var count = 0;
	
	for ( var i=0; i < theResult.length; i++ )
	{
		if ( eval ( 'theResult[i].' + fieldName ) != '' )
		{
			resultWithoutEmpties[count] = eval ( 'theResult[i].' + fieldName );
			count++;
		}
	}
	
	// Need to add the empty first option
	//theSelect.options[0] = new Option ( 'Any', '' );
	if(fieldName == "PRODUCTCOLOURFIRST"){
	theSelect[0] = new Option ( 'Any Main Colour', '__any' );
	}
	
	if(fieldName == "PRODUCTCOLOURSECOND"){
	theSelect[0] = new Option ( 'Any Second Colour', '__any' );
	}
	
	if(fieldName == "PRODUCTCOLOURTHIRD"){
	theSelect[0] = new Option ( 'Any Third Colour', '__any' );
	}
	
	
	if(fieldName != "PRODUCTCOLOURFIRST"){
		theSelect[theSelect.length] = new Option ( 'None', '__none' );
	}
	theSelect[theSelect.length] = new Option ( '-----', '' );
	theSelect[theSelect.length-1].disabled = "disabled";
	
	// Loop through the results and add each colour as an option
	for ( var i=0; i < resultWithoutEmpties.length; i++ ) 
	{
		// the select options must start at i+1 since we have already inserted the empty option above
		theSelect.options[theSelect.length] = new Option ( resultWithoutEmpties[i], resultWithoutEmpties[i] );
	}
}



function populateOrigColArrs ( firstList, secondList, thirdList )
{
	// Set the three variables to an array of the initial colours
	colourFirstArr = firstList.split ( "," );
	colourSecondArr = secondList.split ( "," );
	colourThirdArr = thirdList.split ( "," );
	
}


function resetFields ( )
{	
	// reset the text field
	document.getElementById ( 'searchVal' ).value = '';

	// reset the first colour dropdown
	theSelect = document.getElementById ( 'colourFirst' );
	resetOptions ( theSelect, colourFirstArr );
	theSelect.disabled = false;
	document.getElementById('firstColour').value = '__any';
	
	// reset the second colour dropdown
	theSelect = document.getElementById ( 'colourSecond' );
	resetOptions ( theSelect, colourSecondArr );
	theSelect.disabled = false;
	document.getElementById('secondColour').value = '__any';
	
	// reset the third colour dropdown
	theSelect = document.getElementById ( 'colourThird' );
	resetOptions ( theSelect, colourThirdArr );
	theSelect.disabled = false;
	document.getElementById('thirdColour').value = '__any';

}

function resetOptions ( theSelect, newOptionsArr )
{
	while ( theSelect.firstChild ) 
	{
   		theSelect.removeChild ( theSelect.firstChild );
	}
	
	theSelect[0] = new Option ( 'Any', '__any' );
	
	if(theSelect.name == "colourFirst"){
	theSelect[0] = new Option ( 'Any Main Colour', '__any' );
	}
	
	if(theSelect.name == "colourSecond"){
	theSelect[0] = new Option ( 'Any Second Colour', '__any' );
	}
	
	if(theSelect.name == "colourThird"){
	theSelect[0] = new Option ( 'Any Third Colour', '__any' );
	}
	
	
	/*
	if(theSelect.name != "colourFirst"){
		theSelect[theSelect.length] = new Option ( 'None', '__none' );
	}
	*/
	
	
	if(theSelect.name == "colourSecond"){
	theSelect[theSelect.length] = new Option ( 'No Second colour', '__none' );
	}
	
	if(theSelect.name == "colourThird"){
	theSelect[theSelect.length] = new Option ( 'No Third colour', '__none' );
	}
	
	
	theSelect[theSelect.length] = new Option ( '-----', '' );
	theSelect[theSelect.length-1].disabled = "disabled";

	for ( var i=0; i<newOptionsArr.length; i++ )
	{
		theSelect[theSelect.length] = new Option ( newOptionsArr[i], newOptionsArr[i] )
	}
}


function toggleSearch ( ajaxFuncLoc, aTag )
{ 	
	var extendedBtn = document.getElementById ( 'searchToggleExtended' );
	var basicBtn = document.getElementById ( 'searchToggleBasic' );
	var extendedSearch = document.getElementById ( 'extendedSearch' );
	
	// change the href on the a tag.
	aTag.href = "#1";
	
	// if the class is currently displayBlock
	if ( extendedBtn.className == 'displayBlock' ) 
	{
		// hide the extended button
		extendedBtn.className = 'displayNone';
		// show the basic button
		basicBtn.className = 'displayBlock';
		// display the extended search
		extendedSearch.className = 'displayBlock';
		
		// set the session.searchExtended to true
		DWREngine._execute ( ajaxFuncLoc, null, 'setExtendedSearch', '1', sessionChanged );
	}
	else
	{
		// clear colour combos
		resetFields();
		// hide the basic button
		basicBtn.className = 'displayNone';
		// display the extended button
		extendedBtn.className = 'displayBlock';
		// hide the extended search
		extendedSearch.className = 'displayNone';		
		
		// set the session.searchExtended to true
		DWREngine._execute ( ajaxFuncLoc, null, 'setExtendedSearch', '0', sessionChanged );
	}

}


function sessionChanged ()
{
	 /* CF Ajax seems to want a callback function even if
		you don't want to do anything. I think there is a way
		to give it null as a callback function but I don't have
		the time to figure it out.
		So thats why this function is here... */
}


/* The following two function are used in the search
   results pagination when users try to click the first/
   last/previous/next links when they are already on the 
   first/last page. */
function uAtStart ()
{
	alert( 'You are at the beginning of the products for this category.' );
}

function uAtEnd ()
{
	alert( 'You are at the end of the products for this category.' );
}