/**********************************************************************
	Custom code - to handle conditional product options
	
	This function is called every time a special option is changed,
	and is also called once with no params to setup the initial visibility
	of options.
	
	The index number for the first option (Prescription/Frame Only) must be passed to this function.
	For example, if that option is "option_6", you would call this function as: 
	
		specialOpts(6)
		 
**********************************************************************/
function specialOpts(optIndex) {
	// grab form element
	var addCartForm = document.add_to_cart_form;
//alert(optIndex);	
	// Option fields have names and IDs that represent the order they appear in,
	// not the record number of the option itself.
	// This makes locating the options we need difficult. The first option is "Prescription/Frame Only"
	// if it were the first option on the page, it's 2 radio button IDs would be "option_0-0" and "option_0-1".
	// ....however, if custom options are above those fields, then these could be option_1-0, option_2-0, etc...
	// to locate the first option we need, we will loop starting at 0 until we find the one we need.
	var isRx 			= document.getElementById('option_' + optIndex + '-0').checked;
	var isFrameOnly 	= document.getElementById('option_' + optIndex + '-1').checked;

	// grab sections
	var rxOpt			= document.getElementById('rx_opt');
	var rxDetails		= document.getElementById('rx_details');
	var pdOpt			= document.getElementById('pd_opt');
	var typeOpt			= document.getElementById('type_opt');
	var rxNeeded		= document.getElementById('rx_needed');

	// grab fields
	var haveRxOrNot1	= document.getElementById('option_' + (optIndex + 1) + '-0');
	var haveRxOrNot2	= document.getElementById('option_' + (optIndex + 1) + '-1');
	
	var haveRx1			= addCartForm.elements['option_' + (optIndex + 5)];
	var haveRx2			= addCartForm.elements['option_' + (optIndex + 4)];
	var haveRx3			= addCartForm.elements['option_' + (optIndex + 3)];
	var haveRx4			= addCartForm.elements['option_' + (optIndex + 2)];
	
	var haveRx5			= addCartForm.elements['option_' + (optIndex + 9)];
	var haveRx6			= addCartForm.elements['option_' + (optIndex + 8)];
	var haveRx7			= addCartForm.elements['option_' + (optIndex + 7)];
	var haveRx8			= addCartForm.elements['option_' + (optIndex + 6)];
	
	var haveRx11		= addCartForm.elements['option_' + (optIndex + 10)]; // PD
	var haveRx12		= addCartForm.elements['option_' + (optIndex + 11)]; // single
	var haveRx13		= addCartForm.elements['option_' + (optIndex + 12)]; // multi
	
	var needRx1			= addCartForm.elements['option_' + (optIndex + 13)]; // your name
	var needRx2			= addCartForm.elements['option_' + (optIndex + 14)]; // dr name
	var needRx3			= addCartForm.elements['option_' + (optIndex + 15)]; // your phone
	var needRx4			= addCartForm.elements['option_' + (optIndex + 16)]; // dr fax

	// if first field is not chosen for some reason, we should hide all but that
	if (!isRx) {
		rxOpt.style.display 	= 'none';
		rxDetails.style.display = 'none';
		pdOpt.style.display 	= 'none';
		typeOpt.style.display 	= 'none';
		rxNeeded.style.display 	= 'none';
		
		// we don't want these fields set, they are only for RX and the user chose Frame Only
		haveRxOrNot1.checked = false;
		haveRxOrNot2.checked = false;

		// Unset O.D. and O.S fields
		haveRx1.value = 0;
		haveRx2.value = 0;
		haveRx3.value = 0;
		haveRx4.value = 0;
		haveRx5.value = 0;
		haveRx6.value = 0;
		haveRx7.value = 0;
		haveRx8.value = 0;
		
		haveRx11.value = 0; // PD field
		haveRx12.value = 0; // Singlefocus field
		haveRx13.value = 0; // Multifocus field
		
		needRx1.value = '';	// your name
		needRx2.value = '';	// dr name
		needRx3.value = '';	// your phone
		needRx4.value = '';	// dr fax
			
	} else if (isRx) {
	
		// determine value for rx option
		var hasRx 			= document.getElementById('option_' + (optIndex+1) + '-0').checked;
		var needsRx		 	= document.getElementById('option_' + (optIndex+1) + '-1').checked;

		rxOpt.style.display = 'block';
		
		if (hasRx) {

			// toggle display of fields			
			rxDetails.style.display = 'block';		
			pdOpt.style.display 	= 'block';		
			typeOpt.style.display 	= 'block';
			rxNeeded.style.display 	= 'none';
			
			// unset/uncheck fields that are not used when customer has an RX available
			needRx1.value = '';	// your name
			needRx2.value = '';	// dr name
			needRx3.value = '';	// your phone
			needRx4.value = '';	// dr fax
			
					
		} else if (needsRx) {

			// toggle display of fields			
			rxNeeded.style.display 	= 'block';
			rxDetails.style.display = 'none';		
			pdOpt.style.display 	= 'none';		
			typeOpt.style.display 	= 'block';		

			// Unset O.D. and O.S fields
			haveRx1.value = 0;
			haveRx2.value = 0;
			haveRx3.value = 0;
			haveRx4.value = 0;
			haveRx5.value = 0;
			haveRx6.value = 0;
			haveRx7.value = 0;
			haveRx8.value = 0;
			
			haveRx11.value = 0; // PD field
			haveRx12.value = 0; // Singlefocus field
			haveRx13.value = 0; // Multifocus field
		
		} else {
			// if here, they haven't chosen whether they have or need an RX, so hide everything below that
			rxDetails.style.display = 'none';
			pdOpt.style.display 	= 'none';
			typeOpt.style.display 	= 'none';
			rxNeeded.style.display 	= 'none';
		}
		
	} 
	
	
	//alert('isRx: ' + isRx + '\r\nisFrameOnly: ' + isFrameOnly + '\r\nhasRx: ' + hasRx + '\r\nneedsRx: ' + needsRx); 
}