
    ///////////////////////////// Drawing canvas
    function _drawCanvas() {
      Objects.titleWidth=parseInt(localStorage.getItem("_TitleW"));
      Objects.titleIndent=5;
      Objects.titleGrp=parseInt(parseInt(localStorage.getItem("_TitleW")*0.75));
      Objects.titleY=11;
      Objects.Tracks=_getTrack("view");
      Objects.TrackH=_getTrack("view").length*40+1;
      Objects.NavH=50;
      Objects.id=_getList("id");
      Objects.name=_getList("name");
      Objects.db=_getList("db");
      Objects.grp=_getList("grp");
      Objects.variety=_getList("variety");
      Objects.origin=_getList("origin");
      Objects.type=_getList("type");
      Objects.Block=parseInt(localStorage.getItem("_Block"));
      Objects.BlockW=parseInt(localStorage.getItem("_BlockW"));
      Objects.BlockH=parseInt(localStorage.getItem("_BlockH"));
      Objects.Zoom=localStorage.getItem("_Zoom");
      Objects.Amino=localStorage.getItem("_Amino");
      if ( Objects.Zoom == "1b" ) Objects.TrackH=Objects.TrackH+20;
      if ( Objects.Zoom == "1b" && Objects.Amino == "on" ) Objects.TrackH=Objects.TrackH+45;
      Objects.Chr=localStorage.getItem("_Chr");
      Objects.Pos=parseInt(localStorage.getItem("_Pos"));
      Objects.Mode=localStorage.getItem("_Mode");
      Objects.Name=localStorage.getItem("_Name");
      Objects.NameSub=localStorage.getItem("_NameSub");
      Objects.Eff=localStorage.getItem("_Eff");
      Objects.Snpblock=localStorage.getItem("_Snpblock");
      Objects._Null=localStorage.getItem("_Null");
      Objects.Indicator=localStorage.getItem("_Indicator");
      Objects.Keyword=localStorage.getItem("_Keyword");
      Objects.canvasWidth=Objects.Block*Objects.BlockW;
      Objects.canvasHeight=Objects.id.length*Objects.BlockH;
	 
	 var CaWid = Objects.canvasWidth+200;
	 $("#tasuke").css("min-width",CaWid+"px");
	 $("#content").css("min-width",CaWid+"px");
	 
      _setMenu();
      _hideLoading();
      _initCanvas();
      _drawTitle(null);
      _drawTOP();
      _drawNULLBlock();

      if ( Objects.Snpblock == "off" ) {
        switch (Objects.Mode) {
        case "dp":
          _drawDPBlock()
          $('#snpt').hide("slow");
          break;
        case "dp+s":
          _drawDPBlock()
          x = (Objects.Zoom != "1b") ? _drawSNPBlock(1) : _drawSNPBlock(3);
          $('#snpt').show("slow");
          break;
        case "dp+i":
          _drawDPBlock()
          x = (Objects.Zoom != "1b") ? _drawINDELBlock(1) : _drawINDELBlock(3);
          $("#snpt").show("slow");
          break;
        case "dp+a":
          _drawDPBlock()
          x = (Objects.Zoom != "1b") ? _drawSNPBlock(2) : _drawSNPBlock(3);
          x = (Objects.Zoom != "1b") ? _drawINDELBlock(2) : _drawINDELBlock(3);
          $("#snpt").show("slow");
          break;
        case "s":
          x = (Objects.Zoom != "1b") ? _drawSNPBlock(0) : _drawSNPBlock(3);
          $("#snpt").show("slow");
          break;
        case "i":
          x = (Objects.Zoom != "1b") ? _drawINDELBlock(0) : _drawINDELBlock(3);
          $('#snpt').show("slow");
          break;
        case "si":
          x = (Objects.Zoom != "1b") ? _drawSNPBlock(4) : _drawSNPBlock(3);
          x = (Objects.Zoom != "1b") ? _drawINDELBlock(4) : _drawINDELBlock(3);
          $("#snpt").show("slow");
          break;
        }
      } else {
		if (Objects.Mode == "dp" || Objects.Mode == "dp+s" || Objects.Mode == "dp+i" || Objects.Mode == "dp+a") {
			_drawDPBlock()
			_drawSNPEstimationBlock();
			x = (Objects.Zoom != "1b") ? _drawSNPBlock(1) : _drawSNPBlock(3);
			$('#snpt').show("slow");
			
			
		} else{
			_drawSNPEstimationBlock();
			x = (Objects.Zoom != "1b") ? _drawSNPBlock(5) : _drawSNPBlock(3);
			$("#snpt").show("slow");
			
		}
        //_drawDPBlock();
        //_drawSNPEstimationBlock();
      }

      // for draginw without indicator
      frameCellwoI=ctx4.getImageData(0, 0, cvs4.width, cvs4.height);

      // Indicator
      if ( Objects.Indicator == "on" ) {
        _drawIndicator();
        _drawDirection();
      }

      // Capture image from canvas
      frameCell=ctx4.getImageData(0, 0, cvs4.width, cvs4.height);
      frameTitle=ctx3.getImageData(0, 0, cvs3.width, cvs3.height);
      frameChr=ctx2.getImageData(0, 0, cvs2.width, 37);
      frameNav=ctx2.getImageData(0, 30, cvs2.width, 20);
      frameTrackTitle=ctx0.getImageData(0, 0, cvs0.width, cvs0.height);
      frameTrackwR=ctx1.getImageData(0, 0, cvs1.width, cvs1.height);
      frameSNPTitle=ctx5.getImageData(0, 0, cvs5.width, cvs5.height);
      frameSNP=ctx6.getImageData(0, 0, cvs6.width, cvs6.height);
	  
	  //var bodywidth=document.getElementById('tasuke');
	  //bodywidth.style.min-width=Objects.canvasWidth+"px";
	  
    }

    ///////////////////////////// Drawing meter by _drawTOP()
    function _drawMeter(pos,pointer) {

      ctx2.clearRect(0, 27, cvs2.width, cvs2.height);

      var blk=Objects.Block;
      var end=pos+blk;
      var m=parseInt(blk/10);

      // Meter
      ctx2.beginPath();
      ctx2.moveTo(0,39);
      ctx2.lineTo(cvs2.width,39);
      ctx2.closePath();
      ctx2.lineWidth=1;
      ctx2.strokeStyle=_setColor().chrborder;
      ctx2.stroke();
      ctx2.fillStyle=_setColor().detailarea;
      ctx2.fillRect(0,40,cvs2.width,11);
      
      ctx2.fillStyle=_setColor().meterstring;
      ctx2.textAlign="left";
      ctx2.fillText(_printPos(pos),2, 50);
      ctx2.textAlign="center";
      for (var i=1; i<m; i++) ctx2.fillText(_printPos(pos+parseInt(blk/m)*i),cvs2.width/m*i, 50);
      ctx2.textAlign="right";
      ctx2.fillText(_printPos(end),cvs2.width-2, 50);

      if ( pointer != null ) {
        ctx2.beginPath();
        ctx2.moveTo(pointer,40);
        ctx2.lineTo(pointer+2,28);
        ctx2.lineTo(pointer+10,28);
        ctx2.closePath();
        ctx2.fillStyle=_setColor().pointercolor;
        ctx2.fill();
        ctx2.fillStyle=_setColor().pointerstringcolor;
        ctx2.textAlign="left";
        ctx2.fillText(_printPos(pos+parseInt(pointer/Objects.BlockW)), pointer+13, 36);
      }

    }

    /////////////////////////////////////////////////////////// Draw chromosome
    function _drawChromosome(){

      ctx2.clearRect(0, 0, cvs2.width, 30);

      var en=new Object(JSON.parse(localStorage.getItem("_Env")));

      o=_chromosome();
      ctx2.beginPath();
      ctx2.moveTo(6,10);
      ctx2.lineTo(o.centromere-5,10);
      ctx2.lineTo(o.centromere+5,23);
      ctx2.lineTo(o.width-5, 23);
      ctx2.arcTo(o.width, 23, o.width, 18, 5);
      ctx2.lineTo(o.width, 15);
      ctx2.arcTo(o.width, 10, o.width-5, 10, 5);
      ctx2.lineTo(o.centromere+5,10);
      ctx2.lineTo(o.centromere-5,23);
      ctx2.lineTo(6,23);
      ctx2.arcTo(1, 23, 1, 18, 5);
      ctx2.lineTo(0, 15);
      ctx2.arcTo(1, 10, 6, 10, 5);
      ctx2.closePath();
      ctx2.fillStyle=_setColor().chrcolor;
      ctx2.fill();
      ctx2.lineWidth=1;
      ctx2.strokeStyle=_setColor().chrborder;
      ctx2.stroke();

      ctx2.fillStyle=_setColor().chrstringcolor;
      ctx2.textAlign='right';
      ctx2.fillText(en.chromosome_name+Objects.Chr,o.width-5, 20);

      // Box area on chromosome
      ctx2.fillStyle=_setColor().chrareacolor;
      ctx2.fillRect(o.pos-1, 10, o.area+1, 14);

      // Start position of details meter
      var half=cvs2.width/2;
      ctx2.fillStyle=_setColor().chrcolor;
      ctx2.fillRect(half+half/5*2, 11, (half+half/5*2-o.s1)-(half+half/5*2), 12);
      ctx2.fillRect(half+half/5*3, 11, (half+half/5*3+o.s2)-(half+half/5*3), 12);
      ctx2.moveTo(half+half/5*2,11);
      ctx2.lineTo(half+half/5*2-o.s1,11);
      if ( o.s1 < half/5*2 ) ctx2.lineTo(half+half/5*2-o.s1,23);
      ctx2.moveTo(half+half/5*2,23);
      ctx2.lineTo(half+half/5*2-o.s1,23);
      ctx2.moveTo(half+half/5*3,11);
      ctx2.lineTo(half+half/5*3+o.s2,11);
      if ( o.s2 < half/5*2 ) ctx2.lineTo(half+half/5*3+o.s2,23);
      ctx2.moveTo(half+half/5*3,23);
      ctx2.lineTo(half+half/5*3+o.s2,23);
      ctx2.lineWidth=1.5;
      ctx2.stroke();

      // Show area
      ctx2.fillStyle=_setColor().detailarea;
      ctx2.fillRect(half+half/5*2, 10, half/5, 14);

      ctx2.fillStyle=_setColor().detailstring;
      ctx2.textAlign='center';
      ctx2.fillText("Show "+_printArea(Objects.Block),half+half/5*2+half/5/2, 21);

      ctx2.textAlign='left';
      ctx2.fillText(_printPos(Objects.Pos),half+half/5*2+6, 9);
      ctx2.fillText(_printPos(Objects.Pos),o.pos+6, 9);

      ctx2.beginPath();
      ctx2.moveTo(half+half/5*2,10);
      ctx2.lineTo(half+half/5*2-3,2);
      ctx2.lineTo(half+half/5*2+3,2);
      ctx2.closePath();
      ctx2.fillStyle="orange";
      ctx2.fill();

      ctx2.beginPath();
      ctx2.moveTo(o.pos,10);
      ctx2.lineTo(o.pos-3,2);
      ctx2.lineTo(o.pos+3,2);
      ctx2.closePath();
      ctx2.fillStyle="orange";
      ctx2.fill();

    }

    ///////////////////////////// Drawing top
    function _drawTOP() {
      _drawMeter(parseInt(localStorage.getItem('_Pos')),null);
      _drawChromosome();
      _drawTracks();
    }

    ///////////////////////////// Drawing tracks
    function _drawTracks(fastaPos) {

      var to=new Object(JSON.parse(localStorage.getItem("_Tracks")));
      var en=new Object(JSON.parse(localStorage.getItem("_Env")));
      var ta=_getTrack("view");

      ctx0.clearRect(0, 0, cvs0.width, cvs0.height);
      ctx1.clearRect(0, 0, cvs1.width, cvs1.height);
      ctx0.fillStyle=_setColor().tracktitle;
      ctx0.textAlign="right";
      ctx0.font="11px 'Century'";
      ctx1.textAlign="center";
      ctx1.font="10px 'Century'";

      // Each tracks
      for ( i=0; i<ta.length; i++) {
        for ( j=0; j<to.length; j++) {
          if ( ta[i] == to[j].track ) {
            ctx0.fillText(to[j].track,cvs0.width-5, i*40+10);   // Title
            _drawTrack("_Track_"+j,i,fastaPos,to[j].h,to[j].c); // Track
          }
        }
      }

      // References
      if ( Objects.Zoom == '1b' ) {
        if ( localStorage.getItem('_Ref') == "Reference" ) {
          ctx0.font="Bold italic 13px 'Courier'";
          ctx0.fillStyle=_setColor().reftitle;
        }
        ctx0.fillText(en.reference_name, cvs0.width-20, cvs0.height-1);
        ctx0.font="11px 'Century'";
        ctx0.fillStyle="black";
        ctx0.beginPath();
        ctx0.arc(cvs0.width-10, cvs0.height-6, 6, 0, Math.PI*2, false);
        ctx0.fill();
        ctx0.fillStyle="white";
        ctx0.fillRect(cvs0.width-15, cvs0.height-7, 10, 2);
        if ( localStorage.getItem("_DirRef") == "+" ) {
          ctx0.fillRect(cvs0.width-11, cvs0.height-11, 2, 10);
        }
        ctx0.fillStyle=_setColor().tracktitle;
        var f=new Object(JSON.parse(localStorage.getItem('_FASTA')));
        var ArrF=new Array();

        for (i=0;i<f.length;i++){
          var s=f[i].f;
          if ( localStorage.getItem("_DirRef") == "-" ) {
            var ls=true;
            if ( s == s.toUpperCase() ) ls=false;
            if ( f[i].f.toUpperCase() == "A" ) {
              s="T";
              if ( ls ) s=s.toLowerCase();
            } else if ( f[i].f.toUpperCase() == "T" ) {
              s="A";
              if ( ls ) s=s.toLowerCase();
            } else if ( f[i].f.toUpperCase() == "G" ) {
              s="C";
              if ( ls ) s=s.toLowerCase();
            } else if ( f[i].f.toUpperCase() == "C" ) {
              s="G";
              if ( ls ) s=s.toLowerCase();
            } else if ( f[i].f.toUpperCase() == "M" ) {
              s="K";
              if ( ls ) s=s.toLowerCase();
            } else if ( f[i].f.toUpperCase() == "K" ) {
              s="M";
              if ( ls ) s=s.toLowerCase();
            } else if ( f[i].f.toUpperCase() == "R" ) {
              s="Y";
              if ( ls ) s=s.toLowerCase();
            } else if ( f[i].f.toUpperCase() == "Y" ) {
              s="R";
              if ( ls ) s=s.toLowerCase();
            }
          }
          ArrF.push(s);
        }

        for (e=0;e<f.length;e++){
          if(fastaPos == e) {
            ctx1.fillStyle=_setColor().fastabold;
            yPos=cvs1.height-8;
          }else{
            ctx1.fillStyle=_setColor().fasta;
            yPos=cvs1.height-1;
          }
          var strF=ArrF[e];
          ctx1.fillText(strF, (e*Objects.BlockW)+(Objects.BlockW/2), yPos);
        }

        // Amino acids when '1b'
        if ( Objects.Amino == "on" ) {
           ctx0.fillText("Amino acids", cvs0.width-5, cvs0.height-30);
           _drawAmino(ArrF);
        }

      }

      // Capture tracks without rules
      frameTrack=ctx1.getImageData(0, 0, cvs1.width, cvs1.height);

      _drawRules();
    }

    ///////////////////////////// Drawing Rules
    function _drawRules() {
      var ta=_getTrack("view");
      var m=parseInt(Objects.Block/10);
      for(i=0;i<m;i++){
        ctx1.beginPath();
        ctx1.moveTo(cvs1.width/m*i,0);
        ctx1.lineTo(cvs1.width/m*i,ta.length*40);
        ctx1.lineWidth=0.2;
        ctx1.strokeStyle=_setColor().metercolor;
        ctx1.stroke();
      }
    }

    ///////////////////////////// Drawing amino acids
    function _drawAmino(ArrF) {

      var yPos=cvs1.height-20;
      var t=parseInt(Objects.Pos)-parseInt(Objects.Pos/3)*3;
      if ( t > 0 ) t=3-t;
      for (i=t; i<t+3; i++) {
        var subt=0;
        if ( i > t && i >2 ) subt=3;
        for (e=(i-subt);e<ArrF.length;e=e+3){
          if ( e+2 < ArrF.length ) {
            var str="";
            if ( localStorage.getItem("_DirRef") == "+" ) {
              str=ArrF[e]+ArrF[e+1]+ArrF[e+2];
            } else {
              str=ArrF[e+2]+ArrF[e+1]+ArrF[e];
            }
            var aStr=_get_amino(str);
            if ( aStr != "-" ) {
              if ( aStr == "M" ) {
                //ctx1.strokeStyle="rgb(0,255,0)";
                ctx1.lineWidth=3;
                ctx1.strokeStyle="green";
                ctx1.strokeRect(e*Objects.BlockW+1, yPos-10, Objects.BlockW*3-2, 13);
              } else if ( aStr == "*" ) {
                //ctx1.strokeStyle="rgb(250,0,0)";
                ctx1.lineWidth=3;
                ctx1.strokeStyle="brown";
                ctx1.strokeRect(e*Objects.BlockW+1, yPos-10, Objects.BlockW*3-2, 13);
              } else {
                ctx1.lineWidth=1;
                ctx1.strokeStyle="rgb(60,60,60)";
                ctx1.strokeRect(e*Objects.BlockW+1, yPos-10, Objects.BlockW*3-2, 13);
              }
              ctx1.fillStyle=_setColor().amino;
              ctx1.fillText(aStr, (e+1)*Objects.BlockW+(Objects.BlockW/2), yPos);
            }
          }
        }
        yPos=yPos-15;
      }
    }

    ///////////////////////////// Drawing each tracks
    function _drawTrack(name,hir,fastaPos,depth,color) {

      var yP=hir*40;
      var yH=7;
      var o=new Object(JSON.parse(localStorage.getItem(name)));

      ctx1.lineWidth=1;
      for (var k=0;k<o.length;k++){

        var startS=o[k].rs;
        var startE=o[k].re;
        var width=(startE-startS)*Objects.BlockW;

        var Hs=o[k].h;
        if ( _cvtZoom(Objects.Zoom) > 1000 || depth == 1 ) Hs=2;

        // Highlighting ID selected or searched
        //if ( Objects.Keyword == o[k].id && o[k].id != "" ) {
		var keywd = Objects.Keyword;
		var o_id = o[k].id;
		if ( o_id.match(keywd) && o[k].id != "" && keywd != "" ) {
          ctx1.fillStyle=_setColor().highlight;
          //ctx1.fillRect((o[k].rs-1)*Objects.BlockW, yP+(Hs-1)*10-2, (o[k].re-o[k].rs+1)*Objects.BlockW+6, yH+5);
		  ctx1.fillRect((o[k].rs-1)*Objects.BlockW, yP+(Hs-1)*10-1, (o[k].re-o[k].rs+1)*Objects.BlockW+6, yH+2);
        }

        // Without transcripts
        if ( _isEmpty(o[k].t) ) {
          ctx1.fillStyle=color;
          ctx1.fillRect(startS*Objects.BlockW, yP+(Hs-1)*10, width, yH);
        // Transcripts
        } else {
          ctx1.strokeStyle="#000000";
          ctx1.beginPath();
          ctx1.moveTo(startS*Objects.BlockW, yP+(Hs-1)*10+4);
          ctx1.lineTo(startE*Objects.BlockW, yP+(Hs-1)*10+4);
          ctx1.stroke();

          var transcript=o[k].t.split(";");
          for (var m=0;m<transcript.length;m++){
            var transcripts=transcript[m].split("-");
            if ( transcripts[0] == "u" ) {
              ctx1.fillStyle="sandybrown";
            } else {
              ctx1.fillStyle=color;
            }
            ctx1.fillRect(startS*Objects.BlockW+(width*(transcripts[1])/100),yP+(Hs-1)*10,width*(transcripts[2]/100),yH);
          }
        }
        
        // Strand arrow
        if ( !_isEmpty(o[k].strand) ) {
          ctx1.strokeStyle="orange";
          ctx1.beginPath();
          if ( parseInt(o[k].strand) ) {
            ctx1.moveTo(startE*Objects.BlockW, yP+(Hs-1)*10+4);
            ctx1.lineTo(startE*Objects.BlockW+7, yP+(Hs-1)*10+4);
            ctx1.moveTo(startE*Objects.BlockW+4, yP+(Hs-1)*10);
            ctx1.lineTo(startE*Objects.BlockW+7, yP+(Hs-1)*10+4);
            ctx1.lineTo(startE*Objects.BlockW+4, yP+(Hs-1)*10+7);
          } else {
            ctx1.moveTo(startS*Objects.BlockW, yP+(Hs-1)*10+4);
            ctx1.lineTo(startS*Objects.BlockW-7, yP+(Hs-1)*10+4);
            ctx1.moveTo(startS*Objects.BlockW-4, yP+(Hs-1)*10);
            ctx1.lineTo(startS*Objects.BlockW-7, yP+(Hs-1)*10+4);
            ctx1.lineTo(startS*Objects.BlockW-4, yP+(Hs-1)*10+7);
          }
          ctx1.stroke();
        }
      }
    }

    /////////////////////////////////////////////// Commas in number
    function _numberWithCommas(x) {
      return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    }

    var ONINFOCELL=new Object();
    /////////////////////////////////////////////// Detail of cell
    function _drawInfoCell(id,b,y,str){

      // Clear canvas
      ctx4.putImageData(frameCell, 0, 0);

      // Position
      var ao=new Object(JSON.parse(localStorage.getItem(id)));
      var o=new Object(JSON.parse(str));
      var xo=b*Objects.BlockW;
      var yo=parseInt(y/Objects.BlockH)*Objects.BlockH;
      var yi=yo+Objects.BlockH+5;
      var xi=xo+Objects.BlockW+5;
      var width=330;

      // Range of cell
      var strRange="";
      if (Objects.Name=="id") strRange="["+Objects.id[parseInt(y/Objects.BlockH)]+": ";
      else strRange="["+Objects.name[parseInt(y/Objects.BlockH)]+": ";
      var e=(b+Objects.Pos)*_cvtZoom(Objects.Zoom);
      var s=e-_cvtZoom(Objects.Zoom)+1;
      if ( _cvtZoom(Objects.Zoom) > 1 ) strRange=strRange+_numberWithCommas(s)+" .. "+_numberWithCommas(e)+"]";
      else strRange=strRange+_numberWithCommas(e)+"]";

      // Relocating
      if ( (yi+o.length*17+70) > cvs4.height) yi=yo-(o.length*17+70+3);
      if ( yi < 0 ) yi=5;
      if ( (xi+width) > cvs4.width ) xi=xo-width;
      if ( xi < 0 ) xi=0;

      // Flag this object
      ONINFOCELL.flag=true;
      ONINFOCELL.x=xi;
      ONINFOCELL.y=yi;
      ONINFOCELL.w=width;
      ONINFOCELL.cx=xo;
      ONINFOCELL.cy=yo;

      // Drawing selection
      ctx4.strokeStyle="rgba(255,0,0,0.5)";
      ctx4.lineWidth=2;
      ctx4.strokeRect(xo, yo, Objects.BlockW, Objects.BlockH);

      // Shape
      ctx4.strokeStyle="#b0c4de";
      ctx4.fillStyle="#ffffff";
      ctx4.textAlign="left";
      ctx4.font="10px 'Courier'";
      ctx4.lineWidth=5;
      if ( _isEmpty(ao[b].dp) ) {                         // NULL
        ctx4.fillRect(xi,yi,width,30);
        ctx4.strokeRect(xi,yi,width,30);
        ctx4.fillStyle="#000000";
        ctx4.fillText(strRange+" is empty.",xi+10,yi+18);
        //ONINFOCELL.flag=false;
      } else if (!o.length && !_isEmpty(ao[b].dp) && _cvtZoom(Objects.Zoom)<=1000) {      // DEPTH only
        ctx4.fillRect(xi,yi,width,30);
        ctx4.strokeRect(xi,yi,width,30);
        ctx4.fillStyle="#000000";
        ctx4.fillText(strRange+" Depth is "+ao[b].dp+".",xi+10,yi+18);
        //ONINFOCELL.flag=false;
      } else if ( _cvtZoom(Objects.Zoom)>1000 ) {
        if ( _isEmpty(ao[b].s) && _isEmpty(ao[b].i) && _isEmpty(ao[b].d) ) {
          ctx4.fillRect(xi,yi,width,30);
          ctx4.strokeRect(xi,yi,width,30);
          ctx4.fillStyle="#000000";
          ctx4.fillText(strRange+" Depth is "+ao[b].dp+".",xi+10,yi+18);
          ONINFOCELL.str=strRange+" Depth is "+ao[b].dp+".<br><br>";
          ONINFOCELL.h=30;
        } else {
          var st=new Array();
          var it=new Array();
          var dt=new Array();
          if ( !_isEmpty(ao[b].s) ) st=ao[b].s.split("-");
          if ( !_isEmpty(ao[b].i) ) it=ao[b].i.split("-");
          if ( !_isEmpty(ao[b].d) ) dt=ao[b].d.split("-");
          ctx4.fillRect(xi,yi,width,50);
          ctx4.strokeRect(xi,yi,width,50);
          ctx4.fillStyle="#000000";
          ctx4.fillText(strRange+" Depth is "+ao[b].dp+".",xi+10,yi+18);
          ONINFOCELL.str=strRange+" Depth is "+ao[b].dp+".<br><br>";
          ONINFOCELL.h=50;
          if ( !_isEmpty(st) ) {
            if(parseInt(st[0])>_getMaxGraSNP()){
              ctx4.fillStyle=grad_S(1);
            } else {
              ctx4.fillStyle=grad_S(parseInt(st[0])/_getMaxGraSNP());
            }
            ctx4.fillRect(xi+13,yi+30,10,10);
            ctx4.strokeStyle="#000";
            ctx4.lineWidth=1;
            ctx4.strokeRect(xi+13,yi+30,10,10);
            ctx4.fillStyle="#000";
            ctx4.fillText("SNP="+st[0],xi+27,yi+38);
          } else {
            ctx4.fillStyle="#fff";
            ctx4.fillRect(xi+13,yi+30,10,10);
            ctx4.strokeStyle="#000";
            ctx4.lineWidth=1;
            ctx4.strokeRect(xi+13,yi+30,10,10);
            ctx4.fillStyle="#000";
            ctx4.fillText("SNP=0",xi+27,yi+38);
          }
        }
        if ( !_isEmpty(it) || !_isEmpty(dt)) {
            var sum=0;
            if ( !_isEmpty(it) ) sum = parseInt(it[0]);
            if ( !_isEmpty(dt) ) sum = sum + parseInt(dt[0]);
            if(sum>_getMaxGraINDEL()){
              ctx4.fillStyle=grad_INDEL(1);
            } else {
              ctx4.fillStyle=grad_INDEL(sum/_getMaxGraINDEL());
            }
            ctx4.fillRect(xi+75,yi+30,10,10);
            ctx4.strokeStyle="#000";
            ctx4.lineWidth=1;
            ctx4.strokeRect(xi+75,yi+30,10,10);
            ctx4.fillStyle="#000";
            ctx4.fillText("INDEL="+sum,xi+89,yi+38);
        } else {
            ctx4.fillStyle="#fff";
            ctx4.fillRect(xi+75,yi+30,10,10);
            ctx4.strokeStyle="#000";
            ctx4.lineWidth=1;
            ctx4.strokeRect(xi+75,yi+30,10,10);
            ctx4.fillStyle="#000";
            ctx4.fillText("INDEL=0",xi+89,yi+38);
        }

        if ( Objects.Eff == "on" ) {

          ctx4.fillStyle="blue";
          ctx4.fillText("snpEff: ",xi+150,yi+38);

          if ( !_isEmpty(st) ) {

            var color="";
            if (parseInt(st[1])==0) color="#fff";
            if (parseInt(st[1])==1) color="#00BFFF";
            if (parseInt(st[1])==2) color="#0000FF";
            if (parseInt(st[1])==3) color="#FFFF00";
            if (parseInt(st[1])==4) color="#EE9A00";
            if (parseInt(st[1])==5) color="#8B0000";

            ctx4.fillStyle=color;
            ctx4.fillRect(xi+205,yi+30,10,10);
            ctx4.strokeStyle="#000";
            ctx4.lineWidth=1;
            ctx4.strokeRect(xi+205,yi+30,10,10);
            ctx4.fillStyle="#000";
            ctx4.fillText("SNP "+st[1],xi+220,yi+38);
          } else {
            ctx4.fillStyle="#fff";
            ctx4.fillRect(xi+205,yi+30,10,10);
            ctx4.strokeStyle="#000";
            ctx4.lineWidth=1;
            ctx4.strokeRect(xi+205,yi+30,10,10);
            ctx4.fillStyle="#000";
            ctx4.fillText("SNP 0",xi+220,yi+38);
          }

          if ( !_isEmpty(it) || !_isEmpty(dt)) {

            var comp1=0;
            var comp2=0;
            if ( !_isEmpty(it) ) comp1 = parseInt(it[1]);
            if ( !_isEmpty(dt) ) comp2 = parseInt(dt[1]);

            var max=0;
            if(comp1>comp2){
              max=comp1;
            } else {
              max=comp2;
            }
            if (max==0) color="#E0FFFF";
            if (max==1) color="#00BFFF";
            if (max==2) color="#0000FF";
            if (max==3) color="#FFFF00";
            if (max==4) color="#EE9A00";
            if (max==5) color="#8B0000";

            ctx4.fillStyle=color;
            ctx4.fillRect(xi+260,yi+30,10,10);
            ctx4.strokeStyle="#000";
            ctx4.lineWidth=1;
            ctx4.strokeRect(xi+260,yi+30,10,10);
            ctx4.fillStyle="#000";
            ctx4.fillText("INDEL "+max,xi+274,yi+38);
          } else {
            ctx4.fillStyle="#fff";
            ctx4.fillRect(xi+260,yi+30,10,10);
            ctx4.strokeStyle="#000";
            ctx4.lineWidth=1;
            ctx4.strokeRect(xi+260,yi+30,10,10);
            ctx4.fillStyle="#000";
            ctx4.fillText("INDEL 0",xi+274,yi+38);
          }
        }
      } else if (o.length && !_isEmpty(ao[b].dp)) {       // Variants
        ctx4.fillRect(xi,yi,width,o.length*17+70);
        ctx4.strokeRect(xi,yi,width,o.length*17+70);
        ctx4.fillStyle="#000000";
        ctx4.fillText(strRange+" Depth is "+ao[b].dp+".",xi+10,yi+18);
        ONINFOCELL.str=strRange+" Depth is "+ao[b].dp+".<br><br>";
        ONINFOCELL.h=o.length*17+70;

        var st=new Array();
        var it=new Array();
        var dt=new Array();
        if ( !_isEmpty(ao[b].s) ) st=ao[b].s.split("-");
        if ( !_isEmpty(ao[b].i) ) it=ao[b].i.split("-");
        if ( !_isEmpty(ao[b].d) ) dt=ao[b].d.split("-");

        if ( !_isEmpty(st) ) {
            if(parseInt(st[0])>_getMaxGraSNP()){
              ctx4.fillStyle=grad_S(1);
            } else {
              ctx4.fillStyle=grad_S(parseInt(st[0])/_getMaxGraSNP());
            }
            ctx4.fillRect(xi+13,yi+30,10,10);
            ctx4.strokeStyle="#000";
            ctx4.lineWidth=1;
            ctx4.strokeRect(xi+13,yi+30,10,10);
            ctx4.fillStyle="#000";
            ctx4.fillText("SNP="+st[0],xi+27,yi+38);
        } else {
            ctx4.fillStyle="#fff";
            ctx4.fillRect(xi+13,yi+30,10,10);
            ctx4.strokeStyle="#000";
            ctx4.lineWidth=1;
            ctx4.strokeRect(xi+13,yi+30,10,10);
            ctx4.fillStyle="#000";
            ctx4.fillText("SNP=0",xi+27,yi+38);
        }

        if ( !_isEmpty(it) || !_isEmpty(dt)) {
            var sum=0;
            if ( !_isEmpty(it) ) sum = parseInt(it[0]);
            if ( !_isEmpty(dt) ) sum = sum + parseInt(dt[0]);
            if(sum>_getMaxGraINDEL()){
              ctx4.fillStyle=grad_INDEL(1);
            } else {
              ctx4.fillStyle=grad_INDEL(sum/_getMaxGraINDEL());
            }
            ctx4.fillRect(xi+75,yi+30,10,10);
            ctx4.strokeStyle="#000";
            ctx4.lineWidth=1;
            ctx4.strokeRect(xi+75,yi+30,10,10);
            ctx4.fillStyle="#000";
            ctx4.fillText("INDEL="+sum,xi+89,yi+38);
        } else {
            ctx4.fillStyle="#fff";
            ctx4.fillRect(xi+75,yi+30,10,10);
            ctx4.strokeStyle="#000";
            ctx4.lineWidth=1;
            ctx4.strokeRect(xi+75,yi+30,10,10);
            ctx4.fillStyle="#000";
            ctx4.fillText("INDEL=0",xi+89,yi+38);
        }

        if ( Objects.Eff == "on" ) {

          ctx4.fillStyle="blue";
          ctx4.fillText("snpEff: ",xi+150,yi+38);

          if ( !_isEmpty(st) ) {

            var color="";
            if (parseInt(st[1])==0) color="#fff";
            if (parseInt(st[1])==1) color="#00BFFF";
            if (parseInt(st[1])==2) color="#0000FF";
            if (parseInt(st[1])==3) color="#FFFF00";
            if (parseInt(st[1])==4) color="#EE9A00";
            if (parseInt(st[1])==5) color="#8B0000";

            ctx4.fillStyle=color;
            ctx4.fillRect(xi+205,yi+30,10,10);
            ctx4.strokeStyle="#000";
            ctx4.lineWidth=1;
            ctx4.strokeRect(xi+205,yi+30,10,10);
            ctx4.fillStyle="#000";
            ctx4.fillText("SNP "+st[1],xi+220,yi+38);
          } else {
            ctx4.fillStyle="#fff";
            ctx4.fillRect(xi+205,yi+30,10,10);
            ctx4.strokeStyle="#000";
            ctx4.lineWidth=1;
            ctx4.strokeRect(xi+205,yi+30,10,10);
            ctx4.fillStyle="#000";
            ctx4.fillText("SNP 0",xi+220,yi+38);
          }

          if ( !_isEmpty(it) || !_isEmpty(dt)) {

            var comp1=0;
            var comp2=0;
            if ( !_isEmpty(it) ) comp1 = parseInt(it[1]);
            if ( !_isEmpty(dt) ) comp2 = parseInt(dt[1]);

            var max=0;
            if(comp1>comp2){
              max=comp1;
            } else {
              max=comp2;
            }
            if (max==0) color="#fff";
            if (max==1) color="#00BFFF";
            if (max==2) color="#0000FF";
            if (max==3) color="#FFFF00";
            if (max==4) color="#EE9A00";
            if (max==5) color="#8B0000";

            ctx4.fillStyle=color;
            ctx4.fillRect(xi+260,yi+30,10,10);
            ctx4.strokeStyle="#000";
            ctx4.lineWidth=1;
            ctx4.strokeRect(xi+260,yi+30,10,10);
            ctx4.fillStyle="#000";
            ctx4.fillText("INDEL "+max,xi+274,yi+38);
          } else {
            ctx4.fillStyle="#fff";
            ctx4.fillRect(xi+260,yi+30,10,10);
            ctx4.strokeStyle="#000";
            ctx4.lineWidth=1;
            ctx4.strokeRect(xi+260,yi+30,10,10);
            ctx4.fillStyle="#000";
            ctx4.fillText("INDEL 0",xi+274,yi+38);
          }
        } else if ( Objects.Snpblock != "off" ) {

          var cmp=_getSnpblock(Objects.db[parseInt(y/Objects.BlockH)]);

          if ( !_isEmpty(st) ) {
            if(parseInt(st[0])/_cvtZoom(Objects.Zoom)>=cmp){
              ctx4.fillStyle="blue";
              ctx4.fillText("Snpblock: "+st[0]+"/"+_cvtZoom(Objects.Zoom)+">="+cmp,xi+150,yi+38);
            }
          }
          
        }

        ONINFOCELL.str=ONINFOCELL.str+"POS | TYPE | REF | ALT | GT | QUAL <br>&nbsp;&nbsp;&nbsp; | snpEff<br><br>";
        ctx4.fillStyle="brown";
        ctx4.fillText($.format("%1$9s %2$4s %3$5s %4$5s %5$4s %6$10s","POS","TYPE","REF","ALT","GT","QUAL"),xi+7,yi+60);
        for (i=0; i<o.length; i++) {
          var st=$.format("%1$9s  %2$-4s  %3$-5s %4$-5s %5$-4s %6$10s",o[i].pos,o[i].variant,o[i].ref,o[i].alt,o[i].gt,o[i].qual);
          ctx4.fillStyle="#000";
          ctx4.fillText(st.substr(0,55),xi+7,yi-10+(i+1)*17+70);
          ONINFOCELL.str=ONINFOCELL.str+st+"<br>&nbsp;&nbsp;&nbsp;"+o[i].eff.replace(/,/g,"<br>&nbsp;&nbsp;&nbsp;")+"<br><br>";
        }

      }
    }

    /////////////////////////////////////////////// Details accession on title
    function _draw_detail_accession(i){

      var o=new Object(JSON.parse(localStorage.getItem('_Lists')));

      y=i*Objects.BlockH+30;
      p=i*Objects.BlockH+(Objects.BlockH/2);
      p2=y;
      if ( y+180 > cvs4.height ) {
        y=i*Objects.BlockH-220;
        p2=i*Objects.BlockH-42;
      }

      ctx4.textAlign="left";
      ctx4.fillStyle="#ffffff";
      ctx4.fillRect(70,y,270,180);
      ctx4.strokeStyle="#b0c4de";
      ctx4.lineWidth=5;
      ctx4.strokeRect(70,y,270,180);

      ctx4.fillStyle="#000000";
      ctx4.font="Bold 13px 'Century'";

      ctx4.fillText("ID",100,y+30);
      ctx4.fillText("NAME",100,y+50);
      ctx4.fillText("VARIETY",100,y+70);
      ctx4.fillText("SUB VARIETY",100,y+90);
      ctx4.fillText("ORIGIN",100,y+110);
      ctx4.fillText("ORIGIN 2",100,y+130);
      ctx4.fillText("TYPE",100,y+150);

      ctx4.font="12px 'Century'";
      ctx4.fillText(": "+o[i].id,200,y+30);
      ctx4.fillText(": "+o[i].name,200,y+50);
      ctx4.fillText(": "+o[i].variety,200,y+70);
      ctx4.fillText(": "+o[i].grp,200,y+90);
      ctx4.fillText(": "+o[i].origin,200,y+110);
      ctx4.fillText(": "+o[i].origin_2,200,y+130);
      ctx4.fillText(": "+o[i].type,200,y+150);

      // line between box to list
      ctx4.beginPath();
      ctx4.moveTo(5,p);
      ctx4.lineTo(70,p2);
      ctx4.closePath();
      ctx4.lineWidth=1;
      ctx4.strokeStyle="blue";
      ctx4.stroke();

    }

    ///////////////////////////// Writing accession name
    function _drawTitle(pos) {
      ctx3.clearRect(0,0,cvs3.width,cvs3.height);
      for(var i=0; i<Objects.id.length; i++) {
        if ( Objects.db[i] == localStorage.getItem('_Ref')) {
          ctx3.font="Bold italic 13px 'Courier'";
          ctx3.fillStyle=_setColor().reftitle;
        } else if (pos!=i){
          ctx3.font="11px 'Courier'";
          ctx3.fillStyle=_setColor().title;
        } else {
          ctx3.font="Bold 12px 'Courier'";
          ctx3.fillStyle="#ff8c00";
        }

        if (Objects.Name=="id") ctx3.fillText(Objects.id[i],Objects.titleIndent,Objects.BlockH*i+Objects.titleY);
        else ctx3.fillText(Objects.name[i], Objects.titleIndent, Objects.BlockH*i+Objects.titleY);

        if ( Objects.NameSub == "variety" ) {
          ctx3.fillText(Objects.variety[i], Objects.titleGrp, Objects.BlockH*i+Objects.titleY);
        } else if ( Objects.NameSub == "subvariety" ) {
          ctx3.fillText(Objects.grp[i], Objects.titleGrp, Objects.BlockH*i+Objects.titleY);
        } else if ( Objects.NameSub == "origin" ) {
          ctx3.fillText(Objects.origin[i], Objects.titleGrp, Objects.BlockH*i+Objects.titleY);
        } else if ( Objects.NameSub == "type" ) {
          ctx3.fillText(Objects.type[i], Objects.titleGrp, Objects.BlockH*i+Objects.titleY);
        }
      }
    }

    ///////////////////////////// Drawing null block
    function _drawNULLBlock() {
      for (var y=0; y<Objects.db.length; y++) {
        var o=new Object(JSON.parse(localStorage.getItem(Objects.db[y])));
        for (var x=0; x<o.length; x++) {
          if ( _isEmpty(o[x].dp) ) {
            if (Objects._Null=="true")
              ctx4.fillStyle="PaleGoldenrod";
            else ctx4.fillStyle="white";
            ctx4.fillRect(x*Objects.BlockW, y*Objects.BlockH, Objects.BlockW, Objects.BlockH); 
          }
		  // For changing reference
          if ( Objects.db[y] == localStorage.getItem('_Ref') ) {
            ctx4.fillStyle="#595454";
            ctx4.fillRect(x*Objects.BlockW, y*Objects.BlockH, Objects.BlockW, Objects.BlockH); 
          }
        }
      }
    }

    ///////////////////////////// Drawing Depth block
    function _drawDPBlock() {
      for (var y=0; y<Objects.db.length; y++) {
        var o=new Object(JSON.parse(localStorage.getItem(Objects.db[y])));
        for (var x=0; x<o.length; x++) {
          if ( ! _isEmpty(o[x].dp) ) {
            parseInt(o[x].dp) > 140 ? ctx4.fillStyle=grad_DP(1) : ctx4.fillStyle=grad_DP(parseInt(o[x].dp)/140);
            ctx4.fillRect(x*Objects.BlockW, y*Objects.BlockH, Objects.BlockW, Objects.BlockH); 
          }
          // For changing reference
          if ( Objects.db[y] == localStorage.getItem('_Ref') ) {
            ctx4.fillStyle="#595454";
            ctx4.fillRect(x*Objects.BlockW, y*Objects.BlockH, Objects.BlockW, Objects.BlockH); 
          }
        }
      }
    }

    ///////////////////////////// Drawing Snpblock: Estimation of SNP "blocks"
    function _drawSNPEstimationBlock() {
      for (var y=0; y<Objects.db.length; y++) {
        var cmp=_getSnpblock(Objects.db[y]);
        var o=new Object(JSON.parse(localStorage.getItem(Objects.db[y])));
        for (var x=0; x<o.length; x++) {
          if ( ! _isEmpty(o[x].s) ) {
            var t=o[x].s.split("-");
            if(parseInt(t[0])/_cvtZoom(Objects.Zoom)>=cmp){
              ctx4.fillStyle="rgba(0,255,98,0.4)";
			  //ctx4.fillStyle="rgba(255,0,255,0.4)";
              ctx4.fillRect(x*Objects.BlockW, y*Objects.BlockH, Objects.BlockW, Objects.BlockH); 
            }
          }
          // For changing reference
          if ( Objects.db[y] == localStorage.getItem('_Ref') ) {
            ctx4.fillStyle="#595454";
            ctx4.fillRect(x*Objects.BlockW, y*Objects.BlockH, Objects.BlockW, Objects.BlockH); 
          }
        }
      }
    }

    ///////////////////////////// Drawing SNP block
    function _drawSNPBlock(mode) {
      var snpCnt=new Array();
      var snpMax=0;
      for (var y=0; y<Objects.db.length; y++) {
        var o=new Object(JSON.parse(localStorage.getItem(Objects.db[y])));
        for (var x=0; x<o.length; x++) {
          if (! _isEmpty(o[x].s) ) {
            var t=o[x].s.split("-");
            (_isEmpty(snpCnt[x])) ? snpCnt[x]=parseInt(t[0]) : snpCnt[x]=parseInt(snpCnt[x])+parseInt(t[0]); // for SNP Rate
	    if (Objects.Eff=="off") {
              if(parseInt(t[0])>_getMaxGraSNP()){
                //ctx4.fillStyle=_cvtColorAlpha(grad_S(1));
                ctx4.fillStyle=grad_S(1);
              } else {
                //ctx4.fillStyle=_cvtColorAlpha(grad_S(parseInt(t[0])/_getMaxGraSNP()));
                ctx4.fillStyle=grad_S(parseInt(t[0])/_getMaxGraSNP());
              }
            } else {
              switch(t[1]) {
                case "1":
                  ctx4.fillStyle="#00BFFF";
                  break;
                case "2":
                  ctx4.fillStyle="#0000FF";
                  break;
                case "3":
                  ctx4.fillStyle="#FFFF00";
                  break;
                case "4":
                  ctx4.fillStyle="#EE9A00";
                  break;
                case "5":
                  ctx4.fillStyle="#8B0000";
                  break;
                default:
                  ctx4.fillStyle="#ffffff";
                  break;
              }
            }
            if ( mode == 0 ) {
                //ctx4.fillRect(x*Objects.BlockW, y*Objects.BlockH, Objects.BlockW, Objects.BlockH); 
				ctx4.fillRect(x*Objects.BlockW+(Objects.BlockW/10), (y*Objects.BlockH)+(Objects.BlockH/10), Objects.BlockW/1.25, Objects.BlockH/1.25);
            } else if ( mode == 1 ) {
                ctx4.fillRect(x*Objects.BlockW+(Objects.BlockW/4), (y*Objects.BlockH)+(Objects.BlockH/4), Objects.BlockW/2, Objects.BlockH/2);
            } else if ( mode == 2 ) {
                ctx4.fillRect(x*Objects.BlockW+(Objects.BlockW/4), (y*Objects.BlockH)+(Objects.BlockH/4), Objects.BlockW/2, Objects.BlockH/4);
            } else if (mode ==4 ){
				//ctx4.fillRect(x*Objects.BlockW, y*Objects.BlockH, Objects.BlockW, Objects.BlockH/2);
				ctx4.fillRect(x*Objects.BlockW+(Objects.BlockW/10), (y*Objects.BlockH)+(Objects.BlockH/10), Objects.BlockW/1.25, Objects.BlockH/2.5);
			} else if (mode ==5 ){
				ctx4.fillRect(x*Objects.BlockW+(Objects.BlockW/6), (y*Objects.BlockH)+(Objects.BlockH/6), Objects.BlockW/1.5, Objects.BlockH/1.5);
			}
            if ( mode == 3 ) {
              ctx4.fillRect(x*Objects.BlockW+1, y*Objects.BlockH+1, Objects.BlockW-2, Objects.BlockH-2);
              if ( t[4] == "1/1"  || t[4] == "1|1") {
                ctx4.strokeStyle="#000000";
                ctx4.lineWidth=0.5;
                ctx4.strokeRect(x*Objects.BlockW+0.5, y*Objects.BlockH+0.5, Objects.BlockW-1, Objects.BlockH-1);
              }
              ctx4.font="9px 'Courier'";
              if ( t[1] == "2" && Objects.Eff=="on") {
                ctx4.fillStyle="#fff";
              } else {
                ctx4.fillStyle="#000";
              }
              ctx4.textAlign="center";
              ctx4.fillText(t[3], x*Objects.BlockW+(Objects.BlockW/2), Objects.BlockH*y+Objects.BlockH-(Objects.BlockH/5));
            }
          }
        }
      }

      _drawDensity(snpCnt,"SNP");

    }

    ///////////////////////////// Drawing SNP Rate
    function _drawDensity(snpCnt,str) {

      var snpMax=0;
      ctx6.fillStyle="#ffffff";
      ctx6.fillRect(0,0,cvs6.width,cvs6.height);
      ctx6.strokeStyle="gray";
      ctx6.strokeRect(0,0,cvs6.width,cvs6.height);

      // SNP rate
      for (var k=0; k<Objects.Block;k++)
        if (!_isEmpty(snpCnt[k]))
          if (snpCnt[k]>snpMax)
            snpMax=snpCnt[k];

      // SNP rate
      for(var k=0; k<Objects.Block;k++) {
        if (!_isEmpty(snpCnt[k])) {
          for(var i=0;i<parseInt(10*snpCnt[k]/snpMax);i++) {
            if ( str == "SNP" ) ctx6.fillStyle="blue";
              else ctx6.fillStyle="brown";
            ctx6.fillRect(k*Objects.BlockW+0.5, 18-(i*2), Objects.BlockW-1, 1.2);
          }
        }
      }

      // Mark "SNP Rate"
      ctx5.fillStyle=_setColor().snptitle;
      ctx5.textAlign="left";
      ctx5.fillText(str+" density", 5, cvs5.height-1);
      ctx5.font="10px 'Courier'";
      ctx5.textAlign="right";
      ctx5.fillText(String((snpMax/(Objects.db.length*_cvtZoom(Objects.Zoom))).toFixed(4)),cvs5.width-2, 8);
    }

    ///////////////////////////// Drawing INDEL block
    function _drawINDELBlock(mode) {
      var snpCnt=new Array();
      var snpMax=0;
      for (var y=0; y<Objects.db.length; y++) {
        var o=new Object(JSON.parse(localStorage.getItem(Objects.db[y])));
        for (var x=0; x<o.length; x++) {
          var ti=0;
          var te=0;
          if (!_isEmpty(o[x].i) ) {
            t=o[x].i.split("-");
            ti=parseInt(t[0]);
            te=parseInt(t[1]);
            (_isEmpty(snpCnt[x])) ? snpCnt[x]=parseInt(t[0]) : snpCnt[x]=parseInt(snpCnt[x])+parseInt(t[0]); // for SNP Rate
          }
          if (!_isEmpty(o[x].d) ) {
            t=o[x].d.split("-");
            ti=parseInt(ti)+parseInt(t[0]);
            if ( te < parseInt(t[1]) ) te=parseInt(t[1]);
            (_isEmpty(snpCnt[x])) ? snpCnt[x]=parseInt(t[0]) : snpCnt[x]=parseInt(snpCnt[x])+parseInt(t[0]); // for SNP Rate
          }
          if(!_isEmpty(o[x].i) || !_isEmpty(o[x].d) ){
             if (Objects.Eff=="off") {
               if(parseInt(ti)>_getMaxGraINDEL()){
                 //if ( Objects.Mode == "si" ) {
                 //  ctx4.fillStyle=_cvtColorAlpha(grad_INDEL(1));
                 //} else {
                   ctx4.fillStyle=grad_INDEL(1);
                 //}
               } else {
                 //if ( Objects.Mode == "si" ) {
                 //  ctx4.fillStyle=_cvtColorAlpha(grad_INDEL(ti/_getMaxGraINDEL()));
                 //} else {
                   ctx4.fillStyle=grad_INDEL(ti/_getMaxGraINDEL());
                 //}
               }
             } else {
              switch(te) {
                case 1:
                  ctx4.fillStyle="#00BFFF";
                  break;
                case 2:
                  ctx4.fillStyle="#0000FF";
                  break;
                case 3:
                  ctx4.fillStyle="#FFFF00";
                  break;
                case 4:
                  ctx4.fillStyle="#EE9A00";
                  break;
                case 5:
                  ctx4.fillStyle="#8B0000";
                  break;
                default:
                  ctx4.fillStyle="#FFFFFF";
                  break;
               }
             }
             if ( mode == 0 ) {
               //ctx4.fillRect(x*Objects.BlockW, y*Objects.BlockH, Objects.BlockW, Objects.BlockH); 
			   ctx4.fillRect(x*Objects.BlockW+(Objects.BlockW/10), (y*Objects.BlockH)+(Objects.BlockH/10), Objects.BlockW/1.25, Objects.BlockH/1.25);
             } else if ( mode == 1 ) {
               ctx4.fillRect(x*Objects.BlockW+(Objects.BlockW/4), (y*Objects.BlockH)+(Objects.BlockH/4), Objects.BlockW/2, Objects.BlockH/2);
             } else if ( mode == 2 ) {
               ctx4.fillRect(x*Objects.BlockW+(Objects.BlockW/4), (y*Objects.BlockH)+(Objects.BlockH/4)*2, Objects.BlockW/2, Objects.BlockH/4);
             } else if ( mode == 4 ) {
			   //ctx4.fillRect(x*Objects.BlockW, (y*Objects.BlockH)+(Objects.BlockH/4)*2, Objects.BlockW, Objects.BlockH/2);
				ctx4.fillRect(x*Objects.BlockW+(Objects.BlockW/10), (y*Objects.BlockH)+(Objects.BlockH/4)*2, Objects.BlockW/1.25, Objects.BlockH/2.5);
             } else if ( mode == 3 ) {

               if (!_isEmpty(o[x].i) ) {
                 ctx4.fillRect(x*Objects.BlockW+0.5, y*Objects.BlockH+0.5, Objects.BlockW-1, Objects.BlockH-1);
                 if ( t[4] == "1/1" ) {
                   ctx4.strokeStyle="#000000";
                   ctx4.lineWidth=0.5;
                   ctx4.strokeRect(x*Objects.BlockW+0.5, y*Objects.BlockH+0.5, Objects.BlockW-1, Objects.BlockH-1);
                 }
                 ctx4.fillStyle="#000";
                 ctx4.textAlign="left";
                 //ctx4.fillText(t[3].substring(t[2].length,t[3].length), x*Objects.BlockW+(Objects.BlockW/5)+(Objects.BlockW), Objects.BlockH*y+Objects.BlockH-(Objects.BlockH/4));
				 ctx4.fillText(t[3].substring(1,1+t[3].length-t[2].length), x*Objects.BlockW+(Objects.BlockW/5)+(Objects.BlockW), Objects.BlockH*y+Objects.BlockH-(Objects.BlockH/4));
               }

               if (!_isEmpty(o[x].d) ) {
                 var w=t[2].length-t[3].length;
                 if (w<1) w=1;
                 ctx4.fillRect(x*Objects.BlockW+0.5, y*Objects.BlockH+0.5, w*Objects.BlockW-1, Objects.BlockH-1);
                 if ( t[4] == "1/1" ) {
                   ctx4.strokeStyle="#000000";
                   ctx4.lineWidth=0.5;
                   ctx4.strokeRect(x*Objects.BlockW+0.5, y*Objects.BlockH+0.5, w*Objects.BlockW-1, Objects.BlockH-1);
                 }
                 ctx4.fillStyle="#fff";
                 for (i=0; i<w; i++) {
                   ctx4.textAlign="center";
                   ctx4.fillText("-", x*Objects.BlockW+(i*Objects.BlockW)+parseInt(Objects.BlockW/2), y*Objects.BlockH+parseInt(Objects.BlockH/1.5));
                 }
               }
             }
          }
        }
      }
      if (Objects.Mode != "dp+a" && Objects.Mode != "si") {
        _drawDensity(snpCnt,"INDEL");
      }
    }

    /////////////////////////////////////////////// Redraw when drag
    function _drawDrag(flag) {

      ctx4.clearRect(0, 0, Objects.canvasWidth, Objects.canvasHeight);
      ctx4.putImageData(frameCellwoI, XY.x2-XY.x1, 0);
      ctx2.clearRect(0, 30, cvs2.width, 20);
      ctx2.putImageData(frameNav, XY.x2-XY.x1, 30);
      ctx1.clearRect(0, 0, cvs1.width, cvs1.height);
      ctx1.putImageData(frameTrack, XY.x2-XY.x1, 0);
      ctx6.clearRect(0, 0, cvs6.width, cvs6.height);
      ctx6.putImageData(frameSNP, XY.x2-XY.x1, 0);

      // Current position with on center line
      if ( flag == "onCell" ) {
        ctx4.strokeStyle=_setColor().centeringcell;
        ctx4.lineWidth=2;
        ctx4.strokeRect(0,0,cvs4.width,cvs4.height);
        ctx4.lineWidth=1;
        ctx4.beginPath();
        ctx4.moveTo(cvs4.width/2, 0);
        ctx4.lineTo(cvs4.width/2, cvs4.height);
        ctx4.stroke();

        ctx1.strokeStyle=_setColor().centeringtrack;
        ctx1.lineWidth=1;
        ctx1.beginPath();
        ctx1.moveTo(cvs4.width/2, 0);
        ctx1.lineTo(cvs4.width/2, cvs4.height);
        ctx1.stroke();

        ctx4.strokeStyle="rgba(255,0,0,0.5)";
        ctx4.lineWidth=1;
        ctx4.beginPath();
        ctx4.moveTo(XY.x2, XY.y2);
        ctx4.lineTo(cvs4.width/2, XY.y2);
        ctx4.stroke();

        ctx4.fillStyle="black";
        ctx4.fillText(parseInt((XY.x2-cvs4.width/2)/Objects.BlockW*_cvtZoom(Objects.Zoom))+" from center", XY.x2, XY.y2-5);
      } else {
        ctx4.strokeStyle=_setColor().centeringcell;
        ctx4.lineWidth=2;
        ctx4.strokeRect(0,0,cvs4.width,cvs4.height);
        ctx1.strokeStyle=_setColor().centeringtrack;
        ctx1.lineWidth=1;
        ctx1.beginPath();
        ctx1.moveTo(cvs4.width/2, 0);
        ctx1.lineTo(cvs4.width/2, cvs4.height);
        ctx1.stroke();

        ctx4.strokeStyle=_setColor().centeringcell;
        ctx4.lineWidth=1;
        ctx4.beginPath();
        ctx4.moveTo(cvs4.width/2, 0);
        ctx4.lineTo(cvs4.width/2, cvs4.height);
        ctx4.stroke();

        ctx1.strokeStyle="rgba(255,0,0,0.5)";
        ctx1.lineWidth=1;
        ctx1.beginPath();
        ctx1.moveTo(XY.x2, XY.y2);
        ctx1.lineTo(cvs4.width/2, XY.y2);
        ctx1.stroke();

        ctx1.fillStyle="black";
        ctx1.fillText(parseInt((XY.x2-cvs4.width/2)/Objects.BlockW*_cvtZoom(Objects.Zoom))+" from center", XY.x2, XY.y2-5);
      }

      var m=(XY.x2-XY.x1)%Objects.BlockW;
      var p=Objects.Pos-(XY.x2-XY.x1)/Objects.BlockW;

      if (p>-1 && p+Objects.Block<_last(Objects.Zoom)) _drawMeter(p);
      if ( Objects.Indicator == "on" ) {
        _drawIndicator();
        _drawDirection();
      }

      _drawRules();

    }

    ///////////////////////////// Drawing Indicator
    function _drawIndicator() {

      //var Ix=Objects.Block*Objects.BlockW-155;
	  var Ix=cvs7.width-145;
      var Iy=5;
	  var Ia=0;
	  var element = document.getElementById("ind"); 
	  
	  
      if ( Objects.Eff == "off" ) {
		if (Objects.Snpblock == "off"){
			switch (Objects.Mode) {
			case "dp":
			  element.style.clip = 'rect(32px,150px,165px,0px)';
			  Ia=36;
			  Iy=Iy+Ia;
			  _drawIndicator_DP(Ix,Iy);
			  
			  break;
			case "dp+s":
			   Ia=18;
			   Iy=Iy+Ia;
			   element.style.clip = 'rect(16px,150px,165px,0px)';
			  _drawIndicator_DP(Ix,Iy);
			  _drawIndicator_SNP(Ix,Iy=Iy+18);
			  _drawIndicator_Filter(Ia);
			  break;
			case "dp+i":
			  Ia=18;
			  Iy=Iy+Ia;
			  element.style.clip = 'rect(16px,150px,165px,0px)';
			  _drawIndicator_DP(Ix,Iy);
			  _drawIndicator_INDEL(Ix,Iy=Iy+18);
			  _drawIndicator_Filter(Ia);
			  break;
			case "dp+a":
			  element.style.clip = 'rect(0px,150px,165px,0px)';
			  _drawIndicator_DP(Ix,Iy);
			  _drawIndicator_SNP(Ix,Iy=Iy+18);
			  _drawIndicator_INDEL(Ix,Iy=Iy+18);
			  _drawIndicator_Filter(Ia);
			  break;
			case "s":
			  Ia=36;
			  Iy=Iy+Ia;
			  element.style.clip = 'rect(32px,150px,165px,0px)';
			  _drawIndicator_SNP(Ix,Iy);
			  _drawIndicator_Filter(Ia);
			  break;
			case "i":
			  Ia=36;
			  Iy=Iy+Ia;
			  element.style.clip = 'rect(32px,150px,165px,0px)';
			  _drawIndicator_INDEL(Ix,Iy);
			  _drawIndicator_Filter(Ia);
			  break;
			case "si":
			  Ia=18;
			  Iy=Iy+Ia;
			  element.style.clip = 'rect(16px,150px,165px,0px)';
			  _drawIndicator_SNP(Ix,Iy);
			  _drawIndicator_INDEL(Ix,Iy=Iy+18);
			  _drawIndicator_Filter(Ia);
			  break;
			}
		}else{
			if(Objects.Mode == "dp" || Objects.Mode == "dp+s" || Objects.Mode == "dp+i" || Objects.Mode == "dp+a"){
				element.style.clip = 'rect(0px,150px,165px,0px)';
				_drawIndicator_DP(Ix,Iy);
				_drawIndicator_SNP(Ix,Iy=Iy+18);
				_drawIndicator_SNPblock(Ix,Iy=Iy+18);
				_drawIndicator_Filter(Ia);
			}else{
				Ia=18;
			    Iy=Iy+Ia;
			    element.style.clip = 'rect(16px,150px,165px,0px)';
				_drawIndicator_SNP(Ix,Iy);
				_drawIndicator_SNPblock(Ix,Iy=Iy+18);
				_drawIndicator_Filter(Ia);
			}
		}
      } else {
		switch (Objects.Mode) {
        case "dp":
			element.style.clip = 'rect(32px,150px,165px,0px)';
			Ia=36;
			Iy=Iy+Ia;
			_drawIndicator_DP(Ix,Iy);
			//_drawIndicator_Filter(Ia);
          break;
        case "dp+s":
          Ia=18;
		  Iy=Iy+Ia;
		  element.style.clip = 'rect(16px,150px,165px,0px)';
		  _drawIndicator_DP(Ix,Iy);
          _drawIndicator_EFF(Ix,Iy=Iy+18);
          _drawIndicator_Filter(Ia);
          break;
        case "dp+i":
          Ia=18;
		  Iy=Iy+Ia;
		  element.style.clip = 'rect(16px,150px,165px,0px)';
		  _drawIndicator_DP(Ix,Iy);
          _drawIndicator_EFF(Ix,Iy=Iy+18);
          _drawIndicator_Filter(Ia);
          break;
        case "dp+a":
          Ia=18;
		  Iy=Iy+Ia;
		  element.style.clip = 'rect(16px,150px,165px,0px)';
		  _drawIndicator_DP(Ix,Iy);
          _drawIndicator_EFF(Ix,Iy=Iy+18);
          _drawIndicator_Filter(Ia);
          break;
        case "s":
          Ia=36;
		  Iy=Iy+Ia;
		  element.style.clip = 'rect(32px,150px,165px,0px)';
		  _drawIndicator_EFF(Ix,Iy=Iy);
          _drawIndicator_Filter(Ia);
          break;
        case "i":
          Ia=36;
		  Iy=Iy+Ia;
		  element.style.clip = 'rect(32px,150px,165px,0px)';
		  _drawIndicator_EFF(Ix,Iy=Iy);
          _drawIndicator_Filter(Ia);
          break;
        case "si":
          Ia=36;
		  Iy=Iy+Ia;
		  element.style.clip = 'rect(32px,150px,165px,0px)';
		  _drawIndicator_EFF(Ix,Iy=Iy);
          _drawIndicator_Filter(Ia);
          break;
        }
			//_drawIndicator_DP(Ix,Iy);
			//_drawIndicator_EFF(Ix,Iy=Iy+18);
			//_drawIndicator_Filter();
      }
      if ( Objects._Null == "true" ) {
        _drawIndicator_NULL(Ix,Iy=Iy+18);
      }
      Iy=Iy+18+15; // For border of indicator
      ctx7.strokeStyle="#000080";
      ctx7.lineWidth=3;
      //ctx7.strokeRect(cvs7.width-155,20,140,Iy-20);
	  ctx7.strokeRect(cvs7.width-145,5+Ia,140,Iy-20-Ia);
      
	  // Set information of indicator area
      Objects.Ix=Ix;
      Objects.Iy=Iy;
    }

    // Direction
    function _drawDirection() {

     /* // Horizontal
      ctx7.strokeStyle="black";
      ctx7.lineWidth=5;
      ctx7.beginPath();
      ctx7.moveTo(45, cvs7.height-50);
      ctx7.lineTo(35, cvs7.height-40);
      ctx7.lineTo(45, cvs7.height-30);
      ctx7.moveTo(80, cvs7.height-50);
      ctx7.lineTo(90, cvs7.height-40);
      ctx7.lineTo(80, cvs7.height-30);
      ctx7.stroke();

      // Vertical
      ctx7.fillStyle="black";
      ctx7.fillRect(60,cvs7.height-62,6,18);
      ctx7.fillRect(54,cvs7.height-56,18,6);
      ctx7.fillRect(54,cvs7.height-27,18,6);*/
	  
	   // Horizontal
      ctx7.strokeStyle="black";
      ctx7.lineWidth=4;
      ctx7.beginPath();
      ctx7.moveTo(37, cvs7.height-52);
      ctx7.lineTo(32, cvs7.height-47);
      ctx7.lineTo(37, cvs7.height-42);
	  ctx7.closePath();
      ctx7.moveTo(113, cvs7.height-52);
      ctx7.lineTo(118, cvs7.height-47);
      ctx7.lineTo(113, cvs7.height-42);
	  ctx7.closePath();
	  ctx7.fill();
      ctx7.stroke();

      // Vertical
      ctx7.fillStyle="black";
      ctx7.fillRect(56,cvs7.height-55.5,6,18);
      ctx7.fillRect(50,cvs7.height-50,18,6);
      ctx7.fillRect(80,cvs7.height-50,18,6);
	  
	  // Horizontal L 
	  ctx7.strokeStyle="black";
	  ctx7.lineWidth=4;
      ctx7.beginPath();
      ctx7.moveTo(18, cvs7.height-52);
      ctx7.lineTo(14, cvs7.height-47);
      ctx7.lineTo(18, cvs7.height-42);
	  ctx7.closePath();
	  ctx7.moveTo(11, cvs7.height-52);
      ctx7.lineTo(7, cvs7.height-47);
      ctx7.lineTo(11, cvs7.height-42);
	  ctx7.closePath();
      ctx7.moveTo(139, cvs7.height-52);
      ctx7.lineTo(143, cvs7.height-47);
      ctx7.lineTo(139, cvs7.height-42);
	  ctx7.closePath();
	  ctx7.moveTo(132, cvs7.height-52);
      ctx7.lineTo(136, cvs7.height-47);
      ctx7.lineTo(132, cvs7.height-42);
	  ctx7.closePath();
	  ctx7.fill();
      ctx7.stroke();
	  
    }

    // Indicator: Filter bottom of right side
    function _drawIndicator_Filter(Ia) {
      ctx7.fillStyle="white";
      ctx7.fillRect(cvs7.width-145,cvs7.height-84,140,18);
      ctx7.strokeStyle="#000080";
      ctx7.lineWidth=2.5;
      ctx7.strokeRect(cvs7.width-145,cvs7.height-84,140,18);

      //var str="QUAL>="+localStorage.getItem("_QUAL")+"; DEPTH>="+localStorage.getItem("_DP");
	  var str="QUAL>="+localStorage.getItem("_QUAL")+";";
	  var str2="DEPTH>="+localStorage.getItem("_DP");
	  
      ctx7.fillStyle="black";
      ctx7.textAlign="left";
      ctx7.font="11px 'Courier'";
      ctx7.fillText(str,cvs7.width-142,cvs7.height-72);
	  ctx7.fillText(str2,cvs7.width-70,cvs7.height-72);
	  
    }

    // Indicator: NULL of Depth
    function _drawIndicator_NULL(Ix,Iy) {
        ctx7.fillStyle="#fff";
        ctx7.fillRect(Ix,Iy,140,18);

        ctx7.fillStyle="PaleGoldenrod";
        ctx7.fillRect(Ix+40,Iy+3,80,12);

        ctx7.fillStyle="black";
        ctx7.textAlign="left";
        ctx7.font="10px 'Courier'";
        ctx7.fillText("DEPTH=NULL",Ix+50,Iy+12);
    }

    // Indicator: EFF
    function _drawIndicator_EFF(Ix,Iy) {
          ctx7.fillStyle="#fff";
          ctx7.fillRect(Ix,Iy,140,18);
          ctx7.fillStyle="black";
          ctx7.textAlign="left";
          ctx7.font="10px 'Courier'";
          ctx7.fillText("snpEff",Ix+4,Iy+13);

          ctx7.fillStyle="#00BFFF";
          ctx7.fillRect(Ix+43,Iy+3,17,12);
          ctx7.fillStyle="#0000FF";
          ctx7.fillRect(Ix+62,Iy+3,17,12);
          ctx7.fillStyle="#FFFF00";
          ctx7.fillRect(Ix+81,Iy+3,17,12);
          ctx7.fillStyle="#EE9A00";
          ctx7.fillRect(Ix+100,Iy+3,17,12);
          ctx7.fillStyle="#8B0000";
          ctx7.fillRect(Ix+118,Iy+3,17,12);

          ctx7.textAlign="right";
          ctx7.font="8px 'Courier'";
          ctx7.fillStyle="#000";
          ctx7.fillText("1",Ix+54,Iy+13);
          ctx7.fillStyle="#fff";
          ctx7.fillText("2",Ix+74,Iy+13);
          ctx7.fillStyle="#000";
          ctx7.fillText("3",Ix+91,Iy+13);
          ctx7.fillText("4",Ix+111,Iy+13);
          ctx7.fillStyle="#fff";
          ctx7.fillText("5",Ix+130,Iy+13);
    }

    // Indicator: DEPTH
    function _drawIndicator_DP(Ix,Iy) {
          ctx7.fillStyle="#fff";
          ctx7.fillRect(Ix,Iy,140,18);
          ctx7.fillStyle="black";
          ctx7.textAlign="left";
          ctx7.font="10px 'Courier'";
          ctx7.fillText("DEPTH",Ix+4,Iy+13);

          ctx7.strokeStyle="#000";
          ctx7.lineWidth=0.2;
          ctx7.strokeRect(Ix+43,Iy+3,70,12);
          ctx7.fillStyle=grad_DP(0);
          ctx7.fillRect(Ix+43,Iy+3,17,12);
          ctx7.fillStyle=grad_DP((_getMaxGraDP()*0.25)/_getMaxGraDP());
          ctx7.fillRect(Ix+59,Iy+3,17,12);
          ctx7.fillStyle=grad_DP((_getMaxGraDP()*0.5)/_getMaxGraDP());
          ctx7.fillRect(Ix+76,Iy+3,17,12);
          ctx7.fillStyle=grad_DP((_getMaxGraDP()*0.75)/_getMaxGraDP());
          ctx7.fillRect(Ix+93,Iy+3,17,12);
          ctx7.fillStyle=grad_DP(1);
          ctx7.fillRect(Ix+110,Iy+3,26,12);

          ctx7.textAlign="right";
          ctx7.fillStyle="#000";
          ctx7.fillText("0",Ix+53,Iy+12);
          ctx7.fillStyle="yellow";
          ctx7.fillText(_getMaxGraDP(),Ix+134,Iy+12);
    }

    // Indicator: SNP
    function _drawIndicator_SNP(Ix,Iy) {

		ctx7.fillStyle="#fff";
		ctx7.fillRect(Ix,Iy,140,18);
		
		ctx7.fillStyle="black";
        ctx7.textAlign="left";
        ctx7.font="10px 'Courier'";
        ctx7.fillText("SNP",Ix+5,Iy+13);

        ctx7.strokeStyle="#000";
        ctx7.lineWidth=0.2;
        ctx7.strokeRect(Ix+43,Iy+3,70,12);
        ctx7.fillStyle=grad_S((_getMaxGraSNP()*0.1)/_getMaxGraSNP());
        ctx7.fillRect(Ix+59,Iy+3,17,12);
        ctx7.fillStyle=grad_S((_getMaxGraSNP()*0.3)/_getMaxGraSNP());
        ctx7.fillRect(Ix+76,Iy+3,17,12);
        ctx7.fillStyle=grad_S((_getMaxGraSNP()*0.5)/_getMaxGraSNP());
        ctx7.fillRect(Ix+93,Iy+3,17,12);
        ctx7.fillStyle=grad_S(1);
        ctx7.fillRect(Ix+110,Iy+3,26,12);

        ctx7.fillStyle="#000";
        ctx7.textAlign="right";
        ctx7.fillText("0",Ix+53,Iy+12);
        ctx7.fillText(_getMaxGraSNP(),Ix+133,Iy+12);
      
    }

	
	// Indicator: SNPblock
    function _drawIndicator_SNPblock(Ix,Iy) {

		ctx7.fillStyle="#fff";
		ctx7.fillRect(Ix,Iy,140,18);

        ctx7.fillStyle="rgba(0,255,98,0.4)";
        ctx7.fillRect(Ix+40,Iy+3,60,12);
        ctx7.fillStyle="black";
        ctx7.textAlign="left";
        ctx7.font="10px 'Courier'";
        ctx7.fillText("Snpblock",Ix+47,Iy+12);
      }
    
	
	
    // Indicator: INDEL
    function _drawIndicator_INDEL(Ix,Iy) {
        ctx7.fillStyle="#fff";
        ctx7.fillRect(Ix,Iy,140,18);
        ctx7.fillStyle="black";
        ctx7.textAlign="left";
        ctx7.font="10px 'Courier'";
        ctx7.fillText("INDEL",Ix+5,Iy+13);

        ctx7.strokeStyle="#000";
        ctx7.lineWidth=0.2;
        ctx7.strokeRect(Ix+43,Iy+3,70,12);
        ctx7.fillStyle=grad_INDEL((_getMaxGraINDEL()*0.1)/_getMaxGraINDEL());
        ctx7.fillRect(Ix+59,Iy+3,17,12);
        ctx7.fillStyle=grad_INDEL((_getMaxGraINDEL()*0.3)/_getMaxGraINDEL());
        ctx7.fillRect(Ix+76,Iy+3,17,12);
        ctx7.fillStyle=grad_INDEL((_getMaxGraINDEL()*0.5)/_getMaxGraINDEL());
        ctx7.fillRect(Ix+93,Iy+3,17,12);
        ctx7.fillStyle=grad_INDEL(1);
        ctx7.fillRect(Ix+110,Iy+3,26,12);

        ctx7.fillStyle="#000";
        ctx7.textAlign="right";
        ctx7.fillText("0",Ix+53,Iy+12);
        ctx7.fillStyle="#fff";
        ctx7.fillText(_getMaxGraINDEL(),Ix+133,Iy+12);
    }


    /////////////////////////////////////////////// Convert Canvas to PNG
    function _drawExportImg() {

      var img=new Image();
      var type='image/png';
 
      var pngCanvas = document.createElement("canvas");
      var pngContext =pngCanvas.getContext('2d');
      pngCanvas.width = Objects.titleWidth+Objects.canvasWidth+10;
      pngCanvas.height = Objects.TrackH+Objects.NavH+Objects.canvasHeight+40;
      pngContext.fillStyle=_setColor().bgcolor;
      pngContext.fillRect(0,0,pngCanvas.width, pngCanvas.height);

      pngContext.drawImage(cvs2, Objects.titleWidth+5, 5);
      pngContext.drawImage(cvs0, 5, 60);
      pngContext.drawImage(cvs1, Objects.titleWidth+5, 60);
      pngContext.drawImage(cvs3, 5, Objects.TrackH+Objects.NavH+10);
      pngContext.drawImage(cvs4, Objects.titleWidth+5, Objects.TrackH+Objects.NavH+10);
      pngContext.drawImage(cvs5, 5, pngCanvas.height-25);
      pngContext.drawImage(cvs6, Objects.titleWidth+5, pngCanvas.height-25);

      img.src = pngCanvas.toDataURL(type);

      var pop_win = window.open(
                      "",
                      "_blank",
                      "width=500,height=500,scrollbars=no,resizable=yes"
                    );
      pop_win.window.document.open();
      pop_win.window.document.write(
        '<html>'
        +'<head><title>Exporting image</title></head>'
        +'<body style="margin:0;padding:0;border:0;">'
        +'<img src="'+img.src+'" width="100%" alt="" />'
        +'</body>'
        +'</html>'
      );
      pop_win.window.document.close();

    }


    window.requestAnimFrame = (function(callback) {
      return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
      function(callback) {
        window.setTimeout(callback, 1000 / 60);
      };
    })();

    var myRectangle = {
        x: 0,
        value: true,
    };

    function _clearAnimate() {
      myRectangle.x=0;
      myRectangle.value=false;
    }

    function animate(lastTime, myRectangle) {

      if ( myRectangle.value == true ) {

        // update
        var time = (new Date()).getTime();
        var timeDiff = time - lastTime;

        // pixels / second
        var linearSpeed = 200;
        var linearDistEachFrame = linearSpeed * timeDiff / 1000;
        var currentX = myRectangle.x;

        if(currentX < cvs4.width) {
          var newX = currentX - linearDistEachFrame;
          myRectangle.x = newX;
        } else {
          _clearAnimate();
        }

        // clear
        ctx4.clearRect(0, 0, cvs4.width, cvs4.height);

        // draw
        ctx4.putImageData(frameCellwoI, currentX, 0);

        // request new frame
        requestAnimFrame(function() {
          animate(time, myRectangle);
        });
      }

    }

    /////////////////////////////////////////////// Draw message on canvas
    function _drawMessageOnScreen(str,a,b) {
      ctx4.putImageData(frameCell, 0, 0);
      if ( str == "left" ) {
        ctx4.fillStyle="rgba(0,0,0,0.3)";
        ctx4.beginPath();
        ctx4.moveTo(0,(cvs4.height/8)*3);
        ctx4.lineTo(cvs4.width/10*9,(cvs4.height/8)*3);
        ctx4.lineTo(cvs4.width/10*9,(cvs4.height/8)*2);
        ctx4.lineTo(cvs4.width,(cvs4.height/8)*4);
        ctx4.lineTo(cvs4.width/10*9,(cvs4.height/8)*6);
        ctx4.lineTo(cvs4.width/10*9,(cvs4.height/8)*5);
        ctx4.lineTo(0,(cvs4.height/8)*5);
        ctx4.closePath();
        ctx4.fill();
        ctx4.strokeStyle="yellow";
        ctx4.lineWidth=5;
        ctx4.strokeRect(0,0,1,cvs4.height);
      } else if ( str == "right" ) {
        ctx4.fillStyle="rgba(0,0,0,0.3)";
        ctx4.beginPath();
        ctx4.moveTo(0,cvs4.height/2);
        ctx4.lineTo(cvs4.width/10,(cvs4.height/8)*2);
        ctx4.lineTo(cvs4.width/10,(cvs4.height/8)*3);
        ctx4.lineTo(cvs4.width,(cvs4.height/8)*3);
        ctx4.lineTo(cvs4.width,(cvs4.height/8)*5);
        ctx4.lineTo(cvs4.width/10,(cvs4.height/8)*5);
        ctx4.lineTo(cvs4.width/10,(cvs4.height/8)*6);
        ctx4.closePath();
        ctx4.fill();
        ctx4.strokeStyle="yellow";
        ctx4.lineWidth=5;
        ctx4.strokeRect(cvs4.width-1,0,1,cvs4.height);

//          var date = new Date();
//          var time = date.getTime();
//          myRectangle.value=true;
//          animate(time, myRectangle);

      } else if ( str == "zoomIn" ) {
        var za=parseInt(cvs4.width*_cvtZoom(_cvtZoomDown(Objects.Zoom))/_cvtZoom(Objects.Zoom));
        var zp=(cvs4.width/2)-(za/2);
        ctx4.fillStyle="rgba(0,0,0,0.3)";
        ctx4.fillRect(0,0,zp,cvs4.height);
        ctx4.fillRect(zp+za,0,cvs4.width,cvs4.height);
        ctx4.strokeStyle="yellow";
        ctx4.lineWidth=3;
        ctx4.strokeRect(zp,0,za,cvs4.height);
        ctx4.beginPath();
        ctx4.moveTo(0,cvs4.height/2);
        ctx4.lineTo(zp/5,(cvs4.height/8)*2);
        ctx4.lineTo(zp/5,(cvs4.height/8)*3);
        ctx4.lineTo(zp,(cvs4.height/8)*3);
        ctx4.lineTo(zp,(cvs4.height/8)*5);
        ctx4.lineTo(zp/5,(cvs4.height/8)*5);
        ctx4.lineTo(zp/5,(cvs4.height/8)*6);
        ctx4.closePath();
        ctx4.fill();
        ctx4.beginPath();
        ctx4.moveTo(zp+za,(cvs4.height/8)*3);
        ctx4.lineTo(cvs4.width/10*9,(cvs4.height/8)*3);
        ctx4.lineTo(cvs4.width/10*9,(cvs4.height/8)*2);
        ctx4.lineTo(cvs4.width,(cvs4.height/8)*4);
        ctx4.lineTo(cvs4.width/10*9,(cvs4.height/8)*6);
        ctx4.lineTo(cvs4.width/10*9,(cvs4.height/8)*5);
        ctx4.lineTo(zp+za,(cvs4.height/8)*5);
        ctx4.closePath();
        ctx4.fill();
      } else if ( str == "zoomInC" ) {
        var za=parseInt(cvs4.width*a/b);
        var zp=(cvs4.width/2)-(za/2);
        ctx4.fillStyle="rgba(0,0,0,0.3)";
        ctx4.fillRect(0,0,zp,cvs4.height);
        ctx4.fillRect(zp+za,0,cvs4.width,cvs4.height);
        ctx4.strokeStyle="yellow";
        ctx4.lineWidth=3;
        ctx4.strokeRect(zp,0,za,cvs4.height);
        ctx4.beginPath();
        ctx4.moveTo(0,cvs4.height/2);
        ctx4.lineTo(zp/5,(cvs4.height/8)*2);
        ctx4.lineTo(zp/5,(cvs4.height/8)*3);
        ctx4.lineTo(zp,(cvs4.height/8)*3);
        ctx4.lineTo(zp,(cvs4.height/8)*5);
        ctx4.lineTo(zp/5,(cvs4.height/8)*5);
        ctx4.lineTo(zp/5,(cvs4.height/8)*6);
        ctx4.closePath();
        ctx4.fill();
        ctx4.beginPath();
        ctx4.moveTo(zp+za,(cvs4.height/8)*3);
        ctx4.lineTo(cvs4.width/10*9,(cvs4.height/8)*3);
        ctx4.lineTo(cvs4.width/10*9,(cvs4.height/8)*2);
        ctx4.lineTo(cvs4.width,(cvs4.height/8)*4);
        ctx4.lineTo(cvs4.width/10*9,(cvs4.height/8)*6);
        ctx4.lineTo(cvs4.width/10*9,(cvs4.height/8)*5);
        ctx4.lineTo(zp+za,(cvs4.height/8)*5);
        ctx4.closePath();
        ctx4.fill();
      } else if ( str == "zoomInPos" ) {
        var za=parseInt(cvs4.width*_cvtZoom(_cvtZoomDown(Objects.Zoom))/_cvtZoom(Objects.Zoom));
        var zp=cvs4.width*a/cvs4.width-(za/2);
        ctx4.fillStyle="rgba(0,0,0,0.3)";
        ctx4.fillRect(0,0,zp,cvs4.height);
        ctx4.fillRect(zp+za,0,cvs4.width,cvs4.height);
        ctx4.strokeStyle="yellow";
        ctx4.lineWidth=3;
        ctx4.strokeRect(zp,0,za,cvs4.height);
        ctx4.beginPath();
        ctx4.moveTo(0,cvs4.height/2);
        ctx4.lineTo(zp/5,(cvs4.height/8)*2);
        ctx4.lineTo(zp/5,(cvs4.height/8)*3);
        ctx4.lineTo(zp,(cvs4.height/8)*3);
        ctx4.lineTo(zp,(cvs4.height/8)*5);
        ctx4.lineTo(zp/5,(cvs4.height/8)*5);
        ctx4.lineTo(zp/5,(cvs4.height/8)*6);
        ctx4.closePath();
        ctx4.fill();
        ctx4.beginPath();
        ctx4.moveTo(zp+za,(cvs4.height/8)*3);
        ctx4.lineTo(zp+za+(cvs4.width-zp-za)/5*4,(cvs4.height/8)*3);
        ctx4.lineTo(zp+za+(cvs4.width-zp-za)/5*4,(cvs4.height/8)*2);
        ctx4.lineTo(cvs4.width,(cvs4.height/8)*4);
        ctx4.lineTo(zp+za+(cvs4.width-zp-za)/5*4,(cvs4.height/8)*6);
        ctx4.lineTo(zp+za+(cvs4.width-zp-za)/5*4,(cvs4.height/8)*5);
        ctx4.lineTo(zp+za,(cvs4.height/8)*5);
        ctx4.closePath();
        ctx4.fill();
      }
    }

