var output = document.getElementById( "options" );

var BASE = 36;


function clearDownNode( node ){
	var child = node.lastChild;
	while( null != child ){
		node.removeChild( child );
		child =  node.lastChild;
	}
}
function removeNodeAndChildren( node ){
	if( null != node ){
		clearDownNode( node );
		( node.parentNode && ( node.parentNode.removeChild( node ) ) );
	}
}

function onChange( theField, theLevel ){
//	if( theField && theField.options.selectedIndex > 0 ){
		updateOptions( theLevel );
//	}
}
function updateOptions( level ){
	var optionA = document.getElementById( "option0" );
	var optionB = document.getElementById( "option1" );
	var optionC = document.getElementById( "option2" );
	var optionD = document.getElementById( "option3" );
	var optionAValue = 0;
	var optionBValue = 0;
	var optionCValue = 0;
	var optionDValue = 0;
	
	var choiceDiv = document.getElementById( "choice" );
	var existingDiv = document.getElementById( "div" + String.fromCharCode( 48 + level + 1 ) );
	var clearEverythingDown = false;
//alert( mylevels );
	if( mylevels >= 1 ){
		
		if( null != optionD ) {
			optionDValue = parseInt( optionD.options[ optionD.options.selectedIndex ].value, BASE );
		} else		
			optionDValue = -1;
	}
		
		
	if( mylevels >=2 ){
		
		if( null != optionC ) {
			optionCValue = parseInt( optionC.options[ optionC.options.selectedIndex ].value, BASE );
		} else
			optionCValue = -1;
	}
	
	if( mylevels >=3 ){
		
		if( null != optionB ) {
			optionBValue = parseInt( optionB.options[ optionB.options.selectedIndex ].value, BASE );
		} else
			optionBValue = -1;
	} 
	
	if( mylevels >=4 ){
		if( null != optionA ){
			optionAValue = parseInt( optionA.options[ optionA.options.selectedIndex ].value, BASE );
		} else
			optionAValue = -1;
		
	} 
	
	clearEverythingDown |= ( null != optionA && ( 0 == optionA.options.selectedIndex ) );
	clearEverythingDown |= ( null != optionB && ( 0 == optionB.options.selectedIndex ) );
	clearEverythingDown |= ( null != optionC && ( 0 == optionC.options.selectedIndex ) );
	clearEverythingDown |= ( null != optionD && ( 0 == optionD.options.selectedIndex ) );
			
	
//	alert( "optiona = " + optionAValue + ", optionb = " + optionBValue + ", optionc = " + optionCValue + ", optionD = " + optionDValue  );
	if( clearEverythingDown ){
		clearDownNode( choiceDiv );
		if( null != existingDiv ){
			removeNodeAndChildren( existingDiv );
		}
	} else {
		var optionsToSet = determineOptionsAtLevel( level, optionAValue, optionBValue, optionCValue , optionDValue );

		if( level == 3 ){
			proposeProduct( optionAValue, optionBValue, optionCValue, optionDValue );
		} else {
			
			clearDownNode( choiceDiv );
			if( null != existingDiv ){
				removeNodeAndChildren( existingDiv );
			}		
			provideOptions( level,optionsToSet, optionA, optionB, optionC );
		}
	}
	
}

function proposeProduct( indexA, indexB, indexC, indexD ){
//alert( "a = " + indexA + ", b = " + indexB + ", c = " + indexC + ", d = " + indexD );
	var choiceDiv = document.getElementById( "choice" );
	clearDownNode( choiceDiv );
	var text = document.createTextNode( "Planer's recommendation for this application - please click for details -  " );
	var productIndex = parseInt( option_list[ indexA ][ indexB ][ indexC ][ indexD ], BASE );
	
	choiceDiv.appendChild( text );
	
	var anchor = document.createElement( 'a' );
	anchor.setAttribute( "href", hrefs[ productIndex ] );
	anchor.appendChild( anchor.appendChild( document.createTextNode(  product_names[ productIndex ] ) ) );
	choiceDiv.appendChild( anchor );
	
}


function provideOptions( level, optionList, optionA, optionB, optionC ){
	var label = document.createTextNode( 0 == level ? optionB_Title : ( 1 == level ? optionC_Title : optionD_Title) );
	var newElementSuffix = String.fromCharCode( 48 + level + 1);
	var optionSource = ( 0 == level ? optionB_options : ( 1 == level ? optionC_options : optionD_options ) );
	var node = document.createElement( 'select' );
	var divParent = document.getElementById( "div" + String.fromCharCode( 48 + level ) );
	var newDiv = document.createElement( 'div' );
	var newTable = document.createElement( 'table' );
	var tBody = document.createElement( 'TBODY' );
	var newRow = document.createElement( 'TR' );
	var newCell = document.createElement( 'TD' );

//alert( "divParent = " + level );
	newTable.setAttribute( "width", "50%" );
	newCell.setAttribute( "width", "30%" );
	
//Set label cell
	newTable.appendChild( tBody );
	tBody.appendChild( newRow );

	newRow.appendChild( newCell );
	newCell.appendChild( label );
	
	
	newCell = document.createElement( 'TD' );
//	newCell.setAttribute( "width", "50%" );
	
	var anOption = document.createElement( "OPTION" );
	var theText = document.createTextNode( "Make your choice" );
	anOption.setAttribute( "value", ""  );
	anOption.appendChild( theText );
	node.appendChild( anOption );
	
	
	for( i = 0; i < optionList.length; i++ ){
		var anOption = document.createElement( "OPTION" );
		var iIndex = parseInt( optionList.charAt( i ), BASE );
		var theText = document.createTextNode( optionSource[ iIndex ] );
		anOption.setAttribute( "value", optionList.charAt( i )  );
		anOption.appendChild( theText );
		node.appendChild( anOption );
	}

	

	var onChange = "onChange( this," + ( level + 1 ) + " );";
	newDiv.setAttribute( "id", "div" + newElementSuffix );
	newDiv.setAttribute( "name", "div" + newElementSuffix );
	node.setAttribute( "onChange", onChange );
	node.onchange = new Function( onChange );
	node.setAttribute( "id", "option" + newElementSuffix );
	node.setAttribute( "name", "option" + newElementSuffix );


	newCell.appendChild( node );
	newRow.appendChild( newCell );

	newDiv.appendChild( newTable );
//	newDiv.appendChild( node );
	divParent.appendChild( newDiv );
	
	/*
	newDiv.appendChild( label );
	newDiv.appendChild( node );
	divParent.appendChild( newDiv );
	*/
}

//function determineOptionsAtLevel( level, optionA, optionB, optionC, optionD ){
//function determineOptionsAtLevel( level, level0, option1, option2, option3 ){
function determineOptionsAtLevel( level, level0, level1, level2, level3 ){
	//var level0 = parseInt( optionA.options[ optionA.options.selectedIndex ].value, BASE ); //optionA.options.selectedIndex;
//	var level1 = -1; var level2 = -1; var level3 = -1;
	var bStart = 0; var bEnd = 0; var cStart = 0; var dStart = 0;
	var compatibleItems = "";
/*
	if( 1 <= level  ){
		if( null != optionB ){
			level1 = parseInt( optionB.options[ optionB.options.selectedIndex ].value, BASE );
		}
	}

	if( 2 <= level  ){
		if( null != optionC ){
			level2 = parseInt( optionC.options[ optionC.options.selectedIndex ].value, BASE );
		}
	}

	if( 3 <= level  ){
		if( null != optionD ){
			level3 = parseInt( optionD.options[ optionD.options.selectedIndex ].value, BASE );
 		}
	}
*/
//	alert( "Level0 = " + level0 + " Level1 = "  + level1 + ", level2 = " + level2 + ", level3 = ", level3);
	bStart = ( level1 <0 ? 0 : level1 );
	cStart = ( level2< 0 ? 0 : level2  );
	dStart = ( level3< 0 ? 0 : level3  );
	
	bEnd = ( level1 < 0?  ( option_list[ 0 ].length - 1) : bStart );
	cEnd = ( level2 < 0 ? ( option_list[ 0 ][ 0 ].length -1 ) : cStart );
	dEnd = ( level3 < 0 ? ( option_list[ 0 ][ 0 ][ 0 ].length -1) : dStart );
//	alert( " b = " + bStart + " - " + bEnd +", c = " + cStart + " - " + cEnd +",  d = " + dStart + " - " + dEnd  );
	
	for(  j  = bStart; j <= bEnd; j++ ){
		for(  k  = cStart; k <= cEnd; k++ ){
			for(  l  = dStart; l <= dEnd; l++ ){
				var thisOption = option_list[ level0 ][ j ][ k ][ l ];
				if( ( 0 == level ) && ( "" != thisOption ) ){
					var js = j.toString( BASE );
					if( compatibleItems.indexOf( js )  < 0 )
						compatibleItems += "" + js;
				}
					
				if( ( 1 == level ) && ( "" != thisOption ) ){
					var ks = k.toString( BASE );
					if( compatibleItems.indexOf( ks  )  < 0 )
						compatibleItems += "" + ks;
				}
						
				if( ( 2 == level ) && ( "" != thisOption ) ){
					var ls = l.toString( BASE );
					if( compatibleItems.indexOf( ls )  < 0 )
						compatibleItems += "" + ls;
				}
			}
		}
	}

	return compatibleItems;
}

function at(){
	return "@";
}

function getLinkFor( product ){
	var text = "";
	if( "0" == product )
		text = "<p><a href='http://www.planer.co.uk/360' >Kryo 360 1.7</a></p>" ;
	if( "1" == product )
		text = "<p><a href='http://www.planer.co.uk/360' >Kryo 360 3.3</a></p>";
	if( "2" == product )
		text = "<p><a href='http://www.planer.co.uk/360' >Kryo 360 1.7 MD</a></p>";
	if( "3" == product )
		text = "<p><a href='http://www.planer.co.uk/360' >Kryo 360 3.3 MD</a></p>";
	if( "4" == product )
		text = "<p><a href='http://www.planer.co.uk/560' >Kryo 560</a></p>";
	if( "5" == product )
		text = "<p><a href='http://www.planer.co.uk/560M' >Kryo 560 MD</a></p>";
	var newElement = document.createElement( "p" );
	newElement.innerHTML = text;
	return newElement;
}

function addFeatureList( target, options ){
	for( i = 0; i < options.length; i++ ){
		target.appendChild( getLinkFor( options.charAt( i ) ) );
	}
}

function resetForm(){
}