// calculate square shape
function calculateSquare( width, length )
{
	return width * length;
}

// calculate circle shape
function calculateCircle( diameter )
{
	return (diameter * .8) * diameter;
}

// calculate oval shape
function calculateOval( width, length )
{
	return (length * .8) * width;
}

// calculate triangle shape
function calculateTriangle( base, height )
{
	return (base * .5) * height;
}

// calculate variable shape
function calculateVariable( widths, length )
{
	var	sum = 0;
	
	for( var i = 0; i < widths.length; i++ )
		sum += parseFloat( widths[i] );

	return (sum / widths.length) * length;
}

// displays the selector code
function displaySelector( parent, index )
{
	if ( document.getElementById( parent ) )
	{
		str	= '<label class="float">Select Shape:</label>';
		str += '<select class="shapeselect" name="shape' + index + '" id="shape' + index + '" onchange="display( ' + index + ', this.options[this.selectedIndex].value );">';
		str += '	<option value="">Please select...</option>';
		str += '	<option value="square">Square</option>';
		str += '	<option value="circle">Circle</option>';
		str += '	<option value="oval">Oval</option>';
		str += '	<option value="triangle">Triangle</option>';
		str += '	<option value="variable">Unsual Shape</option>';
		str += '</select>';
		str += '<div class="standardshape" id="standard_shape' + index + '" style="display:none">';
		str += '	<label>Width</label>';
		str += '	<input class="width" type="text" name="width' + index + '" id="width' + index + '" value="" />';
		str += '	<label>Length</label>';
		str += '	<input class="length" type="text" name="length' + index + '" id="length' + index + '" value="" />';
		str += '	<button type="button" onclick="calculate( ' + index + ' )">Calculate</button>';
		str += '</div>';
		str += '<div class="circleshape" id="circle_shape' + index + '" style="display:none">';
		str += '	<label>Diameter</label>';
		str += '	<input class="diameter " type="text" name="diameter' + index + '" id="diameter' + index + '" value="" />';
		str += '	<button class="calculate" type="button" onclick="calculate( ' + index + ' )">Calculate</button>';
		str += '</div>';
		str += '<div class="triangleshape" id="triangle_shape' + index + '" style="display:none">';
		str += '	<label>Base</label>';
		str += '	<input class="base" type="text" name="base' + index + '" id="base' + index + '" value="" />';
		str += '	<label>Height</label>';
		str += '	<input class="height" type="text" name="height' + index + '" id="height' + index + '" value="" />';
		str += '	<button class="calculate" type="button" onclick="calculate( ' + index + ' )">Calculate</button>';
		str += '</div>';
		str += '<div class="variableshape" id="variable_shape' + index + '" style="display:none">';
		str += '	<label>Enter number of widths:</label>';
		str += '	<input class="numberwidths" type="text" name="number_widths' + index + '" id="number_widths' + index + '" value="" />';
		str += '	<button class="displaywidths" type="button" onclick="displayWidths( ' + index + ', document.getElementById( \'number_widths' + index + '\' ).value )">Display Widths</button>';
		str += '	<div id="widths_display' + index + '"></div>';
		str += '</div>';
		str += '<div class="totaldiv" id="total_div' + index + '" style="display:none">';
		str += '	<button type="button" class="add" id="add' + index + '" onclick="displaySelector( \'' + parent + '\', ' + (index + 1) + ' );">Add Another</button>';
		str += '	<label>Total</label><input class="total" type="text" name="total' + index + '" id="total' + index + '" value="" />m<sup>2</sup>';
		str += '</div>';
		
		if ( index > 0 )
		{
			str += '<div>';
		//	str += '	<button type="button" class="remove" onclick="removeSelector( \'' + parent + '\', ' + index + ' );">Remove</button>';
			str += '	<button type="button" id="reset' + index + '" class="reset" onclick="resetAll( \'' + parent + '\', ' + index + ' );">Reset</button>';
			str += '</div>';
			
			document.getElementById( 'add' + (index - 1) ).style.display = 'none';
			
			if ( document.getElementById( 'reset' + (index - 1) ) )
				document.getElementById( 'reset' + (index - 1) ).style.display = 'none';
		}
		
		placeholder = document.createElement( 'div' );
		placeholder.setAttribute( 'id', 'placeholder_' + index );
		placeholder.setAttribute( 'name', 'placeholder_' + index );
		placeholder.setAttribute( 'class', 'selectorplaceholder' );
		placeholder.innerHTML = str;
		
		document.getElementById( parent ).appendChild( placeholder );
	}
}

// removes a selector
function removeSelector( parent, index )
{
	document.getElementById( parent ).removeChild( document.getElementById( 'placeholder_' + index ) );
	document.getElementById( 'add' + (index - 1) ).style.display = 'inline';
}

function resetAll( parent, index )
{
	for( var i = 0; i < index; i++ )
		if ( document.getElementById( 'placeholder_' + i ) )
			document.getElementById( parent ).removeChild( document.getElementById( 'placeholder_' + i ) );
}

// displays the required form for entering shape details
function display( index, type )
{
	switch( type )
	{
		case 'square':
		case 'oval':
			document.getElementById( 'standard_shape' + index ).style.display	= 'block';
			document.getElementById( 'circle_shape' + index ).style.display		= 'none';
			document.getElementById( 'triangle_shape' + index ).style.display	= 'none';
			document.getElementById( 'variable_shape' + index ).style.display	= 'none';
			document.getElementById( 'total_div' + index ).style.display		= 'block';
			break;
			
		case 'circle':
			document.getElementById( 'standard_shape' + index ).style.display	= 'none';
			document.getElementById( 'circle_shape' + index ).style.display		= 'block';
			document.getElementById( 'triangle_shape' + index ).style.display	= 'none';
			document.getElementById( 'variable_shape' + index ).style.display	= 'none';
			document.getElementById( 'total_div' + index ).style.display		= 'block';
			break;
			
		case 'triangle':
			document.getElementById( 'standard_shape' + index ).style.display	= 'none';
			document.getElementById( 'circle_shape' + index ).style.display		= 'none';
			document.getElementById( 'triangle_shape' + index ).style.display	= 'block';
			document.getElementById( 'variable_shape' + index ).style.display	= 'none';
			document.getElementById( 'total_div' + index ).style.display		= 'block';
			break;
			
		case 'variable':
			document.getElementById( 'standard_shape' + index ).style.display	= 'none';
			document.getElementById( 'circle_shape' + index ).style.display		= 'none';
			document.getElementById( 'triangle_shape' + index ).style.display	= 'none';
			document.getElementById( 'variable_shape' + index ).style.display	= 'block';
			document.getElementById( 'total_div' + index ).style.display		= 'block';
			break;
			
		default:
			document.getElementById( 'standard_shape' + index ).style.display	= 'none';
			document.getElementById( 'circle_shape' + index ).style.display		= 'none';
			document.getElementById( 'triangle_shape' + index ).style.display	= 'none';
			document.getElementById( 'variable_shape' + index ).style.display	= 'none';
			document.getElementById( 'total_div' + index ).style.display		= 'none';
			break;
	}
	
	document.getElementById( 'width' + index ).value	= '';
	document.getElementById( 'length' + index ).value	= '';
	document.getElementById( 'base' + index ).value		= '';
	document.getElementById( 'height' + index ).value	= '';
	document.getElementById( 'diameter' + index ).value	= '';
	document.getElementById( 'total' + index ).value	= '';
}

// display the list of widths
function displayWidths( index, num )
{
	var	str = '';
	
	for( var i = 0; i < num; i++ )
		str += '<label>Width ' + (i + 1) + '</label><input type="text" class="widths" name="widths' + index + '" value="" />';
	
	str += '<label>Length</label><input type="text" class="variablelength" name="variable_length' + index + '" id="variable_length' + index + '" value="" />';
	str += '<button type="button" class="calculate" onclick="calculate( ' + index + ' )">Calculate</button>';
	
	document.getElementById( 'widths_display' + index ).innerHTML = str;
}

// calculate the turf amount
function calculate( index )
{
	var	total	= 0,
		list	= new Array;
	
	switch( document.getElementById( 'shape' + index ).options[ document.getElementById( 'shape' + index ).selectedIndex ].value )
	{
		case 'square':
			total = calculateSquare( document.getElementById( 'width' + index ).value, document.getElementById( 'length' + index ).value );
			break;
			
		case 'circle':
			total = calculateCircle( document.getElementById( 'diameter' + index ).value );
			break;
			
		case 'oval':
			total = calculateOval( document.getElementById( 'width' + index ).value, document.getElementById( 'length' + index ).value );
			break;
			
		case 'triangle':
			total = calculateTriangle( document.getElementById( 'base' + index ).value, document.getElementById( 'height' + index ).value );
			break;
			
		case 'variable':
			objs = document.getElementsByTagName( 'input' );
			
			for( var i = 0; i < objs.length; i++ )
				if ( objs.item(i).getAttribute( 'name' ) == 'widths' + index )
					list.push( objs.item(i).value );
			
			total = calculateVariable( list, document.getElementById( 'variable_length' + index ).value );
			break;
	}
	
	document.getElementById( 'total' + index ).value = fix( total, 2 );
}

// fixes decimal points to a certain precision
function fix( num, places )
{
	cordec = Math.pow( 10, places );
	return Math.round( parseFloat( num ) * cordec ) / cordec;
}