function Form_onsubmit(){var a=parseInt(document.getElementById("txtWidth").value),c=parseInt(document.getElementById("txtLength").value);if(a>c)return alert("Width cannot be greater than Length"),document.getElementById("txtWidth").focus(),!1;if(a==c&&(a=document.getElementById("txtRafterThick").value,document.getElementById("txtRidgeThick").value!=a&&(document.getElementById("txtRidgeThick").style.backgroundColor="pink",!confirm("With a square building, Ridge Thickness must be the same\nas Rafter Thickness, giving a square centre Kingpost. ("+
a+" x "+a+")\n\nChange Ridge Thickness to "+a+" and Continie ?"))))return!1;if(parseInt(document.getElementById("txtPlateWidth").value)>0&&(a=parseInt(document.getElementById("_txtAngle").value),c=parseInt(document.getElementById("txtPlateWidth").value)*Math.sin(a/(180/Math.PI)),a=parseInt(document.getElementById("txtRafterDepth").value),a/c<3&&!confirm("Birds mouth depth will be greater than 1/3 rafter depth\n\rThis can significantly weaken rafter\n\r\n\rContinue?")))return!1;c=parseInt(document.getElementById("txtHipDepth").value);
a=parseInt(document.getElementById("txtRafterDepth").value);if(c<a)alert("Hip Depth must be equal to or greater than Rafter Depth\n\r\n\rHip Depth re-set to "+a),document.getElementById("txtHipDepth").value=a;return!0}function ShowBirdsCalc(){document.getElementById("_txtBirdsmouthAngle").value=document.getElementById("_txtAngle").value;document.getElementById("divBirdsmouth").style.left="160px"}function HideBirdsCalc(){document.getElementById("divBirdsmouth").style.left="-10000px"}
function CalcSeat(){var a=parseFloat(document.getElementById("txtPlumbCut").value);if(isNaN(a))document.getElementById("txtPlumbCut").select(),alert("Please enter a valid number for Plumb Cut");else{var c=GetRangle();if(c!=null){var d=a/Math.tan(c);document.getElementById("spnSeatCut").innerHTML=Math.round(d)+" mm";document.getElementById("txtSeatCut").value=Math.round(d);Math.tan(c);document.getElementById("spnPlumbCut").innerHTML=Math.round(a)+" mm";document.getElementById("txtPlateWidth").value=
document.getElementById("txtSeatCut").value}}}
function CalcPlumb(){var a=parseFloat(document.getElementById("txtSeatCut").value);if(isNaN(a))document.getElementById("txtSeatCut").select(),alert("Please enter a valid number for Seat Cut");else{var c=GetRangle();if(c!=null)a*=Math.tan(c),document.getElementById("spnPlumbCut").innerHTML=Math.round(a)+" mm",document.getElementById("txtPlumbCut").value=Math.round(a),a/=Math.tan(c),document.getElementById("spnSeatCut").innerHTML=Math.round(a)+" mm",document.getElementById("txtPlateWidth").value=document.getElementById("txtSeatCut").value}}
function GetRangle(){var a=parseFloat(document.getElementById("_txtBirdsmouthAngle").value);return isNaN(a)?(alert("Please enter a valid number for Angle"),document.getElementById("_txtBirdsmouthAngle").select(),null):a<1||a>45?(alert("Angle must be larger than 1 and smaller than or equal to 45"),document.getElementById("_txtBirdsmouthAngle").select(),null):a/(180/Math.PI)}
function Window_onload(){DrawRoof();DrawRafter();DrawHip();DrawTemplate();DrawHipDetail();document.getElementById("rbHipChamfer").checked&&DrawHipChamfer();SetInput()}var RAD=Math.PI/180,lineWidth=6,fontSize=12;
function DrawRoof(){var a=document.getElementById("cnvsRoof");if(a.getContext){var c=a.width-30,d=roofData.split(","),l=parseFloat(d[0]),g=parseFloat(d[1]);if(!(g>l)){var o=parseFloat(d[2]),h=parseFloat(d[3]),e=parseFloat(d[4]),m=parseFloat(d[5]),j=parseFloat(d[6]),p=parseFloat(d[7]),q=parseFloat(d[8]),i=parseFloat(d[9]),r=parseFloat(d[10]),u=parseFloat(d[11]),y=parseFloat(d[12]),t=parseFloat(d[13]),w=parseFloat(d[14]),v=parseFloat(d[15]);parseFloat(d[16]);var x=parseFloat(d[17]),B=parseFloat(d[18]),
z=parseFloat(d[19]),F=parseFloat(d[20]),D=parseFloat(d[21]),E=l+v*2,G=g+v*2,d=c*(G/E);a.setAttribute("height",d);var A=c/E,s=0,b=a.getContext("2d");b.beginPath();b.fillStyle="#fff";b.strokeStyle="#000";b.fillRect(0,0,c,d);b.strokeRect(0,0,c,d-1);if(v>0)s=v*A,b.save(),b.fillStyle="#ececec",b.strokeStyle="#c0c0c0",b.shadowOffsetY=8,b.shadowOffsetX=4,b.shadowBlur=8,b.shadowColor="#808080",b.fillRect(s,s,c-s*2,d-s*2),b.restore(),b.strokeRect(s,s,c-s*2,d-s*2);var a=d/2,H=d/4,n=r*A;b.lineWidth=lineWidth;
b.font=fontSize+"px Verdana";b.textBaseline="top";if(t>50){b.strokeStyle="#f00";var f=c-a+n,k=d-a+n;for(b.fillStyle="#000";f<c&&w>50;)b.beginPath(),b.moveTo(f,d),b.lineTo(f,k),b.lineTo(c,k),b.stroke(),b.fillText(Math.round(w),f+lineWidth/2,k-lineWidth/2-fontSize),w-=t,f+=n,k=d-(c-f)}b.beginPath();b.strokeStyle="#ffa500";b.moveTo(0,0);b.lineTo(a,a);b.moveTo(0,d);b.lineTo(a,a);b.moveTo(c,0);b.lineTo(c-a,a);b.moveTo(c,d);b.lineTo(c-a,a);b.stroke();b.fillStyle="#fff";b.fillRect(c+1,0,lineWidth,lineWidth);
b.fillRect(c+1,d-lineWidth,lineWidth,lineWidth);b.beginPath();b.strokeStyle=D==0?"#7cfc00":"#000";b.moveTo(0,a);b.lineTo(a,a);b.moveTo(c-a,a);b.lineTo(c,a);b.stroke();b.strokeStyle="#7cfc00";b.beginPath();b.moveTo(a,0);b.lineTo(a,d);b.moveTo(c-a,0);b.lineTo(c-a,d);f=a;w=y-2;f+=u>0?u*A:n;for(k=0;k<w;k++)b.moveTo(f,d),b.lineTo(f,a),f+=n;b.stroke();b.strokeStyle="#00f";b.lineWidth=lineWidth*(p/q);b.beginPath();b.moveTo(a-lineWidth/2,a);b.lineTo(c-a+lineWidth/2,a);b.stroke();b.lineWidth=lineWidth;if(z>
180){f=d-1;k=j*RAD;z*=Math.cos(k);z*=A;var C=0;F>0&&(C=F*A*Math.cos(k),f-=C);b.strokeStyle="#00f";b.lineWidth=2;for(b.beginPath();f>a-lineWidth/2;)b.moveTo(C,f),b.lineTo(c-C,f),C+=z,f-=z;b.stroke()}b.strokeStyle="#000";b.lineWidth=1;b.beginPath();b.moveTo(0,d);b.arc(0,d,120,0,315*RAD,!0);b.moveTo(100,d-100);b.lineTo(0,d);b.stroke();b.fillStyle="#000";f=fontSize+4;b.fillText("Hip "+e,a/2+lineWidth,H-fontSize);e="Rafters "+m+" long x "+i+" deep x "+q+" thick";i=b.measureText(e).width;b.fillText(e,c/
2-i/2,a-lineWidth/2-f*4);e=u==0?"Adjusted Rafter Spacing "+RoundTo(r,1):"Rafter Spacing "+RoundTo(r,1)+" (2 ends = "+u+")";r=a-lineWidth/2;i=b.measureText(e).width;b.fillText(e,c/2-i/2,r-f*3);e="Creeper Shortening "+t;i=b.measureText(e).width;b.fillText(e,c/2-i/2,r-f*2);e="Ridge "+h+" long x "+p+" thick";i=b.measureText(e).width;b.fillText(e,c/2-i/2,r-f);e="Roof area "+x+" m\u00b2";i=b.measureText(e).width;b.fillText(e,c-a/2-i/2,2);b.fillText("Rafter "+m,c-a+lineWidth,H);v>0&&(b.fillText("Roof Length "+
E,4,a+f*2),b.fillText("Roof Width "+G,4,a+f*3),b.fillText("Overhang (level) "+v,40,2));e="Wall Length "+l;i=b.measureText(e).width;b.fillText(e,c/2-i/2,0);e="Angle "+j+"\u00b0";i=b.measureText(e).width;b.fillText(e,c/2-i/2,f);e="Overall Rise From Wall "+o;i=b.measureText(e).width;b.fillText(e,c/2-i/2,f*2);b.fillText("Sheathing",40,d-f*2);b.fillText(B+"\u00b0",40,d-f);D>0&&b.fillText("End Jacks "+D,44,r-f);if(document.getElementById("pnlRunning")!=null){b=document.getElementById("cnvsRun");b.setAttribute("height",
d);t=document.getElementById("lblRunLength").innerHTML.split(", ");x=0;o=document.getElementById("lblRunWidth").innerHTML.split(", ");h=0;B=document.getElementById("lblRunRidge").innerHTML.split(", ");r=0;m=document.getElementById("lblRunHip").innerHTML.split(", ");j=0;b=b.getContext("2d");b.beginPath();b.fillStyle="#f8f8ff";b.strokeStyle="#000";b.fillRect(0,0,c,d);b.strokeRect(0,0,c,d-1);if(v>0)b.save(),b.fillStyle="#f5f5dc",b.strokeStyle="#c0c0c0",b.fillRect(s,s,c-s*2,d-s*2),b.strokeRect(s,s,c-
s*2,d-s*2);b.lineWidth=1;b.font="11px Verdana";b.fillStyle="#000";b.textBaseline="top";b.beginPath();b.strokeStyle="#f00";f=s+t[0]*A;for(k=d-f;f<a-10;)b.moveTo(f,d),b.lineTo(f,k),b.lineTo(0,k),e=o[h++],b.fillText(e,2,k+2),b.save(),e=t[x++],i=b.measureText(e).width,b.translate(f-2,d-6-i),b.rotate(90*RAD),b.fillText(e,0,0),b.restore(),f+=n,k-=n;b.stroke();b.beginPath();b.strokeStyle=p==q?"#080":"#000";b.moveTo(0,a);b.lineTo(a,a);b.moveTo(c-a,a);b.lineTo(c,a);b.stroke();b.beginPath();b.strokeStyle="#080";
e=o[h++];b.fillText(e,2,a+2);f=a;b.moveTo(a,0);b.lineTo(a,d);b.save();e=t[x++];i=b.measureText(e).width;b.translate(a-2,d-6-i);b.rotate(90*RAD);b.fillText(e,0,0);b.restore();if(y>1&&l>g){f+=u>0?u*A:n;for(k=0;k<w;k++)b.moveTo(f,d),b.lineTo(f,0),b.save(),e=t[x++],i=b.measureText(e).width,b.translate(f-2,d-6-i),b.rotate(90*RAD),b.fillText(e,0,0),b.restore(),b.save(),e=B[++r],i=b.measureText(e).width,b.translate(f-2,a-i-4),b.rotate(90*RAD),b.fillText(e,0,0),b.restore(),f+=n;b.moveTo(c-a,0);b.lineTo(c-
a,d);b.save();e=t[x++];i=b.measureText(e).width;b.translate(c-a,d-6-i);b.rotate(90*RAD);b.fillText(e,0,0);b.restore();b.save();e=B[++r];i=b.measureText(e).width;b.translate(c-a-2,a-i-4);b.rotate(90*RAD);b.fillText(e,0,0);b.restore()}b.stroke();b.beginPath();b.strokeStyle="#f00";f=c-a+n;for(k=a+n;f<c-s&&x<t.length;)b.moveTo(f,d),b.lineTo(f,k),b.lineTo(c,k),b.save(),e=t[x++],i=b.measureText(e).width,b.translate(f-2,d-6-i),b.rotate(90*RAD),b.fillText(e,0,0),b.restore(),f+=n,k+=n;f=c-a+n;k=a+n;for(l=
0;l<m.length;l++)b.save(),b.translate(f-4,k-10),b.rotate(-40*RAD),b.fillText(m[j++],0,0),b.restore(),f+=n,k+=n;f=a-n;for(k=a-n;f>s+2;)b.moveTo(f,0),b.lineTo(f,k),b.lineTo(0,k),b.fillText(o[h++],2,k+2),f-=n,k=f;f=c-a+n;for(k=a-n;f<c-s-2;)b.moveTo(f,0),b.lineTo(f,k),b.lineTo(c,k),f+=n,k-=n;b.stroke();b.lineWidth=3;b.strokeStyle="#ffa500";b.beginPath();b.moveTo(0,0);b.lineTo(a,a);b.moveTo(0,d);b.lineTo(a,a);b.moveTo(c,0);b.lineTo(c-a,a);b.moveTo(c,d);b.lineTo(c-a,a);b.stroke();b.strokeStyle="#00f";b.beginPath();
b.moveTo(a,a);b.lineTo(c-a,a);b.stroke()}}}}function LineSize(a){a==1&&lineWidth<40?(lineWidth+=4,fontSize=(lineWidth+20)/2,DrawRoof()):a==0&&lineWidth>3&&(lineWidth-=2,fontSize=(lineWidth+20)/2,DrawRoof())}
function DrawRafter(){var a=document.getElementById("cnvsRafter");if(a.getContext){var c=rafterData.split(","),d=parseFloat(c[0]),l=parseFloat(c[1]),g=parseFloat(c[2]),o=parseFloat(c[3]),h=c[4]=="1",e=parseFloat(c[5]),m=c[6],c=a.width,j=a.height-20,p=j/Math.tan(g*RAD),q=h?p:0,a=a.getContext("2d");a.font="13px Verdana";a.textBaseline="top";a.fillStyle="#7cfc00";a.strokeStyle="#000";a.beginPath();a.moveTo(q,0);a.lineTo(c,0);a.lineTo(c-p,j);var i,r,h=!1;if(e>0){var u=d/j;r=e/u;i=170-p;var y=r*Math.sin((90-
g)*RAD),t=i+y/Math.tan(g*RAD),w=j-y,v=t+r*Math.cos((90-g)*RAD);r=e*Math.tan((90-g)*RAD);a.lineTo(v,j);a.lineTo(t,w);a.lineTo(170,0);a.lineTo(i,j);a.lineTo(0,j);d/u/y<2.9&&(h=!0)}else a.lineTo(0,j);a.lineTo(q,0);a.save();a.shadowOffsetY=10;a.shadowBlur=10;a.shadowColor="#c0c0c0";a.fill();a.restore();a.stroke();a.fillStyle="#000";e>0&&(a.fillText(m,172,2),a.fillText(Math.round(r),170-p-20,j-20),e=Math.sqrt(Math.pow(r,2)+Math.pow(e,2)),a.fillText(Math.round(e),i,j));l="Setback "+l;e=a.measureText(l).width;
a.fillText(l,c-e-2,j+4);l="Plumb cut "+g+"\u00b0";e=a.measureText(l).width;a.fillText(l,c-e-10,2);a.fillText("Rafter Len "+o,2,2);a.fillText("Rafter depth "+d,c*0.6,j/2-12);if(h)a.fillStyle="#f00",a.font="bold 16px Verdana",a.fillText("Birdsmouth is Deep !",i+10,j-20)}}
function DrawHip(){var a=document.getElementById("cnvsHip");if(a.getContext){var c=hipData.split(","),d=parseFloat(c[0]),l=parseFloat(c[1]),g=parseFloat(c[2]),o=c[3],h=c[4]=="1",e=parseFloat(c[5]),m=c[6],j=parseFloat(c[7]),c=90-g,p=a.width,q=a.height-20,i=q/Math.tan(g*RAD),r=h?i:0,a=a.getContext("2d");a.font="13px Verdana";a.textBaseline="top";a.fillStyle="#ffa500";a.strokeStyle="#000";a.beginPath();a.moveTo(r,0);a.lineTo(p,0);a.lineTo(p-i,q);var u,y,t,h=!1;if(j>0||e>0){var e=Math.sqrt(e*e+e*e),w=
d/q;u=130-i;var v=e/w*Math.sin(c*RAD);j>0&&(v+=j/Math.cos(c*RAD)/w);var x=u+v/Math.tan(g*RAD),B=q-v,z=x+v/Math.tan(c*RAD);t=e*Math.sin(c*RAD);t+=j*Math.cos(c*RAD);y=t/Math.cos(c*RAD);t/=Math.sin(c*RAD);a.lineTo(z,q);a.lineTo(x,B);a.lineTo(130,0);a.lineTo(u,q);a.lineTo(0,q);d/w/v<2.9&&(h=!0)}else a.lineTo(0,q);a.lineTo(r,0);a.save();a.shadowOffsetY=10;a.shadowBlur=10;a.shadowColor="#c0c0c0";a.fill();a.restore();a.stroke();a.fillStyle="#000";if(j>0||e>0)a.fillText(m,132,2),a.fillText(Math.round(y),
130-i-20,q-20),e=Math.sqrt(Math.pow(y,2)+Math.pow(t,2)),a.fillText(Math.round(e),u,q);l="Setback "+l;e=a.measureText(l).width;a.fillText(l,p-e-2,q+4);l="Plumb cut "+g+"\u00b0";e=a.measureText(l).width;a.fillText(l,p-e-10,2);a.fillText("Hip Len "+o,2,2);a.fillText("Hip Depth "+d,p*0.6,q/2-12);a.fillText("Hip Angle "+c.toFixed(1)+"\u00b0",p*0.6,q/2+8);if(h)a.fillStyle="#f00",a.font="bold 16px Verdana",a.fillText("Birdsmouth is Deep !",u+10,q-20)}}
function DrawTemplate(){var a=document.getElementById("cnvsTemplate");if(a.getContext){var c=templateData.split(","),d=parseFloat(c[0]),l=parseFloat(c[1]),g=parseFloat(c[2]),o=parseFloat(c[3]),h=parseFloat(c[4]),e=parseFloat(c[5]),m=parseFloat(c[6]),j=parseFloat(c[7]),c=parseFloat(c[8]);a.setAttribute("height",400/Math.tan(j*RAD)+18);a=a.getContext("2d");a.font="14px Verdana";a.textBaseline="top";var p=new Image;p.src=document.getElementById("imgAngles").src;a.drawImage(p,0,0);a.beginPath();a.moveTo(0,
0);a.lineTo(400,d);a.fillText("Hip plumb "+l+"\u00b0",416,d-14);a.moveTo(0,0);a.lineTo(400,g);a.fillText("Rafter plumb "+o+"\u00b0",416,g+2);a.moveTo(0,0);a.lineTo(400,h);a.fillText("Hip side cut "+e+"\u00b0",416,h-14);a.moveTo(0,0);a.lineTo(400,m);a.fillText("Creeper side "+j+"\u00b0",416,m);a.stroke();a.fillText("Roof Angle "+c,160,2);a.fillStyle="#ffa500";a.fillRect(400,d-12,14,12);a.fillStyle="#7cfc00";a.fillRect(400,g+2,14,12);a.fillStyle="#ffa500";a.fillRect(400,h-12,14,12);a.fillStyle="#f00";
a.fillRect(400,m+2,14,12)}}
function DrawHipDetail(){var a=document.getElementById("cnvsHipDetail");if(a.getContext){var c=hipDetailData.split(","),d=parseFloat(c[0]),l=parseFloat(c[1]),g=parseFloat(c[2]),c=parseFloat(c[3]),o=a.width-2,h=g*(100/c)+100;a.setAttribute("height",h+18);var e=(h-100)/Math.tan(d*RAD),a=a.getContext("2d");a.beginPath();var m=new Image;m.src=document.getElementById("bgImage1").src;m=a.createPattern(m,"repeat");a.fillStyle=m;a.moveTo(75,1);a.lineTo(1,25);a.lineTo(75,50);a.lineTo(75+e,h);a.lineTo(o,h);
for(var m=0,j=(h-50)/20,p=0;p<21;p++)a.lineTo(o-m,h-p*j),m=m>0?0:Math.random()*40+12;a.lineTo(o-100,1);a.lineTo(75,1);a.fill();a.stroke();a.beginPath();a.moveTo(75,50);a.lineTo(o,50);a.moveTo(1,25);a.lineTo(e,h-25);a.lineTo(75+e,h);a.lineTo(75,50);a.lineTo(1,25);m=new Image;m.src=document.getElementById("bgImage2").src;m=a.createPattern(m,"repeat");a.fillStyle=m;a.fill();a.stroke();a.font="24px Arial";a.textBaseline="top";a.fillStyle="#000";a.fillText(d+"\u00b0",85,50);d=a.measureText(g).width;a.fillText(g,
o-d-40,h/2);d=a.measureText(c).width;a.fillText(c,o-25-d-10,11);a.fillText("Hip Plumb + Side Cuts",o/3,52);l+="\u00b0";d=a.measureText(l).width;a.translate(d/2,6);a.rotate(20*RAD);a.fillText(l,50-d,29)}}
function DrawHipChamfer(){var a=hipDetailData.split(",");parseFloat(a[2]);var c=parseFloat(a[3]),d=parseFloat(a[4]),l=Math.tan(d*RAD)*(c/2),g=document.getElementById("cnvsHipChamfer"),a=g.width,o=g.height-30,h=Math.tan(d*RAD)*(a/2)+2;if(g.getContext){g=g.getContext("2d");g.beginPath();g.moveTo(a/2,1);g.lineTo(0,h);g.lineTo(0,o);for(var e=a/20,m=10,j=0;j<=20;j++)g.lineTo(j*e,o+Math.random()*20+m),m=j%2?10:-10;g.lineTo(a,o);g.lineTo(a,h);g.closePath();g.fillStyle=g.createPattern(document.getElementById("bgImage2"),
"repeat");g.fill();g.stroke();g.beginPath();g.strokeStyle="#fff";g.moveTo(0,h);g.lineTo(a,h);g.moveTo(a/2,1);g.lineTo(a/2,h+20);g.stroke();g.font="18px Arial";g.textBaseline="top";g.fillStyle="#000";g.fillText(d+"\u00b0",4,h+2);g.font="16px Arial";d=RoundTo(l,1)+" Setdown";g.fillText(d,a/2+4,h+2);g.font="20px Verdana";d="Hip Backing Angle";h=g.measureText(d).width;g.fillText(d,a/2-h/2,110);d="(bevel)";h=g.measureText(d).width;g.fillText(d,a/2-h/2,140);d=c+" thick";h=g.measureText(d).width;g.fillText(d,
a/2-h/2,220)}}function CommonTemplate(){var a=document.getElementById("txtRafterThick").value,c=rafterData.split(",");window.open("Templates/rafter.aspx?rw="+a+"&rd="+c[0]+"&pa="+c[2]+"&m=1")}function CreeperTemplate(){var a=document.getElementById("txtRafterThick").value,c=rafterData.split(","),d=templateData.split(",");window.open("Templates/creeper.aspx?rw="+a+"&rd="+c[0]+"&pa="+c[2]+"&sa="+d[7]+"&m=1")}
function HipTemplate(){var a=document.getElementById("txtHipThick").value,c=hipData.split(","),d=templateData.split(",");window.open("Templates/hip.aspx?rw="+a+"&rd="+c[0]+"&pa="+c[2]+"&sa="+d[5]+"&m=1")};