var w,h,ratio,i,s,el,g,div,dragQ,game,my={};function circlearealinesMain(mode){my.version='0.81';typ=typeof mode!=='undefined'?mode:'longitudinal';w=600;h=300;var s='';s+='<div id="main" style="position:relative; width:'+w+'px; min-height:'+h+'px; background-color: white; margin:auto; display:block; border: 1px solid black; border-radius: 10px;">';s+='<div style="position:relative;">';s+='<canvas id="canvas1" style="position: absolute; width:'+w+'px; height:'+w+'px; left: 0px; top: 0px; z-index: 3; border: none;"></canvas>';s+='<canvas id="canvas2" style="position: absolute; width:'+w+'px; height:'+w+'px; left: 0px; top: 0px; z-index: 2; border: none;"></canvas>';s+='</div>';s+='<div id="options" style="position: absolute; width:'+w+'px; left:5px; top:5px; background-color: rgba(0,255,0,0.1); font: 20px arial; color: black; text-align:center; z-index:5; ">';var lblStyle='display: inline-block; font:15px Arial; width: 80px; text-align: right; margin-right:10px;';var txtStyle='display: inline-block; width:50px; font: 18px Arial; color: #6600cc; text-align: left;';s+='<div style="'+lblStyle+'">Lines:</div>'
s+='<input type="range" id="r1"  value="9" min="2" max="50" step="1"  style="width:200px; height:10px; border: none; " oninput="onLinenChg(0,this.value)" onchange="onLinenChg(1,this.value)" />';s+='<div id="linen" style="'+txtStyle+'">2</div>';s+='<br>';s+='<div style="'+lblStyle+'">Sides:</div>'
s+='<input type="range" id="r2"  value="9" min="4" max="20" step="1"  style="width:200px; height:10px; border: none; " oninput="onSegChg(0,this.value)" onchange="onSegChg(1,this.value)" />';s+='<div id="seg" style="'+txtStyle+'">2</div>';s+='<br>';s+='</div>'
s+='<div style="position:absolute; right:2px; top:5px; z-index:6; ">';s+=getPlayHTML(36);s+='</div>';s+='<div id="copyrt" style="font: 10px Arial; font-weight: bold; color: #6600cc; position:absolute; bottom:5px; left:5px; text-align:center;">&copy; 2018 MathsIsFun.com  v'+my.version+'</div>';s+='</div>';document.write(s);el=document.getElementById('canvas1');ratio=2;el.width=w*ratio;el.height=h*ratio;el.style.width=w+"px";el.style.height=h+"px";g=el.getContext("2d");g.setTransform(ratio,0,0,ratio,0,0);el2=document.getElementById('canvas2');el2.width=w*ratio;el2.height=h*ratio;el2.style.width=w+"px";el2.style.height=h+"px";g2=el2.getContext("2d");g2.setTransform(ratio,0,0,ratio,0,0);dragType='';this.clrs=[["Blue",'#0000FF'],["Red",'#FF0000'],["Black",'#000000'],["Green",'#00cc00'],["Orange",'#FFA500'],["Slate Blue",'#6A5ACD'],["Lime",'#00FF00'],["Spring Green",'#00FF7F'],["Teal",'#008080'],["Gold",'#ffd700'],["Med Purple",'#aa00aa'],["Light Blue",'#ADD8E6'],["Navy",'#000080'],["Purple",'#800080'],["Dark SeaGreen",'#8FBC8F']];clrNum=0;console.log("typ",typ);my.lineN=20;document.getElementById('linen').innerHTML=my.lineN;my.segN=6;document.getElementById('seg').innerHTML=my.segN*2;my.rad=(w-20)/(2*Math.PI);my.frameNo=0;reStart();}
function reStart(){my.playQ=true;anim();}
function anim(){if(my.playQ){doCircle();requestAnimationFrame(anim);}}
function doCircle(){g.clearRect(0,0,el.width,el.height);var ratio=(my.frameNo-20)/180;ratio=Math.min(Math.max(0,ratio),1);var midPt={x:w/2,y:h/2};for(var i=0;i<my.lineN;i++){var r=my.rad*(i+1)/my.lineN;var n=my.segN;var segL=Math.PI*r/n;var sttPt={x:midPt.x,y:midPt.y+r};g.strokeStyle='black';var dbg=false;if(my.frameNo==0&&i==(my.lineN)){dbg=true;}
g.beginPath();drawArc(sttPt,n,segL,ratio,1,dbg);g.stroke();g.beginPath();drawArc(sttPt,n,segL,ratio,-1,false);g.stroke();}
if(my.frameNo>220){drawTriangle(midPt);}
if(my.frameNo++>400)my.frameNo=0;}
function drawArc(sttPt,n,l,ratio,dir,dbg){g.moveTo(sttPt.x,sttPt.y);var currPt={x:sttPt.x,y:sttPt.y}
angChg=Math.PI/n*(1-ratio);var ang=0;ang-=angChg/2;for(var i=0;i<n;i++){currPt.x+=l*Math.cos(ang)*dir;currPt.y+=l*Math.sin(ang);ang-=angChg;g.lineTo(currPt.x,currPt.y);}}
function drawTriangle(midPt){g.strokeStyle='blue';g.fillStyle='rgba(0,0,255,0.1)';g.beginPath();g.moveTo(midPt.x,midPt.y);g.lineTo(midPt.x-my.rad*Math.PI,midPt.y+my.rad);g.lineTo(midPt.x+my.rad*Math.PI,midPt.y+my.rad);g.closePath();g.fill();g.stroke();g.font="40px Gabriola";g.textAlign="center";g.fillStyle='blue';g.beginPath();g.fillText("2πr",midPt.x,midPt.y+my.rad+24);g.fill();g.stroke();g.beginPath();g.moveTo(midPt.x,midPt.y);g.lineTo(midPt.x,midPt.y+my.rad);g.stroke();g.beginPath();g.fillText("r",midPt.x+10,midPt.y+my.rad/2+10);g.fill();}
function onLinenChg(n,v){console.log("onLinenChg="+n,v);my.lineN=Number(v);document.getElementById('linen').innerHTML=v;}
function onSegChg(n,v){console.log("onSegChg="+n,v);my.segN=Number(v);document.getElementById('seg').innerHTML=v*2;}
function getPlayHTML(w){var s='';s+='<style type="text/css">';s+='.btn {display: inline-block; position: relative; width:'+w+'px; height:'+w+'px; margin-right:'+w*0.2+'px; padding: .6em; border: 0 solid rgba(208,208,248,1); border-radius: 10em; background: linear-gradient(#fff, #ccf), #c9c5c9; box-shadow: 0 3 4 rgba(0,0,0,.4); }';s+='.btn:hover {background: linear-gradient(#f5f5f5, #b9b9b9), #c9c5c9; }';s+='.btn:before, button:after {content: " "; position: absolute; }';s+='.btn:active {top:'+w*0.05+'px; box-shadow: 0 '+w*0.02+'px '+w*0.03+'px rgba(0,0,0,.4); }';s+='.play:before {  left: '+w*0.36+'px; top: '+w*0.22+'px; width: 0; height: 0; border: '+w*0.3+'px solid transparent; border-left-width: '+w*0.4+'px; border-left-color: blue;  }';s+='.play:hover:before {border-left-color: yellow; }';s+='.pause:before, .pause:after {display: block; left: '+w*0.29+'px; top: '+w*0.28+'px; width: '+w*0.19+'px; height: '+w*0.47+'px; background-color: blue; }';s+='.pause:after {left: '+w*0.54+'px; }';s+='.pause:hover:before, .pause:hover:after {background-color: yellow; }';s+='</style>';s+='<button id="playBtn" class="btn pause" onclick="togglePlay()" ></button>';return s;}
function togglePlay(){var btn='playBtn';if(my.playQ){my.playQ=false;document.getElementById(btn).classList.add("play");document.getElementById(btn).classList.remove("pause");}else{my.playQ=true;document.getElementById(btn).classList.add("pause");document.getElementById(btn).classList.remove("play");anim();}
if(my.colNo<my.colMax)my.cols[my.colNo].anim();}