// Do a quick check to see if we have the complex options data
if ( typeof OptionsData != 'undefined'){
	document.getElementById('buybutton').style.display = "none";
	// create a variable for the complex option radio button object
	var ComplexFeatures=document.le_form.ComplexFeatures;
	// this function will set the correct radio button clicked
	function setRadio(radioOption){
		if ( typeof ComplexFeatures.length != 'undefined'){
			// set the radio button
			ComplexFeatures[radioOption].checked = true;
		}
	}
	// this'll add to basket
	function nowBuy(){
		document.le_form.submit();
	}	
	// Below is a typical chunk of data from the OptionsData
	// OptionsData[0]["colour"] = "Silver";
	// OptionsData[0]["size"] = "";
	// OptionsData[0]["description"] = "With Stand";
	// Below this is a typical value from a complex option radio button
	// Black | |With Stand |7.0000
	// start to create the output for the features
	var complexoptionsdata='<table border="0" id="options-table" cellpadding="0" cellspacing="0">';	
	// loop round the complex options data
	for(i=0; i < OptionsData.length; i++){
		// create vars for colour / size etc
		var colour = OptionsData[i].colour;
		var size = OptionsData[i].size;
		var description = OptionsData[i].description;
		// because we can't be sure this data is in the same order as the complex options radio buttons, 
		// this next bit will try to work out which radio button need checking when the buy buttons are clicked
		if ( typeof ComplexFeatures.length == 'undefined'){
			var ComplexFeaturesLength=1;
		}
		else {
			var ComplexFeaturesLength=ComplexFeatures.length;		
		}
		for(j=0; j < ComplexFeaturesLength; j++){
			if ( typeof ComplexFeatures.length == 'undefined'){
				// the radio button
				var thisoption=ComplexFeatures.value;
			}
			else {
				// one of the radio buttons
				var thisoption=ComplexFeatures[j].value;				
			}	
				
			// split the option value on the pipe
			var splitOption=thisoption.split("|");
			var radioColour=splitOption[0];
			var radioSize=splitOption[1];
			var radioDescription=splitOption[2];
			// leaving this line in incase futher debugging is needed, alert('!'+ colour + '! - !' + radioColour  + '! | !' +  size + '! - !' + radioSize + '! | !' + description + '! - !' + radioDescription + '!');
			if(colour+' ' == radioColour && size+' ' == radioSize && description+' ' == radioDescription){
				// we probably only want a buy button if we have some stock
				if(OptionsData[i].stocklevel != 0){
					var buy = '<a href="javascript:setRadio(' + j + ');nowBuy();"><img src=\"/mall/puretri/images/buy-now.png\" alt=\"Buy Now\" width=\"235\" height=\"42\" /></a>';
				}
				else {
					var buy = "<a href=\"javascript:;\" onClick=\"setRadio(" + j + "); document.getElementById('stockEmailer').style.display = 'block'\"><img src=\"/mall/puretri/images/request-stock-update.png\" alt=\"Request Stock Update\" width=\"235\" height=\"42\" /></a>";
				}			
			}
			else{
//				var buy =  "colour " + colour + " radioColour " + radioColour + " size " + size + " radioSize " + radioSize + " description " + description + " radioDescription " + radioDescription; 
			}
		}

//		var buy =  ComplexFeatures.length;
		if(OptionsData[i].stocklevel == 0){
			var stockimage = "<img src=\"/mall/puretri/images/no-stock.png\" alt=\"No Stock\" width=\"71\" height=\"33\" />";
		}
		else if(OptionsData[i].stocklevel < OptionsData[i].minstocklevel){
			var stockimage = "<img src=\"/mall/puretri/images/low-stock.png\" alt=\"Low Stock\" width=\"71\" height=\"33\" />Low Stock";
		}	
		else {
			var stockimage = "<img src=\"/mall/puretri/images/in-stock.png\" alt=\"In Stock\" width=\"71\" height=\"33\" />";			
		}
		complexoptionsdata=complexoptionsdata + '<tr><td>' + colour + '</td><td>' + size + '</td><td>' + description + '</td><td class="stock-msg">' + stockimage + '</td><td class="buy-btn">' + buy + '</td></tr>';		
	}
	complexoptionsdata=complexoptionsdata + '</table>';	
	document.getElementById('complexoptionsoutput').innerHTML = complexoptionsdata;	
}