//draw_pipe.js
//functions to draw pipe section in canvas 
//and other functions to write text on canvas-actually on div but
//will appear on top of canvas

function paintWaterLevel(pipedia,depth,scale,canvasname,cx,cy)
{
	//remove old text and canvas
	wipeCanvasClean(canvasname);

	//Paints water flow section in a canvas
	var canvas = document.getElementById(canvasname);
	 var ctx = canvas.getContext("2d");

	 ctx.fillStyle = "rgb(200,0,0)";
	// ctx.fillRect (10, 10, 55, 50);

	 ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
	//One filled arc
	ctx.beginPath();
	var D=pipedia*scale; //pipe dia
	var y=depth*scale; //depth
	var A=Math.asin(2*(D/2-y)/D);	//start angle
	var B=Math.PI-A;		//end angle

	ctx.arc(cx,cy,D,A,B,0);
	ctx.fill();

	var g=canvas.getContext("2d");
	g.beginPath();
	g.fillStyle = "rgba(200,0, 0, 0.5)";
	g.arc(cx,cy,D,0,2*Math.PI,0);

	//draw vertical line
	g.moveTo(cx+D,cy+D);	
	g.lineTo(cx+D+50,cy+D);	//horz tick mark
	g.lineTo(cx+D+50,(cy+D-2*y));	//vertical bar
	g.lineTo(cx+D+50-10,(cy+D-2*y));	//horz tick mark
	g.stroke();

	//lets draw radial TEST
	g.moveTo(cx,cy); //center
	g.lineTo(D*Math.cos(A)+cx,D*Math.sin(A)+cy);	//right
	g.moveTo(cx,cy); //center
	g.lineTo(-D*Math.cos(A)+cx,D*Math.sin(A)+cy);	//left
	g.stroke();

	//lets write depth
	var inchdepth=String(eval(depth*12).toFixed(2));
	makediv(cx+D+50+5,cy+D-2*y,inchdepth);

	//lets write center angle
	var angle=String(((B-A)*180/Math.PI).toFixed(2))+'°';
	makediv(cx-10,cy+10,angle);

}

function wipeCanvasClean(canvasname)
{
	//NOT USED
	var canvas = document.getElementById(canvasname);
	 var g = canvas.getContext("2d");
	g.clearRect(0,0,500,500);

	//remove div texts
	//using jquery
	$('#myDiv div').remove();
}

/*
//FUNCTION TO WRITE DIV TEXT ELEMENT 
//SO THAT IT CAN BE OVERLAID ON TOP OF CANVAS ELEMENT
//CANVAS ELEMENT HAS NO GOOD WAY TO PUT TEXT ONTO
//BS 2008
*/

function makediv(x,y,seedtext){
	//Creates div element inside the div element "myDiv"
	//x,y is relative position inside the div element
	//seedtext is the text string to be written
	//FIRST LETS try to create a div element
	//alert("making div...");
	//var b=document.getElementsByTagName("body")[0];
	var b=document.getElementById("myDiv");
	var d=document.createElement("div");
	//d.setAttribute("style","color:#FF0000; position:absolute; TOP:"+y+"px; LEFT:"+x+"px; border: #000000 1px dashed; height:100px; width:100px;");//dashed border
	d.setAttribute("style","color:#FF0000; position:absolute; TOP:"+y+"px; LEFT:"+x+"px; height:100px; width:100px;"); //no dashed border
	var t=document.createTextNode(seedtext);
	d.appendChild(t);
	b.appendChild(d);
}