function Window_onload(){DrawGazebo();DrawHip();document.getElementById("cnvsHalfRafter")&&DrawHalf();document.getElementById("cnvsFullCenter")&&DrawCenter();SetNumeric();SetRadOrSides()}
function Form_onsubmit(){var b=parseInt(document.getElementById("txtKingPostFaceWidth").value),a=parseInt(document.getElementById("txtRafterThick").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 to "+a+" mm and continue?"):!0}
function GoBracket(){var b=document.getElementById("ddSides").value;b+="&fw="+document.getElementById("txtKingPostFaceWidth").value;b+="&ha="+document.getElementById("lblHipRafterAngle").innerHTML;window.open("GazeboBracket.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(","),j=parseFloat(a[0]),l=parseFloat(a[1]),g=parseFloat(a[2]),s=a[3],q=a[4]>0,h=a[5]>0,o=parseFloat(a[6]),i=parseFloat(a[7]),n=parseFloat(a[8]),p=parseFloat(a[9]),v=a[10],w=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,k=360/j*RAD;a.fillStyle=g>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<j;m++)d+=k,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(g>0){d=g/Math.cos(k/2);g=c*(l/(l+d));d=r;f=g*Math.cos(d)+c;e=g*Math.sin(d)+c;a.beginPath();a.moveTo(f,e);for(m=0;m<j;m++)d+=k,f=g*Math.cos(d)+c,e=g*Math.sin(d)+c,a.lineTo(f,e);a.save();a.fillStyle="#ececec";a.fill();a.stroke();a.restore()}else g=c;a.beginPath();a.strokeStyle="#ffa500";d=r;a.lineWidth=
3;for(m=0;m<j;m++)a.moveTo(c,c),f=c*Math.cos(d)+c,e=c*Math.sin(d)+c,a.lineTo(f,e),d+=k;a.stroke();if(h)a.beginPath(),a.strokeStyle="#080",a.arc(c,c,g,0,360*RAD,!0),a.lineWidth=1,a.stroke();h=c*Math.cos(k*0.5);g=c/2*Math.cos(k*0.5);a.lineWidth=2;if(s=="half"){a.beginPath();var u=c/2,d=r,f=u*Math.cos(d)+c,e=u*Math.sin(d)+c;a.moveTo(f,e);for(m=0;m<j;m++)d+=k,f=u*Math.cos(d)+c,e=u*Math.sin(d)+c,a.lineTo(f,e);a.strokeStyle="#f00";a.stroke();a.beginPath();d=r;for(m=0;m<j;m++)f=g*Math.cos(d+k*0.5)+c,e=g*
Math.sin(d+k*0.5)+c,a.moveTo(f,e),f=h*Math.cos(d+k*0.5)+c,e=h*Math.sin(d+k*0.5)+c,a.lineTo(f,e),d+=k;a.strokeStyle="#00f";a.stroke()}if(s=="full"){a.beginPath();d=r;for(m=0;m<j;m++)a.moveTo(c,c),f=h*Math.cos(d+k*0.5)+c,e=h*Math.sin(d+k*0.5)+c,a.lineTo(f,e),d+=k;a.strokeStyle="#008000";a.stroke()}if(q){a.beginPath();d=r;e=k/2;f=c*Math.sin(e)/2*Math.cos(e);e=Math.tan(e)*f;e=c-e;s=Math.atan(f/e);q=e/Math.cos(s);h=c/2;for(m=0;m<j;m++)g=h*Math.cos(d)+c,u=h*Math.sin(d)+c,a.moveTo(g,u),f=q*Math.cos(d-s)+
c,e=q*Math.sin(d-s)+c,a.lineTo(f,e),a.moveTo(g,u),f=q*Math.cos(d+s)+c,e=q*Math.sin(d+s)+c,a.lineTo(f,e),d+=k;a.strokeStyle="#00f";a.stroke()}if(o>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+k)+c;e=c*Math.sin(d+k)+c;a.lineTo(f,e);a.lineTo(c,c);a.fill();d=l/Math.cos(n*RAD);d=b.width/2/d;o*=d;i=c-i*d;o<4&&(o=4);for(d=r;i>10;)f=i*Math.cos(d)+c,e=i*Math.sin(d)+c,a.moveTo(f,e),f=i*Math.cos(d+
k)+c,e=i*Math.sin(d+k)+c,a.lineTo(f,e),i-=o;a.stroke()}a.beginPath();a.strokeStyle="#000";a.fillStyle="#fff";a.lineWidth=1;d=r-k/2;f=10*Math.cos(d)+c;e=10*Math.sin(d)+c;a.moveTo(f,e);for(m=0;m<j;m++)d+=k,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);i=p*RAD;o=(360-p*j)/j*RAD;d=r-o/2;a.fillStyle="#F0FFFF";
a.lineWidth=1;a.beginPath();for(m=0;m<j;m++)a.moveTo(c,c),d+=o,f=c*Math.cos(d)+c,e=c*Math.sin(d)+c,a.lineTo(f,e),d+=i,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();j=r+k*1.5;b=Math.cos(i/2);f=b*c*Math.cos(j)+c;e=b*c*Math.sin(j)+c;a.beginPath();a.moveTo(c,c);a.lineTo(f,e);a.strokeStyle="#080";a.stroke();a.font="12px Arial";a.fillStyle="#00f";
a.save();a.translate(f,e);a.rotate(j);a.fillText(t,-50,-2);a.restore();a.save();a.translate(c,c);a.rotate(r+i/2+o/2);a.fillText(RoundTo(p,1)+"\u00b0",18,4);a.restore();t=c*Math.cos(i*0.5);f=t*Math.cos(d+k*0.5)+c;e=t*Math.sin(d+k*0.5)+c+2;a.save();a.translate(f,e);a.rotate(90*RAD+r+o/2+i/2);a.fillText(v,0,12);a.restore();d+=k;f=t/2*Math.cos(d)+c;e=t/2*Math.sin(d)+c;a.save();a.translate(f,e);a.rotate(r+o/2+i);a.fillText(w,0,-4);a.restore();d=r+o/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-p)/2,1)+"\u00b0";a.fillText(disp,-36,12);a.restore()}
function DrawHip(){var b=document.getElementById("cnvsHip"),a=hipData.split(","),j=a[0],l=parseFloat(a[1]),g=parseFloat(a[2]),s=a[3],q=a[4]=="1",h=parseFloat(a[5]),o=a[6],i=90-g,n=b.width,p=b.height;p-=20;b=b.getContext("2d");b.font="13px Verdana";b.textBaseline="top";b.fillStyle="#ffa500";b.strokeStyle="#000";b.beginPath();var v=p/Math.tan(g*RAD);b.moveTo(q?v:0,0);b.lineTo(n,0);b.lineTo(n-v,p);var w,t,c;if(h>0){t=h/(j/p);w=160-v;c=t*Math.sin(i*RAD);q=w+c/Math.tan(g*RAD);c=p-c;var r=q+t*Math.cos(i*
RAD);t=h*Math.tan(i*RAD);b.lineTo(r,p);b.lineTo(q,c);b.lineTo(160,0);b.lineTo(w,p);b.lineTo(0,p);c=Math.sqrt(Math.pow(t,2)+Math.pow(h,2))}else b.lineTo(0,p);b.closePath();b.save();b.shadowOffsetY=10;b.shadowBlur=10;b.shadowColor="#c0c0c0";b.fill();b.restore();b.stroke();b.fillStyle="#000";h>0&&(b.fillText(o,162,2),b.fillText(Math.round(t),160-v-20,p-20),b.fillText(Math.round(c),w,p));l="Set-back "+l;h=b.measureText(l).width;b.fillText(l,n-h-2,p+4);l="Plumb cut "+g+"\u00b0";h=b.measureText(l).width;
b.fillText(l,n-h-10,2);b.fillText("Hip Length "+s,6,2);b.fillText("Depth "+j,n*0.6,p/2-12);b.fillText("Angle "+RoundTo(i,1)+"\u00b0",n*0.6,p/2+12);j=parseFloat(a[8]);if(j>0){a=parseFloat(a[7]);s=Math.tan(j*RAD)*(a/2);b=document.getElementById("cnvsHipChamfer");n=b.width;p=b.height-30;g=Math.tan(j*RAD)*(n/2)+2;b=b.getContext("2d");b.beginPath();b.moveTo(n/2,1);b.lineTo(0,g);b.lineTo(0,p);i=n/20;l=10;for(h=0;h<=20;h++)b.lineTo(h*i,p+Math.random()*20+l),l=h%2?10:-10;b.lineTo(n,p);b.lineTo(n,g);b.closePath();
b.fillStyle="#ffa500";b.fill();b.stroke();b.beginPath();b.strokeStyle="#fff";b.moveTo(0,g);b.lineTo(n,g);b.moveTo(n/2,1);b.lineTo(n/2,g+30);b.stroke();b.font="14px Arial";b.textBaseline="top";b.fillStyle="#000";b.fillText(j+"\u00b0",4,g+2);l=RoundTo(s,1);b.fillText(l,n/2+4,g+2);b.fillText("Setdown",n/2+4,g+16);l="Chamfer Angle";h=b.measureText(l).width;b.fillText(l,n/2-h/2,70);l=a+" thick";h=b.measureText(l).width;b.fillText(l,n/2-h/2,100)}}
function DrawCenter(){var b=document.getElementById("cnvsFullCenter"),a=centerRafterData.split(","),j=a[0],l=parseFloat(a[1]),g=parseFloat(a[2]),s=a[3],q=a[4]=="1",a=90-g,h=b.width,o=b.height-20,b=b.getContext("2d");b.fillStyle="#080";b.strokeStyle="#000";b.beginPath();var i=o/Math.tan(g*RAD);b.moveTo(q?i:0,0);b.lineTo(h,0);b.lineTo(h-i,o);b.lineTo(0,o);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";g="Plumb cut "+g+"\u00b0";q=b.measureText(g).width;b.fillText(g,h-q-10,2);b.fillText("Centre Rafter Length "+s,100,26);b.fillText("Depth "+j,100,44);b.fillText("Angle "+RoundTo(a,1)+"\u00b0",100,62);b.fillStyle="#000";g="Set-back "+l;q=b.measureText(g).width;b.fillText(g,h-q-2,o+4)}
function DrawHalf(){var b=document.getElementById("cnvsHalfRafter"),a=halfRafterData.split(","),j=a[0],l=parseFloat(a[1]),g=parseFloat(a[2]),s=a[3],q=a[4]=="1",a=parseFloat(a[5]),h=90-g,o=b.width,i=b.height-20,b=b.getContext("2d");b.fillStyle="#00f";b.strokeStyle="#000";b.beginPath();var n=i/Math.tan(g*RAD);b.moveTo(q?n:0,0);b.lineTo(o,0);a>0?b.lineTo(o-n,i):b.lineTo(o,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";b.fillText("Half Rafter Length "+s,110,4);b.fillText("Depth "+j,110,24);b.fillText("Angle "+RoundTo(h,1)+"\u00b0",110,44);if(q||a>0)a>0&&b.fillText("Side Cut Angle "+RoundTo(a,1)+"\u00b0",110,64),b.fillText("Plumb cut "+RoundTo(g,1)+"\u00b0 = Set-back "+l,16,i-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")};