var RAD=Math.PI/180;function Setup(){DrawRoof(true);DrawRafter();SetInput()}var lineWidth=4;
function DrawRoof(b){var d=document.getElementById("cnvsRoof");if(d.getContext){var h=d.width,e=roofData.split(","),n=parseFloat(e[0]),v=parseFloat(e[1]),w=parseFloat(e[2]),m=parseFloat(e[3]),k=parseFloat(e[4]),l=parseFloat(e[5]),q=parseFloat(e[6]),i=parseFloat(e[7]),r=parseFloat(e[8]),j=parseFloat(e[9]),p=parseFloat(e[10]),s=parseFloat(e[11]),x=parseFloat(e[12]),f=parseFloat(e[13]),t=parseFloat(e[14]),C=parseFloat(e[15]),A=parseFloat(e[16]),D=parseFloat(e[17]),E=parseFloat(e[18]),c=e[19]=="1"?true:
false;e=n+t*2;var z=v+f*2;h=310*(e/z);var o=h/e,u=h/2,a=d.getContext("2d");if(b){d.setAttribute("height",h+2);d.setAttribute("width",311);a.translate(310,0);a.rotate(90*RAD)}else{d.setAttribute("height",312);d.setAttribute("width",h+1)}a.fillStyle="#f8f8ff";a.strokeStyle="#000";a.fillRect(0,0,h,310);a.strokeRect(0,0,h,309);var g;if(f>0||t>0){b=f*o;g=t*o;a.save();a.fillStyle="#f5f5dc";a.strokeStyle="#c0c0c0";a.shadowOffsetY=6;a.shadowBlur=6;a.shadowColor="#c0c0c0";a.fillRect(g,b,h-g*2,310-b*2);a.restore();
a.strokeRect(g,b,h-g*2,310-b*2)}a.lineWidth=lineWidth;a.strokeStyle="#7cfc00";b=x*o;d=g+lineWidth/2+b;a.beginPath();a.moveTo(d,0);a.lineTo(d,310);var y=h-p*2*o-g*2-lineWidth-b*2,B=0;if(p>0){d+=p*o;a.moveTo(d,310);a.lineTo(d,155);o=y/(s-3);B=s-3}else{o=y/(s-1);B=s-2}for(y=0;y<B;y++){d+=o;a.moveTo(d,310);a.lineTo(d,155)}o=h-g-lineWidth/2;a.moveTo(o-b,0);a.lineTo(o-b,310);a.stroke();a.strokeStyle="#00f";a.lineWidth=lineWidth*(q/i);a.beginPath();if(c){a.moveTo(0,155);a.lineTo(h,155)}else{a.moveTo(g,155);
a.lineTo(h-g,155)}a.stroke();a.lineWidth=lineWidth;a.strokeStyle="#000";a.fillStyle="#00f";c="";g=0;a.font="12px Verdana";a.textBaseline="top";c=f>0;h=units=="m";if(!h){n=ConEng(n,true);v=ConEng(v,true);f=ConEng(f,true);t=ConEng(t,true);A=ConEng(A,true);e=ConEng(e,true);z=ConEng(z,true);j=ConEng(j,true);p=ConEng(p,true);x=ConEng(x,true);w=ConEng(w,true);k=ConEng(k,true);r=ConEng(r,false);i=ConEng(i,false);q=ConEng(q,false);m=ConEng(m,true)}h=h?" m\u00b2":" ft\u00b2";if(c){c="Eaves: Overhang "+f;if(t!=
f)c+=" Gable: Overhang "+t;c+=" - Lineal "+A+" - Area "+D+h;f=a.measureText(c).width;a.fillText(c,u-f/2,g);g+=17;c="Roof "+e+" long \u00d7 "+z+" wide";f=a.measureText(c).width;a.fillText(c,u-f/2,g);g+=17}c="Building "+n+" long \u00d7 "+v+" wide";f=a.measureText(c).width;a.fillText(c,u-f/2,g);g+=17;c=p==0?"Adjusted Rafter Spacing "+j:"Rafter Spacing "+j+" (2 ends = "+p+")";if(x>0)c+=" - end rafters set in "+x;f=a.measureText(c).width;a.fillText(c,u-f/2,g);g+=17;c="Roof Area "+C+h+" - Angle "+l+" \u00b0";
f=a.measureText(c).width;a.fillText(c,u-f/2,g);g+=17;c="Overall Rise From Wall "+w;f=a.measureText(c).width;a.fillText(c,u-f/2,g);g+=17;c=s*2+" Rafters @ "+k+" \u00d7 "+r+" \u00d7 "+i;f=a.measureText(c).width;a.fillText(c,u-f/2,g);g+=17;c="Gable Area (under rafters) "+E+h;f=a.measureText(c).width;a.fillText(c,u-f/2,g);g+=17;c="Ridge "+m+" long \u00d7 "+q+" thick";f=a.measureText(c).width;a.fillText(c,u-f/2,g)}}
function DrawRafter(){var b=document.getElementById("cnvsRafter");if(b.getContext){var d=rafterData.split(","),h=parseFloat(d[0]),e=parseFloat(d[1]),n=parseFloat(d[2]),v=parseFloat(d[3]),w=d[4]=="1",m=parseFloat(d[5]),k=d[6];d=b.width;var l=b.height-20;b=b.getContext("2d");b.font="12px Verdana";b.textBaseline="top";b.fillStyle="#7cfc00";b.strokeStyle="#000";var q=l/Math.tan(n*RAD),i=w?q:0;b.beginPath();b.moveTo(i,0);b.lineTo(d,0);b.lineTo(d-q,l);var r,j;w=false;if(m>0){var p=h/l;j=m/p;r=150-q;var s=
j*Math.sin((90-n)*RAD),x=r+s/Math.tan(n*RAD),f=l-s,t=x+j*Math.cos((90-n)*RAD);j=m*Math.tan((90-n)*RAD);b.lineTo(t,l);b.lineTo(x,f);b.lineTo(150,0);b.lineTo(r,l);b.lineTo(0,l);if(h/p/s<2.9)w=true;j=Math.round(j)}else b.lineTo(0,l);b.lineTo(i,0);b.save();b.shadowOffsetY=6;b.shadowBlur=6;b.shadowColor="#c0c0c0";b.fill();b.restore();b.stroke();b.fillStyle="#000";i=units=="m";if(!i){e=ConEng(e,false);v=ConEng(v,true);h=ConEng(h,true)}if(m>0){m=Math.sqrt(Math.pow(j,2)+Math.pow(m,2));m=i?Math.round(m):ConEng(m,
false);if(!i){k=ConEng(k,false);j=ConEng(j,false)}b.fillText(k,152,2);k=j;i=b.measureText(k).width;b.fillText(j,150-q-i,l-20);b.fillText(m,r-2,l+4)}k="Setback "+e;i=b.measureText(k).width;b.fillText(k,d-i-2,l+4);k=n+" \u00b0";i=b.measureText(k).width;b.fillText(k,d-i-10,2);b.fillText("Length "+v,2,2);b.fillText("Depth "+h,d*0.6,l/2-6);if(w){b.fillStyle="#f00";b.fillText("Birdsmouth is Deep !",r+40,l)}}}var rot=true;function Rotate(){rot=!rot;DrawRoof(rot)}
function GoBevel(){window.open("bevel-gauge.aspx?ba=Rafter-Plumbcut:"+rafterData.split(",")[2])};