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(","),k=parseFloat(c[0]),h=parseFloat(c[1]);if(!(h>k)){var n=parseFloat(c[2]),s=parseFloat(c[3]),d=parseFloat(c[4]),e=parseFloat(c[5]),l=parseFloat(c[6]),i=parseFloat(c[7]),f=parseFloat(c[8]),m=parseFloat(c[9]),o=parseFloat(c[10]),q=parseFloat(c[11]),j=parseFloat(c[12]),u=parseFloat(c[13]),p=parseFloat(c[14]),t=parseFloat(c[15]);parseFloat(c[16]);var v=parseFloat(c[17]),z=parseFloat(c[18]);c=parseFloat(c[19]);
var y=k+t*2;h=h+t*2;var g=310*(y/h),r=g/y,b=a.getContext("2d");a.setAttribute("height",g+26);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(t>0){a=t*r;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=o*r;var w=155;j=j-2;if(q>0){w+=q*r;b.moveTo(w,310);b.lineTo(w,155);j--}for(r=0;r<j;r++){w+=a;b.moveTo(w,310);b.lineTo(w,
155)}b.stroke();b.beginPath();b.strokeStyle="#4682b4";b.moveTo(155-lineWidth/2,155);b.lineTo(g-155+lineWidth/2,155);b.stroke();b.font="12px Verdana";b.textBaseline="top";if(u>50){b.strokeStyle="#f00";p=p;j=g-155+a;r=155+a;w=j;var A=r;b.fillStyle="#000";for(b.beginPath();j<g&&p>50;){b.moveTo(j,310);b.lineTo(j,r);b.moveTo(j,r);b.lineTo(g,r);b.fillText(Math.round(p),j+lineWidth/2,r-lineWidth/2-12);p-=u;j+=a;r=310-(g-j)}b.stroke();b.beginPath();b.strokeStyle="#ffa500";b.moveTo(w-10,A-10);b.lineTo(j,r);
b.stroke()}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";b.fillText("Hip "+d,77.5+lineWidth,65.5);d="Rafters "+e+" \u00d7 "+m+" \u00d7 "+f;f=b.measureText(d).width;b.fillText(d,g/2-f/2,155-lineWidth/2-48);d=q==0?"Adjusted Rafter Spacing "+o:"Rafter Spacing "+o+" (2 ends = "+q+")";o=155-lineWidth/2;f=b.measureText(d).width;b.fillText(d,g/2-f/2,o-32);d="Ridge "+s+" long \u00d7 "+i+" thick";
f=b.measureText(d).width;b.fillText(d,g/2-f/2,o-16);d="Roof area "+v+" m\u00b2";f=b.measureText(d).width;b.fillText(d,g-77.5-f/2,2);d="Rafter "+e;b.fillText(d,g-155+lineWidth,77.5);if(t>0){d="Roof Length "+y;b.fillText(d,4,187);d="Roof Width "+h;b.fillText(d,4,203);d="Overhang (level) "+t;b.fillText(d,40,2)}d="Wall Length "+k;f=b.measureText(d).width;b.fillText(d,g/2-f/2,0);d="Angle "+l+" \u00b0";f=b.measureText(d).width;b.fillText(d,g/2-f/2,16);d="Overall Rise From Wall "+n;f=b.measureText(d).width;
b.fillText(d,g/2-f/2,32);b.fillText("Sheathing",40,278);b.fillText(z+"\u00b0",40,294);c>0&&b.fillText("End Jacks "+c,4,139)}}}
function DrawRafter(){var a=document.getElementById("cnvsRafter");if(a.getContext){var c=rafterData.split(","),k=parseFloat(c[0]),h=parseFloat(c[1]),n=parseFloat(c[2]),s=parseFloat(c[3]),d=c[4]=="1",e=parseFloat(c[5]),l=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 f=i/Math.tan(n*RAD),m=d?f:0;a.beginPath();a.moveTo(m,0);a.lineTo(c,0);a.lineTo(c-f,i);var o,q;d=false;if(e>0){var j=k/i;q=e/j;o=150-f;var u=
q*Math.sin((90-n)*RAD),p=o+u/Math.tan(n*RAD),t=i-u,v=p+q*Math.cos((90-n)*RAD);q=e*Math.tan((90-n)*RAD);a.lineTo(v,i);a.lineTo(p,t);a.lineTo(150,0);a.lineTo(o,i);a.lineTo(0,i);if(k/j/u<2.9)d=true}else a.lineTo(0,i);a.lineTo(m,0);a.save();a.shadowOffsetY=4;a.shadowBlur=4;a.shadowColor="#c0c0c0";a.fill();a.restore();a.stroke();a.fillStyle="#000";if(e>0){a.fillText(l,152,2);a.fillText(Math.round(q),150-f-20,i-20);a.fillText(Math.round(Math.sqrt(Math.pow(q,2)+Math.pow(e,2))),o+10,i)}h="Setback "+h;e=a.measureText(h).width;
a.fillText(h,c-e-2,i+4);h="Plumb cut "+n+" \u00b0";e=a.measureText(h).width;a.fillText(h,c-e-10,2);a.fillText("Rafter Len "+s,2,2);a.fillText("Rafter depth "+k,c*0.6,i/2-12);if(d){a.fillStyle="#f00";a.fillText("Birdsmouth is Deep !",o+40,i)}}}
function DrawHip(){var a=document.getElementById("cnvsHip");if(a.getContext){var c=hipData.split(","),k=parseFloat(c[0]),h=parseFloat(c[1]),n=parseFloat(c[2]),s=c[3],d=c[4]=="1",e=parseFloat(c[5]),l=c[6],i=parseFloat(c[7]);c=90-n;var f=a.width,m=a.height-20;a=a.getContext("2d");a.font="12px Verdana";a.textBaseline="top";a.fillStyle="#ffa500";a.strokeStyle="#000";var o=m/Math.tan(n*RAD),q=d?o:0;a.beginPath();a.moveTo(q,0);a.lineTo(f,0);a.lineTo(f-o,m);var j,u,p;d=false;if(i>0||e>0){e=Math.sqrt(e*e+
e*e);var t=k/m;j=120-o;var v=e/t*Math.sin(c*RAD);if(i>0)v+=i/Math.cos(c*RAD)/t;var z=j+v/Math.tan(n*RAD),y=m-v,g=z+v/Math.tan(c*RAD);p=e*Math.sin(c*RAD);p+=i*Math.cos(c*RAD);u=p/Math.cos(c*RAD);p=p/Math.sin(c*RAD);a.lineTo(g,m);a.lineTo(z,y);a.lineTo(120,0);a.lineTo(j,m);a.lineTo(0,m);if(k/t/v<2.9)d=true}else a.lineTo(0,m);a.lineTo(q,0);a.save();a.shadowOffsetY=4;a.shadowBlur=4;a.shadowColor="#c0c0c0";a.fill();a.restore();a.stroke();a.fillStyle="#000";if(i>0||e>0){a.fillText(l,122,2);a.fillText(Math.round(u),
120-o-20,m-20);a.fillText(Math.round(Math.sqrt(Math.pow(u,2)+Math.pow(p,2))),j+10,m)}h="Setback "+h;e=a.measureText(h).width;a.fillText(h,f-e-2,m+4);h="Plumb cut "+n+" \u00b0";e=a.measureText(h).width;a.fillText(h,f-e-10,2);a.fillText("Hip Len "+s,2,2);a.fillText("Hip Depth "+k,f*0.6,m/2-12);a.fillText("Hip Angle "+c.toFixed(1),f*0.6,m/2+8);if(d){a.fillStyle="#f00";a.fillText("Birdsmouth is Deep !",j+40,m)}}}
function DrawHipDetail(){var a=document.getElementById("cnvsHipDetail");if(a.getContext){var c=hipDetailData.split(","),k=parseFloat(c[0]),h=parseFloat(c[1]),n=parseFloat(c[2]);c=parseFloat(c[3]);var s=a.width-2,d=n*(50/c)+50;a.setAttribute("height",d+18);var e=(d-50)/Math.tan(k*RAD);a=a.getContext("2d");var l=new Image;l.src=document.getElementById("bgImage1").src;l=a.createPattern(l,"repeat");a.fillStyle=l;a.beginPath();a.moveTo(37.5,1);a.lineTo(1,12.5);a.lineTo(37.5,25);a.lineTo(37.5+e,d);a.lineTo(s,
d);l=0;for(var i=(d-25)/20,f=0;f<21;f++){a.lineTo(s-l,d-f*i);l=l>0?0:Math.random()*40+12}a.lineTo(s-50,1);a.lineTo(37.5,1);a.fill();a.stroke();a.beginPath();a.moveTo(37.5,25);a.lineTo(s,25);a.moveTo(1,12.5);a.lineTo(e,d-12.5);a.lineTo(37.5+e,d);a.lineTo(37.5,25);a.lineTo(1,12.5);l=new Image;l.src=document.getElementById("bgImage2").src;l=a.createPattern(l,"repeat");a.fillStyle=l;a.fill();a.stroke();a.font="14px Arial bold";a.textBaseline="top";a.fillStyle="#fff";k=k+"\u00b0";a.fillText(k,45.5,25);
e=a.measureText(n).width;a.fillText(n,s-e-40,d/2);e=a.measureText(c).width;a.fillText(c,s-12.5-e-40,2.5);k="Hip Plumb + Side Cuts";a.fillText(k,s/4,47);k=h+"\u00b0";e=a.measureText(k).width;a.translate(e/2,6);a.rotate(20*RAD);a.fillText(k,25-e+6,16.5)}}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};