function Window_onload(){DrawGazebo();DrawHip();document.getElementById("cnvsHalfRafter")&&DrawHalf();document.getElementById("cnvsFullCenter")&&DrawCenter();SetNumeric();SetRadOrSides()}
function Form_onsubmit(){var b=document.getElementById("ddKingFaceInches").value*32+document.getElementById("ddKingFaceFrac").value,a=document.getElementById("ddRafterThickInches").value*32+document.getElementById("ddRafterThickFrac").value;return b<a?confirm("King-Post face width is less than rafter thickness\nAs rafters but into King-Post, it's face width should be at least = to rafter thickness\n\r\n\rRe-set King-Post face width and continue?"):!0}
function GoBracket(){var b=document.getElementById("ddSides").value;b+="&fwi="+document.getElementById("ddKingFaceInches").selectedIndex;b+="&fwf="+document.getElementById("ddKingFaceFrac").selectedIndex;b+="&ha="+document.getElementById("lblHipRafterAngle").innerHTML;window.open("GazeboBracketEng.aspx?s="+b).focus()}
function ShowType(b){document.getElementById("imgType").src="images/Gazebo"+b+".gif";document.getElementById("divGazeboType").style.display="block";document.getElementById("divGazeboType").style.left=screen.width/2+"px"}function HideType(){document.getElementById("divGazeboType").style.display="none"}var RAD=Math.PI/180,op=-90;
function DrawGazebo(){var b=document.getElementById("cnvsGazebo"),a=gazeboData.split(","),k=parseFloat(a[0]),q=parseFloat(a[1]),h=parseFloat(a[2]),s=a[3],p=a[4]>0,g=a[5]>0,i=parseFloat(a[6]),j=parseFloat(a[7]),n=parseFloat(a[8]),o=parseFloat(a[9]),w=a[10],u=a[11],t=a[12],a=b.getContext("2d");a.fillStyle="#fff";a.fillRect(0,0,b.width,b.height);a.strokeStyle="#000";var c=b.width/2-6,r=op*RAD,d=r,l=360/k*RAD;a.fillStyle=h>0?"#fff":"#ececec";a.lineWidth=1;var f=c*Math.cos(d)+c,e=c*Math.sin(d)+c;a.beginPath();
a.moveTo(f,e);for(var m=0;m<k;m++)d+=l,f=c*Math.cos(d)+c,e=c*Math.sin(d)+c,a.lineTo(f,e);a.save();a.shadowOffsetY=10;a.shadowOffsetX=6;a.shadowBlur=10;a.shadowColor="#c0c0c0";a.fill();a.restore();a.stroke();if(h>0){d=h/Math.cos(l/2);h=c*(q/(q+d));d=r;f=h*Math.cos(d)+c;e=h*Math.sin(d)+c;a.beginPath();a.moveTo(f,e);for(m=0;m<k;m++)d+=l,f=h*Math.cos(d)+c,e=h*Math.sin(d)+c,a.lineTo(f,e);a.save();a.fillStyle="#ececec";a.fill();a.stroke();a.restore()}else h=c;a.beginPath();a.strokeStyle="#ffa500";d=r;a.lineWidth=
3;for(m=0;m<k;m++)a.moveTo(c,c),f=c*Math.cos(d)+c,e=c*Math.sin(d)+c,a.lineTo(f,e),d+=l;a.stroke();if(g)a.beginPath(),a.strokeStyle="#080",a.arc(c,c,h,0,360*RAD,!0),a.lineWidth=1,a.stroke();g=c*Math.cos(l*0.5);h=c/2*Math.cos(l*0.5);a.lineWidth=2;if(s=="half"){a.beginPath();var v=c/2,d=r,f=v*Math.cos(d)+c,e=v*Math.sin(d)+c;a.moveTo(f,e);for(m=0;m<k;m++)d+=l,f=v*Math.cos(d)+c,e=v*Math.sin(d)+c,a.lineTo(f,e);a.strokeStyle="#f00";a.stroke();a.beginPath();d=r;for(m=0;m<k;m++)f=h*Math.cos(d+l*0.5)+c,e=h*
Math.sin(d+l*0.5)+c,a.moveTo(f,e),f=g*Math.cos(d+l*0.5)+c,e=g*Math.sin(d+l*0.5)+c,a.lineTo(f,e),d+=l;a.strokeStyle="#00f";a.stroke()}if(s=="full"){a.beginPath();d=r;for(m=0;m<k;m++)a.moveTo(c,c),f=g*Math.cos(d+l*0.5)+c,e=g*Math.sin(d+l*0.5)+c,a.lineTo(f,e),d+=l;a.strokeStyle="#008000";a.stroke()}if(p){a.beginPath();d=r;e=l/2;f=c*Math.sin(e)/2*Math.cos(e);e=Math.tan(e)*f;e=c-e;s=Math.atan(f/e);p=e/Math.cos(s);g=c/2;for(m=0;m<k;m++)h=g*Math.cos(d)+c,v=g*Math.sin(d)+c,a.moveTo(h,v),f=p*Math.cos(d-s)+
c,e=p*Math.sin(d-s)+c,a.lineTo(f,e),a.moveTo(h,v),f=p*Math.cos(d+s)+c,e=p*Math.sin(d+s)+c,a.lineTo(f,e),d+=l;a.strokeStyle="#00f";a.stroke()}if(i>0){a.beginPath();a.strokeStyle="#8b4513";a.fillStyle="#fff";a.lineWidth=1;d=r;f=c*Math.cos(d)+c;e=c*Math.sin(d)+c;a.moveTo(c,c);a.lineTo(f,e);f=c*Math.cos(d+l)+c;e=c*Math.sin(d+l)+c;a.lineTo(f,e);a.lineTo(c,c);a.fill();d=q/Math.cos(n*RAD);d=b.width/2/d;i*=d;j=c-j*d;i<4&&(i=4);for(d=r;j>10;)f=j*Math.cos(d)+c,e=j*Math.sin(d)+c,a.moveTo(f,e),f=j*Math.cos(d+
l)+c,e=j*Math.sin(d+l)+c,a.lineTo(f,e),j-=i;a.stroke()}a.beginPath();a.strokeStyle="#000";a.fillStyle="#fff";a.lineWidth=1;d=r-l/2;f=10*Math.cos(d)+c;e=10*Math.sin(d)+c;a.moveTo(f,e);for(m=0;m<k;m++)d+=l,f=10*Math.cos(d)+c,e=10*Math.sin(d)+c,a.lineTo(f,e);a.save();a.shadowOffsetY=10;a.shadowBlur=10;a.shadowColor="#c0c0c0";a.fill();a.restore();a.stroke();b=document.getElementById("cnvsRoof");a=b.getContext("2d");a.clearRect(0,0,b.width,b.height);j=o*RAD;i=(360-o*k)/k*RAD;d=r-i/2;a.fillStyle="#F0FFFF";
a.lineWidth=1;a.beginPath();for(m=0;m<k;m++)a.moveTo(c,c),d+=i,f=c*Math.cos(d)+c,e=c*Math.sin(d)+c,a.lineTo(f,e),d+=j,f=c*Math.cos(d)+c,e=c*Math.sin(d)+c,a.lineTo(f,e),a.lineTo(c,c);a.save();a.shadowOffsetY=10;a.shadowOffsetX=6;a.shadowBlur=10;a.shadowColor="#c0c0c0";a.fill();a.restore();a.strokeStyle="#808080";a.stroke();k=r+l*1.5;b=Math.cos(j/2);f=b*c*Math.cos(k)+c;e=b*c*Math.sin(k)+c;a.beginPath();a.moveTo(c,c);a.lineTo(f,e);a.strokeStyle="#080";a.stroke();a.font="12px Arial";a.fillStyle="#000";
a.save();a.translate(f,e);a.rotate(k);a.fillText(ConEng(t,!0),-70,-2);a.restore();a.save();a.translate(c,c);a.rotate(r+j/2+i/2);a.fillText(RoundTo(o,1)+"\u00b0",18,4);a.restore();t=c*Math.cos(j*0.5);f=t*Math.cos(d+l*0.5)+c;e=t*Math.sin(d+l*0.5)+c+2;a.save();a.translate(f,e);a.rotate(90*RAD+r+i/2+j/2);a.fillText(ConEng(w,!0),-12,12);a.restore();d+=l;f=t/2*Math.cos(d)+c;e=t/2*Math.sin(d)+c;a.save();a.translate(f,e);a.rotate(r+i/2+j);a.fillText(ConEng(u,!0),0,-4);a.restore();d=r+i/2;f=c*Math.cos(d)+
c;e=c*Math.sin(d)+c;a.save();a.translate(f,e);a.rotate(d);disp=RoundTo((180-o)/2,1)+"\u00b0";a.fillText(disp,-36,12);a.restore()}
function DrawHip(){var b=document.getElementById("cnvsHip"),a=hipData.split(","),k=a[0],q=parseFloat(a[1]),h=parseFloat(a[2]),s=a[3],p=a[4]=="1",g=parseFloat(a[5]),i=a[6],j=90-h,n=b.width,o=b.height;o-=20;b=b.getContext("2d");b.font="13px Verdana";b.textBaseline="top";b.fillStyle="#ffa500";b.strokeStyle="#000";b.beginPath();var w=o/Math.tan(h*RAD);b.moveTo(p?w:0,0);b.lineTo(n,0);b.lineTo(n-w,o);var u,t,c;if(g>0){t=g/(k/o);u=170-w;p=t*Math.sin(j*RAD);c=u+p/Math.tan(h*RAD);var p=o-p,r=c+t*Math.cos(j*
RAD);t=g*Math.tan(j*RAD);b.lineTo(r,o);b.lineTo(c,p);b.lineTo(170,0);b.lineTo(u,o);b.lineTo(0,o);c=Math.sqrt(Math.pow(t,2)+Math.pow(g,2))}else b.lineTo(0,o);b.closePath();b.save();b.shadowOffsetY=10;b.shadowBlur=10;b.shadowColor="#c0c0c0";b.fill();b.restore();b.stroke();b.fillStyle="#000";if(g>0)b.fillText(ConEng(i,!0),172,2),g=ConEng(t,!1),i=b.measureText(g).width,b.fillText(g,170-w-i,o-20),b.fillText(ConEng(c,!1),u,o+4);g="Setback "+ConEng(q,!1);i=b.measureText(g).width;b.fillText(g,n-i-2,o+4);
g="Plumb cut "+h+"\u00b0";i=b.measureText(g).width;b.fillText(g,n-i-10,2);b.fillText("Hip Len "+ConEng(s,!0),6,2);b.fillText("Depth "+ConEng(k,!1),n*0.6,o/2-12);b.fillText("Hip Angle "+j.toFixed(2),6,o/2-12);k=parseFloat(a[8]);if(k>0){a=parseFloat(a[7]);h=Math.tan(k*RAD)*(a/2);b=document.getElementById("cnvsHipChamfer");n=b.width;o=b.height-30;q=Math.tan(k*RAD)*(n/2)+2;b=b.getContext("2d");b.beginPath();b.moveTo(n/2,1);b.lineTo(0,q);b.lineTo(0,o);s=n/20;j=10;for(u=0;u<=20;u++)b.lineTo(u*s,o+Math.random()*
20+j),j=u%2?10:-10;b.lineTo(n,o);b.lineTo(n,q);b.closePath();b.fillStyle="#ffa500";b.fill();b.stroke();b.beginPath();b.strokeStyle="#fff";b.moveTo(0,q);b.lineTo(n,q);b.moveTo(n/2,1);b.lineTo(n/2,q+30);b.stroke();b.font="14px Arial";b.textBaseline="top";b.fillStyle="#000";b.fillText(k+"\u00b0",4,q+2);g=ConEng(h,!1);b.fillText(g,n/2+4,q+2);b.fillText("Setdown",n/2+4,q+16);g="Chamfer Angle";i=b.measureText(g).width;b.fillText(g,n/2-i/2,70);g=ConEng(a,!1)+" thick";i=b.measureText(g).width;b.fillText(g,
n/2-i/2,100)}}
function DrawCenter(){var b=document.getElementById("cnvsFullCenter"),a=centerRafterData.split(","),k=a[0],q=parseFloat(a[1]),h=parseFloat(a[2]),s=a[3],p=a[4]=="1",a=90-h,g=b.width,i=b.height-20,b=b.getContext("2d");b.fillStyle="#080";b.strokeStyle="#000";b.beginPath();var j=i/Math.tan(h*RAD);b.moveTo(p?j:0,0);b.lineTo(g,0);b.lineTo(g-j,i);b.lineTo(0,i);b.closePath();b.save();b.shadowOffsetY=10;b.shadowBlur=10;b.shadowColor="#c0c0c0";b.fill();b.restore();b.stroke();b.font="13px Verdana";b.textBaseline=
"top";b.fillStyle="#fff";h="Plumb cut "+h+"\u00b0";p=b.measureText(h).width;b.fillText(h,g-p-10,2);b.fillText("Centre Rafter Length "+ConEng(s,!0),100,26);b.fillText("Depth "+ConEng(k,!1),100,44);b.fillText("Angle "+RoundTo(a,1)+"\u00b0",100,62);b.fillStyle="#000";h="Set-back "+ConEng(q,!1);p=b.measureText(h).width;b.fillText(h,g-p-2,i+4)}
function DrawHalf(){var b=document.getElementById("cnvsHalfRafter"),a=halfRafterData.split(","),k=a[0],q=parseFloat(a[1]),h=parseFloat(a[2]),s=a[3],p=a[4]=="1",a=parseFloat(a[5]),g=90-h,i=b.width,j=b.height-20,b=b.getContext("2d");b.fillStyle="#00f";b.strokeStyle="#000";b.beginPath();var n=j/Math.tan(h*RAD);b.moveTo(p?n:0,0);b.lineTo(i,0);a>0?b.lineTo(i-n,j):b.lineTo(i,j);b.lineTo(0,j);b.closePath();b.save();b.shadowOffsetY=10;b.shadowBlur=10;b.shadowColor="#c0c0c0";b.fill();b.restore();b.stroke();
b.font="13px Verdana";b.textBaseline="top";b.fillStyle="#fff";b.fillText("Half Rafter Length "+ConEng(s,!0),110,4);b.fillText("Depth "+ConEng(k,!1),110,24);b.fillText("Angle "+RoundTo(g,1)+"\u00b0",110,44);if(p||a>0)a>0&&b.fillText("Side Cut Angle "+RoundTo(a,1)+"\u00b0",110,64),b.fillText("Plumb cut "+RoundTo(h,1)+"\u00b0 = Set-back "+q,16,j-14)}function Rotate(){op+=1;DrawGazebo()}var rotTimer=null;function StartRotate(){rotTimer=setInterval("Rotate()",10)}
function StopRotate(){clearInterval(rotTimer)}
function SetRadOrSides(){document.getElementById("rbRadius").checked?(document.getElementById("spnSides").style.backgroundColor="",document.getElementById("spnRadius").style.backgroundColor="#98fb98",document.getElementById("imgTypeHelp").title="Length from any outer floor corner point to center. Or radius of outer floor circle"):(document.getElementById("spnSides").style.backgroundColor="#98fb98",document.getElementById("spnRadius").style.backgroundColor="",document.getElementById("imgTypeHelp").title=
"Side Lengths")}function ChangePitch(){var b=document.getElementById("ddPitchIn12").value;if(b!=0&&(b=Math.atan(b/12)/RAD,b>=2&&b<=50))document.getElementById("_txtRoofAngle").value=b.toFixed(3)};