function addPlot(){
  plotArea.ox = 0;
  plotArea.oy = 0;
  plotArea.count = 0;
  plotArea.unit = 1000;//parseInt(prompt("Enter unit of time(in milli seconds)"));
  plotArea.specificTimeX = 0;

}


StopWatch = function()
{
    this.StartMilliseconds = 0;
    this.ElapsedMilliseconds = 0;
}

StopWatch.prototype.Start = function()
{
    this.StartMilliseconds = new Date().getTime();
}

StopWatch.prototype.Stop = function()
{
    this.ElapsedMilliseconds = new Date().getTime() - this.StartMilliseconds;
}

function startPlot(){
    plotArea.stopWatch.Start();
    for(var i=0;i<globalScope.Flag.length;i++) {
        globalScope.Flag[i].plotValues = [[0, globalScope.Flag[i].inp1.value]];
        globalScope.Flag[i].cachedIndex= 0;
    }
    // play();
    plotArea.scroll=1;
    addPlot();
}
var plotArea = {
  ox : 0,
  oy : 0,
  unit : 0,
  c : document.getElementById("plotArea"),

  count:0,
  specificTimeX:0,
  scale : 1,
  pixel : 100,
  startTime : new Date(),
  endTime : new Date(),
  scroll : 1,
  setup:function(){
      this.stopWatch =new StopWatch()
      this.stopWatch.Start();
      this.ctx=this.c.getContext("2d");
      startPlot();
          this.timeOutPlot = setInterval(function(){
            plotArea.plot();
        },100);
  },
  plot : function()
  {
      if(globalScope.Flag.length==0){
          this.c.width=this.c.height=0;
          return;
      }
      this.stopWatch.Stop();
      var time=this.stopWatch.ElapsedMilliseconds;
      this.c.width = document.getElementById("simulationArea").clientWidth; //innerWidth;

      this.c.height=globalScope.Flag.length*30+40;

      // if(document.getElementById("plot").style.height!=this.c.height+"px"){
      document.getElementById("plot").style.height = Math.min(this.c.height,400) ;
      document.getElementById("plot").style.width = this.c.width ;
      // }
      // else if(document.getElementById("plot").style.width!=this.c.width+"px"){
          // document.getElementById("plot").style.height = this.c.height ;
          // document.getElementById("plot").style.width = this.c.width ;
      // }

      if(this.scroll){
        this.ox = Math.max(0,(time/this.unit)*this.pixel -this.c.width+70);
      }
      else if(!plotArea.mouseDown){
          this.ox-=plotArea.scrollAcc;
          plotArea.scrollAcc*=0.95;
          if(this.ox<0)plotArea.scrollAcc=-0.2+0.2*this.ox;
          if(Math.abs(this.ox)<0.5)this.ox=0;
      }
      var ctx = this.ctx;
      this.clear(ctx);
      ctx.fillStyle = 'black';
      ctx.fillRect(0, 0, this.c.width, this.c.height);
      var unit= (this.pixel/(plotArea.unit*plotArea.scale))
      ctx.strokeStyle = 'cyan';
      ctx.lineWidth = 2;
      for(var i=0;i<globalScope.Flag.length;i++)
      {

        var arr=globalScope.Flag[i].plotValues;

          var j=0;
          // var start=arr[j][0];
          if(globalScope.Flag[i].cachedIndex)
              j=globalScope.Flag[i].cachedIndex;


          while(j<arr.length && 80+(arr[j][0]*unit)-plotArea.ox<0){
              // console.log("HIT2");
              j++;
              // start=
          }
          while(j<arr.length && j>0 && 80+(arr[j][0]*unit)-plotArea.ox>0 ){
              // console.log("HIT1");
              j--;
              // start=
          }
          if(j)j--;
          globalScope.Flag[i].cachedIndex=j;

        for( ;j<arr.length;j++)
        {
            var start=arr[j][0];

            if(j+1==arr.length)
              var end=time;
            else
              var end=arr[j+1][0];

            if(start<=time)
            {



              if(globalScope.Flag[i].bitWidth==1)
              {

                if(arr[j][1]!==undefined){

                  if(ctx.strokeStyle=="#000000"){
                      ctx.stroke()
                      ctx.beginPath();
                      ctx.lineWidth=2;
                    //   ctx.moveTo(80+(start*unit)-plotArea.ox,2*(30+i*15-yOff)-plotArea.oy)
                      ctx.strokeStyle="cyan";
                  }
                  var yOff=5*arr[j][1];
                }
                else{
                    ctx.stroke();
                    ctx.beginPath();
                    // ctx.moveTo(80+(start*unit)-plotArea.ox,2*(30+i*15-yOff)-plotArea.oy);
                    ctx.lineWidth=12;
                    ctx.strokeStyle = '#000000'; // DIABLED Z STATE FOR NOW
                    yOff=2.5;
                }
                ctx.lineTo(80+(start*unit)-plotArea.ox,2*(30+i*15-yOff)-plotArea.oy);
                ctx.lineTo(80+(end*unit)-plotArea.ox,2*(30+i*15-yOff)-plotArea.oy);
              }
              else {
                ctx.beginPath();
                ctx.moveTo(80+(end*unit)-plotArea.ox,55+30*i-plotArea.oy);
                ctx.lineTo(80+(end*unit)-5-plotArea.ox,2*(25+i*15)-plotArea.oy);
                ctx.lineTo(80+(start*unit)+5-plotArea.ox,2*(25+i*15)-plotArea.oy);
                ctx.lineTo(80+(start*unit)-plotArea.ox,55+30*i-plotArea.oy);
                ctx.lineTo(80+(start*unit)+5-plotArea.ox,2*(30+i*15)-plotArea.oy);
                ctx.lineTo(80+(end*unit)-5-plotArea.ox,2*(30+i*15)-plotArea.oy);
                ctx.lineTo(80+(end*unit)-plotArea.ox,55+30*i-plotArea.oy);
                mid = 80+((end+start)/Math.round(plotArea.unit*plotArea.scale))*this.pixel/2;
                ctx.font="12px Georgia";
                ctx.fillStyle = 'white';
                if((start*unit)+10-plotArea.ox <=0 && (end*unit)+10-plotArea.ox >=0){
                    mid = 80+((end-3000)/Math.round(plotArea.unit*plotArea.scale))*this.pixel;
                  }


                ctx.fillText(arr[j][1].toString()||"x",mid-plotArea.ox,57+30*i-plotArea.oy);
                ctx.stroke();
              }
            }
            else {
              break;
            }

            if(80+(end*unit)-plotArea.ox>this.c.width)break;
        }

        ctx.stroke();
        ctx.beginPath();

      }
      // 2 rectangles showing the time and labels

      ctx.fillStyle = '#eee';
      ctx.fillRect(0, 0, this.c.width, 30);
      ctx.font="14px Georgia";
      ctx.fillStyle = 'black';
      for(var i=1; i*Math.round(plotArea.unit*plotArea.scale)<=time + Math.round(plotArea.unit*plotArea.scale) ;i++)
      {
        ctx.fillText(Math.round(plotArea.unit*plotArea.scale)*i/1000+"s",48+this.pixel*i-plotArea.ox,20);
      }

      ctx.fillStyle = '#eee';
      ctx.fillRect(0,0,75,this.c.height);
      ctx.font="15px Georgia";
      ctx.fillStyle = 'black';
      for(var i=0;i<globalScope.Flag.length;i++){
        ctx.fillText(globalScope.Flag[i].identifier,5,2*(25+i*15) - plotArea.oy);
        ctx.fillRect(0,2*(13+i*15)+4 - plotArea.oy, 75, 3);
      }
      ctx.fillStyle = '#eee';
      ctx.fillRect(0,0,75,30);
      ctx.fillStyle = 'black';
      ctx.font="16px Georgia";
      ctx.fillText("Time",10,20);
      ctx.strokeStyle = 'black';
      ctx.moveTo(0,25);
      ctx.lineTo(75,25);
      // for yellow line to show specific time
      var specificTime = (plotArea.specificTimeX+plotArea.ox-80)*Math.round(plotArea.unit*plotArea.scale)/(this.pixel);;
      // ctx.strokeStyle = 'white';
      // ctx.moveTo(plotArea.specificTimeX,0);
      // ctx.lineTo(plotArea.specificTimeX,plotArea.c.height);
      // ctx.stroke();
      if(1.115*plotArea.specificTimeX >= 80){
        ctx.fillStyle = 'black';
        ctx.fillRect(plotArea.specificTimeX - 35, 0, 70, 30);
        ctx.fillStyle = 'red';
        ctx.fillRect(plotArea.specificTimeX - 30, 2, 60, 26);
        ctx.font="12px Georgia";
        ctx.fillStyle = 'black';
        ctx.fillText(Math.round(specificTime)+"ms",plotArea.specificTimeX - 25, 20);
      }
      // borders
      ctx.strokeStyle = 'black';
      ctx.lineWidth = 2;
      ctx.beginPath();
      ctx.moveTo(0,0);
      ctx.lineTo(0,this.c.height);
    //   ctx.fillRect(0, 0, 3, this.c.height);

    ctx.moveTo(74,0);
    ctx.lineTo(74,this.c.height);
    //   ctx.fillRect(74, 0, 3, this.c.height);

    ctx.moveTo(0,0);
    ctx.lineTo(this.c.width,0);
    //   ctx.fillRect(0, 0, this.c.width, 3);

    // ctx.moveTo(0,27);
    // ctx.lineTo(this.c.width,27);
    //   ctx.fillRect(0, 27, this.c.width, 3);
      ctx.stroke();
  },
  clear: function(ctx){
    ctx.clearRect(0,0,plotArea.c.width,plotArea.c.height);
    // clearInterval(timeOutPlot);
  }

}

  document.getElementById("plotArea").addEventListener('mousedown', function(e) {

    var rect = plotArea.c.getBoundingClientRect();
    var x=e.clientX - rect.left;
    plotArea.scrollAcc=0;
    if(e.shiftKey){
        plotArea.specificTimeX = x;
    }
    else{
        plotArea.scroll=0;
        plotArea.mouseDown=true;

        plotArea.prevX=x;
        console.log("HIT");
    }
  });
  document.getElementById("plotArea").addEventListener('mouseup', function(e) {

    plotArea.mouseDown=false;
  });

  document.getElementById("plotArea").addEventListener('mousemove', function(e) {

    var rect = plotArea.c.getBoundingClientRect();
    var x=e.clientX - rect.left;
    if(!e.shiftKey&&plotArea.mouseDown){
        plotArea.ox-=x-plotArea.prevX;
        plotArea.scrollAcc=x-plotArea.prevX;
        plotArea.prevX=x;
        // plotArea.ox=Math.max(0,plotArea.ox)
    }
    else{
        plotArea.mouseDown=false;



    }
  });