var landscape_feet_per_bag = 1;
var playground_feet_per_bag = 1;

var bags_per_pallet = 72;

function changeShape()
{
	var shape = document.getElementById('shape');
	var width_content = document.getElementById('width_content');
	var height_content = document.getElementById('height_content');
	var area_image = document.getElementById('area_image');
	
	var shape_name = shape.options[shape.selectedIndex].value;

	switch (shape_name) {
	
		case 'rectangle':
			width_content.innerHTML = 'Width: <input name="width" id="width" value="" size="5" onChange="calcArea();calculateBags();" />';
			height_content.innerHTML = 'Height: <input name="height" id="height" value="" size="5"  onChange="calcArea();calculateBags();"/>';
			area_image.innerHTML = '<img src="images/square.gif" width="88" height="60" alt="" />';
			break;
		case 'triangle':
			width_content.innerHTML = 'Width: <input name="width" id="width" value="" size="5" onChange="calcArea();calculateBags();" />';
			height_content.innerHTML = 'Height: <input name="height" id="height" value="" size="5" onChange="calcArea();calculateBags();" />';
			area_image.innerHTML = '<img src="images/triangle.gif" width="88" height="60" alt="" />';
			break;
		case 'circle':
			width_content.innerHTML = 'Diameter: <input name="diameter" id="diameter" value="" size="5" onChange="calcArea();calculateBags();" />';
			height_content.innerHTML = '';
			area_image.innerHTML = '<img src="images/circle.gif" width="88" height="60" alt="" />';
			break;
		default:
			alert('nothing happened');
	}
}

function calcArea()
{
	var shape = document.getElementById('shape');
	var total_square_feet = document.getElementById('total_square_feet');

	var shape_name = shape.options[shape.selectedIndex].value;

	if (shape_name == 'rectangle' || shape_name == 'triangle') {
	
		var width = document.getElementById('width');
		var height = document.getElementById('height');
		
		// non-integers are entered for calculations - no good
		if ((isNaN(width.value) && width.value != '')
			|| (isNaN(height.value) && height.value != '')) {
			document.getElementById('message').innerHTML = '<b>Only use integers when calcualting area.</b>';
			total_square_feet.value = '';

		// do we have the number we need?
		} else if (!isNaN(width.value) && !isNaN(height.value)) {
		
			// rectangle
			if (shape_name == 'rectangle') {
				total_square_feet.value = Math.ceil(width.value * height.value);
			} else if (shape_name == 'triangle') {
				total_square_feet.value = Math.ceil(width.value * height.value / 2);
			}
		}
	} else if (shape_name == 'circle') {
	
		var diameter = document.getElementById('diameter');
		
		// non-integers are entered for calculations - no good
		if (isNaN(diameter.value) && diameter.value != '') {
			document.getElementById('message').innerHTML = '<b>Only use integers when calcualting area.</b>';
			total_square_feet.value = '';
			
		// do we have the number we need?
		} else if (!isNaN(diameter.value)) {
			total_square_feet.value = Math.ceil(Math.PI * Math.pow((diameter.value / 2), 2));
		}
	}
}

function clearAreaCalc()
{
	var shape = document.getElementById('shape');
	var shape_name = shape.options[shape.selectedIndex].value;

	if (shape_name == 'rectangle' || shape_name == 'triangle') {
	
		var width = document.getElementById('width');
		var height = document.getElementById('height');
		
		width.value = '';
		height.value = '';
	} else if (shape_name == 'circle') {

		var diameter = document.getElementById('diameter');
		diameter.value = '';
	}
}

function changeDepth()
{
	var application = document.getElementById('application');
	var application_name = application.options[application.selectedIndex].value;
	var depth = document.getElementById('depth');
	
	// delete current options
	depth.options.length = 0;
	
	// add landscape options
	if (application_name == 'landscape') {
	
		depth.options[0] = new Option('2','2');
		depth.options[1] = new Option('3','3');
	
	// add playground options
	} else if (application_name == 'playground') {
	
		depth.options[0] = new Option('4','4');
		depth.options[1] = new Option('5','5');
		depth.options[2] = new Option('6','6');
	}
}

function calculateBags()
{
	var total_square_feet = document.getElementById('total_square_feet');
	var depth = document.getElementById('depth');
	var depth_value = depth.options[depth.selectedIndex].value;
	var application = document.getElementById('application');
	var application_name = application.options[application.selectedIndex].value;
	var bags_display = document.getElementById('bags_display');
	var pallets_display = document.getElementById('pallets_display');

	// do we have the numbers we need?
	if (!isNaN(total_square_feet.value) && !isNaN(depth_value)) {

		var cubic_feet = total_square_feet.value * (depth_value / 12);
		
		// calulcate number of bags
		var bags = 0;
		if (application_name == 'landscape') {
		
			bags = Math.ceil(cubic_feet / landscape_feet_per_bag);
			
		} else if (application_name == 'playground') {
		
			bags = Math.ceil(cubic_feet / playground_feet_per_bag);
		}
		//bags_display.innerHTML = '<b>' + bags + '</b>';
		
		// calculate number of pallets
		var pallets = Math.ceil(bags / bags_per_pallet);
		pallets_display.innerHTML = '<b>' + pallets + '</b>';
	}
}