var w,h,ratio,i,s,el,g,div,dragQ,game,my={};function gravityMain(wd,ht){this.version='0.31';w=typeof wd!=='undefined'?wd:'500';h=typeof ht!=='undefined'?ht:'500';w=Math.min(w,window.innerWidth-30);var s="";s+='<div id="main" style="position:relative; width:'+w+'px; min-height:'+h+'px; border: none;  background-color: white; margin:auto; display:block; box-shadow: 0px 0px 19px 10px rgba(0,0,68,0.46);">';s+='<canvas id="canvas1" style="position: absolute; width:'+w+'px; height:'+h+'px; left: 0; top:0; border: none;"></canvas>';s+='<canvas id="canvas2" style="position: absolute; width:'+w+'px; height:'+h+'px; left: 0; top:0; border: none;"></canvas>';s+='<div id="optpop" style="position:absolute; left:-450px; bottom:10px; width:460px; padding: 5px; border-radius: 9px; background-color: #88aaff; box-shadow: 10px 10px 5px 0px rgba(40,40,40,0.75); transition: all linear 0.3s; opacity:0; text-align: center; "></div>';s+='<div id="score" style="font: 20px Arial; color: #6600cc; position:absolute; right:20px; bottom:5px; width:'+(w-100)+'px; text-align: right;">0</div>';s+='<div id="thing" style="transition: all linear 0.3s; position: absolute; right: 0px; bottom: -37px; width: 270px; text-align: center; padding: 5px; border-radius: 9px; font: 20px Arial; color: white; background-color: rgba(125,0,110,0.8); box-shadow: 5px 5px 19px 4px rgba(0,0,68,0.46); ">';s+='<div>';s+='<span >mass = </span>';s+='<input type="text" id="massval" name="massval" value="1" style="display: inline-block; width: 40px; height: 18px; text-align: center; padding: 2px; border-radius: 5px; font-size: 14px; overflow: hidden; " />';s+='<span > &times; 10 </span>';s+='<input type="text" id="massexp" name="massexp" value="23" style="display: inline-block; width: 40px; height: 14px; text-align: center; padding: 2px; border-radius: 5px; font-size: 14px; overflow: hidden; vertical-align: top; " />';s+='<span > kg</span>';s+='</div>';s+='</div>';s+='<div id="win" style="position:absolute; left:-500px; top:60px; width:380px; padding: 5px; border-radius: 9px; color: white; background-color: rgba(125,0,110,0.8); box-shadow: 5px 5px 3px 0px rgba(0,0,0,0.3); transition: all linear 0.3s; opacity:0; text-align: center; font: 24px Arial; ">';s+='<div id="winTxt">Maze Completed</div>';s+='<button onclick="winClose()" style="float:right; font: 22px Arial;" class="togglebtn" >&#x2714;</button>';s+='</div>';s+='<button id="restart" style="position: absolute; bottom:-34px; left:0px; font: 14px Arial; height:30px; vertical-align:middle; z-index: 10;" class="togglebtn" onclick="gameNew()" >New</button>';s+='<button id="pause" style="position: absolute; bottom:-34px; left:45px; font: 14px Arial; height:30px; vertical-align:middle; z-index: 10;" class="togglebtn" onclick="playFlip()" >Pause</button>';s+='<button id="edit" style="position: absolute; bottom:-34px; left:102px; font: 14px Arial; height:30px; vertical-align:middle; z-index: 10;" class="togglebtn" onclick="optpop()" >Edit</button>';s+='<button id="example" style="position: absolute; bottom:-34px; left:143px; font: 14px Arial; height:30px; vertical-align:middle; z-index: 10;" class="togglebtn" onclick="exampleNext()" >Example</button>';s+='<div id="copyrt" style="font: 9px arial; color: blue; position:absolute; left:10px; bottom:-46px;">&copy; 2016 MathsIsFun.com  v'+this.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');ratio=2;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);my.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']];my.draggingQ=false;el2.addEventListener('touchstart',ontouchstart,false);el2.addEventListener('touchmove',ontouchmove,false);el2.addEventListener('touchend',ontouchend,false);el2.addEventListener("mousedown",onMouseDown,false);el2.addEventListener("mousemove",onMouseMove,false);el2.addEventListener("mouseup",onMouseUp,false);timeIncr=24*3600;univTime=0;gFact=6.673e-11;extents=[0,0,1e10,1e10];newExtents=[0,0,1e10,1e10];things=[];props=[['m','mass','kg'],['xp','x','m'],['yp','y','m'],['vx','x vel','m/s'],['vy','y vel','m/s']];lastPosn=[];clrNum=0;m=1e24;my.examples=[{name:'b',things:[[3.00e+23,9.02e+9,-5.17e+8,246,-96.3],[3.00e+23,7.65e+9,-1.10e+9,142,62.7],[1.00e+23,8.46e+9,-1.80e+8,325,-9.77]]},{name:'c',things:[[4.00e+23,2.86e+10,-1.73e+9,284,-52.0],[3.00e+23,2.78e+10,-2.80e+9,118,32.5]]},{name:'Planets',things:[[2e30,0,0,0,0,'#FFFF00'],[3.3e23,0,5.8e10,4.7e4,0,'#AAAAAA'],[4.9e24,0,1.1e11,3.5e4,0,'#CCCCFF'],[6e24,0,1.5e11,3e4,0,'#0000FF'],[6.4e23,0,2.3e11,2.4e4,0,'#FF8888']]},{name:'Earth and Moon',things:[[6e24,0,0,0,0,'#0000ff'],[7.3e22,0,3.8e8,1e3,0,'#FF0000']]},{name:'a',things:[[4.00e+23,1.73e+9,-2.39e+9,148,-129],[1.00e+23,1.59e+9,-2.46e+9,-382,174]]},];my.exampleNo=0;gameNew();animate();}
function exampleNext(){my.exampleNo=loop(my.exampleNo,0,my.examples.length-1,1);var thingsInit=my.examples[my.exampleNo].things;things=[];for(var i=0;i<thingsInit.length;i++){var newThing=new Thing(i);newThing.m=thingsInit[i][0];newThing.xp=thingsInit[i][1];newThing.yp=thingsInit[i][2];newThing.vx=thingsInit[i][3];newThing.vy=thingsInit[i][4];if(thingsInit[i].length>5)
newThing.clr=thingsInit[i][5];things.push(newThing);}
console.log("exampleNext",things,my.playQ);if(!my.playQ)playFlip();}
function ontouchstart(evt){var touch=evt.targetTouches[0];evt.clientX=touch.clientX;evt.clientY=touch.clientY;evt.touchQ=true;onMouseDown(evt)}
function ontouchmove(evt){var touch=evt.targetTouches[0];evt.clientX=touch.clientX;evt.clientY=touch.clientY;evt.touchQ=true;onMouseMove(evt)}
function ontouchend(){my.draggingQ=false;}
function onMouseDown(evt){var bRect=el.getBoundingClientRect();mouseX=(evt.clientX-bRect.left)*(el.width/ratio/bRect.width);mouseY=(evt.clientY-bRect.top)*(el.height/ratio/bRect.height);playDo(false);lastPosn[0]=mouseX;lastPosn[1]=mouseY;my.draggingQ=true;if(evt.preventDefault){evt.preventDefault();}
return false;}
function onMouseMove(evt){var bRect=el.getBoundingClientRect();mouseX=(evt.clientX-bRect.left)*(el.width/ratio/bRect.width);mouseY=(evt.clientY-bRect.top)*(el.height/ratio/bRect.height);if(my.draggingQ){g2.clearRect(0,0,el2.width,el2.height);g2.lineWidth=2;g2.strokeStyle='blue';g2.beginPath();g2.moveTo(lastPosn[0],lastPosn[1]);g2.lineTo(mouseX,mouseY);g2.stroke();}
if(evt.preventDefault){evt.preventDefault();}
return false;}
function onMouseUp(evt){var bRect=el.getBoundingClientRect();mouseX=(evt.clientX-bRect.left)*(el.width/ratio/bRect.width);mouseY=(evt.clientY-bRect.top)*(el.height/ratio/bRect.height);my.draggingQ=false;g2.clearRect(0,0,el2.width,el2.height);var xm=mouseX;var ym=mouseY;var mval=document.getElementById('massval').value;var mexp=document.getElementById('massexp').value;var mass=mval*Math.pow(10,mexp);console.log("onMouseUp",mval,mexp,mass);clrNum=(++clrNum)%my.clrs.length;var newThing=new Thing(clrNum);newThing.setXFromPixel(lastPosn[0],extents);newThing.setYFromPixel(lastPosn[1],extents);newThing.vx=(extents[2]-extents[0])*(xm-lastPosn[0])/w/2e6;newThing.vy=(extents[3]-extents[1])*(ym-lastPosn[1])/w/2e6;newThing.m=mass;things.push(newThing);playDo(true);}
function getPopHTML(){var s='';s+='<div>';for(var j=0;j<props.length;j++){p=props[j];s+='<span style="display: inline-block; width: 80px; text-align: center;padding: 2px; margin: 2px;  background-color: #00e8ff; ">'+p[1]+'</span>';}
s+='</div>';var str='';for(var i=0;i<things.length;i++){var t=things[i];s+='<div>';if(i>0)str+=',';str+='[';for(var j=0;j<props.length;j++){p=props[j];if(j>0)str+=',';str+=t[p[0]].toPrecision(3);s+='<input type="text" id="'+p[0]+i+'" name="'+p[0]+i+'" value="'+t[p[0]].toPrecision(4)+'" style="display: inline-block; width: 80px; height: 18px; text-align: center; padding: 2px; border-radius: 5px; font-size: 14px; overflow: hidden; " />';}
str+=']';s+='</div>';}
var wd=400;s+='<div style="position: relative; width:'+wd+'px; height:45px; font: 20px arial; color: black; text-align:center;">';s+='<textarea id="string" style="width:'+(wd-20)+'px; height: 60px; text-align: center; border-radius: 10px; font: 14px Arial; color: #0000ff; color: blue; background-color: #eeffee; " value="" onKeyUp="chgString()">'+str+'</textarea>';s+='</div>';s+='<div style="float:right; margin: 0 0 5px 10px;">';s+='<button onclick="optYes()" style="z-index:2; font: 22px Arial;" class="togglebtn" >&#x2714;</button>';s+='</div>';return s;}
function optpop(){console.log("optpop");my.playQ=false;var pop=document.getElementById('optpop');pop.innerHTML=getPopHTML();pop.style.transitionDuration="0.3s";pop.style.opacity=1;pop.style.zIndex=12;pop.style.left=(w-460)/2+'px';}
function optYes(){var pop=document.getElementById('optpop');pop.style.opacity=0;pop.style.zIndex=1;pop.style.left='-999px';for(var i=0;i<things.length;i++){var t=things[i];for(var j=0;j<props.length;j++){p=props[j];editVal(t,p[0],document.getElementById(p[0]+i).value);}}
my.playQ=false;playFlip();}
function editVal(o,p,v){o[p]=Number(v);}
function optChoose(n){console.log("optChoose",n);gameNo=n;game=games[gameNo];optYes();}
function chgString(){var s=document.getElementById('string').value;console.log("chgString",s);}
function gameNew(){console.log("gameNew");g.clearRect(0,0,el.width,el.height);g2.clearRect(0,0,el.width,el.height);things=[];console.log("things",things);my.playQ=true;my.frame=0;}
function testSpeed(){var time=getTimer();var j;for(var i=0;i<1000000;i++){j++;}
label1.appendText("testSpeed: "+(getTimer()-time));}
function clearAll(){things=[];}
function animate(){my.frame++;if(my.playQ)doFrame();requestAnimationFrame(animate);}
function playFlip(){playDo(!my.playQ);}
function playDo(onQ){console.log("playDo",onQ);my.playQ=onQ;}
function doFrame(){if(things.length<=0)return;for(var i=0;i<things.length-1;i++){for(var j=i+1;j<things.length;j++){var dx=things[i].xp-things[j].xp;var dy=things[i].yp-things[j].yp;var d2=dx*dx+dy*dy;if(Math.sqrt(d2)<things[i].getRadius()+things[j].getRadius()){var newvx=(things[i].vx*things[i].m+things[j].vx*things[j].m)/(things[i].m+things[j].m);var newvy=(things[i].vy*things[i].m+things[j].vy*things[j].m)/(things[i].m+things[j].m);things[i].vx=newvx;things[i].vy=newvy;if(things[i].m<things[j].m){things[i].clr=things[j].clr;}
things[i].m=things[i].m+things[j].m;things.splice(j,1);break;}else{var d3=Math.pow(d2,-1.5)*gFact*timeIncr;things[i].vx+=(-dx*things[j].m)*d3;things[i].vy+=(-dy*things[j].m)*d3;things[j].vx+=(dx*things[i].m)*d3;things[j].vy+=(dy*things[i].m)*d3;}}}
newExtents=[1e20,1e20,-1e20,-1e20];g.clearRect(0,0,el.width,el.height);for(i=0;i<things.length;i++){things[i].xp+=things[i].vx*timeIncr;things[i].yp+=things[i].vy*timeIncr;things[i].trails.push([things[i].xp,things[i].yp]);if(things[i].trails.length>600){things[i].trails.shift();}
things[i].plotTrail(newExtents);}
univTime+=timeIncr;var xRange=extents[2]-extents[0];var yRange=extents[3]-extents[1];var uRange=Math.max(xRange*h/w,yRange)*1.05;uRange=Math.max(uRange,1e10);var newxRange=newExtents[2]-newExtents[0];var newyRange=newExtents[3]-newExtents[1];var newuRange=Math.max(newxRange*h/w,newyRange)*1.1;newuRange=Math.max(newuRange,1e10);uRange=uRange*0.1+newuRange*0.9;document.getElementById('score').innerHTML=uRange.toPrecision(4);extents[0]=(newExtents[2]+newExtents[0])/2-w/h*uRange/2;extents[2]=(newExtents[2]+newExtents[0])/2+w/h*uRange/2;extents[1]=(newExtents[3]+newExtents[1])/2-uRange/2;extents[3]=(newExtents[3]+newExtents[1])/2+uRange/2;}
function Thing(clrNum){this.xp=0;this.yp=0;this.vx=0;this.vy=0;this.m=0;this.trails=[];this.clr=my.clrs[clrNum][1];}
Thing.prototype.plotTrail=function(newExtents){var len=this.trails.length;g.strokeStyle=hex2rgba(this.clr,0.2);for(var j=0;j<len;j++){var xPlot=this.trails[j][0];var yPlot=this.trails[j][1];if(j==0){g.moveTo(this.scaleToX(xPlot),this.scaleToY(yPlot));}else{g.lineTo(this.scaleToX(xPlot),this.scaleToY(yPlot));}
if(xPlot<newExtents[0])newExtents[0]=xPlot;if(yPlot<newExtents[1])newExtents[1]=yPlot;if(xPlot>newExtents[2])newExtents[2]=xPlot;if(yPlot>newExtents[3])newExtents[3]=yPlot;}
g.stroke();g.lineWidth=2;g.moveTo(this.scaleToX(xPlot),this.scaleToY(yPlot));g.beginPath();g.fillStyle=hex2rgba(this.clr,0.2);g.arc(this.scaleToX(xPlot),this.scaleToY(yPlot),3*w*this.getRadius()/((extents[2]-extents[0])),0,2*Math.PI);g.fill();g.moveTo(this.scaleToX(xPlot),this.scaleToY(yPlot));g.beginPath();g.fillStyle=hex2rgba(this.clr,0.8);g.arc(this.scaleToX(xPlot),this.scaleToY(yPlot),1*w*this.getRadius()/((extents[2]-extents[0])),0,2*Math.PI);g.fill();g.fillText(parseInt(Math.sqrt(this.vx*this.vx+this.vy*this.vy)).toString(),this.scaleToX(xPlot),this.scaleToY(yPlot));};Thing.prototype.scaleToX=function(rawPos){return(w*(rawPos-extents[0])/(extents[2]-extents[0]));};Thing.prototype.scaleToY=function(rawPos){return(h*(rawPos-extents[1])/(extents[3]-extents[1]));};Thing.prototype.setXFromPixel=function(Pixel,extents){this.xp=Pixel*(extents[2]-extents[0])/w+extents[0];};Thing.prototype.setYFromPixel=function(Pixel,extents){this.yp=Pixel*(extents[3]-extents[1])/h+extents[1];};Thing.prototype.getRadius=function(){return(Math.pow(this.m,0.33));};function getRandomInt(min,max){return Math.floor(Math.random()*(max-min+1))+min;}
function hex2rgba(hex,opacity){hex=hex.replace('#','');var r=parseInt(hex.substring(0,2),16);var g=parseInt(hex.substring(2,4),16);var b=parseInt(hex.substring(4,6),16);result='rgba('+r+','+g+','+b+','+opacity+')';return result;}
function loop(currNo,minNo,maxNo,incr){if(incr===undefined)incr=1;currNo+=incr;var range=maxNo-minNo+1;if(currNo<minNo){currNo=maxNo-(-currNo+maxNo)%range;}
if(currNo>maxNo){currNo=minNo+(currNo-minNo)%range;}
return currNo;}