var w,h,ratio,i,s,el,g,div,dragQ,game,my={};function investgraphMain(){var version='0.891';w=500;h=420;s="";s+='<div style="position:relative; width:'+w+'px; border: none; margin:auto; display:block;">';s+='<div style="display: block; width:96%; padding:2%; text-align: center; background-color: #def; z-index: 20;">';var inps=[['&nbsp;&nbsp; Title','title'],['X','xtitl'],['Y','ytitl'],['Values','vals']];for(var i=0;i<inps.length;i++){var inp=inps[i];if(i<3){s+='<div style="display: inline-block; font: bold 14px Arial; color:blue; text-align:center; " >'+inp[0]+':&nbsp;</div>';s+='<input id="'+inp[1]+'" style="width:100px; font: 15px Arial; color:blue;  padding:3px; margin: 3px; text-align:center;  z-index:2;" value="" onkeyup="go(-1)"  onchange ="go(-1)" /> &nbsp;';}else{s+='<div style="">';s+='<div style="display: inline-block; font: bold 14px Arial; text-align:center; vertical-align: top; " >'+inp[0]+':&nbsp;</div>';s+='<textarea id="'+inp[1]+'" style="width:400px; height:50px; font: bold 16px Arial; padding:3px; text-align:center;  z-index:2;" value="" onkeyup="go(-1)"  onchange ="go(-1)" ></textarea>';s+='</div>';}}
s+=getPopHTML();var groupCss='<div style="display: inline-block; font: 15px Arial; text-align:center; vertical-align: top; background-color: #efd; margin:3px; padding:2px; border-radius:5px; border: 2px inset yellow;" >';s+='<div style="display: inline-block; vertical-align: top; margin:3px; padding:2px; border-radius:5px; " >';s+='<button style="color: #8888ff; font-size: 14px;" class="togglebtn" onclick="doPop()" >New</button>';s+='</div>';my.typNPVQ=true;s+=groupCss;s+='<button id="typNPVBtn" onclick="toggleTyp()" style="z-index:2;" class="togglebtn hi" >NPV</button>';s+='<br>';s+='<button id="typLoanBtn" onclick="toggleTyp()" style="z-index:2;" class="togglebtn lo" >Loan</button>';s+='</div>';my.dispGraphQ=true;s+=groupCss;s+='<button id="dispGraphBtn" onclick="toggleDisp()" style="z-index:2;" class="togglebtn hi" >Graph</button>';s+='<br>';s+='<button id="dispTableBtn" onclick="toggleDisp()" style="z-index:2;" class="togglebtn lo" >Table</button>';s+='</div>';s+='<div style="display: inline-block; vertical-align: top; margin:3px; padding:2px; border-radius:5px; " >';s+='<button id="numsBtn" onclick="toggleNums()" style="z-index:2;" class="togglebtn hi" >Nums</button>';s+='<button style="color: #8888ff; font-size: 14px;" class="togglebtn" onclick="canvasSave()" >Save</button>';s+='<button style="color: #8888ff; font-size: 14px;" class="togglebtn" onclick="canvasPrint()" >Print</button>';s+='</div>';s+='<br>';s+='<div style="display: inline-block; font:15px Arial; width: 100px; text-align: right; margin-right:10px;">Interest Rate:</div>'
s+='<input type="range" id="r1"  value="7" min="0" max="15" step="0.1"  style="z-index:2; width:240px; height:10px; border: none; " oninput="onIChg(0,this.value)" onchange="onIChg(1,this.value)" />';s+='<div id="iLbl" style="display: inline-block; width:50px; font: 18px Arial; color: #6600cc; text-align: left;">2</div>';s+='<br>';s+='</div>';s+='<div id="tbl">';s+='</div>';s+='<canvas id="can" width="'+w+'" height="'+h+'" style="z-index:1;"></canvas>';s+='<div id="copyrt" style="font: 10px Arial; color: #6600cc;  text-align:center;">&copy; 2017 MathsIsFun.com  v'+version+'</div>';s+='</div>';document.write(s);el=document.getElementById('can');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);el.addEventListener('touchmove',ontouchmove,false);el.addEventListener('mousemove',onmousemove,false);this.vals=[-1000,200,200,200,200,200];document.getElementById('vals').value=arr2str(this.vals);this.lt=70;this.tp=30;this.wd=420;this.ht=300;my.lblYMax=0;xstt=0;xend=6;ystt=0;yend=10;my.numsQ=true;my.clrs={expense:'#f44',income:'#88f',loan:'#f90',interest:'#c44',repay:'#0ff'}
my.i=0.07;document.getElementById('r1').value=my.i*100;document.getElementById('iLbl').innerHTML=parseInt(my.i*10000)/100+'%';my.periods=[];this.typ=0;go(0);doPop();}
function onIChg(n,v){console.log("onIChg="+n,v);v=Number(v);document.getElementById('iLbl').innerHTML=v+'%';my.i=v/100;go(0);}
function arr2str(arr){return arr.join(',');}
function str2arr(s){return s.split(',');}
function toggleNums(){my.numsQ=!my.numsQ;toggleBtn("numsBtn",my.numsQ);go(-1);}
function toggleDisp(){my.dispGraphQ=!my.dispGraphQ;toggleBtn("dispGraphBtn",my.dispGraphQ);toggleBtn("dispTableBtn",!my.dispGraphQ);go(-1);}
function toggleTyp(){my.typNPVQ=!my.typNPVQ;toggleBtn("typNPVBtn",my.typNPVQ);toggleBtn("typLoanBtn",!my.typNPVQ);go(-1);}
function toggleBtn(btn,onq){if(onq){document.getElementById(btn).classList.add("hi");document.getElementById(btn).classList.remove("lo");}else{document.getElementById(btn).classList.add("lo");document.getElementById(btn).classList.remove("hi");}}
function tbl2vals(){var s='';for(var i=0;i<my.periods.length;i++){var div=document.getElementById('t'+i);console.log("tbl2vals",div.value);if(i>0)s+=',';s+=div.value;}
document.getElementById('vals').value=s;}
function go(n){this.title=document.getElementById('title').value;this.xtitl=document.getElementById('xtitl').value;this.ytitl=document.getElementById('ytitl').value;this.vals=str2arr(document.getElementById('vals').value);if(my.dispGraphQ){document.getElementById('tbl').innerHTML='';el.style.height=h+"px";g.clearRect(0,0,el.width,el.height);if(my.typNPVQ){periodCalc('npv');setScale();drawGraph('');drawBarLine('npv');}else{periodCalc('loan');setScale();drawGraph('');drawBarLine('loan');}}else{el.style.height=0+"px";if(my.typNPVQ){periodCalc('table');drawTable();}else{periodCalc('table');drawTable();}}}
function onmousemove(e){}
function ontouchmove(evt){var touch=evt.targetTouches[0];evt.clientX=touch.clientX;evt.clientY=touch.clientY;evt.touchQ=true;onmousemove(evt);evt.preventDefault();}
function setScale(){xstt=0;xend=my.periods.length+1;xspan=xend-xstt;if(xspan<=0)xspan=0.1;xscale=xspan/this.wd;var ymin=0;var ymax=0;for(var i=0;i<my.periods.length;i++){var per=my.periods[i];ymin=Math.min(ymin,per.stt,per.incInt,per.fin);ymax=Math.max(ymax,per.stt,per.incInt,per.fin);}
borderFactor=1.1;var yMid=(ymin+ymax)/2;var yhalfspan=borderFactor*(ymax-ymin)/2;ystt=yMid-yhalfspan;yend=yMid+yhalfspan;if(ymin>=0&&ymax>=0)ystt=0;yspan=yend-ystt;if(Math.abs(yspan)<0.1)yspan=0.1;yscale=yspan/this.ht;}
function periodCalc(typ){my.periods=[];var curr=0;var fact=1;for(i=0;i<vals.length;i++){var stt=curr;var int=my.i*curr;var cash=0;if(vals[i]!=undefined){cash=Number(vals[i]);}
if(my.typNPVQ){var pv=cash*fact;curr+=pv;var fin=curr;curr=fin;fact/=(1+my.i);my.periods.push({cash:cash,pv:pv,stt:stt,incInt:stt,fin:fin});}else{curr+=int;var incInt=curr;curr+=cash;var fin=curr;curr=fin;my.periods.push({cash:cash,int:int,stt:stt,incInt:incInt,fin:fin});}}}
function drawTable(){var s='';s+='<div>';if(my.typNPVQ){s+=getDivStr(id,'','period');s+=getDivStr(id,'In/Out','title');s+=getDivStr(id,'PV','title');s+=getDivStr(id,'NPV','title');}else{s+=getDivStr(id,'','period');s+=getDivStr(id,'Loan/Repay','title');s+=getDivStr(id,'Interest','title');s+=getDivStr(id,'Debt','title');}
s+='</div>';for(var i=0;i<my.periods.length;i++){var per=my.periods[i];var id='t'+i.toString();s+='<div>';if(my.typNPVQ){s+=getDivStr(id,i,'period');s+=getDivStr(id,per.cash,'in');s+=getDivStr(id,per.pv,'fix');s+=getDivStr(id,per.fin,'fix');}else{s+=getDivStr(id,i,'period');s+=getDivStr(id,per.cash,'in');s+=getDivStr(id,per.int,'fix');s+=getDivStr(id,per.fin,'fix');}
s+='</div>';}
var div=document.getElementById('tbl');div.innerHTML=s;}
function getDivStr(id,val,typ){var s='';switch(typ){case 'period':s+='<div style="display: inline-block; width:20px; font: bold 15px Arial; color:blue;  padding:3px; margin: 3px; text-align:center;  z-index:2;" value="'+val+'" />';s+=val;s+='</div>';break;case 'title':s+='<div style="display: inline-block; width:80px; font: bold 15px Arial; color:blue;  padding:3px; margin: 3px; text-align:center;  z-index:2;" value="'+val+'" />';s+=val;s+='</div>';break;case 'in':s+='<input id="'+id+'" style="width:80px; font: 15px Arial; color:blue;  padding:3px; margin: 3px; text-align:center;  z-index:2;" value="'+val+'" onkeyup="tbl2vals()"  onchange ="tbl2vals()" /> &nbsp;';break;case 'fix':s+='<div style="display: inline-block; width:80px; font: 15px Arial; color:blue;  padding:3px; margin: 3px; text-align:center;  z-index:2;" value="'+val+'" />';s+=fmt2(val);s+='</div>';break;default:}
return s;}
function fmt2(v){if(Math.round(v)==v){return v;}else{return parseFloat(Math.round(v*100)/100).toFixed(2);}}
function drawBarLine(typ){g.font='18px Verdana';g.textAlign='center';g.fillStyle='black';g.fillText(this.title,this.lt+this.wd/2,this.tp-8);g.font='16px Verdana';g.fillStyle='blue';g.fillText(this.xtitl,this.lt+this.wd/2,my.lblYMax+20);g.fillStyle='darkorange';var txt=this.ytitl;var rot=-Math.PI/2;g.rotate(rot);g.fillText(txt,-ht/2-10,15);g.rotate(-rot);g.font='14px Verdana';g.textAlign='center';TotVal=0;if(my.pctsQ){for(i=0;i<vals.length;i++){if(vals[i]!=undefined){TotVal+=Number(vals[i]);}}
if(my.numsQ){PctHeight=25;}else{PctHeight=0;}}
xTick=1;clrnum=0;g.lineStyle='0000ff';g.lineWidth=1;prevPt=[];var xGap=this.wd/xspan;var zero=this.tp+this.ht+ystt/yscale;for(var i=0;i<my.periods.length;i++){var xp=this.lt+(i+1)*xGap;console.log(">",i,xp);var period=my.periods[i];var stt=period.stt;var mid=period.incInt;var fin=period.fin;barwidth=0.8*this.wd/xspan;if(barwidth>50)barwidth=50;switch(typ){case "npv":g.strokeStyle='black';g.beginPath();if(stt>=fin){g.fillStyle=my.clrs.expense;}else{g.fillStyle=my.clrs.income;}
g.rect(xp,zero-stt/yscale,barwidth/2,(stt-fin)/yscale);g.stroke();g.fill();if(my.numsQ){var yText=-3;if(mid-fin>0)yText=12;g.fillStyle='black';g.beginPath();g.fillText(fmt2(fin),xp+barwidth/4,zero-fin/yscale+yText);g.fill();}
break;case "loan":g.strokeStyle='black';g.beginPath();g.fillStyle=my.clrs.interest;g.rect(xp-barwidth/2,zero-stt/yscale,barwidth/2,(stt-mid)/yscale);g.stroke();g.fill();g.beginPath();if(stt>=fin){g.fillStyle=my.clrs.loan;}else{g.fillStyle=my.clrs.repay;}
g.rect(xp,zero-mid/yscale,barwidth/2,(mid-fin)/yscale);g.stroke();g.fill();if(my.numsQ){var yText=-3;if(mid-fin>0)yText=17;g.fillStyle='black';g.beginPath();g.fillText(fmt2(fin),xp+barwidth/4,zero-fin/yscale+yText);g.fill();}
break;default:}}}
function getPlace(angle){var places=[[0,75,[0,0,"left"]],[75,105,[0,15,"center"]],[105,255,[0,0,"right"]],[255,285,[0,0,"center"]],[285,360,[]]];places[4][2]=places[0][2];var angled=angle*180/Math.PI;angled-=Math.round(angled/360-0.5)*360;for(var i=0;i<places.length;i++){if(angled>=places[i][0]&&angled<=places[i][1]){return(places[i][2]);}}
return(places[0][2]);}
function drawGraph(typ){g.beginPath();g.lineWidth=1;g.strokeStyle='black';g.fillStyle='rgba(0,0,255,0.3)';g.rect(this.lt,this.tp,this.wd,this.ht);g.stroke();my.lblYMax=0;xIntq=true;xMajorTick=1;xMinorTick=1;yIntq=false;if(yIntq){yMajorTick=1;yMinorTick=1;}else{LogSpan=Math.log(yspan*0.6)*Math.LOG10E;yMajorTick=Math.pow(10,Math.floor(LogSpan));if((LogSpan-Math.floor(LogSpan))<0.4){yMajorTick/=2;}
yMinorTick=yMajorTick/5;}
g.strokeStyle='rgba(0,0,255,0.2)';xTick=xMajorTick;yTick=yMajorTick;for(var x=Math.ceil(xstt/xTick)*xTick;x<=xend;x+=xTick){i=(x-xstt)/xscale;label=(x-1).toString();lineq=false;labelq=false;inputid=undefined;if(xIntq){if(x>xstt&&x<xend){lineq=true;labelq=true;inputid=(x-1)+","+0;}}else{lineq=true;if(TickLevel==0){labelq=true;}}
if(typ!='dot'){if(lineq){g.beginPath();g.moveTo(this.lt+i,this.tp);g.lineTo(this.lt+i,this.tp+this.ht);g.stroke();}}
if(labelq){var txtWidth=100;if(xend>2)txtWidth=this.wd/xend;g.font='13px Verdana';g.fillStyle='blue';g.textAlign='center';wrapText(g,label,this.lt+i,this.tp+this.ht+18,txtWidth,16);}}
for(var y=Math.round(ystt/yTick)*yTick;y<=yend;y+=yTick){j=(yend-y)/yscale;label=y;lineq=false;labelq=true;inputid=undefined;if(yIntq){if(TickLevel==0){if(y>ystt&&y<yend){lineq=true;inputid=y-1;}}}else{lineq=true;labelq=true;}
if(typ!='dot'){if(lineq){g.beginPath();g.moveTo(this.lt,this.tp+j);g.lineTo(this.lt+this.wd,this.tp+j);g.stroke();}}
if(typ!='dot'){if(labelq){g.font='14px Verdana';g.fillStyle='darkorange';g.textAlign='right';g.fillText(y,this.lt-5,this.tp+j+5);}}}
if(ystt!=0){j=yend/yscale;g.strokeStyle='black';g.lineWidth=1.6;g.beginPath();g.moveTo(this.lt,this.tp+j);g.lineTo(this.lt+this.wd,this.tp+j);g.stroke();}}
function canvasSave(typ){typ=(typ==undefined)?'png':typ;if(typ=='jpg')typ='jpeg';var can=document.getElementById("can");var dataUrl=can.toDataURL('image/'+typ);var win=window.open();win.document.write("<img src='"+dataUrl+"'/>");win.document.location="#";}
function canvasPrint(){var can=document.getElementById("can");var c2=document.createElement('canvas');c2.width=can.width*0.8;c2.height=can.height*0.8;g2=c2.getContext("2d");g2.drawImage(can,0,0,can.width,can.height,0,0,c2.width,c2.height);var dataUrl=c2.toDataURL('image/png');var win=window.open();win.document.write("<img src='"+dataUrl+"'/>");win.document.location="#";win.setTimeout(function(){win.focus();win.print();},500);}
function wrapText(context,text,x,y,maxWidth,lineHeight){var words=text.split(' ');var line='';for(var n=0;n<words.length;n++){var testLine=line+words[n]+' ';var metrics=context.measureText(testLine);var testWidth=metrics.width;if(testWidth>maxWidth&&n>0){context.fillText(line,x,y);line=words[n]+' ';y+=lineHeight;}else{line=testLine;}}
my.lblYMax=Math.max(my.lblYMax,y);context.fillText(line,x,y);}
function getPopHTML(){s='';s+='<style>input[type="radio"]:checked+label {font-weight: bold;}</style>';s+='<div id="editpop" style="position:absolute; left:-450px; top:40px; padding: 5px; border: 1px solid red; border-radius: 9px; background-color: #88aaff; box-shadow: 10px 10px 5px 0px rgba(40,40,40,0.75); z-index:1; transition: all linear 0.3s; opacity:0; font: 14px Arial;  ">';inps=[['Investment','popInv',1000],['Income','popInc',200],['Number of Periods','popn',10],['Interest Rate (%)','popInt',5]];for(var i=0;i<inps.length;i++){var inp=inps[i];s+='<div style="font: 14px Arial; text-align:right; width:300px; " >';s+='<span id="'+inp[1]+'Lbl" style="font: 15px Arial; padding:3px; margin: 3px; text-align:right;  z-index:2;">'+inp[0]+'</span>';s+='<input id="'+inp[1]+'" style="width:100px; font: 15px Arial; color:blue;  padding:3px; margin: 3px; text-align:center;  z-index:2;" value="'+inp[2]+'" onkeyup="go(-1)"  onchange ="go(-1)" /> &nbsp;';s+='</div>'}
s+='<div style="text-align:center;">';s+='<button onclick="editYes()" style="z-index:2; font: 22px Arial;" class="togglebtn" >&#x2714;</button>';s+='<button onclick="editNo()" style="z-index:2; font: 22px Arial;" class="togglebtn" >&#x2718;</button>';s+='</div>';s+='</div>';return s;}
function doPop(){console.log("doPop");if(my.typNPVQ){document.getElementById('popInvLbl').innerHTML='Investment';document.getElementById('popIncLbl').innerHTML='Income';}else{document.getElementById('popInvLbl').innerHTML='Loan Amount';document.getElementById('popIncLbl').innerHTML='Payment Amount';}
var pop=document.getElementById('editpop');pop.style.transitionDuration="0.3s";pop.style.opacity=1;pop.style.zIndex=12;pop.style.left='50px';}
function editYes(){var pop=document.getElementById('editpop');pop.style.opacity=0;pop.style.zIndex=1;pop.style.left='-500px';console.log("editYes",my.fn);my.i=Number(document.getElementById('popInt').value)/100;document.getElementById('r1').value=my.i*100;document.getElementById('iLbl').innerHTML=parseInt(my.i*10000)/100+'%';var inv=Number(document.getElementById('popInv').value);var inc=Number(document.getElementById('popInc').value);var n=Number(document.getElementById('popn').value);var s=(-inv).toString();for(var i=0;i<n;i++){s+=',';s+=inc;}
document.getElementById('vals').value=s;go(0);}
function editNo(){var pop=document.getElementById('editpop');pop.style.opacity=0;pop.style.zIndex=1;pop.style.left='-500px';}