var RAD=Math.PI/180;function Setup(){DrawRoof();DrawRafter();DrawHip();DrawHipDetail();SetInput()}var lineWidth=3;
function DrawRoof(){var a=document.getElementById("cnvsRoof");if(a.getContext){var c=roofData.split(","),h=parseFloat(c[0]),j=parseFloat(c[1]);if(!(j>h)){var k=parseFloat(c[2]),u=parseFloat(c[3]),d=parseFloat(c[4]),f=parseFloat(c[5]),n=parseFloat(c[6]),i=parseFloat(c[7]),e=parseFloat(c[8]),o=parseFloat(c[9]),p=parseFloat(c[10]),s=parseFloat(c[11]),m=parseFloat(c[12]),l=parseFloat(c[13]),r=parseFloat(c[14]),v=parseFloat(c[15]);parseFloat(c[16]);var w=parseFloat(c[17]),z=parseFloat(c[18]);c=parseFloat(c[19]);
var y=h+v*2;j=j+v*2;var g=310*(y/j),q=g/y,b=a.getContext("2d");a.setAttribute("height",g+44);a.setAttribute("width",311);b.translate(310,0);b.rotate(90*RAD);b.fillStyle="#f8f8ff";b.strokeStyle="#000";b.fillRect(0,0,g,310);b.strokeRect(0,0,g,309);if(v>0){a=v*q;b.save();b.fillStyle="#f5f5dc";b.strokeStyle="#c0c0c0";b.shadowOffsetY=4;b.shadowBlur=4;b.shadowColor="#c0c0c0";b.fillRect(a,a,g-a*2,310-a*2);b.restore();b.strokeRect(a,a,g-a*2,310-a*2)}b.lineWidth=lineWidth;b.strokeStyle="#ffa500";b.beginPath();
b.moveTo(0,0);b.lineTo(155,155);b.moveTo(0,310);b.lineTo(155,155);b.moveTo(g,0);b.lineTo(g-155,155);b.moveTo(g,310);b.lineTo(g-155,155);b.stroke();b.beginPath();b.strokeStyle=c==0?"#7cfc00":"#000";b.moveTo(0,155);b.lineTo(155,155);b.moveTo(g-155,155);b.lineTo(g,155);b.stroke();b.strokeStyle="#7cfc00";b.beginPath();b.moveTo(155,0);b.lineTo(155,310);b.moveTo(g-155,0);b.lineTo(g-155,310);a=p*q;var t=155;m=m-2;if(s>0){t+=s*q;b.moveTo(t,310);b.lineTo(t,155);m--}for(q=0;q<m;q++){t+=a;b.moveTo(t,310);b.lineTo(t,
155)}b.stroke();b.strokeStyle="#4682b4";b.lineWidth=lineWidth*(i/e);b.beginPath();b.moveTo(155-lineWidth/2,155);b.lineTo(g-155+lineWidth/2,155);b.stroke();b.lineWidth=lineWidth;m=10;b.font=m+"px Verdana";b.textBaseline="top";if(l>50){b.strokeStyle="#f00";r=r;q=g-155+a;t=155+a;var A=q,B=t;b.fillStyle="#000";for(b.beginPath();q<g&&r>50;){b.moveTo(q,310);b.lineTo(q,t);b.moveTo(q,t);b.lineTo(g,t);b.fillText(ConEng(r,true),q+lineWidth/2,t-lineWidth/2-m);r-=l;q+=a;t=310-(g-q)}b.stroke();b.beginPath();b.strokeStyle=
"#ffa500";b.moveTo(A-10,B-10);b.lineTo(q,t);b.stroke()}m=12;b.font=m+"px Verdana";b.strokeStyle="#000";b.lineWidth=1;b.beginPath();b.moveTo(0,310);b.arc(0,310,120,0,315*RAD,true);b.moveTo(100,210);b.lineTo(0,310);b.stroke();b.fillStyle="#000";l=m+4;b.fillText("Hip "+ConEng(d,true),77.5+lineWidth,77.5-m);d="Rafters "+ConEng(f,true)+" \u00d7 "+o+" \u00d7 "+e;e=b.measureText(d).width;b.fillText(d,g/2-e/2,155-lineWidth/2-l*3);d=s==0?"Adjusted Rafter Spacing "+ConEng(p,true):"Rafter Spacing "+ConEng(p,
true)+" (2 ends = "+ConEng(s,true)+")";p=155-lineWidth/2;e=b.measureText(d).width;b.fillText(d,g/2-e/2,p-l*2);d="Ridge "+ConEng(u,true)+" long \u00d7 "+ConEng(i,true)+" thick";e=b.measureText(d).width;b.fillText(d,g/2-e/2,p-l);d="Roof area "+w+" ft\u00b2";e=b.measureText(d).width;b.fillText(d,g-77.5-e/2,2);d="Rafter "+ConEng(f,true);b.fillText(d,g-155+lineWidth,77.5);if(v>0){d="Roof Length "+ConEng(y,true);b.fillText(d,4,155+l*2);d="Roof Width "+ConEng(j,true);b.fillText(d,4,155+l*3);d="Overhang (level) "+
ConEng(v,true);b.fillText(d,40,2)}d="Wall Length "+ConEng(h,true);e=b.measureText(d).width;b.fillText(d,g/2-e/2,0);d="Angle "+n+" \u00b0";e=b.measureText(d).width;b.fillText(d,g/2-e/2,l);d="Overall Rise From Wall "+ConEng(k,true);e=b.measureText(d).width;b.fillText(d,g/2-e/2,l*2);b.fillText("Sheathing",40,310-l*2);b.fillText(z+"\u00b0",40,310-l);c>0&&b.fillText("End Jacks "+ConEng(c,true),4,155-l)}}}
function DrawRafter(){var a=document.getElementById("cnvsRafter");if(a.getContext){var c=rafterData.split(","),h=parseFloat(c[0]),j=parseFloat(c[1]),k=parseFloat(c[2]),u=parseFloat(c[3]),d=c[4]=="1",f=parseFloat(c[5]),n=c[6];c=a.width;var i=a.height-20;a=a.getContext("2d");a.font="12px Verdana";a.textBaseline="top";a.fillStyle="#7cfc00";a.strokeStyle="#000";var e=i/Math.tan(k*RAD),o=d?e:0;a.beginPath();a.moveTo(o,0);a.lineTo(c,0);a.lineTo(c-e,i);var p,s;d=false;if(f>0){var m=h/i;s=f/m;p=150-e;var l=
s*Math.sin((90-k)*RAD),r=p+l/Math.tan(k*RAD),v=i-l,w=r+s*Math.cos((90-k)*RAD);s=f*Math.tan((90-k)*RAD);a.lineTo(w,i);a.lineTo(r,v);a.lineTo(150,0);a.lineTo(p,i);a.lineTo(0,i);if(h/m/l<2.9)d=true}else a.lineTo(0,i);a.lineTo(o,0);a.save();a.shadowOffsetY=4;a.shadowBlur=4;a.shadowColor="#c0c0c0";a.fill();a.restore();a.stroke();a.fillStyle="#000";if(f>0){a.fillText(ConEng(n,true),152,2);a.fillText(ConEng(s,false),150-e-20,i-20);a.fillText(ConEng(Math.sqrt(Math.pow(s,2)+Math.pow(f,2)),false),p+10,i)}j=
"Setback "+ConEng(j,false);f=a.measureText(j).width;a.fillText(j,c-f-2,i+4);j=k+" \u00b0";f=a.measureText(j).width;a.fillText(j,c-f-10,2);a.fillText("Rafter "+ConEng(u,true),2,2);a.fillText("Rafter depth "+ConEng(h,false),c*0.6,i/2-10);if(d){a.fillStyle="red";a.fillText("Birdsmouth is Deep !",p+40,i)}}}
function DrawHip(){var a=document.getElementById("cnvsHip");if(a.getContext){var c=hipData.split(","),h=parseFloat(c[0]),j=parseFloat(c[1]),k=parseFloat(c[2]),u=c[3],d=c[4]=="1",f=parseFloat(c[5]),n=c[6],i=parseFloat(c[7]);c=90-k;var e=a.width,o=a.height-20;a=a.getContext("2d");a.font="12px Verdana";a.textBaseline="top";a.fillStyle="#ffa500";a.strokeStyle="#000";var p=o/Math.tan(k*RAD),s=d?p:0;a.beginPath();a.moveTo(s,0);a.lineTo(e,0);a.lineTo(e-p,o);var m,l,r;d=false;if(i>0||f>0){f=Math.sqrt(f*f+
f*f);var v=h/o;m=120-p;var w=f/v*Math.sin(c*RAD);if(i>0)w+=i/Math.cos(c*RAD)/v;var z=m+w/Math.tan(k*RAD),y=o-w,g=z+w/Math.tan(c*RAD);r=f*Math.sin(c*RAD);r+=i*Math.cos(c*RAD);l=r/Math.cos(c*RAD);r=r/Math.sin(c*RAD);a.lineTo(g,o);a.lineTo(z,y);a.lineTo(120,0);a.lineTo(m,o);a.lineTo(0,o);if(h/v/w<2.9)d=true}else a.lineTo(0,o);a.lineTo(s,0);a.save();a.shadowOffsetY=4;a.shadowBlur=4;a.shadowColor="#c0c0c0";a.fill();a.restore();a.stroke();a.fillStyle="#000";if(i>0||f>0){a.fillText(ConEng(n,true),122,2);
a.fillText(ConEng(l,false),120-p-20,o-20);a.fillText(ConEng(Math.sqrt(Math.pow(l,2)+Math.pow(r,2)),false),m+10,o)}j="Setback "+ConEng(j,false);f=a.measureText(j).width;a.fillText(j,e-f-2,o+4);j=k+" \u00b0";f=a.measureText(j).width;a.fillText(j,e-f-10,2);a.fillText("Hip "+ConEng(u,true),2,2);a.fillText("Hip Depth "+ConEng(h,false),e*0.6,o/2-10);a.fillText("Hip Angle "+c.toFixed(1),e*0.6,o/2+8);if(d){a.fillStyle="#f00";a.fillText("Birdsmouth is Deep !",m+40,o)}}}
function DrawHipDetail(){var a=document.getElementById("cnvsHipDetail");if(a.getContext){var c=hipDetailData.split(","),h=parseFloat(c[0]),j=parseFloat(c[1]),k=parseFloat(c[2]);c=parseFloat(c[3]);var u=a.width-2,d=k*(40/c)+40;a.setAttribute("height",d+18);var f=(d-40)/Math.tan(h*RAD);a=a.getContext("2d");var n=new Image;n.src=document.getElementById("bgImage1").src;n=a.createPattern(n,"repeat");a.fillStyle=n;a.beginPath();a.moveTo(30,1);a.lineTo(1,10);a.lineTo(30,20);a.lineTo(30+f,d);a.lineTo(u,d);
n=0;for(var i=(d-20)/20,e=0;e<21;e++){a.lineTo(u-n,d-e*i);n=n>0?0:Math.random()*40+12}a.lineTo(u-40,1);a.lineTo(30,1);a.fill();a.stroke();a.beginPath();a.moveTo(30,20);a.lineTo(u,20);a.moveTo(1,10);a.lineTo(f,d-10);a.lineTo(30+f,d);a.lineTo(30,20);a.lineTo(1,10);n=new Image;n.src=document.getElementById("bgImage2").src;n=a.createPattern(n,"repeat");a.fillStyle=n;a.fill();a.stroke();a.font="14px Arial bold";a.textBaseline="top";a.fillStyle="#fff";h=h+"\u00b0";a.fillText(h,38,20);h=ConEng(k,false);
k=a.measureText(h).width;a.fillText(h,u-k-40,d/2);h=ConEng(c,false);k=a.measureText(h).width;a.fillText(h,u-10-k-40,0);h="Hip Plumb + Side Cuts";a.fillText(h,u/4,42);h=j+"\u00b0";k=a.measureText(h).width;a.translate(k/2,6);a.rotate(20*RAD);a.fillText(h,20-k+6,14)}}var aRunPoints,spnRunCount,spnLastPoint,spnRunPoint,spnNextPoint,pointPos;
function DoRun(a){CloseRuns();spnRunCount=document.getElementById("spnCount"+a);spnLastPoint=document.getElementById("spnLast"+a);spnRunPoint=document.getElementById("spnPoint"+a);spnNextPoint=document.getElementById("spnNext"+a);document.getElementById("div"+a).style.display="block";aRunPoints=document.getElementById("lblRun"+a).innerHTML.split(",");pointPos=-1;RunNext(1)}
function CloseRuns(){document.getElementById("divRidge").style.display="none";document.getElementById("divWall").style.display="none";document.getElementById("divHip").style.display="none"}
function RunNext(a){if(a==1){if(pointPos<aRunPoints.length-1){pointPos++;if(pointPos>0)spnLastPoint.innerHTML=Commafy(aRunPoints[pointPos-1]);spnRunPoint.innerHTML=Commafy(aRunPoints[pointPos]);if(pointPos<aRunPoints.length-1)spnNextPoint.innerHTML=Commafy(aRunPoints[pointPos+1])}}else if(pointPos>0){pointPos--;if(pointPos>0)spnLastPoint.innerHTML=Commafy(aRunPoints[pointPos-1]);spnRunPoint.innerHTML=Commafy(aRunPoints[pointPos]);spnNextPoint.innerHTML=Commafy(aRunPoints[pointPos+1])}spnRunCount.innerHTML=
pointPos+1}function Commafy(a){a+="";x=a.split(".");x1=x[0];x2=x.length>1?"."+x[1]:"";for(a=/(\d+)(\d{3})/;a.test(x1);)x1=x1.replace(a,"$1,$2");return x1+x2}function GoBevel(){var a=templateData.split(",");window.open("bevel-gauge.aspx?ba=Hip-Plumbcut:"+a[1]+",Rafter-Plumbcut:"+a[3]+",Hip-Sidecut:"+a[5]+",Creeper-Sidecut:"+a[7])};