var jg, jg2, jg3;

function preparePage()
{
    if ( navigator.appName =="Microsoft Internet Explorer" )
    {
        document.getElementById('browser_error').style.display = '';
    }
    rampTypeChange();
    numCutsChange();
}

var numCuts = 2;
var rampType = 'none';
var masterLength = 650;
var full = -1;
var full2 = 600;


function preset(num)
{
	if(num == 1)
	{
		document.getElementById('myRampType').value = 'Halfpipe';
		document.getElementById('myRadius').value = 82;
		document.getElementById('myHeight').value = 42.5;
		document.getElementById('myFlat').value = 48;
		document.getElementById('myFlatBottom').value = 96;
		document.getElementById('myFlatHeight').value = 5.5;
		document.getElementById('myDeckLength').value = 9;
		document.getElementById('cut2').checked = true;
		numCuts = 2;
	}
	else if(num == 2)
	{
		document.getElementById('myRampType').value = 'Quarter Pipe';
		document.getElementById('myRadius').value = 82;
		document.getElementById('myHeight').value = 48;
		document.getElementById('myFlat').value = 24;
		document.getElementById('myFlatBottom').value = 77;
		document.getElementById('myCutoff').value = 1.7;
		document.getElementById('myDeckLength').value = 16;
		document.getElementById('cut2').checked = true;
		numCuts = 2;
	}
	rampTypeChange();
	drawIt();
}

function rampTypeChange()
{
	rampType = document.getElementById('myRampType').value;

	if(rampType == 'Quarter Pipe')
	{
		document.getElementById('halfpipeOption1').style.display = 'none';
		document.getElementById('halfpipeOption2').style.display = 'none';
		document.getElementById('flatTr').style.display = '';
	}
	else
	{
		document.getElementById('halfpipeOption1').style.display = '';
		document.getElementById('halfpipeOption2').style.display = '';
		document.getElementById('flatTr').style.display = 'none';
	}
}

function drawIt()
{
        jg = new jsGraphics("myCanvas");
        jg.setColor("navy"); // blue
        jg.setStroke(1);

        jg2 = new jsGraphics("myCanvas2");
        jg3 = new jsGraphics("myCanvas2");
        jg3.setColor("green");
        jg2.setColor("navy"); // blue
        jg2.setStroke(1);
        jg3.setStroke(1);
    
	jg.clear();
	jg2.clear();
	jg3.clear();
	document.getElementById('theLength').innerHTML = '';

	var rad = document.getElementById('myRadius').value;
	var height = document.getElementById('myHeight').value;
	var flat = document.getElementById('myFlat').value;
	var deckLength = document.getElementById('myDeckLength').value;
	var error = '';
	var cutInfo = '';

	if(deckLength == '' || deckLength == 'max' || deckLength == 'MAX')
	{
		deckLength = -1;
		document.getElementById('myDeckLength').value = 'max';
	}

	var height2 = height;

	if(rampType == 'Halfpipe')
	{
		var bot = document.getElementById('myFlatBottom').value;
		var flatHeight = document.getElementById('myFlatHeight').value;
		var height = 1*height + 1*flatHeight;
		var cutOff = 0;
	}
	else //qp
	{
		var bot = 0;
		var flatHeight = 0;
		var cutOff = document.getElementById('myCutoff').value;
		if(cutOff == '')
		{
			document.getElementById('myCutoff').value = 0;
			cutOff = 0;
		}
		if(cutOff > 3)
		{
			document.getElementById('myCutoff').value = 3;
			cutOff = 3;
			error = "<br /><span style=\"color:red\">Note: max cut-off height is 3 inches</span>";
		}
	}

	//x^2 + (y-flatHeight)^2 = rad^2, calculate x
	var y_coord = rad - height;
	var x_coord = rad - Math.sqrt(rad*rad - (y_coord * y_coord));
	var length_top = x_coord; //natural top length if start at (0,0)
	var totBottom = 2*flat + 2 * rad - 2 * x_coord + 1*bot;
	var qpLength = 1*rad - 1*x_coord + 1*flat;

	//alert('tot bot: ' + totBottom);

	full = masterLength * 96 / totBottom;
	var half = full/2;

	var length_dif = flat - x_coord;


	var temp0 = rad - height + 1*flatHeight;
	var P4_x = rad - Math.sqrt(rad*rad - (temp0 * temp0));
	var P4_y = height - 48;


	document.getElementById('bugTest').innerHTML = '';

	if(rampType == 'Halfpipe')
	{
		/***********************
		*** Halfpipe Preview  **
		***********************/

		var remem = half;
		half = 0;

		//left curve
		resetTemtem();
		jg.drawEllipse2(scale(length_dif), scale(-2 * rad) + half, scale(rad*2), scale(rad*2), scale(rad) + scale(length_dif) , half - scale(height));  //maxr, maxh

		//left top
		jg.drawLine(0,half - scale(height), scale(flat), half-scale(height));

		//left side

		jg.drawLine(0,half - scale(height), 0,half + scale(flatHeight));

		//bottom
		jg.drawLine(0,half+scale(flatHeight),scale(totBottom),half+scale(flatHeight));

		//right side
		jg.drawLine(scale(totBottom),half + scale(flatHeight),scale(totBottom),half-scale(height));

		//right top
		jg.drawLine(scale(totBottom),half-scale(height),scale(totBottom) - scale(flat),half-scale(height));

		//right curve
		jg.drawEllipse4(scale(length_dif) + scale(bot), scale(-2*rad) + half, scale(rad*2),scale(rad*2), scale(length_dif) + scale(bot) + scale(rad), half - scale(height));

		//flat bottom
		jg.drawLine(scale(flat) + scale(rad) - scale(x_coord), half, scale(flat) + scale(rad) - scale(x_coord) + scale(bot),half);

		document.getElementById('bugTest').innerHTML = '<div style=\"height:' + twoDec(scale(height)) + 'px\"> </div>';
		//document.getElementById('myCanvas').style.top = (-1 * (half-scale(height)) + 10) + 'px;';

		document.getElementById('theLength').innerHTML = '<br />Total Length: ' + Math.round(totBottom/12*100)/100 + ' feet <br />Total Height: ' + Math.round(height/12*100)/100 + ' feet';

		half = remem;
	}

	/***********************
	*** QP Preview        **
	***********************/
	if(rampType == 'Quarter Pipe')
	{
		var remem = half;
		half = 0;

		document.getElementById('bugTest').innerHTML = '<div style=\"height:' + twoDec(scale(height)) + 'px;\"> </div>';


		//left curve
		resetTemtem();
		jg.drawEllipse2(scale(length_dif), scale(-2 * rad) + half, scale(rad*2), scale(rad*2), scale(rad) + scale(length_dif) , half - scale(height));  //maxr, maxh

		//left top
		jg.drawLine(0,half - scale(height), scale(flat), half-scale(height));

		//left side
		jg.drawLine(0,half - scale(height), 0,half + scale(flatHeight));

		//bottom
		jg.drawLine(0,half,scale(qpLength),half);

		half = remem;

		document.getElementById('theLength').innerHTML = '<br />Total Length: ' + twoDec((1*rad-1*P4_x+1*flat)/12) + ' feet <br />Total Height: ' + twoDec(height/12) + ' feet';
	}


	/************************
	*** Calculate Distance **
	************************/
	var dCut,dCuts;

	var P9_y = P4_y;
	temp0 = 1*P9_y + 1*rad + 1*flatHeight;
	temp1 = rad*rad - temp0*temp0;
	if(temp1 < 0)
	{
		var P9_x = -1;
	}
	else
	{
		temp2 = Math.sqrt(temp1);
		var P9_x = temp2 - 1*rad + 96;
	}
	//jg2.drawEllipse(scale2(P4_x),scale2(-1*P4_y),4,4);

	var P5_x = 1*rad;
	var P5_y = flatHeight - 48;

	if(flatHeight == 0 && cutOff > 0)
	{
		P5_y = cutOff - 48;
		temp0 = 1*P5_y - 1*rad + 48 - 1*flatHeight;
		temp1 = rad*rad - temp0*temp0;
		if(temp1 < 0)
			alert('no p10');
		temp2 = Math.sqrt(temp1);
		P5_x = -1*temp2 + 1*rad;

		//jg2.drawEllipse(scale2(P5_x),scale2(-1*P5_y),4,4);


	}

	var P8_x = 96 - rad;
	var P8_y = -1*flatHeight;
	var horD = false;

	if(P4_y >= P8_y)
	{
		horD = true;

		//normal intersection (extend bottom to intersect P6)
		//right curve is (x - 2h + r)^2 + (y + r + f)^2 = r^2, know y
		var temp0 = 1*P5_y + 1*flatHeight + 1*rad;
		var temp1 = rad*rad - temp0*temp0;
		temp1 = Math.sqrt(temp1);
		var P6_x = 1*temp1 - 1*rad + 96;

		//if(P6_x > P5_x)
		//{
			dCut = 1*P6_x - P5_x;
			cutInfo += '<br />Distance between cuts (bottom to curve): ' + Math.round((dCut)*100)/100 + ' inches';
		//}

	}
	else if(P4_x > P8_x)
	{
		//use vertial distance from P4 to curve above at P7
		//right curve is (x - 2h + r)^2 + (y + r + f)^2 = r^2, know x
		var temp0 = P4_x - 96 + 1*rad;
		var temp1 = rad*rad - temp0*temp0;
		temp2 = Math.sqrt(temp1);
		var P7_y = 1*temp2 - 1*rad - 1*flatHeight;
		var P7_x = P4_x;
		//if(P7_y > P4_y)
		//{
			dCut = 1*P7_y - P4_y;
			cutInfo += '<br />Distance between cuts (vertical no squeeze): ' + Math.round(dCut*100)/100 + ' inches';
		//}

	}
	else
	{
		var d1 = P4_x - P8_x;
		var d2 = P4_y - P8_y;
		var d = Math.sqrt(d1*d1 + d2*d2);
		cutInfo += '<br />Distance between cuts (diag, coping to other bot): ' + Math.round(d*100)/100 + ' inches';
	}


	/***********************
	*** Plywood Cut       **
	***********************/
	var half2 = full2/2;

	jg2.drawRect(0,0,full2,half2);

	/************************
	*** Calculate Max Deck **
	************************/
	if(numCuts == 2)
	{
		var squeeze = 99999;

		if(48-height >= 0)
		{
			//horizontal line from coping hits other curve, max squeeze is this distance or most bottom can go

			if(horD)
			{
				//flatHeight to curve
				squeeze = (1*P6_x - P5_x) / 2;
				cutInfo += '<br />squeeze (flat to curve): ' + twoDec(squeeze);
			}
			else if(P9_x > 0)
			{
				squeeze = (1*P9_x - 1*P4_x) / 2;
				cutInfo += '<br />squeeze (coping to curve): ' + twoDec(squeeze);
			}

			//bottom to far right
			var s2 = 96 - 1*P5_x;

			if(squeeze > s2)
			{
				squeeze = s2;
				cutInfo += '<br />squeeze (bottom to wall): ' + twoDec(squeeze);
			}
		}
		else
		{
			cutInfo += '<br /> <span style=\"color:red\">Note: preview not complete for ramps over 4 feet!</span> ';
			squeeze = 0;
		}
		var max_deck_length = P4_x + squeeze;
	}
	else if(numCuts == 1)
	{
		var max_deck_length = 96 - 1*P5_x + 1*P4_x;
		squeeze = 96 - 1*P5_x;
	}


	document.getElementById('deckLengthInfo').innerHTML = ' ( 0 to ' + twoDec(max_deck_length) + ' is valid )';

	if(deckLength == -1) //do max
	{
		if(max_deck_length > flat)
		{
			//dont need max deck length
			squeeze = flat - P4_x;
			error += '<br />Note: Deck length limited by Plathform Length';
		}
	}
	else if(P4_x + squeeze > deckLength)
	{
		//dont need max deck length
		squeeze = deckLength - P4_x;
		cutInfo += '<br />(limited by deck length): ' + twoDec(squeeze);
	}
	else if(deckLength > max_deck_length)
	{
		error += '<br /><span style=\"color:red\">Error: Max deck length is ' + twoDec(max_deck_length) + ' inches</span>';
		document.getElementById('myDeckLength').value = 'max';
	}

	if(48 - height < 0)
	{
		//can't draw on one piece
		if(height > 52)
			height = 52;
	}
	else
	{
		//left cut top
		jg2.drawLine(0,(half2-scale2(height)),scale2(P4_x)+scale2(squeeze),(half2-scale2(height)));

		//right cut bottom
		if(numCuts == 2)
			jg2.drawLine(full2 - scale2(P4_x) - scale2(squeeze),scale2(height),full2,scale2(height));
	}

	//left cut (center is P2)
	//p5_x instead of rad if cutoff for QP
	if(cutOff > 0)
	{
		noTemtem();
	}
	else
	{
		//alert('reset');
		resetTemtem();
	}
	//left cut
	jg2.drawEllipse2(scale2(squeeze),-2 * scale2(rad) + half2 - scale2(flatHeight),scale2(rad)*2,scale2(rad)*2,scale2(P5_x) + scale2(squeeze),half2-scale2(height));

	//right cut
	if(numCuts == 2)
	{
		naturalHalf = false;
		jg2.drawEllipse3(-2*scale2(rad) + full2 - scale2(squeeze) ,scale2(flatHeight),	scale2(rad)*2,scale2(rad)*2,full2 - scale2(P5_x) - scale2(squeeze), scale2(height));  //... max_left, min_height
	}


	if(flatHeight > 0)
	{
		jg2.drawLine(scale2(rad) + scale2(squeeze),half2 - scale2(flatHeight),scale2(rad) + scale2(squeeze),half2);
		if(numCuts == 2)
			jg2.drawLine(full2 - scale2(rad) - scale2(squeeze), 0, full2 - scale2(rad) - scale2(squeeze), scale2(flatHeight));
	}
	else if(cutOff > 0)
	{
		jg2.drawLine(scale2(P5_x) + scale2(squeeze),scale2(-1*P5_y),scale2(P5_x) + scale2(squeeze),half2);
		if(numCuts == 2)
			jg2.drawLine(full2 - scale2(P5_x) - scale2(squeeze), 0, full2 - scale2(P5_x) - scale2(squeeze), scale2(cutOff));
	}



	var finalDistance = 'negative!';
	var distanceString = '';

	if(max_deck_length >= 0)
	{
		if(numCuts == 2 && height > 24)
		{
			finalDistance = twoDec(2*max_deck_length - 2*P4_x - 2*squeeze);
			distanceString = '<br />Distance between cuts (horizontal): ' + twoDec(finalDistance) + ' inches';
		}
		distanceString += '<br />Deck Length: ' + twoDec(1*P4_x + 1*squeeze) + ' inches';
	}
	else
	{
		if(numCuts == 1)
		{
			error = '<br /><span style=\"color:red\">Error: Cut does not fit!</span>' + error;
		}
		if(numCuts == 2)
		{
			error = '<br /><span style=\"color:red\">Error: Cuts do not fit!</span>' + error;
		}
	}




	var extra = '';
	if(cutOff > 0)
	{
		var before = 1*rad - 1*P4_x;
		var extra = ' (without cut-off: ' + twoDec(before) + ' inches)';
	}


	if(48 - height < 0)
	{
		//can't draw
		document.getElementById('deckLengthInfo').innerHTML = '';
		document.getElementById('info2').innerHTML = '<br /><span style=\"color:red\">Plywood cut specs not yet avaliable for ramps over 4 feet</span>';
	}
	else
	{
		x5 = 1*rad + 1*squeeze;
		y5 = 48-flatHeight;

		distanceString += '<br />Transition Starting Point: ( ' + twoDec(x5) + ' in, ' + twoDec(flatHeight) + ' in ) ';
		distanceString += '<span class=\"jsLink\" onclick=\"drawPoint(x5,y5)\">show</span>';

		document.getElementById('info2').innerHTML =  error + '<br>length of curve: ' + twoDec(1*P5_x - 1*P4_x) + ' inches' + extra + distanceString;
	}

	jg.paint();
	jg2.paint();
}

var x5,y5;

function scale(num)
{
	return num*full/96;
}

function scale2(num)
{
	return num*full2/96;
}

function twoDec(num)
{
	return Math.round(num*100)/100;
}

function numCutsChange()
{
	if(document.getElementById('cut1').checked)
		numCuts = 1;
	else
		numCuts = 2;

	document.getElementById('deckLengthInfo').innerHTML = '';
	//drawIt();
}

function myCutoffChange()
{
	document.getElementById('deckLengthInfo').innerHTML = '';
}

function drawPoint(a,b)
{
	//alert(a + ',' + b);
	jg3.fillEllipse(scale2(a)-4,scale2(b)-4,8,8);
	jg3.paint();
}