//DWChart("#chart2",obj,ds,opt)
class DWChart
{
 constructor(type,idd,ds,opt)
 {
  this.type=type;
  this.idd=idd;
  this.ds=ds;
  this.opt=opt;
  this.init();
 }
 go()
 {
  const d=new Date();
  this.ts=d.getTime();
  if (this.type=="SideBAR")
   this.sidebar();
  if (this.type=="SideBAR2")
   this.sidebar();
  if (this.type=="XY")
   this.xy();
  if (this.type=="bar")
   this.bar();
  if (this.type=="h24")
   this.h24();
 }
 init()
 {
 // $(this.idd).html("<canvas></canvas>");
  this.can=$(this.idd+" canvas")[0];
  this.ctx=this.can.getContext("2d");
  this.w=900;
  this.h=300;
  this.v=[700,220];
  this.o=[100,40];
  this.anim=600;
  const d=new Date();
  this.ts=d.getTime();
  this.col="blue"
  this.title="My Title";
  if (this.type=="SideBAR")
  {
   this.w=500;
   this.h=500;
   this.can.width=this.w;
   this.can.height=this.h;
   this.v=[300,300];
   this.o=[150,50];
   this.override();
   //this.boxit();
   this.sidebar();
   var self=this;

   $(this.idd).click(function(e) {
//   this.offset=$(this).offset();
//    self.clk(e,this.offset);
   });
  }
  if (this.type=="SideBar2")
  {
   this.w=1000;
   this.h=500;
   this.can.width=this.w;
   this.can.height=this.h;
   this.v=[700,400];
   this.o=[150,50];
   this.override();
   this.sidebar();
   var self=this;
   $(this.idd).click(function(e) {
//   this.offset=$(this).offset();
//    self.clk(e,this.offset);
   });
  }
  if (this.type=="XY")
  {
   this.w=500;
   this.h=500;
   this.can.width=this.w;
   this.can.height=this.h;
   this.v=[400,400];
   this.o=[50,50];
   this.col=["lightgreen","green"]
   this.override();
   //this.boxit();
   this.xy();
  }
  if (this.type=="circ")
  {
   this.w=500;
   this.h=500;
   this.v=[400,400];
   this.o=[50,50];
   this.s1=0.75;
   this.s3=2.25;
   this.lw=80;
   this.rad=this.v[0]/2-this.lw/2;
   this.maxc=100;
   this.col=["lightgreen","green"]
   this.col1=["#bd0b08","#e69407","#dae607","#2db31e","#056e21"];
   this.col2=["#eb807f","#f2c26f","#cfd470","#7ad470","#6de38c"];
   this.override();
   this.circ();
   this.can.width=this.w;
   this.can.height=this.h;
  }
  if (this.type=="bar")
  {
   this.boxit()
   this.ticks=[0,20,40,60,80,100];
   this.ticknm=["0%","20%","40%","60%","80%","100%"];
   this.bwp=0.6;
   this.maxy=100;
   this.bc=["blue"];
   this.bor=["darkblue"];
//   this.txt=["Sun","Mon","Tue","Wed","Thurs","Fri","Sat"]
   this.override();
   this.can.width=this.w;
   this.can.height=this.h;
   this.bar();
  }
  if (this.type=="h24")
  {
   this.w=500;
   this.h=330;
this.h=230;
   this.v=[400,130];
   this.o=[50,50];
   this.maxy=100;
   this.redpts=[];
   this.col="darkgreen";
   this.override();
//   this.boxit();
   this.can.width=this.w;
   this.can.height=this.h;
   this.h24();
  }
 }
 clk(e,offset)
 {
  var rat=this.h/$(this.idd).height();

  var testy=(e.pageY-offset.top-this.o[1]+25)*rat;//-25-this.vpart)*rat;
//alert(testy)
  var idx=parseInt(testy/this.vpart);
 if ((idx>=0)&&(idx<this.opt['cat'].length))
  alert(this.cat[idx])
 }
 mkpoints(mm)
 {
  var ii;
  var tots;
  var ppp=[];
  if (mm==0)
  {
   ppp.push([0,0])
   ppp.push([0,0])
   return ppp;
  }
  ii=2*3600;
  tots=0
  while (ii<86400-7*3600)
  {
   var r=Math.random()*50;
   tots+=r;
   ppp.push([ii,tots])
   ii+=Math.random()*1200+300;
  }
  return ppp;
 }
 override()
 {
  for (var o in this.opt)
  {
   this[o]=this.opt[o];
  }
 }
 boxit()
 {
  this.ctx.fillStyle=this.col;
  this.ctx.strokeStyle=this.col;
  this.ctx.beginPath();
  this.ctx.rect(this.o[0],this.o[1],this.v[0],this.v[1])
  this.ctx.stroke();
 }
 h24()
 {
  const d=new Date();
  var ts2=d.getTime();
  var perc=1;
  if (ts2-this.ts<this.anim)
   perc=(ts2-this.ts)/this.anim;
  var maxts=perc*86400;
  var lastyy=this.ds[0][1];

  this.ctx.clearRect(0,0,this.w,this.h)

  var ii=0
  while (ii<this.redpts.length-1)
  {
   var x1=this.redpts[ii]*this.w/86400+this.sx;
   var x2=(this.redpts[ii+1]-this.redpts[ii])*this.w/86400;
   var y1=this.h+this.sy;
   var y2=-this.h;
   this.ctx.fillStyle="red";
   this.ctx.fillRect(x1,y1,x2,y2)
   this.ctx.stroke();
   ii+=2;
  }
  this.drawlines();

  if (this.tr[0]!=-1)
  {
//  this.v=[700,220];
//  this.o=[100,40];

   var win1=this.tr[0]*this.v[0]/86400+this.o[0];
   var win2=this.tr[1]*this.v[0]/86400+this.o[0];
   var tickh=this.o[1];
   this.ctx.fillStyle="lightgreen";
   this.ctx.fillRect(win1,tickh,win2-win1,10)
   this.ctx.stroke(); 
   this.ctx.fillRect(win1,tickh,8,this.v[1])
   this.ctx.stroke(); 
   this.ctx.fillRect(win2-8,tickh,8,this.v[1])
   this.ctx.stroke(); 
  }
  var ii=1;
  while (ii<this.ds.length-1)
  {
   var x1=this.ds[ii-1][0]-this.t0;
   var dx=this.ds[ii][0]-this.t0-x1;
   var xx1=x1*this.v[0]/86400+this.o[0];
   var xx2=dx*this.v[0]/86400+1;
 
   var y1=this.ds[ii-1][1];
   var dy=this.ds[ii][1]-y1;
   var yy1=this.v[1]+this.o[0];
   var yy2=-dy/this.maxy*this.v[1];
   if (x1<maxts)
   {
    this.ctx.beginPath();
    if (this.ds[ii][2]==1)
    {
     this.ctx.fillStyle="red";
     var yy2=-this.v[1];
    }
    else
    {
     this.ctx.fillStyle="blue";
    }
    this.ctx.fillRect(xx1,yy1,xx2,yy2)
    this.ctx.stroke(); 
   }
   ii++;
  }
//Title
  var x3=this.o[0]+this.v[0]/2;
  this.ctx.fillStyle="black";
  this.ctx.font = "30px Arial Bold";
  this.ctx.textAlign="center";
  this.ctx.fillText(this.title, x3,this.o[1]-15);
//Timelines


//  var times=["12a","4a","8a","12p","4p","8p","12a"];
  var tperc=[0,4/24,8/24,12/24,16/24,20/24,1];
//  var tlen=times.length;
  var tlen=this.opt.xtck;
  var i=0;
  this.ctx.textAlign="center";
  this.ctx.fillStyle="black";
  this.ctx.font="16px Arial Bold";

  if (this.load==1)
  {
   this.ctx.fillStyle="black";
   this.ctx.font = "30px Arial Bold";
   this.ctx.textAlign="center";
   this.ctx.fillText("Loading...", this.o[0]+this.v[0]/2,this.o[1]+this.v[1]/2);
  }
  if (this.ds.length==0)
   return;

  if (perc<1)
  {
   var self=this;
   setTimeout(function() {
    self.h24(); }, 2);
  }
 }
 sidebar()
 {
  const d=new Date();
  var ts2=d.getTime();
  var perc=1;
  if (ts2-this.ts<this.anim)
  {
   var diff=this.anim-(ts2-this.ts);
   perc=1-((diff/this.anim)*(diff/this.anim));
//   perc=Math.sin(diff/this.anim*Math.PI/2);
//   perc=(ts2-this.ts)/this.anim;
  }
  this.ctx.clearRect(0,0,this.w,this.h)

  var clen=this.cat.length;
  var vpart=this.v[1]/clen;
  if (vpart>34)
   vpart=34;

  var height=vpart*(clen+1);
  this.h=height;
  this.can.height=this.h+50;
  this.v=[700,height];


  this.vpart=vpart;
  this.ctx.fillStyle="black";
  this.ctx.font = "24px Arial Bold";
  this.ctx.textAlign="left";
  for (var p in this.cat)
  {
   this.ctx.fillStyle="black";
   var x1=10;
   var y1=this.o[1]+p*vpart+25;
   this.ctx.fillText(this.cat[p], x1,y1-5);

   if (this.ds[p]>80)
    this.ctx.fillStyle="darkgreen";
   else if (this.ds[p]>50)
    this.ctx.fillStyle="lightgreen";
   else if (this.ds[p]>25)
    this.ctx.fillStyle="orange";
   else
    this.ctx.fillStyle="red";

   var x2=this.o[0];
   var x3=this.ds[p]/this.max*this.v[0]*perc;
   this.ctx.beginPath();
   this.ctx.rect(x2,y1-25,x3,25);
   this.ctx.fill(); 
   this.ctx.stroke();

   this.ctx.fillStyle="black";
   this.ctx.font = "24px Arial Bold";
   this.ctx.textAlign="left";
   this.ctx.fillText(parseInt(this.ds[p])+"%", x3+5+this.o[0],y1-5);
  }

  var x1=this.o[0]+this.v[0]/2;
  var y1=this.o[1]; //+this.v[1];
  this.ctx.fillStyle="black";
  this.ctx.font = "30px Arial Bold";
  this.ctx.textAlign="center";
  this.ctx.fillText(this.title, x1,y1-20);

  if (this.ds.length==0)
   return;

  if (perc<1)
  {
   var self=this;
   setTimeout(function() {
    self.sidebar(); }, 2);
  }
 }
 xy()
 {
  const d=new Date();
  var ts2=d.getTime();
  var perc=1;
  if (ts2-this.ts<this.anim)
  {
   var diff=this.anim-(ts2-this.ts);
   perc=1-((diff/this.anim)*(diff/this.anim));
//   var diff=ts2-this.ts;
//   perc=Math.sin(diff/this.anim*Math.PI/2);
//   perc=(ts2-this.ts)/this.anim;
  }
  this.drawlines();

  var yd=this.yr[1]-this.yr[0];
  var xd=this.xr[1]-this.xr[0];
  this.ctx.strokeStyle="black";
  this.ctx.lineWidth=2;

  this.ctx.lineCap='round';
  this.ctx.lineJoin='round'

  //var lastx=0;
  //var lasty=0;
  var first=1;
  this.ctx.strokeStyle="black";
  this.ctx.beginPath();
  for (var p in this.ds)
  {
   var x1=this.o[0]+(this.ds[p][0]-this.xr[0])/xd*this.v[0];
   var y1=this.v[1]+this.o[1]-(this.ds[p][1]-this.yr[0])/yd*this.v[1];
   if (first==1)
   {
    first=0;
//    this.ctx.beginPath();
    this.ctx.moveTo(parseInt(x1),parseInt(y1));
   }
   else
   {
    //var midx=(lastx+x1)/2;
    //var midy=(lasty+y1)/2;
    //this.ctx.quadraticCurveTo(lastx,lasty,midx,midy);
    //this.ctx.quadraticCurveTo(midx,midy,x1,y1)
    this.ctx.lineTo(parseInt(x1),parseInt(y1));
   }
   //lastx=x1;
   //lasty=y1;
  }
  //this.ctx.closePath();
  this.ctx.stroke(); 

//  if (this.plim)
  {
   this.ctx.beginPath();
   this.ctx.strokeStyle="red";
   var py=this.o[1]+this.v[1]*(this.yr[1]-this.plim)/this.yr[1];
   this.ctx.moveTo(this.o[0],py);
   this.ctx.lineTo(this.o[0]+this.v[0],py);
   this.ctx.closePath();
   this.ctx.stroke();
  }

  var x1=this.o[0]+this.v[0]/2;
  var y1=this.o[1]; //+this.v[1];
  this.ctx.fillStyle="black";
  this.ctx.font = "30px Arial Bold";
  this.ctx.textAlign="center";
  this.ctx.fillText(this.title, x1,y1-20);

  if (this.ds.length==0)
   return;

  if (perc<1)
  {
   var self=this;
   setTimeout(function() {
    self.xy(); }, 2);
  }
 }

 drawlines()
 {
// obj['xr']=[-30,0];
// obj['yr']=[0,50];
// obj['xtck']=[-30,-25,-20,-15,-10,-5,0];
// obj['ytck']=[0,10,20,30,40,50];
  var x1=this.o[0];
  var x2=this.o[0]+this.v[0];
  var yd=this.yr[1]-this.yr[0];
  this.ctx.strokeStyle="#888";

  this.ctx.fillStyle="black";
  this.ctx.font = "20px Arial Bold";
  this.ctx.textAlign="center";
  this.ctx.lineWidth=1;

  for (var y in this.ytck)
  {
   var y1=this.v[1]-(this.ytck[y]-this.yr[0])/yd*this.v[1]+this.o[1];
   this.ctx.beginPath();
   this.ctx.moveTo(x1,y1);
   this.ctx.lineTo(x2,y1);
   this.ctx.stroke(); 
   this.ctx.fillText(this.ytck[y], x1-20,y1+5);
  }
  var y1=this.o[1];
  var y2=this.o[1]+this.v[1];
  var xd=this.xr[1]-this.xr[0];
  for (var x in this.xtck)
  {
//   var x1=this.v[0]-(this.xtck[x]-this.xr[0])/xd*this.v[0]+this.o[0];
var x1=(this.xtck[x]-this.xr[0])/xd*this.v[0]+this.o[0];
   this.ctx.beginPath();
   this.ctx.moveTo(x1,y1);
   this.ctx.lineTo(x1,y2);
   this.ctx.stroke(); 

   if (this.xtn)
    this.ctx.fillText(this.xtn[x], x1,y2+20);
   else
    this.ctx.fillText(this.xtck[x], x1,y2+20);
  }
 }
 circ()
 {
  const d=new Date();
  var ts2=d.getTime();
  var perc=1;
  if (ts2-this.ts<this.anim)
  {
   var diff=this.anim-(ts2-this.ts);
   perc=1-((diff/this.anim)*(diff/this.anim));
//   var diff=ts2-this.ts;
//   perc=Math.sin(diff/this.anim*Math.PI/2);
//   perc=(ts2-this.ts)/this.anim;
  }

  var ccnt=this.col1.length;
  var cidx=parseInt(ccnt*this.ds[0]/this.maxc);
  if (cidx>4)
   cidx=4;

  this.ctx.clearRect(this.o[0],this.o[1],this.v[0],this.v[1])

  this.ctx.beginPath();
  this.ctx.strokeStyle=this.col1[cidx];
  this.ctx.lineWidth=this.lw;
  var s1=this.s1*Math.PI;
  var s2=(this.s1+perc*this.ds[0]/this.maxc*(this.s3-this.s1))*Math.PI;
  var s3=this.s3*Math.PI;
  var x1=this.o[0]+this.v[0]/2;
  var y1=this.o[1]+this.v[1]/2;
  this.ctx.arc(x1,y1,this.rad,s1,s2);
  this.ctx.stroke();
  this.ctx.closePath()

  this.ctx.beginPath();
  this.ctx.strokeStyle=this.col2[cidx];
  this.ctx.arc(x1,y1,this.rad, s2,s3);
  this.ctx.stroke();
  this.ctx.closePath()

  this.ctx.fillStyle="black";
  this.ctx.font = "60px Arial Bold";
  this.ctx.textAlign="center";
  this.ctx.fillText(parseInt(perc*this.ds[0])+"%", x1,y1+20);

  this.ctx.fillStyle="black";
  this.ctx.font = "40px Arial Bold";
  this.ctx.textAlign="center";
  this.ctx.fillText(this.title, x1,this.o[1]-15);

  if (this.ds.length==0)
   return;

  if (perc<1)
  {
   var self=this;
   setTimeout(function() {
    self.circ(); }, 2);
  }
 }
 bar()
 {
  const d=new Date();
  var ts2=d.getTime();
  var perc=1;
  if (ts2-this.ts<this.anim)
  {
   var diff=this.anim-(ts2-this.ts);
   perc=1-((diff/this.anim)*(diff/this.anim));
//   var diff=ts2-this.ts;
//   perc=Math.sin(diff/this.anim*Math.PI/2);
//   perc=(ts2-this.ts)/this.anim;
  }
  var bcnt=this.ds.length;
  if (bcnt<1)
   bcnt=1;
  var ba=this.v[0]/bcnt; //bar area
  var bw=ba*this.bwp; //bar width
  var bm=ba*(1-this.bwp)/2;  //bar margin
  var x1=this.o[0];
  var y1=this.h-this.o[1];

  var x2=x1+this.v[0]/2;
  var y2=y1-this.v[1]-15;
  this.ctx.fillStyle="black";
  this.ctx.font = "30px Arial Bold";
  this.ctx.textAlign="center";
  this.ctx.fillText(this.title, x2,y2);
//alert(this.title)
  this.ctx.font = "22px Arial Bold";
  this.ctx.strokeStyle="gray";
  for (var t in this.ticks)
  {
   var tick=this.ticks[t];
   var x2=x1+this.v[0];
   var y2=y1-tick/this.maxy*this.v[1];

   var x3=x1-30;
   this.ctx.fillText(this.ticknm[t],x3,y2)

   this.ctx.beginPath();
   this.ctx.moveTo(x1,y2);
   this.ctx.lineTo(x2,y2);
   this.ctx.stroke(); 
  }
  for (var p in this.ds)
  {
   var dat=this.ds[p]*perc;
   if (dat>this.maxy)
    dat=this.maxy;
   var dat=dat/this.maxy*this.v[1];

   if (p<this.bc.length)
    this.ctx.fillStyle=this.bc[p];
   else
    this.ctx.fillStyle=this.bc[0];

   if (p<this.bor.length)
    this.ctx.strokeStyle=this.bor[p];
   else
    this.ctx.strokeStyle=this.bor[0];

   var val=-dat;
   this.ctx.beginPath();
   this.ctx.rect(x1+bm,y1,bw,val)
   this.ctx.fill(); 
   this.ctx.stroke();

   var x2=x1+ba/2;
   var y2=y1+30;
   this.ctx.fillStyle="black";
   this.ctx.font = "22px Arial bold";
   this.ctx.textAlign="center";
   this.ctx.fillText(this.txt[p], x2,y2);

   x1+=ba;
  }

  if (this.ds.length==0)
   return;

  if (perc<1)
  {
   var self=this;
   setTimeout(function() {
    self.bar(); }, 2);
  }
 }
}

class DWChart2
{
 constructor(type,idd)
 {
  this.type=type;
  this.idd=idd;
 }

 init()
 {
  if (this.type=="day30")
  {
   this.can=$(this.idd+" canvas")[0];
   this.can.width=590;
   this.can.height=270;
   this.ctx=this.can.getContext("2d");
  }
  else if (this.type=="day7")
  {
   this.can=$(this.idd+" canvas")[0];
   this.can.width=590;
   this.can.height=270;
   this.ctx=this.can.getContext("2d");
  }
  else if (this.type=="circ")
  {
   this.can=$(this.idd+" canvas")[0];
   this.can.width=590;
   this.can.height=470;
   this.ctx=this.can.getContext("2d");
  }
  else if (this.type=="3d")
  {
   this.can=$(this.idd+" canvas")[0];
   this.can.width=590;
   this.ctx=this.can.getContext("2d");
   this.ctx.fillStyle="green";
this.can.height=470;
this.h=470;
   this.sx=25;
   this.sy=10;
   this.w=550;
this.w1=350;
this.w2=450;
this.h1=330;
this.h2=430;
this.x1=this.sx+(this.w2-this.w1)/2;
this.x2=this.sx+(this.w2-this.w1)/2+this.w1;
this.x3=this.sx;
this.x4=this.sx+this.w2;
this.y1=this.sy+(this.h2-this.h1)/2;
this.y2=this.sy+(this.h2-this.h1)/2+this.h1;
this.y3=this.sy+0;
this.y4=this.sy+this.h2;

this.xx1=0
this.xx2=12;
this.yy1=0
this.yy2=20;
   this.redpts=[]
   //this.boxit()
this.boxit2()
  }
  else
  {
   this.can=$(this.idd+" canvas")[0];
   this.can.width=390;
   this.ctx=this.can.getContext("2d");
   this.ctx.fillStyle="green";
   this.sx=25;
   this.sy=10;
   this.w=350;
   this.redpts=[]
   if (this.type=="tags")
   {
    this.can.height=270;
    this.h=240;
   }
   else
   {
    this.can.height=130;
    this.h=100;
   }
   this.boxit()
  }
 }
 setmin(val)
 {
  this.chmin=val;
 }
 setmax(val)
 {
  this.chmax=val;
 }
 day7()
 {
   var mr=this.can.width/10;
   var ml=this.can.width/10;
   var ww=(this.can.width-mr-ml)/7;
   var perc=[50,30,70,50,25,80,90];
   var x1=ml;
   var y1=this.can.height-5;
   this.ctx.fillStyle="blue";
   for (var p in perc)
   {
    if (perc[p]<=50)
     this.ctx.fillStyle="red";
    else
     this.ctx.fillStyle="blue";
    var val=-perc[p]*2.5;
    this.ctx.beginPath();
    this.ctx.rect(x1,y1,ww*0.6,val)
    this.ctx.fill();
    this.ctx.stroke();
//    this.ctx.closePath()
    x1+=ww;
   }
 }
 day30()
 {
   var mr=this.can.width/10;
   var ml=this.can.width/10;
   var ww=(this.can.width-mr-ml)/30;
   var perc=[50,30,70,50,25,80,90,50,30,70,50,25,80,90,50,30,70,50,25,80,90,50,30,70,50,25,80,90,77,81];
   var x1=ml;
   var y1=this.can.height-5;
   this.ctx.fillStyle="blue";
   for (var p in perc)
   {
    if (perc[p]<=50)
     this.ctx.fillStyle="red";
    else
     this.ctx.fillStyle="blue";
    var val=-perc[p]*2.5;
    this.ctx.beginPath();
    this.ctx.rect(x1,y1,ww*0.6,val)
    this.ctx.fill(); 
    this.ctx.stroke();
    x1+=ww;
   }
 }
 circ()
 {
  this.ctx.beginPath();
  this.ctx.strokeStyle="green";
  this.ctx.lineWidth=30;
  var s1=0.75*Math.PI;
  var s2=2.05*Math.PI
  var s3=2.25*Math.PI
  this.ctx.arc(200, 200, 80, s1,s2);
  this.ctx.stroke();
  this.ctx.closePath()

  this.ctx.beginPath();
  this.ctx.strokeStyle="lightgreen";
  this.ctx.arc(200, 200, 80, s2,s3);
  this.ctx.stroke();
  this.ctx.closePath()
 }
 draw_3d()
 {
var deptotal=0;
var depcnt=0;
//this.xx1=0
//this.xx2=10;
//this.yy1=0
//this.yy2=10;
//this.x1,this.x2.this.x3,this.x4
//this.y1,this.y2.this.y3,this.y4
  //this.pts3d.push([x,aa,r])
var dxx=this.x1-this.x3;
var dyy=this.y1-this.y3;
//alert(this.pts3d)
  for (var dd in this.pts3d)
  {
   this.ctx.fillStyle="green";
   this.ctx.beginPath();
var pt=this.pts3d[dd];
var aaa=pt[0];
var ratx=aaa/(this.xx2-this.xx1)
var raty=aaa/(this.yy2-this.yy1)
var dx=(aaa/(this.xx2-this.xx1))*dxx;
var dy=(aaa/(this.yy2-this.yy1))*dyy;
var stx=this.x1-dx;
var sty=this.y2+dy;
var endx=this.x2+dx;
var endy=this.y1-dy;
var ww=endx-stx;
var hh=sty-endy;

var xxx1=stx+(pt[1]/this.xx2)*ww;
var yyy1=sty-((this.yy2-pt[2])/this.yy2)*hh;
var dep=12-pt[2];
deptotal+=dep;
depcnt++;
   if (pt[2]!=0)
    this.ctx.rect(xxx1+this.sx-4,hh+this.sy+45,-8,-yyy1/2)
   this.ctx.stroke(); 
  }
  var avg_void=parseInt((deptotal/depcnt)*12*16)+" in^3";
  $("#void").html(avg_void);
 }
 boxit2()
 {
  this.ctx.fillStyle="blue";
  this.ctx.rect(this.x1,this.y1,this.x2-this.x1,this.y2-this.y1)
  this.ctx.stroke();
  this.ctx.rect(this.x3,this.y3,this.x4-this.x3,this.y4-this.y3)
  this.ctx.stroke();

  this.ctx.beginPath();
  this.ctx.moveTo(this.x1, this.y1);
  this.ctx.lineTo(this.x3, this.y3);
  this.ctx.stroke(); 

  this.ctx.beginPath();
  this.ctx.moveTo(this.x2, this.y2);
  this.ctx.lineTo(this.x4, this.y4);
  this.ctx.stroke(); 

  this.ctx.beginPath();
  this.ctx.moveTo(this.x1, this.y2);
  this.ctx.lineTo(this.x3, this.y4);
  this.ctx.stroke(); 

  this.ctx.beginPath();
  this.ctx.moveTo(this.x2, this.y1);
  this.ctx.lineTo(this.x4, this.y3);
  this.ctx.stroke(); 

  this.ctx.beginPath();
  this.ctx.moveTo(this.x3, (this.y1+this.y2)/2);
  this.ctx.lineTo(this.x4, (this.y1+this.y2)/2)
  this.ctx.stroke(); 

 }
 boxit()
 {
  this.ctx.fillStyle="blue";
  this.ctx.rect(this.sx,this.sy,this.w,this.h)
  this.ctx.stroke();
 }
 setpoints3d(pts3d)
 {
  this.pts3d=pts3d
 }
 setpoints(pts)
 {
alert(123)
  this.ts=pts['ts']
alert(this.ts)
  this.pts=pts['dat']
 }
 redlines()
 {
  this.redpts=[]
  this.redpts.push(86400-15.3*3600)
  this.redpts.push(86400-15.0*3600)
  this.redpts.push(86400-13.2*3600)
  this.redpts.push(86400-12.8*3600)
  this.redpts.push(86400-9.2*3600)
  this.redpts.push(86400-5.2*3600)
//  this.redpts.push(86400)
 }
 scalelines()
 {
  if (this.type=="tags")
  {
   var vals=["0","50","100","150","200"];
   var vperc=[1.0,0.75,0.5,0.25,0];
   var vals=[0*this.chmax,0.25*this.chmax,0.5*this.chmax,0.75*this.chmax,this.chmax];
  }
  else
  {
   var vals=["0","25","50"];
   var vperc=[1.0,0.5,0.0];
  }
  var vlen=vals.length;
  var i=0;
  this.ctx.fillStyle="black";
  this.ctx.font="Arial";
  while (i<vlen)
  {
   this.ctx.fillText(vals[i], this.sx-16, vperc[i]*this.h+this.sy+2);
   this.ctx.beginPath();
   this.ctx.fillStyle="black";
   this.ctx.fillRect(this.sx-4,vperc[i]*this.h+this.sy-1,8,2)
   this.ctx.stroke();    
   i++;
  }
 }
 settimerange(ts)
 {
  this.trange=ts;
  this.ctx.clearRect(0, 0, this.can.width, this.can.height);
  this.boxit()
  this.scalelines();
  this.timelines();
  this.lines();
 }
 get_box()
 {
  var dat=[]
  var h=Math.random()*12+4.5;
  dat.push([0,0,h,h,h,0,0])
  dat.push([0,h,h,h,h,h,0])
  dat.push([0,h,h,h,h,h,0])
  dat.push([h,h,h,h,h,h,0])
  dat.push([h,h,h,h,h,h,0])
  dat.push([0,h,h,h,h,h,0])
  dat.push([0,h,h,h,h,h,0])
  dat.push([0,h,h,h,h,h,0])
  dat.push([0,0,h,h,h,0,0])
var x=parseInt(Math.random()*32+0);
var y=parseInt(Math.random()*32+0);
  var out=[x,y,dat];
  return out;
 }
 get_can()
 {
  var dat=[]
  var h=Math.random()*15+0.5;
  dat.push([h,h,h,h,h,h,h,h,h,h])
  dat.push([h,h,h,h,h,h,h,h,h,h])
  dat.push([h,h,h,h,h,h,h,h,h,h])
  dat.push([h,h,h,h,h,h,h,h,h,h])
  dat.push([h,h,h,h,h,h,h,h,h,h])
  dat.push([h,h,h,h,h,h,h,h,h,h])
  dat.push([h,h,h,h,h,h,h,h,h,h])
  dat.push([h,h,h,h,h,h,h,h,h,h])
  dat.push([h,h,h,h,h,h,h,h,h,h])
  dat.push([h,h,h,h,h,h,h,h,h,h])
var x=parseInt(Math.random()*52+0);
var y=parseInt(Math.random()*52+0);
  var out=[x,y,dat];
  return out
 }
 timelines()
 {
  if (this.type=="tags")
  {
   var times;
   var tperc;
   if (this.trange==90)
   {
    times=["-90d","-80d","-70d","-60d","-50d","-40d","-30d","-20d","-10d","0d"];
    tperc=[0,1/10,2/10,3/10,4/10,5/10,6/10,7/10,8/10,9/10,1];
   }
   if (this.trange==30)
   {
    times=["-30d","-25d","-20d","-15d","-10d","-5d","0d"];
    tperc=[0,4/24,8/24,12/24,16/24,20/24,1];
   }
   else if (this.trange==7)
   {
    times=["-7d","-6d","-5d","-4d","-3d","-2d","-1d","0d"];
    tperc=[0,1/7,2/7,3/7,4/7,5/7,6/7,1];
   }
   else if (this.trange==1)
   {
    var times=["12a","4a","8a","12p","4p","8p","12a"];
    var tperc=[0,4/24,8/24,12/24,16/24,20/24,1];
   }
   var tlen=times.length;
   var i=0;
   this.ctx.fillStyle="black";
   this.ctx.font="Arial";
   while (i<tlen)
   {
    this.ctx.fillStyle="black";
    this.ctx.fillText(times[i], tperc[i]*this.w+this.sx-10, this.sy+this.h+12); 
 
    this.ctx.fillStyle="black";
    this.ctx.font = "Arial";
    this.ctx.beginPath();
    this.ctx.fillStyle="black";
    this.ctx.fillRect(tperc[i]*this.w+this.sx-1,this.sy+this.h-4,2,8)
    this.ctx.stroke();    

    i++;
   }
  }
  else
  {
   var times=["12a","4a","8a","12p","4p","8p","12a"];
   var tperc=[0,4/24,8/24,12/24,16/24,20/24,1];
   var tlen=times.length;
   var i=0;
   this.ctx.fillStyle="black";
   this.ctx.font="Arial";
   while (i<tlen)
   {
    this.ctx.fillStyle="black";
    this.ctx.fillText(times[i], tperc[i]*this.w+this.sx-10, this.sy+this.h+12); 
 
    this.ctx.fillStyle="black";
    this.ctx.font = "Arial";
    this.ctx.beginPath();
    this.ctx.fillStyle="black";
    this.ctx.fillRect(tperc[i]*this.w+this.sx-1,this.sy+this.h-4,2,8)
    this.ctx.stroke();    
    i++;
   }
  }
 }
 lines()
 {
  if (this.type=="tags")
  {
   this.ymax=this.chmax;
   this.ymin=this.chmin;
   var ii=1;
   var lastxx=this.pts[0][0]*this.w/(86400*this.trange)+this.sx;
   var lastyy=this.h+this.sy-(this.h*this.pts[0][1]/this.ymax);
   this.ctx.beginPath();
   this.ctx.moveTo(lastxx, lastyy);
   while (ii<this.pts.length-1)
   {
    var x1=this.pts[ii][0];
    var y1=this.pts[ii][1];
    var xx1=x1*this.w/(86400*this.trange)+this.sx;
    var yy1=this.h+this.sy-(this.h*y1/this.ymax);
    this.ctx.fillStyle="blue";
    this.ctx.lineTo(xx1,yy1);
    ii++;
   }
   this.ctx.stroke(); 
  }
  else if (this.type=="3d")
  {
   this.pts3d=[];
   var x=0.333
   var aa=0;
   var rr=[]
   rr.push([0,0,0,0,0,6,6,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]);
   rr.push([0,0,0,6,6,6,6,6,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]);
   rr.push([0,0,6,6,6,6,6,6,6,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]);
   rr.push([0,0,6,6,6,6,6,6,6,6,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]);
   rr.push([0,0,6,6,6,6,6,6,6,6,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]);
   rr.push([0,0,6,6,6,6,6,6,6,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]);
   rr.push([0,0,0,0,0,6,6,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]);
   rr.push([0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]);
   rr.push([0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]);
   rr.push([0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]);
   rr.push([0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]);
   rr.push([0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]);
   rr.push([0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]);
   rr.push([0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]);
   rr.push([0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]);
   rr.push([0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]);
   rr.push([0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]);
   rr.push([0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]);
   rr.push([0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]);
   rr.push([0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]);
   rr.push([0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]);
   rr.push([0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]);
   rr.push([0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]);
   rr.push([0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]);
   rr.push([0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]);
   rr.push([0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]);
   rr.push([0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]);
   rr.push([0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]);
   rr.push([0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]);
   rr.push([0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]);

   var result=this.get_can();
   var offx=result[0];
   var offy=result[1];
   var can=result[2];
   var mm=0;
   while (mm<can.length)
   {
    var nn=0;
    while (nn<can[mm].length)
    {
     if (offx+mm<rr.length)
     {
      if (offy+nn<rr[offx+mm].length)
      {
       if (can[mm][nn]!=0)
       {
        rr[offx+mm][offy+nn]=can[mm][nn];
       }
      }
     }
     nn++;
    }
    mm++;
   }
   var result=this.get_box();
   var offx=result[0];
   var offy=result[1];
   var can=result[2];
   var mm=0;
   while (mm<can.length)
   {
    var nn=0;
    while (nn<can[mm].length)
    {
     if (offx+mm<rr.length)
     {
      if (offy+nn<rr[offx+mm].length)
      {
       if (can[mm][nn]!=0)
       {
        rr[offx+mm][offy+nn]=can[mm][nn];
       }
      }
     }
     nn++;
    }
    mm++;
   }

   var result=this.get_can();
   var offx=result[0];
   var offy=result[1];
   var can=result[2];
   var mm=0;
   while (mm<can.length)
   {
    var nn=0;
    while (nn<can[mm].length)
    {
     if (offx+mm<rr.length)
     {
      if (offy+nn<rr[offx+mm].length)
      {
       if (can[mm][nn]!=0)
       {
        rr[offx+mm][offy+nn]=can[mm][nn];
       }
      }
     }
     nn++;
    }
    mm++;
   }
   var result=this.get_box();
   var offx=result[0];
   var offy=result[1];
   var can=result[2];
   var mm=0;
   while (mm<can.length)
   {
    var nn=0;
    while (nn<can[mm].length)
    {
     if (offx+mm<rr.length)
     {
      if (offy+nn<rr[offx+mm].length)
      {
       if (can[mm][nn]!=0)
       {
        rr[offx+mm][offy+nn]=can[mm][nn];
       }
      }
     }
     nn++;
    }
    mm++;
   }
   var result=this.get_can();
   var offx=result[0];
   var offy=result[1];
   var can=result[2];
   var mm=0;
   while (mm<can.length)
   {
    var nn=0;
    while (nn<can[mm].length)
    {
     if (offx+mm<rr.length)
     {
      if (offy+nn<rr[offx+mm].length)
      {
       if (can[mm][nn]!=0)
       {
        rr[offx+mm][offy+nn]=can[mm][nn];
       }
      }
     }
     nn++;
    }
    mm++;
   }
   var result=this.get_box();
   var offx=result[0];
   var offy=result[1];
   var can=result[2];
   var mm=0;
   while (mm<can.length)
   {
    var nn=0;
    while (nn<can[mm].length)
    {
     if (offx+mm<rr.length)
     {
      if (offy+nn<rr[offx+mm].length)
      {
       if (can[mm][nn]!=0)
       {
        rr[offx+mm][offy+nn]=can[mm][nn];
       }
      }
     }
     nn++;
    }
    mm++;
   }
   var result=this.get_can();
   var offx=result[0];
   var offy=result[1];
   var can=result[2];
   var mm=0;
   while (mm<can.length)
   {
    var nn=0;
    while (nn<can[mm].length)
    {
     if (offx+mm<rr.length)
     {
      if (offy+nn<rr[offx+mm].length)
      {
       if (can[mm][nn]!=0)
       {
        rr[offx+mm][offy+nn]=can[mm][nn];
       }
      }
     }
     nn++;
    }
    mm++;
   }
   var result=this.get_box();
   var offx=result[0];
   var offy=result[1];
   var can=result[2];
   var mm=0;
   while (mm<can.length)
   {
    var nn=0;
    while (nn<can[mm].length)
    {
     if (offx+mm<rr.length)
     {
      if (offy+nn<rr[offx+mm].length)
      {
       if (can[mm][nn]!=0)
       {
        rr[offx+mm][offy+nn]=can[mm][nn];
       }
      }
     }
     nn++;
    }
    mm++;
   }

   var result=this.get_can();
   var offx=result[0];
   var offy=result[1];
   var can=result[2];
   var mm=0;
   while (mm<can.length)
   {
    var nn=0;
    while (nn<can[mm].length)
    {
     if (offx+mm<rr.length)
     {
      if (offy+nn<rr[offx+mm].length)
      {
       if (can[mm][nn]!=0)
       {
        rr[offx+mm][offy+nn]=can[mm][nn];
       }
      }
     }
     nn++;
    }
    mm++;
   }
   var result=this.get_box();
   var offx=result[0];
   var offy=result[1];
   var can=result[2];
   var mm=0;
   while (mm<can.length)
   {
    var nn=0;
    while (nn<can[mm].length)
    {
     if (offx+mm<rr.length)
     {
      if (offy+nn<rr[offx+mm].length)
      {
       if (can[mm][nn]!=0)
       {
        rr[offx+mm][offy+nn]=can[mm][nn];
       }
      }
     }
     nn++;
    }
    mm++;
   }

   var x=0;
   for (var u in rr)
   {
    var rline=rr[u];
    var aa=0;
    while (aa<36)
    {
     var r=rline[aa];
     this.pts3d.push([x,aa/3,r])
     aa+=1;
    }
    x+=0.333;
   }
   this.draw_3d();
//alert(this.pts3d)
   
   return
  }
  else
  {
   var ii=1;
   var lastyy=this.pts[0][1];
   while (ii<this.pts.length-1)
   {
    var x1=this.pts[ii-1][0];
    var dx=this.pts[ii][0]-x1;
    var xx1=x1*this.w/86400+this.sx;
    var xx2=dx*this.w/86400;
 
    var y1=this.pts[ii-1][1];
    var dy=this.pts[ii][1]-y1;
    var yy1=this.h+this.sy//-y1*this.h/86400
    var yy2=-dy

    this.ctx.beginPath();
    this.ctx.fillStyle="blue";
    this.ctx.fillRect(xx1,yy1,xx2,yy2)
    this.ctx.stroke(); 
    ii++;
   }
  }
  var ii=0
  while (ii<this.redpts.length-1)
  {
   var x1=this.redpts[ii]*this.w/86400+this.sx;
   var x2=(this.redpts[ii+1]-this.redpts[ii])*this.w/86400;
   var y1=this.h+this.sy;
   var y2=-this.h;
   this.ctx.fillStyle="red";
   this.ctx.fillRect(x1,y1,x2,y2)
   this.ctx.stroke();
   ii+=2;
  }
  this.timelines()
  this.scalelines()
 }
}